From c8ba7dbed7d4fca253ddf24cd90eb15be33a2c0c Mon Sep 17 00:00:00 2001 From: Mayuran Visakan Date: Fri, 23 Jun 2023 18:28:32 +0100 Subject: [PATCH] Update spacing --- .editorconfig | 20 +- .eslintrc | 44 +- README.md | 14 +- main.js | 6842 ++++++++++++++++++------------------- src/CodeBlockHighlight.ts | 448 +-- src/Const.ts | 1686 ++++----- src/EditingView.ts | 0 src/Header.ts | 402 +-- src/ReadingView.ts | 225 +- src/ReadingViewOld.ts | 230 ++ src/Settings.ts | 418 +-- src/SettingsTab.ts | 1410 ++++---- src/Utils.ts | 578 ++-- src/main.ts | 99 +- styles.css | 238 +- toDo.md | 22 - tsconfig.json | 42 +- 17 files changed, 6282 insertions(+), 6436 deletions(-) create mode 100644 src/EditingView.ts create mode 100644 src/ReadingViewOld.ts delete mode 100644 toDo.md diff --git a/.editorconfig b/.editorconfig index 84b8a66..fca7ede 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,10 +1,10 @@ -# top-most EditorConfig file -root = true - -[*] -charset = utf-8 -end_of_line = lf -insert_final_newline = true -indent_style = tab -indent_size = 4 -tab_width = 4 +# Top Level EditorConfig file +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_style = tab +indent_size = 4 +tab_width = 4 diff --git a/.eslintrc b/.eslintrc index 0807290..5bf9e7c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,23 +1,23 @@ { - "root": true, - "parser": "@typescript-eslint/parser", - "env": { "node": true }, - "plugins": [ - "@typescript-eslint" - ], - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/eslint-recommended", - "plugin:@typescript-eslint/recommended" - ], - "parserOptions": { - "sourceType": "module" - }, - "rules": { - "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }], - "@typescript-eslint/ban-ts-comment": "off", - "no-prototype-builtins": "off", - "@typescript-eslint/no-empty-function": "off" - } - } \ No newline at end of file + "root": true, + "parser": "@typescript-eslint/parser", + "env": { "node": true }, + "plugins": [ + "@typescript-eslint" + ], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended" + ], + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }], + "@typescript-eslint/ban-ts-comment": "off", + "no-prototype-builtins": "off", + "@typescript-eslint/no-empty-function": "off" + } + } diff --git a/README.md b/README.md index a5ebda3..083dcef 100644 --- a/README.md +++ b/README.md @@ -18,19 +18,19 @@ The plugin lets you customize the codeblocks in the following way: - Exclude languages. You can define languages separated by a comma, to which the plugin will not apply. - Set background color for codeblocks. - Lets you highlight specific lines. - - Customize highlight color + - Customize highlight color - Lets you define multiple highlight colors to highlight lines. - Display filename - - If a filename is defined a header will be inserted, where it is possible to customize the text (color, bold, italic), and the header (color, header line) itself as well + - If a filename is defined a header will be inserted, where it is possible to customize the text (color, bold, italic), and the header (color, header line) itself as well - Fold code - - If the header is displayed (either by defining filename or other way explained below), you can click on the header to fold the codeblock below it + - If the header is displayed (either by defining filename or other way explained below), you can click on the header to fold the codeblock below it - Display codeblock language. This displays the language (if specified) of the codeblock in the header. - - Customize text color, background color, bold text, italic text for the language tag inside the header. - - By default the language tag is only displayed, if the header is displayed, and a if a language is defined for a codeblock. You can however force, to always display the codeblock language, even if the header would not be displayed. + - Customize text color, background color, bold text, italic text for the language tag inside the header. + - By default the language tag is only displayed, if the header is displayed, and a if a language is defined for a codeblock. You can however force, to always display the codeblock language, even if the header would not be displayed. - Display codeblock language icon (if available for the specified language) in the header. - Add line numbers to codeblocks - - Customize if the linenumber should also be highlighted, if a line is highlighted - - Customize background color, and color of the line numbers + - Customize if the linenumber should also be highlighted, if a line is highlighted + - Customize background color, and color of the line numbers ## Themes diff --git a/main.js b/main.js index 3df8faa..242c722 100644 --- a/main.js +++ b/main.js @@ -10,706 +10,707 @@ var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __commonJS = (cb, mod) => function __require() { - return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; }; var __export = (target, all) => { - for (var name in all) - __defProp(target, name, { get: all[name], enumerable: true }); + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { - if (from && typeof from === "object" || typeof from === "function") { - for (let key of __getOwnPropNames(from)) - if (!__hasOwnProp.call(to, key) && key !== except) - __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); - } - return to; + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( - // If the importer is in node compatibility mode or this is not an ESM - // file that has been converted to a CommonJS file using a Babel- - // compatible transform (i.e. "__esModule" has not been set), then set - // "default" to the CommonJS "module.exports" for node compatibility. - isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, - mod + // If the importer is in node compatibility mode or this is not an ESM + // file that has been converted to a CommonJS file using a Babel- + // compatible transform (i.e. "__esModule" has not been set), then set + // "default" to the CommonJS "module.exports" for node compatibility. + isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, + mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // node_modules/@simonwep/pickr/dist/pickr.min.js var require_pickr_min = __commonJS({ - "node_modules/@simonwep/pickr/dist/pickr.min.js"(exports, module2) { - !function(t2, e2) { - "object" == typeof exports && "object" == typeof module2 ? module2.exports = e2() : "function" == typeof define && define.amd ? define([], e2) : "object" == typeof exports ? exports.Pickr = e2() : t2.Pickr = e2(); - }(self, function() { - return (() => { - "use strict"; - var t2 = { d: (e3, o3) => { - for (var n3 in o3) - t2.o(o3, n3) && !t2.o(e3, n3) && Object.defineProperty(e3, n3, { enumerable: true, get: o3[n3] }); - }, o: (t3, e3) => Object.prototype.hasOwnProperty.call(t3, e3), r: (t3) => { - "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t3, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t3, "__esModule", { value: true }); - } }, e2 = {}; - t2.d(e2, { default: () => L2 }); - var o2 = {}; - function n2(t3, e3, o3, n3, i3 = {}) { - e3 instanceof HTMLCollection || e3 instanceof NodeList ? e3 = Array.from(e3) : Array.isArray(e3) || (e3 = [e3]), Array.isArray(o3) || (o3 = [o3]); - for (const s3 of e3) - for (const e4 of o3) - s3[t3](e4, n3, { capture: false, ...i3 }); - return Array.prototype.slice.call(arguments, 1); - } - t2.r(o2), t2.d(o2, { adjustableInputNumbers: () => p2, createElementFromString: () => r2, createFromTemplate: () => a2, eventPath: () => l2, off: () => s2, on: () => i2, resolveElement: () => c2 }); - const i2 = n2.bind(null, "addEventListener"), s2 = n2.bind(null, "removeEventListener"); - function r2(t3) { - const e3 = document.createElement("div"); - return e3.innerHTML = t3.trim(), e3.firstElementChild; - } - function a2(t3) { - const e3 = (t4, e4) => { - const o4 = t4.getAttribute(e4); - return t4.removeAttribute(e4), o4; - }, o3 = (t4, n3 = {}) => { - const i3 = e3(t4, ":obj"), s3 = e3(t4, ":ref"), r3 = i3 ? n3[i3] = {} : n3; - s3 && (n3[s3] = t4); - for (const n4 of Array.from(t4.children)) { - const t5 = e3(n4, ":arr"), i4 = o3(n4, t5 ? {} : r3); - t5 && (r3[t5] || (r3[t5] = [])).push(Object.keys(i4).length ? i4 : n4); - } - return n3; - }; - return o3(r2(t3)); - } - function l2(t3) { - let e3 = t3.path || t3.composedPath && t3.composedPath(); - if (e3) - return e3; - let o3 = t3.target.parentElement; - for (e3 = [t3.target, o3]; o3 = o3.parentElement; ) - e3.push(o3); - return e3.push(document, window), e3; - } - function c2(t3) { - return t3 instanceof Element ? t3 : "string" == typeof t3 ? t3.split(/>>/g).reduce((t4, e3, o3, n3) => (t4 = t4.querySelector(e3), o3 < n3.length - 1 ? t4.shadowRoot : t4), document) : null; - } - function p2(t3, e3 = (t4) => t4) { - function o3(o4) { - const n3 = [1e-3, 0.01, 0.1][Number(o4.shiftKey || 2 * o4.ctrlKey)] * (o4.deltaY < 0 ? 1 : -1); - let i3 = 0, s3 = t3.selectionStart; - t3.value = t3.value.replace(/[\d.]+/g, (t4, o5) => o5 <= s3 && o5 + t4.length >= s3 ? (s3 = o5, e3(Number(t4), n3, i3)) : (i3++, t4)), t3.focus(), t3.setSelectionRange(s3, s3), o4.preventDefault(), t3.dispatchEvent(new Event("input")); - } - i2(t3, "focus", () => i2(window, "wheel", o3, { passive: false })), i2(t3, "blur", () => s2(window, "wheel", o3)); - } - const { min: u2, max: h2, floor: d2, round: m2 } = Math; - function f2(t3, e3, o3) { - e3 /= 100, o3 /= 100; - const n3 = d2(t3 = t3 / 360 * 6), i3 = t3 - n3, s3 = o3 * (1 - e3), r3 = o3 * (1 - i3 * e3), a3 = o3 * (1 - (1 - i3) * e3), l3 = n3 % 6; - return [255 * [o3, r3, s3, s3, a3, o3][l3], 255 * [a3, o3, o3, r3, s3, s3][l3], 255 * [s3, s3, a3, o3, o3, r3][l3]]; - } - function v2(t3, e3, o3) { - const n3 = (2 - (e3 /= 100)) * (o3 /= 100) / 2; - return 0 !== n3 && (e3 = 1 === n3 ? 0 : n3 < 0.5 ? e3 * o3 / (2 * n3) : e3 * o3 / (2 - 2 * n3)), [t3, 100 * e3, 100 * n3]; - } - function b2(t3, e3, o3) { - const n3 = u2(t3 /= 255, e3 /= 255, o3 /= 255), i3 = h2(t3, e3, o3), s3 = i3 - n3; - let r3, a3; - if (0 === s3) - r3 = a3 = 0; - else { - a3 = s3 / i3; - const n4 = ((i3 - t3) / 6 + s3 / 2) / s3, l3 = ((i3 - e3) / 6 + s3 / 2) / s3, c3 = ((i3 - o3) / 6 + s3 / 2) / s3; - t3 === i3 ? r3 = c3 - l3 : e3 === i3 ? r3 = 1 / 3 + n4 - c3 : o3 === i3 && (r3 = 2 / 3 + l3 - n4), r3 < 0 ? r3 += 1 : r3 > 1 && (r3 -= 1); - } - return [360 * r3, 100 * a3, 100 * i3]; - } - function y2(t3, e3, o3, n3) { - e3 /= 100, o3 /= 100; - return [...b2(255 * (1 - u2(1, (t3 /= 100) * (1 - (n3 /= 100)) + n3)), 255 * (1 - u2(1, e3 * (1 - n3) + n3)), 255 * (1 - u2(1, o3 * (1 - n3) + n3)))]; - } - function g2(t3, e3, o3) { - e3 /= 100; - const n3 = 2 * (e3 *= (o3 /= 100) < 0.5 ? o3 : 1 - o3) / (o3 + e3) * 100, i3 = 100 * (o3 + e3); - return [t3, isNaN(n3) ? 0 : n3, i3]; - } - function _2(t3) { - return b2(...t3.match(/.{2}/g).map((t4) => parseInt(t4, 16))); - } - function w2(t3) { - t3 = t3.match(/^[a-zA-Z]+$/) ? function(t4) { - if ("black" === t4.toLowerCase()) - return "#000"; - const e4 = document.createElement("canvas").getContext("2d"); - return e4.fillStyle = t4, "#000" === e4.fillStyle ? null : e4.fillStyle; - }(t3) : t3; - const e3 = { cmyk: /^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i, rgba: /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i, hsla: /^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i, hsva: /^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i, hexa: /^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i }, o3 = (t4) => t4.map((t5) => /^(|\d+)\.\d+|\d+$/.test(t5) ? Number(t5) : void 0); - let n3; - t: - for (const i3 in e3) { - if (!(n3 = e3[i3].exec(t3))) - continue; - const s3 = (t4) => !!n3[2] == ("number" == typeof t4); - switch (i3) { - case "cmyk": { - const [, t4, e4, s4, r3] = o3(n3); - if (t4 > 100 || e4 > 100 || s4 > 100 || r3 > 100) - break t; - return { values: y2(t4, e4, s4, r3), type: i3 }; - } - case "rgba": { - const [, , , t4, e4, r3, a3] = o3(n3); - if (t4 > 255 || e4 > 255 || r3 > 255 || a3 < 0 || a3 > 1 || !s3(a3)) - break t; - return { values: [...b2(t4, e4, r3), a3], a: a3, type: i3 }; - } - case "hexa": { - let [, t4] = n3; - 4 !== t4.length && 3 !== t4.length || (t4 = t4.split("").map((t5) => t5 + t5).join("")); - const e4 = t4.substring(0, 6); - let o4 = t4.substring(6); - return o4 = o4 ? parseInt(o4, 16) / 255 : void 0, { values: [..._2(e4), o4], a: o4, type: i3 }; - } - case "hsla": { - const [, , , t4, e4, r3, a3] = o3(n3); - if (t4 > 360 || e4 > 100 || r3 > 100 || a3 < 0 || a3 > 1 || !s3(a3)) - break t; - return { values: [...g2(t4, e4, r3), a3], a: a3, type: i3 }; - } - case "hsva": { - const [, , , t4, e4, r3, a3] = o3(n3); - if (t4 > 360 || e4 > 100 || r3 > 100 || a3 < 0 || a3 > 1 || !s3(a3)) - break t; - return { values: [t4, e4, r3, a3], a: a3, type: i3 }; - } - } - } - return { values: null, type: null }; - } - function A2(t3 = 0, e3 = 0, o3 = 0, n3 = 1) { - const i3 = (t4, e4) => (o4 = -1) => e4(~o4 ? t4.map((t5) => Number(t5.toFixed(o4))) : t4), s3 = { h: t3, s: e3, v: o3, a: n3, toHSVA() { - const t4 = [s3.h, s3.s, s3.v, s3.a]; - return t4.toString = i3(t4, (t5) => `hsva(${t5[0]}, ${t5[1]}%, ${t5[2]}%, ${s3.a})`), t4; - }, toHSLA() { - const t4 = [...v2(s3.h, s3.s, s3.v), s3.a]; - return t4.toString = i3(t4, (t5) => `hsla(${t5[0]}, ${t5[1]}%, ${t5[2]}%, ${s3.a})`), t4; - }, toRGBA() { - const t4 = [...f2(s3.h, s3.s, s3.v), s3.a]; - return t4.toString = i3(t4, (t5) => `rgba(${t5[0]}, ${t5[1]}, ${t5[2]}, ${s3.a})`), t4; - }, toCMYK() { - const t4 = function(t5, e4, o4) { - const n4 = f2(t5, e4, o4), i4 = n4[0] / 255, s4 = n4[1] / 255, r3 = n4[2] / 255, a3 = u2(1 - i4, 1 - s4, 1 - r3); - return [100 * (1 === a3 ? 0 : (1 - i4 - a3) / (1 - a3)), 100 * (1 === a3 ? 0 : (1 - s4 - a3) / (1 - a3)), 100 * (1 === a3 ? 0 : (1 - r3 - a3) / (1 - a3)), 100 * a3]; - }(s3.h, s3.s, s3.v); - return t4.toString = i3(t4, (t5) => `cmyk(${t5[0]}%, ${t5[1]}%, ${t5[2]}%, ${t5[3]}%)`), t4; - }, toHEXA() { - const t4 = function(t5, e5, o4) { - return f2(t5, e5, o4).map((t6) => m2(t6).toString(16).padStart(2, "0")); - }(s3.h, s3.s, s3.v), e4 = s3.a >= 1 ? "" : Number((255 * s3.a).toFixed(0)).toString(16).toUpperCase().padStart(2, "0"); - return e4 && t4.push(e4), t4.toString = () => `#${t4.join("").toUpperCase()}`, t4; - }, clone: () => A2(s3.h, s3.s, s3.v, s3.a) }; - return s3; - } - const C2 = (t3) => Math.max(Math.min(t3, 1), 0); - function $2(t3) { - const e3 = { options: Object.assign({ lock: null, onchange: () => 0, onstop: () => 0 }, t3), _keyboard(t4) { - const { options: o4 } = e3, { type: n4, key: i3 } = t4; - if (document.activeElement === o4.wrapper) { - const { lock: o5 } = e3.options, s3 = "ArrowUp" === i3, r4 = "ArrowRight" === i3, a3 = "ArrowDown" === i3, l3 = "ArrowLeft" === i3; - if ("keydown" === n4 && (s3 || r4 || a3 || l3)) { - let n5 = 0, i4 = 0; - "v" === o5 ? n5 = s3 || r4 ? 1 : -1 : "h" === o5 ? n5 = s3 || r4 ? -1 : 1 : (i4 = s3 ? -1 : a3 ? 1 : 0, n5 = l3 ? -1 : r4 ? 1 : 0), e3.update(C2(e3.cache.x + 0.01 * n5), C2(e3.cache.y + 0.01 * i4)), t4.preventDefault(); - } else - i3.startsWith("Arrow") && (e3.options.onstop(), t4.preventDefault()); - } - }, _tapstart(t4) { - i2(document, ["mouseup", "touchend", "touchcancel"], e3._tapstop), i2(document, ["mousemove", "touchmove"], e3._tapmove), t4.cancelable && t4.preventDefault(), e3._tapmove(t4); - }, _tapmove(t4) { - const { options: o4, cache: n4 } = e3, { lock: i3, element: s3, wrapper: r4 } = o4, a3 = r4.getBoundingClientRect(); - let l3 = 0, c3 = 0; - if (t4) { - const e4 = t4 && t4.touches && t4.touches[0]; - l3 = t4 ? (e4 || t4).clientX : 0, c3 = t4 ? (e4 || t4).clientY : 0, l3 < a3.left ? l3 = a3.left : l3 > a3.left + a3.width && (l3 = a3.left + a3.width), c3 < a3.top ? c3 = a3.top : c3 > a3.top + a3.height && (c3 = a3.top + a3.height), l3 -= a3.left, c3 -= a3.top; - } else - n4 && (l3 = n4.x * a3.width, c3 = n4.y * a3.height); - "h" !== i3 && (s3.style.left = `calc(${l3 / a3.width * 100}% - ${s3.offsetWidth / 2}px)`), "v" !== i3 && (s3.style.top = `calc(${c3 / a3.height * 100}% - ${s3.offsetHeight / 2}px)`), e3.cache = { x: l3 / a3.width, y: c3 / a3.height }; - const p3 = C2(l3 / a3.width), u3 = C2(c3 / a3.height); - switch (i3) { - case "v": - return o4.onchange(p3); - case "h": - return o4.onchange(u3); - default: - return o4.onchange(p3, u3); - } - }, _tapstop() { - e3.options.onstop(), s2(document, ["mouseup", "touchend", "touchcancel"], e3._tapstop), s2(document, ["mousemove", "touchmove"], e3._tapmove); - }, trigger() { - e3._tapmove(); - }, update(t4 = 0, o4 = 0) { - const { left: n4, top: i3, width: s3, height: r4 } = e3.options.wrapper.getBoundingClientRect(); - "h" === e3.options.lock && (o4 = t4), e3._tapmove({ clientX: n4 + s3 * t4, clientY: i3 + r4 * o4 }); - }, destroy() { - const { options: t4, _tapstart: o4, _keyboard: n4 } = e3; - s2(document, ["keydown", "keyup"], n4), s2([t4.wrapper, t4.element], "mousedown", o4), s2([t4.wrapper, t4.element], "touchstart", o4, { passive: false }); - } }, { options: o3, _tapstart: n3, _keyboard: r3 } = e3; - return i2([o3.wrapper, o3.element], "mousedown", n3), i2([o3.wrapper, o3.element], "touchstart", n3, { passive: false }), i2(document, ["keydown", "keyup"], r3), e3; - } - function k2(t3 = {}) { - t3 = Object.assign({ onchange: () => 0, className: "", elements: [] }, t3); - const e3 = i2(t3.elements, "click", (e4) => { - t3.elements.forEach((o3) => o3.classList[e4.target === o3 ? "add" : "remove"](t3.className)), t3.onchange(e4), e4.stopPropagation(); - }); - return { destroy: () => s2(...e3) }; - } - const S2 = { variantFlipOrder: { start: "sme", middle: "mse", end: "ems" }, positionFlipOrder: { top: "tbrl", right: "rltb", bottom: "btrl", left: "lrbt" }, position: "bottom", margin: 8 }, O2 = (t3, e3, o3) => { - const { container: n3, margin: i3, position: s3, variantFlipOrder: r3, positionFlipOrder: a3 } = { container: document.documentElement.getBoundingClientRect(), ...S2, ...o3 }, { left: l3, top: c3 } = e3.style; - e3.style.left = "0", e3.style.top = "0"; - const p3 = t3.getBoundingClientRect(), u3 = e3.getBoundingClientRect(), h3 = { t: p3.top - u3.height - i3, b: p3.bottom + i3, r: p3.right + i3, l: p3.left - u3.width - i3 }, d3 = { vs: p3.left, vm: p3.left + p3.width / 2 + -u3.width / 2, ve: p3.left + p3.width - u3.width, hs: p3.top, hm: p3.bottom - p3.height / 2 - u3.height / 2, he: p3.bottom - u3.height }, [m3, f3 = "middle"] = s3.split("-"), v3 = a3[m3], b3 = r3[f3], { top: y3, left: g3, bottom: _3, right: w3 } = n3; - for (const t4 of v3) { - const o4 = "t" === t4 || "b" === t4, n4 = h3[t4], [i4, s4] = o4 ? ["top", "left"] : ["left", "top"], [r4, a4] = o4 ? [u3.height, u3.width] : [u3.width, u3.height], [l4, c4] = o4 ? [_3, w3] : [w3, _3], [p4, m4] = o4 ? [y3, g3] : [g3, y3]; - if (!(n4 < p4 || n4 + r4 > l4)) - for (const r5 of b3) { - const l5 = d3[(o4 ? "v" : "h") + r5]; - if (!(l5 < m4 || l5 + a4 > c4)) - return e3.style[s4] = l5 - u3[s4] + "px", e3.style[i4] = n4 - u3[i4] + "px", t4 + r5; - } - } - return e3.style.left = l3, e3.style.top = c3, null; - }; - function E2(t3, e3, o3) { - return e3 in t3 ? Object.defineProperty(t3, e3, { value: o3, enumerable: true, configurable: true, writable: true }) : t3[e3] = o3, t3; - } - class L2 { - constructor(t3) { - E2(this, "_initializingActive", true), E2(this, "_recalc", true), E2(this, "_nanopop", null), E2(this, "_root", null), E2(this, "_color", A2()), E2(this, "_lastColor", A2()), E2(this, "_swatchColors", []), E2(this, "_setupAnimationFrame", null), E2(this, "_eventListener", { init: [], save: [], hide: [], show: [], clear: [], change: [], changestop: [], cancel: [], swatchselect: [] }), this.options = t3 = Object.assign({ ...L2.DEFAULT_OPTIONS }, t3); - const { swatches: e3, components: o3, theme: n3, sliders: i3, lockOpacity: s3, padding: r3 } = t3; - ["nano", "monolith"].includes(n3) && !i3 && (t3.sliders = "h"), o3.interaction || (o3.interaction = {}); - const { preview: a3, opacity: l3, hue: c3, palette: p3 } = o3; - o3.opacity = !s3 && l3, o3.palette = p3 || a3 || l3 || c3, this._preBuild(), this._buildComponents(), this._bindEvents(), this._finalBuild(), e3 && e3.length && e3.forEach((t4) => this.addSwatch(t4)); - const { button: u3, app: h3 } = this._root; - this._nanopop = ((t4, e4, o4) => { - const n4 = "object" != typeof t4 || t4 instanceof HTMLElement ? { reference: t4, popper: e4, ...o4 } : t4; - return { update(t5 = n4) { - const { reference: e5, popper: o5 } = Object.assign(n4, t5); - if (!o5 || !e5) - throw new Error("Popper- or reference-element missing."); - return O2(e5, o5, n4); - } }; - })(u3, h3, { margin: r3 }), u3.setAttribute("role", "button"), u3.setAttribute("aria-label", this._t("btn:toggle")); - const d3 = this; - this._setupAnimationFrame = requestAnimationFrame(function e4() { - if (!h3.offsetWidth) - return requestAnimationFrame(e4); - d3.setColor(t3.default), d3._rePositioningPicker(), t3.defaultRepresentation && (d3._representation = t3.defaultRepresentation, d3.setColorRepresentation(d3._representation)), t3.showAlways && d3.show(), d3._initializingActive = false, d3._emit("init"); - }); - } - _preBuild() { - const { options: t3 } = this; - for (const e3 of ["el", "container"]) - t3[e3] = c2(t3[e3]); - this._root = ((t4) => { - const { components: e3, useAsButton: o3, inline: n3, appClass: i3, theme: s3, lockOpacity: r3 } = t4.options, l3 = (t5) => t5 ? "" : 'style="display:none" hidden', c3 = (e4) => t4._t(e4), p3 = a2(` -
+ "node_modules/@simonwep/pickr/dist/pickr.min.js"(exports, module2) { + !function(t2, e2) { + "object" == typeof exports && "object" == typeof module2 ? module2.exports = e2() : "function" == typeof define && define.amd ? define([], e2) : "object" == typeof exports ? exports.Pickr = e2() : t2.Pickr = e2(); + }(self, function() { + return (() => { + "use strict"; + var t2 = { d: (e3, o3) => { + for (var n3 in o3) + t2.o(o3, n3) && !t2.o(e3, n3) && Object.defineProperty(e3, n3, { enumerable: true, get: o3[n3] }); + }, o: (t3, e3) => Object.prototype.hasOwnProperty.call(t3, e3), r: (t3) => { + "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t3, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t3, "__esModule", { value: true }); + } }, e2 = {}; + t2.d(e2, { default: () => L2 }); + var o2 = {}; + function n2(t3, e3, o3, n3, i3 = {}) { + e3 instanceof HTMLCollection || e3 instanceof NodeList ? e3 = Array.from(e3) : Array.isArray(e3) || (e3 = [e3]), Array.isArray(o3) || (o3 = [o3]); + for (const s3 of e3) + for (const e4 of o3) + s3[t3](e4, n3, { capture: false, ...i3 }); + return Array.prototype.slice.call(arguments, 1); + } + t2.r(o2), t2.d(o2, { adjustableInputNumbers: () => p2, createElementFromString: () => r2, createFromTemplate: () => a2, eventPath: () => l2, off: () => s2, on: () => i2, resolveElement: () => c2 }); + const i2 = n2.bind(null, "addEventListener"), s2 = n2.bind(null, "removeEventListener"); + function r2(t3) { + const e3 = document.createElement("div"); + return e3.innerHTML = t3.trim(), e3.firstElementChild; + } + function a2(t3) { + const e3 = (t4, e4) => { + const o4 = t4.getAttribute(e4); + return t4.removeAttribute(e4), o4; + }, o3 = (t4, n3 = {}) => { + const i3 = e3(t4, ":obj"), s3 = e3(t4, ":ref"), r3 = i3 ? n3[i3] = {} : n3; + s3 && (n3[s3] = t4); + for (const n4 of Array.from(t4.children)) { + const t5 = e3(n4, ":arr"), i4 = o3(n4, t5 ? {} : r3); + t5 && (r3[t5] || (r3[t5] = [])).push(Object.keys(i4).length ? i4 : n4); + } + return n3; + }; + return o3(r2(t3)); + } + function l2(t3) { + let e3 = t3.path || t3.composedPath && t3.composedPath(); + if (e3) + return e3; + let o3 = t3.target.parentElement; + for (e3 = [t3.target, o3]; o3 = o3.parentElement; ) + e3.push(o3); + return e3.push(document, window), e3; + } + function c2(t3) { + return t3 instanceof Element ? t3 : "string" == typeof t3 ? t3.split(/>>/g).reduce((t4, e3, o3, n3) => (t4 = t4.querySelector(e3), o3 < n3.length - 1 ? t4.shadowRoot : t4), document) : null; + } + function p2(t3, e3 = (t4) => t4) { + function o3(o4) { + const n3 = [1e-3, 0.01, 0.1][Number(o4.shiftKey || 2 * o4.ctrlKey)] * (o4.deltaY < 0 ? 1 : -1); + let i3 = 0, s3 = t3.selectionStart; + t3.value = t3.value.replace(/[\d.]+/g, (t4, o5) => o5 <= s3 && o5 + t4.length >= s3 ? (s3 = o5, e3(Number(t4), n3, i3)) : (i3++, t4)), t3.focus(), t3.setSelectionRange(s3, s3), o4.preventDefault(), t3.dispatchEvent(new Event("input")); + } + i2(t3, "focus", () => i2(window, "wheel", o3, { passive: false })), i2(t3, "blur", () => s2(window, "wheel", o3)); + } + const { min: u2, max: h2, floor: d2, round: m2 } = Math; + function f2(t3, e3, o3) { + e3 /= 100, o3 /= 100; + const n3 = d2(t3 = t3 / 360 * 6), i3 = t3 - n3, s3 = o3 * (1 - e3), r3 = o3 * (1 - i3 * e3), a3 = o3 * (1 - (1 - i3) * e3), l3 = n3 % 6; + return [255 * [o3, r3, s3, s3, a3, o3][l3], 255 * [a3, o3, o3, r3, s3, s3][l3], 255 * [s3, s3, a3, o3, o3, r3][l3]]; + } + function v2(t3, e3, o3) { + const n3 = (2 - (e3 /= 100)) * (o3 /= 100) / 2; + return 0 !== n3 && (e3 = 1 === n3 ? 0 : n3 < 0.5 ? e3 * o3 / (2 * n3) : e3 * o3 / (2 - 2 * n3)), [t3, 100 * e3, 100 * n3]; + } + function b2(t3, e3, o3) { + const n3 = u2(t3 /= 255, e3 /= 255, o3 /= 255), i3 = h2(t3, e3, o3), s3 = i3 - n3; + let r3, a3; + if (0 === s3) + r3 = a3 = 0; + else { + a3 = s3 / i3; + const n4 = ((i3 - t3) / 6 + s3 / 2) / s3, l3 = ((i3 - e3) / 6 + s3 / 2) / s3, c3 = ((i3 - o3) / 6 + s3 / 2) / s3; + t3 === i3 ? r3 = c3 - l3 : e3 === i3 ? r3 = 1 / 3 + n4 - c3 : o3 === i3 && (r3 = 2 / 3 + l3 - n4), r3 < 0 ? r3 += 1 : r3 > 1 && (r3 -= 1); + } + return [360 * r3, 100 * a3, 100 * i3]; + } + function y2(t3, e3, o3, n3) { + e3 /= 100, o3 /= 100; + return [...b2(255 * (1 - u2(1, (t3 /= 100) * (1 - (n3 /= 100)) + n3)), 255 * (1 - u2(1, e3 * (1 - n3) + n3)), 255 * (1 - u2(1, o3 * (1 - n3) + n3)))]; + } + function g2(t3, e3, o3) { + e3 /= 100; + const n3 = 2 * (e3 *= (o3 /= 100) < 0.5 ? o3 : 1 - o3) / (o3 + e3) * 100, i3 = 100 * (o3 + e3); + return [t3, isNaN(n3) ? 0 : n3, i3]; + } + function _2(t3) { + return b2(...t3.match(/.{2}/g).map((t4) => parseInt(t4, 16))); + } + function w2(t3) { + t3 = t3.match(/^[a-zA-Z]+$/) ? function(t4) { + if ("black" === t4.toLowerCase()) + return "#000"; + const e4 = document.createElement("canvas").getContext("2d"); + return e4.fillStyle = t4, "#000" === e4.fillStyle ? null : e4.fillStyle; + }(t3) : t3; + const e3 = { cmyk: /^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i, rgba: /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i, hsla: /^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i, hsva: /^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i, hexa: /^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i }, o3 = (t4) => t4.map((t5) => /^(|\d+)\.\d+|\d+$/.test(t5) ? Number(t5) : void 0); + let n3; + t: + for (const i3 in e3) { + if (!(n3 = e3[i3].exec(t3))) + continue; + const s3 = (t4) => !!n3[2] == ("number" == typeof t4); + switch (i3) { + case "cmyk": { + const [, t4, e4, s4, r3] = o3(n3); + if (t4 > 100 || e4 > 100 || s4 > 100 || r3 > 100) + break t; + return { values: y2(t4, e4, s4, r3), type: i3 }; + } + case "rgba": { + const [, , , t4, e4, r3, a3] = o3(n3); + if (t4 > 255 || e4 > 255 || r3 > 255 || a3 < 0 || a3 > 1 || !s3(a3)) + break t; + return { values: [...b2(t4, e4, r3), a3], a: a3, type: i3 }; + } + case "hexa": { + let [, t4] = n3; + 4 !== t4.length && 3 !== t4.length || (t4 = t4.split("").map((t5) => t5 + t5).join("")); + const e4 = t4.substring(0, 6); + let o4 = t4.substring(6); + return o4 = o4 ? parseInt(o4, 16) / 255 : void 0, { values: [..._2(e4), o4], a: o4, type: i3 }; + } + case "hsla": { + const [, , , t4, e4, r3, a3] = o3(n3); + if (t4 > 360 || e4 > 100 || r3 > 100 || a3 < 0 || a3 > 1 || !s3(a3)) + break t; + return { values: [...g2(t4, e4, r3), a3], a: a3, type: i3 }; + } + case "hsva": { + const [, , , t4, e4, r3, a3] = o3(n3); + if (t4 > 360 || e4 > 100 || r3 > 100 || a3 < 0 || a3 > 1 || !s3(a3)) + break t; + return { values: [t4, e4, r3, a3], a: a3, type: i3 }; + } + } + } + return { values: null, type: null }; + } + function A2(t3 = 0, e3 = 0, o3 = 0, n3 = 1) { + const i3 = (t4, e4) => (o4 = -1) => e4(~o4 ? t4.map((t5) => Number(t5.toFixed(o4))) : t4), s3 = { h: t3, s: e3, v: o3, a: n3, toHSVA() { + const t4 = [s3.h, s3.s, s3.v, s3.a]; + return t4.toString = i3(t4, (t5) => `hsva(${t5[0]}, ${t5[1]}%, ${t5[2]}%, ${s3.a})`), t4; + }, toHSLA() { + const t4 = [...v2(s3.h, s3.s, s3.v), s3.a]; + return t4.toString = i3(t4, (t5) => `hsla(${t5[0]}, ${t5[1]}%, ${t5[2]}%, ${s3.a})`), t4; + }, toRGBA() { + const t4 = [...f2(s3.h, s3.s, s3.v), s3.a]; + return t4.toString = i3(t4, (t5) => `rgba(${t5[0]}, ${t5[1]}, ${t5[2]}, ${s3.a})`), t4; + }, toCMYK() { + const t4 = function(t5, e4, o4) { + const n4 = f2(t5, e4, o4), i4 = n4[0] / 255, s4 = n4[1] / 255, r3 = n4[2] / 255, a3 = u2(1 - i4, 1 - s4, 1 - r3); + return [100 * (1 === a3 ? 0 : (1 - i4 - a3) / (1 - a3)), 100 * (1 === a3 ? 0 : (1 - s4 - a3) / (1 - a3)), 100 * (1 === a3 ? 0 : (1 - r3 - a3) / (1 - a3)), 100 * a3]; + }(s3.h, s3.s, s3.v); + return t4.toString = i3(t4, (t5) => `cmyk(${t5[0]}%, ${t5[1]}%, ${t5[2]}%, ${t5[3]}%)`), t4; + }, toHEXA() { + const t4 = function(t5, e5, o4) { + return f2(t5, e5, o4).map((t6) => m2(t6).toString(16).padStart(2, "0")); + }(s3.h, s3.s, s3.v), e4 = s3.a >= 1 ? "" : Number((255 * s3.a).toFixed(0)).toString(16).toUpperCase().padStart(2, "0"); + return e4 && t4.push(e4), t4.toString = () => `#${t4.join("").toUpperCase()}`, t4; + }, clone: () => A2(s3.h, s3.s, s3.v, s3.a) }; + return s3; + } + const C2 = (t3) => Math.max(Math.min(t3, 1), 0); + function $2(t3) { + const e3 = { options: Object.assign({ lock: null, onchange: () => 0, onstop: () => 0 }, t3), _keyboard(t4) { + const { options: o4 } = e3, { type: n4, key: i3 } = t4; + if (document.activeElement === o4.wrapper) { + const { lock: o5 } = e3.options, s3 = "ArrowUp" === i3, r4 = "ArrowRight" === i3, a3 = "ArrowDown" === i3, l3 = "ArrowLeft" === i3; + if ("keydown" === n4 && (s3 || r4 || a3 || l3)) { + let n5 = 0, i4 = 0; + "v" === o5 ? n5 = s3 || r4 ? 1 : -1 : "h" === o5 ? n5 = s3 || r4 ? -1 : 1 : (i4 = s3 ? -1 : a3 ? 1 : 0, n5 = l3 ? -1 : r4 ? 1 : 0), e3.update(C2(e3.cache.x + 0.01 * n5), C2(e3.cache.y + 0.01 * i4)), t4.preventDefault(); + } else + i3.startsWith("Arrow") && (e3.options.onstop(), t4.preventDefault()); + } + }, _tapstart(t4) { + i2(document, ["mouseup", "touchend", "touchcancel"], e3._tapstop), i2(document, ["mousemove", "touchmove"], e3._tapmove), t4.cancelable && t4.preventDefault(), e3._tapmove(t4); + }, _tapmove(t4) { + const { options: o4, cache: n4 } = e3, { lock: i3, element: s3, wrapper: r4 } = o4, a3 = r4.getBoundingClientRect(); + let l3 = 0, c3 = 0; + if (t4) { + const e4 = t4 && t4.touches && t4.touches[0]; + l3 = t4 ? (e4 || t4).clientX : 0, c3 = t4 ? (e4 || t4).clientY : 0, l3 < a3.left ? l3 = a3.left : l3 > a3.left + a3.width && (l3 = a3.left + a3.width), c3 < a3.top ? c3 = a3.top : c3 > a3.top + a3.height && (c3 = a3.top + a3.height), l3 -= a3.left, c3 -= a3.top; + } else + n4 && (l3 = n4.x * a3.width, c3 = n4.y * a3.height); + "h" !== i3 && (s3.style.left = `calc(${l3 / a3.width * 100}% - ${s3.offsetWidth / 2}px)`), "v" !== i3 && (s3.style.top = `calc(${c3 / a3.height * 100}% - ${s3.offsetHeight / 2}px)`), e3.cache = { x: l3 / a3.width, y: c3 / a3.height }; + const p3 = C2(l3 / a3.width), u3 = C2(c3 / a3.height); + switch (i3) { + case "v": + return o4.onchange(p3); + case "h": + return o4.onchange(u3); + default: + return o4.onchange(p3, u3); + } + }, _tapstop() { + e3.options.onstop(), s2(document, ["mouseup", "touchend", "touchcancel"], e3._tapstop), s2(document, ["mousemove", "touchmove"], e3._tapmove); + }, trigger() { + e3._tapmove(); + }, update(t4 = 0, o4 = 0) { + const { left: n4, top: i3, width: s3, height: r4 } = e3.options.wrapper.getBoundingClientRect(); + "h" === e3.options.lock && (o4 = t4), e3._tapmove({ clientX: n4 + s3 * t4, clientY: i3 + r4 * o4 }); + }, destroy() { + const { options: t4, _tapstart: o4, _keyboard: n4 } = e3; + s2(document, ["keydown", "keyup"], n4), s2([t4.wrapper, t4.element], "mousedown", o4), s2([t4.wrapper, t4.element], "touchstart", o4, { passive: false }); + } }, { options: o3, _tapstart: n3, _keyboard: r3 } = e3; + return i2([o3.wrapper, o3.element], "mousedown", n3), i2([o3.wrapper, o3.element], "touchstart", n3, { passive: false }), i2(document, ["keydown", "keyup"], r3), e3; + } + function k2(t3 = {}) { + t3 = Object.assign({ onchange: () => 0, className: "", elements: [] }, t3); + const e3 = i2(t3.elements, "click", (e4) => { + t3.elements.forEach((o3) => o3.classList[e4.target === o3 ? "add" : "remove"](t3.className)), t3.onchange(e4), e4.stopPropagation(); + }); + return { destroy: () => s2(...e3) }; + } + const S2 = { variantFlipOrder: { start: "sme", middle: "mse", end: "ems" }, positionFlipOrder: { top: "tbrl", right: "rltb", bottom: "btrl", left: "lrbt" }, position: "bottom", margin: 8 }, O2 = (t3, e3, o3) => { + const { container: n3, margin: i3, position: s3, variantFlipOrder: r3, positionFlipOrder: a3 } = { container: document.documentElement.getBoundingClientRect(), ...S2, ...o3 }, { left: l3, top: c3 } = e3.style; + e3.style.left = "0", e3.style.top = "0"; + const p3 = t3.getBoundingClientRect(), u3 = e3.getBoundingClientRect(), h3 = { t: p3.top - u3.height - i3, b: p3.bottom + i3, r: p3.right + i3, l: p3.left - u3.width - i3 }, d3 = { vs: p3.left, vm: p3.left + p3.width / 2 + -u3.width / 2, ve: p3.left + p3.width - u3.width, hs: p3.top, hm: p3.bottom - p3.height / 2 - u3.height / 2, he: p3.bottom - u3.height }, [m3, f3 = "middle"] = s3.split("-"), v3 = a3[m3], b3 = r3[f3], { top: y3, left: g3, bottom: _3, right: w3 } = n3; + for (const t4 of v3) { + const o4 = "t" === t4 || "b" === t4, n4 = h3[t4], [i4, s4] = o4 ? ["top", "left"] : ["left", "top"], [r4, a4] = o4 ? [u3.height, u3.width] : [u3.width, u3.height], [l4, c4] = o4 ? [_3, w3] : [w3, _3], [p4, m4] = o4 ? [y3, g3] : [g3, y3]; + if (!(n4 < p4 || n4 + r4 > l4)) + for (const r5 of b3) { + const l5 = d3[(o4 ? "v" : "h") + r5]; + if (!(l5 < m4 || l5 + a4 > c4)) + return e3.style[s4] = l5 - u3[s4] + "px", e3.style[i4] = n4 - u3[i4] + "px", t4 + r5; + } + } + return e3.style.left = l3, e3.style.top = c3, null; + }; + function E2(t3, e3, o3) { + return e3 in t3 ? Object.defineProperty(t3, e3, { value: o3, enumerable: true, configurable: true, writable: true }) : t3[e3] = o3, t3; + } + class L2 { + constructor(t3) { + E2(this, "_initializingActive", true), E2(this, "_recalc", true), E2(this, "_nanopop", null), E2(this, "_root", null), E2(this, "_color", A2()), E2(this, "_lastColor", A2()), E2(this, "_swatchColors", []), E2(this, "_setupAnimationFrame", null), E2(this, "_eventListener", { init: [], save: [], hide: [], show: [], clear: [], change: [], changestop: [], cancel: [], swatchselect: [] }), this.options = t3 = Object.assign({ ...L2.DEFAULT_OPTIONS }, t3); + const { swatches: e3, components: o3, theme: n3, sliders: i3, lockOpacity: s3, padding: r3 } = t3; + ["nano", "monolith"].includes(n3) && !i3 && (t3.sliders = "h"), o3.interaction || (o3.interaction = {}); + const { preview: a3, opacity: l3, hue: c3, palette: p3 } = o3; + o3.opacity = !s3 && l3, o3.palette = p3 || a3 || l3 || c3, this._preBuild(), this._buildComponents(), this._bindEvents(), this._finalBuild(), e3 && e3.length && e3.forEach((t4) => this.addSwatch(t4)); + const { button: u3, app: h3 } = this._root; + this._nanopop = ((t4, e4, o4) => { + const n4 = "object" != typeof t4 || t4 instanceof HTMLElement ? { reference: t4, popper: e4, ...o4 } : t4; + return { update(t5 = n4) { + const { reference: e5, popper: o5 } = Object.assign(n4, t5); + if (!o5 || !e5) + throw new Error("Popper- or reference-element missing."); + return O2(e5, o5, n4); + } }; + })(u3, h3, { margin: r3 }), u3.setAttribute("role", "button"), u3.setAttribute("aria-label", this._t("btn:toggle")); + const d3 = this; + this._setupAnimationFrame = requestAnimationFrame(function e4() { + if (!h3.offsetWidth) + return requestAnimationFrame(e4); + d3.setColor(t3.default), d3._rePositioningPicker(), t3.defaultRepresentation && (d3._representation = t3.defaultRepresentation, d3.setColorRepresentation(d3._representation)), t3.showAlways && d3.show(), d3._initializingActive = false, d3._emit("init"); + }); + } + _preBuild() { + const { options: t3 } = this; + for (const e3 of ["el", "container"]) + t3[e3] = c2(t3[e3]); + this._root = ((t4) => { + const { components: e3, useAsButton: o3, inline: n3, appClass: i3, theme: s3, lockOpacity: r3 } = t4.options, l3 = (t5) => t5 ? "" : 'style="display:none" hidden', c3 = (e4) => t4._t(e4), p3 = a2(` +
- ${o3 ? "" : ''} + ${o3 ? "" : ''} -
-
-
- -
-
+
+
+
+ +
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
+
-
- +
+ - - - - - + + + + + - - - -
-
-
- `), u3 = p3.interaction; - return u3.options.find((t5) => !t5.hidden && !t5.classList.add("active")), u3.type = () => u3.options.find((t5) => t5.classList.contains("active")), p3; - })(this), t3.useAsButton && (this._root.button = t3.el), t3.container.appendChild(this._root.root); - } - _finalBuild() { - const t3 = this.options, e3 = this._root; - if (t3.container.removeChild(e3.root), t3.inline) { - const o3 = t3.el.parentElement; - t3.el.nextSibling ? o3.insertBefore(e3.app, t3.el.nextSibling) : o3.appendChild(e3.app); - } else - t3.container.appendChild(e3.app); - t3.useAsButton ? t3.inline && t3.el.remove() : t3.el.parentNode.replaceChild(e3.root, t3.el), t3.disabled && this.disable(), t3.comparison || (e3.button.style.transition = "none", t3.useAsButton || (e3.preview.lastColor.style.transition = "none")), this.hide(); - } - _buildComponents() { - const t3 = this, e3 = this.options.components, o3 = (t3.options.sliders || "v").repeat(2), [n3, i3] = o3.match(/^[vh]+$/g) ? o3 : [], s3 = () => this._color || (this._color = this._lastColor.clone()), r3 = { palette: $2({ element: t3._root.palette.picker, wrapper: t3._root.palette.palette, onstop: () => t3._emit("changestop", "slider", t3), onchange(o4, n4) { - if (!e3.palette) - return; - const i4 = s3(), { _root: r4, options: a3 } = t3, { lastColor: l3, currentColor: c3 } = r4.preview; - t3._recalc && (i4.s = 100 * o4, i4.v = 100 - 100 * n4, i4.v < 0 && (i4.v = 0), t3._updateOutput("slider")); - const p3 = i4.toRGBA().toString(0); - this.element.style.background = p3, this.wrapper.style.background = ` - linear-gradient(to top, rgba(0, 0, 0, ${i4.a}), transparent), - linear-gradient(to left, hsla(${i4.h}, 100%, 50%, ${i4.a}), rgba(255, 255, 255, ${i4.a})) - `, a3.comparison ? a3.useAsButton || t3._lastColor || l3.style.setProperty("--pcr-color", p3) : (r4.button.style.setProperty("--pcr-color", p3), r4.button.classList.remove("clear")); - const u3 = i4.toHEXA().toString(); - for (const { el: e4, color: o5 } of t3._swatchColors) - e4.classList[u3 === o5.toHEXA().toString() ? "add" : "remove"]("pcr-active"); - c3.style.setProperty("--pcr-color", p3); - } }), hue: $2({ lock: "v" === i3 ? "h" : "v", element: t3._root.hue.picker, wrapper: t3._root.hue.slider, onstop: () => t3._emit("changestop", "slider", t3), onchange(o4) { - if (!e3.hue || !e3.palette) - return; - const n4 = s3(); - t3._recalc && (n4.h = 360 * o4), this.element.style.backgroundColor = `hsl(${n4.h}, 100%, 50%)`, r3.palette.trigger(); - } }), opacity: $2({ lock: "v" === n3 ? "h" : "v", element: t3._root.opacity.picker, wrapper: t3._root.opacity.slider, onstop: () => t3._emit("changestop", "slider", t3), onchange(o4) { - if (!e3.opacity || !e3.palette) - return; - const n4 = s3(); - t3._recalc && (n4.a = Math.round(100 * o4) / 100), this.element.style.background = `rgba(0, 0, 0, ${n4.a})`, r3.palette.trigger(); - } }), selectable: k2({ elements: t3._root.interaction.options, className: "active", onchange(e4) { - t3._representation = e4.target.getAttribute("data-type").toUpperCase(), t3._recalc && t3._updateOutput("swatch"); - } }) }; - this._components = r3; - } - _bindEvents() { - const { _root: t3, options: e3 } = this, o3 = [i2(t3.interaction.clear, "click", () => this._clearColor()), i2([t3.interaction.cancel, t3.preview.lastColor], "click", () => { - this.setHSVA(...(this._lastColor || this._color).toHSVA(), true), this._emit("cancel"); - }), i2(t3.interaction.save, "click", () => { - !this.applyColor() && !e3.showAlways && this.hide(); - }), i2(t3.interaction.result, ["keyup", "input"], (t4) => { - this.setColor(t4.target.value, true) && !this._initializingActive && (this._emit("change", this._color, "input", this), this._emit("changestop", "input", this)), t4.stopImmediatePropagation(); - }), i2(t3.interaction.result, ["focus", "blur"], (t4) => { - this._recalc = "blur" === t4.type, this._recalc && this._updateOutput(null); - }), i2([t3.palette.palette, t3.palette.picker, t3.hue.slider, t3.hue.picker, t3.opacity.slider, t3.opacity.picker], ["mousedown", "touchstart"], () => this._recalc = true, { passive: true })]; - if (!e3.showAlways) { - const n3 = e3.closeWithKey; - o3.push(i2(t3.button, "click", () => this.isOpen() ? this.hide() : this.show()), i2(document, "keyup", (t4) => this.isOpen() && (t4.key === n3 || t4.code === n3) && this.hide()), i2(document, ["touchstart", "mousedown"], (e4) => { - this.isOpen() && !l2(e4).some((e5) => e5 === t3.app || e5 === t3.button) && this.hide(); - }, { capture: true })); - } - if (e3.adjustableNumbers) { - const e4 = { rgba: [255, 255, 255, 1], hsva: [360, 100, 100, 1], hsla: [360, 100, 100, 1], cmyk: [100, 100, 100, 100] }; - p2(t3.interaction.result, (t4, o4, n3) => { - const i3 = e4[this.getColorRepresentation().toLowerCase()]; - if (i3) { - const e5 = i3[n3], s3 = t4 + (e5 >= 100 ? 1e3 * o4 : o4); - return s3 <= 0 ? 0 : Number((s3 < e5 ? s3 : e5).toPrecision(3)); - } - return t4; - }); - } - if (e3.autoReposition && !e3.inline) { - let t4 = null; - const n3 = this; - o3.push(i2(window, ["scroll", "resize"], () => { - n3.isOpen() && (e3.closeOnScroll && n3.hide(), null === t4 ? (t4 = setTimeout(() => t4 = null, 100), requestAnimationFrame(function e4() { - n3._rePositioningPicker(), null !== t4 && requestAnimationFrame(e4); - })) : (clearTimeout(t4), t4 = setTimeout(() => t4 = null, 100))); - }, { capture: true })); - } - this._eventBindings = o3; - } - _rePositioningPicker() { - const { options: t3 } = this; - if (!t3.inline) { - if (!this._nanopop.update({ container: document.body.getBoundingClientRect(), position: t3.position })) { - const t4 = this._root.app, e3 = t4.getBoundingClientRect(); - t4.style.top = (window.innerHeight - e3.height) / 2 + "px", t4.style.left = (window.innerWidth - e3.width) / 2 + "px"; - } - } - } - _updateOutput(t3) { - const { _root: e3, _color: o3, options: n3 } = this; - if (e3.interaction.type()) { - const t4 = `to${e3.interaction.type().getAttribute("data-type")}`; - e3.interaction.result.value = "function" == typeof o3[t4] ? o3[t4]().toString(n3.outputPrecision) : ""; - } - !this._initializingActive && this._recalc && this._emit("change", o3, t3, this); - } - _clearColor(t3 = false) { - const { _root: e3, options: o3 } = this; - o3.useAsButton || e3.button.style.setProperty("--pcr-color", "rgba(0, 0, 0, 0.15)"), e3.button.classList.add("clear"), o3.showAlways || this.hide(), this._lastColor = null, this._initializingActive || t3 || (this._emit("save", null), this._emit("clear")); - } - _parseLocalColor(t3) { - const { values: e3, type: o3, a: n3 } = w2(t3), { lockOpacity: i3 } = this.options, s3 = void 0 !== n3 && 1 !== n3; - return e3 && 3 === e3.length && (e3[3] = void 0), { values: !e3 || i3 && s3 ? null : e3, type: o3 }; - } - _t(t3) { - return this.options.i18n[t3] || L2.I18N_DEFAULTS[t3]; - } - _emit(t3, ...e3) { - this._eventListener[t3].forEach((t4) => t4(...e3, this)); - } - on(t3, e3) { - return this._eventListener[t3].push(e3), this; - } - off(t3, e3) { - const o3 = this._eventListener[t3] || [], n3 = o3.indexOf(e3); - return ~n3 && o3.splice(n3, 1), this; - } - addSwatch(t3) { - const { values: e3 } = this._parseLocalColor(t3); - if (e3) { - const { _swatchColors: t4, _root: o3 } = this, n3 = A2(...e3), s3 = r2(`
+
+
+ `), u3 = p3.interaction; + return u3.options.find((t5) => !t5.hidden && !t5.classList.add("active")), u3.type = () => u3.options.find((t5) => t5.classList.contains("active")), p3; + })(this), t3.useAsButton && (this._root.button = t3.el), t3.container.appendChild(this._root.root); + } + _finalBuild() { + const t3 = this.options, e3 = this._root; + if (t3.container.removeChild(e3.root), t3.inline) { + const o3 = t3.el.parentElement; + t3.el.nextSibling ? o3.insertBefore(e3.app, t3.el.nextSibling) : o3.appendChild(e3.app); + } else + t3.container.appendChild(e3.app); + t3.useAsButton ? t3.inline && t3.el.remove() : t3.el.parentNode.replaceChild(e3.root, t3.el), t3.disabled && this.disable(), t3.comparison || (e3.button.style.transition = "none", t3.useAsButton || (e3.preview.lastColor.style.transition = "none")), this.hide(); + } + _buildComponents() { + const t3 = this, e3 = this.options.components, o3 = (t3.options.sliders || "v").repeat(2), [n3, i3] = o3.match(/^[vh]+$/g) ? o3 : [], s3 = () => this._color || (this._color = this._lastColor.clone()), r3 = { palette: $2({ element: t3._root.palette.picker, wrapper: t3._root.palette.palette, onstop: () => t3._emit("changestop", "slider", t3), onchange(o4, n4) { + if (!e3.palette) + return; + const i4 = s3(), { _root: r4, options: a3 } = t3, { lastColor: l3, currentColor: c3 } = r4.preview; + t3._recalc && (i4.s = 100 * o4, i4.v = 100 - 100 * n4, i4.v < 0 && (i4.v = 0), t3._updateOutput("slider")); + const p3 = i4.toRGBA().toString(0); + this.element.style.background = p3, this.wrapper.style.background = ` + linear-gradient(to top, rgba(0, 0, 0, ${i4.a}), transparent), + linear-gradient(to left, hsla(${i4.h}, 100%, 50%, ${i4.a}), rgba(255, 255, 255, ${i4.a})) + `, a3.comparison ? a3.useAsButton || t3._lastColor || l3.style.setProperty("--pcr-color", p3) : (r4.button.style.setProperty("--pcr-color", p3), r4.button.classList.remove("clear")); + const u3 = i4.toHEXA().toString(); + for (const { el: e4, color: o5 } of t3._swatchColors) + e4.classList[u3 === o5.toHEXA().toString() ? "add" : "remove"]("pcr-active"); + c3.style.setProperty("--pcr-color", p3); + } }), hue: $2({ lock: "v" === i3 ? "h" : "v", element: t3._root.hue.picker, wrapper: t3._root.hue.slider, onstop: () => t3._emit("changestop", "slider", t3), onchange(o4) { + if (!e3.hue || !e3.palette) + return; + const n4 = s3(); + t3._recalc && (n4.h = 360 * o4), this.element.style.backgroundColor = `hsl(${n4.h}, 100%, 50%)`, r3.palette.trigger(); + } }), opacity: $2({ lock: "v" === n3 ? "h" : "v", element: t3._root.opacity.picker, wrapper: t3._root.opacity.slider, onstop: () => t3._emit("changestop", "slider", t3), onchange(o4) { + if (!e3.opacity || !e3.palette) + return; + const n4 = s3(); + t3._recalc && (n4.a = Math.round(100 * o4) / 100), this.element.style.background = `rgba(0, 0, 0, ${n4.a})`, r3.palette.trigger(); + } }), selectable: k2({ elements: t3._root.interaction.options, className: "active", onchange(e4) { + t3._representation = e4.target.getAttribute("data-type").toUpperCase(), t3._recalc && t3._updateOutput("swatch"); + } }) }; + this._components = r3; + } + _bindEvents() { + const { _root: t3, options: e3 } = this, o3 = [i2(t3.interaction.clear, "click", () => this._clearColor()), i2([t3.interaction.cancel, t3.preview.lastColor], "click", () => { + this.setHSVA(...(this._lastColor || this._color).toHSVA(), true), this._emit("cancel"); + }), i2(t3.interaction.save, "click", () => { + !this.applyColor() && !e3.showAlways && this.hide(); + }), i2(t3.interaction.result, ["keyup", "input"], (t4) => { + this.setColor(t4.target.value, true) && !this._initializingActive && (this._emit("change", this._color, "input", this), this._emit("changestop", "input", this)), t4.stopImmediatePropagation(); + }), i2(t3.interaction.result, ["focus", "blur"], (t4) => { + this._recalc = "blur" === t4.type, this._recalc && this._updateOutput(null); + }), i2([t3.palette.palette, t3.palette.picker, t3.hue.slider, t3.hue.picker, t3.opacity.slider, t3.opacity.picker], ["mousedown", "touchstart"], () => this._recalc = true, { passive: true })]; + if (!e3.showAlways) { + const n3 = e3.closeWithKey; + o3.push(i2(t3.button, "click", () => this.isOpen() ? this.hide() : this.show()), i2(document, "keyup", (t4) => this.isOpen() && (t4.key === n3 || t4.code === n3) && this.hide()), i2(document, ["touchstart", "mousedown"], (e4) => { + this.isOpen() && !l2(e4).some((e5) => e5 === t3.app || e5 === t3.button) && this.hide(); + }, { capture: true })); + } + if (e3.adjustableNumbers) { + const e4 = { rgba: [255, 255, 255, 1], hsva: [360, 100, 100, 1], hsla: [360, 100, 100, 1], cmyk: [100, 100, 100, 100] }; + p2(t3.interaction.result, (t4, o4, n3) => { + const i3 = e4[this.getColorRepresentation().toLowerCase()]; + if (i3) { + const e5 = i3[n3], s3 = t4 + (e5 >= 100 ? 1e3 * o4 : o4); + return s3 <= 0 ? 0 : Number((s3 < e5 ? s3 : e5).toPrecision(3)); + } + return t4; + }); + } + if (e3.autoReposition && !e3.inline) { + let t4 = null; + const n3 = this; + o3.push(i2(window, ["scroll", "resize"], () => { + n3.isOpen() && (e3.closeOnScroll && n3.hide(), null === t4 ? (t4 = setTimeout(() => t4 = null, 100), requestAnimationFrame(function e4() { + n3._rePositioningPicker(), null !== t4 && requestAnimationFrame(e4); + })) : (clearTimeout(t4), t4 = setTimeout(() => t4 = null, 100))); + }, { capture: true })); + } + this._eventBindings = o3; + } + _rePositioningPicker() { + const { options: t3 } = this; + if (!t3.inline) { + if (!this._nanopop.update({ container: document.body.getBoundingClientRect(), position: t3.position })) { + const t4 = this._root.app, e3 = t4.getBoundingClientRect(); + t4.style.top = (window.innerHeight - e3.height) / 2 + "px", t4.style.left = (window.innerWidth - e3.width) / 2 + "px"; + } + } + } + _updateOutput(t3) { + const { _root: e3, _color: o3, options: n3 } = this; + if (e3.interaction.type()) { + const t4 = `to${e3.interaction.type().getAttribute("data-type")}`; + e3.interaction.result.value = "function" == typeof o3[t4] ? o3[t4]().toString(n3.outputPrecision) : ""; + } + !this._initializingActive && this._recalc && this._emit("change", o3, t3, this); + } + _clearColor(t3 = false) { + const { _root: e3, options: o3 } = this; + o3.useAsButton || e3.button.style.setProperty("--pcr-color", "rgba(0, 0, 0, 0.15)"), e3.button.classList.add("clear"), o3.showAlways || this.hide(), this._lastColor = null, this._initializingActive || t3 || (this._emit("save", null), this._emit("clear")); + } + _parseLocalColor(t3) { + const { values: e3, type: o3, a: n3 } = w2(t3), { lockOpacity: i3 } = this.options, s3 = void 0 !== n3 && 1 !== n3; + return e3 && 3 === e3.length && (e3[3] = void 0), { values: !e3 || i3 && s3 ? null : e3, type: o3 }; + } + _t(t3) { + return this.options.i18n[t3] || L2.I18N_DEFAULTS[t3]; + } + _emit(t3, ...e3) { + this._eventListener[t3].forEach((t4) => t4(...e3, this)); + } + on(t3, e3) { + return this._eventListener[t3].push(e3), this; + } + off(t3, e3) { + const o3 = this._eventListener[t3] || [], n3 = o3.indexOf(e3); + return ~n3 && o3.splice(n3, 1), this; + } + addSwatch(t3) { + const { values: e3 } = this._parseLocalColor(t3); + if (e3) { + const { _swatchColors: t4, _root: o3 } = this, n3 = A2(...e3), s3 = r2(`