@spectrum-web-components/slider 1.2.0-beta.8 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/custom-elements.json +1 -1
  2. package/package.json +8 -8
  3. package/src/Slider.d.ts +1 -1
  4. package/src/Slider.dev.js +13 -2
  5. package/src/Slider.dev.js.map +2 -2
  6. package/src/Slider.js +4 -2
  7. package/src/Slider.js.map +2 -2
  8. package/stories/slider.stories.js +70 -0
  9. package/stories/slider.stories.js.map +2 -2
  10. package/test/slider.test.js +124 -89
  11. package/test/slider.test.js.map +2 -2
package/custom-elements.json CHANGED
@@ -668,7 +668,7 @@
668
668
  "name": "Slider",
669
669
  "slots": [
670
670
  {
671
- "description": "text label for the Slider",
671
+ "description": "@deprecated Text label for the Slider. Use the `label` property instead.",
672
672
  "name": ""
673
673
  },
674
674
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/slider",
3
- "version": "1.2.0-beta.8",
3
+ "version": "1.2.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -76,12 +76,12 @@
76
76
  "dependencies": {
77
77
  "@internationalized/number": "^3.6.0",
78
78
  "@lit-labs/observers": "^2.0.2",
79
- "@spectrum-web-components/base": "^1.2.0-beta.8",
80
- "@spectrum-web-components/field-label": "^1.2.0-beta.8",
81
- "@spectrum-web-components/number-field": "^1.2.0-beta.8",
82
- "@spectrum-web-components/reactive-controllers": "^1.2.0-beta.8",
83
- "@spectrum-web-components/shared": "^1.2.0-beta.8",
84
- "@spectrum-web-components/theme": "^1.2.0-beta.8"
79
+ "@spectrum-web-components/base": "^1.2.0",
80
+ "@spectrum-web-components/field-label": "^1.2.0",
81
+ "@spectrum-web-components/number-field": "^1.2.0",
82
+ "@spectrum-web-components/reactive-controllers": "^1.2.0",
83
+ "@spectrum-web-components/shared": "^1.2.0",
84
+ "@spectrum-web-components/theme": "^1.2.0"
85
85
  },
86
86
  "devDependencies": {
87
87
  "@spectrum-css/slider": "6.0.1"
@@ -93,5 +93,5 @@
93
93
  "./**/*.dev.js",
94
94
  "./sync/sp-*.js"
95
95
  ],
96
- "gitHead": "740377aa5f17e15650d4871e3034bd9c9a2f5c35"
96
+ "gitHead": "e4aec7b389e6209984e4df74f9b86b3ee0c485dd"
97
97
  }
package/src/Slider.d.ts CHANGED
@@ -15,7 +15,7 @@ declare const Slider_base: typeof SliderHandle & {
15
15
  /**
16
16
  * @element sp-slider
17
17
  *
18
- * @slot - text label for the Slider
18
+ * @slot - @deprecated Text label for the Slider. Use the `label` property instead.
19
19
  * @slot handle - optionally accepts two or more sp-slider-handle elements
20
20
  */
21
21
  export declare class Slider extends Slider_base {
package/src/Slider.dev.js CHANGED
@@ -142,8 +142,17 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ""), {
142
142
  `;
143
143
  }
144
144
  connectedCallback() {
145
+ var _a;
145
146
  super.connectedCallback();
146
147
  this.handleController.hostConnected();
148
+ if ((_a = this.textContent) == null ? void 0 : _a.trim()) {
149
+ window.__swc.warn(
150
+ this,
151
+ `The default slot for text label in <${this.localName}> has been deprecated and will be removed in a future release. Use the "label" property instead.`,
152
+ "https://opensource.adobe.com/spectrum-web-components/components/slider/",
153
+ { level: "deprecation" }
154
+ );
155
+ }
147
156
  }
148
157
  disconnectedCallback() {
149
158
  super.disconnectedCallback();
@@ -171,8 +180,10 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ""), {
171
180
  @click=${this.handleLabelClick}
172
181
  size=${this.size}
173
182
  >
174
- ${this.slotHasContent ? nothing : this.label}
175
- <slot>${this.label}</slot>
183
+ ${this.slotHasContent ? nothing : html`
184
+ <span>${this.label}</span>
185
+ `}
186
+ <slot></slot>
176
187
  </sp-field-label>
177
188
  <sp-field-label
178
189
  class=${classMap({
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) && this.fillStart === undefined) {\n this._variant = variant;\n this.setAttribute('variant', variant);\n } else {\n this._variant = '';\n this.removeAttribute('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 * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return distance * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const activeModel = this.handleController.activeHandleModel;\n const centerPointNormalized = activeModel.normalization.toNormalized(\n centerPoint,\n this.min,\n this.max\n );\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n (this.value > centerPoint\n ? centerPointNormalized\n : activeModel.normalizedValue) * 100;\n const offsetWidth = this.getOffsetWidth(\n centerPointNormalized,\n activeModel.normalizedValue\n );\n const styles = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (this._cachedValue === undefined || this.centerPoint === undefined) {\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 private renderHandle(): TemplateResult {\n if (this.variant === 'tick') {\n return html``;\n }\n return html`\n ${this.handleController.render()}\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 { id: 'handles', html: this.renderHandle() },\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 streamOutside: ['dblclick', this.handleDoubleClick],\n })}\n >\n <div id=\"controls\">\n ${this.variant === 'tick'\n ? html`\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 `\n : html`\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n `}\n </div>\n </div>\n `;\n }\n\n protected handleDoubleClick(event: PointerEvent): void {\n this.handleController.handleDoubleClick(event);\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 // Test if fill-start is set without a value\n if (this.getAttribute('fill-start') === '') {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n } else if (!Number.isNaN(Number(this.fillStart))) {\n this.centerPoint = Number(this.fillStart);\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;AAkWvB,SAAQ,oBAAsC,QAAQ,QAAQ;AAAA;AAAA,EAhe9D,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,SAAU;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,KAAK,KAAK,cAAc,QAAW;AAC5D,WAAK,WAAW;AAChB,WAAK,aAAa,WAAW,OAAO;AAAA,IACxC,OAAO;AACH,WAAK,WAAW;AAChB,WAAK,gBAAgB,SAAS;AAAA,IAClC;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,EAWQ,eACJ,gBACA,cACM;AACN,UAAM,WAAW,KAAK,IAAI,eAAe,cAAc;AACvD,WAAO,WAAW;AAAA,EACtB;AAAA,EAEQ,WAAW,aAAgC;AAC/C,UAAM,cAAc,KAAK,iBAAiB;AAC1C,UAAM,wBAAwB,YAAY,cAAc;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,IACT;AACA,UAAM,WAAW,KAAK,QAAQ,QAAQ,UAAU;AAChD,UAAM,kBACD,KAAK,QAAQ,cACR,wBACA,YAAY,mBAAmB;AACzC,UAAM,cAAc,KAAK;AAAA,MACrB;AAAA,MACA,YAAY;AAAA,IAChB;AACA,UAAM,SAAS;AAAA,MACX,CAAC,QAAQ,GAAG,GAAG,cAAc;AAAA,MAC7B,OAAO,GAAG,WAAW;AAAA,IACzB;AACA,WAAO;AAAA,EACX;AAAA,EAEQ,mBAAmC;AACvC,QAAI,KAAK,iBAAiB,UAAa,KAAK,gBAAgB,QAAW;AACnE,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,EACQ,eAA+B;AACnC,QAAI,KAAK,YAAY,QAAQ;AACzB,aAAO;AAAA,IACX;AACA,WAAO;AAAA,cACD,KAAK,iBAAiB,OAAO,CAAC;AAAA;AAAA,EAExC;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,iBAAiB,EAAE;AAAA,MAC5C,EAAE,IAAI,QAAQ,MAAM,KAAK,WAAW,EAAE;AAAA,MACtC,EAAE,IAAI,WAAW,MAAM,KAAK,aAAa,EAAE;AAAA,MAC3C,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,IACN;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,MACA,eAAe,CAAC,YAAY,KAAK,iBAAiB;AAAA,IACtD,CAAC,CAAC;AAAA;AAAA;AAAA,sBAGI,KAAK,YAAY,SACb;AAAA,gCACM,KAAK,YAAY,CAAC;AAAA;AAAA,oCAEd;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA;AAAA;AAAA,oCAGC;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA;AAAA,8BAGT;AAAA,gCACM;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA,2BACJ;AAAA;AAAA;AAAA;AAAA,EAIvB;AAAA,EAEU,kBAAkB,OAA2B;AACnD,SAAK,iBAAiB,kBAAkB,KAAK;AAAA,EACjD;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;AAhf5E;AAifQ,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;AA3f7E;AA4fQ,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,2CAA2C,GAAI,IAAI,OAAQ,GAAG;AAAA,MAC9D,4CAA4C,GAAG,QAAQ,GAAG;AAAA,IAC9D;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;AAErC,UAAI,KAAK,aAAa,YAAY,MAAM,IAAI;AACxC,aAAK,eACA,OAAO,KAAK,GAAG,IAAI,OAAO,KAAK,GAAG,KAAK,IACxC,OAAO,KAAK,GAAG;AAAA,MACvB,WAAW,CAAC,OAAO,MAAM,OAAO,KAAK,SAAS,CAAC,GAAG;AAC9C,aAAK,cAAc,OAAO,KAAK,SAAS;AAAA,MAC5C;AAAA,IACJ;AAAA,EACJ;AACJ;AA7ee;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 - @deprecated Text label for the Slider. Use the `label` property instead.\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) && this.fillStart === undefined) {\n this._variant = variant;\n this.setAttribute('variant', variant);\n } else {\n this._variant = '';\n this.removeAttribute('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 // Deprecation warning for default slot when content is provided\n if (window.__swc.DEBUG && this.textContent?.trim()) {\n window.__swc.warn(\n this,\n `The default slot for text label in <${this.localName}> has been deprecated and will be removed in a future release. Use the \"label\" property instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/slider/',\n { level: 'deprecation' }\n );\n }\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\n ? nothing\n : html`\n <span>${this.label}</span>\n `}\n <slot></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 * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return distance * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const activeModel = this.handleController.activeHandleModel;\n const centerPointNormalized = activeModel.normalization.toNormalized(\n centerPoint,\n this.min,\n this.max\n );\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n (this.value > centerPoint\n ? centerPointNormalized\n : activeModel.normalizedValue) * 100;\n const offsetWidth = this.getOffsetWidth(\n centerPointNormalized,\n activeModel.normalizedValue\n );\n const styles = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (this._cachedValue === undefined || this.centerPoint === undefined) {\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 private renderHandle(): TemplateResult {\n if (this.variant === 'tick') {\n return html``;\n }\n return html`\n ${this.handleController.render()}\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 { id: 'handles', html: this.renderHandle() },\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 streamOutside: ['dblclick', this.handleDoubleClick],\n })}\n >\n <div id=\"controls\">\n ${this.variant === 'tick'\n ? html`\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 `\n : html`\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n `}\n </div>\n </div>\n `;\n }\n\n protected handleDoubleClick(event: PointerEvent): void {\n this.handleController.handleDoubleClick(event);\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 // Test if fill-start is set without a value\n if (this.getAttribute('fill-start') === '') {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n } else if (!Number.isNaN(Number(this.fillStart))) {\n this.centerPoint = Number(this.fillStart);\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;AAgXvB,SAAQ,oBAAsC,QAAQ,QAAQ;AAAA;AAAA,EA9e9D,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,SAAU;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,KAAK,KAAK,cAAc,QAAW;AAC5D,WAAK,WAAW;AAChB,WAAK,aAAa,WAAW,OAAO;AAAA,IACxC,OAAO;AACH,WAAK,WAAW;AAChB,WAAK,gBAAgB,SAAS;AAAA,IAClC;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;AAtO9C;AAuOQ,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,cAAc;AAGpC,SAA0B,UAAK,gBAAL,mBAAkB,QAAQ;AAChD,aAAO,MAAM;AAAA,QACT;AAAA,QACA,uCAAuC,KAAK,SAAS;AAAA,QACrD;AAAA,QACA,EAAE,OAAO,cAAc;AAAA,MAC3B;AAAA,IACJ;AAAA,EACJ;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,iBACD,UACA;AAAA,sCACY,KAAK,KAAK;AAAA,2BACrB;AAAA;AAAA;AAAA;AAAA,4BAIC,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,EAWQ,eACJ,gBACA,cACM;AACN,UAAM,WAAW,KAAK,IAAI,eAAe,cAAc;AACvD,WAAO,WAAW;AAAA,EACtB;AAAA,EAEQ,WAAW,aAAgC;AAC/C,UAAM,cAAc,KAAK,iBAAiB;AAC1C,UAAM,wBAAwB,YAAY,cAAc;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,IACT;AACA,UAAM,WAAW,KAAK,QAAQ,QAAQ,UAAU;AAChD,UAAM,kBACD,KAAK,QAAQ,cACR,wBACA,YAAY,mBAAmB;AACzC,UAAM,cAAc,KAAK;AAAA,MACrB;AAAA,MACA,YAAY;AAAA,IAChB;AACA,UAAM,SAAS;AAAA,MACX,CAAC,QAAQ,GAAG,GAAG,cAAc;AAAA,MAC7B,OAAO,GAAG,WAAW;AAAA,IACzB;AACA,WAAO;AAAA,EACX;AAAA,EAEQ,mBAAmC;AACvC,QAAI,KAAK,iBAAiB,UAAa,KAAK,gBAAgB,QAAW;AACnE,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,EACQ,eAA+B;AACnC,QAAI,KAAK,YAAY,QAAQ;AACzB,aAAO;AAAA,IACX;AACA,WAAO;AAAA,cACD,KAAK,iBAAiB,OAAO,CAAC;AAAA;AAAA,EAExC;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,iBAAiB,EAAE;AAAA,MAC5C,EAAE,IAAI,QAAQ,MAAM,KAAK,WAAW,EAAE;AAAA,MACtC,EAAE,IAAI,WAAW,MAAM,KAAK,aAAa,EAAE;AAAA,MAC3C,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,IACN;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,MACA,eAAe,CAAC,YAAY,KAAK,iBAAiB;AAAA,IACtD,CAAC,CAAC;AAAA;AAAA;AAAA,sBAGI,KAAK,YAAY,SACb;AAAA,gCACM,KAAK,YAAY,CAAC;AAAA;AAAA,oCAEd;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA;AAAA;AAAA,oCAGC;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA;AAAA,8BAGT;AAAA,gCACM;AAAA,MACE;AAAA,MACA,CAAC,SAAS,KAAK;AAAA,MACf,CAAC,SAAS,KAAK;AAAA,IACnB,CAAC;AAAA,2BACJ;AAAA;AAAA;AAAA;AAAA,EAIvB;AAAA,EAEU,kBAAkB,OAA2B;AACnD,SAAK,iBAAiB,kBAAkB,KAAK;AAAA,EACjD;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;AA9f5E;AA+fQ,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;AAzgB7E;AA0gBQ,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,2CAA2C,GAAI,IAAI,OAAQ,GAAG;AAAA,MAC9D,4CAA4C,GAAG,QAAQ,GAAG;AAAA,IAC9D;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;AAErC,UAAI,KAAK,aAAa,YAAY,MAAM,IAAI;AACxC,aAAK,eACA,OAAO,KAAK,GAAG,IAAI,OAAO,KAAK,GAAG,KAAK,IACxC,OAAO,KAAK,GAAG;AAAA,MACvB,WAAW,CAAC,OAAO,MAAM,OAAO,KAAK,SAAS,CAAC,GAAG;AAC9C,aAAK,cAAc,OAAO,KAAK,SAAS;AAAA,MAC5C;AAAA,IACJ;AAAA,EACJ;AACJ;AA3fe;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;",
6
6
  "names": []
7
7
  }
package/src/Slider.js CHANGED
@@ -27,8 +27,10 @@
27
27
  @click=${this.handleLabelClick}
28
28
  size=${this.size}
29
29
  >
30
- ${this.slotHasContent?h:this.label}
31
- <slot>${this.label}</slot>
30
+ ${this.slotHasContent?h:a`
31
+ <span>${this.label}</span>
32
+ `}
33
+ <slot></slot>
32
34
  </sp-field-label>
33
35
  <sp-field-label
34
36
  class=${c({"visually-hidden":t})}
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) && this.fillStart === undefined) {\n this._variant = variant;\n this.setAttribute('variant', variant);\n } else {\n this._variant = '';\n this.removeAttribute('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 * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return distance * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const activeModel = this.handleController.activeHandleModel;\n const centerPointNormalized = activeModel.normalization.toNormalized(\n centerPoint,\n this.min,\n this.max\n );\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n (this.value > centerPoint\n ? centerPointNormalized\n : activeModel.normalizedValue) * 100;\n const offsetWidth = this.getOffsetWidth(\n centerPointNormalized,\n activeModel.normalizedValue\n );\n const styles = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (this._cachedValue === undefined || this.centerPoint === undefined) {\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 private renderHandle(): TemplateResult {\n if (this.variant === 'tick') {\n return html``;\n }\n return html`\n ${this.handleController.render()}\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 { id: 'handles', html: this.renderHandle() },\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 streamOutside: ['dblclick', this.handleDoubleClick],\n })}\n >\n <div id=\"controls\">\n ${this.variant === 'tick'\n ? html`\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 `\n : html`\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n `}\n </div>\n </div>\n `;\n }\n\n protected handleDoubleClick(event: PointerEvent): void {\n this.handleController.handleDoubleClick(event);\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 // Test if fill-start is set without a value\n if (this.getAttribute('fill-start') === '') {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n } else if (!Number.isNaN(Number(this.fillStart))) {\n this.centerPoint = Number(this.fillStart);\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 - @deprecated Text label for the Slider. Use the `label` property instead.\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) && this.fillStart === undefined) {\n this._variant = variant;\n this.setAttribute('variant', variant);\n } else {\n this._variant = '';\n this.removeAttribute('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 // Deprecation warning for default slot when content is provided\n if (window.__swc.DEBUG && this.textContent?.trim()) {\n window.__swc.warn(\n this,\n `The default slot for text label in <${this.localName}> has been deprecated and will be removed in a future release. Use the \"label\" property instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/slider/',\n { level: 'deprecation' }\n );\n }\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\n ? nothing\n : html`\n <span>${this.label}</span>\n `}\n <slot></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 * @returns\n */\n private getOffsetWidth(\n fillStartValue: number,\n currentValue: number\n ): number {\n const distance = Math.abs(currentValue - fillStartValue);\n return distance * 100;\n }\n\n private fillStyles(centerPoint: number): StyleInfo {\n const activeModel = this.handleController.activeHandleModel;\n const centerPointNormalized = activeModel.normalization.toNormalized(\n centerPoint,\n this.min,\n this.max\n );\n const position = this.dir === 'rtl' ? 'right' : 'left';\n const offsetPosition =\n (this.value > centerPoint\n ? centerPointNormalized\n : activeModel.normalizedValue) * 100;\n const offsetWidth = this.getOffsetWidth(\n centerPointNormalized,\n activeModel.normalizedValue\n );\n const styles = {\n [position]: `${offsetPosition}%`,\n width: `${offsetWidth}%`,\n };\n return styles;\n }\n\n private renderFillOffset(): TemplateResult {\n if (this._cachedValue === undefined || this.centerPoint === undefined) {\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 private renderHandle(): TemplateResult {\n if (this.variant === 'tick') {\n return html``;\n }\n return html`\n ${this.handleController.render()}\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 { id: 'handles', html: this.renderHandle() },\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 streamOutside: ['dblclick', this.handleDoubleClick],\n })}\n >\n <div id=\"controls\">\n ${this.variant === 'tick'\n ? html`\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 `\n : html`\n ${repeat(\n trackItems,\n (item) => item.id,\n (item) => item.html\n )}\n `}\n </div>\n </div>\n `;\n }\n\n protected handleDoubleClick(event: PointerEvent): void {\n this.handleController.handleDoubleClick(event);\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 // Test if fill-start is set without a value\n if (this.getAttribute('fill-start') === '') {\n this.centerPoint =\n (Number(this.max) - Number(this.min)) / 2 +\n Number(this.min);\n } else if (!Number.isNaN(Number(this.fillStart))) {\n this.centerPoint = Number(this.fillStart);\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", "centerPoint", "activeModel", "centerPointNormalized", "position", "offsetPosition", "offsetWidth", "segments", "handleItems", "trackItems", "index", "item", "_a", "value", "size", "complete", "changed", "__decorateClass"]
7
7
  }
package/stories/slider.stories.js CHANGED
@@ -8,6 +8,7 @@ import {
8
8
  variants
9
9
  } from "@spectrum-web-components/slider";
10
10
  import { spreadProps } from "../../../test/lit-helpers.js";
11
+ import "@spectrum-web-components/overlay/overlay-trigger.js";
11
12
  export default {
12
13
  component: "sp-slider",
13
14
  title: "Slider",
@@ -1118,4 +1119,73 @@ export const focusTabDemo = (args = {}) => {
1118
1119
  </div>
1119
1120
  `;
1120
1121
  };
1122
+ export const WithPopover = (args = {}) => {
1123
+ return html`
1124
+ <div style="width: 500px; margin: 12px 20px;">
1125
+ <sp-slider
1126
+ id="slider-with-popover"
1127
+ label="Slider without Popover"
1128
+ variant="filled"
1129
+ max="100"
1130
+ min="0"
1131
+ step="5"
1132
+ value="50"
1133
+ editable
1134
+ @input=${handleEvent(args)}
1135
+ @change=${handleEvent(args)}
1136
+ ...=${spreadProps(args)}
1137
+ ></sp-slider>
1138
+ <overlay-trigger placement="top">
1139
+ <sp-slider
1140
+ slot="trigger"
1141
+ id="slider-with-popover"
1142
+ label="Label in attribute"
1143
+ variant="filled"
1144
+ max="100"
1145
+ min="0"
1146
+ step="5"
1147
+ value="50"
1148
+ editable
1149
+ @input=${handleEvent(args)}
1150
+ @change=${handleEvent(args)}
1151
+ ...=${spreadProps(args)}
1152
+ ></sp-slider>
1153
+ <sp-popover slot="hover-content" tip>
1154
+ Hover content for the slider
1155
+ </sp-popover>
1156
+ </overlay-trigger>
1157
+
1158
+ <overlay-trigger placement="top">
1159
+ <sp-slider
1160
+ slot="trigger"
1161
+ id="slider-with-popover"
1162
+ variant="filled"
1163
+ max="100"
1164
+ min="0"
1165
+ step="5"
1166
+ value="50"
1167
+ editable
1168
+ @input=${handleEvent(args)}
1169
+ @change=${handleEvent(args)}
1170
+ ...=${spreadProps(args)}
1171
+ >
1172
+ Label in slot
1173
+ </sp-slider>
1174
+ <sp-popover slot="hover-content" tip>
1175
+ Hover content for the slider
1176
+ </sp-popover>
1177
+ </overlay-trigger>
1178
+ </div>
1179
+ `;
1180
+ };
1181
+ WithPopover.args = {
1182
+ variant: "filled"
1183
+ };
1184
+ WithPopover.parameters = {
1185
+ docs: {
1186
+ description: {
1187
+ story: "A slider with a popover that appears on hover."
1188
+ }
1189
+ }
1190
+ };
1121
1191
  //# sourceMappingURL=slider.stories.js.map