color-util-helpers 1.0.7 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -2
- package/color-util-helpers-1.0.10.tgz +0 -0
- package/esm2022/color-util-helpers.mjs +5 -0
- package/esm2022/lib/color-conversion.service.mjs +39 -0
- package/esm2022/lib/color-extractor.directive.mjs +37 -0
- package/esm2022/lib/color-grab.directive.mjs +185 -0
- package/esm2022/lib/color-lighten-darken.service.mjs +79 -0
- package/esm2022/lib/color-pallette.service.mjs +172 -0
- package/esm2022/lib/color-scheme.service.mjs +113 -0
- package/esm2022/lib/color-utilities-demo/color-utilities-demo.component.mjs +41 -0
- package/esm2022/lib/color-utils.module.mjs +38 -0
- package/esm2022/lib/text-color.service.mjs +79 -0
- package/esm2022/public-api.mjs +13 -0
- package/fesm2022/color-util-helpers.mjs +767 -0
- package/fesm2022/color-util-helpers.mjs.map +1 -0
- package/index.d.ts +5 -0
- package/lib/color-conversion.service.d.ts +8 -0
- package/lib/color-extractor.directive.d.ts +13 -0
- package/lib/color-grab.directive.d.ts +31 -0
- package/lib/color-lighten-darken.service.d.ts +10 -0
- package/lib/color-pallette.service.d.ts +36 -0
- package/lib/color-scheme.service.d.ts +45 -0
- package/lib/color-utilities-demo/color-utilities-demo.component.d.ts +34 -0
- package/lib/color-utils.module.d.ts +12 -0
- package/lib/text-color.service.d.ts +18 -0
- package/package.json +15 -2
- package/{src/public-api.ts → public-api.d.ts} +0 -6
- package/ng-package.json +0 -8
- package/src/lib/assets/picture.webp +0 -0
- package/src/lib/color-conversion.service.spec.ts +0 -54
- package/src/lib/color-conversion.service.ts +0 -35
- package/src/lib/color-extractor.directive.spec.ts +0 -49
- package/src/lib/color-extractor.directive.ts +0 -28
- package/src/lib/color-grab.directive.ts +0 -204
- package/src/lib/color-lighten-darken.service.spec.ts +0 -61
- package/src/lib/color-lighten-darken.service.ts +0 -83
- package/src/lib/color-pallette.service.spec.ts +0 -85
- package/src/lib/color-pallette.service.ts +0 -191
- package/src/lib/color-scheme.service.ts +0 -123
- package/src/lib/color-utilities-demo/color-utilities-demo.component.css +0 -12
- package/src/lib/color-utilities-demo/color-utilities-demo.component.html +0 -109
- package/src/lib/color-utilities-demo/color-utilities-demo.component.ts +0 -57
- package/src/lib/color-utils.module.ts +0 -27
- package/src/lib/text-color.service.spec.ts +0 -75
- package/src/lib/text-color.service.ts +0 -101
- package/tsconfig.lib.json +0 -32
- package/tsconfig.lib.prod.json +0 -10
- package/tsconfig.spec.json +0 -14
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { Injectable } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class ColorSchemeService {
|
|
4
|
+
constructor() { }
|
|
5
|
+
/**
|
|
6
|
+
* Generates a random hexadecimal color code.
|
|
7
|
+
*
|
|
8
|
+
* This function generates a random hue value between 0 and 360 degrees, and random saturation and lightness values between 50% and 100%. It then converts the HSL values to RGB values using the `hslToRgb` function, and finally converts the RGB values to a hexadecimal color code using the `rgbToHex` function.
|
|
9
|
+
*
|
|
10
|
+
* @returns A hexadecimal color code in the format "#RRGGBB".
|
|
11
|
+
*/
|
|
12
|
+
generateRandomColor() {
|
|
13
|
+
// Generate a random hue between 0 and 360 (representing degrees on the color wheel)
|
|
14
|
+
const hue = Math.floor(Math.random() * 360);
|
|
15
|
+
// Generate random saturation and lightness values between 50% and 100%
|
|
16
|
+
const saturation = Math.floor(Math.random() * 51) + 50;
|
|
17
|
+
const lightness = Math.floor(Math.random() * 51) + 50;
|
|
18
|
+
// Convert HSL values to RGB values
|
|
19
|
+
const rgbColor = this.hslToRgb(hue, saturation, lightness);
|
|
20
|
+
// Convert RGB values to hexadecimal color code
|
|
21
|
+
const hexColor = this.rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b);
|
|
22
|
+
return hexColor;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Converts HSL (Hue, Saturation, Lightness) color values to RGB (Red, Green, Blue) color values.
|
|
26
|
+
*
|
|
27
|
+
* @param h - The hue value, ranging from 0 to 360 degrees.
|
|
28
|
+
* @param s - The saturation value, ranging from 0 to 100 percent.
|
|
29
|
+
* @param l - The lightness value, ranging from 0 to 100 percent.
|
|
30
|
+
* @returns An object with the RGB color values, where each value is between 0 and 255.
|
|
31
|
+
*/
|
|
32
|
+
hslToRgb(h, s, l) {
|
|
33
|
+
h /= 360;
|
|
34
|
+
s /= 100;
|
|
35
|
+
l /= 100;
|
|
36
|
+
let r, g, b;
|
|
37
|
+
if (s === 0) {
|
|
38
|
+
r = g = b = l; // Achromatic color (gray)
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
const hueToRgb = (p, q, t) => {
|
|
42
|
+
if (t < 0)
|
|
43
|
+
t += 1;
|
|
44
|
+
if (t > 1)
|
|
45
|
+
t -= 1;
|
|
46
|
+
if (t < 1 / 6)
|
|
47
|
+
return p + (q - p) * 6 * t;
|
|
48
|
+
if (t < 1 / 2)
|
|
49
|
+
return q;
|
|
50
|
+
if (t < 2 / 3)
|
|
51
|
+
return p + (q - p) * (2 / 3 - t) * 6;
|
|
52
|
+
return p;
|
|
53
|
+
};
|
|
54
|
+
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
55
|
+
const p = 2 * l - q;
|
|
56
|
+
r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255);
|
|
57
|
+
g = Math.round(hueToRgb(p, q, h) * 255);
|
|
58
|
+
b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255);
|
|
59
|
+
}
|
|
60
|
+
return { r, g, b };
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Converts RGB color values to a hexadecimal color string.
|
|
64
|
+
*
|
|
65
|
+
* @param r - The red color value, between 0 and 255.
|
|
66
|
+
* @param g - The green color value, between 0 and 255.
|
|
67
|
+
* @param b - The blue color value, between 0 and 255.
|
|
68
|
+
* @returns A hexadecimal color string in the format "#RRGGBB".
|
|
69
|
+
*/
|
|
70
|
+
rgbToHex(r, g, b) {
|
|
71
|
+
const componentToHex = (c) => {
|
|
72
|
+
const hex = c.toString(16);
|
|
73
|
+
return hex.length === 1 ? "0" + hex : hex;
|
|
74
|
+
};
|
|
75
|
+
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Adjusts a hexadecimal color value by a given percentage.
|
|
79
|
+
*
|
|
80
|
+
* @param hexColor - The hexadecimal color value to adjust.
|
|
81
|
+
* @param percentage - The percentage to adjust the color by, ranging from -100 to 100.
|
|
82
|
+
* @returns The adjusted hexadecimal color value.
|
|
83
|
+
*/
|
|
84
|
+
adjustHexColor(hexColor, percentage) {
|
|
85
|
+
// Remove the "#" symbol if present
|
|
86
|
+
hexColor = hexColor.replace("#", "");
|
|
87
|
+
// Convert the hex color to RGB values
|
|
88
|
+
const red = parseInt(hexColor.substring(0, 2), 16);
|
|
89
|
+
const green = parseInt(hexColor.substring(2, 4), 16);
|
|
90
|
+
const blue = parseInt(hexColor.substring(4, 6), 16);
|
|
91
|
+
// Calculate the adjustment amount based on the percentage
|
|
92
|
+
const adjustAmount = Math.round(255 * (percentage / 100));
|
|
93
|
+
// Adjust the RGB values
|
|
94
|
+
const adjustedRed = this.clamp(red + adjustAmount);
|
|
95
|
+
const adjustedGreen = this.clamp(green + adjustAmount);
|
|
96
|
+
const adjustedBlue = this.clamp(blue + adjustAmount);
|
|
97
|
+
// Convert the adjusted RGB values back to hex
|
|
98
|
+
const adjustedHexColor = `#${(adjustedRed).toString(16).padStart(2, '0')}${(adjustedGreen).toString(16).padStart(2, '0')}${(adjustedBlue).toString(16).padStart(2, '0')}`;
|
|
99
|
+
return adjustedHexColor;
|
|
100
|
+
}
|
|
101
|
+
clamp(value) {
|
|
102
|
+
return Math.max(0, Math.min(value, 255));
|
|
103
|
+
}
|
|
104
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
105
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorSchemeService, providedIn: 'root' }); }
|
|
106
|
+
}
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorSchemeService, decorators: [{
|
|
108
|
+
type: Injectable,
|
|
109
|
+
args: [{
|
|
110
|
+
providedIn: 'root'
|
|
111
|
+
}]
|
|
112
|
+
}], ctorParameters: function () { return []; } });
|
|
113
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itc2NoZW1lLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb2xvci11dGlsLWhlbHBlcnMvc3JjL2xpYi9jb2xvci1zY2hlbWUuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUszQyxNQUFNLE9BQU8sa0JBQWtCO0lBRTdCLGdCQUFnQixDQUFDO0lBRWpCOzs7Ozs7T0FNRztJQUNILG1CQUFtQjtRQUNqQixvRkFBb0Y7UUFDcEYsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsR0FBRyxDQUFDLENBQUM7UUFFNUMsdUVBQXVFO1FBQ3ZFLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxHQUFHLEVBQUUsQ0FBQztRQUN2RCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsR0FBRyxFQUFFLENBQUM7UUFFdEQsbUNBQW1DO1FBQ25DLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFLFVBQVUsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUUzRCwrQ0FBK0M7UUFDL0MsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLFFBQVEsQ0FBQyxDQUFDLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBRW5FLE9BQU8sUUFBUSxDQUFDO0lBQ2xCLENBQUM7SUFFRDs7Ozs7OztPQU9HO0lBQ0gsUUFBUSxDQUFDLENBQVMsRUFBRSxDQUFTLEVBQUUsQ0FBUztRQUN0QyxDQUFDLElBQUksR0FBRyxDQUFDO1FBQ1QsQ0FB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QixPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDM0MsQ0FBQzsrR0FuSFUsa0JBQWtCO21IQUFsQixrQkFBa0IsY0FGakIsTUFBTTs7NEZBRVAsa0JBQWtCO2tCQUg5QixVQUFVO21CQUFDO29CQUNWLFVBQVUsRUFBRSxNQUFNO2lCQUNuQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQEluamVjdGFibGUoe1xuICBwcm92aWRlZEluOiAncm9vdCdcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JTY2hlbWVTZXJ2aWNlIHtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIC8qKlxuICAgKiBHZW5lcmF0ZXMgYSByYW5kb20gaGV4YWRlY2ltYWwgY29sb3IgY29kZS5cbiAgICpcbiAgICogVGhpcyBmdW5jdGlvbiBnZW5lcmF0ZXMgYSByYW5kb20gaHVlIHZhbHVlIGJldHdlZW4gMCBhbmQgMzYwIGRlZ3JlZXMsIGFuZCByYW5kb20gc2F0dXJhdGlvbiBhbmQgbGlnaHRuZXNzIHZhbHVlcyBiZXR3ZWVuIDUwJSBhbmQgMTAwJS4gSXQgdGhlbiBjb252ZXJ0cyB0aGUgSFNMIHZhbHVlcyB0byBSR0IgdmFsdWVzIHVzaW5nIHRoZSBgaHNsVG9SZ2JgIGZ1bmN0aW9uLCBhbmQgZmluYWxseSBjb252ZXJ0cyB0aGUgUkdCIHZhbHVlcyB0byBhIGhleGFkZWNpbWFsIGNvbG9yIGNvZGUgdXNpbmcgdGhlIGByZ2JUb0hleGAgZnVuY3Rpb24uXG4gICAqXG4gICAqIEByZXR1cm5zIEEgaGV4YWRlY2ltYWwgY29sb3IgY29kZSBpbiB0aGUgZm9ybWF0IFwiI1JSR0dCQlwiLlxuICAgKi9cbiAgZ2VuZXJhdGVSYW5kb21Db2xvcigpIHtcbiAgICAvLyBHZW5lcmF0ZSBhIHJhbmRvbSBodWUgYmV0d2VlbiAwIGFuZCAzNjAgKHJlcHJlc2VudGluZyBkZWdyZWVzIG9uIHRoZSBjb2xvciB3aGVlbClcbiAgICBjb25zdCBodWUgPSBNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAzNjApO1xuXG4gICAgLy8gR2VuZXJhdGUgcmFuZG9tIHNhdHVyYXRpb24gYW5kIGxpZ2h0bmVzcyB2YWx1ZXMgYmV0d2VlbiA1MCUgYW5kIDEwMCVcbiAgICBjb25zdCBzYXR1cmF0aW9uID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNTEpICsgNTA7XG4gICAgY29uc3QgbGlnaHRuZXNzID0gTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNTEpICsgNTA7XG5cbiAgICAvLyBDb252ZXJ0IEhTTCB2YWx1ZXMgdG8gUkdCIHZhbHVlc1xuICAgIGNvbnN0IHJnYkNvbG9yID0gdGhpcy5oc2xUb1JnYihodWUsIHNhdHVyYXRpb24sIGxpZ2h0bmVzcyk7XG5cbiAgICAvLyBDb252ZXJ0IFJHQiB2YWx1ZXMgdG8gaGV4YWRlY2ltYWwgY29sb3IgY29kZVxuICAgIGNvbnN0IGhleENvbG9yID0gdGhpcy5yZ2JUb0hleChyZ2JDb2xvci5yLCByZ2JDb2xvci5nLCByZ2JDb2xvci5iKTtcblxuICAgIHJldHVybiBoZXhDb2xvcjtcbiAgfVxuXG4gIC8qKlxuICAgKiBDb252ZXJ0cyBIU0wgKEh1ZSwgU2F0dXJhdGlvbiwgTGlnaHRuZXNzKSBjb2xvciB2YWx1ZXMgdG8gUkdCIChSZWQsIEdyZWVuLCBCbHVlKSBjb2xvciB2YWx1ZXMuXG4gICAqXG4gICAqIEBwYXJhbSBoIC0gVGhlIGh1ZSB2YWx1ZSwgcmFuZ2luZyBmcm9tIDAgdG8gMzYwIGRlZ3JlZXMuXG4gICAqIEBwYXJhbSBzIC0gVGhlIHNhdHVyYXRpb24gdmFsdWUsIHJhbmdpbmcgZnJvbSAwIHRvIDEwMCBwZXJjZW50LlxuICAgKiBAcGFyYW0gbCAtIFRoZSBsaWdodG5lc3MgdmFsdWUsIHJhbmdpbmcgZnJvbSAwIHRvIDEwMCBwZXJjZW50LlxuICAgKiBAcmV0dXJucyBBbiBvYmplY3Qgd2l0aCB0aGUgUkdCIGNvbG9yIHZhbHVlcywgd2hlcmUgZWFjaCB2YWx1ZSBpcyBiZXR3ZWVuIDAgYW5kIDI1NS5cbiAgICovXG4gIGhzbFRvUmdiKGg6IG51bWJlciwgczogbnVtYmVyLCBsOiBudW1iZXIpIHtcbiAgICBoIC89IDM2MDtcbiAgICBzIC89IDEwMDtcbiAgICBsIC89IDEwMDtcblxuICAgIGxldCByLCBnLCBiO1xuXG4gICAgaWYgKHMgPT09IDApIHtcbiAgICAgIHIgPSBnID0gYiA9IGw7IC8vIEFjaHJvbWF0aWMgY29sb3IgKGdyYXkpXG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnN0IGh1ZVRvUmdiID0gKHA6IG51bWJlciwgcTogbnVtYmVyLCB0OiBudW1iZXIpID0+IHtcbiAgICAgICAgaWYgKHQgPCAwKSB0ICs9IDE7XG4gICAgICAgIGlmICh0ID4gMSkgdCAtPSAxO1xuICAgICAgICBpZiAodCA8IDEgLyA2KSByZXR1cm4gcCArIChxIC0gcCkgKiA2ICogdDtcbiAgICAgICAgaWYgKHQgPCAxIC8gMikgcmV0dXJuIHE7XG4gICAgICAgIGlmICh0IDwgMiAvIDMpIHJldHVybiBwICsgKHEgLSBwKSAqICgyIC8gMyAtIHQpICogNjtcbiAgICAgICAgcmV0dXJuIHA7XG4gICAgICB9O1xuXG4gICAgICBjb25zdCBxID0gbCA8IDAuNSA/IGwgKiAoMSArIHMpIDogbCArIHMgLSBsICogcztcbiAgICAgIGNvbnN0IHAgPSAyICogbCAtIHE7XG5cbiAgICAgIHIgPSBNYXRoLnJvdW5kKGh1ZVRvUmdiKHAsIHEsIGggKyAxIC8gMykgKiAyNTUpO1xuICAgICAgZyA9IE1hdGgucm91bmQoaHVlVG9SZ2IocCwgcSwgaCkgKiAyNTUpO1xuICAgICAgYiA9IE1hdGgucm91bmQoaHVlVG9SZ2IocCwgcSwgaCAtIDEgLyAzKSAqIDI1NSk7XG4gICAgfVxuXG4gICAgcmV0dXJuIHsgciwgZywgYiB9O1xuICB9XG5cbiAgLyoqXG4gICAqIENvbnZlcnRzIFJHQiBjb2xvciB2YWx1ZXMgdG8gYSBoZXhhZGVjaW1hbCBjb2xvciBzdHJpbmcuXG4gICAqXG4gICAqIEBwYXJhbSByIC0gVGhlIHJlZCBjb2xvciB2YWx1ZSwgYmV0d2VlbiAwIGFuZCAyNTUuXG4gICAqIEBwYXJhbSBnIC0gVGhlIGdyZWVuIGNvbG9yIHZhbHVlLCBiZXR3ZWVuIDAgYW5kIDI1NS5cbiAgICogQHBhcmFtIGIgLSBUaGUgYmx1ZSBjb2xvciB2YWx1ZSwgYmV0d2VlbiAwIGFuZCAyNTUuXG4gICAqIEByZXR1cm5zIEEgaGV4YWRlY2ltYWwgY29sb3Igc3RyaW5nIGluIHRoZSBmb3JtYXQgXCIjUlJHR0JCXCIuXG4gICAqL1xuICByZ2JUb0hleChyOiBudW1iZXIsIGc6IG51bWJlciwgYjogbnVtYmVyKSB7XG4gICAgY29uc3QgY29tcG9uZW50VG9IZXggPSAoYzogbnVtYmVyKSA9PiB7XG4gICAgICBjb25zdCBoZXggPSBjLnRvU3RyaW5nKDE2KTtcbiAgICAgIHJldHVybiBoZXgubGVuZ3RoID09PSAxID8gXCIwXCIgKyBoZXggOiBoZXg7XG4gICAgfTtcblxuICAgIHJldHVybiBcIiNcIiArIGNvbXBvbmVudFRvSGV4KHIpICsgY29tcG9uZW50VG9IZXgoZykgKyBjb21wb25lbnRUb0hleChiKTtcbiAgfVxuXG4gICAgLyoqXG4gICAqIEFkanVzdHMgYSBoZXhhZGVjaW1hbCBjb2xvciB2YWx1ZSBieSBhIGdpdmVuIHBlcmNlbnRhZ2UuXG4gICAqXG4gICAqIEBwYXJhbSBoZXhDb2xvciAtIFRoZSBoZXhhZGVjaW1hbCBjb2xvciB2YWx1ZSB0byBhZGp1c3QuXG4gICAqIEBwYXJhbSBwZXJjZW50YWdlIC0gVGhlIHBlcmNlbnRhZ2UgdG8gYWRqdXN0IHRoZSBjb2xvciBieSwgcmFuZ2luZyBmcm9tIC0xMDAgdG8gMTAwLlxuICAgKiBAcmV0dXJucyBUaGUgYWRqdXN0ZWQgaGV4YWRlY2ltYWwgY29sb3IgdmFsdWUuXG4gICAqL1xuICBhZGp1c3RIZXhDb2xvcihoZXhDb2xvcjogc3RyaW5nLCBwZXJjZW50YWdlOiBudW1iZXIpIHtcbiAgICAvLyBSZW1vdmUgdGhlIFwiI1wiIHN5bWJvbCBpZiBwcmVzZW50XG4gICAgaGV4Q29sb3IgPSBoZXhDb2xvci5yZXBsYWNlKFwiI1wiLCBcIlwiKTtcblxuICAgIC8vIENvbnZlcnQgdGhlIGhleCBjb2xvciB0byBSR0IgdmFsdWVzXG4gICAgY29uc3QgcmVkID0gcGFyc2VJbnQoaGV4Q29sb3Iuc3Vic3RyaW5nKDAsIDIpLCAxNik7XG4gICAgY29uc3QgZ3JlZW4gPSBwYXJzZUludChoZXhDb2xvci5zdWJzdHJpbmcoMiwgNCksIDE2KTtcbiAgICBjb25zdCBibHVlID0gcGFyc2VJbnQoaGV4Q29sb3Iuc3Vic3RyaW5nKDQsIDYpLCAxNik7XG5cbiAgICAvLyBDYWxjdWxhdGUgdGhlIGFkanVzdG1lbnQgYW1vdW50IGJhc2VkIG9uIHRoZSBwZXJjZW50YWdlXG4gICAgY29uc3QgYWRqdXN0QW1vdW50ID0gTWF0aC5yb3VuZCgyNTUgKiAocGVyY2VudGFnZSAvIDEwMCkpO1xuXG4gICAgLy8gQWRqdXN0IHRoZSBSR0IgdmFsdWVzXG4gICAgY29uc3QgYWRqdXN0ZWRSZWQgPSB0aGlzLmNsYW1wKHJlZCArIGFkanVzdEFtb3VudCk7XG4gICAgY29uc3QgYWRqdXN0ZWRHcmVlbiA9IHRoaXMuY2xhbXAoZ3JlZW4gKyBhZGp1c3RBbW91bnQpO1xuICAgIGNvbnN0IGFkanVzdGVkQmx1ZSA9IHRoaXMuY2xhbXAoYmx1ZSArIGFkanVzdEFtb3VudCk7XG5cbiAgICAvLyBDb252ZXJ0IHRoZSBhZGp1c3RlZCBSR0IgdmFsdWVzIGJhY2sgdG8gaGV4XG4gICAgY29uc3QgYWRqdXN0ZWRIZXhDb2xvciA9IGAjJHsoYWRqdXN0ZWRSZWQpLnRvU3RyaW5nKDE2KS5wYWRTdGFydCgyLCAnMCcpfSR7KGFkanVzdGVkR3JlZW4pLnRvU3RyaW5nKDE2KS5wYWRTdGFydCgyLCAnMCcpfSR7KGFkanVzdGVkQmx1ZSkudG9TdHJpbmcoMTYpLnBhZFN0YXJ0KDIsICcwJyl9YDtcblxuICAgIHJldHVybiBhZGp1c3RlZEhleENvbG9yO1xuICB9XG5cbiAgY2xhbXAodmFsdWU6IG51bWJlcikge1xuICAgIHJldHVybiBNYXRoLm1heCgwLCBNYXRoLm1pbih2YWx1ZSwgMjU1KSk7XG4gIH1cblxufVxuIl19
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { Component, inject } from '@angular/core';
|
|
2
|
+
import { ColorConversionService } from '../color-conversion.service';
|
|
3
|
+
import { ColorPalletteService } from '../color-pallette.service';
|
|
4
|
+
import { TextColorService } from '../text-color.service';
|
|
5
|
+
import { ColorLightenDarkenService } from '../color-lighten-darken.service';
|
|
6
|
+
import { ColorSchemeService } from '../color-scheme.service';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "@angular/common";
|
|
9
|
+
import * as i2 from "@angular/material/divider";
|
|
10
|
+
export class ColorUtilitiesDemoComponent {
|
|
11
|
+
constructor() {
|
|
12
|
+
this.colorConversionService = inject(ColorConversionService);
|
|
13
|
+
this.colorLightenDarkenService = inject(ColorLightenDarkenService);
|
|
14
|
+
this.colorPalletteService = inject(ColorPalletteService);
|
|
15
|
+
this.textColorService = inject(TextColorService);
|
|
16
|
+
this.colorSchemeService = inject(ColorSchemeService);
|
|
17
|
+
this.HEX = this.colorConversionService.rgbToHex([12, 56, 128]);
|
|
18
|
+
this.RGB = `rgb(${this.colorConversionService.hexToRgb('#AA11BB')})`;
|
|
19
|
+
this.lighten = this.colorLightenDarkenService.lighten('#AA11BB', .25);
|
|
20
|
+
this.darken = this.colorLightenDarkenService.darken('#AA11BB', .25);
|
|
21
|
+
this.colorIsDarker = this.textColorService.isColorDarker(this.lighten, this.darken);
|
|
22
|
+
this.darkBk = this.textColorService.textColorForBgColor(this.HEX, this.lighten, this.darken);
|
|
23
|
+
this.lightBk = this.textColorService.textColorForBgColor('whitesmoke', this.lighten, this.darken);
|
|
24
|
+
this.colors$ = this.colorPalletteService.palette$;
|
|
25
|
+
this.colorPick = this.colorSchemeService.generateRandomColor();
|
|
26
|
+
this.colorPickDarker = this.colorSchemeService.adjustHexColor(this.colorPick, -25);
|
|
27
|
+
this.colorPickLighter = this.colorSchemeService.adjustHexColor(this.colorPick, 25);
|
|
28
|
+
}
|
|
29
|
+
ngOnInit() {
|
|
30
|
+
// define image path
|
|
31
|
+
this.img = 'assets/picture.webp';
|
|
32
|
+
this.colorPalletteService.getColorsFromImage(this.img, 8);
|
|
33
|
+
}
|
|
34
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorUtilitiesDemoComponent, selector: "app-color-utilities-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n <h1>Color Conversion Service</h1>\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex\">\n <div style=\"padding-top: .5rem; margin-right: .5rem;\">rgbToHex: {{ HEX }}</div>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"HEX\"></div>\n </div>\n\n <div style=\"display: flex\">\n <div style=\"padding-top: .5rem; margin-right: .5rem;\"> hexToRgb: {{ RGB }} </div>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"RGB\"></div>\n </div>\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <h1>Color Light/Darken Service</h1>\n\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\n <div style=\"display: flex; gap: 1rem\">\n Original Color: #AA11BB<br>\n <div style=\"width: 32px; height: 32px; background-color: #AA11BB;\"></div>\n Lighten (25%): {{ lighten }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n Darken (25%): {{ darken }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n </div>\n\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <h1>Text Color Utility Services</h1>\n\n <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n <div style=\"display: flex; gap: 1rem\">\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n is Darker : {{ colorIsDarker }}\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorIsDarker\"></div>\n </div>\n \n <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n \n <div>\n Use: {{ lightBk }} for '{{ HEX }}' background-color<br>\n <div style=\"padding: 1rem;\" [style.backgroundColor]=\"HEX\" [style.color]=\"darkBk\">\n Sample Text Color\n </div>\n </div>\n\n <div>\n Use: {{ lightBk }} for 'whitesmoke' background-color<br>\n <div style=\"padding: 1rem; background-color: whitesmoke;\" [style.color]=\"lightBk\">\n Sample Text Color\n </div>\n </div>\n </div>\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n \n <h1>Color Schema Services</h1>\n\n <div style=\"display: flex; gap: 1rem\">\n Pick Color: {{ colorPick }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPick\"></div>\n Lighter Version: {{ colorPickLighter }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickLighter\"></div>\n DarkerVersion: {{ colorPickDarker }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickDarker\"></div>\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <h1>Color Pallette Service</h1>\n Creates Pallette from Image\n <div style=\"display: flex; gap: 2rem;\">\n <div>\n <img [src]=\"img\" height=\"180\">\n </div>\n\n <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n <div>Color Pick</div>\n <ng-container *ngFor=\"let color of (colors$ | async)\">\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.color\"></div>\n </ng-container>\n </div>\n \n <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n <div>Complementary</div>\n <ng-container *ngFor=\"let color of (colors$ | async)\">\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.complementaryColor\"></div>\n </ng-container>\n </div>\n </div>\n\n</div>\n\n", styles: [".box{width:100px;height:100px;border:solid thin black;color:#000;margin:4px;padding:16px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
36
|
+
}
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesDemoComponent, decorators: [{
|
|
38
|
+
type: Component,
|
|
39
|
+
args: [{ selector: 'app-color-utilities-demo', template: "<div style=\"margin: 2rem;\">\n\n <h1>Color Conversion Service</h1>\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex\">\n <div style=\"padding-top: .5rem; margin-right: .5rem;\">rgbToHex: {{ HEX }}</div>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"HEX\"></div>\n </div>\n\n <div style=\"display: flex\">\n <div style=\"padding-top: .5rem; margin-right: .5rem;\"> hexToRgb: {{ RGB }} </div>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"RGB\"></div>\n </div>\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <h1>Color Light/Darken Service</h1>\n\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\n <div style=\"display: flex; gap: 1rem\">\n Original Color: #AA11BB<br>\n <div style=\"width: 32px; height: 32px; background-color: #AA11BB;\"></div>\n Lighten (25%): {{ lighten }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n Darken (25%): {{ darken }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n </div>\n\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <h1>Text Color Utility Services</h1>\n\n <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n <div style=\"display: flex; gap: 1rem\">\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n is Darker : {{ colorIsDarker }}\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorIsDarker\"></div>\n </div>\n \n <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n \n <div>\n Use: {{ lightBk }} for '{{ HEX }}' background-color<br>\n <div style=\"padding: 1rem;\" [style.backgroundColor]=\"HEX\" [style.color]=\"darkBk\">\n Sample Text Color\n </div>\n </div>\n\n <div>\n Use: {{ lightBk }} for 'whitesmoke' background-color<br>\n <div style=\"padding: 1rem; background-color: whitesmoke;\" [style.color]=\"lightBk\">\n Sample Text Color\n </div>\n </div>\n </div>\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n \n <h1>Color Schema Services</h1>\n\n <div style=\"display: flex; gap: 1rem\">\n Pick Color: {{ colorPick }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPick\"></div>\n Lighter Version: {{ colorPickLighter }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickLighter\"></div>\n DarkerVersion: {{ colorPickDarker }}<br>\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickDarker\"></div>\n </div>\n\n <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n <mat-divider></mat-divider>\n </div>\n\n <h1>Color Pallette Service</h1>\n Creates Pallette from Image\n <div style=\"display: flex; gap: 2rem;\">\n <div>\n <img [src]=\"img\" height=\"180\">\n </div>\n\n <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n <div>Color Pick</div>\n <ng-container *ngFor=\"let color of (colors$ | async)\">\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.color\"></div>\n </ng-container>\n </div>\n \n <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n <div>Complementary</div>\n <ng-container *ngFor=\"let color of (colors$ | async)\">\n <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.complementaryColor\"></div>\n </ng-container>\n </div>\n </div>\n\n</div>\n\n", styles: [".box{width:100px;height:100px;border:solid thin black;color:#000;margin:4px;padding:16px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center}\n"] }]
|
|
40
|
+
}], ctorParameters: function () { return []; } });
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItdXRpbGl0aWVzLWRlbW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29sb3ItdXRpbC1oZWxwZXJzL3NyYy9saWIvY29sb3ItdXRpbGl0aWVzLWRlbW8vY29sb3ItdXRpbGl0aWVzLWRlbW8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29sb3ItdXRpbC1oZWxwZXJzL3NyYy9saWIvY29sb3ItdXRpbGl0aWVzLWRlbW8vY29sb3ItdXRpbGl0aWVzLWRlbW8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFMUQsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDckUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDakUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDekQsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDNUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUM7Ozs7QUFPN0QsTUFBTSxPQUFPLDJCQUEyQjtJQThCdEM7UUE1QkEsMkJBQXNCLEdBQUcsTUFBTSxDQUFDLHNCQUFzQixDQUFDLENBQUE7UUFDdkQsOEJBQXlCLEdBQUcsTUFBTSxDQUFDLHlCQUF5QixDQUFDLENBQUE7UUFDN0QseUJBQW9CLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUE7UUFDbkQscUJBQWdCLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUFDLENBQUE7UUFDM0MsdUJBQWtCLEdBQUcsTUFBTSxDQUFDLGtCQUFrQixDQUFDLENBQUE7UUFHL0MsUUFBRyxHQUFHLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUE7UUFDekQsUUFBRyxHQUFHLE9BQU8sSUFBSSxDQUFDLHNCQUFzQixDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFBO1FBRy9ELFlBQU8sR0FBRyxJQUFJLENBQUMseUJBQXlCLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxHQUFHLENBQUMsQ0FBQTtRQUNoRSxXQUFNLEdBQUcsSUFBSSxDQUFDLHlCQUF5QixDQUFDLE1BQU0sQ0FBQyxTQUFTLEVBQUUsR0FBRyxDQUFDLENBQUE7UUFFOUQsa0JBQWEsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFBO1FBRTlFLFdBQU0sR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUN2RixZQUFPLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLG1CQUFtQixDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUc1RixZQUFPLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFFBQVEsQ0FBQTtRQUU1QyxjQUFTLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLG1CQUFtQixFQUFFLENBQUE7UUFDekQsb0JBQWUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQTtRQUM3RSxxQkFBZ0IsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUFDLENBQUE7SUFJN0QsQ0FBQztJQUVqQixRQUFRO1FBRU4sb0JBQW9CO1FBQ3BCLElBQUksQ0FBQyxHQUFHLEdBQUcscUJBQXFCLENBQUE7UUFDaEMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUE7SUFHM0QsQ0FBQzsrR0F2Q1UsMkJBQTJCO21HQUEzQiwyQkFBMkIsZ0VDYnhDLDArSEE2R0E7OzRGRGhHYSwyQkFBMkI7a0JBTHZDLFNBQVM7K0JBQ0UsMEJBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDb2xvckNvbnZlcnNpb25TZXJ2aWNlIH0gZnJvbSAnLi4vY29sb3ItY29udmVyc2lvbi5zZXJ2aWNlJztcbmltcG9ydCB7IENvbG9yUGFsbGV0dGVTZXJ2aWNlIH0gZnJvbSAnLi4vY29sb3ItcGFsbGV0dGUuc2VydmljZSc7XG5pbXBvcnQgeyBUZXh0Q29sb3JTZXJ2aWNlIH0gZnJvbSAnLi4vdGV4dC1jb2xvci5zZXJ2aWNlJztcbmltcG9ydCB7IENvbG9yTGlnaHRlbkRhcmtlblNlcnZpY2UgfSBmcm9tICcuLi9jb2xvci1saWdodGVuLWRhcmtlbi5zZXJ2aWNlJztcbmltcG9ydCB7IENvbG9yU2NoZW1lU2VydmljZSB9IGZyb20gJy4uL2NvbG9yLXNjaGVtZS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWNvbG9yLXV0aWxpdGllcy1kZW1vJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NvbG9yLXV0aWxpdGllcy1kZW1vLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29sb3ItdXRpbGl0aWVzLWRlbW8uY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvclV0aWxpdGllc0RlbW9Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIGNvbG9yQ29udmVyc2lvblNlcnZpY2UgPSBpbmplY3QoQ29sb3JDb252ZXJzaW9uU2VydmljZSlcbiAgY29sb3JMaWdodGVuRGFya2VuU2VydmljZSA9IGluamVjdChDb2xvckxpZ2h0ZW5EYXJrZW5TZXJ2aWNlKVxuICBjb2xvclBhbGxldHRlU2VydmljZSA9IGluamVjdChDb2xvclBhbGxldHRlU2VydmljZSlcbiAgdGV4dENvbG9yU2VydmljZSA9IGluamVjdChUZXh0Q29sb3JTZXJ2aWNlKVxuICBjb2xvclNjaGVtZVNlcnZpY2UgPSBpbmplY3QoQ29sb3JTY2hlbWVTZXJ2aWNlKVxuXG5cbiAgSEVYID0gdGhpcy5jb2xvckNvbnZlcnNpb25TZXJ2aWNlLnJnYlRvSGV4KFsxMiwgNTYsIDEyOF0pXG4gIFJHQiA9IGByZ2IoJHt0aGlzLmNvbG9yQ29udmVyc2lvblNlcnZpY2UuaGV4VG9SZ2IoJyNBQTExQkInKX0pYFxuXG5cbiAgbGlnaHRlbiA9IHRoaXMuY29sb3JMaWdodGVuRGFya2VuU2VydmljZS5saWdodGVuKCcjQUExMUJCJywgLjI1KVxuICBkYXJrZW4gPSB0aGlzLmNvbG9yTGlnaHRlbkRhcmtlblNlcnZpY2UuZGFya2VuKCcjQUExMUJCJywgLjI1KVxuXG4gIGNvbG9ySXNEYXJrZXIgPSB0aGlzLnRleHRDb2xvclNlcnZpY2UuaXNDb2xvckRhcmtlcih0aGlzLmxpZ2h0ZW4sIHRoaXMuZGFya2VuKVxuXG4gIGRhcmtCayA9IHRoaXMudGV4dENvbG9yU2VydmljZS50ZXh0Q29sb3JGb3JCZ0NvbG9yKHRoaXMuSEVYLCB0aGlzLmxpZ2h0ZW4sIHRoaXMuZGFya2VuKVxuICBsaWdodEJrID0gdGhpcy50ZXh0Q29sb3JTZXJ2aWNlLnRleHRDb2xvckZvckJnQ29sb3IoJ3doaXRlc21va2UnLCB0aGlzLmxpZ2h0ZW4sIHRoaXMuZGFya2VuKVxuXG4gIHBhbGV0dGU6IGFueVxuICBjb2xvcnMkID0gdGhpcy5jb2xvclBhbGxldHRlU2VydmljZS5wYWxldHRlJFxuXG4gIGNvbG9yUGljayA9IHRoaXMuY29sb3JTY2hlbWVTZXJ2aWNlLmdlbmVyYXRlUmFuZG9tQ29sb3IoKVxuICBjb2xvclBpY2tEYXJrZXIgPSB0aGlzLmNvbG9yU2NoZW1lU2VydmljZS5hZGp1c3RIZXhDb2xvcih0aGlzLmNvbG9yUGljaywgLTI1KVxuICBjb2xvclBpY2tMaWdodGVyID0gdGhpcy5jb2xvclNjaGVtZVNlcnZpY2UuYWRqdXN0SGV4Q29sb3IodGhpcy5jb2xvclBpY2ssIDI1KVxuXG4gIGltZzogc3RyaW5nfGFueVxuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG5cbiAgICAvLyBkZWZpbmUgaW1hZ2UgcGF0aFxuICAgIHRoaXMuaW1nID0gJ2Fzc2V0cy9waWN0dXJlLndlYnAnXG4gICAgdGhpcy5jb2xvclBhbGxldHRlU2VydmljZS5nZXRDb2xvcnNGcm9tSW1hZ2UodGhpcy5pbWcsIDgpXG5cblxuICB9XG5cblxufVxuXG4iLCI8ZGl2IHN0eWxlPVwibWFyZ2luOiAycmVtO1wiPlxuXG4gIDxoMT5Db2xvciBDb252ZXJzaW9uIFNlcnZpY2U8L2gxPlxuICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsgZ2FwOiAxcmVtO1wiPlxuICAgIDxkaXYgc3R5bGU9XCJkaXNwbGF5OiBmbGV4XCI+XG4gICAgICA8ZGl2IHN0eWxlPVwicGFkZGluZy10b3A6IC41cmVtOyBtYXJnaW4tcmlnaHQ6IC41cmVtO1wiPnJnYlRvSGV4OiB7eyBIRVggfX08L2Rpdj5cbiAgICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogMzJweDsgaGVpZ2h0OiAzMnB4O1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiSEVYXCI+PC9kaXY+XG4gICAgPC9kaXY+XG5cbiAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleFwiPlxuICAgICAgPGRpdiBzdHlsZT1cInBhZGRpbmctdG9wOiAuNXJlbTsgbWFyZ2luLXJpZ2h0OiAuNXJlbTtcIj4gaGV4VG9SZ2I6IHt7IFJHQiB9fSA8L2Rpdj5cbiAgICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogMzJweDsgaGVpZ2h0OiAzMnB4O1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiUkdCXCI+PC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgc3R5bGU9XCJtYXJnaW4tdG9wOiAxcmVtOyBtYXJnaW4tYm90dG9tOiAxcmVtO1wiPlxuICAgIDxtYXQtZGl2aWRlcj48L21hdC1kaXZpZGVyPlxuICA8L2Rpdj5cblxuICA8aDE+Q29sb3IgTGlnaHQvRGFya2VuIFNlcnZpY2U8L2gxPlxuXG4gIDxkaXYgc3R5bGU9XCJkaXNwbGF5OiBmbGV4OyBmbGV4LWRpcmVjdGlvbjogY29sdW1uOyBnYXA6IDFyZW07XCI+XG5cbiAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZ2FwOiAxcmVtXCI+XG4gICAgICBPcmlnaW5hbCBDb2xvcjogI0FBMTFCQjxicj5cbiAgICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogMzJweDsgaGVpZ2h0OiAzMnB4OyBiYWNrZ3JvdW5kLWNvbG9yOiAjQUExMUJCO1wiPjwvZGl2PlxuICAgICAgTGlnaHRlbiAoMjUlKToge3sgbGlnaHRlbiB9fTxicj5cbiAgICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogMzJweDsgaGVpZ2h0OiAzMnB4O1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwibGlnaHRlblwiPjwvZGl2PlxuICAgICAgRGFya2VuICgyNSUpOiB7eyBkYXJrZW4gfX08YnI+XG4gICAgICA8ZGl2IHN0eWxlPVwid2lkdGg6IDMycHg7IGhlaWdodDogMzJweDtcIiBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cImRhcmtlblwiPjwvZGl2PlxuICAgIDwvZGl2PlxuXG4gIDwvZGl2PlxuXG4gIDxkaXYgc3R5bGU9XCJtYXJnaW4tdG9wOiAxcmVtOyBtYXJnaW4tYm90dG9tOiAxcmVtO1wiPlxuICAgIDxtYXQtZGl2aWRlcj48L21hdC1kaXZpZGVyPlxuICA8L2Rpdj5cblxuICA8aDE+VGV4dCBDb2xvciBVdGlsaXR5IFNlcnZpY2VzPC9oMT5cblxuICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZ2FwOiAxcmVtOyBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1wiPlxuICAgIDxkaXYgc3R5bGU9XCJkaXNwbGF5OiBmbGV4OyBnYXA6IDFyZW1cIj5cbiAgICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogMzJweDsgaGVpZ2h0OiAzMnB4O1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiZGFya2VuXCI+PC9kaXY+XG4gICAgICA8ZGl2IHN0eWxlPVwid2lkdGg6IDMycHg7IGhlaWdodDogMzJweDtcIiBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cImxpZ2h0ZW5cIj48L2Rpdj5cbiAgICAgIGlzIERhcmtlciA6IHt7IGNvbG9ySXNEYXJrZXIgfX1cbiAgICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogMzJweDsgaGVpZ2h0OiAzMnB4O1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiY29sb3JJc0RhcmtlclwiPjwvZGl2PlxuICAgIDwvZGl2PlxuICBcbiAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZ2FwOiAxcmVtOyBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1wiPlxuICAgICAgXG4gICAgICA8ZGl2PlxuICAgICAgICBVc2U6IHt7IGxpZ2h0QmsgfX0gZm9yICd7eyBIRVggfX0nIGJhY2tncm91bmQtY29sb3I8YnI+XG4gICAgICAgIDxkaXYgc3R5bGU9XCJwYWRkaW5nOiAxcmVtO1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiSEVYXCIgW3N0eWxlLmNvbG9yXT1cImRhcmtCa1wiPlxuICAgICAgICBTYW1wbGUgVGV4dCBDb2xvclxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2PlxuICAgICAgICBVc2U6IHt7IGxpZ2h0QmsgfX0gZm9yICd3aGl0ZXNtb2tlJyBiYWNrZ3JvdW5kLWNvbG9yPGJyPlxuICAgICAgICA8ZGl2IHN0eWxlPVwicGFkZGluZzogMXJlbTsgYmFja2dyb3VuZC1jb2xvcjogd2hpdGVzbW9rZTtcIiBbc3R5bGUuY29sb3JdPVwibGlnaHRCa1wiPlxuICAgICAgICAgIFNhbXBsZSBUZXh0IENvbG9yXG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxkaXYgc3R5bGU9XCJtYXJnaW4tdG9wOiAxcmVtOyBtYXJnaW4tYm90dG9tOiAxcmVtO1wiPlxuICAgIDxtYXQtZGl2aWRlcj48L21hdC1kaXZpZGVyPlxuICA8L2Rpdj5cbiAgXG4gPGgxPkNvbG9yIFNjaGVtYSBTZXJ2aWNlczwvaDE+XG5cbiAgPGRpdiBzdHlsZT1cImRpc3BsYXk6IGZsZXg7IGdhcDogMXJlbVwiPlxuICAgIFBpY2sgQ29sb3I6IHt7IGNvbG9yUGljayB9fTxicj5cbiAgICA8ZGl2IHN0eWxlPVwid2lkdGg6IDMycHg7IGhlaWdodDogMzJweDtcIiBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cImNvbG9yUGlja1wiPjwvZGl2PlxuICAgIExpZ2h0ZXIgVmVyc2lvbjoge3sgY29sb3JQaWNrTGlnaHRlciB9fTxicj5cbiAgICA8ZGl2IHN0eWxlPVwid2lkdGg6IDMycHg7IGhlaWdodDogMzJweDtcIiBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cImNvbG9yUGlja0xpZ2h0ZXJcIj48L2Rpdj5cbiAgICBEYXJrZXJWZXJzaW9uOiB7eyBjb2xvclBpY2tEYXJrZXIgfX08YnI+XG4gICAgPGRpdiBzdHlsZT1cIndpZHRoOiAzMnB4OyBoZWlnaHQ6IDMycHg7XCIgW3N0eWxlLmJhY2tncm91bmRDb2xvcl09XCJjb2xvclBpY2tEYXJrZXJcIj48L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiBzdHlsZT1cIm1hcmdpbi10b3A6IDFyZW07IG1hcmdpbi1ib3R0b206IDFyZW07XCI+XG4gICAgPG1hdC1kaXZpZGVyPjwvbWF0LWRpdmlkZXI+XG4gIDwvZGl2PlxuXG4gIDxoMT5Db2xvciBQYWxsZXR0ZSBTZXJ2aWNlPC9oMT5cbiAgQ3JlYXRlcyBQYWxsZXR0ZSBmcm9tIEltYWdlXG4gIDxkaXYgc3R5bGU9XCJkaXNwbGF5OiBmbGV4OyBnYXA6IDJyZW07XCI+XG4gICAgPGRpdj5cbiAgICAgIDxpbWcgW3NyY109XCJpbWdcIiBoZWlnaHQ9XCIxODBcIj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgc3R5bGU9XCJkaXNwbGF5OiBmbGV4OyBnYXA6IC41cmVtOyB3aWR0aDogMTIwcHg7IGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOyBmbGV4LXdyYXA6IHdyYXA7IHBhZGRpbmc6IC41cmVtO1wiPlxuICAgICAgPGRpdj5Db2xvciBQaWNrPC9kaXY+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBjb2xvciBvZiAoY29sb3JzJCB8IGFzeW5jKVwiPlxuICAgICAgICAgIDxkaXYgc3R5bGU9XCJ3aWR0aDogMzJweDsgaGVpZ2h0OiAzMnB4O1wiIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiY29sb3IuY29sb3JcIj48L2Rpdj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuICBcbiAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZ2FwOiAuNXJlbTsgd2lkdGg6IDEyMHB4OyBib3JkZXI6IDFweCBzb2xpZCBibGFjazsgZmxleC13cmFwOiB3cmFwOyBwYWRkaW5nOiAuNXJlbTtcIj5cbiAgICAgIDxkaXY+Q29tcGxlbWVudGFyeTwvZGl2PlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgY29sb3Igb2YgKGNvbG9ycyQgfCBhc3luYylcIj5cbiAgICAgICAgICA8ZGl2IHN0eWxlPVwid2lkdGg6IDMycHg7IGhlaWdodDogMzJweDtcIiBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cImNvbG9yLmNvbXBsZW1lbnRhcnlDb2xvclwiPjwvZGl2PlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG48L2Rpdj5cblxuIl19
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { NgModule } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { MatButtonModule } from '@angular/material/button';
|
|
4
|
+
import { MatDividerModule } from '@angular/material/divider';
|
|
5
|
+
import { ColorGrabberDirective } from './color-grab.directive';
|
|
6
|
+
import { ColorUtilitiesDemoComponent } from './color-utilities-demo/color-utilities-demo.component';
|
|
7
|
+
import { ColorExtractorDirective } from './color-extractor.directive';
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
export class ColorUtilHelpersModule {
|
|
10
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilHelpersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilHelpersModule, declarations: [ColorUtilitiesDemoComponent,
|
|
12
|
+
ColorGrabberDirective,
|
|
13
|
+
ColorExtractorDirective], imports: [CommonModule,
|
|
14
|
+
MatButtonModule,
|
|
15
|
+
MatDividerModule], exports: [ColorUtilitiesDemoComponent] }); }
|
|
16
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilHelpersModule, imports: [CommonModule,
|
|
17
|
+
MatButtonModule,
|
|
18
|
+
MatDividerModule] }); }
|
|
19
|
+
}
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilHelpersModule, decorators: [{
|
|
21
|
+
type: NgModule,
|
|
22
|
+
args: [{
|
|
23
|
+
imports: [
|
|
24
|
+
CommonModule,
|
|
25
|
+
MatButtonModule,
|
|
26
|
+
MatDividerModule
|
|
27
|
+
],
|
|
28
|
+
declarations: [
|
|
29
|
+
ColorUtilitiesDemoComponent,
|
|
30
|
+
ColorGrabberDirective,
|
|
31
|
+
ColorExtractorDirective
|
|
32
|
+
],
|
|
33
|
+
exports: [
|
|
34
|
+
ColorUtilitiesDemoComponent
|
|
35
|
+
]
|
|
36
|
+
}]
|
|
37
|
+
}] });
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItdXRpbHMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29sb3ItdXRpbC1oZWxwZXJzL3NyYy9saWIvY29sb3ItdXRpbHMubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM3RCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUUvRCxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSx1REFBdUQsQ0FBQztBQUNwRyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7QUFrQnRFLE1BQU0sT0FBTyxzQkFBc0I7K0dBQXRCLHNCQUFzQjtnSEFBdEIsc0JBQXNCLGlCQVIvQiwyQkFBMkI7WUFDM0IscUJBQXFCO1lBQ3JCLHVCQUF1QixhQVB2QixZQUFZO1lBQ1osZUFBZTtZQUNmLGdCQUFnQixhQVFoQiwyQkFBMkI7Z0hBR2xCLHNCQUFzQixZQWIvQixZQUFZO1lBQ1osZUFBZTtZQUNmLGdCQUFnQjs7NEZBV1Asc0JBQXNCO2tCQWZsQyxRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGVBQWU7d0JBQ2YsZ0JBQWdCO3FCQUNqQjtvQkFDRCxZQUFZLEVBQUU7d0JBQ1osMkJBQTJCO3dCQUMzQixxQkFBcUI7d0JBQ3JCLHVCQUF1QjtxQkFDeEI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLDJCQUEyQjtxQkFDNUI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuaW1wb3J0IHsgTWF0QnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcbmltcG9ydCB7IE1hdERpdmlkZXJNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaXZpZGVyJztcbmltcG9ydCB7IENvbG9yR3JhYmJlckRpcmVjdGl2ZSB9IGZyb20gJy4vY29sb3ItZ3JhYi5kaXJlY3RpdmUnO1xuXG5pbXBvcnQgeyBDb2xvclV0aWxpdGllc0RlbW9Db21wb25lbnQgfSBmcm9tICcuL2NvbG9yLXV0aWxpdGllcy1kZW1vL2NvbG9yLXV0aWxpdGllcy1kZW1vLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDb2xvckV4dHJhY3RvckRpcmVjdGl2ZSB9IGZyb20gJy4vY29sb3ItZXh0cmFjdG9yLmRpcmVjdGl2ZSc7XG5cblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBNYXRCdXR0b25Nb2R1bGUsXG4gICAgTWF0RGl2aWRlck1vZHVsZVxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBDb2xvclV0aWxpdGllc0RlbW9Db21wb25lbnQsXG4gICAgQ29sb3JHcmFiYmVyRGlyZWN0aXZlLFxuICAgIENvbG9yRXh0cmFjdG9yRGlyZWN0aXZlXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBDb2xvclV0aWxpdGllc0RlbW9Db21wb25lbnRcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDb2xvclV0aWxIZWxwZXJzTW9kdWxlIHsgfVxuIl19
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { Injectable } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "./color-conversion.service";
|
|
4
|
+
export class TextColorService {
|
|
5
|
+
constructor(colorConversionService) {
|
|
6
|
+
this.colorConversionService = colorConversionService;
|
|
7
|
+
}
|
|
8
|
+
textColorForBgColor(bgColor, lightColor, darkColor) {
|
|
9
|
+
const UIColors = this.fixColor(bgColor);
|
|
10
|
+
const r = UIColors[0];
|
|
11
|
+
const g = UIColors[1];
|
|
12
|
+
const b = UIColors[2];
|
|
13
|
+
return ((r * 0.299 + g * 0.587 + b * 0.114) > 149) ? darkColor : lightColor;
|
|
14
|
+
}
|
|
15
|
+
darkerColor(color1, color2) {
|
|
16
|
+
return this.isColorDarker(color1, color2) ? color1 : color2;
|
|
17
|
+
}
|
|
18
|
+
isColorDarker(color1, color2) {
|
|
19
|
+
const newColor1 = this.fixColor(color1);
|
|
20
|
+
const newColor2 = this.fixColor(color2);
|
|
21
|
+
const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);
|
|
22
|
+
const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);
|
|
23
|
+
return luminance1 < luminance2;
|
|
24
|
+
}
|
|
25
|
+
lighterColor(color1, color2) {
|
|
26
|
+
return (this.isColorLighter(color1, color2)) ? color1 : color2;
|
|
27
|
+
}
|
|
28
|
+
isColorLighter(color1, color2) {
|
|
29
|
+
const newColor1 = this.fixColor(color1);
|
|
30
|
+
const newColor2 = this.fixColor(color2);
|
|
31
|
+
const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);
|
|
32
|
+
const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);
|
|
33
|
+
return (luminance1 > luminance2);
|
|
34
|
+
}
|
|
35
|
+
calculateLuminance(r, g, b) {
|
|
36
|
+
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
37
|
+
}
|
|
38
|
+
fixColor(color) {
|
|
39
|
+
// Remove leading hash if present
|
|
40
|
+
const sanitizedColor = color.startsWith('#') ? color.slice(1) : color;
|
|
41
|
+
// Validate if the color is a valid hex (3 or 6 characters)
|
|
42
|
+
if (!this.isValidHex(sanitizedColor)) {
|
|
43
|
+
return this.parseRgb(sanitizedColor); // If not hex, attempt to parse as RGB
|
|
44
|
+
}
|
|
45
|
+
// Convert hex to RGB
|
|
46
|
+
const rgb = this.hexToRgb(sanitizedColor);
|
|
47
|
+
return rgb;
|
|
48
|
+
}
|
|
49
|
+
// Helper function to validate if a string is a valid 3 or 6 digit hex code
|
|
50
|
+
isValidHex(color) {
|
|
51
|
+
const hexRegex = /^[A-Fa-f0-9]{3}$|^[A-Fa-f0-9]{6}$/i;
|
|
52
|
+
return hexRegex.test(color);
|
|
53
|
+
}
|
|
54
|
+
// Helper function to convert a 3 or 6 digit hex color to RGB
|
|
55
|
+
hexToRgb(hex) {
|
|
56
|
+
if (hex.length === 3) {
|
|
57
|
+
hex = hex.split('').map(c => c + c).join(''); // Expand shorthand hex to full
|
|
58
|
+
}
|
|
59
|
+
return [
|
|
60
|
+
parseInt(hex.slice(0, 2), 16),
|
|
61
|
+
parseInt(hex.slice(2, 4), 16),
|
|
62
|
+
parseInt(hex.slice(4, 6), 16),
|
|
63
|
+
];
|
|
64
|
+
}
|
|
65
|
+
// Helper function to parse an RGB string (e.g., rgb(255, 0, 0)) into an array
|
|
66
|
+
parseRgb(rgb) {
|
|
67
|
+
const match = rgb.match(/\d+/g);
|
|
68
|
+
return match ? match.map(num => parseInt(num)) : [];
|
|
69
|
+
}
|
|
70
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextColorService, deps: [{ token: i1.ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
71
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextColorService, providedIn: 'root' }); }
|
|
72
|
+
}
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextColorService, decorators: [{
|
|
74
|
+
type: Injectable,
|
|
75
|
+
args: [{
|
|
76
|
+
providedIn: 'root'
|
|
77
|
+
}]
|
|
78
|
+
}], ctorParameters: function () { return [{ type: i1.ColorConversionService }]; } });
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1jb2xvci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29sb3ItdXRpbC1oZWxwZXJzL3NyYy9saWIvdGV4dC1jb2xvci5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUE7OztBQU0xQyxNQUFNLE9BQU8sZ0JBQWdCO0lBRTNCLFlBQ1Usc0JBQThDO1FBQTlDLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBd0I7SUFDckQsQ0FBQztJQUVKLG1CQUFtQixDQUFDLE9BQWUsRUFBRSxVQUFrQixFQUFFLFNBQWlCO1FBRXhFLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUE7UUFFdkMsTUFBTSxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3JCLE1BQU0sQ0FBQyxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUNyQixNQUFNLENBQUMsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUE7UUFFckIsT0FBTyxDQUFDLENBQUMsQ0FBQyxHQUFDLEtBQUssR0FBRyxDQUFDLEdBQUMsS0FBSyxHQUFHLENBQUMsR0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUM7SUFFeEUsQ0FBQztJQUVELFdBQVcsQ0FBQyxNQUFjLEVBQUUsTUFBYztRQUN4QyxPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUM5RCxDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQWMsRUFBRSxNQUFjO1FBRTFDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDeEMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUV4QyxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNyRixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUVyRixPQUFPLFVBQVUsR0FBRyxVQUFVLENBQUM7SUFDakMsQ0FBQztJQUdELFlBQVksQ0FBQyxNQUFjLEVBQUUsTUFBYztRQUN6QyxPQUFPLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFDaEUsQ0FBQztJQUVELGNBQWMsQ0FBQyxNQUFjLEVBQUUsTUFBYztRQUUzQyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3hDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFeEMsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDckYsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFckYsT0FBTyxDQUFDLFVBQVUsR0FBRyxVQUFVLENBQUMsQ0FBQTtJQUVsQyxDQUFDO0lBRUQsa0JBQWtCLENBQUMsQ0FBUyxFQUFFLENBQVMsRUFBRSxDQUFTO1FBQ2hELE9BQU8sTUFBTSxHQUFHLENBQUMsR0FBRyxNQUFNLEdBQUcsQ0FBQyxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUM7SUFDOUMsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFhO1FBQ3BCLGlDQUFpQztRQUNqQyxNQUFNLGNBQWMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7UUFFdEUsMkRBQTJEO1FBQzNELElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGNBQWMsQ0FBQyxFQUFFO1lBQ3BDLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLHNDQUFzQztTQUM3RTtRQUVELHFCQUFxQjtRQUNyQixNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQzFDLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVELDJFQUEyRTtJQUMzRSxVQUFVLENBQUMsS0FBYTtRQUN0QixNQUFNLFFBQVEsR0FBRyxvQ0FBb0MsQ0FBQztRQUN0RCxPQUFPLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELDZEQUE2RDtJQUM3RCxRQUFRLENBQUMsR0FBVztRQUNsQixJQUFJLEdBQUcsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO1lBQ3BCLEdBQUcsR0FBRyxHQUFHLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQywrQkFBK0I7U0FDOUU7UUFFRCxPQUFPO1lBQ0wsUUFBUSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQztZQUM3QixRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQzdCLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUM7U0FDOUIsQ0FBQztJQUNKLENBQUM7SUFFRCw4RUFBOEU7SUFDOUUsUUFBUSxDQUFDLEdBQVc7UUFDbEIsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNoQyxPQUFPLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDdEQsQ0FBQzsrR0EzRlUsZ0JBQWdCO21IQUFoQixnQkFBZ0IsY0FGZixNQUFNOzs0RkFFUCxnQkFBZ0I7a0JBSDVCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXHJcbmltcG9ydCB7IENvbG9yQ29udmVyc2lvblNlcnZpY2UgfSBmcm9tICcuL2NvbG9yLWNvbnZlcnNpb24uc2VydmljZSdcclxuXHJcbkBJbmplY3RhYmxlKHtcclxuICBwcm92aWRlZEluOiAncm9vdCdcclxufSlcclxuZXhwb3J0IGNsYXNzIFRleHRDb2xvclNlcnZpY2Uge1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgY29sb3JDb252ZXJzaW9uU2VydmljZTogQ29sb3JDb252ZXJzaW9uU2VydmljZVxyXG4gICkge31cclxuXHJcbiAgdGV4dENvbG9yRm9yQmdDb2xvcihiZ0NvbG9yOiBzdHJpbmcsIGxpZ2h0Q29sb3I6IHN0cmluZywgZGFya0NvbG9yOiBzdHJpbmcpIHtcclxuXHJcbiAgICBjb25zdCBVSUNvbG9ycyA9IHRoaXMuZml4Q29sb3IoYmdDb2xvcilcclxuXHJcbiAgICBjb25zdCByID0gVUlDb2xvcnNbMF1cclxuICAgIGNvbnN0IGcgPSBVSUNvbG9yc1sxXVxyXG4gICAgY29uc3QgYiA9IFVJQ29sb3JzWzJdXHJcblxyXG4gICAgcmV0dXJuICgociowLjI5OSArIGcqMC41ODcgKyBiKjAuMTE0KSA+IDE0OSkgPyBkYXJrQ29sb3IgOiBsaWdodENvbG9yO1xyXG5cclxuICB9XHJcblxyXG4gIGRhcmtlckNvbG9yKGNvbG9yMTogc3RyaW5nLCBjb2xvcjI6IHN0cmluZykge1xyXG4gICAgcmV0dXJuIHRoaXMuaXNDb2xvckRhcmtlcihjb2xvcjEsIGNvbG9yMikgPyBjb2xvcjEgOiBjb2xvcjI7XHJcbiAgfVxyXG5cclxuICBpc0NvbG9yRGFya2VyKGNvbG9yMTogc3RyaW5nLCBjb2xvcjI6IHN0cmluZykge1xyXG5cclxuICAgIGNvbnN0IG5ld0NvbG9yMSA9IHRoaXMuZml4Q29sb3IoY29sb3IxKTtcclxuICAgIGNvbnN0IG5ld0NvbG9yMiA9IHRoaXMuZml4Q29sb3IoY29sb3IyKTtcclxuXHJcbiAgICBjb25zdCBsdW1pbmFuY2UxID0gdGhpcy5jYWxjdWxhdGVMdW1pbmFuY2UobmV3Q29sb3IxWzBdLCBuZXdDb2xvcjFbMV0sIG5ld0NvbG9yMVsyXSk7XHJcbiAgICBjb25zdCBsdW1pbmFuY2UyID0gdGhpcy5jYWxjdWxhdGVMdW1pbmFuY2UobmV3Q29sb3IyWzBdLCBuZXdDb2xvcjJbMV0sIG5ld0NvbG9yMlsyXSk7XHJcblxyXG4gICAgcmV0dXJuIGx1bWluYW5jZTEgPCBsdW1pbmFuY2UyO1xyXG4gIH1cclxuXHJcblxyXG4gIGxpZ2h0ZXJDb2xvcihjb2xvcjE6IHN0cmluZywgY29sb3IyOiBzdHJpbmcpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuICh0aGlzLmlzQ29sb3JMaWdodGVyKGNvbG9yMSxjb2xvcjIpKSA/IGNvbG9yMSA6IGNvbG9yMjtcclxuICB9XHJcblxyXG4gIGlzQ29sb3JMaWdodGVyKGNvbG9yMTogc3RyaW5nLCBjb2xvcjI6IHN0cmluZykge1xyXG5cclxuICAgIGNvbnN0IG5ld0NvbG9yMSA9IHRoaXMuZml4Q29sb3IoY29sb3IxKTtcclxuICAgIGNvbnN0IG5ld0NvbG9yMiA9IHRoaXMuZml4Q29sb3IoY29sb3IyKTtcclxuXHJcbiAgICBjb25zdCBsdW1pbmFuY2UxID0gdGhpcy5jYWxjdWxhdGVMdW1pbmFuY2UobmV3Q29sb3IxWzBdLCBuZXdDb2xvcjFbMV0sIG5ld0NvbG9yMVsyXSk7XHJcbiAgICBjb25zdCBsdW1pbmFuY2UyID0gdGhpcy5jYWxjdWxhdGVMdW1pbmFuY2UobmV3Q29sb3IyWzBdLCBuZXdDb2xvcjJbMV0sIG5ld0NvbG9yMlsyXSk7XHJcblxyXG4gICAgcmV0dXJuIChsdW1pbmFuY2UxID4gbHVtaW5hbmNlMilcclxuXHJcbiAgfVxyXG5cclxuICBjYWxjdWxhdGVMdW1pbmFuY2UocjogbnVtYmVyLCBnOiBudW1iZXIsIGI6IG51bWJlcik6IG51bWJlciB7XHJcbiAgICByZXR1cm4gMC4yMTI2ICogciArIDAuNzE1MiAqIGcgKyAwLjA3MjIgKiBiO1xyXG4gIH1cclxuXHJcbiAgZml4Q29sb3IoY29sb3I6IHN0cmluZykge1xyXG4gICAgLy8gUmVtb3ZlIGxlYWRpbmcgaGFzaCBpZiBwcmVzZW50XHJcbiAgICBjb25zdCBzYW5pdGl6ZWRDb2xvciA9IGNvbG9yLnN0YXJ0c1dpdGgoJyMnKSA/IGNvbG9yLnNsaWNlKDEpIDogY29sb3I7XHJcblxyXG4gICAgLy8gVmFsaWRhdGUgaWYgdGhlIGNvbG9yIGlzIGEgdmFsaWQgaGV4ICgzIG9yIDYgY2hhcmFjdGVycylcclxuICAgIGlmICghdGhpcy5pc1ZhbGlkSGV4KHNhbml0aXplZENvbG9yKSkge1xyXG4gICAgICByZXR1cm4gdGhpcy5wYXJzZVJnYihzYW5pdGl6ZWRDb2xvcik7IC8vIElmIG5vdCBoZXgsIGF0dGVtcHQgdG8gcGFyc2UgYXMgUkdCXHJcbiAgICB9XHJcblxyXG4gICAgLy8gQ29udmVydCBoZXggdG8gUkdCXHJcbiAgICBjb25zdCByZ2IgPSB0aGlzLmhleFRvUmdiKHNhbml0aXplZENvbG9yKTtcclxuICAgIHJldHVybiByZ2I7XHJcbiAgfVxyXG5cclxuICAvLyBIZWxwZXIgZnVuY3Rpb24gdG8gdmFsaWRhdGUgaWYgYSBzdHJpbmcgaXMgYSB2YWxpZCAzIG9yIDYgZGlnaXQgaGV4IGNvZGVcclxuICBpc1ZhbGlkSGV4KGNvbG9yOiBzdHJpbmcpOiBib29sZWFuIHtcclxuICAgIGNvbnN0IGhleFJlZ2V4ID0gL15bQS1GYS1mMC05XXszfSR8XltBLUZhLWYwLTldezZ9JC9pO1xyXG4gICAgcmV0dXJuIGhleFJlZ2V4LnRlc3QoY29sb3IpO1xyXG4gIH1cclxuXHJcbiAgLy8gSGVscGVyIGZ1bmN0aW9uIHRvIGNvbnZlcnQgYSAzIG9yIDYgZGlnaXQgaGV4IGNvbG9yIHRvIFJHQlxyXG4gIGhleFRvUmdiKGhleDogc3RyaW5nKTogbnVtYmVyW10ge1xyXG4gICAgaWYgKGhleC5sZW5ndGggPT09IDMpIHtcclxuICAgICAgaGV4ID0gaGV4LnNwbGl0KCcnKS5tYXAoYyA9PiBjICsgYykuam9pbignJyk7IC8vIEV4cGFuZCBzaG9ydGhhbmQgaGV4IHRvIGZ1bGxcclxuICAgIH1cclxuXHJcbiAgICByZXR1cm4gW1xyXG4gICAgICBwYXJzZUludChoZXguc2xpY2UoMCwgMiksIDE2KSxcclxuICAgICAgcGFyc2VJbnQoaGV4LnNsaWNlKDIsIDQpLCAxNiksXHJcbiAgICAgIHBhcnNlSW50KGhleC5zbGljZSg0LCA2KSwgMTYpLFxyXG4gICAgXTtcclxuICB9XHJcblxyXG4gIC8vIEhlbHBlciBmdW5jdGlvbiB0byBwYXJzZSBhbiBSR0Igc3RyaW5nIChlLmcuLCByZ2IoMjU1LCAwLCAwKSkgaW50byBhbiBhcnJheVxyXG4gIHBhcnNlUmdiKHJnYjogc3RyaW5nKTogbnVtYmVyW10ge1xyXG4gICAgY29uc3QgbWF0Y2ggPSByZ2IubWF0Y2goL1xcZCsvZyk7XHJcbiAgICByZXR1cm4gbWF0Y2ggPyBtYXRjaC5tYXAobnVtID0+IHBhcnNlSW50KG51bSkpIDogW107XHJcbiAgfVxyXG5cclxuXHJcbn1cclxuIl19
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Public API Surface of color-util-helpers
|
|
3
|
+
*/
|
|
4
|
+
export * from './lib/color-utils.module';
|
|
5
|
+
export * from './lib/color-utilities-demo/color-utilities-demo.component';
|
|
6
|
+
export * from './lib/color-conversion.service';
|
|
7
|
+
export * from './lib/color-extractor.directive';
|
|
8
|
+
export * from './lib/color-grab.directive';
|
|
9
|
+
export * from './lib/color-pallette.service';
|
|
10
|
+
export * from './lib/text-color.service';
|
|
11
|
+
export * from './lib/color-scheme.service';
|
|
12
|
+
export * from './lib/color-lighten-darken.service';
|
|
13
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NvbG9yLXV0aWwtaGVscGVycy9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsMEJBQTBCLENBQUM7QUFFekMsY0FBYywyREFBMkQsQ0FBQztBQUUxRSxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsMEJBQTBCLENBQUM7QUFFekMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLG9DQUFvQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb2xvci11dGlsLWhlbHBlcnNcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci11dGlscy5tb2R1bGUnO1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci11dGlsaXRpZXMtZGVtby9jb2xvci11dGlsaXRpZXMtZGVtby5jb21wb25lbnQnO1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci1jb252ZXJzaW9uLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sb3ItZXh0cmFjdG9yLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci1ncmFiLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci1wYWxsZXR0ZS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RleHQtY29sb3Iuc2VydmljZSc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbG9yLXNjaGVtZS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbG9yLWxpZ2h0ZW4tZGFya2VuLnNlcnZpY2UnO1xuIl19
|