@odx/foundation 1.0.0-beta.235 → 1.0.0-beta.236

package/dist/breakpoints/main.d.ts

@@ -16,7 +16,7 @@ export declare const defaultBreakpoints: {
         readonly max: 1199.98;
     };
 };
-export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[], root?: HTMLElement): () => void;
+export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
 export * from './models.js';
 export * from './plugins.js';
 export * from './utils.js';

package/dist/breakpoints/utils.d.ts

@@ -1,10 +1,10 @@
 import { Signal } from '@preact/signals-core';
-import { Breakpoint, BreakpointChange, BreakpointConfig, BreakpointOperator, BreakpointPlugin } from './models.js';
+import { Breakpoint, BreakpointChange, BreakpointConfig, BreakpointOperator } from './models.js';
 export declare const breakpointDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint">;
 export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
-export declare function createBreakpointHandler(plugins: BreakpointPlugin[], targets: HTMLElement[]): (change: BreakpointChange) => void;
-export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Record<string, Breakpoint>;
+export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
 export declare function observeBreakpoint(breakpoint: Breakpoint, initialValue?: boolean): Signal<Breakpoint & {
     matches: boolean;
 }>;
+export declare function createBreakpointDirectiveUpdater(breakpoints: Breakpoint[], update: (target: HTMLElement, change: BreakpointChange) => void): () => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/breakpoints.js

@@ -1,6 +1,5 @@
+import { signal, effect } from '@preact/signals-core';
 import { stringAttributeDirective, observeMedia } from '@odx/foundation/utils';
-import { signal } from '@preact/signals-core';
-import { k as keyBy, g as groupBy } from './vendor.js';
 
 const BreakpointHideTargetPlugin = (target, change) => {
   target.hidden = !change.matches;
@@ -34,23 +33,10 @@ function buildBreakpoint(breakpoint, operator) {
       query = `(min-width: ${breakpoint.max + 0.02}px)`;
       break;
   }
-  query = [query, breakpoint.customQuery].filter(Boolean).join(" and ");
-  return { ...breakpoint, id, operator, query };
-}
-function createBreakpointHandler(plugins, targets) {
-  return (change) => {
-    for (const plugin of plugins) {
-      for (const target of targets) {
-        plugin(target, change);
-      }
-    }
-  };
+  return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
 }
 function expandBreakpoints(...breakpoints) {
-  const expandBreakpoints2 = breakpoints.flatMap(
-    (breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator))
-  );
-  return keyBy(expandBreakpoints2, (breakpoint) => breakpoint.id);
+  return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
 }
 function observeBreakpoint(breakpoint, initialValue = false) {
   let unobserveMedia;
@@ -68,38 +54,61 @@ function observeBreakpoint(breakpoint, initialValue = false) {
     }
   );
 }
-
-function unsubscribeAll(subscriptions) {
-  for (const unsubscribe of subscriptions) {
-    unsubscribe();
-    subscriptions.delete(unsubscribe);
-  }
+function createBreakpointDirectiveUpdater(breakpoints, update) {
+  const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint));
+  return () => {
+    const results = breakpointObservers.reduce(
+      (breakpoints2, { value }) => {
+        breakpoints2[value.id] = value;
+        return breakpoints2;
+      },
+      {}
+    );
+    const directives = document.querySelectorAll(breakpointDirective.selector);
+    let i = directives.length;
+    while (i--) {
+      const directive = directives[i];
+      const result = results[breakpointDirective.value(directive) ?? ""];
+      if (!result) continue;
+      update(directive, result);
+    }
+  };
 }
+
 const defaultBreakpoints = {
   mobile: { id: "mobile", min: 0, max: 575.98 },
   tablet: { id: "tablet", min: 576, max: 991.98 },
   desktop: { id: "desktop", min: 992, max: 1199.98 }
 };
-function setupBreakpoints(breakpointsConfig = [], root = document.documentElement) {
+function setupBreakpoints(breakpointsConfig = []) {
   const breakpoints = expandBreakpoints(...Object.values(defaultBreakpoints), ...breakpointsConfig);
   const plugins = [BreakpointHideTargetPlugin, BreakpointClassNamePlugin];
-  const subscriptions = /* @__PURE__ */ new Set();
-  const observer = new MutationObserver((mutations) => {
-    if (mutations.length === 0) return;
-    const breakpointDirectives = Array.from(document.querySelectorAll(breakpointDirective.selector));
-    unsubscribeAll(subscriptions);
-    const breakpointTargets = groupBy(breakpointDirectives, (host) => breakpointDirective.value(host) ?? "");
-    for (const [breakpointId, targets] of Object.entries(breakpointTargets)) {
-      const breakpoint = breakpoints[breakpointId];
-      if (!breakpoint) continue;
-      subscriptions.add(observeBreakpoint(breakpoint).subscribe(createBreakpointHandler(plugins, targets)));
+  const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints, (target, change) => {
+    for (const plugin of plugins) {
+      plugin(target, change);
     }
   });
-  observer.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: [breakpointDirective.attribute] });
-  return () => {
-    unsubscribeAll(subscriptions);
-    observer.disconnect();
+  let mutationObserver;
+  let unobserveBreakpoints = () => {
   };
+  function initBreakpoints() {
+    destroyBreakpoints();
+    mutationObserver = new MutationObserver(directiveUpdater);
+    unobserveBreakpoints = effect(directiveUpdater);
+    mutationObserver.observe(document.documentElement, {
+      attributes: true,
+      subtree: true,
+      childList: true,
+      attributeFilter: [breakpointDirective.attribute]
+    });
+  }
+  function destroyBreakpoints() {
+    unobserveBreakpoints();
+    mutationObserver?.disconnect();
+    globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
+  }
+  globalThis.addEventListener("DOMContentLoaded", initBreakpoints);
+  return destroyBreakpoints;
 }
 
-export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin, breakpointDirective, buildBreakpoint, createBreakpointHandler, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };
+export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin, breakpointDirective, buildBreakpoint, createBreakpointDirectiveUpdater, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };

package/dist/components.js

@@ -3,7 +3,7 @@ import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement,
 import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, observeElementResize, unobserveElementResize, toPx, enableMotion, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent } from '@odx/foundation/utils';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { p as pick, R as RovingTabindexController, e, c as computePosition, o as offset, s as shift, f as flip, a as size, b as arrow, h as hide, d as autoUpdate, r as round, i as debounce } from './vendor.js';
+import { p as pick, R as RovingTabindexController, e, c as computePosition, o as offset, s as shift, f as flip, a as size, b as arrow, h as hide, d as autoUpdate, r as round, g as debounce } from './vendor.js';
 import { when } from 'lit/directives/when.js';
 import { OdxIconElement } from '@odx/icons';
 import { IsLocalized } from '@odx/foundation/i18n';

package/dist/i18n.js

@@ -1,5 +1,5 @@
 import { signal, computed } from '@preact/signals-core';
-import { j as flattenObject, e } from './vendor.js';
+import { i as flattenObject, e } from './vendor.js';
 import { parseDate } from '@odx/foundation/utils';
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
 import 'lit/html.js';

package/dist/vendor.js

@@ -3,29 +3,6 @@ import 'lit/html.js';
 import { directive } from 'lit/directive.js';
 import { AsyncDirective } from 'lit/async-directive.js';
 
-function groupBy(arr, getKeyFromItem) {
-    const result = {};
-    for (let i = 0; i < arr.length; i++) {
-        const item = arr[i];
-        const key = getKeyFromItem(item);
-        if (!Object.hasOwn(result, key)) {
-            result[key] = [];
-        }
-        result[key].push(item);
-    }
-    return result;
-}
-
-function keyBy(arr, getKeyFromItem) {
-    const result = {};
-    for (let i = 0; i < arr.length; i++) {
-        const item = arr[i];
-        const key = getKeyFromItem(item);
-        result[key] = item;
-    }
-    return result;
-}
-
 function minBy(items, getValue) {
     if (items.length === 0) {
         return undefined;
@@ -1988,4 +1965,4 @@ function throttle(func, throttleMs, { signal, edges = ['leading', 'trailing'] }
     return throttled;
 }
 
-export { RovingTabindexController as R, size as a, arrow as b, computePosition as c, autoUpdate as d, e, flip as f, groupBy as g, hide as h, debounce as i, flattenObject as j, keyBy as k, minBy as m, offset as o, pick as p, round as r, shift as s, throttle as t, uniqBy as u };
+export { RovingTabindexController as R, size as a, arrow as b, computePosition as c, autoUpdate as d, e, flip as f, debounce as g, hide as h, flattenObject as i, minBy as m, offset as o, pick as p, round as r, shift as s, throttle as t, uniqBy as u };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.235",
+  "version": "1.0.0-beta.236",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -28,7 +28,7 @@
     "@lit-labs/preact-signals": "1.0.3",
     "@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
     "@odx/icons": "4.0.0-rc.49",
-    "@spectrum-web-components/reactive-controllers": "1.8.0",
+    "@spectrum-web-components/reactive-controllers": "1.9.0",
     "es-toolkit": "1.40.0",
     "sass-embedded": "1.93.2",
     "stylelint": "16.25.0",