@oslokommune/punkt-elements/dist/helptext-B7eI0iBQ.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { P as c, x as a, E as f, n as r, a as w } from "./element-CgEWt74-.js";
import { e as _, n as m } from "./ref-BBYSqgeW.js";
import { o as x } from "./icon-CC1js8eR.js";
import { e as d } from "./class-map-BpTj9gtz.js";
import { r as u } from "./state-Bo2bck5_.js";
import { u as k } from "./stringutils-DJjRa8dG.js";
import { s as v } from "./input-wrapper-8iKEzDRZ.js";
import { P as b } from "./pkt-slot-controller-BPGj-LC5.js";
var S = Object.defineProperty, D = Object.getOwnPropertyDescriptor, p = (o, s, l, n) => {
  for (var t = n > 1 ? void 0 : n ? D(s, l) : s, i = o.length - 1, h; i >= 0; i--)
    (h = o[i]) && (t = (n ? h(s, l, t) : h(t)) || t);
  return n && t && S(s, l, t), t;
};
let e = class extends c {
  constructor() {
    super(), this.defaultSlot = _(), this.forId = k(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = v.props.helptextDropdownButton.default, this.isHelpTextOpen = !1, this.filledSlots = /* @__PURE__ */ new Set(), this.slotController = new b(this, this.defaultSlot);
  }
  updateSlots(o) {
    this.filledSlots = new Set(o);
  }
  render() {
    const o = () => {
      const t = !this.isHelpTextOpen;
      this.isHelpTextOpen = t, this.dispatchEvent(
        new CustomEvent("toggleHelpText", {
          bubbles: !0,
          detail: { isOpen: t }
        })
      );
    }, s = d({
      "pkt-inputwrapper__helptext-container": !0,
      "pkt-inputwrapper__has-helptext": this.helptext || this.helptextDropdown || this.filledSlots.size > 0
    }), l = () => this.helptextDropdown ? a`<div class="pkt-inputwrapper__helptext-expandable">
          <button
            class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
            type="button"
            @click=${o}
          >
            <pkt-icon
              class="pkt-btn__icon"
              name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
            ></pkt-icon>
            <span class="pkt-btn__text">${x(this.helptextDropdownButton)}</span>
          </button>
          <div
            class="${d({
      "pkt-inputwrapper__helptext": !0,
      "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
      "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
    })}"
          >
            ${x(this.helptextDropdown)}
          </div>
        </div>` : f;
    return a`${a`<div class="${s}">
        <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
          <div class="pkt-contents" ${m(this.defaultSlot)} name="helptext"></div>
          ${this.helptext && x(this.helptext)}
        </div>
        ${l()}
      </div>`}`;
  }
};
p([
  r({ type: String, reflect: !0 })
], e.prototype, "forId", 2);
p([
  r({ type: String })
], e.prototype, "helptext", 2);
p([
  r({ type: String })
], e.prototype, "helptextDropdown", 2);
p([
  r({ type: String })
], e.prototype, "helptextDropdownButton", 2);
p([
  u()
], e.prototype, "isHelpTextOpen", 2);
p([
  u()
], e.prototype, "filledSlots", 2);
e = p([
  w("pkt-helptext")
], e);
export {
  e as P
};