@oslokommune/punkt-elements/dist/checkbox-BerAYcfK.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(`./ref-BaJ0mBT_.cjs`),r=require(`./input-element-D0egtEnr.cjs`);var i=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition=`right`,this.hideLabel=!1,this.checked=null,this.indeterminate=!1,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,t,n){e===`defaultChecked`&&!this.checked&&(this.checked=this.defaultChecked),e===`checked`&&(this.checked=this.checked===``||this.checked===`true`||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e===`indeterminate`&&(this.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,t,n)}firstUpdated(e){e.has(`defaultChecked`)&&!this.checked&&(this.checked=this.defaultChecked),this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.firstUpdated(e)}updated(e){e.has(`defaultChecked`)&&!this.checked&&(this.checked=this.defaultChecked),e.has(`checked`)&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===``||this.checked===`true`||this.checked===!0),e.has(`indeterminate`)&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.updated(e)}render(){let r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=t.t({"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}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=()=>e.d`
        ${this.tagText?e.d`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.l}
        ${this.optionalTag?e.d`<span class=${o+` pkt-tag--blue-light`}>${this.optionalText}</span>`:e.l}
        ${this.requiredTag?e.d`<span class=${o+` pkt-tag--beige`}>${this.requiredText}</span>`:e.l}
      `,c=()=>e.d`
        <label class=${a} for=${this.id+`-internal`}>
          ${this.label} ${s()}
          ${this.checkHelptext?e.d`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:e.l}
        </label>
      `;return e.d`
      <div class="pkt-input-check">
        <div class=${r}>
          ${this.labelPosition===`left`?c():e.l}
          <input
            id=${this.id+`-internal`}
            class=${i}
            type="checkbox"
            ?disabled=${this.disabled}
            name=${this.name+`-internal`}
            ${n.n(this.inputRef)}
            @change=${this.handleChange}
            @click=${this.handleClick}
            @blur=${this.onBlur}
            @focus=${this.onFocus}
            ?checked=${this.checked}
            role=${this.isSwitch?`switch`:`checkbox`}
          />
          ${this.labelPosition===`right`?c():e.l}
        </div>
      </div>
    `}handleClick(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}let t=e.target;if(t&&t.disabled){e.preventDefault(),e.stopImmediatePropagation();return}e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(`:checked`),this.valueChecked(this.checked))}};e.r([e.s({type:String,reflect:!0})],i.prototype,`value`,void 0),e.r([e.s({type:String})],i.prototype,`checkHelptext`,void 0),e.r([e.s({type:Boolean})],i.prototype,`defaultChecked`,void 0),e.r([e.s({type:Boolean})],i.prototype,`hasTile`,void 0),e.r([e.s({type:Boolean})],i.prototype,`isSwitch`,void 0),e.r([e.s({type:String})],i.prototype,`labelPosition`,void 0),e.r([e.s({type:Boolean})],i.prototype,`hideLabel`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`checked`,void 0),e.r([e.s({type:Boolean,reflect:!0})],i.prototype,`indeterminate`,void 0),e.r([e.s({type:String,reflect:!0})],i.prototype,`type`,void 0),e.r([e.s({type:String})],i.prototype,`tagText`,void 0),e.r([e.s({type:Boolean})],i.prototype,`optionalTag`,void 0),e.r([e.s({type:String})],i.prototype,`optionalText`,void 0),e.r([e.s({type:Boolean})],i.prototype,`requiredTag`,void 0),e.r([e.s({type:String})],i.prototype,`requiredText`,void 0);try{e.c(`pkt-checkbox`)(i)}catch{console.warn(`Forsøker å definere <pkt-checkbox>, 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}});