@thednp/color-picker 0.0.1-alpha1 → 0.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.
Files changed (41) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +63 -26
  3. package/dist/css/color-picker.css +504 -337
  4. package/dist/css/color-picker.min.css +2 -0
  5. package/dist/css/color-picker.rtl.css +529 -0
  6. package/dist/css/color-picker.rtl.min.css +2 -0
  7. package/dist/js/color-picker-element-esm.js +3851 -2
  8. package/dist/js/color-picker-element-esm.min.js +2 -0
  9. package/dist/js/color-picker-element.js +2086 -1278
  10. package/dist/js/color-picker-element.min.js +2 -2
  11. package/dist/js/color-picker-esm.js +3742 -0
  12. package/dist/js/color-picker-esm.min.js +2 -0
  13. package/dist/js/color-picker.js +2030 -1286
  14. package/dist/js/color-picker.min.js +2 -2
  15. package/package.json +18 -9
  16. package/src/js/color-palette.js +71 -0
  17. package/src/js/color-picker-element.js +62 -16
  18. package/src/js/color-picker.js +734 -618
  19. package/src/js/color.js +621 -358
  20. package/src/js/index.js +0 -9
  21. package/src/js/util/colorNames.js +2 -152
  22. package/src/js/util/colorPickerLabels.js +22 -0
  23. package/src/js/util/getColorControls.js +103 -0
  24. package/src/js/util/getColorForm.js +26 -19
  25. package/src/js/util/getColorMenu.js +88 -0
  26. package/src/js/util/isValidJSON.js +13 -0
  27. package/src/js/util/nonColors.js +5 -0
  28. package/src/js/util/roundPart.js +9 -0
  29. package/src/js/util/setCSSProperties.js +12 -0
  30. package/src/js/util/tabindex.js +3 -0
  31. package/src/js/util/templates.js +1 -0
  32. package/src/scss/color-picker.rtl.scss +23 -0
  33. package/src/scss/color-picker.scss +449 -0
  34. package/types/cp.d.ts +263 -162
  35. package/types/index.d.ts +9 -2
  36. package/types/source/source.ts +2 -1
  37. package/types/source/types.d.ts +28 -5
  38. package/dist/js/color-picker.esm.js +0 -2998
  39. package/dist/js/color-picker.esm.min.js +0 -2
  40. package/src/js/util/getColorControl.js +0 -49
  41. package/src/js/util/init.js +0 -14
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2016 thednp
3
+ Copyright (c) 2022 thednp
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,23 +1,36 @@
1
1
  # ColorPicker Web Component
2
- The feature rich color picker component for the modern web built with TypeScript definition, WAI-ARIA compliant.
2
+ 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`.
3
+
4
+ [![image](./docs/img/color-picker.png)](http://thednp.github.io/color-picker)
3
5
 
4
6
  [![NPM Version](https://img.shields.io/npm/v/@thednp/color-picker.svg?style=flat-square)](https://www.npmjs.com/package/@thednp/color-picker)
5
7
  [![NPM Downloads](https://img.shields.io/npm/dm/@thednp/color-picker.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@thednp/color-picker)
6
8
  [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/color-picker/badge)](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
7
9
 
8
- # Demo
9
- Download the package and check the demo folder, or check it online [here](http://thednp.github.io/color-picker).
10
+ **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!
11
+
10
12
 
11
13
  # Highlights
12
- * Accessibility Focus
14
+ * Accessibility Focus for WAI-ARIA compliance
13
15
  * ES6+ sources with TypeScript definitions
14
- * SCSS sources
15
- * very light footprint, `5kb` in size when minified
16
- * 3 sets of positions top (main), left or right
17
- * provides a set of options for JavaScript initialization
18
- * DATA API allows you to automatically initiate without JS invocation
19
- * modern browsers supported and semi-modern alike with a special polyfill for IE10+ provided
20
-
16
+ * Framework agnostic and flexible design
17
+ * Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
18
+ * Supports keyboard and touch events
19
+ * Automatic repositioning of the popup dropdown on show / window scroll
20
+ * SCSS sources with minimal style required
21
+ * Right To Left Languages Supported
22
+ * light footprint, `10kb` in size when minified and gZipped
23
+
24
+ # Wiki
25
+ For an in depth guide on all things **ColorPicker**, check out the wiki pages:
26
+ * [Home](https://github.com/thednp/color-picker/wiki) - the **ColorPicker** wiki home.
27
+ * [NPM](https://github.com/thednp/color-picker/wiki/NPM) - quick installation guide.
28
+ * [CDN Link](https://github.com/thednp/color-picker/wiki/CDN) - quick implementation guide.
29
+ * [Usage](https://github.com/thednp/color-picker/wiki/Usage) - an in-depth browser usage.
30
+ * [ES6+](https://github.com/thednp/color-picker/wiki/ES6) - your usual quick ES6+ guide.
31
+ * [Node.js](https://github.com/thednp/color-picker/wiki/Node.js) - is this a thing?
32
+
33
+ **Note** - the wiki pages are still under construction.
21
34
 
22
35
  # NPM
23
36
  You can install **ColorPicker** through NPM:
@@ -41,6 +54,10 @@ OR use the `ColorPickerElement` custom element:
41
54
  ```html
42
55
  <script src="../assets/js/color-picker-element.js"></script>
43
56
  ```
57
+ OR use the `ColorPickerElement` custom element ESM module:
58
+ ```html
59
+ <script type="module" src="../assets/js/color-picker-element-esm.js"></script>
60
+ ```
44
61
 
45
62
  If you don't want to use the custom element, you can initialize the function for your elements at the end of your `<body>` tag
46
63
  ```html
@@ -49,41 +66,61 @@ var myPicker = new ColorPicker('input.SELECTOR');
49
66
  </script>
50
67
  ```
51
68
 
52
- To use the DATA-API, you need to provide the `data-function="color-picker"` attribute to your target, like so:
69
+ To use the DATA-API, you can provide for instance the `data-format="hex"`, and other specific attributes like so:
53
70
  ```html
54
71
  <label for="myPicker">Color Label</label>
55
72
  <div class="color-picker">
56
- <input id="myPicker" name="myPicker" class="color-preview" value="#069" data-function="color-picker">
73
+ <input id="myPicker" name="myPicker" data-function="color-picker" data-format="hex" data-color-presets="red,green,blue" class="color-preview" value="#069">
57
74
  </div>
58
75
  ```
76
+ The `data-function="color-picker"` attribute is useful for mass initialization, [check this usage section of the wiki](https://github.com/thednp/color-picker/wiki/Usage#initialize-multiple-targets).
59
77
 
60
- Alternatively you can use the `ColorPickerElement` custom element:
78
+ Alternatively you can use the `ColorPickerElement` custom element, the `data-function="color-picker"` attribute is no longer required:
61
79
  ```html
62
- <label for="myPicker">Color Label</label>
63
- <color-picker>
80
+ <label for="myPicker">Colour Field Label</label>
81
+ <color-picker data-format="rgb" data-color-keywords="#069:default,#111:revert">
64
82
  <input id="myPicker" name="myPicker" class="color-preview" value="#069">
65
83
  </color-picker>
66
84
 
67
- <script type="module" src="../path-to/color-picker-element.js"></script>
85
+ <script type="module" src="../path-to/color-picker-element-esm.js"></script>
68
86
  ```
69
- In this case the `data-function="color-picker"` attribute is no longer required.
70
-
71
- Other initialization and markup options apply, explained in [the demo](http://thednp.github.io/color-picker/).
87
+ As shown in the above example, all DATA API attributes for instance configuration are to be used on your **custom element**.
72
88
 
73
89
 
74
- # ES6+
90
+ # Initialize INPUT
75
91
  ```javascript
76
- import ColorPicker from '@thednp/color-picker'
92
+ import ColorPicker from '@thednp/color-picker';
77
93
 
78
- let myPicker = new ColorPicker('#myPicker')
94
+ let myPicker = new ColorPicker('#myPicker');
95
+ ```
96
+
97
+ # Initialize Custom Element
98
+ ```javascript
99
+ import ColorPickerElement from '@thednp/color-picker/src/color-picker-element';
100
+
101
+ // initialize the CustomElement
102
+ const myPicker = new ColorPickerElement();
103
+ // set DATA API
104
+ myPicker.setAttribute('data-format', 'hsl');
105
+ myPicker.setAttribute('data-id', 'ADD_YOUR_UNIQUE_ID');
106
+ myPicker.setAttribute('data-value', 'rgb(150 0 150 / 0.8)');
107
+ myPicker.setAttribute('data-label', 'Color Picker Element Label');
108
+ myPicker.setAttribute('data-color-keywords', 'false');
109
+
110
+ // append, connectedCallback() is triggered
111
+ document.body.append(myPicker);
79
112
  ```
113
+ Other configuration options apply, see [the API Guide](https://github.com/thednp/color-picker/wiki/API).
80
114
 
81
115
 
82
116
  # Thanks
83
117
  * Dimitris Grammatikogiannis for his [initial project](https://codepen.io/dgrammatiko/pen/zLvXwR) as well as testing and contributions
84
118
  * Serhii Kulykov for his [Vanilla Colorful](https://github.com/web-padawan/vanilla-colorful)
85
- * @see https://www.eyecon.ro/colorpicker/
86
- * @see http://www.dematte.at/colorPicker/
119
+ * Brian Grinstead for his [TinyColor](https://github.com/bgrins/TinyColor)
120
+ * Jonathan Neal for his [convert-colors](https://github.com/jonathantneal/convert-colors)
121
+ * Peter Dematté for his [colorPicker](http://www.dematte.at/colorPicker/)
122
+ * Ștefan Petre at eyecon for his [colorPicker](https://www.eyecon.ro/colorpicker/)
123
+ * Brian Teeman for his [patience](https://github.com/joomla/joomla-cms/pull/35639)
87
124
 
88
125
  # License
89
- [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE)
126
+ **ColorPicker** is released under the [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE).