import*as i18n from"../i18n/i18n.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";const UIStrings={sIsNotDefined:"{PH1} is not defined"},str_=i18n.i18n.registerUIStrings("inline_editor/CSSVarSwatch.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html,Directives:Directives}=LitHtml,VARIABLE_FUNCTION_REGEX=/(var\()(\s*--[^,)]+)(.*)/;export class CSSVarSwatch extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.text="",this.computedValue=null,this.fromFallback=!1,this.onLinkClick=()=>{}}set data(t){this.text=t.text,this.computedValue=t.computedValue,this.fromFallback=t.fromFallback,this.onLinkClick=t.onLinkClick,this.render()}parseVariableFunctionParts(){const t=this.text.replace(/\s{2,}/g," ").match(VARIABLE_FUNCTION_REGEX);return t?{pre:t[1],name:t[2],post:t[3]}:null}get variableName(){const t=this.text.match(/--[^,)]+/);return t?t[0]:""}renderLink(t){const e=this.computedValue&&!this.fromFallback,i=Directives.classMap({"css-var-link":!0,undefined:!e}),s=e?this.computedValue:i18nString(UIStrings.sIsNotDefined,{PH1:t}),n=e?this.onLinkClick.bind(this,this.variableName.trim()):null;return html`<span class="${i}" title="${s}" @mousedown=${n} role="link" tabindex="-1">${t}</span>`}render(){const t=this.parseVariableFunctionParts();if(!t)return void render("",this.shadow,{eventContext:this});const e=this.renderLink(t.name);render(html`<style>
      .css-var-link:not(.undefined) {
        cursor: pointer;
        text-underline-offset: 2px;
        color: var(--link-color);
      }

      .css-var-link:hover:not(.undefined) {
        text-decoration: underline;
      }

      .css-var-link:focus:not(:focus-visible) {
        outline: none;
      }

      .css-var-link.undefined {
        /* stylelint-disable-next-line plugin/use_theme_colors */
        color: hsl(0deg 0% 46%);
      }
      </style><span title="${this.computedValue||""}">${t.pre}${e}${t.post}</span>`,this.shadow,{eventContext:this})}}customElements.get("devtools-css-var-swatch")||customElements.define("devtools-css-var-swatch",CSSVarSwatch);