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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { x as h, E as n, n as s, a as d } from "./element-CgEWt74-.js";
import { r as k } from "./state-Bo2bck5_.js";
import { P as f } from "./input-element-NnrDmp4r.js";
import { e as g, n as y } from "./ref-BBYSqgeW.js";
import { e as u } from "./class-map-BpTj9gtz.js";
var $ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, p, c, l) => {
  for (var a = l > 1 ? void 0 : l ? b(p, c) : p, r = e.length - 1, o; r >= 0; r--)
    (o = e[r]) && (a = (l ? o(p, c, a) : o(a)) || a);
  return l && a && $(p, c, a), a;
};
let t = class extends f {
  constructor() {
    super(...arguments), this.inputRef = g(), 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, p, c) {
    e === "defaultChecked" && (this._checked = this.defaultChecked), e === "checked" && (this._checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(e, p, c);
  }
  render() {
    const e = u({
      "pkt-input-check__input": !0,
      "pkt-input-check__input--tile": this.hasTile,
      "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
    }), p = u({
      "pkt-input-check__input-checkbox": !0,
      "pkt-input-check__input-checkbox--error": this.hasError
    }), c = u({
      "pkt-input-check__input-label": !0,
      "pkt-input-check__input-label--disabled": this.disabled,
      "pkt-sr-only": this.hideLabel
    }), l = "pkt-tag pkt-tag--small pkt-tag--thin-text", a = () => h`
        ${this.tagText ? h`<span class=${l + " pkt-tag--gray"}>${this.tagText}</span>` : n}
        ${this.optionalTag ? h`<span class=${l + " pkt-tag--blue-light"}>${this.optionalText}</span>` : n}
        ${this.requiredTag ? h`<span class=${l + " pkt-tag--beige"}>${this.requiredText}</span>` : n}
      `, r = () => h`
        <label class=${c} for=${this.id + "-internal"}>
          ${this.label} ${a()}
          ${this.checkHelptext ? h`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
        </label>
      `;
    return h`
      <div class="pkt-input-check">
        <div class=${e}>
          <input
            id=${this.id + "-internal"}
            class=${p}
            type="radio"
            role="radio"
            ?disabled=${this.disabled}
            form=""
            name=${this.name + "-internal"}
            ${y(this.inputRef)}
            @change=${this.toggleChecked}
            @input=${this.onInput}
            @blur=${this.onBlur}
            @focus=${this.onFocus}
            ?checked=${this.checked}
          />
          ${r()}
        </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([
  s({ type: String, reflect: !0 })
], t.prototype, "value", 2);
i([
  s({ type: String })
], t.prototype, "checkHelptext", 2);
i([
  s({ type: Boolean })
], t.prototype, "defaultChecked", 2);
i([
  s({ type: Boolean })
], t.prototype, "hasTile", 2);
i([
  s({ type: Boolean, reflect: !0 })
], t.prototype, "checked", 2);
i([
  s({ type: String, reflect: !0 })
], t.prototype, "type", 2);
i([
  s({ type: String })
], t.prototype, "tagText", 2);
i([
  s({ type: Boolean })
], t.prototype, "optionalTag", 2);
i([
  s({ type: String })
], t.prototype, "optionalText", 2);
i([
  s({ type: Boolean })
], t.prototype, "requiredTag", 2);
i([
  s({ type: String })
], t.prototype, "requiredText", 2);
i([
  k()
], t.prototype, "_checked", 2);
t = i([
  d("pkt-radiobutton")
], t);
export {
  t as P
};