import*as Buttons from"../../../ui/components/buttons/buttons.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Dialogs from"../../../ui/components/dialogs/dialogs.js";import*as Menus from"../../../ui/components/menus/menus.js";import*as Models from"../models/models.js";import selectButtonStyles from"./selectButton.css.js";export class SelectButtonClickEvent extends Event{value;static eventName="selectbuttonclick";constructor(e){super(SelectButtonClickEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}export class SelectButton extends HTMLElement{static litTagName=LitHtml.literal`devtools-select-button`;#e=this.attachShadow({mode:"open"});#t={disabled:!1,value:"",items:[],groups:[],variant:"primary"};connectedCallback(){this.#e.adoptedStyleSheets=[selectButtonStyles],ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}get disabled(){return this.#t.disabled}set disabled(e){this.#t.disabled=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}get items(){return this.#t.items}set items(e){this.#t.items=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}set groups(e){this.#t.groups=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}get value(){return this.#t.value}set value(e){this.#t.value=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}get variant(){return this.#t.variant}set variant(e){this.#t.variant=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}set action(e){this.#t.action=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}#n(e){e.stopPropagation(),this.dispatchEvent(new SelectButtonClickEvent(this.#t.value))}#o(e){this.dispatchEvent(new SelectButtonClickEvent(e.itemValue)),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#s)}#l(e,t){return LitHtml.html`
      <${Menus.Menu.MenuItem.litTagName} .value=${e.value} .selected=${e.value===t.value}>
        ${e.label()}
      </${Menus.Menu.MenuItem.litTagName}>
    `}#i(e,t){return LitHtml.html`
      <${Menus.Menu.MenuGroup.litTagName} .name=${e.name}>
        ${e.items.map((e=>this.#l(e,t)))}
      </${Menus.Menu.MenuGroup.litTagName}>
    `}#r(e){return this.#t.action?Models.Tooltip.getTooltipForActions(e,this.#t.action):""}#s=()=>{const e=Boolean(this.#t.groups.length),t=e?this.#t.groups.flatMap((e=>e.items)):this.#t.items,s=t.find((e=>e.value===this.#t.value))||t[0];if(!s)return;const n={primary:"primary"===this.#t.variant,secondary:"secondary"===this.#t.variant},o="secondary"===this.#t.variant?"secondary":"primary",l=s.buttonLabel?s.buttonLabel():s.label();LitHtml.render(LitHtml.html`
      <div class="select-button" title=${this.#r(l)||LitHtml.nothing}>
        ${s?LitHtml.html`
        <${Buttons.Button.Button.litTagName}
            .disabled=${this.#t.disabled}
            .variant=${o}
            .iconName=${s.buttonIconName}
            @click=${this.#n}>
            ${l}
        </${Buttons.Button.Button.litTagName}>`:""}
        <${Menus.SelectMenu.SelectMenu.litTagName}
          class=${LitHtml.Directives.classMap(n)}
          @selectmenuselected=${this.#o}
          ?disabled=${this.#t.disabled}
          .showArrow=${!0}
          .sideButton=${!1}
          .showSelectedItem=${!0}
          .disabled=${this.#t.disabled}
          .buttonTitle=${LitHtml.html``}
          .position=${"bottom"}
          .horizontalAlignment=${"right"}
        >
          ${e?this.#t.groups.map((e=>this.#i(e,s))):this.#t.items.map((e=>this.#l(e,s)))}
        </${Menus.SelectMenu.SelectMenu.litTagName}>
      </div>`,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-select-button",SelectButton);