npm - @contentstack/live-preview-utils - Versions diffs - 4.2.0 → 4.2.1 - Mend

@contentstack/live-preview-utils 4.2.0 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" \| \"base\", string>;\n};\n\n/*\n Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n updateVariantClasses(event.data);\n }\n }\n );\n}\nfunction updateVariantClasses({\n highlightVariantFields,\n expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) \|\|\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp \|\| \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" \| \"base\", string>;\n};\n\n/*\n Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n setHighlightVariantFields(event.data.highlightVariantFields);\n updateVariantClasses();\n }\n }\n );\n}\nexport function updateVariantClasses(): void {\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) \|\|\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp \|\| \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.cts CHANGED Viewed

@@ -2,5 +2,6 @@
  * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
  */
 declare function useRecalculateVariantDataCSLPValues(): void;
+declare function updateVariantClasses(): void;
-export { useRecalculateVariantDataCSLPValues };
+export { updateVariantClasses, useRecalculateVariantDataCSLPValues };

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@
  * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
  */
 declare function useRecalculateVariantDataCSLPValues(): void;
+declare function updateVariantClasses(): void;
-export { useRecalculateVariantDataCSLPValues };
+export { updateVariantClasses, useRecalculateVariantDataCSLPValues };

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js CHANGED Viewed

@@ -6,21 +6,21 @@ import livePreviewPostMessage from "../../livePreview/eventManager/livePreviewEv
 import { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from "../../livePreview/eventManager/livePreviewEventManager.constant.js";
 import { DATA_CSLP_ATTR_SELECTOR } from "../utils/constants.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { setHighlightVariantFields } from "./useVariantsPostMessageEvent.js";
 var VARIANT_UPDATE_DELAY_MS = 8e3;
 function useRecalculateVariantDataCSLPValues() {
   livePreviewPostMessage?.on(
     LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
     (event) => {
       if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {
-        updateVariantClasses(event.data);
+        setHighlightVariantFields(event.data.highlightVariantFields);
+        updateVariantClasses();
       }
     }
   );
 }
-function updateVariantClasses({
-  highlightVariantFields,
-  expectedCSLPValues
-}) {
+function updateVariantClasses() {
+  const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
@@ -29,23 +29,20 @@ function updateVariantClasses({
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          visualBuilderStyles()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__base-field");
     } else if (dataCslp.startsWith("v2:") && variant && !dataCslp.includes(variant) && element.classList.contains("visual-builder__variant-field")) {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__variant-field"
       );
       element.classList.add("visual-builder__disabled-variant-field");
@@ -74,18 +71,15 @@ function updateVariantClasses({
       if (element.classList.contains("visual-builder__base-field")) {
         element.classList.remove("visual-builder__base-field");
       }
+      const variantFieldClasses = ["visual-builder__variant-field"];
       if (highlightVariantFields) {
-        element.classList.add(
-          visualBuilderStyles()["visual-builder__variant-field"],
-          "visual-builder__variant-field"
-        );
-      } else {
-        element.classList.add("visual-builder__variant-field");
+        variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
       }
+      element.classList.add(...variantFieldClasses);
     } else if (!dataCslp.startsWith("v2:")) {
       if (element.classList.contains("visual-builder__variant-field")) {
         element.classList.remove(
-          visualBuilderStyles()["visual-builder__variant-field"],
+          visualBuilderStyles()["visual-builder__variant-field-outline"],
           "visual-builder__variant-field"
         );
       }
@@ -135,6 +129,7 @@ function updateVariantClasses({
   }, VARIANT_UPDATE_DELAY_MS);
 }
 export {
+  updateVariantClasses,
   useRecalculateVariantDataCSLPValues
 };
 //# sourceMappingURL=useRecalculateVariantDataCSLPValues.js.map

package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" \| \"base\", string>;\n};\n\n/*\n Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n updateVariantClasses(event.data);\n }\n }\n );\n}\nfunction updateVariantClasses({\n highlightVariantFields,\n expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) \|\|\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp \|\| \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" \| \"base\", string>;\n};\n\n/*\n Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n setHighlightVariantFields(event.data.highlightVariantFields);\n updateVariantClasses();\n }\n }\n );\n}\nexport function updateVariantClasses(): void {\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) \|\|\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp \|\| \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs CHANGED Viewed

@@ -31,10 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var useVariantsPostMessageEvent_exports = {};
 __export(useVariantsPostMessageEvent_exports, {
   addVariantFieldClass: () => addVariantFieldClass,
+  debounceAddVariantFieldClass: () => debounceAddVariantFieldClass,
+  getHighlightVariantFieldsStatus: () => getHighlightVariantFieldsStatus,
   removeVariantFieldClass: () => removeVariantFieldClass,
   setAudienceMode: () => setAudienceMode,
+  setHighlightVariantFields: () => setHighlightVariantFields,
   setLocale: () => setLocale,
   setVariant: () => setVariant,
+  setVariantOrder: () => setVariantOrder,
   useVariantFieldsPostMessageEvent: () => useVariantFieldsPostMessageEvent
 });
 module.exports = __toCommonJS(useVariantsPostMessageEvent_exports);
@@ -43,6 +47,8 @@ var import_visualBuilder = require("../visualBuilder.style.cjs");
 var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
 var import_fieldSchemaMap = require("../utils/fieldSchemaMap.cjs");
+var import_useRecalculateVariantDataCSLPValues = require("./useRecalculateVariantDataCSLPValues.cjs");
+var import_lodash_es = require("lodash-es");
 var import_cslpdata = require("../../cslp/cslpdata.cjs");
 function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   if (!variantOrder || variantOrder.length === 0) {
@@ -56,16 +62,20 @@ function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   }
   return indexOfCslpVariant < indexOfCmsVariant;
 }
-function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder) {
+function addVariantFieldClass(variant_uid) {
+  const variantOrder = import__.VisualBuilder.VisualBuilderGlobalState.value.variantOrder;
+  const highlightVariantFields = import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const elements = document.querySelectorAll(`[data-cslp]`);
   elements.forEach((element) => {
     const dataCslp = element.getAttribute("data-cslp");
     if (!dataCslp) return;
     if (dataCslp?.includes(variant_uid)) {
-      highlightVariantFields && element.classList.add(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]
-      );
       element.classList.add("visual-builder__variant-field");
+      if (highlightVariantFields) {
+        element.classList.add(
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]
+        );
+      }
     } else if (!dataCslp.startsWith("v2:")) {
       element.classList.add("visual-builder__base-field");
     } else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {
@@ -75,14 +85,19 @@ function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder)
     }
   });
 }
+var debounceAddVariantFieldClass = (0, import_lodash_es.debounce)(
+  addVariantFieldClass,
+  1e3,
+  { trailing: true }
+);
 function removeVariantFieldClass(onlyHighlighted = false) {
   if (onlyHighlighted) {
     const variantElements = document.querySelectorAll(
-      `.${(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]}`
+      `.${(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]}`
     );
     variantElements.forEach((element) => {
       element.classList.remove(
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]
       );
     });
   } else {
@@ -93,7 +108,7 @@ function removeVariantFieldClass(onlyHighlighted = false) {
       element.classList.remove(
         "visual-builder__disabled-variant-field",
         "visual-builder__variant-field",
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
         "visual-builder__base-field",
         "visual-builder__lower-order-variant-field"
       );
@@ -109,12 +124,41 @@ function setVariant(uid) {
 function setLocale(locale) {
   import__.VisualBuilder.VisualBuilderGlobalState.value.locale = locale;
 }
-function useVariantFieldsPostMessageEvent() {
+function setHighlightVariantFields(highlight) {
+  import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;
+}
+function setVariantOrder(variantOrder) {
+  import__.VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;
+}
+async function getHighlightVariantFieldsStatus() {
+  try {
+    const result = await import_visualBuilderPostMessage.default?.send(
+      import_postMessage.VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS
+    );
+    return result ?? {
+      highlightVariantFields: false
+    };
+  } catch (error) {
+    console.error("Failed to get highlight variant fields status:", error);
+    return {
+      highlightVariantFields: false
+    };
+  }
+}
+function useVariantFieldsPostMessageEvent({ isSSR }) {
   import_visualBuilderPostMessage.default?.on(
     import_postMessage.VisualBuilderPostMessageEvents.GET_VARIANT_ID,
     (event) => {
-      setVariant(event.data.variant);
+      const selectedVariant = event.data.variant;
+      setVariant(selectedVariant);
       import_fieldSchemaMap.FieldSchemaMap.clear();
+      if (isSSR) {
+        if (selectedVariant) {
+          addVariantFieldClass(selectedVariant);
+        }
+      } else {
+        (0, import_useRecalculateVariantDataCSLPValues.updateVariantClasses)();
+      }
     }
   );
   import_visualBuilderPostMessage.default?.on(
@@ -132,17 +176,18 @@ function useVariantFieldsPostMessageEvent() {
   import_visualBuilderPostMessage.default?.on(
     import_postMessage.VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,
     (event) => {
+      setHighlightVariantFields(event.data.variant_data.highlightVariantFields);
+      setVariantOrder(event.data.variant_data.variantOrder || []);
       removeVariantFieldClass();
       addVariantFieldClass(
-        event.data.variant_data.variant,
-        event.data.variant_data.highlightVariantFields,
-        event.data.variant_data.variantOrder
+        event.data.variant_data.variant
       );
     }
   );
   import_visualBuilderPostMessage.default?.on(
     import_postMessage.VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
     (event) => {
+      setHighlightVariantFields(false);
       removeVariantFieldClass(event?.data?.onlyHighlighted);
     }
   );
@@ -150,10 +195,14 @@ function useVariantFieldsPostMessageEvent() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   addVariantFieldClass,
+  debounceAddVariantFieldClass,
+  getHighlightVariantFieldsStatus,
   removeVariantFieldClass,
   setAudienceMode,
+  setHighlightVariantFields,
   setLocale,
   setVariant,
+  setVariantOrder,
   useVariantFieldsPostMessageEvent
 });
 //# sourceMappingURL=useVariantsPostMessageEvent.cjs.map

package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n data: {\n variant_data: {\n variant: string;\n highlightVariantFields: boolean;\n variantOrder: string[];\n };\n };\n}\ninterface RemoveVariantFieldsEvent {\n data: {\n onlyHighlighted?: boolean;\n };\n}\n\ninterface AudienceEvent {\n data: {\n audienceMode: boolean;\n };\n}\ninterface VariantEvent {\n data: {\n variant: string \| null;\n };\n}\n\ninterface LocaleEvent {\n data: {\n locale: string;\n };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n if(!variantOrder \|\| variantOrder.length === 0) {\n return false;\n }\n const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant \|\| \"\");\n if(indexOfCslpVariant < 0) {\n return false;\n }\n return indexOfCslpVariant < indexOfCmsVariant;\n}\n\nexport function addVariantFieldClass(\n variant_uid: string,\n highlightVariantFields: boolean,\n variantOrder: string[]\n): void {\n const elements = document.querySelectorAll(`[data-cslp]`);\n elements.forEach((element) => {\n const dataCslp = element.getAttribute(\"data-cslp\");\n if (!dataCslp) return;\n\n if (dataCslp?.includes(variant_uid)) {\n highlightVariantFields &&\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"]\n );\n element.classList.add(\"visual-builder__variant-field\");\n } else if (!dataCslp.startsWith(\"v2:\")) {\n element.classList.add(\"visual-builder__base-field\");\n } \n else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n }\n else {\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n });\n}\n\nexport function removeVariantFieldClass(\n onlyHighlighted: boolean = false\n): void {\n if (onlyHighlighted) {\n const variantElements = document.querySelectorAll(\n `.${visualBuilderStyles()[\"visual-builder__variant-field\"]}`\n );\n variantElements.forEach((element) => {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"]\n );\n });\n } else {\n const variantAndBaseFieldElements = document.querySelectorAll(\n \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n );\n variantAndBaseFieldElements.forEach((element) => {\n element.classList.remove(\n \"visual-builder__disabled-variant-field\",\n \"visual-builder__variant-field\",\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__base-field\",\n \"visual-builder__lower-order-variant-field\"\n );\n });\n }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string \| null): void {\n VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n (event: VariantEvent) => {\n setVariant(event.data.variant);\n // clear field schema when variant is changed.\n // this is required as we cache field schema\n // which contain a key isUnlinkedVariant.\n // This key can change when variant is changed,\n // so clear the field schema cache\n FieldSchemaMap.clear();\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_LOCALE,\n (event: LocaleEvent) => {\n setLocale(event.data.locale);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n (event: AudienceEvent) => {\n setAudienceMode(event.data.audienceMode);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n (event: VariantFieldsEvent) => {\n removeVariantFieldClass();\n addVariantFieldClass(\n event.data.variant_data.variant,\n event.data.variant_data.highlightVariantFields,\n event.data.variant_data.variantOrder\n );\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n (event: RemoveVariantFieldsEvent) => {\n removeVariantFieldClass(event?.data?.onlyHighlighted);\n }\n );\n}\n"],"mappings":"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","names":["visualBuilderPostMessage"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { updateVariantClasses } from \"./useRecalculateVariantDataCSLPValues\";\nimport { debounce } from \"lodash-es\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n data: {\n variant_data: {\n variant: string;\n highlightVariantFields: boolean;\n variantOrder: string[];\n };\n };\n}\ninterface RemoveVariantFieldsEvent {\n data: {\n onlyHighlighted?: boolean;\n };\n}\n\ninterface AudienceEvent {\n data: {\n audienceMode: boolean;\n };\n}\ninterface VariantEvent {\n data: {\n variant: string \| null;\n };\n}\n\ninterface LocaleEvent {\n data: {\n locale: string;\n };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n if(!variantOrder \|\| variantOrder.length === 0) {\n return false;\n }\n const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant \|\| \"\");\n if(indexOfCslpVariant < 0) {\n return false;\n }\n return indexOfCslpVariant < indexOfCmsVariant;\n}\n\n\nexport function addVariantFieldClass(\n variant_uid: string\n): void {\n const variantOrder = VisualBuilder.VisualBuilderGlobalState.value.variantOrder;\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n const elements = document.querySelectorAll(`[data-cslp]`);\n elements.forEach((element) => {\n const dataCslp = element.getAttribute(\"data-cslp\");\n if (!dataCslp) return;\n\n if (dataCslp?.includes(variant_uid)) {\n element.classList.add(\"visual-builder__variant-field\");\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n );\n }\n } else if (!dataCslp.startsWith(\"v2:\")) {\n element.classList.add(\"visual-builder__base-field\");\n } \n else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n }\n else {\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n });\n}\n\nexport const debounceAddVariantFieldClass = debounce(\n addVariantFieldClass,\n 1000,\n { trailing: true }\n) as (variant_uid: string) => void;\n\nexport function removeVariantFieldClass(\n onlyHighlighted: boolean = false\n): void {\n if (onlyHighlighted) {\n const variantElements = document.querySelectorAll(\n `.${visualBuilderStyles()[\"visual-builder__variant-field-outline\"]}`\n );\n variantElements.forEach((element) => {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n );\n });\n } else {\n const variantAndBaseFieldElements = document.querySelectorAll(\n \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n );\n variantAndBaseFieldElements.forEach((element) => {\n element.classList.remove(\n \"visual-builder__disabled-variant-field\",\n \"visual-builder__variant-field\",\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__base-field\",\n \"visual-builder__lower-order-variant-field\"\n );\n });\n }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string \| null): void {\n VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\nexport function setHighlightVariantFields(highlight: boolean): void {\n VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;\n}\nexport function setVariantOrder(variantOrder: string[]): void {\n VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;\n}\n\ninterface GetHighlightVariantFieldsStatusResponse {\n highlightVariantFields: boolean;\n}\nexport async function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse> {\n try {\n const result = await visualBuilderPostMessage?.send<GetHighlightVariantFieldsStatusResponse>(\n VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS\n ); \n return result ?? {\n highlightVariantFields: false,\n };\n } catch (error) {\n console.error(\"Failed to get highlight variant fields status:\", error);\n return {\n highlightVariantFields: false,\n };\n }\n}\n\nexport function useVariantFieldsPostMessageEvent({ isSSR }: { isSSR: boolean }): void {\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n (event: VariantEvent) => {\n const selectedVariant = event.data.variant;\n setVariant(selectedVariant);\n // clear field schema when variant is changed.\n // this is required as we cache field schema\n // which contain a key isUnlinkedVariant.\n // This key can change when variant is changed,\n // so clear the field schema cache\n FieldSchemaMap.clear();\n if (isSSR) {\n if (selectedVariant) {\n addVariantFieldClass(selectedVariant);\n }\n } else {\n // recalculate and apply classes\n updateVariantClasses();\n }\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_LOCALE,\n (event: LocaleEvent) => {\n setLocale(event.data.locale);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n (event: AudienceEvent) => {\n setAudienceMode(event.data.audienceMode);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n (event: VariantFieldsEvent) => {\n setHighlightVariantFields(event.data.variant_data.highlightVariantFields);\n setVariantOrder(event.data.variant_data.variantOrder \|\| []);\n removeVariantFieldClass();\n addVariantFieldClass(\n event.data.variant_data.variant\n );\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n (event: RemoveVariantFieldsEvent) => {\n setHighlightVariantFields(false);\n removeVariantFieldClass(event?.data?.onlyHighlighted);\n }\n );\n}\n"],"mappings":"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","names":["visualBuilderPostMessage"]}

package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.d.cts CHANGED Viewed

@@ -1,8 +1,17 @@
-declare function addVariantFieldClass(variant_uid: string, highlightVariantFields: boolean, variantOrder: string[]): void;
+declare function addVariantFieldClass(variant_uid: string): void;
+declare const debounceAddVariantFieldClass: (variant_uid: string) => void;
 declare function removeVariantFieldClass(onlyHighlighted?: boolean): void;
 declare function setAudienceMode(mode: boolean): void;
 declare function setVariant(uid: string | null): void;
 declare function setLocale(locale: string): void;
-declare function useVariantFieldsPostMessageEvent(): void;
+declare function setHighlightVariantFields(highlight: boolean): void;
+declare function setVariantOrder(variantOrder: string[]): void;
+interface GetHighlightVariantFieldsStatusResponse {
+    highlightVariantFields: boolean;
+}
+declare function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse>;
+declare function useVariantFieldsPostMessageEvent({ isSSR }: {
+    isSSR: boolean;
+}): void;
-export { addVariantFieldClass, removeVariantFieldClass, setAudienceMode, setLocale, setVariant, useVariantFieldsPostMessageEvent };
+export { addVariantFieldClass, debounceAddVariantFieldClass, getHighlightVariantFieldsStatus, removeVariantFieldClass, setAudienceMode, setHighlightVariantFields, setLocale, setVariant, setVariantOrder, useVariantFieldsPostMessageEvent };

package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.d.ts CHANGED Viewed

@@ -1,8 +1,17 @@
-declare function addVariantFieldClass(variant_uid: string, highlightVariantFields: boolean, variantOrder: string[]): void;
+declare function addVariantFieldClass(variant_uid: string): void;
+declare const debounceAddVariantFieldClass: (variant_uid: string) => void;
 declare function removeVariantFieldClass(onlyHighlighted?: boolean): void;
 declare function setAudienceMode(mode: boolean): void;
 declare function setVariant(uid: string | null): void;
 declare function setLocale(locale: string): void;
-declare function useVariantFieldsPostMessageEvent(): void;
+declare function setHighlightVariantFields(highlight: boolean): void;
+declare function setVariantOrder(variantOrder: string[]): void;
+interface GetHighlightVariantFieldsStatusResponse {
+    highlightVariantFields: boolean;
+}
+declare function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse>;
+declare function useVariantFieldsPostMessageEvent({ isSSR }: {
+    isSSR: boolean;
+}): void;
-export { addVariantFieldClass, removeVariantFieldClass, setAudienceMode, setLocale, setVariant, useVariantFieldsPostMessageEvent };
+export { addVariantFieldClass, debounceAddVariantFieldClass, getHighlightVariantFieldsStatus, removeVariantFieldClass, setAudienceMode, setHighlightVariantFields, setLocale, setVariant, setVariantOrder, useVariantFieldsPostMessageEvent };

package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.js CHANGED Viewed

@@ -6,6 +6,8 @@ import { visualBuilderStyles } from "../visualBuilder.style.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
+import { updateVariantClasses } from "./useRecalculateVariantDataCSLPValues.js";
+import { debounce } from "lodash-es";
 import { extractDetailsFromCslp } from "../../cslp/cslpdata.js";
 function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   if (!variantOrder || variantOrder.length === 0) {
@@ -19,16 +21,20 @@ function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
   }
   return indexOfCslpVariant < indexOfCmsVariant;
 }
-function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder) {
+function addVariantFieldClass(variant_uid) {
+  const variantOrder = VisualBuilder.VisualBuilderGlobalState.value.variantOrder;
+  const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
   const elements = document.querySelectorAll(`[data-cslp]`);
   elements.forEach((element) => {
     const dataCslp = element.getAttribute("data-cslp");
     if (!dataCslp) return;
     if (dataCslp?.includes(variant_uid)) {
-      highlightVariantFields && element.classList.add(
-        visualBuilderStyles()["visual-builder__variant-field"]
-      );
       element.classList.add("visual-builder__variant-field");
+      if (highlightVariantFields) {
+        element.classList.add(
+          visualBuilderStyles()["visual-builder__variant-field-outline"]
+        );
+      }
     } else if (!dataCslp.startsWith("v2:")) {
       element.classList.add("visual-builder__base-field");
     } else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {
@@ -38,14 +44,19 @@ function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder)
     }
   });
 }
+var debounceAddVariantFieldClass = debounce(
+  addVariantFieldClass,
+  1e3,
+  { trailing: true }
+);
 function removeVariantFieldClass(onlyHighlighted = false) {
   if (onlyHighlighted) {
     const variantElements = document.querySelectorAll(
-      `.${visualBuilderStyles()["visual-builder__variant-field"]}`
+      `.${visualBuilderStyles()["visual-builder__variant-field-outline"]}`
     );
     variantElements.forEach((element) => {
       element.classList.remove(
-        visualBuilderStyles()["visual-builder__variant-field"]
+        visualBuilderStyles()["visual-builder__variant-field-outline"]
       );
     });
   } else {
@@ -56,7 +67,7 @@ function removeVariantFieldClass(onlyHighlighted = false) {
       element.classList.remove(
         "visual-builder__disabled-variant-field",
         "visual-builder__variant-field",
-        visualBuilderStyles()["visual-builder__variant-field"],
+        visualBuilderStyles()["visual-builder__variant-field-outline"],
         "visual-builder__base-field",
         "visual-builder__lower-order-variant-field"
       );
@@ -72,12 +83,41 @@ function setVariant(uid) {
 function setLocale(locale) {
   VisualBuilder.VisualBuilderGlobalState.value.locale = locale;
 }
-function useVariantFieldsPostMessageEvent() {
+function setHighlightVariantFields(highlight) {
+  VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;
+}
+function setVariantOrder(variantOrder) {
+  VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;
+}
+async function getHighlightVariantFieldsStatus() {
+  try {
+    const result = await visualBuilderPostMessage?.send(
+      VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS
+    );
+    return result ?? {
+      highlightVariantFields: false
+    };
+  } catch (error) {
+    console.error("Failed to get highlight variant fields status:", error);
+    return {
+      highlightVariantFields: false
+    };
+  }
+}
+function useVariantFieldsPostMessageEvent({ isSSR }) {
   visualBuilderPostMessage?.on(
     VisualBuilderPostMessageEvents.GET_VARIANT_ID,
     (event) => {
-      setVariant(event.data.variant);
+      const selectedVariant = event.data.variant;
+      setVariant(selectedVariant);
       FieldSchemaMap.clear();
+      if (isSSR) {
+        if (selectedVariant) {
+          addVariantFieldClass(selectedVariant);
+        }
+      } else {
+        updateVariantClasses();
+      }
     }
   );
   visualBuilderPostMessage?.on(
@@ -95,27 +135,32 @@ function useVariantFieldsPostMessageEvent() {
   visualBuilderPostMessage?.on(
     VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,
     (event) => {
+      setHighlightVariantFields(event.data.variant_data.highlightVariantFields);
+      setVariantOrder(event.data.variant_data.variantOrder || []);
       removeVariantFieldClass();
       addVariantFieldClass(
-        event.data.variant_data.variant,
-        event.data.variant_data.highlightVariantFields,
-        event.data.variant_data.variantOrder
+        event.data.variant_data.variant
       );
     }
   );
   visualBuilderPostMessage?.on(
     VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
     (event) => {
+      setHighlightVariantFields(false);
       removeVariantFieldClass(event?.data?.onlyHighlighted);
     }
   );
 }
 export {
   addVariantFieldClass,
+  debounceAddVariantFieldClass,
+  getHighlightVariantFieldsStatus,
   removeVariantFieldClass,
   setAudienceMode,
+  setHighlightVariantFields,
   setLocale,
   setVariant,
+  setVariantOrder,
   useVariantFieldsPostMessageEvent
 };
 //# sourceMappingURL=useVariantsPostMessageEvent.js.map