@oslokommune/punkt-elements/dist/checkbox-wJ26voZd.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const t=require("./element-6DBpyGQm.cjs"),k=require("./input-element-C4xJoM-X.cjs"),n=require("./ref-iJtiv3o2.cjs"),o=require("./class-map-BBG2gMX4.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(p,e,c,h)=>{for(var s=h>1?void 0:h?u(e,c):e,a=p.length-1,l;a>=0;a--)(l=p[a])&&(s=(h?l(e,c,s):l(s))||s);return h&&s&&r(e,c,s),s};exports.PktCheckbox=class extends k.PktInputElement{constructor(){super(...arguments),this.inputRef=n.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,c,h){e==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),e==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,c,h)}firstUpdated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(e)}render(){const e=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),c=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",a=()=>t.x`
        ${this.tagText?t.x`<span class=${s+" pkt-tag--gray"}>${this.tagText}</span>`:t.E}
        ${this.optionalTag?t.x`<span class=${s+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.E}
        ${this.requiredTag?t.x`<span class=${s+" pkt-tag--beige"}>${this.requiredText}</span>`:t.E}
      `,l=()=>t.x`
        <label class=${h} for=${this.id+"-internal"}>
          ${this.label} ${a()}
          ${this.checkHelptext?t.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:t.E}
        </label>
      `;return t.x`
      <div class="pkt-input-check">
        <div class=${e}>
          ${this.labelPosition==="left"?l():t.E}
          <input
            id=${this.id+"-internal"}
            class=${c}
            type="checkbox"
            ?disabled=${this.disabled}
            name=${this.name+"-internal"}
            ${n.n(this.inputRef)}
            @change=${this.toggleChecked}
            @blur=${this.onBlur}
            @focus=${this.onFocus}
            ?checked=${this.checked}
            role=${this.isSwitch?"switch":"checkbox"}
          />
          ${this.labelPosition==="right"?l():t.E}
        </div>
      </div>
    `}toggleChecked(e){e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}};i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"value",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"checkHelptext",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"defaultChecked",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hasTile",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"isSwitch",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"labelPosition",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hideLabel",2);i([t.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"checked",2);i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"type",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"tagText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"optionalTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"optionalText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"requiredTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"requiredText",2);exports.PktCheckbox=i([t.t("pkt-checkbox")],exports.PktCheckbox);