@next-core/brick-kit 2.113.0 → 2.114.0

package/dist/index.esm.js

@@ -2187,6 +2187,56 @@ function getCustomTemplateContext(tplContextId) {
   return tplContextMap.get(tplContextId);
 }
 
+var MediaSize;
+
+(function (MediaSize) {
+  MediaSize["xLarge"] = "xLarge";
+  MediaSize["large"] = "large";
+  MediaSize["medium"] = "medium";
+  MediaSize["small"] = "small";
+  MediaSize["xSmall"] = "xSmall";
+})(MediaSize || (MediaSize = {}));
+
+var mediaSizeBreakpointMap = new Map([[MediaSize.xLarge, "1920px"], [MediaSize.large, "1600px"], [MediaSize.medium, "1280px"], [MediaSize.small, "1024px"], [MediaSize.xSmall, 0]]);
+var mediaEventTarget = new EventTarget$1();
+var sizeMatchesMap = {};
+var MEDIA = {};
+
+function handleMatchesChange(data, size) {
+  var changed = false;
+  sizeMatchesMap[size] = data.matches;
+
+  for (var [_size] of mediaSizeBreakpointMap) {
+    if (sizeMatchesMap[_size] && MEDIA.size !== _size) {
+      MEDIA.size = _size;
+      changed = true;
+      break;
+    }
+  }
+
+  if (changed) {
+    mediaEventTarget.dispatchEvent(new CustomEvent("change", {
+      detail: MEDIA
+    }));
+  }
+}
+
+mediaSizeBreakpointMap.forEach((breakpoint, size) => {
+  var mediaQueryList = window.matchMedia("(min-width: ".concat(breakpoint, ")"));
+  handleMatchesChange(mediaQueryList, size);
+
+  if (mediaQueryList.addEventListener) {
+    mediaQueryList.addEventListener("change", event => {
+      handleMatchesChange(event, size);
+    });
+  } else {
+    mediaQueryList.addListener(event => {
+      handleMatchesChange(event, size);
+    });
+  }
+});
+var getMedia = () => MEDIA;
+
 var symbolForRaw = Symbol.for("pre.evaluated.raw");
 var symbolForContext = Symbol.for("pre.evaluated.context");
 function isPreEvaluated(raw) {
@@ -2423,6 +2473,9 @@ function evaluate(raw) {
       case "SYS":
         return getReadOnlyProxy(sys);
 
+      case "MEDIA":
+        return getReadOnlyProxy(getMedia());
+
       case "__WIDGET_FN__":
         return widgetFunctions;
 
@@ -8594,6 +8647,8 @@ class LocationContext {
 
     _defineProperty$1(this, "anchorUnloadHandlers", []);
 
+    _defineProperty$1(this, "mediaChangeHandlers", []);
+
     _defineProperty$1(this, "messageCloseHandlers", []);
 
     _defineProperty$1(this, "messageHandlers", []);
@@ -9108,6 +9163,7 @@ class LocationContext {
       onPageLeave,
       onAnchorLoad,
       onAnchorUnload,
+      onMediaChange,
       onMessage,
       onMessageClose
     } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9166,6 +9222,15 @@ class LocationContext {
       });
     }
 
+    if (onMediaChange) {
+      this.mediaChangeHandlers.push({
+        brick,
+        match,
+        tplContextId,
+        handler: onMediaChange
+      });
+    }
+
     if (onMessage) {
       this.messageHandlers.push({
         brick,
@@ -9221,6 +9286,12 @@ class LocationContext {
     }
   }
 
+  handleMediaChange(detail) {
+    this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+      detail: getReadOnlyProxy(detail)
+    }), this.mediaChangeHandlers);
+  }
+
   handleMessage() {
     this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
   }
@@ -9732,6 +9803,8 @@ class Router {
 
     _defineProperty$1(this, "navConfig", void 0);
 
+    _defineProperty$1(this, "mediaEventTargetHandler", void 0);
+
     this.kernel = kernel;
     this.featureFlags = this.kernel.getFeatureFlags();
     var history = getHistory();
@@ -10039,7 +10112,12 @@ class Router {
         _this3.kernel.unsetBars({
           appChanged,
           legacy: actualLegacy
-        }); // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
+        });
+
+        if (_this3.mediaEventTargetHandler) {
+          mediaEventTarget.removeEventListener("change", _this3.mediaEventTargetHandler);
+          _this3.mediaEventTargetHandler = undefined;
+        } // There is a window to set theme and mode by `lifeCycle.onBeforePageLoad`.
 
 
         _this3.locationContext.handleBeforePageLoad();
@@ -10112,6 +10190,9 @@ class Router {
             _this3.locationContext.handleMessage();
           }
 
+          _this3.mediaEventTargetHandler = event => _this3.locationContext.handleMediaChange(event.detail);
+
+          mediaEventTarget.addEventListener("change", _this3.mediaEventTargetHandler);
           pageTracker === null || pageTracker === void 0 ? void 0 : pageTracker(locationContext.getCurrentMatch().path); // analytics page_view event
 
           userAnalytics.event("page_view", _objectSpread({