import*as Platform from"../../../../core/platform/platform.js";import*as ComponentHelpers from"../../../components/helpers/helpers.js";import*as LitHtml from"../../../lit-html/lit-html.js";import colorMixSwatchStyles from"./colorMixSwatch.css.js";export class ColorMixSwatch extends HTMLElement{static litTagName=LitHtml.literal`devtools-color-mix-swatch`;shadow=this.attachShadow({mode:"open"});colorMixText="";firstColorText="";secondColorText="";constructor(){super(),this.shadow.adoptedStyleSheets=[colorMixSwatchStyles]}setFirstColor(t){this.firstColorText&&(this.colorMixText=this.colorMixText.replace(this.firstColorText,t)),this.firstColorText=t,this.#t()}setSecondColor(t){this.secondColorText&&(this.colorMixText=Platform.StringUtilities.replaceLast(this.colorMixText,this.secondColorText,t)),this.secondColorText=t,this.#t()}setColorMixText(t){this.colorMixText=t,this.#t()}#t(){this.colorMixText&&this.firstColorText&&this.secondColorText?LitHtml.render(LitHtml.html`<div class="swatch-icon">
        <span class="swatch swatch-left" id="swatch-1" style="--color: ${this.firstColorText}"></span>
        <span class="swatch swatch-right" id="swatch-2" style="--color: ${this.secondColorText}"></span>
        <span class="swatch swatch-mix" id="mix-result" style="--color: ${this.colorMixText}"></span>
      </div><slot>${this.colorMixText}</slot>`,this.shadow,{host:this}):LitHtml.render(this.colorMixText,this.shadow,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-color-mix-swatch",ColorMixSwatch);