@trunkjs/content-pane 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.0.7 (2025-08-29)
+
+This was a version bump only for content-pane to align it with other projects, there were no code changes.
+
 ## 1.0.6 (2025-08-29)
 
 This was a version bump only for content-pane to align it with other projects, there were no code changes.

package/components/tj-content-pane/TjContentPane.d.ts

@@ -1,9 +1,9 @@
 import { ReactiveElement } from 'lit';
 declare const ContentAreaElement2_base: (abstract new (...args: any[]) => {
-    "__#2684@#debugCached": boolean | null;
-    "__#2684@#myElementId": number;
+    "__#2685@#debugCached": boolean | null;
+    "__#2685@#myElementId": number;
     invalidateDebugCache(): void;
-    "__#2684@#myLoggerInstance": import('../../../../browser-utils/src/index.ts').Logger | null;
+    "__#2685@#myLoggerInstance": import('../../../../browser-utils/src/index.ts').Logger | null;
     readonly _debug: boolean;
     getLogger(instanceId?: string): import('../../../../browser-utils/src/index.ts').Logger;
     log(...args: any[]): void;
@@ -15,6 +15,7 @@ export declare class ContentAreaElement2 extends ContentAreaElement2_base {
     static get is(): string;
     createRenderRoot(): HTMLElement | DocumentFragment;
     constructor();
+    arrange(): void;
     connectedCallback(): Promise<void>;
 }
 export {};

package/index.js

@@ -1,83 +1,16 @@
 var C = Object.defineProperty;
 var _ = (n, t, r) => t in n ? C(n, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[t] = r;
 var h = (n, t, r) => _(n, typeof t != "symbol" ? t + "" : t, r);
-import { unsafeCSS as E, LitElement as A, html as N, ReactiveElement as I } from "lit";
-import { property as L, customElement as y } from "lit/decorators.js";
-import { create_element as b, LoggingMixin as k, Stopwatch as T, waitForDomContentLoaded as P } from "@trunkjs/browser-utils";
-function V(n) {
-  return n && typeof n == "object" && "__I__" in n && typeof n.__I__ == "object" && "i" in n.__I__;
-}
-class S {
-  constructor(t, r = !1) {
-    h(this, "rootNode");
-    h(this, "currentContainerNode", null);
-    h(this, "containerPath", []);
-    h(this, "containerIndex", [0]);
-    h(this, "lastFixedI", 20);
-    this.debug = r, this.currentContainerNode = this.rootNode = t, this.containerPath.push(this.rootNode);
-  }
-  getI(t) {
-    const r = t.tagName, o = t.getAttribute("layout"), e = { i: -99, variant: "new", tag: "hr", hi: null };
-    if (o) {
-      const s = /^(\+|-|)([0-9]\.?[0-9]?|)(;|$)/, i = o.match(s);
-      i && (console.debug("Layout matches", i), e.variant = i[1] === "+" ? "append" : i[1] === "-" ? "skip" : "new", i[2] !== "" && (e.i = parseFloat(i[2]) * 10));
-    }
-    if (r.startsWith("H") && r.length === 2) {
-      let s = r.substring(1);
-      return e.tag = "h", e.hi = parseInt(s), s === "1" && (s = "2"), e.i === -99 && (e.i = parseInt(s) * 10, this.lastFixedI = e.i), e;
-    }
-    return e.i === -99 && r === "HR" ? (e.i = this.lastFixedI + 5, e) : null;
-  }
-  getAttributeRecords(t, r = !1) {
-    const o = {};
-    for (const e of t.attributes)
-      e.name.startsWith("section-") ? o[e.name] = e.value.replace(/^section-/, "") : e.name.startsWith("layout") ? (o[e.name] = e.value, t.removeAttribute(e.name)) : r && (o[e.name] = e.value);
-    if (!r)
-      for (const e of Array.from(t.classList))
-        e.startsWith("section-") && (o.class = (o.class || "") + " " + e.replace(/^section-/, ""), t.classList.remove(e));
-    return o;
-  }
-  createNewContainerNode(t, r) {
-    const o = this.getAttributeRecords(t, t.tagName === "HR"), e = b("section", o);
-    return e.__IT = r, e;
-  }
-  arrangeSingleNode(t, r) {
-    r.i;
-    let o = 0;
-    for (o = 0; o < this.containerIndex.length && !(this.containerIndex[o] >= r.i); o++)
-      ;
-    let e = null;
-    r.variant === "append" ? (console.log("Appending to container at index", o, "with i", r.i), e = this.containerPath[o]) : e = this.createNewContainerNode(t, r);
-    const s = this.containerPath[o - 1];
-    this.containerPath.length = o, this.containerIndex.length = o, e.appendChild(t), s.appendChild(e), this.containerPath.push(e), this.containerIndex.push(r.i), this.currentContainerNode = e;
-  }
-  appendToCurrentContainer(t) {
-    if (this.currentContainerNode === null)
-      throw new Error("No current container node set");
-    this.currentContainerNode.appendChild(t);
-  }
-  arrange(t) {
-    for (let r of t) {
-      if (r.nodeType !== Node.ELEMENT_NODE) {
-        this.appendToCurrentContainer(r);
-        continue;
-      }
-      const o = r, e = this.getI(o);
-      if (!e || e.variant === "skip") {
-        this.appendToCurrentContainer(r);
-        continue;
-      }
-      this.arrangeSingleNode(o, e);
-    }
-  }
-}
-const $ = ":host{--border-color: red;--background-color: lightgray;font-family:Arial,sans-serif}#error-fixed-indicator{position:fixed;top:10px;right:10px;cursor:pointer;z-index:100000;padding:5px 10px;width:auto;max-width:90vw;min-width:100px;height:auto;box-shadow:0 4px 8px #0003;border:5px solid white;color:#fff;background-color:red;animation:blink 1s infinite;border-radius:15px;font-size:20px;font-weight:700;font-family:Arial,sans-serif}@keyframes blink{0%,to{background-color:#000}50%{background-color:red}}#error{background-color:var(--background-color);border:3px solid var(--border-color);padding:10px;margin:10px;border-radius:5px}h1{color:red;font-size:24px;margin:0}.error-details{font-size:14px;max-height:200px;overflow:auto}";
-var w = Object.defineProperty, M = Object.getOwnPropertyDescriptor, O = (n, t, r) => t in n ? w(n, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[t] = r, v = (n, t, r, o) => {
-  for (var e = o > 1 ? void 0 : o ? M(t, r) : t, s = n.length - 1, i; s >= 0; s--)
+import { create_element as y, LoggingMixin as E, Stopwatch as A, waitForDomContentLoaded as N } from "@trunkjs/browser-utils";
+import { unsafeCSS as I, LitElement as L, html as k, ReactiveElement as T } from "lit";
+import { property as P, customElement as b } from "lit/decorators.js";
+const S = ":host{--border-color: red;--background-color: lightgray;font-family:Arial,sans-serif}#error-fixed-indicator{position:fixed;top:10px;right:10px;cursor:pointer;z-index:100000;padding:5px 10px;width:auto;max-width:90vw;min-width:100px;height:auto;box-shadow:0 4px 8px #0003;border:5px solid white;color:#fff;background-color:red;animation:blink 1s infinite;border-radius:15px;font-size:20px;font-weight:700;font-family:Arial,sans-serif}@keyframes blink{0%,to{background-color:#000}50%{background-color:red}}#error{background-color:var(--background-color);border:3px solid var(--border-color);padding:10px;margin:10px;border-radius:5px}h1{color:red;font-size:24px;margin:0}.error-details{font-size:14px;max-height:200px;overflow:auto}";
+var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, M = (n, t, r) => t in n ? w(n, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[t] = r, v = (n, t, r, o) => {
+  for (var e = o > 1 ? void 0 : o ? $(t, r) : t, s = n.length - 1, i; s >= 0; s--)
     (i = n[s]) && (e = (o ? i(t, r, e) : i(e)) || e);
   return o && e && w(t, r, e), e;
-}, R = (n, t, r) => O(n, t + "", r);
-let f = class extends A {
+}, O = (n, t, r) => M(n, t + "", r);
+let f = class extends L {
   constructor(t = "An error occurred", r) {
     super();
     h(this, "originalCode");
@@ -88,7 +21,7 @@ let f = class extends A {
     return "tj-error-element";
   }
   render() {
-    return N`
+    return k`
       <div id="error-fixed-indicator" @click=${() => this.scrollIntoView({ behavior: "smooth" })}>
         Err: ${this.message}
       </div>
@@ -104,14 +37,14 @@ let f = class extends A {
     `;
   }
 };
-R(f, "styles", [E($)]);
+O(f, "styles", [I(S)]);
 v([
-  L({ type: String, reflect: !0 })
+  P({ type: String, reflect: !0 })
 ], f.prototype, "message", 2);
 f = v([
-  y("tj-error-element")
+  b("tj-error-element")
 ], f);
-function j(n, { allowAttributes: t = !0, ignoreGaps: r = !0 } = {}) {
+function R(n, { allowAttributes: t = !0, ignoreGaps: r = !0 } = {}) {
   let o = "div", e = null, s = [], i = [], l = {};
   const d = /(^[a-z][\w-]*)|#[\w-]+|\.[\w:-]+|\[\s*([\w-]+)(?:\s*=\s*(['"]?)(.*?)\3)?\s*\]/gi;
   let a = 0;
@@ -134,21 +67,21 @@ function j(n, { allowAttributes: t = !0, ignoreGaps: r = !0 } = {}) {
   }
   return { tag: o, id: e, classes: s, attrs: i, attrsMap: l, length: a, rest: n.slice(a) };
 }
-function D(n) {
+function j(n) {
   return typeof n.beforeLayoutCallback == "function";
 }
-function F(n, t, r) {
+function D(n, t, r) {
   var u, c;
   console.log("Applying layout to element:", n, "with layout:", r);
-  const o = /^(\+|-|)([0-9]+\.?[0-9]*);?/, e = r.replace(o, ""), s = j(e), i = { class: "" };
+  const o = /^(\+|-|)([0-9]+\.?[0-9]*);?/, e = r.replace(o, ""), s = R(e), i = { class: "" };
   s.attrsMap.class && (i.class = s.attrsMap.class + " "), i.class += s.classes.join(" "), i.id = s.id, ((u = i.class) == null ? void 0 : u.trim()) === "" && delete i.class, ((c = i.id) == null ? void 0 : c.trim()) === "" && delete i.id;
   const l = s.tag || "div";
-  let d = !1, a = b(l, { ...i, layoutOrig: r });
+  let d = !1, a = y(l, { ...i, layoutOrig: r });
   if (l.includes("-") && !customElements.get(l))
     console.warn(`Custom element <${l}> is not registered.`), a = new f(`Custom element <${l}> is not registered.`, n.outerHTML), n.replaceWith(a), a.append(n), d = !0;
   else {
     const p = Array.from(n.children);
-    D(a) && (d = a.beforeLayoutCallback(n, a, p) === !1), console.log(
+    j(a) && (d = a.beforeLayoutCallback(n, a, p) === !1), console.log(
       "Replacement element created:",
       a,
       "with children:",
@@ -172,18 +105,85 @@ function g(n, t = {}) {
     return [];
   const e = n.getAttribute("layout");
   let s = !1, i = n;
-  if (e && ({ replacementElement: i, skipChildren: s } = F(n, t, e)), r && !s) {
+  if (e && ({ replacementElement: i, skipChildren: s } = D(n, t, e)), r && !s) {
     const l = Array.from(i.children);
     console.log("Applying layout to children:", l, "of element:", i), l.forEach((d) => o.push(...g(d, t)));
   }
   return o;
 }
+function V(n) {
+  return n && typeof n == "object" && "__I__" in n && typeof n.__I__ == "object" && "i" in n.__I__;
+}
+class F {
+  constructor(t, r = !1) {
+    h(this, "rootNode");
+    h(this, "currentContainerNode", null);
+    h(this, "containerPath", []);
+    h(this, "containerIndex", [0]);
+    h(this, "lastFixedI", 20);
+    this.debug = r, this.currentContainerNode = this.rootNode = t, this.containerPath.push(this.rootNode);
+  }
+  getI(t) {
+    const r = t.tagName, o = t.getAttribute("layout"), e = { i: -99, variant: "new", tag: "hr", hi: null };
+    if (o) {
+      const s = /^(\+|-|)([0-9]\.?[0-9]?|)(;|$)/, i = o.match(s);
+      i && (console.debug("Layout matches", i), e.variant = i[1] === "+" ? "append" : i[1] === "-" ? "skip" : "new", i[2] !== "" && (e.i = parseFloat(i[2]) * 10));
+    }
+    if (r.startsWith("H") && r.length === 2) {
+      let s = r.substring(1);
+      return e.tag = "h", e.hi = parseInt(s), s === "1" && (s = "2"), e.i === -99 && (e.i = parseInt(s) * 10, this.lastFixedI = e.i), e;
+    }
+    return e.i === -99 && r === "HR" ? (e.i = this.lastFixedI + 5, e) : null;
+  }
+  getAttributeRecords(t, r = !1) {
+    const o = {};
+    for (const e of t.attributes)
+      e.name.startsWith("section-") ? o[e.name] = e.value.replace(/^section-/, "") : e.name.startsWith("layout") ? (o[e.name] = e.value, t.removeAttribute(e.name)) : r && (o[e.name] = e.value);
+    if (!r)
+      for (const e of Array.from(t.classList))
+        e.startsWith("section-") && (o.class = (o.class || "") + " " + e.replace(/^section-/, ""), t.classList.remove(e));
+    return o;
+  }
+  createNewContainerNode(t, r) {
+    const o = this.getAttributeRecords(t, t.tagName === "HR"), e = y("section", o);
+    return e.__IT = r, e;
+  }
+  arrangeSingleNode(t, r) {
+    r.i;
+    let o = 0;
+    for (o = 0; o < this.containerIndex.length && !(this.containerIndex[o] >= r.i); o++)
+      ;
+    let e = null;
+    r.variant === "append" ? (console.log("Appending to container at index", o, "with i", r.i), e = this.containerPath[o]) : e = this.createNewContainerNode(t, r);
+    const s = this.containerPath[o - 1];
+    this.containerPath.length = o, this.containerIndex.length = o, e.appendChild(t), s.appendChild(e), this.containerPath.push(e), this.containerIndex.push(r.i), this.currentContainerNode = e;
+  }
+  appendToCurrentContainer(t) {
+    if (this.currentContainerNode === null)
+      throw new Error("No current container node set");
+    this.currentContainerNode.appendChild(t);
+  }
+  arrange(t) {
+    for (let r of t) {
+      if (r.nodeType !== Node.ELEMENT_NODE) {
+        this.appendToCurrentContainer(r);
+        continue;
+      }
+      const o = r, e = this.getI(o);
+      if (!e || e.variant === "skip") {
+        this.appendToCurrentContainer(r);
+        continue;
+      }
+      this.arrangeSingleNode(o, e);
+    }
+  }
+}
 var W = Object.getOwnPropertyDescriptor, z = (n, t, r, o) => {
   for (var e = o > 1 ? void 0 : o ? W(t, r) : t, s = n.length - 1, i; s >= 0; s--)
     (i = n[s]) && (e = i(e) || e);
   return e;
 };
-let x = class extends k(I) {
+let x = class extends E(T) {
   static get is() {
     return "tj-content-pane";
   }
@@ -193,15 +193,18 @@ let x = class extends k(I) {
   constructor() {
     super();
   }
-  async connectedCallback() {
-    const n = new T("SectionTreeBuilder");
-    await P(), super.connectedCallback();
-    const t = new S(this), r = Array.from(this.children);
+  arrange() {
+    const n = new A("SectionTreeBuilder");
+    this.log("arrange() called");
+    const t = new F(this), r = Array.from(this.children);
     t.arrange(r), g(Array.from(this.children), { recursive: !0 }), n.lap("after arrange");
   }
+  async connectedCallback() {
+    await N(), super.connectedCallback(), this.arrange();
+  }
 };
 x = z([
-  y("tj-content-pane")
+  b("tj-content-pane")
 ], x);
 function J(n, t, r) {
   const o = [], e = t.split("|");
@@ -218,7 +221,7 @@ function J(n, t, r) {
 }
 export {
   x as ContentAreaElement2,
-  S as SectionTreeBuilder,
+  F as SectionTreeBuilder,
   g as applyLayout,
   J as attrAssign,
   V as isSectionTreeElement

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@trunkjs/content-pane",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "main": "./index.js",
     "dependencies": {
         "@trunkjs/browser-utils": "^1.0.14",

package/web-types.json

@@ -5,7 +5,7 @@
         "html": {
             "elements": [
                 {
-                    "name": "content-pane",
+                    "name": "tj-content-pane",
                     "description": "Creates a tree strcture from flat content",
                     "attributes": [
                         {