color-util-helpers 1.0.7 → 1.0.10

package/src/lib/color-scheme.service.ts

@@ -1,123 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export 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: number, s: number, l: number) {
-    h /= 360;
-    s /= 100;
-    l /= 100;
-
-    let r, g, b;
-
-    if (s === 0) {
-      r = g = b = l; // Achromatic color (gray)
-    } else {
-      const hueToRgb = (p: number, q: number, t: number) => {
-        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: number, g: number, b: number) {
-    const componentToHex = (c: number) => {
-      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: string, percentage: number) {
-    // 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: number) {
-    return Math.max(0, Math.min(value, 255));
-  }
-
-}

package/src/lib/color-utilities-demo/color-utilities-demo.component.css

@@ -1,12 +0,0 @@
-.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;
-}

package/src/lib/color-utilities-demo/color-utilities-demo.component.html

@@ -1,109 +0,0 @@
-<div style="margin: 2rem;">
-
-  <h1>Color Conversion Service</h1>
-  <div style="display: flex; flex-direction: column; gap: 1rem;">
-    <div style="display: flex">
-      <div style="padding-top: .5rem; margin-right: .5rem;">rgbToHex: {{ HEX }}</div>
-      <div style="width: 32px; height: 32px;" [style.backgroundColor]="HEX"></div>
-    </div>
-
-    <div style="display: flex">
-      <div style="padding-top: .5rem; margin-right: .5rem;"> hexToRgb: {{ RGB }} </div>
-      <div style="width: 32px; height: 32px;" [style.backgroundColor]="RGB"></div>
-    </div>
-  </div>
-
-  <div style="margin-top: 1rem; margin-bottom: 1rem;">
-    <mat-divider></mat-divider>
-  </div>
-
-  <h1>Color Light/Darken Service</h1>
-
-  <div style="display: flex; flex-direction: column; gap: 1rem;">
-
-    <div style="display: flex; gap: 1rem">
-      Original Color: #AA11BB<br>
-      <div style="width: 32px; height: 32px; background-color: #AA11BB;"></div>
-      Lighten (25%): {{ lighten }}<br>
-      <div style="width: 32px; height: 32px;" [style.backgroundColor]="lighten"></div>
-      Darken (25%): {{ darken }}<br>
-      <div style="width: 32px; height: 32px;" [style.backgroundColor]="darken"></div>
-    </div>
-
-  </div>
-
-  <div style="margin-top: 1rem; margin-bottom: 1rem;">
-    <mat-divider></mat-divider>
-  </div>
-
-  <h1>Text Color Utility Services</h1>
-
-  <div style="display: flex; gap: 1rem; flex-direction: column;">
-    <div style="display: flex; gap: 1rem">
-      <div style="width: 32px; height: 32px;" [style.backgroundColor]="darken"></div>
-      <div style="width: 32px; height: 32px;" [style.backgroundColor]="lighten"></div>
-      is Darker : {{ colorIsDarker }}
-      <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorIsDarker"></div>
-    </div>
-  
-    <div style="display: flex; gap: 1rem; flex-direction: column;">
-      
-      <div>
-        Use: {{ lightBk }} for '{{ HEX }}' background-color<br>
-        <div style="padding: 1rem;" [style.backgroundColor]="HEX" [style.color]="darkBk">
-        Sample Text Color
-        </div>
-      </div>
-
-      <div>
-        Use: {{ lightBk }} for 'whitesmoke' background-color<br>
-        <div style="padding: 1rem; background-color: whitesmoke;" [style.color]="lightBk">
-          Sample Text Color
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div style="margin-top: 1rem; margin-bottom: 1rem;">
-    <mat-divider></mat-divider>
-  </div>
-  
- <h1>Color Schema Services</h1>
-
-  <div style="display: flex; gap: 1rem">
-    Pick Color: {{ colorPick }}<br>
-    <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorPick"></div>
-    Lighter Version: {{ colorPickLighter }}<br>
-    <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorPickLighter"></div>
-    DarkerVersion: {{ colorPickDarker }}<br>
-    <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorPickDarker"></div>
-  </div>
-
-  <div style="margin-top: 1rem; margin-bottom: 1rem;">
-    <mat-divider></mat-divider>
-  </div>
-
-  <h1>Color Pallette Service</h1>
-  Creates Pallette from Image
-  <div style="display: flex; gap: 2rem;">
-    <div>
-      <img [src]="img" height="180">
-    </div>
-
-    <div style="display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;">
-      <div>Color Pick</div>
-      <ng-container *ngFor="let color of (colors$ | async)">
-          <div style="width: 32px; height: 32px;" [style.backgroundColor]="color.color"></div>
-      </ng-container>
-    </div>
-  
-    <div style="display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;">
-      <div>Complementary</div>
-      <ng-container *ngFor="let color of (colors$ | async)">
-          <div style="width: 32px; height: 32px;" [style.backgroundColor]="color.complementaryColor"></div>
-      </ng-container>
-    </div>
-  </div>
-
-</div>
-

package/src/lib/color-utilities-demo/color-utilities-demo.component.ts

@@ -1,57 +0,0 @@
-import { Component, OnInit, inject } from '@angular/core';
-
-import { ColorConversionService } from '../color-conversion.service';
-import { ColorPalletteService } from '../color-pallette.service';
-import { TextColorService } from '../text-color.service';
-import { ColorLightenDarkenService } from '../color-lighten-darken.service';
-import { ColorSchemeService } from '../color-scheme.service';
-
-@Component({
-  selector: 'app-color-utilities-demo',
-  templateUrl: './color-utilities-demo.component.html',
-  styleUrls: ['./color-utilities-demo.component.css'],
-})
-export class ColorUtilitiesDemoComponent implements OnInit {
-
-  colorConversionService = inject(ColorConversionService)
-  colorLightenDarkenService = inject(ColorLightenDarkenService)
-  colorPalletteService = inject(ColorPalletteService)
-  textColorService = inject(TextColorService)
-  colorSchemeService = inject(ColorSchemeService)
-
-
-  HEX = this.colorConversionService.rgbToHex([12, 56, 128])
-  RGB = `rgb(${this.colorConversionService.hexToRgb('#AA11BB')})`
-
-
-  lighten = this.colorLightenDarkenService.lighten('#AA11BB', .25)
-  darken = this.colorLightenDarkenService.darken('#AA11BB', .25)
-
-  colorIsDarker = this.textColorService.isColorDarker(this.lighten, this.darken)
-
-  darkBk = this.textColorService.textColorForBgColor(this.HEX, this.lighten, this.darken)
-  lightBk = this.textColorService.textColorForBgColor('whitesmoke', this.lighten, this.darken)
-
-  palette: any
-  colors$ = this.colorPalletteService.palette$
-
-  colorPick = this.colorSchemeService.generateRandomColor()
-  colorPickDarker = this.colorSchemeService.adjustHexColor(this.colorPick, -25)
-  colorPickLighter = this.colorSchemeService.adjustHexColor(this.colorPick, 25)
-
-  img: string|any
-
-  constructor() { }
-
-  ngOnInit() {
-
-    // define image path
-    this.img = 'assets/picture.webp'
-    this.colorPalletteService.getColorsFromImage(this.img, 8)
-
-
-  }
-
-
-}
-

package/src/lib/color-utils.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
-import { ColorGrabberDirective } from './color-grab.directive';
-
-import { ColorUtilitiesDemoComponent } from './color-utilities-demo/color-utilities-demo.component';
-import { ColorExtractorDirective } from './color-extractor.directive';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatDividerModule
-  ],
-  declarations: [
-    ColorUtilitiesDemoComponent,
-    ColorGrabberDirective,
-    ColorExtractorDirective
-  ],
-  exports: [
-    ColorUtilitiesDemoComponent
-  ]
-})
-export class ColorUtilitiesModule { }

package/src/lib/text-color.service.spec.ts

@@ -1,75 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { TextColorService } from './text-color.service';
-import { ColorConversionService } from './color-conversion.service';
-
-describe('TextColorService', () => {
-  let service: TextColorService;
-  let colorConversionServiceSpy: jasmine.SpyObj<ColorConversionService>;
-
-  beforeEach(() => {
-    const spy = jasmine.createSpyObj('ColorConversionService', ['hexToRgb']);
-
-    TestBed.configureTestingModule({
-      providers: [
-        TextColorService,
-        { provide: ColorConversionService, useValue: spy }
-      ]
-    });
-    service = TestBed.inject(TextColorService);
-    colorConversionServiceSpy = TestBed.inject(ColorConversionService) as jasmine.SpyObj<ColorConversionService>;
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should return dark text for light background', () => {
-    colorConversionServiceSpy.hexToRgb.and.returnValue([255, 255, 255]); // White
-    expect(service.textColorForBgColor('#FFFFFF', '#FFFFFF', '#000000')).toBe('#000000');
-  });
-
-  it('should return light text for dark background', () => {
-    colorConversionServiceSpy.hexToRgb.and.returnValue([0, 0, 0]); // Black
-    expect(service.textColorForBgColor('#000000', '#FFFFFF', '#000000')).toBe('#FFFFFF');
-  });
-
-  it('should determine darker color correctly', () => {
-    colorConversionServiceSpy.hexToRgb.withArgs('#0000FF').and.returnValue([0, 0, 255]); // Blue
-    colorConversionServiceSpy.hexToRgb.withArgs('#FF0000').and.returnValue([255, 0, 0]); // Red
-    expect(service.darkerColor('#0000FF', '#FF0000')).toBe('#0000FF');
-  });
-
-  it('should determine lighter color correctly', () => {
-    colorConversionServiceSpy.hexToRgb.withArgs('#0000FF').and.returnValue([0, 0, 255]); // Blue
-    colorConversionServiceSpy.hexToRgb.withArgs('#FF0000').and.returnValue([255, 0, 0]); // Red
-    expect(service.lighterColor('#FF0000', '#0000FF')).toBe('#FF0000');
-  });
-
-  it('should calculate luminance accurately', () => {
-    expect(service.calculateLuminance(255, 255, 255)).toBeCloseTo(255, 2); // White
-    expect(service.calculateLuminance(0, 0, 0)).toBeCloseTo(0, 2); // Black
-  });
-
-  it('should fix color to RGB array for hex input', () => {
-    colorConversionServiceSpy.hexToRgb.withArgs('#FF0000').and.returnValue([255, 0, 0]);
-    expect(service.fixColor('#FF0000')).toEqual([255, 0, 0]);
-  });
-
-  it('should handle 3-digit hex color', () => {
-    colorConversionServiceSpy.hexToRgb.withArgs('#F00').and.returnValue([255, 0, 0]);
-    expect(service.fixColor('#F00')).toEqual([255, 0, 0]);
-  });
-
-  it('should return empty array for invalid hex color', () => {
-    colorConversionServiceSpy.hexToRgb.and.returnValue([]);
-    expect(service.fixColor('#GGG')).toEqual([]);
-  });
-
-  it('should convert RGB string to array', () => {
-    expect(service.fixColor('rgb(100, 200, 50)')).toEqual([100, 200, 50]);
-  });
-
-  it('should handle malformed color input', () => {
-    expect(service.fixColor('not a color')).toEqual([]);
-  });
-});

package/src/lib/text-color.service.ts

@@ -1,101 +0,0 @@
-import { Injectable } from '@angular/core'
-import { ColorConversionService } from './color-conversion.service'
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TextColorService {
-
-  constructor(
-    private colorConversionService: ColorConversionService
-  ) {}
-
-  textColorForBgColor(bgColor: string, lightColor: string, darkColor: string) {
-
-    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: string, color2: string) {
-    return this.isColorDarker(color1, color2) ? color1 : color2;
-  }
-
-  isColorDarker(color1: string, color2: string) {
-
-    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: string, color2: string): string {
-    return (this.isColorLighter(color1,color2)) ? color1 : color2;
-  }
-
-  isColorLighter(color1: string, color2: string) {
-
-    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: number, g: number, b: number): number {
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-  }
-
-  fixColor(color: string) {
-    // 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: string): boolean {
-    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: string): number[] {
-    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: string): number[] {
-    const match = rgb.match(/\d+/g);
-    return match ? match.map(num => parseInt(num)) : [];
-  }
-
-
-}

package/tsconfig.lib.json

@@ -1,32 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/color-utils",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "baseUrl": "./",
-    "paths": {
-      "@angular/*": ["node_modules/@angular/*"],
-      "color-utils": ["node_modules/color-utils"],
-    },
-    "target": "ES2022",
-    "lib": [
-      "dom",
-      "ES2022"
-    ]
-  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true,
-    "strictInjectionParameters": true,
-    "strictTemplates": true
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}