@oslokommune/punkt-elements/dist/button-CDocR7iN.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const t=require("./element-6DBpyGQm.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),u=require("./class-map-BBG2gMX4.cjs"),a=require("./if-defined-Cni-RHLS.cjs"),d=require("./ref-iJtiv3o2.cjs");var c=Object.defineProperty,k=Object.getOwnPropertyDescriptor,e=(r,i,s,n)=>{for(var o=n>1?void 0:n?k(i,s):i,p=r.length-1,l;p>=0;p--)(l=r[p])&&(o=(n?l(i,s,o):l(o))||o);return n&&o&&c(i,s,o),o};window.pktAnimationPath=window.pktAnimationPath||"https://punkt-cdn.oslo.kommune.no/latest/animations/";exports.PktButton=class extends t.PktElement{constructor(){super(),this.defaultSlot=d.e(),this.iconName="user",this.secondIconName="user",this.mode="light",this.size="medium",this.skin="primary",this.variant="label-only",this.state="normal",this.type="button",this.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=window.pktAnimationPath,this.slotController=new h.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.preventDefault(),i.stopImmediatePropagation())},!0),this.addEventListener("keydown",i=>{(this.disabled||this.hasAttribute("disabled")||this.isLoading)&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),i.stopImmediatePropagation())},!0)}attributeChangedCallback(i,s,n){super.attributeChangedCallback(i,s,n),i==="disabled"&&n==="false"&&(this.disabled=!1),(i==="isloading"||i==="isLoading")&&n==="false"&&(this.isLoading=!1)}firstUpdated(i){super.firstUpdated(i),this.disabled==="false"&&(this.disabled=!1),this.isLoading==="false"&&(this.isLoading=!1)}render(){const i=this.form??this.getAttribute("form")??void 0,s={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading};return t.x`
      <button
        class=${u.e(s)}
        type=${this.type}
        ?disabled=${!!this.disabled}
        aria-busy=${a.o(this.isLoading?"true":void 0)}
        aria-disabled=${a.o(this.disabled||this.isLoading?"true":void 0)}
        form=${a.o(i)}
      >
        ${this.isLoading?t.x`<pkt-icon
              class="pkt-btn__icon pkt-btn__spinner"
              name="spinner-blue"
              path=${a.o(this.loadingAnimationPath)}
            ></pkt-icon>`:t.E}
        ${this.variant!=="label-only"?t.x`<pkt-icon class="pkt-btn__icon pkt-icon" name=${this.iconName}></pkt-icon>`:t.E}
        <span class="pkt-btn__text" ${d.n(this.defaultSlot)}></span>
        ${this.variant==="icons-right-and-left"?t.x`<pkt-icon class="pkt-btn__icon" name=${this.secondIconName}></pkt-icon>`:t.E}
      </button>
    `}};e([t.n({type:String})],exports.PktButton.prototype,"iconName",2);e([t.n({type:String})],exports.PktButton.prototype,"secondIconName",2);e([t.n({type:String})],exports.PktButton.prototype,"mode",2);e([t.n({type:String})],exports.PktButton.prototype,"size",2);e([t.n({type:String})],exports.PktButton.prototype,"color",2);e([t.n({type:String})],exports.PktButton.prototype,"skin",2);e([t.n({type:String})],exports.PktButton.prototype,"variant",2);e([t.n({type:String,reflect:!0})],exports.PktButton.prototype,"state",2);e([t.n({type:String,reflect:!0})],exports.PktButton.prototype,"type",2);e([t.n({type:String})],exports.PktButton.prototype,"form",2);e([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"isLoading",2);e([t.n({type:Boolean,reflect:!0})],exports.PktButton.prototype,"disabled",2);e([t.n({type:String})],exports.PktButton.prototype,"loadingAnimationPath",2);exports.PktButton=e([t.t("pkt-button")],exports.PktButton);