ngx-colors/fesm2020/ngx-colors.mjs.map

A beautiful color picker for angular that let you choose from a color palette, using sliders (Hue, Lightness, Alpha sliders) or through text input(hex, rgba, hsla)

{"version":3,"file":"ngx-colors.mjs","sources":["../../../projects/ngx-colors/src/lib/helpers/formats.ts","../../../projects/ngx-colors/src/lib/enums/formats.ts","../../../projects/ngx-colors/src/lib/helpers/default-colors.ts","../../../projects/ngx-colors/src/lib/clases/formats.ts","../../../projects/ngx-colors/src/lib/clases/color.ts","../../../projects/ngx-colors/src/lib/services/converter.service.ts","../../../projects/ngx-colors/src/lib/clases/slider.ts","../../../projects/ngx-colors/src/lib/directives/slider.directive.ts","../../../projects/ngx-colors/src/lib/components/color-picker/color-picker.component.ts","../../../projects/ngx-colors/src/lib/components/color-picker/color-picker.component.html","../../../projects/ngx-colors/src/lib/components/panel/panel.component.ts","../../../projects/ngx-colors/src/lib/components/panel/panel.component.html","../../../projects/ngx-colors/src/lib/services/overlay-styles.ts","../../../projects/ngx-colors/src/lib/services/panel-factory.service.ts","../../../projects/ngx-colors/src/lib/directives/ngx-colors-trigger.directive.ts","../../../projects/ngx-colors/src/lib/ngx-colors.component.ts","../../../projects/ngx-colors/src/lib/ngx-colors.component.html","../../../projects/ngx-colors/src/lib/ngx-colors.module.ts","../../../projects/ngx-colors/src/lib/validators/valid-color.validator.ts","../../../projects/ngx-colors/src/public-api.ts","../../../projects/ngx-colors/src/ngx-colors.ts"],"sourcesContent":["export const formats = ['hex','rgba','hsla', 'cmyk']","export enum ColorFormats {\n    HEX,\n    RGBA,\n    HSLA,\n    CMYK\n  }","export const defaultColors = [\n    {\n        color: \"rojo\", preview: \"#E57373\", variants:\n            [\"#FFEBEE\", \"#FFCDD2\", \"#EF9A9A\", \"#E57373\", \"#EF5350\", \"#F44336\", \"#E53935\", \"#D32F2F\", \"#C62828\"]\n    },\n    {\n        color: \"rosa\", preview: \"#F06292\", variants:\n            [\"#FCE4EC\", \"#F8BBD0\", \"#F48FB1\", \"#F06292\", \"#EC407A\", \"#E91E63\", \"#D81B60\", \"#C2185B\", \"#AD1457\"]\n    },\n    {\n        color: \"purpura\", preview: \"#BA68C8\", variants:\n            [\"#F3E5F5\", \"#E1BEE7\", \"#CE93D8\", \"#BA68C8\", \"#AB47BC\", \"#9C27B0\", \"#8E24AA\", \"#7B1FA2\", \"#6A1B9A\"]\n    },\n    {\n        color: \"purpura oscuro\", preview: \"#9575CD\", variants:\n            [\"#EDE7F6\", \"#D1C4E9\", \"#B39DDB\", \"#9575CD\", \"#7E57C2\", \"#673AB7\", \"#5E35B1\", \"#512DA8\", \"#4527A0\"]\n    },\n    {\n        color: \"indigo\", preview: \"#7986CB\", variants:\n            [\"#E8EAF6\", \"#C5CAE9\", \"#9FA8DA\", \"#7986CB\", \"#5C6BC0\", \"#3F51B5\", \"#3949AB\", \"#303F9F\", \"#283593\"]\n    },\n    {\n        color: \"azul\", preview: \"#64B5F6\", variants:\n            [\"#E3F2FD\", \"#BBDEFB\", \"#90CAF9\", \"#64B5F6\", \"#42A5F5\", \"#2196F3\", \"#1E88E5\", \"#1976D2\", \"#1565C0\"]\n    },\n    {\n        color: \"celeste\", preview: \"#4FC3F7\", variants:\n            [\"#E1F5FE\", \"#B3E5FC\", \"#81D4FA\", \"#4FC3F7\", \"#29B6F6\", \"#03A9F4\", \"#039BE5\", \"#0288D1\", \"#0277BD\"]\n    },\n    {\n        color: \"cyan\", preview: \"#4DD0E1\", variants:\n            [\"#E0F7FA\", \"#B2EBF2\", \"#80DEEA\", \"#4DD0E1\", \"#26C6DA\", \"#00BCD4\", \"#00ACC1\", \"#0097A7\", \"#00838F\"]\n    },\n    {\n        color: \"color\", preview: \"#4DB6AC\", variants:\n            [\"#E0F2F1\", \"#B2DFDB\", \"#80CBC4\", \"#4DB6AC\", \"#26A69A\", \"#009688\", \"#00897B\", \"#00796B\", \"#00695C\"]\n    },\n    {\n        color: \"verde\", preview: \"#81C784\", variants:\n            [\"#E8F5E9\", \"#C8E6C9\", \"#A5D6A7\", \"#81C784\", \"#66BB6A\", \"#4CAF50\", \"#43A047\", \"#388E3C\", \"#2E7D32\"]\n    },\n    {\n        color: \"verde claro\", preview: \"#AED581\", variants:\n            [\"#F1F8E9\", \"#DCEDC8\", \"#C5E1A5\", \"#AED581\", \"#9CCC65\", \"#8BC34A\", \"#7CB342\", \"#689F38\", \"#558B2F\"]\n    },\n    {\n        color: \"lima\", preview: \"#DCE775\", variants:\n            [\"#F9FBE7\", \"#F0F4C3\", \"#E6EE9C\", \"#DCE775\", \"#D4E157\", \"#CDDC39\", \"#C0CA33\", \"#AFB42B\", \"#9E9D24\"]\n    },\n    {\n        color: \"amarillo\", preview: \"#FFF176\", variants:\n            [\"#FFFDE7\", \"#FFF9C4\", \"#FFF59D\", \"#FFF176\", \"#FFEE58\", \"#FFEB3B\", \"#FDD835\", \"#FBC02D\", \"#F9A825\"]\n    },\n    {\n        color: \"ambar\", preview: \"#FFD54F\", variants:\n            [\"#FFF8E1\", \"#FFECB3\", \"#FFE082\", \"#FFD54F\", \"#FFCA28\", \"#FFC107\", \"#FFB300\", \"#FFA000\", \"#FF8F00\"]\n    },\n    {\n        color: \"naranja\", preview: \"#FFB74D\", variants:\n            [\"#FFF3E0\", \"#FFE0B2\", \"#FFCC80\", \"#FFB74D\", \"#FFA726\", \"#FF9800\", \"#FB8C00\", \"#F57C00\", \"#EF6C00\"]\n    },\n    {\n        color: \"naranja oscuro\", preview: \"#FF8A65\", variants:\n            [\"#FBE9E7\", \"#FFCCBC\", \"#FFAB91\", \"#FF8A65\", \"#FF7043\", \"#FF5722\", \"#F4511E\", \"#E64A19\", \"#D84315\"]\n    },\n    {\n        color: \"marron\", preview: \"#A1887F\", variants:\n            [\"#EFEBE9\", \"#D7CCC8\", \"#BCAAA4\", \"#A1887F\", \"#8D6E63\", \"#795548\", \"#6D4C41\", \"#5D4037\", \"#4E342E\"]\n    },\n    {\n        color: \"escala de grises\", preview: \"#E0E0E0\", variants:\n            [\"#FFFFFF\", \"#FAFAFA\", \"#F5F5F5\", \"#EEEEEE\", \"#E0E0E0\", \"#BDBDBD\", \"#9E9E9E\", \"#757575\", \"#616161\", \"#424242\", \"#000000\"]\n    },\n    {\n        color: \"azul gris\", preview: \"#90A4AE\", variants:\n            [\"#ECEFF1\", \"#CFD8DC\", \"#B0BEC5\", \"#90A4AE\", \"#78909C\", \"#607D8B\", \"#546E7A\", \"#455A64\", \"#37474F\"]\n    }] \n","import { EventEmitter, Output } from '@angular/core';\nimport { ColorFormats } from '../enums/formats';\nimport { ConverterService } from '../services/converter.service';\n\nexport class Rgba {\n  constructor(public r: number, public g: number, public b: number, public a: number) {}\n\n  public denormalize():Rgba{\n    this.r = Math.round(this.r * 255);\n    this.g = Math.round(this.g * 255);\n    this.b = Math.round(this.b * 255);\n    return this;\n  }\n\n  public toString():string{\n    this.denormalize();\n    let output =  \n    'rgb' + \n    (this.a != 1 ? 'a(' : '(')+\n    this.r + ', ' +\n    this.g + ', ' +\n    this.b + \n    (this.a != 1 ? ', ' + this.a.toPrecision(2) + ')' : ')')\n    return output;\n  }\n\n\n}\n\nexport class Hsva {\n\n  public onChange:EventEmitter<Hsva> = new EventEmitter<Hsva>(true);\n\n  constructor(public h: number, public s: number, public v: number, public a: number) {\n    \n  }\n\n  public onColorChange(value: { s: number, v: number, rgX: number, rgY: number }): void {\n    this.s = value.s / value.rgX;\n    this.v = value.v / value.rgY;\n  }\n\n  public onHueChange(value: { v: number, rgX: number }): void {\n    this.h = value.v / value.rgX;\n    // this.sliderH = this.hsva.h;\n  }\n\n  public onValueChange(value: { v: number, rgX: number }): void {\n    this.v = value.v / value.rgX;\n  }\n\n  public onAlphaChange(value: { v: number, rgX: number }): void {\n    this.a = value.v / value.rgX;\n  }\n\n}\n\nexport class Hsla {\n  constructor(public h: number, public s: number, public l: number, public a: number) {}\n  \n  public denormalize():Hsla{\n    this.h = Math.round(this.h * 360);\n    this.s = Math.round(this.s * 100);\n    this.l = Math.round(this.l * 100);\n    return this;\n  }\n  public toString():string{\n    let output =  \n    'hsl' + \n    (this.a != 1 ? 'a(': '(') +\n    this.h + ', ' +\n    this.s + '%, ' +\n    this.l + '%' + \n    (this.a != 1 ? ', ' + this.a.toPrecision(2) + ')' : ')')\n    return output;\n  }\n\n}\n\nexport class Cmyk {\n  constructor(public c: number, public m: number, public y: number, public k: number, public a: number = 1) {}\n\n  public denormalize():Cmyk{\n    this.c = Math.round(this.c * 100);\n    this.m = Math.round(this.m * 100);\n    this.y = Math.round(this.y * 100);\n    this.k = Math.round(this.k * 100);\n    return this;\n  }\n  public toString():string {\n    this.denormalize();\n    let output =  \n    'cmyk(' + \n    this.c + ', ' +\n    this.m + ', ' +\n    this.y + ', ' + \n    this.k + ')';\n    return output;\n  }\n}\n","export class NgxColorsColor {\n  preview: string;\n  variants: Array<string>;\n  constructor(params?) {\n    if (params) {\n      this.preview = params.preview;\n      this.variants = params.variants;\n    }\n  }\n}\n","import { Injectable } from \"@angular/core\";\n\nimport { Cmyk, Rgba, Hsla, Hsva } from \"../clases/formats\";\n\nimport { ColorPickerComponent } from \"../components/color-picker/color-picker.component\";\nimport { ColorFormats } from \"../enums/formats\";\n\n@Injectable()\nexport class ConverterService {\n  // private active: ColorPickerComponent | null = null;\n\n  constructor() {}\n\n  // public setActive(active: ColorPickerComponent | null): void {\n  //   this.active = active;\n  // }\n\n  toFormat(hsva: Hsva, format: ColorFormats) {\n    var output = \"\";\n    if (hsva) {\n      switch (format) {\n        case ColorFormats.HEX:\n          var rgba: Rgba = this.hsvaToRgba(hsva);\n          rgba.denormalize();\n          var output = this.rgbaToHex(rgba, true);\n          break;\n        case ColorFormats.HSLA:\n          var hsla: Hsla = this.hsva2hsla(hsva);\n          hsla.denormalize();\n          var output = hsla.toString();\n          break;\n        case ColorFormats.RGBA:\n          var rgba: Rgba = this.hsvaToRgba(hsva);\n          var output = rgba.toString();\n          break;\n        case ColorFormats.CMYK:\n          var cmyk: Cmyk = this.hsvaToCmyk(hsva);\n          var output = cmyk.toString();\n          break;\n      }\n    }\n    return output;\n  }\n\n  public stringToFormat(color: string, format: ColorFormats) {\n    var hsva = this.stringToHsva(color, true);\n    return this.toFormat(hsva, format);\n  }\n\n  public hsva2hsla(hsva: Hsva): Hsla {\n    const h = hsva.h,\n      s = hsva.s,\n      v = hsva.v,\n      a = hsva.a;\n\n    if (v === 0) {\n      return new Hsla(h, 0, 0, a);\n    } else if (s === 0 && v === 1) {\n      return new Hsla(h, 1, 1, a);\n    } else {\n      const l = (v * (2 - s)) / 2;\n\n      return new Hsla(h, (v * s) / (1 - Math.abs(2 * l - 1)), l, a);\n    }\n  }\n\n  public hsla2hsva(hsla: Hsla): Hsva {\n    const h = Math.min(hsla.h, 1),\n      s = Math.min(hsla.s, 1);\n    const l = Math.min(hsla.l, 1),\n      a = Math.min(hsla.a, 1);\n\n    if (l === 0) {\n      return new Hsva(h, 0, 0, a);\n    } else {\n      const v = l + (s * (1 - Math.abs(2 * l - 1))) / 2;\n\n      return new Hsva(h, (2 * (v - l)) / v, v, a);\n    }\n  }\n\n  public hsvaToRgba(hsva: Hsva): Rgba {\n    let r: number, g: number, b: number;\n\n    const h = hsva.h,\n      s = hsva.s,\n      v = hsva.v,\n      a = hsva.a;\n\n    const i = Math.floor(h * 6);\n    const f = h * 6 - i;\n    const p = v * (1 - s);\n    const q = v * (1 - f * s);\n    const t = v * (1 - (1 - f) * s);\n\n    switch (i % 6) {\n      case 0:\n        (r = v), (g = t), (b = p);\n        break;\n      case 1:\n        (r = q), (g = v), (b = p);\n        break;\n      case 2:\n        (r = p), (g = v), (b = t);\n        break;\n      case 3:\n        (r = p), (g = q), (b = v);\n        break;\n      case 4:\n        (r = t), (g = p), (b = v);\n        break;\n      case 5:\n        (r = v), (g = p), (b = q);\n        break;\n      default:\n        (r = 0), (g = 0), (b = 0);\n    }\n\n    return new Rgba(r, g, b, a);\n  }\n\n  public cmykToRgb(cmyk: Cmyk): Rgba {\n    const r = (1 - cmyk.c) * (1 - cmyk.k);\n    const g = (1 - cmyk.m) * (1 - cmyk.k);\n    const b = (1 - cmyk.y) * (1 - cmyk.k);\n\n    return new Rgba(r, g, b, cmyk.a);\n  }\n\n  public rgbaToCmyk(rgba: Rgba): Cmyk {\n    const k: number = 1 - Math.max(rgba.r, rgba.g, rgba.b);\n\n    if (k === 1) {\n      return new Cmyk(0, 0, 0, 1, rgba.a);\n    } else {\n      const c = (1 - rgba.r - k) / (1 - k);\n      const m = (1 - rgba.g - k) / (1 - k);\n      const y = (1 - rgba.b - k) / (1 - k);\n\n      return new Cmyk(c, m, y, k, rgba.a);\n    }\n  }\n\n  public hsvaToCmyk(hsva: Hsva): Cmyk {\n    let rgba = this.hsvaToRgba(hsva);\n    let cmyk = this.rgbaToCmyk(rgba);\n    \n    return cmyk;\n}\n\n  public rgbaToHsva(rgba: Rgba): Hsva {\n    let h: number, s: number;\n\n    const r = Math.min(rgba.r, 1),\n      g = Math.min(rgba.g, 1);\n    const b = Math.min(rgba.b, 1),\n      a = Math.min(rgba.a, 1);\n\n    const max = Math.max(r, g, b),\n      min = Math.min(r, g, b);\n\n    const v: number = max,\n      d = max - min;\n\n    s = max === 0 ? 0 : d / max;\n\n    if (max === min) {\n      h = 0;\n    } else {\n      switch (max) {\n        case r:\n          h = (g - b) / d + (g < b ? 6 : 0);\n          break;\n        case g:\n          h = (b - r) / d + 2;\n          break;\n        case b:\n          h = (r - g) / d + 4;\n          break;\n        default:\n          h = 0;\n      }\n\n      h /= 6;\n    }\n\n    return new Hsva(h, s, v, a);\n  }\n\n  public rgbaToHex(rgba: Rgba, allowHex8?: boolean): string {\n    /* tslint:disable:no-bitwise */\n    let hex =\n      \"#\" +\n      ((1 << 24) | (rgba.r << 16) | (rgba.g << 8) | rgba.b)\n        .toString(16)\n        .substr(1);\n\n    if (rgba.a != 1) {\n      hex += ((1 << 8) | Math.round(rgba.a * 255)).toString(16).substr(1);\n    }\n    /* tslint:enable:no-bitwise */\n\n    return hex;\n  }\n\n  public normalizeCMYK(cmyk: Cmyk): Cmyk {\n    return new Cmyk(\n      cmyk.c / 100,\n      cmyk.m / 100,\n      cmyk.y / 100,\n      cmyk.k / 100,\n      cmyk.a\n    );\n  }\n\n  public denormalizeCMYK(cmyk: Cmyk): Cmyk {\n    return new Cmyk(\n      Math.floor(cmyk.c * 100),\n      Math.floor(cmyk.m * 100),\n      Math.floor(cmyk.y * 100),\n      Math.floor(cmyk.k * 100),\n      cmyk.a\n    );\n  }\n\n  public denormalizeRGBA(rgba: Rgba): Rgba {\n    return new Rgba(\n      Math.round(rgba.r * 255),\n      Math.round(rgba.g * 255),\n      Math.round(rgba.b * 255),\n      rgba.a\n    );\n  }\n\n  public stringToHsva(\n    colorString: string = \"\",\n    allowHex8: boolean = true\n  ): Hsva | null {\n    let hsva: Hsva | null = null;\n\n    colorString = (colorString || \"\").toLowerCase();\n\n    const stringParsers = [\n      {\n        re: /(rgb)a?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*%?,\\s*(\\d{1,3})\\s*%?(?:,\\s*(\\d+(?:\\.\\d+)?)\\s*)?\\)/,\n        parse: function (execResult: any) {\n          return new Rgba(\n            parseInt(execResult[2], 10) / 255,\n            parseInt(execResult[3], 10) / 255,\n            parseInt(execResult[4], 10) / 255,\n            isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5])\n          );\n        },\n      },\n      {\n        re: /(hsl)a?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})%\\s*,\\s*(\\d{1,3})%\\s*(?:,\\s*(\\d+(?:\\.\\d+)?)\\s*)?\\)/,\n        parse: function (execResult: any) {\n          return new Hsla(\n            parseInt(execResult[2], 10) / 360,\n            parseInt(execResult[3], 10) / 100,\n            parseInt(execResult[4], 10) / 100,\n            isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5])\n          );\n        },\n      },\n      {\n        re: /cmyk?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*%?,\\s*(\\d{1,3})\\s*%?(?:,\\s*(\\d+(?:\\.\\d+)?)\\s*)?\\)/,\n        parse: function (execResult: any) {\n          return new Cmyk(\n            parseInt(execResult[1], 10) / 100,\n            parseInt(execResult[2], 10) / 100,\n            parseInt(execResult[3], 10) / 100,\n            parseInt(execResult[4], 10) / 100\n          );\n        },\n      },\n    ];\n\n    if (allowHex8) {\n      stringParsers.push({\n        re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})?$/,\n        parse: function (execResult: any) {\n          return new Rgba(\n            parseInt(execResult[1], 16) / 255,\n            parseInt(execResult[2], 16) / 255,\n            parseInt(execResult[3], 16) / 255,\n            parseInt(execResult[4] || \"FF\", 16) / 255\n          );\n        },\n      });\n    } else {\n      stringParsers.push({\n        re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/,\n        parse: function (execResult: any) {\n          return new Rgba(\n            parseInt(execResult[1], 16) / 255,\n            parseInt(execResult[2], 16) / 255,\n            parseInt(execResult[3], 16) / 255,\n            1\n          );\n        },\n      });\n    }\n\n    stringParsers.push({\n      re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/,\n      parse: function (execResult: any) {\n        return new Rgba(\n          parseInt(execResult[1] + execResult[1], 16) / 255,\n          parseInt(execResult[2] + execResult[2], 16) / 255,\n          parseInt(execResult[3] + execResult[3], 16) / 255,\n          1\n        );\n      },\n    });\n\n    for (const key in stringParsers) {\n      if (stringParsers.hasOwnProperty(key)) {\n        const parser = stringParsers[key];\n\n        const match = parser.re.exec(colorString),\n          color: any = match && parser.parse(match);\n\n        if (color) {\n          if (color instanceof Rgba) {\n            hsva = this.rgbaToHsva(color);\n          } else if (color instanceof Hsla) {\n            hsva = this.hsla2hsva(color);\n          } else if (color instanceof Cmyk) {\n            let rgb = this.cmykToRgb(color);\n            hsva = this.rgbaToHsva(rgb);\n          }\n\n          return hsva;\n        }\n      }\n    }\n\n    return hsva;\n  }\n\n  public outputFormat(hsva: Hsva): string {\n    return this.hsvaToRgba(hsva).toString();\n  }\n\n  public getFormatByString(color: string): string {\n    if (color) {\n      color = color.toLowerCase();\n      let regexHex: RegExp = /(#([\\da-f]{3}(?:[\\da-f]{3})?(?:[\\da-f]{2})?))/;\n      let regexRGBA: RegExp =\n        /(rgba\\((\\d{1,3},\\s?){3}(1|0?\\.\\d+)\\)|rgb\\(\\d{1,3}(,\\s?\\d{1,3}){2}\\))/;\n      let regexHSLA: RegExp =\n        /(hsla\\((\\d{1,3}%?,\\s?){3}(1|0?\\.\\d+)\\)|hsl\\(\\d{1,3}%?(,\\s?\\d{1,3}%?){2}\\))/;\n      let regexCMYK: RegExp =\n        /(cmyk\\(\\d{1,3}(,\\s?\\d{1,3}){3}\\))/;\n      if (regexHex.test(color)) {\n        return \"hex\";\n      } else if (regexRGBA.test(color)) {\n        return \"rgba\";\n      } else if (regexHSLA.test(color)) {\n        return \"hsla\";\n      } else if (regexCMYK.test(color)) {\n        return \"cmyk\";\n      }\n    }\n    return \"hex\";\n  }\n}\n","export class SliderPosition {\n    constructor(public h: number, public s: number, public v: number, public a: number) {}\n}\n  \nexport class SliderDimension {\n    constructor(public h: number, public s: number, public v: number, public a: number) {}\n}","import { Input, Directive, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';\n\n@Directive({\n    selector: '[slider]'\n  })\n  export class SliderDirective {\n    private listenerMove: any;\n    private listenerStop: any;\n  \n    @Input() rgX: number;\n    @Input() rgY: number;\n  \n    @Input() slider: string;\n  \n    @Output() dragEnd = new EventEmitter();\n    @Output() dragStart = new EventEmitter();\n  \n    @Output() newValue = new EventEmitter<any>();\n  \n    @HostListener('mousedown', ['$event']) mouseDown(event: any): void {\n      this.start(event);\n    }\n  \n    @HostListener('touchstart', ['$event']) touchStart(event: any): void {\n      this.start(event);\n    }\n  \n    constructor(private elRef: ElementRef) {\n      this.listenerMove = (event: any) => this.move(event);\n  \n      this.listenerStop = () => this.stop();\n    }\n  \n    private move(event: any): void {\n      event.preventDefault();\n  \n      this.setCursor(event);\n    }\n  \n    private start(event: any): void {\n      this.setCursor(event);\n  \n      event.stopPropagation();\n  \n      document.addEventListener('mouseup', this.listenerStop);\n      document.addEventListener('touchend', this.listenerStop);\n      document.addEventListener('mousemove', this.listenerMove);\n      document.addEventListener('touchmove', this.listenerMove);\n  \n      this.dragStart.emit();\n    }\n  \n    private stop(): void {\n      document.removeEventListener('mouseup', this.listenerStop);\n      document.removeEventListener('touchend', this.listenerStop);\n      document.removeEventListener('mousemove', this.listenerMove);\n      document.removeEventListener('touchmove', this.listenerMove);\n  \n      this.dragEnd.emit();\n    }\n  \n    private getX(event: any): number {\n      const position = this.elRef.nativeElement.getBoundingClientRect();\n  \n      const pageX = (event.pageX !== undefined) ? event.pageX : event.touches[0].pageX;\n  \n      return pageX - position.left - window.pageXOffset;\n    }\n  \n    private getY(event: any): number {\n      const position = this.elRef.nativeElement.getBoundingClientRect();\n  \n      const pageY = (event.pageY !== undefined) ? event.pageY : event.touches[0].pageY;\n  \n      return pageY - position.top - window.pageYOffset;\n    }\n  \n    private setCursor(event: any): void {\n      const width = this.elRef.nativeElement.offsetWidth;\n      const height = this.elRef.nativeElement.offsetHeight;\n  \n      const x = Math.max(0, Math.min(this.getX(event), width));\n      const y = Math.max(0, Math.min(this.getY(event), height));\n  \n      if (this.rgX !== undefined && this.rgY !== undefined) {\n        this.newValue.emit({ s: x / width, v: (1 - y / height), rgX: this.rgX, rgY: this.rgY });\n      } else if (this.rgX === undefined && this.rgY !== undefined) {\n        this.newValue.emit({ v: y / height, rgY: this.rgY });\n      } else if (this.rgX !== undefined && this.rgY === undefined) {\n        this.newValue.emit({ v: x / width, rgX: this.rgX });\n      }\n    }\n  }","import {\n  Component,\n  OnInit,\n  OnDestroy,\n  AfterViewInit,\n  ViewChild,\n  ViewEncapsulation,\n  ElementRef,\n  ChangeDetectorRef,\n  Input,\n  Output,\n  EventEmitter,\n  OnChanges,\n} from \"@angular/core\";\n\nimport { Cmyk, Hsla, Hsva, Rgba } from \"../../clases/formats\";\nimport { ColorFormats } from \"../../enums/formats\";\nimport { SliderDimension, SliderPosition } from \"../../clases/slider\";\n\nimport { ConverterService } from \"../../services/converter.service\";\n\n@Component({\n  selector: \"color-picker\",\n  templateUrl: \"./color-picker.component.html\",\n  styleUrls: [\"./color-picker.component.scss\"],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ColorPickerComponent\n  implements OnInit, OnDestroy, AfterViewInit, OnChanges\n{\n  //IO color\n  @Input() color: Hsva = new Hsva(0, 1, 1, 1);\n  @Input() controls: \"default\" | \"only-alpha\" | \"no-alpha\" = \"default\";\n  @Output() sliderChange: EventEmitter<Hsva> = new EventEmitter<Hsva>(false);\n  @Output() onAlphaChange: EventEmitter<any> = new EventEmitter<any>(false);\n  //Event triggered when any slider change\n  // @Output() colorSelectedChange:EventEmitter<Hsva> = new EventEmitter<Hsva>(false);\n\n  private hsva: Hsva = new Hsva(0, 1, 1, 1);\n  private outputColor: Hsva;\n  public selectedColor: string = \"#000000\";\n  private fallbackColor: string = \"#000000\";\n\n  // private sHue: number;\n  private sliderDimMax: SliderDimension;\n  public slider: SliderPosition;\n\n  public hueSliderColor: string;\n  public alphaSliderColor: string;\n\n  @ViewChild(\"hueSlider\", { static: false }) hueSlider: ElementRef;\n  @ViewChild(\"alphaSlider\", { static: false }) alphaSlider: ElementRef;\n\n  constructor(\n    private service: ConverterService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    if (!this.color) {\n      this.color = new Hsva(0, 1, 1, 1);\n    }\n    this.slider = new SliderPosition(0, 0, 0, 0);\n    this.update();\n  }\n\n  ngOnDestroy(): void {}\n\n  ngOnChanges(changes: any): void {\n    if (changes.color && this.color) {\n      this.update();\n    }\n  }\n\n  ngAfterViewInit(): void {\n    const hueWidth = this.hueSlider?.nativeElement.offsetWidth || 140;\n    const alphaWidth = this.alphaSlider?.nativeElement.offsetWidth || 140;\n    this.sliderDimMax = new SliderDimension(hueWidth, 220, 130, alphaWidth);\n    this.update();\n  }\n\n  public onSliderChange(type: string, event) {\n    switch (type) {\n      case \"saturation-lightness\":\n        this.hsva.onColorChange(event);\n        break;\n      case \"hue\":\n        this.hsva.onHueChange(event);\n        break;\n      case \"alpha\":\n        this.hsva.onAlphaChange(event);\n        this.onAlphaChange.emit(event);\n        break;\n      case \"value\":\n        this.hsva.onValueChange(event);\n        break;\n    }\n    // this.sHue = this.hsva.h;\n    this.update();\n    this.setColor(this.outputColor);\n  }\n\n  setColor(color) {\n    this.color = color;\n    this.sliderChange.emit(this.color);\n  }\n\n  public getBackgroundColor(color) {\n    return {\n      background:\n        \"linear-gradient(90deg, rgba(36,0,0,0) 0%, \" + color + \" 100%)\",\n    };\n  }\n\n  private update(): void {\n    this.hsva = this.color;\n    if (this.sliderDimMax) {\n      let rgba = this.service.hsvaToRgba(this.hsva).denormalize();\n      let hue = this.service\n        .hsvaToRgba(new Hsva(this.hsva.h, 1, 1, 1))\n        .denormalize();\n\n      this.hueSliderColor = \"rgb(\" + hue.r + \",\" + hue.g + \",\" + hue.b + \")\";\n      this.alphaSliderColor =\n        \"rgb(\" + rgba.r + \",\" + rgba.g + \",\" + rgba.b + \")\";\n\n      this.outputColor = this.hsva;\n      this.selectedColor = this.service.hsvaToRgba(this.hsva).toString();\n\n      this.slider = new SliderPosition(\n        // (this.sHue || this.hsva.h) * this.sliderDimMax.h - 8,\n        this.hsva.h * this.sliderDimMax.h - 5,\n        this.hsva.s * this.sliderDimMax.s - 8,\n        (1 - this.hsva.v) * this.sliderDimMax.v - 8,\n        this.hsva.a * this.sliderDimMax.a - 5\n      );\n      this.cdr.detectChanges();\n    }\n  }\n}\n","<div #dialogPopup class=\"color-picker\" (click)=\"$event.stopPropagation()\">\n  <div\n    class=\"saturation-lightness\"\n    *ngIf=\"this.controls != 'only-alpha'\"\n    [slider]\n    [rgX]=\"1\"\n    [rgY]=\"1\"\n    [style.background-color]=\"hueSliderColor\"\n    (newValue)=\"onSliderChange('saturation-lightness', $event)\"\n  >\n    <div class=\"cursor\" [style.top.px]=\"slider?.v\" [style.left.px]=\"slider?.s\">\n      <div></div>\n    </div>\n  </div>\n\n  <div class=\"hue-alpha box\">\n    <div class=\"left\" *ngIf=\"this.controls != 'only-alpha'\">\n      <div class=\"selected-color-background\"></div>\n      <div\n        class=\"selected-color\"\n        [style.background-color]=\"selectedColor\"\n      ></div>\n    </div>\n\n    <div class=\"right\">\n      <div\n        *ngIf=\"this.controls != 'only-alpha'\"\n        #hueSlider\n        class=\"hue\"\n        [slider]\n        [rgX]=\"1\"\n        (newValue)=\"onSliderChange('hue', $event)\"\n      >\n        <div class=\"sliderCursor\" [style.left.px]=\"slider?.h\">\n          <div><div></div></div>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"this.controls != 'no-alpha'\"\n        #alphaSlider\n        class=\"alpha\"\n        [slider]\n        [rgX]=\"1\"\n        (newValue)=\"onSliderChange('alpha', $event)\"\n      >\n        <div\n          class=\"alpha-gradient\"\n          [ngStyle]=\"getBackgroundColor(alphaSliderColor)\"\n        ></div>\n        <div class=\"sliderCursor\" [style.left.px]=\"slider?.a\">\n          <div><div></div></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n","import {\n  Component,\n  OnInit,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectorRef,\n  ViewChild,\n  ElementRef,\n  HostListener,\n  HostBinding,\n} from '@angular/core';\nimport {\n  trigger,\n  transition,\n  query,\n  style,\n  stagger,\n  animate,\n  keyframes,\n} from '@angular/animations';\nimport { isDescendantOrSame } from '../../helpers/helpers';\nimport { ColorFormats } from '../../enums/formats';\nimport { ConverterService } from '../../services/converter.service';\nimport { defaultColors } from '../../helpers/default-colors';\nimport { formats } from '../../helpers/formats';\nimport { NgxColorsTriggerDirective } from '../../directives/ngx-colors-trigger.directive';\nimport { Hsva } from '../../clases/formats';\nimport { NgxColorsColor } from '../../clases/color';\n\n@Component({\n  selector: 'ngx-colors-panel',\n  templateUrl: './panel.component.html',\n  styleUrls: ['./panel.component.scss'],\n  animations: [\n    trigger('colorsAnimation', [\n      transition('void => slide-in', [\n        // Initially all colors are hidden\n        query(':enter', style({ opacity: 0 }), { optional: true }),\n        //slide-in animation\n        query(\n          ':enter',\n          stagger('10ms', [\n            animate(\n              '.3s ease-in',\n              keyframes([\n                style({ opacity: 0, transform: 'translatex(-50%)', offset: 0 }),\n                style({\n                  opacity: 0.5,\n                  transform: 'translatex(-10px) scale(1.1)',\n                  offset: 0.3,\n                }),\n                style({ opacity: 1, transform: 'translatex(0)', offset: 1 }),\n              ])\n            ),\n          ]),\n          { optional: true }\n        ),\n      ]),\n      //popup animation\n      transition('void => popup', [\n        query(':enter', style({ opacity: 0, transform: 'scale(0)' }), {\n          optional: true,\n        }),\n        query(\n          ':enter',\n          stagger('10ms', [\n            animate(\n              '500ms ease-out',\n              keyframes([\n                style({ opacity: 0.5, transform: 'scale(.5)', offset: 0.3 }),\n                style({ opacity: 1, transform: 'scale(1.1)', offset: 0.8 }),\n                style({ opacity: 1, transform: 'scale(1)', offset: 1 }),\n              ])\n            ),\n          ]),\n          { optional: true }\n        ),\n      ]),\n    ]),\n  ],\n})\nexport class PanelComponent implements OnInit {\n  @HostListener('document:mousedown', ['$event'])\n  click(event) {\n    if (this.isOutside(event)) {\n      this.emitClose('cancel');\n    }\n  }\n\n  @HostListener('document:scroll')\n  onScroll() {\n    this.onScreenMovement();\n  }\n  @HostListener('window:resize')\n  onResize() {\n    this.onScreenMovement();\n  }\n\n  @HostBinding('style.top.px') public top: number;\n  @HostBinding('style.left.px') public left: number;\n  @ViewChild('dialog') panelRef: ElementRef;\n  constructor(\n    public service: ConverterService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  public color = '#000000';\n  public previewColor: string = '#000000';\n  public hsva = new Hsva(0, 1, 1, 1);\n\n  public colorsAnimationEffect = 'slide-in';\n\n  public palette = defaultColors;\n  public variants = [];\n\n  public userFormats: string[] = [];\n  public colorFormats = formats;\n  public format: ColorFormats = ColorFormats.HEX;\n  public formatMap = {\n    'hex': ColorFormats.HEX,\n    'rgba': ColorFormats.RGBA,\n    'hsla': ColorFormats.HSLA,\n    'cmyk': ColorFormats.CMYK\n  }\n\n  public canChangeFormat: boolean = true;\n\n  public menu = 1;\n\n  public hideColorPicker: boolean = false;\n  public hideTextInput: boolean = false;\n  public acceptLabel: string;\n  public cancelLabel: string;\n  public colorPickerControls: 'default' | 'only-alpha' | 'no-alpha' = 'default';\n  private triggerInstance: NgxColorsTriggerDirective;\n  private TriggerBBox;\n  public isSelectedColorInPalette: boolean;\n  public indexSeleccionado;\n  public positionString;\n  public temporalColor;\n  public backupColor;\n  public placeholder = '#FFFFFF';\n\n  public ngOnInit() {\n    this.setPosition();\n    this.hsva = this.service.stringToHsva(this.color);\n    this.indexSeleccionado = this.findIndexSelectedColor(this.palette);\n  }\n  public ngAfterViewInit() {\n    this.setPositionY();\n  }\n\n  private onScreenMovement() {\n    this.setPosition();\n    this.setPositionY();\n    if (!this.panelRef.nativeElement.style.transition) {\n      this.panelRef.nativeElement.style.transition = 'transform 0.5s ease-out';\n    }\n  }\n\n  private findIndexSelectedColor(colors): number {\n    let resultIndex = undefined;\n    if (this.color) {\n      for (let i = 0; i < colors.length; i++) {\n        const color = colors[i];\n        if (typeof color == 'string') {\n          if (\n            this.service.stringToFormat(this.color, ColorFormats.HEX) ==\n            this.service.stringToFormat(color, ColorFormats.HEX)\n          ) {\n            resultIndex = i;\n          }\n        } else if (color === undefined) {\n          this.color = undefined;\n        } else {\n          if (this.findIndexSelectedColor(color.variants) != undefined) {\n            resultIndex = i;\n          }\n        }\n      }\n    }\n    return resultIndex;\n  }\n\n  public iniciate(\n    triggerInstance: NgxColorsTriggerDirective,\n    triggerElementRef,\n    color,\n    palette,\n    animation,\n    format: string,\n    hideTextInput: boolean,\n    hideColorPicker: boolean,\n    acceptLabel: string,\n    cancelLabel: string,\n    colorPickerControls: 'default' | 'only-alpha' | 'no-alpha',\n    position: 'top' | 'bottom',\n    userFormats: string[] = [],\n  ) {\n    this.colorPickerControls = colorPickerControls;\n    this.triggerInstance = triggerInstance;\n    this.TriggerBBox = triggerElementRef;\n    this.color = color;\n    this.hideColorPicker = hideColorPicker;\n    this.hideTextInput = hideTextInput;\n    this.acceptLabel = acceptLabel;\n    this.cancelLabel = cancelLabel;\n\n    if(userFormats.length) {\n      const allFormatsValid = userFormats.every(frt => formats.includes(frt));\n      if( allFormatsValid ) {\n        this.colorFormats = userFormats;\n      }\n    }\n\n    if (format) {\n      if (this.colorFormats.includes(format)) {\n        this.format = this.colorFormats.indexOf(format.toLowerCase());\n        this.canChangeFormat = false;\n        if (\n          this.service.getFormatByString(this.color) != format.toLowerCase()\n        ) {\n          this.setColor(this.service.stringToHsva(this.color));\n        }\n      } else {\n        console.error('Format provided is invalid, using HEX');\n        this.format = ColorFormats.HEX;\n      }\n    } else {\n      this.format = this.colorFormats.indexOf(this.service.getFormatByString(this.color));\n      if( this.format < 0 ) {\n        this.format = 0;\n      }\n    }\n\n    this.previewColor = this.color;\n    this.palette = palette ?? defaultColors;\n    this.colorsAnimationEffect = animation;\n    if (position == 'top') {\n      let TriggerBBox = this.TriggerBBox.nativeElement.getBoundingClientRect();\n      this.positionString =\n        'transform: translateY(calc( -100% - ' + TriggerBBox.height + 'px ))';\n    }\n  }\n\n  public setPosition(): void {\n    if (this.TriggerBBox) {\n      const panelWidth = 250;\n      const viewportOffset =\n        this.TriggerBBox.nativeElement.getBoundingClientRect();\n      this.top = viewportOffset.top + viewportOffset.height;\n      if (viewportOffset.left + panelWidth > window.innerWidth) {\n        this.left =\n          viewportOffset.right < panelWidth\n            ? window.innerWidth / 2 - panelWidth / 2\n            : viewportOffset.right - panelWidth;\n      } else {\n        this.left = viewportOffset.left;\n      }\n    }\n  }\n\n  private setPositionY(): void {\n    const triggerBBox = this.TriggerBBox.nativeElement.getBoundingClientRect();\n    const panelBBox = this.panelRef.nativeElement.getBoundingClientRect();\n    const panelHeight = panelBBox.height;\n    // Check for space below the trigger\n    if (triggerBBox.bottom + panelHeight > window.innerHeight) {\n      // there is no space, move panel over the trigger\n      this.positionString =\n        triggerBBox.top < panelBBox.height\n          ? 'transform: translateY(-' + triggerBBox.bottom + 'px );'\n          : 'transform: translateY(calc( -100% - ' +\n            triggerBBox.height +\n            'px ));';\n    } else {\n      this.positionString = '';\n    }\n    this.cdr.detectChanges();\n  }\n\n  public hasVariant(color): boolean {\n    if (!this.previewColor) {\n      return false;\n    }\n    return (\n      typeof color != 'string' &&\n      color.variants.some(\n        (v) => v.toUpperCase() == this.previewColor.toUpperCase()\n      )\n    );\n  }\n\n  public isSelected(color) {\n    if (!this.previewColor) {\n      return false;\n    }\n    return (\n      typeof color == 'string' &&\n      color.toUpperCase() == this.previewColor.toUpperCase()\n    );\n  }\n\n  public getBackgroundColor(color) {\n    if (typeof color == 'string') {\n      return { background: color };\n    } else {\n      return { background: color?.preview };\n    }\n  }\n\n  public onAlphaChange(event) {\n    this.palette = this.ChangeAlphaOnPalette(event, this.palette);\n  }\n\n  private ChangeAlphaOnPalette(\n    alpha,\n    colors: Array<string | NgxColorsColor>\n  ): Array<any> {\n    var result = [];\n    for (let i = 0; i < colors.length; i++) {\n      const color = colors[i];\n      if (typeof color == 'string') {\n        let newColor = this.service.stringToHsva(color);\n        newColor.onAlphaChange(alpha);\n        result.push(this.service.toFormat(newColor, this.format));\n      } else {\n        let newColor = new NgxColorsColor();\n        let newColorPreview = this.service.stringToHsva(color.preview);\n        newColorPreview.onAlphaChange(alpha);\n        newColor.preview = this.service.toFormat(newColorPreview, this.format);\n        newColor.variants = this.ChangeAlphaOnPalette(alpha, color.variants);\n        result.push(newColor);\n      }\n    }\n    return result;\n  }\n\n  /**\n   * Change color from default colors\n   * @param string color\n   */\n  public changeColor(color: string): void {\n    this.setColor(this.service.stringToHsva(color));\n    // this.triggerInstance.onChange();\n    this.emitClose('accept');\n  }\n\n  public onChangeColorPicker(event: Hsva) {\n    this.temporalColor = event;\n    this.color = this.service.toFormat(event, this.format);\n    // this.setColor(event);\n    this.triggerInstance.sliderChange(\n      this.service.toFormat(event, this.format)\n    );\n  }\n\n  public changeColorManual(color: string): void {\n    this.previewColor = color;\n    this.color = color;\n    this.hsva = this.service.stringToHsva(color);\n    this.setPreviewColor(this.hsva);\n    this.temporalColor = this.hsva;\n    this.triggerInstance.setColor(this.color, this.previewColor);\n    // this.triggerInstance.onChange();\n  }\n\n  setColor(value: Hsva, colorIndex: number = -1) {\n    this.hsva = value;\n\n    let formatName = this.colorFormats[this.format];\n    let index = colorIndex\n    if( index < 0){\n      index = this.formatMap[formatName];\n    }\n    \n    this.color = this.service.toFormat(value, index);\n    this.setPreviewColor(value);\n    this.triggerInstance.setColor(this.color, this.previewColor);\n  }\n\n  setPreviewColor(value: Hsva) {\n    this.previewColor = value\n      ? this.service.hsvaToRgba(value).toString()\n      : undefined;\n  }\n  hsvaToRgba;\n  onChange() {\n    // this.triggerInstance.onChange();\n  }\n\n  public onColorClick(color) {\n    if (typeof color == 'string' || color === undefined) {\n      this.changeColor(color);\n    } else {\n      this.variants = color.variants;\n      this.menu = 2;\n    }\n  }\n\n  public addColor() {\n    this.menu = 3;\n    this.backupColor = this.color;\n    // this.color = \"#FF0000\";\n    this.temporalColor = this.service.stringToHsva(this.color);\n  }\n\n  public nextFormat() {\n    if (this.canChangeFormat) {\n      this.format = (this.format + 1) % this.colorFormats.length;\n\n      let formatName = this.colorFormats[this.format];\n      let index = this.formatMap[formatName];\n\n      this.setColor(this.hsva, index);\n      this.placeholder = this.service.toFormat(\n        new Hsva(0, 0, 1, 1),\n        index\n      );\n    }\n  }\n\n  public emitClose(status: 'cancel' | 'accept') {\n    if (this.menu == 3) {\n      if (status == 'cancel') {\n      } else if (status == 'accept') {\n        this.setColor(this.temporalColor);\n      }\n    }\n    this.triggerInstance.closePanel();\n  }\n\n  public onClickBack() {\n    if (this.menu == 3) {\n      this.color = this.backupColor;\n      this.hsva = this.service.stringToHsva(this.color);\n    }\n    this.indexSeleccionado = this.findIndexSelectedColor(this.palette);\n    this.menu = 1;\n  }\n\n  isOutside(event) {\n    return event.target.classList.contains('ngx-colors-overlay');\n  }\n}\n","<div class=\"opened\" [style]=\"positionString\" #dialog>\n  <ng-container *ngIf=\"menu == 1\">\n    <div class=\"colors\" [@colorsAnimation]=\"colorsAnimationEffect\">\n      <ng-container *ngFor=\"let color of palette; let i = index\">\n        <div class=\"circle wrapper color\">\n          <div\n            (click)=\"onColorClick(color)\"\n            class=\"circle color circle-border\"\n            [class.colornull]=\"!color\"\n            [ngStyle]=\"getBackgroundColor(color)\"\n          >\n            <div *ngIf=\"i == this.indexSeleccionado\" class=\"selected\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <div\n        style=\"background: rgb(245 245 245); position: relative\"\n        (click)=\"addColor()\"\n        *ngIf=\"!hideColorPicker && this.colorPickerControls != 'only-alpha'\"\n        class=\"circle button\"\n      >\n        <div\n          *ngIf=\"this.indexSeleccionado === undefined\"\n          style=\"\n            position: absolute;\n            height: 7px;\n            width: 7px;\n            border: 1px solid rgba(0, 0, 0, 0.03);\n            border-radius: 100%;\n            top: 0;\n            right: 0;\n          \"\n          [ngStyle]=\"getBackgroundColor(color)\"\n        ></div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#222222\"\n        >\n          <path d=\"M24 24H0V0h24v24z\" fill=\"none\" opacity=\".87\" />\n          <path d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z\" />\n        </svg>\n        <!-- <div class=\"add\">\n          <icons icon=\"add\"></icons>\n        </div> -->\n      </div>\n      <color-picker\n        *ngIf=\"!hideColorPicker && this.colorPickerControls == 'only-alpha'\"\n        [controls]=\"colorPickerControls\"\n        [color]=\"hsva\"\n        (colorChange)=\"onChangeColorPicker($event)\"\n        (onAlphaChange)=\"onAlphaChange($event)\"\n      ></color-picker>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"menu == 2\">\n    <div class=\"colors\" [@colorsAnimation]=\"colorsAnimationEffect\">\n      <div class=\"circle wrapper\">\n        <div (click)=\"onClickBack()\" class=\"add\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path\n              d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let variant of variants\">\n        <div class=\"circle wrapper color\">\n          <div\n            [class.colornull]=\"!variant\"\n            (click)=\"changeColor(variant)\"\n            class=\"circle circle-border\"\n            [ngStyle]=\"{ background: variant }\"\n          >\n            <div *ngIf=\"isSelected(variant)\" class=\"selected\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"menu == 3\">\n    <div class=\"nav-wrapper\">\n      <div\n        (click)=\"onClickBack()\"\n        class=\"round-button button\"\n        style=\"float: left\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"\n          />\n        </svg>\n      </div>\n      <button (click)=\"emitClose('cancel')\" style=\"float: right\">\n        {{ cancelLabel }}\n      </button>\n      <button (click)=\"emitClose('accept')\" style=\"float: right\">\n        {{ acceptLabel }}\n      </button>\n    </div>\n    <div class=\"color-picker-wrapper\">\n      <!-- <span [(colorPicker)]=\"color\"></span> -->\n      <color-picker\n        [controls]=\"colorPickerControls\"\n        [color]=\"hsva\"\n        (sliderChange)=\"onChangeColorPicker($event)\"\n      ></color-picker>\n    </div>\n  </ng-container>\n  <div class=\"manual-input-wrapper\" *ngIf=\"!hideTextInput\">\n    <p (click)=\"nextFormat()\" style=\"cursor: pointer;\">{{ colorFormats[format] }}</p>\n    <div class=\"g-input\">\n      <input\n        [placeholder]=\"placeholder\"\n        type=\"text\"\n        [value]=\"color\"\n        [style.font-size.px]=\"color && color.length > 23 ? 9 : 10\"\n        [style.letter-spacing.px]=\"color && color.length > 16 ? 0 : 1.5\"\n        (keyup)=\"changeColorManual(paintInput.value)\"\n        (keydown.enter)=\"emitClose('accept')\"\n        #paintInput\n      />\n    </div>\n  </div>\n</div>\n","export const OVERLAY_STYLES = {\n  position: 'fixed',\n  height: '100%',\n  width: '100%',\n  'z-index': 2000,\n  top: 0,\n  left: 0,\n}\n","import {\n  Injectable,\n  ComponentFactoryResolver,\n  Injector,\n  Inject,\n  TemplateRef,\n  Type,\n  ComponentFactory,\n  ApplicationRef,\n  EmbeddedViewRef,\n  ComponentRef,\n} from \"@angular/core\";\nimport { DOCUMENT } from \"@angular/common\";\nimport { PanelComponent } from \"../components/panel/panel.component\";\nimport { OVERLAY_STYLES } from \"./overlay-styles\";\n\n@Injectable()\nexport class PanelFactoryService {\n  constructor(\n    private resolver: ComponentFactoryResolver,\n    private applicationRef: ApplicationRef,\n    private injector: Injector\n  ) {}\n\n  componentRef: ComponentRef<PanelComponent>;\n  _factory: ComponentFactory<PanelComponent>;\n  overlay;\n\n  createPanel(\n    attachTo: string | undefined,\n    overlayClassName: string | undefined\n  ): ComponentRef<PanelComponent> {\n    if (this.componentRef != undefined) {\n      this.removePanel();\n    }\n    const factory: ComponentFactory<PanelComponent> =\n      this.resolver.resolveComponentFactory(PanelComponent);\n\n    this.componentRef = factory.create(this.injector);\n    this.applicationRef.attachView(this.componentRef.hostView);\n    const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>)\n      .rootNodes[0] as HTMLElement;\n\n    this.overlay = document.createElement(\"div\");\n    this.overlay.id = \"ngx-colors-overlay\";\n    this.overlay.classList.add(\"ngx-colors-overlay\");\n    this.overlay.classList.add(overlayClassName);\n    Object.keys(OVERLAY_STYLES).forEach((attr: string) => {\n      this.overlay.style[attr] = OVERLAY_STYLES[attr];\n    });\n    if (attachTo) {\n      document.getElementById(attachTo).appendChild(this.overlay);\n    } else {\n      document.body.appendChild(this.overlay);\n    }\n    this.overlay.appendChild(domElem);\n\n    return this.componentRef;\n  }\n\n  removePanel() {\n    this.applicationRef.detachView(this.componentRef.hostView);\n    this.componentRef.destroy();\n    this.overlay.remove();\n  }\n}\n","import {\n  EventEmitter,\n  Input,\n  Output,\n  Directive,\n  ElementRef,\n  ComponentRef,\n  HostListener,\n  forwardRef,\n  OnDestroy,\n} from '@angular/core';\nimport { PanelFactoryService } from '../services/panel-factory.service';\nimport { PanelComponent } from '../components/panel/panel.component';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgxColorsColor } from '../clases/color';\nimport { ConverterService } from '../services/converter.service';\nimport { formats } from '../helpers/formats';\nimport { ColorFormats } from '../enums/formats';\n\n@Directive({\n  selector: '[ngx-colors-trigger]',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NgxColorsTriggerDirective),\n      multi: true,\n    },\n  ],\n})\nexport class NgxColorsTriggerDirective\n  implements ControlValueAccessor, OnDestroy\n{\n  //Main input/output of the color picker\n  // @Input() color = '#000000';\n  // @Output() colorChange:EventEmitter<string> = new EventEmitter<string>();\n\n  color = '';\n\n  //This defines the type of animation for the palatte.(slide-in | popup)\n  @Input() colorsAnimation: 'slide-in' | 'popup' = 'slide-in';\n\n  //This is used to set a custom palette of colors in the panel;\n  @Input() palette: Array<string> | Array<NgxColorsColor>;\n\n  @Input() format: string;\n  @Input() formats: string[];\n  @Input() position: 'top' | 'bottom' = 'bottom';\n  @Input() hideTextInput: boolean;\n  @Input() hideColorPicker: boolean;\n  @Input() attachTo: string | undefined = undefined;\n  @Input() overlayClassName: string | undefined = undefined;\n  @Input() colorPickerControls: 'default' | 'only-alpha' | 'no-alpha' =\n    'default';\n  @Input() acceptLabel: string = 'ACCEPT';\n  @Input() cancelLabel: string = 'CANCEL';\n  // This event is trigger every time the selected color change\n  @Output() change: EventEmitter<string> = new EventEmitter<string>();\n  // This event is trigger every time the user change the color using the panel\n  @Output() input: EventEmitter<string> = new EventEmitter<string>();\n  // This event is trigger every time the user change the color using the panel\n  @Output() slider: EventEmitter<string> = new EventEmitter<string>();\n  @Output() close: EventEmitter<string> = new EventEmitter<string>();\n  @Output() open: EventEmitter<string> = new EventEmitter<string>();\n\n  @HostListener('click') onClick() {\n    this.open