import*as i18n from"../i18n/i18n.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";const UIStrings={settingsTitle:"Show adorners",closeButton:"Close"},str_=i18n.i18n.registerUIStrings("elements/AdornerSettingsPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml;export class AdornerSettingUpdatedEvent extends Event{constructor(t,e,s){super("adorner-setting-updated",{}),this.data={adornerName:t,isEnabledNow:e,newSettings:s}}}export class AdornerSettingsPane extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.settings=new Map}set data(t){this.settings=new Map(t.settings.entries()),this.render()}show(){this.classList.remove("hidden");const t=this.shadow.querySelector(".adorner-settings-pane");t&&t.focus()}hide(){this.classList.add("hidden")}onChange(t){const e=t.target,s=e.dataset.adorner;if(void 0===s)return;const n=e.checked;this.settings.set(s,n),this.dispatchEvent(new AdornerSettingUpdatedEvent(s,n,this.settings)),this.render()}render(){const t=[];for(const[e,s]of this.settings)t.push(html`
        <label class="setting" title=${e}>
          <input
            class="adorner-status"
            type="checkbox" name=${e}
            .checked=${s}
            data-adorner=${e}>
          <span class="adorner-name">${e}</span>
        </label>
      `);render(html`
      <style>
        .adorner-settings-pane {
          display: flex;
          height: 2.67em;
          padding: 0 12px;
          color: var(--color-text-primary);
          font-size: 12px;
          align-items: center;
        }

        .settings-title {
          font-weight: 500;
        }

        .setting {
          margin-left: 1em;
        }

        .adorner-status {
          margin: auto 0.4em auto 0;
        }

        .adorner-status,
        .adorner-name {
          vertical-align: middle;
        }

        .close {
          position: relative;
          margin-left: auto;
          font-size: 1em;
          width: 1.5em;
          height: 1.5em;
          border: none;
          border-radius: 1em;
          background-color: var(--color-background-elevation-1);
          cursor: pointer;
        }

        .close::before,
        .close::after {
          content: '';
          display: inline-block;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 1em;
          height: 0.2em;
          background-color: var(--color-text-secondary);
          border-radius: 2px;
        }

        .close::before {
          transform: rotate(45deg);
        }

        .close::after {
          transform: rotate(-45deg);
        }
      </style>

      <div class="adorner-settings-pane" tabindex="-1">
        <div class="settings-title">${i18nString(UIStrings.settingsTitle)}</div>
        <div class="setting-list" @change=${this.onChange}>
          ${t}
        </div>
        <button class="close" @click=${this.hide} aria-label=${i18nString(UIStrings.closeButton)}></button>
      </div>
    `,this.shadow,{eventContext:this})}}customElements.get("devtools-adorner-settings-pane")||customElements.define("devtools-adorner-settings-pane",AdornerSettingsPane);