@sapphire-ion/framework 0.30.26 → 0.30.28

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

@@ -0,0 +1,132 @@
+<div class="flex relative overflow-hidden">
+  <ion-card class="focus-within:on-focus ion-card-input !rounded-r-none" [disabled]="loading || disabled"
+    [ngClass]="{
+      'invalid'  : invalid,
+      'submitted': submitted,
+      'disabled': disabled,
+    }"
+  >
+    <ion-card-content>
+      <div class="flex">
+        <ion-item class="w-full" [ngClass]="{'submitted': submitted, 'invalid': invalid, 'required': required}" lines="none">
+          <ion-input (ionBlur)="blur.emit(model)" [maxlength]="9" labelPlacement="stacked" [(ngModel)]="model">
+            @if (label) {
+              <ion-text id="label" [ngClass]="{'required': required}" slot="label"> {{label}} </ion-text>
+            }
+          </ion-input>
+        </ion-item>
+      </div>
+    </ion-card-content>
+  </ion-card>
+  <div class="w-12 shrink-0" > 
+    <ion-button (click)="Present($event)" [disabled]="loading || disabled" class="m-0 h-full w-full rounded-r-2xl on-hover [--border-radius:0rem_1rem_1rem_0rem]" style="--border-width: 1px 1px 2px 1px;" size="small" color="medium" fill="outline"> 
+      <ion-icon class="fill-rainbow" slot="icon-only" name="color-palette"></ion-icon> 
+    </ion-button>
+  </div>
+  <input-loading [loading]="loading"></input-loading>
+</div>
+
+<ion-popover #popover [keepContentsMounted]="true">
+  <ng-template>
+    <ion-card class="m-0">
+      <ion-card-content class="p-0 relative">
+        <loading [type]="3" [loading]="rendering" text=""></loading>
+        <div class="size-full p-3 flex gap-2">
+          <div class="h-[12.5rem] flex flex-col gap-1 w-44">
+            <div class="w-full h-32 relative">
+              <canvas #canvas width="176" height="128" class="size-full rounded-sm translucid-border"></canvas>
+    
+               <div class="color-indicator quick-transition" [style.left.%]="indicatorX" [style.top.%]="indicatorY"></div>
+            </div>
+    
+            <div class="w-full flex shrink-0">
+              <div class="w-full grid grid-cols-5 gap-1">
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#000000FF' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#3880ffff' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#2dd36fff' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#ffc409ff' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#eb445aff' }"></ng-container>
+                
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#FFFFFFFF' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#59168bFF' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#c6005cFF' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#fb2c36FF' }"></ng-container>
+                <ng-container *ngTemplateOutlet="templateColor; context: { $implicit: '#314158FF' }"></ng-container>
+    
+                <ng-template #templateColor let-color>
+                  <div class="size-8 rounded translucid-border cursor-pointer" (click)="setColorFromHex(color, true, true)" [style]="{ 'background': color }"></div>
+                </ng-template>
+              </div>
+            </div>
+          </div>
+          <div class="h-[12.5rem] flex flex-col gap-2 w-44">
+            <div class="w-full relative">
+              <canvas #hueSlider   class="w-full rounded h-[22px]" width="176" height="22"></canvas>
+              <div class="indicator quick-transition" [style.left.%]="hslColor.h / 3.6"></div>
+            </div>
+            <div class="w-full relative">
+              <canvas #alphaSlider class="w-full rounded h-[22px]" width="176" height="22"></canvas>
+              <div class="indicator quick-transition" [style.left.%]="alpha"></div>
+            </div>
+      
+            <div class="flex flex-col gap-1">
+              <div class="flex items-center justify-center w-full h-fit gap-1 overflow-hidden">
+                <div class="size-10 relative z-10 shrink-0 flex items-center justify-center">
+                  <div class="size-full z-10 rounded translucid-border absolute left-0 top-0" [style.background]="getRgbaString()"></div>
+                  <ion-icon class="z-0 opacity-50" color="dark" name="color-fill"></ion-icon>
+                </div>
+    
+                <div class="h-full shrink text-sm flex flex-col items-start justify-center">
+                  <ion-text>Hex</ion-text>
+                  <input [value]="model" (change)="setColorFromHex($event.target['value'])" class="w-full"/>
+                </div>
+    
+                <ion-button (click)="CopyToClipboard()" class="aspect-square" style="--border-radius: .25rem" size="small">
+                  <ion-icon slot="icon-only" name="clipboard"></ion-icon>
+                </ion-button>
+              </div> 
+      
+              <div class="w-full flex gap-1 overflow-hidden text-sm">
+                <div class="w-full shrink">
+                  <ion-text>R</ion-text>
+                  <input [(ngModel)]="rgbColor.r" (change)="updateSelectedColor(); updateIndicatorPositions(); this.drawColorGradient()" type="number" class="w-full"/>
+                </div>
+                <div class="w-full shrink">
+                  <ion-text>G</ion-text>
+                  <input [(ngModel)]="rgbColor.g" (change)="updateSelectedColor(); updateIndicatorPositions()" type="number" class="w-full"/>
+                </div>
+                <div class="w-full shrink">
+                  <ion-text>B</ion-text>
+                  <input [(ngModel)]="rgbColor.b" (change)="updateSelectedColor(); updateIndicatorPositions()" type="number" class="w-full"/>
+                </div>
+                <div class="w-full shrink">
+                  <ion-text>A</ion-text>
+                  <input [(ngModel)]="alpha" class="w-full"/>
+                </div>
+              </div>
+        
+              <div class="w-full flex gap-1 overflow-hidden text-sm">
+                <div class="w-full shrink">
+                  <ion-text>H</ion-text>
+                  <input [(ngModel)]="hslColor.h" (change)="updateSelectedColor(); updateIndicatorPositions(); this.drawColorGradient()" type="number" class="w-full"/>
+                </div>
+                <div class="w-full shrink">
+                  <ion-text>L</ion-text>
+                  <input [(ngModel)]="hslColor.l" (change)="updateSelectedColor(); updateIndicatorPositions()" type="number" class="w-full"/>
+                </div>
+                <div class="w-full shrink">
+                  <ion-text>S</ion-text>
+                  <input [(ngModel)]="hslColor.s" (change)="updateSelectedColor(); updateIndicatorPositions()" type="number" class="w-full"/>
+                </div>
+                <div class="w-full shrink">
+                  <ion-text>A</ion-text>
+                  <input [(ngModel)]="alpha" type="number" class="w-full"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </ng-template>
+</ion-popover>

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

@@ -0,0 +1,561 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Clipboard } from '@capacitor/clipboard';
+import { IonPopover } from '@ionic/angular';
+
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomSignalInput } from '../custom-signal-input';
+import { GenericService } from '../../../services/generics.service';
+
+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.GetProvider(InputColorComponent)
+})
+export class InputColorComponent extends CustomSignalInput<string> implements OnInit {
+
+  constructor(
+    private genericService: GenericService
+  ) { super(); }
+
+  
+  @ViewChild('canvas'     ) canvas: ElementRef<HTMLCanvasElement>;
+  @ViewChild("hueSlider"  ) hueSlider: ElementRef<HTMLCanvasElement>
+  @ViewChild("alphaSlider") alphaSlider: ElementRef<HTMLCanvasElement>
+
+  override writeValue(value: string){ this.setModel(value, true) }
+  override get model(): string      { return this._model;  }
+  override set model(value: string) { this.setModel(value); this.propagateChange(this._model); }
+
+  setModel(value: string, redraw: boolean = false){
+    if(value){
+      this.setColorFromHex(value, false);
+      if(this.canvasCtx && redraw){
+        this.updateSelectedColor(); 
+        this.updateIndicatorPositions(); 
+        this.drawColorGradient()
+      }
+    }
+  }
+
+  @ViewChild(IonPopover) Popover: IonPopover;
+  rendering: boolean = true;
+  async Present($event){
+    this.rendering = true;
+    await this.Popover.present($event);
+    
+    this.initCanvas()
+    this.initHueSlider()
+    this.initAlphaSlider()
+    this.drawColorGradient()
+    this.drawHueSlider()
+    this.drawAlphaSlider()
+    this.rendering = false;
+  }
+  private canvasCtx: CanvasRenderingContext2D;
+  private canvasWidth: number = 0;
+  private canvasHeight: number = 0;
+
+  private hueCtx: CanvasRenderingContext2D;
+  private hueSliderWidth: number = 0;
+  private hueSliderHeight: number = 0;
+
+  private alphaCtx: CanvasRenderingContext2D;
+  private alphaSliderWidth: number = 0;
+  private alphaSliderHeight: number = 0;
+
+  private isDragging = false
+  private isHueDragging = false
+  private isAlphaDragging = false
+
+  rgbColor : RGB = { r: 255, g: 0, b: 0 };
+  hslColor : HSL = { h: 0, s: 100, l: 50 };
+  alpha    : number = 0
+
+  indicatorX: number = 100
+  indicatorY: number = 0
+
+  initCanvas(): void {
+    const canvas      = this.canvas.nativeElement;
+    this.canvasWidth  = canvas.width; 
+    this.canvasHeight = canvas.height; 
+    this.canvasCtx    = canvas.getContext('2d');
+
+    canvas.addEventListener('mousedown' , this.startDrag.bind(this));
+    canvas.addEventListener('mousemove' , this.drag.bind(this));
+    canvas.addEventListener('mouseup'   , this.endDrag.bind(this));
+    canvas.addEventListener('mouseleave', this.endDrag.bind(this));
+
+    // Touch events
+    canvas.addEventListener('touchstart', this.handleTouch.bind(this));
+    canvas.addEventListener('touchmove' , this.handleTouch.bind(this));
+    canvas.addEventListener('touchend'  , this.endDrag.bind(this));
+  }
+
+  initHueSlider(): 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))
+  }
+
+  initAlphaSlider(): 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))
+  }
+
+  drawColorGradient(): void {
+    const ctx = this.canvasCtx;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+
+    // Draw the pure hue color at the top-right corner
+    ctx.fillStyle = `hsl(${this.hslColor.h}, 100%, 50%)`
+    ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
+
+    // White gradient (horizontal - saturation)
+    const whiteGradient = ctx.createLinearGradient(0, 0, this.canvasWidth, 0)
+    whiteGradient.addColorStop(0, "white")
+    whiteGradient.addColorStop(1, "rgba(255, 255, 255, 0)")
+    ctx.fillStyle = whiteGradient
+    ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
+
+    // Black gradient (vertical - brightness)
+    const blackGradient = ctx.createLinearGradient(0, 0, 0, this.canvasHeight)
+    blackGradient.addColorStop(0, "rgba(0, 0, 0, 0)")
+    blackGradient.addColorStop(1, "black")
+    ctx.fillStyle = blackGradient
+    ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
+  }
+
+  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 = this.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)
+  }
+
+  startDrag(e: MouseEvent): void {
+    this.isDragging = true
+    this.handleColorSelection(e.offsetX, e.offsetY)
+  }
+
+  drag(e: MouseEvent): void {
+    if (this.isDragging) {
+      this.handleColorSelection(e.offsetX, e.offsetY)
+    }
+  }
+
+  endDrag(): void {
+    this.isDragging = false
+  }
+
+  handleTouch(e: TouchEvent): void {
+    e.preventDefault()
+    if (e.type === "touchstart") {
+      this.isDragging = true
+    }
+
+    if (this.isDragging) {
+      const rect = this.canvas.nativeElement.getBoundingClientRect()
+      const touch = e.touches[0]
+      const x = touch.clientX - rect.left
+      const y = touch.clientY - rect.top
+      this.handleColorSelection(x, y)
+    }
+  }
+
+  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
+  }
+
+  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)
+    }
+  }
+
+  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)
+  }
+
+  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)
+  }
+
+  handleColorSelection(x: number, y: number): void {
+    // Constrain coordinates to canvas bounds
+    x = Math.max(0, Math.min(x, this.canvasWidth))
+    y = Math.max(0, Math.min(y, this.canvasHeight))
+
+    // Store the raw position percentage for the indicator
+    this.indicatorX = (x / this.canvasWidth) * 100
+    this.indicatorY = (y / this.canvasHeight) * 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()
+  }
+
+  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 = this.hslToRgb(this.hslColor);
+
+    this.rgbColor = rgb
+
+    // Convert RGB to HEX
+    const hex = this.rgbToHex(rgb, this.alpha / 100);
+    if(emitChanges){ this.model = hex }else{ this._model = hex }
+
+    // Emit color change event
+    // this.colorChange.emit(this.selectedColor)
+  }
+
+  updateIndicatorPositions(): void {
+    // Set X position directly from saturation (0-100)
+    this.indicatorX = this.hslColor.s;
+  
+    // Set Y position based on lightness
+    // When lightness is 50, Y should be 0 (top)
+    // When lightness is 0, Y should be 100 (bottom)
+    this.indicatorY = (50 - this.hslColor.l) * 2;
+  }
+
+  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 hue2rgb = (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 = hue2rgb(p, q, h + 1 / 3)
+      g = hue2rgb(p, q, h)
+      b = hue2rgb(p, q, h - 1 / 3)
+    }
+
+    return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255),
+    }
+  }
+
+  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 = this.rgbToHsl(this.rgbColor)
+
+    // Update alpha
+    this.alpha = Math.round(a * 100)
+
+    // Update selected color
+    const hex = this.rgbToHex(this.rgbColor, a)
+    if(emitChanges){ this.model = hex }else{ this._model = hex }
+
+    if(updateCanvas){
+      // Calculate indicator position
+      this.updateIndicatorPosition()
+  
+      // Redraw components
+      this.drawColorGradient()
+      this.drawAlphaSlider()
+    }
+  }
+
+  updateIndicatorPosition(): void {
+    // Set X position based on saturation (0-100%)
+    this.indicatorX = this.hslColor.s
+
+    // Calculate Y position based on lightness and saturation
+    if (this.hslColor.s == 0) {
+      // Left edge: lightness determines position
+      this.indicatorY = 100 - this.hslColor.l
+    } else {
+      // Rest of canvas: calculate based on max lightness for this saturation
+      const maxLightness = 100 - this.hslColor.s / 2
+      
+      // Ensure lightness is within valid range for this saturation
+      const adjustedLightness = Math.min(this.hslColor.l, maxLightness)
+
+      // Calculate Y position (0% at top, 100% at bottom)
+      if (maxLightness == 0) {
+        this.indicatorY = 100 // Avoid division by zero
+      } else {
+        this.indicatorY = ((maxLightness - adjustedLightness) / maxLightness) * 100
+      }
+
+      // Constrain to canvas bounds
+      this.indicatorY = Math.max(0, Math.min(100, this.indicatorY))
+    }
+  }
+
+  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),
+    }
+  }
+
+  rgbToHex(rgb: RGB , a = 1): string {
+    var { r, g, b } = rgb
+
+    const alphaHex = Math.round(a * 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("") +
+      (a < 1 ? alphaHex : "")
+    ).toUpperCase();
+  }
+
+  getRgbaString(): string {
+    const { r, g, b } = this.rgbColor
+    const a = this.alpha / 100
+    return `rgba(${r}, ${g}, ${b}, ${a})`
+  }
+
+  getHslaString(): string {
+    return `hsla(${this.hslColor.h}, ${this.hslColor.s}%, ${this.hslColor.l}%, ${this.alpha / 100})`
+  }
+
+  async CopyToClipboard() {
+    await Clipboard.write({
+      string: this.model
+    });
+    await this.genericService.PresentToastSuccess(`${this.model} copiada para a área de transferência!`);
+  }
+}