@oslokommune/punkt-elements/dist/radiobutton-CdT6v1oq.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const t=require("./element-6DBpyGQm.cjs"),r=require("./state-DPobt-Yz.cjs"),u=require("./input-element-C4xJoM-X.cjs"),h=require("./ref-iJtiv3o2.cjs"),c=require("./class-map-BBG2gMX4.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(p,e,n,a)=>{for(var s=a>1?void 0:a?k(e,n):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(s=(a?l(e,n,s):l(s))||s);return a&&s&&d(e,n,s),s};exports.PktRadioButton=class extends u.PktInputElement{constructor(){super(...arguments),this.inputRef=h.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,n,a){e==="defaultChecked"&&(this._checked=this.defaultChecked),e==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,n,a)}render(){const e=c.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=c.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=c.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",o=()=>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=${a} for=${this.id+"-internal"}>
          ${this.label} ${o()}
          ${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}>
          <input
            id=${this.id+"-internal"}
            class=${n}
            type="radio"
            role="radio"
            ?disabled=${this.disabled}
            form=""
            name=${this.name+"-internal"}
            ${h.n(this.inputRef)}
            @change=${this.toggleChecked}
            @input=${this.onInput}
            @blur=${this.onBlur}
            @focus=${this.onFocus}
            ?checked=${this.checked}
          />
          ${l()}
        </div>
      </div>
    `}toggleChecked(e=null){e&&e.preventDefault(),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.PktRadioButton.prototype,"value",2);i([t.n({type:String})],exports.PktRadioButton.prototype,"checkHelptext",2);i([t.n({type:Boolean})],exports.PktRadioButton.prototype,"defaultChecked",2);i([t.n({type:Boolean})],exports.PktRadioButton.prototype,"hasTile",2);i([t.n({type:Boolean,reflect:!0})],exports.PktRadioButton.prototype,"checked",2);i([t.n({type:String,reflect:!0})],exports.PktRadioButton.prototype,"type",2);i([t.n({type:String})],exports.PktRadioButton.prototype,"tagText",2);i([t.n({type:Boolean})],exports.PktRadioButton.prototype,"optionalTag",2);i([t.n({type:String})],exports.PktRadioButton.prototype,"optionalText",2);i([t.n({type:Boolean})],exports.PktRadioButton.prototype,"requiredTag",2);i([t.n({type:String})],exports.PktRadioButton.prototype,"requiredText",2);i([r.r()],exports.PktRadioButton.prototype,"_checked",2);exports.PktRadioButton=i([t.t("pkt-radiobutton")],exports.PktRadioButton);