import*as Common from"../../../../core/common/common.js";import*as Host from"../../../../core/host/host.js";import*as i18n from"../../../../core/i18n/i18n.js";import*as ComponentHelpers from"../../../components/helpers/helpers.js";import*as ColorPicker from"../../../legacy/components/color_picker/color_picker.js";import*as LitHtml from"../../../lit-html/lit-html.js";import colorSwatchStyles from"./colorSwatch.css.js";const UIStrings={shiftclickToChangeColorFormat:"Shift-click to change color format"},str_=i18n.i18n.registerUIStrings("ui/legacy/components/inline_editor/ColorSwatch.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ColorChangedEvent extends Event{static eventName="colorchanged";data;constructor(t){super(ColorChangedEvent.eventName,{}),this.data={text:t}}}export class ClickEvent extends Event{static eventName="swatchclick";constructor(){super(ClickEvent.eventName,{})}}export class ColorSwatch extends HTMLElement{static litTagName=LitHtml.literal`devtools-color-swatch`;shadow=this.attachShadow({mode:"open"});tooltip=i18nString(UIStrings.shiftclickToChangeColorFormat);text=null;color=null;format=null;constructor(){super(),this.shadow.adoptedStyleSheets=[colorSwatchStyles]}static isColorSwatch(t){return"devtools-color-swatch"===t.localName}getColor(){return this.color}getFormat(){return this.format}getText(){return this.text}get anchorBox(){const t=this.shadow.querySelector(".color-swatch");return t?t.boxInWindow():null}renderColor(t,o,e){if("string"==typeof t){if(this.color=Common.Color.parse(t),this.text=t,!this.color)return void this.renderTextOnly()}else this.color=t;this.format="boolean"==typeof o&&o?Common.Settings.detectColorFormat(this.color):"string"==typeof o?Common.Color.getFormat(o):this.color.format(),this.text=this.color.getAuthoredText()??this.color.asString(this.format??void 0),e&&(this.tooltip=e),this.render()}renderTextOnly(){LitHtml.render(this.text,this.shadow,{host:this})}render(){LitHtml.render(LitHtml.html`<span class="color-swatch" title=${this.tooltip}><span class="color-swatch-inner"
        style="background-color: ${this.text};"
        @click=${this.onClick}
        @mousedown=${this.consume}
        @dblclick=${this.consume}></span></span><slot><span>${this.text}</span></slot>`,this.shadow,{host:this})}onClick(t){if(t.shiftKey)return t.stopPropagation(),void this.showFormatPicker(t);this.dispatchEvent(new ClickEvent)}consume(t){t.stopPropagation()}setFormat(t){const o=this.color?.as(t),e=o?.asString();o&&e&&(this.color=o,this.format=this.color.format(),this.text=e,this.render(),this.dispatchEvent(new ColorChangedEvent(this.text)))}showFormatPicker(t){if(!this.color||!this.format)return;new ColorPicker.FormatPickerContextMenu.FormatPickerContextMenu(this.color,this.format).show(t,(t=>{this.setFormat(t),Host.userMetrics.colorConvertedFrom(0)}))}}ComponentHelpers.CustomElements.defineComponent("devtools-color-swatch",ColorSwatch);