@thednp/color-picker 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -20
- package/dist/css/color-picker.css +2 -2
- package/dist/css/color-picker.min.css +2 -2
- package/dist/css/color-picker.rtl.css +2 -2
- package/dist/css/color-picker.rtl.min.css +2 -2
- package/dist/js/color-esm.js +2 -5
- package/dist/js/color-esm.min.js +1 -1
- package/dist/js/color-palette-esm.js +2 -5
- package/dist/js/color-palette-esm.min.js +1 -1
- package/dist/js/color-palette.js +2 -5
- package/dist/js/color-palette.min.js +1 -1
- package/dist/js/color-picker-element-esm.js +10 -31
- package/dist/js/color-picker-element-esm.min.js +2 -2
- package/dist/js/color-picker-element.js +10 -31
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +14 -27
- package/dist/js/color-picker-esm.min.js +2 -2
- package/dist/js/color-picker.js +14 -27
- package/dist/js/color-picker.min.js +2 -2
- package/dist/js/color.js +2 -5
- package/dist/js/color.min.js +1 -1
- package/package.json +3 -3
- package/src/js/color-picker-element.js +1 -4
- package/src/js/color-picker.js +4 -17
- package/src/js/color.js +1 -4
- package/src/js/index.js +5 -0
- package/src/js/util/version.js +0 -1
- package/src/js/version.js +0 -1
- package/src/scss/color-picker.scss +1 -1
- package/types/cp.d.ts +31 -17
- package/types/index.d.ts +0 -4
- package/types/source/source.ts +0 -1
package/README.md
CHANGED
@@ -1,19 +1,20 @@
|
|
1
|
-
|
1
|
+
## ColorPicker
|
2
|
+
[](https://coveralls.io/github/thednp/color-picker)
|
3
|
+
[](https://github.com/thednp/color-picker/actions/workflows/ci.yml)
|
4
|
+
[](https://www.npmjs.com/package/@thednp/color-picker)
|
5
|
+
[](http://npm-stat.com/charts.html?package=@thednp/color-picker)
|
6
|
+
[](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
|
7
|
+

|
8
|
+

|
2
9
|
|
3
|
-
The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
|
4
|
-
|
5
|
-
[](http://thednp.github.io/color-picker)
|
6
|
-
|
7
|
-
|
8
|
-
[](https://www.npmjs.com/package/@thednp/color-picker)
|
9
|
-
[](http://npm-stat.com/charts.html?package=@thednp/color-picker)
|
10
|
-
[](https://bundlephobia.com/package/@thednp/color-picker)
|
11
|
-
[](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
|
10
|
+
The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, Cypress tested, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
|
12
11
|
|
13
12
|
**ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!
|
14
13
|
|
14
|
+
[](http://thednp.github.io/color-picker)
|
15
|
+
|
15
16
|
|
16
|
-
|
17
|
+
## Highlights
|
17
18
|
* Accessibility Focus for WAI-ARIA compliance
|
18
19
|
* ES6+ sources with TypeScript definitions
|
19
20
|
* Framework agnostic and flexible design
|
@@ -24,7 +25,8 @@ The feature rich **ColorPicker** component for the modern web built with TypeScr
|
|
24
25
|
* Right To Left Languages Supported
|
25
26
|
* light footprint, `10kb` in size when minified and gZipped
|
26
27
|
|
27
|
-
|
28
|
+
|
29
|
+
## Wiki
|
28
30
|
For an in depth guide on all things **ColorPicker**, check out the wiki pages:
|
29
31
|
* [Home](https://github.com/thednp/color-picker/wiki) - the **ColorPicker** wiki home.
|
30
32
|
* [NPM](https://github.com/thednp/color-picker/wiki/NPM) - quick installation guide.
|
@@ -33,16 +35,15 @@ For an in depth guide on all things **ColorPicker**, check out the wiki pages:
|
|
33
35
|
* [ES6+](https://github.com/thednp/color-picker/wiki/ES6) - your usual quick ES6+ guide.
|
34
36
|
* [Node.js](https://github.com/thednp/color-picker/wiki/Node.js) - is this a thing?
|
35
37
|
|
36
|
-
**Note** - the wiki pages are still under construction.
|
37
38
|
|
38
|
-
|
39
|
+
## NPM
|
39
40
|
You can install **ColorPicker** through NPM:
|
40
41
|
|
41
42
|
```
|
42
43
|
$ npm install @thednp/color-picker
|
43
44
|
```
|
44
45
|
|
45
|
-
|
46
|
+
## Browser Usage
|
46
47
|
Download the [latest package](https://github.com/thednp/color-picker/archive/master.zip). unpack and inspect the contents. You need to copy the `color-picker.js` and `color-picker.css` or their minified variations to your app `assets` folders as follows.
|
47
48
|
Link the required CSS in your document `<head>` tag
|
48
49
|
```html
|
@@ -90,14 +91,14 @@ Alternatively you can use the `ColorPickerElement` custom element, the `data-fun
|
|
90
91
|
As shown in the above example, all DATA API attributes for instance configuration are to be used on your **custom element**.
|
91
92
|
|
92
93
|
|
93
|
-
|
94
|
+
## Initialize INPUT
|
94
95
|
```javascript
|
95
96
|
import ColorPicker from '@thednp/color-picker';
|
96
97
|
|
97
|
-
|
98
|
+
const myPicker = new ColorPicker('#myPicker');
|
98
99
|
```
|
99
100
|
|
100
|
-
|
101
|
+
## Initialize Custom Element
|
101
102
|
```javascript
|
102
103
|
import ColorPickerElement from '@thednp/color-picker/src/color-picker-element';
|
103
104
|
|
@@ -116,7 +117,7 @@ document.body.append(myPicker);
|
|
116
117
|
Other configuration options apply, see [the API Guide](https://github.com/thednp/color-picker/wiki/API).
|
117
118
|
|
118
119
|
|
119
|
-
|
120
|
+
## Thanks
|
120
121
|
* Dimitris Grammatikogiannis for his [initial project](https://codepen.io/dgrammatiko/pen/zLvXwR) as well as testing and contributions
|
121
122
|
* Serhii Kulykov for his [Vanilla Colorful](https://github.com/web-padawan/vanilla-colorful)
|
122
123
|
* Brian Grinstead for his [TinyColor](https://github.com/bgrins/TinyColor)
|
@@ -125,5 +126,5 @@ Other configuration options apply, see [the API Guide](https://github.com/thednp
|
|
125
126
|
* Ștefan Petre at eyecon for his [colorPicker](https://www.eyecon.ro/colorpicker/)
|
126
127
|
* Brian Teeman for his [patience](https://github.com/joomla/joomla-cms/pull/35639)
|
127
128
|
|
128
|
-
|
129
|
+
## License
|
129
130
|
**ColorPicker** is released under the [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE).
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* ColorPicker v1.0.
|
2
|
+
* ColorPicker v1.0.1 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -149,7 +149,7 @@ color-picker:focus,
|
|
149
149
|
|
150
150
|
.txt-light .color-preview:focus {
|
151
151
|
color: var(--black-75);
|
152
|
-
box-shadow: 0 0 0 1px
|
152
|
+
box-shadow: 0 0 0 1px #000 inset, 0 0 0 3px var(--black-15);
|
153
153
|
}
|
154
154
|
|
155
155
|
.txt-light .color-preview::placeholder {
|
@@ -1,2 +1,2 @@
|
|
1
|
-
/* ColorPicker v1.0.
|
2
|
-
color-picker,.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,.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}.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%;height:1.5rem;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
|
1
|
+
/* ColorPicker v1.0.1 | thednp © 2022 | MIT-License */
|
2
|
+
color-picker,.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,.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}.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%;height:1.5rem;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;top:0;left:0;width:100%;height:100%;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,.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y: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-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.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-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap: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;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left: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,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.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-direction:row;flex-wrap: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:150px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.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;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,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* ColorPicker v1.0.
|
2
|
+
* ColorPicker v1.0.1 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -149,7 +149,7 @@ color-picker:focus,
|
|
149
149
|
|
150
150
|
.txt-light .color-preview:focus {
|
151
151
|
color: var(--black-75);
|
152
|
-
box-shadow: 0 0 0 1px
|
152
|
+
box-shadow: 0 0 0 1px #000 inset, 0 0 0 3px var(--black-15);
|
153
153
|
}
|
154
154
|
|
155
155
|
.txt-light .color-preview::placeholder {
|
@@ -1,2 +1,2 @@
|
|
1
|
-
/* ColorPicker RTL v1.0.
|
2
|
-
color-picker,.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,.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}.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%;height:1.5rem;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
|
1
|
+
/* ColorPicker RTL v1.0.1 | thednp © 2022 | MIT-License */
|
2
|
+
color-picker,.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,.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}.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%;height:1.5rem;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;top:0;left:0;width:100%;height:100%;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,.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y: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-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.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-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap: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;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left: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,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.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-direction:row;flex-wrap: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:150px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.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;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-esm.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* Color v1.0.
|
2
|
+
* Color v1.0.1 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -698,7 +698,7 @@ function inputToRGB(input) {
|
|
698
698
|
format = 'hwb';
|
699
699
|
}
|
700
700
|
if (isValidCSSUnit(color.a)) {
|
701
|
-
a = color.a;
|
701
|
+
a = color.a;
|
702
702
|
a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
|
703
703
|
}
|
704
704
|
}
|
@@ -709,9 +709,6 @@ function inputToRGB(input) {
|
|
709
709
|
return {
|
710
710
|
ok,
|
711
711
|
format,
|
712
|
-
// r: Math.min(255, Math.max(rgb.r, 0)),
|
713
|
-
// g: Math.min(255, Math.max(rgb.g, 0)),
|
714
|
-
// b: Math.min(255, Math.max(rgb.b, 0)),
|
715
712
|
r: rgb.r,
|
716
713
|
g: rgb.g,
|
717
714
|
b: rgb.b,
|
package/dist/js/color-esm.min.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
// Color v1.0.
|
1
|
+
// Color v1.0.1 | thednp © 2022 | MIT-License
|
2
2
|
const{head:t}=document;function r(t,r){const n=getComputedStyle(t);return r in n?n[r]:""}const n=(t,r)=>Object.assign(t,r),e=(t,r)=>{n(t.style,r)},o=["transparent","currentColor","inherit","revert","initial"];function s(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const a=["rgb","hex","hsl","hsv","hwb"],h="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",i="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${i})|(?:${h})`,c="(?:[,|\\s]+)",g=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${i})${c}(${i})(?:[,|\\/\\s]*)?(${i})?(?:[\\s|\\)\\s]+)?`,l={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+g),rgb:new RegExp("rgb(?:a)?"+g),hsl:new RegExp("hsl(?:a)?"+g),hsv:new RegExp("hsv(?:a)?"+g),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})$/};function b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(n){return!o.includes(n)&&!["#",...a].some(t=>n.includes(t))&&(!!["black","white"].includes(n)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(o=>{e(t,{color:n});const s=r(t,"color");return e(t,{color:""}),s!==o}))}function x(t){return Boolean(l.CSS_UNIT.exec(String(t)))}function S(t,r){let n=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(n="100%");const e=f(n);return n=360===r?parseFloat(n):Math.min(r,Math.max(0,parseFloat(n))),e&&(n=n*r/100),Math.abs(n-r)<1e-6?1:(n=360===r?(n<0?n%r+r:n%r)/r:n%r/r,n)}function d(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function A(t){return Math.min(1,Math.max(0,t))}function $(n){e(t,{color:n});const o=r(t,"color");return e(t,{color:""}),o}function p(t){return s(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,n){const e=Math.max(t,r,n),o=Math.min(t,r,n);let s=0,a=0;const h=(e+o)/2;if(e===o)a=0,s=0;else{const i=e-o;a=h>.5?i/(2-e-o):i/(e+o),e===t&&(s=(r-n)/i+(r<n?6:0)),e===r&&(s=(n-t)/i+2),e===n&&(s=(t-r)/i+4),s/=6}return{h:s,s:a,l:h}}function F(t,r,n){let e=n;return e<0&&(e+=1),e>1&&(e-=1),e<1/6?t+6*e*(r-t):e<.5?r:e<2/3?t+(r-t)*(2/3-e)*6:t}function M(t,r,n){let e=0,o=0,s=0;if(0===r)o=n,s=n,e=n;else{const a=n<.5?n*(1+r):n+r-n*r,h=2*n-a;e=F(h,a,t+1/3),o=F(h,a,t),s=F(h,a,t-1/3)}return{r:e,g:o,b:s}}function T(t,r,n){let e=0,o=0;const s=Math.min(t,r,n),a=Math.max(t,r,n),h=1-a;if(a===s)return{h:0,w:s,b:h};t===s?(e=r-n,o=3):(e=r===s?n-t:t-r,o=r===s?5:1);const i=(o-e/(a-s))/6;return{h:1===i?0:i,w:s,b:h}}function y(t,r,n){if(r+n>=1){const t=r/(r+n);return{r:t,g:t,b:t}}let{r:e,g:o,b:s}=M(t,1,.5);return[e,o,s]=[e,o,s].map(t=>t*(1-r-n)+r),{r:e,g:o,b:s}}function C(t,r,n){const e=Math.max(t,r,n),o=Math.min(t,r,n);let s=0;const a=e-o;return e===o?s=0:(t===e&&(s=(r-n)/a+(r<n?6:0)),r===e&&(s=(n-t)/a+2),n===e&&(s=(t-r)/a+4),s/=6),{h:s,s:0===e?0:a/e,v:e}}function E(t,r,n){const e=6*t,o=r,s=n,a=Math.floor(e),h=e-a,i=s*(1-o),u=s*(1-h*o),c=s*(1-(1-h)*o),g=a%6;return{r:[s,u,i,i,c,s][g],g:[c,s,s,u,i,i][g],b:[i,i,c,s,s,u][g]}}function N(t,r,n,e){const o=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(n).toString(16))];return e&&o[0].charAt(0)===o[0].charAt(1)&&o[1].charAt(0)===o[1].charAt(1)&&o[2].charAt(0)===o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function I(t,r,n,e,o){const a=[v(s(t).toString(16)),v(s(r).toString(16)),v(s(n).toString(16)),v(p(e))];return o&&a[0].charAt(0)===a[0].charAt(1)&&a[1].charAt(0)===a[1].charAt(1)&&a[2].charAt(0)===a[2].charAt(1)&&a[3].charAt(0)===a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}function k(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=$(r);else if(o.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,n,e,s,a]=l.rgb.exec(r)||[];return n&&e&&s?{r:n,g:e,b:s,a:void 0!==a?a:1,format:"rgb"}:([,n,e,s,a]=l.hsl.exec(r)||[],n&&e&&s?{h:n,s:e,l:s,a:void 0!==a?a:1,format:"hsl"}:([,n,e,s,a]=l.hsv.exec(r)||[],n&&e&&s?{h:n,s:e,v:s,a:void 0!==a?a:1,format:"hsv"}:([,n,e,s,a]=l.hwb.exec(r)||[],n&&e&&s?{h:n,w:e,b:s,a:void 0!==a?a:1,format:"hwb"}:([,n,e,s,a]=l.hex8.exec(r)||[],n&&e&&s&&a?{r:H(n),g:H(e),b:H(s),a:w(a),format:"hex"}:([,n,e,s]=l.hex6.exec(r)||[],n&&e&&s?{r:H(n),g:H(e),b:H(s),format:"hex"}:([,n,e,s,a]=l.hex4.exec(r)||[],n&&e&&s&&a?{r:H(n+n),g:H(e+e),b:H(s+s),a:w(a+a),format:"hex"}:([,n,e,s]=l.hex3.exec(r)||[],!!(n&&e&&s)&&{r:H(n+n),g:H(e+e),b:H(s+s),format:"hex"})))))))}function _(t){let r={r:0,g:0,b:0},n=t,e=1,o=null,s=null,h=null,i=null,u=null,c=null,g=null,l=null,b=!1;const m="object"==typeof n&&n.format;let A=m&&a.includes(m)?m:"rgb";return"string"==typeof t&&(n=k(t),n&&(b=!0)),"object"==typeof n&&(x(n.r)&&x(n.g)&&x(n.b)&&(({r:g,g:l,b:u}=n),[g,l,u]=[g,l,u].map(t=>S(t,f(t)?100:255)),r={r:g,g:l,b:u},b=!0,A=n.format||"rgb"),x(n.h)&&x(n.s)&&x(n.v)&&(({h:c,s:o,v:s}=n),c=S(c,360),o=S(o,100),s=S(s,100),r=E(c,o,s),b=!0,A="hsv"),x(n.h)&&x(n.s)&&x(n.l)&&(({h:c,s:o,l:h}=n),c=S(c,360),o=S(o,100),h=S(h,100),r=M(c,o,h),b=!0,A="hsl"),x(n.h)&&x(n.w)&&x(n.b)&&(({h:c,w:i,b:u}=n),c=S(c,360),i=S(i,100),u=S(u,100),r=y(c,i,u),b=!0,A="hwb"),x(n.a)&&(e=n.a,e=f(""+e)||parseFloat(e)>1?S(e,100):e)),void 0===n&&(b=!0),{ok:b,format:A,r:r.r,g:r.g,b:r.b,a:d(e)}}class j{constructor(t,r){let n=t;const e=r&&a.includes(r)?r:"";n instanceof j&&(n=_(n));const{r:o,g:s,b:h,a:i,ok:u,format:c}=_(n);this.originalInput=t,this.r=o,this.g=s,this.b=h,this.a=i,this.ok=u,this.format=e||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:n}=this;let e=0,o=0,s=0;return e=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=n<=.03928?n/12.92:((n+.055)/1.055)**2.4,.2126*e+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:n}=this.toRgb();return(299*t+587*r+114*n)/1e3}toRgb(){let{r:t,g:r,b:n,a:e}=this;return[t,r,n]=[t,r,n].map(t=>s(255*t*100)/100),e=s(100*e)/100,{r:t,g:r,b:n,a:e}}toRgbString(){const{r:t,g:r,b:n,a:e}=this.toRgb(),[o,a,h]=[t,r,n].map(s);return 1===e?`rgb(${o}, ${a}, ${h})`:`rgba(${o}, ${a}, ${h}, ${e})`}toRgbCSS4String(){const{r:t,g:r,b:n,a:e}=this.toRgb(),[o,a,h]=[t,r,n].map(s);return`rgb(${o} ${a} ${h}${1===e?"":` / ${s(100*e)}%`})`}toHex(t){const{r:r,g:n,b:e,a:o}=this.toRgb();return 1===o?N(r,n,e,t):I(r,n,e,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:n,b:e,a:o}=this.toRgb();return I(r,n,e,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:n,a:e}=this,{h:o,s:s,v:a}=C(t,r,n);return{h:o,s:s,v:a,a:e}}toHsl(){const{r:t,g:r,b:n,a:e}=this,{h:o,s:s,l:a}=R(t,r,n);return{h:o,s:s,l:a,a:e}}toHslString(){let{h:t,s:r,l:n,a:e}=this.toHsl();return t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e)/100,1===e?`hsl(${t}, ${r}%, ${n}%)`:`hsla(${t}, ${r}%, ${n}%, ${e})`}toHslCSS4String(){let{h:t,s:r,l:n,a:e}=this.toHsl();t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e);return`hsl(${t}deg ${r}% ${n}%${e<100?` / ${s(e)}%`:""})`}toHwb(){const{r:t,g:r,b:n,a:e}=this,{h:o,w:s,b:a}=T(t,r,n);return{h:o,w:s,b:a,a:e}}toHwbString(){let{h:t,w:r,b:n,a:e}=this.toHwb();t=s(360*t),r=s(100*r),n=s(100*n),e=s(100*e);return`hwb(${t}deg ${r}% ${n}%${e<100?` / ${s(e)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=d(t)),this}saturate(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(r,A(e+t/100),o);return n(this,{r:s,g:a,b:h}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(r,e,A(o+t/100));return n(this,{r:s,g:a,b:h}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(t){if("number"!=typeof t)return this;const{h:r,s:e,l:o}=this.toHsl(),{r:s,g:a,b:h}=M(A((360*r+t)%360/360),e,o);return n(this,{r:s,g:a,b:h}),this}clone(){return new j(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}n(j,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:h,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:i,CSS_UNIT2:u,PERMISSIVE_MATCH:g,matchers:l,isOnePointZero:b,isPercentage:f,isValidCSSUnit:x,isColorName:m,pad2:v,clamp01:A,bound01:S,boundAlpha:d,getRGBFromName:$,convertHexToDecimal:w,convertDecimalToHex:p,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:T,rgbaToHex:I,hslToRgb:M,hsvToRgb:E,hueToRgb:F,hwbToRgb:y,parseIntFromHex:H,stringInputToObject:k,inputToRGB:_,roundPart:s,getElementStyle:r,setElementStyle:e,ObjectAssign:n});export{j as default};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* ColorPalette v1.0.
|
2
|
+
* ColorPalette v1.0.1 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -698,7 +698,7 @@ function inputToRGB(input) {
|
|
698
698
|
format = 'hwb';
|
699
699
|
}
|
700
700
|
if (isValidCSSUnit(color.a)) {
|
701
|
-
a = color.a;
|
701
|
+
a = color.a;
|
702
702
|
a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
|
703
703
|
}
|
704
704
|
}
|
@@ -709,9 +709,6 @@ function inputToRGB(input) {
|
|
709
709
|
return {
|
710
710
|
ok,
|
711
711
|
format,
|
712
|
-
// r: Math.min(255, Math.max(rgb.r, 0)),
|
713
|
-
// g: Math.min(255, Math.max(rgb.g, 0)),
|
714
|
-
// b: Math.min(255, Math.max(rgb.b, 0)),
|
715
712
|
r: rgb.r,
|
716
713
|
g: rgb.g,
|
717
714
|
b: rgb.b,
|
@@ -1,2 +1,2 @@
|
|
1
|
-
// ColorPalette v1.0.
|
1
|
+
// ColorPalette v1.0.1 | thednp © 2022 | MIT-License
|
2
2
|
const t=(t,r)=>Object.assign(t,r);function r(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const{head:e}=document;function n(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const o=(r,e)=>{t(r.style,e)},s=["transparent","currentColor","inherit","revert","initial"],h=["rgb","hex","hsl","hsv","hwb"],a="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",i="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${i})|(?:${a})`,c="(?:[,|\\s]+)",l=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${c}(${i})${c}(${i})(?:[,|\\/\\s]*)?(${i})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+l),rgb:new RegExp("rgb(?:a)?"+l),hsl:new RegExp("hsl(?:a)?"+l),hsv:new RegExp("hsv(?:a)?"+l),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})$/};function b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(t){return!s.includes(t)&&!["#",...h].some(r=>t.includes(r))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(r=>{o(e,{color:t});const s=n(e,"color");return o(e,{color:""}),s!==r}))}function S(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function d(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(t){o(e,{color:t});const r=n(e,"color");return o(e,{color:""}),r}function $(t){return r(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,h=0;const a=(n+o)/2;if(n===o)h=0,s=0;else{const i=n-o;h=a>.5?i/(2-n-o):i/(n+o),n===t&&(s=(r-e)/i+(r<e?6:0)),n===r&&(s=(e-t)/i+2),n===e&&(s=(t-r)/i+4),s/=6}return{h:s,s:h,l:a}}function F(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function T(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const h=e<.5?e*(1+r):e+r-e*r,a=2*e-h;n=F(a,h,t+1/3),o=F(a,h,t),s=F(a,h,t-1/3)}return{r:n,g:o,b:s}}function M(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),h=Math.max(t,r,e),a=1-h;if(h===s)return{h:0,w:s,b:a};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const i=(o-n/(h-s))/6;return{h:1===i?0:i,w:s,b:a}}function y(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=T(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const h=n-o;return n===o?s=0:(t===n&&(s=(r-e)/h+(r<e?6:0)),r===n&&(s=(e-t)/h+2),e===n&&(s=(t-r)/h+4),s/=6),{h:s,s:0===n?0:h/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,h=Math.floor(n),a=n-h,i=s*(1-o),u=s*(1-a*o),c=s*(1-(1-a)*o),l=h%6;return{r:[s,u,i,i,c,s][l],g:[c,s,s,u,i,i][l],b:[i,i,c,s,s,u][l]}}function N(t,e,n,o){const s=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16))];return o&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0):s.join("")}function I(t,e,n,o,s){const h=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16)),v($(o))];return s&&h[0].charAt(0)===h[0].charAt(1)&&h[1].charAt(0)===h[1].charAt(1)&&h[2].charAt(0)===h[2].charAt(1)&&h[3].charAt(0)===h[3].charAt(1)?h[0].charAt(0)+h[1].charAt(0)+h[2].charAt(0)+h[3].charAt(0):h.join("")}function k(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(s.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,o,h]=g.rgb.exec(r)||[];return e&&n&&o?{r:e,g:n,b:o,a:void 0!==h?h:1,format:"rgb"}:([,e,n,o,h]=g.hsl.exec(r)||[],e&&n&&o?{h:e,s:n,l:o,a:void 0!==h?h:1,format:"hsl"}:([,e,n,o,h]=g.hsv.exec(r)||[],e&&n&&o?{h:e,s:n,v:o,a:void 0!==h?h:1,format:"hsv"}:([,e,n,o,h]=g.hwb.exec(r)||[],e&&n&&o?{h:e,w:n,b:o,a:void 0!==h?h:1,format:"hwb"}:([,e,n,o,h]=g.hex8.exec(r)||[],e&&n&&o&&h?{r:H(e),g:H(n),b:H(o),a:w(h),format:"hex"}:([,e,n,o]=g.hex6.exec(r)||[],e&&n&&o?{r:H(e),g:H(n),b:H(o),format:"hex"}:([,e,n,o,h]=g.hex4.exec(r)||[],e&&n&&o&&h?{r:H(e+e),g:H(n+n),b:H(o+o),a:w(h+h),format:"hex"}:([,e,n,o]=g.hex3.exec(r)||[],!!(e&&n&&o)&&{r:H(e+e),g:H(n+n),b:H(o+o),format:"hex"})))))))}function _(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,a=null,i=null,u=null,c=null,l=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&h.includes(m)?m:"rgb";return"string"==typeof t&&(e=k(t),e&&(b=!0)),"object"==typeof e&&(S(e.r)&&S(e.g)&&S(e.b)&&(({r:l,g:g,b:u}=e),[l,g,u]=[l,g,u].map(t=>x(t,f(t)?100:255)),r={r:l,g:g,b:u},b=!0,p=e.format||"rgb"),S(e.h)&&S(e.s)&&S(e.v)&&(({h:c,s:o,v:s}=e),c=x(c,360),o=x(o,100),s=x(s,100),r=E(c,o,s),b=!0,p="hsv"),S(e.h)&&S(e.s)&&S(e.l)&&(({h:c,s:o,l:a}=e),c=x(c,360),o=x(o,100),a=x(a,100),r=T(c,o,a),b=!0,p="hsl"),S(e.h)&&S(e.w)&&S(e.b)&&(({h:c,w:i,b:u}=e),c=x(c,360),i=x(i,100),u=x(u,100),r=y(c,i,u),b=!0,p="hwb"),S(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:d(n)}}class j{constructor(t,r){let e=t;const n=r&&h.includes(r)?r:"";e instanceof j&&(e=_(e));const{r:o,g:s,b:a,a:i,ok:u,format:c}=_(e);this.originalInput=t,this.r=o,this.g=s,this.b=a,this.a=i,this.ok=u,this.format=n||c}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:e,b:n,a:o}=this;return[t,e,n]=[t,e,n].map(t=>r(255*t*100)/100),o=r(100*o)/100,{r:t,g:e,b:n,a:o}}toRgbString(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,a]=[t,e,n].map(r);return 1===o?`rgb(${s}, ${h}, ${a})`:`rgba(${s}, ${h}, ${a}, ${o})`}toRgbCSS4String(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,a]=[t,e,n].map(r);return`rgb(${s} ${h} ${a}${1===o?"":` / ${r(100*o)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:h}=C(t,r,e);return{h:o,s:s,v:h,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:h}=R(t,r,e);return{h:o,s:s,l:h,a:n}}toHslString(){let{h:t,s:e,l:n,a:o}=this.toHsl();return t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o)/100,1===o?`hsl(${t}, ${e}%, ${n}%)`:`hsla(${t}, ${e}%, ${n}%, ${o})`}toHslCSS4String(){let{h:t,s:e,l:n,a:o}=this.toHsl();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hsl(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:h}=M(t,r,e);return{h:o,w:s,b:h,a:n}}toHwbString(){let{h:t,w:e,b:n,a:o}=this.toHwb();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hwb(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=d(t)),this}saturate(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(e,p(n+r/100),o);return t(this,{r:s,g:h,b:a}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(e,n,p(o+r/100));return t(this,{r:s,g:h,b:a}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:a}=T(p((360*e+r)%360/360),n,o);return t(this,{r:s,g:h,b:a}),this}clone(){return new j(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}t(j,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:a,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:i,CSS_UNIT2:u,PERMISSIVE_MATCH:l,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:S,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:d,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:M,rgbaToHex:I,hslToRgb:T,hsvToRgb:E,hueToRgb:F,hwbToRgb:y,parseIntFromHex:H,stringInputToObject:k,inputToRGB:_,roundPart:r,getElementStyle:n,setElementStyle:o,ObjectAssign:t});class U{constructor(...t){let e=0,n=12,o=10,s=[.5];if(3===t.length)[e,n,o]=t;else if(2===t.length&&([n,o]=t,[n,o].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const h=[],a=360/n,i=r((o-(o%2?1:0))/2),u=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],c=u.find(t=>t.includes(o)),l=c?[.25,.2,.15,.11,.09,.075][u.indexOf(c)]:100/(o+(o%2?0:1))/100;for(let t=1;t<i+1;t+=1)s=[...s,.5+l*t];for(let t=1;t<o-i;t+=1)s=[.5-l*t,...s];for(let t=0;t<n;t+=1){const r=(e+t*a)%360/360;s.forEach(t=>{h.push(new j({h:r,s:1,l:t}))})}this.hue=e,this.hueSteps=n,this.lightSteps=o,this.colors=h}}t(U,{Color:j});export{U as default};
|
package/dist/js/color-palette.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* ColorPalette v1.0.
|
2
|
+
* ColorPalette v1.0.1 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -704,7 +704,7 @@
|
|
704
704
|
format = 'hwb';
|
705
705
|
}
|
706
706
|
if (isValidCSSUnit(color.a)) {
|
707
|
-
a = color.a;
|
707
|
+
a = color.a;
|
708
708
|
a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
|
709
709
|
}
|
710
710
|
}
|
@@ -715,9 +715,6 @@
|
|
715
715
|
return {
|
716
716
|
ok,
|
717
717
|
format,
|
718
|
-
// r: Math.min(255, Math.max(rgb.r, 0)),
|
719
|
-
// g: Math.min(255, Math.max(rgb.g, 0)),
|
720
|
-
// b: Math.min(255, Math.max(rgb.b, 0)),
|
721
718
|
r: rgb.r,
|
722
719
|
g: rgb.g,
|
723
720
|
b: rgb.b,
|
@@ -1,2 +1,2 @@
|
|
1
|
-
// ColorPalette v1.0.
|
1
|
+
// ColorPalette v1.0.1 | thednp © 2022 | MIT-License
|
2
2
|
!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(t="undefined"!=typeof globalThis?globalThis:t||self).ColorPalette=r()}(this,(function(){"use strict";const t=(t,r)=>Object.assign(t,r);function r(t){const r=Math.floor(t);return t-r<.5?r:Math.round(t)}const{head:e}=document;function n(t,r){const e=getComputedStyle(t);return r in e?e[r]:""}const o=(r,e)=>{t(r.style,e)},s=["transparent","currentColor","inherit","revert","initial"],h=["rgb","hex","hsl","hsv","hwb"],i="[-\\+]?\\d*\\.?\\d+(?:deg|rad|grad|turn)?",a="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)",u=`(?:${a})|(?:${i})`,l="(?:[,|\\s]+)",c=`(?:[\\s|\\(\\s|\\s\\(\\s]+)?(${u})${l}(${a})${l}(${a})(?:[,|\\/\\s]*)?(${a})?(?:[\\s|\\)\\s]+)?`,g={CSS_UNIT:new RegExp(u),hwb:new RegExp("hwb"+c),rgb:new RegExp("rgb(?:a)?"+c),hsl:new RegExp("hsl(?:a)?"+c),hsv:new RegExp("hsv(?:a)?"+c),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})$/};function b(t){return(""+t).includes(".")&&1===parseFloat(t)}function f(t){return(""+t).includes("%")}function m(t){return!s.includes(t)&&!["#",...h].some(r=>t.includes(r))&&(!!["black","white"].includes(t)||["rgb(255, 255, 255)","rgb(0, 0, 0)"].every(r=>{o(e,{color:t});const s=n(e,"color");return o(e,{color:""}),s!==r}))}function d(t){return Boolean(g.CSS_UNIT.exec(String(t)))}function x(t,r){let e=t;if("number"==typeof t&&0===Math.min(t,0)&&1===Math.max(t,1))return t;b(t)&&(e="100%");const n=f(e);return e=360===r?parseFloat(e):Math.min(r,Math.max(0,parseFloat(e))),n&&(e=e*r/100),Math.abs(e-r)<1e-6?1:(e=360===r?(e<0?e%r+r:e%r)/r:e%r/r,e)}function S(t){let r=parseFloat(""+t);return(Number.isNaN(r)||r<0||r>1)&&(r=1),r}function p(t){return Math.min(1,Math.max(0,t))}function A(t){o(e,{color:t});const r=n(e,"color");return o(e,{color:""}),r}function $(t){return r(255*t).toString(16)}function w(t){return H(t)/255}function H(t){return parseInt(t,16)}function v(t){return 1===t.length?"0"+t:String(t)}function R(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0,h=0;const i=(n+o)/2;if(n===o)h=0,s=0;else{const a=n-o;h=i>.5?a/(2-n-o):a/(n+o),n===t&&(s=(r-e)/a+(r<e?6:0)),n===r&&(s=(e-t)/a+2),n===e&&(s=(t-r)/a+4),s/=6}return{h:s,s:h,l:i}}function T(t,r,e){let n=e;return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*n*(r-t):n<.5?r:n<2/3?t+(r-t)*(2/3-n)*6:t}function y(t,r,e){let n=0,o=0,s=0;if(0===r)o=e,s=e,n=e;else{const h=e<.5?e*(1+r):e+r-e*r,i=2*e-h;n=T(i,h,t+1/3),o=T(i,h,t),s=T(i,h,t-1/3)}return{r:n,g:o,b:s}}function F(t,r,e){let n=0,o=0;const s=Math.min(t,r,e),h=Math.max(t,r,e),i=1-h;if(h===s)return{h:0,w:s,b:i};t===s?(n=r-e,o=3):(n=r===s?e-t:t-r,o=r===s?5:1);const a=(o-n/(h-s))/6;return{h:1===a?0:a,w:s,b:i}}function M(t,r,e){if(r+e>=1){const t=r/(r+e);return{r:t,g:t,b:t}}let{r:n,g:o,b:s}=y(t,1,.5);return[n,o,s]=[n,o,s].map(t=>t*(1-r-e)+r),{r:n,g:o,b:s}}function C(t,r,e){const n=Math.max(t,r,e),o=Math.min(t,r,e);let s=0;const h=n-o;return n===o?s=0:(t===n&&(s=(r-e)/h+(r<e?6:0)),r===n&&(s=(e-t)/h+2),e===n&&(s=(t-r)/h+4),s/=6),{h:s,s:0===n?0:h/n,v:n}}function E(t,r,e){const n=6*t,o=r,s=e,h=Math.floor(n),i=n-h,a=s*(1-o),u=s*(1-i*o),l=s*(1-(1-i)*o),c=h%6;return{r:[s,u,a,a,l,s][c],g:[l,s,s,u,a,a][c],b:[a,a,l,s,s,u][c]}}function N(t,e,n,o){const s=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16))];return o&&s[0].charAt(0)===s[0].charAt(1)&&s[1].charAt(0)===s[1].charAt(1)&&s[2].charAt(0)===s[2].charAt(1)?s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0):s.join("")}function I(t,e,n,o,s){const h=[v(r(t).toString(16)),v(r(e).toString(16)),v(r(n).toString(16)),v($(o))];return s&&h[0].charAt(0)===h[0].charAt(1)&&h[1].charAt(0)===h[1].charAt(1)&&h[2].charAt(0)===h[2].charAt(1)&&h[3].charAt(0)===h[3].charAt(1)?h[0].charAt(0)+h[1].charAt(0)+h[2].charAt(0)+h[3].charAt(0):h.join("")}function j(t){let r=t.trim().toLowerCase();if(0===r.length)return{r:0,g:0,b:0,a:1};if(m(r))r=A(r);else if(s.includes(r)){return{r:0,g:0,b:0,a:"transparent"===r?0:1,format:"rgb",ok:!0}}let[,e,n,o,h]=g.rgb.exec(r)||[];return e&&n&&o?{r:e,g:n,b:o,a:void 0!==h?h:1,format:"rgb"}:([,e,n,o,h]=g.hsl.exec(r)||[],e&&n&&o?{h:e,s:n,l:o,a:void 0!==h?h:1,format:"hsl"}:([,e,n,o,h]=g.hsv.exec(r)||[],e&&n&&o?{h:e,s:n,v:o,a:void 0!==h?h:1,format:"hsv"}:([,e,n,o,h]=g.hwb.exec(r)||[],e&&n&&o?{h:e,w:n,b:o,a:void 0!==h?h:1,format:"hwb"}:([,e,n,o,h]=g.hex8.exec(r)||[],e&&n&&o&&h?{r:H(e),g:H(n),b:H(o),a:w(h),format:"hex"}:([,e,n,o]=g.hex6.exec(r)||[],e&&n&&o?{r:H(e),g:H(n),b:H(o),format:"hex"}:([,e,n,o,h]=g.hex4.exec(r)||[],e&&n&&o&&h?{r:H(e+e),g:H(n+n),b:H(o+o),a:w(h+h),format:"hex"}:([,e,n,o]=g.hex3.exec(r)||[],!!(e&&n&&o)&&{r:H(e+e),g:H(n+n),b:H(o+o),format:"hex"})))))))}function k(t){let r={r:0,g:0,b:0},e=t,n=1,o=null,s=null,i=null,a=null,u=null,l=null,c=null,g=null,b=!1;const m="object"==typeof e&&e.format;let p=m&&h.includes(m)?m:"rgb";return"string"==typeof t&&(e=j(t),e&&(b=!0)),"object"==typeof e&&(d(e.r)&&d(e.g)&&d(e.b)&&(({r:c,g:g,b:u}=e),[c,g,u]=[c,g,u].map(t=>x(t,f(t)?100:255)),r={r:c,g:g,b:u},b=!0,p=e.format||"rgb"),d(e.h)&&d(e.s)&&d(e.v)&&(({h:l,s:o,v:s}=e),l=x(l,360),o=x(o,100),s=x(s,100),r=E(l,o,s),b=!0,p="hsv"),d(e.h)&&d(e.s)&&d(e.l)&&(({h:l,s:o,l:i}=e),l=x(l,360),o=x(o,100),i=x(i,100),r=y(l,o,i),b=!0,p="hsl"),d(e.h)&&d(e.w)&&d(e.b)&&(({h:l,w:a,b:u}=e),l=x(l,360),a=x(a,100),u=x(u,100),r=M(l,a,u),b=!0,p="hwb"),d(e.a)&&(n=e.a,n=f(""+n)||parseFloat(n)>1?x(n,100):n)),void 0===e&&(b=!0),{ok:b,format:p,r:r.r,g:r.g,b:r.b,a:S(n)}}class _{constructor(t,r){let e=t;const n=r&&h.includes(r)?r:"";e instanceof _&&(e=k(e));const{r:o,g:s,b:i,a:a,ok:u,format:l}=k(e);this.originalInput=t,this.r=o,this.g=s,this.b=i,this.a=a,this.ok=u,this.format=n||l}get isValid(){return this.ok}get isDark(){return this.brightness<120}get luminance(){const{r:t,g:r,b:e}=this;let n=0,o=0,s=0;return n=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,s=e<=.03928?e/12.92:((e+.055)/1.055)**2.4,.2126*n+.7152*o+.0722*s}get brightness(){const{r:t,g:r,b:e}=this.toRgb();return(299*t+587*r+114*e)/1e3}toRgb(){let{r:t,g:e,b:n,a:o}=this;return[t,e,n]=[t,e,n].map(t=>r(255*t*100)/100),o=r(100*o)/100,{r:t,g:e,b:n,a:o}}toRgbString(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,i]=[t,e,n].map(r);return 1===o?`rgb(${s}, ${h}, ${i})`:`rgba(${s}, ${h}, ${i}, ${o})`}toRgbCSS4String(){const{r:t,g:e,b:n,a:o}=this.toRgb(),[s,h,i]=[t,e,n].map(r);return`rgb(${s} ${h} ${i}${1===o?"":` / ${r(100*o)}%`})`}toHex(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return 1===o?N(r,e,n,t):I(r,e,n,o,t)}toHexString(t){return"#"+this.toHex(t)}toHex8(t){const{r:r,g:e,b:n,a:o}=this.toRgb();return I(r,e,n,o,t)}toHex8String(t){return"#"+this.toHex8(t)}toHsv(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,v:h}=C(t,r,e);return{h:o,s:s,v:h,a:n}}toHsl(){const{r:t,g:r,b:e,a:n}=this,{h:o,s:s,l:h}=R(t,r,e);return{h:o,s:s,l:h,a:n}}toHslString(){let{h:t,s:e,l:n,a:o}=this.toHsl();return t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o)/100,1===o?`hsl(${t}, ${e}%, ${n}%)`:`hsla(${t}, ${e}%, ${n}%, ${o})`}toHslCSS4String(){let{h:t,s:e,l:n,a:o}=this.toHsl();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hsl(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}toHwb(){const{r:t,g:r,b:e,a:n}=this,{h:o,w:s,b:h}=F(t,r,e);return{h:o,w:s,b:h,a:n}}toHwbString(){let{h:t,w:e,b:n,a:o}=this.toHwb();t=r(360*t),e=r(100*e),n=r(100*n),o=r(100*o);return`hwb(${t}deg ${e}% ${n}%${o<100?` / ${r(o)}%`:""})`}setAlpha(t){return"number"!=typeof t||(this.a=S(t)),this}saturate(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(e,p(n+r/100),o);return t(this,{r:s,g:h,b:i}),this}desaturate(t){return"number"==typeof t?this.saturate(-t):this}greyscale(){return this.saturate(-100)}lighten(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(e,n,p(o+r/100));return t(this,{r:s,g:h,b:i}),this}darken(t){return"number"==typeof t?this.lighten(-t):this}spin(r){if("number"!=typeof r)return this;const{h:e,s:n,l:o}=this.toHsl(),{r:s,g:h,b:i}=y(p((360*e+r)%360/360),n,o);return t(this,{r:s,g:h,b:i}),this}clone(){return new _(this)}toString(t){const{format:r}=this;return"hex"===r?this.toHexString(t):"hsl"===r?this.toHslString():"hwb"===r?this.toHwbString():this.toRgbString()}}t(_,{ANGLES:"deg|rad|grad|turn",CSS_ANGLE:i,CSS_INTEGER:"[-\\+]?\\d+%?",CSS_NUMBER:"[-\\+]?\\d*\\.\\d+%?",CSS_UNIT:a,CSS_UNIT2:u,PERMISSIVE_MATCH:c,matchers:g,isOnePointZero:b,isPercentage:f,isValidCSSUnit:d,isColorName:m,pad2:v,clamp01:p,bound01:x,boundAlpha:S,getRGBFromName:A,convertHexToDecimal:w,convertDecimalToHex:$,rgbToHsl:R,rgbToHex:N,rgbToHsv:C,rgbToHwb:F,rgbaToHex:I,hslToRgb:y,hsvToRgb:E,hueToRgb:T,hwbToRgb:M,parseIntFromHex:H,stringInputToObject:j,inputToRGB:k,roundPart:r,getElementStyle:n,setElementStyle:o,ObjectAssign:t});class P{constructor(...t){let e=0,n=12,o=10,s=[.5];if(3===t.length)[e,n,o]=t;else if(2===t.length&&([n,o]=t,[n,o].some(t=>t<1)))throw TypeError("ColorPalette: both arguments must be higher than 0.");const h=[],i=360/n,a=r((o-(o%2?1:0))/2),u=[[1,2,3],[4,5],[6,7],[8,9],[10,11],[12,13]],l=u.find(t=>t.includes(o)),c=l?[.25,.2,.15,.11,.09,.075][u.indexOf(l)]:100/(o+(o%2?0:1))/100;for(let t=1;t<a+1;t+=1)s=[...s,.5+c*t];for(let t=1;t<o-a;t+=1)s=[.5-c*t,...s];for(let t=0;t<n;t+=1){const r=(e+t*i)%360/360;s.forEach(t=>{h.push(new _({h:r,s:1,l:t}))})}this.hue=e,this.hueSteps=n,this.lightSteps=o,this.colors=h}}return t(P,{Color:_}),P}));
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* ColorPickerElement v1.0.
|
2
|
+
* ColorPickerElement v1.0.1 (http://thednp.github.io/color-picker)
|
3
3
|
* Copyright 2022 © thednp
|
4
4
|
* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
|
5
5
|
*/
|
@@ -750,7 +750,7 @@ function inputToRGB(input) {
|
|
750
750
|
format = 'hwb';
|
751
751
|
}
|
752
752
|
if (isValidCSSUnit(color.a)) {
|
753
|
-
a = color.a;
|
753
|
+
a = color.a;
|
754
754
|
a = isPercentage(`${a}`) || parseFloat(a) > 1 ? bound01(a, 100) : a;
|
755
755
|
}
|
756
756
|
}
|
@@ -761,9 +761,6 @@ function inputToRGB(input) {
|
|
761
761
|
return {
|
762
762
|
ok,
|
763
763
|
format,
|
764
|
-
// r: Math.min(255, Math.max(rgb.r, 0)),
|
765
|
-
// g: Math.min(255, Math.max(rgb.g, 0)),
|
766
|
-
// b: Math.min(255, Math.max(rgb.b, 0)),
|
767
764
|
r: rgb.r,
|
768
765
|
g: rgb.g,
|
769
766
|
b: rgb.b,
|
@@ -1227,12 +1224,12 @@ const EventRegistry = {};
|
|
1227
1224
|
*/
|
1228
1225
|
function globalListener(e) {
|
1229
1226
|
const that = this;
|
1230
|
-
const { type
|
1227
|
+
const { type } = e;
|
1231
1228
|
|
1232
1229
|
[...EventRegistry[type]].forEach((elementsMap) => {
|
1233
1230
|
const [element, listenersMap] = elementsMap;
|
1234
1231
|
/* istanbul ignore else */
|
1235
|
-
if (
|
1232
|
+
if (element === that) {
|
1236
1233
|
[...listenersMap].forEach((listenerMap) => {
|
1237
1234
|
const [listener, options] = listenerMap;
|
1238
1235
|
listener.apply(element, [e]);
|
@@ -2373,9 +2370,7 @@ function setMarkup(self) {
|
|
2373
2370
|
setAttribute(input, tabIndex, '-1');
|
2374
2371
|
}
|
2375
2372
|
|
2376
|
-
var version = "1.0.
|
2377
|
-
|
2378
|
-
// @ts-ignore
|
2373
|
+
var version = "1.0.1";
|
2379
2374
|
|
2380
2375
|
const Version = version;
|
2381
2376
|
|
@@ -2430,15 +2425,12 @@ function toggleEventsOnShown(self, action) {
|
|
2430
2425
|
const fn = action ? addListener : removeListener;
|
2431
2426
|
const { input, colorMenu, parent } = self;
|
2432
2427
|
const doc = getDocument(input);
|
2433
|
-
// const win = getWindow(input);
|
2434
2428
|
const win = doc.defaultView;
|
2435
2429
|
|
2436
2430
|
fn(self.controls, pointerdownEvent, self.pointerDown);
|
2437
2431
|
self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
|
2438
2432
|
|
2439
|
-
// @ts-ignore -- this is `Window`
|
2440
2433
|
fn(win, scrollEvent, self.handleScroll);
|
2441
|
-
// @ts-ignore -- this is `Window`
|
2442
2434
|
fn(win, resizeEvent, self.update);
|
2443
2435
|
|
2444
2436
|
[input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
|
@@ -2532,7 +2524,6 @@ class ColorPicker {
|
|
2532
2524
|
constructor(target, config) {
|
2533
2525
|
const self = this;
|
2534
2526
|
/** @type {HTMLInputElement} */
|
2535
|
-
// @ts-ignore
|
2536
2527
|
const input = querySelector(target);
|
2537
2528
|
|
2538
2529
|
// invalidate
|
@@ -2543,7 +2534,6 @@ class ColorPicker {
|
|
2543
2534
|
if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
|
2544
2535
|
|
2545
2536
|
/** @type {HTMLElement} */
|
2546
|
-
// @ts-ignore
|
2547
2537
|
self.parent = parent;
|
2548
2538
|
|
2549
2539
|
/** @type {number} */
|
@@ -2637,26 +2627,20 @@ class ColorPicker {
|
|
2637
2627
|
const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
|
2638
2628
|
// set main elements
|
2639
2629
|
/** @type {HTMLElement} */
|
2640
|
-
// @ts-ignore
|
2641
2630
|
self.pickerToggle = querySelector('.picker-toggle', parent);
|
2642
2631
|
/** @type {HTMLElement} */
|
2643
|
-
// @ts-ignore
|
2644
2632
|
self.menuToggle = querySelector('.menu-toggle', parent);
|
2645
2633
|
/** @type {HTMLElement} */
|
2646
|
-
// @ts-ignore
|
2647
2634
|
self.colorPicker = colorPicker;
|
2648
2635
|
/** @type {HTMLElement} */
|
2649
|
-
// @ts-ignore
|
2650
2636
|
self.colorMenu = colorMenu;
|
2651
2637
|
/** @type {HTMLInputElement[]} */
|
2652
|
-
// @ts-ignore
|
2653
2638
|
self.inputs = [...getElementsByClassName('color-input', parent)];
|
2654
2639
|
const [controls] = getElementsByClassName('color-controls', parent);
|
2655
2640
|
self.controls = controls;
|
2656
2641
|
/** @type {(HTMLElement | Element)[]} */
|
2657
2642
|
self.controlKnobs = [...getElementsByClassName('knob', controls)];
|
2658
2643
|
/** @type {(HTMLElement)[]} */
|
2659
|
-
// @ts-ignore
|
2660
2644
|
self.visuals = [...getElementsByClassName('visual-control', controls)];
|
2661
2645
|
|
2662
2646
|
// update colour picker controls, inputs and visuals
|
@@ -2809,7 +2793,6 @@ class ColorPicker {
|
|
2809
2793
|
* @this {ColorPicker}
|
2810
2794
|
*/
|
2811
2795
|
handleFocusOut({ relatedTarget }) {
|
2812
|
-
// @ts-ignore
|
2813
2796
|
if (relatedTarget && !this.parent.contains(relatedTarget)) {
|
2814
2797
|
this.hide(true);
|
2815
2798
|
}
|
@@ -2853,7 +2836,6 @@ class ColorPicker {
|
|
2853
2836
|
*/
|
2854
2837
|
menuKeyHandler(e) {
|
2855
2838
|
const { target, code } = e;
|
2856
|
-
// @ts-ignore
|
2857
2839
|
const { previousElementSibling, nextElementSibling, parentElement } = target;
|
2858
2840
|
const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
|
2859
2841
|
const allSiblings = [...parentElement.children];
|
@@ -2892,20 +2874,20 @@ class ColorPicker {
|
|
2892
2874
|
|
2893
2875
|
/**
|
2894
2876
|
* The `ColorPicker` click event listener for the colour menu presets / defaults.
|
2895
|
-
* @param {
|
2877
|
+
* @param {Event} e
|
2896
2878
|
* @this {ColorPicker}
|
2897
2879
|
*/
|
2898
2880
|
menuClickHandler(e) {
|
2899
2881
|
const self = this;
|
2900
|
-
/** @type {*} */
|
2901
2882
|
const { target } = e;
|
2902
2883
|
const { colorMenu } = self;
|
2903
2884
|
const newOption = (getAttribute(target, 'data-value') || '').trim();
|
2904
2885
|
// invalidate for targets other than color options
|
2905
2886
|
if (!newOption.length) return;
|
2906
2887
|
const currentActive = querySelector('li.active', colorMenu);
|
2907
|
-
let newColor =
|
2908
|
-
newColor =
|
2888
|
+
let newColor = newOption;
|
2889
|
+
newColor = nonColors.includes(newColor) ? 'white' : newColor;
|
2890
|
+
newColor = newColor === 'transparent' ? 'rgba(0,0,0,0)' : newColor;
|
2909
2891
|
|
2910
2892
|
const {
|
2911
2893
|
r, g, b, a,
|
@@ -3691,13 +3673,10 @@ class ColorPickerElement extends HTMLElement {
|
|
3691
3673
|
self.append(input);
|
3692
3674
|
|
3693
3675
|
/** @type {HTMLInputElement} */
|
3694
|
-
// @ts-ignore - `HTMLInputElement` is `HTMLElement`
|
3695
3676
|
self.input = input;
|
3696
3677
|
|
3697
|
-
// @ts-ignore - `HTMLInputElement` is `HTMLElement`
|
3698
3678
|
self.colorPicker = new ColorPicker(input);
|
3699
3679
|
|
3700
|
-
// @ts-ignore - `shadowRoot` is defined in the constructor
|
3701
3680
|
self.shadowRoot.append(createElement('slot'));
|
3702
3681
|
|
3703
3682
|
// remove Attributes
|
@@ -3729,7 +3708,7 @@ class ColorPickerElement extends HTMLElement {
|
|
3729
3708
|
ObjectAssign(ColorPickerElement, {
|
3730
3709
|
Color,
|
3731
3710
|
ColorPicker,
|
3732
|
-
ColorPalette,
|
3711
|
+
ColorPalette,
|
3733
3712
|
getInstance: ColorPicker.getInstance,
|
3734
3713
|
Version,
|
3735
3714
|
});
|