@thednp/color-picker 2.0.0 → 2.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/cypress.config.ts +2 -1
- package/dist/css/color-picker.css +7 -7
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +7 -7
- package/dist/css/color-picker.rtl.min.css +2 -2
- package/dist/js/color-picker.cjs +1 -1
- package/dist/js/color-picker.js +1 -1
- package/dist/js/color-picker.mjs +1 -1
- package/package.json +14 -14
- package/src/scss/color-picker.scss +6 -4
- package/tsconfig.json +1 -1
- package/{vite.config.ts → vite.config.mts} +1 -0
- /package/{compile.js → compile.cjs} +0 -0
package/cypress.config.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { defineConfig } from "cypress";
|
|
2
2
|
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
|
|
3
3
|
import createEsbuildIstanbulPlugin from "./cypress/plugins/esbuild-istanbul";
|
|
4
|
+
import codeCoverageTask from "@cypress/code-coverage/task";
|
|
4
5
|
|
|
5
6
|
async function setupNodeEvents(
|
|
6
7
|
on: Cypress.PluginEvents,
|
|
7
8
|
config: Cypress.PluginConfigOptions
|
|
8
9
|
): Promise<Cypress.PluginConfigOptions> {
|
|
9
|
-
|
|
10
|
+
codeCoverageTask(on, config);
|
|
10
11
|
|
|
11
12
|
on(
|
|
12
13
|
"file:preprocessor",
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* ColorPicker v2.0.
|
|
3
|
-
* Copyright
|
|
2
|
+
* ColorPicker v2.0.1 (https://thednp.github.io/color-picker)
|
|
3
|
+
* Copyright 2024 © thednp
|
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/main/LICENSE)
|
|
5
5
|
*/
|
|
6
|
+
*, *::before, *::after {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
/* :host */
|
|
7
11
|
.color-picker {
|
|
8
12
|
position: relative;
|
|
@@ -40,9 +44,6 @@
|
|
|
40
44
|
--option-bg-active: var(--white-90);
|
|
41
45
|
--visual-shadow: 0 0 0 1px var(--white-15) inset;
|
|
42
46
|
}
|
|
43
|
-
.color-picker *, .color-picker *::before, .color-picker *::after {
|
|
44
|
-
box-sizing: border-box;
|
|
45
|
-
}
|
|
46
47
|
|
|
47
48
|
.color-picker:focus {
|
|
48
49
|
outline: none;
|
|
@@ -206,8 +207,7 @@
|
|
|
206
207
|
|
|
207
208
|
/* scrollable */
|
|
208
209
|
.scrollable {
|
|
209
|
-
overflow
|
|
210
|
-
overflow-y: auto;
|
|
210
|
+
overflow: hidden auto;
|
|
211
211
|
scrollbar-width: thin;
|
|
212
212
|
}
|
|
213
213
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* ColorPicker v2.0.
|
|
2
|
-
.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}.color-picker
|
|
1
|
+
/* ColorPicker v2.0.1 | thednp © 2024 | MIT-License */
|
|
2
|
+
*,*::before,*::after{box-sizing:border-box}.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:var(--dropdown-color);background:var(--dropdown-bg);border-radius:.5rem;box-shadow:var(--dropdown-shadow);opacity:0;transition:var(--dropdown-transition)}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0;max-height:230px}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition:var(--btn-transition)}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px var(--black-15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:var(--white-75)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px var(--black-15)}.txt-dark .color-preview::placeholder{color:var(--white-50)}.txt-light .color-preview{color:var(--black-75)}.txt-light .color-preview:focus{color:var(--black-75);box-shadow:0 0 0 1px #000 inset,0 0 0 3px var(--black-15)}.txt-light .color-preview::placeholder{color:var(--black-50)}.picker-toggle{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;background:rgba(0,0,0,0);border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:var(--black-50)}.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow:hidden auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:rgba(0,0,0,0);background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:var(--dropdown-scrollbar-bg)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--dropdown-scrollbar-bg-hover)}.color-defaults{display:none;flex-flow:column wrap;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{color:var(--option-color-hover);background:var(--option-bg-hover);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:var(--option-color-active);background:var(--option-bg-active)}.color-options{--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;display:grid;padding:0;margin:0;list-style:none;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:var(--options-transition)}.color-dropdown.menu:hover .scrollable{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-flow:row wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;color:rgba(0,0,0,0)}.color-options .color-option:active,.color-options .color-option:focus{outline:none;box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option::before{position:absolute;inset:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid var(--white-75);mix-blend-mode:difference}.color-options .color-option.active::after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active::after{box-shadow:0 0 0 4px var(--white-90)}.txt-light .color-options .color-option.active::after{box-shadow:0 0 0 4px var(--black-90)}.color-form{display:flex;flex-flow:row wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:rgba(0,0,0,0);border:var(--input-border);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:var(--input-bg-hover);border:var(--input-border-hover)}.visual-control{height:230px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:230px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(width >= 980px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;width:100%;height:7px;touch-action:none;user-select:none;background-color:var(--knob-bg);border:var(--knob-border);border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:var(--knob-shadow-hover)}.knob:focus,.knob:active{z-index:1;box-shadow:var(--knob-shadow-active)}.color-pointer{width:7px;background-color:rgba(0,0,0,0);border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px var(--white-50)}.txt-light .color-pointer{box-shadow:0 0 0 5px var(--black-50)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px var(--white-75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px var(--black-75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px var(--white-90)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px var(--black-90)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* ColorPicker v2.0.
|
|
3
|
-
* Copyright
|
|
2
|
+
* ColorPicker v2.0.1 (https://thednp.github.io/color-picker)
|
|
3
|
+
* Copyright 2024 © thednp
|
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/main/LICENSE)
|
|
5
5
|
*/
|
|
6
|
+
*, *::before, *::after {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
/* :host */
|
|
7
11
|
.color-picker {
|
|
8
12
|
position: relative;
|
|
@@ -40,9 +44,6 @@
|
|
|
40
44
|
--option-bg-active: var(--white-90);
|
|
41
45
|
--visual-shadow: 0 0 0 1px var(--white-15) inset;
|
|
42
46
|
}
|
|
43
|
-
.color-picker *, .color-picker *::before, .color-picker *::after {
|
|
44
|
-
box-sizing: border-box;
|
|
45
|
-
}
|
|
46
47
|
|
|
47
48
|
.color-picker:focus {
|
|
48
49
|
outline: none;
|
|
@@ -206,8 +207,7 @@
|
|
|
206
207
|
|
|
207
208
|
/* scrollable */
|
|
208
209
|
.scrollable {
|
|
209
|
-
overflow
|
|
210
|
-
overflow-y: auto;
|
|
210
|
+
overflow: hidden auto;
|
|
211
211
|
scrollbar-width: thin;
|
|
212
212
|
}
|
|
213
213
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/* ColorPicker RTL v2.0.
|
|
2
|
-
.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}.color-picker
|
|
1
|
+
/* ColorPicker RTL v2.0.1 | thednp © 2024 | MIT-License */
|
|
2
|
+
*,*::before,*::after{box-sizing:border-box}.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:var(--dropdown-color);background:var(--dropdown-bg);border-radius:.5rem;box-shadow:var(--dropdown-shadow);opacity:0;transition:var(--dropdown-transition)}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0;max-height:230px}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition:var(--btn-transition)}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px var(--black-15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:var(--white-75)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px var(--black-15)}.txt-dark .color-preview::placeholder{color:var(--white-50)}.txt-light .color-preview{color:var(--black-75)}.txt-light .color-preview:focus{color:var(--black-75);box-shadow:0 0 0 1px #000 inset,0 0 0 3px var(--black-15)}.txt-light .color-preview::placeholder{color:var(--black-50)}.picker-toggle{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;background:rgba(0,0,0,0);border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:var(--black-50)}.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow:hidden auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:rgba(0,0,0,0);background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:var(--dropdown-scrollbar-bg)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--dropdown-scrollbar-bg-hover)}.color-defaults{display:none;flex-flow:column wrap;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{color:var(--option-color-hover);background:var(--option-bg-hover);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:var(--option-color-active);background:var(--option-bg-active)}.color-options{--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;display:grid;padding:0;margin:0;list-style:none;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:var(--options-transition)}.color-dropdown.menu:hover .scrollable{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-flow:row wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;color:rgba(0,0,0,0)}.color-options .color-option:active,.color-options .color-option:focus{outline:none;box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option::before{position:absolute;inset:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid var(--white-75);mix-blend-mode:difference}.color-options .color-option.active::after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active::after{box-shadow:0 0 0 4px var(--white-90)}.txt-light .color-options .color-option.active::after{box-shadow:0 0 0 4px var(--black-90)}.color-form{display:flex;flex-flow:row wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:rgba(0,0,0,0);border:var(--input-border);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:var(--input-bg-hover);border:var(--input-border-hover)}.visual-control{height:230px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:230px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(width >= 980px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;width:100%;height:7px;touch-action:none;user-select:none;background-color:var(--knob-bg);border:var(--knob-border);border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:var(--knob-shadow-hover)}.knob:focus,.knob:active{z-index:1;box-shadow:var(--knob-shadow-active)}.color-pointer{width:7px;background-color:rgba(0,0,0,0);border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px var(--white-50)}.txt-light .color-pointer{box-shadow:0 0 0 5px var(--black-50)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px var(--white-75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px var(--black-75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px var(--white-90)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px var(--black-90)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}[dir=rtl] .color-preview{text-align:right}[dir=rtl] .menu-toggle{right:auto;left:0;border-radius:.25rem 0 0 .25rem}[dir=rtl] .color-dropdown.picker{right:0;left:auto}[dir=rtl] .color-dropdown.menu{right:auto;left:0}[dir=rtl] .color-control+.color-control{margin-right:.5rem;margin-left:0}[dir=rtl] .color-options.scrollable{margin:0 0 0 -0.5rem}
|
package/dist/js/color-picker.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const _t="aria-description",Nt="aria-expanded",Me="aria-hidden",St="aria-selected",tt="aria-valuenow",et="aria-valuetext",Te="change",Re="DOMContentLoaded",Oe="focusin",De="focusout",zt="keydown",Fe="keyup",Et="click",Ie="pointerdown",ue="pointermove",Ke="pointerup",Ve="resize",Be="scroll",je="touchmove",j="ArrowDown",ot="ArrowUp",ht="ArrowLeft",U="ArrowRight",qe="Enter",Ge="Escape",Wt="Space",Ue="transitionDuration",_e="transitionProperty",X="tabindex",ze=navigator.userAgentData,mt=ze,{userAgent:We}=navigator,vt=We,Jt=/iPhone|iPad|iPod|Android/i;mt?mt.brands.some(o=>Jt.test(o.brand)):Jt.test(vt);const Xt=/(iPhone|iPod|iPad)/;mt?mt.brands.some(o=>Xt.test(o.brand)):Xt.test(vt);vt&&vt.includes("Firefox");const{head:kt}=document;["webkitPerspective","perspective"].some(o=>o in kt.style);const Bt=(o,t,e,s)=>{const r=s||!1;o.addEventListener(t,e,r)},jt=(o,t,e,s)=>{const r=s||!1;o.removeEventListener(t,e,r)},Je=(o,t,e,s)=>{const r=n=>{(n.target===o||n.currentTarget===o)&&(e.apply(o,[n]),jt(o,t,r,s))};Bt(o,t,r,s)},Xe=()=>{};(()=>{let o=!1;try{const t=Object.defineProperty({},"passive",{get:()=>(o=!0,o)});Je(document,Re,Xe,t)}catch{}return o})();["webkitTransform","transform"].some(o=>o in kt.style);["webkitAnimation","animation"].some(o=>o in kt.style);["webkitTransition","transition"].some(o=>o in kt.style);const yt=(o,t)=>o.getAttribute(t),m=(o,t,e)=>o.setAttribute(t,e),Pt=(o,t)=>o.removeAttribute(t),q=(o,...t)=>{o.classList.add(...t)},O=(o,...t)=>{o.classList.remove(...t)},T=(o,t)=>o.classList.contains(t),qt=o=>o!=null&&typeof o=="object"||!1,Z=o=>qt(o)&&typeof o.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(t=>o.nodeType===t)||!1,at=o=>Z(o)&&o.nodeType===1||!1,W=new Map,ct={data:W,set:(o,t,e)=>{at(o)&&(W.has(t)||W.set(t,new Map),W.get(t).set(o,e))},getAllFor:o=>W.get(o)||null,get:(o,t)=>{if(!at(o)||!t)return null;const e=ct.getAllFor(t);return o&&e&&e.get(o)||null},remove:(o,t)=>{const e=ct.getAllFor(t);!e||!at(o)||(e.delete(o),e.size===0&&W.delete(t))}},Ye=(o,t)=>ct.get(o,t),B=o=>typeof o=="string"||!1,Ze=o=>qt(o)&&o.constructor.name==="Window"||!1,be=o=>Z(o)&&o.nodeType===9||!1,V=o=>Ze(o)?o.document:be(o)?o:Z(o)?o.ownerDocument:window.document,K=(o,...t)=>Object.assign(o,...t),x=o=>{if(!o)return;if(B(o))return V().createElement(o);const{tagName:t}=o,e=x(t);if(!e)return;const s={...o};return delete s.tagName,K(e,s)},Mt=(o,t)=>{if(!o||!t)return;if(B(t))return V().createElementNS(o,t);const{tagName:e}=t,s=Mt(o,e);if(!s)return;const r={...t};return delete r.tagName,K(s,r)},Qe=(o,t)=>o.dispatchEvent(t),Tt=(o,t)=>{const e=getComputedStyle(o),s=t.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return e.getPropertyValue(s)},to=o=>{const t=Tt(o,_e),e=Tt(o,Ue),s=e.includes("ms")?1:1e3,r=t&&t!=="none"?parseFloat(e)*s:0;return Number.isNaN(r)?0:r},_=(o,t)=>o.focus(t),Yt=o=>["true",!0].includes(o)?!0:["false",!1].includes(o)?!1:["null","",null,void 0].includes(o)?null:o!==""&&!Number.isNaN(+o)?+o:o,pt=o=>Object.entries(o),eo=(o,t,e,s)=>{const r={...e},n={...o.dataset},i={...t},a={},l="title";return pt(n).forEach(([c,h])=>{const b=c;a[b]=Yt(h)}),pt(r).forEach(([c,h])=>{r[c]=Yt(h)}),pt(t).forEach(([c,h])=>{c in r?i[c]=r[c]:c in a?i[c]=a[c]:i[c]=c===l?yt(o,l):h}),i},Zt=o=>Object.fromEntries(o),oo=o=>o.offsetHeight,D=(o,t)=>{pt(t).forEach(([e,s])=>{if(s&&B(e)&&e.includes("--"))o.style.setProperty(e,s);else{const r={};r[e]=s,K(o.style,r)}})},so=o=>qt(o)&&o.constructor.name==="Map"||!1,pe=o=>o.toUpperCase(),gt=(o,t)=>{const{width:e,height:s,top:r,right:n,bottom:i,left:a}=o.getBoundingClientRect();let l=1,c=1;if(t&&at(o)){const{offsetWidth:h,offsetHeight:b}=o;l=h>0?Math.round(e)/h:1,c=b>0?Math.round(s)/b:1}return{width:e/l,height:s/c,top:r/c,right:n/l,bottom:i/c,left:a/l,x:a/l,y:r/c}},Ct=o=>V(o).documentElement;let Qt=0,te=0;const J=new Map,de=(o,t)=>{let e=t?Qt:te;if(t){const s=de(o),r=J.get(s)||new Map;J.has(s)||J.set(s,r),so(r)&&!r.has(t)?(r.set(t,e),Qt+=1):e=r.get(t)}else{const s=o.id||o;J.has(s)?e=J.get(s):(J.set(s,e),te+=1)}return e},ro=o=>{var t;return o?be(o)?o.defaultView:Z(o)?(t=o?.ownerDocument)==null?void 0:t.defaultView:o:window},Lt=o=>Array.isArray(o)||!1,fe=(o,t)=>o?o.closest(t)||fe(o.getRootNode().host,t):null,z=(o,t)=>at(o)?o:(Z(t)?t:V()).querySelector(o),st=(o,t)=>(t&&Z(t)?t:V()).getElementsByClassName(o),Gt=["transparent","currentColor","inherit","revert","initial"],v=o=>{const t=Math.floor(o);return o-t<.5?t:Math.round(o)},wt=[["aliceblue",{r:240,g:248,b:255}],["antiquewhite",{r:250,g:235,b:215}],["aqua",{r:0,g:255,b:255}],["aquamarine",{r:127,g:255,b:212}],["azure",{r:240,g:255,b:255}],["beige",{r:245,g:245,b:220}],["bisque",{r:255,g:228,b:196}],["black",{r:0,g:0,b:0}],["blanchedalmond",{r:255,g:235,b:205}],["blue",{r:0,g:0,b:255}],["blueviolet",{r:138,g:43,b:226}],["brown",{r:165,g:42,b:42}],["burlywood",{r:222,g:184,b:135}],["cadetblue",{r:95,g:158,b:160}],["chartreuse",{r:127,g:255,b:0}],["chocolate",{r:210,g:105,b:30}],["coral",{r:255,g:127,b:80}],["cornflowerblue",{r:100,g:149,b:237}],["cornsilk",{r:255,g:248,b:220}],["crimson",{r:220,g:20,b:60}],["cyan",{r:0,g:255,b:255}],["darkblue",{r:0,g:0,b:139}],["darkcyan",{r:0,g:139,b:139}],["darkgoldenrod",{r:184,g:134,b:11}],["darkgray",{r:169,g:169,b:169}],["darkgreen",{r:0,g:100,b:0}],["darkgrey",{r:169,g:169,b:169}],["darkkhaki",{r:189,g:183,b:107}],["darkmagenta",{r:139,g:0,b:139}],["darkolivegreen",{r:85,g:107,b:47}],["darkorange",{r:255,g:140,b:0}],["darkorchid",{r:153,g:50,b:204}],["darkred",{r:139,g:0,b:0}],["darksalmon",{r:233,g:150,b:122}],["darkseagreen",{r:143,g:188,b:143}],["darkslateblue",{r:72,g:61,b:139}],["darkslategray",{r:47,g:79,b:79}],["darkslategrey",{r:47,g:79,b:79}],["darkturquoise",{r:0,g:206,b:209}],["darkviolet",{r:148,g:0,b:211}],["deeppink",{r:255,g:20,b:147}],["deepskyblue",{r:0,g:191,b:255}],["dimgray",{r:105,g:105,b:105}],["dimgrey",{r:105,g:105,b:105}],["dodgerblue",{r:30,g:144,b:255}],["firebrick",{r:178,g:34,b:34}],["floralwhite",{r:255,g:250,b:240}],["forestgreen",{r:34,g:139,b:34}],["fuchsia",{r:255,g:0,b:255}],["gainsboro",{r:220,g:220,b:220}],["ghostwhite",{r:248,g:248,b:255}],["goldenrod",{r:218,g:165,b:32}],["gold",{r:255,g:215,b:0}],["gray",{r:128,g:128,b:128}],["green",{r:0,g:128,b:0}],["greenyellow",{r:173,g:255,b:47}],["grey",{r:128,g:128,b:128}],["honeydew",{r:240,g:255,b:240}],["hotpink",{r:255,g:105,b:180}],["indianred",{r:205,g:92,b:92}],["indigo",{r:75,g:0,b:130}],["ivory",{r:255,g:255,b:240}],["khaki",{r:240,g:230,b:140}],["lavenderblush",{r:255,g:240,b:245}],["lavender",{r:230,g:230,b:250}],["lawngreen",{r:124,g:252,b:0}],["lemonchiffon",{r:255,g:250,b:205}],["lightblue",{r:173,g:216,b:230}],["lightcoral",{r:240,g:128,b:128}],["lightcyan",{r:224,g:255,b:255}],["lightgoldenrodyellow",{r:250,g:250,b:210}],["lightgray",{r:211,g:211,b:211}],["lightgreen",{r:144,g:238,b:144}],["lightgrey",{r:211,g:211,b:211}],["lightpink",{r:255,g:182,b:193}],["lightsalmon",{r:255,g:160,b:122}],["lightseagreen",{r:32,g:178,b:170}],["lightskyblue",{r:135,g:206,b:250}],["lightslategray",{r:119,g:136,b:153}],["lightslategrey",{r:119,g:136,b:153}],["lightsteelblue",{r:176,g:196,b:222}],["lightyellow",{r:255,g:255,b:224}],["lime",{r:0,g:255,b:0}],["limegreen",{r:50,g:205,b:50}],["linen",{r:250,g:240,b:230}],["magenta",{r:255,g:0,b:255}],["maroon",{r:128,g:0,b:0}],["mediumaquamarine",{r:102,g:205,b:170}],["mediumblue",{r:0,g:0,b:205}],["mediumorchid",{r:186,g:85,b:211}],["mediumpurple",{r:147,g:112,b:219}],["mediumseagreen",{r:60,g:179,b:113}],["mediumslateblue",{r:123,g:104,b:238}],["mediumspringgreen",{r:0,g:250,b:154}],["mediumturquoise",{r:72,g:209,b:204}],["mediumvioletred",{r:199,g:21,b:133}],["midnightblue",{r:25,g:25,b:112}],["mintcream",{r:245,g:255,b:250}],["mistyrose",{r:255,g:228,b:225}],["moccasin",{r:255,g:228,b:181}],["navajowhite",{r:255,g:222,b:173}],["navy",{r:0,g:0,b:128}],["oldlace",{r:253,g:245,b:230}],["olive",{r:128,g:128,b:0}],["olivedrab",{r:107,g:142,b:35}],["orange",{r:255,g:165,b:0}],["orangered",{r:255,g:69,b:0}],["orchid",{r:218,g:112,b:214}],["palegoldenrod",{r:238,g:232,b:170}],["palegreen",{r:152,g:251,b:152}],["paleturquoise",{r:175,g:238,b:238}],["palevioletred",{r:219,g:112,b:147}],["papayawhip",{r:255,g:239,b:213}],["peachpuff",{r:255,g:218,b:185}],["peru",{r:205,g:133,b:63}],["pink",{r:255,g:192,b:203}],["plum",{r:221,g:160,b:221}],["powderblue",{r:176,g:224,b:230}],["purple",{r:128,g:0,b:128}],["rebeccapurple",{r:102,g:51,b:153}],["red",{r:255,g:0,b:0}],["rosybrown",{r:188,g:143,b:143}],["royalblue",{r:65,g:105,b:225}],["saddlebrown",{r:139,g:69,b:19}],["salmon",{r:250,g:128,b:114}],["sandybrown",{r:244,g:164,b:96}],["seagreen",{r:46,g:139,b:87}],["seashell",{r:255,g:245,b:238}],["sienna",{r:160,g:82,b:45}],["silver",{r:192,g:192,b:192}],["skyblue",{r:135,g:206,b:235}],["slateblue",{r:106,g:90,b:205}],["slategray",{r:112,g:128,b:144}],["slategrey",{r:112,g:128,b:144}],["snow",{r:255,g:250,b:250}],["springgreen",{r:0,g:255,b:127}],["steelblue",{r:70,g:130,b:180}],["tan",{r:210,g:180,b:140}],["teal",{r:0,g:128,b:128}],["thistle",{r:216,g:191,b:216}],["tomato",{r:255,g:99,b:71}],["turquoise",{r:64,g:224,b:208}],["violet",{r:238,g:130,b:238}],["wheat",{r:245,g:222,b:179}],["white",{r:255,g:255,b:255}],["whitesmoke",{r:245,g:245,b:245}],["yellow",{r:255,g:255,b:0}],["yellowgreen",{r:154,g:205,b:50}]],me="deg|rad|grad|turn",ve="[-\\+]?\\d+%?",we="[-\\+]?\\d*\\.\\d+%?",$e=`[-\\+]?\\d*\\.?\\d+(?:${me})?`,dt=`(?:${we})|(?:${ve})`,Rt=`(?:${dt})|(?:${$e}?)`,no="(?:[\\s|\\(\\s|\\s\\(\\s]+)?",io="(?:[\\s|\\)\\s]+)?",ee="(?:[,|\\s]+)",ao="(?:[,|\\/\\s]*)?",rt=`${no}(${Rt})${ee}(${dt})${ee}(${dt})${ao}(${dt})?${io}`,I={CSS_UNIT:new RegExp(Rt),ANGLES:me,CSS_ANGLE:$e,CSS_INTEGER:ve,CSS_NUMBER:we,CSS_UNIT2:Rt,PERMISSIVE_MATCH:rt,hwb:new RegExp(`hwb${rt}`),rgb:new RegExp(`rgb(?:a)?${rt}`),hsl:new RegExp(`hsl(?:a)?${rt}`),hsv:new RegExp(`hsv(?:a)?${rt}`),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/},ke=o=>Gt.includes(o),nt=(o,t)=>o!==null&&typeof o=="object"&&Object.keys(t).every(e=>e in o),ye=o=>`${o}`.includes(".")&&parseFloat(o)===1,$t=o=>typeof o=="string"&&o.includes("%"),H=o=>!!I.CSS_UNIT.exec(`${o}`),xe=["rgb","hex","hsl","hsv","hwb"],Se=o=>Gt.includes(o)||["#",...xe].some(t=>o.includes(t))?!1:wt.some(([t])=>o===t),R=(o,t)=>{let e=o;if(typeof o=="number"&&Math.min(o,0)===0&&Math.max(o,1)===1)return o;ye(o)&&(e="100%");const s=$t(e);return e=t===360?parseFloat(e):Math.min(t,Math.max(0,parseFloat(e))),s&&(e=e*t/100),Math.abs(e-t)<1e-6?1:(t===360?e=(e<0?e%t+t:e%t)/t:e=e%t/t,e)},Ot=o=>{let t=parseFloat(o);return(Number.isNaN(t)||t<0||t>1)&&(t=1),t},ut=o=>Math.min(1,Math.max(0,o)),G=o=>o.length===1?`0${o}`:String(o),Pe=o=>{const[[,t]]=wt.filter(([e])=>e===o.toLowerCase());return t},N=o=>parseInt(o,16),Dt=o=>N(o)/255,Ce=o=>v(o*255).toString(16),oe=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0,i=0;const a=(s+r)/2;if(s===r)i=0,n=0;else{const l=s-r;i=a>.5?l/(2-s-r):l/(s+r),s===o&&(n=(t-e)/l+(t<e?6:0)),s===t&&(n=(e-o)/l+2),s===e&&(n=(o-t)/l+4),n/=6}return{h:n,s:i,l:a}},ft=(o,t,e)=>{let s=e;return s<0&&(s+=1),s>1&&(s-=1),s<1/6?o+(t-o)*(6*s):s<1/2?t:s<2/3?o+(t-o)*(2/3-s)*6:o},lt=(o,t,e)=>{let s=0,r=0,n=0;if(t===0)r=e,n=e,s=e;else if(e){const i=e<.5?e*(1+t):e+t-e*t,a=2*e-i;s=ft(a,i,o+1/3),r=ft(a,i,o),n=ft(a,i,o-1/3)}return{r:s,g:r,b:n}},se=(o,t,e)=>{let s=0,r=0;const n=Math.min(o,t,e),i=Math.max(o,t,e),a=1-i;if(i===n)return{h:0,w:n,b:a};o===n?(s=t-e,r=3):(s=t===n?e-o:o-t,r=t===n?5:1);const l=(r-s/(i-n))/6;return{h:l===1?0:l,w:n,b:a}},Le=(o,t,e)=>{if(t+e>=1){const i=t/(t+e);return{r:i,g:i,b:i}}let{r:s,g:r,b:n}=lt(o,1,.5);return[s,r,n]=[s,r,n].map(i=>i*(1-t-e)+t),{r:s,g:r,b:n}},re=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0;const i=s,a=s-r,l=s===0?0:a/s;return s===r?n=0:(o===s&&(n=(t-e)/a+(t<e?6:0)),t===s&&(n=(e-o)/a+2),e===s&&(n=(o-t)/a+4),n/=6),{h:n,s:l,v:i}},Ft=(o,t,e)=>{const s=o*6,r=t,n=e,i=Math.floor(s),a=s-i,l=n*(1-r),c=n*(1-a*r),h=n*(1-(1-a)*r),b=i%6,u=[n,c,l,l,h,n][b],d=[h,n,n,c,l,l][b],g=[l,l,h,n,n,c][b];return{r:u,g:d,b:g}},ne=(o,t,e,s)=>{const r=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16))];return s&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")},At=(o,t,e,s,r)=>{const n=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16)),G(Ce(s))];return r&&n[0].charAt(0)===n[0].charAt(1)&&n[1].charAt(0)===n[1].charAt(1)&&n[2].charAt(0)===n[2].charAt(1)&&n[3].charAt(0)===n[3].charAt(1)?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")},Ae=o=>{const t=String(o).trim().toLowerCase();if(Se(t))return Object.assign(Pe(t),{a:1,format:"rgb",ok:!0});if(ke(t))return{r:0,g:0,b:0,a:t==="transparent"?0:1,format:"rgb",ok:!0};let[,e,s,r,n]=I.rgb.exec(t)||[];return e&&s&&r?{r:e,g:s,b:r,a:n!==void 0?n:1,format:"rgb",ok:!0}:([,e,s,r,n]=I.hsl.exec(t)||[],e&&s&&r?{h:e,s,l:r,a:n!==void 0?n:1,format:"hsl",ok:!0}:([,e,s,r,n]=I.hsv.exec(t)||[],e&&s&&r?{h:e,s,v:r,a:n!==void 0?n:1,format:"hsv",ok:!0}:([,e,s,r,n]=I.hwb.exec(t)||[],e&&s&&r?{h:e,w:s,b:r,a:n!==void 0?n:1,format:"hwb",ok:!0}:([,e,s,r,n]=I.hex8.exec(t)||[],e&&s&&r&&n?{r:N(e),g:N(s),b:N(r),a:Dt(n),format:"hex",ok:!0}:([,e,s,r]=I.hex6.exec(t)||[],e&&s&&r?{r:N(e),g:N(s),b:N(r),a:1,format:"hex",ok:!0}:([,e,s,r,n]=I.hex4.exec(t)||[],e&&s&&r&&n?{r:N(e+e),g:N(s+s),b:N(r+r),a:Dt(n+n),format:"hex",ok:!0}:([,e,s,r]=I.hex3.exec(t)||[],e&&s&&r?{r:N(e+e),g:N(s+s),b:N(r+r),a:1,format:"hex",ok:!0}:{r:0,g:0,b:0,a:1,format:"rgb",ok:!o})))))))},ie=o=>{let t={r:0,g:0,b:0},e=o,s=1,r,n,i,a,l,c,h,b,u="rgb",d=!1;return(!e||typeof e=="string")&&(e=Ae(e),d=e.ok),nt(e,t)&&H(e.r)&&H(e.g)&&H(e.b)&&({r:h,g:b,b:l}=e,[h,b,l]=[h,b,l].map(g=>R(g,$t(g)?100:255)),t={r:h,g:b,b:l},u="format"in e?e.format:"rgb"),nt(e,{h:0,s:0,v:0})&&H(e.h)&&H(e.s)&&H(e.v)&&({h:c,s:r,v:n}=e,c=R(c,360),r=R(r,100),n=R(n,100),t=Ft(c,r,n),u="hsv"),nt(e,{h:0,s:0,l:0})&&H(e.h)&&H(e.s)&&H(e.l)&&({h:c,s:r,l:i}=e,c=R(c,360),r=R(r,100),i=R(i,100),t=lt(c,r,i),u="hsl"),nt(e,{h:0,w:0,b:0})&&H(e.h)&&H(e.w)&&H(e.b)&&({h:c,w:a,b:l}=e,c=R(c,360),a=R(a,100),l=R(l,100),t=Le(c,a,l),u="hwb"),H(e.a)&&(s=e.a,s=$t(s)||parseFloat(`${s}`)>1?R(s,100):s),{r:t.r,g:t.g,b:t.b,a:Ot(s),format:u,ok:d}},lo="1.0.9";class y{static matchers=I;static isOnePointZero=ye;static isPercentage=$t;static isValidCSSUnit=H;static isNonColor=ke;static isColorName=Se;static isColorType=nt;static pad2=G;static clamp01=ut;static bound01=R;static boundAlpha=Ot;static getRGBFromName=Pe;static convertHexToDecimal=Dt;static convertDecimalToHex=Ce;static rgbToHsl=oe;static rgbToHex=ne;static rgbToHsv=re;static rgbToHwb=se;static rgbaToHex=At;static hslToRgb=Ft;static hsvToRgb=Ft;static hueToRgb=ft;static hwbToRgb=Le;static parseIntFromHex=N;static stringInputToObject=Ae;static inputToRGB=ie;static roundPart=v;static webColors=wt;static nonColors=Gt;static version=lo;r;g;b;a;format;ok;originalInput;constructor(t,e){const s=e&&xe.includes(e)?e:"",{r,g:n,b:i,a,ok:l,format:c}=ie(t);this.originalInput=t,this.r=r,this.g=n,this.b=i,this.a=a,this.ok=l,this.format=s||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:s}=this;let r=0,n=0,i=0;return t<=.03928?r=t/12.92:r=((t+.055)/1.055)**2.4,e<=.03928?n=e/12.92:n=((e+.055)/1.055)**2.4,s<=.03928?i=s/12.92:i=((s+.055)/1.055)**2.4,.2126*r+.7152*n+.0722*i}get brightness(){const{r:t,g:e,b:s}=this.toRgb();return(t*299+e*587+s*114)/1e3}get name(){const{r:t,g:e,b:s}=this.toRgb(),[r]=wt.map(([n,i])=>{const a=(((i.r-t)*.3)**2+((i.g-e)*.6)**2+((i.b-s)*.1)**2)**.5;return[n,a]}).find(([,n],i,a)=>n===Math.min(...a.map(([,l])=>l)));return r}toRgb(){let{r:t,g:e,b:s,a:r}=this;return[t,e,s]=[t,e,s].map(n=>v(n*255*100)/100),r=v(r*100)/100,{r:t,g:e,b:s,a:r}}toRgbString(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v);return r===1?`rgb(${n}, ${i}, ${a})`:`rgba(${n}, ${i}, ${a}, ${r})`}toRgbCSS4String(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v),l=r===1?"":` / ${v(r*100)}%`;return`rgb(${n} ${i} ${a}${l})`}toHex(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return n===1?ne(e,s,r,t):At(e,s,r,n,t)}toHexString(t){return`#${this.toHex(t)}`}toHex8(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return At(e,s,r,n,t)}toHex8String(t){return`#${this.toHex8(t)}`}toHsv(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,v:a}=re(t,e,s);return{h:n,s:i,v:a,a:r}}toHsl(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,l:a}=oe(t,e,s);return{h:n,s:i,l:a,a:r}}toHslString(){let{h:t,s:e,l:s,a:r}=this.toHsl();return t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100)/100,r===1?`hsl(${t}, ${e}%, ${s}%)`:`hsla(${t}, ${e}%, ${s}%, ${r})`}toHslCSS4String(){let{h:t,s:e,l:s,a:r}=this.toHsl();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hsl(${t}deg ${e}% ${s}%${n})`}toHwb(){const{r:t,g:e,b:s,a:r}=this,{h:n,w:i,b:a}=se(t,e,s);return{h:n,w:i,b:a,a:r}}toHwbString(){let{h:t,w:e,b:s,a:r}=this.toHwb();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hwb(${t}deg ${e}% ${s}%${n})`}setAlpha(t){return typeof t!="number"?this:(this.a=Ot(t),this)}saturate(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=lt(e,ut(s+t/100),r);return Object.assign(this,{r:n,g:i,b:a}),this}desaturate(t){return typeof t=="number"?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=lt(e,s,ut(r+t/100));return Object.assign(this,{r:n,g:i,b:a}),this}darken(t){return typeof t=="number"?this.lighten(-t):this}spin(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=lt(ut((e*360+t)%360/360),s,r);return Object.assign(this,{r:n,g:i,b:a}),this}clone(){return new y(this)}toString(t){const{format:e}=this;return e==="hex"?this.toHexString(t):e==="hsl"?this.toHslString():e==="hwb"?this.toHwbString():this.toRgbString()}}class It{static Color=y;hue;hueSteps;lightSteps;saturation;colors;constructor(...t){let e=0,s=12,r=10,n=[.5],i=100;if(t.length===4)[e,s,r,i]=t;else if(t.length===3)[e,s,r]=t;else if(t.length===2&&([s,r]=t,[s,r].some(g=>g<1)))throw TypeError("ColorPalette: the two minimum arguments must be numbers higher than 0.");const a=[],l=360/s,c=y.roundPart((r-(r%2?1:0))/2),h=[.25,.2,.15,.11,.09,.075],b=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],u=b.find(g=>g.includes(r)),d=u?h[b.indexOf(u)]:100/(r+(r%2?0:1))/100;for(let g=1;g<c+1;g+=1)n=[...n,.5+d*g];for(let g=1;g<r-c;g+=1)n=[.5-d*g,...n];for(let g=0;g<s;g+=1){const p=(e+g*l)%360/360;n.forEach(f=>{const w=new y({h:p,s:1,l:f});a.push(i<100?w.saturate(i-100):w)})}this.hue=e,this.hueSteps=s,this.lightSteps=r,this.saturation=i,this.colors=a}}const Kt={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},it=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"],ae=o=>{if(!B(o))return!1;try{JSON.parse(o)}catch{return!1}return!0},Vt="v-hidden",co=o=>{const{format:t,id:e,componentLabels:s}=o,r=x({tagName:"div",className:`color-form ${t}`});let n=["hex"];return t==="rgb"?n=["red","green","blue","alpha"]:t==="hsl"?n=["hue","saturation","lightness","alpha"]:t==="hwb"&&(n=["hue","whiteness","blackness","alpha"]),n.forEach(i=>{const[a]=t==="hex"?["#"]:pe(i).split(""),l=`color_${t}_${i}_${e}`,c=s[`${i}Label`],h=x({tagName:"label"});m(h,"for",l),h.append(x({tagName:"span",ariaHidden:"true",innerText:`${a}:`}),x({tagName:"span",className:Vt,innerText:c}));const b=x({tagName:"input",id:l,type:t==="hex"?"text":"number",value:i==="alpha"?"100":"0",className:`color-input ${i}`,autocomplete:"off",spellcheck:!1});let u="100",d="1";i!=="alpha"&&(t==="rgb"?(u="255",d="1"):i==="hue"&&(u="360",d="1")),K(b,{min:"0",max:u,step:d}),r.append(h,b)}),r},ho=o=>{const{format:t,componentLabels:e}=o,{hueLabel:s,alphaLabel:r,lightnessLabel:n,saturationLabel:i,whitenessLabel:a,blacknessLabel:l}=e,c=t==="hsl"?360:100,h=t==="hsl"?100:360,b=100;let u=t==="hsl"?`${s} & ${n}`:`${n} & ${i}`;u=t==="hwb"?`${a} & ${l}`:u;const d=t==="hsl"?`${i}`:`${s}`,g=x({tagName:"div",className:`color-controls ${t}`}),p="color-pointer",f="color-slider";return[{i:1,c:p,l:u,min:0,max:c},{i:2,c:f,l:d,min:0,max:h},{i:3,c:f,l:r,min:0,max:b}].forEach($=>{const{i:S,c:L,l:P,min:C,max:M}=$,E=x({tagName:"div",className:"color-control",role:"presentation"});E.append(x({tagName:"div",className:`visual-control visual-control${S}`}));const A=x({tagName:"div",className:`${L} knob`,ariaLive:"polite",ariaLabel:P,role:"slider",tabIndex:0,ariaValueMin:`${C}`,ariaValueMax:`${M}`});E.append(A),g.append(E)}),g},le=(o,t,e)=>{const{input:s,format:r,componentLabels:n}=o,{defaultsLabel:i,presetsLabel:a}=n,l=e==="color-options",c=t instanceof It,h=l?a:i,b=c?t.colors:t,u=b.length,{lightSteps:d}=c?t:{lightSteps:null},g=d||[9,10].find(A=>u>=A*2&&!(u%A))||5,p=l&&u>g;let f=2;f=p&&u>g*2?3:f,f=p&&u>g*3?4:f,f=p&&u>g*4?5:f;const w=f-(u<=g*3?1:2),$=p&&u>w*g;let S=e;S+=$?" scrollable":"",S+=p?" multiline":"";const L=p?"1px":"0.25rem";let P=p?1.75:2;P=g>5&&p?1.5:P;const C=`${w*P}rem`,M=`calc(${f} * ${P}rem + ${f-1} * ${L})`,E=x({tagName:"ul",className:S,role:"listbox",ariaLabel:h});return $&&D(E,{"--grid-item-size":`${P}rem`,"--grid-fit":`${g}`,"--grid-gap":L,"--grid-height":C,"--grid-hover-height":M}),b.forEach(A=>{let[F,Q]=typeof A=="string"?A.trim().split(":"):[];A instanceof y&&(F=A.toHexString(),Q=F);const Ut=new y(A instanceof y?A:F,r).toString()===yt(s,"value"),xt=x({tagName:"li",className:`color-option${Ut?" active":""}`,innerText:`${Q||F}`,tabIndex:0,role:"option",ariaSelected:Ut?"true":"false"});m(xt,"data-value",`${F}`),l&&D(xt,{backgroundColor:F}),E.append(xt)}),E},go=o=>{const{input:t,parent:e,format:s,id:r,componentLabels:n,colorKeywords:i,colorPresets:a}=o,l=yt(t,"value")||"#fff",{nonColors:c}=y,{toggleLabel:h,pickerLabel:b,formatLabel:u,hexLabel:d}=n,g=c.includes(l)?"#fff":l;o.color=new y(g,s);const p=s==="hex"?d:pe(s),f=x({id:`picker-btn-${r}`,tagName:"button",type:"button",className:"picker-toggle btn-appearance",ariaExpanded:"false",ariaHasPopup:"true"});f.append(x({tagName:"span",className:Vt,innerText:`${b}. ${u}: ${p}`}));const w=x({tagName:"div",className:"color-dropdown picker",role:"group",ariaLabelledBy:`picker-btn-${r}`}),$=ho(o),S=co(o);if(w.append($,S),t.before(f),e.append(w),i||a){const L=x({tagName:"div",className:"color-dropdown scrollable menu"});a&&L.append(le(o,a,"color-options")),i&&i.length&&L.append(le(o,i,"color-defaults"));const P=x({tagName:"button",type:"button",className:"menu-toggle btn-appearance",tabIndex:-1,ariaExpanded:"false",ariaHasPopup:"true"}),C=encodeURI("http://www.w3.org/2000/svg"),M=Mt(C,{tagName:"svg"});m(M,"xmlns",C),m(M,"viewBox","0 0 512 512"),m(M,Me,"true");const E=Mt(C,{tagName:"path"});m(E,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),m(E,"fill","#fff"),M.append(E),P.append(x({tagName:"span",className:Vt,innerText:`${h}`}),M),e.append(P,L)}i&&c.includes(l)&&(o.value=l),m(t,X,"-1")},uo="2.0.0",Y="color-picker",bo=`[data-function="${Y}"]`,ce=`.${Y}`,po={componentLabels:Kt,colorLabels:it,format:"rgb",colorPresets:!1,colorKeywords:!1},{roundPart:k,nonColors:bt}=y,fo=o=>Ye(o,Y),mo=o=>new Ee(o),he=(o,t)=>{const e=t?Bt:jt,{input:s,pickerToggle:r,menuToggle:n}=o;e(s,Oe,o.showPicker),e(r,Et,o.togglePicker),n&&e(n,Et,o.toggleMenu)},He=(o,t)=>{const e=t?Bt:jt,{input:s,colorMenu:r,parent:n}=o,i=V(s),a=ro(i);e(o.controls,Ie,o.pointerDown),o.controlKnobs.forEach(l=>e(l,zt,o.handleKnobs)),e(a,Be,o.handleScroll),e(a,Ve,o.update),[s,...o.inputs].forEach(l=>e(l,Te,o.changeHandler)),r&&(e(r,Et,o.menuClickHandler),e(r,zt,o.menuKeyHandler)),e(i,ue,o.pointerMove),e(i,Ke,o.pointerUp),e(n,De,o.handleFocusOut),e(i,Fe,o.handleDismiss)},ge=o=>{Qe(o.input,new CustomEvent("colorpicker.change"))},Ne=o=>{o&&["bottom","top"].forEach(t=>O(o,t))},Ht=(o,t)=>{const{colorPicker:e,colorMenu:s,menuToggle:r,pickerToggle:n,parent:i}=o,a=t===e,l=a?s:e,c=a?r:n,h=a?n:r;T(i,"open")||q(i,"open"),l&&(O(l,"show"),Ne(l)),q(t,"bottom"),oo(t),q(t,"show"),a&&o.update(),o.isOpen||(He(o,!0),o.updateDropdownPosition(),o.isOpen=!0,m(o.input,X,"0"),r&&m(r,X,"0")),m(h,Nt,"true"),c&&m(c,Nt,"false")};class Ee{static Color=y;static ColorPalette=It;static getInstance=fo;static init=mo;static selector=bo;static roundPart=k;static setElementStyle=D;static setAttribute=m;static getBoundingClientRect=gt;static version=uo;static colorNames=it;static colorPickerLabels=Kt;id;input;color;format="rgb";parent;dragElement;isOpen=!1;controlPositions;colorLabels=Zt(it.map(t=>[t,t]));colorKeywords;colorPresets;componentLabels;pickerToggle;menuToggle;colorPicker;colorMenu;controls;inputs;controlKnobs;visuals;constructor(t,e){const s=z(t);if(typeof t>"u")throw new TypeError("ColorPicker target not specified.");if(B(t)&&!s)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);this.input=s;const r=fe(s,ce);if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");this.parent=r,this.id=de(s,Y),this.dragElement=void 0,this.isOpen=!1,this.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},this.colorKeywords=!1,this.colorPresets=!1;const{format:n,componentLabels:i,colorLabels:a,colorKeywords:l,colorPresets:c}=eo(s,po,e||{});let h=it;Lt(a)&&a.length===17?h=a:B(a)&&a.split(",").length===17&&(h=a.split(",")),K(this.colorLabels,Zt(h.map((p,f)=>[it[f],p])));const b=B(i)&&ae(i)?JSON.parse(i):i;if(this.componentLabels=K({...Kt},b),this.color=new y(s.value||"#fff",n),this.format=n,Lt(l)&&l.length?this.colorKeywords=l:B(l)&&l.length&&(this.colorKeywords=l.split(",").map(p=>p.trim())),Lt(c)&&c.length)this.colorPresets=c;else if(c&&ae(c)){const{hue:p,hueSteps:f,lightSteps:w,saturation:$}=JSON.parse(c);this.colorPresets=new It(p,f,w,$)}else B(c)&&(this.colorPresets=c.split(",").map(p=>p.trim()));go(this);const[u,d]=st("color-dropdown",r);this.pickerToggle=z(".picker-toggle",r),this.menuToggle=z(".menu-toggle",r),this.colorPicker=u,this.colorMenu=d,this.inputs=[...st("color-input",r)];const[g]=st("color-controls",r);this.controls=g,this.controlKnobs=[...st("knob",g)],this.visuals=[...st("visual-control",g)],this.update(),he(this,!0),ct.set(s,Y,this)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>bt.includes(t))}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return t!==""&&new y(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:s,format:r}=this,n=k(e.h*360),i=r==="hsl"?e.s:s.s,a=k(i*100),l=k(e.l*100),c=s.v*100;let h="black";if(l===100&&a===0)h=t.white;else if(l===0)h=t.black;else if(a===0)h=t.grey;else if(n<15||n>=345)h=t.red;else if(n>=15&&n<45)h=c>80&&a>80?t.orange:t.brown;else if(n>=45&&n<75){const b=n>46&&n<54&&c<80&&a>90,u=n>=54&&n<75&&c<80;h=b?t.gold:t.yellow,h=u?t.olive:h}else n>=75&&n<155?h=c<68?t.green:t.lime:n>=155&&n<175?h=t.teal:n>=175&&n<195?h=t.cyan:n>=195&&n<255?h=t.blue:n>=255&&n<270?h=t.violet:n>=270&&n<295?h=t.magenta:n>=295&&n<345&&(h=t.pink);return h}updateVisuals(){const{controlPositions:t,visuals:e}=this,[s,r,n]=e,{offsetHeight:i}=s,a=t.c2y/i,{r:l,g:c,b:h}=new y({h:a,s:1,l:.5}).toRgb(),b="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",u=1-t.c3y/i,d=k(u*100)/100,g=new y({h:a,s:1,l:.5,a:u}).toRgbString(),p=`linear-gradient(
|
|
1
|
+
"use strict";const _t="aria-description",Nt="aria-expanded",Me="aria-hidden",St="aria-selected",tt="aria-valuenow",et="aria-valuetext",Te="change",Re="DOMContentLoaded",Oe="focusin",De="focusout",zt="keydown",Fe="keyup",Et="click",Ie="pointerdown",ue="pointermove",Ke="pointerup",Ve="resize",Be="scroll",je="touchmove",j="ArrowDown",ot="ArrowUp",ht="ArrowLeft",U="ArrowRight",qe="Enter",Ge="Escape",Wt="Space",Ue="transitionDuration",_e="transitionProperty",X="tabindex",ze=navigator.userAgentData,mt=ze,{userAgent:We}=navigator,vt=We,Jt=/iPhone|iPad|iPod|Android/i;mt?mt.brands.some(o=>Jt.test(o.brand)):Jt.test(vt);const Xt=/(iPhone|iPod|iPad)/;mt?mt.brands.some(o=>Xt.test(o.brand)):Xt.test(vt);vt&&vt.includes("Firefox");const{head:kt}=document;["webkitPerspective","perspective"].some(o=>o in kt.style);const Bt=(o,t,e,s)=>{const r=s||!1;o.addEventListener(t,e,r)},jt=(o,t,e,s)=>{const r=s||!1;o.removeEventListener(t,e,r)},Je=(o,t,e,s)=>{const r=n=>{(n.target===o||n.currentTarget===o)&&(e.apply(o,[n]),jt(o,t,r,s))};Bt(o,t,r,s)},Xe=()=>{};(()=>{let o=!1;try{const t=Object.defineProperty({},"passive",{get:()=>(o=!0,o)});Je(document,Re,Xe,t)}catch{}return o})();["webkitTransform","transform"].some(o=>o in kt.style);["webkitAnimation","animation"].some(o=>o in kt.style);["webkitTransition","transition"].some(o=>o in kt.style);const yt=(o,t)=>o.getAttribute(t),m=(o,t,e)=>o.setAttribute(t,e),Pt=(o,t)=>o.removeAttribute(t),q=(o,...t)=>{o.classList.add(...t)},O=(o,...t)=>{o.classList.remove(...t)},T=(o,t)=>o.classList.contains(t),qt=o=>o!=null&&typeof o=="object"||!1,Z=o=>qt(o)&&typeof o.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(t=>o.nodeType===t)||!1,at=o=>Z(o)&&o.nodeType===1||!1,W=new Map,ct={data:W,set:(o,t,e)=>{at(o)&&(W.has(t)||W.set(t,new Map),W.get(t).set(o,e))},getAllFor:o=>W.get(o)||null,get:(o,t)=>{if(!at(o)||!t)return null;const e=ct.getAllFor(t);return o&&e&&e.get(o)||null},remove:(o,t)=>{const e=ct.getAllFor(t);!e||!at(o)||(e.delete(o),e.size===0&&W.delete(t))}},Ye=(o,t)=>ct.get(o,t),B=o=>typeof o=="string"||!1,Ze=o=>qt(o)&&o.constructor.name==="Window"||!1,be=o=>Z(o)&&o.nodeType===9||!1,V=o=>Ze(o)?o.document:be(o)?o:Z(o)?o.ownerDocument:window.document,K=(o,...t)=>Object.assign(o,...t),x=o=>{if(!o)return;if(B(o))return V().createElement(o);const{tagName:t}=o,e=x(t);if(!e)return;const s={...o};return delete s.tagName,K(e,s)},Mt=(o,t)=>{if(!o||!t)return;if(B(t))return V().createElementNS(o,t);const{tagName:e}=t,s=Mt(o,e);if(!s)return;const r={...t};return delete r.tagName,K(s,r)},Qe=(o,t)=>o.dispatchEvent(t),Tt=(o,t)=>{const e=getComputedStyle(o),s=t.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return e.getPropertyValue(s)},to=o=>{const t=Tt(o,_e),e=Tt(o,Ue),s=e.includes("ms")?1:1e3,r=t&&t!=="none"?parseFloat(e)*s:0;return Number.isNaN(r)?0:r},_=(o,t)=>o.focus(t),Yt=o=>["true",!0].includes(o)?!0:["false",!1].includes(o)?!1:["null","",null,void 0].includes(o)?null:o!==""&&!Number.isNaN(+o)?+o:o,pt=o=>Object.entries(o),eo=(o,t,e,s)=>{const r={...e},n={...o.dataset},i={...t},a={},l="title";return pt(n).forEach(([c,h])=>{const b=c;a[b]=Yt(h)}),pt(r).forEach(([c,h])=>{r[c]=Yt(h)}),pt(t).forEach(([c,h])=>{c in r?i[c]=r[c]:c in a?i[c]=a[c]:i[c]=c===l?yt(o,l):h}),i},Zt=o=>Object.fromEntries(o),oo=o=>o.offsetHeight,D=(o,t)=>{pt(t).forEach(([e,s])=>{if(s&&B(e)&&e.includes("--"))o.style.setProperty(e,s);else{const r={};r[e]=s,K(o.style,r)}})},so=o=>qt(o)&&o.constructor.name==="Map"||!1,pe=o=>o.toUpperCase(),gt=(o,t)=>{const{width:e,height:s,top:r,right:n,bottom:i,left:a}=o.getBoundingClientRect();let l=1,c=1;if(t&&at(o)){const{offsetWidth:h,offsetHeight:b}=o;l=h>0?Math.round(e)/h:1,c=b>0?Math.round(s)/b:1}return{width:e/l,height:s/c,top:r/c,right:n/l,bottom:i/c,left:a/l,x:a/l,y:r/c}},Ct=o=>V(o).documentElement;let Qt=0,te=0;const J=new Map,de=(o,t)=>{let e=t?Qt:te;if(t){const s=de(o),r=J.get(s)||new Map;J.has(s)||J.set(s,r),so(r)&&!r.has(t)?(r.set(t,e),Qt+=1):e=r.get(t)}else{const s=o.id||o;J.has(s)?e=J.get(s):(J.set(s,e),te+=1)}return e},ro=o=>{var t;return o?be(o)?o.defaultView:Z(o)?(t=o?.ownerDocument)==null?void 0:t.defaultView:o:window},Lt=o=>Array.isArray(o)||!1,fe=(o,t)=>o?o.closest(t)||fe(o.getRootNode().host,t):null,z=(o,t)=>at(o)?o:(Z(t)?t:V()).querySelector(o),st=(o,t)=>(t&&Z(t)?t:V()).getElementsByClassName(o),Gt=["transparent","currentColor","inherit","revert","initial"],v=o=>{const t=Math.floor(o);return o-t<.5?t:Math.round(o)},wt=[["aliceblue",{r:240,g:248,b:255}],["antiquewhite",{r:250,g:235,b:215}],["aqua",{r:0,g:255,b:255}],["aquamarine",{r:127,g:255,b:212}],["azure",{r:240,g:255,b:255}],["beige",{r:245,g:245,b:220}],["bisque",{r:255,g:228,b:196}],["black",{r:0,g:0,b:0}],["blanchedalmond",{r:255,g:235,b:205}],["blue",{r:0,g:0,b:255}],["blueviolet",{r:138,g:43,b:226}],["brown",{r:165,g:42,b:42}],["burlywood",{r:222,g:184,b:135}],["cadetblue",{r:95,g:158,b:160}],["chartreuse",{r:127,g:255,b:0}],["chocolate",{r:210,g:105,b:30}],["coral",{r:255,g:127,b:80}],["cornflowerblue",{r:100,g:149,b:237}],["cornsilk",{r:255,g:248,b:220}],["crimson",{r:220,g:20,b:60}],["cyan",{r:0,g:255,b:255}],["darkblue",{r:0,g:0,b:139}],["darkcyan",{r:0,g:139,b:139}],["darkgoldenrod",{r:184,g:134,b:11}],["darkgray",{r:169,g:169,b:169}],["darkgreen",{r:0,g:100,b:0}],["darkgrey",{r:169,g:169,b:169}],["darkkhaki",{r:189,g:183,b:107}],["darkmagenta",{r:139,g:0,b:139}],["darkolivegreen",{r:85,g:107,b:47}],["darkorange",{r:255,g:140,b:0}],["darkorchid",{r:153,g:50,b:204}],["darkred",{r:139,g:0,b:0}],["darksalmon",{r:233,g:150,b:122}],["darkseagreen",{r:143,g:188,b:143}],["darkslateblue",{r:72,g:61,b:139}],["darkslategray",{r:47,g:79,b:79}],["darkslategrey",{r:47,g:79,b:79}],["darkturquoise",{r:0,g:206,b:209}],["darkviolet",{r:148,g:0,b:211}],["deeppink",{r:255,g:20,b:147}],["deepskyblue",{r:0,g:191,b:255}],["dimgray",{r:105,g:105,b:105}],["dimgrey",{r:105,g:105,b:105}],["dodgerblue",{r:30,g:144,b:255}],["firebrick",{r:178,g:34,b:34}],["floralwhite",{r:255,g:250,b:240}],["forestgreen",{r:34,g:139,b:34}],["fuchsia",{r:255,g:0,b:255}],["gainsboro",{r:220,g:220,b:220}],["ghostwhite",{r:248,g:248,b:255}],["goldenrod",{r:218,g:165,b:32}],["gold",{r:255,g:215,b:0}],["gray",{r:128,g:128,b:128}],["green",{r:0,g:128,b:0}],["greenyellow",{r:173,g:255,b:47}],["grey",{r:128,g:128,b:128}],["honeydew",{r:240,g:255,b:240}],["hotpink",{r:255,g:105,b:180}],["indianred",{r:205,g:92,b:92}],["indigo",{r:75,g:0,b:130}],["ivory",{r:255,g:255,b:240}],["khaki",{r:240,g:230,b:140}],["lavenderblush",{r:255,g:240,b:245}],["lavender",{r:230,g:230,b:250}],["lawngreen",{r:124,g:252,b:0}],["lemonchiffon",{r:255,g:250,b:205}],["lightblue",{r:173,g:216,b:230}],["lightcoral",{r:240,g:128,b:128}],["lightcyan",{r:224,g:255,b:255}],["lightgoldenrodyellow",{r:250,g:250,b:210}],["lightgray",{r:211,g:211,b:211}],["lightgreen",{r:144,g:238,b:144}],["lightgrey",{r:211,g:211,b:211}],["lightpink",{r:255,g:182,b:193}],["lightsalmon",{r:255,g:160,b:122}],["lightseagreen",{r:32,g:178,b:170}],["lightskyblue",{r:135,g:206,b:250}],["lightslategray",{r:119,g:136,b:153}],["lightslategrey",{r:119,g:136,b:153}],["lightsteelblue",{r:176,g:196,b:222}],["lightyellow",{r:255,g:255,b:224}],["lime",{r:0,g:255,b:0}],["limegreen",{r:50,g:205,b:50}],["linen",{r:250,g:240,b:230}],["magenta",{r:255,g:0,b:255}],["maroon",{r:128,g:0,b:0}],["mediumaquamarine",{r:102,g:205,b:170}],["mediumblue",{r:0,g:0,b:205}],["mediumorchid",{r:186,g:85,b:211}],["mediumpurple",{r:147,g:112,b:219}],["mediumseagreen",{r:60,g:179,b:113}],["mediumslateblue",{r:123,g:104,b:238}],["mediumspringgreen",{r:0,g:250,b:154}],["mediumturquoise",{r:72,g:209,b:204}],["mediumvioletred",{r:199,g:21,b:133}],["midnightblue",{r:25,g:25,b:112}],["mintcream",{r:245,g:255,b:250}],["mistyrose",{r:255,g:228,b:225}],["moccasin",{r:255,g:228,b:181}],["navajowhite",{r:255,g:222,b:173}],["navy",{r:0,g:0,b:128}],["oldlace",{r:253,g:245,b:230}],["olive",{r:128,g:128,b:0}],["olivedrab",{r:107,g:142,b:35}],["orange",{r:255,g:165,b:0}],["orangered",{r:255,g:69,b:0}],["orchid",{r:218,g:112,b:214}],["palegoldenrod",{r:238,g:232,b:170}],["palegreen",{r:152,g:251,b:152}],["paleturquoise",{r:175,g:238,b:238}],["palevioletred",{r:219,g:112,b:147}],["papayawhip",{r:255,g:239,b:213}],["peachpuff",{r:255,g:218,b:185}],["peru",{r:205,g:133,b:63}],["pink",{r:255,g:192,b:203}],["plum",{r:221,g:160,b:221}],["powderblue",{r:176,g:224,b:230}],["purple",{r:128,g:0,b:128}],["rebeccapurple",{r:102,g:51,b:153}],["red",{r:255,g:0,b:0}],["rosybrown",{r:188,g:143,b:143}],["royalblue",{r:65,g:105,b:225}],["saddlebrown",{r:139,g:69,b:19}],["salmon",{r:250,g:128,b:114}],["sandybrown",{r:244,g:164,b:96}],["seagreen",{r:46,g:139,b:87}],["seashell",{r:255,g:245,b:238}],["sienna",{r:160,g:82,b:45}],["silver",{r:192,g:192,b:192}],["skyblue",{r:135,g:206,b:235}],["slateblue",{r:106,g:90,b:205}],["slategray",{r:112,g:128,b:144}],["slategrey",{r:112,g:128,b:144}],["snow",{r:255,g:250,b:250}],["springgreen",{r:0,g:255,b:127}],["steelblue",{r:70,g:130,b:180}],["tan",{r:210,g:180,b:140}],["teal",{r:0,g:128,b:128}],["thistle",{r:216,g:191,b:216}],["tomato",{r:255,g:99,b:71}],["turquoise",{r:64,g:224,b:208}],["violet",{r:238,g:130,b:238}],["wheat",{r:245,g:222,b:179}],["white",{r:255,g:255,b:255}],["whitesmoke",{r:245,g:245,b:245}],["yellow",{r:255,g:255,b:0}],["yellowgreen",{r:154,g:205,b:50}]],me="deg|rad|grad|turn",ve="[-\\+]?\\d+%?",we="[-\\+]?\\d*\\.\\d+%?",$e=`[-\\+]?\\d*\\.?\\d+(?:${me})?`,dt=`(?:${we})|(?:${ve})`,Rt=`(?:${dt})|(?:${$e}?)`,no="(?:[\\s|\\(\\s|\\s\\(\\s]+)?",io="(?:[\\s|\\)\\s]+)?",ee="(?:[,|\\s]+)",ao="(?:[,|\\/\\s]*)?",rt=`${no}(${Rt})${ee}(${dt})${ee}(${dt})${ao}(${dt})?${io}`,I={CSS_UNIT:new RegExp(Rt),ANGLES:me,CSS_ANGLE:$e,CSS_INTEGER:ve,CSS_NUMBER:we,CSS_UNIT2:Rt,PERMISSIVE_MATCH:rt,hwb:new RegExp(`hwb${rt}`),rgb:new RegExp(`rgb(?:a)?${rt}`),hsl:new RegExp(`hsl(?:a)?${rt}`),hsv:new RegExp(`hsv(?:a)?${rt}`),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/},ke=o=>Gt.includes(o),nt=(o,t)=>o!==null&&typeof o=="object"&&Object.keys(t).every(e=>e in o),ye=o=>`${o}`.includes(".")&&parseFloat(o)===1,$t=o=>typeof o=="string"&&o.includes("%"),H=o=>!!I.CSS_UNIT.exec(`${o}`),xe=["rgb","hex","hsl","hsv","hwb"],Se=o=>Gt.includes(o)||["#",...xe].some(t=>o.includes(t))?!1:wt.some(([t])=>o===t),R=(o,t)=>{let e=o;if(typeof o=="number"&&Math.min(o,0)===0&&Math.max(o,1)===1)return o;ye(o)&&(e="100%");const s=$t(e);return e=t===360?parseFloat(e):Math.min(t,Math.max(0,parseFloat(e))),s&&(e=e*t/100),Math.abs(e-t)<1e-6?1:(t===360?e=(e<0?e%t+t:e%t)/t:e=e%t/t,e)},Ot=o=>{let t=parseFloat(o);return(Number.isNaN(t)||t<0||t>1)&&(t=1),t},ut=o=>Math.min(1,Math.max(0,o)),G=o=>o.length===1?`0${o}`:String(o),Pe=o=>{const[[,t]]=wt.filter(([e])=>e===o.toLowerCase());return t},N=o=>parseInt(o,16),Dt=o=>N(o)/255,Ce=o=>v(o*255).toString(16),oe=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0,i=0;const a=(s+r)/2;if(s===r)i=0,n=0;else{const l=s-r;i=a>.5?l/(2-s-r):l/(s+r),s===o&&(n=(t-e)/l+(t<e?6:0)),s===t&&(n=(e-o)/l+2),s===e&&(n=(o-t)/l+4),n/=6}return{h:n,s:i,l:a}},ft=(o,t,e)=>{let s=e;return s<0&&(s+=1),s>1&&(s-=1),s<1/6?o+(t-o)*(6*s):s<1/2?t:s<2/3?o+(t-o)*(2/3-s)*6:o},lt=(o,t,e)=>{let s=0,r=0,n=0;if(t===0)r=e,n=e,s=e;else if(e){const i=e<.5?e*(1+t):e+t-e*t,a=2*e-i;s=ft(a,i,o+1/3),r=ft(a,i,o),n=ft(a,i,o-1/3)}return{r:s,g:r,b:n}},se=(o,t,e)=>{let s=0,r=0;const n=Math.min(o,t,e),i=Math.max(o,t,e),a=1-i;if(i===n)return{h:0,w:n,b:a};o===n?(s=t-e,r=3):(s=t===n?e-o:o-t,r=t===n?5:1);const l=(r-s/(i-n))/6;return{h:l===1?0:l,w:n,b:a}},Le=(o,t,e)=>{if(t+e>=1){const i=t/(t+e);return{r:i,g:i,b:i}}let{r:s,g:r,b:n}=lt(o,1,.5);return[s,r,n]=[s,r,n].map(i=>i*(1-t-e)+t),{r:s,g:r,b:n}},re=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0;const i=s,a=s-r,l=s===0?0:a/s;return s===r?n=0:(o===s&&(n=(t-e)/a+(t<e?6:0)),t===s&&(n=(e-o)/a+2),e===s&&(n=(o-t)/a+4),n/=6),{h:n,s:l,v:i}},Ft=(o,t,e)=>{const s=o*6,r=t,n=e,i=Math.floor(s),a=s-i,l=n*(1-r),c=n*(1-a*r),h=n*(1-(1-a)*r),b=i%6,u=[n,c,l,l,h,n][b],d=[h,n,n,c,l,l][b],g=[l,l,h,n,n,c][b];return{r:u,g:d,b:g}},ne=(o,t,e,s)=>{const r=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16))];return s&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")},At=(o,t,e,s,r)=>{const n=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16)),G(Ce(s))];return r&&n[0].charAt(0)===n[0].charAt(1)&&n[1].charAt(0)===n[1].charAt(1)&&n[2].charAt(0)===n[2].charAt(1)&&n[3].charAt(0)===n[3].charAt(1)?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")},Ae=o=>{const t=String(o).trim().toLowerCase();if(Se(t))return Object.assign(Pe(t),{a:1,format:"rgb",ok:!0});if(ke(t))return{r:0,g:0,b:0,a:t==="transparent"?0:1,format:"rgb",ok:!0};let[,e,s,r,n]=I.rgb.exec(t)||[];return e&&s&&r?{r:e,g:s,b:r,a:n!==void 0?n:1,format:"rgb",ok:!0}:([,e,s,r,n]=I.hsl.exec(t)||[],e&&s&&r?{h:e,s,l:r,a:n!==void 0?n:1,format:"hsl",ok:!0}:([,e,s,r,n]=I.hsv.exec(t)||[],e&&s&&r?{h:e,s,v:r,a:n!==void 0?n:1,format:"hsv",ok:!0}:([,e,s,r,n]=I.hwb.exec(t)||[],e&&s&&r?{h:e,w:s,b:r,a:n!==void 0?n:1,format:"hwb",ok:!0}:([,e,s,r,n]=I.hex8.exec(t)||[],e&&s&&r&&n?{r:N(e),g:N(s),b:N(r),a:Dt(n),format:"hex",ok:!0}:([,e,s,r]=I.hex6.exec(t)||[],e&&s&&r?{r:N(e),g:N(s),b:N(r),a:1,format:"hex",ok:!0}:([,e,s,r,n]=I.hex4.exec(t)||[],e&&s&&r&&n?{r:N(e+e),g:N(s+s),b:N(r+r),a:Dt(n+n),format:"hex",ok:!0}:([,e,s,r]=I.hex3.exec(t)||[],e&&s&&r?{r:N(e+e),g:N(s+s),b:N(r+r),a:1,format:"hex",ok:!0}:{r:0,g:0,b:0,a:1,format:"rgb",ok:!o})))))))},ie=o=>{let t={r:0,g:0,b:0},e=o,s=1,r,n,i,a,l,c,h,b,u="rgb",d=!1;return(!e||typeof e=="string")&&(e=Ae(e),d=e.ok),nt(e,t)&&H(e.r)&&H(e.g)&&H(e.b)&&({r:h,g:b,b:l}=e,[h,b,l]=[h,b,l].map(g=>R(g,$t(g)?100:255)),t={r:h,g:b,b:l},u="format"in e?e.format:"rgb"),nt(e,{h:0,s:0,v:0})&&H(e.h)&&H(e.s)&&H(e.v)&&({h:c,s:r,v:n}=e,c=R(c,360),r=R(r,100),n=R(n,100),t=Ft(c,r,n),u="hsv"),nt(e,{h:0,s:0,l:0})&&H(e.h)&&H(e.s)&&H(e.l)&&({h:c,s:r,l:i}=e,c=R(c,360),r=R(r,100),i=R(i,100),t=lt(c,r,i),u="hsl"),nt(e,{h:0,w:0,b:0})&&H(e.h)&&H(e.w)&&H(e.b)&&({h:c,w:a,b:l}=e,c=R(c,360),a=R(a,100),l=R(l,100),t=Le(c,a,l),u="hwb"),H(e.a)&&(s=e.a,s=$t(s)||parseFloat(`${s}`)>1?R(s,100):s),{r:t.r,g:t.g,b:t.b,a:Ot(s),format:u,ok:d}},lo="1.0.9";class y{static matchers=I;static isOnePointZero=ye;static isPercentage=$t;static isValidCSSUnit=H;static isNonColor=ke;static isColorName=Se;static isColorType=nt;static pad2=G;static clamp01=ut;static bound01=R;static boundAlpha=Ot;static getRGBFromName=Pe;static convertHexToDecimal=Dt;static convertDecimalToHex=Ce;static rgbToHsl=oe;static rgbToHex=ne;static rgbToHsv=re;static rgbToHwb=se;static rgbaToHex=At;static hslToRgb=Ft;static hsvToRgb=Ft;static hueToRgb=ft;static hwbToRgb=Le;static parseIntFromHex=N;static stringInputToObject=Ae;static inputToRGB=ie;static roundPart=v;static webColors=wt;static nonColors=Gt;static version=lo;r;g;b;a;format;ok;originalInput;constructor(t,e){const s=e&&xe.includes(e)?e:"",{r,g:n,b:i,a,ok:l,format:c}=ie(t);this.originalInput=t,this.r=r,this.g=n,this.b=i,this.a=a,this.ok=l,this.format=s||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:s}=this;let r=0,n=0,i=0;return t<=.03928?r=t/12.92:r=((t+.055)/1.055)**2.4,e<=.03928?n=e/12.92:n=((e+.055)/1.055)**2.4,s<=.03928?i=s/12.92:i=((s+.055)/1.055)**2.4,.2126*r+.7152*n+.0722*i}get brightness(){const{r:t,g:e,b:s}=this.toRgb();return(t*299+e*587+s*114)/1e3}get name(){const{r:t,g:e,b:s}=this.toRgb(),[r]=wt.map(([n,i])=>{const a=(((i.r-t)*.3)**2+((i.g-e)*.6)**2+((i.b-s)*.1)**2)**.5;return[n,a]}).find(([,n],i,a)=>n===Math.min(...a.map(([,l])=>l)));return r}toRgb(){let{r:t,g:e,b:s,a:r}=this;return[t,e,s]=[t,e,s].map(n=>v(n*255*100)/100),r=v(r*100)/100,{r:t,g:e,b:s,a:r}}toRgbString(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v);return r===1?`rgb(${n}, ${i}, ${a})`:`rgba(${n}, ${i}, ${a}, ${r})`}toRgbCSS4String(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v),l=r===1?"":` / ${v(r*100)}%`;return`rgb(${n} ${i} ${a}${l})`}toHex(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return n===1?ne(e,s,r,t):At(e,s,r,n,t)}toHexString(t){return`#${this.toHex(t)}`}toHex8(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return At(e,s,r,n,t)}toHex8String(t){return`#${this.toHex8(t)}`}toHsv(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,v:a}=re(t,e,s);return{h:n,s:i,v:a,a:r}}toHsl(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,l:a}=oe(t,e,s);return{h:n,s:i,l:a,a:r}}toHslString(){let{h:t,s:e,l:s,a:r}=this.toHsl();return t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100)/100,r===1?`hsl(${t}, ${e}%, ${s}%)`:`hsla(${t}, ${e}%, ${s}%, ${r})`}toHslCSS4String(){let{h:t,s:e,l:s,a:r}=this.toHsl();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hsl(${t}deg ${e}% ${s}%${n})`}toHwb(){const{r:t,g:e,b:s,a:r}=this,{h:n,w:i,b:a}=se(t,e,s);return{h:n,w:i,b:a,a:r}}toHwbString(){let{h:t,w:e,b:s,a:r}=this.toHwb();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hwb(${t}deg ${e}% ${s}%${n})`}setAlpha(t){return typeof t!="number"?this:(this.a=Ot(t),this)}saturate(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=lt(e,ut(s+t/100),r);return Object.assign(this,{r:n,g:i,b:a}),this}desaturate(t){return typeof t=="number"?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=lt(e,s,ut(r+t/100));return Object.assign(this,{r:n,g:i,b:a}),this}darken(t){return typeof t=="number"?this.lighten(-t):this}spin(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=lt(ut((e*360+t)%360/360),s,r);return Object.assign(this,{r:n,g:i,b:a}),this}clone(){return new y(this)}toString(t){const{format:e}=this;return e==="hex"?this.toHexString(t):e==="hsl"?this.toHslString():e==="hwb"?this.toHwbString():this.toRgbString()}}class It{static Color=y;hue;hueSteps;lightSteps;saturation;colors;constructor(...t){let e=0,s=12,r=10,n=[.5],i=100;if(t.length===4)[e,s,r,i]=t;else if(t.length===3)[e,s,r]=t;else if(t.length===2&&([s,r]=t,[s,r].some(g=>g<1)))throw TypeError("ColorPalette: the two minimum arguments must be numbers higher than 0.");const a=[],l=360/s,c=y.roundPart((r-(r%2?1:0))/2),h=[.25,.2,.15,.11,.09,.075],b=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],u=b.find(g=>g.includes(r)),d=u?h[b.indexOf(u)]:100/(r+(r%2?0:1))/100;for(let g=1;g<c+1;g+=1)n=[...n,.5+d*g];for(let g=1;g<r-c;g+=1)n=[.5-d*g,...n];for(let g=0;g<s;g+=1){const p=(e+g*l)%360/360;n.forEach(f=>{const w=new y({h:p,s:1,l:f});a.push(i<100?w.saturate(i-100):w)})}this.hue=e,this.hueSteps=s,this.lightSteps=r,this.saturation=i,this.colors=a}}const Kt={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},it=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"],ae=o=>{if(!B(o))return!1;try{JSON.parse(o)}catch{return!1}return!0},Vt="v-hidden",co=o=>{const{format:t,id:e,componentLabels:s}=o,r=x({tagName:"div",className:`color-form ${t}`});let n=["hex"];return t==="rgb"?n=["red","green","blue","alpha"]:t==="hsl"?n=["hue","saturation","lightness","alpha"]:t==="hwb"&&(n=["hue","whiteness","blackness","alpha"]),n.forEach(i=>{const[a]=t==="hex"?["#"]:pe(i).split(""),l=`color_${t}_${i}_${e}`,c=s[`${i}Label`],h=x({tagName:"label"});m(h,"for",l),h.append(x({tagName:"span",ariaHidden:"true",innerText:`${a}:`}),x({tagName:"span",className:Vt,innerText:c}));const b=x({tagName:"input",id:l,type:t==="hex"?"text":"number",value:i==="alpha"?"100":"0",className:`color-input ${i}`,autocomplete:"off",spellcheck:!1});let u="100",d="1";i!=="alpha"&&(t==="rgb"?(u="255",d="1"):i==="hue"&&(u="360",d="1")),K(b,{min:"0",max:u,step:d}),r.append(h,b)}),r},ho=o=>{const{format:t,componentLabels:e}=o,{hueLabel:s,alphaLabel:r,lightnessLabel:n,saturationLabel:i,whitenessLabel:a,blacknessLabel:l}=e,c=t==="hsl"?360:100,h=t==="hsl"?100:360,b=100;let u=t==="hsl"?`${s} & ${n}`:`${n} & ${i}`;u=t==="hwb"?`${a} & ${l}`:u;const d=t==="hsl"?`${i}`:`${s}`,g=x({tagName:"div",className:`color-controls ${t}`}),p="color-pointer",f="color-slider";return[{i:1,c:p,l:u,min:0,max:c},{i:2,c:f,l:d,min:0,max:h},{i:3,c:f,l:r,min:0,max:b}].forEach($=>{const{i:S,c:L,l:P,min:C,max:M}=$,E=x({tagName:"div",className:"color-control",role:"presentation"});E.append(x({tagName:"div",className:`visual-control visual-control${S}`}));const A=x({tagName:"div",className:`${L} knob`,ariaLive:"polite",ariaLabel:P,role:"slider",tabIndex:0,ariaValueMin:`${C}`,ariaValueMax:`${M}`});E.append(A),g.append(E)}),g},le=(o,t,e)=>{const{input:s,format:r,componentLabels:n}=o,{defaultsLabel:i,presetsLabel:a}=n,l=e==="color-options",c=t instanceof It,h=l?a:i,b=c?t.colors:t,u=b.length,{lightSteps:d}=c?t:{lightSteps:null},g=d||[9,10].find(A=>u>=A*2&&!(u%A))||5,p=l&&u>g;let f=2;f=p&&u>g*2?3:f,f=p&&u>g*3?4:f,f=p&&u>g*4?5:f;const w=f-(u<=g*3?1:2),$=p&&u>w*g;let S=e;S+=$?" scrollable":"",S+=p?" multiline":"";const L=p?"1px":"0.25rem";let P=p?1.75:2;P=g>5&&p?1.5:P;const C=`${w*P}rem`,M=`calc(${f} * ${P}rem + ${f-1} * ${L})`,E=x({tagName:"ul",className:S,role:"listbox",ariaLabel:h});return $&&D(E,{"--grid-item-size":`${P}rem`,"--grid-fit":`${g}`,"--grid-gap":L,"--grid-height":C,"--grid-hover-height":M}),b.forEach(A=>{let[F,Q]=typeof A=="string"?A.trim().split(":"):[];A instanceof y&&(F=A.toHexString(),Q=F);const Ut=new y(A instanceof y?A:F,r).toString()===yt(s,"value"),xt=x({tagName:"li",className:`color-option${Ut?" active":""}`,innerText:`${Q||F}`,tabIndex:0,role:"option",ariaSelected:Ut?"true":"false"});m(xt,"data-value",`${F}`),l&&D(xt,{backgroundColor:F}),E.append(xt)}),E},go=o=>{const{input:t,parent:e,format:s,id:r,componentLabels:n,colorKeywords:i,colorPresets:a}=o,l=yt(t,"value")||"#fff",{nonColors:c}=y,{toggleLabel:h,pickerLabel:b,formatLabel:u,hexLabel:d}=n,g=c.includes(l)?"#fff":l;o.color=new y(g,s);const p=s==="hex"?d:pe(s),f=x({id:`picker-btn-${r}`,tagName:"button",type:"button",className:"picker-toggle btn-appearance",ariaExpanded:"false",ariaHasPopup:"true"});f.append(x({tagName:"span",className:Vt,innerText:`${b}. ${u}: ${p}`}));const w=x({tagName:"div",className:"color-dropdown picker",role:"group",ariaLabelledBy:`picker-btn-${r}`}),$=ho(o),S=co(o);if(w.append($,S),t.before(f),e.append(w),i||a){const L=x({tagName:"div",className:"color-dropdown scrollable menu"});a&&L.append(le(o,a,"color-options")),i&&i.length&&L.append(le(o,i,"color-defaults"));const P=x({tagName:"button",type:"button",className:"menu-toggle btn-appearance",tabIndex:-1,ariaExpanded:"false",ariaHasPopup:"true"}),C=encodeURI("http://www.w3.org/2000/svg"),M=Mt(C,{tagName:"svg"});m(M,"xmlns",C),m(M,"viewBox","0 0 512 512"),m(M,Me,"true");const E=Mt(C,{tagName:"path"});m(E,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),m(E,"fill","#fff"),M.append(E),P.append(x({tagName:"span",className:Vt,innerText:`${h}`}),M),e.append(P,L)}i&&c.includes(l)&&(o.value=l),m(t,X,"-1")},uo="2.0.1",Y="color-picker",bo=`[data-function="${Y}"]`,ce=`.${Y}`,po={componentLabels:Kt,colorLabels:it,format:"rgb",colorPresets:!1,colorKeywords:!1},{roundPart:k,nonColors:bt}=y,fo=o=>Ye(o,Y),mo=o=>new Ee(o),he=(o,t)=>{const e=t?Bt:jt,{input:s,pickerToggle:r,menuToggle:n}=o;e(s,Oe,o.showPicker),e(r,Et,o.togglePicker),n&&e(n,Et,o.toggleMenu)},He=(o,t)=>{const e=t?Bt:jt,{input:s,colorMenu:r,parent:n}=o,i=V(s),a=ro(i);e(o.controls,Ie,o.pointerDown),o.controlKnobs.forEach(l=>e(l,zt,o.handleKnobs)),e(a,Be,o.handleScroll),e(a,Ve,o.update),[s,...o.inputs].forEach(l=>e(l,Te,o.changeHandler)),r&&(e(r,Et,o.menuClickHandler),e(r,zt,o.menuKeyHandler)),e(i,ue,o.pointerMove),e(i,Ke,o.pointerUp),e(n,De,o.handleFocusOut),e(i,Fe,o.handleDismiss)},ge=o=>{Qe(o.input,new CustomEvent("colorpicker.change"))},Ne=o=>{o&&["bottom","top"].forEach(t=>O(o,t))},Ht=(o,t)=>{const{colorPicker:e,colorMenu:s,menuToggle:r,pickerToggle:n,parent:i}=o,a=t===e,l=a?s:e,c=a?r:n,h=a?n:r;T(i,"open")||q(i,"open"),l&&(O(l,"show"),Ne(l)),q(t,"bottom"),oo(t),q(t,"show"),a&&o.update(),o.isOpen||(He(o,!0),o.updateDropdownPosition(),o.isOpen=!0,m(o.input,X,"0"),r&&m(r,X,"0")),m(h,Nt,"true"),c&&m(c,Nt,"false")};class Ee{static Color=y;static ColorPalette=It;static getInstance=fo;static init=mo;static selector=bo;static roundPart=k;static setElementStyle=D;static setAttribute=m;static getBoundingClientRect=gt;static version=uo;static colorNames=it;static colorPickerLabels=Kt;id;input;color;format="rgb";parent;dragElement;isOpen=!1;controlPositions;colorLabels=Zt(it.map(t=>[t,t]));colorKeywords;colorPresets;componentLabels;pickerToggle;menuToggle;colorPicker;colorMenu;controls;inputs;controlKnobs;visuals;constructor(t,e){const s=z(t);if(typeof t>"u")throw new TypeError("ColorPicker target not specified.");if(B(t)&&!s)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);this.input=s;const r=fe(s,ce);if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");this.parent=r,this.id=de(s,Y),this.dragElement=void 0,this.isOpen=!1,this.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},this.colorKeywords=!1,this.colorPresets=!1;const{format:n,componentLabels:i,colorLabels:a,colorKeywords:l,colorPresets:c}=eo(s,po,e||{});let h=it;Lt(a)&&a.length===17?h=a:B(a)&&a.split(",").length===17&&(h=a.split(",")),K(this.colorLabels,Zt(h.map((p,f)=>[it[f],p])));const b=B(i)&&ae(i)?JSON.parse(i):i;if(this.componentLabels=K({...Kt},b),this.color=new y(s.value||"#fff",n),this.format=n,Lt(l)&&l.length?this.colorKeywords=l:B(l)&&l.length&&(this.colorKeywords=l.split(",").map(p=>p.trim())),Lt(c)&&c.length)this.colorPresets=c;else if(c&&ae(c)){const{hue:p,hueSteps:f,lightSteps:w,saturation:$}=JSON.parse(c);this.colorPresets=new It(p,f,w,$)}else B(c)&&(this.colorPresets=c.split(",").map(p=>p.trim()));go(this);const[u,d]=st("color-dropdown",r);this.pickerToggle=z(".picker-toggle",r),this.menuToggle=z(".menu-toggle",r),this.colorPicker=u,this.colorMenu=d,this.inputs=[...st("color-input",r)];const[g]=st("color-controls",r);this.controls=g,this.controlKnobs=[...st("knob",g)],this.visuals=[...st("visual-control",g)],this.update(),he(this,!0),ct.set(s,Y,this)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>bt.includes(t))}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return t!==""&&new y(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:s,format:r}=this,n=k(e.h*360),i=r==="hsl"?e.s:s.s,a=k(i*100),l=k(e.l*100),c=s.v*100;let h="black";if(l===100&&a===0)h=t.white;else if(l===0)h=t.black;else if(a===0)h=t.grey;else if(n<15||n>=345)h=t.red;else if(n>=15&&n<45)h=c>80&&a>80?t.orange:t.brown;else if(n>=45&&n<75){const b=n>46&&n<54&&c<80&&a>90,u=n>=54&&n<75&&c<80;h=b?t.gold:t.yellow,h=u?t.olive:h}else n>=75&&n<155?h=c<68?t.green:t.lime:n>=155&&n<175?h=t.teal:n>=175&&n<195?h=t.cyan:n>=195&&n<255?h=t.blue:n>=255&&n<270?h=t.violet:n>=270&&n<295?h=t.magenta:n>=295&&n<345&&(h=t.pink);return h}updateVisuals(){const{controlPositions:t,visuals:e}=this,[s,r,n]=e,{offsetHeight:i}=s,a=t.c2y/i,{r:l,g:c,b:h}=new y({h:a,s:1,l:.5}).toRgb(),b="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",u=1-t.c3y/i,d=k(u*100)/100,g=new y({h:a,s:1,l:.5,a:u}).toRgbString(),p=`linear-gradient(
|
|
2
2
|
rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
|
|
3
3
|
rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,
|
|
4
4
|
rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,
|
package/dist/js/color-picker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var ColorPicker=function(){"use strict";const Ut="aria-description",xt="aria-expanded",Me="aria-hidden",Pt="aria-selected",Q="aria-valuenow",tt="aria-valuetext",Te="change",Re="DOMContentLoaded",Oe="focusin",De="focusout",_t="keydown",Fe="keyup",St="click",Ie="pointerdown",zt="pointermove",Ke="pointerup",Ve="resize",Be="scroll",je="touchmove",j="ArrowDown",et="ArrowUp",ht="ArrowLeft",U="ArrowRight",qe="Enter",Ge="Escape",Wt="Space",Ue="transitionDuration",_e="transitionProperty",W="tabindex",ze=navigator.userAgentData,gt=ze,{userAgent:We}=navigator,ut=We,Jt=/iPhone|iPad|iPod|Android/i;gt?gt.brands.some(o=>Jt.test(o.brand)):Jt.test(ut);const Xt=/(iPhone|iPod|iPad)/;gt?gt.brands.some(o=>Xt.test(o.brand)):Xt.test(ut),ut&&ut.includes("Firefox");const{head:bt}=document;["webkitPerspective","perspective"].some(o=>o in bt.style);const Ct=(o,t,e,s)=>{const r=s||!1;o.addEventListener(t,e,r)},Lt=(o,t,e,s)=>{const r=s||!1;o.removeEventListener(t,e,r)},Je=(o,t,e,s)=>{const r=n=>{(n.target===o||n.currentTarget===o)&&(e.apply(o,[n]),Lt(o,t,r,s))};Ct(o,t,r,s)},Xe=()=>{};(()=>{let o=!1;try{const t=Object.defineProperty({},"passive",{get:()=>(o=!0,o)});Je(document,Re,Xe,t)}catch{}return o})(),["webkitTransform","transform"].some(o=>o in bt.style),["webkitAnimation","animation"].some(o=>o in bt.style),["webkitTransition","transition"].some(o=>o in bt.style);const pt=(o,t)=>o.getAttribute(t),m=(o,t,e)=>o.setAttribute(t,e),At=(o,t)=>o.removeAttribute(t),q=(o,...t)=>{o.classList.add(...t)},O=(o,...t)=>{o.classList.remove(...t)},M=(o,t)=>o.classList.contains(t),Ht=o=>o!=null&&typeof o=="object"||!1,J=o=>Ht(o)&&typeof o.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(t=>o.nodeType===t)||!1,ot=o=>J(o)&&o.nodeType===1||!1,X=new Map,st={data:X,set:(o,t,e)=>{ot(o)&&(X.has(t)||X.set(t,new Map),X.get(t).set(o,e))},getAllFor:o=>X.get(o)||null,get:(o,t)=>{if(!ot(o)||!t)return null;const e=st.getAllFor(t);return o&&e&&e.get(o)||null},remove:(o,t)=>{const e=st.getAllFor(t);!e||!ot(o)||(e.delete(o),e.size===0&&X.delete(t))}},Ye=(o,t)=>st.get(o,t),B=o=>typeof o=="string"||!1,Ze=o=>Ht(o)&&o.constructor.name==="Window"||!1,Yt=o=>J(o)&&o.nodeType===9||!1,F=o=>Ze(o)?o.document:Yt(o)?o:J(o)?o.ownerDocument:window.document,I=(o,...t)=>Object.assign(o,...t),x=o=>{if(!o)return;if(B(o))return F().createElement(o);const{tagName:t}=o,e=x(t);if(!e)return;const s={...o};return delete s.tagName,I(e,s)},Nt=(o,t)=>{if(!o||!t)return;if(B(t))return F().createElementNS(o,t);const{tagName:e}=t,s=Nt(o,e);if(!s)return;const r={...t};return delete r.tagName,I(s,r)},Qe=(o,t)=>o.dispatchEvent(t),Et=(o,t)=>{const e=getComputedStyle(o),s=t.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return e.getPropertyValue(s)},to=o=>{const t=Et(o,_e),e=Et(o,Ue),s=e.includes("ms")?1:1e3,r=t&&t!=="none"?parseFloat(e)*s:0;return Number.isNaN(r)?0:r},_=(o,t)=>o.focus(t),Zt=o=>["true",!0].includes(o)?!0:["false",!1].includes(o)?!1:["null","",null,void 0].includes(o)?null:o!==""&&!Number.isNaN(+o)?+o:o,dt=o=>Object.entries(o),eo=(o,t,e,s)=>{const r={...e},n={...o.dataset},i={...t},a={},l="title";return dt(n).forEach(([c,h])=>{const b=c;a[b]=Zt(h)}),dt(r).forEach(([c,h])=>{r[c]=Zt(h)}),dt(t).forEach(([c,h])=>{c in r?i[c]=r[c]:c in a?i[c]=a[c]:i[c]=c===l?pt(o,l):h}),i},Qt=o=>Object.fromEntries(o),oo=o=>o.offsetHeight,D=(o,t)=>{dt(t).forEach(([e,s])=>{if(s&&B(e)&&e.includes("--"))o.style.setProperty(e,s);else{const r={};r[e]=s,I(o.style,r)}})},so=o=>Ht(o)&&o.constructor.name==="Map"||!1,te=o=>o.toUpperCase(),ft=(o,t)=>{const{width:e,height:s,top:r,right:n,bottom:i,left:a}=o.getBoundingClientRect();let l=1,c=1;if(t&&ot(o)){const{offsetWidth:h,offsetHeight:b}=o;l=h>0?Math.round(e)/h:1,c=b>0?Math.round(s)/b:1}return{width:e/l,height:s/c,top:r/c,right:n/l,bottom:i/c,left:a/l,x:a/l,y:r/c}},Mt=o=>F(o).documentElement;let ee=0,oe=0;const Y=new Map,se=(o,t)=>{let e=t?ee:oe;if(t){const s=se(o),r=Y.get(s)||new Map;Y.has(s)||Y.set(s,r),so(r)&&!r.has(t)?(r.set(t,e),ee+=1):e=r.get(t)}else{const s=o.id||o;Y.has(s)?e=Y.get(s):(Y.set(s,e),oe+=1)}return e},ro=o=>{var t;return o?Yt(o)?o.defaultView:J(o)?(t=o?.ownerDocument)==null?void 0:t.defaultView:o:window},Tt=o=>Array.isArray(o)||!1,re=(o,t)=>o?o.closest(t)||re(o.getRootNode().host,t):null,z=(o,t)=>ot(o)?o:(J(t)?t:F()).querySelector(o),rt=(o,t)=>(t&&J(t)?t:F()).getElementsByClassName(o),Rt=["transparent","currentColor","inherit","revert","initial"],v=o=>{const t=Math.floor(o);return o-t<.5?t:Math.round(o)},mt=[["aliceblue",{r:240,g:248,b:255}],["antiquewhite",{r:250,g:235,b:215}],["aqua",{r:0,g:255,b:255}],["aquamarine",{r:127,g:255,b:212}],["azure",{r:240,g:255,b:255}],["beige",{r:245,g:245,b:220}],["bisque",{r:255,g:228,b:196}],["black",{r:0,g:0,b:0}],["blanchedalmond",{r:255,g:235,b:205}],["blue",{r:0,g:0,b:255}],["blueviolet",{r:138,g:43,b:226}],["brown",{r:165,g:42,b:42}],["burlywood",{r:222,g:184,b:135}],["cadetblue",{r:95,g:158,b:160}],["chartreuse",{r:127,g:255,b:0}],["chocolate",{r:210,g:105,b:30}],["coral",{r:255,g:127,b:80}],["cornflowerblue",{r:100,g:149,b:237}],["cornsilk",{r:255,g:248,b:220}],["crimson",{r:220,g:20,b:60}],["cyan",{r:0,g:255,b:255}],["darkblue",{r:0,g:0,b:139}],["darkcyan",{r:0,g:139,b:139}],["darkgoldenrod",{r:184,g:134,b:11}],["darkgray",{r:169,g:169,b:169}],["darkgreen",{r:0,g:100,b:0}],["darkgrey",{r:169,g:169,b:169}],["darkkhaki",{r:189,g:183,b:107}],["darkmagenta",{r:139,g:0,b:139}],["darkolivegreen",{r:85,g:107,b:47}],["darkorange",{r:255,g:140,b:0}],["darkorchid",{r:153,g:50,b:204}],["darkred",{r:139,g:0,b:0}],["darksalmon",{r:233,g:150,b:122}],["darkseagreen",{r:143,g:188,b:143}],["darkslateblue",{r:72,g:61,b:139}],["darkslategray",{r:47,g:79,b:79}],["darkslategrey",{r:47,g:79,b:79}],["darkturquoise",{r:0,g:206,b:209}],["darkviolet",{r:148,g:0,b:211}],["deeppink",{r:255,g:20,b:147}],["deepskyblue",{r:0,g:191,b:255}],["dimgray",{r:105,g:105,b:105}],["dimgrey",{r:105,g:105,b:105}],["dodgerblue",{r:30,g:144,b:255}],["firebrick",{r:178,g:34,b:34}],["floralwhite",{r:255,g:250,b:240}],["forestgreen",{r:34,g:139,b:34}],["fuchsia",{r:255,g:0,b:255}],["gainsboro",{r:220,g:220,b:220}],["ghostwhite",{r:248,g:248,b:255}],["goldenrod",{r:218,g:165,b:32}],["gold",{r:255,g:215,b:0}],["gray",{r:128,g:128,b:128}],["green",{r:0,g:128,b:0}],["greenyellow",{r:173,g:255,b:47}],["grey",{r:128,g:128,b:128}],["honeydew",{r:240,g:255,b:240}],["hotpink",{r:255,g:105,b:180}],["indianred",{r:205,g:92,b:92}],["indigo",{r:75,g:0,b:130}],["ivory",{r:255,g:255,b:240}],["khaki",{r:240,g:230,b:140}],["lavenderblush",{r:255,g:240,b:245}],["lavender",{r:230,g:230,b:250}],["lawngreen",{r:124,g:252,b:0}],["lemonchiffon",{r:255,g:250,b:205}],["lightblue",{r:173,g:216,b:230}],["lightcoral",{r:240,g:128,b:128}],["lightcyan",{r:224,g:255,b:255}],["lightgoldenrodyellow",{r:250,g:250,b:210}],["lightgray",{r:211,g:211,b:211}],["lightgreen",{r:144,g:238,b:144}],["lightgrey",{r:211,g:211,b:211}],["lightpink",{r:255,g:182,b:193}],["lightsalmon",{r:255,g:160,b:122}],["lightseagreen",{r:32,g:178,b:170}],["lightskyblue",{r:135,g:206,b:250}],["lightslategray",{r:119,g:136,b:153}],["lightslategrey",{r:119,g:136,b:153}],["lightsteelblue",{r:176,g:196,b:222}],["lightyellow",{r:255,g:255,b:224}],["lime",{r:0,g:255,b:0}],["limegreen",{r:50,g:205,b:50}],["linen",{r:250,g:240,b:230}],["magenta",{r:255,g:0,b:255}],["maroon",{r:128,g:0,b:0}],["mediumaquamarine",{r:102,g:205,b:170}],["mediumblue",{r:0,g:0,b:205}],["mediumorchid",{r:186,g:85,b:211}],["mediumpurple",{r:147,g:112,b:219}],["mediumseagreen",{r:60,g:179,b:113}],["mediumslateblue",{r:123,g:104,b:238}],["mediumspringgreen",{r:0,g:250,b:154}],["mediumturquoise",{r:72,g:209,b:204}],["mediumvioletred",{r:199,g:21,b:133}],["midnightblue",{r:25,g:25,b:112}],["mintcream",{r:245,g:255,b:250}],["mistyrose",{r:255,g:228,b:225}],["moccasin",{r:255,g:228,b:181}],["navajowhite",{r:255,g:222,b:173}],["navy",{r:0,g:0,b:128}],["oldlace",{r:253,g:245,b:230}],["olive",{r:128,g:128,b:0}],["olivedrab",{r:107,g:142,b:35}],["orange",{r:255,g:165,b:0}],["orangered",{r:255,g:69,b:0}],["orchid",{r:218,g:112,b:214}],["palegoldenrod",{r:238,g:232,b:170}],["palegreen",{r:152,g:251,b:152}],["paleturquoise",{r:175,g:238,b:238}],["palevioletred",{r:219,g:112,b:147}],["papayawhip",{r:255,g:239,b:213}],["peachpuff",{r:255,g:218,b:185}],["peru",{r:205,g:133,b:63}],["pink",{r:255,g:192,b:203}],["plum",{r:221,g:160,b:221}],["powderblue",{r:176,g:224,b:230}],["purple",{r:128,g:0,b:128}],["rebeccapurple",{r:102,g:51,b:153}],["red",{r:255,g:0,b:0}],["rosybrown",{r:188,g:143,b:143}],["royalblue",{r:65,g:105,b:225}],["saddlebrown",{r:139,g:69,b:19}],["salmon",{r:250,g:128,b:114}],["sandybrown",{r:244,g:164,b:96}],["seagreen",{r:46,g:139,b:87}],["seashell",{r:255,g:245,b:238}],["sienna",{r:160,g:82,b:45}],["silver",{r:192,g:192,b:192}],["skyblue",{r:135,g:206,b:235}],["slateblue",{r:106,g:90,b:205}],["slategray",{r:112,g:128,b:144}],["slategrey",{r:112,g:128,b:144}],["snow",{r:255,g:250,b:250}],["springgreen",{r:0,g:255,b:127}],["steelblue",{r:70,g:130,b:180}],["tan",{r:210,g:180,b:140}],["teal",{r:0,g:128,b:128}],["thistle",{r:216,g:191,b:216}],["tomato",{r:255,g:99,b:71}],["turquoise",{r:64,g:224,b:208}],["violet",{r:238,g:130,b:238}],["wheat",{r:245,g:222,b:179}],["white",{r:255,g:255,b:255}],["whitesmoke",{r:245,g:245,b:245}],["yellow",{r:255,g:255,b:0}],["yellowgreen",{r:154,g:205,b:50}]],ne="deg|rad|grad|turn",ie="[-\\+]?\\d+%?",ae="[-\\+]?\\d*\\.\\d+%?",le=`[-\\+]?\\d*\\.?\\d+(?:${ne})?`,vt=`(?:${ae})|(?:${ie})`,Ot=`(?:${vt})|(?:${le}?)`,no="(?:[\\s|\\(\\s|\\s\\(\\s]+)?",io="(?:[\\s|\\)\\s]+)?",ce="(?:[,|\\s]+)",ao="(?:[,|\\/\\s]*)?",nt=`${no}(${Ot})${ce}(${vt})${ce}(${vt})${ao}(${vt})?${io}`,K={CSS_UNIT:new RegExp(Ot),ANGLES:ne,CSS_ANGLE:le,CSS_INTEGER:ie,CSS_NUMBER:ae,CSS_UNIT2:Ot,PERMISSIVE_MATCH:nt,hwb:new RegExp(`hwb${nt}`),rgb:new RegExp(`rgb(?:a)?${nt}`),hsl:new RegExp(`hsl(?:a)?${nt}`),hsv:new RegExp(`hsv(?:a)?${nt}`),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/},he=o=>Rt.includes(o),it=(o,t)=>o!==null&&typeof o=="object"&&Object.keys(t).every(e=>e in o),ge=o=>`${o}`.includes(".")&&parseFloat(o)===1,wt=o=>typeof o=="string"&&o.includes("%"),L=o=>!!K.CSS_UNIT.exec(`${o}`),ue=["rgb","hex","hsl","hsv","hwb"],be=o=>Rt.includes(o)||["#",...ue].some(t=>o.includes(t))?!1:mt.some(([t])=>o===t),T=(o,t)=>{let e=o;if(typeof o=="number"&&Math.min(o,0)===0&&Math.max(o,1)===1)return o;ge(o)&&(e="100%");const s=wt(e);return e=t===360?parseFloat(e):Math.min(t,Math.max(0,parseFloat(e))),s&&(e=e*t/100),Math.abs(e-t)<1e-6?1:(t===360?e=(e<0?e%t+t:e%t)/t:e=e%t/t,e)},Dt=o=>{let t=parseFloat(o);return(Number.isNaN(t)||t<0||t>1)&&(t=1),t},$t=o=>Math.min(1,Math.max(0,o)),G=o=>o.length===1?`0${o}`:String(o),pe=o=>{const[[,t]]=mt.filter(([e])=>e===o.toLowerCase());return t},A=o=>parseInt(o,16),Ft=o=>A(o)/255,de=o=>v(o*255).toString(16),fe=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0,i=0;const a=(s+r)/2;if(s===r)i=0,n=0;else{const l=s-r;i=a>.5?l/(2-s-r):l/(s+r),s===o&&(n=(t-e)/l+(t<e?6:0)),s===t&&(n=(e-o)/l+2),s===e&&(n=(o-t)/l+4),n/=6}return{h:n,s:i,l:a}},kt=(o,t,e)=>{let s=e;return s<0&&(s+=1),s>1&&(s-=1),s<1/6?o+(t-o)*(6*s):s<1/2?t:s<2/3?o+(t-o)*(2/3-s)*6:o},at=(o,t,e)=>{let s=0,r=0,n=0;if(t===0)r=e,n=e,s=e;else if(e){const i=e<.5?e*(1+t):e+t-e*t,a=2*e-i;s=kt(a,i,o+1/3),r=kt(a,i,o),n=kt(a,i,o-1/3)}return{r:s,g:r,b:n}},me=(o,t,e)=>{let s=0,r=0;const n=Math.min(o,t,e),i=Math.max(o,t,e),a=1-i;if(i===n)return{h:0,w:n,b:a};o===n?(s=t-e,r=3):(s=t===n?e-o:o-t,r=t===n?5:1);const l=(r-s/(i-n))/6;return{h:l===1?0:l,w:n,b:a}},ve=(o,t,e)=>{if(t+e>=1){const i=t/(t+e);return{r:i,g:i,b:i}}let{r:s,g:r,b:n}=at(o,1,.5);return[s,r,n]=[s,r,n].map(i=>i*(1-t-e)+t),{r:s,g:r,b:n}},we=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0;const i=s,a=s-r,l=s===0?0:a/s;return s===r?n=0:(o===s&&(n=(t-e)/a+(t<e?6:0)),t===s&&(n=(e-o)/a+2),e===s&&(n=(o-t)/a+4),n/=6),{h:n,s:l,v:i}},It=(o,t,e)=>{const s=o*6,r=t,n=e,i=Math.floor(s),a=s-i,l=n*(1-r),c=n*(1-a*r),h=n*(1-(1-a)*r),b=i%6,u=[n,c,l,l,h,n][b],d=[h,n,n,c,l,l][b],g=[l,l,h,n,n,c][b];return{r:u,g:d,b:g}},$e=(o,t,e,s)=>{const r=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16))];return s&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")},Kt=(o,t,e,s,r)=>{const n=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16)),G(de(s))];return r&&n[0].charAt(0)===n[0].charAt(1)&&n[1].charAt(0)===n[1].charAt(1)&&n[2].charAt(0)===n[2].charAt(1)&&n[3].charAt(0)===n[3].charAt(1)?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")},ke=o=>{const t=String(o).trim().toLowerCase();if(be(t))return Object.assign(pe(t),{a:1,format:"rgb",ok:!0});if(he(t))return{r:0,g:0,b:0,a:t==="transparent"?0:1,format:"rgb",ok:!0};let[,e,s,r,n]=K.rgb.exec(t)||[];return e&&s&&r?{r:e,g:s,b:r,a:n!==void 0?n:1,format:"rgb",ok:!0}:([,e,s,r,n]=K.hsl.exec(t)||[],e&&s&&r?{h:e,s,l:r,a:n!==void 0?n:1,format:"hsl",ok:!0}:([,e,s,r,n]=K.hsv.exec(t)||[],e&&s&&r?{h:e,s,v:r,a:n!==void 0?n:1,format:"hsv",ok:!0}:([,e,s,r,n]=K.hwb.exec(t)||[],e&&s&&r?{h:e,w:s,b:r,a:n!==void 0?n:1,format:"hwb",ok:!0}:([,e,s,r,n]=K.hex8.exec(t)||[],e&&s&&r&&n?{r:A(e),g:A(s),b:A(r),a:Ft(n),format:"hex",ok:!0}:([,e,s,r]=K.hex6.exec(t)||[],e&&s&&r?{r:A(e),g:A(s),b:A(r),a:1,format:"hex",ok:!0}:([,e,s,r,n]=K.hex4.exec(t)||[],e&&s&&r&&n?{r:A(e+e),g:A(s+s),b:A(r+r),a:Ft(n+n),format:"hex",ok:!0}:([,e,s,r]=K.hex3.exec(t)||[],e&&s&&r?{r:A(e+e),g:A(s+s),b:A(r+r),a:1,format:"hex",ok:!0}:{r:0,g:0,b:0,a:1,format:"rgb",ok:!o})))))))},ye=o=>{let t={r:0,g:0,b:0},e=o,s=1,r,n,i,a,l,c,h,b,u="rgb",d=!1;return(!e||typeof e=="string")&&(e=ke(e),d=e.ok),it(e,t)&&L(e.r)&&L(e.g)&&L(e.b)&&({r:h,g:b,b:l}=e,[h,b,l]=[h,b,l].map(g=>T(g,wt(g)?100:255)),t={r:h,g:b,b:l},u="format"in e?e.format:"rgb"),it(e,{h:0,s:0,v:0})&&L(e.h)&&L(e.s)&&L(e.v)&&({h:c,s:r,v:n}=e,c=T(c,360),r=T(r,100),n=T(n,100),t=It(c,r,n),u="hsv"),it(e,{h:0,s:0,l:0})&&L(e.h)&&L(e.s)&&L(e.l)&&({h:c,s:r,l:i}=e,c=T(c,360),r=T(r,100),i=T(i,100),t=at(c,r,i),u="hsl"),it(e,{h:0,w:0,b:0})&&L(e.h)&&L(e.w)&&L(e.b)&&({h:c,w:a,b:l}=e,c=T(c,360),a=T(a,100),l=T(l,100),t=ve(c,a,l),u="hwb"),L(e.a)&&(s=e.a,s=wt(s)||parseFloat(`${s}`)>1?T(s,100):s),{r:t.r,g:t.g,b:t.b,a:Dt(s),format:u,ok:d}},lo="1.0.9";class k{static matchers=K;static isOnePointZero=ge;static isPercentage=wt;static isValidCSSUnit=L;static isNonColor=he;static isColorName=be;static isColorType=it;static pad2=G;static clamp01=$t;static bound01=T;static boundAlpha=Dt;static getRGBFromName=pe;static convertHexToDecimal=Ft;static convertDecimalToHex=de;static rgbToHsl=fe;static rgbToHex=$e;static rgbToHsv=we;static rgbToHwb=me;static rgbaToHex=Kt;static hslToRgb=It;static hsvToRgb=It;static hueToRgb=kt;static hwbToRgb=ve;static parseIntFromHex=A;static stringInputToObject=ke;static inputToRGB=ye;static roundPart=v;static webColors=mt;static nonColors=Rt;static version=lo;r;g;b;a;format;ok;originalInput;constructor(t,e){const s=e&&ue.includes(e)?e:"",{r,g:n,b:i,a,ok:l,format:c}=ye(t);this.originalInput=t,this.r=r,this.g=n,this.b=i,this.a=a,this.ok=l,this.format=s||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:s}=this;let r=0,n=0,i=0;return t<=.03928?r=t/12.92:r=((t+.055)/1.055)**2.4,e<=.03928?n=e/12.92:n=((e+.055)/1.055)**2.4,s<=.03928?i=s/12.92:i=((s+.055)/1.055)**2.4,.2126*r+.7152*n+.0722*i}get brightness(){const{r:t,g:e,b:s}=this.toRgb();return(t*299+e*587+s*114)/1e3}get name(){const{r:t,g:e,b:s}=this.toRgb(),[r]=mt.map(([n,i])=>{const a=(((i.r-t)*.3)**2+((i.g-e)*.6)**2+((i.b-s)*.1)**2)**.5;return[n,a]}).find(([,n],i,a)=>n===Math.min(...a.map(([,l])=>l)));return r}toRgb(){let{r:t,g:e,b:s,a:r}=this;return[t,e,s]=[t,e,s].map(n=>v(n*255*100)/100),r=v(r*100)/100,{r:t,g:e,b:s,a:r}}toRgbString(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v);return r===1?`rgb(${n}, ${i}, ${a})`:`rgba(${n}, ${i}, ${a}, ${r})`}toRgbCSS4String(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v),l=r===1?"":` / ${v(r*100)}%`;return`rgb(${n} ${i} ${a}${l})`}toHex(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return n===1?$e(e,s,r,t):Kt(e,s,r,n,t)}toHexString(t){return`#${this.toHex(t)}`}toHex8(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return Kt(e,s,r,n,t)}toHex8String(t){return`#${this.toHex8(t)}`}toHsv(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,v:a}=we(t,e,s);return{h:n,s:i,v:a,a:r}}toHsl(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,l:a}=fe(t,e,s);return{h:n,s:i,l:a,a:r}}toHslString(){let{h:t,s:e,l:s,a:r}=this.toHsl();return t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100)/100,r===1?`hsl(${t}, ${e}%, ${s}%)`:`hsla(${t}, ${e}%, ${s}%, ${r})`}toHslCSS4String(){let{h:t,s:e,l:s,a:r}=this.toHsl();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hsl(${t}deg ${e}% ${s}%${n})`}toHwb(){const{r:t,g:e,b:s,a:r}=this,{h:n,w:i,b:a}=me(t,e,s);return{h:n,w:i,b:a,a:r}}toHwbString(){let{h:t,w:e,b:s,a:r}=this.toHwb();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hwb(${t}deg ${e}% ${s}%${n})`}setAlpha(t){return typeof t!="number"?this:(this.a=Dt(t),this)}saturate(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=at(e,$t(s+t/100),r);return Object.assign(this,{r:n,g:i,b:a}),this}desaturate(t){return typeof t=="number"?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=at(e,s,$t(r+t/100));return Object.assign(this,{r:n,g:i,b:a}),this}darken(t){return typeof t=="number"?this.lighten(-t):this}spin(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=at($t((e*360+t)%360/360),s,r);return Object.assign(this,{r:n,g:i,b:a}),this}clone(){return new k(this)}toString(t){const{format:e}=this;return e==="hex"?this.toHexString(t):e==="hsl"?this.toHslString():e==="hwb"?this.toHwbString():this.toRgbString()}}class Vt{static Color=k;hue;hueSteps;lightSteps;saturation;colors;constructor(...t){let e=0,s=12,r=10,n=[.5],i=100;if(t.length===4)[e,s,r,i]=t;else if(t.length===3)[e,s,r]=t;else if(t.length===2&&([s,r]=t,[s,r].some(g=>g<1)))throw TypeError("ColorPalette: the two minimum arguments must be numbers higher than 0.");const a=[],l=360/s,c=k.roundPart((r-(r%2?1:0))/2),h=[.25,.2,.15,.11,.09,.075],b=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],u=b.find(g=>g.includes(r)),d=u?h[b.indexOf(u)]:100/(r+(r%2?0:1))/100;for(let g=1;g<c+1;g+=1)n=[...n,.5+d*g];for(let g=1;g<r-c;g+=1)n=[.5-d*g,...n];for(let g=0;g<s;g+=1){const p=(e+g*l)%360/360;n.forEach(f=>{const w=new k({h:p,s:1,l:f});a.push(i<100?w.saturate(i-100):w)})}this.hue=e,this.hueSteps=s,this.lightSteps=r,this.saturation=i,this.colors=a}}const Bt={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},lt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"],xe=o=>{if(!B(o))return!1;try{JSON.parse(o)}catch{return!1}return!0},jt="v-hidden",co=o=>{const{format:t,id:e,componentLabels:s}=o,r=x({tagName:"div",className:`color-form ${t}`});let n=["hex"];return t==="rgb"?n=["red","green","blue","alpha"]:t==="hsl"?n=["hue","saturation","lightness","alpha"]:t==="hwb"&&(n=["hue","whiteness","blackness","alpha"]),n.forEach(i=>{const[a]=t==="hex"?["#"]:te(i).split(""),l=`color_${t}_${i}_${e}`,c=s[`${i}Label`],h=x({tagName:"label"});m(h,"for",l),h.append(x({tagName:"span",ariaHidden:"true",innerText:`${a}:`}),x({tagName:"span",className:jt,innerText:c}));const b=x({tagName:"input",id:l,type:t==="hex"?"text":"number",value:i==="alpha"?"100":"0",className:`color-input ${i}`,autocomplete:"off",spellcheck:!1});let u="100",d="1";i!=="alpha"&&(t==="rgb"?(u="255",d="1"):i==="hue"&&(u="360",d="1")),I(b,{min:"0",max:u,step:d}),r.append(h,b)}),r},ho=o=>{const{format:t,componentLabels:e}=o,{hueLabel:s,alphaLabel:r,lightnessLabel:n,saturationLabel:i,whitenessLabel:a,blacknessLabel:l}=e,c=t==="hsl"?360:100,h=t==="hsl"?100:360,b=100;let u=t==="hsl"?`${s} & ${n}`:`${n} & ${i}`;u=t==="hwb"?`${a} & ${l}`:u;const d=t==="hsl"?`${i}`:`${s}`,g=x({tagName:"div",className:`color-controls ${t}`}),p="color-pointer",f="color-slider";return[{i:1,c:p,l:u,min:0,max:c},{i:2,c:f,l:d,min:0,max:h},{i:3,c:f,l:r,min:0,max:b}].forEach($=>{const{i:P,c:H,l:S,min:C,max:R}=$,E=x({tagName:"div",className:"color-control",role:"presentation"});E.append(x({tagName:"div",className:`visual-control visual-control${P}`}));const N=x({tagName:"div",className:`${H} knob`,ariaLive:"polite",ariaLabel:S,role:"slider",tabIndex:0,ariaValueMin:`${C}`,ariaValueMax:`${R}`});E.append(N),g.append(E)}),g},Pe=(o,t,e)=>{const{input:s,format:r,componentLabels:n}=o,{defaultsLabel:i,presetsLabel:a}=n,l=e==="color-options",c=t instanceof Vt,h=l?a:i,b=c?t.colors:t,u=b.length,{lightSteps:d}=c?t:{lightSteps:null},g=d||[9,10].find(N=>u>=N*2&&!(u%N))||5,p=l&&u>g;let f=2;f=p&&u>g*2?3:f,f=p&&u>g*3?4:f,f=p&&u>g*4?5:f;const w=f-(u<=g*3?1:2),$=p&&u>w*g;let P=e;P+=$?" scrollable":"",P+=p?" multiline":"";const H=p?"1px":"0.25rem";let S=p?1.75:2;S=g>5&&p?1.5:S;const C=`${w*S}rem`,R=`calc(${f} * ${S}rem + ${f-1} * ${H})`,E=x({tagName:"ul",className:P,role:"listbox",ariaLabel:h});return $&&D(E,{"--grid-item-size":`${S}rem`,"--grid-fit":`${g}`,"--grid-gap":H,"--grid-height":C,"--grid-hover-height":R}),b.forEach(N=>{let[V,ct]=typeof N=="string"?N.trim().split(":"):[];N instanceof k&&(V=N.toHexString(),ct=V);const Ee=new k(N instanceof k?N:V,r).toString()===pt(s,"value"),Gt=x({tagName:"li",className:`color-option${Ee?" active":""}`,innerText:`${ct||V}`,tabIndex:0,role:"option",ariaSelected:Ee?"true":"false"});m(Gt,"data-value",`${V}`),l&&D(Gt,{backgroundColor:V}),E.append(Gt)}),E},go=o=>{const{input:t,parent:e,format:s,id:r,componentLabels:n,colorKeywords:i,colorPresets:a}=o,l=pt(t,"value")||"#fff",{nonColors:c}=k,{toggleLabel:h,pickerLabel:b,formatLabel:u,hexLabel:d}=n,g=c.includes(l)?"#fff":l;o.color=new k(g,s);const p=s==="hex"?d:te(s),f=x({id:`picker-btn-${r}`,tagName:"button",type:"button",className:"picker-toggle btn-appearance",ariaExpanded:"false",ariaHasPopup:"true"});f.append(x({tagName:"span",className:jt,innerText:`${b}. ${u}: ${p}`}));const w=x({tagName:"div",className:"color-dropdown picker",role:"group",ariaLabelledBy:`picker-btn-${r}`}),$=ho(o),P=co(o);if(w.append($,P),t.before(f),e.append(w),i||a){const H=x({tagName:"div",className:"color-dropdown scrollable menu"});a&&H.append(Pe(o,a,"color-options")),i&&i.length&&H.append(Pe(o,i,"color-defaults"));const S=x({tagName:"button",type:"button",className:"menu-toggle btn-appearance",tabIndex:-1,ariaExpanded:"false",ariaHasPopup:"true"}),C=encodeURI("http://www.w3.org/2000/svg"),R=Nt(C,{tagName:"svg"});m(R,"xmlns",C),m(R,"viewBox","0 0 512 512"),m(R,Me,"true");const E=Nt(C,{tagName:"path"});m(E,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),m(E,"fill","#fff"),R.append(E),S.append(x({tagName:"span",className:jt,innerText:`${h}`}),R),e.append(S,H)}i&&c.includes(l)&&(o.value=l),m(t,W,"-1")},uo="2.0.0",Z="color-picker",bo=`[data-function="${Z}"]`,Se=`.${Z}`,po={componentLabels:Bt,colorLabels:lt,format:"rgb",colorPresets:!1,colorKeywords:!1},{roundPart:y,nonColors:yt}=k,fo=o=>Ye(o,Z),mo=o=>new Ne(o),Ce=(o,t)=>{const e=t?Ct:Lt,{input:s,pickerToggle:r,menuToggle:n}=o;e(s,Oe,o.showPicker),e(r,St,o.togglePicker),n&&e(n,St,o.toggleMenu)},Le=(o,t)=>{const e=t?Ct:Lt,{input:s,colorMenu:r,parent:n}=o,i=F(s),a=ro(i);e(o.controls,Ie,o.pointerDown),o.controlKnobs.forEach(l=>e(l,_t,o.handleKnobs)),e(a,Be,o.handleScroll),e(a,Ve,o.update),[s,...o.inputs].forEach(l=>e(l,Te,o.changeHandler)),r&&(e(r,St,o.menuClickHandler),e(r,_t,o.menuKeyHandler)),e(i,zt,o.pointerMove),e(i,Ke,o.pointerUp),e(n,De,o.handleFocusOut),e(i,Fe,o.handleDismiss)},Ae=o=>{Qe(o.input,new CustomEvent("colorpicker.change"))},He=o=>{o&&["bottom","top"].forEach(t=>O(o,t))},qt=(o,t)=>{const{colorPicker:e,colorMenu:s,menuToggle:r,pickerToggle:n,parent:i}=o,a=t===e,l=a?s:e,c=a?r:n,h=a?n:r;M(i,"open")||q(i,"open"),l&&(O(l,"show"),He(l)),q(t,"bottom"),oo(t),q(t,"show"),a&&o.update(),o.isOpen||(Le(o,!0),o.updateDropdownPosition(),o.isOpen=!0,m(o.input,W,"0"),r&&m(r,W,"0")),m(h,xt,"true"),c&&m(c,xt,"false")};class Ne{static Color=k;static ColorPalette=Vt;static getInstance=fo;static init=mo;static selector=bo;static roundPart=y;static setElementStyle=D;static setAttribute=m;static getBoundingClientRect=ft;static version=uo;static colorNames=lt;static colorPickerLabels=Bt;id;input;color;format="rgb";parent;dragElement;isOpen=!1;controlPositions;colorLabels=Qt(lt.map(t=>[t,t]));colorKeywords;colorPresets;componentLabels;pickerToggle;menuToggle;colorPicker;colorMenu;controls;inputs;controlKnobs;visuals;constructor(t,e){const s=z(t);if(typeof t>"u")throw new TypeError("ColorPicker target not specified.");if(B(t)&&!s)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);this.input=s;const r=re(s,Se);if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");this.parent=r,this.id=se(s,Z),this.dragElement=void 0,this.isOpen=!1,this.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},this.colorKeywords=!1,this.colorPresets=!1;const{format:n,componentLabels:i,colorLabels:a,colorKeywords:l,colorPresets:c}=eo(s,po,e||{});let h=lt;Tt(a)&&a.length===17?h=a:B(a)&&a.split(",").length===17&&(h=a.split(",")),I(this.colorLabels,Qt(h.map((p,f)=>[lt[f],p])));const b=B(i)&&xe(i)?JSON.parse(i):i;if(this.componentLabels=I({...Bt},b),this.color=new k(s.value||"#fff",n),this.format=n,Tt(l)&&l.length?this.colorKeywords=l:B(l)&&l.length&&(this.colorKeywords=l.split(",").map(p=>p.trim())),Tt(c)&&c.length)this.colorPresets=c;else if(c&&xe(c)){const{hue:p,hueSteps:f,lightSteps:w,saturation:$}=JSON.parse(c);this.colorPresets=new Vt(p,f,w,$)}else B(c)&&(this.colorPresets=c.split(",").map(p=>p.trim()));go(this);const[u,d]=rt("color-dropdown",r);this.pickerToggle=z(".picker-toggle",r),this.menuToggle=z(".menu-toggle",r),this.colorPicker=u,this.colorMenu=d,this.inputs=[...rt("color-input",r)];const[g]=rt("color-controls",r);this.controls=g,this.controlKnobs=[...rt("knob",g)],this.visuals=[...rt("visual-control",g)],this.update(),Ce(this,!0),st.set(s,Z,this)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>yt.includes(t))}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return t!==""&&new k(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:s,format:r}=this,n=y(e.h*360),i=r==="hsl"?e.s:s.s,a=y(i*100),l=y(e.l*100),c=s.v*100;let h="black";if(l===100&&a===0)h=t.white;else if(l===0)h=t.black;else if(a===0)h=t.grey;else if(n<15||n>=345)h=t.red;else if(n>=15&&n<45)h=c>80&&a>80?t.orange:t.brown;else if(n>=45&&n<75){const b=n>46&&n<54&&c<80&&a>90,u=n>=54&&n<75&&c<80;h=b?t.gold:t.yellow,h=u?t.olive:h}else n>=75&&n<155?h=c<68?t.green:t.lime:n>=155&&n<175?h=t.teal:n>=175&&n<195?h=t.cyan:n>=195&&n<255?h=t.blue:n>=255&&n<270?h=t.violet:n>=270&&n<295?h=t.magenta:n>=295&&n<345&&(h=t.pink);return h}updateVisuals(){const{controlPositions:t,visuals:e}=this,[s,r,n]=e,{offsetHeight:i}=s,a=t.c2y/i,{r:l,g:c,b:h}=new k({h:a,s:1,l:.5}).toRgb(),b="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",u=1-t.c3y/i,d=y(u*100)/100,g=new k({h:a,s:1,l:.5,a:u}).toRgbString(),p=`linear-gradient(
|
|
1
|
+
var ColorPicker=function(){"use strict";const Ut="aria-description",xt="aria-expanded",Me="aria-hidden",Pt="aria-selected",Q="aria-valuenow",tt="aria-valuetext",Te="change",Re="DOMContentLoaded",Oe="focusin",De="focusout",_t="keydown",Fe="keyup",St="click",Ie="pointerdown",zt="pointermove",Ke="pointerup",Ve="resize",Be="scroll",je="touchmove",j="ArrowDown",et="ArrowUp",ht="ArrowLeft",U="ArrowRight",qe="Enter",Ge="Escape",Wt="Space",Ue="transitionDuration",_e="transitionProperty",W="tabindex",ze=navigator.userAgentData,gt=ze,{userAgent:We}=navigator,ut=We,Jt=/iPhone|iPad|iPod|Android/i;gt?gt.brands.some(o=>Jt.test(o.brand)):Jt.test(ut);const Xt=/(iPhone|iPod|iPad)/;gt?gt.brands.some(o=>Xt.test(o.brand)):Xt.test(ut),ut&&ut.includes("Firefox");const{head:bt}=document;["webkitPerspective","perspective"].some(o=>o in bt.style);const Ct=(o,t,e,s)=>{const r=s||!1;o.addEventListener(t,e,r)},Lt=(o,t,e,s)=>{const r=s||!1;o.removeEventListener(t,e,r)},Je=(o,t,e,s)=>{const r=n=>{(n.target===o||n.currentTarget===o)&&(e.apply(o,[n]),Lt(o,t,r,s))};Ct(o,t,r,s)},Xe=()=>{};(()=>{let o=!1;try{const t=Object.defineProperty({},"passive",{get:()=>(o=!0,o)});Je(document,Re,Xe,t)}catch{}return o})(),["webkitTransform","transform"].some(o=>o in bt.style),["webkitAnimation","animation"].some(o=>o in bt.style),["webkitTransition","transition"].some(o=>o in bt.style);const pt=(o,t)=>o.getAttribute(t),m=(o,t,e)=>o.setAttribute(t,e),At=(o,t)=>o.removeAttribute(t),q=(o,...t)=>{o.classList.add(...t)},O=(o,...t)=>{o.classList.remove(...t)},M=(o,t)=>o.classList.contains(t),Ht=o=>o!=null&&typeof o=="object"||!1,J=o=>Ht(o)&&typeof o.nodeType=="number"&&[1,2,3,4,5,6,7,8,9,10,11].some(t=>o.nodeType===t)||!1,ot=o=>J(o)&&o.nodeType===1||!1,X=new Map,st={data:X,set:(o,t,e)=>{ot(o)&&(X.has(t)||X.set(t,new Map),X.get(t).set(o,e))},getAllFor:o=>X.get(o)||null,get:(o,t)=>{if(!ot(o)||!t)return null;const e=st.getAllFor(t);return o&&e&&e.get(o)||null},remove:(o,t)=>{const e=st.getAllFor(t);!e||!ot(o)||(e.delete(o),e.size===0&&X.delete(t))}},Ye=(o,t)=>st.get(o,t),B=o=>typeof o=="string"||!1,Ze=o=>Ht(o)&&o.constructor.name==="Window"||!1,Yt=o=>J(o)&&o.nodeType===9||!1,F=o=>Ze(o)?o.document:Yt(o)?o:J(o)?o.ownerDocument:window.document,I=(o,...t)=>Object.assign(o,...t),x=o=>{if(!o)return;if(B(o))return F().createElement(o);const{tagName:t}=o,e=x(t);if(!e)return;const s={...o};return delete s.tagName,I(e,s)},Nt=(o,t)=>{if(!o||!t)return;if(B(t))return F().createElementNS(o,t);const{tagName:e}=t,s=Nt(o,e);if(!s)return;const r={...t};return delete r.tagName,I(s,r)},Qe=(o,t)=>o.dispatchEvent(t),Et=(o,t)=>{const e=getComputedStyle(o),s=t.replace("webkit","Webkit").replace(/([A-Z])/g,"-$1").toLowerCase();return e.getPropertyValue(s)},to=o=>{const t=Et(o,_e),e=Et(o,Ue),s=e.includes("ms")?1:1e3,r=t&&t!=="none"?parseFloat(e)*s:0;return Number.isNaN(r)?0:r},_=(o,t)=>o.focus(t),Zt=o=>["true",!0].includes(o)?!0:["false",!1].includes(o)?!1:["null","",null,void 0].includes(o)?null:o!==""&&!Number.isNaN(+o)?+o:o,dt=o=>Object.entries(o),eo=(o,t,e,s)=>{const r={...e},n={...o.dataset},i={...t},a={},l="title";return dt(n).forEach(([c,h])=>{const b=c;a[b]=Zt(h)}),dt(r).forEach(([c,h])=>{r[c]=Zt(h)}),dt(t).forEach(([c,h])=>{c in r?i[c]=r[c]:c in a?i[c]=a[c]:i[c]=c===l?pt(o,l):h}),i},Qt=o=>Object.fromEntries(o),oo=o=>o.offsetHeight,D=(o,t)=>{dt(t).forEach(([e,s])=>{if(s&&B(e)&&e.includes("--"))o.style.setProperty(e,s);else{const r={};r[e]=s,I(o.style,r)}})},so=o=>Ht(o)&&o.constructor.name==="Map"||!1,te=o=>o.toUpperCase(),ft=(o,t)=>{const{width:e,height:s,top:r,right:n,bottom:i,left:a}=o.getBoundingClientRect();let l=1,c=1;if(t&&ot(o)){const{offsetWidth:h,offsetHeight:b}=o;l=h>0?Math.round(e)/h:1,c=b>0?Math.round(s)/b:1}return{width:e/l,height:s/c,top:r/c,right:n/l,bottom:i/c,left:a/l,x:a/l,y:r/c}},Mt=o=>F(o).documentElement;let ee=0,oe=0;const Y=new Map,se=(o,t)=>{let e=t?ee:oe;if(t){const s=se(o),r=Y.get(s)||new Map;Y.has(s)||Y.set(s,r),so(r)&&!r.has(t)?(r.set(t,e),ee+=1):e=r.get(t)}else{const s=o.id||o;Y.has(s)?e=Y.get(s):(Y.set(s,e),oe+=1)}return e},ro=o=>{var t;return o?Yt(o)?o.defaultView:J(o)?(t=o?.ownerDocument)==null?void 0:t.defaultView:o:window},Tt=o=>Array.isArray(o)||!1,re=(o,t)=>o?o.closest(t)||re(o.getRootNode().host,t):null,z=(o,t)=>ot(o)?o:(J(t)?t:F()).querySelector(o),rt=(o,t)=>(t&&J(t)?t:F()).getElementsByClassName(o),Rt=["transparent","currentColor","inherit","revert","initial"],v=o=>{const t=Math.floor(o);return o-t<.5?t:Math.round(o)},mt=[["aliceblue",{r:240,g:248,b:255}],["antiquewhite",{r:250,g:235,b:215}],["aqua",{r:0,g:255,b:255}],["aquamarine",{r:127,g:255,b:212}],["azure",{r:240,g:255,b:255}],["beige",{r:245,g:245,b:220}],["bisque",{r:255,g:228,b:196}],["black",{r:0,g:0,b:0}],["blanchedalmond",{r:255,g:235,b:205}],["blue",{r:0,g:0,b:255}],["blueviolet",{r:138,g:43,b:226}],["brown",{r:165,g:42,b:42}],["burlywood",{r:222,g:184,b:135}],["cadetblue",{r:95,g:158,b:160}],["chartreuse",{r:127,g:255,b:0}],["chocolate",{r:210,g:105,b:30}],["coral",{r:255,g:127,b:80}],["cornflowerblue",{r:100,g:149,b:237}],["cornsilk",{r:255,g:248,b:220}],["crimson",{r:220,g:20,b:60}],["cyan",{r:0,g:255,b:255}],["darkblue",{r:0,g:0,b:139}],["darkcyan",{r:0,g:139,b:139}],["darkgoldenrod",{r:184,g:134,b:11}],["darkgray",{r:169,g:169,b:169}],["darkgreen",{r:0,g:100,b:0}],["darkgrey",{r:169,g:169,b:169}],["darkkhaki",{r:189,g:183,b:107}],["darkmagenta",{r:139,g:0,b:139}],["darkolivegreen",{r:85,g:107,b:47}],["darkorange",{r:255,g:140,b:0}],["darkorchid",{r:153,g:50,b:204}],["darkred",{r:139,g:0,b:0}],["darksalmon",{r:233,g:150,b:122}],["darkseagreen",{r:143,g:188,b:143}],["darkslateblue",{r:72,g:61,b:139}],["darkslategray",{r:47,g:79,b:79}],["darkslategrey",{r:47,g:79,b:79}],["darkturquoise",{r:0,g:206,b:209}],["darkviolet",{r:148,g:0,b:211}],["deeppink",{r:255,g:20,b:147}],["deepskyblue",{r:0,g:191,b:255}],["dimgray",{r:105,g:105,b:105}],["dimgrey",{r:105,g:105,b:105}],["dodgerblue",{r:30,g:144,b:255}],["firebrick",{r:178,g:34,b:34}],["floralwhite",{r:255,g:250,b:240}],["forestgreen",{r:34,g:139,b:34}],["fuchsia",{r:255,g:0,b:255}],["gainsboro",{r:220,g:220,b:220}],["ghostwhite",{r:248,g:248,b:255}],["goldenrod",{r:218,g:165,b:32}],["gold",{r:255,g:215,b:0}],["gray",{r:128,g:128,b:128}],["green",{r:0,g:128,b:0}],["greenyellow",{r:173,g:255,b:47}],["grey",{r:128,g:128,b:128}],["honeydew",{r:240,g:255,b:240}],["hotpink",{r:255,g:105,b:180}],["indianred",{r:205,g:92,b:92}],["indigo",{r:75,g:0,b:130}],["ivory",{r:255,g:255,b:240}],["khaki",{r:240,g:230,b:140}],["lavenderblush",{r:255,g:240,b:245}],["lavender",{r:230,g:230,b:250}],["lawngreen",{r:124,g:252,b:0}],["lemonchiffon",{r:255,g:250,b:205}],["lightblue",{r:173,g:216,b:230}],["lightcoral",{r:240,g:128,b:128}],["lightcyan",{r:224,g:255,b:255}],["lightgoldenrodyellow",{r:250,g:250,b:210}],["lightgray",{r:211,g:211,b:211}],["lightgreen",{r:144,g:238,b:144}],["lightgrey",{r:211,g:211,b:211}],["lightpink",{r:255,g:182,b:193}],["lightsalmon",{r:255,g:160,b:122}],["lightseagreen",{r:32,g:178,b:170}],["lightskyblue",{r:135,g:206,b:250}],["lightslategray",{r:119,g:136,b:153}],["lightslategrey",{r:119,g:136,b:153}],["lightsteelblue",{r:176,g:196,b:222}],["lightyellow",{r:255,g:255,b:224}],["lime",{r:0,g:255,b:0}],["limegreen",{r:50,g:205,b:50}],["linen",{r:250,g:240,b:230}],["magenta",{r:255,g:0,b:255}],["maroon",{r:128,g:0,b:0}],["mediumaquamarine",{r:102,g:205,b:170}],["mediumblue",{r:0,g:0,b:205}],["mediumorchid",{r:186,g:85,b:211}],["mediumpurple",{r:147,g:112,b:219}],["mediumseagreen",{r:60,g:179,b:113}],["mediumslateblue",{r:123,g:104,b:238}],["mediumspringgreen",{r:0,g:250,b:154}],["mediumturquoise",{r:72,g:209,b:204}],["mediumvioletred",{r:199,g:21,b:133}],["midnightblue",{r:25,g:25,b:112}],["mintcream",{r:245,g:255,b:250}],["mistyrose",{r:255,g:228,b:225}],["moccasin",{r:255,g:228,b:181}],["navajowhite",{r:255,g:222,b:173}],["navy",{r:0,g:0,b:128}],["oldlace",{r:253,g:245,b:230}],["olive",{r:128,g:128,b:0}],["olivedrab",{r:107,g:142,b:35}],["orange",{r:255,g:165,b:0}],["orangered",{r:255,g:69,b:0}],["orchid",{r:218,g:112,b:214}],["palegoldenrod",{r:238,g:232,b:170}],["palegreen",{r:152,g:251,b:152}],["paleturquoise",{r:175,g:238,b:238}],["palevioletred",{r:219,g:112,b:147}],["papayawhip",{r:255,g:239,b:213}],["peachpuff",{r:255,g:218,b:185}],["peru",{r:205,g:133,b:63}],["pink",{r:255,g:192,b:203}],["plum",{r:221,g:160,b:221}],["powderblue",{r:176,g:224,b:230}],["purple",{r:128,g:0,b:128}],["rebeccapurple",{r:102,g:51,b:153}],["red",{r:255,g:0,b:0}],["rosybrown",{r:188,g:143,b:143}],["royalblue",{r:65,g:105,b:225}],["saddlebrown",{r:139,g:69,b:19}],["salmon",{r:250,g:128,b:114}],["sandybrown",{r:244,g:164,b:96}],["seagreen",{r:46,g:139,b:87}],["seashell",{r:255,g:245,b:238}],["sienna",{r:160,g:82,b:45}],["silver",{r:192,g:192,b:192}],["skyblue",{r:135,g:206,b:235}],["slateblue",{r:106,g:90,b:205}],["slategray",{r:112,g:128,b:144}],["slategrey",{r:112,g:128,b:144}],["snow",{r:255,g:250,b:250}],["springgreen",{r:0,g:255,b:127}],["steelblue",{r:70,g:130,b:180}],["tan",{r:210,g:180,b:140}],["teal",{r:0,g:128,b:128}],["thistle",{r:216,g:191,b:216}],["tomato",{r:255,g:99,b:71}],["turquoise",{r:64,g:224,b:208}],["violet",{r:238,g:130,b:238}],["wheat",{r:245,g:222,b:179}],["white",{r:255,g:255,b:255}],["whitesmoke",{r:245,g:245,b:245}],["yellow",{r:255,g:255,b:0}],["yellowgreen",{r:154,g:205,b:50}]],ne="deg|rad|grad|turn",ie="[-\\+]?\\d+%?",ae="[-\\+]?\\d*\\.\\d+%?",le=`[-\\+]?\\d*\\.?\\d+(?:${ne})?`,vt=`(?:${ae})|(?:${ie})`,Ot=`(?:${vt})|(?:${le}?)`,no="(?:[\\s|\\(\\s|\\s\\(\\s]+)?",io="(?:[\\s|\\)\\s]+)?",ce="(?:[,|\\s]+)",ao="(?:[,|\\/\\s]*)?",nt=`${no}(${Ot})${ce}(${vt})${ce}(${vt})${ao}(${vt})?${io}`,K={CSS_UNIT:new RegExp(Ot),ANGLES:ne,CSS_ANGLE:le,CSS_INTEGER:ie,CSS_NUMBER:ae,CSS_UNIT2:Ot,PERMISSIVE_MATCH:nt,hwb:new RegExp(`hwb${nt}`),rgb:new RegExp(`rgb(?:a)?${nt}`),hsl:new RegExp(`hsl(?:a)?${nt}`),hsv:new RegExp(`hsv(?:a)?${nt}`),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/},he=o=>Rt.includes(o),it=(o,t)=>o!==null&&typeof o=="object"&&Object.keys(t).every(e=>e in o),ge=o=>`${o}`.includes(".")&&parseFloat(o)===1,wt=o=>typeof o=="string"&&o.includes("%"),L=o=>!!K.CSS_UNIT.exec(`${o}`),ue=["rgb","hex","hsl","hsv","hwb"],be=o=>Rt.includes(o)||["#",...ue].some(t=>o.includes(t))?!1:mt.some(([t])=>o===t),T=(o,t)=>{let e=o;if(typeof o=="number"&&Math.min(o,0)===0&&Math.max(o,1)===1)return o;ge(o)&&(e="100%");const s=wt(e);return e=t===360?parseFloat(e):Math.min(t,Math.max(0,parseFloat(e))),s&&(e=e*t/100),Math.abs(e-t)<1e-6?1:(t===360?e=(e<0?e%t+t:e%t)/t:e=e%t/t,e)},Dt=o=>{let t=parseFloat(o);return(Number.isNaN(t)||t<0||t>1)&&(t=1),t},$t=o=>Math.min(1,Math.max(0,o)),G=o=>o.length===1?`0${o}`:String(o),pe=o=>{const[[,t]]=mt.filter(([e])=>e===o.toLowerCase());return t},A=o=>parseInt(o,16),Ft=o=>A(o)/255,de=o=>v(o*255).toString(16),fe=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0,i=0;const a=(s+r)/2;if(s===r)i=0,n=0;else{const l=s-r;i=a>.5?l/(2-s-r):l/(s+r),s===o&&(n=(t-e)/l+(t<e?6:0)),s===t&&(n=(e-o)/l+2),s===e&&(n=(o-t)/l+4),n/=6}return{h:n,s:i,l:a}},kt=(o,t,e)=>{let s=e;return s<0&&(s+=1),s>1&&(s-=1),s<1/6?o+(t-o)*(6*s):s<1/2?t:s<2/3?o+(t-o)*(2/3-s)*6:o},at=(o,t,e)=>{let s=0,r=0,n=0;if(t===0)r=e,n=e,s=e;else if(e){const i=e<.5?e*(1+t):e+t-e*t,a=2*e-i;s=kt(a,i,o+1/3),r=kt(a,i,o),n=kt(a,i,o-1/3)}return{r:s,g:r,b:n}},me=(o,t,e)=>{let s=0,r=0;const n=Math.min(o,t,e),i=Math.max(o,t,e),a=1-i;if(i===n)return{h:0,w:n,b:a};o===n?(s=t-e,r=3):(s=t===n?e-o:o-t,r=t===n?5:1);const l=(r-s/(i-n))/6;return{h:l===1?0:l,w:n,b:a}},ve=(o,t,e)=>{if(t+e>=1){const i=t/(t+e);return{r:i,g:i,b:i}}let{r:s,g:r,b:n}=at(o,1,.5);return[s,r,n]=[s,r,n].map(i=>i*(1-t-e)+t),{r:s,g:r,b:n}},we=(o,t,e)=>{const s=Math.max(o,t,e),r=Math.min(o,t,e);let n=0;const i=s,a=s-r,l=s===0?0:a/s;return s===r?n=0:(o===s&&(n=(t-e)/a+(t<e?6:0)),t===s&&(n=(e-o)/a+2),e===s&&(n=(o-t)/a+4),n/=6),{h:n,s:l,v:i}},It=(o,t,e)=>{const s=o*6,r=t,n=e,i=Math.floor(s),a=s-i,l=n*(1-r),c=n*(1-a*r),h=n*(1-(1-a)*r),b=i%6,u=[n,c,l,l,h,n][b],d=[h,n,n,c,l,l][b],g=[l,l,h,n,n,c][b];return{r:u,g:d,b:g}},$e=(o,t,e,s)=>{const r=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16))];return s&&r[0].charAt(0)===r[0].charAt(1)&&r[1].charAt(0)===r[1].charAt(1)&&r[2].charAt(0)===r[2].charAt(1)?r[0].charAt(0)+r[1].charAt(0)+r[2].charAt(0):r.join("")},Kt=(o,t,e,s,r)=>{const n=[G(v(o).toString(16)),G(v(t).toString(16)),G(v(e).toString(16)),G(de(s))];return r&&n[0].charAt(0)===n[0].charAt(1)&&n[1].charAt(0)===n[1].charAt(1)&&n[2].charAt(0)===n[2].charAt(1)&&n[3].charAt(0)===n[3].charAt(1)?n[0].charAt(0)+n[1].charAt(0)+n[2].charAt(0)+n[3].charAt(0):n.join("")},ke=o=>{const t=String(o).trim().toLowerCase();if(be(t))return Object.assign(pe(t),{a:1,format:"rgb",ok:!0});if(he(t))return{r:0,g:0,b:0,a:t==="transparent"?0:1,format:"rgb",ok:!0};let[,e,s,r,n]=K.rgb.exec(t)||[];return e&&s&&r?{r:e,g:s,b:r,a:n!==void 0?n:1,format:"rgb",ok:!0}:([,e,s,r,n]=K.hsl.exec(t)||[],e&&s&&r?{h:e,s,l:r,a:n!==void 0?n:1,format:"hsl",ok:!0}:([,e,s,r,n]=K.hsv.exec(t)||[],e&&s&&r?{h:e,s,v:r,a:n!==void 0?n:1,format:"hsv",ok:!0}:([,e,s,r,n]=K.hwb.exec(t)||[],e&&s&&r?{h:e,w:s,b:r,a:n!==void 0?n:1,format:"hwb",ok:!0}:([,e,s,r,n]=K.hex8.exec(t)||[],e&&s&&r&&n?{r:A(e),g:A(s),b:A(r),a:Ft(n),format:"hex",ok:!0}:([,e,s,r]=K.hex6.exec(t)||[],e&&s&&r?{r:A(e),g:A(s),b:A(r),a:1,format:"hex",ok:!0}:([,e,s,r,n]=K.hex4.exec(t)||[],e&&s&&r&&n?{r:A(e+e),g:A(s+s),b:A(r+r),a:Ft(n+n),format:"hex",ok:!0}:([,e,s,r]=K.hex3.exec(t)||[],e&&s&&r?{r:A(e+e),g:A(s+s),b:A(r+r),a:1,format:"hex",ok:!0}:{r:0,g:0,b:0,a:1,format:"rgb",ok:!o})))))))},ye=o=>{let t={r:0,g:0,b:0},e=o,s=1,r,n,i,a,l,c,h,b,u="rgb",d=!1;return(!e||typeof e=="string")&&(e=ke(e),d=e.ok),it(e,t)&&L(e.r)&&L(e.g)&&L(e.b)&&({r:h,g:b,b:l}=e,[h,b,l]=[h,b,l].map(g=>T(g,wt(g)?100:255)),t={r:h,g:b,b:l},u="format"in e?e.format:"rgb"),it(e,{h:0,s:0,v:0})&&L(e.h)&&L(e.s)&&L(e.v)&&({h:c,s:r,v:n}=e,c=T(c,360),r=T(r,100),n=T(n,100),t=It(c,r,n),u="hsv"),it(e,{h:0,s:0,l:0})&&L(e.h)&&L(e.s)&&L(e.l)&&({h:c,s:r,l:i}=e,c=T(c,360),r=T(r,100),i=T(i,100),t=at(c,r,i),u="hsl"),it(e,{h:0,w:0,b:0})&&L(e.h)&&L(e.w)&&L(e.b)&&({h:c,w:a,b:l}=e,c=T(c,360),a=T(a,100),l=T(l,100),t=ve(c,a,l),u="hwb"),L(e.a)&&(s=e.a,s=wt(s)||parseFloat(`${s}`)>1?T(s,100):s),{r:t.r,g:t.g,b:t.b,a:Dt(s),format:u,ok:d}},lo="1.0.9";class k{static matchers=K;static isOnePointZero=ge;static isPercentage=wt;static isValidCSSUnit=L;static isNonColor=he;static isColorName=be;static isColorType=it;static pad2=G;static clamp01=$t;static bound01=T;static boundAlpha=Dt;static getRGBFromName=pe;static convertHexToDecimal=Ft;static convertDecimalToHex=de;static rgbToHsl=fe;static rgbToHex=$e;static rgbToHsv=we;static rgbToHwb=me;static rgbaToHex=Kt;static hslToRgb=It;static hsvToRgb=It;static hueToRgb=kt;static hwbToRgb=ve;static parseIntFromHex=A;static stringInputToObject=ke;static inputToRGB=ye;static roundPart=v;static webColors=mt;static nonColors=Rt;static version=lo;r;g;b;a;format;ok;originalInput;constructor(t,e){const s=e&&ue.includes(e)?e:"",{r,g:n,b:i,a,ok:l,format:c}=ye(t);this.originalInput=t,this.r=r,this.g=n,this.b=i,this.a=a,this.ok=l,this.format=s||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:e,b:s}=this;let r=0,n=0,i=0;return t<=.03928?r=t/12.92:r=((t+.055)/1.055)**2.4,e<=.03928?n=e/12.92:n=((e+.055)/1.055)**2.4,s<=.03928?i=s/12.92:i=((s+.055)/1.055)**2.4,.2126*r+.7152*n+.0722*i}get brightness(){const{r:t,g:e,b:s}=this.toRgb();return(t*299+e*587+s*114)/1e3}get name(){const{r:t,g:e,b:s}=this.toRgb(),[r]=mt.map(([n,i])=>{const a=(((i.r-t)*.3)**2+((i.g-e)*.6)**2+((i.b-s)*.1)**2)**.5;return[n,a]}).find(([,n],i,a)=>n===Math.min(...a.map(([,l])=>l)));return r}toRgb(){let{r:t,g:e,b:s,a:r}=this;return[t,e,s]=[t,e,s].map(n=>v(n*255*100)/100),r=v(r*100)/100,{r:t,g:e,b:s,a:r}}toRgbString(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v);return r===1?`rgb(${n}, ${i}, ${a})`:`rgba(${n}, ${i}, ${a}, ${r})`}toRgbCSS4String(){const{r:t,g:e,b:s,a:r}=this.toRgb(),[n,i,a]=[t,e,s].map(v),l=r===1?"":` / ${v(r*100)}%`;return`rgb(${n} ${i} ${a}${l})`}toHex(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return n===1?$e(e,s,r,t):Kt(e,s,r,n,t)}toHexString(t){return`#${this.toHex(t)}`}toHex8(t){const{r:e,g:s,b:r,a:n}=this.toRgb();return Kt(e,s,r,n,t)}toHex8String(t){return`#${this.toHex8(t)}`}toHsv(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,v:a}=we(t,e,s);return{h:n,s:i,v:a,a:r}}toHsl(){const{r:t,g:e,b:s,a:r}=this,{h:n,s:i,l:a}=fe(t,e,s);return{h:n,s:i,l:a,a:r}}toHslString(){let{h:t,s:e,l:s,a:r}=this.toHsl();return t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100)/100,r===1?`hsl(${t}, ${e}%, ${s}%)`:`hsla(${t}, ${e}%, ${s}%, ${r})`}toHslCSS4String(){let{h:t,s:e,l:s,a:r}=this.toHsl();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hsl(${t}deg ${e}% ${s}%${n})`}toHwb(){const{r:t,g:e,b:s,a:r}=this,{h:n,w:i,b:a}=me(t,e,s);return{h:n,w:i,b:a,a:r}}toHwbString(){let{h:t,w:e,b:s,a:r}=this.toHwb();t=v(t*360),e=v(e*100),s=v(s*100),r=v(r*100);const n=r<100?` / ${v(r)}%`:"";return`hwb(${t}deg ${e}% ${s}%${n})`}setAlpha(t){return typeof t!="number"?this:(this.a=Dt(t),this)}saturate(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=at(e,$t(s+t/100),r);return Object.assign(this,{r:n,g:i,b:a}),this}desaturate(t){return typeof t=="number"?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=at(e,s,$t(r+t/100));return Object.assign(this,{r:n,g:i,b:a}),this}darken(t){return typeof t=="number"?this.lighten(-t):this}spin(t){if(typeof t!="number")return this;const{h:e,s,l:r}=this.toHsl(),{r:n,g:i,b:a}=at($t((e*360+t)%360/360),s,r);return Object.assign(this,{r:n,g:i,b:a}),this}clone(){return new k(this)}toString(t){const{format:e}=this;return e==="hex"?this.toHexString(t):e==="hsl"?this.toHslString():e==="hwb"?this.toHwbString():this.toRgbString()}}class Vt{static Color=k;hue;hueSteps;lightSteps;saturation;colors;constructor(...t){let e=0,s=12,r=10,n=[.5],i=100;if(t.length===4)[e,s,r,i]=t;else if(t.length===3)[e,s,r]=t;else if(t.length===2&&([s,r]=t,[s,r].some(g=>g<1)))throw TypeError("ColorPalette: the two minimum arguments must be numbers higher than 0.");const a=[],l=360/s,c=k.roundPart((r-(r%2?1:0))/2),h=[.25,.2,.15,.11,.09,.075],b=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],u=b.find(g=>g.includes(r)),d=u?h[b.indexOf(u)]:100/(r+(r%2?0:1))/100;for(let g=1;g<c+1;g+=1)n=[...n,.5+d*g];for(let g=1;g<r-c;g+=1)n=[.5-d*g,...n];for(let g=0;g<s;g+=1){const p=(e+g*l)%360/360;n.forEach(f=>{const w=new k({h:p,s:1,l:f});a.push(i<100?w.saturate(i-100):w)})}this.hue=e,this.hueSteps=s,this.lightSteps=r,this.saturation=i,this.colors=a}}const Bt={pickerLabel:"Colour Picker",appearanceLabel:"Colour Appearance",valueLabel:"Colour Value",toggleLabel:"Select Colour",presetsLabel:"Colour Presets",defaultsLabel:"Colour Defaults",formatLabel:"Format",alphaLabel:"Alpha",hexLabel:"Hexadecimal",hueLabel:"Hue",whitenessLabel:"Whiteness",blacknessLabel:"Blackness",saturationLabel:"Saturation",lightnessLabel:"Lightness",redLabel:"Red",greenLabel:"Green",blueLabel:"Blue"},lt=["white","black","grey","red","orange","brown","gold","olive","yellow","lime","green","teal","cyan","blue","violet","magenta","pink"],xe=o=>{if(!B(o))return!1;try{JSON.parse(o)}catch{return!1}return!0},jt="v-hidden",co=o=>{const{format:t,id:e,componentLabels:s}=o,r=x({tagName:"div",className:`color-form ${t}`});let n=["hex"];return t==="rgb"?n=["red","green","blue","alpha"]:t==="hsl"?n=["hue","saturation","lightness","alpha"]:t==="hwb"&&(n=["hue","whiteness","blackness","alpha"]),n.forEach(i=>{const[a]=t==="hex"?["#"]:te(i).split(""),l=`color_${t}_${i}_${e}`,c=s[`${i}Label`],h=x({tagName:"label"});m(h,"for",l),h.append(x({tagName:"span",ariaHidden:"true",innerText:`${a}:`}),x({tagName:"span",className:jt,innerText:c}));const b=x({tagName:"input",id:l,type:t==="hex"?"text":"number",value:i==="alpha"?"100":"0",className:`color-input ${i}`,autocomplete:"off",spellcheck:!1});let u="100",d="1";i!=="alpha"&&(t==="rgb"?(u="255",d="1"):i==="hue"&&(u="360",d="1")),I(b,{min:"0",max:u,step:d}),r.append(h,b)}),r},ho=o=>{const{format:t,componentLabels:e}=o,{hueLabel:s,alphaLabel:r,lightnessLabel:n,saturationLabel:i,whitenessLabel:a,blacknessLabel:l}=e,c=t==="hsl"?360:100,h=t==="hsl"?100:360,b=100;let u=t==="hsl"?`${s} & ${n}`:`${n} & ${i}`;u=t==="hwb"?`${a} & ${l}`:u;const d=t==="hsl"?`${i}`:`${s}`,g=x({tagName:"div",className:`color-controls ${t}`}),p="color-pointer",f="color-slider";return[{i:1,c:p,l:u,min:0,max:c},{i:2,c:f,l:d,min:0,max:h},{i:3,c:f,l:r,min:0,max:b}].forEach($=>{const{i:P,c:H,l:S,min:C,max:R}=$,E=x({tagName:"div",className:"color-control",role:"presentation"});E.append(x({tagName:"div",className:`visual-control visual-control${P}`}));const N=x({tagName:"div",className:`${H} knob`,ariaLive:"polite",ariaLabel:S,role:"slider",tabIndex:0,ariaValueMin:`${C}`,ariaValueMax:`${R}`});E.append(N),g.append(E)}),g},Pe=(o,t,e)=>{const{input:s,format:r,componentLabels:n}=o,{defaultsLabel:i,presetsLabel:a}=n,l=e==="color-options",c=t instanceof Vt,h=l?a:i,b=c?t.colors:t,u=b.length,{lightSteps:d}=c?t:{lightSteps:null},g=d||[9,10].find(N=>u>=N*2&&!(u%N))||5,p=l&&u>g;let f=2;f=p&&u>g*2?3:f,f=p&&u>g*3?4:f,f=p&&u>g*4?5:f;const w=f-(u<=g*3?1:2),$=p&&u>w*g;let P=e;P+=$?" scrollable":"",P+=p?" multiline":"";const H=p?"1px":"0.25rem";let S=p?1.75:2;S=g>5&&p?1.5:S;const C=`${w*S}rem`,R=`calc(${f} * ${S}rem + ${f-1} * ${H})`,E=x({tagName:"ul",className:P,role:"listbox",ariaLabel:h});return $&&D(E,{"--grid-item-size":`${S}rem`,"--grid-fit":`${g}`,"--grid-gap":H,"--grid-height":C,"--grid-hover-height":R}),b.forEach(N=>{let[V,ct]=typeof N=="string"?N.trim().split(":"):[];N instanceof k&&(V=N.toHexString(),ct=V);const Ee=new k(N instanceof k?N:V,r).toString()===pt(s,"value"),Gt=x({tagName:"li",className:`color-option${Ee?" active":""}`,innerText:`${ct||V}`,tabIndex:0,role:"option",ariaSelected:Ee?"true":"false"});m(Gt,"data-value",`${V}`),l&&D(Gt,{backgroundColor:V}),E.append(Gt)}),E},go=o=>{const{input:t,parent:e,format:s,id:r,componentLabels:n,colorKeywords:i,colorPresets:a}=o,l=pt(t,"value")||"#fff",{nonColors:c}=k,{toggleLabel:h,pickerLabel:b,formatLabel:u,hexLabel:d}=n,g=c.includes(l)?"#fff":l;o.color=new k(g,s);const p=s==="hex"?d:te(s),f=x({id:`picker-btn-${r}`,tagName:"button",type:"button",className:"picker-toggle btn-appearance",ariaExpanded:"false",ariaHasPopup:"true"});f.append(x({tagName:"span",className:jt,innerText:`${b}. ${u}: ${p}`}));const w=x({tagName:"div",className:"color-dropdown picker",role:"group",ariaLabelledBy:`picker-btn-${r}`}),$=ho(o),P=co(o);if(w.append($,P),t.before(f),e.append(w),i||a){const H=x({tagName:"div",className:"color-dropdown scrollable menu"});a&&H.append(Pe(o,a,"color-options")),i&&i.length&&H.append(Pe(o,i,"color-defaults"));const S=x({tagName:"button",type:"button",className:"menu-toggle btn-appearance",tabIndex:-1,ariaExpanded:"false",ariaHasPopup:"true"}),C=encodeURI("http://www.w3.org/2000/svg"),R=Nt(C,{tagName:"svg"});m(R,"xmlns",C),m(R,"viewBox","0 0 512 512"),m(R,Me,"true");const E=Nt(C,{tagName:"path"});m(E,"d","M98,158l157,156L411,158l27,27L255,368L71,185L98,158z"),m(E,"fill","#fff"),R.append(E),S.append(x({tagName:"span",className:jt,innerText:`${h}`}),R),e.append(S,H)}i&&c.includes(l)&&(o.value=l),m(t,W,"-1")},uo="2.0.1",Z="color-picker",bo=`[data-function="${Z}"]`,Se=`.${Z}`,po={componentLabels:Bt,colorLabels:lt,format:"rgb",colorPresets:!1,colorKeywords:!1},{roundPart:y,nonColors:yt}=k,fo=o=>Ye(o,Z),mo=o=>new Ne(o),Ce=(o,t)=>{const e=t?Ct:Lt,{input:s,pickerToggle:r,menuToggle:n}=o;e(s,Oe,o.showPicker),e(r,St,o.togglePicker),n&&e(n,St,o.toggleMenu)},Le=(o,t)=>{const e=t?Ct:Lt,{input:s,colorMenu:r,parent:n}=o,i=F(s),a=ro(i);e(o.controls,Ie,o.pointerDown),o.controlKnobs.forEach(l=>e(l,_t,o.handleKnobs)),e(a,Be,o.handleScroll),e(a,Ve,o.update),[s,...o.inputs].forEach(l=>e(l,Te,o.changeHandler)),r&&(e(r,St,o.menuClickHandler),e(r,_t,o.menuKeyHandler)),e(i,zt,o.pointerMove),e(i,Ke,o.pointerUp),e(n,De,o.handleFocusOut),e(i,Fe,o.handleDismiss)},Ae=o=>{Qe(o.input,new CustomEvent("colorpicker.change"))},He=o=>{o&&["bottom","top"].forEach(t=>O(o,t))},qt=(o,t)=>{const{colorPicker:e,colorMenu:s,menuToggle:r,pickerToggle:n,parent:i}=o,a=t===e,l=a?s:e,c=a?r:n,h=a?n:r;M(i,"open")||q(i,"open"),l&&(O(l,"show"),He(l)),q(t,"bottom"),oo(t),q(t,"show"),a&&o.update(),o.isOpen||(Le(o,!0),o.updateDropdownPosition(),o.isOpen=!0,m(o.input,W,"0"),r&&m(r,W,"0")),m(h,xt,"true"),c&&m(c,xt,"false")};class Ne{static Color=k;static ColorPalette=Vt;static getInstance=fo;static init=mo;static selector=bo;static roundPart=y;static setElementStyle=D;static setAttribute=m;static getBoundingClientRect=ft;static version=uo;static colorNames=lt;static colorPickerLabels=Bt;id;input;color;format="rgb";parent;dragElement;isOpen=!1;controlPositions;colorLabels=Qt(lt.map(t=>[t,t]));colorKeywords;colorPresets;componentLabels;pickerToggle;menuToggle;colorPicker;colorMenu;controls;inputs;controlKnobs;visuals;constructor(t,e){const s=z(t);if(typeof t>"u")throw new TypeError("ColorPicker target not specified.");if(B(t)&&!s)throw new TypeError(`ColorPicker target "${t}" cannot be found.`);this.input=s;const r=re(s,Se);if(!r)throw new TypeError("ColorPicker requires a specific markup to work.");this.parent=r,this.id=se(s,Z),this.dragElement=void 0,this.isOpen=!1,this.controlPositions={c1x:0,c1y:0,c2y:0,c3y:0},this.colorKeywords=!1,this.colorPresets=!1;const{format:n,componentLabels:i,colorLabels:a,colorKeywords:l,colorPresets:c}=eo(s,po,e||{});let h=lt;Tt(a)&&a.length===17?h=a:B(a)&&a.split(",").length===17&&(h=a.split(",")),I(this.colorLabels,Qt(h.map((p,f)=>[lt[f],p])));const b=B(i)&&xe(i)?JSON.parse(i):i;if(this.componentLabels=I({...Bt},b),this.color=new k(s.value||"#fff",n),this.format=n,Tt(l)&&l.length?this.colorKeywords=l:B(l)&&l.length&&(this.colorKeywords=l.split(",").map(p=>p.trim())),Tt(c)&&c.length)this.colorPresets=c;else if(c&&xe(c)){const{hue:p,hueSteps:f,lightSteps:w,saturation:$}=JSON.parse(c);this.colorPresets=new Vt(p,f,w,$)}else B(c)&&(this.colorPresets=c.split(",").map(p=>p.trim()));go(this);const[u,d]=rt("color-dropdown",r);this.pickerToggle=z(".picker-toggle",r),this.menuToggle=z(".menu-toggle",r),this.colorPicker=u,this.colorMenu=d,this.inputs=[...rt("color-input",r)];const[g]=rt("color-controls",r);this.controls=g,this.controlKnobs=[...rt("knob",g)],this.visuals=[...rt("visual-control",g)],this.update(),Ce(this,!0),st.set(s,Z,this)}get value(){return this.input.value}set value(t){this.input.value=t}get hasNonColor(){return this.colorKeywords instanceof Array&&this.colorKeywords.some(t=>yt.includes(t))}get hex(){return this.color.toHex(!0)}get hsv(){return this.color.toHsv()}get hsl(){return this.color.toHsl()}get hwb(){return this.color.toHwb()}get rgb(){return this.color.toRgb()}get brightness(){return this.color.brightness}get luminance(){return this.color.luminance}get isDark(){const{color:t,brightness:e}=this;return e<120&&t.a>.33}get isValid(){const t=this.input.value;return t!==""&&new k(t).isValid}get appearance(){const{colorLabels:t,hsl:e,hsv:s,format:r}=this,n=y(e.h*360),i=r==="hsl"?e.s:s.s,a=y(i*100),l=y(e.l*100),c=s.v*100;let h="black";if(l===100&&a===0)h=t.white;else if(l===0)h=t.black;else if(a===0)h=t.grey;else if(n<15||n>=345)h=t.red;else if(n>=15&&n<45)h=c>80&&a>80?t.orange:t.brown;else if(n>=45&&n<75){const b=n>46&&n<54&&c<80&&a>90,u=n>=54&&n<75&&c<80;h=b?t.gold:t.yellow,h=u?t.olive:h}else n>=75&&n<155?h=c<68?t.green:t.lime:n>=155&&n<175?h=t.teal:n>=175&&n<195?h=t.cyan:n>=195&&n<255?h=t.blue:n>=255&&n<270?h=t.violet:n>=270&&n<295?h=t.magenta:n>=295&&n<345&&(h=t.pink);return h}updateVisuals(){const{controlPositions:t,visuals:e}=this,[s,r,n]=e,{offsetHeight:i}=s,a=t.c2y/i,{r:l,g:c,b:h}=new k({h:a,s:1,l:.5}).toRgb(),b="linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)",u=1-t.c3y/i,d=y(u*100)/100,g=new k({h:a,s:1,l:.5,a:u}).toRgbString(),p=`linear-gradient(
|
|
2
2
|
rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
|
|
3
3
|
rgb(0,255,0) 33.33%, rgb(0,255,255) 50%,
|
|
4
4
|
rgb(0,0,255) 66.67%, rgb(255,0,255) 83.33%,
|
package/dist/js/color-picker.mjs
CHANGED
|
@@ -2086,7 +2086,7 @@ const Kt = {
|
|
|
2086
2086
|
), e.append(P, L);
|
|
2087
2087
|
}
|
|
2088
2088
|
i && c.includes(l) && (o.value = l), m(t, X, "-1");
|
|
2089
|
-
}, go = "2.0.
|
|
2089
|
+
}, go = "2.0.1", Y = "color-picker", uo = `[data-function="${Y}"]`, ce = `.${Y}`, bo = {
|
|
2090
2090
|
componentLabels: Kt,
|
|
2091
2091
|
colorLabels: it,
|
|
2092
2092
|
format: "rgb",
|
package/package.json
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thednp/color-picker",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"author": "thednp",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "🎨 Modern Color Picker Component",
|
|
7
|
-
"homepage": "
|
|
7
|
+
"homepage": "https://thednp.github.io/color-picker",
|
|
8
|
+
"type": "module",
|
|
8
9
|
"source": "./src/ts/index.ts",
|
|
9
10
|
"main": "./dist/js/color-picker.js",
|
|
10
11
|
"module": "./dist/js/color-picker.mjs",
|
|
11
12
|
"style": "./dist/css/color-picker.css",
|
|
12
13
|
"sass": "./src/scss/color-picker.scss",
|
|
14
|
+
"sideEffects": false,
|
|
13
15
|
"exports": {
|
|
14
16
|
".": {
|
|
15
17
|
"require": "./dist/js/color-picker.cjs",
|
|
@@ -73,10 +75,8 @@
|
|
|
73
75
|
"istanbul-lib-coverage": "^3.2.2",
|
|
74
76
|
"istanbul-lib-instrument": "^6.0.3",
|
|
75
77
|
"ncp": "^2.0.0",
|
|
76
|
-
"npm-run-all": "^4.1.5",
|
|
77
78
|
"nyc": "^15.1.0",
|
|
78
79
|
"prettier": "^3.3.3",
|
|
79
|
-
"rimraf": "^5.0.10",
|
|
80
80
|
"sass": "^1.77.8",
|
|
81
81
|
"stylelint": "^15.11.0",
|
|
82
82
|
"stylelint-config-standard": "^34.0.0",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"test": "pnpm pre-test && cypress run",
|
|
92
92
|
"cypress": "pnpm pre-test && npx cypress open",
|
|
93
93
|
"badges": "npx -p dependency-version-badge update-badge typescript cypress eslint prettier vite",
|
|
94
|
-
"clean-coverage": "
|
|
94
|
+
"clean-coverage": "rm -rf coverage && rm -rf .nyc_output",
|
|
95
95
|
"coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
|
|
96
96
|
"format": "prettier --write \"src/**/*.ts\"",
|
|
97
97
|
"lint": "pnpm lint:ts && pnpm check:ts && pnpm lint:css",
|
|
@@ -100,18 +100,18 @@
|
|
|
100
100
|
"check:ts": "tsc --noEmit",
|
|
101
101
|
"fix:css": "stylelint --config .stylelintrc.json --fix scss \"src/scss/*.scss\"",
|
|
102
102
|
"lint:css": "stylelint --config .stylelintrc.json scss \"src/scss/*.scss\"",
|
|
103
|
-
"build": "pnpm lint && pnpm build-vite && pnpm dts",
|
|
104
|
-
"build-vite": "vite build
|
|
103
|
+
"build": "pnpm lint && pnpm build-vite && pnpm dts && pnpm docs",
|
|
104
|
+
"build-vite": "vite build",
|
|
105
105
|
"dev": "vite --open ./docs/dev.html --port 8577",
|
|
106
106
|
"dts": "dts-bundle-generator --config ./dts.config.ts",
|
|
107
|
-
"docs": "ncp dist/js/color-picker.js docs/js/color-picker.js && ncp dist/js/color-picker.js.map docs/js/color-picker.js.map",
|
|
108
|
-
"copy": "
|
|
107
|
+
"docs": "ncp dist/js/color-picker.js ./docs/js/color-picker.js && ncp dist/js/color-picker.js.map docs/js/color-picker.js.map",
|
|
108
|
+
"copy": "pnpm copy-css-cp && pnpm copy-css-rtl",
|
|
109
109
|
"copy-css-cp": "ncp dist/css/color-picker.css docs/css/color-picker.css",
|
|
110
110
|
"copy-css-rtl": "ncp dist/css/color-picker.rtl.css docs/css/color-picker.rtl.css",
|
|
111
|
-
"compile": "pnpm lint:css &&
|
|
112
|
-
"compile-scss": "node compile.
|
|
113
|
-
"compile-scss-min": "node compile.
|
|
114
|
-
"compile-scss-rtl": "node compile.
|
|
115
|
-
"compile-scss-rtl-min": "node compile.
|
|
111
|
+
"compile": "pnpm lint:css && pnpm compile-scss && pnpm compile-scss-min && pnpm compile-scss-rtl && pnpm compile-scss-rtl-min && pnpm copy",
|
|
112
|
+
"compile-scss": "node compile.cjs",
|
|
113
|
+
"compile-scss-min": "node compile.cjs MIN:true",
|
|
114
|
+
"compile-scss-rtl": "node compile.cjs MIN:false,DIR:rtl",
|
|
115
|
+
"compile-scss-rtl-min": "node compile.cjs MIN:true,DIR:rtl"
|
|
116
116
|
}
|
|
117
117
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
@import "variables";
|
|
2
2
|
|
|
3
|
+
*, *::before, *::after {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
3
7
|
/* :host */
|
|
4
8
|
.color-picker {
|
|
5
9
|
position: relative;
|
|
6
10
|
display: flex;
|
|
7
11
|
|
|
8
|
-
*, *::before, *::after {
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
12
|
@each $name in "white", "black" {
|
|
13
13
|
@each $lvl in $transparency-levels {
|
|
14
14
|
@if type-of($name) == "string" and type-of($lvl) == "number" {
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
$rgba: rgba($color, $lvl * 1%);
|
|
22
22
|
|
|
23
23
|
--#{$name}-#{$lvl}: #{$rgba};
|
|
24
|
+
|
|
25
|
+
// --#{$name}-#{$lvl}: #{rgba($color, $lvl * 1%)};
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
}
|
package/tsconfig.json
CHANGED
|
File without changes
|