/*
All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/5.0/esri/copyright.txt for details.
*/
import{__decorate as e}from"tslib";import o from"../../Color.js";import{watch as t,syncAndInitial as r}from"../../core/reactiveUtils.js";import{property as s,subclass as i}from"../../core/accessorSupport/decorators.js";import n from"../Widget.js";import{loadCalciteComponents as a}from"./componentsUtils.js";import{messageBundle as p,tsx as l}from"./widget.js";const c="esri-color-picker",u={base:c,backgroundPattern:`${c}__bg-pattern`,toggleButton:`${c}__toggle-button`,popover:`${c}__popover`};let d=class extends n{constructor(e,t){super(e,t),this.value=new o,this.alphaEnabled=!0,this._containerElement=null,this._button=null,this._open=!1,this._onColorInput=e=>{const t=e.currentTarget.value,r="string"==typeof t?new o(t):new o;this.value=r,this.onChange?.(r)}}initialize(){this.addHandles(t(()=>({container:this._containerElement,value:this.value}),({container:e,value:o})=>{e?.style.setProperty("--esri-color-picker-value",o.toCss(!0))},r))}loadDependencies(){return a({button:()=>import("@esri/calcite-components/dist/components/calcite-button"),"color-picker":()=>import("@esri/calcite-components/dist/components/calcite-color-picker"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover")})}render(){const e=this._messages,o=this._open?e.close:e.open;return l("div",{afterCreate:e=>this._containerElement=e,class:this.classes(u.base,this.class)},l("div",{class:u.backgroundPattern,key:"background-pattern"}),l("calcite-button",{afterCreate:e=>this._button=e,appearance:"transparent",class:u.toggleButton,key:"popover-trigger",kind:"neutral",label:o,scale:"s",tabIndex:0,title:o}),l("calcite-popover",{autoClose:!0,class:u.popover,key:"popover",label:e.label,overlayPositioning:"fixed",referenceElement:this._button,onCalcitePopoverClose:()=>this._open=!1,onCalcitePopoverOpen:()=>this._open=!0},l("calcite-color-picker",{alphaChannel:this.alphaEnabled,channelsDisabled:!0,key:"color-picker",onclick:e=>{e.stopPropagation()},savedDisabled:!0,value:this.value.toCss(!0),onCalciteColorPickerInput:this._onColorInput})))}};e([s()],d.prototype,"class",void 0),e([s()],d.prototype,"value",void 0),e([s()],d.prototype,"alphaEnabled",void 0),e([s()],d.prototype,"onChange",void 0),e([s()],d.prototype,"_containerElement",void 0),e([s()],d.prototype,"_button",void 0),e([s()],d.prototype,"_open",void 0),e([s(),p("esri/widgets/support/t9n/ColorPicker")],d.prototype,"_messages",void 0),d=e([i("esri.widgets.support.ColorPicker")],d);export{d as ColorPicker};
