@next-core/brick-kit 2.113.0 → 2.115.1

package/dist/index.esm.js

@@ -2187,6 +2187,56 @@ function getCustomTemplateContext(tplContextId) {
   return tplContextMap.get(tplContextId);
 }
 
+var MediaBreakpoint;
+
+(function (MediaBreakpoint) {
+  MediaBreakpoint["xLarge"] = "xLarge";
+  MediaBreakpoint["large"] = "large";
+  MediaBreakpoint["medium"] = "medium";
+  MediaBreakpoint["small"] = "small";
+  MediaBreakpoint["xSmall"] = "xSmall";
+})(MediaBreakpoint || (MediaBreakpoint = {}));
+
+var mediaBreakpointMinWidthMap = new Map([[MediaBreakpoint.xLarge, "1920px"], [MediaBreakpoint.large, "1600px"], [MediaBreakpoint.medium, "1280px"], [MediaBreakpoint.small, "1024px"], [MediaBreakpoint.xSmall, 0]]);
+var mediaEventTarget = new EventTarget$1();
+var breakpointMatchesMap = {};
+var MEDIA = {};
+
+function handleMatchesChange(data, breakpoint) {
+  var changed = false;
+  breakpointMatchesMap[breakpoint] = data.matches;
+
+  for (var [_breakpoint] of mediaBreakpointMinWidthMap) {
+    if (breakpointMatchesMap[_breakpoint] && MEDIA.breakpoint !== _breakpoint) {
+      MEDIA.breakpoint = _breakpoint;
+      changed = true;
+      break;
+    }
+  }
+
+  if (changed) {
+    mediaEventTarget.dispatchEvent(new CustomEvent("change", {
+      detail: MEDIA
+    }));
+  }
+}
+
+mediaBreakpointMinWidthMap.forEach((minWidth, breakpoint) => {
+  var mediaQueryList = window.matchMedia("(min-width: ".concat(minWidth, ")"));
+  handleMatchesChange(mediaQueryList, breakpoint);
+
+  if (mediaQueryList.addEventListener) {
+    mediaQueryList.addEventListener("change", event => {
+      handleMatchesChange(event, breakpoint);
+    });
+  } else {
+    mediaQueryList.addListener(event => {
+      handleMatchesChange(event, breakpoint);
+    });
+  }
+});
+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", []);
@@ -8783,15 +8838,11 @@ class LocationContext {
           }
 
           if (isRouteConfOfRoutes(route) && Array.isArray(route.routes)) {
+            yield _this.preFetchMenu(route.context);
             yield _this.mountRoutes(route.routes, slotId, mountRoutesResult);
           } else if (isRouteConfOfBricks(route) && Array.isArray(route.bricks)) {
-            var useMenus = scanAppGetMenuInAny(route);
-
-            if (useMenus.length) {
-              yield constructMenuByMenusList(useMenus, _this.getCurrentContext(), _this.kernel);
-            }
-
-            yield _this.mountBricks(route.bricks, matched.match, slotId, mountRoutesResult); // analytics data (page_view event)
+            yield _this.mountBricks(route.bricks, matched.match, slotId, mountRoutesResult);
+            yield _this.preFetchMenu(route); // analytics data (page_view event)
 
             if (route.analyticsData) {
               mountRoutesResult.analyticsData = computeRealValue(route.analyticsData, context, true);
@@ -9047,6 +9098,9 @@ class LocationContext {
       var expandedBrickConf = brickConf;
 
       if (tplTagName) {
+        var _customTemplateRegist;
+
+        yield _this6.preFetchMenu((_customTemplateRegist = customTemplateRegistry.get(tplTagName)) === null || _customTemplateRegist === void 0 ? void 0 : _customTemplateRegist.bricks);
         expandedBrickConf = yield asyncExpandCustomTemplate(_objectSpread(_objectSpread({}, brickConf), {}, {
           brick: tplTagName,
           // Properties are computed for custom templates.
@@ -9108,6 +9162,7 @@ class LocationContext {
       onPageLeave,
       onAnchorLoad,
       onAnchorUnload,
+      onMediaChange,
       onMessage,
       onMessageClose
     } = lifeCycle !== null && lifeCycle !== void 0 ? lifeCycle : {};
@@ -9166,6 +9221,15 @@ class LocationContext {
       });
     }
 
+    if (onMediaChange) {
+      this.mediaChangeHandlers.push({
+        brick,
+        match,
+        tplContextId,
+        handler: onMediaChange
+      });
+    }
+
     if (onMessage) {
       this.messageHandlers.push({
         brick,
@@ -9221,6 +9285,12 @@ class LocationContext {
     }
   }
 
+  handleMediaChange(detail) {
+    this.dispatchLifeCycleEvent(new CustomEvent("media.change", {
+      detail: getReadOnlyProxy(detail)
+    }), this.mediaChangeHandlers);
+  }
+
   handleMessage() {
     this.messageDispatcher.create(this.messageHandlers, this.getCurrentContext());
   }
@@ -9251,6 +9321,18 @@ class LocationContext {
     }
   }
 
+  preFetchMenu(data) {
+    var _this7 = this;
+
+    return _asyncToGenerator$4(function* () {
+      var useMenus = scanAppGetMenuInAny(data);
+
+      if (useMenus.length) {
+        yield constructMenuByMenusList(useMenus, _this7.getCurrentContext(), _this7.kernel);
+      }
+    })();
+  }
+
 }
 
 function unmountTree(mountPoint) {
@@ -9732,6 +9814,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 +10123,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 +10201,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({