import{__decorate as t}from"../../_virtual/_tslib.js";import'./../../external/@lit/reactive-element/reactive-element.js';import{html as e}from'./../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../external/lit-element/lit-element.js';import{customElement as o}from'./../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../external/@lit/reactive-element/decorators/state.js';import{query as l}from'./../../external/@lit/reactive-element/decorators/query.js';import{queryAssignedElements as d}from'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import"../icon/icon.js";import{classMap as a}from'./../../external/lit-html/directives/class-map.js';import p from'./../../external/@carbon/icons/es/chevron--down/20.js';import{SPLIT_BTN_KINDS as r,SPLIT_BTN_SIZES as h,SPLIIT_BTN_ICON_POSITION as c}from"./defs.js";import"./splitButtonOption.js";import u from"./splitButton.scss.js";import{ifDefined as m}from'./../../external/lit-html/directives/if-defined.js';let b=class extends i{constructor(){super(...arguments),this.description="",this.name="",this.kind=r.PRIMARY_APP,this.size=h.MEDIUM,this.iconPosition=c.LEFT,this.label="",this.disabled=!1,this.destructive=!1,this.menuMinWidth="initial",this.open=!1,this._openUpwards=!1,this.assistiveText="Split button menu options.",this.toggleDropdown=()=>{this.open=!this.open}}render(){const t={[r.PRIMARY_APP]:"primary-app",[r.PRIMARY_WEB]:"primary-web",[r.SECONDARY]:"secondary"}[this.kind],i={button:!0,[`kd-split-btn--${t}${this.destructive?"-destructive":""}`]:!0,[`kd-split-btn--${t}`]:!this.destructive,"kd-split-btn--large":this.size===h.LARGE,"kd-split-btn--small":this.size===h.SMALL,"kd-split-btn--medium":this.size===h.MEDIUM,[`kd-split-btn--icon-${this.iconPosition}`]:!!this.iconPosition};return e`
      <div
        class="split-btn-wrapper ${this.open?"open":""}"
        id="label-${this.name}"
      >
        <!-- label button UI -->
        <button
          class=${a({...i,"kd-split-btn-label":!0,"kd-split-btn--secondary-label":this.kind===r.SECONDARY})}
          type="button"
          ?disabled=${this.disabled}
          name=${m(this.name)}
          @click=${t=>this._handlePrimaryClick(t)}
        >
          <span>
            ${this.label}
            <slot name="icon"></slot>
          </span>
        </button>
        <!-- menu button UI -->
        <button
          class=${a({...i,select:!0,[`kd-split-btn--${this.size}-arrow-btn`]:!0,"kd-split-btn-icon":!0,"kd-split-btn--secondary-icon":this.kind===r.SECONDARY,"kd-split-btn-margin-overlapped":this.kind===r.SECONDARY})}
          type="button"
          ?disabled=${this.disabled}
          aria-label=${m(this.description)}
          title=${m(this.description)}
          aria-haspopup="true"
          aria-expanded="false"
          @click=${this.toggleDropdown}
          @keydown=${t=>this.handleButtonKeydown(t)}
        >
          <span>
            <kd-icon class="arrow-icon" .icon=${p}></kd-icon>
          </span>
        </button>
        <!-- Split Button Menu UI -->
        <ul
          class=${a({options:!0,open:this.open,upwards:this._openUpwards})}
          style="min-width: ${this.menuMinWidth};"
          name=${this.name}
          aria-labelledby="label-${this.name}"
          role="listbox"
          tabindex="0"
          aria-expanded=${this.open}
          aria-hidden=${!this.open}
          @keydown=${t=>this.handleListKeydown(t)}
          @blur=${t=>this.handleListBlur(t)}
        >
          <!-- Can put <kd-splitbutton-option> component here for each option -->
          <slot id="children"></slot>
        </ul>
      </div>
    `}updated(t){var e;if(t.has("open")&&this.open){null===(e=this.options.find((t=>t.selected)))||void 0===e||e.scrollIntoView({block:"nearest"});const t=.6;this.buttonEl.getBoundingClientRect().top>window.innerHeight*t?this._openUpwards=!0:this._openUpwards=!1}}handleListBlur(t){this.options.forEach((t=>t.highlighted=!1)),t.relatedTarget&&"kd-splitbutton-option"!==t.relatedTarget.localName&&(this.open=!1),this.assistiveText="Split button menu options."}handleButtonKeydown(t){this.handleKeyboard(t,t.keyCode,"button")}handleListKeydown(t){9!==t.keyCode&&t.preventDefault(),this.handleKeyboard(t,t.keyCode,"list")}handleKeyboard(t,e,i){const o=[0,32],s=this.options.find((t=>t.highlighted));console.log(s);const n=this.options.find((t=>t.selected)),l=s?this.options.indexOf(s):this.options.find((t=>t.selected))?this.options.indexOf(n):0;if(o.includes(e)&&t.preventDefault(),"button"===i){(o.includes(e)||13===e||40==e||38==e)&&(this.open=!0,this.options[l].highlighted=!0)}switch(e){case 13:return void(this.assistiveText="Selected an item.");case 40:{let t=s||n?l===this.options.length-1?0:l+1:0;return this.options[t].disabled&&(t=t===this.options.length-1?0:t+1),this.options[l].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 38:{let t=0===l?this.options.length-1:l-1;return this.options[t].disabled&&(t=0===t?this.options.length-1:t-1),this.options[l].highlighted=!1,this.options[t].highlighted=!0,this.options[t].scrollIntoView({block:"nearest"}),void(this.assistiveText=this.options[t].text)}case 27:return this.open=!1,this.buttonEl.focus(),void(this.assistiveText="Split button menu options.");default:return}}_handleClickOut(t){t.composedPath().includes(this)||(this.open=!1)}_handleBlur(t){const e=t.detail.origEvent.relatedTarget;(!e||"kd-splitbutton-option"!==e.localName&&"kd-split-btn"!==e.localName)&&(this.open=!1)}_handlePrimaryClick(t){this.open=!1;const e=new CustomEvent("on-click",{detail:{origEvent:t,value:1}});this.dispatchEvent(e)}_handleClick(t){this.open=!1,this.emitValue(t)}emitValue(t){const e=new CustomEvent("on-click",{detail:{value:t.detail.value,text:t.detail.text}});this.dispatchEvent(e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",(t=>this._handleClickOut(t))),this.addEventListener("on-action-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t)))}disconnectedCallback(){document.removeEventListener("click",(t=>this._handleClickOut(t))),this.addEventListener("on-action-click",(t=>this._handleClick(t))),this.addEventListener("on-blur",(t=>this._handleBlur(t))),super.disconnectedCallback()}};b.styles=u,b.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},t([s({type:String})],b.prototype,"description",void 0),t([s({type:String})],b.prototype,"name",void 0),t([s({type:String})],b.prototype,"kind",void 0),t([s({type:String})],b.prototype,"size",void 0),t([s({type:String})],b.prototype,"iconPosition",void 0),t([s({type:String})],b.prototype,"label",void 0),t([s({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),t([s({type:Boolean,reflect:!0})],b.prototype,"destructive",void 0),t([s({type:String})],b.prototype,"menuMinWidth",void 0),t([s({type:Boolean})],b.prototype,"open",void 0),t([d({selector:"kd-splitbutton-option"})],b.prototype,"options",void 0),t([n()],b.prototype,"_openUpwards",void 0),t([l(".select")],b.prototype,"buttonEl",void 0),t([n()],b.prototype,"assistiveText",void 0),b=t([o("kd-split-btn")],b);export{b as SplitButton};
//# sourceMappingURL=splitButton.js.map
