yk-color-picker 1.0.0-alpha

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Yassine KLILICH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,354 @@
+# YKColorPicker
+
+[![Generic badge](https://img.shields.io/badge/npm%20package-v1.0.0%2D%2Dalpha-3FB911.svg)](https://www.npmjs.com/package/ngx-interpolation)
+
+YKColorPicker is a flexible color picker library designed with a strong focus on user experience (UX), including full keyboard interaction support. It provides a seamless way to integrate a customizable color picker into your project, offering various color models such as RGB, HSV, HSL, and HEX.
+
+## Table of Contents
+
+1. [Features](#features)
+2. [Installation](#installation)
+3. [Usage](#usage)
+4. [Methods](#methods)
+   - [open()](#open)
+   - [close()](#close)
+   - [getRGB()](#getrgb)
+   - [getHSV()](#gethsv)
+   - [getHSL()](#gethsl)
+   - [getHEX()](#gethex)
+   - [getColor()](#getcolor)
+   - [setColor(value: string)](#setcolorvalue-string)
+   - [updateOptions(options: YKColorPickerOptions)](#updateoptionsoptions-ykcolorpickeroptions)
+5. [Options](#options)
+6. [Events](#events)
+7. [Example](#example)
+8. [References](#references)
+   - [YKColorPickerPosition](#ykcolorpickerposition)
+   - [YKColorPickerMode](#ykcolorpickermode)
+   - [YKColorPickerOptions](#ykcolorpickeroptions)
+   - [YKColorPickerPositionFallback](#ykcolorpickerpositionfallback)
+9. [License](#license)
+
+## [Features](#features)
+
+- **Multiple Color Formats**: Supports RGB, HSV, HSL, and HEX color formats.
+- **Customizable Position**: The color picker can be positioned relative to a target element (top, bottom, left, right) with fallback positions.
+- **Theme Support**: Light and dark themes are available.
+- **Event Handlers**: Provides various event handlers for initialization, opening, closing, input changes, and more.
+- **Copy to Clipboard**: Allows users to copy the selected color to the clipboard.
+- **Keyboard Interaction**: Full keyboard interaction support for accessibility and ease of use.
+
+## [Installation](#installation)
+
+To install YKColorPicker, you can use npm:
+
+```sh
+npm install yk-color-picker
+```
+
+## [Usage](#usage)
+
+Simply import `YKColorPicker` class and apply it:
+
+```javascript
+import { YKColorPicker } from "yk-color-picker";
+
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+```
+
+## [Methods](#methods)
+
+### open()
+
+Opens the color picker.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Open the color picker
+colorPicker.open();
+```
+
+### close()
+
+Closes the color picker.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Open the color picker
+colorPicker.open();
+
+// Close the color picker after 3 seconds
+setTimeout(() => {
+  colorPicker.close();
+}, 3000);
+```
+
+### getRGB()
+
+Returns the current color in RGB format.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Get the current color in RGB format
+const rgbColor = colorPicker.getRGB();
+console.log(rgbColor); // { r: 255, g: 0, b: 0, a: 1 }
+```
+
+### getHSV()
+
+Returns the current color in HSV format.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Get the current color in HSV format
+const hsvColor = colorPicker.getHSV();
+console.log(hsvColor); // { h: 0, s: 100, v: 100, a: 1 }
+```
+
+### getHSL()
+
+Returns the current color in HSL format.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Get the current color in HSL format
+const hslColor = colorPicker.getHSL();
+console.log(hslColor); // { h: 0, s: 100, l: 50, a: 1 }
+```
+
+### getHEX()
+
+Returns the current color in HEX format.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Get the current color in HEX format
+const hexColor = colorPicker.getHEX();
+console.log(hexColor); // "#ff0000"
+```
+
+### getColor()
+
+Returns the current color in the selected representation format.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  representation: YKColorPickerMode.RGB, // Set representation to RGB
+  color: "red",
+});
+
+// Get the current color in the selected representation format
+const currentColor = colorPicker.getColor();
+console.log(currentColor); // { r: 255, g: 0, b: 0, a: 1 }
+```
+
+### setColor(value: string)
+
+Sets the color picker to the specified color.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Set the color to green
+colorPicker.setColor("#00FF00");
+
+// Verify the color change
+console.log(colorPicker.getHEX()); // "#00ff00"
+```
+
+### updateOptions(options: YKColorPickerOptions)
+
+Updates the color picker options dynamically.
+
+Example:
+
+```javascript
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  color: "red",
+});
+
+// Update options to change the theme and representation
+colorPicker.updateOptions({
+  theme: "dark",
+  representation: YKColorPickerMode.HEX,
+  color: "#0000FF", // Change color to blue
+});
+
+// Verify the updated options
+console.log(colorPicker.getHEX()); // "#0000ff"
+```
+
+### Options
+
+- **target**: The element or selector that triggers the color picker.
+- **container**: The container element or selector where the color picker will be appended. If not defined, the color picker will be appended to the `<body>` by default.
+- **position**: The preferred position of the color picker relative to the target. Use `YKColorPickerPosition` to set the position (e.g., `YKColorPickerPosition.TOP`, `YKColorPickerPosition.BOTTOM`, `YKColorPickerPosition.LEFT`, `YKColorPickerPosition.RIGHT`).
+- **positionFallback**: The fallback positions if the preferred position is not available. Use a combination of `b` (bottom), `t` (top), `r` (right), and `l` (left) to define the fallback order (e.g., `'btrl'` means try bottom first, then top, then right, then left).
+- **representation**: The initial color representation format. Use `YKColorPickerMode` to set the representation (e.g., `YKColorPickerMode.RGB`, `YKColorPickerMode.HSV`, `YKColorPickerMode.HSL`, `YKColorPickerMode.HEX`).
+- **color**: The initial color.
+- **closeOnScroll**: Whether to close the color picker on scroll.
+- **closeOnResize**: Whether to close the color picker on window resize.
+- **theme**: The theme of the color picker (light or dark).
+- **onInit**: Callback function triggered when the color picker is initialized.
+- **onOpen**: Callback function triggered when the color picker is opened.
+- **onClose**: Callback function triggered when the color picker is closed.
+- **onInput**: Callback function triggered when the color input changes.
+- **onChange**: Callback function triggered when the color changes.
+- **onCopy**: Callback function triggered when the color is copied to the clipboard.
+- **onRepresentationChange**: Callback function triggered when the color representation changes.
+- **onTargetChange**: Callback function triggered when the target element changes.
+- **onContainerChange**: Callback function triggered when the container changes.
+
+### Events
+
+- **onInit**: Triggered when the color picker is initialized.
+- **onOpen**: Triggered when the color picker is opened.
+- **onClose**: Triggered when the color picker is closed.
+- **onInput**: Triggered when the color input changes.
+- **onChange**: Triggered when the color changes.
+- **onCopy**: Triggered when the color is copied to the clipboard.
+- **onRepresentationChange**: Triggered when the color representation changes.
+- **onTargetChange**: Triggered when the target element changes.
+- **onContainerChange**: Triggered when the container changes.
+
+## Example
+
+```html
+<button id="color-picker-trigger">Open Color Picker</button>
+
+<script>
+  const colorPicker = new YKColorPicker({
+    target: document.getElementById("color-picker-trigger"),
+    container: "#container",
+    position: YKColorPickerPosition.BOTTOM, // Use YKColorPickerPosition to set the position
+    positionFallback: "btrl", // Fallback positions: 'b' for bottom, 't' for top, 'r' for right, 'l' for left
+    representation: YKColorPickerMode.RGB, // Use YKColorPickerMode to set the representation
+    color: "red",
+    closeOnScroll: true,
+    closeOnResize: false,
+    theme: "light",
+    onInit: (instance) => {
+      console.log("Color picker initialized", instance);
+    },
+    onOpen: (instance) => {
+      console.log("Color picker opened", instance);
+    },
+    onClose: (instance) => {
+      console.log("Color picker closed", instance);
+    },
+    onInput: (instance) => {
+      console.log("Color input changed", instance.getColor());
+    },
+    onChange: (instance) => {
+      console.log("Color changed", instance.getColor());
+    },
+    onCopy: (instance) => {
+      console.log("Color copied to clipboard", instance.getColor());
+    },
+    onRepresentationChange: (instance) => {
+      console.log("Color representation changed", instance.getColor());
+    },
+    onTargetChange: (instance, previousTarget) => {
+      console.log("Target changed", instance, previousTarget);
+    },
+    onContainerChange: (instance, previousParent) => {
+      console.log("Container changed", instance, previousParent);
+    },
+  });
+</script>
+```
+
+## References
+
+### YKColorPickerPosition:
+
+An enumeration defining the possible positions for the color picker relative to the target element. Available values:
+
+- `TOP` (`t`): Positions the picker above the target element.
+- `BOTTOM` (`b`): Positions the picker below the target element.
+- `LEFT` (`l`): Positions the picker to the left of the target element.
+- `RIGHT` (`r`): Positions the picker to the right of the target element.
+
+```javascript
+import { YKColorPicker, YKColorPickerPosition } from "yk-color-picker";
+
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  position: YKColorPickerPosition.BOTTOM, // Positioning the picker below the target
+  color: "#ff0000",
+});
+```
+
+### YKColorPickerMode:
+
+Specifies the available color representation formats, such as RGB, HSV, HSL, and HEX.
+
+```javascript
+import { YKColorPicker, YKColorPickerMode } from "yk-color-picker";
+
+const colorPicker = new YKColorPicker({
+  target: document.getElementById("color-picker-trigger"),
+  representation: YKColorPickerMode.RGB, // Using RGB color format
+  color: "#00ff00",
+});
+```
+
+### YKColorPickerOptions:
+
+An interface defining configuration options for the color picker.
+
+### YKColorPickerPositionFallback:
+
+A type that defines fallback position strategies when the preferred position is unavailable. Examples include `"btrl"`, `"tblr"`, and `"lrtb"`.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

package/dist/esm2020/style.css

@@ -0,0 +1 @@
+:root{--yk-box-shadow-color: rgba(0, 0, 0, .2);--yk-border-color: thin solid white;--yk-box-shadow: 0 0 0 1px black;--yk-slider-box-shadow: 0px 0px 6px #777;--yk-hue-gradient: linear-gradient( 90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red );--yk-opacity-gradient: linear-gradient(90deg, transparent, red);--yk-light-bg-color: #f7f7f7;--yk-light-thumb-bg-color: #fff;--yk-light-thumb-focus-outline: #383838;--yk-light-input-bg-color: #fcfcfc;--yk-light-input-text-color: #3b3b3b;--yk-light-input-border-color: #d6d6d6;--yk-light-input-focus-border-color: #467dff;--yk-light-label-color: #3b3b3b;--yk-light-preview-stroke: #c8c8c8;--yk-light-icon-fill: #696969;--yk-light-icon-hover-bg-color: #dfdfdf;--yk-dark-bg-color: #383838;--yk-dark-thumb-bg-color: #323232;--yk-dark-thumb-focus-outline: #fff;--yk-dark-input-bg-color: #383838;--yk-dark-input-text-color: #d6d6d6;--yk-dark-input-border-color: #5a5a5a;--yk-dark-input-focus-border-color: #0e639c;--yk-dark-label-color: #d6d6d6;--yk-dark-preview-stroke: gray;--yk-dark-icon-fill: #bcbcbc;--yk-dark-icon-hover-bg-color: #4e4e4e}.yk-overlay-wrapper{touch-action:none;position:fixed;z-index:1;transition:opacity .3s,visibility .3s;opacity:0;visibility:hidden}.yk-overlay-wrapper--open{transition:opacity .3s;opacity:1;visibility:visible}.yk-overlay-wrapper:not(.yk-overlay-wrapper--static){top:4px;left:4px}.yk-overlay-wrapper.yk-overlay-wrapper--static{position:static}.yk-wrapper{box-shadow:var(--yk-box-shadow-color) 0 4px 10px;display:inline-block;width:280px;position:relative;border-radius:6px;font-family:sans-serif;-moz-user-select:none;-webkit-user-select:none;user-select:none}.yk-palette{height:150px;border-top-left-radius:6px;border-top-right-radius:6px;background-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,1) 100%),linear-gradient(90deg,#fff,red)}.yk-cursor{position:absolute;top:-6px;left:-6px;width:10px;height:10px;border-radius:50%;border:var(--yk-border-color);box-shadow:var(--yk-box-shadow)}.yk-color-settings{display:flex;align-items:center;padding:12px 14px 12px 12px;flex-wrap:wrap;row-gap:12px}.yk-sliders{flex-grow:1;display:flex;row-gap:12px;flex-direction:column}.yk-hue-slider-wrapper,.yk-opacity-slider-wrapper{position:relative;-moz-user-select:none;-webkit-user-select:none;user-select:none;flex-grow:1}.yk-opacity-slider-wrapper{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMSwwSDJWMUgxVjBaTTAsMUgxVjJIMFYxWiIvPjxwYXRoIGZpbGw9IiNEQkRCREIiIGQ9Ik0wLDBIMVYxSDBWMFpNMSwxSDJWMkgxVjFaIi8+PC9zdmc+);background-size:8px;border-radius:2px;height:10px}.yk-hue-slider{width:100%;height:10px;border-radius:2px;background-image:var(--yk-hue-gradient)}.yk-opacity-color{background-image:var(--yk-opacity-gradient);position:absolute;width:100%;height:100%;border-radius:2px}.yk-hue-slider-thumb,.yk-opacity-slider-thumb{position:absolute;width:16px;height:16px;border-radius:50px;box-shadow:var(--yk-slider-box-shadow);top:50%;transform:translate(-8px,-50%);outline:none}.yk-hue-slider-thumb:focus,.yk-opacity-slider-thumb:focus{outline:1px solid}.yk-color-preview-wrapper{margin:0 16px 0 10px}.yk-color-preview{position:absolute;width:100%;height:100%}.yk-color-model-wrapper{display:flex;flex-basis:100%;position:relative;align-items:center;column-gap:6px}.yk-color-model{display:flex;flex-direction:column;align-items:center;row-gap:6px;flex-grow:1}.yk-hex-input,.yk-input-wrapper{display:grid;width:100%;justify-items:center;row-gap:4px}.yk-input-wrapper{grid-template-columns:1fr 1fr 1fr 1fr}.yk-rgb-input,.yk-hsv-input,.yk-hsl-input{display:grid;width:100%;justify-items:center;row-gap:4px}.yk-rgb-input,.yk-hsv-input,.yk-hsl-input{grid-template-columns:1fr 1fr 1fr 1fr}.yk-hex-input{grid-template-columns:1fr}.yk-color-input{font-family:inherit;height:20px;outline:none;border:1px solid;font-size:12px;text-align:center;width:42px;border-radius:4px}.yk-hex-input .yk-color-input{width:180px}.yk-color-model-label{font-size:12px}.yk-clipboard-color,.yk-color-model-switch{width:16px;height:16px;background-position:center;background-repeat:no-repeat;padding:5px;border-radius:4px;cursor:pointer;box-sizing:content-box;margin:0;background-color:transparent;border:none;outline:none}.yk-overlay-wrapper--light .yk-wrapper{background-color:var(--yk-light-bg-color)}.yk-overlay-wrapper--light :where(.yk-hue-slider-thumb,.yk-opacity-slider-thumb){background-color:var(--yk-light-thumb-bg-color)}.yk-overlay-wrapper--light .yk-hue-slider-thumb:focus,.yk-overlay-wrapper--light .yk-opacity-slider-thumb:focus{outline-color:var(--yk-light-thumb-focus-outline)}.yk-overlay-wrapper--light .yk-color-input{background-color:var(--yk-light-input-bg-color);color:var(--yk-light-input-text-color);border-color:var(--yk-light-input-border-color)}.yk-overlay-wrapper--light .yk-color-input:focus{border-color:var(--yk-light-input-focus-border-color)}.yk-overlay-wrapper--light .yk-color-model-label{color:var(--yk-light-label-color)}.yk-overlay-wrapper--light .yk-preview-stroke{stroke:var(--yk-light-preview-stroke)}.yk-overlay-wrapper--light :where(.yk-clipboard-color svg,.yk-color-model-switch svg){fill:var(--yk-light-icon-fill)}.yk-overlay-wrapper--light :where(.yk-clipboard-color:hover,.yk-clipboard-color:focus,.yk-color-model-switch:hover,.yk-color-model-switch:focus){background-color:var(--yk-light-icon-hover-bg-color)}.yk-overlay-wrapper--dark .yk-wrapper{background-color:var(--yk-dark-bg-color)}.yk-overlay-wrapper--dark :where(.yk-hue-slider-thumb,.yk-opacity-slider-thumb){background-color:var(--yk-dark-thumb-bg-color)}.yk-overlay-wrapper--dark .yk-hue-slider-thumb:focus,.yk-overlay-wrapper--dark .yk-opacity-slider-thumb:focus{outline-color:var(--yk-dark-thumb-focus-outline)}.yk-overlay-wrapper--dark .yk-color-input{background-color:var(--yk-dark-input-bg-color);color:var(--yk-dark-input-text-color);border-color:var(--yk-dark-input-border-color)}.yk-overlay-wrapper--dark .yk-color-input:focus{border-color:var(--yk-dark-input-focus-border-color)}.yk-overlay-wrapper--dark .yk-color-model-label{color:var(--yk-dark-label-color)}.yk-overlay-wrapper--dark .yk-preview-stroke{stroke:var(--yk-dark-preview-stroke)}.yk-overlay-wrapper--dark :where(.yk-clipboard-color svg,.yk-color-model-switch svg){fill:var(--yk-dark-icon-fill)}.yk-overlay-wrapper--dark :where(.yk-clipboard-color:hover,.yk-clipboard-color:focus,.yk-color-model-switch:hover,.yk-color-model-switch:focus){background-color:var(--yk-dark-icon-hover-bg-color)}