var j=Object.defineProperty;var E=(n,e)=>{for(var t in e)j(n,t,{get:e[t],enumerable:!0})};var z={};E(z,{Menu:()=>p,MenuCloseRequest:()=>g,MenuGroup:()=>r,MenuItem:()=>i,MenuItemSelectedEvent:()=>m});import*as H from"./../../../core/platform/platform.js";import*as l from"./../helpers/helpers.js";import*as R from"./../render_coordinator/render_coordinator.js";import*as h from"./../../lit/lit.js";import*as L from"./../../visual_logging/visual_logging.js";import"./../dialogs/dialogs.js";var $=`:host{border-radius:3px;width:fit-content;display:flex;align-items:center;background-color:var(--override-menu-background-color,var(--sys-color-cdt-base-container))}:host([has-open-dialog]){background-color:var(--override-menu-active-background-color,var(--sys-color-neutral-container))}#container{list-style-type:none;margin-top:var(--sys-size-4);padding:0;width:fit-content;display:block}#container:focus{outline:none}@keyframes slideIn{from{transform:var(--translate-dialog);opacity:0%}to{transform:none;opacity:100%}}
/*# sourceURL=${import.meta.resolve("./menu.css")} */`;var A=`.menu-group-label{font-size:12px;line-height:16px;position:relative;color:var(--sys-color-token-subtle);display:block}
/*# sourceURL=${import.meta.resolve("./menuGroup.css")} */`;var D=`.menu-item{padding:var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9);font-size:12px;line-height:16px;position:relative;display:block;color:var(--sys-color-on-surface)}.menu-item:focus{outline:none}:host(.no-checkmark) .menu-item{padding-left:0}:host(:not(:first-child)) .menu-item{border-top:var(--override-divider-line)}:host-context(devtools-menu-group) .menu-item{padding:var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9)}.is-selected-item::before{content:"";position:absolute;left:var(--sys-size-2);top:50%;transform:translateY(-50%);display:inline-block;mask-repeat:no-repeat;mask-position:center;width:calc(var(--menu-checkmark-width) - 10px);height:var(--menu-checkmark-height);mask-image:var(--selected-item-check);background:var(--sys-color-token-subtle)}.is-disabled-item{opacity:60%}:host(:hover:not(.prevents-close)) .menu-item::after,
:host(:focus-visible:not(.prevents-close)) .menu-item::after{content:"";height:100%;width:calc(100% + 2* var(--sys-size-8));border-radius:inherit;position:absolute;top:0;left:calc(-1 * var(--sys-size-8));background-color:var(--sys-color-state-hover-on-subtle)}:host(:focus){outline:none}
/*# sourceURL=${import.meta.resolve("./menuItem.css")} */`;var{html:k,Directives:{ref:N}}=h,B=new URL("../../../Images/checkmark.svg",import.meta.url).toString(),p=class extends HTMLElement{#o=this.attachShadow({mode:"open"});#s=null;#t=!1;#e={origin:null,open:!1,position:"auto",showDivider:!1,showSelectedItem:!0,horizontalAlignment:"auto",getConnectorCustomXPosition:null};get origin(){return this.#e.origin}set origin(e){this.#e.origin=e,l.ScheduledRender.scheduleRender(this,this.#l)}get open(){return this.#e.open}set open(e){e!==this.open&&(this.#e.open=e,this.toggleAttribute("has-open-dialog",this.open),this.#a().setDialogVisible(this.open),l.ScheduledRender.scheduleRender(this,this.#l))}get position(){return this.#e.position}set position(e){this.#e.position=e,l.ScheduledRender.scheduleRender(this,this.#l)}get showDivider(){return this.#e.showDivider}set showDivider(e){this.#e.showDivider=e,l.ScheduledRender.scheduleRender(this,this.#l)}get showSelectedItem(){return this.#e.showSelectedItem}set showSelectedItem(e){this.#e.showSelectedItem=e,l.ScheduledRender.scheduleRender(this,this.#l)}get horizontalAlignment(){return this.#e.horizontalAlignment}set horizontalAlignment(e){this.#e.horizontalAlignment=e,l.ScheduledRender.scheduleRender(this,this.#l)}get getConnectorCustomXPosition(){return this.#e.getConnectorCustomXPosition}set getConnectorCustomXPosition(e){this.#e.getConnectorCustomXPosition=e,l.ScheduledRender.scheduleRender(this,this.#l)}connectedCallback(){R.write(()=>{this.style.setProperty("--selected-item-check",`url(${B})`),this.style.setProperty("--menu-checkmark-width",this.#e.showSelectedItem?"26px":"0px"),this.style.setProperty("--menu-checkmark-height",this.#e.showSelectedItem?"12px":"0px");let e=this.showDivider?"1px var(--divider-line) solid":"none";this.style.setProperty("--override-divider-line",e)})}#a(){if(!this.#s)throw new Error("Dialog not found");return this.#s}async#r(){await R.write(()=>{this.setAttribute("has-open-dialog","has-open-dialog");let e=this.#o.querySelector("#container");e instanceof HTMLElement&&e.focus()})}#n(){this.#d().focus()}#d(){let s=(this.#o.querySelector("slot")?.assignedElements())[0];if(s instanceof HTMLSlotElement&&(s=s?.assignedElements()[0]),s instanceof r&&(s=s.shadowRoot?.querySelector("slot")?.assignedElements()[0]),s instanceof HTMLElement)return s;throw new Error("First item not found")}#u(e){let t=e.composedPath();if(e.stopPropagation(),t.find(a=>a instanceof HTMLInputElement))return;let s=e.composedPath().find(a=>a instanceof i);s instanceof i&&(s.disabled||this.#h(s))}#p(e){let t=e.key;e.stopImmediatePropagation();let s=e.target,a=e.composedPath(),C=t==="ArrowDown"||t==="ArrowRight";if(!this.#t&&C){this.#n(),this.#t=!0;return}if(!this.#t&&t==="ArrowUp"){this.#m(),this.#t=!0;return}!(s instanceof i)&&(s=a.find(x=>x instanceof i),!(s instanceof i))||(H.KeyboardUtilities.keyIsArrowKey(t)?this.#i(t,s):t==="Home"?this.#w(s):t==="End"?this.#m():t==="Enter"||e.code==="Space"?this.#h(s):t==="Escape"&&(e.preventDefault(),this.#c()))}#h(e){e.value!==""&&(this.dispatchEvent(new m(e.value)),!e.preventMenuCloseOnSelection&&this.#c())}#i(e,t){let s=t;e==="ArrowDown"?(s=t.nextElementSibling,s===null&&t.parentElement instanceof r&&(s=this.#g(t))):e==="ArrowUp"&&(s=t.previousElementSibling,s===null&&t.parentElement instanceof r&&(s=this.#f(t))),s instanceof i&&s.focus()}#g(e){let t=e.parentElement;if(!(t instanceof r))return null;let s=t.nextElementSibling;if(s instanceof i)return s;if(!(s instanceof r))return null;for(let a of s.children)if(a instanceof i)return a;return null}#f(e){let t=e.parentElement;if(!(t instanceof r))return null;let s=t.previousElementSibling;return s instanceof i?s:s instanceof r&&s.lastElementChild instanceof i?s.lastElementChild:null}#w(e){let t=e;for(e.parentElement instanceof r&&(t=e.parentElement);t?.previousElementSibling;)t=t?.previousElementSibling;if(t instanceof i){t.focus();return}for(let s of t.children)if(s instanceof i){s.focus();return}}#m(){let e=this.#d(),t=e;for(e.parentElement instanceof r&&(t=e.parentElement);t?.nextElementSibling;)t=t?.nextElementSibling;if(t instanceof i){t.focus();return}t instanceof r&&t.lastElementChild instanceof i&&t.lastElementChild.focus()}#c(e){e&&e.stopImmediatePropagation(),this.dispatchEvent(new g),this.#a().setDialogVisible(!1),this.#t=!1}async#l(){if(!l.ScheduledRender.isScheduledRender(this))throw new Error("Menu render was not scheduled");h.render(k`
      <style>${$}</style>
      <devtools-dialog
        @clickoutsidedialog=${this.#c}
        @forceddialogclose=${this.#c}
        .position=${this.position}
        .origin=${this.origin}
        .dialogShownCallback=${this.#r.bind(this)}
        .horizontalAlignment=${this.horizontalAlignment}
        .getConnectorCustomXPosition=${this.getConnectorCustomXPosition}
        ${N(e=>{e instanceof HTMLElement&&(this.#s=e)})}
        >
        <span id="container" role="menu" tabIndex="0" @keydown=${this.#p} jslog=${L.menu().track({resize:!0,keydown:"Escape"})}>
          <slot @click=${this.#u}>
          </slot>
        </span>
      </devtools-dialog>
    `,this.#o,{host:this})}},i=class extends HTMLElement{#o=this.attachShadow({mode:"open"});connectedCallback(){this.tabIndex=0,this.setAttribute("role","menuitem"),this.setAttribute("aria-selected",String(this.#s.selected))}#s={value:"",preventMenuCloseOnSelection:!1,selected:!1,disabled:!1};get preventMenuCloseOnSelection(){return this.#s.preventMenuCloseOnSelection}set preventMenuCloseOnSelection(e){this.#s.preventMenuCloseOnSelection=e,l.ScheduledRender.scheduleRender(this,this.#t)}get value(){return this.#s.value}set value(e){this.#s.value=e,l.ScheduledRender.scheduleRender(this,this.#t)}get selected(){return this.#s.selected}set selected(e){this.#s.selected=e,this.setAttribute("aria-selected",String(e)),l.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#s.disabled}set disabled(e){this.#s.disabled=e,l.ScheduledRender.scheduleRender(this,this.#t)}async#t(){if(!l.ScheduledRender.isScheduledRender(this))throw new Error("MenuItem render was not scheduled");h.render(k`
      <style>${D}</style>
      <span class=${h.Directives.classMap({"menu-item":!0,"is-selected-item":this.selected,"is-disabled-item":this.disabled,"prevents-close":this.preventMenuCloseOnSelection})}
      >
        <slot></slot>
      </span>
    `,this.#o,{host:this})}},r=class extends HTMLElement{#o=this.attachShadow({mode:"open"});#s={name:null};get name(){return this.#s.name}set name(e){this.#s.name=e,l.ScheduledRender.scheduleRender(this,this.#t)}async#t(){if(!l.ScheduledRender.isScheduledRender(this))throw new Error("MenuGroup render was not scheduled");h.render(k`
      <style>${A}</style>
      <span class="menu-group">
        <span class="menu-group-label">${this.name}</span>
        <slot></slot>
      </span>
    `,this.#o,{host:this})}};customElements.define("devtools-menu",p);customElements.define("devtools-menu-item",i);customElements.define("devtools-menu-group",r);var m=class n extends Event{itemValue;static eventName="menuitemselected";constructor(e){super(n.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}},g=class n extends Event{static eventName="menucloserequest";constructor(){super(n.eventName,{bubbles:!0,composed:!0})}};var T={};E(T,{SelectMenu:()=>w,SelectMenuButton:()=>v,SelectMenuButtonTriggerEvent:()=>u,SelectMenuGroup:()=>r,SelectMenuItemSelectedEvent:()=>b,SelectMenuSideButtonClickEvent:()=>y});import*as S from"./../../../core/platform/platform.js";import*as o from"./../helpers/helpers.js";import*as f from"./../render_coordinator/render_coordinator.js";import*as d from"./../../lit/lit.js";import*as M from"./../../visual_logging/visual_logging.js";import"./../dialogs/dialogs.js";var I=`:host{border:1px solid var(--sys-color-neutral-outline);border-radius:var(--sys-shape-corner-extra-small);width:fit-content;display:flex;align-items:center;background-color:var(--sys-color-cdt-base-container)}:host([has-open-dialog]){outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);background:linear-gradient(var(--sys-color-state-hover-on-subtle),var(--sys-color-state-hover-on-subtle)),linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle),var(--sys-color-state-ripple-neutral-on-subtle))}button{background:none}#side-button{border:1px solid var(--sys-color-neutral-outline);border-radius:3px 0 0 3px;border-right:none;height:100%;position:relative;padding:var(--override-select-button-padding)}button:disabled{pointer-events:none}@keyframes slideIn{from{transform:var(--translate-dialog);opacity:0%}to{transform:none;opacity:100%}}
/*# sourceURL=${import.meta.resolve("./selectMenu.css")} */`;var P=`:host{height:var(--sys-size-9);width:100%;display:block}.show{display:block;font-size:12px;color:var(--sys-color-on-surface);height:100%;width:100%;border:none;border-radius:var(--sys-shape-corner-extra-small);padding:0 var(--sys-size-4) 0 var(--sys-size-5);&:hover{background-color:var(--sys-color-state-hover-on-subtle)}&:active{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:hover:active{background:linear-gradient(var(--sys-color-state-hover-on-subtle),var(--sys-color-state-hover-on-subtle)),linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle),var(--sys-color-state-ripple-neutral-on-subtle))}&:focus-visible{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);outline-offset:-1px}}#button-label-wrapper{display:flex;justify-content:space-between;align-items:center}#label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:fit-content;height:100%}#label[witharrow].single-arrow{padding:0}#label[witharrow]{padding:0 10px 0 0;text-align:left}.single-arrow + span#arrow{margin:0}#arrow{mask-image:var(--deploy-menu-arrow);-webkit-mask-position-y:center;margin-left:5px;width:14px;flex-shrink:0;height:14px;display:inline-block;mask-repeat:no-repeat;background-color:var(--sys-color-on-surface-subtle)}.single-arrow{border-radius:0 3px 3px 0;border:var(--sys-size-1) solid var(--sys-color-neutral-outline);height:100%;aspect-ratio:1/1;padding:0;display:flex;justify-content:center;align-items:center}button{background:none}button[disabled]{color:var(--sys-color-state-disabled);background-color:var(--sys-color-state-disabled-container);#arrow{background-color:var(--sys-color-state-disabled)}}
/*# sourceURL=${import.meta.resolve("./selectMenuButton.css")} */`;var{html:c}=d,U=new URL("../../../Images/triangle-down.svg",import.meta.url).toString(),w=class extends HTMLElement{#o=this.attachShadow({mode:"open"});#s=null;#t=!1;#e={buttonTitle:"",position:"bottom",horizontalAlignment:"auto",showArrow:!1,sideButton:!1,showDivider:!1,disabled:!1,showSelectedItem:!0,jslogContext:""};get buttonTitle(){return this.#e.buttonTitle}set buttonTitle(e){this.#e.buttonTitle=e,o.ScheduledRender.scheduleRender(this,this.#i)}get position(){return this.#e.position}set position(e){this.#e.position=e,o.ScheduledRender.scheduleRender(this,this.#i)}get horizontalAlignment(){return this.#e.horizontalAlignment}set horizontalAlignment(e){this.#e.horizontalAlignment=e,o.ScheduledRender.scheduleRender(this,this.#i)}get showArrow(){return this.#e.showArrow}set showArrow(e){this.#e.showArrow=e,o.ScheduledRender.scheduleRender(this,this.#i)}get sideButton(){return this.#e.sideButton}set sideButton(e){this.#e.sideButton=e,o.ScheduledRender.scheduleRender(this,this.#i)}get disabled(){return this.#e.disabled}set disabled(e){this.#e.disabled=e,o.ScheduledRender.scheduleRender(this,this.#i)}get showDivider(){return this.#e.showDivider}set showDivider(e){this.#e.showDivider=e,o.ScheduledRender.scheduleRender(this,this.#i)}get showSelectedItem(){return this.#e.showSelectedItem}set showSelectedItem(e){this.#e.showSelectedItem=e,o.ScheduledRender.scheduleRender(this,this.#i)}get jslogContext(){return this.#e.jslogContext}set jslogContext(e){this.#e.jslogContext=e,o.ScheduledRender.scheduleRender(this,this.#i)}#a(){if(!this.#s&&(this.#s=this.#o.querySelector("devtools-select-menu-button"),!this.#s))throw new Error("Arrow not found");return this.#s}#r(){this.#t=!0,this.setAttribute("has-open-dialog","has-open-dialog"),o.ScheduledRender.scheduleRender(this,this.#i)}click(){this.#a().click()}#n(){this.dispatchEvent(new y)}#d(){return this.buttonTitle instanceof Function?this.buttonTitle():this.buttonTitle}#u(){let e=this.#d();return this.sideButton?c`
      <button id="side-button" @click=${this.#n} ?disabled=${this.disabled}>
        ${e}
      </button>
      <devtools-select-menu-button
        @click=${this.#r}
        @selectmenubuttontrigger=${this.#r}
        .singleArrow=${!0}
        .open=${this.#t}
        .showArrow=${!0}
        .arrowDirection=${this.position}
        .disabled=${this.disabled}>
      </devtools-select-menu-button>
    `:c`
          <devtools-select-menu-button
            @selectmenubuttontrigger=${this.#r}
            .open=${this.#t} .showArrow=${this.showArrow}
            .arrowDirection=${this.position}
            .disabled=${this.disabled}
            .jslogContext=${this.jslogContext}>
              ${e}
            </devtools-select-menu-button>
        `}#p(e){e&&e.stopImmediatePropagation(),f.write(()=>{this.removeAttribute("has-open-dialog")}),this.#t=!1,o.ScheduledRender.scheduleRender(this,this.#i)}#h(e){this.dispatchEvent(new b(e.itemValue))}async#i(){if(!o.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenu render was not scheduled");d.render(c`
        <style>${I}</style>
        <devtools-menu
            @menucloserequest=${this.#p}
            @menuitemselected=${this.#h}
            .position=${this.position}
            .origin=${this}
            .showDivider=${this.showDivider}
            .showSelectedItem=${this.showSelectedItem}
            .open=${this.#t}
            .getConnectorCustomXPosition=${null}>
          <slot></slot>
        </devtools-menu>
        ${this.#u()}`,this.#o,{host:this})}},v=class extends HTMLElement{#o=this.attachShadow({mode:"open"});#s=null;connectedCallback(){this.style.setProperty("--deploy-menu-arrow",`url(${U})`),f.write(()=>{switch(this.arrowDirection){case"auto":case"top":{this.style.setProperty("--arrow-angle","180deg");break}case"bottom":{this.style.setProperty("--arrow-angle","0deg");break}default:S.assertNever(this.arrowDirection,`Unknown position type: ${this.arrowDirection}`)}})}#t={showArrow:!1,arrowDirection:"bottom",disabled:!1,singleArrow:!1,jslogContext:""};get showArrow(){return this.#t.showArrow}set showArrow(e){this.#t.showArrow=e,o.ScheduledRender.scheduleRender(this,this.#n)}get arrowDirection(){return this.#t.arrowDirection}set arrowDirection(e){this.#t.arrowDirection=e,o.ScheduledRender.scheduleRender(this,this.#n)}get disabled(){return this.#t.disabled}set disabled(e){this.#t.disabled=e,o.ScheduledRender.scheduleRender(this,this.#n)}set open(e){f.write(()=>{this.#e()?.setAttribute("aria-expanded",String(e))})}set singleArrow(e){this.#t.singleArrow=e,o.ScheduledRender.scheduleRender(this,this.#n)}get jslogContext(){return this.#t.jslogContext}set jslogContext(e){this.#t.jslogContext=e,o.ScheduledRender.scheduleRender(this,this.#n)}click(){this.#e()?.click()}#e(){return this.#s||(this.#s=this.#o.querySelector("button")),this.#s}#a(e){let t=e.key,s=this.arrowDirection==="bottom"&&t==="ArrowDown",a=this.arrowDirection==="top"&&t==="ArrowUp",C=t===S.KeyboardUtilities.ENTER_KEY,x=e.code==="Space";(s||a||C||x)&&(this.dispatchEvent(new u),e.preventDefault())}#r(){this.dispatchEvent(new u)}async#n(){if(!o.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenuItem render was not scheduled");let e=this.#t.showArrow?c`<span id="arrow"></span>`:d.nothing,t={"single-arrow":this.#t.singleArrow},s=c`
      <span id="button-label-wrapper">
        <span id="label" ?witharrow=${this.showArrow} class=${d.Directives.classMap(t)}>
          <slot></slot>
        </span>
        ${e}
      </span>`;d.render(c`
        <style>${P}</style>
        <button
            aria-haspopup="true" aria-expanded="false" class="show"
            @keydown=${this.#a} @click=${this.#r}
            ?disabled=${this.disabled}
            jslog=${M.dropDown(this.jslogContext)}>
          ${s}
        </button>`,this.#o,{host:this})}};customElements.define("devtools-select-menu",w);customElements.define("devtools-select-menu-button",v);var b=class n extends Event{itemValue;static eventName="selectmenuselected";constructor(e){super(n.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}},y=class n extends Event{static eventName="selectmenusidebuttonclick";constructor(){super(n.eventName,{bubbles:!0,composed:!0})}},u=class n extends Event{static eventName="selectmenubuttontrigger";constructor(){super(n.eventName,{bubbles:!0,composed:!0})}};export{z as Menu,T as SelectMenu};
//# sourceMappingURL=menus.js.map
