color-util-helpers 1.0.4 → 1.0.7

package/fesm2022/color-util-helpers.mjs

@@ -1,580 +0,0 @@
-import * as i0 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) => {
-            const hex = c.toString(16);
-            return hex.length === 1 ? "0" + hex : hex;
-        };
-    }
-    rgbToHex(rgb) {
-        if (rgb === null || rgb.length !== 3 || rgb.some(value => value < 0 || value > 255))
-            return '';
-        const [r, g, b] = rgb;
-        const hexR = this.componentToHex(r);
-        const hexG = this.componentToHex(g);
-        const hexB = this.componentToHex(b);
-        return "#" + hexR + hexG + hexB;
-    }
-    hexToRgb(hex) {
-        if (hex === null || hex === undefined)
-            return [];
-        hex = (hex.length === 3) ? hex + hex : hex;
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? [
-            parseInt(result[1], 16),
-            parseInt(result[2], 16),
-            parseInt(result[3], 16)
-        ] : [];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorConversionService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorConversionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class ColorPalletteService {
-    constructor(colorConversionService) {
-        this.colorConversionService = colorConversionService;
-        // define image path
-        // this.colorSelectionService.getColorsFromImage('../assets/sample2.jpg')
-        // get colors
-        // this.colorSelectionService.palette.subscribe(data => this.palette = data)
-        // sample html
-        //   <div *ngFor="let color of palette">
-        //     <div style="display: flex;">
-        //         <div
-        //             class="box"
-        //             [style.background-color]="color.color"
-        //         >
-        //         Color
-        //         </div>
-        //         <div
-        //             class="box"
-        //             [style.background-color]="color.complementaryColor"
-        //         >
-        //         Complementary
-        //         </div>
-        //     </div>
-        // </div>
-        // CSS
-        //   .box {
-        //     width: 100px;
-        //     height: 100px;
-        //     border: solid thin black;
-        //     color: black;
-        //     margin: 4px;
-        //     padding: 16px;
-        //     display: flex;
-        //     flex-wrap: wrap;
-        //     align-content: center;
-        //     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;
-        image.onload = () => {
-            const data = this.generateColorPalette(image, colors) || [];
-            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)
-            return;
-        canvas.width = image.width;
-        canvas.height = image.height;
-        context.drawImage(image, 0, 0);
-        // Get the image data
-        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        const pixels = imageData.data;
-        const pixelCount = imageData.width * imageData.height;
-        // Build an array of RGB colors
-        const colors = [];
-        for (let i = 0; i < pixelCount; i++) {
-            const offset = i * 4;
-            const r = pixels[offset];
-            const g = pixels[offset + 1];
-            const b = pixels[offset + 2];
-            colors.push([r, g, b]);
-        }
-        // Apply color quantization using k-means clustering
-        const quantizedColors = this.kMeansColorQuantization(colors, colorCount);
-        // Order colors by luminance
-        quantizedColors.sort((color1, color2) => {
-            const luminance1 = this.getLuminance(color1);
-            const luminance2 = this.getLuminance(color2);
-            return luminance2 - luminance1;
-        });
-        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 };
-        });
-        return palette;
-    }
-    getLuminance(color) {
-        const [r, g, b] = color;
-        return 0.299 * r + 0.587 * g + 0.114 * b;
-    }
-    calculateColorDistance(color1, color2) {
-        const [r1, g1, b1] = color1;
-        const [r2, g2, b2] = color2;
-        const dr = r2 - r1;
-        const dg = g2 - g1;
-        const db = b2 - b1;
-        return Math.sqrt(dr * dr + dg * dg + db * db);
-    }
-    calculateMeanColor(colors) {
-        let sumR = 0;
-        let sumG = 0;
-        let sumB = 0;
-        for (let i = 0; i < colors.length; i++) {
-            const [r, g, b] = colors[i];
-            sumR += r;
-            sumG += g;
-            sumB += b;
-        }
-        const meanR = Math.round(sumR / colors.length);
-        const meanG = Math.round(sumG / colors.length);
-        const meanB = Math.round(sumB / colors.length);
-        return [meanR, meanG, meanB];
-    }
-    kMeansColorQuantization(colors, k) {
-        let clusterCenters = [];
-        for (let i = 0; i < k; i++) {
-            const randomColor = colors[Math.floor(Math.random() * colors.length)];
-            clusterCenters.push(randomColor);
-        }
-        let clusters = [];
-        for (let i = 0; i < colors.length; i++) {
-            const color = colors[i];
-            let minDistance = Infinity;
-            let nearestCenter = null;
-            for (let j = 0; j < clusterCenters.length; j++) {
-                const center = clusterCenters[j];
-                const distance = this.calculateColorDistance(color, center);
-                if (distance < minDistance) {
-                    minDistance = distance;
-                    nearestCenter = center;
-                }
-            }
-            clusters.push({ color, center: nearestCenter });
-        }
-        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);
-            if (clusterColors.length > 0) {
-                const updatedCenter = this.calculateMeanColor(clusterColors);
-                updatedCenters.push(updatedCenter);
-            }
-        }
-        return updatedCenters;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPalletteService, deps: [{ token: ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPalletteService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPalletteService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: ColorConversionService }]; } });
-
-class TextColorService {
-    constructor(colorConversionService) {
-        this.colorConversionService = colorConversionService;
-    }
-    textColorForBgColor(bgColor, lightColor, darkColor) {
-        const UIColors = this.fixColor(bgColor);
-        const r = UIColors[0];
-        const g = UIColors[1];
-        const b = UIColors[2];
-        return ((r * 0.299 + g * 0.587 + b * 0.114) > 149) ? darkColor : lightColor;
-    }
-    darkerColor(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;
-    }
-    lighterColor(color1, color2) {
-        return (this.isColorLighter(color1, color2)) ? color1 : color2;
-    }
-    isColorLighter(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);
-    }
-    calculateLuminance(r, g, b) {
-        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-    }
-    fixColor(color) {
-        // 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
-        }
-        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' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextColorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], 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
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ColorConversionService, ColorExtractorDirective, ColorLightenDarkenService, ColorPalletteService, ColorSchemeService, ColorUtilitiesDemoComponent, ColorUtilitiesModule, TextColorService };
-//# sourceMappingURL=color-util-helpers.mjs.map