@spectrum-web-components/color-area 0.33.3-overlay.66 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +39 -7
- package/package.json +5 -5
- package/src/ColorArea.d.ts +5 -2
- package/src/ColorArea.dev.js +106 -46
- package/src/ColorArea.dev.js.map +2 -2
- package/src/ColorArea.js +47 -35
- package/src/ColorArea.js.map +3 -3
- package/src/color-area.css.dev.js +1 -1
- package/src/color-area.css.dev.js.map +1 -1
- package/src/color-area.css.js +1 -1
- package/src/color-area.css.js.map +1 -1
- package/test/color-area.test.js +46 -30
- package/test/color-area.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-color-area.
|
|
7
|
+
"path": "sp-color-area.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "src/ColorArea.
|
|
22
|
+
"path": "src/ColorArea.js",
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
@@ -32,6 +32,16 @@
|
|
|
32
32
|
}
|
|
33
33
|
],
|
|
34
34
|
"members": [
|
|
35
|
+
{
|
|
36
|
+
"kind": "field",
|
|
37
|
+
"name": "dir",
|
|
38
|
+
"type": {
|
|
39
|
+
"text": "'ltr' | 'rtl'"
|
|
40
|
+
},
|
|
41
|
+
"privacy": "public",
|
|
42
|
+
"attribute": "dir",
|
|
43
|
+
"reflects": true
|
|
44
|
+
},
|
|
35
45
|
{
|
|
36
46
|
"kind": "field",
|
|
37
47
|
"name": "disabled",
|
|
@@ -91,11 +101,17 @@
|
|
|
91
101
|
},
|
|
92
102
|
"privacy": "private"
|
|
93
103
|
},
|
|
104
|
+
{
|
|
105
|
+
"kind": "field",
|
|
106
|
+
"name": "languageResolver",
|
|
107
|
+
"privacy": "private",
|
|
108
|
+
"default": "new LanguageResolutionController(this)"
|
|
109
|
+
},
|
|
94
110
|
{
|
|
95
111
|
"kind": "field",
|
|
96
112
|
"name": "colorController",
|
|
97
113
|
"privacy": "private",
|
|
98
|
-
"default": "new ColorController(this, {\n extractColorFromState: () => ({\n h: this.hue,\n s: this.x,\n v:
|
|
114
|
+
"default": "new ColorController(this, {\n extractColorFromState: () => ({\n h: this.hue,\n s: this.x,\n v: this.y,\n }),\n applyColorToState: ({ s, v }) => {\n this.x = s;\n this.y = v;\n },\n })"
|
|
99
115
|
},
|
|
100
116
|
{
|
|
101
117
|
"kind": "field",
|
|
@@ -168,7 +184,7 @@
|
|
|
168
184
|
"text": "number"
|
|
169
185
|
},
|
|
170
186
|
"privacy": "private",
|
|
171
|
-
"default": "
|
|
187
|
+
"default": "1"
|
|
172
188
|
},
|
|
173
189
|
{
|
|
174
190
|
"kind": "field",
|
|
@@ -211,6 +227,15 @@
|
|
|
211
227
|
"privacy": "private",
|
|
212
228
|
"default": "new Set()"
|
|
213
229
|
},
|
|
230
|
+
{
|
|
231
|
+
"kind": "field",
|
|
232
|
+
"name": "_valueChanged",
|
|
233
|
+
"type": {
|
|
234
|
+
"text": "boolean"
|
|
235
|
+
},
|
|
236
|
+
"privacy": "private",
|
|
237
|
+
"default": "false"
|
|
238
|
+
},
|
|
214
239
|
{
|
|
215
240
|
"kind": "method",
|
|
216
241
|
"name": "focus",
|
|
@@ -242,7 +267,7 @@
|
|
|
242
267
|
},
|
|
243
268
|
{
|
|
244
269
|
"kind": "method",
|
|
245
|
-
"name": "
|
|
270
|
+
"name": "handleFocus",
|
|
246
271
|
"privacy": "private",
|
|
247
272
|
"return": {
|
|
248
273
|
"type": {
|
|
@@ -252,7 +277,7 @@
|
|
|
252
277
|
},
|
|
253
278
|
{
|
|
254
279
|
"kind": "method",
|
|
255
|
-
"name": "
|
|
280
|
+
"name": "handleBlur",
|
|
256
281
|
"privacy": "private",
|
|
257
282
|
"return": {
|
|
258
283
|
"type": {
|
|
@@ -480,6 +505,13 @@
|
|
|
480
505
|
}
|
|
481
506
|
],
|
|
482
507
|
"attributes": [
|
|
508
|
+
{
|
|
509
|
+
"name": "dir",
|
|
510
|
+
"type": {
|
|
511
|
+
"text": "'ltr' | 'rtl'"
|
|
512
|
+
},
|
|
513
|
+
"fieldName": "dir"
|
|
514
|
+
},
|
|
483
515
|
{
|
|
484
516
|
"name": "disabled",
|
|
485
517
|
"type": {
|
|
@@ -578,7 +610,7 @@
|
|
|
578
610
|
"name": "ColorArea",
|
|
579
611
|
"declaration": {
|
|
580
612
|
"name": "ColorArea",
|
|
581
|
-
"module": "src/ColorArea.
|
|
613
|
+
"module": "src/ColorArea.js"
|
|
582
614
|
}
|
|
583
615
|
}
|
|
584
616
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/color-area",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -62,9 +62,9 @@
|
|
|
62
62
|
],
|
|
63
63
|
"dependencies": {
|
|
64
64
|
"@ctrl/tinycolor": "^3.3.3",
|
|
65
|
-
"@spectrum-web-components/base": "^0.
|
|
66
|
-
"@spectrum-web-components/color-handle": "^0.
|
|
67
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
65
|
+
"@spectrum-web-components/base": "^0.34.0",
|
|
66
|
+
"@spectrum-web-components/color-handle": "^0.34.0",
|
|
67
|
+
"@spectrum-web-components/reactive-controllers": "^0.34.0"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@spectrum-css/colorarea": "^3.0.10"
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"./sp-*.js",
|
|
76
76
|
"./**/*.dev.js"
|
|
77
77
|
],
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "f9b3294d67cdd52b2c36897cdc1c20ceaeb019cf"
|
|
79
79
|
}
|
package/src/ColorArea.d.ts
CHANGED
|
@@ -9,12 +9,14 @@ import { ColorValue } from '@spectrum-web-components/reactive-controllers/src/Co
|
|
|
9
9
|
*/
|
|
10
10
|
export declare class ColorArea extends SpectrumElement {
|
|
11
11
|
static get styles(): CSSResultArray;
|
|
12
|
+
dir: 'ltr' | 'rtl';
|
|
12
13
|
disabled: boolean;
|
|
13
14
|
focused: boolean;
|
|
14
15
|
label: string | undefined;
|
|
15
16
|
labelX: string;
|
|
16
17
|
labelY: string;
|
|
17
18
|
private handle;
|
|
19
|
+
private languageResolver;
|
|
18
20
|
private colorController;
|
|
19
21
|
get hue(): number;
|
|
20
22
|
set hue(value: number);
|
|
@@ -33,10 +35,11 @@ export declare class ColorArea extends SpectrumElement {
|
|
|
33
35
|
inputY: HTMLInputElement;
|
|
34
36
|
private altered;
|
|
35
37
|
private activeKeys;
|
|
38
|
+
private _valueChanged;
|
|
36
39
|
focus(focusOptions?: FocusOptions): void;
|
|
37
40
|
private forwardFocus;
|
|
38
|
-
private
|
|
39
|
-
private
|
|
41
|
+
private handleFocus;
|
|
42
|
+
private handleBlur;
|
|
40
43
|
private handleKeydown;
|
|
41
44
|
private handleKeypress;
|
|
42
45
|
private handleKeyup;
|
package/src/ColorArea.dev.js
CHANGED
|
@@ -24,6 +24,11 @@ import "@spectrum-web-components/color-handle/sp-color-handle.js";
|
|
|
24
24
|
import {
|
|
25
25
|
ColorController
|
|
26
26
|
} from "@spectrum-web-components/reactive-controllers/src/Color.js";
|
|
27
|
+
import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
|
|
28
|
+
import {
|
|
29
|
+
isAndroid,
|
|
30
|
+
isIOS
|
|
31
|
+
} from "@spectrum-web-components/shared/src/platform.js";
|
|
27
32
|
import styles from "./color-area.css.js";
|
|
28
33
|
export class ColorArea extends SpectrumElement {
|
|
29
34
|
constructor() {
|
|
@@ -32,23 +37,25 @@ export class ColorArea extends SpectrumElement {
|
|
|
32
37
|
this.focused = false;
|
|
33
38
|
this.labelX = "saturation";
|
|
34
39
|
this.labelY = "luminosity";
|
|
40
|
+
this.languageResolver = new LanguageResolutionController(this);
|
|
35
41
|
this.colorController = new ColorController(this, {
|
|
36
42
|
extractColorFromState: () => ({
|
|
37
43
|
h: this.hue,
|
|
38
44
|
s: this.x,
|
|
39
|
-
v:
|
|
45
|
+
v: this.y
|
|
40
46
|
}),
|
|
41
47
|
applyColorToState: ({ s, v }) => {
|
|
42
48
|
this.x = s;
|
|
43
|
-
this.y =
|
|
49
|
+
this.y = v;
|
|
44
50
|
}
|
|
45
51
|
});
|
|
46
52
|
this.activeAxis = "x";
|
|
47
53
|
this._x = 1;
|
|
48
|
-
this._y =
|
|
54
|
+
this._y = 1;
|
|
49
55
|
this.step = 0.01;
|
|
50
56
|
this.altered = 0;
|
|
51
57
|
this.activeKeys = /* @__PURE__ */ new Set();
|
|
58
|
+
this._valueChanged = false;
|
|
52
59
|
this._pointerDown = false;
|
|
53
60
|
}
|
|
54
61
|
static get styles() {
|
|
@@ -113,14 +120,17 @@ export class ColorArea extends SpectrumElement {
|
|
|
113
120
|
this.inputY.focus();
|
|
114
121
|
}
|
|
115
122
|
}
|
|
116
|
-
|
|
123
|
+
handleFocus() {
|
|
117
124
|
this.focused = true;
|
|
125
|
+
this._valueChanged = false;
|
|
118
126
|
}
|
|
119
|
-
|
|
127
|
+
handleBlur() {
|
|
120
128
|
if (this._pointerDown) {
|
|
121
129
|
return;
|
|
122
130
|
}
|
|
131
|
+
this.altered = 0;
|
|
123
132
|
this.focused = false;
|
|
133
|
+
this._valueChanged = false;
|
|
124
134
|
}
|
|
125
135
|
handleKeydown(event) {
|
|
126
136
|
const { code } = event;
|
|
@@ -128,7 +138,7 @@ export class ColorArea extends SpectrumElement {
|
|
|
128
138
|
this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(
|
|
129
139
|
(key) => !!key
|
|
130
140
|
).length;
|
|
131
|
-
const isArrowKey = code.search("Arrow") === 0;
|
|
141
|
+
const isArrowKey = code.search("Arrow") === 0 || code.search("Page") === 0 || code.search("Home") === 0 || code.search("End") === 0;
|
|
132
142
|
if (isArrowKey) {
|
|
133
143
|
event.preventDefault();
|
|
134
144
|
this.activeKeys.add(code);
|
|
@@ -142,16 +152,28 @@ export class ColorArea extends SpectrumElement {
|
|
|
142
152
|
this.activeKeys.forEach((code) => {
|
|
143
153
|
switch (code) {
|
|
144
154
|
case "ArrowUp":
|
|
145
|
-
deltaY = step
|
|
155
|
+
deltaY = step;
|
|
146
156
|
break;
|
|
147
157
|
case "ArrowDown":
|
|
148
|
-
deltaY = step * 1;
|
|
158
|
+
deltaY = step * -1;
|
|
149
159
|
break;
|
|
150
160
|
case "ArrowLeft":
|
|
151
|
-
deltaX = step * -1;
|
|
161
|
+
deltaX = this.step * (this.isLTR ? -1 : 1);
|
|
152
162
|
break;
|
|
153
163
|
case "ArrowRight":
|
|
154
|
-
deltaX = step * 1;
|
|
164
|
+
deltaX = this.step * (this.isLTR ? 1 : -1);
|
|
165
|
+
break;
|
|
166
|
+
case "PageUp":
|
|
167
|
+
deltaY = step * 10;
|
|
168
|
+
break;
|
|
169
|
+
case "PageDown":
|
|
170
|
+
deltaY = step * -10;
|
|
171
|
+
break;
|
|
172
|
+
case "Home":
|
|
173
|
+
deltaX = step * (this.isLTR ? -10 : 10);
|
|
174
|
+
break;
|
|
175
|
+
case "End":
|
|
176
|
+
deltaX = step * (this.isLTR ? 10 : -10);
|
|
155
177
|
break;
|
|
156
178
|
default:
|
|
157
179
|
break;
|
|
@@ -169,6 +191,7 @@ export class ColorArea extends SpectrumElement {
|
|
|
169
191
|
this.colorController.savePreviousColor();
|
|
170
192
|
this.colorController.applyColorFromState();
|
|
171
193
|
if (deltaX != 0 || deltaY != 0) {
|
|
194
|
+
this._valueChanged = true;
|
|
172
195
|
this.dispatchEvent(
|
|
173
196
|
new Event("input", {
|
|
174
197
|
bubbles: true,
|
|
@@ -222,8 +245,9 @@ export class ColorArea extends SpectrumElement {
|
|
|
222
245
|
}
|
|
223
246
|
handlePointermove(event) {
|
|
224
247
|
const [x, y] = this.calculateHandlePosition(event);
|
|
248
|
+
this._valueChanged = false;
|
|
225
249
|
this.x = x;
|
|
226
|
-
this.y = y;
|
|
250
|
+
this.y = 1 - y;
|
|
227
251
|
this.colorController.applyColorFromState();
|
|
228
252
|
this.dispatchEvent(
|
|
229
253
|
new Event("input", {
|
|
@@ -276,7 +300,7 @@ export class ColorArea extends SpectrumElement {
|
|
|
276
300
|
0,
|
|
277
301
|
Math.min(1, (offsetY - minOffsetY) / height)
|
|
278
302
|
);
|
|
279
|
-
return [percentX, percentY];
|
|
303
|
+
return [this.isLTR ? percentX : 1 - percentX, percentY];
|
|
280
304
|
}
|
|
281
305
|
handleAreaPointerdown(event) {
|
|
282
306
|
if (event.button !== 0) {
|
|
@@ -288,7 +312,6 @@ export class ColorArea extends SpectrumElement {
|
|
|
288
312
|
this.handlePointermove(event);
|
|
289
313
|
}
|
|
290
314
|
render() {
|
|
291
|
-
var _a, _b;
|
|
292
315
|
const { width = 0, height = 0 } = this.boundingClientRect || {};
|
|
293
316
|
if (true) {
|
|
294
317
|
if (this.label) {
|
|
@@ -300,6 +323,28 @@ export class ColorArea extends SpectrumElement {
|
|
|
300
323
|
);
|
|
301
324
|
}
|
|
302
325
|
}
|
|
326
|
+
const isMobile = isAndroid() || isIOS();
|
|
327
|
+
const defaultAriaLabel = "Color Picker";
|
|
328
|
+
const ariaLabel = this.label ? `${this.label} ${defaultAriaLabel}` : defaultAriaLabel;
|
|
329
|
+
const ariaRoleDescription = ifDefined(
|
|
330
|
+
isMobile ? void 0 : "2d slider"
|
|
331
|
+
);
|
|
332
|
+
const ariaLabelX = this.labelX;
|
|
333
|
+
const ariaLabelY = this.labelY;
|
|
334
|
+
const ariaValueX = new Intl.NumberFormat(
|
|
335
|
+
this.languageResolver.language,
|
|
336
|
+
{
|
|
337
|
+
style: "percent",
|
|
338
|
+
unitDisplay: "narrow"
|
|
339
|
+
}
|
|
340
|
+
).format(this.x);
|
|
341
|
+
const ariaValueY = new Intl.NumberFormat(
|
|
342
|
+
this.languageResolver.language,
|
|
343
|
+
{
|
|
344
|
+
style: "percent",
|
|
345
|
+
unitDisplay: "narrow"
|
|
346
|
+
}
|
|
347
|
+
).format(this.y);
|
|
303
348
|
return html`
|
|
304
349
|
<div
|
|
305
350
|
@pointerdown=${this.handleAreaPointerdown}
|
|
@@ -318,7 +363,7 @@ export class ColorArea extends SpectrumElement {
|
|
|
318
363
|
class="handle"
|
|
319
364
|
color=${this.colorController.getHslString()}
|
|
320
365
|
?disabled=${this.disabled}
|
|
321
|
-
style
|
|
366
|
+
style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * width}px, ${height - this.y * height}px);`}
|
|
322
367
|
${streamingListener({
|
|
323
368
|
start: ["pointerdown", this.handlePointerdown],
|
|
324
369
|
streamInside: ["pointermove", this.handlePointermove],
|
|
@@ -329,43 +374,55 @@ export class ColorArea extends SpectrumElement {
|
|
|
329
374
|
})}
|
|
330
375
|
></sp-color-handle>
|
|
331
376
|
|
|
332
|
-
<
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
377
|
+
<fieldset
|
|
378
|
+
class="fieldset"
|
|
379
|
+
aria-label=${ifDefined(isMobile ? ariaLabel : void 0)}
|
|
380
|
+
>
|
|
381
|
+
<div role="presentation">
|
|
382
|
+
<input
|
|
383
|
+
type="range"
|
|
384
|
+
class="slider"
|
|
385
|
+
name="x"
|
|
386
|
+
aria-label=${isMobile ? ariaLabelX : ariaLabel}
|
|
387
|
+
aria-roledescription=${ariaRoleDescription}
|
|
388
|
+
aria-orientation="horizontal"
|
|
389
|
+
aria-valuetext=${isMobile ? ariaValueX : `${ariaValueX}, ${ariaLabelX}${this._valueChanged ? "" : `, ${ariaValueY}, ${ariaLabelY}`}`}
|
|
390
|
+
min="0"
|
|
391
|
+
max="1"
|
|
392
|
+
step=${this.step}
|
|
393
|
+
tabindex="-1"
|
|
394
|
+
.value=${String(this.x)}
|
|
395
|
+
@input=${this.handleInput}
|
|
396
|
+
@change=${this.handleChange}
|
|
397
|
+
/>
|
|
398
|
+
</div>
|
|
399
|
+
<div role="presentation">
|
|
400
|
+
<input
|
|
401
|
+
type="range"
|
|
402
|
+
class="slider"
|
|
403
|
+
name="y"
|
|
404
|
+
aria-label=${isMobile ? ariaLabelY : ariaLabel}
|
|
405
|
+
aria-roledescription=${ariaRoleDescription}
|
|
406
|
+
aria-orientation="vertical"
|
|
407
|
+
aria-valuetext=${isMobile ? ariaValueY : `${ariaValueY}, ${ariaLabelY}${this._valueChanged ? "" : `, ${ariaValueX}, ${ariaLabelX}`}`}
|
|
408
|
+
orient="vertical"
|
|
409
|
+
min="0"
|
|
410
|
+
max="1"
|
|
411
|
+
step=${this.step}
|
|
412
|
+
tabindex="-1"
|
|
413
|
+
.value=${String(this.y)}
|
|
414
|
+
@input=${this.handleInput}
|
|
415
|
+
@change=${this.handleChange}
|
|
416
|
+
/>
|
|
417
|
+
</div>
|
|
418
|
+
</fieldset>
|
|
362
419
|
`;
|
|
363
420
|
}
|
|
364
421
|
firstUpdated(changed) {
|
|
365
422
|
super.firstUpdated(changed);
|
|
366
423
|
this.boundingClientRect = this.getBoundingClientRect();
|
|
367
|
-
this.addEventListener("
|
|
368
|
-
this.addEventListener("
|
|
424
|
+
this.addEventListener("focus", this.handleFocus);
|
|
425
|
+
this.addEventListener("blur", this.handleBlur);
|
|
369
426
|
this.addEventListener("keyup", this.handleKeyup);
|
|
370
427
|
this.addEventListener("keydown", this.handleKeydown);
|
|
371
428
|
}
|
|
@@ -408,6 +465,9 @@ export class ColorArea extends SpectrumElement {
|
|
|
408
465
|
super.disconnectedCallback();
|
|
409
466
|
}
|
|
410
467
|
}
|
|
468
|
+
__decorateClass([
|
|
469
|
+
property({ type: String, reflect: true })
|
|
470
|
+
], ColorArea.prototype, "dir", 2);
|
|
411
471
|
__decorateClass([
|
|
412
472
|
property({ type: Boolean, reflect: true })
|
|
413
473
|
], ColorArea.prototype, "disabled", 2);
|
package/src/ColorArea.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorArea.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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } 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 { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\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} from '@spectrum-web-components/reactive-controllers/src/Color.js';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String })\n public label: string | undefined;\n\n @property({ type: String, attribute: 'label-x' })\n public labelX = 'saturation';\n\n @property({ type: String, attribute: 'label-y' })\n public labelY = 'luminosity';\n\n @query('.handle')\n private handle!: ColorHandle;\n\n private colorController = new ColorController(this, {\n extractColorFromState: () => ({\n h: this.hue,\n s: this.x,\n v: 1 - this.y,\n }),\n applyColorToState: ({ s, v }) => {\n this.x = s;\n this.y = 1 - v;\n },\n });\n\n @property({ type: Number })\n public get hue(): number {\n return this.colorController.hue;\n }\n\n public set hue(value: number) {\n this.colorController.hue = value;\n }\n\n @property({ type: String })\n public get value(): ColorValue {\n return this.colorController.color;\n }\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({ attribute: false })\n private activeAxis = 'x';\n\n @property({ type: Number })\n public get x(): number {\n return this._x;\n }\n\n public set x(x: number) {\n if (x === this.x) {\n return;\n }\n const oldValue = this.x;\n if (this.inputX) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputX.value = x.toString();\n this._x = this.inputX.valueAsNumber;\n } else {\n this._x = x;\n }\n this.requestUpdate('x', oldValue);\n }\n\n private _x = 1;\n\n @property({ type: Number })\n public get y(): number {\n return this._y;\n }\n\n public set y(y: number) {\n if (y === this.y) {\n return;\n }\n const oldValue = this.y;\n if (this.inputY) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputY.value = y.toString();\n this._y = this.inputY.valueAsNumber;\n } else {\n this._y = y;\n }\n this.requestUpdate('y', oldValue);\n }\n\n private _y = 0;\n\n @property({ type: Number })\n public step = 0.01;\n\n @query('[name=\"x\"]')\n public inputX!: HTMLInputElement;\n\n @query('[name=\"y\"]')\n public inputY!: HTMLInputElement;\n\n private altered = 0;\n\n private activeKeys = new Set();\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 if (this.activeAxis === 'x') {\n this.inputX.focus();\n } else {\n this.inputY.focus();\n }\n }\n\n private handleFocusin(): void {\n this.focused = true;\n }\n\n private handleFocusout(): void {\n if (this._pointerDown) {\n return;\n }\n this.focused = false;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n const isArrowKey = code.search('Arrow') === 0;\n if (isArrowKey) {\n event.preventDefault();\n this.activeKeys.add(code);\n this.handleKeypress();\n }\n }\n\n private handleKeypress(): void {\n let deltaX = 0;\n let deltaY = 0;\n const step = Math.max(this.step, this.altered * 5 * this.step);\n this.activeKeys.forEach((code) => {\n switch (code) {\n case 'ArrowUp':\n deltaY = step * -1;\n break;\n case 'ArrowDown':\n deltaY = step * 1;\n break;\n case 'ArrowLeft':\n deltaX = step * -1;\n break;\n case 'ArrowRight':\n deltaX = step * 1;\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n });\n if (deltaX != 0) {\n this.activeAxis = 'x';\n this.inputX.focus();\n } else if (deltaY != 0) {\n this.activeAxis = 'y';\n this.inputY.focus();\n }\n this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n this.colorController.savePreviousColor();\n this.colorController.applyColorFromState();\n\n if (deltaX != 0 || deltaY != 0) {\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\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 }\n }\n\n private handleKeyup(event: KeyboardEvent): void {\n event.preventDefault();\n const { code } = event;\n this.activeKeys.delete(code);\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber, name } = event.target;\n\n this[name as 'x' | 'y'] = valueAsNumber;\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 cancelable: true,\n })\n );\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 [x, y] = this.calculateHandlePosition(event);\n\n this.x = x;\n this.y = y;\n this.colorController.applyColorFromState();\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 event.preventDefault();\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n this.inputX.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n if (!applyDefault) {\n this.colorController.restorePreviousColor();\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, number] {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return [this.x, this.y];\n }\n const rect = this.boundingClientRect;\n const minOffsetX = rect.left;\n const minOffsetY = rect.top;\n const offsetX = event.clientX;\n const offsetY = event.clientY;\n const width = rect.width;\n const height = rect.height;\n\n const percentX = Math.max(\n 0,\n Math.min(1, (offsetX - minOffsetX) / width)\n );\n const percentY = Math.max(\n 0,\n Math.min(1, (offsetY - minOffsetY) / height)\n );\n\n return [percentX, percentY];\n }\n\n private handleAreaPointerdown(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 protected override render(): TemplateResult {\n const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n if (window.__swc.DEBUG) {\n if (this.label) {\n window.__swc.warn(\n this,\n `The \"label\" property in <${this.localName}> has been deprecated and will be removed in a future release. Please leverage \"labelX\" and \"labelY\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/color-area/#labels',\n { level: 'deprecation' }\n );\n }\n }\n\n return html`\n <div\n @pointerdown=${this.handleAreaPointerdown}\n class=\"gradient\"\n style=\"background:\n linear-gradient(to top, black 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%),\n linear-gradient(to right, white 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);\"\n >\n <slot name=\"gradient\"></slot>\n </div>\n\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=${this.colorController.getHslString()}\n ?disabled=${this.disabled}\n style=\"transform: translate(${this.x * width}px, ${this.y *\n height}px);\"\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\n <div>\n <input\n type=\"range\"\n class=\"slider\"\n name=\"x\"\n aria-label=${this.label ?? this.labelX}\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.x)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n <div>\n <input\n type=\"range\"\n class=\"slider\"\n name=\"y\"\n aria-label=${this.label ?? this.labelY}\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.y)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n `;\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n\n this.addEventListener('focusin', this.handleFocusin);\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keyup', this.handleKeyup);\n this.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (this.x !== this.inputX.valueAsNumber) {\n this._x = this.inputX.valueAsNumber;\n }\n if (this.y !== this.inputY.valueAsNumber) {\n this._y = this.inputY.valueAsNumber;\n }\n if (changed.has('focused') && this.focused) {\n // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n // so that browsers with certain settings (Webkit) aren't allowed\n // multiple tab stops within the Color Area.\n const parentX = this.inputX.parentElement as HTMLDivElement;\n const parentY = this.inputY.parentElement as HTMLDivElement;\n if (!parentX.shadowRoot && !parentY.shadowRoot) {\n parentX.attachShadow({ mode: 'open' });\n parentY.attachShadow({ mode: 'open' });\n const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n }\n }\n }\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n public override connectedCallback(): void {\n super.connectedCallback();\n if (\n !this.observer &&\n (window as unknown as WithSWCResizeObserver).ResizeObserver\n ) {\n this.observer = new (\n window as unknown as WithSWCResizeObserver\n ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n for (const entry of entries) {\n this.boundingClientRect = entry.contentRect;\n }\n this.requestUpdate();\n });\n }\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,iBAAiB;AAC1B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,yBAAyB;AAGlC,OAAO;AACP;AAAA,EACI;AAAA,OAEG;AAEP,OAAO,YAAY;AAQZ,aAAM,kBAAkB,gBAAgB;AAAA,EAAxC;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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { ifDefined } 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 { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';\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} from '@spectrum-web-components/reactive-controllers/src/Color.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport {\n isAndroid,\n isIOS,\n} from '@spectrum-web-components/shared/src/platform.js';\n\nimport styles from './color-area.css.js';\n\n/**\n * @element sp-color-area\n * @slot gradient - a custom gradient visually outlining the available color values\n * @fires input - The value of the Color Area has changed.\n * @fires change - An alteration to the value of the Color Area has been committed by the user.\n */\nexport class ColorArea extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: String, reflect: true })\n public override dir!: 'ltr' | 'rtl';\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @property({ type: String })\n public label: string | undefined;\n\n @property({ type: String, attribute: 'label-x' })\n public labelX = 'saturation';\n\n @property({ type: String, attribute: 'label-y' })\n public labelY = 'luminosity';\n\n @query('.handle')\n private handle!: ColorHandle;\n\n private languageResolver = new LanguageResolutionController(this);\n\n private colorController = new ColorController(this, {\n extractColorFromState: () => ({\n h: this.hue,\n s: this.x,\n v: this.y,\n }),\n applyColorToState: ({ s, v }) => {\n this.x = s;\n this.y = v;\n },\n });\n\n @property({ type: Number })\n public get hue(): number {\n return this.colorController.hue;\n }\n\n public set hue(value: number) {\n this.colorController.hue = value;\n }\n\n @property({ type: String })\n public get value(): ColorValue {\n return this.colorController.color;\n }\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({ attribute: false })\n private activeAxis = 'x';\n\n @property({ type: Number })\n public get x(): number {\n return this._x;\n }\n\n public set x(x: number) {\n if (x === this.x) {\n return;\n }\n const oldValue = this.x;\n if (this.inputX) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputX.value = x.toString();\n this._x = this.inputX.valueAsNumber;\n } else {\n this._x = x;\n }\n this.requestUpdate('x', oldValue);\n }\n\n private _x = 1;\n\n @property({ type: Number })\n public get y(): number {\n return this._y;\n }\n\n public set y(y: number) {\n if (y === this.y) {\n return;\n }\n const oldValue = this.y;\n if (this.inputY) {\n // Use the native `input[type='range']` control to validate this value after `firstUpdate`\n this.inputY.value = y.toString();\n this._y = this.inputY.valueAsNumber;\n } else {\n this._y = y;\n }\n this.requestUpdate('y', oldValue);\n }\n\n private _y = 1;\n\n @property({ type: Number })\n public step = 0.01;\n\n @query('[name=\"x\"]')\n public inputX!: HTMLInputElement;\n\n @query('[name=\"y\"]')\n public inputY!: HTMLInputElement;\n\n private altered = 0;\n\n private activeKeys = new Set();\n\n private _valueChanged = false;\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 if (this.activeAxis === 'x') {\n this.inputX.focus();\n } else {\n this.inputY.focus();\n }\n }\n\n private handleFocus(): void {\n this.focused = true;\n this._valueChanged = false;\n }\n\n private handleBlur(): void {\n if (this._pointerDown) {\n return;\n }\n this.altered = 0;\n this.focused = false;\n this._valueChanged = false;\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n this.focused = true;\n this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(\n (key) => !!key\n ).length;\n const isArrowKey =\n code.search('Arrow') === 0 ||\n code.search('Page') === 0 ||\n code.search('Home') === 0 ||\n code.search('End') === 0;\n if (isArrowKey) {\n event.preventDefault();\n this.activeKeys.add(code);\n this.handleKeypress();\n }\n }\n\n private handleKeypress(): void {\n let deltaX = 0;\n let deltaY = 0;\n const step = Math.max(this.step, this.altered * 5 * this.step);\n this.activeKeys.forEach((code) => {\n switch (code) {\n case 'ArrowUp':\n deltaY = step;\n break;\n case 'ArrowDown':\n deltaY = step * -1;\n break;\n case 'ArrowLeft':\n deltaX = this.step * (this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n deltaX = this.step * (this.isLTR ? 1 : -1);\n break;\n case 'PageUp':\n deltaY = step * 10;\n break;\n case 'PageDown':\n deltaY = step * -10;\n break;\n case 'Home':\n deltaX = step * (this.isLTR ? -10 : 10);\n break;\n case 'End':\n deltaX = step * (this.isLTR ? 10 : -10);\n break;\n /* c8 ignore next 2 */\n default:\n break;\n }\n });\n if (deltaX != 0) {\n this.activeAxis = 'x';\n this.inputX.focus();\n } else if (deltaY != 0) {\n this.activeAxis = 'y';\n this.inputY.focus();\n }\n this.x = Math.min(1, Math.max(this.x + deltaX, 0));\n this.y = Math.min(1, Math.max(this.y + deltaY, 0));\n\n this.colorController.savePreviousColor();\n this.colorController.applyColorFromState();\n\n if (deltaX != 0 || deltaY != 0) {\n this._valueChanged = true;\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n })\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 }\n }\n\n private handleKeyup(event: KeyboardEvent): void {\n event.preventDefault();\n const { code } = event;\n this.activeKeys.delete(code);\n }\n\n private handleInput(event: Event & { target: HTMLInputElement }): void {\n const { valueAsNumber, name } = event.target;\n\n this[name as 'x' | 'y'] = valueAsNumber;\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 cancelable: true,\n })\n );\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 [x, y] = this.calculateHandlePosition(event);\n\n this._valueChanged = false;\n\n this.x = x;\n this.y = 1 - y;\n this.colorController.applyColorFromState();\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 event.preventDefault();\n this._pointerDown = false;\n (event.target as HTMLElement).releasePointerCapture(event.pointerId);\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n this.inputX.focus();\n if (event.pointerType === 'mouse') {\n this.focused = false;\n }\n if (!applyDefault) {\n this.colorController.restorePreviousColor();\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, number] {\n /* c8 ignore next 3 */\n if (!this.boundingClientRect) {\n return [this.x, this.y];\n }\n const rect = this.boundingClientRect;\n const minOffsetX = rect.left;\n const minOffsetY = rect.top;\n const offsetX = event.clientX;\n const offsetY = event.clientY;\n const width = rect.width;\n const height = rect.height;\n\n const percentX = Math.max(\n 0,\n Math.min(1, (offsetX - minOffsetX) / width)\n );\n const percentY = Math.max(\n 0,\n Math.min(1, (offsetY - minOffsetY) / height)\n );\n\n return [this.isLTR ? percentX : 1 - percentX, percentY];\n }\n\n private handleAreaPointerdown(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 protected override render(): TemplateResult {\n const { width = 0, height = 0 } = this.boundingClientRect || {};\n\n if (window.__swc.DEBUG) {\n if (this.label) {\n window.__swc.warn(\n this,\n `The \"label\" property in <${this.localName}> has been deprecated and will be removed in a future release. Please leverage \"labelX\" and \"labelY\" instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/components/color-area/#labels',\n { level: 'deprecation' }\n );\n }\n }\n\n const isMobile = isAndroid() || isIOS();\n const defaultAriaLabel = 'Color Picker';\n const ariaLabel = this.label\n ? `${this.label} ${defaultAriaLabel}`\n : defaultAriaLabel;\n const ariaRoleDescription = ifDefined(\n isMobile ? undefined : '2d slider'\n );\n\n const ariaLabelX = this.labelX;\n const ariaLabelY = this.labelY;\n const ariaValueX = new Intl.NumberFormat(\n this.languageResolver.language,\n {\n style: 'percent',\n unitDisplay: 'narrow',\n }\n ).format(this.x);\n const ariaValueY = new Intl.NumberFormat(\n this.languageResolver.language,\n {\n style: 'percent',\n unitDisplay: 'narrow',\n }\n ).format(this.y);\n\n return html`\n <div\n @pointerdown=${this.handleAreaPointerdown}\n class=\"gradient\"\n style=\"background:\n linear-gradient(to top, black 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%),\n linear-gradient(to right, white 0%, hsla(${this\n .hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);\"\n >\n <slot name=\"gradient\"></slot>\n </div>\n\n <sp-color-handle\n tabindex=${ifDefined(this.focused ? undefined : '0')}\n @focus=${this.forwardFocus}\n ?focused=${this.focused}\n class=\"handle\"\n color=${this.colorController.getHslString()}\n ?disabled=${this.disabled}\n style=${`transform: translate(${\n (this.isLTR ? this.x : 1 - this.x) * width\n }px, ${height - this.y * height}px);`}\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\n <fieldset\n class=\"fieldset\"\n aria-label=${ifDefined(isMobile ? ariaLabel : undefined)}\n >\n <div role=\"presentation\">\n <input\n type=\"range\"\n class=\"slider\"\n name=\"x\"\n aria-label=${isMobile ? ariaLabelX : ariaLabel}\n aria-roledescription=${ariaRoleDescription}\n aria-orientation=\"horizontal\"\n aria-valuetext=${isMobile\n ? ariaValueX\n : `${ariaValueX}, ${ariaLabelX}${\n this._valueChanged\n ? ''\n : `, ${ariaValueY}, ${ariaLabelY}`\n }`}\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.x)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n <div role=\"presentation\">\n <input\n type=\"range\"\n class=\"slider\"\n name=\"y\"\n aria-label=${isMobile ? ariaLabelY : ariaLabel}\n aria-roledescription=${ariaRoleDescription}\n aria-orientation=\"vertical\"\n aria-valuetext=${isMobile\n ? ariaValueY\n : `${ariaValueY}, ${ariaLabelY}${\n this._valueChanged\n ? ''\n : `, ${ariaValueX}, ${ariaLabelX}`\n }`}\n orient=\"vertical\"\n min=\"0\"\n max=\"1\"\n step=${this.step}\n tabindex=\"-1\"\n .value=${String(this.y)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n />\n </div>\n </fieldset>\n `;\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n this.boundingClientRect = this.getBoundingClientRect();\n\n this.addEventListener('focus', this.handleFocus);\n this.addEventListener('blur', this.handleBlur);\n this.addEventListener('keyup', this.handleKeyup);\n this.addEventListener('keydown', this.handleKeydown);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (this.x !== this.inputX.valueAsNumber) {\n this._x = this.inputX.valueAsNumber;\n }\n if (this.y !== this.inputY.valueAsNumber) {\n this._y = this.inputY.valueAsNumber;\n }\n if (changed.has('focused') && this.focused) {\n // Lazily bind the `input[type=\"range\"]` elements in shadow roots\n // so that browsers with certain settings (Webkit) aren't allowed\n // multiple tab stops within the Color Area.\n const parentX = this.inputX.parentElement as HTMLDivElement;\n const parentY = this.inputY.parentElement as HTMLDivElement;\n if (!parentX.shadowRoot && !parentY.shadowRoot) {\n parentX.attachShadow({ mode: 'open' });\n parentY.attachShadow({ mode: 'open' });\n const slot = '<div tabindex=\"-1\"><slot></slot></div>';\n (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot;\n }\n }\n }\n\n private observer?: WithSWCResizeObserver['ResizeObserver'];\n\n public override connectedCallback(): void {\n super.connectedCallback();\n if (\n !this.observer &&\n (window as unknown as WithSWCResizeObserver).ResizeObserver\n ) {\n this.observer = new (\n window as unknown as WithSWCResizeObserver\n ).ResizeObserver((entries: SWCResizeObserverEntry[]) => {\n for (const entry of entries) {\n this.boundingClientRect = entry.contentRect;\n }\n this.requestUpdate();\n });\n }\n this.observer?.observe(this);\n }\n\n public override disconnectedCallback(): void {\n this.observer?.unobserve(this);\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|