import{css as r,html as e,Component as s}from"wkit";import"./icon.js";class l extends s{static props={icon:"",autofocus:!1,loading:{type:Boolean,observer(o){o?(this.#o=this.icon,this.icon="loading"):this.icon=this.#o===void 0?this.icon:this.#o}},disabled:!1,lazy:"num!0"};static styles=[r`:host{overflow:hidden;display:inline-flex;min-width:108px;height:32px;border:0;border-radius:3px;user-select:none;-moz-user-select:none;color:var(--color-dark-1);font-size:14px;cursor:pointer;transition:box-shadow .15s linear}:host button{display:flex;justify-content:center;align-items:center;width:100%;min-width:1px;height:inherit;padding:var(--wc-button-padding, 0 4px);gap:4px;line-height:1;border:1px solid var(--wc-button-border-color, var(--color-grey-2));border-radius:inherit;white-space:nowrap;background:var(--wc-button-background, #fff);font-size:inherit;font-family:inherit;outline:none;color:var(--wc-button-color, var(--color-dark-1));cursor:inherit;transition:background .15s linear,color .15s linear}:host button::-moz-focus-inner{border:none}:host button:hover{color:var(--wc-button-color-hover, var(--color-grey-3));border-color:var(--wc-button-border-color-hover, var(--color-grey-3));background:var(--wc-button-background-hover, var(--wc-button-background, #fff))}:host button:active{color:var(--wc-button-color-active, var(--color-dark-2));background:var(--wc-button-background-active, var(--wc-button-background, #fff))}:host button:disabled{color:var(--wc-button-color-disabled, var(--color-dark-1));background:var(--wc-button-background-disabled, var(--wc-button-background, #fff))}:host .icon{--wc-icon-size: var(--wc-button-icon-size, 14px)}:host([solid]) button{border:0;color:#fff;background:var(--color-dark-1)}:host([solid]) button:hover{background:var(--color-grey-3)}:host([solid]) button:active{background:var(--color-dark-2)}:host([solid]) button:disabled{background:var(--color-dark-1)}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}`,r`:host([size=small]){min-width:72px;height:24px;font-size:12px}:host([size=small]) .icon{--wc-icon-size: 12px}:host([size=small][circle]){width:24px;height:24px}:host([dashed]) button{border-style:dashed}:host([round]){border-radius:32px}:host([circle]){min-width:0;width:32px;height:32px;border-radius:50%}:host([circle]) button{padding:0}:host([circle]) slot{display:none}`,r`:host([type=primary]) button{color:var(--color-teal-2);border-color:var(--color-teal-1)}:host([type=primary]) button:hover{color:var(--color-teal-1);border-color:var(--color-teal-2);background:var(--wc-button-background, #fff)}:host([type=primary]) button:active{color:var(--color-teal-3);background:var(--wc-button-background, #fff)}:host([type=primary]) button:disabled{color:var(--color-teal-2);background:var(--wc-button-background, #fff)}:host([type=primary]):host([solid]) button{border:0;color:#fff;background:var(--color-teal-2)}:host([type=primary]):host([solid]) button:hover{background:var(--color-teal-1)}:host([type=primary]):host([solid]) button:active{background:var(--color-teal-3)}:host([type=primary]):host([solid]) button:disabled{background:var(--color-teal-2)}:host([type=primary]):host(:focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]) button{color:var(--color-blue-2);border-color:var(--color-blue-1)}:host([type=info]) button:hover{color:var(--color-blue-1);border-color:var(--color-blue-2);background:var(--wc-button-background, #fff)}:host([type=info]) button:active{color:var(--color-blue-3);background:var(--wc-button-background, #fff)}:host([type=info]) button:disabled{color:var(--color-blue-2);background:var(--wc-button-background, #fff)}:host([type=info]):host([solid]) button{border:0;color:#fff;background:var(--color-blue-2)}:host([type=info]):host([solid]) button:hover{background:var(--color-blue-1)}:host([type=info]):host([solid]) button:active{background:var(--color-blue-3)}:host([type=info]):host([solid]) button:disabled{background:var(--color-blue-2)}:host([type=info]):host(:focus-within){box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) button{color:var(--color-green-2);border-color:var(--color-green-1)}:host([type=success]) button:hover{color:var(--color-green-1);border-color:var(--color-green-2);background:var(--wc-button-background, #fff)}:host([type=success]) button:active{color:var(--color-green-3);background:var(--wc-button-background, #fff)}:host([type=success]) button:disabled{color:var(--color-green-2);background:var(--wc-button-background, #fff)}:host([type=success]):host([solid]) button{border:0;color:#fff;background:var(--color-green-2)}:host([type=success]):host([solid]) button:hover{background:var(--color-green-1)}:host([type=success]):host([solid]) button:active{background:var(--color-green-3)}:host([type=success]):host([solid]) button:disabled{background:var(--color-green-2)}:host([type=success]):host(:focus-within){box-shadow:0 0 0 2px var(--color-green-a)}:host([type=warning]) button{color:var(--color-orange-2);border-color:var(--color-orange-1)}:host([type=warning]) button:hover{color:var(--color-orange-1);border-color:var(--color-orange-2);background:var(--wc-button-background, #fff)}:host([type=warning]) button:active{color:var(--color-orange-3);background:var(--wc-button-background, #fff)}:host([type=warning]) button:disabled{color:var(--color-orange-2);background:var(--wc-button-background, #fff)}:host([type=warning]):host([solid]) button{border:0;color:#fff;background:var(--color-orange-2)}:host([type=warning]):host([solid]) button:hover{background:var(--color-orange-1)}:host([type=warning]):host([solid]) button:active{background:var(--color-orange-3)}:host([type=warning]):host([solid]) button:disabled{background:var(--color-orange-2)}:host([type=warning]):host(:focus-within){box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=danger]) button{color:var(--color-red-2);border-color:var(--color-red-1)}:host([type=danger]) button:hover{color:var(--color-red-1);border-color:var(--color-red-2);background:var(--wc-button-background, #fff)}:host([type=danger]) button:active{color:var(--color-red-3);background:var(--wc-button-background, #fff)}:host([type=danger]) button:disabled{color:var(--color-red-2);background:var(--wc-button-background, #fff)}:host([type=danger]):host([solid]) button{border:0;color:#fff;background:var(--color-red-2)}:host([type=danger]):host([solid]) button:hover{background:var(--color-red-1)}:host([type=danger]):host([solid]) button:active{background:var(--color-red-3)}:host([type=danger]):host([solid]) button:disabled{background:var(--color-red-2)}:host([type=danger]):host(:focus-within){box-shadow:0 0 0 2px var(--color-red-a)}`,r`:host([loading]),:host([disabled]){cursor:not-allowed;opacity:.6}`];#o;#r=0;created(){this.#r=0,this._clickFn=this.$on("click",o=>{let{loading:n,disabled:c,lazy:t}=this,a=Date.now();if(n||c||t>0&&a-this.#r<t)return o.stopPropagation();this.#r=a},!0)}mounted(){this.autofocus&&this.$refs.btn.focus()}render(){return e`
      <button ref="btn" disabled=${this.disabled||this.loading}>
        <wc-icon class="icon" name=${this.icon}></wc-icon>
        <slot></slot>
      </button>
    `}}l.reg("button");