@trunkjs/browser-utils 1.0.43 → 1.0.47

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.0.47 (2026-05-07)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
+## 1.0.46 (2026-05-07)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
+## 1.0.45 (2026-05-07)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
+## 1.0.44 (2026-05-07)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
 ## 1.0.43 (2026-04-23)
 
 This was a version bump only for browser-utils to align it with other projects, there were no code changes.

package/index.d.ts

@@ -9,4 +9,43 @@ export * from './lib/wait-for';
 export * from './mixins/BreakPointMixin';
 export * from './mixins/EventBindingsMixin';
 export * from './mixins/LoggingMixin';
+export * from './mixins/LoaderMixin';
 export * from './mixins/SlotVisibilityMixin';
+export type ElementSpec = {
+    element: HTMLElement;
+    state: 'wait' | 'ready';
+};
+/**
+ * THIS IS A COPY of the Loader events
+ */
+declare global {
+    interface CustomEventMap {
+        /**
+         * Event to be fired from HtmlElement on connectedCallback to indicate to the loader to wait for a element
+         */
+        'init:child-waitreq': CustomEvent<ElementSpec>;
+        /**
+         * Event to be fired from HtmlElement after the element is fully initialized and ready.
+         */
+        'init:child-ready': CustomEvent<ElementSpec>;
+        /**
+         * Fired as soon as all Elements are ready and displayed but not visual yet (visability: hidden). This can be used to perform any last minute adjustments before the loader is hidden and the content is visible.
+         */
+        'loader:ready': CustomEvent<void>;
+        /**
+         * Fired when the loader is hidden and the content is visible but before blend animation. This can be used to perform any actions that should only be performed when the content is visible, such as starting animations or loading additional resources.
+         */
+        'loader:pre-visual': CustomEvent<void>;
+        /**
+         * Fired when the content is fully visible to the user. This can be used to perform any actions that should only be performed when the content is visible, such as starting animations or loading additional resources.
+         */
+        'loader:visual': CustomEvent<void>;
+    }
+    interface Window {
+        /**
+         * Flag to indicate that the loader component is active and that custom elements should wait for the
+         * loader events before initializing. This is used to prevent
+         */
+        tj_loader_state: "loading" | "ready" | "pre-visual" | "visual";
+    }
+}

package/index.js

@@ -1,37 +1,37 @@
-var N = Object.defineProperty;
-var L = (e) => {
+var D = Object.defineProperty;
+var x = (e) => {
   throw TypeError(e);
 };
-var B = (e, t, n) => t in e ? N(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var l = (e, t, n) => B(e, typeof t != "symbol" ? t + "" : t, n), v = (e, t, n) => t.has(e) || L("Cannot " + n);
-var u = (e, t, n) => (v(e, t, "read from private field"), n ? n.call(e) : t.get(e)), h = (e, t, n) => t.has(e) ? L("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), w = (e, t, n, i) => (v(e, t, "write to private field"), i ? i.call(e, n) : t.set(e, n), n), y = (e, t, n) => (v(e, t, "access private method"), n);
-const T = [
+var R = (e, t, n) => t in e ? D(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var c = (e, t, n) => R(e, typeof t != "symbol" ? t + "" : t, n), k = (e, t, n) => t.has(e) || x("Cannot " + n);
+var u = (e, t, n) => (k(e, t, "read from private field"), n ? n.call(e) : t.get(e)), h = (e, t, n) => t.has(e) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), w = (e, t, n, i) => (k(e, t, "write to private field"), i ? i.call(e, n) : t.set(e, n), n), y = (e, t, n) => (k(e, t, "access private method"), n);
+const v = [
   { name: "xs", minWidth: 0 },
   { name: "sm", minWidth: 576 },
   { name: "md", minWidth: 768 },
   { name: "lg", minWidth: 992 },
   { name: "xl", minWidth: 1200 },
   { name: "xxl", minWidth: 1400 }
-], p = T.reduce(
+], _ = v.reduce(
   (e, t) => (e[t.name] = t.minWidth, e),
   {}
 );
 function E(e) {
-  if (!(e in p))
+  if (!(e in _))
     throw new Error(`Unknown breakpoint: ${e}`);
-  return p[e];
+  return _[e];
 }
-function D() {
+function O() {
   return window.visualViewport ? window.visualViewport.width : window.innerWidth;
 }
-function R(e) {
-  e === void 0 && (e = D());
-  for (let t = T.length - 1; t >= 0; t--)
-    if (e >= T[t].minWidth)
-      return T[t].name;
+function U(e) {
+  e === void 0 && (e = O());
+  for (let t = v.length - 1; t >= 0; t--)
+    if (e >= v[t].minWidth)
+      return v[t].name;
   return "xs";
 }
-function G(e, t = {}, n = []) {
+function J(e, t = {}, n = []) {
   Array.isArray(n) || (n = [n]);
   const i = document.createElement(e);
   for (const r in t)
@@ -40,16 +40,16 @@ function G(e, t = {}, n = []) {
     i.append(typeof r == "string" ? document.createTextNode(r) : r);
   return i;
 }
-class M {
+class P {
   /**
    *
    * @param delay     Debounce delay in milliseconds
    * @param max_delay Maximum delay in milliseconds, if false then no maximum delay is applied
    */
   constructor(t, n = !1) {
-    l(this, "timeout", null);
-    l(this, "startTimeWithMs", 0);
-    l(this, "maxTimeout", null);
+    c(this, "timeout", null);
+    c(this, "startTimeWithMs", 0);
+    c(this, "maxTimeout", null);
     this.delay = t, this.max_delay = n;
   }
   async wait() {
@@ -71,20 +71,20 @@ class M {
     }
   }
 }
-function J(e, t = !1) {
+function X(e, t = !1) {
   const n = /* @__PURE__ */ new WeakMap();
   return function(i, r) {
     if (r.kind !== "method") return i;
     const a = r.name;
-    return function(...c) {
+    return function(...d) {
       let s = n.get(this);
       s || (s = /* @__PURE__ */ new Map(), n.set(this, s));
       let o = s.get(a);
-      o || (o = new M(e, t), s.set(a, o)), o.debounce(() => i.apply(this, c));
+      o || (o = new P(e, t), s.set(a, o)), o.debounce(() => i.apply(this, d));
     };
   };
 }
-function q(e) {
+function Q(e) {
   if (typeof e.lineNumber == "number")
     return {
       file: e.fileName || e.sourceURL,
@@ -106,7 +106,7 @@ function q(e) {
   }
   return { file: e.fileName || e.sourceURL };
 }
-class O {
+class j {
   constructor(t, n, i, r = "main") {
     this._debug = t, this.myTag = n, this.myElementId = i, this.instanceId = r;
   }
@@ -127,13 +127,13 @@ class O {
     throw this.error(...t), new Error(n);
   }
 }
-class X {
+class Y {
   constructor(t, n = !0) {
-    l(this, "label");
-    l(this, "last");
-    l(this, "startTime");
-    l(this, "running", !1);
-    l(this, "enabled");
+    c(this, "label");
+    c(this, "last");
+    c(this, "startTime");
+    c(this, "running", !1);
+    c(this, "enabled");
     this.label = t, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
   }
   lap(t = "") {
@@ -157,10 +157,10 @@ class X {
     return this.running;
   }
 }
-function U(e) {
+function V(e) {
   return typeof e == "object" && e !== null && !Array.isArray(e);
 }
-function V(e) {
+function F(e) {
   if (e != null)
     try {
       return JSON.parse(e);
@@ -168,28 +168,28 @@ function V(e) {
       return;
     }
 }
-function x(e) {
+function M(e) {
   const t = JSON.stringify(e);
   return t === void 0 ? "null" : t;
 }
 function K(e, t) {
   const n = { ...t };
-  if (U(e))
+  if (V(e))
     for (const i of Object.keys(t))
       i in e && (n[i] = e[i]);
   return n;
 }
-class P {
+class C {
   constructor(t, n, i) {
-    l(this, "cache");
+    c(this, "cache");
     this.backend = t, this.storageKey = n, this.initialValue = i;
   }
   read() {
     if (this.cache) return this.cache;
-    const t = this.backend ? V(this.backend.getItem(this.storageKey)) : void 0, n = K(t, this.initialValue);
+    const t = this.backend ? F(this.backend.getItem(this.storageKey)) : void 0, n = K(t, this.initialValue);
     if (this.backend && this.backend.getItem(this.storageKey) == null)
       try {
-        this.backend.setItem(this.storageKey, x(n));
+        this.backend.setItem(this.storageKey, M(n));
       } catch {
       }
     return this.cache = n, n;
@@ -197,7 +197,7 @@ class P {
   write(t) {
     if (this.cache = t, !!this.backend)
       try {
-        this.backend.setItem(this.storageKey, x(t));
+        this.backend.setItem(this.storageKey, M(t));
       } catch {
       }
   }
@@ -211,8 +211,8 @@ class P {
       },
       set: (n, i, r) => {
         if (typeof i != "string") return !1;
-        const c = { ...this.read() };
-        return c[i] = r, this.write(c), !0;
+        const d = { ...this.read() };
+        return d[i] = r, this.write(d), !0;
       },
       deleteProperty: (n, i) => {
         if (typeof i != "string") return !1;
@@ -249,16 +249,16 @@ function A(e) {
   const t = globalThis.window;
   return (e === "session" ? t == null ? void 0 : t.sessionStorage : t == null ? void 0 : t.localStorage) ?? void 0;
 }
-function Q(e, t) {
-  return new P(A("session"), e, t).asProxy();
+function Z(e, t) {
+  return new C(A("session"), e, t).asProxy();
 }
-function Y(e, t) {
-  return new P(A("local"), e, t).asProxy();
+function tt(e, t) {
+  return new C(A("local"), e, t).asProxy();
 }
-function Z(e, t, n) {
+function T(e, t, n) {
   return new Promise((i, r) => {
-    const a = (c) => {
-      e.removeEventListener(t, a, n), i(c);
+    const a = (d) => {
+      e.removeEventListener(t, a, n), i(d);
     };
     e.addEventListener(t, a, n);
   });
@@ -268,15 +268,24 @@ function z() {
     document.addEventListener("DOMContentLoaded", () => e());
   }) : Promise.resolve();
 }
-function tt(e = window) {
+function et() {
+  return window.tj_loader_state ? window.tj_loader_state !== "loading" ? Promise.resolve() : T(window, "loader:ready") : L();
+}
+function nt() {
+  return window.tj_loader_state ? window.tj_loader_state === "pre-visual" || window.tj_loader_state === "visual" ? Promise.resolve() : T(window, "loader:pre-visual") : L();
+}
+function it() {
+  return window.tj_loader_state ? window.tj_loader_state === "visual" ? Promise.resolve() : T(window, "loader:visual") : L();
+}
+function L(e = window) {
   return e || (e = window), e === window ? document.readyState === "complete" ? Promise.resolve() : new Promise((t) => window.addEventListener("load", () => t(), { once: !0 })) : e instanceof HTMLImageElement ? e.complete && e.naturalWidth !== 0 ? Promise.resolve() : new Promise((t, n) => {
     e.addEventListener("load", () => t(), { once: !0 }), e.addEventListener("error", () => n(new Error("image error")), { once: !0 });
   }) : e instanceof HTMLMediaElement ? e.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA ? Promise.resolve() : new Promise((t) => e.addEventListener("loadeddata", () => t(), { once: !0 })) : new Promise((t) => e.addEventListener("load", () => t(), { once: !0 }));
 }
-function et(e) {
+function rt(e) {
   return new Promise((t) => setTimeout(t, e));
 }
-function nt(e) {
+function st(e) {
   return new Promise((t) => {
     const n = (i) => {
       e.removeEventListener("animationend", n), t(i);
@@ -284,31 +293,31 @@ function nt(e) {
     e.addEventListener("animationend", n);
   });
 }
-function it(e) {
+function ot(e) {
   var n, i;
   class t extends e {
     constructor() {
       super(...arguments);
-      h(this, n, new M(200, 5e3));
-      l(this, "currentBreakPoint", null);
+      h(this, n, new P(200, 5e3));
+      c(this, "currentBreakPoint", null);
       h(this, i, async () => {
         var b;
         await u(this, n).wait(), await z();
-        const c = this, s = window.innerWidth;
-        let o = getComputedStyle(c).getPropertyValue("--breakpoint");
+        const d = this, s = window.innerWidth;
+        let o = getComputedStyle(d).getPropertyValue("--breakpoint");
         if (!o || o === "")
           return;
         o = o.trim().replace(/^['"]|['"]$/g, "");
-        const d = o.split(","), m = d[0].trim(), f = ((b = d[1]) == null ? void 0 : b.trim()) ?? m, g = R(s);
-        this.currentBreakPoint !== g && (E(f) <= E(g) ? c.setAttribute("mode", "desktop") : E(m) > E(g) ? c.setAttribute("mode", "mobile") : c.setAttribute("mode", "tablet"));
+        const l = o.split(","), m = l[0].trim(), f = ((b = l[1]) == null ? void 0 : b.trim()) ?? m, g = U(s);
+        this.currentBreakPoint !== g && (E(f) <= E(g) ? d.setAttribute("mode", "desktop") : E(m) > E(g) ? d.setAttribute("mode", "mobile") : d.setAttribute("mode", "tablet"));
       });
     }
     connectedCallback() {
       super.connectedCallback();
       try {
         u(this, i).call(this), window.addEventListener("resize", u(this, i)), u(this, i).call(this);
-      } catch (c) {
-        throw console.error("Error in BreakPointMixin:", c, "in element", this), c;
+      } catch (d) {
+        throw console.error("Error in BreakPointMixin:", d, "in element", this), d;
       }
     }
     disconnectedCallback() {
@@ -317,14 +326,14 @@ function it(e) {
   }
   return n = new WeakMap(), i = new WeakMap(), t;
 }
-const k = Symbol("listenerDefs"), W = Symbol("withEventBindings");
-function rt(e, t) {
+const p = Symbol("listenerDefs"), W = Symbol("withEventBindings");
+function at(e, t) {
   const n = Array.isArray(e) ? e : [e];
   return function(i, r) {
     if (r.kind !== "method") throw new Error("@Listen nur für Methoden");
     return r.addInitializer(function() {
       const a = this;
-      (a[k] || (a[k] = [])).push({
+      (a[p] || (a[p] = [])).push({
         method: r.name,
         events: [...n],
         opts: t
@@ -336,11 +345,11 @@ function rt(e, t) {
     };
   };
 }
-function F(e, t) {
+function H(e, t) {
   var n;
   return !t || t === "host" ? e : t === "document" ? e.ownerDocument ?? document : t === "window" ? ((n = e.ownerDocument) == null ? void 0 : n.defaultView) ?? window : t === "shadowRoot" ? e.shadowRoot ?? e : typeof t == "function" ? t(e) : t;
 }
-function st(e) {
+function ut(e) {
   var n, i, $;
   class t extends e {
     constructor(...s) {
@@ -359,24 +368,24 @@ function st(e) {
     }
   }
   return n = new WeakMap(), i = new WeakSet(), $ = function() {
-    var o, d, m;
+    var o, l, m;
     (o = u(this, n)) == null || o.abort(), w(this, n, new AbortController());
-    const s = this[k] || [];
+    const s = this[p] || [];
     for (const f of s) {
-      const g = F(this, (d = f.opts) == null ? void 0 : d.target), b = ((m = f.opts) == null ? void 0 : m.options) ?? {}, _ = this[f.method].bind(this);
-      for (const C of f.events)
-        g.addEventListener(C, _, { ...b, signal: u(this, n).signal });
+      const g = H(this, (l = f.opts) == null ? void 0 : l.target), b = ((m = f.opts) == null ? void 0 : m.options) ?? {}, N = this[f.method].bind(this);
+      for (const B of f.events)
+        g.addEventListener(B, N, { ...b, signal: u(this, n).signal });
     }
   }, t;
 }
-let j = 1;
-function ot(e) {
+let G = 1;
+function dt(e) {
   var n, i, r;
   class t extends e {
     constructor() {
       super(...arguments);
       h(this, n, null);
-      h(this, i, j++);
+      h(this, i, G++);
       h(this, r, null);
     }
     /**
@@ -395,7 +404,7 @@ function ot(e) {
     }
     getLogger(s = "main") {
       const o = "<" + (this.tagName || this.constructor.name || "UnknownElement") + ">";
-      return u(this, r) || w(this, r, new O(this._debug, o, `${u(this, i)}`, s)), u(this, r);
+      return u(this, r) || w(this, r, new j(this._debug, o, `${u(this, i)}`, s)), u(this, r);
     }
     debug(...s) {
       this.getLogger().debug(...s);
@@ -415,25 +424,61 @@ function ot(e) {
   }
   return n = new WeakMap(), i = new WeakMap(), r = new WeakMap(), t;
 }
-function at(e) {
+function lt(e) {
+  class t extends e {
+    connectedCallback() {
+      this.dispatchEvent(new CustomEvent("init:child-waitreq", {
+        detail: {
+          element: this,
+          state: "connected"
+        },
+        bubbles: !0,
+        composed: !0
+      })), super.connectedCallback();
+    }
+    firstUpdated(i) {
+      var r;
+      (r = super.firstUpdated) == null || r.call(this, i), this.dispatchEvent(new CustomEvent("init:child-ready", {
+        detail: {
+          element: this,
+          state: "ready"
+        },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.dispatchEvent(new CustomEvent("init:child-ready", {
+        detail: {
+          element: this,
+          state: "disconnected"
+        },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+  }
+  return t;
+}
+function ct(e) {
   var n, I, r, S;
   class t extends e {
     constructor() {
       super(...arguments);
       h(this, n);
       h(this, r, (o) => {
-        const d = o.target;
-        d.assignedNodes({ flatten: !0 }).filter((g) => y(this, n, S).call(this, g)).length > 0 && d.childNodes.length > 0 && d.classList.remove("slot-empty");
+        const l = o.target;
+        (l.assignedNodes({ flatten: !0 }).filter((g) => y(this, n, S).call(this, g)).length > 0 || l.childNodes.length > 0) && l.classList.remove("slot-empty");
       });
     }
     firstUpdated(o) {
-      var d;
-      (d = super.firstUpdated) == null || d.call(this, o), y(this, n, I).call(this);
+      var l;
+      (l = super.firstUpdated) == null || l.call(this, o), y(this, n, I).call(this);
     }
   }
   return n = new WeakSet(), I = function() {
-    var d;
-    const o = (d = this.shadowRoot) == null ? void 0 : d.querySelectorAll("slot");
+    var l;
+    const o = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll("slot");
     o == null || o.forEach((m) => {
       m.classList.add("slot-empty"), m.addEventListener("slotchange", (f) => u(this, r).call(this, f));
     });
@@ -442,27 +487,31 @@ function at(e) {
   }, t;
 }
 export {
-  it as BreakPointMixin,
-  M as Debouncer,
-  st as EventBindingsMixin,
-  rt as Listen,
-  O as Logger,
-  ot as LoggingMixin,
-  at as SlotVisibilityMixin,
-  X as Stopwatch,
-  p as breakpointMap,
-  T as breakpoints,
-  G as create_element,
-  J as debounce,
+  ot as BreakPointMixin,
+  P as Debouncer,
+  ut as EventBindingsMixin,
+  at as Listen,
+  lt as LoaderMixin,
+  j as Logger,
+  dt as LoggingMixin,
+  ct as SlotVisibilityMixin,
+  Y as Stopwatch,
+  _ as breakpointMap,
+  v as breakpoints,
+  J as create_element,
+  X as debounce,
   E as getBreakpointMinWidth,
-  R as getCurrentBreakpoint,
-  q as getErrorLocation,
-  D as getViewportWidth,
-  Y as local_storage,
-  Q as session_storage,
-  et as sleep,
-  Z as waitFor,
-  nt as waitForAnimationEnd,
+  U as getCurrentBreakpoint,
+  Q as getErrorLocation,
+  O as getViewportWidth,
+  tt as local_storage,
+  Z as session_storage,
+  rt as sleep,
+  T as waitFor,
+  st as waitForAnimationEnd,
   z as waitForDomContentLoaded,
-  tt as waitForLoad
+  L as waitForLoad,
+  nt as waitForPreVisual,
+  et as waitForReady,
+  it as waitForVisual
 };

package/lib/wait-for.d.ts

@@ -1,5 +1,14 @@
 export declare function waitFor<T>(target: EventTarget, eventName: string, options?: AddEventListenerOptions): Promise<T>;
 export declare function waitForDomContentLoaded(): Promise<void>;
+export declare function waitForReady(): Promise<void>;
+/**
+ * Wait for Loader firing the pre-visual (Elements are visual but might be in animation to show up)
+ */
+export declare function waitForPreVisual(): Promise<void>;
+/**
+ * Wait for Loader firing visual (the elements are fully visual to the user)
+ */
+export declare function waitForVisual(): Promise<void>;
 /**
  * Waits for the load event of the given element or the window if no element is provided.
  *

package/mixins/LoaderMixin.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+type Constructor<T = object> = abstract new (...args: any[]) => T;
+export interface LoaderMixinInterface {
+}
+export declare function LoaderMixin<TBase extends Constructor<LitElement>>(Base: TBase): TBase & Constructor<LoaderMixinInterface>;
+export {};

package/package.json

@@ -1,7 +1,12 @@
 {
     "name": "@trunkjs/browser-utils",
-    "version": "1.0.43",
+    "version": "1.0.47",
     "main": "./index.js",
+    "repository": {
+        "directory": "packages/browser-utils",
+        "type": "git",
+        "url": "https://github.com/trunkjs/trunkjs-monorepo"
+    },
     "dependencies": {},
     "type": "module",
     "types": "./index.d.ts"