color-util-helpers 1.0.2 → 1.0.4

package/esm2022/lib/text-color.service.mjs

@@ -13,14 +13,14 @@ export class TextColorService {
         return ((r * 0.299 + g * 0.587 + b * 0.114) > 149) ? darkColor : lightColor;
     }
     darkerColor(color1, color2) {
-        return (this.isColorDarker(color1, color2)) ? color1 : color2;
+        return this.isColorDarker(color1, color2) ? color1 : color2;
     }
     isColorDarker(color1, color2) {
         const newColor1 = this.fixColor(color1);
         const newColor2 = this.fixColor(color2);
         const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);
         const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);
-        return (luminance1 > luminance2);
+        return luminance1 < luminance2;
     }
     lighterColor(color1, color2) {
         return (this.isColorLighter(color1, color2)) ? color1 : color2;
@@ -36,15 +36,36 @@ export class TextColorService {
         return 0.2126 * r + 0.7152 * g + 0.0722 * b;
     }
     fixColor(color) {
-        let newColor = color;
-        if (color.includes('#')) {
-            newColor = color.slice(1);
-            newColor = (newColor.length === 3) ? '#' + newColor.split('').map(hex => hex + hex).join('') : '#' + newColor;
+        // Remove leading hash if present
+        const sanitizedColor = color.startsWith('#') ? color.slice(1) : color;
+        // Validate if the color is a valid hex (3 or 6 characters)
+        if (!this.isValidHex(sanitizedColor)) {
+            return this.parseRgb(sanitizedColor); // If not hex, attempt to parse as RGB
         }
-        const Reg_Exp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-        const colorIsHex = Reg_Exp.test(newColor);
-        const UIColors = (colorIsHex) ? this.colorConversionService.hexToRgb(newColor) : newColor.match(/\d+/g)?.map(item => parseInt(item)) || [];
-        return UIColors;
+        // Convert hex to RGB
+        const rgb = this.hexToRgb(sanitizedColor);
+        return rgb;
+    }
+    // Helper function to validate if a string is a valid 3 or 6 digit hex code
+    isValidHex(color) {
+        const hexRegex = /^[A-Fa-f0-9]{3}$|^[A-Fa-f0-9]{6}$/i;
+        return hexRegex.test(color);
+    }
+    // Helper function to convert a 3 or 6 digit hex color to RGB
+    hexToRgb(hex) {
+        if (hex.length === 3) {
+            hex = hex.split('').map(c => c + c).join(''); // Expand shorthand hex to full
+        }
+        return [
+            parseInt(hex.slice(0, 2), 16),
+            parseInt(hex.slice(2, 4), 16),
+            parseInt(hex.slice(4, 6), 16),
+        ];
+    }
+    // Helper function to parse an RGB string (e.g., rgb(255, 0, 0)) into an array
+    parseRgb(rgb) {
+        const match = rgb.match(/\d+/g);
+        return match ? match.map(num => parseInt(num)) : [];
     }
     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 }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextColorService, providedIn: 'root' }); }
@@ -55,4 +76,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     providedIn: 'root'
                 }]
         }], ctorParameters: function () { return [{ type: i1.ColorConversionService }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1jb2xvci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29sb3ItdXRpbHMvc3JjL2xpYi90ZXh0LWNvbG9yLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQTs7O0FBTTFDLE1BQU0sT0FBTyxnQkFBZ0I7SUFFM0IsWUFDVSxzQkFBOEM7UUFBOUMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUF3QjtJQUNyRCxDQUFDO0lBRUosbUJBQW1CLENBQUMsT0FBZSxFQUFFLFVBQWtCLEVBQUUsU0FBaUI7UUFFeEUsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsQ0FBQTtRQUV2QyxNQUFNLENBQUMsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUE7UUFDckIsTUFBTSxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3JCLE1BQU0sQ0FBQyxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUVyQixPQUFPLENBQUMsQ0FBQyxDQUFDLEdBQUMsS0FBSyxHQUFHLENBQUMsR0FBQyxLQUFLLEdBQUcsQ0FBQyxHQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQztJQUV4RSxDQUFDO0lBRUQsV0FBVyxDQUFDLE1BQWMsRUFBRSxNQUFjO1FBQ3hDLE9BQU8sQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sRUFBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUMvRCxDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQWMsRUFBRSxNQUFjO1FBRTFDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxD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aEIsZ0JBQWdCLGNBRmYsTUFBTTs7NEZBRVAsZ0JBQWdCO2tCQUg1QixVQUFVO21CQUFDO29CQUNWLFVBQVUsRUFBRSxNQUFNO2lCQUNuQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJ1xyXG5pbXBvcnQgeyBDb2xvckNvbnZlcnNpb25TZXJ2aWNlIH0gZnJvbSAnLi9jb2xvci1jb252ZXJzaW9uLnNlcnZpY2UnXHJcblxyXG5ASW5qZWN0YWJsZSh7XHJcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUZXh0Q29sb3JTZXJ2aWNlIHtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGNvbG9yQ29udmVyc2lvblNlcnZpY2U6IENvbG9yQ29udmVyc2lvblNlcnZpY2VcclxuICApIHt9XHJcblxyXG4gIHRleHRDb2xvckZvckJnQ29sb3IoYmdDb2xvcjogc3RyaW5nLCBsaWdodENvbG9yOiBzdHJpbmcsIGRhcmtDb2xvcjogc3RyaW5nKSB7XHJcblxyXG4gICAgY29uc3QgVUlDb2xvcnMgPSB0aGlzLmZpeENvbG9yKGJnQ29sb3IpXHJcblxyXG4gICAgY29uc3QgciA9IFVJQ29sb3JzWzBdXHJcbiAgICBjb25zdCBnID0gVUlDb2xvcnNbMV1cclxuICAgIGNvbnN0IGIgPSBVSUNvbG9yc1syXVxyXG5cclxuICAgIHJldHVybiAoKHIqMC4yOTkgKyBnKjAuNTg3ICsgYiowLjExNCkgPiAxNDkpID8gZGFya0NvbG9yIDogbGlnaHRDb2xvcjtcclxuXHJcbiAgfVxyXG5cclxuICBkYXJrZXJDb2xvcihjb2xvcjE6IHN0cmluZywgY29sb3IyOiBzdHJpbmcpIHtcclxuICAgIHJldHVybiAodGhpcy5pc0NvbG9yRGFya2VyKGNvbG9yMSxjb2xvcjIpKSA/IGNvbG9yMSA6IGNvbG9yMjtcclxuICB9XHJcblxyXG4gIGlzQ29sb3JEYXJrZXIoY29sb3IxOiBzdHJpbmcsIGNvbG9yMjogc3RyaW5nKSB7XHJcblxyXG4gICAgY29uc3QgbmV3Q29sb3IxID0gdGhpcy5maXhDb2xvcihjb2xvcjEpXHJcbiAgICBjb25zdCBuZXdDb2xvcjIgPSB0aGlzLmZpeENvbG9yKGNvbG9yMilcclxuXHJcbiAgICBjb25zdCBsdW1pbmFuY2UxID0gdGhpcy5jYWxjdWxhdGVMdW1pbmFuY2UobmV3Q29sb3IxWzBdLCBuZXdDb2xvcjFbMV0sIG5ld0NvbG9yMVsyXSlcclxuICAgIGNvbnN0IGx1bWluYW5jZTIgPSB0aGlzLmNhbGN1bGF0ZUx1bWluYW5jZShuZXdDb2xvcjJbMF0sIG5ld0NvbG9yMlsxXSwgbmV3Q29sb3IyWzJdKVxyXG5cclxuICAgIHJldHVybiAobHVtaW5hbmNlMSA+IGx1bWluYW5jZTIpXHJcblxyXG4gIH1cclxuXHJcbiAgbGlnaHRlckNvbG9yKGNvbG9yMTogc3RyaW5nLCBjb2xvcjI6IHN0cmluZyk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gKHRoaXMuaXNDb2xvckxpZ2h0ZXIoY29sb3IxLGNvbG9yMikpID8gY29sb3IxIDogY29sb3IyO1xyXG4gIH1cclxuXHJcbiAgaXNDb2xvckxpZ2h0ZXIoY29sb3IxOiBzdHJpbmcsIGNvbG9yMjogc3RyaW5nKSB7XHJcbiAgICBcclxuICAgIGNvbnN0IG5ld0NvbG9yMSA9IHRoaXMuZml4Q29sb3IoY29sb3IxKTtcclxuICAgIGNvbnN0IG5ld0NvbG9yMiA9IHRoaXMuZml4Q29sb3IoY29sb3IyKTtcclxuICBcclxuICAgIGNvbnN0IGx1bWluYW5jZTEgPSB0aGlzLmNhbGN1bGF0ZUx1bWluYW5jZShuZXdDb2xvcjFbMF0sIG5ld0NvbG9yMVsxXSwgbmV3Q29sb3IxWzJdKTtcclxuICAgIGNvbnN0IGx1bWluYW5jZTIgPSB0aGlzLmNhbGN1bGF0ZUx1bWluYW5jZShuZXdDb2xvcjJbMF0sIG5ld0NvbG9yMlsxXSwgbmV3Q29sb3IyWzJdKTtcclxuICBcclxuICAgIHJldHVybiAobHVtaW5hbmNlMSA+IGx1bWluYW5jZTIpXHJcblxyXG4gIH1cclxuXHJcbiAgY2FsY3VsYXRlTHVtaW5hbmNlKHI6IG51bWJlciwgZzogbnVtYmVyLCBiOiBudW1iZXIpOiBudW1iZXIge1xyXG4gICAgcmV0dXJuIDAuMjEyNiAqIHIgKyAwLjcxNTIgKiBnICsgMC4wNzIyICogYjtcclxuICB9XHJcblxyXG4gIGZpeENvbG9yKGNvbG9yOiBzdHJpbmcpIHtcclxuXHJcbiAgICBsZXQgbmV3Q29sb3IgPSBjb2xvclxyXG5cclxuICAgIGlmKGNvbG9yLmluY2x1ZGVzKCcjJykpIHtcclxuICAgICAgbmV3Q29sb3IgPSBjb2xvci5zbGljZSgxKVxyXG4gICAgICBuZXdDb2xvciA9IChuZXdDb2xvci5sZW5ndGggPT09IDMpID8gJyMnICsgbmV3Q29sb3Iuc3BsaXQoJycpLm1hcChoZXggPT4gaGV4ICsgaGV4KS5qb2luKCcnKSA6ICcjJyArIG5ld0NvbG9yXHJcbiAgICB9XHJcblxyXG4gICAgY29uc3QgUmVnX0V4cCA9IC9eIyhbQS1GYS1mMC05XXs2fXxbQS1GYS1mMC05XXszfSkkL1xyXG4gICAgY29uc3QgY29sb3JJc0hleCA9IFJlZ19FeHAudGVzdChuZXdDb2xvcilcclxuXHJcbiAgICBjb25zdCBVSUNvbG9ycyA9IChjb2xvcklzSGV4KSA/IHRoaXMuY29sb3JDb252ZXJzaW9uU2VydmljZS5oZXhUb1JnYihuZXdDb2xvcikgOiBuZXdDb2xvci5tYXRjaCgvXFxkKy9nKT8ubWFwKGl0ZW0gPT4gcGFyc2VJbnQoaXRlbSkpIHx8IFtdXHJcblxyXG4gICAgcmV0dXJuIFVJQ29sb3JzXHJcblxyXG4gIH1cclxuXHJcbn1cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1jb2xvci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29sb3ItdXRpbHMvc3JjL2xpYi90ZXh0LWNvbG9yLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQTs7O0FBTTFDLE1BQU0sT0FBTyxnQkFBZ0I7SUFFM0IsWUFDVSxzQkFBOEM7UUFBOUMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUF3QjtJQUNyRCxDQUFDO0lBRUosbUJBQW1CLENBQUMsT0FBZSxFQUFFLFVBQWtCLEVBQUUsU0FBaUI7UUFFeEUsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsQ0FBQTtRQUV2QyxNQUFNLENBQUMsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUE7UUFDckIsTUFBTSxDQUFDLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3JCLE1BQU0sQ0FBQyxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQTtRQUVyQixPQUFPLENBQUMsQ0FBQyxDQUFDLEdBQUMsS0FBSyxHQUFHLENBQUMsR0FBQyxLQUFLLEdBQUcsQ0FBQyxHQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQztJQUV4RSxDQUFDO0lBRUQsV0FBVyxDQUFDLE1BQWMsRUFBRSxNQUFjO1FBQ3hDLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO0lBQzlELENBQUM7SUFFRCxhQUFhLENBQUMsTUFBYyxFQUFFLE1BQWM7UUFFMUMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN4QyxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBRXhDLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3JGLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBRXJGLE9BQU8sVUFBVSxHQUFHLFVBQVUsQ0FBQztJQUNqQyxDQUFDO0lBR0QsWUFBWSxDQUFDLE1BQWMsRUFBRSxNQUFjO1FBQ3pDLE9BQU8sQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sRUFBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUNoRSxDQUFDO0lBRUQsY0FBYyxDQUFDLE1BQWMsRUFBRSxNQUFjO1FBRTNDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDeEMsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUV4QyxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNyRixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUVyRixPQUFPLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQyxDQUFBO0lBRWxDLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxDQUFTLEVBQUUsQ0FBUyxFQUFFLENBQVM7UUFDaEQsT0FBTyxNQUFNLEdBQUcsQ0FBQyxHQUFHLE1BQU0sR0FBRyxDQUFDLEdBQUcsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUM5QyxDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQWE7UUFDcEIsaUNBQWlDO1FBQ2pDLE1BQU0sY0FBYyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUV0RSwyREFBMkQ7UUFDM0QsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsY0FBYyxDQUFDLEVBQUU7WUFDcEMsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsc0NBQXNDO1NBQzdFO1FBRUQscUJBQXFCO1FBQ3JCLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDMUMsT0FBTyxHQUFHLENBQUM7SUFDYixDQUFDO0lBRUQsMkVBQTJFO0lBQzNFLFVBQVUsQ0FBQyxLQUFhO1FBQ3RCLE1BQU0sUUFBUSxHQUFHLG9DQUFvQyxDQUFDO1FBQ3RELE9BQU8sUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRUQsNkRBQTZEO0lBQzdELFFBQVEsQ0FBQyxHQUFXO1FBQ2xCLElBQUksR0FBRyxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUU7WUFDcEIsR0FBRyxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLCtCQUErQjtTQUM5RTtRQUVELE9BQU87WUFDTCxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQzdCLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDN0IsUUFBUSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQztTQUM5QixDQUFDO0lBQ0osQ0FBQztJQUVELDhFQUE4RTtJQUM5RSxRQUFRLENBQUMsR0FBVztRQUNsQixNQUFNLEtBQUssR0FBRyxHQUFHLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ2hDLE9BQU8sS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUN0RCxDQUFDOytHQTNGVSxnQkFBZ0I7bUhBQWhCLGdCQUFnQixjQUZmLE1BQU07OzRGQUVQLGdCQUFnQjtrQkFINUIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcclxuaW1wb3J0IHsgQ29sb3JDb252ZXJzaW9uU2VydmljZSB9IGZyb20gJy4vY29sb3ItY29udmVyc2lvbi5zZXJ2aWNlJ1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgVGV4dENvbG9yU2VydmljZSB7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBjb2xvckNvbnZlcnNpb25TZXJ2aWNlOiBDb2xvckNvbnZlcnNpb25TZXJ2aWNlXHJcbiAgKSB7fVxyXG5cclxuICB0ZXh0Q29sb3JGb3JCZ0NvbG9yKGJnQ29sb3I6IHN0cmluZywgbGlnaHRDb2xvcjogc3RyaW5nLCBkYXJrQ29sb3I6IHN0cmluZykge1xyXG5cclxuICAgIGNvbnN0IFVJQ29sb3JzID0gdGhpcy5maXhDb2xvcihiZ0NvbG9yKVxyXG5cclxuICAgIGNvbnN0IHIgPSBVSUNvbG9yc1swXVxyXG4gICAgY29uc3QgZyA9IFVJQ29sb3JzWzFdXHJcbiAgICBjb25zdCBiID0gVUlDb2xvcnNbMl1cclxuXHJcbiAgICByZXR1cm4gKChyKjAuMjk5ICsgZyowLjU4NyArIGIqMC4xMTQpID4gMTQ5KSA/IGRhcmtDb2xvciA6IGxpZ2h0Q29sb3I7XHJcblxyXG4gIH1cclxuXHJcbiAgZGFya2VyQ29sb3IoY29sb3IxOiBzdHJpbmcsIGNvbG9yMjogc3RyaW5nKSB7XHJcbiAgICByZXR1cm4gdGhpcy5pc0NvbG9yRGFya2VyKGNvbG9yMSwgY29sb3IyKSA/IGNvbG9yMSA6IGNvbG9yMjtcclxuICB9XHJcblxyXG4gIGlzQ29sb3JEYXJrZXIoY29sb3IxOiBzdHJpbmcsIGNvbG9yMjogc3RyaW5nKSB7XHJcblxyXG4gICAgY29uc3QgbmV3Q29sb3IxID0gdGhpcy5maXhDb2xvcihjb2xvcjEpO1xyXG4gICAgY29uc3QgbmV3Q29sb3IyID0gdGhpcy5maXhDb2xvcihjb2xvcjIpO1xyXG5cclxuICAgIGNvbnN0IGx1bWluYW5jZTEgPSB0aGlzLmNhbGN1bGF0ZUx1bWluYW5jZShuZXdDb2xvcjFbMF0sIG5ld0NvbG9yMVsxXSwgbmV3Q29sb3IxWzJdKTtcclxuICAgIGNvbnN0IGx1bWluYW5jZTIgPSB0aGlzLmNhbGN1bGF0ZUx1bWluYW5jZShuZXdDb2xvcjJbMF0sIG5ld0NvbG9yMlsxXSwgbmV3Q29sb3IyWzJdKTtcclxuXHJcbiAgICByZXR1cm4gbHVtaW5hbmNlMSA8IGx1bWluYW5jZTI7XHJcbiAgfVxyXG5cclxuXHJcbiAgbGlnaHRlckNvbG9yKGNvbG9yMTogc3RyaW5nLCBjb2xvcjI6IHN0cmluZyk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gKHRoaXMuaXNDb2xvckxpZ2h0ZXIoY29sb3IxLGNvbG9yMikpID8gY29sb3IxIDogY29sb3IyO1xyXG4gIH1cclxuXHJcbiAgaXNDb2xvckxpZ2h0ZXIoY29sb3IxOiBzdHJpbmcsIGNvbG9yMjogc3RyaW5nKSB7XHJcblxyXG4gICAgY29uc3QgbmV3Q29sb3IxID0gdGhpcy5maXhDb2xvcihjb2xvcjEpO1xyXG4gICAgY29uc3QgbmV3Q29sb3IyID0gdGhpcy5maXhDb2xvcihjb2xvcjIpO1xyXG5cclxuICAgIGNvbnN0IGx1bWluYW5jZTEgPSB0aGlzLmNhbGN1bGF0ZUx1bWluYW5jZShuZXdDb2xvcjFbMF0sIG5ld0NvbG9yMVsxXSwgbmV3Q29sb3IxWzJdKTtcclxuICAgIGNvbnN0IGx1bWluYW5jZTIgPSB0aGlzLmNhbGN1bGF0ZUx1bWluYW5jZShuZXdDb2xvcjJbMF0sIG5ld0NvbG9yMlsxXSwgbmV3Q29sb3IyWzJdKTtcclxuXHJcbiAgICByZXR1cm4gKGx1bWluYW5jZTEgPiBsdW1pbmFuY2UyKVxyXG5cclxuICB9XHJcblxyXG4gIGNhbGN1bGF0ZUx1bWluYW5jZShyOiBudW1iZXIsIGc6IG51bWJlciwgYjogbnVtYmVyKTogbnVtYmVyIHtcclxuICAgIHJldHVybiAwLjIxMjYgKiByICsgMC43MTUyICogZyArIDAuMDcyMiAqIGI7XHJcbiAgfVxyXG5cclxuICBmaXhDb2xvcihjb2xvcjogc3RyaW5nKSB7XHJcbiAgICAvLyBSZW1vdmUgbGVhZGluZyBoYXNoIGlmIHByZXNlbnRcclxuICAgIGNvbnN0IHNhbml0aXplZENvbG9yID0gY29sb3Iuc3RhcnRzV2l0aCgnIycpID8gY29sb3Iuc2xpY2UoMSkgOiBjb2xvcjtcclxuXHJcbiAgICAvLyBWYWxpZGF0ZSBpZiB0aGUgY29sb3IgaXMgYSB2YWxpZCBoZXggKDMgb3IgNiBjaGFyYWN0ZXJzKVxyXG4gICAgaWYgKCF0aGlzLmlzVmFsaWRIZXgoc2FuaXRpemVkQ29sb3IpKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLnBhcnNlUmdiKHNhbml0aXplZENvbG9yKTsgLy8gSWYgbm90IGhleCwgYXR0ZW1wdCB0byBwYXJzZSBhcyBSR0JcclxuICAgIH1cclxuXHJcbiAgICAvLyBDb252ZXJ0IGhleCB0byBSR0JcclxuICAgIGNvbnN0IHJnYiA9IHRoaXMuaGV4VG9SZ2Ioc2FuaXRpemVkQ29sb3IpO1xyXG4gICAgcmV0dXJuIHJnYjtcclxuICB9XHJcblxyXG4gIC8vIEhlbHBlciBmdW5jdGlvbiB0byB2YWxpZGF0ZSBpZiBhIHN0cmluZyBpcyBhIHZhbGlkIDMgb3IgNiBkaWdpdCBoZXggY29kZVxyXG4gIGlzVmFsaWRIZXgoY29sb3I6IHN0cmluZyk6IGJvb2xlYW4ge1xyXG4gICAgY29uc3QgaGV4UmVnZXggPSAvXltBLUZhLWYwLTldezN9JHxeW0EtRmEtZjAtOV17Nn0kL2k7XHJcbiAgICByZXR1cm4gaGV4UmVnZXgudGVzdChjb2xvcik7XHJcbiAgfVxyXG5cclxuICAvLyBIZWxwZXIgZnVuY3Rpb24gdG8gY29udmVydCBhIDMgb3IgNiBkaWdpdCBoZXggY29sb3IgdG8gUkdCXHJcbiAgaGV4VG9SZ2IoaGV4OiBzdHJpbmcpOiBudW1iZXJbXSB7XHJcbiAgICBpZiAoaGV4Lmxlbmd0aCA9PT0gMykge1xyXG4gICAgICBoZXggPSBoZXguc3BsaXQoJycpLm1hcChjID0+IGMgKyBjKS5qb2luKCcnKTsgLy8gRXhwYW5kIHNob3J0aGFuZCBoZXggdG8gZnVsbFxyXG4gICAgfVxyXG5cclxuICAgIHJldHVybiBbXHJcbiAgICAgIHBhcnNlSW50KGhleC5zbGljZSgwLCAyKSwgMTYpLFxyXG4gICAgICBwYXJzZUludChoZXguc2xpY2UoMiwgNCksIDE2KSxcclxuICAgICAgcGFyc2VJbnQoaGV4LnNsaWNlKDQsIDYpLCAxNiksXHJcbiAgICBdO1xyXG4gIH1cclxuXHJcbiAgLy8gSGVscGVyIGZ1bmN0aW9uIHRvIHBhcnNlIGFuIFJHQiBzdHJpbmcgKGUuZy4sIHJnYigyNTUsIDAsIDApKSBpbnRvIGFuIGFycmF5XHJcbiAgcGFyc2VSZ2IocmdiOiBzdHJpbmcpOiBudW1iZXJbXSB7XHJcbiAgICBjb25zdCBtYXRjaCA9IHJnYi5tYXRjaCgvXFxkKy9nKTtcclxuICAgIHJldHVybiBtYXRjaCA/IG1hdGNoLm1hcChudW0gPT4gcGFyc2VJbnQobnVtKSkgOiBbXTtcclxuICB9XHJcblxyXG5cclxufVxyXG4iXX0=

package/esm2022/public-api.mjs

@@ -1,8 +1,12 @@
 /*
  * Public API Surface of color-utils
  */
+export * from './lib/color-utils.module';
+export * from './lib/color-utilities-demo/color-utilities-demo.component';
 export * from './lib/color-conversion.service';
 export * from './lib/color-extractor.directive';
 export * from './lib/color-pallette.service';
 export * from './lib/text-color.service';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NvbG9yLXV0aWxzL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLGlDQUFpQyxDQUFDO0FBQ2hELGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYywwQkFBMEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgY29sb3ItdXRpbHNcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci1jb252ZXJzaW9uLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sb3ItZXh0cmFjdG9yLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci1wYWxsZXR0ZS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RleHQtY29sb3Iuc2VydmljZSc7XG4iXX0=
+export * from './lib/color-scheme.service';
+export * from './lib/color-lighten-darken.service';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NvbG9yLXV0aWxzL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLDJEQUEyRCxDQUFDO0FBRTFFLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyxpQ0FBaUMsQ0FBQztBQUNoRCxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsMEJBQTBCLENBQUM7QUFFekMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLG9DQUFvQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb2xvci11dGlsc1xuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbG9yLXV0aWxzLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci11dGlsaXRpZXMtZGVtby9jb2xvci11dGlsaXRpZXMtZGVtby5jb21wb25lbnQnO1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci1jb252ZXJzaW9uLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29sb3ItZXh0cmFjdG9yLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb2xvci1wYWxsZXR0ZS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RleHQtY29sb3Iuc2VydmljZSc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbG9yLXNjaGVtZS5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbG9yLWxpZ2h0ZW4tZGFya2VuLnNlcnZpY2UnO1xuIl19

package/fesm2022/color-util-helpers.mjs

@@ -1,7 +1,38 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Directive, Output, HostListener } from '@angular/core';
+import { NgModule, Injectable, inject, Component, EventEmitter, Directive, Output, HostListener } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import { BehaviorSubject } from 'rxjs';
 
+class ColorUtilitiesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesModule, declarations: [ColorUtilitiesDemoComponent], imports: [CommonModule,
+            MatButtonModule,
+            MatDividerModule], exports: [ColorUtilitiesDemoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesModule, imports: [CommonModule,
+            MatButtonModule,
+            MatDividerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatDividerModule
+                    ],
+                    declarations: [
+                        ColorUtilitiesDemoComponent,
+                    ],
+                    exports: [
+                        ColorUtilitiesDemoComponent
+                    ]
+                }]
+        }] });
+
 class ColorConversionService {
     constructor() {
         this.componentToHex = (c) => {
@@ -39,41 +70,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class ColorExtractorDirective {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.colorValue = new EventEmitter();
-    }
-    get currentElement() {
-        return window.getComputedStyle(this.elementRef.nativeElement);
-    }
-    onMouseEnter() {
-        // console.log('ENTER', this.currentElement)
-        this.colorValue.emit(this.currentElement.getPropertyValue('background-color'));
-    }
-    onMouseLeave() {
-        // console.log('LEAVE', this.currentElement.getPropertyValue('background-color'))
-        this.colorValue.emit('white');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorExtractorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorExtractorDirective, selector: "[getColor]", outputs: { colorValue: "colorValue" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorExtractorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[getColor]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { colorValue: [{
-                type: Output
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
 class ColorPalletteService {
     constructor(colorConversionService) {
         this.colorConversionService = colorConversionService;
@@ -112,7 +108,15 @@ class ColorPalletteService {
         //     justify-content: center;
         // }
         this.palette = new BehaviorSubject([]);
+        this.palette$ = this.palette.asObservable();
     }
+    /**
+     * Retrieves a color palette from an image at the specified path.
+     *
+     * @param imagePath - The path to the image to extract the color palette from.
+     * @param colors - The number of colors to include in the palette (default is 3).
+     * @returns An observable that emits the generated color palette.
+     */
     getColorsFromImage(imagePath, colors = 3) {
         const image = new Image();
         image.src = imagePath;
@@ -121,10 +125,17 @@ class ColorPalletteService {
             this.palette.next(data);
         };
     }
+    /**
+     * Generates a color palette from an image.
+     *
+     * @param image - The HTML image element to extract the color palette from.
+     * @param colorCount - The number of colors to include in the palette (default is 6).
+     * @returns An array of color objects, each with a hex color and a complementary hex color.
+     */
     generateColorPalette(image, colorCount = 6) {
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        if (!context || !image)
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        if (!context)
             return;
         canvas.width = image.width;
         canvas.height = image.height;
@@ -150,8 +161,8 @@ class ColorPalletteService {
             const luminance2 = this.getLuminance(color2);
             return luminance2 - luminance1;
         });
-        const palette = quantizedColors.map(color => {
-            const complementaryColor = color.map(component => 255 - component);
+        const palette = quantizedColors.map((color) => {
+            const complementaryColor = color.map((component) => 255 - component);
             const hexColor = this.colorConversionService.rgbToHex(color);
             const hexComplementaryColor = this.colorConversionService.rgbToHex(complementaryColor);
             return { color: hexColor, complementaryColor: hexComplementaryColor };
@@ -186,12 +197,12 @@ class ColorPalletteService {
         return [meanR, meanG, meanB];
     }
     kMeansColorQuantization(colors, k) {
-        const clusterCenters = [];
+        let clusterCenters = [];
         for (let i = 0; i < k; i++) {
             const randomColor = colors[Math.floor(Math.random() * colors.length)];
             clusterCenters.push(randomColor);
         }
-        const clusters = [];
+        let clusters = [];
         for (let i = 0; i < colors.length; i++) {
             const color = colors[i];
             let minDistance = Infinity;
@@ -206,7 +217,7 @@ class ColorPalletteService {
             }
             clusters.push({ color, center: nearestCenter });
         }
-        const updatedCenters = [];
+        let updatedCenters = [];
         for (let i = 0; i < clusterCenters.length; i++) {
             const center = clusterCenters[i];
             const clusterColors = clusters.filter(c => c.center === center).map(c => c.color);
@@ -239,14 +250,14 @@ class TextColorService {
         return ((r * 0.299 + g * 0.587 + b * 0.114) > 149) ? darkColor : lightColor;
     }
     darkerColor(color1, color2) {
-        return (this.isColorDarker(color1, color2)) ? color1 : color2;
+        return this.isColorDarker(color1, color2) ? color1 : color2;
     }
     isColorDarker(color1, color2) {
         const newColor1 = this.fixColor(color1);
         const newColor2 = this.fixColor(color2);
         const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);
         const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);
-        return (luminance1 > luminance2);
+        return luminance1 < luminance2;
     }
     lighterColor(color1, color2) {
         return (this.isColorLighter(color1, color2)) ? color1 : color2;
@@ -262,15 +273,36 @@ class TextColorService {
         return 0.2126 * r + 0.7152 * g + 0.0722 * b;
     }
     fixColor(color) {
-        let newColor = color;
-        if (color.includes('#')) {
-            newColor = color.slice(1);
-            newColor = (newColor.length === 3) ? '#' + newColor.split('').map(hex => hex + hex).join('') : '#' + newColor;
+        // Remove leading hash if present
+        const sanitizedColor = color.startsWith('#') ? color.slice(1) : color;
+        // Validate if the color is a valid hex (3 or 6 characters)
+        if (!this.isValidHex(sanitizedColor)) {
+            return this.parseRgb(sanitizedColor); // If not hex, attempt to parse as RGB
+        }
+        // Convert hex to RGB
+        const rgb = this.hexToRgb(sanitizedColor);
+        return rgb;
+    }
+    // Helper function to validate if a string is a valid 3 or 6 digit hex code
+    isValidHex(color) {
+        const hexRegex = /^[A-Fa-f0-9]{3}$|^[A-Fa-f0-9]{6}$/i;
+        return hexRegex.test(color);
+    }
+    // Helper function to convert a 3 or 6 digit hex color to RGB
+    hexToRgb(hex) {
+        if (hex.length === 3) {
+            hex = hex.split('').map(c => c + c).join(''); // Expand shorthand hex to full
         }
-        const Reg_Exp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-        const colorIsHex = Reg_Exp.test(newColor);
-        const UIColors = (colorIsHex) ? this.colorConversionService.hexToRgb(newColor) : newColor.match(/\d+/g)?.map(item => parseInt(item)) || [];
-        return UIColors;
+        return [
+            parseInt(hex.slice(0, 2), 16),
+            parseInt(hex.slice(2, 4), 16),
+            parseInt(hex.slice(4, 6), 16),
+        ];
+    }
+    // Helper function to parse an RGB string (e.g., rgb(255, 0, 0)) into an array
+    parseRgb(rgb) {
+        const match = rgb.match(/\d+/g);
+        return match ? match.map(num => parseInt(num)) : [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextColorService, deps: [{ token: ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextColorService, providedIn: 'root' }); }
@@ -282,6 +314,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: ColorConversionService }]; } });
 
+class ColorLightenDarkenService {
+    // const color = '#3498db'; // Your color
+    // const lighterColor = lighten(color, 0.2); // 20% lighter
+    // const darkerColor = darken(color, 0.2);   // 20% darker
+    // console.log(lighterColor, darkerColor);
+    constructor() {
+        this.colors = inject(TextColorService);
+    }
+    lighten(color, amount) {
+        const rgb = this.colors.fixColor(color);
+        // const rgb = color.match(/\w\w/g)?.map((x) => parseInt(x, 16)) || [];
+        // Convert RGB to HSL
+        let [r, g, b] = rgb.map((c) => c / 255);
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s = 0, l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        // Modify the lightness and clamp it to [0, 1]
+        l = Math.min(1, l + amount);
+        // Convert HSL back to RGB
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        // Convert RGB back to hexadecimal color
+        const toHex = (x) => Math.round(x * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    darken(color, amount) {
+        return this.lighten(color, -amount);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorLightenDarkenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorLightenDarkenService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorLightenDarkenService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ColorSchemeService {
+    constructor() { }
+    /**
+     * Generates a random hexadecimal color code.
+     *
+     * 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.
+     *
+     * @returns A hexadecimal color code in the format "#RRGGBB".
+     */
+    generateRandomColor() {
+        // Generate a random hue between 0 and 360 (representing degrees on the color wheel)
+        const hue = Math.floor(Math.random() * 360);
+        // Generate random saturation and lightness values between 50% and 100%
+        const saturation = Math.floor(Math.random() * 51) + 50;
+        const lightness = Math.floor(Math.random() * 51) + 50;
+        // Convert HSL values to RGB values
+        const rgbColor = this.hslToRgb(hue, saturation, lightness);
+        // Convert RGB values to hexadecimal color code
+        const hexColor = this.rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b);
+        return hexColor;
+    }
+    /**
+     * Converts HSL (Hue, Saturation, Lightness) color values to RGB (Red, Green, Blue) color values.
+     *
+     * @param h - The hue value, ranging from 0 to 360 degrees.
+     * @param s - The saturation value, ranging from 0 to 100 percent.
+     * @param l - The lightness value, ranging from 0 to 100 percent.
+     * @returns An object with the RGB color values, where each value is between 0 and 255.
+     */
+    hslToRgb(h, s, l) {
+        h /= 360;
+        s /= 100;
+        l /= 100;
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l; // Achromatic color (gray)
+        }
+        else {
+            const hueToRgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255);
+            g = Math.round(hueToRgb(p, q, h) * 255);
+            b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255);
+        }
+        return { r, g, b };
+    }
+    /**
+     * Converts RGB color values to a hexadecimal color string.
+     *
+     * @param r - The red color value, between 0 and 255.
+     * @param g - The green color value, between 0 and 255.
+     * @param b - The blue color value, between 0 and 255.
+     * @returns A hexadecimal color string in the format "#RRGGBB".
+     */
+    rgbToHex(r, g, b) {
+        const componentToHex = (c) => {
+            const hex = c.toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        };
+        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+    }
+    /**
+   * Adjusts a hexadecimal color value by a given percentage.
+   *
+   * @param hexColor - The hexadecimal color value to adjust.
+   * @param percentage - The percentage to adjust the color by, ranging from -100 to 100.
+   * @returns The adjusted hexadecimal color value.
+   */
+    adjustHexColor(hexColor, percentage) {
+        // Remove the "#" symbol if present
+        hexColor = hexColor.replace("#", "");
+        // Convert the hex color to RGB values
+        const red = parseInt(hexColor.substring(0, 2), 16);
+        const green = parseInt(hexColor.substring(2, 4), 16);
+        const blue = parseInt(hexColor.substring(4, 6), 16);
+        // Calculate the adjustment amount based on the percentage
+        const adjustAmount = Math.round(255 * (percentage / 100));
+        // Adjust the RGB values
+        const adjustedRed = this.clamp(red + adjustAmount);
+        const adjustedGreen = this.clamp(green + adjustAmount);
+        const adjustedBlue = this.clamp(blue + adjustAmount);
+        // Convert the adjusted RGB values back to hex
+        const adjustedHexColor = `#${(adjustedRed).toString(16).padStart(2, '0')}${(adjustedGreen).toString(16).padStart(2, '0')}${(adjustedBlue).toString(16).padStart(2, '0')}`;
+        return adjustedHexColor;
+    }
+    clamp(value) {
+        return Math.max(0, Math.min(value, 255));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorSchemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorSchemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ColorUtilitiesDemoComponent {
+    constructor() {
+        this.colorConversionService = inject(ColorConversionService);
+        this.colorLightenDarkenService = inject(ColorLightenDarkenService);
+        this.colorPalletteService = inject(ColorPalletteService);
+        this.textColorService = inject(TextColorService);
+        this.colorSchemeService = inject(ColorSchemeService);
+        this.HEX = this.colorConversionService.rgbToHex([12, 56, 128]);
+        this.RGB = `rgb(${this.colorConversionService.hexToRgb('#AA11BB')})`;
+        this.lighten = this.colorLightenDarkenService.lighten('#AA11BB', .25);
+        this.darken = this.colorLightenDarkenService.darken('#AA11BB', .25);
+        this.colorIsDarker = this.textColorService.isColorDarker(this.lighten, this.darken);
+        this.darkBk = this.textColorService.textColorForBgColor(this.HEX, this.lighten, this.darken);
+        this.lightBk = this.textColorService.textColorForBgColor('whitesmoke', this.lighten, this.darken);
+        this.colors$ = this.colorPalletteService.palette$;
+        this.colorPick = this.colorSchemeService.generateRandomColor();
+        this.colorPickDarker = this.colorSchemeService.adjustHexColor(this.colorPick, -25);
+        this.colorPickLighter = this.colorSchemeService.adjustHexColor(this.colorPick, 25);
+    }
+    ngOnInit() {
+        // define image path
+        this.img = '/assets/images/HD.png';
+        this.colorPalletteService.getColorsFromImage(this.img, 8);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorUtilitiesDemoComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: function () { return []; } });
+
+class ColorExtractorDirective {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.colorValue = new EventEmitter();
+    }
+    get currentElement() {
+        return window.getComputedStyle(this.elementRef.nativeElement);
+    }
+    onMouseEnter() {
+        // console.log('ENTER', this.currentElement)
+        this.colorValue.emit(this.currentElement.getPropertyValue('background-color'));
+    }
+    onMouseLeave() {
+        // console.log('LEAVE', this.currentElement.getPropertyValue('background-color'))
+        this.colorValue.emit('white');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorExtractorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorExtractorDirective, selector: "[getColor]", outputs: { colorValue: "colorValue" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorExtractorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[getColor]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { colorValue: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 /*
  * Public API Surface of color-utils
  */
@@ -290,5 +576,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ColorConversionService, ColorExtractorDirective, ColorPalletteService, TextColorService };
+export { ColorConversionService, ColorExtractorDirective, ColorLightenDarkenService, ColorPalletteService, ColorSchemeService, ColorUtilitiesDemoComponent, ColorUtilitiesModule, TextColorService };
 //# sourceMappingURL=color-util-helpers.mjs.map