@oslokommune/punkt-elements/dist/checkbox-CTRbpbye.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

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