import{option_styles_default as e}from"./chunk.P4PERM2V.js";import{LocalizeController as t}from"./chunk.2A3352EO.js";import{SlIcon as s}from"./chunk.M4HIRIJ5.js";import{watch as a}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as l}from"./chunk.Z7XDKKOD.js";import{__decorateClass as o}from"./chunk.6M63UXML.js";import{classMap as i}from"../../../../lit/directives/class-map.js";import{html as r}from"../../../../lit/index.js";import{property as n,query as h,state as c}from"../../../../lit/decorators.js";var d=class extends l{constructor(){super(...arguments),this.localize=new t(this),this.current=!1,this.selected=!1,this.hasHover=!1,this.value="",this.disabled=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.setAttribute("aria-selected","false")}handleDefaultSlotChange(){const e=this.getTextLabel();void 0!==this.cachedTextLabel?e!==this.cachedTextLabel&&(this.cachedTextLabel=e,this.emit("slotchange",{bubbles:!0,composed:!1,cancelable:!1})):this.cachedTextLabel=e}handleMouseEnter(){this.hasHover=!0}handleMouseLeave(){this.hasHover=!1}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleSelectedChange(){this.setAttribute("aria-selected",this.selected?"true":"false")}handleValueChange(){"string"!=typeof this.value&&(this.value=String(this.value)),this.value.includes(" ")&&(console.error("Option values cannot include a space. All spaces have been replaced with underscores.",this),this.value=this.value.replace(/ /g,"_"))}getTextLabel(){var e;return(null!=(e=this.textContent)?e:"").trim()}render(){return r`
      <div
        part="base"
        class=${i({option:!0,"option--current":this.current,"option--disabled":this.disabled,"option--selected":this.selected,"option--hover":this.hasHover})}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
      >
        <sl-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></sl-icon>
        <slot part="prefix" name="prefix" class="option__prefix"></slot>
        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
        <slot part="suffix" name="suffix" class="option__suffix"></slot>
      </div>
    `}};d.styles=e,d.dependencies={"sl-icon":s},o([h(".option__label")],d.prototype,"defaultSlot",2),o([c()],d.prototype,"current",2),o([c()],d.prototype,"selected",2),o([c()],d.prototype,"hasHover",2),o([n({reflect:!0})],d.prototype,"value",2),o([n({type:Boolean,reflect:!0})],d.prototype,"disabled",2),o([a("disabled")],d.prototype,"handleDisabledChange",1),o([a("selected")],d.prototype,"handleSelectedChange",1),o([a("value")],d.prototype,"handleValueChange",1);export{d as SlOption};