import*as i18n from"../../../core/i18n/i18n.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import cssVariableValueViewStyles from"./cssVariableValueView.css.js";const UIStrings={registeredPropertyTitle:"Registered property",invalidPropertyValue:"Invalid property value, expected type {type}",goToDefinition:"Go to definition"},str_=i18n.i18n.registerUIStrings("panels/elements/components/CSSVariableValueView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),i18nTemplate=LitHtml.i18nTemplate.bind(void 0,str_),{render:render,html:html}=LitHtml;function getLinkSection(e){return html`<div class="registered-property-links">
            <span role="button" @click=${e?.goToDefinition} class="clickable underlined unbreakable-text"}>
              ${i18nString(UIStrings.goToDefinition)}
            </span>
          </div>`}export class CSSVariableParserError extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-variable-parser-error`;#e=this.attachShadow({mode:"open"});constructor(e){super(),this.#e.adoptedStyleSheets=[cssVariableValueViewStyles],this.#t(e)}#t(e){const t=html`<span class="monospace css-property">${e.registration.syntax()}</span>`;render(html`
      <div class="variable-value-popup-wrapper">
        ${i18nTemplate(UIStrings.invalidPropertyValue,{type:t})}
        ${getLinkSection(e)}
      </div>`,this.#e,{host:this})}}export class CSSVariableValueView extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-variable-value-view`;#e=this.attachShadow({mode:"open"});value;details;constructor(e,t){super(),this.#e.adoptedStyleSheets=[cssVariableValueViewStyles],this.value=e,this.details=t,this.#t()}#t(){const e=this.details?.registration.initialValue(),t=this.details?html`<div class="registered-property-popup-wrapper">
         <span class="title">${i18nString(UIStrings.registeredPropertyTitle)}</span>
          <div class="monospace">
            <div><span class="css-property">syntax:</span> ${this.details.registration.syntax()}</div>
            <div><span class="css-property">inherits:</span> ${this.details.registration.inherits()}</div>
            ${e?html`<div><span class="css-property">initial-value:</span> ${e}</div>`:""}
          </div>
          ${getLinkSection(this.details)}
        </div>`:"";render(html`<div class="variable-value-popup-wrapper">${this.value}${t}</div>`,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-css-variable-value-view",CSSVariableValueView),ComponentHelpers.CustomElements.defineComponent("devtools-css-variable-parser-error",CSSVariableParserError);