const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["https://cdn-bo.egoiapp.com/_app/immutable/chunks/index.zbsAnJJ8.js","https://cdn-bo.egoiapp.com/_app/immutable/chunks/index.BEoa_BCs.js"])))=>i.map(i=>d[i]);
import{_ as v}from"./preload-helper.C1FmrZbK.js";import{G as h,i as g,n as e,e as u,E as m,x as b,a as p}from"./index.BEoa_BCs.js";import{e as x}from"./class-map.BLMraFAk.js";import{o as y}from"./if-defined.C-2eMiqd.js";var t=function(a,r,i,l){var s=arguments.length,n=s<3?r:l===null?l=Object.getOwnPropertyDescriptor(r,i):l,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(a,r,i,l);else for(var d=a.length-1;d>=0;d--)(c=a[d])&&(n=(s<3?c(n):s>3?c(r,i,n):c(r,i))||n);return s>3&&n&&Object.defineProperty(r,i,n),n};let o=class extends m{constructor(){super(...arguments),this.type="secondary",this.id="",this.action="click",this.size="sm",this.label="",this.icon="",this.iconPos="left",this.loading=!1,this.disabled=!1}async _importDependencies(){customElements.get("eg-icon")||await v(()=>import("./index.zbsAnJJ8.js"),__vite__mapDeps([0,1]),import.meta.url)}_getIcon(){return this.loading?b`<eg-icon name="circle-notch" spinning></eg-icon>`:this.icon?b`<eg-icon name="${this.icon}"></eg-icon>`:p}_handleClick(r){this.action==="click"?this.dispatchEvent(new CustomEvent("eg-button-click",{detail:{event:r},bubbles:!0,composed:!0})):this.dispatchEvent(new SubmitEvent("eg-submit",{bubbles:!0,composed:!0}))}render(){const r={[this.size]:!0,[this.type]:!0,square:!this.label,loading:this.loading,disabled:this.disabled&&!this.loading,flipped:this.iconPos==="right"};return b`<button
            class=${x(r)}
            type="${this.action}"
            id=${y(this.id)}
            @click="${this._handleClick}"
            ?disabled=${this.disabled||this.loading}
        >
            ${this._getIcon()}
            <span class="text">${this.label||p}</span>
        </button>`}};o.styles=[h,g`
            button {
                --btn-h-padding: var(--size-xs);
                --btn-w-padding: var(--size-xs);
                color: var(--btn-text-color, var(--color-neutral-dark-3));
                background-color: var(
                    --btn-bg-color,
                    var(--color-neutral-light-3)
                );
                border: 1px solid var(--btn-border-color);
                display: flex;
                gap: 10px;
                padding: var(--btn-h-padding) var(--btn-w-padding);
                align-items: center;
                outline: none;
                transition: color background-color border-color box-shadow
                    var(--transition-speed) ease-in-out;
                border-radius: var(--border-radius);
                line-height: 1;
                font-size: var(--text-sm);
                white-space: nowrap;
                cursor: pointer;
            }

            button:hover {
                color: var(
                    --hover-btn-text-color,
                    var(--color-brand-secondary)
                );
                background-color: var(
                    --hover-btn-bg-color,
                    var(--color-neutral-light-2)
                );
                border-color: var(
                    --hover-btn-border-color,
                    var(--color-neutral)
                );
                box-shadow: var(--shadow-lg);
            }

            /* states */
            .flipped {
                flex-direction: row-reverse;
            }
            .square {
                --btn-w-padding: var(--btn-h-padding) !important;
                gap: 0;
            }
            .disabled {
                opacity: 0.3;
            }
            .loading:hover,
            .disabled:hover {
                cursor: not-allowed !important;
                box-shadow: none;
            }

            /* sizes */
            .lg {
                --btn-w-padding: var(--size-lg);
                font-size: var(--text-lg);
            }
            .md {
                --btn-w-padding: var(--size-md);
                font-size: var(--text-md);
            }
            .sm {
                --btn-h-padding: var(--size-xs);
                --btn-w-padding: var(--size-sm);
                font-size: var(--text-sm);
            }
            .xs {
                --btn-h-padding: var(--size-xs);
                --btn-w-padding: var(--size-xs);
                font-size: var(--text-xs);
            }

            /* colors */
            .primary {
                --btn-text-color: var(--color-neutral-light-3);
                --btn-bg-color: var(--color-brand-primary);
                --btn-border-color: var(
                    --btn-border-color-o,
                    var(--color-brand-primary)
                );
                --hover-btn-text-color: var(--color-neutral-light-3);
                --hover-btn-bg-color: var(--color-info);
                --hover-btn-border-color: var(--color-info);
            }

            .secondary {
                --btn-text-color: var(--color-neutral-dark-3);
                --btn-bg-color: var(--color-neutral-light-3);
                --btn-border-color: var(
                    --btn-border-color-o,
                    var(--color-neutral)
                );
                --hover-btn-text-color: var(--color-neutral-light-3);
                --hover-btn-bg-color: var(--color-info);
                --hover-btn-border-color: var(--color-info);
            }

            .tertiary {
                --btn-text-color: var(--color-brand-primary);
                --btn-bg-color: transparent;
                --btn-border-color: transparent;
                --hover-btn-text-color: var(--color-info);
                --hover-btn-bg-color: transparent;
                --hover-btn-border-color: transparent;
                --btn-w-padding: 0;
                &:hover {
                    box-shadow: none;
                }
            }

            .outline {
                --btn-text-color: var(--color-neutral-light-3);
                --btn-bg-color: transparent;
                --btn-border-color: var(--color-neutral-light-3);
                --hover-btn-text-color: var(--color-brand-secondary);
                --hover-btn-bg-color: var(--color-neutral-light-3);
                --hover-btn-border-color: var(--color-neutral-light-3);
            }
            .unstyled {
                --btn-text-color: inherit;
                --btn-bg-color: transparent;
                --btn-border-color: transparent;
                --hover-btn-text-color: inherit;
                --hover-btn-bg-color: transparent;
                --hover-btn-border-color: transparent;
                padding: 0;
                &:hover {
                    box-shadow: none;
                }
            }

            .text {
                display: var(--btn-text-display, block);
            }
        `];t([e({type:String})],o.prototype,"type",void 0);t([e({type:String})],o.prototype,"id",void 0);t([e({type:String})],o.prototype,"action",void 0);t([e({type:String})],o.prototype,"size",void 0);t([e({type:String})],o.prototype,"label",void 0);t([e({type:String})],o.prototype,"icon",void 0);t([e({type:String,attribute:"icon-pos"})],o.prototype,"iconPos",void 0);t([e({type:Boolean})],o.prototype,"loading",void 0);t([e({type:Boolean})],o.prototype,"disabled",void 0);o=t([u("eg-button")],o);export{o as EgButton};