@spectrum-web-components/slider 0.42.0 → 0.42.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -2
- package/package.json +9 -9
- package/src/Slider.dev.js +1 -1
- package/src/Slider.dev.js.map +2 -2
- package/src/Slider.js +1 -1
- package/src/Slider.js.map +2 -2
- package/stories/slider.stories.js +2 -0
- package/stories/slider.stories.js.map +2 -2
- package/test/slider.test.js +1 -0
- package/test/slider.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -102,13 +102,16 @@ import { Slider } from '@spectrum-web-components/slider';
|
|
|
102
102
|
></sp-slider>
|
|
103
103
|
```
|
|
104
104
|
|
|
105
|
-
###
|
|
105
|
+
### fill-start
|
|
106
|
+
|
|
107
|
+
When both `fill-start` and `variant="filled"` are used in `<sp-slider>`, the `fill-start` property takes priority, and the `variant="filled"` css will not apply.
|
|
106
108
|
|
|
107
109
|
```html
|
|
108
110
|
<sp-slider
|
|
109
111
|
label="Slider Label"
|
|
110
112
|
max="1"
|
|
111
113
|
fill-start
|
|
114
|
+
variant="filled"
|
|
112
115
|
min="0"
|
|
113
116
|
value=".5"
|
|
114
117
|
step="0.01"
|
|
@@ -117,6 +120,7 @@ import { Slider } from '@spectrum-web-components/slider';
|
|
|
117
120
|
label="Slider Label"
|
|
118
121
|
max="1"
|
|
119
122
|
fill-start
|
|
123
|
+
variant="filled"
|
|
120
124
|
min="0"
|
|
121
125
|
value=".5"
|
|
122
126
|
step="0.01"
|
|
@@ -124,7 +128,7 @@ import { Slider } from '@spectrum-web-components/slider';
|
|
|
124
128
|
></sp-slider>
|
|
125
129
|
```
|
|
126
130
|
|
|
127
|
-
###
|
|
131
|
+
### fill-start with value
|
|
128
132
|
|
|
129
133
|
```html
|
|
130
134
|
<sp-slider
|
|
@@ -135,6 +139,7 @@ import { Slider } from '@spectrum-web-components/slider';
|
|
|
135
139
|
value=".3"
|
|
136
140
|
step="0.1"
|
|
137
141
|
fill-start="0.7"
|
|
142
|
+
variant="filled"
|
|
138
143
|
></sp-slider>
|
|
139
144
|
<sp-slider
|
|
140
145
|
id="fill-start-slider"
|
|
@@ -144,6 +149,7 @@ import { Slider } from '@spectrum-web-components/slider';
|
|
|
144
149
|
value=".7"
|
|
145
150
|
step="0.1"
|
|
146
151
|
fill-start="0.25"
|
|
152
|
+
variant="filled"
|
|
147
153
|
></sp-slider>
|
|
148
154
|
<sp-slider
|
|
149
155
|
label="Slider Label"
|
|
@@ -152,6 +158,7 @@ import { Slider } from '@spectrum-web-components/slider';
|
|
|
152
158
|
value=".7"
|
|
153
159
|
step="0.1"
|
|
154
160
|
fill-start="0.25"
|
|
161
|
+
variant="filled"
|
|
155
162
|
disabled
|
|
156
163
|
></sp-slider>
|
|
157
164
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/slider",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.2",
|
|
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.42.
|
|
79
|
-
"@spectrum-web-components/field-label": "^0.42.
|
|
80
|
-
"@spectrum-web-components/number-field": "^0.42.
|
|
81
|
-
"@spectrum-web-components/reactive-controllers": "^0.42.
|
|
82
|
-
"@spectrum-web-components/shared": "^0.42.
|
|
83
|
-
"@spectrum-web-components/theme": "^0.42.
|
|
78
|
+
"@spectrum-web-components/base": "^0.42.2",
|
|
79
|
+
"@spectrum-web-components/field-label": "^0.42.2",
|
|
80
|
+
"@spectrum-web-components/number-field": "^0.42.2",
|
|
81
|
+
"@spectrum-web-components/reactive-controllers": "^0.42.2",
|
|
82
|
+
"@spectrum-web-components/shared": "^0.42.2",
|
|
83
|
+
"@spectrum-web-components/theme": "^0.42.2"
|
|
84
84
|
},
|
|
85
85
|
"devDependencies": {
|
|
86
|
-
"@spectrum-css/slider": "^4.3.
|
|
86
|
+
"@spectrum-css/slider": "^4.3.5"
|
|
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": "
|
|
95
|
+
"gitHead": "e19af30387032608baaa88c6a17c2ee50103a7c5"
|
|
96
96
|
}
|
package/src/Slider.dev.js
CHANGED
|
@@ -85,7 +85,7 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ""), {
|
|
|
85
85
|
if (variant === this.variant) {
|
|
86
86
|
return;
|
|
87
87
|
}
|
|
88
|
-
if (variants.includes(variant)) {
|
|
88
|
+
if (variants.includes(variant) && this.fillStart === void 0) {
|
|
89
89
|
this.setAttribute("variant", variant);
|
|
90
90
|
this._variant = variant;
|
|
91
91
|
} else {
|
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 * @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 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 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;AAiWvB,SAAQ,oBAAsC,QAAQ,QAAQ;AAAA;AAAA,EA/d9D,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,
|
|
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.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 * @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 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 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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(d,o,e,t)=>{for(var i=t>1?void 0:t?f(o,e):o,r=d.length-1,s;r>=0;r--)(s=d[r])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&v(o,e,i),i};import{html as a,nothing as h,SizedMixin as g}from"@spectrum-web-components/base";import{property as n,query as p}from"@spectrum-web-components/base/src/decorators.js";import{classMap as c,ifDefined as y,repeat as m,styleMap as b}from"@spectrum-web-components/base/src/directives.js";import $ from"./slider.css.js";import{ObserveSlotText as k}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/field-label/sp-field-label.js";import{HandleController as C}from"./HandleController.js";import{SliderHandle as P}from"./SliderHandle.js";import{streamingListener as N}from"@spectrum-web-components/base/src/streaming-listener.js";export const variants=["filled","ramp","range","tick"];export class Slider extends g(k(P,""),{noDefaultSize:!0,validSizes:["s","m","l","xl"]}){constructor(){super(...arguments);this.handleController=new C(this);this._editable=!1;this.hideStepper=!1;this.type="";this._variant="";this.getAriaValueText=e=>{const t=[...e.values()];return t.length===2?`${t[0]} - ${t[1]}`:t.join(", ")};this.min=0;this.max=100;this.step=1;this.tickStep=0;this.tickLabels=!1;this.disabled=!1;this.quiet=!1;this.indeterminate=!1;this._numberFieldInput=Promise.resolve()}static get styles(){return[$]}get editable(){return this._editable}set editable(e){if(e===this.editable)return;const t=this.editable;this._editable=this.handleController.size<2?e:!1,this.editable&&(this._numberFieldInput=import("@spectrum-web-components/number-field/sp-number-field.js")),t!==this.editable&&this.requestUpdate("editable",t)}set variant(e){const t=this.variant;e!==this.variant&&(variants.includes(e)?(this.setAttribute("variant",e),this._variant=e):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",t))}get variant(){return this._variant}get values(){return this.handleController.values}get handleName(){return"value"}get ariaValueText(){return this.getAriaValueText?this.getAriaValueText(this.handleController.formattedValues):`${this.value}${this._forcedUnit}`}get numberFormat(){return this.getNumberFormat()}get focusElement(){return this.handleController.focusElement}handleLabelClick(e){this.editable&&(e.preventDefault(),this.focus())}render(){return a`
|
|
1
|
+
"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(d,o,e,t)=>{for(var i=t>1?void 0:t?f(o,e):o,r=d.length-1,s;r>=0;r--)(s=d[r])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&v(o,e,i),i};import{html as a,nothing as h,SizedMixin as g}from"@spectrum-web-components/base";import{property as n,query as p}from"@spectrum-web-components/base/src/decorators.js";import{classMap as c,ifDefined as y,repeat as m,styleMap as b}from"@spectrum-web-components/base/src/directives.js";import $ from"./slider.css.js";import{ObserveSlotText as k}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/field-label/sp-field-label.js";import{HandleController as C}from"./HandleController.js";import{SliderHandle as P}from"./SliderHandle.js";import{streamingListener as N}from"@spectrum-web-components/base/src/streaming-listener.js";export const variants=["filled","ramp","range","tick"];export class Slider extends g(k(P,""),{noDefaultSize:!0,validSizes:["s","m","l","xl"]}){constructor(){super(...arguments);this.handleController=new C(this);this._editable=!1;this.hideStepper=!1;this.type="";this._variant="";this.getAriaValueText=e=>{const t=[...e.values()];return t.length===2?`${t[0]} - ${t[1]}`:t.join(", ")};this.min=0;this.max=100;this.step=1;this.tickStep=0;this.tickLabels=!1;this.disabled=!1;this.quiet=!1;this.indeterminate=!1;this._numberFieldInput=Promise.resolve()}static get styles(){return[$]}get editable(){return this._editable}set editable(e){if(e===this.editable)return;const t=this.editable;this._editable=this.handleController.size<2?e:!1,this.editable&&(this._numberFieldInput=import("@spectrum-web-components/number-field/sp-number-field.js")),t!==this.editable&&this.requestUpdate("editable",t)}set variant(e){const t=this.variant;e!==this.variant&&(variants.includes(e)&&this.fillStart===void 0?(this.setAttribute("variant",e),this._variant=e):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",t))}get variant(){return this._variant}get values(){return this.handleController.values}get handleName(){return"value"}get ariaValueText(){return this.getAriaValueText?this.getAriaValueText(this.handleController.formattedValues):`${this.value}${this._forcedUnit}`}get numberFormat(){return this.getNumberFormat()}get focusElement(){return this.handleController.focusElement}handleLabelClick(e){this.editable&&(e.preventDefault(),this.focus())}render(){return a`
|
|
2
2
|
${this.renderLabel()} ${this.renderTrack()}
|
|
3
3
|
${this.editable?a`
|
|
4
4
|
<sp-number-field
|
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 * @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 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 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": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,cAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OACI,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,YAAAC,MACG,kDAEP,OAAOC,MAAkB,kBACzB,OAAS,mBAAAC,MAAuB,2DAEhC,MAAO,yDAEP,OAAS,oBAAAC,MAA+C,wBACxD,OAAS,gBAAAC,MAAoB,oBAC7B,OAAS,qBAAAC,MAAyB,0DAG3B,aAAM,SAAW,CAAC,SAAU,OAAQ,QAAS,MAAM,EAQnD,aAAM,eAAeX,EAAWQ,EAAgBE,EAAc,EAAE,EAAG,CACtE,cAAe,GACf,WAAY,CAAC,IAAK,IAAK,IAAK,IAAI,CACpC,CAAC,CAAE,CAHI,kCAQH,KAAgB,iBAAqC,IAAID,EACrD,IACJ,EAwBA,KAAQ,UAAY,GAMpB,KAAO,YAAc,GAGrB,KAAO,KAAO,GAkCd,KAAQ,SAAW,GAGnB,KAAO,iBACHG,GACC,CACD,MAAMC,EAAa,CAAC,GAAGD,EAAO,OAAO,CAAC,EACtC,OAAIC,EAAW,SAAW,EACf,GAAGA,EAAW,CAAC,CAAC,MAAMA,EAAW,CAAC,CAAC,GACvCA,EAAW,KAAK,IAAI,CAC/B,EAaA,KAAgB,IAAM,EAGtB,KAAgB,IAAM,IAGtB,KAAgB,KAAO,EAGvB,KAAO,SAAW,EAGlB,KAAO,WAAa,GAGpB,KAAgB,SAAW,GAS3B,KAAO,MAAQ,GAMf,KAAO,cAAgB,GAiWvB,KAAQ,kBAAsC,QAAQ,QAAQ,EA/d9D,WAA2B,QAAyB,CAChD,MAAO,CAACN,CAAY,CACxB,CAUA,IAAW,UAAoB,CAC3B,OAAO,KAAK,SAChB,CAEA,IAAW,SAASO,EAAmB,CACnC,GAAIA,IAAa,KAAK,SAAU,OAChC,MAAMC,EAAW,KAAK,SACtB,KAAK,UAAY,KAAK,iBAAiB,KAAO,EAAID,EAAW,GACzD,KAAK,WACL,KAAK,kBAAoB,OACrB,0DACJ,GAEAC,IAAa,KAAK,UAClB,KAAK,cAAc,WAAYA,CAAQ,CAE/C,CAiBA,IAAW,QAAQC,EAAiB,CAChC,MAAMC,EAAa,KAAK,QACpBD,IAAY,KAAK,UAGjB,SAAS,SAASA,CAAO,
|
|
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.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 * @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 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 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
|
}
|
|
@@ -145,6 +145,7 @@ export const FillStart = (args = {}) => {
|
|
|
145
145
|
<sp-slider
|
|
146
146
|
max="1"
|
|
147
147
|
fill-start
|
|
148
|
+
variant="filled"
|
|
148
149
|
min="0"
|
|
149
150
|
value=".7"
|
|
150
151
|
step="0.01"
|
|
@@ -167,6 +168,7 @@ export const FillStartWithValue = (args = {}) => {
|
|
|
167
168
|
value=".7"
|
|
168
169
|
step="0.1"
|
|
169
170
|
fill-start="0.3"
|
|
171
|
+
variant="filled"
|
|
170
172
|
@input=${handleEvent(args)}
|
|
171
173
|
@change=${handleEvent(args)}
|
|
172
174
|
.formatOptions=${{ style: "percent" }}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["slider.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/slider/sp-slider-handle.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport {\n Slider,\n SliderHandle,\n variants,\n} from '@spectrum-web-components/slider';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n component: 'sp-slider',\n title: 'Slider',\n argTypes: {\n onInput: { action: 'input' },\n onChange: { action: 'change' },\n variant: {\n name: 'Variant',\n description: 'Determines the style of slider.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'inline-radio',\n options: [undefined, ...variants],\n },\n },\n tickStep: {\n name: 'Tick Step',\n description: 'Tick spacing on slider.',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 0.1 },\n },\n control: {\n type: 'number',\n },\n },\n labelVisibility: {\n name: 'Label Visibility',\n description: 'The labels visibily available in the UI',\n table: {\n type: { summary: '\"text\" | \"value\" | \"none\" | undefined' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'text',\n },\n },\n },\n args: {\n variant: undefined,\n tickStep: 0.1,\n labelVisibility: undefined,\n },\n};\n\nexport interface StoryArgs {\n variant?: string;\n tickStep?: number;\n labelVisibility?: string;\n onInput?: (val: string) => void;\n onChange?: (val: string) => void;\n [prop: string]: unknown;\n}\n\nconst handleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const { value } = event.target as Slider;\n if (onInput && event.type === 'input') {\n onInput(value.toString());\n } else if (onChange && event.type === 'change') {\n onChange(value.toString());\n }\n };\n\nconst handleHandleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const target = event.target as SliderHandle;\n if (target.value != null) {\n if (typeof target.value === 'object') {\n const value = JSON.stringify(target.value, null, 2);\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n } else {\n const value = `${target.name}: ${target.value}`;\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n }\n }\n };\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nexport const Filled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n variant=\"filled\"\n min=\"0\"\n value=\".7\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Slider Label\n </sp-slider>\n </div>\n `;\n};\n\nexport const HasADefaultValue = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n default-value=\"0.2\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n double click or press escape key to reset\n </sp-slider>\n </div>\n `;\n};\n\nexport const FillStart = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n fill-start\n min=\"0\"\n value=\".7\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Slider label\n </sp-slider>\n </div>\n `;\n};\n\nexport const FillStartWithValue = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".7\"\n step=\"0.1\"\n fill-start=\"0.3\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Value Greater than Fill Start\n </sp-slider>\n </div>\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"20\"\n min=\"0\"\n value=\"5\"\n step=\"1\"\n fill-start=\"15\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'number' }}\n ...=${spreadProps(args)}\n >\n Value Less than Fill Start\n </sp-slider>\n </div>\n `;\n};\n\nexport const autofocus = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n autofocus\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nexport const minimalDOM = (): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider>Opacity</sp-slider>\n </div>\n `;\n};\n\nexport const noVisibleTextLabel = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleTextLabel.args = {\n labelVisibility: 'value',\n};\n\nexport const noVisibleValueLabel = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\"0\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleValueLabel.args = {\n labelVisibility: 'text',\n};\n\nexport const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleLabels.args = {\n labelVisibility: 'none',\n};\n\nexport const px = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'px',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\nclass NumberFieldDefined extends HTMLElement {\n constructor() {\n super();\n this.numberFieldLoaderPromise = new Promise((res) => {\n customElements.whenDefined('sp-number-field').then(() => {\n res(true);\n });\n });\n }\n\n private numberFieldLoaderPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.numberFieldLoaderPromise;\n }\n}\n\ncustomElements.define('number-field-defined', NumberFieldDefined);\n\nconst editableDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <number-field-defined></number-field-defined>\n `;\n};\n\nexport const max20 = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 200px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"20\"\n min=\"0\"\n value=\"5\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n >\n Max 20\n </sp-slider>\n </div>\n `;\n};\nmax20.swc_vrt = {\n skip: true,\n};\n\nexport const editable = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableWithDefaultValue = (\n args: StoryArgs = {}\n): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n default-value=\"180\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditableWithDefaultValue.swc_vrt = {\n skip: true,\n};\n\nexport const editableDisabled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n disabled\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableCustom = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"width: 500px; margin: 12px 20px; --mod-stepper-width: 150px;\"\n >\n <sp-slider\n editable\n max=\"24\"\n min=\"0\"\n value=\"12.75\"\n step=\"0.25\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'unit', unit: 'hour' }}\n ...=${spreadProps(args)}\n >\n Hours\n </sp-slider>\n </div>\n `;\n};\n\neditableCustom.decorators = [editableDecorator];\n\nexport const editableWithoutVisibleLabels = (\n args: StoryArgs = {}\n): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\neditableWithoutVisibleLabels.args = {\n labelVisibility: 'none',\n};\n\nexport const hideStepper = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n hide-stepper\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nhideStepper.decorators = [editableDecorator];\n\nexport const Gradient = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <style>\n sp-slider {\n --mod-slider-track-color: linear-gradient(\n to right,\n red,\n green 100%\n );\n }\n sp-slider[dir='rtl'] {\n --mod-slider-track-color: linear-gradient(\n to left,\n red,\n green 100%\n );\n }\n </style>\n <div\n style=\"\n width: 500px;\n margin: 12px 20px;\n \"\n >\n <sp-slider\n label=\"Opacity\"\n max=\"100\"\n min=\"0\"\n value=\"50\"\n id=\"opacity-slider\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\nGradient.args = {\n variant: undefined,\n};\n\nexport const tick = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-slider\n label=\"Slider Label\"\n variant=\"tick\"\n min=\"0\"\n max=\"92\"\n ...=${spreadProps(args)}\n ></sp-slider>\n <sp-slider\n label=\"Slider Label\"\n variant=\"tick\"\n min=\"0\"\n max=\"92\"\n ...=${spreadProps(args)}\n ></sp-slider>\n `;\n};\ntick.args = {\n variant: 'tick',\n tickStep: 5,\n};\n\nexport const tickLabels = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-slider\n label=\"Slider Label\"\n tick-labels\n variant=\"tick\"\n min=\"50\"\n max=\"75\"\n ...=${spreadProps(args)}\n ></sp-slider>\n <sp-slider\n label=\"Slider Label\"\n tick-labels\n variant=\"tick\"\n min=\"50\"\n max=\"75\"\n ...=${spreadProps(args)}\n ></sp-slider>\n `;\n};\ntickLabels.args = {\n variant: 'tick',\n tickStep: 5,\n};\n\nexport const Disabled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n disabled\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const Quiet = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n hide-stepper\n quiet\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const inPopover = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-popover open style=\"min-width: 0\">\n <sp-dialog no-divider>\n <sp-slider\n editable\n hide-stepper\n quiet\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </sp-dialog>\n </sp-popover>\n `;\n};\n\nexport const Indeterminate = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n indeterminate\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const ExplicitHandle = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Intensity\n <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\n\nexport const TwoHandles = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nTwoHandles.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const TwoHandlesPt = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'pt',\n }}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nTwoHandlesPt.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n .formatOptions=${{ style: 'unit', unit: 'pc' }}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n value=\"5\"\n label=\"Low\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n value=\"133\"\n label=\"Mid\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n value=\"250\"\n label=\"High\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesPc.args = {\n variant: 'range',\n};\n\nexport const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"low\"\n label=\"Low\"\n value=\"5\"\n max=\"next\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"mid\"\n label=\"Mid\"\n value=\"100\"\n min=\"previous\"\n max=\"next\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"high\"\n label=\"High\"\n value=\"250\"\n min=\"previous\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesOrdered.args = {\n variant: 'range',\n tickStep: 10,\n};\n\n// This is a very complex example from an actual application.\n//\n// The first and last handles go from 0 to 255 in a linear fashion.\n// The last and first handles are ordered so that the last handle\n// must be greater than or equal to the first handle.\n//\n// The middle handle's range goes from 9.99 to 0.01, counting down.\n// the middle handle's limits are set by the outer handles such that\n// the position of the left handle is the staring value (9.99) for the\n// middle handle. And the position of the right handle is the end\n// value (0.01). That means that the middle handle will move\n// proportionally as you move the outer handles.\n//\n// The two other interesting features of the middle handle are that\n// it counts down, and that it does so exponentially for the first\n// half of its range.\n//\n// Because the specification for the <input> tag in HTML says that the\n// min should be less than the max, we do a double normalization to make\n// this work. The middle handle is considered to go between 0 and 1,\n// where 0 is the left handle's position and 1 is the right handle's\n// position. We then do the appropriate calculation to convert that\n// value into one between 9.99 and 0.01 for display to the user.\n//\n// One iteresting thing to note is that the normalization function\n// can also be used to enforce clamping.\n//\nexport const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {\n const values: { [key: string]: number } = {\n black: 50,\n gray: 4.98,\n white: 225,\n };\n const handleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const target = event.target as SliderHandle;\n if (target.value != null) {\n if (typeof target.value === 'object') {\n const value = JSON.stringify(target.value, null, 2);\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n } else {\n const value = `${target.name}: ${target.value}`;\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n }\n values[target.name] = target.value;\n }\n };\n const grayNormalization = {\n toNormalized(value: number) {\n const normalizedBlack = values.black / 255;\n const normalizedWhite = values.white / 255;\n const clamped = Math.max(Math.min(value, 1), 0);\n return (\n clamped * (normalizedWhite - normalizedBlack) + normalizedBlack\n );\n },\n fromNormalized(value: number) {\n const normalizedBlack = values.black / 255;\n const normalizedWhite = values.white / 255;\n const clamped = Math.max(\n Math.min(value, normalizedWhite),\n normalizedBlack\n );\n\n return (\n (clamped - normalizedBlack) /\n (normalizedWhite - normalizedBlack)\n );\n },\n };\n const blackNormalization = {\n toNormalized(value: number) {\n const clamped = Math.min(value, values.white);\n return clamped / 255;\n },\n fromNormalized(value: number) {\n const denormalized = value * 255;\n return Math.min(denormalized, values.white);\n },\n };\n const whiteNormalization = {\n toNormalized(value: number) {\n const clamped = Math.max(value, values.black);\n return clamped / 255;\n },\n fromNormalized(value: number) {\n const denormalized = value * 255;\n return Math.max(denormalized, values.black);\n },\n };\n const computeGray = (value: number): string => {\n let result = 1.0;\n if (value > 0.5) {\n result = Math.max(2 * (1 - value), 0.01);\n } else if (value < 0.5) {\n result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;\n }\n const formatOptions = {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n };\n return new Intl.NumberFormat(navigator.language, formatOptions).format(\n result\n );\n };\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleEvent}\n @change=${handleEvent}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"black\"\n label=\"Black\"\n value=${values.black}\n .normalization=${blackNormalization}\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"gray\"\n label=\"Gray\"\n value=\"0.215\"\n min=\"0\"\n max=\"1\"\n step=\"0.005\"\n .normalization=${grayNormalization}\n .getAriaHandleText=${computeGray}\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"white\"\n label=\"White\"\n value=${values.white}\n .normalization=${whiteNormalization}\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesComplex.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const focusTabDemo = (args: StoryArgs = {}): TemplateResult => {\n const value = 50;\n const min = 0;\n const max = 100;\n const step = 1;\n return html`\n <div style=\"width: 500px; margin: 12px 20px 20px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Opacity\"\n id=\"opacity-slider-opacity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n <div style=\"width: 500px; margin: 20px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Lightness\"\n id=\"opacity-slider-lightness\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n <div style=\"width: 500px; margin: 20px 20px 12px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Saturation\"\n id=\"opacity-slider-saturation\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n"],
|
|
5
|
-
"mappings": "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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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/slider/sp-slider-handle.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport {\n Slider,\n SliderHandle,\n variants,\n} from '@spectrum-web-components/slider';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n component: 'sp-slider',\n title: 'Slider',\n argTypes: {\n onInput: { action: 'input' },\n onChange: { action: 'change' },\n variant: {\n name: 'Variant',\n description: 'Determines the style of slider.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'inline-radio',\n options: [undefined, ...variants],\n },\n },\n tickStep: {\n name: 'Tick Step',\n description: 'Tick spacing on slider.',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 0.1 },\n },\n control: {\n type: 'number',\n },\n },\n labelVisibility: {\n name: 'Label Visibility',\n description: 'The labels visibily available in the UI',\n table: {\n type: { summary: '\"text\" | \"value\" | \"none\" | undefined' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'text',\n },\n },\n },\n args: {\n variant: undefined,\n tickStep: 0.1,\n labelVisibility: undefined,\n },\n};\n\nexport interface StoryArgs {\n variant?: string;\n tickStep?: number;\n labelVisibility?: string;\n onInput?: (val: string) => void;\n onChange?: (val: string) => void;\n [prop: string]: unknown;\n}\n\nconst handleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const { value } = event.target as Slider;\n if (onInput && event.type === 'input') {\n onInput(value.toString());\n } else if (onChange && event.type === 'change') {\n onChange(value.toString());\n }\n };\n\nconst handleHandleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const target = event.target as SliderHandle;\n if (target.value != null) {\n if (typeof target.value === 'object') {\n const value = JSON.stringify(target.value, null, 2);\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n } else {\n const value = `${target.name}: ${target.value}`;\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n }\n }\n };\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nexport const Filled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n variant=\"filled\"\n min=\"0\"\n value=\".7\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Slider Label\n </sp-slider>\n </div>\n `;\n};\n\nexport const HasADefaultValue = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n default-value=\"0.2\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n double click or press escape key to reset\n </sp-slider>\n </div>\n `;\n};\n\nexport const FillStart = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n fill-start\n variant=\"filled\"\n min=\"0\"\n value=\".7\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Slider label\n </sp-slider>\n </div>\n `;\n};\n\nexport const FillStartWithValue = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".7\"\n step=\"0.1\"\n fill-start=\"0.3\"\n variant=\"filled\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Value Greater than Fill Start\n </sp-slider>\n </div>\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n max=\"20\"\n min=\"0\"\n value=\"5\"\n step=\"1\"\n fill-start=\"15\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'number' }}\n ...=${spreadProps(args)}\n >\n Value Less than Fill Start\n </sp-slider>\n </div>\n `;\n};\n\nexport const autofocus = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin-inline: 20px;\">\n <sp-slider\n autofocus\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nexport const minimalDOM = (): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider>Opacity</sp-slider>\n </div>\n `;\n};\n\nexport const noVisibleTextLabel = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleTextLabel.args = {\n labelVisibility: 'value',\n};\n\nexport const noVisibleValueLabel = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\"0\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleValueLabel.args = {\n labelVisibility: 'text',\n};\n\nexport const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\nnoVisibleLabels.args = {\n labelVisibility: 'none',\n};\n\nexport const px = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'px',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\nclass NumberFieldDefined extends HTMLElement {\n constructor() {\n super();\n this.numberFieldLoaderPromise = new Promise((res) => {\n customElements.whenDefined('sp-number-field').then(() => {\n res(true);\n });\n });\n }\n\n private numberFieldLoaderPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.numberFieldLoaderPromise;\n }\n}\n\ncustomElements.define('number-field-defined', NumberFieldDefined);\n\nconst editableDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <number-field-defined></number-field-defined>\n `;\n};\n\nexport const max20 = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 200px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"20\"\n min=\"0\"\n value=\"5\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n >\n Max 20\n </sp-slider>\n </div>\n `;\n};\nmax20.swc_vrt = {\n skip: true,\n};\n\nexport const editable = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableWithDefaultValue = (\n args: StoryArgs = {}\n): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n default-value=\"180\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditableWithDefaultValue.swc_vrt = {\n skip: true,\n};\n\nexport const editableDisabled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n disabled\n max=\"360\"\n min=\"0\"\n value=\"90\"\n step=\"1\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }}\n ...=${spreadProps(args)}\n >\n Angle\n </sp-slider>\n </div>\n `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableCustom = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div\n style=\"width: 500px; margin: 12px 20px; --mod-stepper-width: 150px;\"\n >\n <sp-slider\n editable\n max=\"24\"\n min=\"0\"\n value=\"12.75\"\n step=\"0.25\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'unit', unit: 'hour' }}\n ...=${spreadProps(args)}\n >\n Hours\n </sp-slider>\n </div>\n `;\n};\n\neditableCustom.decorators = [editableDecorator];\n\nexport const editableWithoutVisibleLabels = (\n args: StoryArgs = {}\n): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\neditableWithoutVisibleLabels.args = {\n labelVisibility: 'none',\n};\n\nexport const hideStepper = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n hide-stepper\n max=\"1\"\n min=\"0\"\n value=\".5\"\n step=\"0.01\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n .formatOptions=${{ style: 'percent' }}\n ...=${spreadProps(args)}\n >\n Opacity\n </sp-slider>\n </div>\n `;\n};\n\nhideStepper.decorators = [editableDecorator];\n\nexport const Gradient = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <style>\n sp-slider {\n --mod-slider-track-color: linear-gradient(\n to right,\n red,\n green 100%\n );\n }\n sp-slider[dir='rtl'] {\n --mod-slider-track-color: linear-gradient(\n to left,\n red,\n green 100%\n );\n }\n </style>\n <div\n style=\"\n width: 500px;\n margin: 12px 20px;\n \"\n >\n <sp-slider\n label=\"Opacity\"\n max=\"100\"\n min=\"0\"\n value=\"50\"\n id=\"opacity-slider\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\nGradient.args = {\n variant: undefined,\n};\n\nexport const tick = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-slider\n label=\"Slider Label\"\n variant=\"tick\"\n min=\"0\"\n max=\"92\"\n ...=${spreadProps(args)}\n ></sp-slider>\n <sp-slider\n label=\"Slider Label\"\n variant=\"tick\"\n min=\"0\"\n max=\"92\"\n ...=${spreadProps(args)}\n ></sp-slider>\n `;\n};\ntick.args = {\n variant: 'tick',\n tickStep: 5,\n};\n\nexport const tickLabels = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-slider\n label=\"Slider Label\"\n tick-labels\n variant=\"tick\"\n min=\"50\"\n max=\"75\"\n ...=${spreadProps(args)}\n ></sp-slider>\n <sp-slider\n label=\"Slider Label\"\n tick-labels\n variant=\"tick\"\n min=\"50\"\n max=\"75\"\n ...=${spreadProps(args)}\n ></sp-slider>\n `;\n};\ntickLabels.args = {\n variant: 'tick',\n tickStep: 5,\n};\n\nexport const Disabled = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n disabled\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const Quiet = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n hide-stepper\n quiet\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const inPopover = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-popover open style=\"min-width: 0\">\n <sp-dialog no-divider>\n <sp-slider\n editable\n hide-stepper\n quiet\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </sp-dialog>\n </sp-popover>\n `;\n};\n\nexport const Indeterminate = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n editable\n indeterminate\n value=\"5\"\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n label=\"Intensity\"\n @input=${handleEvent(args)}\n @change=${handleEvent(args)}\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n\nexport const ExplicitHandle = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"0.5\"\n min=\"0\"\n max=\"20\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Intensity\n <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\n\nexport const TwoHandles = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nTwoHandles.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const TwoHandlesPt = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n .formatOptions=${{\n style: 'unit',\n unit: 'pt',\n }}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nTwoHandlesPt.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n .formatOptions=${{ style: 'unit', unit: 'pc' }}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n value=\"5\"\n label=\"Low\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n value=\"133\"\n label=\"Mid\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n value=\"250\"\n label=\"High\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesPc.args = {\n variant: 'range',\n};\n\nexport const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleHandleEvent(args)}\n @change=${handleHandleEvent(args)}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"low\"\n label=\"Low\"\n value=\"5\"\n max=\"next\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"mid\"\n label=\"Mid\"\n value=\"100\"\n min=\"previous\"\n max=\"next\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"high\"\n label=\"High\"\n value=\"250\"\n min=\"previous\"\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesOrdered.args = {\n variant: 'range',\n tickStep: 10,\n};\n\n// This is a very complex example from an actual application.\n//\n// The first and last handles go from 0 to 255 in a linear fashion.\n// The last and first handles are ordered so that the last handle\n// must be greater than or equal to the first handle.\n//\n// The middle handle's range goes from 9.99 to 0.01, counting down.\n// the middle handle's limits are set by the outer handles such that\n// the position of the left handle is the staring value (9.99) for the\n// middle handle. And the position of the right handle is the end\n// value (0.01). That means that the middle handle will move\n// proportionally as you move the outer handles.\n//\n// The two other interesting features of the middle handle are that\n// it counts down, and that it does so exponentially for the first\n// half of its range.\n//\n// Because the specification for the <input> tag in HTML says that the\n// min should be less than the max, we do a double normalization to make\n// this work. The middle handle is considered to go between 0 and 1,\n// where 0 is the left handle's position and 1 is the right handle's\n// position. We then do the appropriate calculation to convert that\n// value into one between 9.99 and 0.01 for display to the user.\n//\n// One iteresting thing to note is that the normalization function\n// can also be used to enforce clamping.\n//\nexport const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {\n const values: { [key: string]: number } = {\n black: 50,\n gray: 4.98,\n white: 225,\n };\n const handleEvent =\n ({ onInput, onChange }: StoryArgs) =>\n (event: Event): void => {\n const target = event.target as SliderHandle;\n if (target.value != null) {\n if (typeof target.value === 'object') {\n const value = JSON.stringify(target.value, null, 2);\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n } else {\n const value = `${target.name}: ${target.value}`;\n if (onInput && event.type === 'input') {\n onInput(value);\n } else if (onChange && event.type === 'change') {\n onChange(value);\n }\n }\n values[target.name] = target.value;\n }\n };\n const grayNormalization = {\n toNormalized(value: number) {\n const normalizedBlack = values.black / 255;\n const normalizedWhite = values.white / 255;\n const clamped = Math.max(Math.min(value, 1), 0);\n return (\n clamped * (normalizedWhite - normalizedBlack) + normalizedBlack\n );\n },\n fromNormalized(value: number) {\n const normalizedBlack = values.black / 255;\n const normalizedWhite = values.white / 255;\n const clamped = Math.max(\n Math.min(value, normalizedWhite),\n normalizedBlack\n );\n\n return (\n (clamped - normalizedBlack) /\n (normalizedWhite - normalizedBlack)\n );\n },\n };\n const blackNormalization = {\n toNormalized(value: number) {\n const clamped = Math.min(value, values.white);\n return clamped / 255;\n },\n fromNormalized(value: number) {\n const denormalized = value * 255;\n return Math.min(denormalized, values.white);\n },\n };\n const whiteNormalization = {\n toNormalized(value: number) {\n const clamped = Math.max(value, values.black);\n return clamped / 255;\n },\n fromNormalized(value: number) {\n const denormalized = value * 255;\n return Math.max(denormalized, values.black);\n },\n };\n const computeGray = (value: number): string => {\n let result = 1.0;\n if (value > 0.5) {\n result = Math.max(2 * (1 - value), 0.01);\n } else if (value < 0.5) {\n result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;\n }\n const formatOptions = {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n };\n return new Intl.NumberFormat(navigator.language, formatOptions).format(\n result\n );\n };\n return html`\n <div style=\"width: 500px; margin: 12px 20px;\">\n <sp-slider\n step=\"1\"\n min=\"0\"\n max=\"255\"\n @input=${handleEvent}\n @change=${handleEvent}\n ...=${spreadProps(args)}\n >\n Output Levels\n <sp-slider-handle\n slot=\"handle\"\n name=\"black\"\n label=\"Black\"\n value=${values.black}\n .normalization=${blackNormalization}\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"gray\"\n label=\"Gray\"\n value=\"0.215\"\n min=\"0\"\n max=\"1\"\n step=\"0.005\"\n .normalization=${grayNormalization}\n .getAriaHandleText=${computeGray}\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"white\"\n label=\"White\"\n value=${values.white}\n .normalization=${whiteNormalization}\n ></sp-slider-handle>\n </sp-slider>\n </div>\n `;\n};\nThreeHandlesComplex.args = {\n variant: 'range',\n tickStep: 10,\n};\n\nexport const focusTabDemo = (args: StoryArgs = {}): TemplateResult => {\n const value = 50;\n const min = 0;\n const max = 100;\n const step = 1;\n return html`\n <div style=\"width: 500px; margin: 12px 20px 20px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Opacity\"\n id=\"opacity-slider-opacity\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n <div style=\"width: 500px; margin: 20px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Lightness\"\n id=\"opacity-slider-lightness\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n <div style=\"width: 500px; margin: 20px 20px 12px;\">\n <sp-slider\n value=\"${value}\"\n step=\"${step}\"\n min=\"${min}\"\n max=\"${max}\"\n label=\"Saturation\"\n id=\"opacity-slider-saturation\"\n ...=${spreadProps(args)}\n ></sp-slider>\n </div>\n `;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["handleEvent"]
|
|
7
7
|
}
|
package/test/slider.test.js
CHANGED
package/test/slider.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["slider.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/slider/sp-slider-handle.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Overlay } from '@spectrum-web-components/overlay';\nimport { Slider, SliderHandle } from '@spectrum-web-components/slider';\nimport { tick } from '../stories/slider.stories.js';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy, stub } from 'sinon';\nimport { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Slider', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Slider>(\n html`\n <sp-slider label=\"Slider\"></sp-slider>\n `\n )\n );\n it('loads', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider label=\"Slider\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [variant=\"tick\"]', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n label=\"Ticked Slider\"\n min=\"-100\"\n max=\"100\"\n value=\"0\"\n tick-labels\n variant=\"tick\"\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [variant=\"tick\"] irregularly', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider label=\"Slider\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('receives value from the outside', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider max=\"20\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(10);\n\n el.value = 10;\n await elementUpdated(el);\n\n expect(el.value).to.equal(10);\n\n el.value = 50;\n await elementUpdated(el);\n\n expect(el.value).to.equal(20);\n });\n it('accepts keyboard events', async () => {\n const el = await fixture<Slider>(\n tick({\n variant: 'tick',\n tickStep: 5,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(46);\n expect(el.highlight).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(el);\n\n expect(el.value).to.equal(45);\n expect(el.highlight).to.be.true;\n await sendKeys({\n press: 'ArrowUp',\n });\n await elementUpdated(el);\n\n expect(el.value).to.equal(46);\n expect(el.highlight).to.be.true;\n });\n it('accepts pointer events', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId).to.equal(-1);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '1').to.equal(-1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n expect(el.dragging, 'it is dragging 1').to.be.true;\n expect(pointerId, '2').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 2,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId, '3').to.equal(2);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 2').to.be.true;\n expect(pointerId, '4').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointercancel', {\n pointerId: 3,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '5').to.equal(3);\n });\n it('will `trackPointerDown` on `#controls`', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider style=\"width: 500px\" max=\"70\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(35);\n\n const controls = el.shadowRoot.querySelector(\n '#controls'\n ) as HTMLDivElement;\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n\n controls.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n // account for 8px <body> margin by default\n clientX: 9,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(-1);\n expect(el.value).to.equal(35);\n expect(el.dragging, 'handle is not yet being dragged').to.be.false;\n\n controls.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n // account for 8px <body> margin by default\n clientX: 9,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(4);\n expect(el.value).to.equal(0);\n expect(el.dragging, 'handle is being dragged').to.be.true;\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n button: 0,\n // account for 8px <body> margin by default\n clientX: 508,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'handle is still being dragged').to.be.true;\n expect(pointerId).to.equal(4);\n expect(el.value).to.equal(70);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n button: 0,\n // account for 8px <body> margin by default\n clientX: 9,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(4);\n expect(el.value).to.equal(70);\n expect(el.dragging, 'handle is no longer being dragged').to.be.false;\n });\n it('can be disabled', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider disabled></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId).to.equal(-1);\n expect(el.value).to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n handle.setPointerCapture = (id: number) => (pointerId = id);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId).to.equal(-1);\n\n const controls = el.shadowRoot.querySelector(\n '#controls'\n ) as HTMLDivElement;\n\n controls.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n clientX: 50,\n pointerId: 1,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(-1);\n expect(el.value).to.equal(50);\n });\n it('accepts pointermove events', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [9, 30],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.highlight, 'not highlighted').to.be.false;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(0);\n });\n\n it('dispatches `input` of the animation frame', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"50\"\n style=\"width: 100px\"\n @input=${(event: Event & { target: Slider }) => {\n inputSpy(event.target.value);\n }}\n @change=${(event: Event & { target: Slider }) => {\n changeSpy(event.target.value);\n }}\n ></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(inputSpy.callCount, 'start clean').to.equal(0);\n expect(changeSpy.callCount, 'start clean').to.equal(0);\n\n let frames = 0;\n let shouldCountFrames = true;\n const countFrames = (): void => {\n if (!shouldCountFrames) return;\n frames += 1;\n requestAnimationFrame(countFrames);\n };\n countFrames();\n type Steps = {\n type: 'move';\n position: [number, number];\n }[];\n const toRight: Steps = [...Array(51).keys()].map((i) => ({\n type: 'move',\n position: [9 + i, 30],\n }));\n const toLeft: Steps = toRight.slice(0, -1).reverse();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [9, 30],\n },\n {\n type: 'down',\n },\n ...toRight,\n ...toLeft,\n {\n type: 'up',\n },\n ],\n });\n shouldCountFrames = false;\n\n expect(\n inputSpy.callCount,\n 'should not have more \"input\"s than frames'\n ).to.lte(frames);\n expect(changeSpy.callCount, 'only one change').to.equal(1);\n });\n\n it('manages RTL when min != 0', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"1\" max=\"11\" dir=\"rtl\"></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(6);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [9, 30],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.highlight, 'not highlighted').to.be.false;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(11);\n });\n\n it('goes [disabled] while dragging', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.highlight, 'not highlighted').to.be.false;\n expect(el.value).to.equal(50);\n\n const inputEvent = oneEvent(el, 'input');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n handleBoundingRect.x +\n handleBoundingRect.width / 2 +\n 100,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ],\n },\n ],\n });\n await inputEvent;\n\n expect(el.value).to.equal(13);\n\n el.disabled = true;\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.false;\n expect(el.highlight, 'not highlighted').to.be.false;\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 0,\n handleBoundingRect.top + handleBoundingRect.height / 2,\n ],\n },\n ],\n });\n\n expect(el.value).to.equal(13);\n });\n it('accepts pointermove events in separate interactions', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider style=\"width: 100px\"></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value, 'initial').to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n clientX: 58,\n cancelable: true,\n button: 0,\n pointerId: 100,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 58,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'first pointerdown').to.equal(50);\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.classList.contains('handle-highlight'), 'not highlighted').to\n .be.false;\n expect(pointerId).to.equal(100);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'first pointermove').to.equal(0);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value, 'first pointerup').to.equal(0);\n expect(el.dragging, 'is dragging').to.be.false;\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n clientX: 58,\n cancelable: true,\n button: 0,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 58,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'second pointerdown').to.equal(50);\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.classList.contains('handle-highlight'), 'not highlighted').to\n .be.false;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'second pointermove').to.equal(0);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value, 'second pointerup').to.equal(0);\n expect(el.dragging, 'is dragging').to.be.false;\n });\n it('accepts pointermove events - [step=0]', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider step=\"0\" max=\"20\" style=\"width: 500px; float: left;\">\n Step = 0\n </sp-slider>\n `\n );\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(el.value).to.equal(10);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n const position: [number, number] = [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position,\n },\n {\n type: 'down',\n },\n ],\n });\n\n await elementUpdated(el);\n\n expect(el.highlight, 'with no highlight').to.be.false;\n expect(el.dragging, 'dragging').to.be.true;\n\n let inputEvent = oneEvent(el, 'input');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 200,\n handleBoundingRect.y + handleBoundingRect.height + 100,\n ],\n },\n ],\n });\n await inputEvent;\n await nextFrame();\n\n expect(el.value).to.equal(8);\n\n inputEvent = oneEvent(el, 'input');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [125, position[1]],\n },\n ],\n });\n await inputEvent;\n\n expect(el.value).to.equal(5);\n });\n it('will not pointermove unless `pointerdown`', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n expect(el.dragging).to.be.false;\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n })\n );\n await nextFrame();\n\n expect(el.value).to.equal(50);\n });\n it('responds to input events on the <input/> element', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n const input = el.shadowRoot.querySelector('.input') as HTMLInputElement;\n\n input.value = '0';\n input.dispatchEvent(new Event('change'));\n\n expect(el.value).to.equal(0);\n });\n it('accepts variants', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider variant=\"tick\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('tick');\n expect(el.getAttribute('variant')).to.equal('tick');\n\n el.variant = 'ramp';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('ramp');\n expect(el.getAttribute('variant')).to.equal('ramp');\n\n el.setAttribute('variant', 'filled');\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('filled');\n expect(el.getAttribute('variant')).to.equal('filled');\n\n el.removeAttribute('variant');\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('');\n expect(el.hasAttribute('variant')).to.be.false;\n });\n it('validates variants', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider variant=\"other\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('');\n expect(el.hasAttribute('variant')).to.be.false;\n\n el.variant = 'tick';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('tick');\n expect(el.getAttribute('variant')).to.equal('tick');\n\n el.variant = 'tick';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('tick');\n expect(el.getAttribute('variant')).to.equal('tick');\n });\n it('renders fill from the centerPoint of the track when fill-start has no value', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n max=\"20\"\n fill-start\n min=\"0\"\n value=\"10\"\n step=\"1\"\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n const fillElement = el.shadowRoot.querySelector(\n '.fill'\n ) as HTMLDivElement;\n\n expect(fillElement).to.exist;\n expect(fillElement.style.left).to.equal('50%');\n expect(fillElement.style.width).to.equal('0%');\n expect(el.values).to.deep.equal({ value: 10 });\n });\n it('renders fill from fill-start point', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n max=\"100\"\n fill-start=\"15\"\n min=\"0\"\n value=\"10\"\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n const fillElement = el.shadowRoot.querySelector(\n '.fill'\n ) as HTMLDivElement;\n\n expect(fillElement).to.exist;\n expect(fillElement.style.left).to.equal('10%');\n expect(fillElement.style.width).to.equal('5%');\n expect(el.values).to.deep.equal({ value: 10 });\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n const position: [number, number] = [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position,\n },\n {\n type: 'down',\n },\n ],\n });\n\n await elementUpdated(el);\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 200,\n handleBoundingRect.y + handleBoundingRect.height + 100,\n ],\n },\n ],\n });\n await nextFrame();\n\n expect(el.value).to.equal(24);\n });\n it('has a `focusElement`', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n expect(input).to.not.be.undefined;\n expect(input.type).to.equal('range');\n });\n it('displays result of getAriaValueText', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"50\"\n min=\"0\"\n max=\"100\"\n .getAriaHandleText=${(value: number) => `${value}%`}\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n expect(input.getAttribute('aria-valuetext')).to.equal('50%');\n\n el.value = 100;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('100%');\n });\n it('displays Intl.formatNumber results', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n value=\".5\"\n min=\"0\"\n max=\"1\"\n .formatOptions=${{ style: 'percent' }}\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n expect(input.getAttribute('aria-valuetext')).to.equal('50%');\n\n el.value = 100;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('100%');\n });\n it('obeys language property', async () => {\n const [languageContext, updateLanguage] = createLanguageContext('de');\n let el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"2.44\"\n min=\"0\"\n max=\"10\"\n step=\"0.01\"\n @sp-language-context=${languageContext}\n .formatOptions=${{ maximumFractionDigits: 2 }}\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n let input = el.focusElement as HTMLInputElement;\n expect(\n input.getAttribute('aria-valuetext'),\n 'First German number'\n ).to.equal('2,44');\n\n updateLanguage('en');\n await elementUpdated(el);\n\n expect(\n input.getAttribute('aria-valuetext'),\n 'First English number'\n ).to.equal('2.44');\n\n updateLanguage('de');\n el = await fixture<Slider>(\n html`\n <sp-slider\n min=\"0\"\n max=\"10\"\n @sp-language-context=${languageContext}\n >\n <sp-slider-handle\n slot=\"handle\"\n step=\"0.01\"\n value=\"2.44\"\n .formatOptions=${{ maximumFractionDigits: 2 }}\n @sp-language-context=${languageContext}\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n input = el.focusElement as HTMLInputElement;\n expect(\n input.getAttribute('aria-valuetext'),\n 'Second German number'\n ).to.equal('2,44');\n\n updateLanguage('en');\n await elementUpdated(el);\n\n expect(\n input.getAttribute('aria-valuetext'),\n 'Second English number'\n ).to.equal('2.44');\n });\n it('uses fallback ariaValueText', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider value=\"50\" min=\"0\" max=\"100\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n (\n el as unknown as {\n getAriaValueText: boolean;\n }\n ).getAriaValueText = false;\n\n const input = el.focusElement as HTMLInputElement;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('50');\n });\n it('supports units not included in Intl.NumberFormatOptions', async () => {\n let el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"50\"\n min=\"0\"\n max=\"100\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('50px');\n\n el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n >\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n let shadowRoot = el.shadowRoot as ShadowRoot;\n expect(shadowRoot.querySelector('input#input-0[aria-valuetext=\"5px\"]'))\n .to.exist;\n expect(\n shadowRoot.querySelector('input#input-1[aria-valuetext=\"250px\"]')\n ).to.exist;\n\n el = await fixture<Slider>(\n html`\n <sp-slider value=\"5\" step=\"1\" min=\"0\" max=\"255\">\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n shadowRoot = el.shadowRoot as ShadowRoot;\n expect(shadowRoot.querySelector('input#input-0[aria-valuetext=\"5px\"]'))\n .to.exist;\n expect(\n shadowRoot.querySelector('input#input-1[aria-valuetext=\"250px\"]')\n ).to.exist;\n });\n it('accepts min/max/value in the same timing', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n el.min = 0;\n el.max = 200;\n el.value = 200;\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(200);\n\n el.value = 500;\n el.min = 0;\n el.max = 500;\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(500);\n\n el.value = -100;\n el.min = -100;\n el.max = 500;\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(-100);\n });\n it('returns values for handles', async () => {\n let el = await fixture<Slider>(\n html`\n <sp-slider>\n <sp-slider-handle\n slot=\"handle\"\n name=\"a\"\n min=\"0\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n max=\"100\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n const middleHandle = el.querySelector('#middle-handle') as SliderHandle;\n middleHandle.value = 22;\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 22, c: 30 });\n\n el = await fixture<Slider>(\n html`\n <sp-slider value=\"10\" min=\"0\" max=\"100\"></sp-slider>\n `\n );\n expect(el.values).to.deep.equal({ value: 10 });\n\n el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n slot=\"handle\"\n value=\"10\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n expect(el.values).to.deep.equal({ handle1: 10 });\n });\n it('clamps values for multi-handle slider', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n const firstHandle = el.querySelector('#first-handle') as SliderHandle;\n const middleHandle = el.querySelector('#middle-handle') as SliderHandle;\n const lastHandle = el.querySelector('#last-handle') as SliderHandle;\n\n firstHandle.value = 25;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 20, b: 20, c: 30 });\n\n firstHandle.value = 10;\n await elementUpdated(el);\n middleHandle.value = 5;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 10, c: 30 });\n\n lastHandle.value = 11;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 10, c: 11 });\n\n lastHandle.value = 7;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 10, c: 10 });\n });\n it('warns in Dev Mode when `min=\"previous\"` is leveraged on first handle', async () => {\n const consoleWarnStub = stub(console, 'warn');\n window.__swc.issuedWarnings = new Set<BrandedSWCWarningID>();\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(\n spyCall.args.at(0).includes('previous'),\n 'confirm \"previous\" in message'\n ).to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-slider',\n type: 'api',\n level: 'default',\n },\n });\n consoleWarnStub.restore();\n });\n it('warns in Dev Mode when `max=\"next\"` is leveraged on last handle', async () => {\n const consoleWarnStub = stub(console, 'warn');\n window.__swc.issuedWarnings = new Set<BrandedSWCWarningID>();\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(spyCall.args.at(0).includes('next'), 'confirm \"next\" in message')\n .to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-slider',\n type: 'api',\n level: 'default',\n },\n });\n consoleWarnStub.restore();\n });\n it('builds both handles from a <template>', async () => {\n const template = document.createElement('template');\n template.innerHTML = `\n <sp-slider variant=\"range\" step=\"1\" id=\"price\" name=\"price\" label=\"Max Price\" min=\"35425\" max=\"86610\">\n <sp-slider-handle slot=\"handle\" name=\"min\" label=\"Minimum\" max=\"next\" value=\"35425\"></sp-slider-handle>\n <sp-slider-handle slot=\"handle\" name=\"max\" label=\"Maximum\" min=\"previous\" value=\"86610\"></sp-slider-handle>\n </sp-slider>\n `;\n const el = await fixture<HTMLDivElement>(\n html`\n <div></div>\n `\n );\n\n el.appendChild(template.content.cloneNode(true));\n await waitUntil(() => {\n return el.querySelector('sp-slider')?.shadowRoot != null;\n });\n // Sliders take several frames to fully upgrade\n await nextFrame();\n\n const createdHandles =\n el\n .querySelector('sp-slider')\n ?.shadowRoot.querySelectorAll('.handle') || [];\n expect(createdHandles).to.have.lengthOf(2);\n });\n it('enforces next/previous max/min', async () => {\n let el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n let firstHandle = el.querySelector('#first-handle') as SliderHandle;\n let lastHandle = el.querySelector('#last-handle') as SliderHandle;\n\n let firstInput = el.shadowRoot.querySelector(\n '.handle[name=\"a\"] > input'\n ) as HTMLInputElement;\n let middleInput = el.shadowRoot.querySelector(\n '.handle[name=\"b\"] > input'\n ) as HTMLInputElement;\n let lastInput = el.shadowRoot.querySelector(\n '.handle[name=\"c\"] > input'\n ) as HTMLInputElement;\n\n expect(firstInput.min).to.equal('0');\n expect(firstInput.max).to.equal('20');\n\n expect(middleInput.min).to.equal('10');\n expect(middleInput.max).to.equal('30');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('100');\n\n firstHandle.value = 15;\n lastHandle.value = 85;\n\n await elementUpdated(el);\n await elementUpdated(el);\n\n expect(firstInput.min).to.equal('0');\n expect(firstInput.max).to.equal('20');\n\n expect(middleInput.min).to.equal('15');\n expect(middleInput.max).to.equal('85');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('100');\n\n el = await fixture<Slider>(\n html`\n <sp-slider>\n <sp-slider-handle\n id=\"first-handle\"\n min=\"0\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n max=\"100\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n firstInput = el.shadowRoot.querySelector(\n '.handle[name=\"a\"] > input'\n ) as HTMLInputElement;\n middleInput = el.shadowRoot.querySelector(\n '.handle[name=\"b\"] > input'\n ) as HTMLInputElement;\n lastInput = el.shadowRoot.querySelector(\n '.handle[name=\"c\"] > input'\n ) as HTMLInputElement;\n\n expect(firstInput.min).to.equal('0');\n expect(firstInput.max).to.equal('20');\n\n expect(middleInput.min).to.equal('10');\n expect(middleInput.max).to.equal('30');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('100');\n\n firstHandle = el.querySelector('#first-handle') as SliderHandle;\n lastHandle = el.querySelector('#last-handle') as SliderHandle;\n\n firstHandle.min = 5;\n lastHandle.max = 95;\n\n await elementUpdated(el);\n await elementUpdated(el);\n\n expect(firstInput.min).to.equal('5');\n expect(firstInput.max).to.equal('20');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('95');\n });\n it('sends keyboard events to active handle', async () => {\n // let pointerId = -1;\n\n const el = await fixture<Slider>(\n html`\n <sp-slider step=\"1\" min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n const lastHandle = el.querySelector('#last-handle') as SliderHandle;\n lastHandle.focus();\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 29 });\n });\n it('resets to default value on double click after moving pointer', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n\n const el = await fixture<Slider>(\n html`\n <sp-slider\n style=\"width: 100px\"\n value=\"50\"\n default-value=\"50\"\n @input=${(event: Event & { target: Slider }) => {\n inputSpy(event.target.value);\n }}\n @change=${(event: Event & { target: Slider }) => {\n changeSpy(event.target.value);\n }}\n ></sp-slider>\n `\n );\n await elementUpdated(el);\n expect(el.value, 'initial').to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n const position: [number, number] = [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position,\n },\n {\n type: 'down',\n },\n ],\n });\n\n await elementUpdated(el);\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 150,\n handleBoundingRect.y + handleBoundingRect.height + 100,\n ],\n },\n {\n type: 'up',\n },\n ],\n });\n\n await elementUpdated(el);\n\n // since we've moved the pointer, the new value should be 100\n expect(el.value).to.equal(100);\n\n inputSpy.resetHistory();\n changeSpy.resetHistory();\n\n handle.dispatchEvent(\n new PointerEvent('dblclick', {\n clientX: 0,\n cancelable: true,\n button: 0,\n composed: true,\n bubbles: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(\n el.value,\n 'reset to default value on double click after moving pointer'\n ).to.equal(50);\n\n // input and change events should have been fired\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n });\n it('manages escape key interactions correctly in an overlaid context', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n\n const el = await fixture<HTMLDivElement>(\n html`\n <div>\n <sp-button id=\"trigger\">Overlay Trigger</sp-button>\n <sp-overlay trigger=\"trigger@click\" placement=\"bottom\">\n <sp-popover>\n <sp-slider\n style=\"width: 100px\"\n value=\"70\"\n default-value=\"50\"\n @input=${(\n event: Event & { target: Slider }\n ) => {\n inputSpy(event.target.value);\n }}\n @change=${(\n event: Event & { target: Slider }\n ) => {\n changeSpy(event.target.value);\n }}\n ></sp-slider>\n </sp-popover>\n </sp-overlay>\n </div>\n `\n );\n\n await elementUpdated(el);\n\n // open the overlay\n const trigger = el.querySelector('#trigger') as HTMLButtonElement;\n const opened = oneEvent(el, 'sp-opened');\n trigger.click();\n await opened;\n\n // current slider value should be 70\n const slider = el.querySelector('sp-slider') as Slider;\n expect(slider.value).to.equal(70);\n\n slider.focus();\n // send escape key\n await sendKeys({\n press: 'Escape',\n });\n\n await elementUpdated(el);\n\n // now the slider value should be 50\n expect(slider.value).to.equal(50);\n\n // input and change events should have been fired\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n\n // and the overlay should be in open state\n const overlay = el.querySelector('sp-overlay') as Overlay;\n expect(overlay.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n // send escape key again\n await sendKeys({\n press: 'Escape',\n });\n await closed;\n\n // now the overlay should be closed\n expect(overlay.open).to.be.false;\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 '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/slider/sp-slider-handle.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport { Overlay } from '@spectrum-web-components/overlay';\nimport { Slider, SliderHandle } from '@spectrum-web-components/slider';\nimport { tick } from '../stories/slider.stories.js';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n nextFrame,\n oneEvent,\n waitUntil,\n} from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy, stub } from 'sinon';\nimport { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Slider', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Slider>(\n html`\n <sp-slider label=\"Slider\"></sp-slider>\n `\n )\n );\n it('loads', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider label=\"Slider\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [variant=\"tick\"]', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n label=\"Ticked Slider\"\n min=\"-100\"\n max=\"100\"\n value=\"0\"\n tick-labels\n variant=\"tick\"\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [variant=\"tick\"] irregularly', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider label=\"Slider\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('receives value from the outside', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider max=\"20\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(10);\n\n el.value = 10;\n await elementUpdated(el);\n\n expect(el.value).to.equal(10);\n\n el.value = 50;\n await elementUpdated(el);\n\n expect(el.value).to.equal(20);\n });\n it('accepts keyboard events', async () => {\n const el = await fixture<Slider>(\n tick({\n variant: 'tick',\n tickStep: 5,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(46);\n expect(el.highlight).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(el);\n\n expect(el.value).to.equal(45);\n expect(el.highlight).to.be.true;\n await sendKeys({\n press: 'ArrowUp',\n });\n await elementUpdated(el);\n\n expect(el.value).to.equal(46);\n expect(el.highlight).to.be.true;\n });\n it('accepts pointer events', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId).to.equal(-1);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '1').to.equal(-1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n expect(el.dragging, 'it is dragging 1').to.be.true;\n expect(pointerId, '2').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 2,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(el.highlight).to.be.false;\n expect(pointerId, '3').to.equal(2);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'it is dragging 2').to.be.true;\n expect(pointerId, '4').to.equal(1);\n\n handle.dispatchEvent(\n new PointerEvent('pointercancel', {\n pointerId: 3,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId, '5').to.equal(3);\n });\n it('will `trackPointerDown` on `#controls`', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider style=\"width: 500px\" max=\"70\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(35);\n\n const controls = el.shadowRoot.querySelector(\n '#controls'\n ) as HTMLDivElement;\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n\n controls.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n // account for 8px <body> margin by default\n clientX: 9,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(-1);\n expect(el.value).to.equal(35);\n expect(el.dragging, 'handle is not yet being dragged').to.be.false;\n\n controls.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n // account for 8px <body> margin by default\n clientX: 9,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(4);\n expect(el.value).to.equal(0);\n expect(el.dragging, 'handle is being dragged').to.be.true;\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n button: 0,\n // account for 8px <body> margin by default\n clientX: 508,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging, 'handle is still being dragged').to.be.true;\n expect(pointerId).to.equal(4);\n expect(el.value).to.equal(70);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n button: 0,\n // account for 8px <body> margin by default\n clientX: 9,\n pointerId: 4,\n bubbles: true,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(4);\n expect(el.value).to.equal(70);\n expect(el.dragging, 'handle is no longer being dragged').to.be.false;\n });\n it('can be disabled', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider disabled></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId).to.equal(-1);\n expect(el.value).to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n handle.setPointerCapture = (id: number) => (pointerId = id);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n pointerId: 1,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.dragging).to.be.false;\n expect(pointerId).to.equal(-1);\n\n const controls = el.shadowRoot.querySelector(\n '#controls'\n ) as HTMLDivElement;\n\n controls.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 0,\n clientX: 50,\n pointerId: 1,\n cancelable: true,\n })\n );\n await elementUpdated(el);\n\n expect(pointerId).to.equal(-1);\n expect(el.value).to.equal(50);\n });\n it('accepts pointermove events', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [9, 30],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.highlight, 'not highlighted').to.be.false;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(0);\n });\n\n it('dispatches `input` of the animation frame', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"50\"\n style=\"width: 100px\"\n @input=${(event: Event & { target: Slider }) => {\n inputSpy(event.target.value);\n }}\n @change=${(event: Event & { target: Slider }) => {\n changeSpy(event.target.value);\n }}\n ></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(inputSpy.callCount, 'start clean').to.equal(0);\n expect(changeSpy.callCount, 'start clean').to.equal(0);\n\n let frames = 0;\n let shouldCountFrames = true;\n const countFrames = (): void => {\n if (!shouldCountFrames) return;\n frames += 1;\n requestAnimationFrame(countFrames);\n };\n countFrames();\n type Steps = {\n type: 'move';\n position: [number, number];\n }[];\n const toRight: Steps = [...Array(51).keys()].map((i) => ({\n type: 'move',\n position: [9 + i, 30],\n }));\n const toLeft: Steps = toRight.slice(0, -1).reverse();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [9, 30],\n },\n {\n type: 'down',\n },\n ...toRight,\n ...toLeft,\n {\n type: 'up',\n },\n ],\n });\n shouldCountFrames = false;\n\n expect(\n inputSpy.callCount,\n 'should not have more \"input\"s than frames'\n ).to.lte(frames);\n expect(changeSpy.callCount, 'only one change').to.equal(1);\n });\n\n it('manages RTL when min != 0', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"1\" max=\"11\" dir=\"rtl\"></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(6);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [9, 30],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.highlight, 'not highlighted').to.be.false;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(11);\n });\n\n it('goes [disabled] while dragging', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.highlight, 'not highlighted').to.be.false;\n expect(el.value).to.equal(50);\n\n const inputEvent = oneEvent(el, 'input');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n handleBoundingRect.x +\n handleBoundingRect.width / 2 +\n 100,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ],\n },\n ],\n });\n await inputEvent;\n\n expect(el.value).to.equal(13);\n\n el.disabled = true;\n await elementUpdated(el);\n\n expect(el.dragging, 'is dragging').to.be.false;\n expect(el.highlight, 'not highlighted').to.be.false;\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 0,\n handleBoundingRect.top + handleBoundingRect.height / 2,\n ],\n },\n ],\n });\n\n expect(el.value).to.equal(13);\n });\n it('accepts pointermove events in separate interactions', async () => {\n let pointerId = -1;\n const el = await fixture<Slider>(\n html`\n <sp-slider style=\"width: 100px\"></sp-slider>\n `\n );\n await elementUpdated(el);\n\n expect(el.value, 'initial').to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n el.track.setPointerCapture = (id: number) => (pointerId = id);\n el.track.releasePointerCapture = (id: number) => (pointerId = id);\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n clientX: 58,\n cancelable: true,\n button: 0,\n pointerId: 100,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 58,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'first pointerdown').to.equal(50);\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.classList.contains('handle-highlight'), 'not highlighted').to\n .be.false;\n expect(pointerId).to.equal(100);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'first pointermove').to.equal(0);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value, 'first pointerup').to.equal(0);\n expect(el.dragging, 'is dragging').to.be.false;\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n clientX: 58,\n cancelable: true,\n button: 0,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 58,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'second pointerdown').to.equal(50);\n expect(el.dragging, 'is dragging').to.be.true;\n expect(el.classList.contains('handle-highlight'), 'not highlighted').to\n .be.false;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n await nextFrame();\n\n expect(el.value, 'second pointermove').to.equal(0);\n\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n clientX: 0,\n cancelable: true,\n composed: true,\n bubbles: true,\n })\n );\n await elementUpdated(el);\n\n expect(el.value, 'second pointerup').to.equal(0);\n expect(el.dragging, 'is dragging').to.be.false;\n });\n it('accepts pointermove events - [step=0]', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider step=\"0\" max=\"20\" style=\"width: 500px; float: left;\">\n Step = 0\n </sp-slider>\n `\n );\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(el.value).to.equal(10);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n const position: [number, number] = [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position,\n },\n {\n type: 'down',\n },\n ],\n });\n\n await elementUpdated(el);\n\n expect(el.highlight, 'with no highlight').to.be.false;\n expect(el.dragging, 'dragging').to.be.true;\n\n let inputEvent = oneEvent(el, 'input');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 200,\n handleBoundingRect.y + handleBoundingRect.height + 100,\n ],\n },\n ],\n });\n await inputEvent;\n await nextFrame();\n\n expect(el.value).to.equal(8);\n\n inputEvent = oneEvent(el, 'input');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [125, position[1]],\n },\n ],\n });\n await inputEvent;\n\n expect(el.value).to.equal(5);\n });\n it('will not pointermove unless `pointerdown`', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n expect(el.dragging).to.be.false;\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n clientX: 0,\n cancelable: true,\n })\n );\n await nextFrame();\n\n expect(el.value).to.equal(50);\n });\n it('responds to input events on the <input/> element', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n const input = el.shadowRoot.querySelector('.input') as HTMLInputElement;\n\n input.value = '0';\n input.dispatchEvent(new Event('change'));\n\n expect(el.value).to.equal(0);\n });\n it('accepts variants', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider variant=\"tick\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('tick');\n expect(el.getAttribute('variant')).to.equal('tick');\n\n el.variant = 'ramp';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('ramp');\n expect(el.getAttribute('variant')).to.equal('ramp');\n\n el.setAttribute('variant', 'filled');\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('filled');\n expect(el.getAttribute('variant')).to.equal('filled');\n\n el.removeAttribute('variant');\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('');\n expect(el.hasAttribute('variant')).to.be.false;\n });\n it('validates variants', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider variant=\"other\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('');\n expect(el.hasAttribute('variant')).to.be.false;\n\n el.variant = 'tick';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('tick');\n expect(el.getAttribute('variant')).to.equal('tick');\n\n el.variant = 'tick';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('tick');\n expect(el.getAttribute('variant')).to.equal('tick');\n });\n it('renders fill from the centerPoint of the track when fill-start has no value', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n max=\"20\"\n variant=\"filled\"\n fill-start\n min=\"0\"\n value=\"10\"\n step=\"1\"\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n const fillElement = el.shadowRoot.querySelector(\n '.fill'\n ) as HTMLDivElement;\n\n expect(fillElement).to.exist;\n expect(fillElement.style.left).to.equal('50%');\n expect(fillElement.style.width).to.equal('0%');\n expect(el.values).to.deep.equal({ value: 10 });\n });\n it('renders fill from fill-start point', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n max=\"100\"\n fill-start=\"15\"\n min=\"0\"\n value=\"10\"\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n const fillElement = el.shadowRoot.querySelector(\n '.fill'\n ) as HTMLDivElement;\n\n expect(fillElement).to.exist;\n expect(fillElement.style.left).to.equal('10%');\n expect(fillElement.style.width).to.equal('5%');\n expect(el.values).to.deep.equal({ value: 10 });\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n const position: [number, number] = [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position,\n },\n {\n type: 'down',\n },\n ],\n });\n\n await elementUpdated(el);\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 200,\n handleBoundingRect.y + handleBoundingRect.height + 100,\n ],\n },\n ],\n });\n await nextFrame();\n\n expect(el.value).to.equal(24);\n });\n it('has a `focusElement`', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n expect(input).to.not.be.undefined;\n expect(input.type).to.equal('range');\n });\n it('displays result of getAriaValueText', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"50\"\n min=\"0\"\n max=\"100\"\n .getAriaHandleText=${(value: number) => `${value}%`}\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n expect(input.getAttribute('aria-valuetext')).to.equal('50%');\n\n el.value = 100;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('100%');\n });\n it('displays Intl.formatNumber results', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider\n value=\".5\"\n min=\"0\"\n max=\"1\"\n .formatOptions=${{ style: 'percent' }}\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n expect(input.getAttribute('aria-valuetext')).to.equal('50%');\n\n el.value = 100;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('100%');\n });\n it('obeys language property', async () => {\n const [languageContext, updateLanguage] = createLanguageContext('de');\n let el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"2.44\"\n min=\"0\"\n max=\"10\"\n step=\"0.01\"\n @sp-language-context=${languageContext}\n .formatOptions=${{ maximumFractionDigits: 2 }}\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n let input = el.focusElement as HTMLInputElement;\n expect(\n input.getAttribute('aria-valuetext'),\n 'First German number'\n ).to.equal('2,44');\n\n updateLanguage('en');\n await elementUpdated(el);\n\n expect(\n input.getAttribute('aria-valuetext'),\n 'First English number'\n ).to.equal('2.44');\n\n updateLanguage('de');\n el = await fixture<Slider>(\n html`\n <sp-slider\n min=\"0\"\n max=\"10\"\n @sp-language-context=${languageContext}\n >\n <sp-slider-handle\n slot=\"handle\"\n step=\"0.01\"\n value=\"2.44\"\n .formatOptions=${{ maximumFractionDigits: 2 }}\n @sp-language-context=${languageContext}\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n input = el.focusElement as HTMLInputElement;\n expect(\n input.getAttribute('aria-valuetext'),\n 'Second German number'\n ).to.equal('2,44');\n\n updateLanguage('en');\n await elementUpdated(el);\n\n expect(\n input.getAttribute('aria-valuetext'),\n 'Second English number'\n ).to.equal('2.44');\n });\n it('uses fallback ariaValueText', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider value=\"50\" min=\"0\" max=\"100\"></sp-slider>\n `\n );\n\n await elementUpdated(el);\n (\n el as unknown as {\n getAriaValueText: boolean;\n }\n ).getAriaValueText = false;\n\n const input = el.focusElement as HTMLInputElement;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('50');\n });\n it('supports units not included in Intl.NumberFormatOptions', async () => {\n let el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"50\"\n min=\"0\"\n max=\"100\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n ></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n const input = el.focusElement as HTMLInputElement;\n await elementUpdated(el);\n\n expect(input.getAttribute('aria-valuetext')).to.equal('50px');\n\n el = await fixture<Slider>(\n html`\n <sp-slider\n value=\"5\"\n step=\"1\"\n min=\"0\"\n max=\"255\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n >\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n let shadowRoot = el.shadowRoot as ShadowRoot;\n expect(shadowRoot.querySelector('input#input-0[aria-valuetext=\"5px\"]'))\n .to.exist;\n expect(\n shadowRoot.querySelector('input#input-1[aria-valuetext=\"250px\"]')\n ).to.exist;\n\n el = await fixture<Slider>(\n html`\n <sp-slider value=\"5\" step=\"1\" min=\"0\" max=\"255\">\n <sp-slider-handle\n slot=\"handle\"\n name=\"min\"\n label=\"Minimum\"\n value=\"5\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"max\"\n label=\"Maximum\"\n value=\"250\"\n format-options='{\"style\": \"unit\", \"unit\": \"px\"}'\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n shadowRoot = el.shadowRoot as ShadowRoot;\n expect(shadowRoot.querySelector('input#input-0[aria-valuetext=\"5px\"]'))\n .to.exist;\n expect(\n shadowRoot.querySelector('input#input-1[aria-valuetext=\"250px\"]')\n ).to.exist;\n });\n it('accepts min/max/value in the same timing', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider></sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(50);\n\n el.min = 0;\n el.max = 200;\n el.value = 200;\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(200);\n\n el.value = 500;\n el.min = 0;\n el.max = 500;\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(500);\n\n el.value = -100;\n el.min = -100;\n el.max = 500;\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(-100);\n });\n it('returns values for handles', async () => {\n let el = await fixture<Slider>(\n html`\n <sp-slider>\n <sp-slider-handle\n slot=\"handle\"\n name=\"a\"\n min=\"0\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n max=\"100\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n const middleHandle = el.querySelector('#middle-handle') as SliderHandle;\n middleHandle.value = 22;\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 22, c: 30 });\n\n el = await fixture<Slider>(\n html`\n <sp-slider value=\"10\" min=\"0\" max=\"100\"></sp-slider>\n `\n );\n expect(el.values).to.deep.equal({ value: 10 });\n\n el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n slot=\"handle\"\n value=\"10\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n expect(el.values).to.deep.equal({ handle1: 10 });\n });\n it('clamps values for multi-handle slider', async () => {\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n const firstHandle = el.querySelector('#first-handle') as SliderHandle;\n const middleHandle = el.querySelector('#middle-handle') as SliderHandle;\n const lastHandle = el.querySelector('#last-handle') as SliderHandle;\n\n firstHandle.value = 25;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 20, b: 20, c: 30 });\n\n firstHandle.value = 10;\n await elementUpdated(el);\n middleHandle.value = 5;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 10, c: 30 });\n\n lastHandle.value = 11;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 10, c: 11 });\n\n lastHandle.value = 7;\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 10, c: 10 });\n });\n it('warns in Dev Mode when `min=\"previous\"` is leveraged on first handle', async () => {\n const consoleWarnStub = stub(console, 'warn');\n window.__swc.issuedWarnings = new Set<BrandedSWCWarningID>();\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(\n spyCall.args.at(0).includes('previous'),\n 'confirm \"previous\" in message'\n ).to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-slider',\n type: 'api',\n level: 'default',\n },\n });\n consoleWarnStub.restore();\n });\n it('warns in Dev Mode when `max=\"next\"` is leveraged on last handle', async () => {\n const consoleWarnStub = stub(console, 'warn');\n window.__swc.issuedWarnings = new Set<BrandedSWCWarningID>();\n const el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n expect(spyCall.args.at(0).includes('next'), 'confirm \"next\" in message')\n .to.be.true;\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-slider',\n type: 'api',\n level: 'default',\n },\n });\n consoleWarnStub.restore();\n });\n it('builds both handles from a <template>', async () => {\n const template = document.createElement('template');\n template.innerHTML = `\n <sp-slider variant=\"range\" step=\"1\" id=\"price\" name=\"price\" label=\"Max Price\" min=\"35425\" max=\"86610\">\n <sp-slider-handle slot=\"handle\" name=\"min\" label=\"Minimum\" max=\"next\" value=\"35425\"></sp-slider-handle>\n <sp-slider-handle slot=\"handle\" name=\"max\" label=\"Maximum\" min=\"previous\" value=\"86610\"></sp-slider-handle>\n </sp-slider>\n `;\n const el = await fixture<HTMLDivElement>(\n html`\n <div></div>\n `\n );\n\n el.appendChild(template.content.cloneNode(true));\n await waitUntil(() => {\n return el.querySelector('sp-slider')?.shadowRoot != null;\n });\n // Sliders take several frames to fully upgrade\n await nextFrame();\n\n const createdHandles =\n el\n .querySelector('sp-slider')\n ?.shadowRoot.querySelectorAll('.handle') || [];\n expect(createdHandles).to.have.lengthOf(2);\n });\n it('enforces next/previous max/min', async () => {\n let el = await fixture<Slider>(\n html`\n <sp-slider min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n let firstHandle = el.querySelector('#first-handle') as SliderHandle;\n let lastHandle = el.querySelector('#last-handle') as SliderHandle;\n\n let firstInput = el.shadowRoot.querySelector(\n '.handle[name=\"a\"] > input'\n ) as HTMLInputElement;\n let middleInput = el.shadowRoot.querySelector(\n '.handle[name=\"b\"] > input'\n ) as HTMLInputElement;\n let lastInput = el.shadowRoot.querySelector(\n '.handle[name=\"c\"] > input'\n ) as HTMLInputElement;\n\n expect(firstInput.min).to.equal('0');\n expect(firstInput.max).to.equal('20');\n\n expect(middleInput.min).to.equal('10');\n expect(middleInput.max).to.equal('30');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('100');\n\n firstHandle.value = 15;\n lastHandle.value = 85;\n\n await elementUpdated(el);\n await elementUpdated(el);\n\n expect(firstInput.min).to.equal('0');\n expect(firstInput.max).to.equal('20');\n\n expect(middleInput.min).to.equal('15');\n expect(middleInput.max).to.equal('85');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('100');\n\n el = await fixture<Slider>(\n html`\n <sp-slider>\n <sp-slider-handle\n id=\"first-handle\"\n min=\"0\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n max=\"100\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n firstInput = el.shadowRoot.querySelector(\n '.handle[name=\"a\"] > input'\n ) as HTMLInputElement;\n middleInput = el.shadowRoot.querySelector(\n '.handle[name=\"b\"] > input'\n ) as HTMLInputElement;\n lastInput = el.shadowRoot.querySelector(\n '.handle[name=\"c\"] > input'\n ) as HTMLInputElement;\n\n expect(firstInput.min).to.equal('0');\n expect(firstInput.max).to.equal('20');\n\n expect(middleInput.min).to.equal('10');\n expect(middleInput.max).to.equal('30');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('100');\n\n firstHandle = el.querySelector('#first-handle') as SliderHandle;\n lastHandle = el.querySelector('#last-handle') as SliderHandle;\n\n firstHandle.min = 5;\n lastHandle.max = 95;\n\n await elementUpdated(el);\n await elementUpdated(el);\n\n expect(firstInput.min).to.equal('5');\n expect(firstInput.max).to.equal('20');\n\n expect(lastInput.min).to.equal('20');\n expect(lastInput.max).to.equal('95');\n });\n it('sends keyboard events to active handle', async () => {\n // let pointerId = -1;\n\n const el = await fixture<Slider>(\n html`\n <sp-slider step=\"1\" min=\"0\" max=\"100\">\n <sp-slider-handle\n id=\"first-handle\"\n max=\"next\"\n slot=\"handle\"\n name=\"a\"\n value=\"10\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"middle-handle\"\n min=\"previous\"\n max=\"next\"\n slot=\"handle\"\n name=\"b\"\n value=\"20\"\n ></sp-slider-handle>\n <sp-slider-handle\n id=\"last-handle\"\n min=\"previous\"\n slot=\"handle\"\n name=\"c\"\n value=\"30\"\n ></sp-slider-handle>\n </sp-slider>\n `\n );\n\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });\n\n const lastHandle = el.querySelector('#last-handle') as SliderHandle;\n lastHandle.focus();\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await elementUpdated(el);\n expect(el.values).to.deep.equal({ a: 10, b: 20, c: 29 });\n });\n it('resets to default value on double click after moving pointer', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n\n const el = await fixture<Slider>(\n html`\n <sp-slider\n style=\"width: 100px\"\n value=\"50\"\n default-value=\"50\"\n @input=${(event: Event & { target: Slider }) => {\n inputSpy(event.target.value);\n }}\n @change=${(event: Event & { target: Slider }) => {\n changeSpy(event.target.value);\n }}\n ></sp-slider>\n `\n );\n await elementUpdated(el);\n expect(el.value, 'initial').to.equal(50);\n\n const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;\n const handleBoundingRect = handle.getBoundingClientRect();\n const position: [number, number] = [\n handleBoundingRect.x + handleBoundingRect.width / 2,\n handleBoundingRect.y + handleBoundingRect.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position,\n },\n {\n type: 'down',\n },\n ],\n });\n\n await elementUpdated(el);\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n 150,\n handleBoundingRect.y + handleBoundingRect.height + 100,\n ],\n },\n {\n type: 'up',\n },\n ],\n });\n\n await elementUpdated(el);\n\n // since we've moved the pointer, the new value should be 100\n expect(el.value).to.equal(100);\n\n inputSpy.resetHistory();\n changeSpy.resetHistory();\n\n handle.dispatchEvent(\n new PointerEvent('dblclick', {\n clientX: 0,\n cancelable: true,\n button: 0,\n composed: true,\n bubbles: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(\n el.value,\n 'reset to default value on double click after moving pointer'\n ).to.equal(50);\n\n // input and change events should have been fired\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n });\n it('manages escape key interactions correctly in an overlaid context', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n\n const el = await fixture<HTMLDivElement>(\n html`\n <div>\n <sp-button id=\"trigger\">Overlay Trigger</sp-button>\n <sp-overlay trigger=\"trigger@click\" placement=\"bottom\">\n <sp-popover>\n <sp-slider\n style=\"width: 100px\"\n value=\"70\"\n default-value=\"50\"\n @input=${(\n event: Event & { target: Slider }\n ) => {\n inputSpy(event.target.value);\n }}\n @change=${(\n event: Event & { target: Slider }\n ) => {\n changeSpy(event.target.value);\n }}\n ></sp-slider>\n </sp-popover>\n </sp-overlay>\n </div>\n `\n );\n\n await elementUpdated(el);\n\n // open the overlay\n const trigger = el.querySelector('#trigger') as HTMLButtonElement;\n const opened = oneEvent(el, 'sp-opened');\n trigger.click();\n await opened;\n\n // current slider value should be 70\n const slider = el.querySelector('sp-slider') as Slider;\n expect(slider.value).to.equal(70);\n\n slider.focus();\n // send escape key\n await sendKeys({\n press: 'Escape',\n });\n\n await elementUpdated(el);\n\n // now the slider value should be 50\n expect(slider.value).to.equal(50);\n\n // input and change events should have been fired\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n\n // and the overlay should be in open state\n const overlay = el.querySelector('sp-overlay') as Overlay;\n expect(overlay.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n // send escape key again\n await sendKeys({\n press: 'Escape',\n });\n await closed;\n\n // now the overlay should be closed\n expect(overlay.open).to.be.false;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_a"]
|
|
7
7
|
}
|