@spectrum-web-components/color-slider 1.0.0 → 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/custom-elements.json +0 -522
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"
|
|
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
|
}
|