@spectrum-web-components/reactive-controllers 1.4.0-beta.0 → 1.4.0
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/reactive-controllers",
|
|
3
|
-
"version": "1.4.0
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"reactive controllers"
|
|
85
85
|
],
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@spectrum-web-components/progress-circle": "1.4.0
|
|
87
|
+
"@spectrum-web-components/progress-circle": "1.4.0",
|
|
88
88
|
"colorjs.io": "^0.5.2",
|
|
89
89
|
"lit": "^2.5.0 || ^3.1.3"
|
|
90
90
|
},
|
package/src/ColorController.d.ts
CHANGED
|
@@ -125,6 +125,15 @@ export declare class ColorController {
|
|
|
125
125
|
* @private
|
|
126
126
|
*/
|
|
127
127
|
private _previousColor;
|
|
128
|
+
/**
|
|
129
|
+
* Private helper method to convert RGB color to hex format with optional alpha
|
|
130
|
+
*
|
|
131
|
+
* @private
|
|
132
|
+
* @param {boolean} includeHash - Whether to include the # prefix in the returned string
|
|
133
|
+
* @param {boolean} includeAlpha - Whether to include the alpha channel in the returned string
|
|
134
|
+
* @returns {string} The color in hex format
|
|
135
|
+
*/
|
|
136
|
+
private _getHexString;
|
|
128
137
|
/**
|
|
129
138
|
* Sets the color value for the controller. The color can be provided in various formats:
|
|
130
139
|
* - A string representing a color name, hex code, or other color format.
|
|
@@ -50,34 +50,66 @@ export class ColorController {
|
|
|
50
50
|
alpha: 1
|
|
51
51
|
};
|
|
52
52
|
const rgbRegExpArray = [
|
|
53
|
+
// With commas
|
|
53
54
|
/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,
|
|
55
|
+
// rgba(r, g, b, a)
|
|
54
56
|
/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,
|
|
57
|
+
// rgb(r, g, b)
|
|
58
|
+
// With spaces
|
|
55
59
|
/^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,
|
|
60
|
+
// rgba r g b a
|
|
56
61
|
/^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,
|
|
62
|
+
// rgb r g b
|
|
63
|
+
// Spaces inside parentheses
|
|
57
64
|
/^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,
|
|
65
|
+
// rgba(r g b a)
|
|
58
66
|
/^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,
|
|
67
|
+
// rgb(r g b)
|
|
68
|
+
// Percentage values
|
|
59
69
|
/rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,
|
|
70
|
+
// rgb(r%, g%, b%)
|
|
60
71
|
/rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i
|
|
72
|
+
// rgba(r%, g%, b%, a)
|
|
61
73
|
];
|
|
62
74
|
const hslRegExpArray = [
|
|
75
|
+
// With commas
|
|
63
76
|
/hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
|
|
77
|
+
// hsla(h, s, l, a)
|
|
64
78
|
/hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
|
|
79
|
+
// hsl(h, s, l)
|
|
80
|
+
// With spaces
|
|
65
81
|
/^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
|
|
82
|
+
// hsla h s l a
|
|
66
83
|
/^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
|
|
84
|
+
// hsl h s l
|
|
85
|
+
// Spaces inside parentheses
|
|
67
86
|
/^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
|
|
87
|
+
// hsla(h s l a)
|
|
68
88
|
/^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
|
|
89
|
+
// hsl(h s l)
|
|
69
90
|
];
|
|
70
91
|
const hsvRegExpArray = [
|
|
92
|
+
// With commas
|
|
71
93
|
/hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
|
|
94
|
+
// hsva(h, s, v, a)
|
|
72
95
|
/hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
|
|
96
|
+
// hsv(h, s, v)
|
|
97
|
+
// With spaces
|
|
73
98
|
/^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
|
|
99
|
+
// hsva h s v a
|
|
74
100
|
/^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
|
|
101
|
+
// hsv h s v
|
|
102
|
+
// Spaces inside parentheses
|
|
75
103
|
/^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
|
|
104
|
+
// hsva(h s v a)
|
|
76
105
|
/^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
|
|
106
|
+
// hsv(h s v)
|
|
77
107
|
];
|
|
78
108
|
const hexRegExpArray = [
|
|
79
|
-
/^#([A-Fa-f0-9]{6})(
|
|
80
|
-
|
|
109
|
+
/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/,
|
|
110
|
+
// 6-digit hex with optional hex alpha
|
|
111
|
+
/^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/
|
|
112
|
+
// 3-digit hex with optional hex alpha
|
|
81
113
|
];
|
|
82
114
|
const rgbaMatch = (_a = rgbRegExpArray.find((regex) => regex.test(color))) == null ? void 0 : _a.exec(color);
|
|
83
115
|
const hslaMatch = (_b = hslRegExpArray.find((regex) => regex.test(color))) == null ? void 0 : _b.exec(color);
|
|
@@ -123,7 +155,7 @@ export class ColorController {
|
|
|
123
155
|
result.alpha = numericA;
|
|
124
156
|
result.isValid = numericH >= 0 && numericH <= 360 && numericS >= 0 && numericS <= 100 && numericV >= 0 && numericV <= 100 && numericA >= 0 && numericA <= 1;
|
|
125
157
|
} else if (hexMatch) {
|
|
126
|
-
const [, hex,
|
|
158
|
+
const [, hex, alphaHex] = hexMatch;
|
|
127
159
|
const processHex = (hex2) => {
|
|
128
160
|
if (hex2.length === 1) {
|
|
129
161
|
hex2 = hex2 + hex2;
|
|
@@ -140,7 +172,7 @@ export class ColorController {
|
|
|
140
172
|
numericG = processHex(hex.substring(2, 4));
|
|
141
173
|
numericB = processHex(hex.substring(4, 6));
|
|
142
174
|
}
|
|
143
|
-
const numericA =
|
|
175
|
+
const numericA = alphaHex ? processHex(alphaHex) : 1;
|
|
144
176
|
result.spaceId = "srgb";
|
|
145
177
|
result.coords = [numericR, numericG, numericB];
|
|
146
178
|
result.alpha = numericA;
|
|
@@ -164,6 +196,23 @@ export class ColorController {
|
|
|
164
196
|
set colorOrigin(colorOrigin) {
|
|
165
197
|
this._colorOrigin = colorOrigin;
|
|
166
198
|
}
|
|
199
|
+
/**
|
|
200
|
+
* Private helper method to convert RGB color to hex format with optional alpha
|
|
201
|
+
*
|
|
202
|
+
* @private
|
|
203
|
+
* @param {boolean} includeHash - Whether to include the # prefix in the returned string
|
|
204
|
+
* @param {boolean} includeAlpha - Whether to include the alpha channel in the returned string
|
|
205
|
+
* @returns {string} The color in hex format
|
|
206
|
+
*/
|
|
207
|
+
_getHexString(includeHash, includeAlpha) {
|
|
208
|
+
const { r, g, b } = this._color.to("srgb").srgb;
|
|
209
|
+
const a = this._color.alpha;
|
|
210
|
+
const rHex = Math.round(r * 255).toString(16).padStart(2, "0");
|
|
211
|
+
const gHex = Math.round(g * 255).toString(16).padStart(2, "0");
|
|
212
|
+
const bHex = Math.round(b * 255).toString(16).padStart(2, "0");
|
|
213
|
+
const aHex = Math.round(a * 255).toString(16).padStart(2, "0");
|
|
214
|
+
return `${includeHash ? "#" : ""}${rHex}${gHex}${bHex}${includeAlpha ? aHex : ""}`;
|
|
215
|
+
}
|
|
167
216
|
/**
|
|
168
217
|
* Sets the color value for the controller. The color can be provided in various formats:
|
|
169
218
|
* - A string representing a color name, hex code, or other color format.
|
|
@@ -295,30 +344,14 @@ export class ColorController {
|
|
|
295
344
|
)}, ${Math.round(s)}%, ${Math.round(l)}%${hadAlpha ? `, ${a}` : ""})`;
|
|
296
345
|
}
|
|
297
346
|
case "hex string": {
|
|
298
|
-
const
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
const rHex = Math.round(r * 255).toString(16);
|
|
302
|
-
const gHex = Math.round(g * 255).toString(16);
|
|
303
|
-
const bHex = Math.round(b * 255).toString(16);
|
|
304
|
-
const aHex = Math.round(a * 255).toString(16);
|
|
305
|
-
return `#${rHex.padStart(2, "0")}${gHex.padStart(
|
|
306
|
-
2,
|
|
307
|
-
"0"
|
|
308
|
-
)}${bHex.padStart(2, "0")}${hadAlpha ? aHex.padStart(2, "0") : ""}`;
|
|
347
|
+
const hadAlpha = this._colorOrigin.length === 9 || // #RRGGBBAA format
|
|
348
|
+
this._colorOrigin.length === 5;
|
|
349
|
+
return this._getHexString(true, hadAlpha);
|
|
309
350
|
}
|
|
310
351
|
case "hex": {
|
|
311
|
-
const
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
const rHex = Math.round(r * 255).toString(16);
|
|
315
|
-
const gHex = Math.round(g * 255).toString(16);
|
|
316
|
-
const bHex = Math.round(b * 255).toString(16);
|
|
317
|
-
const aHex = Math.round(a * 255).toString(16);
|
|
318
|
-
return `${rHex.padStart(2, "0")}${gHex.padStart(
|
|
319
|
-
2,
|
|
320
|
-
"0"
|
|
321
|
-
)}${bHex.padStart(2, "0")}${hadAlpha ? aHex.padStart(2, "0") : ""}`;
|
|
352
|
+
const hadAlpha = this._colorOrigin.length === 8 || // RRGGBBAA format (no #)
|
|
353
|
+
this._colorOrigin.length === 4;
|
|
354
|
+
return this._getHexString(false, hadAlpha);
|
|
322
355
|
}
|
|
323
356
|
default: {
|
|
324
357
|
const { r, g, b } = this._color.to("srgb").srgb;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveElement } from 'lit';\nimport Color from 'colorjs.io';\nimport type {\n ColorObject,\n ColorTypes as DefaultColorTypes,\n} from 'colorjs.io/types/src/color';\nimport type ColorSpace from 'colorjs.io/types/src/space';\n\n/**\n * Represents various color types that can be used in the application.\n *\n * This type can be one of the following:\n * - `DefaultColorTypes`: A predefined set of color types.\n * - An object representing an RGBA color with properties:\n * - `r`: Red component, can be a number or string.\n * - `g`: Green component, can be a number or string.\n * - `b`: Blue component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSLA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `l`: Lightness component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSVA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `v`: Value component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n */\ntype ColorTypes =\n | DefaultColorTypes\n | {\n r: number | string;\n g: number | string;\n b: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n l: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n v: number | string;\n a?: number | string;\n };\n\nexport type { Color, ColorTypes };\n\ntype ColorValidationResult = {\n spaceId: string | null;\n coords: number[];\n isValid: boolean;\n alpha: number;\n};\n\n/**\n * The `ColorController` class is responsible for managing and validating color values\n * in various color spaces (RGB, HSL, HSV, Hex). It provides methods to set, get, and\n * validate colors, as well as convert between different color formats.\n *\n * @class\n * @property {Color} color - Gets or sets the current color value.\n * @property {ColorTypes} colorValue - Gets the color value in various formats based on the original color input.\n * @property {number} hue - Gets or sets the hue value of the current color.\n *\n * @method validateColorString(color: string): ColorValidationResult - Validates a color string and returns the validation result.\n * @method getColor(format: string | ColorSpace): ColorObject - Converts the current color to the specified format.\n * @method getHslString(): string - Returns the current color in HSL string format.\n * @method savePreviousColor(): void - Saves the current color as the previous color.\n * @method restorePreviousColor(): void - Restores the previous color.\n *\n * @constructor\n * @param {ReactiveElement} host - The host element that uses this controller.\n * @param {Object} [options] - Optional configuration options.\n * @param {string} [options.manageAs] - Specifies the color space to manage the color as.\n */\n\nexport class ColorController {\n get color(): Color {\n return this._color;\n }\n\n /**\n * Validates a color string and returns a result indicating the color space,\n * coordinates, alpha value, and whether the color is valid.\n *\n * @param color - The color string to validate. Supported formats include:\n * - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`\n * - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`\n * - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`\n * - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`\n *\n * @returns An object containing the following properties:\n * - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).\n * - `coords`: An array of numeric values representing the color coordinates.\n * - `alpha`: The alpha value of the color (0 to 1).\n * - `isValid`: A boolean indicating whether the color string is valid.\n */\n public validateColorString(color: string): ColorValidationResult {\n const result: ColorValidationResult = {\n spaceId: null,\n coords: [0, 0, 0],\n isValid: false,\n alpha: 1,\n };\n\n const rgbRegExpArray = [\n /rgba\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n /rgb\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*\\)/i,\n /^rgba\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(0|0?\\.\\d+|1)\\s*$/i,\n /^rgb\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*$/i,\n /^rgba\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n /^rgb\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*\\)$/i,\n /rgb\\(\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*\\)/i,\n /rgba\\(\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n ];\n const hslRegExpArray = [\n /hsla\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n /hsl\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i,\n /^hsla\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i,\n /^hsl\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i,\n /^hsla\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n /^hsl\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i,\n ];\n const hsvRegExpArray = [\n /hsva\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n /hsv\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i,\n /^hsva\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i,\n /^hsv\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i,\n /^hsva\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n /^hsv\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i,\n ];\n const hexRegExpArray = [\n /^#([A-Fa-f0-9]{6})(?:\\s*([01](?:\\.\\d+)?))?$/,\n /^#([A-Fa-f0-9]{3})(?:\\s*([01](?:\\.\\d+)?))?$/,\n ];\n\n const rgbaMatch = rgbRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hslaMatch = hslRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hsvaMatch = hsvRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hexMatch = hexRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n\n if (rgbaMatch) {\n const [, r, g, b, a] = rgbaMatch.filter(\n (element) => typeof element === 'string'\n );\n const alpha = a === undefined ? 1 : Number(a);\n const processValue = (value: string): number => {\n if (value.includes('%')) {\n return Number(value.replace('%', '')) / 100;\n } else {\n return Number(value) / 255;\n }\n };\n const numericR = processValue(r);\n const numericG = processValue(g);\n const numericB = processValue(b);\n\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = alpha;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n alpha >= 0 &&\n alpha <= 1;\n } else if (hslaMatch) {\n const [, h, s, l, a] = hslaMatch;\n const values = [h, s, l, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericL, numericA] = values;\n\n result.spaceId = 'hsl';\n result.coords = [numericH, numericS, numericL];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericL >= 0 &&\n numericL <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hsvaMatch) {\n const [, h, s, v, a] = hsvaMatch;\n const values = [h, s, v, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericV, numericA] = values;\n\n result.spaceId = 'hsv';\n result.coords = [numericH, numericS, numericV];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericV >= 0 &&\n numericV <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hexMatch) {\n const [, hex, alpha] = hexMatch;\n\n // Function to process 2-digit or repeated 1-digit hex\n const processHex = (hex: string): number => {\n // For 3-digit hex values, repeat each digit\n if (hex.length === 1) {\n hex = hex + hex;\n }\n return parseInt(hex, 16) / 255;\n };\n\n // Handle both 3-digit and 6-digit hex\n let numericR, numericG, numericB;\n if (hex.length === 3) {\n // 3-digit hex (e.g., #3a7 -> #33aa77)\n numericR = processHex(hex.substring(0, 1));\n numericG = processHex(hex.substring(1, 2));\n numericB = processHex(hex.substring(2, 3));\n } else {\n // 6-digit hex (e.g., #33aa77)\n numericR = processHex(hex.substring(0, 2));\n numericG = processHex(hex.substring(2, 4));\n numericB = processHex(hex.substring(4, 6));\n }\n\n // Numeric alpha: if not provided, default to 1\n const numericA = alpha ? Number(alpha) : 1;\n\n // Validate the color values\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = numericA;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n numericA >= 0 &&\n numericA <= 1;\n }\n\n return result;\n }\n\n /**\n * Represents the color state of the component.\n * Initialized with an HSV color model with hue 0, saturation 100, and value 100, and an alpha value of 1.\n *\n * @private\n * @type {Color}\n */\n private _color: Color = new Color('hsv', [0, 100, 100], 1);\n\n /**\n * Represents the original color value provided by the user.\n *\n * @private\n * @type {ColorTypes}\n */\n private _colorOrigin!: ColorTypes;\n\n /**\n * Gets the original color value provided by the user.\n *\n * @returns {ColorTypes} The original color value.\n */\n get colorOrigin(): ColorTypes {\n return this._colorOrigin;\n }\n\n /**\n * Sets the original color value provided by the user.\n *\n * @param {ColorTypes} colorOrigin - The original color value to set.\n */\n set colorOrigin(colorOrigin: ColorTypes) {\n this._colorOrigin = colorOrigin;\n }\n\n /**\n * An optional string property that specifies how the color should be managed(its value is the name of color space in which color object will be managed).\n * This property can be used to define a specific management strategy or identifier.\n */\n private manageAs?: string;\n\n /**\n * Stores the previous color value.\n * This is used to keep track of the color before any changes are made.\n *\n * @private\n */\n private _previousColor!: Color;\n\n /**\n * Sets the color value for the controller. The color can be provided in various formats:\n * - A string representing a color name, hex code, or other color format.\n * - An instance of the `Color` class.\n * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.\n *\n * The method validates and parses the input color, converting it to a `Color` instance.\n * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.\n *\n * @param {ColorTypes} color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.\n */\n set color(color: ColorTypes) {\n this._colorOrigin = color;\n let newColor!: Color;\n if (typeof color === 'string') {\n const colorValidationResult = this.validateColorString(\n color as string\n );\n if (colorValidationResult.isValid) {\n const [coord1, coord2, coord3] = colorValidationResult.coords;\n newColor = new Color(\n `${colorValidationResult.spaceId}`,\n [coord1, coord2, coord3],\n colorValidationResult.alpha\n );\n } else {\n try {\n Color.parse(color);\n } catch (error) {\n try {\n newColor = new Color(`#${color}`);\n } catch (error) {\n return;\n }\n }\n }\n } else if (color instanceof Color) {\n newColor = color;\n } else if (!Array.isArray(color)) {\n const { h, s, l, v, r, g, b, a } = color as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n a?: string;\n };\n if (typeof h !== 'undefined' && typeof s !== 'undefined') {\n const lv = l ?? v;\n newColor = new Color(\n typeof l !== 'undefined' ? 'hsl' : 'hsv',\n [\n parseFloat(h),\n typeof s !== 'string' ? s * 100 : parseFloat(s),\n typeof lv !== 'string' ? lv * 100 : parseFloat(lv),\n ],\n parseFloat(a || '1')\n );\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n newColor = new Color(\n 'srgb',\n [\n parseFloat(r) / 255,\n parseFloat(g) / 255,\n parseFloat(b) / 255,\n ],\n parseFloat(a || '1')\n );\n }\n }\n\n if (!newColor) {\n newColor = new Color(color as DefaultColorTypes);\n }\n\n if (this.manageAs) {\n this._color = newColor.to(this.manageAs) as Color;\n } else {\n this._color = newColor;\n }\n this.host.requestUpdate();\n }\n\n /**\n * Gets the color value in various formats based on the original color input.\n *\n * The method determines the color space of the original color input and converts\n * the color to the appropriate format. The supported color spaces are:\n * - HSV (Hue, Saturation, Value)\n * - HSL (Hue, Saturation, Lightness)\n * - Hexadecimal (with or without alpha)\n * - RGB (Red, Green, Blue) with optional alpha\n *\n * @returns {ColorTypes} The color value in the appropriate format.\n *\n * The method handles the following cases:\n * - If the original color input is a string, it checks the prefix to determine the color space.\n * - If the original color input is an object, it checks the properties to determine the color space.\n * - If the original color input is not provided, it defaults to the current color space of the color object.\n *\n * The returned color value can be in one of the following formats:\n * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`\n * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`\n * - `#rrggbb` or `#rrggbbaa`\n * - `rgb(r, g, b)` or `rgba(r, g, b, a)`\n * - `{ h, s, v, a }` for HSV object\n * - `{ h, s, l, a }` for HSL object\n * - `{ r, g, b, a }` for RGB object\n */\n get colorValue(): ColorTypes {\n if (typeof this._colorOrigin === 'string') {\n let spaceId = '';\n if (this._colorOrigin.startsWith('#')) {\n spaceId = 'hex string';\n } else if (this._colorOrigin.startsWith('rgb')) {\n spaceId = 'rgb';\n } else if (this._colorOrigin.startsWith('hsl')) {\n spaceId = 'hsl';\n } else if (this._colorOrigin.startsWith('hsv')) {\n spaceId = 'hsv';\n } else {\n spaceId = 'hex';\n }\n switch (spaceId) {\n case 'hsv': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n const a = this._color.alpha;\n return `hsv${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(v)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hsl': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n const a = this._color.alpha;\n return `hsl${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(l)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hex string': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha =\n this._colorOrigin.length === 5 ||\n this._colorOrigin.length === 9;\n const a = this._color.alpha;\n const rHex = Math.round(r * 255).toString(16);\n const gHex = Math.round(g * 255).toString(16);\n const bHex = Math.round(b * 255).toString(16);\n const aHex = Math.round(a * 255).toString(16);\n return `#${rHex.padStart(2, '0')}${gHex.padStart(\n 2,\n '0'\n )}${bHex.padStart(2, '0')}${\n hadAlpha ? aHex.padStart(2, '0') : ''\n }`;\n }\n case 'hex': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha =\n this._colorOrigin.length === 4 ||\n this._colorOrigin.length === 8;\n const a = this._color.alpha;\n const rHex = Math.round(r * 255).toString(16);\n const gHex = Math.round(g * 255).toString(16);\n const bHex = Math.round(b * 255).toString(16);\n const aHex = Math.round(a * 255).toString(16);\n return `${rHex.padStart(2, '0')}${gHex.padStart(\n 2,\n '0'\n )}${bHex.padStart(2, '0')}${\n hadAlpha ? aHex.padStart(2, '0') : ''\n }`;\n }\n //rgb\n default: {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha = this._colorOrigin[3] === 'a';\n const a = this._color.alpha;\n if (this._colorOrigin.search('%') > -1) {\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 100)}%, ${Math.round(\n g * 100\n )}%, ${Math.round(b * 100)}%${hadAlpha ? `,${Math.round(a * 100)}%` : ''})`;\n }\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 255)}, ${Math.round(\n g * 255\n )}, ${Math.round(b * 255)}${hadAlpha ? `, ${a}` : ''})`;\n }\n }\n }\n let spaceId;\n if (this._colorOrigin) {\n try {\n ({ spaceId } = new Color(\n this._colorOrigin as DefaultColorTypes\n ));\n } catch (error) {\n const { h, s, l, v, r, g, b } = this._colorOrigin as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n };\n if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof l !== 'undefined'\n ) {\n spaceId = 'hsl';\n } else if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof v !== 'undefined'\n ) {\n spaceId = 'hsv';\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n spaceId = 'srgb';\n }\n }\n } else {\n ({ spaceId } = this.color);\n }\n switch (spaceId) {\n case 'hsv': {\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n return {\n h,\n s: s / 100,\n v: v / 100,\n a: this._color.alpha,\n };\n }\n case 'hsl': {\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n return {\n h,\n s: s / 100,\n l: l / 100,\n a: this._color.alpha,\n };\n }\n case 'srgb': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n if (\n this._colorOrigin &&\n typeof (this._colorOrigin as { r: string }).r ===\n 'string' &&\n (this._colorOrigin as { r: string }).r.search('%')\n ) {\n return {\n r: `${Math.round(r * 255)}%`,\n g: `${Math.round(g * 255)}%`,\n b: `${Math.round(b * 255)}%`,\n a: this._color.alpha,\n };\n }\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255),\n a: this._color.alpha,\n };\n }\n }\n return this._color;\n }\n\n protected host: ReactiveElement;\n\n /**\n * Gets the hue value of the current color in HSL format.\n *\n * @returns {number} The hue value as a number.\n */\n get hue(): number {\n return Number((this._color.to('hsl') as Color).hsl.h);\n }\n\n /**\n * Sets the hue value of the color and requests an update from the host.\n *\n * @param hue - The hue value to set, represented as a number.\n */\n set hue(hue: number) {\n this._color.set('h', hue);\n this.host.requestUpdate();\n }\n\n /**\n * Creates an instance of ColorController.\n *\n * @param host - The ReactiveElement that this controller is associated with.\n * @param options - An object containing optional parameters.\n * @param options.manageAs - A string to manage the controller as a specific type.\n */\n constructor(\n host: ReactiveElement,\n {\n manageAs,\n }: {\n manageAs?: string;\n } = {}\n ) {\n this.host = host;\n this.manageAs = manageAs;\n }\n\n /**\n * Converts the current color to the specified format.\n *\n * @param format - The desired color format. It can be a string representing one of the valid formats\n * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.\n * @returns The color object in the specified format.\n * @throws Will throw an error if the provided format is not a valid string format.\n */\n getColor(format: string | ColorSpace): ColorObject {\n const validFormats = ['srgb', 'hsva', 'hsv', 'hsl', 'hsla'];\n if (typeof format === 'string' && !validFormats.includes(format)) {\n throw new Error('not a valid format');\n }\n\n return this._color.to(format);\n }\n\n /**\n * Converts the current color to an HSL string representation.\n *\n * @returns {string} The HSL string representation of the current color.\n */\n getHslString(): string {\n return this._color.to('hsl').toString();\n }\n\n /**\n * Saves the current color state by cloning the current color and storing it\n * as the previous color. This allows for the ability to revert to the previous\n * color state if needed.\n *\n * @returns {void}\n */\n savePreviousColor(): void {\n this._previousColor = this._color.clone();\n }\n\n /**\n * Restores the color to the previously saved color value.\n *\n * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).\n */\n restorePreviousColor(): void {\n this._color = this._previousColor;\n }\n}\n"],
|
|
5
|
-
"mappings": ";AAaA,OAAO,WAAW;AAgFX,aAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveElement } from 'lit';\nimport Color from 'colorjs.io';\nimport type {\n ColorObject,\n ColorTypes as DefaultColorTypes,\n} from 'colorjs.io/types/src/color';\nimport type ColorSpace from 'colorjs.io/types/src/space';\n\n/**\n * Represents various color types that can be used in the application.\n *\n * This type can be one of the following:\n * - `DefaultColorTypes`: A predefined set of color types.\n * - An object representing an RGBA color with properties:\n * - `r`: Red component, can be a number or string.\n * - `g`: Green component, can be a number or string.\n * - `b`: Blue component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSLA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `l`: Lightness component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSVA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `v`: Value component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n */\ntype ColorTypes =\n | DefaultColorTypes\n | {\n r: number | string;\n g: number | string;\n b: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n l: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n v: number | string;\n a?: number | string;\n };\n\nexport type { Color, ColorTypes };\n\ntype ColorValidationResult = {\n spaceId: string | null;\n coords: number[];\n isValid: boolean;\n alpha: number;\n};\n\n/**\n * The `ColorController` class is responsible for managing and validating color values\n * in various color spaces (RGB, HSL, HSV, Hex). It provides methods to set, get, and\n * validate colors, as well as convert between different color formats.\n *\n * @class\n * @property {Color} color - Gets or sets the current color value.\n * @property {ColorTypes} colorValue - Gets the color value in various formats based on the original color input.\n * @property {number} hue - Gets or sets the hue value of the current color.\n *\n * @method validateColorString(color: string): ColorValidationResult - Validates a color string and returns the validation result.\n * @method getColor(format: string | ColorSpace): ColorObject - Converts the current color to the specified format.\n * @method getHslString(): string - Returns the current color in HSL string format.\n * @method savePreviousColor(): void - Saves the current color as the previous color.\n * @method restorePreviousColor(): void - Restores the previous color.\n *\n * @constructor\n * @param {ReactiveElement} host - The host element that uses this controller.\n * @param {Object} [options] - Optional configuration options.\n * @param {string} [options.manageAs] - Specifies the color space to manage the color as.\n */\n\nexport class ColorController {\n get color(): Color {\n return this._color;\n }\n\n /**\n * Validates a color string and returns a result indicating the color space,\n * coordinates, alpha value, and whether the color is valid.\n *\n * @param color - The color string to validate. Supported formats include:\n * - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`\n * - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`\n * - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`\n * - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`\n *\n * @returns An object containing the following properties:\n * - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).\n * - `coords`: An array of numeric values representing the color coordinates.\n * - `alpha`: The alpha value of the color (0 to 1).\n * - `isValid`: A boolean indicating whether the color string is valid.\n */\n public validateColorString(color: string): ColorValidationResult {\n const result: ColorValidationResult = {\n spaceId: null,\n coords: [0, 0, 0],\n isValid: false,\n alpha: 1,\n };\n\n // RGB color formats\n const rgbRegExpArray = [\n // With commas\n /rgba\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // rgba(r, g, b, a)\n /rgb\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*\\)/i, // rgb(r, g, b)\n\n // With spaces\n /^rgba\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(0|0?\\.\\d+|1)\\s*$/i, // rgba r g b a\n /^rgb\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*$/i, // rgb r g b\n\n // Spaces inside parentheses\n /^rgba\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d*\\.?\\d+)\\s*\\)$/i, // rgba(r g b a)\n /^rgb\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*\\)$/i, // rgb(r g b)\n\n // Percentage values\n /rgb\\(\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*\\)/i, // rgb(r%, g%, b%)\n /rgba\\(\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // rgba(r%, g%, b%, a)\n ];\n\n // HSL color formats\n const hslRegExpArray = [\n // With commas\n /hsla\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // hsla(h, s, l, a)\n /hsl\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i, // hsl(h, s, l)\n\n // With spaces\n /^hsla\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i, // hsla h s l a\n /^hsl\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i, // hsl h s l\n\n // Spaces inside parentheses\n /^hsla\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i, // hsla(h s l a)\n /^hsl\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i, // hsl(h s l)\n ];\n\n // HSV color formats\n const hsvRegExpArray = [\n // With commas\n /hsva\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // hsva(h, s, v, a)\n /hsv\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i, // hsv(h, s, v)\n\n // With spaces\n /^hsva\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i, // hsva h s v a\n /^hsv\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i, // hsv h s v\n\n // Spaces inside parentheses\n /^hsva\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i, // hsva(h s v a)\n /^hsv\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i, // hsv(h s v)\n ];\n\n // HEX color formats\n const hexRegExpArray = [\n /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/, // 6-digit hex with optional hex alpha\n /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/, // 3-digit hex with optional hex alpha\n ];\n\n const rgbaMatch = rgbRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hslaMatch = hslRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hsvaMatch = hsvRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hexMatch = hexRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n\n if (rgbaMatch) {\n const [, r, g, b, a] = rgbaMatch.filter(\n (element) => typeof element === 'string'\n );\n const alpha = a === undefined ? 1 : Number(a);\n const processValue = (value: string): number => {\n if (value.includes('%')) {\n return Number(value.replace('%', '')) / 100;\n } else {\n return Number(value) / 255;\n }\n };\n const numericR = processValue(r);\n const numericG = processValue(g);\n const numericB = processValue(b);\n\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = alpha;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n alpha >= 0 &&\n alpha <= 1;\n } else if (hslaMatch) {\n const [, h, s, l, a] = hslaMatch;\n const values = [h, s, l, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericL, numericA] = values;\n\n result.spaceId = 'hsl';\n result.coords = [numericH, numericS, numericL];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericL >= 0 &&\n numericL <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hsvaMatch) {\n const [, h, s, v, a] = hsvaMatch;\n const values = [h, s, v, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericV, numericA] = values;\n\n result.spaceId = 'hsv';\n result.coords = [numericH, numericS, numericV];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericV >= 0 &&\n numericV <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hexMatch) {\n const [, hex, alphaHex] = hexMatch;\n\n // Function to process 2-digit or repeated 1-digit hex\n const processHex = (hex: string): number => {\n // For 3-digit hex values, repeat each digit\n if (hex.length === 1) {\n hex = hex + hex;\n }\n return parseInt(hex, 16) / 255;\n };\n\n // Handle both 3-digit and 6-digit hex\n let numericR, numericG, numericB;\n if (hex.length === 3) {\n // 3-digit hex (e.g., #3a7 -> #33aa77)\n numericR = processHex(hex.substring(0, 1));\n numericG = processHex(hex.substring(1, 2));\n numericB = processHex(hex.substring(2, 3));\n } else {\n // 6-digit hex (e.g., #33aa77)\n numericR = processHex(hex.substring(0, 2));\n numericG = processHex(hex.substring(2, 4));\n numericB = processHex(hex.substring(4, 6));\n }\n\n // Process hex alpha if provided (convert from 0-255 to 0-1)\n const numericA = alphaHex ? processHex(alphaHex) : 1;\n\n // Validate the color values\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = numericA;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n numericA >= 0 &&\n numericA <= 1;\n }\n\n return result;\n }\n\n /**\n * Represents the color state of the component.\n * Initialized with an HSV color model with hue 0, saturation 100, and value 100, and an alpha value of 1.\n *\n * @private\n * @type {Color}\n */\n private _color: Color = new Color('hsv', [0, 100, 100], 1);\n\n /**\n * Represents the original color value provided by the user.\n *\n * @private\n * @type {ColorTypes}\n */\n private _colorOrigin!: ColorTypes;\n\n /**\n * Gets the original color value provided by the user.\n *\n * @returns {ColorTypes} The original color value.\n */\n get colorOrigin(): ColorTypes {\n return this._colorOrigin;\n }\n\n /**\n * Sets the original color value provided by the user.\n *\n * @param {ColorTypes} colorOrigin - The original color value to set.\n */\n set colorOrigin(colorOrigin: ColorTypes) {\n this._colorOrigin = colorOrigin;\n }\n\n /**\n * An optional string property that specifies how the color should be managed(its value is the name of color space in which color object will be managed).\n * This property can be used to define a specific management strategy or identifier.\n */\n private manageAs?: string;\n\n /**\n * Stores the previous color value.\n * This is used to keep track of the color before any changes are made.\n *\n * @private\n */\n private _previousColor!: Color;\n\n /**\n * Private helper method to convert RGB color to hex format with optional alpha\n *\n * @private\n * @param {boolean} includeHash - Whether to include the # prefix in the returned string\n * @param {boolean} includeAlpha - Whether to include the alpha channel in the returned string\n * @returns {string} The color in hex format\n */\n private _getHexString(includeHash: boolean, includeAlpha: boolean): string {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const a = this._color.alpha;\n\n const rHex = Math.round(r * 255)\n .toString(16)\n .padStart(2, '0');\n const gHex = Math.round(g * 255)\n .toString(16)\n .padStart(2, '0');\n const bHex = Math.round(b * 255)\n .toString(16)\n .padStart(2, '0');\n const aHex = Math.round(a * 255)\n .toString(16)\n .padStart(2, '0');\n\n return `${includeHash ? '#' : ''}${rHex}${gHex}${bHex}${includeAlpha ? aHex : ''}`;\n }\n\n /**\n * Sets the color value for the controller. The color can be provided in various formats:\n * - A string representing a color name, hex code, or other color format.\n * - An instance of the `Color` class.\n * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.\n *\n * The method validates and parses the input color, converting it to a `Color` instance.\n * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.\n *\n * @param {ColorTypes} color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.\n */\n set color(color: ColorTypes) {\n this._colorOrigin = color;\n let newColor!: Color;\n if (typeof color === 'string') {\n const colorValidationResult = this.validateColorString(\n color as string\n );\n if (colorValidationResult.isValid) {\n const [coord1, coord2, coord3] = colorValidationResult.coords;\n newColor = new Color(\n `${colorValidationResult.spaceId}`,\n [coord1, coord2, coord3],\n colorValidationResult.alpha\n );\n } else {\n try {\n Color.parse(color);\n } catch (error) {\n try {\n newColor = new Color(`#${color}`);\n } catch (error) {\n return;\n }\n }\n }\n } else if (color instanceof Color) {\n newColor = color;\n } else if (!Array.isArray(color)) {\n const { h, s, l, v, r, g, b, a } = color as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n a?: string;\n };\n if (typeof h !== 'undefined' && typeof s !== 'undefined') {\n const lv = l ?? v;\n newColor = new Color(\n typeof l !== 'undefined' ? 'hsl' : 'hsv',\n [\n parseFloat(h),\n typeof s !== 'string' ? s * 100 : parseFloat(s),\n typeof lv !== 'string' ? lv * 100 : parseFloat(lv),\n ],\n parseFloat(a || '1')\n );\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n newColor = new Color(\n 'srgb',\n [\n parseFloat(r) / 255,\n parseFloat(g) / 255,\n parseFloat(b) / 255,\n ],\n parseFloat(a || '1')\n );\n }\n }\n\n if (!newColor) {\n newColor = new Color(color as DefaultColorTypes);\n }\n\n if (this.manageAs) {\n this._color = newColor.to(this.manageAs) as Color;\n } else {\n this._color = newColor;\n }\n this.host.requestUpdate();\n }\n\n /**\n * Gets the color value in various formats based on the original color input.\n *\n * The method determines the color space of the original color input and converts\n * the color to the appropriate format. The supported color spaces are:\n * - HSV (Hue, Saturation, Value)\n * - HSL (Hue, Saturation, Lightness)\n * - Hexadecimal (with or without alpha)\n * - RGB (Red, Green, Blue) with optional alpha\n *\n * @returns {ColorTypes} The color value in the appropriate format.\n *\n * The method handles the following cases:\n * - If the original color input is a string, it checks the prefix to determine the color space.\n * - If the original color input is an object, it checks the properties to determine the color space.\n * - If the original color input is not provided, it defaults to the current color space of the color object.\n *\n * The returned color value can be in one of the following formats:\n * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`\n * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`\n * - `#rrggbb` or `#rrggbbaa`\n * - `rgb(r, g, b)` or `rgba(r, g, b, a)`\n * - `{ h, s, v, a }` for HSV object\n * - `{ h, s, l, a }` for HSL object\n * - `{ r, g, b, a }` for RGB object\n */\n get colorValue(): ColorTypes {\n if (typeof this._colorOrigin === 'string') {\n let spaceId = '';\n if (this._colorOrigin.startsWith('#')) {\n spaceId = 'hex string';\n } else if (this._colorOrigin.startsWith('rgb')) {\n spaceId = 'rgb';\n } else if (this._colorOrigin.startsWith('hsl')) {\n spaceId = 'hsl';\n } else if (this._colorOrigin.startsWith('hsv')) {\n spaceId = 'hsv';\n } else {\n spaceId = 'hex';\n }\n switch (spaceId) {\n case 'hsv': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n const a = this._color.alpha;\n return `hsv${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(v)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hsl': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n const a = this._color.alpha;\n return `hsl${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(l)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hex string': {\n // Check if the original input included alpha\n const hadAlpha =\n this._colorOrigin.length === 9 || // #RRGGBBAA format\n this._colorOrigin.length === 5; // #RGBA format\n return this._getHexString(true, hadAlpha);\n }\n case 'hex': {\n // Check if the original input included alpha\n const hadAlpha =\n this._colorOrigin.length === 8 || // RRGGBBAA format (no #)\n this._colorOrigin.length === 4; // RGBA format (no #)\n return this._getHexString(false, hadAlpha);\n }\n //rgb\n default: {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha = this._colorOrigin[3] === 'a';\n const a = this._color.alpha;\n if (this._colorOrigin.search('%') > -1) {\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 100)}%, ${Math.round(\n g * 100\n )}%, ${Math.round(b * 100)}%${hadAlpha ? `,${Math.round(a * 100)}%` : ''})`;\n }\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 255)}, ${Math.round(\n g * 255\n )}, ${Math.round(b * 255)}${hadAlpha ? `, ${a}` : ''})`;\n }\n }\n }\n let spaceId;\n if (this._colorOrigin) {\n try {\n ({ spaceId } = new Color(\n this._colorOrigin as DefaultColorTypes\n ));\n } catch (error) {\n const { h, s, l, v, r, g, b } = this._colorOrigin as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n };\n if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof l !== 'undefined'\n ) {\n spaceId = 'hsl';\n } else if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof v !== 'undefined'\n ) {\n spaceId = 'hsv';\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n spaceId = 'srgb';\n }\n }\n } else {\n ({ spaceId } = this.color);\n }\n switch (spaceId) {\n case 'hsv': {\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n return {\n h,\n s: s / 100,\n v: v / 100,\n a: this._color.alpha,\n };\n }\n case 'hsl': {\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n return {\n h,\n s: s / 100,\n l: l / 100,\n a: this._color.alpha,\n };\n }\n case 'srgb': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n if (\n this._colorOrigin &&\n typeof (this._colorOrigin as { r: string }).r ===\n 'string' &&\n (this._colorOrigin as { r: string }).r.search('%')\n ) {\n return {\n r: `${Math.round(r * 255)}%`,\n g: `${Math.round(g * 255)}%`,\n b: `${Math.round(b * 255)}%`,\n a: this._color.alpha,\n };\n }\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255),\n a: this._color.alpha,\n };\n }\n }\n return this._color;\n }\n\n protected host: ReactiveElement;\n\n /**\n * Gets the hue value of the current color in HSL format.\n *\n * @returns {number} The hue value as a number.\n */\n get hue(): number {\n return Number((this._color.to('hsl') as Color).hsl.h);\n }\n\n /**\n * Sets the hue value of the color and requests an update from the host.\n *\n * @param hue - The hue value to set, represented as a number.\n */\n set hue(hue: number) {\n this._color.set('h', hue);\n this.host.requestUpdate();\n }\n\n /**\n * Creates an instance of ColorController.\n *\n * @param host - The ReactiveElement that this controller is associated with.\n * @param options - An object containing optional parameters.\n * @param options.manageAs - A string to manage the controller as a specific type.\n */\n constructor(\n host: ReactiveElement,\n {\n manageAs,\n }: {\n manageAs?: string;\n } = {}\n ) {\n this.host = host;\n this.manageAs = manageAs;\n }\n\n /**\n * Converts the current color to the specified format.\n *\n * @param format - The desired color format. It can be a string representing one of the valid formats\n * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.\n * @returns The color object in the specified format.\n * @throws Will throw an error if the provided format is not a valid string format.\n */\n getColor(format: string | ColorSpace): ColorObject {\n const validFormats = ['srgb', 'hsva', 'hsv', 'hsl', 'hsla'];\n if (typeof format === 'string' && !validFormats.includes(format)) {\n throw new Error('not a valid format');\n }\n\n return this._color.to(format);\n }\n\n /**\n * Converts the current color to an HSL string representation.\n *\n * @returns {string} The HSL string representation of the current color.\n */\n getHslString(): string {\n return this._color.to('hsl').toString();\n }\n\n /**\n * Saves the current color state by cloning the current color and storing it\n * as the previous color. This allows for the ability to revert to the previous\n * color state if needed.\n *\n * @returns {void}\n */\n savePreviousColor(): void {\n this._previousColor = this._color.clone();\n }\n\n /**\n * Restores the color to the previously saved color value.\n *\n * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).\n */\n restorePreviousColor(): void {\n this._color = this._previousColor;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["hex", "error", "spaceId"]
|
|
7
7
|
}
|
package/src/ColorController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";import
|
|
1
|
+
"use strict";import _ from"colorjs.io";export class ColorController{constructor(r,{manageAs:s}={}){this._color=new _("hsv",[0,100,100],1);this.host=r,this.manageAs=s}get color(){return this._color}validateColorString(r){var $,C,M,O;const s={spaceId:null,coords:[0,0,0],isValid:!1,alpha:1},t=[/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,/^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,/^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,/^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,/^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,/rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,/rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i],o=[/hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],i=[/hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],n=[/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/,/^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/],h=($=t.find(e=>e.test(r)))==null?void 0:$.exec(r),f=(C=o.find(e=>e.test(r)))==null?void 0:C.exec(r),b=(M=i.find(e=>e.test(r)))==null?void 0:M.exec(r),y=(O=n.find(e=>e.test(r)))==null?void 0:O.exec(r);if(h){const[,e,v,g,c]=h.filter(m=>typeof m=="string"),u=c===void 0?1:Number(c),a=m=>m.includes("%")?Number(m.replace("%",""))/100:Number(m)/255,d=a(e),l=a(v),p=a(g);s.spaceId="srgb",s.coords=[d,l,p],s.alpha=u,s.isValid=d>=0&&d<=1&&l>=0&&l<=1&&p>=0&&p<=1&&u>=0&&u<=1}else if(f){const[,e,v,g,c]=f,u=[e,v,g,c===void 0?"1":c].map(m=>Number(m.replace(/[^\d.]/g,""))),[a,d,l,p]=u;s.spaceId="hsl",s.coords=[a,d,l],s.alpha=p,s.isValid=a>=0&&a<=360&&d>=0&&d<=100&&l>=0&&l<=100&&p>=0&&p<=1}else if(b){const[,e,v,g,c]=b,u=[e,v,g,c===void 0?"1":c].map(m=>Number(m.replace(/[^\d.]/g,""))),[a,d,l,p]=u;s.spaceId="hsv",s.coords=[a,d,l],s.alpha=p,s.isValid=a>=0&&a<=360&&d>=0&&d<=100&&l>=0&&l<=100&&p>=0&&p<=1}else if(y){const[,e,v]=y,g=l=>(l.length===1&&(l=l+l),parseInt(l,16)/255);let c,u,a;e.length===3?(c=g(e.substring(0,1)),u=g(e.substring(1,2)),a=g(e.substring(2,3))):(c=g(e.substring(0,2)),u=g(e.substring(2,4)),a=g(e.substring(4,6)));const d=v?g(v):1;s.spaceId="srgb",s.coords=[c,u,a],s.alpha=d,s.isValid=c>=0&&c<=1&&u>=0&&u<=1&&a>=0&&a<=1&&d>=0&&d<=1}return s}get colorOrigin(){return this._colorOrigin}set colorOrigin(r){this._colorOrigin=r}_getHexString(r,s){const{r:t,g:o,b:i}=this._color.to("srgb").srgb,n=this._color.alpha,h=Math.round(t*255).toString(16).padStart(2,"0"),f=Math.round(o*255).toString(16).padStart(2,"0"),b=Math.round(i*255).toString(16).padStart(2,"0"),y=Math.round(n*255).toString(16).padStart(2,"0");return`${r?"#":""}${h}${f}${b}${s?y:""}`}set color(r){this._colorOrigin=r;let s;if(typeof r=="string"){const t=this.validateColorString(r);if(t.isValid){const[o,i,n]=t.coords;s=new _(`${t.spaceId}`,[o,i,n],t.alpha)}else try{_.parse(r)}catch(o){try{s=new _(`#${r}`)}catch(i){return}}}else if(r instanceof _)s=r;else if(!Array.isArray(r)){const{h:t,s:o,l:i,v:n,r:h,g:f,b,a:y}=r;if(typeof t!="undefined"&&typeof o!="undefined"){const $=i!=null?i:n;s=new _(typeof i!="undefined"?"hsl":"hsv",[parseFloat(t),typeof o!="string"?o*100:parseFloat(o),typeof $!="string"?$*100:parseFloat($)],parseFloat(y||"1"))}else typeof h!="undefined"&&typeof f!="undefined"&&typeof b!="undefined"&&(s=new _("srgb",[parseFloat(h)/255,parseFloat(f)/255,parseFloat(b)/255],parseFloat(y||"1")))}s||(s=new _(r)),this.manageAs?this._color=s.to(this.manageAs):this._color=s,this.host.requestUpdate()}get colorValue(){if(typeof this._colorOrigin=="string"){let s="";switch(this._colorOrigin.startsWith("#")?s="hex string":this._colorOrigin.startsWith("rgb")?s="rgb":this._colorOrigin.startsWith("hsl")?s="hsl":this._colorOrigin.startsWith("hsv")?s="hsv":s="hex",s){case"hsv":{const t=this._colorOrigin[3]==="a",{h:o,s:i,v:n}=this._color.to("hsv").hsv,h=this._color.alpha;return`hsv${t?"a":""}(${Math.round(o)}, ${Math.round(i)}%, ${Math.round(n)}%${t?`, ${h}`:""})`}case"hsl":{const t=this._colorOrigin[3]==="a",{h:o,s:i,l:n}=this._color.to("hsl").hsl,h=this._color.alpha;return`hsl${t?"a":""}(${Math.round(o)}, ${Math.round(i)}%, ${Math.round(n)}%${t?`, ${h}`:""})`}case"hex string":{const t=this._colorOrigin.length===9||this._colorOrigin.length===5;return this._getHexString(!0,t)}case"hex":{const t=this._colorOrigin.length===8||this._colorOrigin.length===4;return this._getHexString(!1,t)}default:{const{r:t,g:o,b:i}=this._color.to("srgb").srgb,n=this._colorOrigin[3]==="a",h=this._color.alpha;return this._colorOrigin.search("%")>-1?`rgb${n?"a":""}(${Math.round(t*100)}%, ${Math.round(o*100)}%, ${Math.round(i*100)}%${n?`,${Math.round(h*100)}%`:""})`:`rgb${n?"a":""}(${Math.round(t*255)}, ${Math.round(o*255)}, ${Math.round(i*255)}${n?`, ${h}`:""})`}}}let r;if(this._colorOrigin)try{({spaceId:r}=new _(this._colorOrigin))}catch(s){const{h:t,s:o,l:i,v:n,r:h,g:f,b}=this._colorOrigin;typeof t!="undefined"&&typeof o!="undefined"&&typeof i!="undefined"?r="hsl":typeof t!="undefined"&&typeof o!="undefined"&&typeof n!="undefined"?r="hsv":typeof h!="undefined"&&typeof f!="undefined"&&typeof b!="undefined"&&(r="srgb")}else({spaceId:r}=this.color);switch(r){case"hsv":{const{h:s,s:t,v:o}=this._color.to("hsv").hsv;return{h:s,s:t/100,v:o/100,a:this._color.alpha}}case"hsl":{const{h:s,s:t,l:o}=this._color.to("hsl").hsl;return{h:s,s:t/100,l:o/100,a:this._color.alpha}}case"srgb":{const{r:s,g:t,b:o}=this._color.to("srgb").srgb;return this._colorOrigin&&typeof this._colorOrigin.r=="string"&&this._colorOrigin.r.search("%")?{r:`${Math.round(s*255)}%`,g:`${Math.round(t*255)}%`,b:`${Math.round(o*255)}%`,a:this._color.alpha}:{r:Math.round(s*255),g:Math.round(t*255),b:Math.round(o*255),a:this._color.alpha}}}return this._color}get hue(){return Number(this._color.to("hsl").hsl.h)}set hue(r){this._color.set("h",r),this.host.requestUpdate()}getColor(r){if(typeof r=="string"&&!["srgb","hsva","hsv","hsl","hsla"].includes(r))throw new Error("not a valid format");return this._color.to(r)}getHslString(){return this._color.to("hsl").toString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this._color=this._previousColor}}
|
|
2
2
|
//# sourceMappingURL=ColorController.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ColorController.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveElement } from 'lit';\nimport Color from 'colorjs.io';\nimport type {\n ColorObject,\n ColorTypes as DefaultColorTypes,\n} from 'colorjs.io/types/src/color';\nimport type ColorSpace from 'colorjs.io/types/src/space';\n\n/**\n * Represents various color types that can be used in the application.\n *\n * This type can be one of the following:\n * - `DefaultColorTypes`: A predefined set of color types.\n * - An object representing an RGBA color with properties:\n * - `r`: Red component, can be a number or string.\n * - `g`: Green component, can be a number or string.\n * - `b`: Blue component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSLA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `l`: Lightness component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSVA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `v`: Value component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n */\ntype ColorTypes =\n | DefaultColorTypes\n | {\n r: number | string;\n g: number | string;\n b: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n l: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n v: number | string;\n a?: number | string;\n };\n\nexport type { Color, ColorTypes };\n\ntype ColorValidationResult = {\n spaceId: string | null;\n coords: number[];\n isValid: boolean;\n alpha: number;\n};\n\n/**\n * The `ColorController` class is responsible for managing and validating color values\n * in various color spaces (RGB, HSL, HSV, Hex). It provides methods to set, get, and\n * validate colors, as well as convert between different color formats.\n *\n * @class\n * @property {Color} color - Gets or sets the current color value.\n * @property {ColorTypes} colorValue - Gets the color value in various formats based on the original color input.\n * @property {number} hue - Gets or sets the hue value of the current color.\n *\n * @method validateColorString(color: string): ColorValidationResult - Validates a color string and returns the validation result.\n * @method getColor(format: string | ColorSpace): ColorObject - Converts the current color to the specified format.\n * @method getHslString(): string - Returns the current color in HSL string format.\n * @method savePreviousColor(): void - Saves the current color as the previous color.\n * @method restorePreviousColor(): void - Restores the previous color.\n *\n * @constructor\n * @param {ReactiveElement} host - The host element that uses this controller.\n * @param {Object} [options] - Optional configuration options.\n * @param {string} [options.manageAs] - Specifies the color space to manage the color as.\n */\n\nexport class ColorController {\n get color(): Color {\n return this._color;\n }\n\n /**\n * Validates a color string and returns a result indicating the color space,\n * coordinates, alpha value, and whether the color is valid.\n *\n * @param color - The color string to validate. Supported formats include:\n * - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`\n * - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`\n * - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`\n * - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`\n *\n * @returns An object containing the following properties:\n * - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).\n * - `coords`: An array of numeric values representing the color coordinates.\n * - `alpha`: The alpha value of the color (0 to 1).\n * - `isValid`: A boolean indicating whether the color string is valid.\n */\n public validateColorString(color: string): ColorValidationResult {\n const result: ColorValidationResult = {\n spaceId: null,\n coords: [0, 0, 0],\n isValid: false,\n alpha: 1,\n };\n\n const rgbRegExpArray = [\n /rgba\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n /rgb\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*\\)/i,\n /^rgba\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(0|0?\\.\\d+|1)\\s*$/i,\n /^rgb\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*$/i,\n /^rgba\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n /^rgb\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*\\)$/i,\n /rgb\\(\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*\\)/i,\n /rgba\\(\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n ];\n const hslRegExpArray = [\n /hsla\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n /hsl\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i,\n /^hsla\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i,\n /^hsl\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i,\n /^hsla\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n /^hsl\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i,\n ];\n const hsvRegExpArray = [\n /hsva\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i,\n /hsv\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i,\n /^hsva\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i,\n /^hsv\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i,\n /^hsva\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i,\n /^hsv\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i,\n ];\n const hexRegExpArray = [\n /^#([A-Fa-f0-9]{6})(?:\\s*([01](?:\\.\\d+)?))?$/,\n /^#([A-Fa-f0-9]{3})(?:\\s*([01](?:\\.\\d+)?))?$/,\n ];\n\n const rgbaMatch = rgbRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hslaMatch = hslRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hsvaMatch = hsvRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hexMatch = hexRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n\n if (rgbaMatch) {\n const [, r, g, b, a] = rgbaMatch.filter(\n (element) => typeof element === 'string'\n );\n const alpha = a === undefined ? 1 : Number(a);\n const processValue = (value: string): number => {\n if (value.includes('%')) {\n return Number(value.replace('%', '')) / 100;\n } else {\n return Number(value) / 255;\n }\n };\n const numericR = processValue(r);\n const numericG = processValue(g);\n const numericB = processValue(b);\n\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = alpha;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n alpha >= 0 &&\n alpha <= 1;\n } else if (hslaMatch) {\n const [, h, s, l, a] = hslaMatch;\n const values = [h, s, l, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericL, numericA] = values;\n\n result.spaceId = 'hsl';\n result.coords = [numericH, numericS, numericL];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericL >= 0 &&\n numericL <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hsvaMatch) {\n const [, h, s, v, a] = hsvaMatch;\n const values = [h, s, v, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericV, numericA] = values;\n\n result.spaceId = 'hsv';\n result.coords = [numericH, numericS, numericV];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericV >= 0 &&\n numericV <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hexMatch) {\n const [, hex, alpha] = hexMatch;\n\n // Function to process 2-digit or repeated 1-digit hex\n const processHex = (hex: string): number => {\n // For 3-digit hex values, repeat each digit\n if (hex.length === 1) {\n hex = hex + hex;\n }\n return parseInt(hex, 16) / 255;\n };\n\n // Handle both 3-digit and 6-digit hex\n let numericR, numericG, numericB;\n if (hex.length === 3) {\n // 3-digit hex (e.g., #3a7 -> #33aa77)\n numericR = processHex(hex.substring(0, 1));\n numericG = processHex(hex.substring(1, 2));\n numericB = processHex(hex.substring(2, 3));\n } else {\n // 6-digit hex (e.g., #33aa77)\n numericR = processHex(hex.substring(0, 2));\n numericG = processHex(hex.substring(2, 4));\n numericB = processHex(hex.substring(4, 6));\n }\n\n // Numeric alpha: if not provided, default to 1\n const numericA = alpha ? Number(alpha) : 1;\n\n // Validate the color values\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = numericA;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n numericA >= 0 &&\n numericA <= 1;\n }\n\n return result;\n }\n\n /**\n * Represents the color state of the component.\n * Initialized with an HSV color model with hue 0, saturation 100, and value 100, and an alpha value of 1.\n *\n * @private\n * @type {Color}\n */\n private _color: Color = new Color('hsv', [0, 100, 100], 1);\n\n /**\n * Represents the original color value provided by the user.\n *\n * @private\n * @type {ColorTypes}\n */\n private _colorOrigin!: ColorTypes;\n\n /**\n * Gets the original color value provided by the user.\n *\n * @returns {ColorTypes} The original color value.\n */\n get colorOrigin(): ColorTypes {\n return this._colorOrigin;\n }\n\n /**\n * Sets the original color value provided by the user.\n *\n * @param {ColorTypes} colorOrigin - The original color value to set.\n */\n set colorOrigin(colorOrigin: ColorTypes) {\n this._colorOrigin = colorOrigin;\n }\n\n /**\n * An optional string property that specifies how the color should be managed(its value is the name of color space in which color object will be managed).\n * This property can be used to define a specific management strategy or identifier.\n */\n private manageAs?: string;\n\n /**\n * Stores the previous color value.\n * This is used to keep track of the color before any changes are made.\n *\n * @private\n */\n private _previousColor!: Color;\n\n /**\n * Sets the color value for the controller. The color can be provided in various formats:\n * - A string representing a color name, hex code, or other color format.\n * - An instance of the `Color` class.\n * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.\n *\n * The method validates and parses the input color, converting it to a `Color` instance.\n * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.\n *\n * @param {ColorTypes} color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.\n */\n set color(color: ColorTypes) {\n this._colorOrigin = color;\n let newColor!: Color;\n if (typeof color === 'string') {\n const colorValidationResult = this.validateColorString(\n color as string\n );\n if (colorValidationResult.isValid) {\n const [coord1, coord2, coord3] = colorValidationResult.coords;\n newColor = new Color(\n `${colorValidationResult.spaceId}`,\n [coord1, coord2, coord3],\n colorValidationResult.alpha\n );\n } else {\n try {\n Color.parse(color);\n } catch (error) {\n try {\n newColor = new Color(`#${color}`);\n } catch (error) {\n return;\n }\n }\n }\n } else if (color instanceof Color) {\n newColor = color;\n } else if (!Array.isArray(color)) {\n const { h, s, l, v, r, g, b, a } = color as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n a?: string;\n };\n if (typeof h !== 'undefined' && typeof s !== 'undefined') {\n const lv = l ?? v;\n newColor = new Color(\n typeof l !== 'undefined' ? 'hsl' : 'hsv',\n [\n parseFloat(h),\n typeof s !== 'string' ? s * 100 : parseFloat(s),\n typeof lv !== 'string' ? lv * 100 : parseFloat(lv),\n ],\n parseFloat(a || '1')\n );\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n newColor = new Color(\n 'srgb',\n [\n parseFloat(r) / 255,\n parseFloat(g) / 255,\n parseFloat(b) / 255,\n ],\n parseFloat(a || '1')\n );\n }\n }\n\n if (!newColor) {\n newColor = new Color(color as DefaultColorTypes);\n }\n\n if (this.manageAs) {\n this._color = newColor.to(this.manageAs) as Color;\n } else {\n this._color = newColor;\n }\n this.host.requestUpdate();\n }\n\n /**\n * Gets the color value in various formats based on the original color input.\n *\n * The method determines the color space of the original color input and converts\n * the color to the appropriate format. The supported color spaces are:\n * - HSV (Hue, Saturation, Value)\n * - HSL (Hue, Saturation, Lightness)\n * - Hexadecimal (with or without alpha)\n * - RGB (Red, Green, Blue) with optional alpha\n *\n * @returns {ColorTypes} The color value in the appropriate format.\n *\n * The method handles the following cases:\n * - If the original color input is a string, it checks the prefix to determine the color space.\n * - If the original color input is an object, it checks the properties to determine the color space.\n * - If the original color input is not provided, it defaults to the current color space of the color object.\n *\n * The returned color value can be in one of the following formats:\n * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`\n * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`\n * - `#rrggbb` or `#rrggbbaa`\n * - `rgb(r, g, b)` or `rgba(r, g, b, a)`\n * - `{ h, s, v, a }` for HSV object\n * - `{ h, s, l, a }` for HSL object\n * - `{ r, g, b, a }` for RGB object\n */\n get colorValue(): ColorTypes {\n if (typeof this._colorOrigin === 'string') {\n let spaceId = '';\n if (this._colorOrigin.startsWith('#')) {\n spaceId = 'hex string';\n } else if (this._colorOrigin.startsWith('rgb')) {\n spaceId = 'rgb';\n } else if (this._colorOrigin.startsWith('hsl')) {\n spaceId = 'hsl';\n } else if (this._colorOrigin.startsWith('hsv')) {\n spaceId = 'hsv';\n } else {\n spaceId = 'hex';\n }\n switch (spaceId) {\n case 'hsv': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n const a = this._color.alpha;\n return `hsv${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(v)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hsl': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n const a = this._color.alpha;\n return `hsl${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(l)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hex string': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha =\n this._colorOrigin.length === 5 ||\n this._colorOrigin.length === 9;\n const a = this._color.alpha;\n const rHex = Math.round(r * 255).toString(16);\n const gHex = Math.round(g * 255).toString(16);\n const bHex = Math.round(b * 255).toString(16);\n const aHex = Math.round(a * 255).toString(16);\n return `#${rHex.padStart(2, '0')}${gHex.padStart(\n 2,\n '0'\n )}${bHex.padStart(2, '0')}${\n hadAlpha ? aHex.padStart(2, '0') : ''\n }`;\n }\n case 'hex': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha =\n this._colorOrigin.length === 4 ||\n this._colorOrigin.length === 8;\n const a = this._color.alpha;\n const rHex = Math.round(r * 255).toString(16);\n const gHex = Math.round(g * 255).toString(16);\n const bHex = Math.round(b * 255).toString(16);\n const aHex = Math.round(a * 255).toString(16);\n return `${rHex.padStart(2, '0')}${gHex.padStart(\n 2,\n '0'\n )}${bHex.padStart(2, '0')}${\n hadAlpha ? aHex.padStart(2, '0') : ''\n }`;\n }\n //rgb\n default: {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha = this._colorOrigin[3] === 'a';\n const a = this._color.alpha;\n if (this._colorOrigin.search('%') > -1) {\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 100)}%, ${Math.round(\n g * 100\n )}%, ${Math.round(b * 100)}%${hadAlpha ? `,${Math.round(a * 100)}%` : ''})`;\n }\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 255)}, ${Math.round(\n g * 255\n )}, ${Math.round(b * 255)}${hadAlpha ? `, ${a}` : ''})`;\n }\n }\n }\n let spaceId;\n if (this._colorOrigin) {\n try {\n ({ spaceId } = new Color(\n this._colorOrigin as DefaultColorTypes\n ));\n } catch (error) {\n const { h, s, l, v, r, g, b } = this._colorOrigin as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n };\n if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof l !== 'undefined'\n ) {\n spaceId = 'hsl';\n } else if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof v !== 'undefined'\n ) {\n spaceId = 'hsv';\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n spaceId = 'srgb';\n }\n }\n } else {\n ({ spaceId } = this.color);\n }\n switch (spaceId) {\n case 'hsv': {\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n return {\n h,\n s: s / 100,\n v: v / 100,\n a: this._color.alpha,\n };\n }\n case 'hsl': {\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n return {\n h,\n s: s / 100,\n l: l / 100,\n a: this._color.alpha,\n };\n }\n case 'srgb': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n if (\n this._colorOrigin &&\n typeof (this._colorOrigin as { r: string }).r ===\n 'string' &&\n (this._colorOrigin as { r: string }).r.search('%')\n ) {\n return {\n r: `${Math.round(r * 255)}%`,\n g: `${Math.round(g * 255)}%`,\n b: `${Math.round(b * 255)}%`,\n a: this._color.alpha,\n };\n }\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255),\n a: this._color.alpha,\n };\n }\n }\n return this._color;\n }\n\n protected host: ReactiveElement;\n\n /**\n * Gets the hue value of the current color in HSL format.\n *\n * @returns {number} The hue value as a number.\n */\n get hue(): number {\n return Number((this._color.to('hsl') as Color).hsl.h);\n }\n\n /**\n * Sets the hue value of the color and requests an update from the host.\n *\n * @param hue - The hue value to set, represented as a number.\n */\n set hue(hue: number) {\n this._color.set('h', hue);\n this.host.requestUpdate();\n }\n\n /**\n * Creates an instance of ColorController.\n *\n * @param host - The ReactiveElement that this controller is associated with.\n * @param options - An object containing optional parameters.\n * @param options.manageAs - A string to manage the controller as a specific type.\n */\n constructor(\n host: ReactiveElement,\n {\n manageAs,\n }: {\n manageAs?: string;\n } = {}\n ) {\n this.host = host;\n this.manageAs = manageAs;\n }\n\n /**\n * Converts the current color to the specified format.\n *\n * @param format - The desired color format. It can be a string representing one of the valid formats\n * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.\n * @returns The color object in the specified format.\n * @throws Will throw an error if the provided format is not a valid string format.\n */\n getColor(format: string | ColorSpace): ColorObject {\n const validFormats = ['srgb', 'hsva', 'hsv', 'hsl', 'hsla'];\n if (typeof format === 'string' && !validFormats.includes(format)) {\n throw new Error('not a valid format');\n }\n\n return this._color.to(format);\n }\n\n /**\n * Converts the current color to an HSL string representation.\n *\n * @returns {string} The HSL string representation of the current color.\n */\n getHslString(): string {\n return this._color.to('hsl').toString();\n }\n\n /**\n * Saves the current color state by cloning the current color and storing it\n * as the previous color. This allows for the ability to revert to the previous\n * color state if needed.\n *\n * @returns {void}\n */\n savePreviousColor(): void {\n this._previousColor = this._color.clone();\n }\n\n /**\n * Restores the color to the previously saved color value.\n *\n * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).\n */\n restorePreviousColor(): void {\n this._color = this._previousColor;\n }\n}\n"],
|
|
5
|
-
"mappings": "aAaA,OAAOA,MAAW,aAgFX,aAAM,eAAgB,
|
|
6
|
-
"names": ["Color", "host", "manageAs", "color", "_a", "_b", "_c", "_d", "result", "rgbRegExpArray", "hslRegExpArray", "hsvRegExpArray", "hexRegExpArray", "rgbaMatch", "regex", "hslaMatch", "hsvaMatch", "hexMatch", "r", "g", "b", "a", "element", "alpha", "processValue", "value", "numericR", "numericG", "numericB", "h", "s", "l", "values", "numericH", "numericS", "numericL", "numericA", "v", "numericV", "hex", "processHex", "colorOrigin", "
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport type { ReactiveElement } from 'lit';\nimport Color from 'colorjs.io';\nimport type {\n ColorObject,\n ColorTypes as DefaultColorTypes,\n} from 'colorjs.io/types/src/color';\nimport type ColorSpace from 'colorjs.io/types/src/space';\n\n/**\n * Represents various color types that can be used in the application.\n *\n * This type can be one of the following:\n * - `DefaultColorTypes`: A predefined set of color types.\n * - An object representing an RGBA color with properties:\n * - `r`: Red component, can be a number or string.\n * - `g`: Green component, can be a number or string.\n * - `b`: Blue component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSLA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `l`: Lightness component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n * - An object representing an HSVA color with properties:\n * - `h`: Hue component, can be a number or string.\n * - `s`: Saturation component, can be a number or string.\n * - `v`: Value component, can be a number or string.\n * - `a` (optional): Alpha component, can be a number or string.\n */\ntype ColorTypes =\n | DefaultColorTypes\n | {\n r: number | string;\n g: number | string;\n b: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n l: number | string;\n a?: number | string;\n }\n | {\n h: number | string;\n s: number | string;\n v: number | string;\n a?: number | string;\n };\n\nexport type { Color, ColorTypes };\n\ntype ColorValidationResult = {\n spaceId: string | null;\n coords: number[];\n isValid: boolean;\n alpha: number;\n};\n\n/**\n * The `ColorController` class is responsible for managing and validating color values\n * in various color spaces (RGB, HSL, HSV, Hex). It provides methods to set, get, and\n * validate colors, as well as convert between different color formats.\n *\n * @class\n * @property {Color} color - Gets or sets the current color value.\n * @property {ColorTypes} colorValue - Gets the color value in various formats based on the original color input.\n * @property {number} hue - Gets or sets the hue value of the current color.\n *\n * @method validateColorString(color: string): ColorValidationResult - Validates a color string and returns the validation result.\n * @method getColor(format: string | ColorSpace): ColorObject - Converts the current color to the specified format.\n * @method getHslString(): string - Returns the current color in HSL string format.\n * @method savePreviousColor(): void - Saves the current color as the previous color.\n * @method restorePreviousColor(): void - Restores the previous color.\n *\n * @constructor\n * @param {ReactiveElement} host - The host element that uses this controller.\n * @param {Object} [options] - Optional configuration options.\n * @param {string} [options.manageAs] - Specifies the color space to manage the color as.\n */\n\nexport class ColorController {\n get color(): Color {\n return this._color;\n }\n\n /**\n * Validates a color string and returns a result indicating the color space,\n * coordinates, alpha value, and whether the color is valid.\n *\n * @param color - The color string to validate. Supported formats include:\n * - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`\n * - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`\n * - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`\n * - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`\n *\n * @returns An object containing the following properties:\n * - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).\n * - `coords`: An array of numeric values representing the color coordinates.\n * - `alpha`: The alpha value of the color (0 to 1).\n * - `isValid`: A boolean indicating whether the color string is valid.\n */\n public validateColorString(color: string): ColorValidationResult {\n const result: ColorValidationResult = {\n spaceId: null,\n coords: [0, 0, 0],\n isValid: false,\n alpha: 1,\n };\n\n // RGB color formats\n const rgbRegExpArray = [\n // With commas\n /rgba\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // rgba(r, g, b, a)\n /rgb\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*\\)/i, // rgb(r, g, b)\n\n // With spaces\n /^rgba\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(0|0?\\.\\d+|1)\\s*$/i, // rgba r g b a\n /^rgb\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*$/i, // rgb r g b\n\n // Spaces inside parentheses\n /^rgba\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d*\\.?\\d+)\\s*\\)$/i, // rgba(r g b a)\n /^rgb\\(\\s*(\\d{1,3})\\s+(\\d{1,3})\\s+(\\d{1,3})\\s*\\)$/i, // rgb(r g b)\n\n // Percentage values\n /rgb\\(\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*,\\s*(100|[0-9]{1,2}%)\\s*\\)/i, // rgb(r%, g%, b%)\n /rgba\\(\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(100|[0-9]{1,2})%\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // rgba(r%, g%, b%, a)\n ];\n\n // HSL color formats\n const hslRegExpArray = [\n // With commas\n /hsla\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // hsla(h, s, l, a)\n /hsl\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i, // hsl(h, s, l)\n\n // With spaces\n /^hsla\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i, // hsla h s l a\n /^hsl\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i, // hsl h s l\n\n // Spaces inside parentheses\n /^hsla\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i, // hsla(h s l a)\n /^hsl\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i, // hsl(h s l)\n ];\n\n // HSV color formats\n const hsvRegExpArray = [\n // With commas\n /hsva\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d*\\.?\\d+)\\s*\\)/i, // hsva(h, s, v, a)\n /hsv\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}%?)\\s*,\\s*(\\d{1,3}%?)\\s*\\)/i, // hsv(h, s, v)\n\n // With spaces\n /^hsva\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*$/i, // hsva h s v a\n /^hsv\\s+(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*$/i, // hsv h s v\n\n // Spaces inside parentheses\n /^hsva\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s+(\\d*\\.?\\d+)\\s*\\)$/i, // hsva(h s v a)\n /^hsv\\(\\s*(\\d{1,3})\\s+(\\d{1,3}%?)\\s+(\\d{1,3}%?)\\s*\\)$/i, // hsv(h s v)\n ];\n\n // HEX color formats\n const hexRegExpArray = [\n /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/, // 6-digit hex with optional hex alpha\n /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/, // 3-digit hex with optional hex alpha\n ];\n\n const rgbaMatch = rgbRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hslaMatch = hslRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hsvaMatch = hsvRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n const hexMatch = hexRegExpArray\n .find((regex) => regex.test(color))\n ?.exec(color);\n\n if (rgbaMatch) {\n const [, r, g, b, a] = rgbaMatch.filter(\n (element) => typeof element === 'string'\n );\n const alpha = a === undefined ? 1 : Number(a);\n const processValue = (value: string): number => {\n if (value.includes('%')) {\n return Number(value.replace('%', '')) / 100;\n } else {\n return Number(value) / 255;\n }\n };\n const numericR = processValue(r);\n const numericG = processValue(g);\n const numericB = processValue(b);\n\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = alpha;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n alpha >= 0 &&\n alpha <= 1;\n } else if (hslaMatch) {\n const [, h, s, l, a] = hslaMatch;\n const values = [h, s, l, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericL, numericA] = values;\n\n result.spaceId = 'hsl';\n result.coords = [numericH, numericS, numericL];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericL >= 0 &&\n numericL <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hsvaMatch) {\n const [, h, s, v, a] = hsvaMatch;\n const values = [h, s, v, a === undefined ? '1' : a].map((value) =>\n Number(value.replace(/[^\\d.]/g, ''))\n );\n const [numericH, numericS, numericV, numericA] = values;\n\n result.spaceId = 'hsv';\n result.coords = [numericH, numericS, numericV];\n result.alpha = numericA;\n result.isValid =\n numericH >= 0 &&\n numericH <= 360 &&\n numericS >= 0 &&\n numericS <= 100 &&\n numericV >= 0 &&\n numericV <= 100 &&\n numericA >= 0 &&\n numericA <= 1;\n } else if (hexMatch) {\n const [, hex, alphaHex] = hexMatch;\n\n // Function to process 2-digit or repeated 1-digit hex\n const processHex = (hex: string): number => {\n // For 3-digit hex values, repeat each digit\n if (hex.length === 1) {\n hex = hex + hex;\n }\n return parseInt(hex, 16) / 255;\n };\n\n // Handle both 3-digit and 6-digit hex\n let numericR, numericG, numericB;\n if (hex.length === 3) {\n // 3-digit hex (e.g., #3a7 -> #33aa77)\n numericR = processHex(hex.substring(0, 1));\n numericG = processHex(hex.substring(1, 2));\n numericB = processHex(hex.substring(2, 3));\n } else {\n // 6-digit hex (e.g., #33aa77)\n numericR = processHex(hex.substring(0, 2));\n numericG = processHex(hex.substring(2, 4));\n numericB = processHex(hex.substring(4, 6));\n }\n\n // Process hex alpha if provided (convert from 0-255 to 0-1)\n const numericA = alphaHex ? processHex(alphaHex) : 1;\n\n // Validate the color values\n result.spaceId = 'srgb';\n result.coords = [numericR, numericG, numericB];\n result.alpha = numericA;\n result.isValid =\n numericR >= 0 &&\n numericR <= 1 &&\n numericG >= 0 &&\n numericG <= 1 &&\n numericB >= 0 &&\n numericB <= 1 &&\n numericA >= 0 &&\n numericA <= 1;\n }\n\n return result;\n }\n\n /**\n * Represents the color state of the component.\n * Initialized with an HSV color model with hue 0, saturation 100, and value 100, and an alpha value of 1.\n *\n * @private\n * @type {Color}\n */\n private _color: Color = new Color('hsv', [0, 100, 100], 1);\n\n /**\n * Represents the original color value provided by the user.\n *\n * @private\n * @type {ColorTypes}\n */\n private _colorOrigin!: ColorTypes;\n\n /**\n * Gets the original color value provided by the user.\n *\n * @returns {ColorTypes} The original color value.\n */\n get colorOrigin(): ColorTypes {\n return this._colorOrigin;\n }\n\n /**\n * Sets the original color value provided by the user.\n *\n * @param {ColorTypes} colorOrigin - The original color value to set.\n */\n set colorOrigin(colorOrigin: ColorTypes) {\n this._colorOrigin = colorOrigin;\n }\n\n /**\n * An optional string property that specifies how the color should be managed(its value is the name of color space in which color object will be managed).\n * This property can be used to define a specific management strategy or identifier.\n */\n private manageAs?: string;\n\n /**\n * Stores the previous color value.\n * This is used to keep track of the color before any changes are made.\n *\n * @private\n */\n private _previousColor!: Color;\n\n /**\n * Private helper method to convert RGB color to hex format with optional alpha\n *\n * @private\n * @param {boolean} includeHash - Whether to include the # prefix in the returned string\n * @param {boolean} includeAlpha - Whether to include the alpha channel in the returned string\n * @returns {string} The color in hex format\n */\n private _getHexString(includeHash: boolean, includeAlpha: boolean): string {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const a = this._color.alpha;\n\n const rHex = Math.round(r * 255)\n .toString(16)\n .padStart(2, '0');\n const gHex = Math.round(g * 255)\n .toString(16)\n .padStart(2, '0');\n const bHex = Math.round(b * 255)\n .toString(16)\n .padStart(2, '0');\n const aHex = Math.round(a * 255)\n .toString(16)\n .padStart(2, '0');\n\n return `${includeHash ? '#' : ''}${rHex}${gHex}${bHex}${includeAlpha ? aHex : ''}`;\n }\n\n /**\n * Sets the color value for the controller. The color can be provided in various formats:\n * - A string representing a color name, hex code, or other color format.\n * - An instance of the `Color` class.\n * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.\n *\n * The method validates and parses the input color, converting it to a `Color` instance.\n * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.\n *\n * @param {ColorTypes} color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.\n */\n set color(color: ColorTypes) {\n this._colorOrigin = color;\n let newColor!: Color;\n if (typeof color === 'string') {\n const colorValidationResult = this.validateColorString(\n color as string\n );\n if (colorValidationResult.isValid) {\n const [coord1, coord2, coord3] = colorValidationResult.coords;\n newColor = new Color(\n `${colorValidationResult.spaceId}`,\n [coord1, coord2, coord3],\n colorValidationResult.alpha\n );\n } else {\n try {\n Color.parse(color);\n } catch (error) {\n try {\n newColor = new Color(`#${color}`);\n } catch (error) {\n return;\n }\n }\n }\n } else if (color instanceof Color) {\n newColor = color;\n } else if (!Array.isArray(color)) {\n const { h, s, l, v, r, g, b, a } = color as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n a?: string;\n };\n if (typeof h !== 'undefined' && typeof s !== 'undefined') {\n const lv = l ?? v;\n newColor = new Color(\n typeof l !== 'undefined' ? 'hsl' : 'hsv',\n [\n parseFloat(h),\n typeof s !== 'string' ? s * 100 : parseFloat(s),\n typeof lv !== 'string' ? lv * 100 : parseFloat(lv),\n ],\n parseFloat(a || '1')\n );\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n newColor = new Color(\n 'srgb',\n [\n parseFloat(r) / 255,\n parseFloat(g) / 255,\n parseFloat(b) / 255,\n ],\n parseFloat(a || '1')\n );\n }\n }\n\n if (!newColor) {\n newColor = new Color(color as DefaultColorTypes);\n }\n\n if (this.manageAs) {\n this._color = newColor.to(this.manageAs) as Color;\n } else {\n this._color = newColor;\n }\n this.host.requestUpdate();\n }\n\n /**\n * Gets the color value in various formats based on the original color input.\n *\n * The method determines the color space of the original color input and converts\n * the color to the appropriate format. The supported color spaces are:\n * - HSV (Hue, Saturation, Value)\n * - HSL (Hue, Saturation, Lightness)\n * - Hexadecimal (with or without alpha)\n * - RGB (Red, Green, Blue) with optional alpha\n *\n * @returns {ColorTypes} The color value in the appropriate format.\n *\n * The method handles the following cases:\n * - If the original color input is a string, it checks the prefix to determine the color space.\n * - If the original color input is an object, it checks the properties to determine the color space.\n * - If the original color input is not provided, it defaults to the current color space of the color object.\n *\n * The returned color value can be in one of the following formats:\n * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`\n * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`\n * - `#rrggbb` or `#rrggbbaa`\n * - `rgb(r, g, b)` or `rgba(r, g, b, a)`\n * - `{ h, s, v, a }` for HSV object\n * - `{ h, s, l, a }` for HSL object\n * - `{ r, g, b, a }` for RGB object\n */\n get colorValue(): ColorTypes {\n if (typeof this._colorOrigin === 'string') {\n let spaceId = '';\n if (this._colorOrigin.startsWith('#')) {\n spaceId = 'hex string';\n } else if (this._colorOrigin.startsWith('rgb')) {\n spaceId = 'rgb';\n } else if (this._colorOrigin.startsWith('hsl')) {\n spaceId = 'hsl';\n } else if (this._colorOrigin.startsWith('hsv')) {\n spaceId = 'hsv';\n } else {\n spaceId = 'hex';\n }\n switch (spaceId) {\n case 'hsv': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n const a = this._color.alpha;\n return `hsv${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(v)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hsl': {\n const hadAlpha = this._colorOrigin[3] === 'a';\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n const a = this._color.alpha;\n return `hsl${hadAlpha ? `a` : ''}(${Math.round(\n h\n )}, ${Math.round(s)}%, ${Math.round(l)}%${\n hadAlpha ? `, ${a}` : ''\n })`;\n }\n case 'hex string': {\n // Check if the original input included alpha\n const hadAlpha =\n this._colorOrigin.length === 9 || // #RRGGBBAA format\n this._colorOrigin.length === 5; // #RGBA format\n return this._getHexString(true, hadAlpha);\n }\n case 'hex': {\n // Check if the original input included alpha\n const hadAlpha =\n this._colorOrigin.length === 8 || // RRGGBBAA format (no #)\n this._colorOrigin.length === 4; // RGBA format (no #)\n return this._getHexString(false, hadAlpha);\n }\n //rgb\n default: {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n const hadAlpha = this._colorOrigin[3] === 'a';\n const a = this._color.alpha;\n if (this._colorOrigin.search('%') > -1) {\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 100)}%, ${Math.round(\n g * 100\n )}%, ${Math.round(b * 100)}%${hadAlpha ? `,${Math.round(a * 100)}%` : ''})`;\n }\n return `rgb${hadAlpha ? `a` : ''}(${Math.round(r * 255)}, ${Math.round(\n g * 255\n )}, ${Math.round(b * 255)}${hadAlpha ? `, ${a}` : ''})`;\n }\n }\n }\n let spaceId;\n if (this._colorOrigin) {\n try {\n ({ spaceId } = new Color(\n this._colorOrigin as DefaultColorTypes\n ));\n } catch (error) {\n const { h, s, l, v, r, g, b } = this._colorOrigin as {\n h: string;\n s: string;\n l: string;\n v: string;\n r: string;\n g: string;\n b: string;\n };\n if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof l !== 'undefined'\n ) {\n spaceId = 'hsl';\n } else if (\n typeof h !== 'undefined' &&\n typeof s !== 'undefined' &&\n typeof v !== 'undefined'\n ) {\n spaceId = 'hsv';\n } else if (\n typeof r !== 'undefined' &&\n typeof g !== 'undefined' &&\n typeof b !== 'undefined'\n ) {\n spaceId = 'srgb';\n }\n }\n } else {\n ({ spaceId } = this.color);\n }\n switch (spaceId) {\n case 'hsv': {\n const { h, s, v } = (this._color.to('hsv') as Color).hsv;\n return {\n h,\n s: s / 100,\n v: v / 100,\n a: this._color.alpha,\n };\n }\n case 'hsl': {\n const { h, s, l } = (this._color.to('hsl') as Color).hsl;\n return {\n h,\n s: s / 100,\n l: l / 100,\n a: this._color.alpha,\n };\n }\n case 'srgb': {\n const { r, g, b } = (this._color.to('srgb') as Color).srgb;\n if (\n this._colorOrigin &&\n typeof (this._colorOrigin as { r: string }).r ===\n 'string' &&\n (this._colorOrigin as { r: string }).r.search('%')\n ) {\n return {\n r: `${Math.round(r * 255)}%`,\n g: `${Math.round(g * 255)}%`,\n b: `${Math.round(b * 255)}%`,\n a: this._color.alpha,\n };\n }\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255),\n a: this._color.alpha,\n };\n }\n }\n return this._color;\n }\n\n protected host: ReactiveElement;\n\n /**\n * Gets the hue value of the current color in HSL format.\n *\n * @returns {number} The hue value as a number.\n */\n get hue(): number {\n return Number((this._color.to('hsl') as Color).hsl.h);\n }\n\n /**\n * Sets the hue value of the color and requests an update from the host.\n *\n * @param hue - The hue value to set, represented as a number.\n */\n set hue(hue: number) {\n this._color.set('h', hue);\n this.host.requestUpdate();\n }\n\n /**\n * Creates an instance of ColorController.\n *\n * @param host - The ReactiveElement that this controller is associated with.\n * @param options - An object containing optional parameters.\n * @param options.manageAs - A string to manage the controller as a specific type.\n */\n constructor(\n host: ReactiveElement,\n {\n manageAs,\n }: {\n manageAs?: string;\n } = {}\n ) {\n this.host = host;\n this.manageAs = manageAs;\n }\n\n /**\n * Converts the current color to the specified format.\n *\n * @param format - The desired color format. It can be a string representing one of the valid formats\n * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.\n * @returns The color object in the specified format.\n * @throws Will throw an error if the provided format is not a valid string format.\n */\n getColor(format: string | ColorSpace): ColorObject {\n const validFormats = ['srgb', 'hsva', 'hsv', 'hsl', 'hsla'];\n if (typeof format === 'string' && !validFormats.includes(format)) {\n throw new Error('not a valid format');\n }\n\n return this._color.to(format);\n }\n\n /**\n * Converts the current color to an HSL string representation.\n *\n * @returns {string} The HSL string representation of the current color.\n */\n getHslString(): string {\n return this._color.to('hsl').toString();\n }\n\n /**\n * Saves the current color state by cloning the current color and storing it\n * as the previous color. This allows for the ability to revert to the previous\n * color state if needed.\n *\n * @returns {void}\n */\n savePreviousColor(): void {\n this._previousColor = this._color.clone();\n }\n\n /**\n * Restores the color to the previously saved color value.\n *\n * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).\n */\n restorePreviousColor(): void {\n this._color = this._previousColor;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Color", "host", "manageAs", "color", "_a", "_b", "_c", "_d", "result", "rgbRegExpArray", "hslRegExpArray", "hsvRegExpArray", "hexRegExpArray", "rgbaMatch", "regex", "hslaMatch", "hsvaMatch", "hexMatch", "r", "g", "b", "a", "element", "alpha", "processValue", "value", "numericR", "numericG", "numericB", "h", "s", "l", "values", "numericH", "numericS", "numericL", "numericA", "v", "numericV", "hex", "alphaHex", "processHex", "colorOrigin", "includeHash", "includeAlpha", "rHex", "gHex", "bHex", "aHex", "newColor", "colorValidationResult", "coord1", "coord2", "coord3", "error", "lv", "spaceId", "hadAlpha", "hue", "format"]
|
|
7
7
|
}
|