@oslokommune/punkt-elements/dist/radiobutton-BAn1V_mQ.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, o as r, r as i, s as a } from "./element-cZ85T_aa.js";
import { t as o } from "./class-map-C8HuhNzZ.js";
import { n as s, t as c } from "./ref-RS8Uv6uC.js";
import { t as l } from "./input-element-B1ciW1N2.js";
//#region src/components/radiobutton/radiobutton.ts
var u = class extends l {
	constructor(...e) {
		super(...e), this.inputRef = c(), 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, t, n) {
		e === "defaultChecked" && (this._checked = this.defaultChecked), e === "checked" && (this._checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(e, t, n);
	}
	render() {
		let e = o({
			"pkt-input-check__input": !0,
			"pkt-input-check__input--tile": this.hasTile,
			"pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
		}), r = o({
			"pkt-input-check__input-checkbox": !0,
			"pkt-input-check__input-checkbox--error": this.hasError
		}), i = o({
			"pkt-input-check__input-label": !0,
			"pkt-input-check__input-label--disabled": this.disabled,
			"pkt-sr-only": this.hideLabel
		}), a = "pkt-tag pkt-tag--small pkt-tag--thin-text";
		return t`
      <div class="pkt-input-check">
        <div class=${e}>
          <input
            id=${this.id + "-internal"}
            class=${r}
            type="radio"
            role="radio"
            ?disabled=${this.disabled}
            form=""
            name=${this.name + "-internal"}
            ${s(this.inputRef)}
            @change=${this.toggleChecked}
            @input=${this.onInput}
            @blur=${this.onBlur}
            @focus=${this.onFocus}
            ?checked=${this.checked}
          />
          ${t`
        <label class=${i} for=${this.id + "-internal"}>
          ${this.label} ${t`
        ${this.tagText ? t`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : n}
        ${this.optionalTag ? t`<span class=${a + " pkt-tag--blue-light"}>${this.optionalText}</span>` : n}
        ${this.requiredTag ? t`<span class=${a + " pkt-tag--beige"}>${this.requiredText}</span>` : n}
      `}
          ${this.checkHelptext ? t`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
        </label>
      `}
        </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([a({
	type: String,
	reflect: !0
})], u.prototype, "value", void 0), i([a({ type: String })], u.prototype, "checkHelptext", void 0), i([a({ type: Boolean })], u.prototype, "defaultChecked", void 0), i([a({ type: Boolean })], u.prototype, "hasTile", void 0), i([a({
	type: Boolean,
	reflect: !0
})], u.prototype, "checked", void 0), i([a({
	type: String,
	reflect: !0
})], u.prototype, "type", void 0), i([a({ type: String })], u.prototype, "tagText", void 0), i([a({ type: Boolean })], u.prototype, "optionalTag", void 0), i([a({ type: String })], u.prototype, "optionalText", void 0), i([a({ type: Boolean })], u.prototype, "requiredTag", void 0), i([a({ type: String })], u.prototype, "requiredText", void 0), i([r()], u.prototype, "_checked", void 0);
try {
	e("pkt-radiobutton")(u);
} catch {
	console.warn("Forsøker å definere <pkt-radiobutton>, men den er allerede definert");
}
//#endregion
//#region src/components/radiobutton/index.ts
var d = u;
//#endregion
export { u as n, d as t };