@oslokommune/punkt-elements/dist/button-D-TOBaJB.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`);window.pktAnimationPath=window.pktAnimationPath||`https://punkt-cdn.oslo.kommune.no/latest/animations/`;var i=class extends n.t{constructor(...e){super(...e),this.iconName=`user`,this.secondIconName=`user`,this.mode=`light`,this.size=`medium`,this.fullWidth=!1,this.fullWidthOnMobile=!1,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}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.preventDefault(),e.stopImmediatePropagation())},!0),this.addEventListener(`keydown`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopImmediatePropagation())},!0)}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),e===`disabled`&&n===`false`&&(this.disabled=!1),(e===`isloading`||e===`isLoading`)&&n===`false`&&(this.isLoading=!1)}firstUpdated(e){super.firstUpdated(e),this.disabled===`false`&&(this.disabled=!1),this.isLoading===`false`&&(this.isLoading=!1)}render(){let i=this.form??this.getAttribute(`form`)??void 0;return e.d`
      <button
        class=${t.t({"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--full":!!this.fullWidth,"pkt-btn--full-small":!!this.fullWidthOnMobile,"pkt-btn--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading})}
        type=${this.type}
        ?disabled=${!!this.disabled}
        aria-busy=${r.t(this.isLoading?`true`:void 0)}
        aria-disabled=${r.t(this.disabled||this.isLoading?`true`:void 0)}
        form=${r.t(i)}
      >
        ${this.isLoading?e.d`<pkt-icon
              class="pkt-btn__icon pkt-btn__spinner"
              name="spinner-blue"
              path=${r.t(this.loadingAnimationPath)}
            ></pkt-icon>`:e.l}
        ${this.variant===`label-only`?e.l:e.d`<pkt-icon
              class="pkt-btn__icon pkt-icon"
              name=${this.iconName}
              path=${r.t(this.iconPath)}
            ></pkt-icon>`}
        <span class="pkt-btn__text">${n.n(this)}</span>
        ${this.variant===`icons-right-and-left`?e.d`<pkt-icon
              class="pkt-btn__icon"
              name=${this.secondIconName}
              path=${r.t(this.secondIconPath)}
            ></pkt-icon>`:e.l}
      </button>
    `}};e.r([e.s({type:String})],i.prototype,`iconName`,void 0),e.r([e.s({type:String})],i.prototype,`secondIconName`,void 0),e.r([e.s({type:String})],i.prototype,`iconPath`,void 0),e.r([e.s({type:String})],i.prototype,`secondIconPath`,void 0),e.r([e.s({type:String})],i.prototype,`mode`,void 0),e.r([e.s({type:String})],i.prototype,`size`,void 0),e.r([e.s({type:Boolean,attribute:`full-width`})],i.prototype,`fullWidth`,void 0),e.r([e.s({type:Boolean,attribute:`full-width-on-mobile`})],i.prototype,`fullWidthOnMobile`,void 0),e.r([e.s({type:String})],i.prototype,`color`,void 0),e.r([e.s({type:String})],i.prototype,`skin`,void 0),e.r([e.s({type:String})],i.prototype,`variant`,void 0),e.r([e.s({type:String,reflect:!0})],i.prototype,`state`,void 0),e.r([e.s({type:String,reflect:!0})],i.prototype,`type`,void 0),e.r([e.s({type:String})],i.prototype,`form`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`isLoading`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`disabled`,void 0),e.r([e.s({type:String})],i.prototype,`loadingAnimationPath`,void 0);try{e.c(`pkt-button`)(i)}catch{console.warn(`Forsøker å definere <pkt-button>, men den er allerede definert`)}var a=i;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});