@trunkjs/browser-utils 1.0.15 → 1.0.16

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.0.16 (2025-08-27)
+
+This was a version bump only for browser-utils to align it with other projects, there were no code changes.
+
 ## 1.0.15 (2025-08-24)
 
 This was a version bump only for browser-utils to align it with other projects, there were no code changes.

package/README.md

@@ -9,6 +9,8 @@ Exports:
 - waitFor, waitForDomContentLoaded, waitForLoad, sleep, waitForAnimationEnd: Promise-based event and timing helpers
 - LoggingMixin: Lightweight logging mixin for Custom Elements
 
+- [Event Bindings  for WebComponents](./docs/README_EventHandling.md)
+
 ## Installation
 
 Within this monorepo, the package is consumed via path aliases. If you publish or consume it externally, import from the package name:

package/index.d.ts

@@ -1,7 +1,9 @@
+export * from './lib/breakpoints';
 export * from './lib/create-element';
 export * from './lib/Debouncer';
 export * from './lib/get-error-location';
 export * from './lib/Logger';
 export * from './lib/Stopwatch';
 export * from './lib/wait-for';
+export * from './mixins/EventBindingsMixin';
 export * from './mixins/LoggingMixin';

package/index.js

@@ -1,96 +1,119 @@
-var g = Object.defineProperty;
-var c = (t) => {
-  throw TypeError(t);
+var D = Object.defineProperty;
+var L = (e) => {
+  throw TypeError(e);
 };
-var f = (t, e, n) => e in t ? g(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var l = (t, e, n) => f(t, typeof e != "symbol" ? e + "" : e, n), d = (t, e, n) => e.has(t) || c("Cannot " + n);
-var r = (t, e, n) => (d(t, e, "read from private field"), n ? n.call(t) : e.get(t)), u = (t, e, n) => e.has(t) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), m = (t, e, n, i) => (d(t, e, "write to private field"), i ? i.call(t, n) : e.set(t, n), n);
-function E(t, e = {}, n = []) {
+var M = (e, t, n) => t in e ? D(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var u = (e, t, n) => M(e, typeof t != "symbol" ? t + "" : t, n), w = (e, t, n) => t.has(e) || L("Cannot " + n);
+var a = (e, t, n) => (w(e, t, "read from private field"), n ? n.call(e) : t.get(e)), l = (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), d = (e, t, n, i) => (w(e, t, "write to private field"), i ? i.call(e, n) : t.set(e, n), n), v = (e, t, n) => (w(e, t, "access private method"), n);
+const m = [
+  { name: "xs", minWidth: 0 },
+  { name: "sm", minWidth: 576 },
+  { name: "md", minWidth: 768 },
+  { name: "lg", minWidth: 992 },
+  { name: "xl", minWidth: 1200 },
+  { name: "xxl", minWidth: 1400 }
+], y = m.reduce(
+  (e, t) => (e[t.name] = t.minWidth, e),
+  {}
+);
+function B(e) {
+  if (!(e in y))
+    throw new Error(`Unknown breakpoint: ${e}`);
+  return y[e];
+}
+function P(e) {
+  e === void 0 && (e = window.innerWidth);
+  for (let t = m.length - 1; t >= 0; t--)
+    if (e >= m[t].minWidth)
+      return m[t].name;
+  return "xs";
+}
+function _(e, t = {}, n = []) {
   Array.isArray(n) || (n = [n]);
-  const i = document.createElement(t);
-  for (const s in e)
-    e[s] !== null && e[s] !== void 0 && i.setAttribute(s, e[s] !== !0 ? e[s] : "");
-  for (const s of n)
-    i.append(typeof s == "string" ? document.createTextNode(s) : s);
+  const i = document.createElement(e);
+  for (const r in t)
+    t[r] !== null && t[r] !== void 0 && i.setAttribute(r, t[r] !== !0 ? t[r] : "");
+  for (const r of n)
+    i.append(typeof r == "string" ? document.createTextNode(r) : r);
   return i;
 }
-class y {
+class N {
   /**
    *
    * @param delay     Debounce delay in milliseconds
    * @param max_delay Maximum delay in milliseconds, if false then no maximum delay is applied
    */
-  constructor(e, n = !1) {
-    l(this, "timeout", null);
-    l(this, "startTimeWithMs", 0);
-    this.delay = e, this.max_delay = n;
+  constructor(t, n = !1) {
+    u(this, "timeout", null);
+    u(this, "startTimeWithMs", 0);
+    this.delay = t, this.max_delay = n;
   }
   async wait() {
-    return this.startTimeWithMs === 0 && (this.startTimeWithMs = Date.now()), this.timeout && (this.max_delay === !1 || this.startTimeWithMs + this.max_delay > Date.now()) && clearTimeout(this.timeout), new Promise((e) => {
+    return this.startTimeWithMs === 0 && (this.startTimeWithMs = Date.now()), this.timeout && (this.max_delay === !1 || this.startTimeWithMs + this.max_delay > Date.now()) && clearTimeout(this.timeout), new Promise((t) => {
       this.timeout = setTimeout(() => {
-        this.startTimeWithMs = 0, e(!0);
+        this.startTimeWithMs = 0, t(!0);
       }, this.delay);
     });
   }
-  debounce(e) {
+  debounce(t) {
     this.timeout && clearTimeout(this.timeout), this.timeout = setTimeout(() => {
-      e();
+      t();
     }, this.delay);
   }
 }
-function I(t) {
-  if (typeof t.lineNumber == "number")
+function F(e) {
+  if (typeof e.lineNumber == "number")
     return {
-      file: t.fileName || t.sourceURL,
-      line: t.lineNumber,
-      column: t.columnNumber ?? void 0
+      file: e.fileName || e.sourceURL,
+      line: e.lineNumber,
+      column: e.columnNumber ?? void 0
     };
-  if (typeof t.line == "number")
+  if (typeof e.line == "number")
     return {
-      file: t.sourceURL,
-      line: t.line,
-      column: t.column
+      file: e.sourceURL,
+      line: e.line,
+      column: e.column
     };
-  const n = String(t.stack || t.message || "").split(`
+  const n = String(e.stack || e.message || "").split(`
 `), i = /(.*?)(?:\(|@)?(.*?):(\d+):(\d+)\)?$/;
-  for (const s of n) {
-    const a = s.match(i);
-    if (a)
-      return { file: a[2], line: +a[3], column: +a[4] };
+  for (const r of n) {
+    const o = r.match(i);
+    if (o)
+      return { file: o[2], line: +o[3], column: +o[4] };
   }
-  return { file: t.fileName || t.sourceURL };
+  return { file: e.fileName || e.sourceURL };
 }
-class w {
-  constructor(e, n, i = "main") {
-    this._debug = e, this.myElementId = n, this.instanceId = i;
+class k {
+  constructor(t, n, i = "main") {
+    this._debug = t, this.myElementId = n, this.instanceId = i;
   }
-  log(...e) {
-    this._debug && console.log(`[LOG][ID:${this.myElementId}:${this.instanceId}]`, ...e);
+  log(...t) {
+    this._debug && console.log(`[LOG][ID:${this.myElementId}:${this.instanceId}]`, ...t);
   }
-  warn(...e) {
-    console.warn(`[WARN][ID:${this.myElementId}:${this.instanceId}]`, ...e);
+  warn(...t) {
+    console.warn(`[WARN][ID:${this.myElementId}:${this.instanceId}]`, ...t);
   }
-  error(...e) {
-    console.error(`[ERROR][ID:${this.myElementId}:${this.instanceId}]`, ...e);
+  error(...t) {
+    console.error(`[ERROR][ID:${this.myElementId}:${this.instanceId}]`, ...t);
   }
-  throwError(...e) {
-    const n = `[ERROR][ID:${this.myElementId}:${this.instanceId}] ${e.join(" ")}`;
-    throw this.error(...e), new Error(n);
+  throwError(...t) {
+    const n = `[ERROR][ID:${this.myElementId}:${this.instanceId}] ${t.join(" ")}`;
+    throw this.error(...t), new Error(n);
   }
 }
-class p {
-  constructor(e, n = !0) {
-    l(this, "label");
-    l(this, "last");
-    l(this, "startTime");
-    l(this, "running", !1);
-    l(this, "enabled");
-    this.label = e, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
+class O {
+  constructor(t, n = !0) {
+    u(this, "label");
+    u(this, "last");
+    u(this, "startTime");
+    u(this, "running", !1);
+    u(this, "enabled");
+    this.label = t, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
   }
-  lap(e = "") {
+  lap(t = "") {
     if (!this.enabled) return;
     const n = performance.now(), i = (n - this.last) / 1e3;
-    this.last = n, console.debug(`[${this.label}] ${e} +${i.toFixed(3)}s`);
+    this.last = n, console.debug(`[${this.label}] ${t} +${i.toFixed(3)}s`);
   }
   elapsed() {
     return performance.now() - this.startTime;
@@ -108,83 +131,141 @@ class p {
     return this.running;
   }
 }
-function T(t, e, n) {
-  return new Promise((i, s) => {
-    const a = (h) => {
-      t.removeEventListener(e, a, n), i(h);
+function U(e, t, n) {
+  return new Promise((i, r) => {
+    const o = (g) => {
+      e.removeEventListener(t, o, n), i(g);
     };
-    t.addEventListener(e, a, n);
+    e.addEventListener(t, o, n);
   });
 }
-function $() {
-  return document.readyState === "loading" ? new Promise((t) => {
-    document.addEventListener("DOMContentLoaded", () => t());
+function S() {
+  return document.readyState === "loading" ? new Promise((e) => {
+    document.addEventListener("DOMContentLoaded", () => e());
   }) : Promise.resolve();
 }
-function D() {
-  return document.readyState === "complete" ? Promise.resolve() : new Promise((t) => {
-    window.addEventListener("load", () => t());
+function G() {
+  return document.readyState === "complete" ? Promise.resolve() : new Promise((e) => {
+    window.addEventListener("load", () => e());
   });
 }
-function v(t) {
-  return new Promise((e) => setTimeout(e, t));
+function j(e) {
+  return new Promise((t) => setTimeout(t, e));
 }
-function R(t) {
-  return new Promise((e) => {
+function q(e) {
+  return new Promise((t) => {
     const n = (i) => {
-      t.removeEventListener("animationend", n), e(i);
+      e.removeEventListener("animationend", n), t(i);
     };
-    t.addEventListener("animationend", n);
+    e.addEventListener("animationend", n);
   });
 }
-let b = 1;
-function x(t) {
-  var n, i, s;
-  class e extends t {
+const f = Symbol("listenerDefs"), p = Symbol("withEventBindings");
+function z(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 o = this.constructor;
+      (o[f] || (o[f] = [])).push({
+        method: r.name,
+        events: n,
+        opts: t
+      });
+    }), function(...o) {
+      if (!this[p])
+        throw new Error("[EventBindings] @Listen - decorator requires EventBindingMixin.");
+      return i.apply(this, o);
+    };
+  };
+}
+function A(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 : typeof t == "function" ? t(e) : t;
+}
+function H(e) {
+  var n, i, I;
+  class t extends e {
+    constructor(...s) {
+      super(...s);
+      l(this, i);
+      l(this, n);
+      this[p] = !0;
+    }
+    connectedCallback() {
+      var s;
+      (s = super.connectedCallback) == null || s.call(this), v(this, i, I).call(this);
+    }
+    disconnectedCallback() {
+      var s, c;
+      (s = a(this, n)) == null || s.abort(), (c = super.disconnectedCallback) == null || c.call(this);
+    }
+  }
+  return n = new WeakMap(), i = new WeakSet(), I = function() {
+    var c, b, E;
+    (c = a(this, n)) == null || c.abort(), d(this, n, new AbortController());
+    const s = this.constructor[f] || [];
+    for (const h of s) {
+      const $ = A(this, (b = h.opts) == null ? void 0 : b.target), T = ((E = h.opts) == null ? void 0 : E.options) ?? {}, W = this[h.method].bind(this);
+      for (const x of h.events)
+        $.addEventListener(x, W, { ...T, signal: a(this, n).signal });
+    }
+  }, t;
+}
+let C = 1;
+function V(e) {
+  var n, i, r;
+  class t extends e {
     constructor() {
       super(...arguments);
-      u(this, n, null);
-      u(this, i, b++);
-      u(this, s, null);
+      l(this, n, null);
+      l(this, i, C++);
+      l(this, r, null);
     }
     /**
      * Clears the cached debug flag so the attribute will be checked again
      * on the next log/warn/error call.
      */
     invalidateDebugCache() {
-      m(this, n, null);
+      d(this, n, null);
     }
     get _debug() {
-      return r(this, n) !== null ? r(this, n) : (this instanceof HTMLElement && m(this, n, this.hasAttribute("debug") && !["false", "0", "off", "no"].includes(this.getAttribute("debug") || "")), r(this, n) === !0 && console.log(`[DEBUG][ID:${r(this, i)}] LoggingMixin: Debug mode is enabled for <${this.tagName}>`, this), r(this, n) ?? !1);
+      return a(this, n) !== null ? a(this, n) : (this instanceof HTMLElement && d(this, n, this.hasAttribute("debug") && !["false", "0", "off", "no"].includes(this.getAttribute("debug") || "")), a(this, n) === !0 && console.log(`[DEBUG][ID:${a(this, i)}] LoggingMixin: Debug mode is enabled for <${this.tagName}>`, this), a(this, n) ?? !1);
     }
-    getLogger(o = "main") {
-      return r(this, s) || m(this, s, new w(this._debug, `${r(this, i)}`, o)), r(this, s);
+    getLogger(s = "main") {
+      return a(this, r) || d(this, r, new k(this._debug, `${a(this, i)}`, s)), a(this, r);
     }
-    log(...o) {
-      this.getLogger().log(...o);
+    log(...s) {
+      this.getLogger().log(...s);
     }
-    warn(...o) {
-      this.getLogger().warn(...o);
+    warn(...s) {
+      this.getLogger().warn(...s);
     }
-    error(...o) {
-      this.getLogger().error(...o);
+    error(...s) {
+      this.getLogger().error(...s);
     }
-    throwError(...o) {
-      return this.getLogger().throwError(...o);
+    throwError(...s) {
+      return this.getLogger().throwError(...s);
     }
   }
-  return n = new WeakMap(), i = new WeakMap(), s = new WeakMap(), e;
+  return n = new WeakMap(), i = new WeakMap(), r = new WeakMap(), t;
 }
 export {
-  y as Debouncer,
-  w as Logger,
-  x as LoggingMixin,
-  p as Stopwatch,
-  E as create_element,
-  I as getErrorLocation,
-  v as sleep,
-  T as waitFor,
-  R as waitForAnimationEnd,
-  $ as waitForDomContentLoaded,
-  D as waitForLoad
+  N as Debouncer,
+  H as EventBindingsMixin,
+  z as Listen,
+  k as Logger,
+  V as LoggingMixin,
+  O as Stopwatch,
+  y as breakpointMap,
+  m as breakpoints,
+  _ as create_element,
+  B as getBreakpointMinWidth,
+  P as getCurrentBreakpoint,
+  F as getErrorLocation,
+  j as sleep,
+  U as waitFor,
+  q as waitForAnimationEnd,
+  S as waitForDomContentLoaded,
+  G as waitForLoad
 };

package/lib/breakpoints.d.ts

@@ -0,0 +1,24 @@
+export declare const breakpoints: readonly [{
+    readonly name: "xs";
+    readonly minWidth: 0;
+}, {
+    readonly name: "sm";
+    readonly minWidth: 576;
+}, {
+    readonly name: "md";
+    readonly minWidth: 768;
+}, {
+    readonly name: "lg";
+    readonly minWidth: 992;
+}, {
+    readonly name: "xl";
+    readonly minWidth: 1200;
+}, {
+    readonly name: "xxl";
+    readonly minWidth: 1400;
+}];
+export declare const breakpointMap: {
+    [key: string]: number;
+};
+export declare function getBreakpointMinWidth(breakpoint: string): number;
+export declare function getCurrentBreakpoint(width?: number): string;

package/mixins/EventBindingsMixin.d.ts

@@ -0,0 +1,17 @@
+type Ctor<T = object> = new (...args: any[]) => T;
+type TargetSpec = 'host' | 'document' | 'window' | EventTarget | ((host: HTMLElement) => EventTarget);
+type ListenOpts = {
+    target?: TargetSpec;
+    options?: AddEventListenerOptions;
+};
+type EventName = keyof DocumentEventMap;
+type OneOrMany<N extends EventName> = N | readonly N[];
+type EventFromInput<I extends OneOrMany<EventName>> = I extends readonly (infer K)[] ? K extends EventName ? DocumentEventMap[K] : never : I extends EventName ? DocumentEventMap[I] : never;
+export declare function Listen<I extends OneOrMany<EventName>>(type: I, opts?: ListenOpts): <This, Fn extends (this: This, ev: EventFromInput<I>, ...args: any[]) => any>(value: Fn, context: ClassMethodDecoratorContext<This, Fn>) => Fn;
+export declare function EventBindingsMixin<TBase extends Ctor<object>>(Base: TBase): (abstract new (...a: any[]) => {
+    "__#2023@#ac"?: AbortController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    "__#2023@#bindEventListeners"(): void;
+}) & TBase;
+export {};

package/mixins/LoggingMixin.d.ts

@@ -26,14 +26,14 @@ type Constructor<T = object> = abstract new (...args: any[]) => T;
  *   <my-element debug></my-element>       // enables debug logging
  */
 export declare function LoggingMixin<TBase extends Constructor<object>>(Base: TBase): (abstract new (...args: any[]) => {
-    "__#1729@#debugCached": boolean | null;
-    "__#1729@#myElementId": number;
+    "__#2024@#debugCached": boolean | null;
+    "__#2024@#myElementId": number;
     /**
      * Clears the cached debug flag so the attribute will be checked again
      * on the next log/warn/error call.
      */
     invalidateDebugCache(): void;
-    "__#1729@#myLoggerInstance": Logger | null;
+    "__#2024@#myLoggerInstance": Logger | null;
     readonly _debug: boolean;
     getLogger(instanceId?: string): Logger;
     log(...args: any[]): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@trunkjs/browser-utils",
-    "version": "1.0.15",
+    "version": "1.0.16",
     "main": "./index.js",
     "dependencies": {},
     "type": "module",