pickit-color 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -120,12 +120,54 @@ const picker = colorpicker('#myInput', {
120
120
  <input data-colorpicker="format:hex,target:#preview-box,property:color">
121
121
  ```
122
122
 
123
+ ### Multilanguage Support
124
+
125
+ ```html
126
+ <!-- Auto-detects from <html lang="de"> or browser language -->
127
+ <input data-colorpicker="format:hex">
128
+
129
+ <!-- Explicitly set language -->
130
+ <input data-colorpicker="format:hex,language:de">
131
+ ```
132
+
133
+ **Built-in Languages:** `en` (English), `de` (Deutsch), `sl` (Slovenščina)
134
+
135
+ **Contributing Translations:**
136
+
137
+ 1. Create a file in `src/l10n/` (e.g., `fr.ts`)
138
+ 2. Copy the `ColorPickerLanguage` interface structure
139
+ 3. Export in `src/l10n/index.ts`
140
+ 4. Submit a PR!
141
+
142
+ See [TRANSLATIONS.md](TRANSLATIONS.md) for the complete guide.
143
+
144
+ **Runtime Translation:**
145
+
146
+ ```javascript
147
+ import colorpicker, { ColorPicker } from 'pickit-color';
148
+
149
+ // Add French translation
150
+ ColorPicker.addTranslation('fr', {
151
+ hue: 'Teinte',
152
+ saturation: 'Saturation et luminosité',
153
+ lightness: 'Luminosité',
154
+ alpha: 'Alpha',
155
+ presets: 'Couleurs prédéfinies',
156
+ eyeDropper: 'Pipette à couleurs',
157
+ systemPicker: 'Sélecteur système'
158
+ });
159
+
160
+ // Check available languages
161
+ console.log(ColorPicker.getAvailableLanguages()); // ['en', 'de', 'sl', 'fr']
162
+ ```
163
+
123
164
  ## ⚙️ Options
124
165
 
125
166
  | Option | Type | Default | Description |
126
167
  |--------|------|---------|-------------|
127
168
  | `previewTarget` | `string` | `''` | CSS selector of element to update with color |
128
169
  | `previewProperty` | `string` | `'background-color'` | CSS property to update on target element |
170
+ | `language` | `string` | `auto` | UI language: `en`, `de`, `sl` or custom (auto-detects from HTML or browser) |
129
171
  | `format` | `string` | `'hex'` | Color format: `hex`, `hex8`, `rgb`, `rgba`, `hsl`, `hsla` |
130
172
  | `showAlpha` | `boolean` | `false` | Show alpha/transparency slider |
131
173
  | `defaultColor` | `string` | `'#3b82f6'` | Initial color if input is empty |
@@ -1,4 +1,4 @@
1
- /* Pickit Color v1.1.0, @license Donationware */
1
+ /* Pickit Color v1.2.0, @license Donationware */
2
2
  (function (global, factory) {
3
3
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
4
4
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -63,11 +63,82 @@
63
63
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
64
64
  };
65
65
 
66
+ var en = {
67
+ hue: "Hue",
68
+ saturation: "Saturation and Lightness",
69
+ lightness: "Lightness",
70
+ alpha: "Alpha",
71
+ presets: "Preset colors",
72
+ eyeDropper: "Pick color from screen",
73
+ systemPicker: "System color picker"
74
+ };
75
+
76
+ var de = {
77
+ hue: "Farbton",
78
+ saturation: "Sättigung und Helligkeit",
79
+ lightness: "Helligkeit",
80
+ alpha: "Transparenz",
81
+ presets: "Vordefinierte Farben",
82
+ eyeDropper: "Farbe vom Bildschirm aufnehmen",
83
+ systemPicker: "System-Farbwähler"
84
+ };
85
+
86
+ var sl = {
87
+ hue: "Odtenek",
88
+ saturation: "Nasičenost in svetlost",
89
+ lightness: "Svetlost",
90
+ alpha: "Prosojnost",
91
+ presets: "Prednastavljene barve",
92
+ eyeDropper: "Izberi barvo z zaslona",
93
+ systemPicker: "Sistemski izbirnik barv"
94
+ };
95
+
96
+ /**
97
+ * Pickit Color - Language Files
98
+ *
99
+ * To contribute a translation:
100
+ * 1. Copy en.ts or any existing language file
101
+ * 2. Translate all strings
102
+ * 3. Export your language in this file
103
+ * 4. Submit a PR!
104
+ */
105
+ // Example for contributors:
106
+ // export { default as fr } from './fr';
107
+ // export { default as es } from './es';
108
+
109
+ var languages = /*#__PURE__*/Object.freeze({
110
+ __proto__: null,
111
+ en: en,
112
+ de: de,
113
+ sl: sl
114
+ });
115
+
66
116
  /**
67
117
  * Pickit Color Picker
68
118
  * An accessible, lightweight color picker inspired by flatpickr
69
119
  * Supports HSL, RGB, HEX formats with keyboard navigation
70
120
  */
121
+ // Initialize translations with built-in languages
122
+ var translations = {
123
+ en: en,
124
+ de: de,
125
+ sl: sl
126
+ };
127
+ function detectLanguage() {
128
+ // Try HTML lang attribute
129
+ var htmlLang = document.documentElement.lang;
130
+ if (htmlLang) {
131
+ var lang = htmlLang.split('-')[0].toLowerCase();
132
+ if (translations[lang])
133
+ return lang;
134
+ }
135
+ // Try browser language
136
+ var browserLang = navigator.language.split('-')[0].toLowerCase();
137
+ if (translations[browserLang])
138
+ return browserLang;
139
+ // Default to English
140
+ return 'en';
141
+ }
71
142
  var ColorPicker = /** @class */ (function () {
72
143
  function ColorPicker(element, options) {
73
144
  if (options === void 0) { options = {}; }
@@ -119,6 +190,7 @@
119
190
  inputPreview: (_h = options.inputPreview) !== null && _h !== void 0 ? _h : false,
120
191
  previewTarget: options.previewTarget || "",
121
192
  previewProperty: options.previewProperty || "background-color",
193
+ language: options.language || detectLanguage(),
122
194
  onChange: options.onChange || (function () { }),
123
195
  onOpen: options.onOpen || (function () { }),
124
196
  onClose: options.onClose || (function () { }),
@@ -126,16 +198,41 @@
126
198
  position: options.position || "auto",
127
199
  closeOnSelect: (_j = options.closeOnSelect) !== null && _j !== void 0 ? _j : true,
128
200
  ariaLabels: {
129
- hue: ((_k = options.ariaLabels) === null || _k === void 0 ? void 0 : _k.hue) || "Hue",
130
- saturation: ((_l = options.ariaLabels) === null || _l === void 0 ? void 0 : _l.saturation) || "Saturation and Lightness",
131
- lightness: ((_m = options.ariaLabels) === null || _m === void 0 ? void 0 : _m.lightness) || "Lightness",
132
- alpha: ((_o = options.ariaLabels) === null || _o === void 0 ? void 0 : _o.alpha) || "Alpha",
133
- presets: ((_p = options.ariaLabels) === null || _p === void 0 ? void 0 : _p.presets) || "Preset colors",
201
+ hue: ((_k = options.ariaLabels) === null || _k === void 0 ? void 0 : _k.hue) || translations[options.language || detectLanguage()].hue,
202
+ saturation: ((_l = options.ariaLabels) === null || _l === void 0 ? void 0 : _l.saturation) || translations[options.language || detectLanguage()].saturation,
203
+ lightness: ((_m = options.ariaLabels) === null || _m === void 0 ? void 0 : _m.lightness) || translations[options.language || detectLanguage()].lightness,
204
+ alpha: ((_o = options.ariaLabels) === null || _o === void 0 ? void 0 : _o.alpha) || translations[options.language || detectLanguage()].alpha,
205
+ presets: ((_p = options.ariaLabels) === null || _p === void 0 ? void 0 : _p.presets) || translations[options.language || detectLanguage()].presets,
134
206
  },
135
207
  };
136
208
  this.init();
137
209
  ColorPicker.instances.set(this.input, this);
138
210
  }
211
+ /**
212
+ * Add a custom translation for the ColorPicker
213
+ * @param langCode - Language code (e.g., 'fr', 'es', 'it')
214
+ * @param translation - Translation object with all required strings
215
+ * @example
216
+ * ColorPicker.addTranslation('fr', {
217
+ * hue: 'Teinte',
218
+ * saturation: 'Saturation et luminosité',
219
+ * lightness: 'Luminosité',
220
+ * alpha: 'Alpha',
221
+ * presets: 'Couleurs prédéfinies',
222
+ * eyeDropper: 'Pipette à couleurs',
223
+ * systemPicker: 'Sélecteur système'
224
+ * });
225
+ */
226
+ ColorPicker.addTranslation = function (langCode, translation) {
227
+ translations[langCode.toLowerCase()] = translation;
228
+ };
229
+ /**
230
+ * Get all available language codes
231
+ * @returns Array of language codes
232
+ */
233
+ ColorPicker.getAvailableLanguages = function () {
234
+ return Object.keys(translations);
235
+ };
139
236
  ColorPicker.prototype.init = function () {
140
237
  // Parse initial color
141
238
  var initialColor = this.input.value || this.options.defaultColor;
@@ -1039,6 +1136,10 @@
1039
1136
  case 'previewProperty':
1040
1137
  options.previewProperty = value;
1041
1138
  break;
1139
+ case 'lang':
1140
+ case 'language':
1141
+ options.language = value;
1142
+ break;
1042
1143
  }
1043
1144
  });
1044
1145
  }
@@ -1084,6 +1185,7 @@
1084
1185
  exports.ColorPicker = ColorPicker;
1085
1186
  exports.default = colorpicker;
1086
1187
  exports.initColorPickers = initColorPickers;
1188
+ exports.languages = languages;
1087
1189
 
1088
1190
  Object.defineProperty(exports, '__esModule', { value: true });
1089
1191
 
@@ -1,2 +1,2 @@
1
- /* Pickit Color v1.1.0, @license Donationware */
2
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).colorpicker={})}(this,(function(t){"use strict";function e(t,e,o,n){return new(o||(o=Promise))((function(r,i){function s(t){try{l(n.next(t))}catch(t){i(t)}}function a(t){try{l(n.throw(t))}catch(t){i(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,a)}l((n=n.apply(t,e||[])).next())}))}function o(t,e){var o,n,r,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(o)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(i=0)),i;)try{if(o=1,n&&(r=2&a[0]?n.return:a[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;switch(n=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(r=i.trys,(r=r.length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(6===a[0]&&i.label<r[1]){i.label=r[1],r=a;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(a);break}r[2]&&i.ops.pop(),i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t],n=0}finally{o=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}"function"==typeof SuppressedError&&SuppressedError;var n=function(){function t(e,o){var n,r,i,s,a,l,c,p,u,h,d,v,f,y;if(void 0===o&&(o={}),this.container=null,this.colorBox=null,this.hueSlider=null,this.saturationSlider=null,this.lightnessSlider=null,this.alphaSlider=null,this.hexInput=null,this.currentColor={h:0,s:100,l:50,a:1},this.isOpen=!1,this.saturationPointer=null,this.compactButton=null,this.inputPreview=null,this.announceTimeout=null,this.input="string"==typeof e?document.querySelector(e):e,!this.input)throw new Error("ColorPicker: Invalid element selector");var g=this.input.getAttribute("data-preset-colors"),b=g?g.split(",").map((function(t){return t.trim()})):null;this.options={defaultColor:o.defaultColor||"#3b82f6",format:o.format||"hex",showAlpha:null!==(n=o.showAlpha)&&void 0!==n&&n,sliderMode:null!==(r=o.sliderMode)&&void 0!==r&&r,eyeDropper:null!==(i=o.eyeDropper)&&void 0!==i&&i,presetColors:o.presetColors||b||["#ef4444","#f59e0b","#10b981","#3b82f6","#8b5cf6","#ec4899","#000000","#ffffff"],presetLabels:o.presetLabels||[],presetsOnly:null!==(s=o.presetsOnly)&&void 0!==s&&s,listView:null!==(a=o.listView)&&void 0!==a&&a,inline:null!==(l=o.inline)&&void 0!==l&&l,compact:null!==(c=o.compact)&&void 0!==c&&c,inputPreview:null!==(p=o.inputPreview)&&void 0!==p&&p,previewTarget:o.previewTarget||"",previewProperty:o.previewProperty||"background-color",onChange:o.onChange||function(){},onOpen:o.onOpen||function(){},onClose:o.onClose||function(){},appendTo:o.appendTo||document.body,position:o.position||"auto",closeOnSelect:null===(u=o.closeOnSelect)||void 0===u||u,ariaLabels:{hue:(null===(h=o.ariaLabels)||void 0===h?void 0:h.hue)||"Hue",saturation:(null===(d=o.ariaLabels)||void 0===d?void 0:d.saturation)||"Saturation and Lightness",lightness:(null===(v=o.ariaLabels)||void 0===v?void 0:v.lightness)||"Lightness",alpha:(null===(f=o.ariaLabels)||void 0===f?void 0:f.alpha)||"Alpha",presets:(null===(y=o.ariaLabels)||void 0===y?void 0:y.presets)||"Preset colors"}},this.init(),t.instances.set(this.input,this)}return t.prototype.init=function(){var t=this.input.value||this.options.defaultColor;this.currentColor=this.parseColor(t),this.options.compact&&this.createCompactButton(),this.options.inputPreview&&!this.options.compact&&this.createInputPreview(),this.buildColorPicker(),this.setupEventListeners(),this.updateColorDisplay(),this.options.inline&&this.container&&(this.isOpen=!0,this.container.style.display="block",this.options.onOpen())},t.prototype.buildColorPicker=function(){var t,e=this;this.container=document.createElement("div"),this.container.className="colorpicker-container",this.options.presetsOnly&&this.container.classList.add("colorpicker-presets-only"),this.options.inline&&this.container.classList.add("colorpicker-inline"),this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-label","Color picker"),this.container.style.display="none";var o='\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 tabindex="0"\n />\n </div>\n ').concat(this.options.sliderMode?'\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 tabindex="0"\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 tabindex="0"\n />\n </div>\n '):"","\n ").concat(this.options.showAlpha?'\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(100*this.currentColor.a,'"\n aria-label="').concat(this.options.ariaLabels.alpha,'"\n tabindex="0"\n />\n </div>\n '):"",'\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?"\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 '):"","\n </div>\n </div>\n "),"\n \n ").concat(this.options.presetColors.length>0?'\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.map((function(t,o){var n=e.options.presetLabels[o]||"";return e.options.listView&&n?'\n <button \n type="button"\n class="colorpicker-preset colorpicker-preset-list-item" \n data-color="'.concat(t,'"\n aria-label="Select color ').concat(n,'"\n tabindex="').concat(0===o?"0":"-1",'"\n >\n <span class="colorpicker-preset-color" style="background-color: ').concat(t,'"></span>\n <span class="colorpicker-preset-label">').concat(n,"</span>\n </button>\n "):'\n <button \n type="button"\n class="colorpicker-preset" \n style="background-color: '.concat(t,'"\n data-color="').concat(t,'"\n aria-label="Select color ').concat(n||t,'"\n tabindex="').concat(0===o?"0":"-1",'"\n ></button>\n ')})).join(""),"\n </div>\n "):"","\n </div>\n ");this.container.innerHTML=o,this.colorBox=this.container.querySelector(".colorpicker-saturation"),this.saturationPointer=this.container.querySelector(".colorpicker-saturation-pointer"),this.hueSlider=this.container.querySelector(".colorpicker-hue-slider"),this.saturationSlider=this.container.querySelector(".colorpicker-saturation-slider"),this.lightnessSlider=this.container.querySelector(".colorpicker-lightness-slider"),this.alphaSlider=this.container.querySelector(".colorpicker-alpha-slider"),this.hexInput=this.container.querySelector(".colorpicker-input"),this.options.inline?(null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.container,this.input.nextSibling),this.input.style.display="none"):this.options.appendTo.appendChild(this.container)},t.prototype.createCompactButton=function(){var t,e=this;this.input.style.position="absolute",this.input.style.opacity="0",this.input.style.pointerEvents="none",this.input.style.width="0",this.input.style.height="0",this.compactButton=document.createElement("button"),this.compactButton.type="button",this.compactButton.className="colorpicker-compact-button",this.compactButton.setAttribute("aria-label","Select color"),this.compactButton.tabIndex=0;var o=document.createElement("span");o.className="colorpicker-compact-preview",o.style.backgroundColor=this.input.value||this.options.defaultColor,this.compactButton.appendChild(o),null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.compactButton,this.input.nextSibling),this.compactButton.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),e.toggle()})),this.compactButton.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),e.toggle())}))},t.prototype.createInputPreview=function(){var t,e=document.createElement("div");e.className="colorpicker-input-group",this.inputPreview=document.createElement("span"),this.inputPreview.className="colorpicker-input-preview",this.inputPreview.style.backgroundColor=this.input.value||this.options.defaultColor,null===(t=this.input.parentNode)||void 0===t||t.insertBefore(e,this.input),e.appendChild(this.inputPreview),e.appendChild(this.input),this.input.classList.add("colorpicker-has-preview")},t.prototype.supportsEyeDropper=function(){return"undefined"!=typeof window&&"EyeDropper"in window},t.prototype.openEyeDropper=function(){return e(this,void 0,Promise,(function(){var t,e;return o(this,(function(o){switch(o.label){case 0:if(!this.supportsEyeDropper())return[2];o.label=1;case 1:return o.trys.push([1,3,,4]),[4,(new EyeDropper).open()];case 2:return(t=o.sent()).sRGBHex&&(this.currentColor=this.parseColor(t.sRGBHex),this.input.value=t.sRGBHex,this.updateColorDisplay(),this.options.onChange(t.sRGBHex)),[3,4];case 3:return"AbortError"!==(e=o.sent()).name&&console.error("EyeDropper error:",e),[3,4];case 4:return[2]}}))}))},t.prototype.setupEventListeners=function(){var t,n,r,i,s=this;this.options.compact||(this.input.addEventListener("click",(function(){s.options.inline||s.toggle()})),this.input.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||s.options.inline||(t.preventDefault(),s.toggle())}))),this.input.addEventListener("change",(function(){s.currentColor=s.parseColor(s.input.value),s.updateColorDisplay()})),this.hueSlider&&(this.hueSlider.addEventListener("input",(function(t){s.currentColor.h=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.hueSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.hueSlider,"h",0,360)}))),this.saturationSlider&&(this.saturationSlider.addEventListener("input",(function(t){s.currentColor.s=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.saturationSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.saturationSlider,"s",0,100)}))),this.lightnessSlider&&(this.lightnessSlider.addEventListener("input",(function(t){s.currentColor.l=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.lightnessSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.lightnessSlider,"l",0,100)}))),this.alphaSlider&&(this.alphaSlider.addEventListener("input",(function(t){s.currentColor.a=parseInt(t.target.value)/100,s.updateColorDisplay(),s.announceColorChange()})),this.alphaSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.alphaSlider,"a",0,100,!0)}))),this.colorBox&&(this.colorBox.addEventListener("mousedown",(function(t){return s.onSaturationMouseDown(t)})),this.colorBox.addEventListener("touchstart",(function(t){return s.onSaturationTouchStart(t)})),this.colorBox.addEventListener("keydown",(function(t){return s.onSaturationKeyDown(t)}))),this.hexInput&&this.hexInput.addEventListener("input",(function(t){var e=t.target.value.trim();s.isValidColor(e)&&(s.currentColor=s.parseColor(e),s.updateColorDisplay(!1))}));var a=null===(t=this.container)||void 0===t?void 0:t.querySelectorAll(".colorpicker-preset");a&&a.length>0&&a.forEach((function(t,e){t.addEventListener("click",(function(t){var e=t.currentTarget.dataset.color;s.currentColor=s.parseColor(e),s.updateColorDisplay(),s.options.closeOnSelect&&s.close()})),t.addEventListener("keydown",(function(t){var o=t.key,n=!1,r=e;switch(o){case"ArrowRight":case"ArrowDown":r=Math.min(a.length-1,e+1),n=!0;break;case"ArrowLeft":case"ArrowUp":r=Math.max(0,e-1),n=!0;break;case"Home":r=0,n=!0;break;case"End":r=a.length-1,n=!0;break;case"Enter":case" ":var i=t.currentTarget.dataset.color;s.currentColor=s.parseColor(i),s.updateColorDisplay(),s.options.closeOnSelect&&s.close(),n=!0}n&&(t.preventDefault(),r!==e&&(a.forEach((function(t,e){t.setAttribute("tabindex",e===r?"0":"-1")})),a[r].focus()))}))}));var l=null===(n=this.container)||void 0===n?void 0:n.querySelector(".colorpicker-eyedropper-btn");l&&l.addEventListener("click",(function(t){return e(s,void 0,void 0,(function(){return o(this,(function(e){switch(e.label){case 0:return t.preventDefault(),t.stopPropagation(),[4,this.openEyeDropper()];case 1:return e.sent(),[2]}}))}))}));var c=null===(r=this.container)||void 0===r?void 0:r.querySelector(".colorpicker-system-picker-btn"),p=null===(i=this.container)||void 0===i?void 0:i.querySelector(".colorpicker-system-picker-input");c&&p&&(p.value=this.formatColor(this.currentColor).substring(0,7),c.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),p.click()})),p.addEventListener("change",(function(){var t=p.value;s.currentColor=s.parseColor(t),s.input.value=t,s.updateColorDisplay(),s.options.onChange(t)}))),this.options.inline||document.addEventListener("mousedown",(function(t){var e;s.isOpen&&!(null===(e=s.container)||void 0===e?void 0:e.contains(t.target))&&t.target!==s.input&&s.close()})),document.addEventListener("keydown",(function(t){"Escape"===t.key&&s.isOpen&&!s.options.inline&&(s.close(),s.input.focus())}))},t.prototype.onSaturationMouseDown=function(t){var e=this;t.preventDefault(),this.updateSaturationFromMouse(t);var o=function(t){e.updateSaturationFromMouse(t)},n=function(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)},t.prototype.onSaturationTouchStart=function(t){var e=this;t.preventDefault();var o=t.touches[0];this.updateSaturationFromTouch(o);var n=function(t){t.preventDefault();var o=t.touches[0];e.updateSaturationFromTouch(o)},r=function(){document.removeEventListener("touchmove",n),document.removeEventListener("touchend",r)};document.addEventListener("touchmove",n,{passive:!1}),document.addEventListener("touchend",r)},t.prototype.updateSaturationFromTouch=function(t){if(this.colorBox){var e=this.colorBox.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-e.left,e.width)),n=Math.max(0,Math.min(t.clientY-e.top,e.height));this.currentColor.s=o/e.width*100,this.currentColor.l=100-n/e.height*100,this.updateColorDisplay(),this.announceColorChange()}},t.prototype.handleSliderTouch=function(t,e,o,n,r,i){var s=this;void 0===i&&(i=!1);var a=function(t){var a=e.getBoundingClientRect(),l=Math.max(0,Math.min(t.clientX-a.left,a.width))/a.width,c=n+l*(r-n);s.currentColor[o]=i?c/100:Math.round(c),e.value=String(Math.round(c)),s.updateColorDisplay(),s.announceColorChange()},l=t.touches[0];a(l);var c=function(t){t.preventDefault();var e=t.touches[0];a(e)},p=function(){document.removeEventListener("touchmove",c),document.removeEventListener("touchend",p)};document.addEventListener("touchmove",c,{passive:!1}),document.addEventListener("touchend",p)},t.prototype.updateSaturationFromMouse=function(t){if(this.colorBox){var e=this.colorBox.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-e.left,e.width)),n=Math.max(0,Math.min(t.clientY-e.top,e.height));this.currentColor.s=o/e.width*100,this.currentColor.l=100-n/e.height*100,this.updateColorDisplay(),this.announceColorChange()}},t.prototype.onSaturationKeyDown=function(t){var e=t.shiftKey?10:1,o=!1;switch(t.key){case"ArrowRight":this.currentColor.s=Math.min(100,this.currentColor.s+e),o=!0;break;case"ArrowLeft":this.currentColor.s=Math.max(0,this.currentColor.s-e),o=!0;break;case"ArrowUp":this.currentColor.l=Math.min(100,this.currentColor.l+e),o=!0;break;case"ArrowDown":this.currentColor.l=Math.max(0,this.currentColor.l-e),o=!0}o&&(t.preventDefault(),this.updateColorDisplay(),this.announceColorChange())},t.prototype.updateColorDisplay=function(t){var e;if(void 0===t&&(t=!0),this.colorBox&&(this.colorBox.style.backgroundColor="hsl(".concat(this.currentColor.h,", 100%, 50%)")),this.saturationPointer&&this.colorBox){var o=this.currentColor.s/100*100,n=100*(1-this.currentColor.l/100);this.saturationPointer.style.left="".concat(o,"%"),this.saturationPointer.style.top="".concat(n,"%")}this.saturationSlider&&(this.saturationSlider.style.background="linear-gradient(to right, hsl(".concat(this.currentColor.h,", 0%, 50%), hsl(").concat(this.currentColor.h,", 100%, 50%))")),this.lightnessSlider&&(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%))"));var r=null===(e=this.container)||void 0===e?void 0:e.querySelector(".colorpicker-preview-color");if(r&&(r.style.backgroundColor=this.toHSLString(this.currentColor)),this.hexInput&&t&&(this.hexInput.value=this.formatColor(this.currentColor)),this.hueSlider&&(this.hueSlider.value=String(this.currentColor.h)),this.saturationSlider&&(this.saturationSlider.value=String(this.currentColor.s)),this.lightnessSlider&&(this.lightnessSlider.value=String(this.currentColor.l)),this.alphaSlider&&(this.alphaSlider.value=String(100*this.currentColor.a)),t){if(this.input.value=this.formatColor(this.currentColor),this.options.onChange(this.input.value),this.options.previewTarget){var i=document.querySelector(this.options.previewTarget);if(i){var s=this.options.previewProperty||"background-color";i.style.setProperty(s,this.input.value)}}if(this.compactButton){var a=this.compactButton.querySelector(".colorpicker-compact-preview");a&&(a.style.backgroundColor=this.toHSLString(this.currentColor))}this.inputPreview&&(this.inputPreview.style.backgroundColor=this.toHSLString(this.currentColor))}},t.prototype.formatColor=function(t){switch(this.options.format){case"hsl":return this.toHSLString(t);case"rgb":return this.toRGBString(this.hslToRgb(t));case"hex":default:return this.toHex(t)}},t.prototype.getPlaceholder=function(){switch(this.options.format){case"hsl":return this.options.showAlpha?"hsla(0, 0%, 0%, 1)":"hsl(0, 0%, 0%)";case"rgb":return this.options.showAlpha?"rgba(0, 0, 0, 1)":"rgb(0, 0, 0)";case"hex":default:return"#000000"}},t.prototype.parseColor=function(t){if((t=t.trim()).startsWith("#"))return this.hexToHsl(t);var e=t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){var o={r:parseInt(e[1]),g:parseInt(e[2]),b:parseInt(e[3]),a:e[4]?parseFloat(e[4]):1};return this.rgbToHsl(o)}var n=t.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/);return n?{h:parseInt(n[1]),s:parseInt(n[2]),l:parseInt(n[3]),a:n[4]?parseFloat(n[4]):1}:this.currentColor},t.prototype.hexToHsl=function(t){t=t.replace("#","");var e=parseInt(t.substring(0,2),16)/255,o=parseInt(t.substring(2,4),16)/255,n=parseInt(t.substring(4,6),16)/255,r=8===t.length?parseInt(t.substring(6,8),16)/255:1;return this.rgbToHsl({r:255*e,g:255*o,b:255*n,a:r})},t.prototype.rgbToHsl=function(t){var e=t.r/255,o=t.g/255,n=t.b/255,r=Math.max(e,o,n),i=Math.min(e,o,n),s=0,a=0,l=(r+i)/2;if(r!==i){var c=r-i;switch(a=l>.5?c/(2-r-i):c/(r+i),r){case e:s=((o-n)/c+(o<n?6:0))/6;break;case o:s=((n-e)/c+2)/6;break;case n:s=((e-o)/c+4)/6}}return{h:Math.round(360*s),s:Math.round(100*a),l:Math.round(100*l),a:t.a}},t.prototype.hslToRgb=function(t){var e,o,n,r=t.h/360,i=t.s/100,s=t.l/100;if(0===i)e=o=n=s;else{var a=function(t,e,o){return o<0&&(o+=1),o>1&&(o-=1),o<1/6?t+6*(e-t)*o:o<.5?e:o<2/3?t+(e-t)*(2/3-o)*6:t},l=s<.5?s*(1+i):s+i-s*i,c=2*s-l;e=a(c,l,r+1/3),o=a(c,l,r),n=a(c,l,r-1/3)}return{r:Math.round(255*e),g:Math.round(255*o),b:Math.round(255*n),a:t.a}},t.prototype.toHex=function(t){var e=this.hslToRgb(t),o=function(t){return t.toString(16).padStart(2,"0")};if(this.options.showAlpha&&t.a<1){var n=Math.round(255*t.a);return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b)).concat(o(n))}return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b))},t.prototype.toHSLString=function(t){return this.options.showAlpha&&t.a<1?"hsla(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%, ").concat(t.a,")"):"hsl(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%)")},t.prototype.toRGBString=function(t){return this.options.showAlpha&&t.a<1?"rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", ").concat(t.a,")"):"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")")},t.prototype.isValidHex=function(t){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)},t.prototype.isValidColor=function(t){return!!this.isValidHex(t)||(!!/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(t)||!!/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(t))},t.prototype.announceColorChange=function(){var t=this;this.announceTimeout||(this.announceTimeout=setTimeout((function(){var e,o=document.createElement("div");o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.className="colorpicker-sr-only",o.textContent="Color changed to ".concat(t.formatColor(t.currentColor)),null===(e=t.container)||void 0===e||e.appendChild(o),setTimeout((function(){return o.remove()}),1e3),t.announceTimeout=null}),500))},t.prototype.open=function(){var t=this;!this.isOpen&&this.container&&(this.isOpen=!0,this.container.style.display="block",this.options.inline||this.positionPicker(),this.options.onOpen(),this.options.inline||setTimeout((function(){var e,o=null;(o=t.options.presetsOnly?null===(e=t.container)||void 0===e?void 0:e.querySelector(".colorpicker-preset"):t.options.sliderMode?t.hueSlider:t.colorBox)&&o.focus()}),0))},t.prototype.close=function(){this.isOpen&&this.container&&(this.isOpen=!1,this.options.inline||(this.container.style.display="none"),this.options.onClose())},t.prototype.toggle=function(){this.isOpen?this.close():this.open()},t.prototype.positionPicker=function(){if(this.container){var t=this.input.getBoundingClientRect(),e=this.container.getBoundingClientRect(),o=window.innerHeight,n=t.bottom+window.scrollY+4,r=t.left+window.scrollX;if("auto"===this.options.position){var i=o-t.bottom,s=t.top;i<e.height&&s>i&&(n=t.top+window.scrollY-e.height-4)}else"above"===this.options.position&&(n=t.top+window.scrollY-e.height-4);this.container.style.position="absolute",this.container.style.top="".concat(n,"px"),this.container.style.left="".concat(r,"px"),this.container.style.zIndex="9999"}},t.prototype.setColor=function(t){this.currentColor=this.parseColor(t),this.updateColorDisplay()},t.prototype.getColor=function(){return this.formatColor(this.currentColor)},t.prototype.destroy=function(){var e,o,n;if(null===(e=this.container)||void 0===e||e.remove(),null===(o=this.compactButton)||void 0===o||o.remove(),this.options.compact&&this.input&&(this.input.style.position="",this.input.style.opacity="",this.input.style.pointerEvents="",this.input.style.width="",this.input.style.height=""),this.options.inputPreview&&this.input){this.input.classList.remove("colorpicker-has-preview");var r=this.input.parentElement;r&&r.classList.contains("colorpicker-input-group")&&(null===(n=r.parentNode)||void 0===n||n.insertBefore(this.input,r),r.remove())}t.instances.delete(this.input)},t.getInstance=function(e){return t.instances.get(e)},t.instances=new Map,t}();function r(t){void 0===t&&(t=document);var e=[];return t.querySelectorAll('[data-colorpicker], .colorpicker, input[type="color"][data-format]').forEach((function(t){if(!n.getInstance(t)){var o=t.dataset,r={};if(o.colorpicker)o.colorpicker.split(/[,;]/).forEach((function(t){var e=t.split(":").map((function(t){return t.trim()})),o=e[0],n=e[1];switch(o){case"format":"hex"!==n&&"rgb"!==n&&"hsl"!==n||(r.format=n);break;case"alpha":case"showAlpha":r.showAlpha="true"===n||"1"===n;break;case"compact":r.compact="true"===n||"1"===n;break;case"inline":r.inline="true"===n||"1"===n;break;case"presets":r.presetsOnly="true"===n||"1"===n;break;case"list":r.listView="true"===n||"1"===n;break;case"sliderMode":r.sliderMode="true"===n||"1"===n;break;case"eyeDropper":r.eyeDropper="true"===n||"1"===n;break;case"inputPreview":r.inputPreview="true"===n||"1"===n;break;case"target":case"previewTarget":r.previewTarget=n;break;case"property":case"previewProperty":r.previewProperty=n}}));!o.format||"hex"!==o.format&&"rgb"!==o.format&&"hsl"!==o.format||(r.format=o.format),void 0!==o.alpha&&(r.showAlpha="true"===o.alpha||"1"===o.alpha),void 0!==o.compact&&(r.compact="true"===o.compact||"1"===o.compact),void 0!==o.inline&&(r.inline="true"===o.inline||"1"===o.inline),void 0!==o.presetsOnly&&(r.presetsOnly="true"===o.presetsOnly||"1"===o.presetsOnly),void 0!==o.listView&&(r.listView="true"===o.listView||"1"===o.listView),o.defaultColor&&(r.defaultColor=o.defaultColor);var i=new n(t,r);e.push(i)}})),e}"undefined"!=typeof window&&"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(function(){return r()})):r()),t.ColorPicker=n,t.default=function(t,e){return new n(t,e)},t.initColorPickers=r,Object.defineProperty(t,"__esModule",{value:!0})}));
1
+ /* Pickit Color v1.2.0, @license Donationware */
2
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).colorpicker={})}(this,(function(t){"use strict";function e(t,e,o,n){return new(o||(o=Promise))((function(r,i){function s(t){try{l(n.next(t))}catch(t){i(t)}}function a(t){try{l(n.throw(t))}catch(t){i(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,a)}l((n=n.apply(t,e||[])).next())}))}function o(t,e){var o,n,r,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(o)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(i=0)),i;)try{if(o=1,n&&(r=2&a[0]?n.return:a[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;switch(n=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(r=i.trys,(r=r.length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(6===a[0]&&i.label<r[1]){i.label=r[1],r=a;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(a);break}r[2]&&i.ops.pop(),i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t],n=0}finally{o=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}"function"==typeof SuppressedError&&SuppressedError;var n={hue:"Hue",saturation:"Saturation and Lightness",lightness:"Lightness",alpha:"Alpha",presets:"Preset colors",eyeDropper:"Pick color from screen",systemPicker:"System color picker"},r={hue:"Farbton",saturation:"Sättigung und Helligkeit",lightness:"Helligkeit",alpha:"Transparenz",presets:"Vordefinierte Farben",eyeDropper:"Farbe vom Bildschirm aufnehmen",systemPicker:"System-Farbwähler"},i={hue:"Odtenek",saturation:"Nasičenost in svetlost",lightness:"Svetlost",alpha:"Prosojnost",presets:"Prednastavljene barve",eyeDropper:"Izberi barvo z zaslona",systemPicker:"Sistemski izbirnik barv"},s=Object.freeze({__proto__:null,en:n,de:r,sl:i}),a={en:n,de:r,sl:i};function l(){var t=document.documentElement.lang;if(t){var e=t.split("-")[0].toLowerCase();if(a[e])return e}var o=navigator.language.split("-")[0].toLowerCase();return a[o]?o:"en"}var c=function(){function t(e,o){var n,r,i,s,c,u,p,h,d,v,f,g,y,b;if(void 0===o&&(o={}),this.container=null,this.colorBox=null,this.hueSlider=null,this.saturationSlider=null,this.lightnessSlider=null,this.alphaSlider=null,this.hexInput=null,this.currentColor={h:0,s:100,l:50,a:1},this.isOpen=!1,this.saturationPointer=null,this.compactButton=null,this.inputPreview=null,this.announceTimeout=null,this.input="string"==typeof e?document.querySelector(e):e,!this.input)throw new Error("ColorPicker: Invalid element selector");var m=this.input.getAttribute("data-preset-colors"),k=m?m.split(",").map((function(t){return t.trim()})):null;this.options={defaultColor:o.defaultColor||"#3b82f6",format:o.format||"hex",showAlpha:null!==(n=o.showAlpha)&&void 0!==n&&n,sliderMode:null!==(r=o.sliderMode)&&void 0!==r&&r,eyeDropper:null!==(i=o.eyeDropper)&&void 0!==i&&i,presetColors:o.presetColors||k||["#ef4444","#f59e0b","#10b981","#3b82f6","#8b5cf6","#ec4899","#000000","#ffffff"],presetLabels:o.presetLabels||[],presetsOnly:null!==(s=o.presetsOnly)&&void 0!==s&&s,listView:null!==(c=o.listView)&&void 0!==c&&c,inline:null!==(u=o.inline)&&void 0!==u&&u,compact:null!==(p=o.compact)&&void 0!==p&&p,inputPreview:null!==(h=o.inputPreview)&&void 0!==h&&h,previewTarget:o.previewTarget||"",previewProperty:o.previewProperty||"background-color",language:o.language||l(),onChange:o.onChange||function(){},onOpen:o.onOpen||function(){},onClose:o.onClose||function(){},appendTo:o.appendTo||document.body,position:o.position||"auto",closeOnSelect:null===(d=o.closeOnSelect)||void 0===d||d,ariaLabels:{hue:(null===(v=o.ariaLabels)||void 0===v?void 0:v.hue)||a[o.language||l()].hue,saturation:(null===(f=o.ariaLabels)||void 0===f?void 0:f.saturation)||a[o.language||l()].saturation,lightness:(null===(g=o.ariaLabels)||void 0===g?void 0:g.lightness)||a[o.language||l()].lightness,alpha:(null===(y=o.ariaLabels)||void 0===y?void 0:y.alpha)||a[o.language||l()].alpha,presets:(null===(b=o.ariaLabels)||void 0===b?void 0:b.presets)||a[o.language||l()].presets}},this.init(),t.instances.set(this.input,this)}return t.addTranslation=function(t,e){a[t.toLowerCase()]=e},t.getAvailableLanguages=function(){return Object.keys(a)},t.prototype.init=function(){var t=this.input.value||this.options.defaultColor;this.currentColor=this.parseColor(t),this.options.compact&&this.createCompactButton(),this.options.inputPreview&&!this.options.compact&&this.createInputPreview(),this.buildColorPicker(),this.setupEventListeners(),this.updateColorDisplay(),this.options.inline&&this.container&&(this.isOpen=!0,this.container.style.display="block",this.options.onOpen())},t.prototype.buildColorPicker=function(){var t,e=this;this.container=document.createElement("div"),this.container.className="colorpicker-container",this.options.presetsOnly&&this.container.classList.add("colorpicker-presets-only"),this.options.inline&&this.container.classList.add("colorpicker-inline"),this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-label","Color picker"),this.container.style.display="none";var o='\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 tabindex="0"\n />\n </div>\n ').concat(this.options.sliderMode?'\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 tabindex="0"\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 tabindex="0"\n />\n </div>\n '):"","\n ").concat(this.options.showAlpha?'\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(100*this.currentColor.a,'"\n aria-label="').concat(this.options.ariaLabels.alpha,'"\n tabindex="0"\n />\n </div>\n '):"",'\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?"\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 '):"","\n </div>\n </div>\n "),"\n \n ").concat(this.options.presetColors.length>0?'\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.map((function(t,o){var n=e.options.presetLabels[o]||"";return e.options.listView&&n?'\n <button \n type="button"\n class="colorpicker-preset colorpicker-preset-list-item" \n data-color="'.concat(t,'"\n aria-label="Select color ').concat(n,'"\n tabindex="').concat(0===o?"0":"-1",'"\n >\n <span class="colorpicker-preset-color" style="background-color: ').concat(t,'"></span>\n <span class="colorpicker-preset-label">').concat(n,"</span>\n </button>\n "):'\n <button \n type="button"\n class="colorpicker-preset" \n style="background-color: '.concat(t,'"\n data-color="').concat(t,'"\n aria-label="Select color ').concat(n||t,'"\n tabindex="').concat(0===o?"0":"-1",'"\n ></button>\n ')})).join(""),"\n </div>\n "):"","\n </div>\n ");this.container.innerHTML=o,this.colorBox=this.container.querySelector(".colorpicker-saturation"),this.saturationPointer=this.container.querySelector(".colorpicker-saturation-pointer"),this.hueSlider=this.container.querySelector(".colorpicker-hue-slider"),this.saturationSlider=this.container.querySelector(".colorpicker-saturation-slider"),this.lightnessSlider=this.container.querySelector(".colorpicker-lightness-slider"),this.alphaSlider=this.container.querySelector(".colorpicker-alpha-slider"),this.hexInput=this.container.querySelector(".colorpicker-input"),this.options.inline?(null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.container,this.input.nextSibling),this.input.style.display="none"):this.options.appendTo.appendChild(this.container)},t.prototype.createCompactButton=function(){var t,e=this;this.input.style.position="absolute",this.input.style.opacity="0",this.input.style.pointerEvents="none",this.input.style.width="0",this.input.style.height="0",this.compactButton=document.createElement("button"),this.compactButton.type="button",this.compactButton.className="colorpicker-compact-button",this.compactButton.setAttribute("aria-label","Select color"),this.compactButton.tabIndex=0;var o=document.createElement("span");o.className="colorpicker-compact-preview",o.style.backgroundColor=this.input.value||this.options.defaultColor,this.compactButton.appendChild(o),null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.compactButton,this.input.nextSibling),this.compactButton.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),e.toggle()})),this.compactButton.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),e.toggle())}))},t.prototype.createInputPreview=function(){var t,e=document.createElement("div");e.className="colorpicker-input-group",this.inputPreview=document.createElement("span"),this.inputPreview.className="colorpicker-input-preview",this.inputPreview.style.backgroundColor=this.input.value||this.options.defaultColor,null===(t=this.input.parentNode)||void 0===t||t.insertBefore(e,this.input),e.appendChild(this.inputPreview),e.appendChild(this.input),this.input.classList.add("colorpicker-has-preview")},t.prototype.supportsEyeDropper=function(){return"undefined"!=typeof window&&"EyeDropper"in window},t.prototype.openEyeDropper=function(){return e(this,void 0,Promise,(function(){var t,e;return o(this,(function(o){switch(o.label){case 0:if(!this.supportsEyeDropper())return[2];o.label=1;case 1:return o.trys.push([1,3,,4]),[4,(new EyeDropper).open()];case 2:return(t=o.sent()).sRGBHex&&(this.currentColor=this.parseColor(t.sRGBHex),this.input.value=t.sRGBHex,this.updateColorDisplay(),this.options.onChange(t.sRGBHex)),[3,4];case 3:return"AbortError"!==(e=o.sent()).name&&console.error("EyeDropper error:",e),[3,4];case 4:return[2]}}))}))},t.prototype.setupEventListeners=function(){var t,n,r,i,s=this;this.options.compact||(this.input.addEventListener("click",(function(){s.options.inline||s.toggle()})),this.input.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||s.options.inline||(t.preventDefault(),s.toggle())}))),this.input.addEventListener("change",(function(){s.currentColor=s.parseColor(s.input.value),s.updateColorDisplay()})),this.hueSlider&&(this.hueSlider.addEventListener("input",(function(t){s.currentColor.h=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.hueSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.hueSlider,"h",0,360)}))),this.saturationSlider&&(this.saturationSlider.addEventListener("input",(function(t){s.currentColor.s=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.saturationSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.saturationSlider,"s",0,100)}))),this.lightnessSlider&&(this.lightnessSlider.addEventListener("input",(function(t){s.currentColor.l=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.lightnessSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.lightnessSlider,"l",0,100)}))),this.alphaSlider&&(this.alphaSlider.addEventListener("input",(function(t){s.currentColor.a=parseInt(t.target.value)/100,s.updateColorDisplay(),s.announceColorChange()})),this.alphaSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.alphaSlider,"a",0,100,!0)}))),this.colorBox&&(this.colorBox.addEventListener("mousedown",(function(t){return s.onSaturationMouseDown(t)})),this.colorBox.addEventListener("touchstart",(function(t){return s.onSaturationTouchStart(t)})),this.colorBox.addEventListener("keydown",(function(t){return s.onSaturationKeyDown(t)}))),this.hexInput&&this.hexInput.addEventListener("input",(function(t){var e=t.target.value.trim();s.isValidColor(e)&&(s.currentColor=s.parseColor(e),s.updateColorDisplay(!1))}));var a=null===(t=this.container)||void 0===t?void 0:t.querySelectorAll(".colorpicker-preset");a&&a.length>0&&a.forEach((function(t,e){t.addEventListener("click",(function(t){var e=t.currentTarget.dataset.color;s.currentColor=s.parseColor(e),s.updateColorDisplay(),s.options.closeOnSelect&&s.close()})),t.addEventListener("keydown",(function(t){var o=t.key,n=!1,r=e;switch(o){case"ArrowRight":case"ArrowDown":r=Math.min(a.length-1,e+1),n=!0;break;case"ArrowLeft":case"ArrowUp":r=Math.max(0,e-1),n=!0;break;case"Home":r=0,n=!0;break;case"End":r=a.length-1,n=!0;break;case"Enter":case" ":var i=t.currentTarget.dataset.color;s.currentColor=s.parseColor(i),s.updateColorDisplay(),s.options.closeOnSelect&&s.close(),n=!0}n&&(t.preventDefault(),r!==e&&(a.forEach((function(t,e){t.setAttribute("tabindex",e===r?"0":"-1")})),a[r].focus()))}))}));var l=null===(n=this.container)||void 0===n?void 0:n.querySelector(".colorpicker-eyedropper-btn");l&&l.addEventListener("click",(function(t){return e(s,void 0,void 0,(function(){return o(this,(function(e){switch(e.label){case 0:return t.preventDefault(),t.stopPropagation(),[4,this.openEyeDropper()];case 1:return e.sent(),[2]}}))}))}));var c=null===(r=this.container)||void 0===r?void 0:r.querySelector(".colorpicker-system-picker-btn"),u=null===(i=this.container)||void 0===i?void 0:i.querySelector(".colorpicker-system-picker-input");c&&u&&(u.value=this.formatColor(this.currentColor).substring(0,7),c.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),u.click()})),u.addEventListener("change",(function(){var t=u.value;s.currentColor=s.parseColor(t),s.input.value=t,s.updateColorDisplay(),s.options.onChange(t)}))),this.options.inline||document.addEventListener("mousedown",(function(t){var e;s.isOpen&&!(null===(e=s.container)||void 0===e?void 0:e.contains(t.target))&&t.target!==s.input&&s.close()})),document.addEventListener("keydown",(function(t){"Escape"===t.key&&s.isOpen&&!s.options.inline&&(s.close(),s.input.focus())}))},t.prototype.onSaturationMouseDown=function(t){var e=this;t.preventDefault(),this.updateSaturationFromMouse(t);var o=function(t){e.updateSaturationFromMouse(t)},n=function(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)},t.prototype.onSaturationTouchStart=function(t){var e=this;t.preventDefault();var o=t.touches[0];this.updateSaturationFromTouch(o);var n=function(t){t.preventDefault();var o=t.touches[0];e.updateSaturationFromTouch(o)},r=function(){document.removeEventListener("touchmove",n),document.removeEventListener("touchend",r)};document.addEventListener("touchmove",n,{passive:!1}),document.addEventListener("touchend",r)},t.prototype.updateSaturationFromTouch=function(t){if(this.colorBox){var e=this.colorBox.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-e.left,e.width)),n=Math.max(0,Math.min(t.clientY-e.top,e.height));this.currentColor.s=o/e.width*100,this.currentColor.l=100-n/e.height*100,this.updateColorDisplay(),this.announceColorChange()}},t.prototype.handleSliderTouch=function(t,e,o,n,r,i){var s=this;void 0===i&&(i=!1);var a=function(t){var a=e.getBoundingClientRect(),l=Math.max(0,Math.min(t.clientX-a.left,a.width))/a.width,c=n+l*(r-n);s.currentColor[o]=i?c/100:Math.round(c),e.value=String(Math.round(c)),s.updateColorDisplay(),s.announceColorChange()},l=t.touches[0];a(l);var c=function(t){t.preventDefault();var e=t.touches[0];a(e)},u=function(){document.removeEventListener("touchmove",c),document.removeEventListener("touchend",u)};document.addEventListener("touchmove",c,{passive:!1}),document.addEventListener("touchend",u)},t.prototype.updateSaturationFromMouse=function(t){if(this.colorBox){var e=this.colorBox.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-e.left,e.width)),n=Math.max(0,Math.min(t.clientY-e.top,e.height));this.currentColor.s=o/e.width*100,this.currentColor.l=100-n/e.height*100,this.updateColorDisplay(),this.announceColorChange()}},t.prototype.onSaturationKeyDown=function(t){var e=t.shiftKey?10:1,o=!1;switch(t.key){case"ArrowRight":this.currentColor.s=Math.min(100,this.currentColor.s+e),o=!0;break;case"ArrowLeft":this.currentColor.s=Math.max(0,this.currentColor.s-e),o=!0;break;case"ArrowUp":this.currentColor.l=Math.min(100,this.currentColor.l+e),o=!0;break;case"ArrowDown":this.currentColor.l=Math.max(0,this.currentColor.l-e),o=!0}o&&(t.preventDefault(),this.updateColorDisplay(),this.announceColorChange())},t.prototype.updateColorDisplay=function(t){var e;if(void 0===t&&(t=!0),this.colorBox&&(this.colorBox.style.backgroundColor="hsl(".concat(this.currentColor.h,", 100%, 50%)")),this.saturationPointer&&this.colorBox){var o=this.currentColor.s/100*100,n=100*(1-this.currentColor.l/100);this.saturationPointer.style.left="".concat(o,"%"),this.saturationPointer.style.top="".concat(n,"%")}this.saturationSlider&&(this.saturationSlider.style.background="linear-gradient(to right, hsl(".concat(this.currentColor.h,", 0%, 50%), hsl(").concat(this.currentColor.h,", 100%, 50%))")),this.lightnessSlider&&(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%))"));var r=null===(e=this.container)||void 0===e?void 0:e.querySelector(".colorpicker-preview-color");if(r&&(r.style.backgroundColor=this.toHSLString(this.currentColor)),this.hexInput&&t&&(this.hexInput.value=this.formatColor(this.currentColor)),this.hueSlider&&(this.hueSlider.value=String(this.currentColor.h)),this.saturationSlider&&(this.saturationSlider.value=String(this.currentColor.s)),this.lightnessSlider&&(this.lightnessSlider.value=String(this.currentColor.l)),this.alphaSlider&&(this.alphaSlider.value=String(100*this.currentColor.a)),t){if(this.input.value=this.formatColor(this.currentColor),this.options.onChange(this.input.value),this.options.previewTarget){var i=document.querySelector(this.options.previewTarget);if(i){var s=this.options.previewProperty||"background-color";i.style.setProperty(s,this.input.value)}}if(this.compactButton){var a=this.compactButton.querySelector(".colorpicker-compact-preview");a&&(a.style.backgroundColor=this.toHSLString(this.currentColor))}this.inputPreview&&(this.inputPreview.style.backgroundColor=this.toHSLString(this.currentColor))}},t.prototype.formatColor=function(t){switch(this.options.format){case"hsl":return this.toHSLString(t);case"rgb":return this.toRGBString(this.hslToRgb(t));case"hex":default:return this.toHex(t)}},t.prototype.getPlaceholder=function(){switch(this.options.format){case"hsl":return this.options.showAlpha?"hsla(0, 0%, 0%, 1)":"hsl(0, 0%, 0%)";case"rgb":return this.options.showAlpha?"rgba(0, 0, 0, 1)":"rgb(0, 0, 0)";case"hex":default:return"#000000"}},t.prototype.parseColor=function(t){if((t=t.trim()).startsWith("#"))return this.hexToHsl(t);var e=t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){var o={r:parseInt(e[1]),g:parseInt(e[2]),b:parseInt(e[3]),a:e[4]?parseFloat(e[4]):1};return this.rgbToHsl(o)}var n=t.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/);return n?{h:parseInt(n[1]),s:parseInt(n[2]),l:parseInt(n[3]),a:n[4]?parseFloat(n[4]):1}:this.currentColor},t.prototype.hexToHsl=function(t){t=t.replace("#","");var e=parseInt(t.substring(0,2),16)/255,o=parseInt(t.substring(2,4),16)/255,n=parseInt(t.substring(4,6),16)/255,r=8===t.length?parseInt(t.substring(6,8),16)/255:1;return this.rgbToHsl({r:255*e,g:255*o,b:255*n,a:r})},t.prototype.rgbToHsl=function(t){var e=t.r/255,o=t.g/255,n=t.b/255,r=Math.max(e,o,n),i=Math.min(e,o,n),s=0,a=0,l=(r+i)/2;if(r!==i){var c=r-i;switch(a=l>.5?c/(2-r-i):c/(r+i),r){case e:s=((o-n)/c+(o<n?6:0))/6;break;case o:s=((n-e)/c+2)/6;break;case n:s=((e-o)/c+4)/6}}return{h:Math.round(360*s),s:Math.round(100*a),l:Math.round(100*l),a:t.a}},t.prototype.hslToRgb=function(t){var e,o,n,r=t.h/360,i=t.s/100,s=t.l/100;if(0===i)e=o=n=s;else{var a=function(t,e,o){return o<0&&(o+=1),o>1&&(o-=1),o<1/6?t+6*(e-t)*o:o<.5?e:o<2/3?t+(e-t)*(2/3-o)*6:t},l=s<.5?s*(1+i):s+i-s*i,c=2*s-l;e=a(c,l,r+1/3),o=a(c,l,r),n=a(c,l,r-1/3)}return{r:Math.round(255*e),g:Math.round(255*o),b:Math.round(255*n),a:t.a}},t.prototype.toHex=function(t){var e=this.hslToRgb(t),o=function(t){return t.toString(16).padStart(2,"0")};if(this.options.showAlpha&&t.a<1){var n=Math.round(255*t.a);return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b)).concat(o(n))}return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b))},t.prototype.toHSLString=function(t){return this.options.showAlpha&&t.a<1?"hsla(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%, ").concat(t.a,")"):"hsl(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%)")},t.prototype.toRGBString=function(t){return this.options.showAlpha&&t.a<1?"rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", ").concat(t.a,")"):"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")")},t.prototype.isValidHex=function(t){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)},t.prototype.isValidColor=function(t){return!!this.isValidHex(t)||(!!/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(t)||!!/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(t))},t.prototype.announceColorChange=function(){var t=this;this.announceTimeout||(this.announceTimeout=setTimeout((function(){var e,o=document.createElement("div");o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.className="colorpicker-sr-only",o.textContent="Color changed to ".concat(t.formatColor(t.currentColor)),null===(e=t.container)||void 0===e||e.appendChild(o),setTimeout((function(){return o.remove()}),1e3),t.announceTimeout=null}),500))},t.prototype.open=function(){var t=this;!this.isOpen&&this.container&&(this.isOpen=!0,this.container.style.display="block",this.options.inline||this.positionPicker(),this.options.onOpen(),this.options.inline||setTimeout((function(){var e,o=null;(o=t.options.presetsOnly?null===(e=t.container)||void 0===e?void 0:e.querySelector(".colorpicker-preset"):t.options.sliderMode?t.hueSlider:t.colorBox)&&o.focus()}),0))},t.prototype.close=function(){this.isOpen&&this.container&&(this.isOpen=!1,this.options.inline||(this.container.style.display="none"),this.options.onClose())},t.prototype.toggle=function(){this.isOpen?this.close():this.open()},t.prototype.positionPicker=function(){if(this.container){var t=this.input.getBoundingClientRect(),e=this.container.getBoundingClientRect(),o=window.innerHeight,n=t.bottom+window.scrollY+4,r=t.left+window.scrollX;if("auto"===this.options.position){var i=o-t.bottom,s=t.top;i<e.height&&s>i&&(n=t.top+window.scrollY-e.height-4)}else"above"===this.options.position&&(n=t.top+window.scrollY-e.height-4);this.container.style.position="absolute",this.container.style.top="".concat(n,"px"),this.container.style.left="".concat(r,"px"),this.container.style.zIndex="9999"}},t.prototype.setColor=function(t){this.currentColor=this.parseColor(t),this.updateColorDisplay()},t.prototype.getColor=function(){return this.formatColor(this.currentColor)},t.prototype.destroy=function(){var e,o,n;if(null===(e=this.container)||void 0===e||e.remove(),null===(o=this.compactButton)||void 0===o||o.remove(),this.options.compact&&this.input&&(this.input.style.position="",this.input.style.opacity="",this.input.style.pointerEvents="",this.input.style.width="",this.input.style.height=""),this.options.inputPreview&&this.input){this.input.classList.remove("colorpicker-has-preview");var r=this.input.parentElement;r&&r.classList.contains("colorpicker-input-group")&&(null===(n=r.parentNode)||void 0===n||n.insertBefore(this.input,r),r.remove())}t.instances.delete(this.input)},t.getInstance=function(e){return t.instances.get(e)},t.instances=new Map,t}();function u(t){void 0===t&&(t=document);var e=[];return t.querySelectorAll('[data-colorpicker], .colorpicker, input[type="color"][data-format]').forEach((function(t){if(!c.getInstance(t)){var o=t.dataset,n={};if(o.colorpicker)o.colorpicker.split(/[,;]/).forEach((function(t){var e=t.split(":").map((function(t){return t.trim()})),o=e[0],r=e[1];switch(o){case"format":"hex"!==r&&"rgb"!==r&&"hsl"!==r||(n.format=r);break;case"alpha":case"showAlpha":n.showAlpha="true"===r||"1"===r;break;case"compact":n.compact="true"===r||"1"===r;break;case"inline":n.inline="true"===r||"1"===r;break;case"presets":n.presetsOnly="true"===r||"1"===r;break;case"list":n.listView="true"===r||"1"===r;break;case"sliderMode":n.sliderMode="true"===r||"1"===r;break;case"eyeDropper":n.eyeDropper="true"===r||"1"===r;break;case"inputPreview":n.inputPreview="true"===r||"1"===r;break;case"target":case"previewTarget":n.previewTarget=r;break;case"property":case"previewProperty":n.previewProperty=r;break;case"lang":case"language":n.language=r}}));!o.format||"hex"!==o.format&&"rgb"!==o.format&&"hsl"!==o.format||(n.format=o.format),void 0!==o.alpha&&(n.showAlpha="true"===o.alpha||"1"===o.alpha),void 0!==o.compact&&(n.compact="true"===o.compact||"1"===o.compact),void 0!==o.inline&&(n.inline="true"===o.inline||"1"===o.inline),void 0!==o.presetsOnly&&(n.presetsOnly="true"===o.presetsOnly||"1"===o.presetsOnly),void 0!==o.listView&&(n.listView="true"===o.listView||"1"===o.listView),o.defaultColor&&(n.defaultColor=o.defaultColor);var r=new c(t,n);e.push(r)}})),e}"undefined"!=typeof window&&"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(function(){return u()})):u()),t.ColorPicker=c,t.default=function(t,e){return new c(t,e)},t.initColorPickers=u,t.languages=s,Object.defineProperty(t,"__esModule",{value:!0})}));
package/dist/esm/index.js CHANGED
@@ -34,6 +34,24 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
34
34
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
35
35
  }
36
36
  };
37
+ import * as languages from './l10n';
38
+ var translations = {
39
+ en: languages.en,
40
+ de: languages.de,
41
+ sl: languages.sl
42
+ };
43
+ function detectLanguage() {
44
+ var htmlLang = document.documentElement.lang;
45
+ if (htmlLang) {
46
+ var lang = htmlLang.split('-')[0].toLowerCase();
47
+ if (translations[lang])
48
+ return lang;
49
+ }
50
+ var browserLang = navigator.language.split('-')[0].toLowerCase();
51
+ if (translations[browserLang])
52
+ return browserLang;
53
+ return 'en';
54
+ }
37
55
  var ColorPicker = (function () {
38
56
  function ColorPicker(element, options) {
39
57
  if (options === void 0) { options = {}; }
@@ -84,6 +102,7 @@ var ColorPicker = (function () {
84
102
  inputPreview: (_h = options.inputPreview) !== null && _h !== void 0 ? _h : false,
85
103
  previewTarget: options.previewTarget || "",
86
104
  previewProperty: options.previewProperty || "background-color",
105
+ language: options.language || detectLanguage(),
87
106
  onChange: options.onChange || (function () { }),
88
107
  onOpen: options.onOpen || (function () { }),
89
108
  onClose: options.onClose || (function () { }),
@@ -91,16 +110,22 @@ var ColorPicker = (function () {
91
110
  position: options.position || "auto",
92
111
  closeOnSelect: (_j = options.closeOnSelect) !== null && _j !== void 0 ? _j : true,
93
112
  ariaLabels: {
94
- hue: ((_k = options.ariaLabels) === null || _k === void 0 ? void 0 : _k.hue) || "Hue",
95
- saturation: ((_l = options.ariaLabels) === null || _l === void 0 ? void 0 : _l.saturation) || "Saturation and Lightness",
96
- lightness: ((_m = options.ariaLabels) === null || _m === void 0 ? void 0 : _m.lightness) || "Lightness",
97
- alpha: ((_o = options.ariaLabels) === null || _o === void 0 ? void 0 : _o.alpha) || "Alpha",
98
- presets: ((_p = options.ariaLabels) === null || _p === void 0 ? void 0 : _p.presets) || "Preset colors",
113
+ hue: ((_k = options.ariaLabels) === null || _k === void 0 ? void 0 : _k.hue) || translations[options.language || detectLanguage()].hue,
114
+ saturation: ((_l = options.ariaLabels) === null || _l === void 0 ? void 0 : _l.saturation) || translations[options.language || detectLanguage()].saturation,
115
+ lightness: ((_m = options.ariaLabels) === null || _m === void 0 ? void 0 : _m.lightness) || translations[options.language || detectLanguage()].lightness,
116
+ alpha: ((_o = options.ariaLabels) === null || _o === void 0 ? void 0 : _o.alpha) || translations[options.language || detectLanguage()].alpha,
117
+ presets: ((_p = options.ariaLabels) === null || _p === void 0 ? void 0 : _p.presets) || translations[options.language || detectLanguage()].presets,
99
118
  },
100
119
  };
101
120
  this.init();
102
121
  ColorPicker.instances.set(this.input, this);
103
122
  }
123
+ ColorPicker.addTranslation = function (langCode, translation) {
124
+ translations[langCode.toLowerCase()] = translation;
125
+ };
126
+ ColorPicker.getAvailableLanguages = function () {
127
+ return Object.keys(translations);
128
+ };
104
129
  ColorPicker.prototype.init = function () {
105
130
  var initialColor = this.input.value || this.options.defaultColor;
106
131
  this.currentColor = this.parseColor(initialColor);
@@ -935,6 +960,10 @@ export function initColorPickers(root) {
935
960
  case 'previewProperty':
936
961
  options.previewProperty = value;
937
962
  break;
963
+ case 'lang':
964
+ case 'language':
965
+ options.language = value;
966
+ break;
938
967
  }
939
968
  });
940
969
  }
@@ -964,6 +993,8 @@ export function initColorPickers(root) {
964
993
  });
965
994
  return pickers;
966
995
  }
996
+ import * as languages_1 from './l10n';
997
+ export { languages_1 as languages };
967
998
  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
968
999
  if (document.readyState === 'loading') {
969
1000
  document.addEventListener('DOMContentLoaded', function () { return initColorPickers(); });
@@ -0,0 +1,10 @@
1
+ var de = {
2
+ hue: "Farbton",
3
+ saturation: "Sättigung und Helligkeit",
4
+ lightness: "Helligkeit",
5
+ alpha: "Transparenz",
6
+ presets: "Vordefinierte Farben",
7
+ eyeDropper: "Farbe vom Bildschirm aufnehmen",
8
+ systemPicker: "System-Farbwähler"
9
+ };
10
+ export default de;
@@ -0,0 +1,10 @@
1
+ var en = {
2
+ hue: "Hue",
3
+ saturation: "Saturation and Lightness",
4
+ lightness: "Lightness",
5
+ alpha: "Alpha",
6
+ presets: "Preset colors",
7
+ eyeDropper: "Pick color from screen",
8
+ systemPicker: "System color picker"
9
+ };
10
+ export default en;
@@ -0,0 +1,3 @@
1
+ export { default as en } from './en';
2
+ export { default as de } from './de';
3
+ export { default as sl } from './sl';
@@ -0,0 +1,10 @@
1
+ var sl = {
2
+ hue: "Odtenek",
3
+ saturation: "Nasičenost in svetlost",
4
+ lightness: "Svetlost",
5
+ alpha: "Prosojnost",
6
+ presets: "Prednastavljene barve",
7
+ eyeDropper: "Izberi barvo z zaslona",
8
+ systemPicker: "Sistemski izbirnik barv"
9
+ };
10
+ export default sl;
@@ -1 +1 @@
1
- {"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../src/colorpicker.d.ts","../../src/index.ts","../../node_modules/@types/node/globals.d.ts","../../node_modules/@types/node/async_hooks.d.ts","../../node_modules/@types/node/buffer.d.ts","../../node_modules/@types/node/child_process.d.ts","../../node_modules/@types/node/cluster.d.ts","../../node_modules/@types/node/console.d.ts","../../node_modules/@types/node/constants.d.ts","../../node_modules/@types/node/crypto.d.ts","../../node_modules/@types/node/dgram.d.ts","../../node_modules/@types/node/dns.d.ts","../../node_modules/@types/node/domain.d.ts","../../node_modules/@types/node/events.d.ts","../../node_modules/@types/node/fs.d.ts","../../node_modules/@types/node/fs/promises.d.ts","../../node_modules/@types/node/http.d.ts","../../node_modules/@types/node/http2.d.ts","../../node_modules/@types/node/https.d.ts","../../node_modules/@types/node/inspector.d.ts","../../node_modules/@types/node/module.d.ts","../../node_modules/@types/node/net.d.ts","../../node_modules/@types/node/os.d.ts","../../node_modules/@types/node/path.d.ts","../../node_modules/@types/node/perf_hooks.d.ts","../../node_modules/@types/node/process.d.ts","../../node_modules/@types/node/punycode.d.ts","../../node_modules/@types/node/querystring.d.ts","../../node_modules/@types/node/readline.d.ts","../../node_modules/@types/node/repl.d.ts","../../node_modules/@types/node/stream.d.ts","../../node_modules/@types/node/string_decoder.d.ts","../../node_modules/@types/node/timers.d.ts","../../node_modules/@types/node/tls.d.ts","../../node_modules/@types/node/trace_events.d.ts","../../node_modules/@types/node/tty.d.ts","../../node_modules/@types/node/url.d.ts","../../node_modules/@types/node/util.d.ts","../../node_modules/@types/node/v8.d.ts","../../node_modules/@types/node/vm.d.ts","../../node_modules/@types/node/worker_threads.d.ts","../../node_modules/@types/node/zlib.d.ts","../../node_modules/@types/node/ts3.4/base.d.ts","../../node_modules/@types/node/globals.global.d.ts","../../node_modules/@types/node/wasi.d.ts","../../node_modules/@types/node/ts3.6/base.d.ts","../../node_modules/@types/node/assert.d.ts","../../node_modules/@types/node/base.d.ts","../../node_modules/@types/node/index.d.ts","../../node_modules/@types/stylus/index.d.ts"],"fileIdsList":[[80,81],[48,49,56,65],[40,48,56],[72],[44,49,57],[65],[46,48,56],[48],[48,50,65,71],[49],[56,65,71],[48,49,51,56,65,68,71],[48,51,68,71],[82],[71],[46,48,65],[38],[70],[48,65],[63,72,74],[44,46,56,65],[37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76],[77,78,79],[56],[62],[48,50,65,71,74],[48,83]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"811c71eee4aa0ac5f7adf713323a5c41b0cf6c4e17367a34fbce379e12bbf0a4","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},"e7662e79ae21b1f16ea6bd668b238d79a7f4337f5ad95de573356bfa086275f8","8ae8e0b1e59d63aa99e47da5d545ebf27b3c49330c4d1f7f25f77d4b53a81008",{"version":"215d8d9a2c480fd460127edc048d68d9931d3b27f95132253a6e71975f060bb1","affectsGlobalScope":true,"impliedFormat":1},{"version":"c438b413e94ff76dfa20ae005f33a1c84f2480d1d66e0fd687501020d0de9b50","impliedFormat":1},{"version":"bc6a78961535181265845bf9b9e8a147ffd0ca275097ceb670a9b92afa825152","impliedFormat":1},{"version":"987249e7b75023387c5fd9dc2f959ee777cb8989b7900f5a9eb4a67d290f2cba","impliedFormat":1},{"version":"123ec69e4b3a686eb49afd94ebe3292a5c84a867ecbcb6bb84bdd720a12af803","impliedFormat":1},{"version":"eb5197aade83cb0e360ac407289c53a8009e8fdae7939892a0240d30444496b6","affectsGlobalScope":true,"impliedFormat":1},{"version":"90c85ddbb8de82cd19198bda062065fc51b7407c0f206f2e399e65a52e979720","impliedFormat":1},{"version":"2636f61a2d5f76d4039c7110f65c407a028ec5265e03d855fc2cf62b198ac415","impliedFormat":1},{"version":"7e050b767ed10c7ffbc01f314defbf420bf0b5d54ce666e1c87507c035dfc191","impliedFormat":1},{"version":"7db7569fbb3e2b01ba8751c761cdd3f0debd104170d5665b7dc20a11630df3a9","impliedFormat":1},{"version":"cde4d7f6274468180fa39847b183aec22626e8212ff885d535c53f4cd7c225fd","affectsGlobalScope":true,"impliedFormat":1},{"version":"365e8358843a23944be84b810b1f774ea0223adfccc085f30fd7f4c13dc8a09f","affectsGlobalScope":true,"impliedFormat":1},{"version":"f87f95c015900102a5c0edcdebb17596de1382510e6cc17ab79f375d3505bb12","impliedFormat":1},{"version":"05b5679a897598ebe556ee93415b3af1f456e674ea82e4d7afcd716bfe43aa98","impliedFormat":1},{"version":"35fe02b2c10616cc7ac3db9c15778df7ed9c99276889efdd9be31f342841cfcd","impliedFormat":1},{"version":"1c3fe66943f587685aa4a42f664f794655da1767401d2f85910177dac78aa45d","impliedFormat":1},{"version":"c969bf4c7cdfe4d5dd28aa09432f99d09ad1d8d8b839959646579521d0467d1a","impliedFormat":1},{"version":"6c3857edaeeaaf43812f527830ebeece9266b6e8eb5271ab6d2f0008306c9947","impliedFormat":1},{"version":"bc6a77e750f4d34584e46b1405b771fb69a224197dd6bafe5b0392a29a70b665","impliedFormat":1},{"version":"8de97668870cfb20fc9d355d2ef379e897bdd8a98c889c7d8a6de40ee408ad52","impliedFormat":1},{"version":"ed4ae81196cccc10f297d228bca8d02e31058e6d723a3c5bc4be5fb3c61c6a34","impliedFormat":1},{"version":"84044697c8b3e08ef24e4b32cfe6440143d07e469a5e34bda0635276d32d9f35","impliedFormat":1},{"version":"4982d94cb6427263c8839d8d6324a8bbe129e931deb61a7380f8fad17ba2cfc0","impliedFormat":1},{"version":"ae4bc1dd4d9de7bbea6ce419db45af82a81358e6014c9e1235b5d252e06f8ab8","affectsGlobalScope":true,"impliedFormat":1},{"version":"3f6a1fd73c9dc3bd7f4b79bc075297ca6527904df69b0f2c2c94e4c4c7d9a32c","impliedFormat":1},{"version":"884560fda6c3868f925f022adc3a1289fe6507bbb45adb10fa1bbcc73a941bb0","impliedFormat":1},{"version":"6b2bb67b0942bcfce93e1d6fad5f70afd54940a2b13df7f311201fba54b2cbe9","impliedFormat":1},{"version":"acbed967a379b3e9f73237ba9473f8b337eeea14b7dc64d445430b5d695751da","impliedFormat":1},{"version":"272a46cc8f494677af587d17939e61e7db2b1925633e4da0c186ba17f6732521","impliedFormat":1},{"version":"d67e08745494b000da9410c1ae2fdc9965fc6d593fe0f381a47491f75417d457","impliedFormat":1},{"version":"b40652bf8ce4a18133b31349086523b219724dca8df3448c1a0742528e7ad5b9","impliedFormat":1},{"version":"c52eb62e3388a01b966c57bd14ca0ee9d5f6e656d6a18f6ce6b7cdece63734a3","impliedFormat":1},{"version":"a77fdb357c78b70142b2fdbbfb72958d69e8f765fd2a3c69946c1018e89d4638","impliedFormat":1},{"version":"3c2ac350c3baa61fd2b1925844109e098f4376d0768a4643abc82754fd752748","impliedFormat":1},{"version":"80ffc1786a5dab91b4aa59a72720f02f25df8b7c76b593e04d5e381aec284ccb","impliedFormat":1},{"version":"f5b9d446783f075eed9e93dfba1a5055b3fd61aab285fef3bbc761eadf598204","impliedFormat":1},{"version":"289be113bad7ee27ee7fa5b1e373c964c9789a5e9ed7db5ddcb631371120b953","impliedFormat":1},{"version":"baf0b82ffc5d2616f44a6fb1f81e8d798545bebf0c30f5d8b003a1dba1acfb3f","impliedFormat":1},{"version":"c6a5b34f1e725019445754f1e733585f113e0dced75f137bd3c4af5853d3f6ab","impliedFormat":1},{"version":"15fbe50526244954eb2f933546bca6cdcf0db16c9428d099b3b386c1db5799ab","impliedFormat":1},{"version":"d44028ae0127eb3e9fcfa5f55a8b81d64775ce15aca1020fe25c511bbb055834","impliedFormat":1},{"version":"2708349d5a11a5c2e5f3a0765259ebe7ee00cdcc8161cb9990cb4910328442a1","affectsGlobalScope":true,"impliedFormat":1},{"version":"4e0a4d84b15692ea8669fe4f3d05a4f204567906b1347da7a58b75f45bae48d3","impliedFormat":1},{"version":"ad1ae5ae98eceb9af99061e83e867b9897d267aebc8f3b938c9424deabadf4bb","impliedFormat":1},{"version":"6fbe72eed85e363ad83b763e03be824558c6ea7456c7259a48bcf0afdeb9d7e4","impliedFormat":1},{"version":"e61a21e9418f279bc480394a94d1581b2dee73747adcbdef999b6737e34d721b","impliedFormat":1},{"version":"5825520e2099309182c6e2a2b3061b060d42a098c58f67d1754880a7e2cce99a","impliedFormat":1},{"version":"c6db2268b4c7189a5d33b3bbf6616f3cc83bdad97468a25a172901d7ec28ff82","impliedFormat":1}],"root":[35,36],"options":{"allowSyntheticDefaultImports":true,"esModuleInterop":true,"module":5,"noImplicitAny":true,"noUnusedLocals":true,"noUnusedParameters":true,"outDir":"./","removeComments":true,"strict":true,"target":1},"referencedMap":[[82,1],[40,2],[41,3],[42,4],[43,5],[44,6],[45,7],[47,8],[49,9],[50,10],[51,11],[52,12],[53,13],[83,14],[54,8],[55,15],[56,16],[59,17],[60,18],[63,19],[64,20],[65,8],[68,21],[77,22],[80,23],[70,24],[71,25],[73,6],[75,26],[76,6],[84,27]],"version":"5.9.3"}
1
+ {"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../src/colorpicker.d.ts","../../src/l10n/en.ts","../../src/l10n/de.ts","../../src/l10n/sl.ts","../../src/l10n/index.ts","../../src/index.ts","../../node_modules/@types/node/globals.d.ts","../../node_modules/@types/node/async_hooks.d.ts","../../node_modules/@types/node/buffer.d.ts","../../node_modules/@types/node/child_process.d.ts","../../node_modules/@types/node/cluster.d.ts","../../node_modules/@types/node/console.d.ts","../../node_modules/@types/node/constants.d.ts","../../node_modules/@types/node/crypto.d.ts","../../node_modules/@types/node/dgram.d.ts","../../node_modules/@types/node/dns.d.ts","../../node_modules/@types/node/domain.d.ts","../../node_modules/@types/node/events.d.ts","../../node_modules/@types/node/fs.d.ts","../../node_modules/@types/node/fs/promises.d.ts","../../node_modules/@types/node/http.d.ts","../../node_modules/@types/node/http2.d.ts","../../node_modules/@types/node/https.d.ts","../../node_modules/@types/node/inspector.d.ts","../../node_modules/@types/node/module.d.ts","../../node_modules/@types/node/net.d.ts","../../node_modules/@types/node/os.d.ts","../../node_modules/@types/node/path.d.ts","../../node_modules/@types/node/perf_hooks.d.ts","../../node_modules/@types/node/process.d.ts","../../node_modules/@types/node/punycode.d.ts","../../node_modules/@types/node/querystring.d.ts","../../node_modules/@types/node/readline.d.ts","../../node_modules/@types/node/repl.d.ts","../../node_modules/@types/node/stream.d.ts","../../node_modules/@types/node/string_decoder.d.ts","../../node_modules/@types/node/timers.d.ts","../../node_modules/@types/node/tls.d.ts","../../node_modules/@types/node/trace_events.d.ts","../../node_modules/@types/node/tty.d.ts","../../node_modules/@types/node/url.d.ts","../../node_modules/@types/node/util.d.ts","../../node_modules/@types/node/v8.d.ts","../../node_modules/@types/node/vm.d.ts","../../node_modules/@types/node/worker_threads.d.ts","../../node_modules/@types/node/zlib.d.ts","../../node_modules/@types/node/ts3.4/base.d.ts","../../node_modules/@types/node/globals.global.d.ts","../../node_modules/@types/node/wasi.d.ts","../../node_modules/@types/node/ts3.6/base.d.ts","../../node_modules/@types/node/assert.d.ts","../../node_modules/@types/node/base.d.ts","../../node_modules/@types/node/index.d.ts","../../node_modules/@types/stylus/index.d.ts"],"fileIdsList":[[84,85],[52,53,60,69],[44,52,60],[76],[48,53,61],[69],[50,52,60],[52],[52,54,69,75],[53],[60,69,75],[52,53,55,60,69,72,75],[52,55,72,75],[86],[75],[50,52,69],[42],[74],[52,69],[67,76,78],[48,50,60,69],[41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80],[81,82,83],[60],[66],[52,54,69,75,78],[52,87],[39],[40],[36,37,38]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"811c71eee4aa0ac5f7adf713323a5c41b0cf6c4e17367a34fbce379e12bbf0a4","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},"e7662e79ae21b1f16ea6bd668b238d79a7f4337f5ad95de573356bfa086275f8","3c5f2707759dc0cc56daf227012ee2881823acf5c95a3ab6c124c01818e5643c","44660be446f377579c640a5a46eec4d579b987b7d18517ee0a38bab91c273d8e","e8771d519b52c977d06fa45117fd4cef871479140db42b878293ccc4bb68faf3","882c72694118cbdab24a9141535fad450fc8b9695486f2f5b9b708135fb64d9d","475c31a8fc775e0bbe3e617eb5b7b816eb2cd66e46ca3d6bc3e91cc6604b1fa7",{"version":"215d8d9a2c480fd460127edc048d68d9931d3b27f95132253a6e71975f060bb1","affectsGlobalScope":true,"impliedFormat":1},{"version":"c438b413e94ff76dfa20ae005f33a1c84f2480d1d66e0fd687501020d0de9b50","impliedFormat":1},{"version":"bc6a78961535181265845bf9b9e8a147ffd0ca275097ceb670a9b92afa825152","impliedFormat":1},{"version":"987249e7b75023387c5fd9dc2f959ee777cb8989b7900f5a9eb4a67d290f2cba","impliedFormat":1},{"version":"123ec69e4b3a686eb49afd94ebe3292a5c84a867ecbcb6bb84bdd720a12af803","impliedFormat":1},{"version":"eb5197aade83cb0e360ac407289c53a8009e8fdae7939892a0240d30444496b6","affectsGlobalScope":true,"impliedFormat":1},{"version":"90c85ddbb8de82cd19198bda062065fc51b7407c0f206f2e399e65a52e979720","impliedFormat":1},{"version":"2636f61a2d5f76d4039c7110f65c407a028ec5265e03d855fc2cf62b198ac415","impliedFormat":1},{"version":"7e050b767ed10c7ffbc01f314defbf420bf0b5d54ce666e1c87507c035dfc191","impliedFormat":1},{"version":"7db7569fbb3e2b01ba8751c761cdd3f0debd104170d5665b7dc20a11630df3a9","impliedFormat":1},{"version":"cde4d7f6274468180fa39847b183aec22626e8212ff885d535c53f4cd7c225fd","affectsGlobalScope":true,"impliedFormat":1},{"version":"365e8358843a23944be84b810b1f774ea0223adfccc085f30fd7f4c13dc8a09f","affectsGlobalScope":true,"impliedFormat":1},{"version":"f87f95c015900102a5c0edcdebb17596de1382510e6cc17ab79f375d3505bb12","impliedFormat":1},{"version":"05b5679a897598ebe556ee93415b3af1f456e674ea82e4d7afcd716bfe43aa98","impliedFormat":1},{"version":"35fe02b2c10616cc7ac3db9c15778df7ed9c99276889efdd9be31f342841cfcd","impliedFormat":1},{"version":"1c3fe66943f587685aa4a42f664f794655da1767401d2f85910177dac78aa45d","impliedFormat":1},{"version":"c969bf4c7cdfe4d5dd28aa09432f99d09ad1d8d8b839959646579521d0467d1a","impliedFormat":1},{"version":"6c3857edaeeaaf43812f527830ebeece9266b6e8eb5271ab6d2f0008306c9947","impliedFormat":1},{"version":"bc6a77e750f4d34584e46b1405b771fb69a224197dd6bafe5b0392a29a70b665","impliedFormat":1},{"version":"8de97668870cfb20fc9d355d2ef379e897bdd8a98c889c7d8a6de40ee408ad52","impliedFormat":1},{"version":"ed4ae81196cccc10f297d228bca8d02e31058e6d723a3c5bc4be5fb3c61c6a34","impliedFormat":1},{"version":"84044697c8b3e08ef24e4b32cfe6440143d07e469a5e34bda0635276d32d9f35","impliedFormat":1},{"version":"4982d94cb6427263c8839d8d6324a8bbe129e931deb61a7380f8fad17ba2cfc0","impliedFormat":1},{"version":"ae4bc1dd4d9de7bbea6ce419db45af82a81358e6014c9e1235b5d252e06f8ab8","affectsGlobalScope":true,"impliedFormat":1},{"version":"3f6a1fd73c9dc3bd7f4b79bc075297ca6527904df69b0f2c2c94e4c4c7d9a32c","impliedFormat":1},{"version":"884560fda6c3868f925f022adc3a1289fe6507bbb45adb10fa1bbcc73a941bb0","impliedFormat":1},{"version":"6b2bb67b0942bcfce93e1d6fad5f70afd54940a2b13df7f311201fba54b2cbe9","impliedFormat":1},{"version":"acbed967a379b3e9f73237ba9473f8b337eeea14b7dc64d445430b5d695751da","impliedFormat":1},{"version":"272a46cc8f494677af587d17939e61e7db2b1925633e4da0c186ba17f6732521","impliedFormat":1},{"version":"d67e08745494b000da9410c1ae2fdc9965fc6d593fe0f381a47491f75417d457","impliedFormat":1},{"version":"b40652bf8ce4a18133b31349086523b219724dca8df3448c1a0742528e7ad5b9","impliedFormat":1},{"version":"c52eb62e3388a01b966c57bd14ca0ee9d5f6e656d6a18f6ce6b7cdece63734a3","impliedFormat":1},{"version":"a77fdb357c78b70142b2fdbbfb72958d69e8f765fd2a3c69946c1018e89d4638","impliedFormat":1},{"version":"3c2ac350c3baa61fd2b1925844109e098f4376d0768a4643abc82754fd752748","impliedFormat":1},{"version":"80ffc1786a5dab91b4aa59a72720f02f25df8b7c76b593e04d5e381aec284ccb","impliedFormat":1},{"version":"f5b9d446783f075eed9e93dfba1a5055b3fd61aab285fef3bbc761eadf598204","impliedFormat":1},{"version":"289be113bad7ee27ee7fa5b1e373c964c9789a5e9ed7db5ddcb631371120b953","impliedFormat":1},{"version":"baf0b82ffc5d2616f44a6fb1f81e8d798545bebf0c30f5d8b003a1dba1acfb3f","impliedFormat":1},{"version":"c6a5b34f1e725019445754f1e733585f113e0dced75f137bd3c4af5853d3f6ab","impliedFormat":1},{"version":"15fbe50526244954eb2f933546bca6cdcf0db16c9428d099b3b386c1db5799ab","impliedFormat":1},{"version":"d44028ae0127eb3e9fcfa5f55a8b81d64775ce15aca1020fe25c511bbb055834","impliedFormat":1},{"version":"2708349d5a11a5c2e5f3a0765259ebe7ee00cdcc8161cb9990cb4910328442a1","affectsGlobalScope":true,"impliedFormat":1},{"version":"4e0a4d84b15692ea8669fe4f3d05a4f204567906b1347da7a58b75f45bae48d3","impliedFormat":1},{"version":"ad1ae5ae98eceb9af99061e83e867b9897d267aebc8f3b938c9424deabadf4bb","impliedFormat":1},{"version":"6fbe72eed85e363ad83b763e03be824558c6ea7456c7259a48bcf0afdeb9d7e4","impliedFormat":1},{"version":"e61a21e9418f279bc480394a94d1581b2dee73747adcbdef999b6737e34d721b","impliedFormat":1},{"version":"5825520e2099309182c6e2a2b3061b060d42a098c58f67d1754880a7e2cce99a","impliedFormat":1},{"version":"c6db2268b4c7189a5d33b3bbf6616f3cc83bdad97468a25a172901d7ec28ff82","impliedFormat":1}],"root":[[35,40]],"options":{"allowSyntheticDefaultImports":true,"esModuleInterop":true,"module":5,"noImplicitAny":true,"noUnusedLocals":true,"noUnusedParameters":true,"outDir":"./","removeComments":true,"strict":true,"target":1},"referencedMap":[[86,1],[44,2],[45,3],[46,4],[47,5],[48,6],[49,7],[51,8],[53,9],[54,10],[55,11],[56,12],[57,13],[87,14],[58,8],[59,15],[60,16],[63,17],[64,18],[67,19],[68,20],[69,8],[72,21],[81,22],[84,23],[74,24],[75,25],[77,6],[79,26],[80,6],[88,27],[40,28],[37,29],[36,29],[39,30],[38,29]],"version":"5.9.3"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,12 @@
1
+ export interface ColorPickerLanguage {
2
+ hue: string;
3
+ saturation: string;
4
+ lightness: string;
5
+ alpha: string;
6
+ presets: string;
7
+ eyeDropper: string;
8
+ systemPicker: string;
9
+ }
1
10
  export interface ColorPickerOptions {
2
11
  defaultColor?: string;
3
12
  format?: "hex" | "rgb" | "hsl";
@@ -13,6 +22,7 @@ export interface ColorPickerOptions {
13
22
  inputPreview?: boolean;
14
23
  previewTarget?: string;
15
24
  previewProperty?: string;
25
+ language?: string;
16
26
  onChange?: (color: string) => void;
17
27
  onOpen?: () => void;
18
28
  onClose?: () => void;
@@ -43,6 +53,8 @@ export declare class ColorPicker {
43
53
  private compactButton;
44
54
  private inputPreview;
45
55
  private static instances;
56
+ static addTranslation(langCode: string, translation: ColorPickerLanguage): void;
57
+ static getAvailableLanguages(): string[];
46
58
  constructor(element: string | HTMLInputElement, options?: ColorPickerOptions);
47
59
  private init;
48
60
  private buildColorPicker;
@@ -82,3 +94,4 @@ export declare class ColorPicker {
82
94
  }
83
95
  export default function colorpicker(selector: string | HTMLInputElement, options?: ColorPickerOptions): ColorPicker;
84
96
  export declare function initColorPickers(root?: Document | HTMLElement): ColorPicker[];
97
+ export * as languages from './l10n';
@@ -0,0 +1,3 @@
1
+ import { ColorPickerLanguage } from '../index';
2
+ declare const de: ColorPickerLanguage;
3
+ export default de;
@@ -0,0 +1,3 @@
1
+ import { ColorPickerLanguage } from '../index';
2
+ declare const en: ColorPickerLanguage;
3
+ export default en;
@@ -0,0 +1,3 @@
1
+ export { default as en } from './en';
2
+ export { default as de } from './de';
3
+ export { default as sl } from './sl';
@@ -0,0 +1,3 @@
1
+ import { ColorPickerLanguage } from '../index';
2
+ declare const sl: ColorPickerLanguage;
3
+ export default sl;
package/package.json CHANGED
@@ -1,10 +1,27 @@
1
1
  {
2
2
  "name": "pickit-color",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "A modern, accessible color picker with HSL support, presets, slider mode, and screen color picking",
5
5
  "main": "dist/colorpicker.js",
6
6
  "module": "dist/esm/colorpicker/index.js",
7
7
  "types": "dist/colorpicker.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/esm/colorpicker/index.js",
11
+ "require": "./dist/colorpicker.js",
12
+ "types": "./dist/colorpicker.d.ts"
13
+ },
14
+ "./l10n": {
15
+ "import": "./dist/esm/colorpicker/l10n/index.js",
16
+ "require": "./dist/l10n/index.js",
17
+ "types": "./dist/l10n/index.d.ts"
18
+ },
19
+ "./l10n/*": {
20
+ "import": "./dist/esm/colorpicker/l10n/*.js",
21
+ "require": "./dist/l10n/*.js",
22
+ "types": "./dist/l10n/*.d.ts"
23
+ }
24
+ },
8
25
  "author": {
9
26
  "name": "Thomas Skerbis",
10
27
  "email": "thomas@klxm.de",
package/src/index.ts CHANGED
@@ -4,6 +4,41 @@
4
4
  * Supports HSL, RGB, HEX formats with keyboard navigation
5
5
  */
6
6
 
7
+ import * as languages from './l10n';
8
+
9
+ export interface ColorPickerLanguage {
10
+ hue: string;
11
+ saturation: string;
12
+ lightness: string;
13
+ alpha: string;
14
+ presets: string;
15
+ eyeDropper: string;
16
+ systemPicker: string;
17
+ }
18
+
19
+ // Initialize translations with built-in languages
20
+ const translations: Record<string, ColorPickerLanguage> = {
21
+ en: languages.en,
22
+ de: languages.de,
23
+ sl: languages.sl
24
+ };
25
+
26
+ function detectLanguage(): string {
27
+ // Try HTML lang attribute
28
+ const htmlLang = document.documentElement.lang;
29
+ if (htmlLang) {
30
+ const lang = htmlLang.split('-')[0].toLowerCase();
31
+ if (translations[lang]) return lang;
32
+ }
33
+
34
+ // Try browser language
35
+ const browserLang = navigator.language.split('-')[0].toLowerCase();
36
+ if (translations[browserLang]) return browserLang;
37
+
38
+ // Default to English
39
+ return 'en';
40
+ }
41
+
7
42
  export interface ColorPickerOptions {
8
43
  defaultColor?: string;
9
44
  format?: "hex" | "rgb" | "hsl";
@@ -19,6 +54,7 @@ export interface ColorPickerOptions {
19
54
  inputPreview?: boolean;
20
55
  previewTarget?: string;
21
56
  previewProperty?: string;
57
+ language?: string;
22
58
  onChange?: (color: string) => void;
23
59
  onOpen?: () => void;
24
60
  onClose?: () => void;
@@ -66,6 +102,33 @@ export class ColorPicker {
66
102
 
67
103
  private static instances: Map<HTMLElement, ColorPicker> = new Map();
68
104
 
105
+ /**
106
+ * Add a custom translation for the ColorPicker
107
+ * @param langCode - Language code (e.g., 'fr', 'es', 'it')
108
+ * @param translation - Translation object with all required strings
109
+ * @example
110
+ * ColorPicker.addTranslation('fr', {
111
+ * hue: 'Teinte',
112
+ * saturation: 'Saturation et luminosité',
113
+ * lightness: 'Luminosité',
114
+ * alpha: 'Alpha',
115
+ * presets: 'Couleurs prédéfinies',
116
+ * eyeDropper: 'Pipette à couleurs',
117
+ * systemPicker: 'Sélecteur système'
118
+ * });
119
+ */
120
+ static addTranslation(langCode: string, translation: ColorPickerLanguage): void {
121
+ translations[langCode.toLowerCase()] = translation;
122
+ }
123
+
124
+ /**
125
+ * Get all available language codes
126
+ * @returns Array of language codes
127
+ */
128
+ static getAvailableLanguages(): string[] {
129
+ return Object.keys(translations);
130
+ }
131
+
69
132
  constructor(
70
133
  element: string | HTMLInputElement,
71
134
  options: ColorPickerOptions = {}
@@ -107,6 +170,7 @@ export class ColorPicker {
107
170
  inputPreview: options.inputPreview ?? false,
108
171
  previewTarget: options.previewTarget || "",
109
172
  previewProperty: options.previewProperty || "background-color",
173
+ language: options.language || detectLanguage(),
110
174
  onChange: options.onChange || (() => {}),
111
175
  onOpen: options.onOpen || (() => {}),
112
176
  onClose: options.onClose || (() => {}),
@@ -114,12 +178,12 @@ export class ColorPicker {
114
178
  position: options.position || "auto",
115
179
  closeOnSelect: options.closeOnSelect ?? true,
116
180
  ariaLabels: {
117
- hue: options.ariaLabels?.hue || "Hue",
181
+ hue: options.ariaLabels?.hue || translations[options.language || detectLanguage()].hue,
118
182
  saturation:
119
- options.ariaLabels?.saturation || "Saturation and Lightness",
120
- lightness: options.ariaLabels?.lightness || "Lightness",
121
- alpha: options.ariaLabels?.alpha || "Alpha",
122
- presets: options.ariaLabels?.presets || "Preset colors",
183
+ options.ariaLabels?.saturation || translations[options.language || detectLanguage()].saturation,
184
+ lightness: options.ariaLabels?.lightness || translations[options.language || detectLanguage()].lightness,
185
+ alpha: options.ariaLabels?.alpha || translations[options.language || detectLanguage()].alpha,
186
+ presets: options.ariaLabels?.presets || translations[options.language || detectLanguage()].presets,
123
187
  },
124
188
  };
125
189
 
@@ -1326,6 +1390,10 @@ export function initColorPickers(root: Document | HTMLElement = document): Color
1326
1390
  case 'previewProperty':
1327
1391
  options.previewProperty = value;
1328
1392
  break;
1393
+ case 'lang':
1394
+ case 'language':
1395
+ options.language = value;
1396
+ break;
1329
1397
  }
1330
1398
  });
1331
1399
  }
@@ -1361,6 +1429,9 @@ export function initColorPickers(root: Document | HTMLElement = document): Color
1361
1429
  return pickers;
1362
1430
  }
1363
1431
 
1432
+ // Export language modules for external use
1433
+ export * as languages from './l10n';
1434
+
1364
1435
  // Auto-init on DOMContentLoaded
1365
1436
  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
1366
1437
  if (document.readyState === 'loading') {
@@ -0,0 +1,94 @@
1
+ # 🌍 Language Files
2
+
3
+ This directory contains all language translations for Pickit Color.
4
+
5
+ ## Contributing a Translation
6
+
7
+ ### 1. Create a new language file
8
+
9
+ Copy `en.ts` and rename it to your [ISO 639-1 language code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes):
10
+
11
+ ```bash
12
+ cp en.ts fr.ts # For French
13
+ cp en.ts es.ts # For Spanish
14
+ cp en.ts it.ts # For Italian
15
+ ```
16
+
17
+ ### 2. Translate the strings
18
+
19
+ ```typescript
20
+ import { ColorPickerLanguage } from '../index';
21
+
22
+ const fr: ColorPickerLanguage = {
23
+ hue: "Teinte",
24
+ saturation: "Saturation et luminosité",
25
+ lightness: "Luminosité",
26
+ alpha: "Alpha",
27
+ presets: "Couleurs prédéfinies",
28
+ eyeDropper: "Pipette à couleurs",
29
+ systemPicker: "Sélecteur système"
30
+ };
31
+
32
+ export default fr;
33
+ ```
34
+
35
+ ### 3. Export in index.ts
36
+
37
+ Add your language to `index.ts`:
38
+
39
+ ```typescript
40
+ export { default as fr } from './fr';
41
+ ```
42
+
43
+ ### 4. Submit a Pull Request
44
+
45
+ That's it! Your translation will be available in the next release.
46
+
47
+ ## Translation Guidelines
48
+
49
+ - **hue**: Label for the hue slider (0-360°)
50
+ - **saturation**: Label for the 2D saturation/lightness picker
51
+ - **lightness**: Label for the lightness slider
52
+ - **alpha**: Label for transparency/alpha slider
53
+ - **presets**: Label for preset colors section
54
+ - **eyeDropper**: Tooltip for the eyedropper button (screen color picker)
55
+ - **systemPicker**: Tooltip for system color picker button
56
+
57
+ Keep labels concise but descriptive. They will be used as ARIA labels for screen readers.
58
+
59
+ ## Available Languages
60
+
61
+ - 🇬🇧 **en** - English
62
+ - 🇩🇪 **de** - Deutsch (German)
63
+ - 🇸🇮 **sl** - Slovenščina (Slovenian)
64
+
65
+ ## External Language Packages
66
+
67
+ You can also publish language packs as separate npm packages:
68
+
69
+ ```typescript
70
+ // pickit-color-lang-fr package
71
+ import { ColorPicker } from 'pickit-color';
72
+
73
+ export const fr = { /* ... */ };
74
+
75
+ // Auto-register on import
76
+ ColorPicker.addTranslation('fr', fr);
77
+ ```
78
+
79
+ Install and import:
80
+
81
+ ```bash
82
+ npm install pickit-color-lang-fr
83
+ ```
84
+
85
+ ```javascript
86
+ import 'pickit-color-lang-fr';
87
+ import colorpicker from 'pickit-color';
88
+
89
+ colorpicker('#input', { language: 'fr' });
90
+ ```
91
+
92
+ ---
93
+
94
+ Thank you for contributing! 🙏
package/src/l10n/de.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ColorPickerLanguage } from '../index';
2
+
3
+ const de: ColorPickerLanguage = {
4
+ hue: "Farbton",
5
+ saturation: "Sättigung und Helligkeit",
6
+ lightness: "Helligkeit",
7
+ alpha: "Transparenz",
8
+ presets: "Vordefinierte Farben",
9
+ eyeDropper: "Farbe vom Bildschirm aufnehmen",
10
+ systemPicker: "System-Farbwähler"
11
+ };
12
+
13
+ export default de;
package/src/l10n/en.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ColorPickerLanguage } from '../index';
2
+
3
+ const en: ColorPickerLanguage = {
4
+ hue: "Hue",
5
+ saturation: "Saturation and Lightness",
6
+ lightness: "Lightness",
7
+ alpha: "Alpha",
8
+ presets: "Preset colors",
9
+ eyeDropper: "Pick color from screen",
10
+ systemPicker: "System color picker"
11
+ };
12
+
13
+ export default en;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Pickit Color - Language Files
3
+ *
4
+ * To contribute a translation:
5
+ * 1. Copy en.ts or any existing language file
6
+ * 2. Translate all strings
7
+ * 3. Export your language in this file
8
+ * 4. Submit a PR!
9
+ */
10
+
11
+ export { default as en } from './en';
12
+ export { default as de } from './de';
13
+ export { default as sl } from './sl';
14
+
15
+ // Example for contributors:
16
+ // export { default as fr } from './fr';
17
+ // export { default as es } from './es';
package/src/l10n/sl.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ColorPickerLanguage } from '../index';
2
+
3
+ const sl: ColorPickerLanguage = {
4
+ hue: "Odtenek",
5
+ saturation: "Nasičenost in svetlost",
6
+ lightness: "Svetlost",
7
+ alpha: "Prosojnost",
8
+ presets: "Prednastavljene barve",
9
+ eyeDropper: "Izberi barvo z zaslona",
10
+ systemPicker: "Sistemski izbirnik barv"
11
+ };
12
+
13
+ export default sl;