@sapphire-ion/framework 1.2.62 → 1.3.1

package/src/lib/components/inputs/input-color/input-color.component.ts

@@ -0,0 +1,544 @@
+import { Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { CustomInput } from '../custom-input';
+import { Clipboard } from '@capacitor/clipboard';
+import { GenericService } from '../../../services/generic.service';
+import { SIonPopoverComponent } from '../../popover/sion-popover/sion-popover.component';
+import { MaskitoMaskExpression, MaskitoOptions } from '@maskito/core';
+import { InputProviderFactory } from '../input-provider-factory';
+
+type RGB = { r: number, g: number, b: number };
+type HSL = { h: number, l: number, s: number };
+
+@Component({
+  selector: 'input-color',
+  templateUrl: './input-color.component.html',
+  styleUrls: ['./input-color.component.scss', '../inputs.scss'],
+  providers: [
+    ...InputProviderFactory.GetProviders(InputColorComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputColorComponent) },
+  ],
+})
+export class InputColorComponent extends CustomInput<string> {
+  
+  // configuration: InputSignal<InputStringConfiguration> = input<InputStringConfiguration>(new InputStringConfiguration());
+
+  @ViewChild('input') input: ElementRef<HTMLInputElement>;
+  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
+  override setFocus(event: MouseEvent | null): void {
+    if(this.input && (event == null || event.target == this.inputContainer.nativeElement)) { this.input.nativeElement.focus(); }      
+  }
+
+  constructor(
+    private genericService: GenericService
+  ) { super(); this.value.set(""); }
+
+
+  @ViewChild(SIonPopoverComponent) popover: SIonPopoverComponent;
+
+  rgbColor : RGB = { r: 255, g: 0, b: 0 };
+  hslColor : HSL = { h: 0, s: 100, l: 50 };
+  alpha    : number = 100
+  override writeValue(obj: string): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+  }
+
+  override SetValue(value: string): void {
+    this.value.set(value);
+    this.runValidation();
+    this.propagateChange(value);
+  }
+
+  rendering: boolean = false;
+  async Present(event: MouseEvent): Promise<void> {
+    this.rendering = true;
+    await this.popover.present(event);
+    this.InitializeGradient()
+    this.InitializeHueSlider()
+    this.InitializeAlphaSlider()
+    this.DrawColorGradient()
+    this.DrawHueSlider()
+    this.DrawAlphaSlider()
+    this.rendering = false;
+  }
+
+  //#region [ Gradient ]
+  indicatorX: number = 100
+  indicatorY: number = 0
+
+  @ViewChild('gradient'     ) gradient: ElementRef<HTMLCanvasElement>;
+  private isGradientDragging: boolean = false;
+  private gradientCtx: CanvasRenderingContext2D;
+  private gradientWidth: number = 0;
+  private gradientHeight: number = 0;
+  InitializeGradient(): void {
+    const gradient      = this.gradient.nativeElement;
+    this.gradientWidth  = gradient.width; 
+    this.gradientHeight = gradient.height; 
+    this.gradientCtx    = gradient.getContext('2d');
+
+    gradient.addEventListener('mousedown' , this.StartGradientDrag.bind(this));
+    gradient.addEventListener('mousemove' , this.GradientDrag.bind(this));
+    gradient.addEventListener('mouseup'   , this.EndGradientDrag.bind(this));
+    gradient.addEventListener('mouseleave', this.EndGradientDrag.bind(this));
+
+    // Touch events
+    gradient.addEventListener('touchstart', this.HandleGradientTouch.bind(this));
+    gradient.addEventListener('touchmove' , this.HandleGradientTouch.bind(this));
+    gradient.addEventListener('touchend'  , this.EndGradientDrag.bind(this));
+  }
+  StartGradientDrag(e: MouseEvent): void {
+    this.isGradientDragging = true
+    this.HandleColorSelection(e.offsetX, e.offsetY)
+  }
+  GradientDrag(e: MouseEvent): void {
+    if (this.isGradientDragging) {
+      this.HandleColorSelection(e.offsetX, e.offsetY)
+    }
+  }
+  EndGradientDrag(): void {
+    this.isGradientDragging = false
+  }
+  HandleGradientTouch(e: TouchEvent): void {
+    e.preventDefault()
+    if (e.type === "touchstart") {
+      this.isGradientDragging = true
+    }
+
+    if (this.isGradientDragging) {
+      const rect = this.gradient.nativeElement.getBoundingClientRect()
+      const touch = e.touches[0]
+      const x = touch.clientX - rect.left
+      const y = touch.clientY - rect.top
+      this.HandleColorSelection(x, y)
+    }
+  }
+
+  HandleColorSelection(x: number, y: number): void {
+    // Constrain coordinates to canvas bounds
+    x = Math.max(0, Math.min(x, this.gradientWidth))
+    y = Math.max(0, Math.min(y, this.gradientHeight))
+
+    // Store the raw position percentage for the indicator
+    this.indicatorX = (x / this.gradientWidth) * 100
+    this.indicatorY = (y / this.gradientHeight) * 100
+
+    // Calculate saturation and lightness based on position
+    this.hslColor.s = Math.round(this.indicatorX)
+    // Adjust lightness calculation:
+    // - Top of canvas (y=0) should be white (lightness=100) on the left and pure color (lightness=50) on the right
+    // - Bottom of canvas (y=height) should be black (lightness=0)
+    if (this.hslColor.s === 0) {
+      // Left edge is always white to black, regardless of y position
+      this.hslColor.l = Math.round(100 - this.indicatorY)
+    } else {
+      // For other saturation values, top is 50-100% lightness (based on saturation), bottom is 0%
+      const maxLightness = 100 - this.hslColor.s / 2
+      this.hslColor.l = Math.round(maxLightness - (this.indicatorY / 100) * maxLightness)
+    }
+
+    // Update selected color
+    this.UpdateSelectedColor(this.hslColor.s, this.hslColor.l, true)
+
+    // Redraw alpha slider with new color
+    this.DrawAlphaSlider()
+  }
+  //#endregion [ Gradient ]
+  
+  UpdateSelectedColor(saturation: number | null = null, lightness: number | null = null, emitChanges: boolean = false): void {
+    // Update HSL values
+    if(saturation != null){
+      this.hslColor.s = saturation
+    }
+    if(lightness != null){
+      this.hslColor.l = lightness
+    }
+    // Convert HSL to RGB
+    const rgb = HSLToRGB(this.hslColor);
+
+    this.rgbColor = rgb
+
+    // Convert RGB to HEX
+    const hex = RGBToHex(rgb, this.alpha / 100);
+    if(emitChanges){ 
+      this.SetValue(hex);
+    } else { 
+      this.value.set(hex);
+    }
+  }
+
+  //#region [ Hue Slider ]
+  @ViewChild("hueSlider"  ) hueSlider: ElementRef<HTMLCanvasElement>
+  private isHueDragging: boolean = false;
+  private hueCtx: CanvasRenderingContext2D;
+  private hueSliderWidth: number = 0;
+  private hueSliderHeight: number = 0;
+  InitializeHueSlider(): void {
+    const hueSlider      = this.hueSlider.nativeElement
+    this.hueSliderWidth  = hueSlider.width;
+    this.hueSliderHeight = hueSlider.height;
+    this.hueCtx = hueSlider.getContext("2d")
+
+    hueSlider.addEventListener("mousedown" , this.StartHueDrag.bind(this))
+    hueSlider.addEventListener("mousemove" , this.HueDrag.bind(this))
+    hueSlider.addEventListener("mouseup"   , this.EndHueDrag.bind(this))
+    hueSlider.addEventListener("mouseleave", this.EndHueDrag.bind(this))
+
+    // Touch events
+    hueSlider.addEventListener("touchstart", this.HandleHueTouch.bind(this))
+    hueSlider.addEventListener("touchmove" , this.HandleHueTouch.bind(this))
+    hueSlider.addEventListener("touchend"  , this.EndHueDrag.bind(this))
+  }
+
+  StartHueDrag(e: MouseEvent): void {
+    this.isHueDragging = true
+    this.HandleHueSelection(e.offsetX)
+  }
+
+  HueDrag(e: MouseEvent): void {
+    if (this.isHueDragging) {
+      this.HandleHueSelection(e.offsetX)
+    }
+  }
+
+  EndHueDrag(): void {
+    this.isHueDragging = false
+  }
+  HandleHueTouch(e: TouchEvent): void {
+    e.preventDefault()
+    if (e.type === "touchstart") {
+      this.isHueDragging = true
+    }
+
+    if (this.isHueDragging) {
+      const rect = this.hueSlider.nativeElement.getBoundingClientRect()
+      const touch = e.touches[0]
+      const x = touch.clientX - rect.left
+      this.HandleHueSelection(x)
+    }
+  }
+  HandleHueSelection(x: number): void {
+    // Constrain x to canvas bounds
+    x = Math.max(0, Math.min(x, this.hueSliderWidth))
+
+    // Calculate hue based on x position (0-360)
+    this.hslColor.h = Math.round((x / this.hueSliderWidth) * 360)
+
+    // Redraw color gradient with new hue
+    this.DrawColorGradient()
+
+    // Redraw alpha slider with new color
+    this.DrawAlphaSlider()
+
+    // Update selected color
+    this.UpdateSelectedColor(this.hslColor.s, this.hslColor.l, true)
+  }
+  //#endregion [ Hue Slider ]
+
+  //#region [ Alpha Slider ]
+  @ViewChild("alphaSlider") alphaSlider: ElementRef<HTMLCanvasElement>
+  private isAlphaDragging: boolean = false;
+  private alphaCtx: CanvasRenderingContext2D;
+  private alphaSliderWidth: number = 0;
+  private alphaSliderHeight: number = 0;
+  InitializeAlphaSlider(): void {
+    const alphaSlider      = this.alphaSlider.nativeElement;
+    this.alphaSliderHeight = alphaSlider.height;
+    this.alphaSliderWidth  = alphaSlider.width;
+
+    this.alphaCtx = alphaSlider.getContext("2d")
+
+    alphaSlider.addEventListener("mousedown" , this.StartAlphaDrag.bind(this))
+    alphaSlider.addEventListener("mousemove" , this.AlphaDrag.bind(this))
+    alphaSlider.addEventListener("mouseup"   , this.EndAlphaDrag.bind(this))
+    alphaSlider.addEventListener("mouseleave", this.EndAlphaDrag.bind(this))
+
+    // Touch events
+    alphaSlider.addEventListener("touchstart", this.HandleAlphaTouch.bind(this))
+    alphaSlider.addEventListener("touchmove" , this.HandleAlphaTouch.bind(this))
+    alphaSlider.addEventListener("touchend"  , this.EndAlphaDrag.bind(this))
+  }
+  StartAlphaDrag(e: MouseEvent): void {
+    this.isAlphaDragging = true
+    this.HandleAlphaSelection(e.offsetX)
+  }
+
+  AlphaDrag(e: MouseEvent): void {
+    if (this.isAlphaDragging) {
+      this.HandleAlphaSelection(e.offsetX)
+    }
+  }
+
+  EndAlphaDrag(): void {
+    this.isAlphaDragging = false
+  }
+
+  HandleAlphaTouch(e: TouchEvent): void {
+    e.preventDefault()
+    if (e.type === "touchstart") {
+      this.isAlphaDragging = true
+    }
+
+    if (this.isAlphaDragging) {
+      const rect = this.alphaSlider.nativeElement.getBoundingClientRect()
+      const touch = e.touches[0]
+      const x = touch.clientX - rect.left
+      this.HandleAlphaSelection(x)
+    }
+  }
+
+  HandleAlphaSelection(x: number): void {
+    // Constrain x to canvas bounds
+    x = Math.max(0, Math.min(x, this.alphaSliderWidth))
+
+    // Calculate alpha based on x position (0-100)
+    this.alpha = Math.round((x / this.alphaSliderWidth) * 100)
+
+    // Update selected color
+    this.UpdateSelectedColor(this.hslColor.s, this.hslColor.l, true)
+  }
+  //#endregion [ Alpha Slider ]
+
+  SetColorFromHex(hexColor: string, updateCanvas: boolean = true, emitChanges: boolean = false): void {
+    // Remove # if present
+    hexColor = hexColor.replace(/^#/, "")
+
+    let r: number, g: number, b: number, a = 1
+
+    // Parse hex values based on string length
+    if (hexColor.length === 3) {
+      // Short hex (#RGB)
+      r = Number.parseInt(hexColor.charAt(0) + hexColor.charAt(0), 16)
+      g = Number.parseInt(hexColor.charAt(1) + hexColor.charAt(1), 16)
+      b = Number.parseInt(hexColor.charAt(2) + hexColor.charAt(2), 16)
+    } else 
+    if (hexColor.length === 6) {
+      // Standard hex (#RRGGBB)
+      r = Number.parseInt(hexColor.substring(0, 2), 16)
+      g = Number.parseInt(hexColor.substring(2, 4), 16)
+      b = Number.parseInt(hexColor.substring(4, 6), 16)
+    } else 
+    if (hexColor.length === 8) {
+      // Hex with alpha (#RRGGBBAA)
+      r = Number.parseInt(hexColor.substring(0, 2), 16)
+      g = Number.parseInt(hexColor.substring(2, 4), 16)
+      b = Number.parseInt(hexColor.substring(4, 6), 16)
+      a = Number.parseInt(hexColor.substring(6, 8), 16) / 255
+    } else {
+      // Invalid hex, use default
+      console.error("Invalid hex color format")
+      return;
+    }
+
+    // Update RGB color
+    this.rgbColor = { r, g, b }
+
+    // Convert RGB to HSL
+    this.hslColor = RGBToHSL(this.rgbColor)
+
+    // Update alpha
+    this.alpha = Math.round(a * 100)
+
+    // Update selected color
+    const hex = RGBToHex(this.rgbColor, a)
+    if(emitChanges){ 
+      this.SetValue(hex);
+    } else { 
+      this.value.set(hex);
+    }
+
+    if(updateCanvas){
+      // Calculate indicator position
+      this.UpdateIndicatorPositions()
+  
+      // Redraw components
+      this.DrawColorGradient()
+      this.DrawAlphaSlider()
+    }
+    
+  }
+
+  DrawColorGradient(): void {
+    const ctx = this.gradientCtx;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, this.gradientWidth, this.gradientHeight)
+
+    // Draw the pure hue color at the top-right corner
+    ctx.fillStyle = `hsl(${this.hslColor.h}, 100%, 50%)`
+    ctx.fillRect(0, 0, this.gradientWidth, this.gradientHeight)
+
+    // White gradient (horizontal - saturation)
+    const whiteGradient = ctx.createLinearGradient(0, 0, this.gradientWidth, 0)
+    whiteGradient.addColorStop(0, "white")
+    whiteGradient.addColorStop(1, "rgba(255, 255, 255, 0)")
+    ctx.fillStyle = whiteGradient
+    ctx.fillRect(0, 0, this.gradientWidth, this.gradientHeight)
+
+    // Black gradient (vertical - brightness)
+    const blackGradient = ctx.createLinearGradient(0, 0, 0, this.gradientHeight)
+    blackGradient.addColorStop(0, "rgba(0, 0, 0, 0)")
+    blackGradient.addColorStop(1, "black")
+    ctx.fillStyle = blackGradient
+    ctx.fillRect(0, 0, this.gradientWidth, this.gradientHeight)
+  }
+
+  DrawHueSlider(): void {
+    const ctx = this.hueCtx
+
+    // Create hue gradient
+    const gradient = ctx.createLinearGradient(0, 0, this.hueSliderWidth, 0)
+    for (let i = 0; i <= 360; i += 60) {
+      gradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`)
+    }
+
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, this.hueSliderWidth, this.hueSliderHeight)
+  }
+
+  DrawAlphaSlider(): void {
+    const ctx = this.alphaCtx
+    const width  = this.alphaSliderWidth
+    const height = this.alphaSliderHeight
+
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height)
+
+    // Create checkerboard pattern for transparency
+    const squareSize = 8
+    for (let i = 0; i < width; i += squareSize) {
+      for (let j = 0; j < height; j += squareSize) {
+        const isEven = (i / squareSize + j / squareSize) % 2 === 0
+        ctx.fillStyle = isEven ? "#ffffff" : "#cccccc"
+        ctx.fillRect(i, j, squareSize, squareSize)
+      }
+    }
+    
+
+    // Create alpha gradient
+    const gradient = ctx.createLinearGradient(0, 0, width, 0)
+    const rgb = HSLToRGB(this.hslColor);
+
+    gradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`)
+    gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`)
+
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, width, height)
+  }
+
+  async CopyToClipboard() {
+    await Clipboard.write({
+      string: this.value()
+    });
+    await this.genericService.PresentToastSuccess(`${this.value()} copiada para a área de transferência!`);
+  }
+
+  UpdateIndicatorPositions(): void {
+    // Set X position directly from saturation (0-100)
+    this.indicatorX = this.hslColor.s;
+
+    // Calculate Y position using the inverse of the HandleColorSelection logic
+    if (this.hslColor.s === 0) {
+      // Left edge: simple white to black mapping
+      this.indicatorY = 100 - this.hslColor.l;
+    } else {
+      // For other saturation values, we need to reverse the maxLightness calculation
+      const maxLightness = 100 - this.hslColor.s / 2;
+      this.indicatorY = ((maxLightness - this.hslColor.l) / maxLightness) * 100;
+    }
+    
+    // Ensure the position stays within bounds
+    this.indicatorY = Math.max(0, Math.min(100, this.indicatorY));
+  }
+
+  HEXMask: MaskitoOptions = { mask: HEXMask };
+}
+
+function HSLToRGB(hsl: HSL): RGB {
+  var h = hsl.h / 360;
+  var s = hsl.s / 100;
+  var l = hsl.l / 100;
+
+  let r: number, g: number, b: number
+
+  if (s === 0) {
+    r = g = b = l // achromatic
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+
+    r = HUEtoRGB(p, q, h + 1 / 3)
+    g = HUEtoRGB(p, q, h)
+    b = HUEtoRGB(p, q, h - 1 / 3)
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  }
+}
+function HUEtoRGB(p: number, q: number, t: number): 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
+}
+
+function RGBToHSL(rgb: RGB): HSL {
+  var r = rgb.r / 255
+  var g = rgb.g / 255
+  var b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0,
+    s = 0
+  const 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)) / 6
+        break
+      case g:
+        h = ((b - r) / d + 2) / 6
+        break
+      case b:
+        h = ((r - g) / d + 4) / 6
+        break
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  }
+}
+
+function RGBToHex(rgb: RGB, alpha = 1): string {
+  let { r, g, b } = rgb
+
+  const alphaHex = Math.round(alpha * 255)
+    .toString(16)
+    .padStart(2, "0")
+  return (
+    "#" +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16)
+        return hex.length === 1 ? "0" + hex : hex
+      })
+      .join("") +
+    (alpha < 1 ? alphaHex : "")
+  ).toUpperCase();
+}
+
+const HEXDigitRegex: RegExp = /[0-9a-f]+/i;
+const HEXMask: MaskitoMaskExpression = [ '#', HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex, HEXDigitRegex ];

package/{lib/components/inputs/input-configuration.d.ts → src/lib/components/inputs/input-configuration.ts}

@@ -1,10 +1,23 @@
-import { InputCurrencyConfiguration, InputDecimalConfiguration, InputNumberConfiguration } from "./input-decimal/input-decimal.configuration";
-import { InputCpfCnpjConfiguration } from "./input-cpf-cnpj/input-cpf-cnpj.configuration";
-import { InputSelectConfiguration } from "./input-select/input.select.configuration";
-import { InputStringConfiguration } from "./input-string/input-string.configuration";
-import { InputBoolConfiguration } from "./input-bool/input-bool.configuration";
-import { InputDateConfiguration } from "./input-date/input-date.configuration";
-import { InputFileConfiguration } from "./input-file/input-file.configuration";
-import { InputTelefoneCelularConfiguration } from "./input-telefone/input-telefone.configuration";
-import { InputCepConfiguration } from "./input-cep/input-cep.configuration";
-export type InputConfiguration = InputBoolConfiguration | InputCpfCnpjConfiguration | InputDateConfiguration | InputDecimalConfiguration | InputCurrencyConfiguration | InputNumberConfiguration | InputFileConfiguration | InputSelectConfiguration | InputStringConfiguration | InputTelefoneCelularConfiguration | InputCepConfiguration | any;
+import { InputCurrencyConfiguration, InputDecimalConfiguration, InputNumberConfiguration } from "./input-decimal/input-decimal.configuration";
+import { InputCpfCnpjConfiguration } from "./input-cpf-cnpj/input-cpf-cnpj.configuration";
+import { InputSelectConfiguration } from "./input-select/input.select.configuration";
+import { InputStringConfiguration } from "./input-string/input-string.configuration";
+import { InputBoolConfiguration } from "./input-bool/input-bool.configuration";
+import { InputDateConfiguration } from "./input-date/input-date.configuration";
+import { InputFileConfiguration } from "./input-file/input-file.configuration";
+import { InputTelefoneCelularConfiguration } from "./input-telefone/input-telefone.configuration";
+import { InputCepConfiguration } from "./input-cep/input-cep.configuration";
+
+export type InputConfiguration = 
+  InputBoolConfiguration     |
+  InputCpfCnpjConfiguration  |
+  InputDateConfiguration     |
+  InputDecimalConfiguration  |
+  InputCurrencyConfiguration |
+  InputNumberConfiguration   |
+  InputFileConfiguration     |
+  InputSelectConfiguration   |
+  InputStringConfiguration   | 
+  InputTelefoneCelularConfiguration |
+  InputCepConfiguration |
+  any;

package/src/lib/components/inputs/input-cpf-cnpj/input-cpf-cnpj.component.html

@@ -0,0 +1,28 @@
+<div 
+  #inputContainer
+  class="input-container" 
+  (click)="setFocus($event)"
+  [class.required]="required()" 
+  [class.submitted]="submitted()" 
+  [class.invalid]="invalid" 
+  [class.disabled]="disabled() || loading()"
+  [class.loading]="loading()"
+>
+  <div class="input-label"> 
+    <span class="truncate">
+      {{label()}} 
+    </span>
+  </div>
+  <input #input
+    [ngModel]="value()" 
+    [maskito]="mask"
+    inputmode="numeric"
+    [type]="'text'" 
+    (ngModelChange)="SetValue($event)"
+    [disabled]="disabled() || loading()"
+    (blur)="blur.emit($event)"
+  />
+  <div class="loading-container" [class.loading]="loading()">
+    <ion-spinner></ion-spinner>
+  </div>
+</div>