{"version":3,"file":"color_picker_controller-DeW5_Nuw.js","sources":["../../../app/javascript/controllers/color_picker_controller.js"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\"\nimport iro from \"@jaames/iro\"\n\nexport default class extends Controller {\n  static targets = [\"picker\", \"preview\", \"colorPickerControls\", \"colorInput\"]\n\n  static values = {\n    default: { type: String, default: \"#000000\" },\n    closeOnSubmit: { type: Boolean, default: true },\n  }\n\n  connect() {\n    this.colorPicker = new iro.ColorPicker(this.pickerTarget, {\n      width: 280,\n      color: this.defaultValue,\n      layout: [\n        {\n          component: iro.ui.Box,\n          options: {\n            boxHeight: 160,\n          },\n        },\n        {\n          component: iro.ui.Slider,\n          options: {\n            sliderType: \"hue\",\n          },\n        },\n      ],\n    })\n\n    this.colorPicker.color.set(this.defaultValue)\n    this.changeColorTo(this.colorPicker.color.hexString.toUpperCase())\n\n    this.colorPicker.on(\"input:change\", (color) => {\n      this.changeColorTo(color.hexString)\n\n      this.dispatch(\"change\", {\n        detail: {\n          rgba: color.rgbaString,\n          hex: color.hexString,\n        },\n      })\n    })\n\n    this.colorPicker.on(\"color:change\", (color) => {\n      this.changeColorTo(color.hexString)\n\n      this.dispatch(\"change\", {\n        detail: {\n          rgba: color.rgbaString,\n          hex: color.hexString,\n        }\n      })\n    })\n  }\n\n  changeColor({ target }) {\n    this.colorPicker.color.set(target.dataset.color)\n\n    this.colorInputTarget.value = target.dataset.color\n      .split(\"#\")[1]\n      .toUpperCase()\n  }\n\n  syncColor({ detail }) {\n    this.colorPicker.color.set(detail)\n  }\n\n  setColor() {\n    this.colorInputTarget.value = this.colorInputTarget.value.toUpperCase()\n    try {\n      this.colorPicker.color.set(`#${this.colorInputTarget.value}`)\n    } catch (e) {}\n\n    if (this.closeOnSubmitValue) {\n      setTimeout(() => {\n        this.element.classList.add(\"hidden\")\n      }, 0)\n    }\n  }\n\n  // private\n\n  changeColorTo(color) {\n    this.colorInputTarget.value = color.split(\"#\")[1]\n\n    this.previewTargets.forEach((previewTarget) => {\n      previewTarget.style.backgroundColor = color\n    })\n  }\n}\n"],"names":["color_picker_controller","Controller","iro","color","target","detail","previewTarget","__publicField"],"mappings":"gPAGe,MAAKA,UAASC,CAAW,CAQtC,SAAU,CACR,KAAK,YAAc,IAAIC,EAAI,YAAY,KAAK,aAAc,CACxD,MAAO,IACP,MAAO,KAAK,aACZ,OAAQ,CACN,CACE,UAAWA,EAAI,GAAG,IAClB,QAAS,CACP,UAAW,GACZ,CACF,EACD,CACE,UAAWA,EAAI,GAAG,OAClB,QAAS,CACP,WAAY,KACb,CACF,CACF,CACF,CAAA,EAED,KAAK,YAAY,MAAM,IAAI,KAAK,YAAY,EAC5C,KAAK,cAAc,KAAK,YAAY,MAAM,UAAU,YAAa,CAAA,EAEjE,KAAK,YAAY,GAAG,eAAiBC,GAAU,CAC7C,KAAK,cAAcA,EAAM,SAAS,EAElC,KAAK,SAAS,SAAU,CACtB,OAAQ,CACN,KAAMA,EAAM,WACZ,IAAKA,EAAM,SACZ,CACF,CAAA,CACF,CAAA,EAED,KAAK,YAAY,GAAG,eAAiBA,GAAU,CAC7C,KAAK,cAAcA,EAAM,SAAS,EAElC,KAAK,SAAS,SAAU,CACtB,OAAQ,CACN,KAAMA,EAAM,WACZ,IAAKA,EAAM,SACrB,CACO,CAAA,CACF,CAAA,CACL,CAEE,YAAY,CAAE,OAAAC,GAAU,CACtB,KAAK,YAAY,MAAM,IAAIA,EAAO,QAAQ,KAAK,EAE/C,KAAK,iBAAiB,MAAQA,EAAO,QAAQ,MAC1C,MAAM,GAAG,EAAE,CAAC,EACZ,YAAW,CAClB,CAEE,UAAU,CAAE,OAAAC,GAAU,CACpB,KAAK,YAAY,MAAM,IAAIA,CAAM,CACrC,CAEE,UAAW,CACT,KAAK,iBAAiB,MAAQ,KAAK,iBAAiB,MAAM,YAAW,EACrE,GAAI,CACF,KAAK,YAAY,MAAM,IAAI,IAAI,KAAK,iBAAiB,KAAK,EAAE,CAC7D,MAAW,CAAA,CAER,KAAK,oBACP,WAAW,IAAM,CACf,KAAK,QAAQ,UAAU,IAAI,QAAQ,CAC3C,EAAS,CAAC,CAEV,CAIE,cAAcF,EAAO,CACnB,KAAK,iBAAiB,MAAQA,EAAM,MAAM,GAAG,EAAE,CAAC,EAEhD,KAAK,eAAe,QAASG,GAAkB,CAC7CA,EAAc,MAAM,gBAAkBH,CACvC,CAAA,CACL,CACA,CAvFEI,EADkBP,EACX,UAAU,CAAC,SAAU,UAAW,sBAAuB,YAAY,GAE1EO,EAHkBP,EAGX,SAAS,CACd,QAAS,CAAE,KAAM,OAAQ,QAAS,SAAW,EAC7C,cAAe,CAAE,KAAM,QAAS,QAAS,EAAM,CACnD"}