npm - @contentstack/live-preview-utils - Versions diffs - 3.1.1 → 3.1.3 - Mend

@contentstack/live-preview-utils 3.1.1 → 3.1.3

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 (254) hide show

package/dist/modern/visualBuilder/components/addInstanceButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\ninterface AddInstanceButtonProps {\n value: any;\n onClick: (event: MouseEvent) => void;\n label?: string \| undefined;\n fieldSchema: ISchemaFieldMap \| undefined;\n}\n\nfunction AddInstanceButtonComponent(\n props: AddInstanceButtonProps\n): JSX.Element {\n const fieldSchema = props.fieldSchema;\n const ~~disabled~~ =\n ~~fieldSchema~~ && ~~\"max_instance\"~~ in ~~fieldSchema~~ && ~~fieldSchema~~.~~max_instance~~\n ? ~~props~~.value~~.length~~ >= ~~fieldSchema~~.~~max_instance~~\n : ~~false~~;\n\n ~~return~~ (\n ~~<button~~\n ~~className~~={classNames(\n \"visual-builder__add-button\",\n visualBuilderStyles()[\"visual-builder__add-button\"],\n {\n \"visual-builder__add-button--with-label\": props.label,\n },\n visualBuilderStyles()[\"visual-builder__tooltip\"]\n )}\n data-tooltip={\"Add section\"}\n data-testid=\"visual-builder-add-instance-button\"\n disabled={disabled}\n title={\n ~~disabled~~ && ~~fieldSchema &&~~ \~~"max_instance\" in fieldSchema\~~n ? `Max ${~~fieldSchema.max_instance~~} instances allowed`\n : undefined\n }\n onClick={(e) => {\n const event = e as unknown as MouseEvent;\n ~~props.~~onClick(event);\n }}\n >\n <PlusIcon />\n {props.label ? (\n <span\n title={props.label}\n className={classNames(\n \"visual-builder__add-button-label\",\n visualBuilderStyles()[\n \"visual-builder__add-button-label\"\n ]\n )}\n >\n {props.label}\n </span>\n ) : null}\n </button>\n );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAAuB;AACvB,2BAAoC;AACpC,mBAAyB;~~AAoBjB~~;~~AAVR~~,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,~~WACF~~,~~eAAe~~,~~kBAAkB~~,~~eAAe~~,~~YAAY~~,~~eACtD~~,~~MAAM~~,MAAM,UAAU,~~YAAY~~,~~eAClC~~;~~AAEV~~,~~SACI~~;AAAA,~~IAAC~~;AAAA;AAAA,~~MACG~~,~~eAAW~~,~~kBAAAA~~;AAAA,~~QACP~~;AAAA,~~YACA~~,0CAAoB,EAAE,4BAA4B;AAAA,~~QAClD~~;AAAA,~~UACI~~,0CAA0C,MAAM;AAAA,~~QACpD~~;AAAA,~~YACA~~,0CAAoB,EAAE,yBAAyB;AAAA,~~MACnD~~;AAAA,~~MACA~~,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,~~YAAY~~,~~eAAe~~,~~kBAAkB,cACvC,~~OAAO,YAAY,~~YAAY,uBAC/B~~;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,~~cAAM~~,~~QAAQ,~~KAAK;AAAA,~~MACvB~~;AAAA,MAEA;AAAA,oDAAC,yBAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":["classNames"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { Signal } from \"@preact/signals\";\n\ninterface AddInstanceButtonProps {\n value: any;\n onClick: (event: MouseEvent) => void;\n label?: string \| undefined;\n fieldSchema: ISchemaFieldMap \| undefined;\n fieldMetadata: CslpData;\n index: number;\n loading: Signal<boolean>;\n}\n\nfunction AddInstanceButtonComponent(\n props: AddInstanceButtonProps\n): JSX.Element {\n const fieldSchema = props.fieldSchema;\n const fieldMetadata = props.fieldMetadata;\n const index = props.index;\n const loading = props.loading;\n\n const onClick = async (event: MouseEvent) => {\n loading.value = true;\n try {\n await visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.ADD_INSTANCE,\n {\n fieldMetadata,\n index,\n }\n );\n } catch (error) {\n console.error(\"Visual Builder: Failed to add instance\", error);\n }\n loading.value = false;\n props.onClick(event);\n };\n\n const buttonClassName = classNames(\n \"visual-builder__add-button\",\n visualBuilderStyles()[\"visual-builder__add-button\"],\n {\n \"visual-builder__add-button--with-label\": props.label,\n },\n {\n [visualBuilderStyles()[\"visual-builder__add-button--loading\"]]:\n loading.value,\n },\n visualBuilderStyles()[\"visual-builder__tooltip\"]\n );\n\n const maxInstances =\n fieldSchema && fieldSchema.data_type !== \"block\"\n ? fieldSchema.max_instance\n : undefined;\n const isMaxInstances = maxInstances\n ? props.value.length >= maxInstances\n : false;\n const disabled = loading.value \|\| isMaxInstances;\n\n return (\n <button\n className={buttonClassName}\n data-tooltip={\"Add section\"}\n data-testid=\"visual-builder-add-instance-button\"\n disabled={disabled}\n title={\n maxInstances && isMaxInstances\n ? `Max ${maxInstances} instances allowed`\n : undefined\n }\n onClick={(e) => {\n const event = e as unknown as MouseEvent;\n onClick(event);\n }}\n >\n <PlusIcon />\n {props.label ? (\n <span\n title={props.label}\n className={classNames(\n \"visual-builder__add-button-label\",\n visualBuilderStyles()[\n \"visual-builder__add-button-label\"\n ]\n )}\n >\n {props.label}\n </span>\n ) : null}\n </button>\n );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAAuB;AACvB,2BAAoC;AACpC,mBAAyB;AAGzB,sCAAqC;AACrC,yBAA+C;AA6DvC;AAhDR,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,gBAAgB,MAAM;AAC5B,QAAM,QAAQ,MAAM;AACpB,QAAM,UAAU,MAAM;AAEtB,QAAM,UAAU,OAAO,UAAsB;AACzC,YAAQ,QAAQ;AAChB,QAAI;AACA,YAAM,gCAAAA,SAA0B;AAAA,QAC5B,kDAA+B;AAAA,QAC/B;AAAA,UACI;AAAA,UACA;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,SAAS,OAAO;AACZ,cAAQ,MAAM,0CAA0C,KAAK;AAAA,IACjE;AACA,YAAQ,QAAQ;AAChB,UAAM,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,sBAAkB,kBAAAC;AAAA,IACpB;AAAA,QACA,0CAAoB,EAAE,4BAA4B;AAAA,IAClD;AAAA,MACI,0CAA0C,MAAM;AAAA,IACpD;AAAA,IACA;AAAA,MACI,KAAC,0CAAoB,EAAE,qCAAqC,CAAC,GACzD,QAAQ;AAAA,IAChB;AAAA,QACA,0CAAoB,EAAE,yBAAyB;AAAA,EACnD;AAEA,QAAM,eACF,eAAe,YAAY,cAAc,UACnC,YAAY,eACZ;AACV,QAAM,iBAAiB,eACjB,MAAM,MAAM,UAAU,eACtB;AACN,QAAM,WAAW,QAAQ,SAAS;AAElC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,gBAAgB,iBACV,OAAO,YAAY,uBACnB;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,gBAAQ,KAAK;AAAA,MACjB;AAAA,MAEA;AAAA,oDAAC,yBAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":["visualBuilderPostMessage","classNames"]}

package/dist/modern/visualBuilder/components/addInstanceButton.d.cts CHANGED Viewed

@@ -1,4 +1,6 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.cjs';
+import { CslpData } from '../../cslp/types/cslp.types.cjs';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.cjs';
 interface AddInstanceButtonProps {
@@ -6,6 +8,9 @@ interface AddInstanceButtonProps {
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
     fieldSchema: ISchemaFieldMap | undefined;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
 }
 declare function AddInstanceButtonComponent(props: AddInstanceButtonProps): JSX.Element;

package/dist/modern/visualBuilder/components/addInstanceButton.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import { ISchemaFieldMap } from '../utils/types/index.types.js';
+import { CslpData } from '../../cslp/types/cslp.types.js';
+import { Signal } from '@preact/signals';
 import '../../cms/types/contentTypeSchema.types.js';
 interface AddInstanceButtonProps {
@@ -6,6 +8,9 @@ interface AddInstanceButtonProps {
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
     fieldSchema: ISchemaFieldMap | undefined;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
 }
 declare function AddInstanceButtonComponent(props: AddInstanceButtonProps): JSX.Element;

package/dist/modern/visualBuilder/components/addInstanceButton.js CHANGED Viewed

@@ -4,28 +4,55 @@ import "../../chunk-5WRI5ZAA.js";
 import classNames from "classnames";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
 import { PlusIcon } from "./icons/index.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { jsx, jsxs } from "preact/jsx-runtime";
 function AddInstanceButtonComponent(props) {
   const fieldSchema = props.fieldSchema;
-  const disabled = fieldSchema && "max_instance" in fieldSchema && fieldSchema.max_instance ? props.value.length >= fieldSchema.max_instance : false;
+  const fieldMetadata = props.fieldMetadata;
+  const index = props.index;
+  const loading = props.loading;
+  const onClick = async (event) => {
+    loading.value = true;
+    try {
+      await visualBuilderPostMessage?.send(
+        VisualBuilderPostMessageEvents.ADD_INSTANCE,
+        {
+          fieldMetadata,
+          index
+        }
+      );
+    } catch (error) {
+      console.error("Visual Builder: Failed to add instance", error);
+    }
+    loading.value = false;
+    props.onClick(event);
+  };
+  const buttonClassName = classNames(
+    "visual-builder__add-button",
+    visualBuilderStyles()["visual-builder__add-button"],
+    {
+      "visual-builder__add-button--with-label": props.label
+    },
+    {
+      [visualBuilderStyles()["visual-builder__add-button--loading"]]: loading.value
+    },
+    visualBuilderStyles()["visual-builder__tooltip"]
+  );
+  const maxInstances = fieldSchema && fieldSchema.data_type !== "block" ? fieldSchema.max_instance : void 0;
+  const isMaxInstances = maxInstances ? props.value.length >= maxInstances : false;
+  const disabled = loading.value || isMaxInstances;
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: classNames(
-        "visual-builder__add-button",
-        visualBuilderStyles()["visual-builder__add-button"],
-        {
-          "visual-builder__add-button--with-label": props.label
-        },
-        visualBuilderStyles()["visual-builder__tooltip"]
-      ),
+      className: buttonClassName,
       "data-tooltip": "Add section",
       "data-testid": "visual-builder-add-instance-button",
       disabled,
-      title: disabled && fieldSchema && "max_instance" in fieldSchema ? `Max ${fieldSchema.max_instance} instances allowed` : void 0,
+      title: maxInstances && isMaxInstances ? `Max ${maxInstances} instances allowed` : void 0,
       onClick: (e) => {
         const event = e;
-        props.onClick(event);
+        onClick(event);
       },
       children: [
         /* @__PURE__ */ jsx(PlusIcon, {}),

package/dist/modern/visualBuilder/components/addInstanceButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\n\ninterface AddInstanceButtonProps {\n value: any;\n onClick: (event: MouseEvent) => void;\n label?: string \| undefined;\n fieldSchema: ISchemaFieldMap \| undefined;\n}\n\nfunction AddInstanceButtonComponent(\n props: AddInstanceButtonProps\n): JSX.Element {\n const fieldSchema = props.fieldSchema;\n const ~~disabled~~ =\n ~~fieldSchema~~ && ~~\"max_instance\"~~ in ~~fieldSchema~~ && ~~fieldSchema~~.~~max_instance~~\n ? ~~props~~.value~~.length~~ >= ~~fieldSchema~~.~~max_instance~~\n : ~~false~~;\n\n ~~return~~ (\n ~~<button~~\n ~~className~~={classNames(\n \"visual-builder__add-button\",\n visualBuilderStyles()[\"visual-builder__add-button\"],\n {\n \"visual-builder__add-button--with-label\": props.label,\n },\n visualBuilderStyles()[\"visual-builder__tooltip\"]\n )}\n data-tooltip={\"Add section\"}\n data-testid=\"visual-builder-add-instance-button\"\n disabled={disabled}\n title={\n ~~disabled~~ && ~~fieldSchema &&~~ \~~"max_instance\" in fieldSchema\~~n ? `Max ${~~fieldSchema.max_instance~~} instances allowed`\n : undefined\n }\n onClick={(e) => {\n const event = e as unknown as MouseEvent;\n ~~props.~~onClick(event);\n }}\n >\n <PlusIcon />\n {props.label ? (\n <span\n title={props.label}\n className={classNames(\n \"visual-builder__add-button-label\",\n visualBuilderStyles()[\n \"visual-builder__add-button-label\"\n ]\n )}\n >\n {props.label}\n </span>\n ) : null}\n </button>\n );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;AACA,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;~~AAoBjB~~,~~SAsBI~~,~~KAtBJ~~;~~AAVR~~,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,~~WACF~~,~~eAAe~~,~~kBAAkB~~,~~eAAe~~,~~YAAY~~,~~eACtD~~,~~MAAM~~,MAAM,UAAU,~~YAAY~~,~~eAClC~~;~~AAEV~~,~~SACI~~;AAAA,~~IAAC~~;AAAA;AAAA,~~MACG~~,~~WAAW~~;AAAA,~~QACP~~;AAAA,~~QACA~~,oBAAoB,EAAE,4BAA4B;AAAA,~~QAClD~~;AAAA,~~UACI~~,0CAA0C,MAAM;AAAA,~~QACpD~~;AAAA,~~QACA~~,oBAAoB,EAAE,yBAAyB;AAAA,~~MACnD~~;AAAA,~~MACA~~,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,~~YAAY~~,~~eAAe~~,~~kBAAkB,cACvC,~~OAAO,YAAY,~~YAAY,uBAC/B~~;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,~~cAAM~~,~~QAAQ,~~KAAK;AAAA,~~MACvB~~;AAAA,MAEA;AAAA,4BAAC,YAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/addInstanceButton.tsx"],"sourcesContent":["import React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { PlusIcon } from \"./icons\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { Signal } from \"@preact/signals\";\n\ninterface AddInstanceButtonProps {\n value: any;\n onClick: (event: MouseEvent) => void;\n label?: string \| undefined;\n fieldSchema: ISchemaFieldMap \| undefined;\n fieldMetadata: CslpData;\n index: number;\n loading: Signal<boolean>;\n}\n\nfunction AddInstanceButtonComponent(\n props: AddInstanceButtonProps\n): JSX.Element {\n const fieldSchema = props.fieldSchema;\n const fieldMetadata = props.fieldMetadata;\n const index = props.index;\n const loading = props.loading;\n\n const onClick = async (event: MouseEvent) => {\n loading.value = true;\n try {\n await visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.ADD_INSTANCE,\n {\n fieldMetadata,\n index,\n }\n );\n } catch (error) {\n console.error(\"Visual Builder: Failed to add instance\", error);\n }\n loading.value = false;\n props.onClick(event);\n };\n\n const buttonClassName = classNames(\n \"visual-builder__add-button\",\n visualBuilderStyles()[\"visual-builder__add-button\"],\n {\n \"visual-builder__add-button--with-label\": props.label,\n },\n {\n [visualBuilderStyles()[\"visual-builder__add-button--loading\"]]:\n loading.value,\n },\n visualBuilderStyles()[\"visual-builder__tooltip\"]\n );\n\n const maxInstances =\n fieldSchema && fieldSchema.data_type !== \"block\"\n ? fieldSchema.max_instance\n : undefined;\n const isMaxInstances = maxInstances\n ? props.value.length >= maxInstances\n : false;\n const disabled = loading.value \|\| isMaxInstances;\n\n return (\n <button\n className={buttonClassName}\n data-tooltip={\"Add section\"}\n data-testid=\"visual-builder-add-instance-button\"\n disabled={disabled}\n title={\n maxInstances && isMaxInstances\n ? `Max ${maxInstances} instances allowed`\n : undefined\n }\n onClick={(e) => {\n const event = e as unknown as MouseEvent;\n onClick(event);\n }}\n >\n <PlusIcon />\n {props.label ? (\n <span\n title={props.label}\n className={classNames(\n \"visual-builder__add-button-label\",\n visualBuilderStyles()[\n \"visual-builder__add-button-label\"\n ]\n )}\n >\n {props.label}\n </span>\n ) : null}\n </button>\n );\n}\n\nexport default AddInstanceButtonComponent;\n"],"mappings":";;;AACA,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAGzB,OAAO,8BAA8B;AACrC,SAAS,sCAAsC;AA6DvC,SAeI,KAfJ;AAhDR,SAAS,2BACL,OACW;AACX,QAAM,cAAc,MAAM;AAC1B,QAAM,gBAAgB,MAAM;AAC5B,QAAM,QAAQ,MAAM;AACpB,QAAM,UAAU,MAAM;AAEtB,QAAM,UAAU,OAAO,UAAsB;AACzC,YAAQ,QAAQ;AAChB,QAAI;AACA,YAAM,0BAA0B;AAAA,QAC5B,+BAA+B;AAAA,QAC/B;AAAA,UACI;AAAA,UACA;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,SAAS,OAAO;AACZ,cAAQ,MAAM,0CAA0C,KAAK;AAAA,IACjE;AACA,YAAQ,QAAQ;AAChB,UAAM,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,oBAAoB,EAAE,4BAA4B;AAAA,IAClD;AAAA,MACI,0CAA0C,MAAM;AAAA,IACpD;AAAA,IACA;AAAA,MACI,CAAC,oBAAoB,EAAE,qCAAqC,CAAC,GACzD,QAAQ;AAAA,IAChB;AAAA,IACA,oBAAoB,EAAE,yBAAyB;AAAA,EACnD;AAEA,QAAM,eACF,eAAe,YAAY,cAAc,UACnC,YAAY,eACZ;AACV,QAAM,iBAAiB,eACjB,MAAM,MAAM,UAAU,eACtB;AACN,QAAM,WAAW,QAAQ,SAAS;AAElC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX,gBAAc;AAAA,MACd,eAAY;AAAA,MACZ;AAAA,MACA,OACI,gBAAgB,iBACV,OAAO,YAAY,uBACnB;AAAA,MAEV,SAAS,CAAC,MAAM;AACZ,cAAM,QAAQ;AACd,gBAAQ,KAAK;AAAA,MACjB;AAAA,MAEA;AAAA,4BAAC,YAAS;AAAA,QACT,MAAM,QACH;AAAA,UAAC;AAAA;AAAA,YACG,OAAO,MAAM;AAAA,YACb,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,kCACJ;AAAA,YACJ;AAAA,YAEC,gBAAM;AAAA;AAAA,QACX,IACA;AAAA;AAAA;AAAA,EACR;AAER;AAEA,IAAO,4BAAQ;","names":[]}

package/dist/modern/visualBuilder/components/startEditingButton.cjs CHANGED Viewed

@@ -30,37 +30,64 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/visualBuilder/components/startEditingButton.tsx
 var startEditingButton_exports = {};
 __export(startEditingButton_exports, {
-  default: () => startEditingButton_default
+  default: () => startEditingButton_default,
+  getEditButtonPosition: () => getEditButtonPosition
 });
 module.exports = __toCommonJS(startEditingButton_exports);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_getVisualBuilderRedirectionUrl = __toESM(require("../utils/getVisualBuilderRedirectionUrl.cjs"), 1);
 var import_icons = require("./icons/index.cjs");
 var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_configManager = __toESM(require("../../configManager/configManager.cjs"), 1);
 var import_jsx_runtime = require("preact/jsx-runtime");
+var positionStyles = {
+  "bottom-right": (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__start-editing-btn__bottom-right"],
+  "bottom-left": (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__start-editing-btn__bottom-left"],
+  "top-left": (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__start-editing-btn__top-left"],
+  "top-right": (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__start-editing-btn__top-right"]
+};
+function getEditButtonPosition(position) {
+  const validPositions = ["bottom-left", "bottom-right", "top-left", "top-right"];
+  if (validPositions.includes(position)) {
+    return position;
+  } else {
+    return "bottom-right";
+  }
+}
 function StartEditingButtonComponent() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const config = import_configManager.default.get();
+  const enable = config.editInVisualBuilderButton.enable;
+  const position = config.editInVisualBuilderButton.position || "bottom-right";
+  function updateTargetUrl(e) {
+    const targetElement = e.target;
+    targetElement.setAttribute(
+      "href",
+      (0, import_getVisualBuilderRedirectionUrl.default)().toString()
+    );
+  }
+  return enable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "a",
     {
       href: (0, import_getVisualBuilderRedirectionUrl.default)().toString(),
       className: (0, import_classnames.default)(
         "visual-builder__start-editing-btn",
-        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__start-editing-btn"]
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__start-editing-btn"],
+        positionStyles[getEditButtonPosition(position)]
       ),
       "data-testid": "vcms-start-editing-btn",
-      onClick: (e) => {
-        const targetElement = e.target;
-        targetElement.setAttribute(
-          "href",
-          (0, import_getVisualBuilderRedirectionUrl.default)().toString()
-        );
-      },
+      onMouseEnter: (e) => updateTargetUrl(e),
+      onFocus: (e) => updateTargetUrl(e),
+      onClick: (e) => updateTargetUrl(e),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EditIcon, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Start Editing" })
       ]
     }
-  );
+  ) : null;
 }
 var startEditingButton_default = StartEditingButtonComponent;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getEditButtonPosition
+});
 //# sourceMappingURL=startEditingButton.cjs.map

package/dist/modern/visualBuilder/components/startEditingButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/startEditingButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport getVisualBuilderRedirectionUrl from \"../utils/getVisualBuilderRedirectionUrl\";\nimport { EditIcon } from \"./icons\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\n\nfunction StartEditingButtonComponent(): JSX.Element {\n return (\n <a\n href={getVisualBuilderRedirectionUrl().toString()}\n className={classNames(\n \"visual-builder__start-editing-btn\",\n visualBuilderStyles()[\"visual-builder__start-editing-btn\"]\n )}\n data-testid=\"vcms-start-editing-btn\"\n ~~onClick~~={(e) => {\n ~~const targetElement~~ = e~~.target~~ as ~~HTMLAnchorElement;\n targetElement.setAttribute~~(\n ~~\"href\",\n getVisualBuilderRedirectionUrl~~()~~.toString~~()~~\n );\n~~ }}\n >\n <EditIcon />\n <span>Start Editing</span>\n </a>\n );\n}\n\nexport default StartEditingButtonComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,4CAA2C;AAC3C,mBAAyB;AACzB,2BAAoC;~~AAK5B~~;~~AAFR~~,SAAS,~~8BAA2C~~;AAChD,~~SACI~~;AAAA,IAAC;AAAA;AAAA,MACG,UAAM,sCAAAA,SAA+B,EAAE,SAAS;AAAA,MAChD,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,mCAAmC;AAAA,~~MAC7D~~;AAAA,MACA,eAAY;AAAA,MACZ,~~SAAS~~,CAAC,MAAM~~;AACZ~~,~~cAAM,~~gBAAgB,~~EAAE~~;~~AACxB,sBAAc;~~AAAA,~~UACV;AAAA~~,~~cACA~~,~~sCAAAD~~,~~SAA+B~~,~~EAAE~~,~~SAAS~~;AAAA,~~QAC9C;AAAA~~,~~MACJ~~;AAAA,~~MAEA~~;AAAA,oDAAC,yBAAS;AAAA,QACV,4CAAC,UAAK,2BAAa;AAAA;AAAA;AAAA,EACvB;~~AAER~~;AAEA,IAAO,6BAAQ;","names":["getVisualBuilderRedirectionUrl","classNames"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/startEditingButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport getVisualBuilderRedirectionUrl from \"../utils/getVisualBuilderRedirectionUrl\";\nimport { EditIcon } from \"./icons\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport Config from \"../../configManager/configManager\";\nimport { IConfigEditInVisualBuilderButton } from \"../../types/types\";\n\n\ntype Position = NonNullable<IConfigEditInVisualBuilderButton['position']>;\n\nconst positionStyles: Record<Position, string> = {\n \"bottom-right\": visualBuilderStyles()['visual-builder__start-editing-btn__bottom-right'],\n \"bottom-left\": visualBuilderStyles()['visual-builder__start-editing-btn__bottom-left'],\n \"top-left\": visualBuilderStyles()['visual-builder__start-editing-btn__top-left'],\n \"top-right\": visualBuilderStyles()['visual-builder__start-editing-btn__top-right'],\n}\n\nexport function getEditButtonPosition(position: any): Position {\n const validPositions: Position[] = ['bottom-left', 'bottom-right', 'top-left', 'top-right']\n if(validPositions.includes(position)){\n return position\n } else {\n return \"bottom-right\"\n }\n}\n\nfunction StartEditingButtonComponent(): JSX.Element \| null {\n const config = Config.get()\n const enable = config.editInVisualBuilderButton.enable;\n const position = config.editInVisualBuilderButton.position \|\| \"bottom-right\";\n \n function updateTargetUrl(e: any){\n const targetElement = e.target as HTMLAnchorElement;\n targetElement.setAttribute(\n \"href\",\n getVisualBuilderRedirectionUrl().toString()\n );\n }\n\n return enable ? (\n <a\n href={getVisualBuilderRedirectionUrl().toString()}\n className={classNames(\n \"visual-builder__start-editing-btn\",\n visualBuilderStyles()[\"visual-builder__start-editing-btn\"],\n positionStyles[getEditButtonPosition(position)]\n )}\n data-testid=\"vcms-start-editing-btn\"\n onMouseEnter={(e) => updateTargetUrl(e)}\n onFocus={(e) => updateTargetUrl(e)}\n onClick={(e) => updateTargetUrl(e)}\n >\n <EditIcon />\n <span>Start Editing</span>\n </a>\n ) : null;\n}\n\nexport default StartEditingButtonComponent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,4CAA2C;AAC3C,mBAAyB;AACzB,2BAAoC;AAEpC,2BAAmB;AAoCX;AA9BR,IAAM,iBAA2C;AAAA,EAC7C,oBAAgB,0CAAoB,EAAE,iDAAiD;AAAA,EACvF,mBAAe,0CAAoB,EAAE,gDAAgD;AAAA,EACrF,gBAAY,0CAAoB,EAAE,6CAA6C;AAAA,EAC/E,iBAAa,0CAAoB,EAAE,8CAA8C;AACrF;AAEO,SAAS,sBAAsB,UAAyB;AAC3D,QAAM,iBAA6B,CAAC,eAAe,gBAAgB,YAAY,WAAW;AAC1F,MAAG,eAAe,SAAS,QAAQ,GAAE;AACjC,WAAO;AAAA,EACX,OAAO;AACH,WAAO;AAAA,EACX;AACJ;AAEA,SAAS,8BAAkD;AACvD,QAAM,SAAS,qBAAAA,QAAO,IAAI;AAC1B,QAAM,SAAS,OAAO,0BAA0B;AAChD,QAAM,WAAW,OAAO,0BAA0B,YAAY;AAE9D,WAAS,gBAAgB,GAAO;AAC5B,UAAM,gBAAgB,EAAE;AACxB,kBAAc;AAAA,MACV;AAAA,UACA,sCAAAC,SAA+B,EAAE,SAAS;AAAA,IAC9C;AAAA,EACJ;AAEA,SAAO,SACH;AAAA,IAAC;AAAA;AAAA,MACG,UAAM,sCAAAA,SAA+B,EAAE,SAAS;AAAA,MAChD,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,mCAAmC;AAAA,QACzD,eAAe,sBAAsB,QAAQ,CAAC;AAAA,MAClD;AAAA,MACA,eAAY;AAAA,MACZ,cAAc,CAAC,MAAM,gBAAgB,CAAC;AAAA,MACtC,SAAS,CAAC,MAAM,gBAAgB,CAAC;AAAA,MACjC,SAAS,CAAC,MAAM,gBAAgB,CAAC;AAAA,MAEjC;AAAA,oDAAC,yBAAS;AAAA,QACV,4CAAC,UAAK,2BAAa;AAAA;AAAA;AAAA,EACvB,IACA;AACR;AAEA,IAAO,6BAAQ;","names":["Config","getVisualBuilderRedirectionUrl","classNames"]}

package/dist/modern/visualBuilder/components/startEditingButton.d.cts CHANGED Viewed

@@ -1,3 +1,7 @@
-declare function StartEditingButtonComponent(): JSX.Element;
+import { IConfigEditInVisualBuilderButton } from '../../types/types.cjs';
-export { StartEditingButtonComponent as default };
+type Position = NonNullable<IConfigEditInVisualBuilderButton['position']>;
+declare function getEditButtonPosition(position: any): Position;
+declare function StartEditingButtonComponent(): JSX.Element | null;
+export { StartEditingButtonComponent as default, getEditButtonPosition };

package/dist/modern/visualBuilder/components/startEditingButton.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
-declare function StartEditingButtonComponent(): JSX.Element;
+import { IConfigEditInVisualBuilderButton } from '../../types/types.js';
-export { StartEditingButtonComponent as default };
+type Position = NonNullable<IConfigEditInVisualBuilderButton['position']>;
+declare function getEditButtonPosition(position: any): Position;
+declare function StartEditingButtonComponent(): JSX.Element | null;
+export { StartEditingButtonComponent as default, getEditButtonPosition };

package/dist/modern/visualBuilder/components/startEditingButton.js CHANGED Viewed

@@ -5,33 +5,56 @@ import classNames from "classnames";
 import getVisualBuilderRedirectionUrl from "../utils/getVisualBuilderRedirectionUrl.js";
 import { EditIcon } from "./icons/index.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
+import Config from "../../configManager/configManager.js";
 import { jsx, jsxs } from "preact/jsx-runtime";
+var positionStyles = {
+  "bottom-right": visualBuilderStyles()["visual-builder__start-editing-btn__bottom-right"],
+  "bottom-left": visualBuilderStyles()["visual-builder__start-editing-btn__bottom-left"],
+  "top-left": visualBuilderStyles()["visual-builder__start-editing-btn__top-left"],
+  "top-right": visualBuilderStyles()["visual-builder__start-editing-btn__top-right"]
+};
+function getEditButtonPosition(position) {
+  const validPositions = ["bottom-left", "bottom-right", "top-left", "top-right"];
+  if (validPositions.includes(position)) {
+    return position;
+  } else {
+    return "bottom-right";
+  }
+}
 function StartEditingButtonComponent() {
-  return /* @__PURE__ */ jsxs(
+  const config = Config.get();
+  const enable = config.editInVisualBuilderButton.enable;
+  const position = config.editInVisualBuilderButton.position || "bottom-right";
+  function updateTargetUrl(e) {
+    const targetElement = e.target;
+    targetElement.setAttribute(
+      "href",
+      getVisualBuilderRedirectionUrl().toString()
+    );
+  }
+  return enable ? /* @__PURE__ */ jsxs(
     "a",
     {
       href: getVisualBuilderRedirectionUrl().toString(),
       className: classNames(
         "visual-builder__start-editing-btn",
-        visualBuilderStyles()["visual-builder__start-editing-btn"]
+        visualBuilderStyles()["visual-builder__start-editing-btn"],
+        positionStyles[getEditButtonPosition(position)]
       ),
       "data-testid": "vcms-start-editing-btn",
-      onClick: (e) => {
-        const targetElement = e.target;
-        targetElement.setAttribute(
-          "href",
-          getVisualBuilderRedirectionUrl().toString()
-        );
-      },
+      onMouseEnter: (e) => updateTargetUrl(e),
+      onFocus: (e) => updateTargetUrl(e),
+      onClick: (e) => updateTargetUrl(e),
       children: [
         /* @__PURE__ */ jsx(EditIcon, {}),
         /* @__PURE__ */ jsx("span", { children: "Start Editing" })
       ]
     }
-  );
+  ) : null;
 }
 var startEditingButton_default = StartEditingButtonComponent;
 export {
-  startEditingButton_default as default
+  startEditingButton_default as default,
+  getEditButtonPosition
 };
 //# sourceMappingURL=startEditingButton.js.map

package/dist/modern/visualBuilder/components/startEditingButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/startEditingButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport getVisualBuilderRedirectionUrl from \"../utils/getVisualBuilderRedirectionUrl\";\nimport { EditIcon } from \"./icons\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\n\nfunction StartEditingButtonComponent(): JSX.Element {\n return (\n <a\n href={getVisualBuilderRedirectionUrl().toString()}\n className={classNames(\n \"visual-builder__start-editing-btn\",\n visualBuilderStyles()[\"visual-builder__start-editing-btn\"]\n )}\n data-testid=\"vcms-start-editing-btn\"\n ~~onClick~~={(e) => {\n ~~const targetElement~~ = e~~.target~~ as ~~HTMLAnchorElement;\n targetElement.setAttribute~~(\n ~~\"href\",\n getVisualBuilderRedirectionUrl~~()~~.toString~~()~~\n );\n~~ }}\n >\n <EditIcon />\n <span>Start Editing</span>\n </a>\n );\n}\n\nexport default StartEditingButtonComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,OAAO,oCAAoC;AAC3C,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;~~AAK5B~~,~~SAeI~~,~~KAfJ~~;~~AAFR~~,SAAS,~~8BAA2C~~;AAChD,~~SACI~~;AAAA,IAAC;AAAA;AAAA,MACG,MAAM,+BAA+B,EAAE,SAAS;AAAA,MAChD,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,mCAAmC;AAAA,~~MAC7D~~;AAAA,MACA,eAAY;AAAA,MACZ,~~SAAS~~,CAAC,MAAM~~;AACZ~~,~~cAAM,~~gBAAgB,~~EAAE~~;~~AACxB,sBAAc;~~AAAA,~~UACV;AAAA~~,~~UACA,+BAA+B~~,~~EAAE~~,~~SAAS;AAAA~~,~~QAC9C~~;AAAA,~~MACJ~~;AAAA,~~MAEA~~;AAAA,4BAAC,YAAS;AAAA,QACV,oBAAC,UAAK,2BAAa;AAAA;AAAA;AAAA,EACvB;~~AAER~~;AAEA,IAAO,6BAAQ;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/startEditingButton.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport getVisualBuilderRedirectionUrl from \"../utils/getVisualBuilderRedirectionUrl\";\nimport { EditIcon } from \"./icons\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport React from \"preact/compat\";\nimport Config from \"../../configManager/configManager\";\nimport { IConfigEditInVisualBuilderButton } from \"../../types/types\";\n\n\ntype Position = NonNullable<IConfigEditInVisualBuilderButton['position']>;\n\nconst positionStyles: Record<Position, string> = {\n \"bottom-right\": visualBuilderStyles()['visual-builder__start-editing-btn__bottom-right'],\n \"bottom-left\": visualBuilderStyles()['visual-builder__start-editing-btn__bottom-left'],\n \"top-left\": visualBuilderStyles()['visual-builder__start-editing-btn__top-left'],\n \"top-right\": visualBuilderStyles()['visual-builder__start-editing-btn__top-right'],\n}\n\nexport function getEditButtonPosition(position: any): Position {\n const validPositions: Position[] = ['bottom-left', 'bottom-right', 'top-left', 'top-right']\n if(validPositions.includes(position)){\n return position\n } else {\n return \"bottom-right\"\n }\n}\n\nfunction StartEditingButtonComponent(): JSX.Element \| null {\n const config = Config.get()\n const enable = config.editInVisualBuilderButton.enable;\n const position = config.editInVisualBuilderButton.position \|\| \"bottom-right\";\n \n function updateTargetUrl(e: any){\n const targetElement = e.target as HTMLAnchorElement;\n targetElement.setAttribute(\n \"href\",\n getVisualBuilderRedirectionUrl().toString()\n );\n }\n\n return enable ? (\n <a\n href={getVisualBuilderRedirectionUrl().toString()}\n className={classNames(\n \"visual-builder__start-editing-btn\",\n visualBuilderStyles()[\"visual-builder__start-editing-btn\"],\n positionStyles[getEditButtonPosition(position)]\n )}\n data-testid=\"vcms-start-editing-btn\"\n onMouseEnter={(e) => updateTargetUrl(e)}\n onFocus={(e) => updateTargetUrl(e)}\n onClick={(e) => updateTargetUrl(e)}\n >\n <EditIcon />\n <span>Start Editing</span>\n </a>\n ) : null;\n}\n\nexport default StartEditingButtonComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,OAAO,oCAAoC;AAC3C,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAEpC,OAAO,YAAY;AAoCX,SAYI,KAZJ;AA9BR,IAAM,iBAA2C;AAAA,EAC7C,gBAAgB,oBAAoB,EAAE,iDAAiD;AAAA,EACvF,eAAe,oBAAoB,EAAE,gDAAgD;AAAA,EACrF,YAAY,oBAAoB,EAAE,6CAA6C;AAAA,EAC/E,aAAa,oBAAoB,EAAE,8CAA8C;AACrF;AAEO,SAAS,sBAAsB,UAAyB;AAC3D,QAAM,iBAA6B,CAAC,eAAe,gBAAgB,YAAY,WAAW;AAC1F,MAAG,eAAe,SAAS,QAAQ,GAAE;AACjC,WAAO;AAAA,EACX,OAAO;AACH,WAAO;AAAA,EACX;AACJ;AAEA,SAAS,8BAAkD;AACvD,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,SAAS,OAAO,0BAA0B;AAChD,QAAM,WAAW,OAAO,0BAA0B,YAAY;AAE9D,WAAS,gBAAgB,GAAO;AAC5B,UAAM,gBAAgB,EAAE;AACxB,kBAAc;AAAA,MACV;AAAA,MACA,+BAA+B,EAAE,SAAS;AAAA,IAC9C;AAAA,EACJ;AAEA,SAAO,SACH;AAAA,IAAC;AAAA;AAAA,MACG,MAAM,+BAA+B,EAAE,SAAS;AAAA,MAChD,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,mCAAmC;AAAA,QACzD,eAAe,sBAAsB,QAAQ,CAAC;AAAA,MAClD;AAAA,MACA,eAAY;AAAA,MACZ,cAAc,CAAC,MAAM,gBAAgB,CAAC;AAAA,MACtC,SAAS,CAAC,MAAM,gBAAgB,CAAC;AAAA,MACjC,SAAS,CAAC,MAAM,gBAAgB,CAAC;AAAA,MAEjC;AAAA,4BAAC,YAAS;AAAA,QACV,oBAAC,UAAK,2BAAa;AAAA;AAAA;AAAA,EACvB,IACA;AACR;AAEA,IAAO,6BAAQ;","names":[]}

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

@@ -57,8 +57,10 @@ function updateVariantClasses({
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
     if (!dataCslp) return;
-    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__base-field")) {
-      element.classList.remove("visual-builder__base-field");
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
       if (highlightVariantFields) {
         element.classList.add(
           (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
@@ -80,12 +82,53 @@ function updateVariantClasses({
       );
       element.classList.add("visual-builder__disabled-variant-field");
     }
+    if (!observer) return;
     observer.disconnect();
     const index = observers.indexOf(observer);
     if (index > -1) {
       observers.splice(index, 1);
     }
   };
+  const addElementClasses = (element) => {
+    const dataCslp = element.getAttribute(import_constants.DATA_CSLP_ATTR_SELECTOR);
+    if (!dataCslp) {
+      element.childNodes.forEach((child) => {
+        if (child instanceof HTMLElement) {
+          addElementClasses(child);
+        }
+      });
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
+      if (highlightVariantFields) {
+        element.classList.add(
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      } else {
+        element.classList.add("visual-builder__variant-field");
+      }
+    } else if (!dataCslp.startsWith("v2:")) {
+      if (element.classList.contains("visual-builder__variant-field")) {
+        element.classList.remove(
+          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      }
+      element.classList.add("visual-builder__base-field");
+    }
+    element.childNodes.forEach((child) => {
+      if (child instanceof HTMLElement) {
+        addElementClasses(child);
+      }
+    });
+  };
   const elementsWithCslp = document.querySelectorAll(
     `[${import_constants.DATA_CSLP_ATTR_SELECTOR}]`
   );
@@ -93,7 +136,14 @@ function updateVariantClasses({
     const element = elementNode;
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === import_constants.DATA_CSLP_ATTR_SELECTOR) {
+        if (mutation.type === "attributes" && mutation.attributeName === import_constants.DATA_CSLP_ATTR_SELECTOR || mutation.type === "childList") {
+          if (mutation.addedNodes.length > 0) {
+            mutation.addedNodes.forEach((node) => {
+              if (node instanceof HTMLElement) {
+                addElementClasses(node);
+              }
+            });
+          }
           const dataCslp = element.getAttribute(
             import_constants.DATA_CSLP_ATTR_SELECTOR
           );
@@ -102,7 +152,12 @@ function updateVariantClasses({
       });
     });
     observers.push(observer);
-    observer.observe(element, { attributes: true });
+    observer.observe(element, {
+      attributes: true,
+      childList: true,
+      // Observe direct children
+      subtree: true
+    });
   });
   setTimeout(() => {
     if (observers.length > 0) {

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__base-field\")\n ) {\n element.classList.remove(\"visual-builder__base-field\");\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\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 // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR\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, { attributes: true });\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAA8B;AAC9B,qCAAmC;AACnC,IAAAA,kCAAiD;AACjD,uBAAwC;AACxC,2BAAoC;AAEpC,IAAM,0BAA4C;AAU3C,SAAS,sCAA4C;AACxD,iCAAAC,SAAwB;AAAA,IACpB,iEAAiC;AAAA,IACjC,CAAC,UAAU;AACP,UAAI,uBAAc,yBAAyB,MAAM,cAAc;AAC3D,6BAAqB,MAAM,IAAI;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AACJ;AACA,SAAS,qBAAqB;AAAA,EAC1B;AAAA,EACA;AACJ,GAA2C;AACvC,QAAM,UAAU,uBAAc,yBAAyB,MAAM;AAC7D,QAAM,YAAgC,CAAC;AAGvC,QAAM,uBAAuB,CACzB,SACA,UACA,aACC;AACD,QAAI,CAAC,SAAU;AAEf,QACI,SAAS,WAAW,KAAK,KACzB,QAAQ,UAAU,SAAS,4BAA4B,GACzD;AACE,cAAQ,UAAU,OAAO,4BAA4B;AACrD,UAAI,wBAAwB;AACxB,gBAAQ,UAAU;AAAA,cACd,0CAAoB,EAAE,+BAA+B;AAAA,UACrD;AAAA,QACJ;AAAA,MACJ,OAAO;AACH,gBAAQ,UAAU,IAAI,+BAA+B;AAAA,MACzD;AAAA,IACJ,WACI,CAAC,SAAS,WAAW,KAAK,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,YACd,0CAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,WACI,SAAS,WAAW,KAAK,KACzB,WACA,CAAC,SAAS,SAAS,OAAO,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,YACd,0CAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAGA,aAAS,WAAW;AACpB,UAAM,QAAQ,UAAU,QAAQ,QAAQ;AACxC,QAAI,QAAQ,IAAI;AACZ,gBAAU,OAAO,OAAO,CAAC;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,mBAAmB,SAAS;AAAA,IAC9B,IAAI,wCAAuB;AAAA,EAC/B;AAEA,mBAAiB,QAAQ,CAAC,gBAAgB;AACtC,UAAM,UAAU;AAEhB,UAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACjD,gBAAU,QAAQ,CAAC,aAAa;AAC5B,YACI,SAAS,SAAS,gBAClB,SAAS,kBAAkB,0CAC7B;AACE,gBAAM,WAAW,QAAQ;AAAA,YACrB;AAAA,UACJ;AACA,+BAAqB,SAAS,YAAY,IAAI,QAAQ;AAAA,QAC1D;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAED,cAAU,KAAK,QAAQ;AACvB,aAAS,QAAQ,SAAS,EAAE,YAAY,KAAK,CAAC;AAAA,EAClD,CAAC;AAED,aAAW,MAAM;AACb,QAAI,UAAU,SAAS,GAAG;AACtB,gBAAU,QAAQ,CAAC,aAAa,SAAS,WAAW,CAAC;AACrD,gBAAU,SAAS;AAAA,IACvB;AAAA,EACJ,GAAG,uBAAuB;AAC9B;","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\";\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"]}

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

@@ -25,8 +25,10 @@ function updateVariantClasses({
   const observers = [];
   const updateElementClasses = (element, dataCslp, observer) => {
     if (!dataCslp) return;
-    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__base-field")) {
-      element.classList.remove("visual-builder__base-field");
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
       if (highlightVariantFields) {
         element.classList.add(
           visualBuilderStyles()["visual-builder__variant-field"],
@@ -48,12 +50,53 @@ function updateVariantClasses({
       );
       element.classList.add("visual-builder__disabled-variant-field");
     }
+    if (!observer) return;
     observer.disconnect();
     const index = observers.indexOf(observer);
     if (index > -1) {
       observers.splice(index, 1);
     }
   };
+  const addElementClasses = (element) => {
+    const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);
+    if (!dataCslp) {
+      element.childNodes.forEach((child) => {
+        if (child instanceof HTMLElement) {
+          addElementClasses(child);
+        }
+      });
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
+      return;
+    }
+    if (dataCslp.startsWith("v2:") && !element.classList.contains("visual-builder__variant-field")) {
+      if (element.classList.contains("visual-builder__base-field")) {
+        element.classList.remove("visual-builder__base-field");
+      }
+      if (highlightVariantFields) {
+        element.classList.add(
+          visualBuilderStyles()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      } else {
+        element.classList.add("visual-builder__variant-field");
+      }
+    } else if (!dataCslp.startsWith("v2:")) {
+      if (element.classList.contains("visual-builder__variant-field")) {
+        element.classList.remove(
+          visualBuilderStyles()["visual-builder__variant-field"],
+          "visual-builder__variant-field"
+        );
+      }
+      element.classList.add("visual-builder__base-field");
+    }
+    element.childNodes.forEach((child) => {
+      if (child instanceof HTMLElement) {
+        addElementClasses(child);
+      }
+    });
+  };
   const elementsWithCslp = document.querySelectorAll(
     `[${DATA_CSLP_ATTR_SELECTOR}]`
   );
@@ -61,7 +104,14 @@ function updateVariantClasses({
     const element = elementNode;
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) {
+        if (mutation.type === "attributes" && mutation.attributeName === DATA_CSLP_ATTR_SELECTOR || mutation.type === "childList") {
+          if (mutation.addedNodes.length > 0) {
+            mutation.addedNodes.forEach((node) => {
+              if (node instanceof HTMLElement) {
+                addElementClasses(node);
+              }
+            });
+          }
           const dataCslp = element.getAttribute(
             DATA_CSLP_ATTR_SELECTOR
           );
@@ -70,7 +120,12 @@ function updateVariantClasses({
       });
     });
     observers.push(observer);
-    observer.observe(element, { attributes: true });
+    observer.observe(element, {
+      attributes: true,
+      childList: true,
+      // Observe direct children
+      subtree: true
+    });
   });
   setTimeout(() => {
     if (observers.length > 0) {

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__base-field\")\n ) {\n element.classList.remove(\"visual-builder__base-field\");\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\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 // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR\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, { attributes: true });\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":";;;AAAA,SAAS,qBAAqB;AAC9B,OAAO,4BAA4B;AACnC,SAAS,wCAAwC;AACjD,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAEpC,IAAM,0BAA4C;AAU3C,SAAS,sCAA4C;AACxD,0BAAwB;AAAA,IACpB,iCAAiC;AAAA,IACjC,CAAC,UAAU;AACP,UAAI,cAAc,yBAAyB,MAAM,cAAc;AAC3D,6BAAqB,MAAM,IAAI;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AACJ;AACA,SAAS,qBAAqB;AAAA,EAC1B;AAAA,EACA;AACJ,GAA2C;AACvC,QAAM,UAAU,cAAc,yBAAyB,MAAM;AAC7D,QAAM,YAAgC,CAAC;AAGvC,QAAM,uBAAuB,CACzB,SACA,UACA,aACC;AACD,QAAI,CAAC,SAAU;AAEf,QACI,SAAS,WAAW,KAAK,KACzB,QAAQ,UAAU,SAAS,4BAA4B,GACzD;AACE,cAAQ,UAAU,OAAO,4BAA4B;AACrD,UAAI,wBAAwB;AACxB,gBAAQ,UAAU;AAAA,UACd,oBAAoB,EAAE,+BAA+B;AAAA,UACrD;AAAA,QACJ;AAAA,MACJ,OAAO;AACH,gBAAQ,UAAU,IAAI,+BAA+B;AAAA,MACzD;AAAA,IACJ,WACI,CAAC,SAAS,WAAW,KAAK,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,4BAA4B;AAAA,IACtD,WACI,SAAS,WAAW,KAAK,KACzB,WACA,CAAC,SAAS,SAAS,OAAO,KAC1B,QAAQ,UAAU,SAAS,+BAA+B,GAC5D;AACE,cAAQ,UAAU;AAAA,QACd,oBAAoB,EAAE,+BAA+B;AAAA,QACrD;AAAA,MACJ;AACA,cAAQ,UAAU,IAAI,wCAAwC;AAAA,IAClE;AAGA,aAAS,WAAW;AACpB,UAAM,QAAQ,UAAU,QAAQ,QAAQ;AACxC,QAAI,QAAQ,IAAI;AACZ,gBAAU,OAAO,OAAO,CAAC;AAAA,IAC7B;AAAA,EACJ;AAGA,QAAM,mBAAmB,SAAS;AAAA,IAC9B,IAAI,uBAAuB;AAAA,EAC/B;AAEA,mBAAiB,QAAQ,CAAC,gBAAgB;AACtC,UAAM,UAAU;AAEhB,UAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACjD,gBAAU,QAAQ,CAAC,aAAa;AAC5B,YACI,SAAS,SAAS,gBAClB,SAAS,kBAAkB,yBAC7B;AACE,gBAAM,WAAW,QAAQ;AAAA,YACrB;AAAA,UACJ;AACA,+BAAqB,SAAS,YAAY,IAAI,QAAQ;AAAA,QAC1D;AAAA,MACJ,CAAC;AAAA,IACL,CAAC;AAED,cAAU,KAAK,QAAQ;AACvB,aAAS,QAAQ,SAAS,EAAE,YAAY,KAAK,CAAC;AAAA,EAClD,CAAC;AAED,aAAW,MAAM;AACb,QAAI,UAAU,SAAS,GAAG;AACtB,gBAAU,QAAQ,CAAC,aAAa,SAAS,WAAW,CAAC;AACrD,gBAAU,SAAS;AAAA,IACvB;AAAA,EACJ,GAAG,uBAAuB;AAC9B;","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\";\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":[]}