import*as Common from"../common/common.js";import*as ComponentHelpers from"../component_helpers/component_helpers.js";import*as i18n from"../i18n/i18n.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";const UIStrings={shiftclickToChangeColorFormat:"Shift-click to change color format"},str_=i18n.i18n.registerUIStrings("inline_editor/ColorSwatch.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),getStyleSheets=ComponentHelpers.GetStylesheet.getStyleSheets;export class FormatChangedEvent extends Event{constructor(t,o){super("format-changed",{}),this.data={format:t,text:o}}}export class ColorSwatch extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.tooltip=i18nString(UIStrings.shiftclickToChangeColorFormat),this.text=null,this.color=null,this.format=null,this.shadow.adoptedStyleSheets=[...getStyleSheets("inline_editor/colorSwatch.css",{enableLegacyPatching:!1})]}static isColorSwatch(t){return"devtools-color-swatch"===t.localName}getColor(){return this.color}getFormat(){return this.format}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.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?o:this.color.format(),this.text=this.color.asString(this.format),e&&(this.tooltip=e),this.render()}renderTextOnly(){LitHtml.render(this.text,this.shadow,{eventContext: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,{eventContext:this})}onClick(t){t.stopPropagation(),t.shiftKey?this.toggleNextFormat():this.dispatchEvent(new Event("swatch-click"))}consume(t){t.stopPropagation()}toggleNextFormat(){if(!this.color||!this.format)return;let t;do{this.format=nextColorFormat(this.color,this.format),t=this.color.asString(this.format)}while(t===this.text);t&&(this.text=t,this.render(),this.dispatchEvent(new FormatChangedEvent(this.format,this.text)))}}function nextColorFormat(t,o){const e=Common.Color.Format;switch(o){case e.Original:return t.hasAlpha()?e.RGBA:e.RGB;case e.RGB:case e.RGBA:return t.hasAlpha()?e.HSLA:e.HSL;case e.HSL:case e.HSLA:return t.nickname()?e.Nickname:t.detectHEXFormat();case e.ShortHEX:return e.HEX;case e.ShortHEXA:return e.HEXA;case e.HEXA:case e.HEX:return e.Original;case e.Nickname:return t.detectHEXFormat();default:return e.RGBA}}customElements.get("devtools-color-swatch")||customElements.define("devtools-color-swatch",ColorSwatch);