import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as i18n from"../../../core/i18n/i18n.js";import cssHintDetailsViewStyles from"./cssHintDetailsView.css.js";const UIStrings={learnMore:"Learn More"},str_=i18n.i18n.registerUIStrings("panels/elements/components/CSSHintDetailsView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html,Directives:Directives}=LitHtml;export class CSSHintDetailsView extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-hint-details-view`;#e=this.attachShadow({mode:"open"});#t;constructor(e){super(),this.#t=e,this.#e.adoptedStyleSheets=[cssHintDetailsViewStyles],this.#i()}#i(){const e=this.#t.getLearnMoreLink();render(html`
        <div class="hint-popup-wrapper">
          <div class="hint-popup-reason">
            ${Directives.unsafeHTML(this.#t.getMessage())}
          </div>
          ${this.#t.getPossibleFixMessage()?html`
              <div class="hint-popup-possible-fix">
                  ${Directives.unsafeHTML(this.#t.getPossibleFixMessage())}
                  ${e?html`
                      <x-link id="learn-more" href=${e} class="clickable underlined unbreakable-text"}>
                          ${i18nString(UIStrings.learnMore)}
                      </x-link>
                  `:""}
              </div>
          `:""}
        </div>
      `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-css-hint-details-view",CSSHintDetailsView);