@react-aria/color 3.0.0-beta.16 → 3.0.0-beta.18
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/dist/main.js +365 -384
- package/dist/main.js.map +1 -1
- package/dist/module.js +365 -384
- package/dist/module.js.map +1 -1
- package/package.json +14 -14
package/dist/module.js
CHANGED
|
@@ -10,14 +10,32 @@ import {useSpinButton as $7KHxM$useSpinButton} from "@react-aria/spinbutton";
|
|
|
10
10
|
function $parcel$interopDefault(a) {
|
|
11
11
|
return a && a.__esModule ? a.default : a;
|
|
12
12
|
}
|
|
13
|
-
|
|
13
|
+
/*
|
|
14
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
15
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
16
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
17
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
18
|
+
*
|
|
19
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
21
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
22
|
+
* governing permissions and limitations under the License.
|
|
23
|
+
*/ /*
|
|
24
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
25
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
26
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
27
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
28
|
+
*
|
|
29
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
30
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
31
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
32
|
+
* governing permissions and limitations under the License.
|
|
33
|
+
*/
|
|
14
34
|
var $052cfdf4c32eb7c3$exports = {};
|
|
15
35
|
var $eccab2b0118aef08$exports = {};
|
|
16
36
|
$eccab2b0118aef08$exports = {
|
|
17
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
18
|
-
|
|
19
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
20
|
-
,
|
|
37
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
38
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
21
39
|
"colorPicker": `أداة انتقاء اللون`,
|
|
22
40
|
"twoDimensionalSlider": `مُنزلق 2D`
|
|
23
41
|
};
|
|
@@ -25,10 +43,8 @@ $eccab2b0118aef08$exports = {
|
|
|
25
43
|
|
|
26
44
|
var $bf2b4507594e3d45$exports = {};
|
|
27
45
|
$bf2b4507594e3d45$exports = {
|
|
28
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
29
|
-
|
|
30
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
31
|
-
,
|
|
46
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
47
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
32
48
|
"colorPicker": `Средство за избиране на цвят`,
|
|
33
49
|
"twoDimensionalSlider": `2D плъзгач`
|
|
34
50
|
};
|
|
@@ -36,10 +52,8 @@ $bf2b4507594e3d45$exports = {
|
|
|
36
52
|
|
|
37
53
|
var $01c08487af7ecd14$exports = {};
|
|
38
54
|
$01c08487af7ecd14$exports = {
|
|
39
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
40
|
-
|
|
41
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
42
|
-
,
|
|
55
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
56
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
43
57
|
"colorPicker": `Výběr barvy`,
|
|
44
58
|
"twoDimensionalSlider": `2D posuvník`
|
|
45
59
|
};
|
|
@@ -47,10 +61,8 @@ $01c08487af7ecd14$exports = {
|
|
|
47
61
|
|
|
48
62
|
var $5e997db6ea0d10f6$exports = {};
|
|
49
63
|
$5e997db6ea0d10f6$exports = {
|
|
50
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
51
|
-
|
|
52
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
53
|
-
,
|
|
64
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
65
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
54
66
|
"colorPicker": `Farvevælger`,
|
|
55
67
|
"twoDimensionalSlider": `2D-skyder`
|
|
56
68
|
};
|
|
@@ -58,10 +70,8 @@ $5e997db6ea0d10f6$exports = {
|
|
|
58
70
|
|
|
59
71
|
var $fe5998f640a79fd2$exports = {};
|
|
60
72
|
$fe5998f640a79fd2$exports = {
|
|
61
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
62
|
-
|
|
63
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
64
|
-
,
|
|
73
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
74
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
65
75
|
"colorPicker": `Farbwähler`,
|
|
66
76
|
"twoDimensionalSlider": `2D-Schieberegler`
|
|
67
77
|
};
|
|
@@ -69,10 +79,8 @@ $fe5998f640a79fd2$exports = {
|
|
|
69
79
|
|
|
70
80
|
var $18e4d1d5b500a9ee$exports = {};
|
|
71
81
|
$18e4d1d5b500a9ee$exports = {
|
|
72
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
73
|
-
|
|
74
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
75
|
-
,
|
|
82
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
83
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
76
84
|
"colorPicker": `Επιλογέας χρωμάτων`,
|
|
77
85
|
"twoDimensionalSlider": `Ρυθμιστικό 2D`
|
|
78
86
|
};
|
|
@@ -82,18 +90,15 @@ var $bf90a11a7a42a0f7$exports = {};
|
|
|
82
90
|
$bf90a11a7a42a0f7$exports = {
|
|
83
91
|
"colorPicker": `Color picker`,
|
|
84
92
|
"twoDimensionalSlider": `2D slider`,
|
|
85
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}
|
|
86
|
-
,
|
|
93
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
87
94
|
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
|
|
88
95
|
};
|
|
89
96
|
|
|
90
97
|
|
|
91
98
|
var $dd0d25f885b5c5f3$exports = {};
|
|
92
99
|
$dd0d25f885b5c5f3$exports = {
|
|
93
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
94
|
-
|
|
95
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
96
|
-
,
|
|
100
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
101
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
97
102
|
"colorPicker": `Selector de color`,
|
|
98
103
|
"twoDimensionalSlider": `Regulador 2D`
|
|
99
104
|
};
|
|
@@ -101,10 +106,8 @@ $dd0d25f885b5c5f3$exports = {
|
|
|
101
106
|
|
|
102
107
|
var $d950967017e3485b$exports = {};
|
|
103
108
|
$d950967017e3485b$exports = {
|
|
104
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
105
|
-
|
|
106
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
107
|
-
,
|
|
109
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
110
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
108
111
|
"colorPicker": `Värvivalija`,
|
|
109
112
|
"twoDimensionalSlider": `2D-liugur`
|
|
110
113
|
};
|
|
@@ -112,10 +115,8 @@ $d950967017e3485b$exports = {
|
|
|
112
115
|
|
|
113
116
|
var $00a415a3f0ab315a$exports = {};
|
|
114
117
|
$00a415a3f0ab315a$exports = {
|
|
115
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
116
|
-
|
|
117
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
118
|
-
,
|
|
118
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
119
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
119
120
|
"colorPicker": `Värimuokkain`,
|
|
120
121
|
"twoDimensionalSlider": `2D-liukusäädin`
|
|
121
122
|
};
|
|
@@ -123,10 +124,8 @@ $00a415a3f0ab315a$exports = {
|
|
|
123
124
|
|
|
124
125
|
var $d80f30fe86c95741$exports = {};
|
|
125
126
|
$d80f30fe86c95741$exports = {
|
|
126
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
127
|
-
|
|
128
|
-
"colorNameAndValue": (args)=>`${args.name} : ${args.value}`
|
|
129
|
-
,
|
|
127
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
128
|
+
"colorNameAndValue": (args)=>`${args.name} : ${args.value}`,
|
|
130
129
|
"colorPicker": `Sélecteur de couleurs`,
|
|
131
130
|
"twoDimensionalSlider": `Curseur 2D`
|
|
132
131
|
};
|
|
@@ -134,10 +133,8 @@ $d80f30fe86c95741$exports = {
|
|
|
134
133
|
|
|
135
134
|
var $6912afb584340a2e$exports = {};
|
|
136
135
|
$6912afb584340a2e$exports = {
|
|
137
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
138
|
-
|
|
139
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
140
|
-
,
|
|
136
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
137
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
141
138
|
"colorPicker": `בוחר הצבעים`,
|
|
142
139
|
"twoDimensionalSlider": `מחוון דו מימדי`
|
|
143
140
|
};
|
|
@@ -145,10 +142,8 @@ $6912afb584340a2e$exports = {
|
|
|
145
142
|
|
|
146
143
|
var $7b97fcacd84ec90f$exports = {};
|
|
147
144
|
$7b97fcacd84ec90f$exports = {
|
|
148
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
149
|
-
|
|
150
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
151
|
-
,
|
|
145
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
146
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
152
147
|
"colorPicker": `Odabir boje`,
|
|
153
148
|
"twoDimensionalSlider": `2D klizač`
|
|
154
149
|
};
|
|
@@ -156,10 +151,8 @@ $7b97fcacd84ec90f$exports = {
|
|
|
156
151
|
|
|
157
152
|
var $da9b443e89eebc6b$exports = {};
|
|
158
153
|
$da9b443e89eebc6b$exports = {
|
|
159
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
160
|
-
|
|
161
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
162
|
-
,
|
|
154
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
155
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
163
156
|
"colorPicker": `Színválasztó`,
|
|
164
157
|
"twoDimensionalSlider": `2D-csúszka`
|
|
165
158
|
};
|
|
@@ -167,10 +160,8 @@ $da9b443e89eebc6b$exports = {
|
|
|
167
160
|
|
|
168
161
|
var $35f135b45eb4d95b$exports = {};
|
|
169
162
|
$35f135b45eb4d95b$exports = {
|
|
170
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
171
|
-
|
|
172
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
173
|
-
,
|
|
163
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
164
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
174
165
|
"colorPicker": `Selettore colore`,
|
|
175
166
|
"twoDimensionalSlider": `Cursore 2D`
|
|
176
167
|
};
|
|
@@ -178,10 +169,8 @@ $35f135b45eb4d95b$exports = {
|
|
|
178
169
|
|
|
179
170
|
var $760b09448e39c6cd$exports = {};
|
|
180
171
|
$760b09448e39c6cd$exports = {
|
|
181
|
-
"colorInputLabel": (args)=>`${args.label}、${args.channelLabel}
|
|
182
|
-
|
|
183
|
-
"colorNameAndValue": (args)=>`${args.name} : ${args.value}`
|
|
184
|
-
,
|
|
172
|
+
"colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`,
|
|
173
|
+
"colorNameAndValue": (args)=>`${args.name} : ${args.value}`,
|
|
185
174
|
"colorPicker": `カラーピッカー`,
|
|
186
175
|
"twoDimensionalSlider": `2D スライダー`
|
|
187
176
|
};
|
|
@@ -189,10 +178,8 @@ $760b09448e39c6cd$exports = {
|
|
|
189
178
|
|
|
190
179
|
var $fc7b7d43be9703ec$exports = {};
|
|
191
180
|
$fc7b7d43be9703ec$exports = {
|
|
192
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
193
|
-
|
|
194
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
195
|
-
,
|
|
181
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
182
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
196
183
|
"colorPicker": `색상 피커`,
|
|
197
184
|
"twoDimensionalSlider": `2D 슬라이더`
|
|
198
185
|
};
|
|
@@ -200,10 +187,8 @@ $fc7b7d43be9703ec$exports = {
|
|
|
200
187
|
|
|
201
188
|
var $74918a1664156912$exports = {};
|
|
202
189
|
$74918a1664156912$exports = {
|
|
203
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
204
|
-
|
|
205
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
206
|
-
,
|
|
190
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
191
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
207
192
|
"colorPicker": `Spalvų parinkiklis`,
|
|
208
193
|
"twoDimensionalSlider": `2D slankiklis`
|
|
209
194
|
};
|
|
@@ -211,10 +196,8 @@ $74918a1664156912$exports = {
|
|
|
211
196
|
|
|
212
197
|
var $4e6cde11c2bc9840$exports = {};
|
|
213
198
|
$4e6cde11c2bc9840$exports = {
|
|
214
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
215
|
-
|
|
216
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
217
|
-
,
|
|
199
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
200
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
218
201
|
"colorPicker": `Krāsu atlasītājs`,
|
|
219
202
|
"twoDimensionalSlider": `2D slīdnis`
|
|
220
203
|
};
|
|
@@ -222,10 +205,8 @@ $4e6cde11c2bc9840$exports = {
|
|
|
222
205
|
|
|
223
206
|
var $6faa3defebc3eb72$exports = {};
|
|
224
207
|
$6faa3defebc3eb72$exports = {
|
|
225
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
226
|
-
|
|
227
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
228
|
-
,
|
|
208
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
209
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
229
210
|
"colorPicker": `Fargevelger`,
|
|
230
211
|
"twoDimensionalSlider": `2D-glidebryter`
|
|
231
212
|
};
|
|
@@ -233,10 +214,8 @@ $6faa3defebc3eb72$exports = {
|
|
|
233
214
|
|
|
234
215
|
var $6ac9b6b1b7e3ca12$exports = {};
|
|
235
216
|
$6ac9b6b1b7e3ca12$exports = {
|
|
236
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
237
|
-
|
|
238
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
239
|
-
,
|
|
217
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
218
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
240
219
|
"colorPicker": `Kleurkiezer`,
|
|
241
220
|
"twoDimensionalSlider": `2D-schuifregelaar`
|
|
242
221
|
};
|
|
@@ -244,10 +223,8 @@ $6ac9b6b1b7e3ca12$exports = {
|
|
|
244
223
|
|
|
245
224
|
var $1be8b0ee8841f1e7$exports = {};
|
|
246
225
|
$1be8b0ee8841f1e7$exports = {
|
|
247
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
248
|
-
|
|
249
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
250
|
-
,
|
|
226
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
227
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
251
228
|
"colorPicker": `Próbnik kolorów`,
|
|
252
229
|
"twoDimensionalSlider": `Suwak 2D`
|
|
253
230
|
};
|
|
@@ -255,10 +232,8 @@ $1be8b0ee8841f1e7$exports = {
|
|
|
255
232
|
|
|
256
233
|
var $f9507c2d404ed689$exports = {};
|
|
257
234
|
$f9507c2d404ed689$exports = {
|
|
258
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
259
|
-
|
|
260
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
261
|
-
,
|
|
235
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
236
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
262
237
|
"colorPicker": `Seletor de cores`,
|
|
263
238
|
"twoDimensionalSlider": `Controle deslizante 2D`
|
|
264
239
|
};
|
|
@@ -266,10 +241,8 @@ $f9507c2d404ed689$exports = {
|
|
|
266
241
|
|
|
267
242
|
var $8f872ea59c02d67e$exports = {};
|
|
268
243
|
$8f872ea59c02d67e$exports = {
|
|
269
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
270
|
-
|
|
271
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
272
|
-
,
|
|
244
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
245
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
273
246
|
"colorPicker": `Seletor de cores`,
|
|
274
247
|
"twoDimensionalSlider": `Controle deslizante 2D`
|
|
275
248
|
};
|
|
@@ -277,10 +250,8 @@ $8f872ea59c02d67e$exports = {
|
|
|
277
250
|
|
|
278
251
|
var $b03b45b62a7ccae4$exports = {};
|
|
279
252
|
$b03b45b62a7ccae4$exports = {
|
|
280
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
281
|
-
|
|
282
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
283
|
-
,
|
|
253
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
254
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
284
255
|
"colorPicker": `Selector de culori`,
|
|
285
256
|
"twoDimensionalSlider": `Glisor 2D`
|
|
286
257
|
};
|
|
@@ -288,10 +259,8 @@ $b03b45b62a7ccae4$exports = {
|
|
|
288
259
|
|
|
289
260
|
var $f1107d94c09df9b8$exports = {};
|
|
290
261
|
$f1107d94c09df9b8$exports = {
|
|
291
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
292
|
-
|
|
293
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
294
|
-
,
|
|
262
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
263
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
295
264
|
"colorPicker": `Палитра цветов`,
|
|
296
265
|
"twoDimensionalSlider": `Ползунок 2D`
|
|
297
266
|
};
|
|
@@ -299,10 +268,8 @@ $f1107d94c09df9b8$exports = {
|
|
|
299
268
|
|
|
300
269
|
var $b61325f242fafc7c$exports = {};
|
|
301
270
|
$b61325f242fafc7c$exports = {
|
|
302
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
303
|
-
|
|
304
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
305
|
-
,
|
|
271
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
272
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
306
273
|
"colorPicker": `Výber farieb`,
|
|
307
274
|
"twoDimensionalSlider": `2D jazdec`
|
|
308
275
|
};
|
|
@@ -310,10 +277,8 @@ $b61325f242fafc7c$exports = {
|
|
|
310
277
|
|
|
311
278
|
var $f44b7cf39ac8f315$exports = {};
|
|
312
279
|
$f44b7cf39ac8f315$exports = {
|
|
313
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
314
|
-
|
|
315
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
316
|
-
,
|
|
280
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
281
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
317
282
|
"colorPicker": `Izbirnik barv`,
|
|
318
283
|
"twoDimensionalSlider": `2D drsnik`
|
|
319
284
|
};
|
|
@@ -321,10 +286,8 @@ $f44b7cf39ac8f315$exports = {
|
|
|
321
286
|
|
|
322
287
|
var $aa8cd83fc8d4982b$exports = {};
|
|
323
288
|
$aa8cd83fc8d4982b$exports = {
|
|
324
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
325
|
-
|
|
326
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
327
|
-
,
|
|
289
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
290
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
328
291
|
"colorPicker": `Birač boja`,
|
|
329
292
|
"twoDimensionalSlider": `2D klizač`
|
|
330
293
|
};
|
|
@@ -332,10 +295,8 @@ $aa8cd83fc8d4982b$exports = {
|
|
|
332
295
|
|
|
333
296
|
var $7c4f4e5bb7c06f1e$exports = {};
|
|
334
297
|
$7c4f4e5bb7c06f1e$exports = {
|
|
335
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
336
|
-
|
|
337
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
338
|
-
,
|
|
298
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
299
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
339
300
|
"colorPicker": `Färgväljaren`,
|
|
340
301
|
"twoDimensionalSlider": `2D-reglage`
|
|
341
302
|
};
|
|
@@ -343,10 +304,8 @@ $7c4f4e5bb7c06f1e$exports = {
|
|
|
343
304
|
|
|
344
305
|
var $8045cf930ef745aa$exports = {};
|
|
345
306
|
$8045cf930ef745aa$exports = {
|
|
346
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
347
|
-
|
|
348
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
349
|
-
,
|
|
307
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
308
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
350
309
|
"colorPicker": `Renk Seçici`,
|
|
351
310
|
"twoDimensionalSlider": `2D sürgü`
|
|
352
311
|
};
|
|
@@ -354,10 +313,8 @@ $8045cf930ef745aa$exports = {
|
|
|
354
313
|
|
|
355
314
|
var $ee2044a77f24b118$exports = {};
|
|
356
315
|
$ee2044a77f24b118$exports = {
|
|
357
|
-
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}
|
|
358
|
-
|
|
359
|
-
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`
|
|
360
|
-
,
|
|
316
|
+
"colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
|
|
317
|
+
"colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
|
|
361
318
|
"colorPicker": `Палітра кольорів`,
|
|
362
319
|
"twoDimensionalSlider": `Повзунок 2D`
|
|
363
320
|
};
|
|
@@ -365,10 +322,8 @@ $ee2044a77f24b118$exports = {
|
|
|
365
322
|
|
|
366
323
|
var $4e1dbc65a687dd93$exports = {};
|
|
367
324
|
$4e1dbc65a687dd93$exports = {
|
|
368
|
-
"colorInputLabel": (args)=>`${args.label}、${args.channelLabel}
|
|
369
|
-
|
|
370
|
-
"colorNameAndValue": (args)=>`${args.name}：${args.value}`
|
|
371
|
-
,
|
|
325
|
+
"colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`,
|
|
326
|
+
"colorNameAndValue": (args)=>`${args.name}：${args.value}`,
|
|
372
327
|
"colorPicker": `拾色器`,
|
|
373
328
|
"twoDimensionalSlider": `2D 滑块`
|
|
374
329
|
};
|
|
@@ -376,10 +331,8 @@ $4e1dbc65a687dd93$exports = {
|
|
|
376
331
|
|
|
377
332
|
var $b0fef28529309aa6$exports = {};
|
|
378
333
|
$b0fef28529309aa6$exports = {
|
|
379
|
-
"colorInputLabel": (args)=>`${args.label}，${args.channelLabel}
|
|
380
|
-
|
|
381
|
-
"colorNameAndValue": (args)=>`${args.name}：${args.value}`
|
|
382
|
-
,
|
|
334
|
+
"colorInputLabel": (args)=>`${args.label}，${args.channelLabel}`,
|
|
335
|
+
"colorNameAndValue": (args)=>`${args.name}：${args.value}`,
|
|
383
336
|
"colorPicker": `檢色器`,
|
|
384
337
|
"twoDimensionalSlider": `2D 滑桿`
|
|
385
338
|
};
|
|
@@ -424,7 +377,17 @@ $052cfdf4c32eb7c3$exports = {
|
|
|
424
377
|
|
|
425
378
|
|
|
426
379
|
|
|
427
|
-
|
|
380
|
+
/*
|
|
381
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
382
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
383
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
384
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
385
|
+
*
|
|
386
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
387
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
388
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
389
|
+
* governing permissions and limitations under the License.
|
|
390
|
+
*/
|
|
428
391
|
const $40297c24c53588e6$var$generateRGB_R = (orientation, dir, zValue)=>{
|
|
429
392
|
let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
|
|
430
393
|
let result = {
|
|
@@ -433,7 +396,7 @@ const $40297c24c53588e6$var$generateRGB_R = (orientation, dir, zValue)=>{
|
|
|
433
396
|
},
|
|
434
397
|
gradientStyles: {
|
|
435
398
|
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
|
|
436
|
-
|
|
399
|
+
"WebkitMaskImage": maskImage,
|
|
437
400
|
maskImage: maskImage
|
|
438
401
|
}
|
|
439
402
|
};
|
|
@@ -447,7 +410,7 @@ const $40297c24c53588e6$var$generateRGB_G = (orientation, dir, zValue)=>{
|
|
|
447
410
|
},
|
|
448
411
|
gradientStyles: {
|
|
449
412
|
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
|
|
450
|
-
|
|
413
|
+
"WebkitMaskImage": maskImage,
|
|
451
414
|
maskImage: maskImage
|
|
452
415
|
}
|
|
453
416
|
};
|
|
@@ -461,7 +424,7 @@ const $40297c24c53588e6$var$generateRGB_B = (orientation, dir, zValue)=>{
|
|
|
461
424
|
},
|
|
462
425
|
gradientStyles: {
|
|
463
426
|
backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
|
|
464
|
-
|
|
427
|
+
"WebkitMaskImage": maskImage,
|
|
465
428
|
maskImage: maskImage
|
|
466
429
|
}
|
|
467
430
|
};
|
|
@@ -469,164 +432,156 @@ const $40297c24c53588e6$var$generateRGB_B = (orientation, dir, zValue)=>{
|
|
|
469
432
|
};
|
|
470
433
|
const $40297c24c53588e6$var$generateHSL_H = (orientation, dir, zValue)=>{
|
|
471
434
|
let result = {
|
|
472
|
-
colorAreaStyles: {
|
|
473
|
-
},
|
|
435
|
+
colorAreaStyles: {},
|
|
474
436
|
gradientStyles: {
|
|
475
437
|
background: [
|
|
476
438
|
`linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
|
|
477
439
|
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
|
|
478
440
|
`hsl(${zValue}, 100%, 50%)`
|
|
479
|
-
].join(
|
|
441
|
+
].join(",")
|
|
480
442
|
}
|
|
481
443
|
};
|
|
482
444
|
return result;
|
|
483
445
|
};
|
|
484
446
|
const $40297c24c53588e6$var$generateHSL_S = (orientation, dir, alphaValue)=>{
|
|
485
447
|
let result = {
|
|
486
|
-
colorAreaStyles: {
|
|
487
|
-
},
|
|
448
|
+
colorAreaStyles: {},
|
|
488
449
|
gradientStyles: {
|
|
489
450
|
background: [
|
|
490
451
|
`linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
|
|
491
452
|
`linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
|
|
492
|
-
|
|
493
|
-
].join(
|
|
453
|
+
"hsl(0, 0%, 50%)"
|
|
454
|
+
].join(",")
|
|
494
455
|
}
|
|
495
456
|
};
|
|
496
457
|
return result;
|
|
497
458
|
};
|
|
498
459
|
const $40297c24c53588e6$var$generateHSL_L = (orientation, dir, zValue)=>{
|
|
499
460
|
let result = {
|
|
500
|
-
colorAreaStyles: {
|
|
501
|
-
},
|
|
461
|
+
colorAreaStyles: {},
|
|
502
462
|
gradientStyles: {
|
|
503
463
|
backgroundImage: [
|
|
504
464
|
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
|
|
505
465
|
`linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
|
|
506
|
-
].join(
|
|
466
|
+
].join(",")
|
|
507
467
|
}
|
|
508
468
|
};
|
|
509
469
|
return result;
|
|
510
470
|
};
|
|
511
471
|
const $40297c24c53588e6$var$generateHSB_H = (orientation, dir, zValue)=>{
|
|
512
472
|
let result = {
|
|
513
|
-
colorAreaStyles: {
|
|
514
|
-
},
|
|
473
|
+
colorAreaStyles: {},
|
|
515
474
|
gradientStyles: {
|
|
516
475
|
background: [
|
|
517
476
|
`linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
|
|
518
477
|
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
|
|
519
478
|
`hsl(${zValue}, 100%, 50%)`
|
|
520
|
-
].join(
|
|
479
|
+
].join(",")
|
|
521
480
|
}
|
|
522
481
|
};
|
|
523
482
|
return result;
|
|
524
483
|
};
|
|
525
484
|
const $40297c24c53588e6$var$generateHSB_S = (orientation, dir, alphaValue)=>{
|
|
526
485
|
let result = {
|
|
527
|
-
colorAreaStyles: {
|
|
528
|
-
},
|
|
486
|
+
colorAreaStyles: {},
|
|
529
487
|
gradientStyles: {
|
|
530
488
|
background: [
|
|
531
489
|
`linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
|
|
532
490
|
`linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
|
|
533
491
|
`linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
|
|
534
|
-
].join(
|
|
492
|
+
].join(",")
|
|
535
493
|
}
|
|
536
494
|
};
|
|
537
495
|
return result;
|
|
538
496
|
};
|
|
539
497
|
const $40297c24c53588e6$var$generateHSB_B = (orientation, dir, alphaValue)=>{
|
|
540
498
|
let result = {
|
|
541
|
-
colorAreaStyles: {
|
|
542
|
-
},
|
|
499
|
+
colorAreaStyles: {},
|
|
543
500
|
gradientStyles: {
|
|
544
501
|
background: [
|
|
545
502
|
`linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
|
|
546
503
|
`linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
|
|
547
|
-
|
|
548
|
-
].join(
|
|
504
|
+
"#000"
|
|
505
|
+
].join(",")
|
|
549
506
|
}
|
|
550
507
|
};
|
|
551
508
|
return result;
|
|
552
509
|
};
|
|
553
510
|
function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled }) {
|
|
554
|
-
let returnVal = $7KHxM$useMemo(()=>{
|
|
511
|
+
let returnVal = (0, $7KHxM$useMemo)(()=>{
|
|
555
512
|
let orientation = [
|
|
556
|
-
|
|
557
|
-
direction ===
|
|
513
|
+
"top",
|
|
514
|
+
direction === "rtl" ? "left" : "right"
|
|
558
515
|
];
|
|
559
516
|
let dir = false;
|
|
560
517
|
let background = {
|
|
561
|
-
colorAreaStyles: {
|
|
562
|
-
}
|
|
563
|
-
gradientStyles: {
|
|
564
|
-
}
|
|
518
|
+
colorAreaStyles: {},
|
|
519
|
+
gradientStyles: {}
|
|
565
520
|
};
|
|
566
521
|
let zValue = state.value.getChannelValue(zChannel);
|
|
567
522
|
let { minValue: zMin , maxValue: zMax } = state.value.getChannelRange(zChannel);
|
|
568
523
|
let alphaValue = (zValue - zMin) / (zMax - zMin);
|
|
569
|
-
let isHSL = state.value.getColorSpace() ===
|
|
524
|
+
let isHSL = state.value.getColorSpace() === "hsl";
|
|
570
525
|
if (!isDisabled) switch(zChannel){
|
|
571
|
-
case
|
|
572
|
-
dir = xChannel ===
|
|
526
|
+
case "red":
|
|
527
|
+
dir = xChannel === "green";
|
|
573
528
|
background = $40297c24c53588e6$var$generateRGB_R(orientation, dir, zValue);
|
|
574
529
|
break;
|
|
575
|
-
case
|
|
576
|
-
dir = xChannel ===
|
|
530
|
+
case "green":
|
|
531
|
+
dir = xChannel === "red";
|
|
577
532
|
background = $40297c24c53588e6$var$generateRGB_G(orientation, dir, zValue);
|
|
578
533
|
break;
|
|
579
|
-
case
|
|
580
|
-
dir = xChannel ===
|
|
534
|
+
case "blue":
|
|
535
|
+
dir = xChannel === "red";
|
|
581
536
|
background = $40297c24c53588e6$var$generateRGB_B(orientation, dir, zValue);
|
|
582
537
|
break;
|
|
583
|
-
case
|
|
584
|
-
dir = xChannel !==
|
|
538
|
+
case "hue":
|
|
539
|
+
dir = xChannel !== "saturation";
|
|
585
540
|
if (isHSL) background = $40297c24c53588e6$var$generateHSL_H(orientation, dir, zValue);
|
|
586
541
|
else background = $40297c24c53588e6$var$generateHSB_H(orientation, dir, zValue);
|
|
587
542
|
break;
|
|
588
|
-
case
|
|
589
|
-
dir = xChannel ===
|
|
543
|
+
case "saturation":
|
|
544
|
+
dir = xChannel === "hue";
|
|
590
545
|
if (isHSL) background = $40297c24c53588e6$var$generateHSL_S(orientation, dir, alphaValue);
|
|
591
546
|
else background = $40297c24c53588e6$var$generateHSB_S(orientation, dir, alphaValue);
|
|
592
547
|
break;
|
|
593
|
-
case
|
|
594
|
-
dir = xChannel ===
|
|
548
|
+
case "brightness":
|
|
549
|
+
dir = xChannel === "hue";
|
|
595
550
|
background = $40297c24c53588e6$var$generateHSB_B(orientation, dir, alphaValue);
|
|
596
551
|
break;
|
|
597
|
-
case
|
|
598
|
-
dir = xChannel ===
|
|
552
|
+
case "lightness":
|
|
553
|
+
dir = xChannel === "hue";
|
|
599
554
|
background = $40297c24c53588e6$var$generateHSL_L(orientation, dir, zValue);
|
|
600
555
|
break;
|
|
601
556
|
}
|
|
602
557
|
let { x: x , y: y } = state.getThumbPosition();
|
|
603
|
-
if (direction ===
|
|
558
|
+
if (direction === "rtl") x = 1 - x;
|
|
604
559
|
let forcedColorAdjustNoneStyle = {
|
|
605
|
-
forcedColorAdjust:
|
|
560
|
+
forcedColorAdjust: "none"
|
|
606
561
|
};
|
|
607
562
|
return {
|
|
608
563
|
colorAreaStyleProps: {
|
|
609
564
|
style: {
|
|
610
|
-
position:
|
|
611
|
-
touchAction:
|
|
565
|
+
position: "relative",
|
|
566
|
+
touchAction: "none",
|
|
612
567
|
...forcedColorAdjustNoneStyle,
|
|
613
568
|
...background.colorAreaStyles
|
|
614
569
|
}
|
|
615
570
|
},
|
|
616
571
|
gradientStyleProps: {
|
|
617
572
|
style: {
|
|
618
|
-
touchAction:
|
|
573
|
+
touchAction: "none",
|
|
619
574
|
...forcedColorAdjustNoneStyle,
|
|
620
575
|
...background.gradientStyles
|
|
621
576
|
}
|
|
622
577
|
},
|
|
623
578
|
thumbStyleProps: {
|
|
624
579
|
style: {
|
|
625
|
-
position:
|
|
580
|
+
position: "absolute",
|
|
626
581
|
left: `${x * 100}%`,
|
|
627
582
|
top: `${y * 100}%`,
|
|
628
|
-
transform:
|
|
629
|
-
touchAction:
|
|
583
|
+
transform: "translate(0%, 0%)",
|
|
584
|
+
touchAction: "none",
|
|
630
585
|
...forcedColorAdjustNoneStyle
|
|
631
586
|
}
|
|
632
587
|
}
|
|
@@ -646,23 +601,23 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , stat
|
|
|
646
601
|
|
|
647
602
|
|
|
648
603
|
function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
649
|
-
let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef ,
|
|
650
|
-
let stringFormatter = $7KHxM$useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($052cfdf4c32eb7c3$exports)));
|
|
651
|
-
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $7KHxM$useGlobalListeners();
|
|
652
|
-
let { direction: direction , locale: locale } = $7KHxM$useLocale();
|
|
653
|
-
let focusedInputRef = $7KHxM$useRef(null);
|
|
654
|
-
let focusInput = $7KHxM$useCallback((inputRef = inputXRef)=>{
|
|
655
|
-
if (inputRef.current) $7KHxM$focusWithoutScrolling(inputRef.current);
|
|
604
|
+
let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel } = props;
|
|
605
|
+
let stringFormatter = (0, $7KHxM$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($052cfdf4c32eb7c3$exports))));
|
|
606
|
+
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
|
|
607
|
+
let { direction: direction , locale: locale } = (0, $7KHxM$useLocale)();
|
|
608
|
+
let focusedInputRef = (0, $7KHxM$useRef)(null);
|
|
609
|
+
let focusInput = (0, $7KHxM$useCallback)((inputRef = inputXRef)=>{
|
|
610
|
+
if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
|
|
656
611
|
}, [
|
|
657
612
|
inputXRef
|
|
658
613
|
]);
|
|
659
|
-
let stateRef = $7KHxM$useRef(null);
|
|
614
|
+
let stateRef = (0, $7KHxM$useRef)(null);
|
|
660
615
|
stateRef.current = state;
|
|
661
616
|
let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel } = stateRef.current.channels;
|
|
662
|
-
let
|
|
663
|
-
let
|
|
664
|
-
let currentPosition = $7KHxM$useRef(null);
|
|
665
|
-
let { keyboardProps: keyboardProps } = $7KHxM$useKeyboard({
|
|
617
|
+
let xChannelStep = stateRef.current.xChannelStep;
|
|
618
|
+
let yChannelStep = stateRef.current.yChannelStep;
|
|
619
|
+
let currentPosition = (0, $7KHxM$useRef)(null);
|
|
620
|
+
let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
|
|
666
621
|
onKeyDown (e) {
|
|
667
622
|
// these are the cases that useMove doesn't handle
|
|
668
623
|
if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
|
|
@@ -675,20 +630,20 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
675
630
|
stateRef.current.setDragging(true);
|
|
676
631
|
valueChangedViaKeyboard.current = true;
|
|
677
632
|
switch(e.key){
|
|
678
|
-
case
|
|
633
|
+
case "PageUp":
|
|
679
634
|
stateRef.current.incrementY(stateRef.current.yChannelPageStep);
|
|
680
635
|
focusedInputRef.current = inputYRef.current;
|
|
681
636
|
break;
|
|
682
|
-
case
|
|
637
|
+
case "PageDown":
|
|
683
638
|
stateRef.current.decrementY(stateRef.current.yChannelPageStep);
|
|
684
639
|
focusedInputRef.current = inputYRef.current;
|
|
685
640
|
break;
|
|
686
|
-
case
|
|
687
|
-
direction ===
|
|
641
|
+
case "Home":
|
|
642
|
+
direction === "rtl" ? stateRef.current.incrementX(stateRef.current.xChannelPageStep) : stateRef.current.decrementX(stateRef.current.xChannelPageStep);
|
|
688
643
|
focusedInputRef.current = inputXRef.current;
|
|
689
644
|
break;
|
|
690
|
-
case
|
|
691
|
-
direction ===
|
|
645
|
+
case "End":
|
|
646
|
+
direction === "rtl" ? stateRef.current.decrementX(stateRef.current.xChannelPageStep) : stateRef.current.incrementX(stateRef.current.xChannelPageStep);
|
|
692
647
|
focusedInputRef.current = inputXRef.current;
|
|
693
648
|
break;
|
|
694
649
|
}
|
|
@@ -706,18 +661,18 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
706
661
|
if (currentPosition.current == null) currentPosition.current = getThumbPosition();
|
|
707
662
|
let { width: width , height: height } = containerRef.current.getBoundingClientRect();
|
|
708
663
|
let valueChanged = deltaX !== 0 || deltaY !== 0;
|
|
709
|
-
if (pointerType ===
|
|
664
|
+
if (pointerType === "keyboard") {
|
|
710
665
|
let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
|
|
711
666
|
let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;
|
|
712
|
-
if (deltaX > 0 && direction ===
|
|
713
|
-
else if (deltaX < 0 && direction ===
|
|
667
|
+
if (deltaX > 0 && direction === "ltr" || deltaX < 0 && direction === "rtl") incrementX(deltaXValue);
|
|
668
|
+
else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl") decrementX(deltaXValue);
|
|
714
669
|
else if (deltaY > 0) decrementY(deltaYValue);
|
|
715
670
|
else if (deltaY < 0) incrementY(deltaYValue);
|
|
716
671
|
valueChangedViaKeyboard.current = valueChanged;
|
|
717
672
|
// set the focused input based on which axis has the greater delta
|
|
718
673
|
focusedInputRef.current = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
|
|
719
674
|
} else {
|
|
720
|
-
currentPosition.current.x += (direction ===
|
|
675
|
+
currentPosition.current.x += (direction === "rtl" ? -1 : 1) * deltaX / width;
|
|
721
676
|
currentPosition.current.y += deltaY / height;
|
|
722
677
|
setColorFromPoint(currentPosition.current.x, currentPosition.current.y);
|
|
723
678
|
}
|
|
@@ -728,9 +683,9 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
728
683
|
focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
|
|
729
684
|
}
|
|
730
685
|
};
|
|
731
|
-
let { moveProps: movePropsThumb } = $7KHxM$useMove(moveHandler);
|
|
732
|
-
let valueChangedViaKeyboard = $7KHxM$useRef(false);
|
|
733
|
-
let { focusWithinProps: focusWithinProps } = $7KHxM$useFocusWithin({
|
|
686
|
+
let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
|
|
687
|
+
let valueChangedViaKeyboard = (0, $7KHxM$useRef)(false);
|
|
688
|
+
let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
|
|
734
689
|
onFocusWithinChange: (focusWithin)=>{
|
|
735
690
|
if (!focusWithin) {
|
|
736
691
|
valueChangedViaKeyboard.current = false;
|
|
@@ -738,9 +693,9 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
738
693
|
}
|
|
739
694
|
}
|
|
740
695
|
});
|
|
741
|
-
let currentPointer = $7KHxM$useRef(undefined);
|
|
742
|
-
let isOnColorArea = $7KHxM$useRef(false);
|
|
743
|
-
let { moveProps: movePropsContainer } = $7KHxM$useMove({
|
|
696
|
+
let currentPointer = (0, $7KHxM$useRef)(undefined);
|
|
697
|
+
let isOnColorArea = (0, $7KHxM$useRef)(false);
|
|
698
|
+
let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
|
|
744
699
|
onMoveStart () {
|
|
745
700
|
if (isOnColorArea.current) moveHandler.onMoveStart();
|
|
746
701
|
},
|
|
@@ -757,27 +712,27 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
757
712
|
valueChangedViaKeyboard.current = false;
|
|
758
713
|
focusInput();
|
|
759
714
|
state.setDragging(true);
|
|
760
|
-
if (typeof PointerEvent !==
|
|
715
|
+
if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
|
|
761
716
|
else {
|
|
762
|
-
addGlobalListener(window,
|
|
763
|
-
addGlobalListener(window,
|
|
717
|
+
addGlobalListener(window, "mouseup", onThumbUp, false);
|
|
718
|
+
addGlobalListener(window, "touchend", onThumbUp, false);
|
|
764
719
|
}
|
|
765
720
|
}
|
|
766
721
|
};
|
|
767
722
|
let onThumbUp = (e)=>{
|
|
768
|
-
var
|
|
769
|
-
var
|
|
770
|
-
let id = (
|
|
723
|
+
var _e_changedTouches;
|
|
724
|
+
var _e_pointerId;
|
|
725
|
+
let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
|
|
771
726
|
if (id === currentPointer.current) {
|
|
772
727
|
valueChangedViaKeyboard.current = false;
|
|
773
728
|
focusInput();
|
|
774
729
|
state.setDragging(false);
|
|
775
730
|
currentPointer.current = undefined;
|
|
776
731
|
isOnColorArea.current = false;
|
|
777
|
-
if (typeof PointerEvent !==
|
|
732
|
+
if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
|
|
778
733
|
else {
|
|
779
|
-
removeGlobalListener(window,
|
|
780
|
-
removeGlobalListener(window,
|
|
734
|
+
removeGlobalListener(window, "mouseup", onThumbUp, false);
|
|
735
|
+
removeGlobalListener(window, "touchend", onThumbUp, false);
|
|
781
736
|
}
|
|
782
737
|
}
|
|
783
738
|
};
|
|
@@ -786,7 +741,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
786
741
|
let { width: width , height: height } = rect;
|
|
787
742
|
let x = (clientX - rect.x) / width;
|
|
788
743
|
let y = (clientY - rect.y) / height;
|
|
789
|
-
if (direction ===
|
|
744
|
+
if (direction === "rtl") x = 1 - x;
|
|
790
745
|
if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
|
|
791
746
|
isOnColorArea.current = true;
|
|
792
747
|
valueChangedViaKeyboard.current = false;
|
|
@@ -794,35 +749,34 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
794
749
|
state.setColorFromPoint(x, y);
|
|
795
750
|
focusInput();
|
|
796
751
|
state.setDragging(true);
|
|
797
|
-
if (typeof PointerEvent !==
|
|
752
|
+
if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onColorAreaUp, false);
|
|
798
753
|
else {
|
|
799
|
-
addGlobalListener(window,
|
|
800
|
-
addGlobalListener(window,
|
|
754
|
+
addGlobalListener(window, "mouseup", onColorAreaUp, false);
|
|
755
|
+
addGlobalListener(window, "touchend", onColorAreaUp, false);
|
|
801
756
|
}
|
|
802
757
|
}
|
|
803
758
|
};
|
|
804
759
|
let onColorAreaUp = (e)=>{
|
|
805
|
-
var
|
|
806
|
-
var
|
|
807
|
-
let id = (
|
|
760
|
+
var _e_changedTouches;
|
|
761
|
+
var _e_pointerId;
|
|
762
|
+
let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
|
|
808
763
|
if (isOnColorArea.current && id === currentPointer.current) {
|
|
809
764
|
isOnColorArea.current = false;
|
|
810
765
|
valueChangedViaKeyboard.current = false;
|
|
811
766
|
currentPointer.current = undefined;
|
|
812
767
|
state.setDragging(false);
|
|
813
768
|
focusInput();
|
|
814
|
-
if (typeof PointerEvent !==
|
|
769
|
+
if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onColorAreaUp, false);
|
|
815
770
|
else {
|
|
816
|
-
removeGlobalListener(window,
|
|
817
|
-
removeGlobalListener(window,
|
|
771
|
+
removeGlobalListener(window, "mouseup", onColorAreaUp, false);
|
|
772
|
+
removeGlobalListener(window, "touchend", onColorAreaUp, false);
|
|
818
773
|
}
|
|
819
774
|
}
|
|
820
775
|
};
|
|
821
|
-
let colorAreaInteractions = isDisabled ? {
|
|
822
|
-
|
|
823
|
-
...typeof PointerEvent !== 'undefined' ? {
|
|
776
|
+
let colorAreaInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
|
|
777
|
+
...typeof PointerEvent !== "undefined" ? {
|
|
824
778
|
onPointerDown: (e)=>{
|
|
825
|
-
if (e.pointerType ===
|
|
779
|
+
if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
|
|
826
780
|
onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
|
|
827
781
|
}
|
|
828
782
|
} : {
|
|
@@ -835,11 +789,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
835
789
|
}
|
|
836
790
|
}
|
|
837
791
|
}, movePropsContainer);
|
|
838
|
-
let thumbInteractions = isDisabled ? {
|
|
839
|
-
|
|
840
|
-
...typeof PointerEvent !== 'undefined' ? {
|
|
792
|
+
let thumbInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
|
|
793
|
+
...typeof PointerEvent !== "undefined" ? {
|
|
841
794
|
onPointerDown: (e)=>{
|
|
842
|
-
if (e.pointerType ===
|
|
795
|
+
if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
|
|
843
796
|
onThumbDown(e.pointerId);
|
|
844
797
|
}
|
|
845
798
|
} : {
|
|
@@ -852,61 +805,61 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
852
805
|
}
|
|
853
806
|
}
|
|
854
807
|
}, focusWithinProps, keyboardProps, movePropsThumb);
|
|
855
|
-
let { focusProps: xInputFocusProps } = $7KHxM$useFocus({
|
|
808
|
+
let { focusProps: xInputFocusProps } = (0, $7KHxM$useFocus)({
|
|
856
809
|
onFocus: ()=>{
|
|
857
810
|
focusedInputRef.current = inputXRef.current;
|
|
858
811
|
}
|
|
859
812
|
});
|
|
860
|
-
let { focusProps: yInputFocusProps } = $7KHxM$useFocus({
|
|
813
|
+
let { focusProps: yInputFocusProps } = (0, $7KHxM$useFocus)({
|
|
861
814
|
onFocus: ()=>{
|
|
862
815
|
focusedInputRef.current = inputYRef.current;
|
|
863
816
|
}
|
|
864
817
|
});
|
|
865
|
-
let isMobile = $7KHxM$isIOS() || $7KHxM$isAndroid();
|
|
818
|
+
let isMobile = (0, $7KHxM$isIOS)() || (0, $7KHxM$isAndroid)();
|
|
866
819
|
function getAriaValueTextForChannel(channel) {
|
|
867
|
-
return valueChangedViaKeyboard.current ? stringFormatter.format(
|
|
820
|
+
return valueChangedViaKeyboard.current ? stringFormatter.format("colorNameAndValue", {
|
|
868
821
|
name: state.value.getChannelName(channel, locale),
|
|
869
822
|
value: state.value.formatChannelValue(channel, locale)
|
|
870
823
|
}) : [
|
|
871
|
-
stringFormatter.format(
|
|
824
|
+
stringFormatter.format("colorNameAndValue", {
|
|
872
825
|
name: state.value.getChannelName(channel, locale),
|
|
873
826
|
value: state.value.formatChannelValue(channel, locale)
|
|
874
827
|
}),
|
|
875
|
-
stringFormatter.format(
|
|
828
|
+
stringFormatter.format("colorNameAndValue", {
|
|
876
829
|
name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
|
|
877
830
|
value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
|
|
878
831
|
})
|
|
879
|
-
].join(
|
|
832
|
+
].join(", ");
|
|
880
833
|
}
|
|
881
|
-
let colorPickerLabel = stringFormatter.format(
|
|
882
|
-
let xInputLabellingProps = $7KHxM$useLabels({
|
|
834
|
+
let colorPickerLabel = stringFormatter.format("colorPicker");
|
|
835
|
+
let xInputLabellingProps = (0, $7KHxM$useLabels)({
|
|
883
836
|
...props,
|
|
884
|
-
|
|
837
|
+
"aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
|
|
885
838
|
label: ariaLabel,
|
|
886
839
|
channelLabel: colorPickerLabel
|
|
887
840
|
}) : colorPickerLabel
|
|
888
841
|
});
|
|
889
|
-
let yInputLabellingProps = $7KHxM$useLabels({
|
|
842
|
+
let yInputLabellingProps = (0, $7KHxM$useLabels)({
|
|
890
843
|
...props,
|
|
891
|
-
|
|
844
|
+
"aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
|
|
892
845
|
label: ariaLabel,
|
|
893
846
|
channelLabel: colorPickerLabel
|
|
894
847
|
}) : colorPickerLabel
|
|
895
848
|
});
|
|
896
|
-
let colorAreaLabellingProps = $7KHxM$useLabels({
|
|
849
|
+
let colorAreaLabellingProps = (0, $7KHxM$useLabels)({
|
|
897
850
|
...props,
|
|
898
|
-
|
|
851
|
+
"aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
|
|
899
852
|
}, isMobile ? colorPickerLabel : undefined);
|
|
900
|
-
let ariaRoleDescription = stringFormatter.format(
|
|
901
|
-
let { visuallyHiddenProps: visuallyHiddenProps } = $7KHxM$useVisuallyHidden({
|
|
853
|
+
let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
|
|
854
|
+
let { visuallyHiddenProps: visuallyHiddenProps } = (0, $7KHxM$useVisuallyHidden)({
|
|
902
855
|
style: {
|
|
903
|
-
opacity:
|
|
904
|
-
width:
|
|
905
|
-
height:
|
|
906
|
-
pointerEvents:
|
|
856
|
+
opacity: "0.0001",
|
|
857
|
+
width: "100%",
|
|
858
|
+
height: "100%",
|
|
859
|
+
pointerEvents: "none"
|
|
907
860
|
}
|
|
908
861
|
});
|
|
909
|
-
let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps } = $40297c24c53588e6$export$dd62420467d245ca({
|
|
862
|
+
let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps } = (0, $40297c24c53588e6$export$dd62420467d245ca)({
|
|
910
863
|
direction: direction,
|
|
911
864
|
state: state,
|
|
912
865
|
xChannel: xChannel,
|
|
@@ -918,27 +871,27 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
918
871
|
...colorAreaLabellingProps,
|
|
919
872
|
...colorAreaInteractions,
|
|
920
873
|
...colorAreaStyleProps,
|
|
921
|
-
role:
|
|
874
|
+
role: "group"
|
|
922
875
|
},
|
|
923
876
|
gradientProps: {
|
|
924
877
|
...gradientStyleProps,
|
|
925
|
-
role:
|
|
878
|
+
role: "presentation"
|
|
926
879
|
},
|
|
927
880
|
thumbProps: {
|
|
928
881
|
...thumbInteractions,
|
|
929
882
|
...thumbStyleProps,
|
|
930
|
-
role:
|
|
883
|
+
role: "presentation"
|
|
931
884
|
},
|
|
932
885
|
xInputProps: {
|
|
933
886
|
...xInputLabellingProps,
|
|
934
887
|
...visuallyHiddenProps,
|
|
935
888
|
...xInputFocusProps,
|
|
936
|
-
type:
|
|
889
|
+
type: "range",
|
|
937
890
|
min: state.value.getChannelRange(xChannel).minValue,
|
|
938
891
|
max: state.value.getChannelRange(xChannel).maxValue,
|
|
939
|
-
step:
|
|
940
|
-
|
|
941
|
-
|
|
892
|
+
step: xChannelStep,
|
|
893
|
+
"aria-roledescription": ariaRoleDescription,
|
|
894
|
+
"aria-valuetext": getAriaValueTextForChannel(xChannel),
|
|
942
895
|
disabled: isDisabled,
|
|
943
896
|
value: state.value.getChannelValue(xChannel),
|
|
944
897
|
tabIndex: isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current ? undefined : -1,
|
|
@@ -946,7 +899,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
946
899
|
So that only a single "2d slider" control shows up when listing form elements for screen readers,
|
|
947
900
|
add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
|
|
948
901
|
but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
|
|
949
|
-
*/
|
|
902
|
+
*/ "aria-hidden": isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current || valueChangedViaKeyboard.current ? undefined : "true",
|
|
950
903
|
onChange: (e)=>{
|
|
951
904
|
state.setXValue(parseFloat(e.target.value));
|
|
952
905
|
}
|
|
@@ -955,13 +908,13 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
955
908
|
...yInputLabellingProps,
|
|
956
909
|
...visuallyHiddenProps,
|
|
957
910
|
...yInputFocusProps,
|
|
958
|
-
type:
|
|
911
|
+
type: "range",
|
|
959
912
|
min: state.value.getChannelRange(yChannel).minValue,
|
|
960
913
|
max: state.value.getChannelRange(yChannel).maxValue,
|
|
961
|
-
step:
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
914
|
+
step: yChannelStep,
|
|
915
|
+
"aria-roledescription": ariaRoleDescription,
|
|
916
|
+
"aria-valuetext": getAriaValueTextForChannel(yChannel),
|
|
917
|
+
"aria-orientation": "vertical",
|
|
965
918
|
disabled: isDisabled,
|
|
966
919
|
value: state.value.getChannelValue(yChannel),
|
|
967
920
|
tabIndex: isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current ? undefined : -1,
|
|
@@ -969,7 +922,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
969
922
|
So that only a single "2d slider" control shows up when listing form elements for screen readers,
|
|
970
923
|
add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
|
|
971
924
|
but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
|
|
972
|
-
*/
|
|
925
|
+
*/ "aria-hidden": isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : "true",
|
|
973
926
|
onChange: (e)=>{
|
|
974
927
|
state.setYValue(parseFloat(e.target.value));
|
|
975
928
|
}
|
|
@@ -978,20 +931,30 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
|
|
|
978
931
|
}
|
|
979
932
|
|
|
980
933
|
|
|
981
|
-
|
|
934
|
+
/*
|
|
935
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
936
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
937
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
938
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
939
|
+
*
|
|
940
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
941
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
942
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
943
|
+
* governing permissions and limitations under the License.
|
|
944
|
+
*/
|
|
982
945
|
|
|
983
946
|
|
|
984
947
|
function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
|
|
985
|
-
let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel ,
|
|
986
|
-
let { locale: locale , direction: direction } = $7KHxM$useLocale();
|
|
948
|
+
let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , "aria-label": ariaLabel } = props;
|
|
949
|
+
let { locale: locale , direction: direction } = (0, $7KHxM$useLocale)();
|
|
987
950
|
// Provide a default aria-label if there is no other label provided.
|
|
988
|
-
if (!props.label && !ariaLabel && !props[
|
|
951
|
+
if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
|
|
989
952
|
// @ts-ignore - ignore unused incompatible props
|
|
990
|
-
let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = $7KHxM$useSlider({
|
|
953
|
+
let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = (0, $7KHxM$useSlider)({
|
|
991
954
|
...props,
|
|
992
|
-
|
|
955
|
+
"aria-label": ariaLabel
|
|
993
956
|
}, state, trackRef);
|
|
994
|
-
let { inputProps: inputProps , thumbProps: thumbProps } = $7KHxM$useSliderThumb({
|
|
957
|
+
let { inputProps: inputProps , thumbProps: thumbProps } = (0, $7KHxM$useSliderThumb)({
|
|
995
958
|
index: 0,
|
|
996
959
|
orientation: orientation,
|
|
997
960
|
isDisabled: props.isDisabled,
|
|
@@ -1001,44 +964,44 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
|
|
|
1001
964
|
let generateBackground = ()=>{
|
|
1002
965
|
let value = state.getDisplayColor();
|
|
1003
966
|
let to;
|
|
1004
|
-
if (orientation ===
|
|
1005
|
-
else if (direction ===
|
|
1006
|
-
else to =
|
|
967
|
+
if (orientation === "vertical") to = "top";
|
|
968
|
+
else if (direction === "ltr") to = "right";
|
|
969
|
+
else to = "left";
|
|
1007
970
|
switch(channel){
|
|
1008
|
-
case
|
|
971
|
+
case "hue":
|
|
1009
972
|
return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
|
|
1010
|
-
case
|
|
973
|
+
case "lightness":
|
|
1011
974
|
{
|
|
1012
975
|
// We have to add an extra color stop in the middle so that the hue shows up at all.
|
|
1013
976
|
// Otherwise it will always just be black to white.
|
|
1014
977
|
let min = state.getThumbMinValue(0);
|
|
1015
978
|
let max = state.getThumbMaxValue(0);
|
|
1016
|
-
let start = value.withChannelValue(channel, min).toString(
|
|
1017
|
-
let middle = value.withChannelValue(channel, (max - min) / 2).toString(
|
|
1018
|
-
let end = value.withChannelValue(channel, max).toString(
|
|
979
|
+
let start = value.withChannelValue(channel, min).toString("css");
|
|
980
|
+
let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
|
|
981
|
+
let end = value.withChannelValue(channel, max).toString("css");
|
|
1019
982
|
return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
|
|
1020
983
|
}
|
|
1021
|
-
case
|
|
1022
|
-
case
|
|
1023
|
-
case
|
|
1024
|
-
case
|
|
1025
|
-
case
|
|
1026
|
-
case
|
|
984
|
+
case "saturation":
|
|
985
|
+
case "brightness":
|
|
986
|
+
case "red":
|
|
987
|
+
case "green":
|
|
988
|
+
case "blue":
|
|
989
|
+
case "alpha":
|
|
1027
990
|
{
|
|
1028
|
-
let
|
|
1029
|
-
let
|
|
1030
|
-
return `linear-gradient(to ${to}, ${
|
|
991
|
+
let start1 = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
|
|
992
|
+
let end1 = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
|
|
993
|
+
return `linear-gradient(to ${to}, ${start1}, ${end1})`;
|
|
1031
994
|
}
|
|
1032
995
|
default:
|
|
1033
|
-
throw new Error(
|
|
996
|
+
throw new Error("Unknown color channel: " + channel);
|
|
1034
997
|
}
|
|
1035
998
|
};
|
|
1036
999
|
let forcedColorAdjustNoneStyle = {
|
|
1037
|
-
forcedColorAdjust:
|
|
1000
|
+
forcedColorAdjust: "none"
|
|
1038
1001
|
};
|
|
1039
1002
|
return {
|
|
1040
1003
|
trackProps: {
|
|
1041
|
-
|
|
1004
|
+
...(0, $7KHxM$mergeProps)(groupProps, trackProps),
|
|
1042
1005
|
style: {
|
|
1043
1006
|
...trackProps.style,
|
|
1044
1007
|
...forcedColorAdjustNoneStyle,
|
|
@@ -1059,23 +1022,33 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
|
|
|
1059
1022
|
}
|
|
1060
1023
|
|
|
1061
1024
|
|
|
1062
|
-
|
|
1025
|
+
/*
|
|
1026
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
1027
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1028
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
1029
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
1030
|
+
*
|
|
1031
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
1032
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
1033
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1034
|
+
* governing permissions and limitations under the License.
|
|
1035
|
+
*/
|
|
1063
1036
|
|
|
1064
1037
|
|
|
1065
1038
|
|
|
1066
1039
|
function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
1067
|
-
let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius ,
|
|
1068
|
-
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = $7KHxM$useGlobalListeners();
|
|
1040
|
+
let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , "aria-label": ariaLabel } = props;
|
|
1041
|
+
let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
|
|
1069
1042
|
let thumbRadius = (innerRadius + outerRadius) / 2;
|
|
1070
|
-
let focusInput = $7KHxM$useCallback(()=>{
|
|
1071
|
-
if (inputRef.current) $7KHxM$focusWithoutScrolling(inputRef.current);
|
|
1043
|
+
let focusInput = (0, $7KHxM$useCallback)(()=>{
|
|
1044
|
+
if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
|
|
1072
1045
|
}, [
|
|
1073
1046
|
inputRef
|
|
1074
1047
|
]);
|
|
1075
|
-
let stateRef = $7KHxM$useRef(null);
|
|
1048
|
+
let stateRef = (0, $7KHxM$useRef)(null);
|
|
1076
1049
|
stateRef.current = state;
|
|
1077
|
-
let currentPosition = $7KHxM$useRef(null);
|
|
1078
|
-
let { keyboardProps: keyboardProps } = $7KHxM$useKeyboard({
|
|
1050
|
+
let currentPosition = (0, $7KHxM$useRef)(null);
|
|
1051
|
+
let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
|
|
1079
1052
|
onKeyDown (e) {
|
|
1080
1053
|
// these are the cases that useMove doesn't handle
|
|
1081
1054
|
if (!/^(PageUp|PageDown)$/.test(e.key)) {
|
|
@@ -1087,11 +1060,11 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
|
1087
1060
|
// remember to set this and unset it so that onChangeEnd is fired
|
|
1088
1061
|
stateRef.current.setDragging(true);
|
|
1089
1062
|
switch(e.key){
|
|
1090
|
-
case
|
|
1063
|
+
case "PageUp":
|
|
1091
1064
|
e.preventDefault();
|
|
1092
1065
|
state.increment(stateRef.current.pageStep);
|
|
1093
1066
|
break;
|
|
1094
|
-
case
|
|
1067
|
+
case "PageDown":
|
|
1095
1068
|
e.preventDefault();
|
|
1096
1069
|
state.decrement(stateRef.current.pageStep);
|
|
1097
1070
|
break;
|
|
@@ -1108,7 +1081,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
|
1108
1081
|
if (currentPosition.current == null) currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
|
|
1109
1082
|
currentPosition.current.x += deltaX;
|
|
1110
1083
|
currentPosition.current.y += deltaY;
|
|
1111
|
-
if (pointerType ===
|
|
1084
|
+
if (pointerType === "keyboard") {
|
|
1112
1085
|
if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
|
|
1113
1086
|
else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
|
|
1114
1087
|
} else stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
|
|
@@ -1119,10 +1092,10 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
|
1119
1092
|
focusInput();
|
|
1120
1093
|
}
|
|
1121
1094
|
};
|
|
1122
|
-
let { moveProps: movePropsThumb } = $7KHxM$useMove(moveHandler);
|
|
1123
|
-
let currentPointer = $7KHxM$useRef(undefined);
|
|
1124
|
-
let isOnTrack = $7KHxM$useRef(false);
|
|
1125
|
-
let { moveProps: movePropsContainer } = $7KHxM$useMove({
|
|
1095
|
+
let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
|
|
1096
|
+
let currentPointer = (0, $7KHxM$useRef)(undefined);
|
|
1097
|
+
let isOnTrack = (0, $7KHxM$useRef)(false);
|
|
1098
|
+
let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
|
|
1126
1099
|
onMoveStart () {
|
|
1127
1100
|
if (isOnTrack.current) moveHandler.onMoveStart();
|
|
1128
1101
|
},
|
|
@@ -1138,26 +1111,26 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
|
1138
1111
|
currentPointer.current = id;
|
|
1139
1112
|
focusInput();
|
|
1140
1113
|
state.setDragging(true);
|
|
1141
|
-
if (typeof PointerEvent !==
|
|
1114
|
+
if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
|
|
1142
1115
|
else {
|
|
1143
|
-
addGlobalListener(window,
|
|
1144
|
-
addGlobalListener(window,
|
|
1116
|
+
addGlobalListener(window, "mouseup", onThumbUp, false);
|
|
1117
|
+
addGlobalListener(window, "touchend", onThumbUp, false);
|
|
1145
1118
|
}
|
|
1146
1119
|
}
|
|
1147
1120
|
};
|
|
1148
1121
|
let onThumbUp = (e)=>{
|
|
1149
|
-
var
|
|
1150
|
-
var
|
|
1151
|
-
let id = (
|
|
1122
|
+
var _e_changedTouches;
|
|
1123
|
+
var _e_pointerId;
|
|
1124
|
+
let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
|
|
1152
1125
|
if (id === currentPointer.current) {
|
|
1153
1126
|
focusInput();
|
|
1154
1127
|
state.setDragging(false);
|
|
1155
1128
|
currentPointer.current = undefined;
|
|
1156
1129
|
isOnTrack.current = false;
|
|
1157
|
-
if (typeof PointerEvent !==
|
|
1130
|
+
if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
|
|
1158
1131
|
else {
|
|
1159
|
-
removeGlobalListener(window,
|
|
1160
|
-
removeGlobalListener(window,
|
|
1132
|
+
removeGlobalListener(window, "mouseup", onThumbUp, false);
|
|
1133
|
+
removeGlobalListener(window, "touchend", onThumbUp, false);
|
|
1161
1134
|
}
|
|
1162
1135
|
}
|
|
1163
1136
|
};
|
|
@@ -1172,34 +1145,33 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
|
1172
1145
|
stateRef.current.setHueFromPoint(x, y, radius);
|
|
1173
1146
|
focusInput();
|
|
1174
1147
|
state.setDragging(true);
|
|
1175
|
-
if (typeof PointerEvent !==
|
|
1148
|
+
if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);
|
|
1176
1149
|
else {
|
|
1177
|
-
addGlobalListener(window,
|
|
1178
|
-
addGlobalListener(window,
|
|
1150
|
+
addGlobalListener(window, "mouseup", onTrackUp, false);
|
|
1151
|
+
addGlobalListener(window, "touchend", onTrackUp, false);
|
|
1179
1152
|
}
|
|
1180
1153
|
}
|
|
1181
1154
|
};
|
|
1182
1155
|
let onTrackUp = (e)=>{
|
|
1183
|
-
var
|
|
1184
|
-
var
|
|
1185
|
-
let id = (
|
|
1156
|
+
var _e_changedTouches;
|
|
1157
|
+
var _e_pointerId;
|
|
1158
|
+
let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
|
|
1186
1159
|
if (isOnTrack.current && id === currentPointer.current) {
|
|
1187
1160
|
isOnTrack.current = false;
|
|
1188
1161
|
currentPointer.current = undefined;
|
|
1189
1162
|
state.setDragging(false);
|
|
1190
1163
|
focusInput();
|
|
1191
|
-
if (typeof PointerEvent !==
|
|
1164
|
+
if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onTrackUp, false);
|
|
1192
1165
|
else {
|
|
1193
|
-
removeGlobalListener(window,
|
|
1194
|
-
removeGlobalListener(window,
|
|
1166
|
+
removeGlobalListener(window, "mouseup", onTrackUp, false);
|
|
1167
|
+
removeGlobalListener(window, "touchend", onTrackUp, false);
|
|
1195
1168
|
}
|
|
1196
1169
|
}
|
|
1197
1170
|
};
|
|
1198
|
-
let trackInteractions = isDisabled ? {
|
|
1199
|
-
|
|
1200
|
-
...typeof PointerEvent !== 'undefined' ? {
|
|
1171
|
+
let trackInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
|
|
1172
|
+
...typeof PointerEvent !== "undefined" ? {
|
|
1201
1173
|
onPointerDown: (e)=>{
|
|
1202
|
-
if (e.pointerType ===
|
|
1174
|
+
if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
|
|
1203
1175
|
onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
|
|
1204
1176
|
}
|
|
1205
1177
|
} : {
|
|
@@ -1212,38 +1184,37 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
|
1212
1184
|
}
|
|
1213
1185
|
}
|
|
1214
1186
|
}, movePropsContainer);
|
|
1215
|
-
let thumbInteractions = isDisabled ? {
|
|
1216
|
-
} : $7KHxM$mergeProps({
|
|
1187
|
+
let thumbInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
|
|
1217
1188
|
onMouseDown: (e)=>{
|
|
1218
1189
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
1219
1190
|
onThumbDown(undefined);
|
|
1220
1191
|
},
|
|
1221
1192
|
onPointerDown: (e)=>{
|
|
1222
|
-
if (e.pointerType ===
|
|
1193
|
+
if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
|
|
1223
1194
|
onThumbDown(e.pointerId);
|
|
1224
1195
|
},
|
|
1225
1196
|
onTouchStart: (e)=>{
|
|
1226
1197
|
onThumbDown(e.changedTouches[0].identifier);
|
|
1227
1198
|
}
|
|
1228
1199
|
}, keyboardProps, movePropsThumb);
|
|
1229
|
-
let { x:
|
|
1200
|
+
let { x: x , y: y } = state.getThumbPosition(thumbRadius);
|
|
1230
1201
|
// Provide a default aria-label if none is given
|
|
1231
|
-
let { locale: locale } = $7KHxM$useLocale();
|
|
1232
|
-
if (ariaLabel == null && props[
|
|
1233
|
-
let inputLabellingProps = $7KHxM$useLabels({
|
|
1202
|
+
let { locale: locale } = (0, $7KHxM$useLocale)();
|
|
1203
|
+
if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
|
|
1204
|
+
let inputLabellingProps = (0, $7KHxM$useLabels)({
|
|
1234
1205
|
...props,
|
|
1235
|
-
|
|
1206
|
+
"aria-label": ariaLabel
|
|
1236
1207
|
});
|
|
1237
|
-
let { minValue: minValue , maxValue: maxValue , step: step } = state.value.getChannelRange(
|
|
1208
|
+
let { minValue: minValue , maxValue: maxValue , step: step } = state.value.getChannelRange("hue");
|
|
1238
1209
|
let forcedColorAdjustNoneStyle = {
|
|
1239
|
-
forcedColorAdjust:
|
|
1210
|
+
forcedColorAdjust: "none"
|
|
1240
1211
|
};
|
|
1241
1212
|
return {
|
|
1242
1213
|
trackProps: {
|
|
1243
1214
|
...trackInteractions,
|
|
1244
1215
|
style: {
|
|
1245
|
-
position:
|
|
1246
|
-
touchAction:
|
|
1216
|
+
position: "relative",
|
|
1217
|
+
touchAction: "none",
|
|
1247
1218
|
width: outerRadius * 2,
|
|
1248
1219
|
height: outerRadius * 2,
|
|
1249
1220
|
background: `
|
|
@@ -1271,22 +1242,22 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
|
|
|
1271
1242
|
thumbProps: {
|
|
1272
1243
|
...thumbInteractions,
|
|
1273
1244
|
style: {
|
|
1274
|
-
position:
|
|
1275
|
-
left:
|
|
1276
|
-
top:
|
|
1277
|
-
transform: `translate(calc(${
|
|
1278
|
-
touchAction:
|
|
1245
|
+
position: "absolute",
|
|
1246
|
+
left: "50%",
|
|
1247
|
+
top: "50%",
|
|
1248
|
+
transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
|
|
1249
|
+
touchAction: "none",
|
|
1279
1250
|
...forcedColorAdjustNoneStyle
|
|
1280
1251
|
}
|
|
1281
1252
|
},
|
|
1282
|
-
inputProps: $7KHxM$mergeProps(inputLabellingProps, {
|
|
1283
|
-
type:
|
|
1253
|
+
inputProps: (0, $7KHxM$mergeProps)(inputLabellingProps, {
|
|
1254
|
+
type: "range",
|
|
1284
1255
|
min: String(minValue),
|
|
1285
1256
|
max: String(maxValue),
|
|
1286
1257
|
step: String(step),
|
|
1287
|
-
|
|
1258
|
+
"aria-valuetext": state.value.formatChannelValue("hue", locale),
|
|
1288
1259
|
disabled: isDisabled,
|
|
1289
|
-
value: `${state.value.getChannelValue(
|
|
1260
|
+
value: `${state.value.getChannelValue("hue")}`,
|
|
1290
1261
|
onChange: (e)=>{
|
|
1291
1262
|
state.setHue(parseFloat(e.target.value));
|
|
1292
1263
|
}
|
|
@@ -1299,7 +1270,17 @@ function $b4a0a4fdc900495e$var$circlePath(cx, cy, r) {
|
|
|
1299
1270
|
}
|
|
1300
1271
|
|
|
1301
1272
|
|
|
1302
|
-
|
|
1273
|
+
/*
|
|
1274
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
1275
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1276
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
1277
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
1278
|
+
*
|
|
1279
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
1280
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
1281
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1282
|
+
* governing permissions and limitations under the License.
|
|
1283
|
+
*/
|
|
1303
1284
|
|
|
1304
1285
|
|
|
1305
1286
|
|
|
@@ -1307,26 +1288,26 @@ function $b4a0a4fdc900495e$var$circlePath(cx, cy, r) {
|
|
|
1307
1288
|
function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
|
|
1308
1289
|
let { isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired } = props;
|
|
1309
1290
|
let { colorValue: colorValue , inputValue: inputValue , commit: commit , increment: increment , decrement: decrement , incrementToMax: incrementToMax , decrementToMin: decrementToMin } = state;
|
|
1310
|
-
let inputId = $7KHxM$useId();
|
|
1311
|
-
let { spinButtonProps: spinButtonProps } = $7KHxM$useSpinButton({
|
|
1291
|
+
let inputId = (0, $7KHxM$useId)();
|
|
1292
|
+
let { spinButtonProps: spinButtonProps } = (0, $7KHxM$useSpinButton)({
|
|
1312
1293
|
isDisabled: isDisabled,
|
|
1313
1294
|
isReadOnly: isReadOnly,
|
|
1314
1295
|
isRequired: isRequired,
|
|
1315
|
-
maxValue:
|
|
1296
|
+
maxValue: 0xFFFFFF,
|
|
1316
1297
|
minValue: 0,
|
|
1317
1298
|
onIncrement: increment,
|
|
1318
1299
|
onIncrementToMax: incrementToMax,
|
|
1319
1300
|
onDecrement: decrement,
|
|
1320
1301
|
onDecrementToMin: decrementToMin,
|
|
1321
1302
|
value: colorValue ? colorValue.toHexInt() : undefined,
|
|
1322
|
-
textValue: colorValue ? colorValue.toString(
|
|
1303
|
+
textValue: colorValue ? colorValue.toString("hex") : undefined
|
|
1323
1304
|
});
|
|
1324
|
-
let [focusWithin, setFocusWithin] = $7KHxM$useState(false);
|
|
1325
|
-
let { focusWithinProps: focusWithinProps } = $7KHxM$useFocusWithin({
|
|
1305
|
+
let [focusWithin, setFocusWithin] = (0, $7KHxM$useState)(false);
|
|
1306
|
+
let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
|
|
1326
1307
|
isDisabled: isDisabled,
|
|
1327
1308
|
onFocusWithinChange: setFocusWithin
|
|
1328
1309
|
});
|
|
1329
|
-
let onWheel = $7KHxM$useCallback((e)=>{
|
|
1310
|
+
let onWheel = (0, $7KHxM$useCallback)((e)=>{
|
|
1330
1311
|
if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
|
|
1331
1312
|
if (e.deltaY > 0) increment();
|
|
1332
1313
|
else if (e.deltaY < 0) decrement();
|
|
@@ -1336,31 +1317,31 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
|
|
|
1336
1317
|
]);
|
|
1337
1318
|
// If the input isn't supposed to receive input, disable scrolling.
|
|
1338
1319
|
let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
|
|
1339
|
-
$7KHxM$useScrollWheel({
|
|
1320
|
+
(0, $7KHxM$useScrollWheel)({
|
|
1340
1321
|
onScroll: onWheel,
|
|
1341
1322
|
isDisabled: scrollingDisabled
|
|
1342
1323
|
}, ref);
|
|
1343
1324
|
let onChange = (value)=>{
|
|
1344
1325
|
state.setInputValue(value);
|
|
1345
1326
|
};
|
|
1346
|
-
let { labelProps: labelProps , inputProps: inputProps } = $7KHxM$useFormattedTextField($7KHxM$mergeProps(props, {
|
|
1327
|
+
let { labelProps: labelProps , inputProps: inputProps } = (0, $7KHxM$useFormattedTextField)((0, $7KHxM$mergeProps)(props, {
|
|
1347
1328
|
id: inputId,
|
|
1348
1329
|
value: inputValue,
|
|
1349
1330
|
defaultValue: undefined,
|
|
1350
|
-
type:
|
|
1351
|
-
autoComplete:
|
|
1331
|
+
type: "text",
|
|
1332
|
+
autoComplete: "off",
|
|
1352
1333
|
onChange: onChange
|
|
1353
1334
|
}), state, ref);
|
|
1354
1335
|
return {
|
|
1355
1336
|
labelProps: labelProps,
|
|
1356
|
-
inputProps: $7KHxM$mergeProps(inputProps, spinButtonProps, focusWithinProps, {
|
|
1357
|
-
role:
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
autoCorrect:
|
|
1363
|
-
spellCheck:
|
|
1337
|
+
inputProps: (0, $7KHxM$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
|
|
1338
|
+
role: "textbox",
|
|
1339
|
+
"aria-valuemax": null,
|
|
1340
|
+
"aria-valuemin": null,
|
|
1341
|
+
"aria-valuenow": null,
|
|
1342
|
+
"aria-valuetext": null,
|
|
1343
|
+
autoCorrect: "off",
|
|
1344
|
+
spellCheck: "false",
|
|
1364
1345
|
onBlur: commit
|
|
1365
1346
|
})
|
|
1366
1347
|
};
|