@oslokommune/punkt-elements 16.0.3 → 16.1.0

package/dist/element-with-slot-1djk8KXi.js

@@ -0,0 +1,240 @@
+import { E as l, P as C } from "./element-CV9utnHJ.js";
+import { f as y } from "./async-directive-CKx6pubI.js";
+import { e as O, t as D } from "./directive-oAbCiebi.js";
+function T(s) {
+  return s.classList && (s.classList.contains("_dialog_overlay") || s.classList.contains("backdrop")) ? !0 : typeof s.hasAttribute == "function" && s.hasAttribute("data-skip");
+}
+function E(s) {
+  return s.nodeName === "OPTION" || s.nodeName === "DATA";
+}
+function b(s) {
+  var e;
+  return s.nodeType === Node.TEXT_NODE && ((e = s.nodeValue) == null ? void 0 : e.trim()) !== "";
+}
+const p = /* @__PURE__ */ new WeakMap();
+function f(s) {
+  let e = p.get(s);
+  return e || (e = new m(s), p.set(s, e)), e;
+}
+const N = Symbol("default");
+function g(s) {
+  return s === void 0 ? N : s;
+}
+function v(s, e) {
+  if (s.nodeType === Node.COMMENT_NODE) return !1;
+  if (s.nodeType === Node.TEXT_NODE)
+    return b(s) ? (u(e, N, s), !0) : !1;
+  if (s.nodeType === Node.ELEMENT_NODE) {
+    const t = s;
+    if (T(t) || E(t)) return !1;
+    if (t instanceof HTMLTemplateElement) {
+      const h = Array.from(t.content.childNodes), a = g(t.getAttribute("slot") ?? void 0);
+      for (const i of h)
+        u(e, a, i);
+      return !0;
+    }
+    const o = t.getAttribute("slot"), r = o !== null ? g(o) : N;
+    return u(e, r, s), !0;
+  }
+  return !1;
+}
+function u(s, e, t) {
+  let o = s.get(e);
+  o || (o = [], s.set(e, o)), o.push(t);
+}
+const c = class c {
+  constructor(e) {
+    this.observer = null, this.nodesBySlot = /* @__PURE__ */ new Map(), this.directives = /* @__PURE__ */ new Set(), this.observing = !1, this.trackedNodes = /* @__PURE__ */ new Set(), this.generation = 0, this.initialCollectionDone = !1, this.processingMutations = !1, this.placeholderToNode = /* @__PURE__ */ new Map(), this.nodeToPlaceholder = /* @__PURE__ */ new Map(), this.host = e;
+  }
+  /**
+   * Collect original children BEFORE Lit's first render.
+   * Must be called in connectedCallback or earlier.
+   * Safe to call multiple times — only the first call scans.
+   */
+  collectNodes() {
+    if (this.initialCollectionDone) return;
+    this.initialCollectionDone = !0, this.generation++;
+    const e = Array.from(this.host.childNodes);
+    for (const t of e)
+      v(t, this.nodesBySlot) && this.trackedNodes.add(t);
+  }
+  /**
+   * Register a directive instance and start observing for dynamic changes.
+   */
+  addDirective(e) {
+    this.directives.add(e), this.startObserving();
+  }
+  /**
+   * Unregister a directive instance. Stops observing if no directives remain.
+   */
+  removeDirective(e) {
+    this.directives.delete(e), this.directives.size === 0 && this.stopObserving();
+  }
+  /**
+   * Returns nodes matching the given slot name.
+   */
+  getNodes(e) {
+    return this.nodesBySlot.get(g(e)) ?? [];
+  }
+  /**
+   * Returns whether the given slot has any content.
+   */
+  hasContent(e) {
+    return this.getNodes(e).length > 0;
+  }
+  /**
+   * Ensure a placeholder comment exists for a node that is about to be distributed.
+   * Called by the directive before Lit moves the node to the target position.
+   * The placeholder stays between Lit's ChildPart markers so that when the parent
+   * template conditionally removes the content, the MutationObserver can detect
+   * the placeholder removal and clean up the real node.
+   */
+  ensurePlaceholder(e) {
+    if (this.nodeToPlaceholder.has(e) || e.parentNode !== this.host) return;
+    const t = document.createComment(c.PLACEHOLDER_PREFIX);
+    this.host.insertBefore(t, e), this.placeholderToNode.set(t, e), this.nodeToPlaceholder.set(e, t);
+  }
+  // --- Private ---
+  /**
+   * Start MutationObserver for dynamic child changes.
+   * Deferred via setTimeout to avoid catching Lit's first render mutations.
+   */
+  startObserving() {
+    this.observing || (this.observing = !0, setTimeout(() => {
+      this.observing && (this.observer = new MutationObserver((e) => {
+        this.handleMutations(e);
+      }), this.observer.observe(this.host, { childList: !0 }));
+    }, 0));
+  }
+  stopObserving() {
+    var e;
+    this.observing && (this.observing = !1, (e = this.observer) == null || e.disconnect(), this.observer = null);
+  }
+  /**
+   * Handle MutationObserver mutations incrementally.
+   * Only processes nodes that are NOT already part of Lit's rendered template.
+   *
+   * Uses a guard flag to prevent recursive handling: when notifyDirectives()
+   * causes setValue() to move nodes (e.g., from host into a ChildPart container),
+   * that move triggers another mutation which must be ignored.
+   */
+  handleMutations(e) {
+    var o, r, h;
+    if (this.processingMutations) return;
+    this.processingMutations = !0;
+    let t = !1;
+    for (const a of e)
+      if (a.target === this.host) {
+        for (const i of a.removedNodes) {
+          const n = this.placeholderToNode.get(i);
+          if (n) {
+            (o = n.parentNode) == null || o.removeChild(n), this.trackedNodes.delete(n), this.removeFromSlots(n), this.placeholderToNode.delete(i), this.nodeToPlaceholder.delete(n), t = !0;
+            continue;
+          }
+          if (this.trackedNodes.has(i)) {
+            this.trackedNodes.delete(i), this.removeFromSlots(i);
+            const d = this.nodeToPlaceholder.get(i);
+            d && ((r = d.parentNode) == null || r.removeChild(d), this.placeholderToNode.delete(d), this.nodeToPlaceholder.delete(i)), t = !0;
+          }
+        }
+        for (const i of a.addedNodes)
+          this.placeholderToNode.has(i) || !this.trackedNodes.has(i) && this.isUserContent(i) && v(i, this.nodesBySlot) && (this.trackedNodes.add(i), t = !0);
+      }
+    t && (this.generation++, this.notifyDirectives()), (h = this.observer) == null || h.takeRecords(), this.processingMutations = !1;
+  }
+  /**
+   * Determines if a node is user-provided content (not Lit's rendered template).
+   * Lit's rendered content includes comment markers and elements created by the template.
+   */
+  isUserContent(e) {
+    if (e.nodeType === Node.COMMENT_NODE) return !1;
+    if (e.nodeType === Node.TEXT_NODE)
+      return b(e);
+    if (e.nodeType === Node.ELEMENT_NODE) {
+      const t = e;
+      return !(T(t) || E(t));
+    }
+    return !1;
+  }
+  removeFromSlots(e) {
+    for (const [t, o] of this.nodesBySlot) {
+      const r = o.indexOf(e);
+      if (r !== -1) {
+        o.splice(r, 1), o.length === 0 && this.nodesBySlot.delete(t);
+        return;
+      }
+    }
+  }
+  notifyDirectives() {
+    for (const e of this.directives)
+      e.handleNodesChanged();
+  }
+};
+c.PLACEHOLDER_PREFIX = "pkt-slot";
+let m = c;
+class P extends y {
+  constructor(e) {
+    if (super(e), this.manager = null, this.lastGeneration = -1, e.type !== D.CHILD)
+      throw new Error("slotContent() can only be used in child expressions");
+  }
+  render(e, t) {
+    return l;
+  }
+  update(e, [t, o]) {
+    return this.slotName = o, this.manager || (this.manager = f(t), this.manager.collectNodes(), this.manager.addDirective(this)), this.ensurePlaceholders(), this.getNodesOrNoChange();
+  }
+  /**
+   * Called by SlotManager when child mutations are detected.
+   * Uses setValue() to push an async update to Lit.
+   */
+  handleNodesChanged() {
+    if (!this.isConnected || !this.manager) return;
+    this.ensurePlaceholders();
+    const e = this.getNodesOrNoChange();
+    e !== l && this.setValue(e);
+  }
+  /**
+   * Insert placeholders for nodes that are still direct children of the host.
+   * Must be called before Lit moves them to the target position.
+   */
+  ensurePlaceholders() {
+    if (!this.manager) return;
+    const e = this.manager.getNodes(this.slotName);
+    for (const t of e)
+      this.manager.ensurePlaceholder(t);
+  }
+  disconnected() {
+    var e;
+    (e = this.manager) == null || e.removeDirective(this), this.manager = null, this.lastGeneration = -1;
+  }
+  reconnected() {
+  }
+  getNodesOrNoChange() {
+    if (!this.manager) return l;
+    const e = this.manager.generation;
+    return e === this.lastGeneration ? l : (this.lastGeneration = e, this.manager.getNodes(this.slotName));
+  }
+}
+const L = O(P);
+class A extends C {
+  /**
+   * Pre-collect children before Lit's first render clears them.
+   * This ensures slotContent() has access to the original children.
+   */
+  connectedCallback() {
+    f(this).collectNodes(), super.connectedCallback();
+  }
+  /**
+   * Checks if a slot has content distributed to it via the slotContent directive.
+   *
+   * @param slotName - Name of the slot. Omit for the default slot.
+   */
+  hasSlotContent(e) {
+    return f(this).hasContent(e);
+  }
+}
+export {
+  A as P,
+  E as i,
+  L as s
+};

package/dist/element-with-slot-yT8k1Z37.cjs

@@ -0,0 +1 @@
+"use strict";const h=require("./element-CMTfByxQ.cjs"),y=require("./async-directive-B158h3ba.cjs"),E=require("./directive-C7oCP5Bh.cjs");function C(s){return s.classList&&(s.classList.contains("_dialog_overlay")||s.classList.contains("backdrop"))?!0:typeof s.hasAttribute=="function"&&s.hasAttribute("data-skip")}function p(s){return s.nodeName==="OPTION"||s.nodeName==="DATA"}function b(s){var e;return s.nodeType===Node.TEXT_NODE&&((e=s.nodeValue)==null?void 0:e.trim())!==""}const v=new WeakMap;function f(s){let e=v.get(s);return e||(e=new m(s),v.set(s,e)),e}const N=Symbol("default");function g(s){return s===void 0?N:s}function T(s,e){if(s.nodeType===Node.COMMENT_NODE)return!1;if(s.nodeType===Node.TEXT_NODE)return b(s)?(u(e,N,s),!0):!1;if(s.nodeType===Node.ELEMENT_NODE){const t=s;if(C(t)||p(t))return!1;if(t instanceof HTMLTemplateElement){const l=Array.from(t.content.childNodes),a=g(t.getAttribute("slot")??void 0);for(const i of l)u(e,a,i);return!0}const o=t.getAttribute("slot"),n=o!==null?g(o):N;return u(e,n,s),!0}return!1}function u(s,e,t){let o=s.get(e);o||(o=[],s.set(e,o)),o.push(t)}const c=class c{constructor(e){this.observer=null,this.nodesBySlot=new Map,this.directives=new Set,this.observing=!1,this.trackedNodes=new Set,this.generation=0,this.initialCollectionDone=!1,this.processingMutations=!1,this.placeholderToNode=new Map,this.nodeToPlaceholder=new Map,this.host=e}collectNodes(){if(this.initialCollectionDone)return;this.initialCollectionDone=!0,this.generation++;const e=Array.from(this.host.childNodes);for(const t of e)T(t,this.nodesBySlot)&&this.trackedNodes.add(t)}addDirective(e){this.directives.add(e),this.startObserving()}removeDirective(e){this.directives.delete(e),this.directives.size===0&&this.stopObserving()}getNodes(e){return this.nodesBySlot.get(g(e))??[]}hasContent(e){return this.getNodes(e).length>0}ensurePlaceholder(e){if(this.nodeToPlaceholder.has(e)||e.parentNode!==this.host)return;const t=document.createComment(c.PLACEHOLDER_PREFIX);this.host.insertBefore(t,e),this.placeholderToNode.set(t,e),this.nodeToPlaceholder.set(e,t)}startObserving(){this.observing||(this.observing=!0,setTimeout(()=>{this.observing&&(this.observer=new MutationObserver(e=>{this.handleMutations(e)}),this.observer.observe(this.host,{childList:!0}))},0))}stopObserving(){var e;this.observing&&(this.observing=!1,(e=this.observer)==null||e.disconnect(),this.observer=null)}handleMutations(e){var o,n,l;if(this.processingMutations)return;this.processingMutations=!0;let t=!1;for(const a of e)if(a.target===this.host){for(const i of a.removedNodes){const r=this.placeholderToNode.get(i);if(r){(o=r.parentNode)==null||o.removeChild(r),this.trackedNodes.delete(r),this.removeFromSlots(r),this.placeholderToNode.delete(i),this.nodeToPlaceholder.delete(r),t=!0;continue}if(this.trackedNodes.has(i)){this.trackedNodes.delete(i),this.removeFromSlots(i);const d=this.nodeToPlaceholder.get(i);d&&((n=d.parentNode)==null||n.removeChild(d),this.placeholderToNode.delete(d),this.nodeToPlaceholder.delete(i)),t=!0}}for(const i of a.addedNodes)this.placeholderToNode.has(i)||!this.trackedNodes.has(i)&&this.isUserContent(i)&&T(i,this.nodesBySlot)&&(this.trackedNodes.add(i),t=!0)}t&&(this.generation++,this.notifyDirectives()),(l=this.observer)==null||l.takeRecords(),this.processingMutations=!1}isUserContent(e){if(e.nodeType===Node.COMMENT_NODE)return!1;if(e.nodeType===Node.TEXT_NODE)return b(e);if(e.nodeType===Node.ELEMENT_NODE){const t=e;return!(C(t)||p(t))}return!1}removeFromSlots(e){for(const[t,o]of this.nodesBySlot){const n=o.indexOf(e);if(n!==-1){o.splice(n,1),o.length===0&&this.nodesBySlot.delete(t);return}}}notifyDirectives(){for(const e of this.directives)e.handleNodesChanged()}};c.PLACEHOLDER_PREFIX="pkt-slot";let m=c;class O extends y.f{constructor(e){if(super(e),this.manager=null,this.lastGeneration=-1,e.type!==E.t.CHILD)throw new Error("slotContent() can only be used in child expressions")}render(e,t){return h.E}update(e,[t,o]){return this.slotName=o,this.manager||(this.manager=f(t),this.manager.collectNodes(),this.manager.addDirective(this)),this.ensurePlaceholders(),this.getNodesOrNoChange()}handleNodesChanged(){if(!this.isConnected||!this.manager)return;this.ensurePlaceholders();const e=this.getNodesOrNoChange();e!==h.E&&this.setValue(e)}ensurePlaceholders(){if(!this.manager)return;const e=this.manager.getNodes(this.slotName);for(const t of e)this.manager.ensurePlaceholder(t)}disconnected(){var e;(e=this.manager)==null||e.removeDirective(this),this.manager=null,this.lastGeneration=-1}reconnected(){}getNodesOrNoChange(){if(!this.manager)return h.E;const e=this.manager.generation;return e===this.lastGeneration?h.E:(this.lastGeneration=e,this.manager.getNodes(this.slotName))}}const D=E.e(O);class P extends h.PktElement{connectedCallback(){f(this).collectNodes(),super.connectedCallback()}hasSlotContent(e){return f(this).hasContent(e)}}exports.PktElementWithSlot=P;exports.isOptionElement=p;exports.slotContent=D;

package/dist/helptext-B366oeR9.cjs

@@ -0,0 +1,24 @@
+"use strict";const x=require("./element-with-slot-yT8k1Z37.cjs"),e=require("./element-CMTfByxQ.cjs"),h=require("./icon-Dj0oZZSa.cjs"),c=require("./class-map-Bokp1SoS.cjs"),u=require("./state-BNgpvY-A.cjs"),a=require("./utils-byXsEz1u.cjs"),d=require("./input-wrapper-EoSAbU-U.cjs");var k=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(o,p,l,n)=>{for(var t=n>1?void 0:n?_(p,l):p,s=o.length-1,i;s>=0;s--)(i=o[s])&&(t=(n?i(p,l,t):i(t))||t);return n&&t&&k(p,l,t),t};exports.PktHelptext=class extends x.PktElementWithSlot{constructor(){super(...arguments),this.forId=a.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=d.specs.props.helptextDropdownButton.default,this.isHelpTextOpen=!1}render(){const p=()=>{const s=!this.isHelpTextOpen;this.isHelpTextOpen=s,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:s}}))},l=c.e({"pkt-inputwrapper__helptext-container":!0,"pkt-inputwrapper__has-helptext":this.helptext||this.helptextDropdown||this.hasSlotContent()}),n=()=>this.helptextDropdown?e.b`<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=${p}
+          >
+            <pkt-icon
+              class="pkt-btn__icon"
+              name="${this.isHelpTextOpen?"chevron-thin-up":"chevron-thin-down"}"
+            ></pkt-icon>
+            <span class="pkt-btn__text">${h.o(this.helptextDropdownButton)}</span>
+          </button>
+          <div
+            class="${c.e({"pkt-inputwrapper__helptext":!0,"pkt-inputwrapper__helptext-expandable-open":this.isHelpTextOpen,"pkt-inputwrapper__helptext-expandable-closed":!this.isHelpTextOpen})}"
+          >
+            ${h.o(this.helptextDropdown)}
+          </div>
+        </div>`:e.A,t=()=>e.b`<div class="${l}">
+        <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+          <div class="pkt-contents" name="helptext">${x.slotContent(this)}</div>
+          ${this.helptext&&h.o(this.helptext)}
+        </div>
+        ${n()}
+      </div>`;return e.b`${t()}`}};r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"forId",2);r([e.n({type:String})],exports.PktHelptext.prototype,"helptext",2);r([e.n({type:String})],exports.PktHelptext.prototype,"helptextDropdown",2);r([e.n({type:String})],exports.PktHelptext.prototype,"helptextDropdownButton",2);r([u.r()],exports.PktHelptext.prototype,"isHelpTextOpen",2);exports.PktHelptext=r([e.t("pkt-helptext")],exports.PktHelptext);

package/dist/{helptext-TFpeGJ1P.js → helptext-DepcDYFV.js}

@@ -1,25 +1,21 @@
-import { P as c, b as a, A as f, n as r, t as w } from "./element-CV9utnHJ.js";
-import { e as _, n as m } from "./ref-Dma3n3i8.js";
+import { P as u, s as c } from "./element-with-slot-1djk8KXi.js";
+import { b as a, A as _, n as i, t as m } from "./element-CV9utnHJ.js";
 import { o as x } from "./icon-D0IQAVwS.js";
 import { e as d } from "./class-map-3ADKve8g.js";
-import { r as u } from "./state-l4hGZdFJ.js";
-import { u as k } from "./utils-DznhwRXm.js";
-import { s as v } from "./input-wrapper-CDgenrYA.js";
-import { P as b } from "./pkt-slot-controller-D7CrjM52.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;
+import { r as w } from "./state-l4hGZdFJ.js";
+import { u as v } from "./utils-DznhwRXm.js";
+import { s as f } from "./input-wrapper-CDgenrYA.js";
+var k = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (s, p, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? b(p, r) : p, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (t = (o ? h(p, r, t) : h(t)) || t);
+  return o && t && k(p, r, t), t;
 };
-let e = class extends c {
+let e = class extends u {
   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);
+    super(...arguments), this.forId = v(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = f.props.helptextDropdownButton.default, this.isHelpTextOpen = !1;
   }
   render() {
-    const o = () => {
+    const s = () => {
       const t = !this.isHelpTextOpen;
       this.isHelpTextOpen = t, this.dispatchEvent(
         new CustomEvent("toggleHelpText", {
@@ -27,14 +23,14 @@ let e = class extends c {
           detail: { isOpen: t }
         })
       );
-    }, s = d({
+    }, p = 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">
+      "pkt-inputwrapper__has-helptext": this.helptext || this.helptextDropdown || this.hasSlotContent()
+    }), r = () => 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}
+            @click=${s}
           >
             <pkt-icon
               class="pkt-btn__icon"
@@ -51,36 +47,33 @@ let e = class extends c {
           >
             ${x(this.helptextDropdown)}
           </div>
-        </div>` : f;
-    return a`${a`<div class="${s}">
+        </div>` : _;
+    return a`${a`<div class="${p}">
         <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-          <div class="pkt-contents" ${m(this.defaultSlot)} name="helptext"></div>
+          <div class="pkt-contents" name="helptext">${c(this)}</div>
           ${this.helptext && x(this.helptext)}
         </div>
-        ${l()}
+        ${r()}
       </div>`}`;
   }
 };
-p([
-  r({ type: String, reflect: !0 })
+n([
+  i({ type: String, reflect: !0 })
 ], e.prototype, "forId", 2);
-p([
-  r({ type: String })
+n([
+  i({ type: String })
 ], e.prototype, "helptext", 2);
-p([
-  r({ type: String })
+n([
+  i({ type: String })
 ], e.prototype, "helptextDropdown", 2);
-p([
-  r({ type: String })
+n([
+  i({ type: String })
 ], e.prototype, "helptextDropdownButton", 2);
-p([
-  u()
+n([
+  w()
 ], e.prototype, "isHelpTextOpen", 2);
-p([
-  u()
-], e.prototype, "filledSlots", 2);
-e = p([
-  w("pkt-helptext")
+e = n([
+  m("pkt-helptext")
 ], e);
 export {
   e as P