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 r}from'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{queryAssignedNodes as d}from'./../../external/@lit/reactive-element/decorators/query-assigned-nodes.js';import{ifDefined as h}from'./../../external/lit-html/directives/if-defined.js';import{classMap as a}from'./../../external/lit-html/directives/class-map.js';import{debounce as c}from"../../common/helpers/events.js";import{BUTTON_TYPES as p,BUTTON_KINDS as m,BUTTON_SIZES as u,BUTTON_ICON_POSITION as y}from"./defs.js";import v from"./button.scss.js";let _=class extends i{constructor(){super(...arguments),this.internals=this.attachInternals(),this.description="",this.type=p.BUTTON,this.kind=m.PRIMARY_APP,this.href="",this.size=u.MEDIUM,this.iconPosition=y.CENTER,this.iconOnly=!1,this.disabled=!1,this.destructive=!1,this.value="",this.name="",this.isFloating=!1,this.showOnScroll=!1,this._showButton=!1,this._reSizeBtn=!1,this._debounceResize=c((()=>{this._reSizeButton(),this.iconOnly=this._testIconOnly()})),this._debounceScroll=c((()=>{this.showOnScroll&&this._handleScroll()}))}render(){var t,i;const o={[m.PRIMARY_APP]:"primary-app",[m.PRIMARY_WEB]:"primary-web",[m.SECONDARY]:"secondary",[m.TERTIARY]:"tertiary"}[this.kind],s={button:!0,[`kd-btn--${o}${this.destructive?"-destructive":""}`]:!0,[`kd-btn--${o}`]:!this.destructive,"kd-btn--large":this.size===u.LARGE,"kd-btn--small":this.size===u.SMALL,"kd-btn--medium":this._reSizeBtn||this.size===u.MEDIUM,[`kd-btn--icon-${this.iconPosition}`]:!!this.iconPosition&&!this.iconOnly,"kd-btn--icon-center":(null===(t=this._iconEls)||void 0===t?void 0:t.length)&&this.iconOnly,"icon-only":(null===(i=this._iconEls)||void 0===i?void 0:i.length)&&this.iconOnly,"btn-float":this.isFloating,"btn-hidden":this.showOnScroll&&!this._showButton};return e`
      ${this.href&&""!==this.href?e`
            <a
              class=${a(s)}
              href=${this.href}
              ?disabled=${this.disabled}
              aria-label=${h(this.description)}
              title=${h(this.description)}
              @click=${t=>this.handleClick(t)}
            >
              <span>
                <slot @slotchange=${()=>this._handleSlotChange()}></slot>
                <slot
                  name="icon"
                  @slotchange=${()=>this._handleSlotChange()}
                ></slot>
              </span>
            </a>
          `:e`
            <button
              class=${a(s)}
              type=${this.type}
              ?disabled=${this.disabled}
              aria-label=${h(this.description)}
              title=${h(this.description)}
              name=${h(this.name)}
              value=${h(this.value)}
              formmethod=${h(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(){var t,e;if(!(null===(t=this._iconEls)||void 0===t?void 0:t.length))return!1;return!(null===(e=this._slottedEls)||void 0===e?void 0:e.filter((t=>""!==t.textContent.trim()))).filter((t=>{if(t.tagName){const e=getComputedStyle(t);return"none"!==e.display&&"hidden"!==e.visibility}return!0})).length}_handleSlotChange(){this.iconOnly=this._testIconOnly(),this.requestUpdate()}_reSizeButton(){(this.isFloating||this.showOnScroll)&&window.innerWidth<=672?this._reSizeBtn=!0:this._reSizeBtn=!1}_handleScroll(){const t=window.scrollY,e=window.innerHeight,i=document.documentElement.scrollHeight;this._showButton=t>(i-e)/2}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._debounceResize),this.showOnScroll&&window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){window.removeEventListener("resize",this._debounceResize),this.showOnScroll&&window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}};_.styles=[v],_.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},_.formAssociated=!0,t([n()],_.prototype,"internals",void 0),t([s({type:String})],_.prototype,"description",void 0),t([s({type:String})],_.prototype,"type",void 0),t([s({type:String})],_.prototype,"kind",void 0),t([s({type:String})],_.prototype,"href",void 0),t([s({type:String})],_.prototype,"size",void 0),t([s({type:String})],_.prototype,"iconPosition",void 0),t([n()],_.prototype,"iconOnly",void 0),t([s({type:Boolean,reflect:!0})],_.prototype,"disabled",void 0),t([s({type:Boolean,reflect:!0})],_.prototype,"destructive",void 0),t([s({type:String})],_.prototype,"value",void 0),t([s({type:String})],_.prototype,"name",void 0),t([s({type:Boolean})],_.prototype,"isFloating",void 0),t([s({type:Boolean})],_.prototype,"showOnScroll",void 0),t([n()],_.prototype,"_showButton",void 0),t([n()],_.prototype,"_reSizeBtn",void 0),t([s({type:String})],_.prototype,"formmethod",void 0),t([d()],_.prototype,"_slottedEls",void 0),t([r({slot:"icon"})],_.prototype,"_iconEls",void 0),t([l(".button")],_.prototype,"_btnEl",void 0),_=t([o("kd-button")],_);export{_ as Button};
//# sourceMappingURL=button.js.map
