import*as Common from"../../../core/common/common.js";import*as i18n from"../../../core/i18n/i18n.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as Input from"../../../ui/components/input/input.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import CSSPropertyDocsViewStyles from"./cssPropertyDocsView.css.js";const UIStrings={learnMore:"Learn more",dontShow:"Don't show"},str_=i18n.i18n.registerUIStrings("panels/elements/components/CSSPropertyDocsView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml;export class CSSPropertyDocsView extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-property-docs-view`;#t=this.attachShadow({mode:"open"});#e;constructor(t){super(),this.#e=t,this.#t.adoptedStyleSheets=[Input.checkboxStyles,CSSPropertyDocsViewStyles],this.#o()}#s(t){const e=!t.target.checked;Common.Settings.Settings.instance().moduleSetting("showCSSPropertyDocumentationOnHover").set(e)}#o(){const t=this.#e.description,e=this.#e.references?.[0].url;render(html`
      <div class="docs-popup-wrapper">
        ${t?html`
          <div id="description">
            ${t}
          </div>
        `:LitHtml.nothing}
        ${e?html`
          <div class="docs-popup-section footer">
            <x-link
              id="learn-more"
              href=${e}
              class="clickable underlined unbreakable-text"
            >
              ${i18nString(UIStrings.learnMore)}
            </x-link>
            <label class="dont-show">
              <input type="checkbox" @change=${this.#s} />
              ${i18nString(UIStrings.dontShow)}
            </label>
          </div>
        `:LitHtml.nothing}
      </div>
    `,this.#t,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-css-property-docs-view",CSSPropertyDocsView);