@spectrum-web-components/color-slider 1.0.0-rc.9 → 1.0.1-color-testing
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 +1 -1
- package/package.json +7 -8
- package/src/ColorSlider.d.ts +5 -5
- package/src/ColorSlider.dev.js +10 -25
- package/src/ColorSlider.dev.js.map +2 -2
- package/src/ColorSlider.js +4 -4
- package/src/ColorSlider.js.map +3 -3
- package/test/color-slider.test.js +128 -170
- package/test/color-slider.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ The current color formats supported are as follows:
|
|
|
37
37
|
- Strings (eg "red", "blue")
|
|
38
38
|
|
|
39
39
|
**Please note for the following formats: HSV, HSVA, HSL, HSLA**
|
|
40
|
-
When using the HSL or HSV formats, and a color's value (in HSV) is set to 0, or its luminosity (in HSL) is set to 0 or 1, the hue and saturation values may not be preserved by the element's `color` property. This is detailed in the [
|
|
40
|
+
When using the HSL or HSV formats, and a color's value (in HSV) is set to 0, or its luminosity (in HSL) is set to 0 or 1, the hue and saturation values may not be preserved by the element's `color` property. This is detailed in the [colorjs documentation](https://colorjs.io/docs/). Seperately, the element's `value` property is directly managed by the hue as represented in the interface.
|
|
41
41
|
|
|
42
42
|
## Default
|
|
43
43
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/color-slider",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1-color-testing",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -62,12 +62,11 @@
|
|
|
62
62
|
"lit-html"
|
|
63
63
|
],
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@
|
|
66
|
-
"@spectrum-web-components/
|
|
67
|
-
"@spectrum-web-components/
|
|
68
|
-
"@spectrum-web-components/
|
|
69
|
-
"@spectrum-web-components/
|
|
70
|
-
"@spectrum-web-components/shared": "^1.0.0-rc.9"
|
|
65
|
+
"@spectrum-web-components/base": "^1.0.1-color-testing",
|
|
66
|
+
"@spectrum-web-components/color-handle": "^1.0.1-color-testing",
|
|
67
|
+
"@spectrum-web-components/opacity-checkerboard": "^1.0.1-color-testing",
|
|
68
|
+
"@spectrum-web-components/reactive-controllers": "^1.0.1-color-testing",
|
|
69
|
+
"@spectrum-web-components/shared": "^1.0.1-color-testing"
|
|
71
70
|
},
|
|
72
71
|
"devDependencies": {
|
|
73
72
|
"@spectrum-css/colorslider": "^7.0.0-s2-foundations.16"
|
|
@@ -78,5 +77,5 @@
|
|
|
78
77
|
"./sp-*.js",
|
|
79
78
|
"./**/*.dev.js"
|
|
80
79
|
],
|
|
81
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "17e14b4a9fa2c8b15df158ea7d77ce09bf50de82"
|
|
82
81
|
}
|
package/src/ColorSlider.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
|
|
3
3
|
import '@spectrum-web-components/color-handle/sp-color-handle.js';
|
|
4
|
-
import {
|
|
4
|
+
import { ColorController, ColorTypes } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';
|
|
5
5
|
/**
|
|
6
6
|
* @element sp-color-slider
|
|
7
7
|
* @slot gradient - a custom gradient visually outlining the available color values
|
|
@@ -17,12 +17,12 @@ export declare class ColorSlider extends Focusable {
|
|
|
17
17
|
label: string;
|
|
18
18
|
vertical: boolean;
|
|
19
19
|
private languageResolver;
|
|
20
|
-
|
|
20
|
+
colorController: ColorController;
|
|
21
21
|
get value(): number;
|
|
22
22
|
set value(hue: number);
|
|
23
|
-
sliderHandlePosition: number;
|
|
24
|
-
get color():
|
|
25
|
-
set color(color:
|
|
23
|
+
get sliderHandlePosition(): number;
|
|
24
|
+
get color(): ColorTypes;
|
|
25
|
+
set color(color: ColorTypes);
|
|
26
26
|
step: number;
|
|
27
27
|
private get altered();
|
|
28
28
|
private set altered(value);
|
package/src/ColorSlider.dev.js
CHANGED
|
@@ -25,7 +25,7 @@ import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
|
|
|
25
25
|
import "@spectrum-web-components/color-handle/sp-color-handle.js";
|
|
26
26
|
import {
|
|
27
27
|
ColorController
|
|
28
|
-
} from "@spectrum-web-components/reactive-controllers/src/
|
|
28
|
+
} from "@spectrum-web-components/reactive-controllers/src/ColorController.js";
|
|
29
29
|
import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
|
|
30
30
|
import opacityCheckerBoardStyles from "@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js";
|
|
31
31
|
import styles from "./color-slider.css.js";
|
|
@@ -37,18 +37,7 @@ export class ColorSlider extends Focusable {
|
|
|
37
37
|
this.label = "hue";
|
|
38
38
|
this.vertical = false;
|
|
39
39
|
this.languageResolver = new LanguageResolutionController(this);
|
|
40
|
-
this.colorController = new ColorController(this, {
|
|
41
|
-
/* c8 ignore next 3 */
|
|
42
|
-
applyColorToState: () => {
|
|
43
|
-
this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
|
|
44
|
-
},
|
|
45
|
-
extractColorFromState: (controller) => ({
|
|
46
|
-
...controller.getColor("hsl"),
|
|
47
|
-
h: this.value
|
|
48
|
-
}),
|
|
49
|
-
maintains: "saturation"
|
|
50
|
-
});
|
|
51
|
-
this.sliderHandlePosition = 0;
|
|
40
|
+
this.colorController = new ColorController(this, { manageAs: "hsv" });
|
|
52
41
|
this.step = 1;
|
|
53
42
|
this._altered = 0;
|
|
54
43
|
this._pointerDown = false;
|
|
@@ -62,8 +51,11 @@ export class ColorSlider extends Focusable {
|
|
|
62
51
|
set value(hue) {
|
|
63
52
|
this.colorController.hue = hue;
|
|
64
53
|
}
|
|
54
|
+
get sliderHandlePosition() {
|
|
55
|
+
return this.colorController.hue / 360 * 100;
|
|
56
|
+
}
|
|
65
57
|
get color() {
|
|
66
|
-
return this.colorController.
|
|
58
|
+
return this.colorController.colorValue;
|
|
67
59
|
}
|
|
68
60
|
set color(color) {
|
|
69
61
|
this.colorController.color = color;
|
|
@@ -104,12 +96,11 @@ export class ColorSlider extends Focusable {
|
|
|
104
96
|
event.preventDefault();
|
|
105
97
|
const range = 360;
|
|
106
98
|
const mult = 100 / range;
|
|
107
|
-
|
|
99
|
+
const nextSliderHandlePosition = Math.min(
|
|
108
100
|
100,
|
|
109
101
|
Math.max(0, this.sliderHandlePosition + delta * mult)
|
|
110
102
|
);
|
|
111
|
-
this.value =
|
|
112
|
-
this.colorController.applyColorFromState();
|
|
103
|
+
this.value = 360 * (nextSliderHandlePosition / 100);
|
|
113
104
|
if (delta != 0) {
|
|
114
105
|
this.dispatchEvent(
|
|
115
106
|
new Event("input", {
|
|
@@ -128,8 +119,6 @@ export class ColorSlider extends Focusable {
|
|
|
128
119
|
handleInput(event) {
|
|
129
120
|
const { valueAsNumber } = event.target;
|
|
130
121
|
this.value = valueAsNumber;
|
|
131
|
-
this.sliderHandlePosition = 100 * (this.value / 360);
|
|
132
|
-
this.colorController.applyColorFromState();
|
|
133
122
|
}
|
|
134
123
|
handleChange(event) {
|
|
135
124
|
this.handleInput(event);
|
|
@@ -172,9 +161,8 @@ export class ColorSlider extends Focusable {
|
|
|
172
161
|
}
|
|
173
162
|
}
|
|
174
163
|
handlePointermove(event) {
|
|
175
|
-
|
|
176
|
-
this.value = 360 * (
|
|
177
|
-
this.colorController.applyColorFromState();
|
|
164
|
+
const nextsliderHandlePosition = this.calculateHandlePosition(event);
|
|
165
|
+
this.value = 360 * (nextsliderHandlePosition / 100);
|
|
178
166
|
this.dispatchEvent(
|
|
179
167
|
new Event("input", {
|
|
180
168
|
bubbles: true,
|
|
@@ -324,9 +312,6 @@ __decorateClass([
|
|
|
324
312
|
__decorateClass([
|
|
325
313
|
property({ type: Number })
|
|
326
314
|
], ColorSlider.prototype, "value", 1);
|
|
327
|
-
__decorateClass([
|
|
328
|
-
property({ type: Number, reflect: true })
|
|
329
|
-
], ColorSlider.prototype, "sliderHandlePosition", 2);
|
|
330
315
|
__decorateClass([
|
|
331
316
|
property({ type: String })
|
|
332
317
|
], ColorSlider.prototype, "color", 1);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorSlider.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 PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n ColorController,\n ColorValue,\n HSL,\n} from '@spectrum-web-components/reactive-controllers/src/Color.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\n\nimport opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport styles from './color-slider.css.js';\n\n/**\n * @element sp-color-slider\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Slider has changed.\n * @fires change - An alteration to the value of the Color Slider has been committed by the user.\n */\nexport class ColorSlider extends Focusable {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerBoardStyles, styles];\n }\n\n @property({ type: String, reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: String })\n public label = 'hue';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n private languageResolver = new LanguageResolutionController(this);\n\n private colorController = new ColorController(this, {\n /* c8 ignore next 3 */\n applyColorToState: () => {\n this.sliderHandlePosition = 100 * (this.colorController.hue / 360);\n },\n extractColorFromState: (controller) => ({\n ...(controller.getColor('hsl') as HSL),\n h: this.value,\n }),\n maintains: 'saturation',\n });\n\n @property({ type: Number })\n public get value(): number {\n return this.colorController.hue;\n }\n\n public set value(hue: number) {\n this.colorController.hue = hue;\n }\n\n @property({ type: Number, reflect: true })\n public sliderHandlePosition = 0;\n\n @property({ type: String })\n public get color(): ColorValue {\n return this.colorController.color;\n }\n\n public set color(color: ColorValue) {\n this.colorController.color = color;\n }\n\n @property({ type: Number })\n public step = 1;\n\n private get altered(): number {\n return this._altered;\n }\n\n private set altered(altered: number) {\n this._altered = altered;\n this.step = Math.max(1, this.altered * 10);\n }\n\n private _altered = 0;\n\n @query('input')\n public input!: HTMLInputElement;\n\n public override get focusElement(): HTMLInputElement {\n return this.input;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { key } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n let delta = 0;\n switch (key) {\n case 'ArrowUp':\n delta = this.step;\n break;\n case 'ArrowDown':\n delta = -this.step;\n break;\n case 'ArrowLeft':\n delta = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n delta = this.step * (this.isLTR ? 1 : -1);\n break;\n default:\n return;\n }\n event.preventDefault();\n\n const range = 360;\n const mult = 100 / range;\n this.sliderHandlePosition = Math.min(\n 100,\n Math.max(0, this.sliderHandlePosition + delta * mult)\n );\n this.value = Math.min(100, Math.max(0, this.value + delta));\n this.colorController.applyColorFromState();\n\n if (delta != 0) {\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber } = event.target;\n\n this.value = valueAsNumber;\n this.sliderHandlePosition = 100 * (this.value / 360);\n this.colorController.applyColorFromState();\n }\n\n private handleChange(event: Event & { target: HTMLInputElement }): void {\n this.handleInput(event);\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n public override focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n this.focused = this.hasVisibleFocusInTree();\n this.input.focus();\n }\n\n private handleFocus(): void {\n this.focused = true;\n }\n\n private handleBlur(): void {\n if (this._pointerDown) {\n return;\n }\n this.altered = 0;\n this.focused = false;\n }\n\n private boundingClientRect!: DOMRect;\n private _pointerDown = false;\n\n private handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n event.preventDefault();\n return;\n }\n this._pointerDown = true;\n this.colorController.savePreviousColor();\n this.boundingClientRect = this.getBoundingClientRect();\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if (event.pointerType === 'mouse') {\n this.focused = true;\n }\n }\n\n private handlePointermove(event: PointerEvent): void {\n this.sliderHandlePosition = this.calculateHandlePosition(event);\n this.value = 360 * (this.sliderHandlePosition / 100);\n\n this.colorController.applyColorFromState();\n\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private handlePointerup(event: PointerEvent): void {\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.colorController.restorePreviousColor();\n }\n // Retain focus on input element after mouse up to enable keyboard interactions\n this.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n }\n\n /**\n * Returns the value under the cursor\n * @param: PointerEvent on slider\n * @return: Slider value that correlates to the position under the pointer\n */\n private calculateHandlePosition(event: PointerEvent): number {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return this.sliderHandlePosition;\n }\n const rect = this.boundingClientRect;\n const minOffset = this.vertical ? rect.top : rect.left;\n const offset = this.vertical ? event.clientY : event.clientX;\n const size = this.vertical ? rect.height : rect.width;\n\n const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));\n const sliderHandlePosition =\n this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;\n\n return sliderHandlePosition;\n }\n\n private handleGradientPointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n this.handlePointermove(event);\n }\n\n private get handlePositionStyles(): string {\n return `${this.vertical ? 'inset-block-end' : 'inset-inline-start'}: ${\n this.sliderHandlePosition\n }%`;\n }\n\n private get getColorSliderStyle(): StyleInfo {\n const orientation = this.vertical ? 'top' : 'right';\n return {\n background: `linear-gradient(to ${orientation}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`,\n };\n }\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard checkerboard\"\n role=\"presentation\"\n @pointerdown=${this.handleGradientPointerdown}\n >\n <div\n class=\"gradient\"\n role=\"presentation\"\n style=${styleMap(this.getColorSliderStyle)}\n >\n <slot name=\"gradient\"></slot>\n </div>\n </div>\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=\"hsl(${this.value}, 100%, 50%)\"\n ?disabled=${this.disabled}\n style=${this.handlePositionStyles}\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n ></sp-color-handle>\n <input\n type=\"range\"\n class=\"slider\"\n min=\"0\"\n max=\"360\"\n aria-orientation=${ifDefined(\n this.vertical ? 'vertical' : undefined\n )}\n orient=${ifDefined(this.vertical ? 'vertical' : undefined)}\n step=${this.step}\n aria-label=${this.label}\n .value=${String(this.value)}\n aria-valuetext=${`${new Intl.NumberFormat(\n this.languageResolver.language,\n {\n maximumFractionDigits: 0,\n minimumIntegerDigits: 1,\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }\n ).format(this.value)}`}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n />\n `;\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n this.addEventListener('focus', this.handleFocus);\n this.addEventListener('blur', this.handleBlur);\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP;AAAA,EACI;AAAA,EAEA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAE1B,OAAO;AACP;AAAA,EACI;AAAA,
|
|
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 PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n ColorController,\n ColorTypes,\n} from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\n\nimport opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport styles from './color-slider.css.js';\n\n/**\n * @element sp-color-slider\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Slider has changed.\n * @fires change - An alteration to the value of the Color Slider has been committed by the user.\n */\nexport class ColorSlider extends Focusable {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerBoardStyles, styles];\n }\n\n @property({ type: String, reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: String })\n public label = 'hue';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n private languageResolver = new LanguageResolutionController(this);\n\n public colorController = new ColorController(this, { manageAs: 'hsv' });\n\n @property({ type: Number })\n public get value(): number {\n return this.colorController.hue;\n }\n\n public set value(hue: number) {\n this.colorController.hue = hue;\n }\n\n get sliderHandlePosition(): number {\n return (this.colorController.hue / 360) * 100;\n }\n\n @property({ type: String })\n public get color(): ColorTypes {\n return this.colorController.colorValue;\n }\n\n public set color(color: ColorTypes) {\n this.colorController.color = color;\n }\n\n @property({ type: Number })\n public step = 1;\n\n private get altered(): number {\n return this._altered;\n }\n\n private set altered(altered: number) {\n this._altered = altered;\n this.step = Math.max(1, this.altered * 10);\n }\n\n private _altered = 0;\n\n @query('input')\n public input!: HTMLInputElement;\n\n public override get focusElement(): HTMLInputElement {\n return this.input;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { key } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n let delta = 0;\n switch (key) {\n case 'ArrowUp':\n delta = this.step;\n break;\n case 'ArrowDown':\n delta = -this.step;\n break;\n case 'ArrowLeft':\n delta = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n delta = this.step * (this.isLTR ? 1 : -1);\n break;\n default:\n return;\n }\n event.preventDefault();\n\n const range = 360;\n const mult = 100 / range;\n const nextSliderHandlePosition = Math.min(\n 100,\n Math.max(0, this.sliderHandlePosition + delta * mult)\n );\n this.value = 360 * (nextSliderHandlePosition / 100);\n\n if (delta != 0) {\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber } = event.target;\n\n this.value = valueAsNumber;\n }\n\n private handleChange(event: Event & { target: HTMLInputElement }): void {\n this.handleInput(event);\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n public override focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n this.focused = this.hasVisibleFocusInTree();\n this.input.focus();\n }\n\n private handleFocus(): void {\n this.focused = true;\n }\n\n private handleBlur(): void {\n if (this._pointerDown) {\n return;\n }\n this.altered = 0;\n this.focused = false;\n }\n\n private boundingClientRect!: DOMRect;\n private _pointerDown = false;\n\n private handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n event.preventDefault();\n return;\n }\n this._pointerDown = true;\n this.colorController.savePreviousColor();\n this.boundingClientRect = this.getBoundingClientRect();\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if (event.pointerType === 'mouse') {\n this.focused = true;\n }\n }\n\n private handlePointermove(event: PointerEvent): void {\n const nextsliderHandlePosition = this.calculateHandlePosition(event);\n this.value = 360 * (nextsliderHandlePosition / 100);\n\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private handlePointerup(event: PointerEvent): void {\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.colorController.restorePreviousColor();\n }\n // Retain focus on input element after mouse up to enable keyboard interactions\n this.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n }\n\n /**\n * Returns the value under the cursor\n * @param: PointerEvent on slider\n * @return: Slider value that correlates to the position under the pointer\n */\n private calculateHandlePosition(event: PointerEvent): number {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return this.sliderHandlePosition;\n }\n const rect = this.boundingClientRect;\n const minOffset = this.vertical ? rect.top : rect.left;\n const offset = this.vertical ? event.clientY : event.clientX;\n const size = this.vertical ? rect.height : rect.width;\n\n const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));\n const sliderHandlePosition =\n this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;\n\n return sliderHandlePosition;\n }\n\n private handleGradientPointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n this.handlePointermove(event);\n }\n\n private get handlePositionStyles(): string {\n return `${this.vertical ? 'inset-block-end' : 'inset-inline-start'}: ${\n this.sliderHandlePosition\n }%`;\n }\n\n private get getColorSliderStyle(): StyleInfo {\n const orientation = this.vertical ? 'top' : 'right';\n return {\n background: `linear-gradient(to ${orientation}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`,\n };\n }\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard checkerboard\"\n role=\"presentation\"\n @pointerdown=${this.handleGradientPointerdown}\n >\n <div\n class=\"gradient\"\n role=\"presentation\"\n style=${styleMap(this.getColorSliderStyle)}\n >\n <slot name=\"gradient\"></slot>\n </div>\n </div>\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=\"hsl(${this.value}, 100%, 50%)\"\n ?disabled=${this.disabled}\n style=${this.handlePositionStyles}\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n ></sp-color-handle>\n <input\n type=\"range\"\n class=\"slider\"\n min=\"0\"\n max=\"360\"\n aria-orientation=${ifDefined(\n this.vertical ? 'vertical' : undefined\n )}\n orient=${ifDefined(this.vertical ? 'vertical' : undefined)}\n step=${this.step}\n aria-label=${this.label}\n .value=${String(this.value)}\n aria-valuetext=${`${new Intl.NumberFormat(\n this.languageResolver.language,\n {\n maximumFractionDigits: 0,\n minimumIntegerDigits: 1,\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }\n ).format(this.value)}`}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n />\n `;\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n this.addEventListener('focus', this.handleFocus);\n this.addEventListener('blur', this.handleBlur);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["key"]
|
|
7
7
|
}
|
package/src/ColorSlider.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(u,l,e,t)=>{for(var i=t>1?void 0:t?v(l,e):l,s=u.length-1,o;s>=0;s--)(o=u[s])&&(i=(t?o(l,e,i):o(i))||i);return t&&i&&c(l,e,i),i};import{html as m}from"@spectrum-web-components/base";import{ifDefined as d,styleMap as f}from"@spectrum-web-components/base/src/directives.js";import{property as n,query as h}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as b}from"@spectrum-web-components/base/src/streaming-listener.js";import{Focusable as g}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/color-handle/sp-color-handle.js";import{ColorController as y}from"@spectrum-web-components/reactive-controllers/src/ColorController.js";import{LanguageResolutionController as w}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import P from"@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js";import E from"./color-slider.css.js";export class ColorSlider extends g{constructor(){super(...arguments);this.disabled=!1;this.focused=!1;this.label="hue";this.vertical=!1;this.languageResolver=new w(this);this.colorController=new y(this,{manageAs:"hsv"});this.step=1;this._altered=0;this._pointerDown=!1}static get styles(){return[P,E]}get value(){return this.colorController.hue}set value(e){this.colorController.hue=e}get sliderHandlePosition(){return this.colorController.hue/360*100}get color(){return this.colorController.colorValue}set color(e){this.colorController.color=e}get altered(){return this._altered}set altered(e){this._altered=e,this.step=Math.max(1,this.altered*10)}get focusElement(){return this.input}handleKeydown(e){const{key:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(p=>!!p).length;let i=0;switch(t){case"ArrowUp":i=this.step;break;case"ArrowDown":i=-this.step;break;case"ArrowLeft":i=this.step*(this.isLTR?-1:1);break;case"ArrowRight":i=this.step*(this.isLTR?1:-1);break;default:return}e.preventDefault();const o=100/360,a=Math.min(100,Math.max(0,this.sliderHandlePosition+i*o));this.value=360*(a/100),i!=0&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}handleInput(e){const{valueAsNumber:t}=e.target;this.value=t}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.focused=this.hasVisibleFocusInTree(),this.input.focus()}handleFocus(){this.focused=!0}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1)}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const t=this.calculateHandlePosition(e);this.value=360*(t/100),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor(),this.focus(),e.pointerType==="mouse"&&(this.focused=!1)}calculateHandlePosition(e){if(!this.boundingClientRect)return this.sliderHandlePosition;const t=this.boundingClientRect,i=this.vertical?t.top:t.left,s=this.vertical?e.clientY:e.clientX,o=this.vertical?t.height:t.width,a=Math.max(0,Math.min(1,(s-i)/o));return this.vertical||!this.isLTR?100-100*a:100*a}handleGradientPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}get handlePositionStyles(){return`${this.vertical?"inset-block-end":"inset-inline-start"}: ${this.sliderHandlePosition}%`}get getColorSliderStyle(){return{background:`linear-gradient(to ${this.vertical?"top":"right"}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`}}render(){return m`
|
|
2
2
|
<div
|
|
3
3
|
class="opacity-checkerboard checkerboard"
|
|
4
4
|
role="presentation"
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<div
|
|
8
8
|
class="gradient"
|
|
9
9
|
role="presentation"
|
|
10
|
-
style=${
|
|
10
|
+
style=${f(this.getColorSliderStyle)}
|
|
11
11
|
>
|
|
12
12
|
<slot name="gradient"></slot>
|
|
13
13
|
</div>
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
color="hsl(${this.value}, 100%, 50%)"
|
|
21
21
|
?disabled=${this.disabled}
|
|
22
22
|
style=${this.handlePositionStyles}
|
|
23
|
-
${
|
|
23
|
+
${b({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
|
|
24
24
|
></sp-color-handle>
|
|
25
25
|
<input
|
|
26
26
|
type="range"
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
@change=${this.handleChange}
|
|
38
38
|
@keydown=${this.handleKeydown}
|
|
39
39
|
/>
|
|
40
|
-
`}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur)}}r([
|
|
40
|
+
`}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener("focus",this.handleFocus),this.addEventListener("blur",this.handleBlur)}}r([n({type:String,reflect:!0})],ColorSlider.prototype,"dir",2),r([n({type:Boolean,reflect:!0})],ColorSlider.prototype,"disabled",2),r([n({type:Boolean,reflect:!0})],ColorSlider.prototype,"focused",2),r([h(".handle")],ColorSlider.prototype,"handle",2),r([n({type:String})],ColorSlider.prototype,"label",2),r([n({type:Boolean,reflect:!0})],ColorSlider.prototype,"vertical",2),r([n({type:Number})],ColorSlider.prototype,"value",1),r([n({type:String})],ColorSlider.prototype,"color",1),r([n({type:Number})],ColorSlider.prototype,"step",2),r([h("input")],ColorSlider.prototype,"input",2);
|
|
41
41
|
//# sourceMappingURL=ColorSlider.js.map
|
package/src/ColorSlider.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorSlider.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 PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n ColorController,\n ColorValue,\n HSL,\n} from '@spectrum-web-components/reactive-controllers/src/Color.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\n\nimport opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport styles from './color-slider.css.js';\n\n/**\n * @element sp-color-slider\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Slider has changed.\n * @fires change - An alteration to the value of the Color Slider has been committed by the user.\n */\nexport class ColorSlider extends Focusable {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerBoardStyles, styles];\n }\n\n @property({ type: String, reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: String })\n public label = 'hue';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n private languageResolver = new LanguageResolutionController(this);\n\n private colorController = new ColorController(this, {\n /* c8 ignore next 3 */\n applyColorToState: () => {\n this.sliderHandlePosition = 100 * (this.colorController.hue / 360);\n },\n extractColorFromState: (controller) => ({\n ...(controller.getColor('hsl') as HSL),\n h: this.value,\n }),\n maintains: 'saturation',\n });\n\n @property({ type: Number })\n public get value(): number {\n return this.colorController.hue;\n }\n\n public set value(hue: number) {\n this.colorController.hue = hue;\n }\n\n @property({ type: Number, reflect: true })\n public sliderHandlePosition = 0;\n\n @property({ type: String })\n public get color(): ColorValue {\n return this.colorController.color;\n }\n\n public set color(color: ColorValue) {\n this.colorController.color = color;\n }\n\n @property({ type: Number })\n public step = 1;\n\n private get altered(): number {\n return this._altered;\n }\n\n private set altered(altered: number) {\n this._altered = altered;\n this.step = Math.max(1, this.altered * 10);\n }\n\n private _altered = 0;\n\n @query('input')\n public input!: HTMLInputElement;\n\n public override get focusElement(): HTMLInputElement {\n return this.input;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { key } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n let delta = 0;\n switch (key) {\n case 'ArrowUp':\n delta = this.step;\n break;\n case 'ArrowDown':\n delta = -this.step;\n break;\n case 'ArrowLeft':\n delta = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n delta = this.step * (this.isLTR ? 1 : -1);\n break;\n default:\n return;\n }\n event.preventDefault();\n\n const range = 360;\n const mult = 100 / range;\n this.sliderHandlePosition = Math.min(\n 100,\n Math.max(0, this.sliderHandlePosition + delta * mult)\n );\n this.value = Math.min(100, Math.max(0, this.value + delta));\n this.colorController.applyColorFromState();\n\n if (delta != 0) {\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber } = event.target;\n\n this.value = valueAsNumber;\n this.sliderHandlePosition = 100 * (this.value / 360);\n this.colorController.applyColorFromState();\n }\n\n private handleChange(event: Event & { target: HTMLInputElement }): void {\n this.handleInput(event);\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n public override focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n this.focused = this.hasVisibleFocusInTree();\n this.input.focus();\n }\n\n private handleFocus(): void {\n this.focused = true;\n }\n\n private handleBlur(): void {\n if (this._pointerDown) {\n return;\n }\n this.altered = 0;\n this.focused = false;\n }\n\n private boundingClientRect!: DOMRect;\n private _pointerDown = false;\n\n private handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n event.preventDefault();\n return;\n }\n this._pointerDown = true;\n this.colorController.savePreviousColor();\n this.boundingClientRect = this.getBoundingClientRect();\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if (event.pointerType === 'mouse') {\n this.focused = true;\n }\n }\n\n private handlePointermove(event: PointerEvent): void {\n this.sliderHandlePosition = this.calculateHandlePosition(event);\n this.value = 360 * (this.sliderHandlePosition / 100);\n\n this.colorController.applyColorFromState();\n\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private handlePointerup(event: PointerEvent): void {\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.colorController.restorePreviousColor();\n }\n // Retain focus on input element after mouse up to enable keyboard interactions\n this.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n }\n\n /**\n * Returns the value under the cursor\n * @param: PointerEvent on slider\n * @return: Slider value that correlates to the position under the pointer\n */\n private calculateHandlePosition(event: PointerEvent): number {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return this.sliderHandlePosition;\n }\n const rect = this.boundingClientRect;\n const minOffset = this.vertical ? rect.top : rect.left;\n const offset = this.vertical ? event.clientY : event.clientX;\n const size = this.vertical ? rect.height : rect.width;\n\n const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));\n const sliderHandlePosition =\n this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;\n\n return sliderHandlePosition;\n }\n\n private handleGradientPointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n this.handlePointermove(event);\n }\n\n private get handlePositionStyles(): string {\n return `${this.vertical ? 'inset-block-end' : 'inset-inline-start'}: ${\n this.sliderHandlePosition\n }%`;\n }\n\n private get getColorSliderStyle(): StyleInfo {\n const orientation = this.vertical ? 'top' : 'right';\n return {\n background: `linear-gradient(to ${orientation}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`,\n };\n }\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard checkerboard\"\n role=\"presentation\"\n @pointerdown=${this.handleGradientPointerdown}\n >\n <div\n class=\"gradient\"\n role=\"presentation\"\n style=${styleMap(this.getColorSliderStyle)}\n >\n <slot name=\"gradient\"></slot>\n </div>\n </div>\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=\"hsl(${this.value}, 100%, 50%)\"\n ?disabled=${this.disabled}\n style=${this.handlePositionStyles}\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n ></sp-color-handle>\n <input\n type=\"range\"\n class=\"slider\"\n min=\"0\"\n max=\"360\"\n aria-orientation=${ifDefined(\n this.vertical ? 'vertical' : undefined\n )}\n orient=${ifDefined(this.vertical ? 'vertical' : undefined)}\n step=${this.step}\n aria-label=${this.label}\n .value=${String(this.value)}\n aria-valuetext=${`${new Intl.NumberFormat(\n this.languageResolver.language,\n {\n maximumFractionDigits: 0,\n minimumIntegerDigits: 1,\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }\n ).format(this.value)}`}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n />\n `;\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n this.addEventListener('focus', this.handleFocus);\n this.addEventListener('blur', this.handleBlur);\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OACI,aAAAC,EAEA,YAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,qBAAAC,MAAyB,0DAClC,OAAS,aAAAC,MAAiB,mDAE1B,MAAO,2DACP,OACI,mBAAAC,
|
|
6
|
-
"names": ["html", "ifDefined", "styleMap", "property", "query", "streamingListener", "Focusable", "ColorController", "LanguageResolutionController", "opacityCheckerBoardStyles", "styles", "
|
|
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 PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n StyleInfo,\n styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport type { ColorHandle } from '@spectrum-web-components/color-handle';\nimport '@spectrum-web-components/color-handle/sp-color-handle.js';\nimport {\n ColorController,\n ColorTypes,\n} from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\n\nimport opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';\nimport styles from './color-slider.css.js';\n\n/**\n * @element sp-color-slider\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Slider has changed.\n * @fires change - An alteration to the value of the Color Slider has been committed by the user.\n */\nexport class ColorSlider extends Focusable {\n public static override get styles(): CSSResultArray {\n return [opacityCheckerBoardStyles, styles];\n }\n\n @property({ type: String, reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: Boolean, reflect: true })\n public override disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.handle')\n private handle!: ColorHandle;\n\n @property({ type: String })\n public label = 'hue';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n private languageResolver = new LanguageResolutionController(this);\n\n public colorController = new ColorController(this, { manageAs: 'hsv' });\n\n @property({ type: Number })\n public get value(): number {\n return this.colorController.hue;\n }\n\n public set value(hue: number) {\n this.colorController.hue = hue;\n }\n\n get sliderHandlePosition(): number {\n return (this.colorController.hue / 360) * 100;\n }\n\n @property({ type: String })\n public get color(): ColorTypes {\n return this.colorController.colorValue;\n }\n\n public set color(color: ColorTypes) {\n this.colorController.color = color;\n }\n\n @property({ type: Number })\n public step = 1;\n\n private get altered(): number {\n return this._altered;\n }\n\n private set altered(altered: number) {\n this._altered = altered;\n this.step = Math.max(1, this.altered * 10);\n }\n\n private _altered = 0;\n\n @query('input')\n public input!: HTMLInputElement;\n\n public override get focusElement(): HTMLInputElement {\n return this.input;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { key } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n let delta = 0;\n switch (key) {\n case 'ArrowUp':\n delta = this.step;\n break;\n case 'ArrowDown':\n delta = -this.step;\n break;\n case 'ArrowLeft':\n delta = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n delta = this.step * (this.isLTR ? 1 : -1);\n break;\n default:\n return;\n }\n event.preventDefault();\n\n const range = 360;\n const mult = 100 / range;\n const nextSliderHandlePosition = Math.min(\n 100,\n Math.max(0, this.sliderHandlePosition + delta * mult)\n );\n this.value = 360 * (nextSliderHandlePosition / 100);\n\n if (delta != 0) {\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber } = event.target;\n\n this.value = valueAsNumber;\n }\n\n private handleChange(event: Event & { target: HTMLInputElement }): void {\n this.handleInput(event);\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n public override focus(focusOptions: FocusOptions = {}): void {\n super.focus(focusOptions);\n this.forwardFocus();\n }\n\n private forwardFocus(): void {\n this.focused = this.hasVisibleFocusInTree();\n this.input.focus();\n }\n\n private handleFocus(): void {\n this.focused = true;\n }\n\n private handleBlur(): void {\n if (this._pointerDown) {\n return;\n }\n this.altered = 0;\n this.focused = false;\n }\n\n private boundingClientRect!: DOMRect;\n private _pointerDown = false;\n\n private handlePointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n event.preventDefault();\n return;\n }\n this._pointerDown = true;\n this.colorController.savePreviousColor();\n this.boundingClientRect = this.getBoundingClientRect();\n (event.target as HTMLElement).setPointerCapture(event.pointerId);\n if (event.pointerType === 'mouse') {\n this.focused = true;\n }\n }\n\n private handlePointermove(event: PointerEvent): void {\n const nextsliderHandlePosition = this.calculateHandlePosition(event);\n this.value = 360 * (nextsliderHandlePosition / 100);\n\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n }\n\n private handlePointerup(event: PointerEvent): void {\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.colorController.restorePreviousColor();\n }\n // Retain focus on input element after mouse up to enable keyboard interactions\n this.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n }\n\n /**\n * Returns the value under the cursor\n * @param: PointerEvent on slider\n * @return: Slider value that correlates to the position under the pointer\n */\n private calculateHandlePosition(event: PointerEvent): number {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return this.sliderHandlePosition;\n }\n const rect = this.boundingClientRect;\n const minOffset = this.vertical ? rect.top : rect.left;\n const offset = this.vertical ? event.clientY : event.clientX;\n const size = this.vertical ? rect.height : rect.width;\n\n const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));\n const sliderHandlePosition =\n this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;\n\n return sliderHandlePosition;\n }\n\n private handleGradientPointerdown(event: PointerEvent): void {\n if (event.button !== 0) {\n return;\n }\n event.stopPropagation();\n event.preventDefault();\n this.handle.dispatchEvent(new PointerEvent('pointerdown', event));\n this.handlePointermove(event);\n }\n\n private get handlePositionStyles(): string {\n return `${this.vertical ? 'inset-block-end' : 'inset-inline-start'}: ${\n this.sliderHandlePosition\n }%`;\n }\n\n private get getColorSliderStyle(): StyleInfo {\n const orientation = this.vertical ? 'top' : 'right';\n return {\n background: `linear-gradient(to ${orientation}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`,\n };\n }\n\n protected override render(): TemplateResult {\n return html`\n <div\n class=\"opacity-checkerboard checkerboard\"\n role=\"presentation\"\n @pointerdown=${this.handleGradientPointerdown}\n >\n <div\n class=\"gradient\"\n role=\"presentation\"\n style=${styleMap(this.getColorSliderStyle)}\n >\n <slot name=\"gradient\"></slot>\n </div>\n </div>\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=\"hsl(${this.value}, 100%, 50%)\"\n ?disabled=${this.disabled}\n style=${this.handlePositionStyles}\n ${streamingListener({\n start: ['pointerdown', this.handlePointerdown],\n streamInside: ['pointermove', this.handlePointermove],\n end: [\n ['pointerup', 'pointercancel', 'pointerleave'],\n this.handlePointerup,\n ],\n })}\n ></sp-color-handle>\n <input\n type=\"range\"\n class=\"slider\"\n min=\"0\"\n max=\"360\"\n aria-orientation=${ifDefined(\n this.vertical ? 'vertical' : undefined\n )}\n orient=${ifDefined(this.vertical ? 'vertical' : undefined)}\n step=${this.step}\n aria-label=${this.label}\n .value=${String(this.value)}\n aria-valuetext=${`${new Intl.NumberFormat(\n this.languageResolver.language,\n {\n maximumFractionDigits: 0,\n minimumIntegerDigits: 1,\n style: 'unit',\n unit: 'degree',\n unitDisplay: 'narrow',\n }\n ).format(this.value)}`}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n />\n `;\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n this.addEventListener('focus', this.handleFocus);\n this.addEventListener('blur', this.handleBlur);\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["html", "ifDefined", "styleMap", "property", "query", "streamingListener", "Focusable", "ColorController", "LanguageResolutionController", "opacityCheckerBoardStyles", "styles", "hue", "color", "altered", "event", "key", "delta", "mult", "nextSliderHandlePosition", "valueAsNumber", "focusOptions", "nextsliderHandlePosition", "rect", "minOffset", "offset", "size", "percent", "changed", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -13,37 +13,25 @@ import {
|
|
|
13
13
|
testForLitDevWarnings
|
|
14
14
|
} from "../../../test/testing-helpers.js";
|
|
15
15
|
import "@spectrum-web-components/color-slider/sp-color-slider.js";
|
|
16
|
-
import { TinyColor } from "@ctrl/tinycolor";
|
|
17
16
|
import { sendKeys } from "@web/test-runner-commands";
|
|
18
17
|
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
19
18
|
import { spy } from "sinon";
|
|
19
|
+
import { Default } from "../stories/color-slider.stories.js";
|
|
20
20
|
describe("ColorSlider", () => {
|
|
21
|
-
testForLitDevWarnings(
|
|
22
|
-
async () => await fixture(
|
|
23
|
-
html`
|
|
24
|
-
<sp-color-slider></sp-color-slider>
|
|
25
|
-
`
|
|
26
|
-
)
|
|
27
|
-
);
|
|
21
|
+
testForLitDevWarnings(async () => await fixture(Default()));
|
|
28
22
|
it("loads default color-slider accessibly", async () => {
|
|
29
|
-
const el = await fixture(
|
|
30
|
-
html`
|
|
31
|
-
<sp-color-slider></sp-color-slider>
|
|
32
|
-
`
|
|
33
|
-
);
|
|
23
|
+
const el = await fixture(Default());
|
|
34
24
|
await elementUpdated(el);
|
|
35
25
|
await expect(el).to.be.accessible();
|
|
36
26
|
});
|
|
37
27
|
it("manages a single tab stop", async () => {
|
|
38
|
-
const test = await fixture(
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
`
|
|
46
|
-
);
|
|
28
|
+
const test = await fixture(html`
|
|
29
|
+
<div>
|
|
30
|
+
<input type="text" id="test-input-1" />
|
|
31
|
+
<sp-color-slider></sp-color-slider>
|
|
32
|
+
<input type="text" id="test-input-2" />
|
|
33
|
+
</div>
|
|
34
|
+
`);
|
|
47
35
|
const el = test.querySelector("sp-color-slider");
|
|
48
36
|
const input1 = test.querySelector(
|
|
49
37
|
"input:nth-of-type(1)"
|
|
@@ -83,11 +71,7 @@ describe("ColorSlider", () => {
|
|
|
83
71
|
expect(document.activeElement).to.equal(input1);
|
|
84
72
|
});
|
|
85
73
|
it("manages [focused]", async () => {
|
|
86
|
-
const el = await fixture(
|
|
87
|
-
html`
|
|
88
|
-
<sp-color-slider></sp-color-slider>
|
|
89
|
-
`
|
|
90
|
-
);
|
|
74
|
+
const el = await fixture(Default());
|
|
91
75
|
await elementUpdated(el);
|
|
92
76
|
expect(el.focused).to.be.false;
|
|
93
77
|
await sendKeys({ press: "Tab" });
|
|
@@ -106,14 +90,12 @@ describe("ColorSlider", () => {
|
|
|
106
90
|
it('dispatches input and change events in response to "Arrow*" keypresses', async () => {
|
|
107
91
|
const inputSpy = spy();
|
|
108
92
|
const changeSpy = spy();
|
|
109
|
-
const el = await fixture(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
`
|
|
116
|
-
);
|
|
93
|
+
const el = await fixture(html`
|
|
94
|
+
<sp-color-slider
|
|
95
|
+
@change=${() => changeSpy()}
|
|
96
|
+
@input=${() => inputSpy()}
|
|
97
|
+
></sp-color-slider>
|
|
98
|
+
`);
|
|
117
99
|
await elementUpdated(el);
|
|
118
100
|
el.focus();
|
|
119
101
|
await sendKeys({ press: "ArrowRight" });
|
|
@@ -132,14 +114,12 @@ describe("ColorSlider", () => {
|
|
|
132
114
|
it("responds to events on the internal input element", async () => {
|
|
133
115
|
const inputSpy = spy();
|
|
134
116
|
const changeSpy = spy();
|
|
135
|
-
const el = await fixture(
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
`
|
|
142
|
-
);
|
|
117
|
+
const el = await fixture(html`
|
|
118
|
+
<sp-color-slider
|
|
119
|
+
@change=${() => changeSpy()}
|
|
120
|
+
@input=${() => inputSpy()}
|
|
121
|
+
></sp-color-slider>
|
|
122
|
+
`);
|
|
143
123
|
await elementUpdated(el);
|
|
144
124
|
el.focus();
|
|
145
125
|
el.focusElement.dispatchEvent(
|
|
@@ -159,13 +139,11 @@ describe("ColorSlider", () => {
|
|
|
159
139
|
expect(changeSpy.callCount).to.equal(1);
|
|
160
140
|
});
|
|
161
141
|
it('manages value on "Arrow*" keypresses', async () => {
|
|
162
|
-
const el = await fixture(
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
`
|
|
168
|
-
);
|
|
142
|
+
const el = await fixture(html`
|
|
143
|
+
<sp-color-slider
|
|
144
|
+
style="--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;"
|
|
145
|
+
></sp-color-slider>
|
|
146
|
+
`);
|
|
169
147
|
await elementUpdated(el);
|
|
170
148
|
expect(el.sliderHandlePosition).to.equal(0);
|
|
171
149
|
expect(el.value).to.equal(0);
|
|
@@ -209,11 +187,9 @@ describe("ColorSlider", () => {
|
|
|
209
187
|
expect(el.value).to.equal(0);
|
|
210
188
|
});
|
|
211
189
|
it('accepts "Arrow*" keypresses in dir="rtl"', async () => {
|
|
212
|
-
const el = await fixture(
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
`
|
|
216
|
-
);
|
|
190
|
+
const el = await fixture(html`
|
|
191
|
+
<sp-color-slider dir="rtl"></sp-color-slider>
|
|
192
|
+
`);
|
|
217
193
|
await elementUpdated(el);
|
|
218
194
|
expect(el.sliderHandlePosition).to.equal(0);
|
|
219
195
|
const input = el.focusElement;
|
|
@@ -253,11 +229,7 @@ describe("ColorSlider", () => {
|
|
|
253
229
|
expect(el.value).to.equal(0);
|
|
254
230
|
});
|
|
255
231
|
it('accepts "Arrow*" keypresses with alteration', async () => {
|
|
256
|
-
const el = await fixture(
|
|
257
|
-
html`
|
|
258
|
-
<sp-color-slider></sp-color-slider>
|
|
259
|
-
`
|
|
260
|
-
);
|
|
232
|
+
const el = await fixture(Default());
|
|
261
233
|
await elementUpdated(el);
|
|
262
234
|
el.focus();
|
|
263
235
|
expect(el.sliderHandlePosition).to.equal(0);
|
|
@@ -300,7 +272,7 @@ describe("ColorSlider", () => {
|
|
|
300
272
|
20 * 100 / 360,
|
|
301
273
|
1e-6
|
|
302
274
|
);
|
|
303
|
-
expect(el.value).to.
|
|
275
|
+
expect(el.value).to.be.approximately(20, 1e-6);
|
|
304
276
|
await sendKeys({
|
|
305
277
|
press: "ArrowLeft"
|
|
306
278
|
});
|
|
@@ -315,15 +287,13 @@ describe("ColorSlider", () => {
|
|
|
315
287
|
expect(el.value).to.equal(0);
|
|
316
288
|
});
|
|
317
289
|
it("accepts pointer events", async () => {
|
|
318
|
-
const color =
|
|
319
|
-
const el = await fixture(
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
`
|
|
326
|
-
);
|
|
290
|
+
const color = { h: "0", s: "20%", l: "70%" };
|
|
291
|
+
const el = await fixture(html`
|
|
292
|
+
<sp-color-slider
|
|
293
|
+
.color=${color}
|
|
294
|
+
style="--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-height: 24px;"
|
|
295
|
+
></sp-color-slider>
|
|
296
|
+
`);
|
|
327
297
|
await elementUpdated(el);
|
|
328
298
|
const { handle } = el;
|
|
329
299
|
handle.setPointerCapture = () => {
|
|
@@ -333,8 +303,12 @@ describe("ColorSlider", () => {
|
|
|
333
303
|
return;
|
|
334
304
|
};
|
|
335
305
|
expect(el.sliderHandlePosition).to.equal(0);
|
|
336
|
-
expect(
|
|
337
|
-
|
|
306
|
+
expect(
|
|
307
|
+
el.color.s
|
|
308
|
+
).to.be.within(0.19, 0.21);
|
|
309
|
+
expect(
|
|
310
|
+
el.color.l
|
|
311
|
+
).to.be.within(0.69, 0.71);
|
|
338
312
|
handle.dispatchEvent(
|
|
339
313
|
new PointerEvent("pointerdown", {
|
|
340
314
|
button: 1,
|
|
@@ -348,8 +322,12 @@ describe("ColorSlider", () => {
|
|
|
348
322
|
);
|
|
349
323
|
await elementUpdated(el);
|
|
350
324
|
expect(el.sliderHandlePosition).to.equal(0);
|
|
351
|
-
expect(
|
|
352
|
-
|
|
325
|
+
expect(
|
|
326
|
+
el.color.s
|
|
327
|
+
).to.be.within(0.19, 0.21);
|
|
328
|
+
expect(
|
|
329
|
+
el.color.l
|
|
330
|
+
).to.be.within(0.69, 0.71);
|
|
353
331
|
const root = el.shadowRoot ? el.shadowRoot : el;
|
|
354
332
|
const gradient = root.querySelector(".gradient");
|
|
355
333
|
gradient.dispatchEvent(
|
|
@@ -365,8 +343,12 @@ describe("ColorSlider", () => {
|
|
|
365
343
|
);
|
|
366
344
|
await elementUpdated(el);
|
|
367
345
|
expect(el.sliderHandlePosition).to.equal(0);
|
|
368
|
-
expect(
|
|
369
|
-
|
|
346
|
+
expect(
|
|
347
|
+
el.color.s
|
|
348
|
+
).to.be.within(0.19, 0.21);
|
|
349
|
+
expect(
|
|
350
|
+
el.color.l
|
|
351
|
+
).to.be.within(0.69, 0.71);
|
|
370
352
|
gradient.dispatchEvent(
|
|
371
353
|
new PointerEvent("pointerdown", {
|
|
372
354
|
pointerId: 1,
|
|
@@ -379,8 +361,12 @@ describe("ColorSlider", () => {
|
|
|
379
361
|
);
|
|
380
362
|
await elementUpdated(el);
|
|
381
363
|
expect(el.sliderHandlePosition).to.equal(47.91666666666667);
|
|
382
|
-
expect(
|
|
383
|
-
|
|
364
|
+
expect(
|
|
365
|
+
el.color.s
|
|
366
|
+
).to.be.within(0.19, 0.21);
|
|
367
|
+
expect(
|
|
368
|
+
el.color.l
|
|
369
|
+
).to.be.within(0.69, 0.71);
|
|
384
370
|
handle.dispatchEvent(
|
|
385
371
|
new PointerEvent("pointermove", {
|
|
386
372
|
pointerId: 1,
|
|
@@ -403,26 +389,28 @@ describe("ColorSlider", () => {
|
|
|
403
389
|
);
|
|
404
390
|
await elementUpdated(el);
|
|
405
391
|
expect(el.sliderHandlePosition).to.equal(53.125);
|
|
406
|
-
expect(
|
|
407
|
-
|
|
392
|
+
expect(
|
|
393
|
+
el.color.s
|
|
394
|
+
).to.be.within(0.19, 0.21);
|
|
395
|
+
expect(
|
|
396
|
+
el.color.l
|
|
397
|
+
).to.be.within(0.69, 0.71);
|
|
408
398
|
});
|
|
409
399
|
it("can have `change` events prevented", async () => {
|
|
410
|
-
const color =
|
|
411
|
-
const el = await fixture(
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
style="
|
|
400
|
+
const color = { h: "0", s: "20%", l: "70%" };
|
|
401
|
+
const el = await fixture(html`
|
|
402
|
+
<sp-color-slider
|
|
403
|
+
.color=${color}
|
|
404
|
+
@change=${(event) => {
|
|
405
|
+
event.preventDefault();
|
|
406
|
+
}}
|
|
407
|
+
style="
|
|
419
408
|
--spectrum-colorslider-default-length: 192px;
|
|
420
409
|
--spectrum-colorslider-height: 24px;
|
|
421
410
|
--spectrum-colorhandle-size: 5px;
|
|
422
411
|
"
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
);
|
|
412
|
+
></sp-color-slider>
|
|
413
|
+
`);
|
|
426
414
|
await elementUpdated(el);
|
|
427
415
|
expect(el.value).to.equal(0);
|
|
428
416
|
const handle = el.shadowRoot.querySelector(
|
|
@@ -465,14 +453,12 @@ describe("ColorSlider", () => {
|
|
|
465
453
|
expect(el.value).to.equal(0);
|
|
466
454
|
});
|
|
467
455
|
it("accepts pointer events while [vertical]", async () => {
|
|
468
|
-
const el = await fixture(
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
`
|
|
475
|
-
);
|
|
456
|
+
const el = await fixture(html`
|
|
457
|
+
<sp-color-slider
|
|
458
|
+
vertical
|
|
459
|
+
style="--spectrum-colorslider-vertical-default-length: 192px; --spectrum-colorslider-vertical-width: 24px;"
|
|
460
|
+
></sp-color-slider>
|
|
461
|
+
`);
|
|
476
462
|
await elementUpdated(el);
|
|
477
463
|
const { handle } = el;
|
|
478
464
|
handle.setPointerCapture = () => {
|
|
@@ -521,14 +507,12 @@ describe("ColorSlider", () => {
|
|
|
521
507
|
});
|
|
522
508
|
it('accepts pointer events in dir="rtl"', async () => {
|
|
523
509
|
document.documentElement.dir = "rtl";
|
|
524
|
-
const el = await fixture(
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
`
|
|
531
|
-
);
|
|
510
|
+
const el = await fixture(html`
|
|
511
|
+
<sp-color-slider
|
|
512
|
+
dir="rtl"
|
|
513
|
+
style="--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-height: 24px;"
|
|
514
|
+
></sp-color-slider>
|
|
515
|
+
`);
|
|
532
516
|
await elementUpdated(el);
|
|
533
517
|
const { handle } = el;
|
|
534
518
|
const clientWidth = document.documentElement.offsetWidth;
|
|
@@ -553,7 +537,10 @@ describe("ColorSlider", () => {
|
|
|
553
537
|
})
|
|
554
538
|
);
|
|
555
539
|
await elementUpdated(el);
|
|
556
|
-
expect(el.sliderHandlePosition).to.
|
|
540
|
+
expect(el.sliderHandlePosition).to.be.approximately(
|
|
541
|
+
100 - 52.083333333333336,
|
|
542
|
+
1e-6
|
|
543
|
+
);
|
|
557
544
|
handle.dispatchEvent(
|
|
558
545
|
new PointerEvent("pointermove", {
|
|
559
546
|
pointerId: 1,
|
|
@@ -579,19 +566,19 @@ describe("ColorSlider", () => {
|
|
|
579
566
|
});
|
|
580
567
|
const colorFormats = [
|
|
581
568
|
//rgb
|
|
582
|
-
{ name: "RGB String", color: "
|
|
583
|
-
{ name: "
|
|
569
|
+
{ name: "RGB String", color: "rgba(204, 51, 204, 1)" },
|
|
570
|
+
{ name: "RGBA", color: { r: 204, g: 51, b: 204, a: 1 } },
|
|
584
571
|
//prgb
|
|
585
|
-
{ name: "PRGB String", color: "
|
|
572
|
+
{ name: "PRGB String", color: "rgba(80%, 20%, 80%,100%)" },
|
|
586
573
|
{ name: "PRGB", color: { r: "80%", g: "20%", b: "80%", a: 1 } },
|
|
587
574
|
// hex
|
|
588
|
-
{ name: "Hex", color: "cc33cc" },
|
|
575
|
+
{ name: "Hex", color: "#cc33cc" },
|
|
589
576
|
{ name: "Hex String", color: "#cc33cc" },
|
|
590
577
|
// hex8
|
|
591
|
-
{ name: "Hex8", color: "cc33ccff" },
|
|
578
|
+
{ name: "Hex8", color: "#cc33ccff" },
|
|
592
579
|
{ name: "Hex8 String", color: "#cc33ccff" },
|
|
593
580
|
// name
|
|
594
|
-
{ name: "string", color: "red" },
|
|
581
|
+
{ name: "string", color: "red", test: "ff0000" },
|
|
595
582
|
// hsl
|
|
596
583
|
{ name: "HSL String", color: "hsl(300, 60%, 50%)" },
|
|
597
584
|
{ name: "HSL", color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },
|
|
@@ -601,88 +588,59 @@ describe("ColorSlider", () => {
|
|
|
601
588
|
];
|
|
602
589
|
colorFormats.map((format) => {
|
|
603
590
|
it(`maintains \`color\` format as ${format.name}`, async () => {
|
|
604
|
-
const el = await fixture(
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
591
|
+
const el = await fixture(Default());
|
|
592
|
+
if (typeof format.color === "string") {
|
|
593
|
+
el.color = format.color;
|
|
594
|
+
} else {
|
|
595
|
+
el.color = { ...format.color };
|
|
596
|
+
}
|
|
610
597
|
if (format.name.startsWith("Hex")) {
|
|
611
|
-
expect(el.color).to.equal(
|
|
612
|
-
|
|
598
|
+
expect(el.color, el.color.toString()).to.equal(
|
|
599
|
+
format.test || format.color
|
|
600
|
+
);
|
|
601
|
+
} else {
|
|
602
|
+
expect(
|
|
603
|
+
el.color,
|
|
604
|
+
`${JSON.stringify(el.color)} ${JSON.stringify(
|
|
605
|
+
format.color
|
|
606
|
+
)}`
|
|
607
|
+
).to.deep.equal(format.test || format.color);
|
|
608
|
+
}
|
|
613
609
|
});
|
|
614
610
|
});
|
|
615
|
-
it(`maintains \`color\` format as TinyColor`, async () => {
|
|
616
|
-
const el = await fixture(
|
|
617
|
-
html`
|
|
618
|
-
<sp-color-slider></sp-color-slider>
|
|
619
|
-
`
|
|
620
|
-
);
|
|
621
|
-
const color = new TinyColor("rgb(204, 51, 204)");
|
|
622
|
-
el.color = color;
|
|
623
|
-
expect(color.equals(el.color));
|
|
624
|
-
});
|
|
625
611
|
it(`resolves Hex3 format to Hex6 format`, async () => {
|
|
626
|
-
const el = await fixture(
|
|
627
|
-
html`
|
|
628
|
-
<sp-color-slider></sp-color-slider>
|
|
629
|
-
`
|
|
630
|
-
);
|
|
612
|
+
const el = await fixture(Default());
|
|
631
613
|
el.color = "0f0";
|
|
632
614
|
expect(el.color).to.equal("00ff00");
|
|
633
615
|
el.color = "#1e0";
|
|
634
616
|
expect(el.color).to.equal("#11ee00");
|
|
635
617
|
});
|
|
636
618
|
it(`resolves Hex4 format to Hex8 format`, async () => {
|
|
637
|
-
const el = await fixture(
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
`
|
|
641
|
-
);
|
|
642
|
-
el.color = "f3af";
|
|
643
|
-
expect(el.color).to.equal("ff33aaff");
|
|
619
|
+
const el = await fixture(Default());
|
|
620
|
+
el.color = "#f3af";
|
|
621
|
+
expect(el.color).to.equal("#ff33aaff");
|
|
644
622
|
el.color = "#f3af";
|
|
645
623
|
expect(el.color).to.equal("#ff33aaff");
|
|
646
624
|
});
|
|
647
625
|
it(`maintains hue value`, async () => {
|
|
648
|
-
const el = await fixture(
|
|
649
|
-
html`
|
|
650
|
-
<sp-color-slider></sp-color-slider>
|
|
651
|
-
`
|
|
652
|
-
);
|
|
626
|
+
const el = await fixture(Default());
|
|
653
627
|
const hue = 300;
|
|
654
|
-
const hsl = `hsl(${hue}, 60%,
|
|
628
|
+
const hsl = `hsl(${hue}, 60%, 99%)`;
|
|
655
629
|
el.color = hsl;
|
|
656
630
|
expect(el.value).to.equal(hue);
|
|
657
631
|
expect(el.color).to.equal(hsl);
|
|
658
|
-
const hsla = `hsla(${hue}, 60%,
|
|
632
|
+
const hsla = `hsla(${hue}, 60%, 99%, 0.9)`;
|
|
659
633
|
el.color = hsla;
|
|
660
634
|
expect(el.value).to.equal(hue);
|
|
661
635
|
expect(el.color).to.equal(hsla);
|
|
662
|
-
const hsv = `hsv(${hue}, 60%,
|
|
636
|
+
const hsv = `hsv(${hue}, 60%, 99%)`;
|
|
663
637
|
el.color = hsv;
|
|
664
638
|
expect(el.value).to.equal(hue);
|
|
665
639
|
expect(el.color).to.equal(hsv);
|
|
666
|
-
const hsva = `hsva(${hue}, 60%,
|
|
640
|
+
const hsva = `hsva(${hue}, 60%, 99%, 0.9)`;
|
|
667
641
|
el.color = hsva;
|
|
668
642
|
expect(el.value).to.equal(hue);
|
|
669
643
|
expect(el.color).to.equal(hsva);
|
|
670
|
-
const tinyHSV = new TinyColor({ h: hue, s: 60, v: 100 });
|
|
671
|
-
el.color = tinyHSV;
|
|
672
|
-
expect(el.value).to.equal(hue);
|
|
673
|
-
expect(tinyHSV.equals(el.color)).to.be.true;
|
|
674
|
-
const tinyHSVA = new TinyColor({ h: hue, s: 60, v: 100, a: 1 });
|
|
675
|
-
el.color = tinyHSVA;
|
|
676
|
-
expect(el.value).to.equal(hue);
|
|
677
|
-
expect(tinyHSVA.equals(el.color)).to.be.true;
|
|
678
|
-
const tinyHSL = new TinyColor({ h: hue, s: 60, l: 100 });
|
|
679
|
-
el.color = tinyHSL;
|
|
680
|
-
expect(el.value).to.equal(hue);
|
|
681
|
-
expect(tinyHSL.equals(el.color)).to.be.true;
|
|
682
|
-
const tinyHSLA = new TinyColor({ h: hue, s: 60, l: 100, a: 1 });
|
|
683
|
-
el.color = tinyHSLA;
|
|
684
|
-
expect(el.value).to.equal(hue);
|
|
685
|
-
expect(tinyHSLA.equals(el.color)).to.be.true;
|
|
686
644
|
});
|
|
687
645
|
});
|
|
688
646
|
//# sourceMappingURL=color-slider.test.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["color-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 { elementUpdated, expect, html } from '@open-wc/testing';\nimport {\n arrowDownEvent,\n arrowDownKeyupEvent,\n arrowLeftEvent,\n arrowLeftKeyupEvent,\n arrowRightEvent,\n arrowRightKeyupEvent,\n arrowUpEvent,\n arrowUpKeyupEvent,\n fixture,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers.js';\n\nimport '@spectrum-web-components/color-slider/sp-color-slider.js';\nimport { ColorSlider } from '@spectrum-web-components/color-slider';\nimport { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from '@ctrl/tinycolor';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\nimport { ColorHandle } from '@spectrum-web-components/color-handle';\n\ndescribe('ColorSlider', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n )\n );\n it('loads default color-slider accessibly', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('manages a single tab stop', async () => {\n const test = await fixture<HTMLDivElement>(\n html`\n <div>\n <input type=\"text\" id=\"test-input-1\" />\n <sp-color-slider></sp-color-slider>\n <input type=\"text\" id=\"test-input-2\" />\n </div>\n `\n );\n const el = test.querySelector('sp-color-slider') as ColorSlider;\n const input1 = test.querySelector(\n 'input:nth-of-type(1)'\n ) as HTMLInputElement;\n const input2 = test.querySelector(\n 'input:nth-of-type(2)'\n ) as HTMLInputElement;\n\n await elementUpdated(el);\n\n input1.focus();\n\n expect(document.activeElement).to.equal(input1);\n\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(el);\n\n let value = el.value;\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(input2);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(el);\n\n value = el.value;\n await sendKeys({\n press: 'ArrowDown',\n });\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(input1);\n });\n it('manages [focused]', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.focused).to.be.false;\n\n await sendKeys({ press: 'Tab' });\n await elementUpdated(el);\n\n expect(el.focused).to.be.true;\n\n el.blur();\n await elementUpdated(el);\n\n expect(el.focused).to.be.false;\n\n el.dispatchEvent(new FocusEvent('focus'));\n await elementUpdated(el);\n\n expect(el.focused).to.be.true;\n\n el.dispatchEvent(new FocusEvent('blur'));\n await elementUpdated(el);\n\n expect(el.focused).to.be.false;\n });\n it('dispatches input and change events in response to \"Arrow*\" keypresses', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n el.focus();\n\n await sendKeys({ press: 'ArrowRight' });\n\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n\n await sendKeys({ press: 'ArrowLeft' });\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n\n await sendKeys({ press: 'ArrowUp' });\n expect(inputSpy.callCount).to.equal(3);\n expect(changeSpy.callCount).to.equal(3);\n\n await sendKeys({ press: 'ArrowDown' });\n expect(inputSpy.callCount).to.equal(4);\n expect(changeSpy.callCount).to.equal(4);\n });\n it('responds to events on the internal input element', async () => {\n // screen reader interactions dispatch events as found in the following test\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-slider>\n `\n );\n await elementUpdated(el);\n\n el.focus();\n el.focusElement.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n el.focusElement.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: false, // native change events do not compose themselves by default\n })\n );\n\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n });\n it('manages value on \"Arrow*\" keypresses', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;\"\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n\n const input = el.focusElement;\n\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (4 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(4);\n\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n });\n it('accepts \"Arrow*\" keypresses in dir=\"rtl\"', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider dir=\"rtl\"></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const input = el.focusElement;\n\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n });\n it('accepts \"Arrow*\" keypresses with alteration', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n el.focus();\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n\n await sendKeys({\n down: 'Shift',\n });\n await sendKeys({\n press: 'ArrowUp',\n });\n await sendKeys({\n press: 'ArrowUp',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (20 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(20);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await sendKeys({\n press: 'ArrowRight',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (40 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(40);\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await sendKeys({\n press: 'ArrowDown',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (20 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(20);\n\n await sendKeys({\n press: 'ArrowLeft',\n });\n await sendKeys({\n press: 'ArrowLeft',\n });\n await sendKeys({\n up: 'Shift',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n });\n it('accepts pointer events', async () => {\n const color = new TinyColor({ h: '0', s: '20%', l: '70%' });\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n .color=${color}\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-height: 24px;\"\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n expect(el.sliderHandlePosition).to.equal(0);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const gradient = root.querySelector('.gradient') as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n expect(el.sliderHandlePosition).to.equal(0);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(47.91666666666667);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(53.125);\n expect((el.color as HSLA).s).to.be.within(0.19, 0.21);\n expect((el.color as HSLA).l).to.be.within(0.69, 0.71);\n });\n it('can have `change` events prevented', async () => {\n const color = new TinyColor({ h: '0', s: '20%', l: '70%' });\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n .color=${color}\n @change=${(event: Event) => {\n event.preventDefault();\n }}\n style=\"\n --spectrum-colorslider-default-length: 192px;\n --spectrum-colorslider-height: 24px;\n --spectrum-colorhandle-size: 5px;\n \"\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(0);\n\n const handle = el.shadowRoot.querySelector(\n 'sp-color-handle'\n ) as ColorHandle;\n const boundingClientRect = handle.getBoundingClientRect();\n const handleLocation: [number, number] = [\n boundingClientRect.left + boundingClientRect.width / 2,\n boundingClientRect.top + boundingClientRect.height / 2,\n ];\n const targetLocation: [number, number] = [\n handleLocation[0] + 105,\n handleLocation[1],\n ];\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: handleLocation,\n },\n {\n type: 'down',\n },\n {\n type: 'move',\n position: targetLocation,\n },\n ],\n });\n\n await elementUpdated(el);\n\n expect(el.value).to.be.greaterThan(190);\n\n await sendMouse({\n steps: [\n {\n type: 'up',\n },\n ],\n });\n\n await elementUpdated(el);\n expect(el.value).to.equal(0);\n });\n it('accepts pointer events while [vertical]', async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n vertical\n style=\"--spectrum-colorslider-vertical-default-length: 192px; --spectrum-colorslider-vertical-width: 24px;\"\n ></sp-color-slider>\n `\n );\n\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const gradient = root.querySelector('.gradient') as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 15,\n clientY: 100,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(100 - 47.91666666666667);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: 15,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: 15,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(100 - 53.125);\n });\n it('accepts pointer events in dir=\"rtl\"', async () => {\n document.documentElement.dir = 'rtl';\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider\n dir=\"rtl\"\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-height: 24px;\"\n ></sp-color-slider>\n `\n );\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n const clientWidth = document.documentElement.offsetWidth;\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const gradient = el.shadowRoot.querySelector(\n '.gradient'\n ) as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 700,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(100 - 52.083333333333336);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: clientWidth - 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: clientWidth - 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(100 - 46.875);\n });\n const colorFormats: {\n name: string;\n color:\n | string\n | number\n | TinyColor\n | HSVA\n | HSV\n | RGB\n | RGBA\n | HSL\n | HSLA;\n }[] = [\n //rgb\n { name: 'RGB String', color: 'rgb(204, 51, 204)' },\n { name: 'RGB', color: { r: 204, g: 51, b: 204, a: 1 } },\n //prgb\n { name: 'PRGB String', color: 'rgb(80%, 20%, 80%)' },\n { name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },\n // hex\n { name: 'Hex', color: 'cc33cc' },\n { name: 'Hex String', color: '#cc33cc' },\n // hex8\n { name: 'Hex8', color: 'cc33ccff' },\n { name: 'Hex8 String', color: '#cc33ccff' },\n // name\n { name: 'string', color: 'red' },\n // hsl\n { name: 'HSL String', color: 'hsl(300, 60%, 50%)' },\n { name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },\n // hsv\n { name: 'HSV String', color: 'hsv(300, 75%, 100%)' },\n { name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },\n ];\n colorFormats.map((format) => {\n it(`maintains \\`color\\` format as ${format.name}`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n\n el.color = format.color;\n if (format.name.startsWith('Hex')) {\n expect(el.color).to.equal(format.color);\n } else expect(el.color).to.deep.equal(format.color);\n });\n });\n it(`maintains \\`color\\` format as TinyColor`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n const color = new TinyColor('rgb(204, 51, 204)');\n el.color = color;\n expect(color.equals(el.color));\n });\n it(`resolves Hex3 format to Hex6 format`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n el.color = '0f0';\n expect(el.color).to.equal('00ff00');\n\n el.color = '#1e0';\n expect(el.color).to.equal('#11ee00');\n });\n it(`resolves Hex4 format to Hex8 format`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n el.color = 'f3af';\n expect(el.color).to.equal('ff33aaff');\n\n el.color = '#f3af';\n expect(el.color).to.equal('#ff33aaff');\n });\n it(`maintains hue value`, async () => {\n const el = await fixture<ColorSlider>(\n html`\n <sp-color-slider></sp-color-slider>\n `\n );\n const hue = 300;\n const hsl = `hsl(${hue}, 60%, 100%)`;\n el.color = hsl;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsl);\n\n const hsla = `hsla(${hue}, 60%, 100%, 0.9)`;\n el.color = hsla;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsla);\n\n const hsv = `hsv(${hue}, 60%, 100%)`;\n el.color = hsv;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsv);\n\n const hsva = `hsva(${hue}, 60%, 100%, 0.9)`;\n el.color = hsva;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsva);\n\n const tinyHSV = new TinyColor({ h: hue, s: 60, v: 100 });\n el.color = tinyHSV;\n expect(el.value).to.equal(hue);\n expect(tinyHSV.equals(el.color)).to.be.true;\n\n const tinyHSVA = new TinyColor({ h: hue, s: 60, v: 100, a: 1 });\n el.color = tinyHSVA;\n expect(el.value).to.equal(hue);\n expect(tinyHSVA.equals(el.color)).to.be.true;\n\n const tinyHSL = new TinyColor({ h: hue, s: 60, l: 100 });\n el.color = tinyHSL;\n expect(el.value).to.equal(hue);\n expect(tinyHSL.equals(el.color)).to.be.true;\n\n const tinyHSLA = new TinyColor({ h: hue, s: 60, l: 100, a: 1 });\n el.color = tinyHSLA;\n expect(el.value).to.equal(hue);\n expect(tinyHSLA.equals(el.color)).to.be.true;\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 { elementUpdated, expect, html } from '@open-wc/testing';\nimport {\n arrowDownEvent,\n arrowDownKeyupEvent,\n arrowLeftEvent,\n arrowLeftKeyupEvent,\n arrowRightEvent,\n arrowRightKeyupEvent,\n arrowUpEvent,\n arrowUpKeyupEvent,\n fixture,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers.js';\n\nimport '@spectrum-web-components/color-slider/sp-color-slider.js';\nimport { ColorSlider } from '@spectrum-web-components/color-slider';\nimport { ColorTypes } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\nimport { ColorHandle } from '@spectrum-web-components/color-handle';\nimport { Default } from '../stories/color-slider.stories.js';\n\ndescribe('ColorSlider', () => {\n testForLitDevWarnings(async () => await fixture<ColorSlider>(Default()));\n it('loads default color-slider accessibly', async () => {\n const el = await fixture<ColorSlider>(Default());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n\n it('manages a single tab stop', async () => {\n const test = await fixture<HTMLDivElement>(html`\n <div>\n <input type=\"text\" id=\"test-input-1\" />\n <sp-color-slider></sp-color-slider>\n <input type=\"text\" id=\"test-input-2\" />\n </div>\n `);\n const el = test.querySelector('sp-color-slider') as ColorSlider;\n const input1 = test.querySelector(\n 'input:nth-of-type(1)'\n ) as HTMLInputElement;\n const input2 = test.querySelector(\n 'input:nth-of-type(2)'\n ) as HTMLInputElement;\n\n await elementUpdated(el);\n\n input1.focus();\n\n expect(document.activeElement).to.equal(input1);\n\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(el);\n\n let value = el.value;\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Tab',\n });\n\n expect(document.activeElement).to.equal(input2);\n\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(el);\n\n value = el.value;\n await sendKeys({\n press: 'ArrowDown',\n });\n expect(el.value).to.not.equal(value);\n await sendKeys({\n press: 'Shift+Tab',\n });\n\n expect(document.activeElement).to.equal(input1);\n });\n it('manages [focused]', async () => {\n const el = await fixture<ColorSlider>(Default());\n\n await elementUpdated(el);\n\n expect(el.focused).to.be.false;\n\n await sendKeys({ press: 'Tab' });\n await elementUpdated(el);\n\n expect(el.focused).to.be.true;\n\n el.blur();\n await elementUpdated(el);\n\n expect(el.focused).to.be.false;\n\n el.dispatchEvent(new FocusEvent('focus'));\n await elementUpdated(el);\n\n expect(el.focused).to.be.true;\n\n el.dispatchEvent(new FocusEvent('blur'));\n await elementUpdated(el);\n\n expect(el.focused).to.be.false;\n });\n it('dispatches input and change events in response to \"Arrow*\" keypresses', async () => {\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-slider>\n `);\n\n await elementUpdated(el);\n\n el.focus();\n\n await sendKeys({ press: 'ArrowRight' });\n\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n\n await sendKeys({ press: 'ArrowLeft' });\n expect(inputSpy.callCount).to.equal(2);\n expect(changeSpy.callCount).to.equal(2);\n\n await sendKeys({ press: 'ArrowUp' });\n expect(inputSpy.callCount).to.equal(3);\n expect(changeSpy.callCount).to.equal(3);\n\n await sendKeys({ press: 'ArrowDown' });\n expect(inputSpy.callCount).to.equal(4);\n expect(changeSpy.callCount).to.equal(4);\n });\n it('responds to events on the internal input element', async () => {\n // screen reader interactions dispatch events as found in the following test\n const inputSpy = spy();\n const changeSpy = spy();\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider\n @change=${() => changeSpy()}\n @input=${() => inputSpy()}\n ></sp-color-slider>\n `);\n await elementUpdated(el);\n\n el.focus();\n el.focusElement.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\n );\n el.focusElement.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: false, // native change events do not compose themselves by default\n })\n );\n\n expect(inputSpy.callCount).to.equal(1);\n expect(changeSpy.callCount).to.equal(1);\n });\n it('manages value on \"Arrow*\" keypresses', async () => {\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-default-height: 24px;\"\n ></sp-color-slider>\n `);\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n\n const input = el.focusElement;\n\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (4 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(4);\n\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n });\n it('accepts \"Arrow*\" keypresses in dir=\"rtl\"', async () => {\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider dir=\"rtl\"></sp-color-slider>\n `);\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const input = el.focusElement;\n\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n input.dispatchEvent(arrowUpEvent());\n input.dispatchEvent(arrowUpKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n input.dispatchEvent(arrowRightEvent());\n input.dispatchEvent(arrowRightKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n input.dispatchEvent(arrowLeftEvent());\n input.dispatchEvent(arrowLeftKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (2 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(2);\n\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n input.dispatchEvent(arrowDownEvent());\n input.dispatchEvent(arrowDownKeyupEvent());\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n });\n it('accepts \"Arrow*\" keypresses with alteration', async () => {\n const el = await fixture<ColorSlider>(Default());\n\n await elementUpdated(el);\n el.focus();\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n\n await sendKeys({\n down: 'Shift',\n });\n await sendKeys({\n press: 'ArrowUp',\n });\n await sendKeys({\n press: 'ArrowUp',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (20 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(20);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await sendKeys({\n press: 'ArrowRight',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (40 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.equal(40);\n\n await sendKeys({\n press: 'ArrowDown',\n });\n await sendKeys({\n press: 'ArrowDown',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n (20 * 100) / 360,\n 0.000001\n );\n expect(el.value).to.be.approximately(20, 0.000001);\n\n await sendKeys({\n press: 'ArrowLeft',\n });\n await sendKeys({\n press: 'ArrowLeft',\n });\n await sendKeys({\n up: 'Shift',\n });\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(el.value).to.equal(0);\n });\n it('accepts pointer events', async () => {\n const color = { h: '0', s: '20%', l: '70%' };\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider\n .color=${color}\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-height: 24px;\"\n ></sp-color-slider>\n `);\n\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).s\n ).to.be.within(0.19, 0.21);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).l\n ).to.be.within(0.69, 0.71);\n\n handle.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n expect(el.sliderHandlePosition).to.equal(0);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).s\n ).to.be.within(0.19, 0.21);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).l\n ).to.be.within(0.69, 0.71);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const gradient = root.querySelector('.gradient') as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n button: 1,\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n expect(el.sliderHandlePosition).to.equal(0);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).s\n ).to.be.within(0.19, 0.21);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).l\n ).to.be.within(0.69, 0.71);\n\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 100,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(47.91666666666667);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).s\n ).to.be.within(0.19, 0.21);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).l\n ).to.be.within(0.69, 0.71);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(53.125);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).s\n ).to.be.within(0.19, 0.21);\n expect(\n (el.color as { h: number; s: number; l: number; a: number }).l\n ).to.be.within(0.69, 0.71);\n });\n it('can have `change` events prevented', async () => {\n const color = { h: '0', s: '20%', l: '70%' };\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider\n .color=${color}\n @change=${(event: Event) => {\n event.preventDefault();\n }}\n style=\"\n --spectrum-colorslider-default-length: 192px;\n --spectrum-colorslider-height: 24px;\n --spectrum-colorhandle-size: 5px;\n \"\n ></sp-color-slider>\n `);\n\n await elementUpdated(el);\n\n expect(el.value).to.equal(0);\n\n const handle = el.shadowRoot.querySelector(\n 'sp-color-handle'\n ) as ColorHandle;\n const boundingClientRect = handle.getBoundingClientRect();\n const handleLocation: [number, number] = [\n boundingClientRect.left + boundingClientRect.width / 2,\n boundingClientRect.top + boundingClientRect.height / 2,\n ];\n const targetLocation: [number, number] = [\n handleLocation[0] + 105,\n handleLocation[1],\n ];\n\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: handleLocation,\n },\n {\n type: 'down',\n },\n {\n type: 'move',\n position: targetLocation,\n },\n ],\n });\n\n await elementUpdated(el);\n\n expect(el.value).to.be.greaterThan(190);\n\n await sendMouse({\n steps: [\n {\n type: 'up',\n },\n ],\n });\n\n await elementUpdated(el);\n expect(el.value).to.equal(0);\n });\n it('accepts pointer events while [vertical]', async () => {\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider\n vertical\n style=\"--spectrum-colorslider-vertical-default-length: 192px; --spectrum-colorslider-vertical-width: 24px;\"\n ></sp-color-slider>\n `);\n\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const root = el.shadowRoot ? el.shadowRoot : el;\n const gradient = root.querySelector('.gradient') as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 15,\n clientY: 100,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(100 - 47.91666666666667);\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: 15,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: 15,\n clientY: 110,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(100 - 53.125);\n });\n it('accepts pointer events in dir=\"rtl\"', async () => {\n document.documentElement.dir = 'rtl';\n const el = await fixture<ColorSlider>(html`\n <sp-color-slider\n dir=\"rtl\"\n style=\"--spectrum-colorslider-default-length: 192px; --spectrum-colorslider-default-height: 24px; --spectrum-colorslider-height: 24px;\"\n ></sp-color-slider>\n `);\n await elementUpdated(el);\n\n const { handle } = el as unknown as { handle: HTMLElement };\n const clientWidth = document.documentElement.offsetWidth;\n\n handle.setPointerCapture = () => {\n return;\n };\n handle.releasePointerCapture = () => {\n return;\n };\n\n expect(el.sliderHandlePosition).to.equal(0);\n\n const gradient = el.shadowRoot.querySelector(\n '.gradient'\n ) as HTMLElement;\n gradient.dispatchEvent(\n new PointerEvent('pointerdown', {\n pointerId: 1,\n clientX: 700,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.be.approximately(\n 100 - 52.083333333333336,\n 0.000001\n );\n\n handle.dispatchEvent(\n new PointerEvent('pointermove', {\n pointerId: 1,\n clientX: clientWidth - 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n handle.dispatchEvent(\n new PointerEvent('pointerup', {\n pointerId: 1,\n clientX: clientWidth - 110,\n clientY: 15,\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n await elementUpdated(el);\n\n expect(el.sliderHandlePosition).to.equal(100 - 46.875);\n });\n const colorFormats: {\n name: string;\n color: ColorTypes;\n test?: string;\n }[] = [\n //rgb\n { name: 'RGB String', color: 'rgba(204, 51, 204, 1)' },\n { name: 'RGBA', color: { r: 204, g: 51, b: 204, a: 1 } },\n //prgb\n { name: 'PRGB String', color: 'rgba(80%, 20%, 80%,100%)' },\n { name: 'PRGB', color: { r: '80%', g: '20%', b: '80%', a: 1 } },\n // hex\n { name: 'Hex', color: '#cc33cc' },\n { name: 'Hex String', color: '#cc33cc' },\n // hex8\n { name: 'Hex8', color: '#cc33ccff' },\n { name: 'Hex8 String', color: '#cc33ccff' },\n // name\n { name: 'string', color: 'red', test: 'ff0000' },\n // hsl\n { name: 'HSL String', color: 'hsl(300, 60%, 50%)' },\n { name: 'HSL', color: { h: 300, s: 0.6000000000000001, l: 0.5, a: 1 } },\n // hsv\n { name: 'HSV String', color: 'hsv(300, 75%, 100%)' },\n { name: 'HSV', color: { h: 300, s: 0.75, v: 1, a: 1 } },\n ];\n colorFormats.map((format) => {\n it(`maintains \\`color\\` format as ${format.name}`, async () => {\n const el = await fixture<ColorSlider>(Default());\n\n if (typeof format.color === 'string') {\n el.color = format.color;\n } else {\n el.color = { ...format.color } as ColorTypes;\n }\n\n if (format.name.startsWith('Hex')) {\n expect(el.color, el.color.toString()).to.equal(\n format.test || format.color\n );\n } else {\n expect(\n el.color,\n `${JSON.stringify(el.color)} ${JSON.stringify(\n format.color\n )}`\n ).to.deep.equal(format.test || format.color);\n }\n });\n });\n it(`resolves Hex3 format to Hex6 format`, async () => {\n const el = await fixture<ColorSlider>(Default());\n el.color = '0f0';\n expect(el.color).to.equal('00ff00');\n\n el.color = '#1e0';\n expect(el.color).to.equal('#11ee00');\n });\n it(`resolves Hex4 format to Hex8 format`, async () => {\n const el = await fixture<ColorSlider>(Default());\n el.color = '#f3af';\n expect(el.color).to.equal('#ff33aaff');\n\n el.color = '#f3af';\n expect(el.color).to.equal('#ff33aaff');\n });\n it(`maintains hue value`, async () => {\n const el = await fixture<ColorSlider>(Default());\n const hue = 300;\n const hsl = `hsl(${hue}, 60%, 99%)`;\n el.color = hsl;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsl);\n\n const hsla = `hsla(${hue}, 60%, 99%, 0.9)`;\n el.color = hsla;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsla);\n\n const hsv = `hsv(${hue}, 60%, 99%)`;\n el.color = hsv;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsv);\n\n const hsva = `hsva(${hue}, 60%, 99%, 0.9)`;\n el.color = hsva;\n expect(el.value).to.equal(hue);\n expect(el.color).to.equal(hsva);\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|