pickit-color 1.0.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.
Files changed (14) hide show
  1. package/LICENSE.md +44 -0
  2. package/README.md +170 -0
  3. package/dist/colorpicker.css +881 -0
  4. package/dist/colorpicker.js +929 -0
  5. package/dist/colorpicker.min.css +1 -0
  6. package/dist/colorpicker.min.js +2 -0
  7. package/dist/esm/index.js +820 -0
  8. package/dist/esm/tsconfig.esm.tsbuildinfo +1 -0
  9. package/dist/index.d.ts +79 -0
  10. package/package.json +69 -0
  11. package/src/README.md +292 -0
  12. package/src/colorpicker.d.ts +52 -0
  13. package/src/colorpicker.styl +719 -0
  14. package/src/index.ts +1181 -0
package/dist/esm/index.js ADDED
@@ -0,0 +1,820 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ var __generator = (this && this.__generator) || function (thisArg, body) {
11
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
12
+ return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
13
+ function verb(n) { return function (v) { return step([n, v]); }; }
14
+ function step(op) {
15
+ if (f) throw new TypeError("Generator is already executing.");
16
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
17
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
18
+ if (y = 0, t) op = [op[0] & 2, t.value];
19
+ switch (op[0]) {
20
+ case 0: case 1: t = op; break;
21
+ case 4: _.label++; return { value: op[1], done: false };
22
+ case 5: _.label++; y = op[1]; op = [0]; continue;
23
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
24
+ default:
25
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
26
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
27
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
28
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
29
+ if (t[2]) _.ops.pop();
30
+ _.trys.pop(); continue;
31
+ }
32
+ op = body.call(thisArg, _);
33
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
34
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
35
+ }
36
+ };
37
+ var ColorPicker = (function () {
38
+ function ColorPicker(element, options) {
39
+ if (options === void 0) { options = {}; }
40
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
41
+ this.container = null;
42
+ this.colorBox = null;
43
+ this.hueSlider = null;
44
+ this.saturationSlider = null;
45
+ this.lightnessSlider = null;
46
+ this.alphaSlider = null;
47
+ this.hexInput = null;
48
+ this.currentColor = { h: 0, s: 100, l: 50, a: 1 };
49
+ this.isOpen = false;
50
+ this.saturationPointer = null;
51
+ this.compactButton = null;
52
+ this.inputPreview = null;
53
+ this.announceTimeout = null;
54
+ this.input =
55
+ typeof element === "string"
56
+ ? document.querySelector(element)
57
+ : element;
58
+ if (!this.input) {
59
+ throw new Error("ColorPicker: Invalid element selector");
60
+ }
61
+ var dataPresets = this.input.getAttribute("data-preset-colors");
62
+ var presetsFromAttr = dataPresets ? dataPresets.split(",").map(function (c) { return c.trim(); }) : null;
63
+ this.options = {
64
+ defaultColor: options.defaultColor || "#3b82f6",
65
+ format: options.format || "hex",
66
+ showAlpha: (_a = options.showAlpha) !== null && _a !== void 0 ? _a : false,
67
+ sliderMode: (_b = options.sliderMode) !== null && _b !== void 0 ? _b : false,
68
+ eyeDropper: (_c = options.eyeDropper) !== null && _c !== void 0 ? _c : false,
69
+ presetColors: options.presetColors || presetsFromAttr || [
70
+ "#ef4444",
71
+ "#f59e0b",
72
+ "#10b981",
73
+ "#3b82f6",
74
+ "#8b5cf6",
75
+ "#ec4899",
76
+ "#000000",
77
+ "#ffffff",
78
+ ],
79
+ presetLabels: options.presetLabels || [],
80
+ presetsOnly: (_d = options.presetsOnly) !== null && _d !== void 0 ? _d : false,
81
+ listView: (_e = options.listView) !== null && _e !== void 0 ? _e : false,
82
+ inline: (_f = options.inline) !== null && _f !== void 0 ? _f : false,
83
+ compact: (_g = options.compact) !== null && _g !== void 0 ? _g : false,
84
+ inputPreview: (_h = options.inputPreview) !== null && _h !== void 0 ? _h : false,
85
+ onChange: options.onChange || (function () { }),
86
+ onOpen: options.onOpen || (function () { }),
87
+ onClose: options.onClose || (function () { }),
88
+ appendTo: options.appendTo || document.body,
89
+ position: options.position || "auto",
90
+ closeOnSelect: (_j = options.closeOnSelect) !== null && _j !== void 0 ? _j : true,
91
+ ariaLabels: {
92
+ hue: ((_k = options.ariaLabels) === null || _k === void 0 ? void 0 : _k.hue) || "Hue",
93
+ saturation: ((_l = options.ariaLabels) === null || _l === void 0 ? void 0 : _l.saturation) || "Saturation and Lightness",
94
+ lightness: ((_m = options.ariaLabels) === null || _m === void 0 ? void 0 : _m.lightness) || "Lightness",
95
+ alpha: ((_o = options.ariaLabels) === null || _o === void 0 ? void 0 : _o.alpha) || "Alpha",
96
+ presets: ((_p = options.ariaLabels) === null || _p === void 0 ? void 0 : _p.presets) || "Preset colors",
97
+ },
98
+ };
99
+ this.init();
100
+ ColorPicker.instances.set(this.input, this);
101
+ }
102
+ ColorPicker.prototype.init = function () {
103
+ var initialColor = this.input.value || this.options.defaultColor;
104
+ this.currentColor = this.parseColor(initialColor);
105
+ if (this.options.compact) {
106
+ this.createCompactButton();
107
+ }
108
+ if (this.options.inputPreview && !this.options.compact) {
109
+ this.createInputPreview();
110
+ }
111
+ this.buildColorPicker();
112
+ this.setupEventListeners();
113
+ this.updateColorDisplay();
114
+ if (this.options.inline) {
115
+ this.open();
116
+ }
117
+ };
118
+ ColorPicker.prototype.buildColorPicker = function () {
119
+ var _this = this;
120
+ var _a;
121
+ this.container = document.createElement("div");
122
+ this.container.className = "colorpicker-container";
123
+ if (this.options.presetsOnly) {
124
+ this.container.classList.add("colorpicker-presets-only");
125
+ }
126
+ if (this.options.inline) {
127
+ this.container.classList.add("colorpicker-inline");
128
+ }
129
+ this.container.setAttribute("role", "dialog");
130
+ this.container.setAttribute("aria-label", "Color picker");
131
+ this.container.style.display = "none";
132
+ var content = "\n <div class=\"colorpicker-content\">\n ".concat(!this.options.presetsOnly ? "\n ".concat(!this.options.sliderMode ? "\n <div class=\"colorpicker-saturation\" \n role=\"slider\" \n aria-label=\"".concat(this.options.ariaLabels.saturation, "\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow=\"").concat(this.currentColor.s, "\"\n tabindex=\"0\">\n <div class=\"colorpicker-saturation-overlay\"></div>\n <div class=\"colorpicker-saturation-pointer\" role=\"presentation\"></div>\n </div>\n ") : '', "\n \n <div class=\"colorpicker-controls\">\n <div class=\"colorpicker-sliders").concat(this.options.sliderMode ? ' colorpicker-sliders-only' : '', "\">\n <div class=\"colorpicker-slider-group\">\n <label for=\"colorpicker-hue\">\n <span class=\"colorpicker-label\">").concat(this.options.ariaLabels.hue, "</span>\n </label>\n <input \n type=\"range\" \n id=\"colorpicker-hue\"\n class=\"colorpicker-slider colorpicker-hue-slider\"\n min=\"0\" \n max=\"360\" \n value=\"").concat(this.currentColor.h, "\"\n aria-label=\"").concat(this.options.ariaLabels.hue, "\"\n />\n </div>\n ").concat(this.options.sliderMode
133
+ ? "\n <div class=\"colorpicker-slider-group\">\n <label for=\"colorpicker-saturation\">\n <span class=\"colorpicker-label\">".concat(this.options.ariaLabels.saturation, "</span>\n </label>\n <input \n type=\"range\" \n id=\"colorpicker-saturation\"\n class=\"colorpicker-slider colorpicker-saturation-slider\"\n min=\"0\" \n max=\"100\" \n value=\"").concat(this.currentColor.s, "\"\n aria-label=\"").concat(this.options.ariaLabels.saturation, "\"\n />\n </div>\n <div class=\"colorpicker-slider-group\">\n <label for=\"colorpicker-lightness\">\n <span class=\"colorpicker-label\">").concat(this.options.ariaLabels.lightness, "</span>\n </label>\n <input \n type=\"range\" \n id=\"colorpicker-lightness\"\n class=\"colorpicker-slider colorpicker-lightness-slider\"\n min=\"0\" \n max=\"100\" \n value=\"").concat(this.currentColor.l, "\"\n aria-label=\"").concat(this.options.ariaLabels.lightness, "\"\n />\n </div>\n ")
134
+ : "", "\n ").concat(this.options.showAlpha
135
+ ? "\n <div class=\"colorpicker-slider-group\">\n <label for=\"colorpicker-alpha\">\n <span class=\"colorpicker-label\">".concat(this.options.ariaLabels.alpha, "</span>\n </label>\n <input \n type=\"range\" \n id=\"colorpicker-alpha\"\n class=\"colorpicker-slider colorpicker-alpha-slider\"\n min=\"0\" \n max=\"100\" \n value=\"").concat(this.currentColor.a * 100, "\"\n aria-label=\"").concat(this.options.ariaLabels.alpha, "\"\n />\n </div>\n ")
136
+ : "", "\n </div>\n \n <div class=\"colorpicker-preview\">\n <div class=\"colorpicker-preview-color\" role=\"presentation\"></div>\n </div>\n </div>\n \n <div class=\"colorpicker-input-wrapper\">\n <label for=\"colorpicker-hex\">\n <span class=\"colorpicker-sr-only\">Color value</span>\n </label>\n <div class=\"colorpicker-input-row\">\n <input \n type=\"text\" \n id=\"colorpicker-hex\"\n class=\"colorpicker-input\"\n placeholder=\"").concat(this.getPlaceholder(), "\"\n aria-label=\"Color value in ").concat(this.options.format, " format\"\n />\n ").concat(this.options.eyeDropper
137
+ ? "\n ".concat(this.supportsEyeDropper() ? "\n <button \n type=\"button\"\n class=\"colorpicker-eyedropper-btn\"\n aria-label=\"Pick color from screen\"\n title=\"Pick color from screen\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M2 22l1-1\"/>\n <path d=\"M8.5 16.5l-1-1\"/>\n <path d=\"M17 3l4 4\"/>\n <path d=\"M12 8l4 4\"/>\n <path d=\"M3 21l9-9\"/>\n <path d=\"M14.5 9.5l-1 1\"/>\n <path d=\"M20 14l-8 8\"/>\n </svg>\n </button>\n " : '', "\n <button \n type=\"button\"\n class=\"colorpicker-system-picker-btn\"\n aria-label=\"Open system color picker\"\n title=\"Open system color picker\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n <path d=\"M12 2v20\"/>\n <path d=\"M2 12h20\"/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n </svg>\n </button>\n <input \n type=\"color\"\n class=\"colorpicker-system-picker-input\"\n style=\"position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;\"\n />\n ")
138
+ : "", "\n </div>\n </div>\n ") : '', "\n \n ").concat(this.options.presetColors.length > 0
139
+ ? "\n <div class=\"colorpicker-presets".concat(this.options.listView ? ' colorpicker-presets-list' : '', "\" role=\"group\" aria-label=\"").concat(this.options.ariaLabels.presets, "\">\n ").concat(this.options.presetColors
140
+ .map(function (color, index) {
141
+ var label = _this.options.presetLabels[index] || '';
142
+ return _this.options.listView && label
143
+ ? "\n <button \n type=\"button\"\n class=\"colorpicker-preset colorpicker-preset-list-item\" \n data-color=\"".concat(color, "\"\n aria-label=\"Select color ").concat(label, "\"\n >\n <span class=\"colorpicker-preset-color\" style=\"background-color: ").concat(color, "\"></span>\n <span class=\"colorpicker-preset-label\">").concat(label, "</span>\n </button>\n ")
144
+ : "\n <button \n type=\"button\"\n class=\"colorpicker-preset\" \n style=\"background-color: ".concat(color, "\"\n data-color=\"").concat(color, "\"\n aria-label=\"Select color ").concat(label || color, "\"\n ></button>\n ");
145
+ })
146
+ .join(""), "\n </div>\n ")
147
+ : "", "\n </div>\n ");
148
+ this.container.innerHTML = content;
149
+ this.colorBox = this.container.querySelector(".colorpicker-saturation");
150
+ this.saturationPointer = this.container.querySelector(".colorpicker-saturation-pointer");
151
+ this.hueSlider = this.container.querySelector(".colorpicker-hue-slider");
152
+ this.saturationSlider = this.container.querySelector(".colorpicker-saturation-slider");
153
+ this.lightnessSlider = this.container.querySelector(".colorpicker-lightness-slider");
154
+ this.alphaSlider = this.container.querySelector(".colorpicker-alpha-slider");
155
+ this.hexInput = this.container.querySelector(".colorpicker-input");
156
+ if (this.options.inline) {
157
+ (_a = this.input.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.container, this.input.nextSibling);
158
+ this.input.style.display = "none";
159
+ }
160
+ else {
161
+ this.options.appendTo.appendChild(this.container);
162
+ }
163
+ };
164
+ ColorPicker.prototype.createCompactButton = function () {
165
+ var _this = this;
166
+ var _a;
167
+ this.input.style.position = "absolute";
168
+ this.input.style.opacity = "0";
169
+ this.input.style.pointerEvents = "none";
170
+ this.input.style.width = "0";
171
+ this.input.style.height = "0";
172
+ this.compactButton = document.createElement("button");
173
+ this.compactButton.type = "button";
174
+ this.compactButton.className = "colorpicker-compact-button";
175
+ this.compactButton.setAttribute("aria-label", "Select color");
176
+ this.compactButton.tabIndex = 0;
177
+ var preview = document.createElement("span");
178
+ preview.className = "colorpicker-compact-preview";
179
+ preview.style.backgroundColor = this.input.value || this.options.defaultColor;
180
+ this.compactButton.appendChild(preview);
181
+ (_a = this.input.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.compactButton, this.input.nextSibling);
182
+ this.compactButton.addEventListener("click", function (e) {
183
+ e.preventDefault();
184
+ e.stopPropagation();
185
+ _this.toggle();
186
+ });
187
+ this.compactButton.addEventListener("keydown", function (e) {
188
+ if (e.key === "Enter" || e.key === " ") {
189
+ e.preventDefault();
190
+ e.stopPropagation();
191
+ _this.toggle();
192
+ }
193
+ });
194
+ };
195
+ ColorPicker.prototype.createInputPreview = function () {
196
+ var _a;
197
+ var wrapper = document.createElement("div");
198
+ wrapper.className = "colorpicker-input-group";
199
+ this.inputPreview = document.createElement("span");
200
+ this.inputPreview.className = "colorpicker-input-preview";
201
+ this.inputPreview.style.backgroundColor = this.input.value || this.options.defaultColor;
202
+ (_a = this.input.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(wrapper, this.input);
203
+ wrapper.appendChild(this.inputPreview);
204
+ wrapper.appendChild(this.input);
205
+ this.input.classList.add("colorpicker-has-preview");
206
+ };
207
+ ColorPicker.prototype.supportsEyeDropper = function () {
208
+ return typeof window !== 'undefined' && 'EyeDropper' in window;
209
+ };
210
+ ColorPicker.prototype.openEyeDropper = function () {
211
+ return __awaiter(this, void 0, void 0, function () {
212
+ var eyeDropper, result, error_1;
213
+ return __generator(this, function (_a) {
214
+ switch (_a.label) {
215
+ case 0:
216
+ if (!this.supportsEyeDropper()) {
217
+ return [2];
218
+ }
219
+ _a.label = 1;
220
+ case 1:
221
+ _a.trys.push([1, 3, , 4]);
222
+ eyeDropper = new EyeDropper();
223
+ return [4, eyeDropper.open()];
224
+ case 2:
225
+ result = _a.sent();
226
+ if (result.sRGBHex) {
227
+ this.currentColor = this.parseColor(result.sRGBHex);
228
+ this.input.value = result.sRGBHex;
229
+ this.updateColorDisplay();
230
+ this.options.onChange(result.sRGBHex);
231
+ }
232
+ return [3, 4];
233
+ case 3:
234
+ error_1 = _a.sent();
235
+ if (error_1.name !== 'AbortError') {
236
+ console.error('EyeDropper error:', error_1);
237
+ }
238
+ return [3, 4];
239
+ case 4: return [2];
240
+ }
241
+ });
242
+ });
243
+ };
244
+ ColorPicker.prototype.setupEventListeners = function () {
245
+ var _this = this;
246
+ var _a, _b, _c, _d;
247
+ if (!this.options.compact) {
248
+ this.input.addEventListener("click", function () {
249
+ if (!_this.options.inline) {
250
+ _this.toggle();
251
+ }
252
+ });
253
+ this.input.addEventListener("keydown", function (e) {
254
+ if ((e.key === "Enter" || e.key === " ") && !_this.options.inline) {
255
+ e.preventDefault();
256
+ _this.toggle();
257
+ }
258
+ });
259
+ }
260
+ this.input.addEventListener("change", function () {
261
+ _this.currentColor = _this.parseColor(_this.input.value);
262
+ _this.updateColorDisplay();
263
+ });
264
+ if (this.hueSlider) {
265
+ this.hueSlider.addEventListener("input", function (e) {
266
+ _this.currentColor.h = parseInt(e.target.value);
267
+ _this.updateColorDisplay();
268
+ _this.announceColorChange();
269
+ });
270
+ }
271
+ if (this.saturationSlider) {
272
+ this.saturationSlider.addEventListener("input", function (e) {
273
+ _this.currentColor.s = parseInt(e.target.value);
274
+ _this.updateColorDisplay();
275
+ _this.announceColorChange();
276
+ });
277
+ }
278
+ if (this.lightnessSlider) {
279
+ this.lightnessSlider.addEventListener("input", function (e) {
280
+ _this.currentColor.l = parseInt(e.target.value);
281
+ _this.updateColorDisplay();
282
+ _this.announceColorChange();
283
+ });
284
+ }
285
+ if (this.alphaSlider) {
286
+ this.alphaSlider.addEventListener("input", function (e) {
287
+ _this.currentColor.a =
288
+ parseInt(e.target.value) / 100;
289
+ _this.updateColorDisplay();
290
+ _this.announceColorChange();
291
+ });
292
+ }
293
+ if (this.colorBox) {
294
+ this.colorBox.addEventListener("mousedown", function (e) {
295
+ return _this.onSaturationMouseDown(e);
296
+ });
297
+ this.colorBox.addEventListener("keydown", function (e) {
298
+ return _this.onSaturationKeyDown(e);
299
+ });
300
+ }
301
+ if (this.hexInput) {
302
+ this.hexInput.addEventListener("input", function (e) {
303
+ var value = e.target.value.trim();
304
+ if (_this.isValidColor(value)) {
305
+ _this.currentColor = _this.parseColor(value);
306
+ _this.updateColorDisplay(false);
307
+ }
308
+ });
309
+ }
310
+ var presets = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".colorpicker-preset");
311
+ presets === null || presets === void 0 ? void 0 : presets.forEach(function (preset) {
312
+ preset.addEventListener("click", function (e) {
313
+ var color = e.currentTarget.dataset.color;
314
+ _this.currentColor = _this.parseColor(color);
315
+ _this.updateColorDisplay();
316
+ if (_this.options.closeOnSelect) {
317
+ _this.close();
318
+ }
319
+ });
320
+ });
321
+ var eyeDropperBtn = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector(".colorpicker-eyedropper-btn");
322
+ if (eyeDropperBtn) {
323
+ eyeDropperBtn.addEventListener("click", function (e) { return __awaiter(_this, void 0, void 0, function () {
324
+ return __generator(this, function (_a) {
325
+ switch (_a.label) {
326
+ case 0:
327
+ e.preventDefault();
328
+ e.stopPropagation();
329
+ return [4, this.openEyeDropper()];
330
+ case 1:
331
+ _a.sent();
332
+ return [2];
333
+ }
334
+ });
335
+ }); });
336
+ }
337
+ var systemPickerBtn = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector(".colorpicker-system-picker-btn");
338
+ var systemPickerInput = (_d = this.container) === null || _d === void 0 ? void 0 : _d.querySelector(".colorpicker-system-picker-input");
339
+ if (systemPickerBtn && systemPickerInput) {
340
+ systemPickerInput.value = this.formatColor(this.currentColor).substring(0, 7);
341
+ systemPickerBtn.addEventListener("click", function (e) {
342
+ e.preventDefault();
343
+ e.stopPropagation();
344
+ systemPickerInput.click();
345
+ });
346
+ systemPickerInput.addEventListener("change", function () {
347
+ var color = systemPickerInput.value;
348
+ _this.currentColor = _this.parseColor(color);
349
+ _this.input.value = color;
350
+ _this.updateColorDisplay();
351
+ _this.options.onChange(color);
352
+ });
353
+ }
354
+ if (!this.options.inline) {
355
+ document.addEventListener("mousedown", function (e) {
356
+ var _a;
357
+ if (_this.isOpen &&
358
+ !((_a = _this.container) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
359
+ e.target !== _this.input) {
360
+ _this.close();
361
+ }
362
+ });
363
+ }
364
+ document.addEventListener("keydown", function (e) {
365
+ if (e.key === "Escape" && _this.isOpen && !_this.options.inline) {
366
+ _this.close();
367
+ _this.input.focus();
368
+ }
369
+ });
370
+ };
371
+ ColorPicker.prototype.onSaturationMouseDown = function (e) {
372
+ var _this = this;
373
+ e.preventDefault();
374
+ this.updateSaturationFromMouse(e);
375
+ var onMouseMove = function (e) {
376
+ _this.updateSaturationFromMouse(e);
377
+ };
378
+ var onMouseUp = function () {
379
+ document.removeEventListener("mousemove", onMouseMove);
380
+ document.removeEventListener("mouseup", onMouseUp);
381
+ };
382
+ document.addEventListener("mousemove", onMouseMove);
383
+ document.addEventListener("mouseup", onMouseUp);
384
+ };
385
+ ColorPicker.prototype.updateSaturationFromMouse = function (e) {
386
+ if (!this.colorBox)
387
+ return;
388
+ var rect = this.colorBox.getBoundingClientRect();
389
+ var x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
390
+ var y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
391
+ this.currentColor.s = (x / rect.width) * 100;
392
+ this.currentColor.l = 100 - (y / rect.height) * 100;
393
+ this.updateColorDisplay();
394
+ this.announceColorChange();
395
+ };
396
+ ColorPicker.prototype.onSaturationKeyDown = function (e) {
397
+ var step = e.shiftKey ? 10 : 1;
398
+ var handled = false;
399
+ switch (e.key) {
400
+ case "ArrowRight":
401
+ this.currentColor.s = Math.min(100, this.currentColor.s + step);
402
+ handled = true;
403
+ break;
404
+ case "ArrowLeft":
405
+ this.currentColor.s = Math.max(0, this.currentColor.s - step);
406
+ handled = true;
407
+ break;
408
+ case "ArrowUp":
409
+ this.currentColor.l = Math.min(100, this.currentColor.l + step);
410
+ handled = true;
411
+ break;
412
+ case "ArrowDown":
413
+ this.currentColor.l = Math.max(0, this.currentColor.l - step);
414
+ handled = true;
415
+ break;
416
+ }
417
+ if (handled) {
418
+ e.preventDefault();
419
+ this.updateColorDisplay();
420
+ this.announceColorChange();
421
+ }
422
+ };
423
+ ColorPicker.prototype.updateColorDisplay = function (updateInput) {
424
+ var _a;
425
+ if (updateInput === void 0) { updateInput = true; }
426
+ if (this.colorBox) {
427
+ this.colorBox.style.backgroundColor = "hsl(".concat(this.currentColor.h, ", 100%, 50%)");
428
+ }
429
+ if (this.saturationPointer && this.colorBox) {
430
+ var x = (this.currentColor.s / 100) * 100;
431
+ var y = (1 - this.currentColor.l / 100) * 100;
432
+ this.saturationPointer.style.left = "".concat(x, "%");
433
+ this.saturationPointer.style.top = "".concat(y, "%");
434
+ }
435
+ if (this.saturationSlider) {
436
+ this.saturationSlider.style.background = "linear-gradient(to right, hsl(".concat(this.currentColor.h, ", 0%, 50%), hsl(").concat(this.currentColor.h, ", 100%, 50%))");
437
+ }
438
+ if (this.lightnessSlider) {
439
+ this.lightnessSlider.style.background = "linear-gradient(to right, hsl(".concat(this.currentColor.h, ", ").concat(this.currentColor.s, "%, 0%), hsl(").concat(this.currentColor.h, ", ").concat(this.currentColor.s, "%, 50%), hsl(").concat(this.currentColor.h, ", ").concat(this.currentColor.s, "%, 100%))");
440
+ }
441
+ var preview = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector(".colorpicker-preview-color");
442
+ if (preview) {
443
+ preview.style.backgroundColor = this.toHSLString(this.currentColor);
444
+ }
445
+ if (this.hexInput && updateInput) {
446
+ this.hexInput.value = this.formatColor(this.currentColor);
447
+ }
448
+ if (this.hueSlider) {
449
+ this.hueSlider.value = String(this.currentColor.h);
450
+ }
451
+ if (this.saturationSlider) {
452
+ this.saturationSlider.value = String(this.currentColor.s);
453
+ }
454
+ if (this.lightnessSlider) {
455
+ this.lightnessSlider.value = String(this.currentColor.l);
456
+ }
457
+ if (this.alphaSlider) {
458
+ this.alphaSlider.value = String(this.currentColor.a * 100);
459
+ }
460
+ if (updateInput) {
461
+ this.input.value = this.formatColor(this.currentColor);
462
+ this.options.onChange(this.input.value);
463
+ if (this.compactButton) {
464
+ var preview_1 = this.compactButton.querySelector('.colorpicker-compact-preview');
465
+ if (preview_1) {
466
+ preview_1.style.backgroundColor = this.toHSLString(this.currentColor);
467
+ }
468
+ }
469
+ if (this.inputPreview) {
470
+ this.inputPreview.style.backgroundColor = this.toHSLString(this.currentColor);
471
+ }
472
+ }
473
+ };
474
+ ColorPicker.prototype.formatColor = function (color) {
475
+ switch (this.options.format) {
476
+ case "hsl":
477
+ return this.toHSLString(color);
478
+ case "rgb":
479
+ return this.toRGBString(this.hslToRgb(color));
480
+ case "hex":
481
+ default:
482
+ return this.toHex(color);
483
+ }
484
+ };
485
+ ColorPicker.prototype.getPlaceholder = function () {
486
+ switch (this.options.format) {
487
+ case "hsl":
488
+ return this.options.showAlpha ? "hsla(0, 0%, 0%, 1)" : "hsl(0, 0%, 0%)";
489
+ case "rgb":
490
+ return this.options.showAlpha ? "rgba(0, 0, 0, 1)" : "rgb(0, 0, 0)";
491
+ case "hex":
492
+ default:
493
+ return "#000000";
494
+ }
495
+ };
496
+ ColorPicker.prototype.parseColor = function (colorString) {
497
+ colorString = colorString.trim();
498
+ if (colorString.startsWith("#")) {
499
+ return this.hexToHsl(colorString);
500
+ }
501
+ var rgbMatch = colorString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
502
+ if (rgbMatch) {
503
+ var rgb = {
504
+ r: parseInt(rgbMatch[1]),
505
+ g: parseInt(rgbMatch[2]),
506
+ b: parseInt(rgbMatch[3]),
507
+ a: rgbMatch[4] ? parseFloat(rgbMatch[4]) : 1,
508
+ };
509
+ return this.rgbToHsl(rgb);
510
+ }
511
+ var hslMatch = colorString.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/);
512
+ if (hslMatch) {
513
+ return {
514
+ h: parseInt(hslMatch[1]),
515
+ s: parseInt(hslMatch[2]),
516
+ l: parseInt(hslMatch[3]),
517
+ a: hslMatch[4] ? parseFloat(hslMatch[4]) : 1,
518
+ };
519
+ }
520
+ return this.currentColor;
521
+ };
522
+ ColorPicker.prototype.hexToHsl = function (hex) {
523
+ hex = hex.replace("#", "");
524
+ var r = parseInt(hex.substring(0, 2), 16) / 255;
525
+ var g = parseInt(hex.substring(2, 4), 16) / 255;
526
+ var b = parseInt(hex.substring(4, 6), 16) / 255;
527
+ var a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;
528
+ return this.rgbToHsl({ r: r * 255, g: g * 255, b: b * 255, a: a });
529
+ };
530
+ ColorPicker.prototype.rgbToHsl = function (rgb) {
531
+ var r = rgb.r / 255;
532
+ var g = rgb.g / 255;
533
+ var b = rgb.b / 255;
534
+ var max = Math.max(r, g, b);
535
+ var min = Math.min(r, g, b);
536
+ var h = 0;
537
+ var s = 0;
538
+ var l = (max + min) / 2;
539
+ if (max !== min) {
540
+ var d = max - min;
541
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
542
+ switch (max) {
543
+ case r:
544
+ h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
545
+ break;
546
+ case g:
547
+ h = ((b - r) / d + 2) / 6;
548
+ break;
549
+ case b:
550
+ h = ((r - g) / d + 4) / 6;
551
+ break;
552
+ }
553
+ }
554
+ return {
555
+ h: Math.round(h * 360),
556
+ s: Math.round(s * 100),
557
+ l: Math.round(l * 100),
558
+ a: rgb.a,
559
+ };
560
+ };
561
+ ColorPicker.prototype.hslToRgb = function (hsl) {
562
+ var h = hsl.h / 360;
563
+ var s = hsl.s / 100;
564
+ var l = hsl.l / 100;
565
+ var r, g, b;
566
+ if (s === 0) {
567
+ r = g = b = l;
568
+ }
569
+ else {
570
+ var hue2rgb = function (p, q, t) {
571
+ if (t < 0)
572
+ t += 1;
573
+ if (t > 1)
574
+ t -= 1;
575
+ if (t < 1 / 6)
576
+ return p + (q - p) * 6 * t;
577
+ if (t < 1 / 2)
578
+ return q;
579
+ if (t < 2 / 3)
580
+ return p + (q - p) * (2 / 3 - t) * 6;
581
+ return p;
582
+ };
583
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
584
+ var p = 2 * l - q;
585
+ r = hue2rgb(p, q, h + 1 / 3);
586
+ g = hue2rgb(p, q, h);
587
+ b = hue2rgb(p, q, h - 1 / 3);
588
+ }
589
+ return {
590
+ r: Math.round(r * 255),
591
+ g: Math.round(g * 255),
592
+ b: Math.round(b * 255),
593
+ a: hsl.a,
594
+ };
595
+ };
596
+ ColorPicker.prototype.toHex = function (hsl) {
597
+ var rgb = this.hslToRgb(hsl);
598
+ var toHex = function (n) { return n.toString(16).padStart(2, "0"); };
599
+ if (this.options.showAlpha && hsl.a < 1) {
600
+ var alpha = Math.round(hsl.a * 255);
601
+ return "#".concat(toHex(rgb.r)).concat(toHex(rgb.g)).concat(toHex(rgb.b)).concat(toHex(alpha));
602
+ }
603
+ return "#".concat(toHex(rgb.r)).concat(toHex(rgb.g)).concat(toHex(rgb.b));
604
+ };
605
+ ColorPicker.prototype.toHSLString = function (hsl) {
606
+ if (this.options.showAlpha && hsl.a < 1) {
607
+ return "hsla(".concat(hsl.h, ", ").concat(hsl.s, "%, ").concat(hsl.l, "%, ").concat(hsl.a, ")");
608
+ }
609
+ return "hsl(".concat(hsl.h, ", ").concat(hsl.s, "%, ").concat(hsl.l, "%)");
610
+ };
611
+ ColorPicker.prototype.toRGBString = function (rgb) {
612
+ if (this.options.showAlpha && rgb.a < 1) {
613
+ return "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a, ")");
614
+ }
615
+ return "rgb(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ")");
616
+ };
617
+ ColorPicker.prototype.isValidHex = function (hex) {
618
+ return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(hex);
619
+ };
620
+ ColorPicker.prototype.isValidColor = function (value) {
621
+ if (this.isValidHex(value))
622
+ return true;
623
+ if (/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(value))
624
+ return true;
625
+ if (/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(value))
626
+ return true;
627
+ return false;
628
+ };
629
+ ColorPicker.prototype.announceColorChange = function () {
630
+ var _this = this;
631
+ if (!this.announceTimeout) {
632
+ this.announceTimeout = setTimeout(function () {
633
+ var _a;
634
+ var announcement = document.createElement("div");
635
+ announcement.setAttribute("role", "status");
636
+ announcement.setAttribute("aria-live", "polite");
637
+ announcement.className = "colorpicker-sr-only";
638
+ announcement.textContent = "Color changed to ".concat(_this.formatColor(_this.currentColor));
639
+ (_a = _this.container) === null || _a === void 0 ? void 0 : _a.appendChild(announcement);
640
+ setTimeout(function () { return announcement.remove(); }, 1000);
641
+ _this.announceTimeout = null;
642
+ }, 500);
643
+ }
644
+ };
645
+ ColorPicker.prototype.open = function () {
646
+ var _this = this;
647
+ if (this.isOpen || !this.container)
648
+ return;
649
+ this.isOpen = true;
650
+ this.container.style.display = "block";
651
+ if (!this.options.inline) {
652
+ this.positionPicker();
653
+ }
654
+ this.options.onOpen();
655
+ setTimeout(function () {
656
+ var _a;
657
+ (_a = _this.colorBox) === null || _a === void 0 ? void 0 : _a.focus();
658
+ }, 0);
659
+ };
660
+ ColorPicker.prototype.close = function () {
661
+ if (!this.isOpen || !this.container)
662
+ return;
663
+ this.isOpen = false;
664
+ if (!this.options.inline) {
665
+ this.container.style.display = "none";
666
+ }
667
+ this.options.onClose();
668
+ };
669
+ ColorPicker.prototype.toggle = function () {
670
+ if (this.isOpen) {
671
+ this.close();
672
+ }
673
+ else {
674
+ this.open();
675
+ }
676
+ };
677
+ ColorPicker.prototype.positionPicker = function () {
678
+ if (!this.container)
679
+ return;
680
+ var inputRect = this.input.getBoundingClientRect();
681
+ var containerRect = this.container.getBoundingClientRect();
682
+ var viewportHeight = window.innerHeight;
683
+ var top = inputRect.bottom + window.scrollY + 4;
684
+ var left = inputRect.left + window.scrollX;
685
+ if (this.options.position === "auto") {
686
+ var spaceBelow = viewportHeight - inputRect.bottom;
687
+ var spaceAbove = inputRect.top;
688
+ if (spaceBelow < containerRect.height && spaceAbove > spaceBelow) {
689
+ top = inputRect.top + window.scrollY - containerRect.height - 4;
690
+ }
691
+ }
692
+ else if (this.options.position === "above") {
693
+ top = inputRect.top + window.scrollY - containerRect.height - 4;
694
+ }
695
+ this.container.style.position = "absolute";
696
+ this.container.style.top = "".concat(top, "px");
697
+ this.container.style.left = "".concat(left, "px");
698
+ this.container.style.zIndex = "9999";
699
+ };
700
+ ColorPicker.prototype.setColor = function (color) {
701
+ this.currentColor = this.parseColor(color);
702
+ this.updateColorDisplay();
703
+ };
704
+ ColorPicker.prototype.getColor = function () {
705
+ return this.formatColor(this.currentColor);
706
+ };
707
+ ColorPicker.prototype.destroy = function () {
708
+ var _a, _b, _c;
709
+ (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
710
+ (_b = this.compactButton) === null || _b === void 0 ? void 0 : _b.remove();
711
+ if (this.options.compact && this.input) {
712
+ this.input.style.position = "";
713
+ this.input.style.opacity = "";
714
+ this.input.style.pointerEvents = "";
715
+ this.input.style.width = "";
716
+ this.input.style.height = "";
717
+ }
718
+ if (this.options.inputPreview && this.input) {
719
+ this.input.classList.remove("colorpicker-has-preview");
720
+ var wrapper = this.input.parentElement;
721
+ if (wrapper && wrapper.classList.contains("colorpicker-input-group")) {
722
+ (_c = wrapper.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(this.input, wrapper);
723
+ wrapper.remove();
724
+ }
725
+ }
726
+ ColorPicker.instances.delete(this.input);
727
+ };
728
+ ColorPicker.getInstance = function (element) {
729
+ return ColorPicker.instances.get(element);
730
+ };
731
+ ColorPicker.instances = new Map();
732
+ return ColorPicker;
733
+ }());
734
+ export { ColorPicker };
735
+ export default function colorpicker(selector, options) {
736
+ return new ColorPicker(selector, options);
737
+ }
738
+ export function initColorPickers(root) {
739
+ if (root === void 0) { root = document; }
740
+ var pickers = [];
741
+ var elements = root.querySelectorAll('[data-colorpicker], .colorpicker, input[type="color"][data-format]');
742
+ elements.forEach(function (element) {
743
+ if (ColorPicker.getInstance(element)) {
744
+ return;
745
+ }
746
+ var dataset = element.dataset;
747
+ var options = {};
748
+ if (dataset.colorpicker) {
749
+ var config = dataset.colorpicker;
750
+ var parts = config.split(/[,;]/);
751
+ parts.forEach(function (part) {
752
+ var _a = part.split(':').map(function (s) { return s.trim(); }), key = _a[0], value = _a[1];
753
+ switch (key) {
754
+ case 'format':
755
+ if (value === 'hex' || value === 'rgb' || value === 'hsl') {
756
+ options.format = value;
757
+ }
758
+ break;
759
+ case 'alpha':
760
+ case 'showAlpha':
761
+ options.showAlpha = value === 'true' || value === '1';
762
+ break;
763
+ case 'compact':
764
+ options.compact = value === 'true' || value === '1';
765
+ break;
766
+ case 'inline':
767
+ options.inline = value === 'true' || value === '1';
768
+ break;
769
+ case 'presets':
770
+ options.presetsOnly = value === 'true' || value === '1';
771
+ break;
772
+ case 'list':
773
+ options.listView = value === 'true' || value === '1';
774
+ break;
775
+ case 'sliderMode':
776
+ options.sliderMode = value === 'true' || value === '1';
777
+ break;
778
+ case 'eyeDropper':
779
+ options.eyeDropper = value === 'true' || value === '1';
780
+ break;
781
+ case 'inputPreview':
782
+ options.inputPreview = value === 'true' || value === '1';
783
+ break;
784
+ }
785
+ });
786
+ }
787
+ if (dataset.format && (dataset.format === 'hex' || dataset.format === 'rgb' || dataset.format === 'hsl')) {
788
+ options.format = dataset.format;
789
+ }
790
+ if (dataset.alpha !== undefined) {
791
+ options.showAlpha = dataset.alpha === 'true' || dataset.alpha === '1';
792
+ }
793
+ if (dataset.compact !== undefined) {
794
+ options.compact = dataset.compact === 'true' || dataset.compact === '1';
795
+ }
796
+ if (dataset.inline !== undefined) {
797
+ options.inline = dataset.inline === 'true' || dataset.inline === '1';
798
+ }
799
+ if (dataset.presetsOnly !== undefined) {
800
+ options.presetsOnly = dataset.presetsOnly === 'true' || dataset.presetsOnly === '1';
801
+ }
802
+ if (dataset.listView !== undefined) {
803
+ options.listView = dataset.listView === 'true' || dataset.listView === '1';
804
+ }
805
+ if (dataset.defaultColor) {
806
+ options.defaultColor = dataset.defaultColor;
807
+ }
808
+ var picker = new ColorPicker(element, options);
809
+ pickers.push(picker);
810
+ });
811
+ return pickers;
812
+ }
813
+ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
814
+ if (document.readyState === 'loading') {
815
+ document.addEventListener('DOMContentLoaded', function () { return initColorPickers(); });
816
+ }
817
+ else {
818
+ initColorPickers();
819
+ }
820
+ }