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 s}from'./../../external/@lit/reactive-element/decorators/custom-element.js';import{property as o}from'./../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../external/@lit/reactive-element/decorators/state.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{queryAssignedNodes as l}from'./../../external/@lit/reactive-element/decorators/query-assigned-nodes.js';import{ifDefined as r}from'./../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../external/lit-html/directives/class-map.js';import{debounce as a}from"../../common/helpers/events.js";import{BUTTON_TYPES as c,BUTTON_KINDS as h,BUTTON_SIZES as p,BUTTON_ICON_POSITION as m}from"./defs.js";import y from"./button.scss.js";let u=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.description="",this.type=c.BUTTON,this.kind=h.PRIMARY_APP,this.href="",this.size=p.MEDIUM,this.iconPosition=m.CENTER,this.iconOnly=!1,this.disabled=!1,this.destructive=!1}render(){const t={[h.PRIMARY_APP]:"primary-app",[h.PRIMARY_WEB]:"primary-web",[h.SECONDARY]:"secondary",[h.TERTIARY]:"tertiary"}[this.kind],i={button:!0,[`kd-btn--${t}${this.destructive?"-destructive":""}`]:!0,[`kd-btn--${t}`]:!this.destructive,"kd-btn--large":this.size===p.LARGE,"kd-btn--small":this.size===p.SMALL,"kd-btn--medium":this.size===p.MEDIUM,[`kd-btn--icon-${this.iconPosition}`]:!!this.iconPosition&&!this.iconOnly,"kd-btn--icon-center":this._iconEls.length&&this.iconOnly,"icon-only":this._iconEls.length&&this.iconOnly};return e`
      ${""!==this.href?e`
            <a
              class=${d(i)}
              href=${this.href}
              ?disabled=${this.disabled}
              aria-label=${r(this.description||void 0)}
              title=${r(this.description||void 0)}
              @click=${t=>this.handleClick(t)}
            >
              <span>
                <slot @slotchange=${()=>this._handleSlotChange()}></slot>
                <slot
                  name="icon"
                  @slotchange=${()=>this._handleSlotChange()}
                ></slot>
              </span>
            </a>
          `:e`
            <button
              class=${d(i)}
              type=${this.type}
              ?disabled=${this.disabled}
              aria-label=${r(this.description||void 0)}
              title=${r(this.description||void 0)}
              value=${r(this.value)}
              formmethod=${r(this.formmethod)}
              @click=${t=>this.handleClick(t)}
            >
              <span>
                <slot @slotchange=${()=>this._handleSlotChange()}></slot>
                <slot
                  name="icon"
                  @slotchange=${()=>this._handleSlotChange()}
                ></slot>
              </span>
            </button>
          `}
    `}handleClick(t){this.internals.form&&("submit"===this.type?this.internals.form.requestSubmit():"reset"===this.type&&this.internals.form.reset());const e=new CustomEvent("on-click",{detail:{origEvent:t}});this.dispatchEvent(e)}_testIconOnly(){if(!this._iconEls.length)return!1;return!this._slottedEls.filter((t=>""!==t.textContent.trim())).filter((t=>!t.tagName||t.offsetParent)).length}_handleSlotChange(){this.iconOnly=this._testIconOnly(),this.requestUpdate()}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",a((()=>{this.iconOnly=this._testIconOnly()})))}disconnectedCallback(){window.removeEventListener("resize",a((()=>{this.iconOnly=this._testIconOnly()}))),super.disconnectedCallback()}};u.styles=[y],u.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},u.formAssociated=!0,t([n()],u.prototype,"internals",void 0),t([o({type:String})],u.prototype,"description",void 0),t([o({type:String})],u.prototype,"type",void 0),t([o({type:String})],u.prototype,"kind",void 0),t([o({type:String})],u.prototype,"href",void 0),t([o({type:String})],u.prototype,"size",void 0),t([o({type:String})],u.prototype,"iconPosition",void 0),t([n()],u.prototype,"iconOnly",void 0),t([o({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),t([o({type:Boolean,reflect:!0})],u.prototype,"destructive",void 0),t([o({type:String})],u.prototype,"value",void 0),t([o({type:String})],u.prototype,"formmethod",void 0),t([l()],u.prototype,"_slottedEls",void 0),t([l({slot:"icon"})],u.prototype,"_iconEls",void 0),u=t([s("kd-button")],u);export{u as Button};
//# sourceMappingURL=button.js.map
