@contentstack/live-preview-utils 3.1.1 → 3.1.3

package/dist/modern/visualBuilder/utils/multipleElementAddButton.d.ts

@@ -29,7 +29,7 @@ declare function removeAddInstanceButtons(elements: {
     eventTarget: EventTarget | null;
 }, forceRemoveAll?: boolean): void;
 /**
- * This function that observes the parent element and focuses the newly added instance.
+ * This function observes the parent element and focuses the newly added instance.
  *
  * @param parentCslp The parent cslp value.
  * @param index The index of the new instance.

package/dist/modern/visualBuilder/utils/multipleElementAddButton.js

@@ -5,11 +5,10 @@ import {
   generateAddInstanceButton,
   getAddInstanceButtons
 } from "../generators/generateAddInstanceButtons.js";
-import visualBuilderPostMessage from "./visualBuilderPostMessage.js";
-import { VisualBuilderPostMessageEvents } from "./types/postMessage.types.js";
 import getChildrenDirection from "./getChildrenDirection.js";
 import { hideOverlay } from "../generators/generateOverlay.js";
 import { hideHoverOutline } from "../listeners/mouseHover.js";
+import { signal } from "@preact/signals";
 var WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4e3;
 function handleAddButtonsForMultiple(eventDetails, elements, config) {
   const { editableElement, visualBuilderContainer, resizeObserver } = elements;
@@ -60,27 +59,24 @@ function handleAddButtonsForMultiple(eventDetails, elements, config) {
       index
     });
   };
+  const loading = signal(false);
   const previousButton = generateAddInstanceButton({
-    onClick: () => {
-      visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {
-        fieldMetadata: eventDetails.fieldMetadata,
-        index: prevIndex
-      }).then(onMessageSent.bind(null, prevIndex));
-    },
-    label,
     fieldSchema,
-    value: expectedFieldData
+    value: expectedFieldData,
+    fieldMetadata: eventDetails.fieldMetadata,
+    index: prevIndex,
+    onClick: onMessageSent.bind(null, prevIndex),
+    loading,
+    label
   });
   const nextButton = generateAddInstanceButton({
-    onClick: () => {
-      visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {
-        fieldMetadata: eventDetails.fieldMetadata,
-        index: nextIndex
-      }).then(onMessageSent.bind(null, nextIndex));
-    },
-    label,
     fieldSchema,
-    value: expectedFieldData
+    value: expectedFieldData,
+    fieldMetadata: eventDetails.fieldMetadata,
+    index: nextIndex,
+    onClick: onMessageSent.bind(null, nextIndex),
+    loading,
+    label
   });
   if (!visualBuilderContainer.contains(previousButton)) {
     visualBuilderContainer.appendChild(previousButton);

package/dist/modern/visualBuilder/utils/multipleElementAddButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/multipleElementAddButton.ts"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    generateAddInstanceButton,\n    getAddInstanceButtons,\n} from \"../generators/generateAddInstanceButtons\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { ISchemaFieldMap } from \"./types/index.types\";\n\nconst WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4000;\n\n/**\n * The function that handles the add instance buttons for multiple fields.\n * @param eventDetails The details containing the field metadata and cslp value.\n * @param elements The elements object that contain the editable element and visual builder wrapper.\n * @param config The configuration object that contains the expected field data and disabled state.\n * @returns void\n */\nexport function handleAddButtonsForMultiple(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        editableElement: Element | null;\n        visualBuilderContainer: HTMLDivElement | null;\n        resizeObserver: ResizeObserver;\n    },\n    config: {\n        fieldSchema: ISchemaFieldMap;\n        /**\n         * expectedFieldData is the value of the whole multiple field (an array)\n         */\n        expectedFieldData: any;\n        disabled: boolean;\n        label: string | undefined;\n    }\n): void {\n    const { editableElement, visualBuilderContainer, resizeObserver } =\n        elements;\n    const { expectedFieldData, fieldSchema, disabled, label } = config;\n\n    const parentCslpValue =\n        eventDetails.fieldMetadata.multipleFieldMetadata?.parentDetails\n            ?.parentCslpValue;\n\n    if (!editableElement || !parentCslpValue) {\n        return;\n    }\n\n    const direction = getChildrenDirection(editableElement, parentCslpValue);\n    if (direction === \"none\" || !visualBuilderContainer) {\n        return;\n    }\n\n    const targetDOMDimension = editableElement.getBoundingClientRect();\n    removeAddInstanceButtons(\n        {\n            visualBuilderContainer: visualBuilderContainer,\n            eventTarget: null,\n            overlayWrapper: null,\n        },\n        true\n    );\n\n    const overlayWrapper = visualBuilderContainer.querySelector(\n        \".visual-builder__overlay__wrapper\"\n    );\n    const focusedToolbar = visualBuilderContainer.querySelector(\n        \".visual-builder__focused-toolbar\"\n    );\n\n    const hideOverlayAndHoverOutline = () => {\n        hideHoverOutline(visualBuilderContainer);\n        hideOverlay({\n            visualBuilderContainer: visualBuilderContainer,\n            visualBuilderOverlayWrapper: overlayWrapper as HTMLDivElement,\n            focusedToolbar: focusedToolbar as HTMLDivElement,\n            resizeObserver,\n        });\n    };\n\n    if (disabled) {\n        return;\n    }\n\n    // is whole field and not a single instance of the multiple field\n    const isField =\n        eventDetails.fieldMetadata.instance.fieldPathWithIndex ===\n        eventDetails.fieldMetadata.fieldPathWithIndex;\n\n    const prevIndex = isField\n        ? 0\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index;\n    const nextIndex = isField\n        ? expectedFieldData.length\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index + 1;\n\n    const parentCslp = isField ? eventDetails.cslpData : parentCslpValue;\n\n    const onMessageSent = (index: number) => {\n        hideOverlayAndHoverOutline();\n        observeParentAndFocusNewInstance({\n            parentCslp,\n            index,\n        });\n    };\n\n    const previousButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: prevIndex,\n                })\n                .then(onMessageSent.bind(null, prevIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    const nextButton = generateAddInstanceButton({\n        onClick: () => {\n            visualBuilderPostMessage\n                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {\n                    fieldMetadata: eventDetails.fieldMetadata,\n                    index: nextIndex,\n                })\n                .then(onMessageSent.bind(null, nextIndex));\n        },\n        label,\n        fieldSchema,\n        value: expectedFieldData,\n    });\n\n    if (!visualBuilderContainer.contains(previousButton)) {\n        visualBuilderContainer.appendChild(previousButton);\n    }\n\n    if (!visualBuilderContainer.contains(nextButton)) {\n        visualBuilderContainer.appendChild(nextButton);\n    }\n\n    if (direction === \"horizontal\") {\n        const middleHeight =\n            targetDOMDimension.top +\n            (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n            window.scrollY;\n        previousButton.style.left = `${targetDOMDimension.left}px`;\n        previousButton.style.top = `${middleHeight}px`;\n\n        nextButton.style.left = `${targetDOMDimension.right}px`;\n        nextButton.style.top = `${middleHeight}px`;\n    } else {\n        const middleWidth =\n            targetDOMDimension.left +\n            (targetDOMDimension.right - targetDOMDimension.left) / 2;\n        previousButton.style.left = `${middleWidth}px`;\n        previousButton.style.top = `${\n            targetDOMDimension.top + window.scrollY\n        }px`;\n\n        nextButton.style.left = `${middleWidth}px`;\n        nextButton.style.top = `${\n            targetDOMDimension.bottom + window.scrollY\n        }px`;\n    }\n}\n\nexport function removeAddInstanceButtons(\n    elements: {\n        visualBuilderContainer: HTMLDivElement | null;\n        overlayWrapper: HTMLDivElement | null;\n        eventTarget: EventTarget | null;\n    },\n    forceRemoveAll = false\n): void {\n    const { visualBuilderContainer, overlayWrapper, eventTarget } = elements;\n\n    if (!visualBuilderContainer) {\n        return;\n    }\n\n    if (forceRemoveAll) {\n        const addInstanceButtons = getAddInstanceButtons(\n            visualBuilderContainer,\n            true\n        );\n\n        addInstanceButtons?.forEach((button) => button.remove());\n    }\n\n    const addInstanceButtons = getAddInstanceButtons(visualBuilderContainer);\n\n    if (!addInstanceButtons) {\n        return;\n    }\n\n    const [previousButton, nextButton] = addInstanceButtons;\n\n    if (overlayWrapper?.classList.contains(\"visible\")) {\n        return;\n    }\n\n    if (\n        eventTarget &&\n        (previousButton.contains(eventTarget as Node) ||\n            nextButton.contains(eventTarget as Node))\n    ) {\n        return;\n    }\n\n    nextButton.remove();\n    previousButton.remove();\n}\n\n/**\n * This function that observes the parent element and focuses the newly added instance.\n *\n * @param parentCslp The parent cslp value.\n * @param index The index of the new instance.\n * @returns void\n *\n * We can evolve the retry logic, as different use cases arise.\n * Currently, if the new element is not found after the first mutation, we until\n * WAIT_FOR_NEW_INSTANCE_TIMEOUT, expecting that the new instance/block will be\n * found in later mutations and we can focus + disconnect then.\n * We also ensure there is only one setTimeout scheduled.\n */\nexport function observeParentAndFocusNewInstance({\n    parentCslp,\n    index,\n}: {\n    parentCslp: string;\n    index: number;\n}): void {\n    const parent = document.querySelector(\n        `[data-cslp='${parentCslp}']`\n    ) as HTMLElement;\n\n    if (parent) {\n        const expectedCslp = [parentCslp, index].join(\".\");\n\n        let hasObserverDisconnected = false;\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n        const mutationObserver = new MutationObserver(\n            (_mutations, observer) => {\n                const newInstance = parent.querySelector(\n                    `[data-cslp='${expectedCslp}']`\n                ) as HTMLElement | null;\n                if (newInstance) {\n                    // this is how we also navigate to parent elements, but parent elements\n                    // are never primitive fields, the instances can be and this steals\n                    // focus from the form and puts it on the canvas.\n                    // So currently for a singleline multiple field, the form opens but we\n                    // come back to the canvas.\n                    // TODO - maybe we should not focus the content-editable\n                    // TODO - temp fix. We remove our empty block div once the new block arrives\n                    // but we focus the element before that and then the block shifts.\n                    // For some reason, the window resize event also does not trigger\n                    setTimeout(() => newInstance.click(), 350);\n                    observer.disconnect();\n                    hasObserverDisconnected = true;\n                    return;\n                }\n                if (!hasObserverDisconnected && !timeoutId) {\n                    // disconnect the observer whether we found the new instance or not\n                    // after timeout\n                    timeoutId = setTimeout(() => {\n                        observer.disconnect();\n                        hasObserverDisconnected = false;\n                    }, WAIT_FOR_NEW_INSTANCE_TIMEOUT);\n                }\n            }\n        );\n        mutationObserver.observe(parent, {\n            childList: true,\n            // watch subtrees as there may be wrapper elements\n            subtree: true,\n            // we don't need to watch for attribute changes\n            attributes: false,\n        });\n    }\n}\n"],"mappings":"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","names":["addInstanceButtons"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/multipleElementAddButton.ts"],"sourcesContent":["import { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    generateAddInstanceButton,\n    getAddInstanceButtons,\n} from \"../generators/generateAddInstanceButtons\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { hideOverlay } from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { ISchemaFieldMap } from \"./types/index.types\";\nimport { signal } from \"@preact/signals\";\n\nconst WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4000;\n\n/**\n * The function that handles the add instance buttons for multiple fields.\n * @param eventDetails The details containing the field metadata and cslp value.\n * @param elements The elements object that contain the editable element and visual builder wrapper.\n * @param config The configuration object that contains the expected field data and disabled state.\n * @returns void\n */\nexport function handleAddButtonsForMultiple(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        editableElement: Element | null;\n        visualBuilderContainer: HTMLDivElement | null;\n        resizeObserver: ResizeObserver;\n    },\n    config: {\n        fieldSchema: ISchemaFieldMap;\n        /**\n         * expectedFieldData is the value of the whole multiple field (an array)\n         */\n        expectedFieldData: any;\n        disabled: boolean;\n        label: string | undefined;\n    }\n): void {\n    const { editableElement, visualBuilderContainer, resizeObserver } =\n        elements;\n    const { expectedFieldData, fieldSchema, disabled, label } = config;\n\n    const parentCslpValue =\n        eventDetails.fieldMetadata.multipleFieldMetadata?.parentDetails\n            ?.parentCslpValue;\n\n    if (!editableElement || !parentCslpValue) {\n        return;\n    }\n\n    const direction = getChildrenDirection(editableElement, parentCslpValue);\n    if (direction === \"none\" || !visualBuilderContainer) {\n        return;\n    }\n\n    const targetDOMDimension = editableElement.getBoundingClientRect();\n    removeAddInstanceButtons(\n        {\n            visualBuilderContainer: visualBuilderContainer,\n            eventTarget: null,\n            overlayWrapper: null,\n        },\n        true\n    );\n\n    const overlayWrapper = visualBuilderContainer.querySelector(\n        \".visual-builder__overlay__wrapper\"\n    );\n    const focusedToolbar = visualBuilderContainer.querySelector(\n        \".visual-builder__focused-toolbar\"\n    );\n\n    const hideOverlayAndHoverOutline = () => {\n        hideHoverOutline(visualBuilderContainer);\n        hideOverlay({\n            visualBuilderContainer: visualBuilderContainer,\n            visualBuilderOverlayWrapper: overlayWrapper as HTMLDivElement,\n            focusedToolbar: focusedToolbar as HTMLDivElement,\n            resizeObserver,\n        });\n    };\n\n    if (disabled) {\n        return;\n    }\n\n    // is whole field and not a single instance of the multiple field\n    const isField =\n        eventDetails.fieldMetadata.instance.fieldPathWithIndex ===\n        eventDetails.fieldMetadata.fieldPathWithIndex;\n\n    const prevIndex = isField\n        ? 0\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index;\n    const nextIndex = isField\n        ? expectedFieldData.length\n        : eventDetails.fieldMetadata.multipleFieldMetadata.index + 1;\n\n    const parentCslp = isField ? eventDetails.cslpData : parentCslpValue;\n\n    const onMessageSent = (index: number) => {\n        hideOverlayAndHoverOutline();\n        observeParentAndFocusNewInstance({\n            parentCslp,\n            index,\n        });\n    };\n\n    // this is a shared loading state between the\n    // next and previous button for the duration\n    // between the add-instance post message being\n    // sent and receiving a response for it.\n    const loading = signal(false);\n\n    const previousButton = generateAddInstanceButton({\n        fieldSchema,\n        value: expectedFieldData,\n        fieldMetadata: eventDetails.fieldMetadata,\n        index: prevIndex,\n        onClick: onMessageSent.bind(null, prevIndex),\n        loading,\n        label,\n    });\n\n    const nextButton = generateAddInstanceButton({\n        fieldSchema,\n        value: expectedFieldData,\n        fieldMetadata: eventDetails.fieldMetadata,\n        index: nextIndex,\n        onClick: onMessageSent.bind(null, nextIndex),\n        loading,\n        label,\n    });\n\n    if (!visualBuilderContainer.contains(previousButton)) {\n        visualBuilderContainer.appendChild(previousButton);\n    }\n\n    if (!visualBuilderContainer.contains(nextButton)) {\n        visualBuilderContainer.appendChild(nextButton);\n    }\n\n    if (direction === \"horizontal\") {\n        const middleHeight =\n            targetDOMDimension.top +\n            (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n            window.scrollY;\n        previousButton.style.left = `${targetDOMDimension.left}px`;\n        previousButton.style.top = `${middleHeight}px`;\n\n        nextButton.style.left = `${targetDOMDimension.right}px`;\n        nextButton.style.top = `${middleHeight}px`;\n    } else {\n        const middleWidth =\n            targetDOMDimension.left +\n            (targetDOMDimension.right - targetDOMDimension.left) / 2;\n        previousButton.style.left = `${middleWidth}px`;\n        previousButton.style.top = `${\n            targetDOMDimension.top + window.scrollY\n        }px`;\n\n        nextButton.style.left = `${middleWidth}px`;\n        nextButton.style.top = `${\n            targetDOMDimension.bottom + window.scrollY\n        }px`;\n    }\n}\n\nexport function removeAddInstanceButtons(\n    elements: {\n        visualBuilderContainer: HTMLDivElement | null;\n        overlayWrapper: HTMLDivElement | null;\n        eventTarget: EventTarget | null;\n    },\n    forceRemoveAll = false\n): void {\n    const { visualBuilderContainer, overlayWrapper, eventTarget } = elements;\n\n    if (!visualBuilderContainer) {\n        return;\n    }\n\n    if (forceRemoveAll) {\n        const addInstanceButtons = getAddInstanceButtons(\n            visualBuilderContainer,\n            true\n        );\n\n        addInstanceButtons?.forEach((button) => button.remove());\n    }\n\n    const addInstanceButtons = getAddInstanceButtons(visualBuilderContainer);\n\n    if (!addInstanceButtons) {\n        return;\n    }\n\n    const [previousButton, nextButton] = addInstanceButtons;\n\n    if (overlayWrapper?.classList.contains(\"visible\")) {\n        return;\n    }\n\n    if (\n        eventTarget &&\n        (previousButton.contains(eventTarget as Node) ||\n            nextButton.contains(eventTarget as Node))\n    ) {\n        return;\n    }\n\n    nextButton.remove();\n    previousButton.remove();\n}\n\n/**\n * This function observes the parent element and focuses the newly added instance.\n *\n * @param parentCslp The parent cslp value.\n * @param index The index of the new instance.\n * @returns void\n *\n * We can evolve the retry logic, as different use cases arise.\n * Currently, if the new element is not found after the first mutation, we until\n * WAIT_FOR_NEW_INSTANCE_TIMEOUT, expecting that the new instance/block will be\n * found in later mutations and we can focus + disconnect then.\n * We also ensure there is only one setTimeout scheduled.\n */\nexport function observeParentAndFocusNewInstance({\n    parentCslp,\n    index,\n}: {\n    parentCslp: string;\n    index: number;\n}): void {\n    const parent = document.querySelector(\n        `[data-cslp='${parentCslp}']`\n    ) as HTMLElement;\n\n    if (parent) {\n        const expectedCslp = [parentCslp, index].join(\".\");\n\n        let hasObserverDisconnected = false;\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n        const mutationObserver = new MutationObserver(\n            (_mutations, observer) => {\n                const newInstance = parent.querySelector(\n                    `[data-cslp='${expectedCslp}']`\n                ) as HTMLElement | null;\n                if (newInstance) {\n                    // this is how we also navigate to parent elements, but parent elements\n                    // are never primitive fields, the instances can be and this steals\n                    // focus from the form and puts it on the canvas.\n                    // So currently for a singleline multiple field, the form opens but we\n                    // come back to the canvas.\n                    // TODO - maybe we should not focus the content-editable\n                    // TODO - temp fix. We remove our empty block div once the new block arrives\n                    // but we focus the element before that and then the block shifts.\n                    // For some reason, the window resize event also does not trigger\n                    setTimeout(() => newInstance.click(), 350);\n                    observer.disconnect();\n                    hasObserverDisconnected = true;\n                    return;\n                }\n                if (!hasObserverDisconnected && !timeoutId) {\n                    // disconnect the observer whether we found the new instance or not\n                    // after timeout\n                    timeoutId = setTimeout(() => {\n                        observer.disconnect();\n                        hasObserverDisconnected = false;\n                    }, WAIT_FOR_NEW_INSTANCE_TIMEOUT);\n                }\n            }\n        );\n        mutationObserver.observe(parent, {\n            childList: true,\n            // watch subtrees as there may be wrapper elements\n            subtree: true,\n            // we don't need to watch for attribute changes\n            attributes: false,\n        });\n    }\n}\n"],"mappings":";;;AACA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,OAAO,0BAA0B;AACjC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,SAAS,cAAc;AAEvB,IAAM,gCAAgC;AAS/B,SAAS,4BACZ,cACA,UAKA,QASI;AACJ,QAAM,EAAE,iBAAiB,wBAAwB,eAAe,IAC5D;AACJ,QAAM,EAAE,mBAAmB,aAAa,UAAU,MAAM,IAAI;AAE5D,QAAM,kBACF,aAAa,cAAc,uBAAuB,eAC5C;AAEV,MAAI,CAAC,mBAAmB,CAAC,iBAAiB;AACtC;AAAA,EACJ;AAEA,QAAM,YAAY,qBAAqB,iBAAiB,eAAe;AACvE,MAAI,cAAc,UAAU,CAAC,wBAAwB;AACjD;AAAA,EACJ;AAEA,QAAM,qBAAqB,gBAAgB,sBAAsB;AACjE;AAAA,IACI;AAAA,MACI;AAAA,MACA,aAAa;AAAA,MACb,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,iBAAiB,uBAAuB;AAAA,IAC1C;AAAA,EACJ;AACA,QAAM,iBAAiB,uBAAuB;AAAA,IAC1C;AAAA,EACJ;AAEA,QAAM,6BAA6B,MAAM;AACrC,qBAAiB,sBAAsB;AACvC,gBAAY;AAAA,MACR;AAAA,MACA,6BAA6B;AAAA,MAC7B;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACL;AAEA,MAAI,UAAU;AACV;AAAA,EACJ;AAGA,QAAM,UACF,aAAa,cAAc,SAAS,uBACpC,aAAa,cAAc;AAE/B,QAAM,YAAY,UACZ,IACA,aAAa,cAAc,sBAAsB;AACvD,QAAM,YAAY,UACZ,kBAAkB,SAClB,aAAa,cAAc,sBAAsB,QAAQ;AAE/D,QAAM,aAAa,UAAU,aAAa,WAAW;AAErD,QAAM,gBAAgB,CAAC,UAAkB;AACrC,+BAA2B;AAC3B,qCAAiC;AAAA,MAC7B;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACL;AAMA,QAAM,UAAU,OAAO,KAAK;AAE5B,QAAM,iBAAiB,0BAA0B;AAAA,IAC7C;AAAA,IACA,OAAO;AAAA,IACP,eAAe,aAAa;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS,cAAc,KAAK,MAAM,SAAS;AAAA,IAC3C;AAAA,IACA;AAAA,EACJ,CAAC;AAED,QAAM,aAAa,0BAA0B;AAAA,IACzC;AAAA,IACA,OAAO;AAAA,IACP,eAAe,aAAa;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS,cAAc,KAAK,MAAM,SAAS;AAAA,IAC3C;AAAA,IACA;AAAA,EACJ,CAAC;AAED,MAAI,CAAC,uBAAuB,SAAS,cAAc,GAAG;AAClD,2BAAuB,YAAY,cAAc;AAAA,EACrD;AAEA,MAAI,CAAC,uBAAuB,SAAS,UAAU,GAAG;AAC9C,2BAAuB,YAAY,UAAU;AAAA,EACjD;AAEA,MAAI,cAAc,cAAc;AAC5B,UAAM,eACF,mBAAmB,OAClB,mBAAmB,SAAS,mBAAmB,OAAO,IACvD,OAAO;AACX,mBAAe,MAAM,OAAO,GAAG,mBAAmB,IAAI;AACtD,mBAAe,MAAM,MAAM,GAAG,YAAY;AAE1C,eAAW,MAAM,OAAO,GAAG,mBAAmB,KAAK;AACnD,eAAW,MAAM,MAAM,GAAG,YAAY;AAAA,EAC1C,OAAO;AACH,UAAM,cACF,mBAAmB,QAClB,mBAAmB,QAAQ,mBAAmB,QAAQ;AAC3D,mBAAe,MAAM,OAAO,GAAG,WAAW;AAC1C,mBAAe,MAAM,MAAM,GACvB,mBAAmB,MAAM,OAAO,OACpC;AAEA,eAAW,MAAM,OAAO,GAAG,WAAW;AACtC,eAAW,MAAM,MAAM,GACnB,mBAAmB,SAAS,OAAO,OACvC;AAAA,EACJ;AACJ;AAEO,SAAS,yBACZ,UAKA,iBAAiB,OACb;AACJ,QAAM,EAAE,wBAAwB,gBAAgB,YAAY,IAAI;AAEhE,MAAI,CAAC,wBAAwB;AACzB;AAAA,EACJ;AAEA,MAAI,gBAAgB;AAChB,UAAMA,sBAAqB;AAAA,MACvB;AAAA,MACA;AAAA,IACJ;AAEA,IAAAA,qBAAoB,QAAQ,CAAC,WAAW,OAAO,OAAO,CAAC;AAAA,EAC3D;AAEA,QAAM,qBAAqB,sBAAsB,sBAAsB;AAEvE,MAAI,CAAC,oBAAoB;AACrB;AAAA,EACJ;AAEA,QAAM,CAAC,gBAAgB,UAAU,IAAI;AAErC,MAAI,gBAAgB,UAAU,SAAS,SAAS,GAAG;AAC/C;AAAA,EACJ;AAEA,MACI,gBACC,eAAe,SAAS,WAAmB,KACxC,WAAW,SAAS,WAAmB,IAC7C;AACE;AAAA,EACJ;AAEA,aAAW,OAAO;AAClB,iBAAe,OAAO;AAC1B;AAeO,SAAS,iCAAiC;AAAA,EAC7C;AAAA,EACA;AACJ,GAGS;AACL,QAAM,SAAS,SAAS;AAAA,IACpB,eAAe,UAAU;AAAA,EAC7B;AAEA,MAAI,QAAQ;AACR,UAAM,eAAe,CAAC,YAAY,KAAK,EAAE,KAAK,GAAG;AAEjD,QAAI,0BAA0B;AAC9B,QAAI,YAAkD;AAEtD,UAAM,mBAAmB,IAAI;AAAA,MACzB,CAAC,YAAY,aAAa;AACtB,cAAM,cAAc,OAAO;AAAA,UACvB,eAAe,YAAY;AAAA,QAC/B;AACA,YAAI,aAAa;AAUb,qBAAW,MAAM,YAAY,MAAM,GAAG,GAAG;AACzC,mBAAS,WAAW;AACpB,oCAA0B;AAC1B;AAAA,QACJ;AACA,YAAI,CAAC,2BAA2B,CAAC,WAAW;AAGxC,sBAAY,WAAW,MAAM;AACzB,qBAAS,WAAW;AACpB,sCAA0B;AAAA,UAC9B,GAAG,6BAA6B;AAAA,QACpC;AAAA,MACJ;AAAA,IACJ;AACA,qBAAiB,QAAQ,QAAQ;AAAA,MAC7B,WAAW;AAAA;AAAA,MAEX,SAAS;AAAA;AAAA,MAET,YAAY;AAAA,IAChB,CAAC;AAAA,EACL;AACJ;","names":["addInstanceButtons"]}

package/dist/modern/visualBuilder/utils/pasteAsPlainText.cjs

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/utils/pasteAsPlainText.ts
+var pasteAsPlainText_exports = {};
+__export(pasteAsPlainText_exports, {
+  pasteAsPlainText: () => pasteAsPlainText
+});
+module.exports = __toCommonJS(pasteAsPlainText_exports);
+var import_lodash_es = require("lodash-es");
+var pasteAsPlainText = (0, import_lodash_es.debounce)(
+  (e) => {
+    e.preventDefault();
+    const clipboardData = e.clipboardData;
+    document.execCommand(
+      "inserttext",
+      false,
+      clipboardData?.getData("text/plain")
+    );
+  },
+  100,
+  { leading: true }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pasteAsPlainText
+});
+//# sourceMappingURL=pasteAsPlainText.cjs.map

package/dist/modern/visualBuilder/utils/pasteAsPlainText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/pasteAsPlainText.ts"],"sourcesContent":["import { debounce } from \"lodash-es\";\n\nexport const pasteAsPlainText = debounce(\n    (e: Event) => {\n        e.preventDefault();\n        const clipboardData = (e as ClipboardEvent).clipboardData;\n        document.execCommand(\n            \"inserttext\",\n            false,\n            clipboardData?.getData(\"text/plain\")\n        );\n    },\n    100,\n    { leading: true }\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AAElB,IAAM,uBAAmB;AAAA,EAC5B,CAAC,MAAa;AACV,MAAE,eAAe;AACjB,UAAM,gBAAiB,EAAqB;AAC5C,aAAS;AAAA,MACL;AAAA,MACA;AAAA,MACA,eAAe,QAAQ,YAAY;AAAA,IACvC;AAAA,EACJ;AAAA,EACA;AAAA,EACA,EAAE,SAAS,KAAK;AACpB;","names":[]}

package/dist/modern/visualBuilder/utils/pasteAsPlainText.d.cts

@@ -0,0 +1,5 @@
+import * as lodash from 'lodash';
+
+declare const pasteAsPlainText: lodash.DebouncedFuncLeading<(e: Event) => void>;
+
+export { pasteAsPlainText };

package/dist/modern/visualBuilder/utils/pasteAsPlainText.d.ts

@@ -0,0 +1,5 @@
+import * as lodash from 'lodash';
+
+declare const pasteAsPlainText: lodash.DebouncedFuncLeading<(e: Event) => void>;
+
+export { pasteAsPlainText };

package/dist/modern/visualBuilder/utils/pasteAsPlainText.js

@@ -0,0 +1,21 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/utils/pasteAsPlainText.ts
+import { debounce } from "lodash-es";
+var pasteAsPlainText = debounce(
+  (e) => {
+    e.preventDefault();
+    const clipboardData = e.clipboardData;
+    document.execCommand(
+      "inserttext",
+      false,
+      clipboardData?.getData("text/plain")
+    );
+  },
+  100,
+  { leading: true }
+);
+export {
+  pasteAsPlainText
+};
+//# sourceMappingURL=pasteAsPlainText.js.map

package/dist/modern/visualBuilder/utils/pasteAsPlainText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/utils/pasteAsPlainText.ts"],"sourcesContent":["import { debounce } from \"lodash-es\";\n\nexport const pasteAsPlainText = debounce(\n    (e: Event) => {\n        e.preventDefault();\n        const clipboardData = (e as ClipboardEvent).clipboardData;\n        document.execCommand(\n            \"inserttext\",\n            false,\n            clipboardData?.getData(\"text/plain\")\n        );\n    },\n    100,\n    { leading: true }\n);\n"],"mappings":";;;AAAA,SAAS,gBAAgB;AAElB,IAAM,mBAAmB;AAAA,EAC5B,CAAC,MAAa;AACV,MAAE,eAAe;AACjB,UAAM,gBAAiB,EAAqB;AAC5C,aAAS;AAAA,MACL;AAAA,MACA;AAAA,MACA,eAAe,QAAQ,YAAY;AAAA,IACvC;AAAA,EACJ;AAAA,EACA;AAAA,EACA,EAAE,SAAS,KAAK;AACpB;","names":[]}

package/dist/modern/visualBuilder/utils/types/index.types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/visualBuilder/utils/types/index.types.ts"],"sourcesContent":["import {\n    IContentTypeRootBlocks,\n    IModularBlockSingleBlock,\n} from \"../../../cms/types/contentTypeSchema.types\";\n\nexport type ISchemaIndividualFieldMap = Record<string, ISchemaFieldMap>;\n\nexport type ISchemaFieldMap = (\n    | IContentTypeRootBlocks\n    | (IModularBlockSingleBlock & {\n          data_type: \"block\";\n          display_name: string;\n      })\n) & {\n    non_localizable?: boolean;\n    multiple?: boolean;\n    field_metadata?: {\n        updateRestrict?: boolean;\n        isUnlinkedVariant?: boolean;\n    };\n};\n\nexport interface ITraverseSchemaVisitor {\n    should_visit: (\n        fieldSchema: IContentTypeRootBlocks,\n        path: string\n    ) => boolean;\n    visit: (fieldSchema: IContentTypeRootBlocks, path: string) => void;\n\n    /**\n     * A flat list of all the fields with its schema\n     */\n    fieldMap: ISchemaIndividualFieldMap;\n}\n\nexport enum FieldDataType {\n    CUSTOM_FIELD = \"custom_field\",\n    MULTILINE = \"multiline\",\n    HTML_RTE = \"html_rte\",\n    MARKDOWN_RTE = \"markdown_rte\",\n    SELECT = \"select\",\n    URL = \"url\",\n    SINGLELINE = \"singleline\",\n    JSON_RTE = \"json_rte\",\n    MODULAR_BLOCK = \"modular_block\",\n    LINK = \"link\",\n    ISODATE = \"isodate\",\n    BOOLEAN = \"boolean\",\n    BLOCK = \"block\",\n    NUMBER = \"number\",\n    REFERENCE = \"reference\",\n    GROUP = \"group\",\n    EXPERIENCE_CONTAINER = \"experience_container\",\n    FILE = \"file\",\n    GLOBAL_FIELD = \"global_field\",\n    TAXONOMY = \"taxonomy\",\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCO,IAAK,gBAAL,kBAAKA,mBAAL;AACH,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,SAAM;AACN,EAAAA,eAAA,gBAAa;AACb,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,mBAAgB;AAChB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,0BAAuB;AACvB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,cAAW;AApBH,SAAAA;AAAA,GAAA;","names":["FieldDataType"]}
+{"version":3,"sources":["../../../../../src/visualBuilder/utils/types/index.types.ts"],"sourcesContent":["import {\n    IContentTypeRootBlocks,\n    IModularBlockSingleBlock,\n} from \"../../../cms/types/contentTypeSchema.types\";\n\nexport type ISchemaIndividualFieldMap = Record<string, ISchemaFieldMap>;\n\nexport type ISchemaFieldMap = (\n    | IContentTypeRootBlocks\n    | (IModularBlockSingleBlock & {\n          data_type: \"block\";\n          display_name: string;\n      })\n) & {\n    non_localizable?: boolean;\n    multiple?: boolean;\n    field_metadata?: {\n        updateRestrict?: boolean;\n        isUnlinkedVariant?: boolean;\n    };\n};\n\nexport interface ITraverseSchemaVisitor {\n    should_visit: (\n        fieldSchema: IContentTypeRootBlocks,\n        path: string\n    ) => boolean;\n    visit: (fieldSchema: IContentTypeRootBlocks, path: string) => void;\n\n    /**\n     * A flat list of all the fields with its schema\n     */\n    fieldMap: ISchemaIndividualFieldMap;\n}\n\nexport enum FieldDataType {\n    CUSTOM_FIELD = \"custom_field\",\n    MULTILINE = \"multiline\",\n    HTML_RTE = \"html_rte\",\n    MARKDOWN_RTE = \"markdown_rte\",\n    SELECT = \"select\",\n    URL = \"url\",\n    SINGLELINE = \"singleline\",\n    JSON_RTE = \"json_rte\",\n    MODULAR_BLOCK = \"modular_block\",\n    LINK = \"link\",\n    ISODATE = \"isodate\",\n    BOOLEAN = \"boolean\",\n    BLOCK = \"block\",\n    NUMBER = \"number\",\n    REFERENCE = \"reference\",\n    GROUP = \"group\",\n    EXPERIENCE_CONTAINER = \"experience_container\",\n    FILE = \"file\",\n    GLOBAL_FIELD = \"global_field\",\n    TAXONOMY = \"taxonomy\",\n}\n\nexport interface VisualBuilderEditContext {\n    visualBuilderContainer: HTMLDivElement;\n    resizeObserver: ResizeObserver;\n    lastEditedField: Element | null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCO,IAAK,gBAAL,kBAAKA,mBAAL;AACH,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,SAAM;AACN,EAAAA,eAAA,gBAAa;AACb,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,mBAAgB;AAChB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,0BAAuB;AACvB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,cAAW;AApBH,SAAAA;AAAA,GAAA;","names":["FieldDataType"]}

package/dist/modern/visualBuilder/utils/types/index.types.d.cts

@@ -42,5 +42,10 @@ declare enum FieldDataType {
     GLOBAL_FIELD = "global_field",
     TAXONOMY = "taxonomy"
 }
+interface VisualBuilderEditContext {
+    visualBuilderContainer: HTMLDivElement;
+    resizeObserver: ResizeObserver;
+    lastEditedField: Element | null;
+}
 
-export { FieldDataType, type ISchemaFieldMap, type ISchemaIndividualFieldMap, type ITraverseSchemaVisitor };
+export { FieldDataType, type ISchemaFieldMap, type ISchemaIndividualFieldMap, type ITraverseSchemaVisitor, type VisualBuilderEditContext };

package/dist/modern/visualBuilder/utils/types/index.types.d.ts

@@ -42,5 +42,10 @@ declare enum FieldDataType {
     GLOBAL_FIELD = "global_field",
     TAXONOMY = "taxonomy"
 }
+interface VisualBuilderEditContext {
+    visualBuilderContainer: HTMLDivElement;
+    resizeObserver: ResizeObserver;
+    lastEditedField: Element | null;
+}
 
-export { FieldDataType, type ISchemaFieldMap, type ISchemaIndividualFieldMap, type ITraverseSchemaVisitor };
+export { FieldDataType, type ISchemaFieldMap, type ISchemaIndividualFieldMap, type ITraverseSchemaVisitor, type VisualBuilderEditContext };

package/dist/modern/visualBuilder/utils/types/index.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/visualBuilder/utils/types/index.types.ts"],"sourcesContent":["import {\n    IContentTypeRootBlocks,\n    IModularBlockSingleBlock,\n} from \"../../../cms/types/contentTypeSchema.types\";\n\nexport type ISchemaIndividualFieldMap = Record<string, ISchemaFieldMap>;\n\nexport type ISchemaFieldMap = (\n    | IContentTypeRootBlocks\n    | (IModularBlockSingleBlock & {\n          data_type: \"block\";\n          display_name: string;\n      })\n) & {\n    non_localizable?: boolean;\n    multiple?: boolean;\n    field_metadata?: {\n        updateRestrict?: boolean;\n        isUnlinkedVariant?: boolean;\n    };\n};\n\nexport interface ITraverseSchemaVisitor {\n    should_visit: (\n        fieldSchema: IContentTypeRootBlocks,\n        path: string\n    ) => boolean;\n    visit: (fieldSchema: IContentTypeRootBlocks, path: string) => void;\n\n    /**\n     * A flat list of all the fields with its schema\n     */\n    fieldMap: ISchemaIndividualFieldMap;\n}\n\nexport enum FieldDataType {\n    CUSTOM_FIELD = \"custom_field\",\n    MULTILINE = \"multiline\",\n    HTML_RTE = \"html_rte\",\n    MARKDOWN_RTE = \"markdown_rte\",\n    SELECT = \"select\",\n    URL = \"url\",\n    SINGLELINE = \"singleline\",\n    JSON_RTE = \"json_rte\",\n    MODULAR_BLOCK = \"modular_block\",\n    LINK = \"link\",\n    ISODATE = \"isodate\",\n    BOOLEAN = \"boolean\",\n    BLOCK = \"block\",\n    NUMBER = \"number\",\n    REFERENCE = \"reference\",\n    GROUP = \"group\",\n    EXPERIENCE_CONTAINER = \"experience_container\",\n    FILE = \"file\",\n    GLOBAL_FIELD = \"global_field\",\n    TAXONOMY = \"taxonomy\",\n}\n"],"mappings":";;;AAmCO,IAAK,gBAAL,kBAAKA,mBAAL;AACH,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,SAAM;AACN,EAAAA,eAAA,gBAAa;AACb,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,mBAAgB;AAChB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,0BAAuB;AACvB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,cAAW;AApBH,SAAAA;AAAA,GAAA;","names":["FieldDataType"]}
+{"version":3,"sources":["../../../../../src/visualBuilder/utils/types/index.types.ts"],"sourcesContent":["import {\n    IContentTypeRootBlocks,\n    IModularBlockSingleBlock,\n} from \"../../../cms/types/contentTypeSchema.types\";\n\nexport type ISchemaIndividualFieldMap = Record<string, ISchemaFieldMap>;\n\nexport type ISchemaFieldMap = (\n    | IContentTypeRootBlocks\n    | (IModularBlockSingleBlock & {\n          data_type: \"block\";\n          display_name: string;\n      })\n) & {\n    non_localizable?: boolean;\n    multiple?: boolean;\n    field_metadata?: {\n        updateRestrict?: boolean;\n        isUnlinkedVariant?: boolean;\n    };\n};\n\nexport interface ITraverseSchemaVisitor {\n    should_visit: (\n        fieldSchema: IContentTypeRootBlocks,\n        path: string\n    ) => boolean;\n    visit: (fieldSchema: IContentTypeRootBlocks, path: string) => void;\n\n    /**\n     * A flat list of all the fields with its schema\n     */\n    fieldMap: ISchemaIndividualFieldMap;\n}\n\nexport enum FieldDataType {\n    CUSTOM_FIELD = \"custom_field\",\n    MULTILINE = \"multiline\",\n    HTML_RTE = \"html_rte\",\n    MARKDOWN_RTE = \"markdown_rte\",\n    SELECT = \"select\",\n    URL = \"url\",\n    SINGLELINE = \"singleline\",\n    JSON_RTE = \"json_rte\",\n    MODULAR_BLOCK = \"modular_block\",\n    LINK = \"link\",\n    ISODATE = \"isodate\",\n    BOOLEAN = \"boolean\",\n    BLOCK = \"block\",\n    NUMBER = \"number\",\n    REFERENCE = \"reference\",\n    GROUP = \"group\",\n    EXPERIENCE_CONTAINER = \"experience_container\",\n    FILE = \"file\",\n    GLOBAL_FIELD = \"global_field\",\n    TAXONOMY = \"taxonomy\",\n}\n\nexport interface VisualBuilderEditContext {\n    visualBuilderContainer: HTMLDivElement;\n    resizeObserver: ResizeObserver;\n    lastEditedField: Element | null;\n}\n"],"mappings":";;;AAmCO,IAAK,gBAAL,kBAAKA,mBAAL;AACH,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,SAAM;AACN,EAAAA,eAAA,gBAAa;AACb,EAAAA,eAAA,cAAW;AACX,EAAAA,eAAA,mBAAgB;AAChB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,aAAU;AACV,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,YAAS;AACT,EAAAA,eAAA,eAAY;AACZ,EAAAA,eAAA,WAAQ;AACR,EAAAA,eAAA,0BAAuB;AACvB,EAAAA,eAAA,UAAO;AACP,EAAAA,eAAA,kBAAe;AACf,EAAAA,eAAA,cAAW;AApBH,SAAAA;AAAA,GAAA;","names":["FieldDataType"]}

package/dist/modern/visualBuilder/visualBuilder.style.cjs

@@ -135,7 +135,7 @@ function visualBuilderStyles() {
             color: #6c5ce7;
             overflow: hidden;
 
-            z-index: 2147483647 !important;
+            z-index: 2147483646 !important;
 
             display: grid;
             grid-template-columns: min-content 0fr;
@@ -172,12 +172,17 @@ function visualBuilderStyles() {
             overflow: hidden;
             text-overflow: ellipsis;
         `,
+    "visual-builder__add-button--loading": import_goober.css`
+            cursor: wait;
+            /* we have not-allowed on disabled, so we need this */
+            &:disabled {
+                cursor: wait;
+            }
+        `,
     "visual-builder__start-editing-btn": import_goober.css`
             z-index: 1000;
             text-decoration: none;
             position: fixed;
-            bottom: 30px;
-            right: 30px;
             box-shadow:
                 0px 4px 15px 0px rgba(108, 92, 231, 0.2),
                 0px 3px 14px 3px rgba(0, 0, 0, 0.12),
@@ -225,6 +230,22 @@ function visualBuilderStyles() {
                 text-transform: capitalize;
             }
         `,
+    "visual-builder__start-editing-btn__bottom-right": import_goober.css`
+            bottom: 30px;
+            right: 30px;
+        `,
+    "visual-builder__start-editing-btn__bottom-left": import_goober.css`
+            bottom: 30px;
+            left: 30px;
+        `,
+    "visual-builder__start-editing-btn__top-right": import_goober.css`
+            top: 30px;
+            right: 30px;
+        `,
+    "visual-builder__start-editing-btn__top-left": import_goober.css`
+            top: 30px;
+            left: 30px;
+        `,
     "visual-builder__cursor-icon": import_goober.css`
             height: 40px;
             width: 40px;
@@ -358,6 +379,7 @@ function visualBuilderStyles() {
             }
         `,
     "visual-builder__button--comment-loader": import_goober.css`
+            cursor: wait !important;
             svg.loader {
                 height: 16px;
                 width: 16px;
@@ -516,7 +538,7 @@ function visualBuilderStyles() {
             position: absolute;
             outline: 2px dashed #6c5ce7;
             transition: var(--outline-transition);
-            z-index: 2147483647 !important;
+            z-index: 2147483646 !important;
         `,
     "visual-builder__hover-outline--hidden": import_goober.css`
             visibility: hidden;
@@ -674,7 +696,7 @@ var VisualBuilderGlobalStyles = `
        [data-cslp] [contenteditable="true"] {
             outline: none;
         }
-        
+
         @keyframes visual-builder__spinner {
             0% {
                 transform: rotate(0deg);

package/dist/modern/visualBuilder/visualBuilder.style.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n    pointer-events: all;\n    svg {\n        pointer-events: none;\n    }\n    &:before {\n        content: attr(data-tooltip);\n        position: absolute;\n        bottom: 20px;\n        margin-bottom: 24px;\n        padding: 12px;\n        border-radius: 4px;\n        width: max-content;\n        max-width: 200px;\n        color: #fff;\n        font-family: Inter;\n        font-size: 0.75rem;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 132%; /* 0.99rem */\n        letter-spacing: 0.015rem;\n        background: #767676;\n    }\n    &:after {\n        content: \"\";\n        position: absolute;\n        bottom: 28px;\n        /* the arrow */\n        border: 10px solid #000;\n        border-color: #767676 transparent transparent transparent;\n    }\n`;\n\nexport function visualBuilderStyles() {\n    return {\n        \"visual-builder__container\": css`\n            --outline-transition: all 0.15s ease-in;\n            font-family: \"Inter\", sans-serif;\n        `,\n        \"visual-builder__cursor\": css`\n            visibility: hidden;\n            height: 0;\n\n            &.visible {\n                visibility: visible;\n                position: fixed;\n                top: 0;\n                left: 0;\n                z-index: 2147483647 !important;\n\n                color: #fff;\n\n                height: auto;\n                padding: 0 10px;\n\n                display: flex;\n                align-items: center;\n                justify-content: center;\n\n                pointer-events: none !important;\n                position: fixed !important;\n                cursor: none;\n            }\n        `,\n        \"visual-builder__overlay__wrapper\": css`\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100vh;\n            visibility: hidden;\n            z-index: 99999;\n\n            pointer-events: none;\n\n            &.visible {\n                visibility: visible;\n            }\n        `,\n        \"visual-builder__overlay--outline\": css`\n            position: absolute;\n            outline: 4px solid #715cdd;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__overlay\": css`\n            background: rgba(0, 0, 0, 0.3);\n            box-sizing: content-box;\n            pointer-events: all;\n            position: absolute;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__add-button\": css`\n            position: absolute;\n            pointer-events: all;\n\n            background: #ffffff;\n            color: #475161;\n\n            border-radius: 4px;\n            border: 1px solid #6c5ce7;\n\n            height: 32px;\n            min-width: 32px;\n            max-width: 180px;\n            padding: 8px 6px;\n            transform: translate(-50%, -50%);\n\n            font-weight: 600;\n            color: #6c5ce7;\n            overflow: hidden;\n\n            z-index: 2147483647 !important;\n\n            display: grid;\n            grid-template-columns: min-content 0fr;\n            align-content: center;\n            gap: 0;\n\n            transition:\n                grid-template-columns 0.25s,\n                left 0.15s ease-in,\n                top 0.15s ease-in,\n                gap 0.15s ease-in;\n\n            &:has(.visual-builder__add-button-label):hover {\n                grid-template-columns: min-content 1fr;\n                gap: 8px;\n                padding: 8px 16px;\n            }\n\n            svg {\n                fill: #6c5ce7;\n            }\n\n            &:disabled {\n                border-color: #bbbec3;\n                cursor: not-allowed;\n            }\n\n            &:disabled svg {\n                fill: #bbbec3;\n            }\n        `,\n        \"visual-builder__add-button-label\": css`\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        `,\n        \"visual-builder__start-editing-btn\": css`\n            z-index: 1000;\n            text-decoration: none;\n            position: fixed;\n            bottom: 30px;\n            right: 30px;\n            box-shadow:\n                0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n                0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n                0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n            display: inline-flex;\n            padding: 0.5rem 1rem;\n            justify-content: center;\n            align-items: center;\n            gap: 0.5rem;\n\n            border-radius: 4px;\n            border: 1px solid transparent;\n            background: #6c5ce7;\n            transition:\n                background-color 0.15s ease-in-out,\n                border-color 0.15s ease-in-out,\n                box-shadow 0.15s ease-in-out,\n                -webkit-box-shadow 0.15s ease-in-out;\n\n            &:hover {\n                background-color: #5d50be;\n            }\n            &:focus {\n                outline: none;\n                box-shadow: 0 0 0 2px #ada4f4;\n            }\n            & > span {\n                color: #fff;\n                /* Body/P1 Bold */\n                font-size: 1rem;\n                font-family: Inter;\n                font-weight: 600;\n                line-height: 150%;\n                letter-spacing: 0.01rem;\n                text-transform: capitalize;\n            }\n\n            & > svg {\n                color: #fff;\n                font-size: 1rem;\n                font-family: Inter;\n                font-weight: 600;\n                line-height: 150%;\n                letter-spacing: 0.01rem;\n                text-transform: capitalize;\n            }\n        `,\n        \"visual-builder__cursor-icon\": css`\n            height: 40px;\n            width: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: #5d50be;\n            border-radius: 50%;\n            position: absolute;\n            top: 0;\n            left: 0;\n        `,\n        \"visual-builder__cursor-pointer\": css`\n            position: absolute;\n            top: -8px;\n            left: -8px;\n        `,\n        \"visual-builder__cursor-icon--loader\": css`\n            animation: visual-builder__spinner 1s linear infinite;\n        `,\n        \"visual-builder__focused-toolbar\": css`\n            position: absolute;\n            transform: translateY(-100%);\n            z-index: 100000;\n            gap: 8px;\n            width: 0;\n            display: flex;\n            align-items: end;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n            padding: 4px 8px !important;\n            background: #6c5ce7;\n            color: #fff;\n            z-index: 1;\n            border-radius: 2px !important;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            width: fit-content;\n\n            &:disabled {\n                filter: contrast(0.7);\n            }\n\n            .visual-builder__focused-toolbar__text {\n                padding-right: 3px;\n                height: 16px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n            pointer-events: none;\n            color: #5d50be;\n            padding: 4px !important;\n            margin-bottom: 3px;\n            display: none;\n            width: fit-content;\n            position: absolute;\n            z-index: 100000;\n        `,\n        \"field-label-dropdown-open\": css`\n            .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n                pointer-events: all;\n                visibility: visible;\n                display: initial;\n            }\n\n            .visual-builder__button--secondary:hover {\n                background-color: #6c5ce7;\n                color: #f9f8ff;\n            }\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n            display: flex;\n            flex-direction: column-reverse;\n            position: relative;\n        `,\n        \"visual-builder__focused-toolbar__field-label-container\": css`\n            display: flex;\n            column-gap: 0.5rem;\n            align-items: center;\n        `,\n        \"visual-builder__button\": css`\n            background-color: transparent;\n            border: 1px solid transparent;\n            border-radius: 4px;\n            font-size: 16px;\n            font-weight: 600;\n            line-height: 100%;\n            padding: 8px 16px;\n            text-align: center;\n            z-index: 2147483647 !important;\n            transition:\n                color 0.15s ease-in-out,\n                background-color 0.15s ease-in-out,\n                border-color 0.15s ease-in-out,\n                box-shadow 0.15s ease-in-out;\n            // vertical-align: middle;\n        `,\n        \"visual-builder__button--primary\": css`\n            background-color: #6c5ce7;\n            color: #fff;\n\n            &:hover {\n                background-color: #5d50be;\n            }\n        `,\n        \"visual-builder__button--secondary\": css`\n            background-color: #f9f8ff;\n            border: 1px solid #6c5ce7;\n            color: #6c5ce7;\n        `,\n        \"visual-builder__button--edit\": css`\n            svg {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #475161;\n                }\n            }\n        `,\n        \"visual-builder__button-loader\": css`\n            svg.loader {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #ffffff;\n                }\n            }\n        `,\n        \"visual-builder__button--comment-loader\": css`\n            svg.loader {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #475161;\n                }\n            }\n        `,\n        \"visual-builder__field-icon\": css`\n            svg {\n                height: 16px;\n                width: 16px;\n                margin-right: 5px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__button-group\": css`\n            display: flex;\n            background: #fff;\n            border-radius: 2px;\n            height: 100%;\n            padding: 4px !important;\n            z-index: 2147483647 !important;\n\n            &:has(.visual-builder__button) {\n                padding: 2px;\n                gap: 8px;\n            }\n\n            .visual-builder__button:hover {\n                background-color: #f5f5f5;\n\n                svg {\n                    color: #5d50be;\n                }\n            }\n\n            .visual-builder__button {\n                background-color: #fff;\n                border-color: transparent;\n                color: #475161;\n                padding: 4px;\n                min-width: 32px;\n                min-height: 32px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__text\": css`\n            font-family: Inter, \"sans-serif\";\n            font-size: 0.75rem;\n            font-style: normal;\n            font-weight: 400;\n            line-height: 150%;\n            letter-spacing: 0.015rem;\n            max-width: 150px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            text-wrap: nowrap;\n        `,\n        \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n            height: 40px;\n            z-index: 2147483647 !important;\n\n            svg {\n                height: 100%;\n                width: 100%;\n            }\n        `,\n        \"visual-builder__rotate--90\": css`\n            transform: rotate(90deg);\n        `,\n        \"visual-builder__focused-toolbar--field-disabled\": css`\n            pointer-events: none;\n            cursor: not-allowed;\n            .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n                background: #909090;\n            }\n        `,\n        \"visual-builder__cursor-disabled\": css`\n            .visual-builder__cursor-icon {\n                background: #909090;\n            }\n\n            .visual-builder__cursor-pointer path {\n                fill: #909090;\n            }\n        `,\n        \"visual-builder__tooltip\": css`\n            ${tooltipBaseStyle}\n\n            &:before {\n                display: none;\n            }\n\n            &:hover:before,\n            &:hover:after {\n                display: block;\n                z-index: 2147483647 !important;\n            }\n\n            &:after {\n                display: none;\n            }\n        `,\n        \"visual-builder__tooltip--bottom\": css`\n            &:before {\n                bottom: -66px;\n            }\n            &:after {\n                bottom: -6px;\n                transform: rotate(180deg);\n            }\n        `,\n\n        \"visual-builder__tooltip--persistent\": css`\n            ${tooltipBaseStyle}\n\n            &:before {\n                display: block;\n            }\n\n            &:after {\n                display: block;\n            }\n        `,\n        \"visual-builder__empty-block\": css`\n            width: 100%;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n            gap: 1rem;\n            min-height: 100px;\n        `,\n        \"visual-builder__empty-block-title\": css`\n            font-size: 0.95rem;\n            font-family: Inter;\n            font-weight: 400;\n            line-height: 100%;\n            color: #647696;\n        `,\n        \"visual-builder__empty-block-add-button\": css`\n            height: 32px;\n            border-radius: 4px;\n            background: #f9f8ff;\n            border-color: #6c5ce7;\n            border-width: 1px;\n            padding: 8px 16px 8px 16px;\n            font-size: 0.9rem;\n            font-family: Inter;\n            font-weight: 600;\n            color: #6c5ce7;\n            padding-block: 0px;\n            letter-spacing: 0.01rem;\n        `,\n        \"visual-builder__hover-outline\": css`\n            position: absolute;\n            outline: 2px dashed #6c5ce7;\n            transition: var(--outline-transition);\n            z-index: 2147483647 !important;\n        `,\n        \"visual-builder__hover-outline--hidden\": css`\n            visibility: hidden;\n        `,\n        \"visual-builder__hover-outline--unclickable\": css`\n            pointer-events: none;\n        `,\n        \"visual-builder__hover-outline--disabled\": css`\n            outline: 2px dashed #909090;\n        `,\n        \"visual-builder__default-cursor--disabled\": css`\n            cursor: none;\n        `,\n        \"visual-builder__draft-field\": css`\n            outline: 2px dashed #eb5646;\n        `,\n        \"visual-builder__variant-field\": css`\n            outline: 2px solid #bd59fa;\n        `,\n        \"visual-builder__pseudo-editable-element\": css`\n            z-index: 99999 !important;\n        `,\n        // cslp error styles\n        \"visual-builder__button-error\": css`\n            background-color: #ffeeeb;\n            padding: 0px !important;\n            &:hover {\n                background-color: #ffeeeb;\n            }\n        `,\n        \"visual-builder__focused-toolbar__error\": css`\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            column-gap: 3px;\n            padding: 4px 8px;\n        `,\n        \"visual-builder__focused-toolbar__error-text\": css`\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 18px;\n            color: #a31b00;\n        `,\n        \"visual-builder__focused-toolbar__error-toolip\": css`\n            position: absolute;\n            width: 400px;\n            background-color: red;\n            left: 0;\n            top: -7px;\n            transform: translateY(-100%);\n            background-color: #767676;\n            border-radius: 4px;\n            box-shadow:\n                0px 1px 10px 0px #6c5ce733,\n                0px 5px 5px 0px #0000001f,\n                0px 2px 4px 0px #00000024;\n            padding: 12px;\n            text-align: left;\n\n            &:before {\n                content: \"\";\n                position: absolute;\n                bottom: -3px;\n                left: 4%;\n                transform: translateX(-50%) rotate(45deg);\n                width: 10px;\n                height: 10px;\n                background-color: #767676;\n            }\n\n            > p {\n                margin: 0;\n                color: #ffffff;\n                font-size: 14px;\n                font-weight: 600;\n                line-height: 21px;\n                margin-bottom: 4px;\n            }\n\n            > span {\n                color: #ffffff;\n                font-size: 12px;\n                font-weight: 400;\n                line-height: 18px;\n            }\n        `,\n        \"variant-field-revert-component\": css`\n            position: relative;\n            display: inline-block;\n            z-index: 2147483647 !important;\n        `,\n        \"variant-field-revert-component__dropdown-content\": css`\n            position: absolute;\n            top: -12px;\n            left: -4px;\n            background-color: #ffffff;\n            min-width: max-content;\n            box-shadow:\n                0 4px 15px 0 rgba(108, 92, 231, 0.2),\n                0 3px 14px 3px rgba(0, 0, 0, 0.12),\n                0 8px 10px 1px rgba(0, 0, 0, 0.14);\n            z-index: 2147483647 !important;\n            margin-top: 4px;\n            padding: 4px 0px;\n            border-radius: 2px;\n        `,\n        \"variant-field-revert-component__dropdown-content__list-item\": css`\n            color: black;\n            font-weight: 400;\n            padding: 9.6px 16px;\n            text-decoration: none;\n            display: block;\n            font-size: 0.75rem;\n            height: 32px;\n            line-height: 2rem;\n            display: flex;\n            align-items: center;\n            z-index: 2147483647 !important;\n            cursor: pointer;\n            &:hover {\n                background-color: #f1f1f1;\n            }\n            &:hover > span {\n                color: #5d50be;\n            }\n            & > span {\n                margin-top: 4px;\n                margin-bottom: 4px;\n            }\n        `,\n        \"visual-builder__no-cursor-style\": css`\n            cursor: none !important;\n        `,\n        \"visual-builder__field-toolbar-container\": css`\n            display: flex;\n            flex-direction: column-reverse;\n            z-index: 2147483647 !important;\n        `,\n        \"visual-builder__variant-button\": css`\n            display: flex;\n            min-width: 3rem !important;\n            gap: 0.25rem;\n            align-items: center;\n            justify-content: center;\n            display: flex;\n            & svg path {\n                fill: #475161;\n            }\n        `,\n    };\n}\n\nexport const VisualBuilderGlobalStyles = `\n       @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n       [data-cslp] [contenteditable=\"true\"] {\n            outline: none;\n        }\n        \n        @keyframes visual-builder__spinner {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n`;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/visualBuilder/visualBuilder.style.ts"],"sourcesContent":["import { css } from \"goober\";\n\nconst tooltipBaseStyle = `\n    pointer-events: all;\n    svg {\n        pointer-events: none;\n    }\n    &:before {\n        content: attr(data-tooltip);\n        position: absolute;\n        bottom: 20px;\n        margin-bottom: 24px;\n        padding: 12px;\n        border-radius: 4px;\n        width: max-content;\n        max-width: 200px;\n        color: #fff;\n        font-family: Inter;\n        font-size: 0.75rem;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 132%; /* 0.99rem */\n        letter-spacing: 0.015rem;\n        background: #767676;\n    }\n    &:after {\n        content: \"\";\n        position: absolute;\n        bottom: 28px;\n        /* the arrow */\n        border: 10px solid #000;\n        border-color: #767676 transparent transparent transparent;\n    }\n`;\n\nexport function visualBuilderStyles() {\n    return {\n        \"visual-builder__container\": css`\n            --outline-transition: all 0.15s ease-in;\n            font-family: \"Inter\", sans-serif;\n        `,\n        \"visual-builder__cursor\": css`\n            visibility: hidden;\n            height: 0;\n\n            &.visible {\n                visibility: visible;\n                position: fixed;\n                top: 0;\n                left: 0;\n                z-index: 2147483647 !important;\n\n                color: #fff;\n\n                height: auto;\n                padding: 0 10px;\n\n                display: flex;\n                align-items: center;\n                justify-content: center;\n\n                pointer-events: none !important;\n                position: fixed !important;\n                cursor: none;\n            }\n        `,\n        \"visual-builder__overlay__wrapper\": css`\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100vh;\n            visibility: hidden;\n            z-index: 99999;\n\n            pointer-events: none;\n\n            &.visible {\n                visibility: visible;\n            }\n        `,\n        \"visual-builder__overlay--outline\": css`\n            position: absolute;\n            outline: 4px solid #715cdd;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__overlay\": css`\n            background: rgba(0, 0, 0, 0.3);\n            box-sizing: content-box;\n            pointer-events: all;\n            position: absolute;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__add-button\": css`\n            position: absolute;\n            pointer-events: all;\n\n            background: #ffffff;\n            color: #475161;\n\n            border-radius: 4px;\n            border: 1px solid #6c5ce7;\n\n            height: 32px;\n            min-width: 32px;\n            max-width: 180px;\n            padding: 8px 6px;\n            transform: translate(-50%, -50%);\n\n            font-weight: 600;\n            color: #6c5ce7;\n            overflow: hidden;\n\n            z-index: 2147483646 !important;\n\n            display: grid;\n            grid-template-columns: min-content 0fr;\n            align-content: center;\n            gap: 0;\n\n            transition:\n                grid-template-columns 0.25s,\n                left 0.15s ease-in,\n                top 0.15s ease-in,\n                gap 0.15s ease-in;\n\n            &:has(.visual-builder__add-button-label):hover {\n                grid-template-columns: min-content 1fr;\n                gap: 8px;\n                padding: 8px 16px;\n            }\n\n            svg {\n                fill: #6c5ce7;\n            }\n\n            &:disabled {\n                border-color: #bbbec3;\n                cursor: not-allowed;\n            }\n\n            &:disabled svg {\n                fill: #bbbec3;\n            }\n        `,\n        \"visual-builder__add-button-label\": css`\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        `,\n        \"visual-builder__add-button--loading\": css`\n            cursor: wait;\n            /* we have not-allowed on disabled, so we need this */\n            &:disabled {\n                cursor: wait;\n            }\n        `,\n        \"visual-builder__start-editing-btn\": css`\n            z-index: 1000;\n            text-decoration: none;\n            position: fixed;\n            box-shadow:\n                0px 4px 15px 0px rgba(108, 92, 231, 0.2),\n                0px 3px 14px 3px rgba(0, 0, 0, 0.12),\n                0px 8px 10px 1px rgba(0, 0, 0, 0.14);\n            display: inline-flex;\n            padding: 0.5rem 1rem;\n            justify-content: center;\n            align-items: center;\n            gap: 0.5rem;\n\n            border-radius: 4px;\n            border: 1px solid transparent;\n            background: #6c5ce7;\n            transition:\n                background-color 0.15s ease-in-out,\n                border-color 0.15s ease-in-out,\n                box-shadow 0.15s ease-in-out,\n                -webkit-box-shadow 0.15s ease-in-out;\n\n            &:hover {\n                background-color: #5d50be;\n            }\n            &:focus {\n                outline: none;\n                box-shadow: 0 0 0 2px #ada4f4;\n            }\n            & > span {\n                color: #fff;\n                /* Body/P1 Bold */\n                font-size: 1rem;\n                font-family: Inter;\n                font-weight: 600;\n                line-height: 150%;\n                letter-spacing: 0.01rem;\n                text-transform: capitalize;\n            }\n\n            & > svg {\n                color: #fff;\n                font-size: 1rem;\n                font-family: Inter;\n                font-weight: 600;\n                line-height: 150%;\n                letter-spacing: 0.01rem;\n                text-transform: capitalize;\n            }\n        `,\n        \"visual-builder__start-editing-btn__bottom-right\": css`\n            bottom: 30px;\n            right: 30px;\n        `,\n        \"visual-builder__start-editing-btn__bottom-left\": css`\n            bottom: 30px;\n            left: 30px;\n        `,\n        \"visual-builder__start-editing-btn__top-right\": css`\n            top: 30px;\n            right: 30px;\n        `,\n        \"visual-builder__start-editing-btn__top-left\": css`\n            top: 30px;\n            left: 30px;\n        `,\n        \"visual-builder__cursor-icon\": css`\n            height: 40px;\n            width: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: #5d50be;\n            border-radius: 50%;\n            position: absolute;\n            top: 0;\n            left: 0;\n        `,\n        \"visual-builder__cursor-pointer\": css`\n            position: absolute;\n            top: -8px;\n            left: -8px;\n        `,\n        \"visual-builder__cursor-icon--loader\": css`\n            animation: visual-builder__spinner 1s linear infinite;\n        `,\n        \"visual-builder__focused-toolbar\": css`\n            position: absolute;\n            transform: translateY(-100%);\n            z-index: 100000;\n            gap: 8px;\n            width: 0;\n            display: flex;\n            align-items: end;\n            transition: var(--outline-transition);\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper__current-field\": css`\n            padding: 4px 8px !important;\n            background: #6c5ce7;\n            color: #fff;\n            z-index: 1;\n            border-radius: 2px !important;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            width: fit-content;\n\n            &:disabled {\n                filter: contrast(0.7);\n            }\n\n            .visual-builder__focused-toolbar__text {\n                padding-right: 3px;\n                height: 16px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\": css`\n            pointer-events: none;\n            color: #5d50be;\n            padding: 4px !important;\n            margin-bottom: 3px;\n            display: none;\n            width: fit-content;\n            position: absolute;\n            z-index: 100000;\n        `,\n        \"field-label-dropdown-open\": css`\n            .visual-builder__focused-toolbar__field-label-wrapper__parent-field {\n                pointer-events: all;\n                visibility: visible;\n                display: initial;\n            }\n\n            .visual-builder__button--secondary:hover {\n                background-color: #6c5ce7;\n                color: #f9f8ff;\n            }\n        `,\n        \"visual-builder__focused-toolbar__field-label-wrapper\": css`\n            display: flex;\n            flex-direction: column-reverse;\n            position: relative;\n        `,\n        \"visual-builder__focused-toolbar__field-label-container\": css`\n            display: flex;\n            column-gap: 0.5rem;\n            align-items: center;\n        `,\n        \"visual-builder__button\": css`\n            background-color: transparent;\n            border: 1px solid transparent;\n            border-radius: 4px;\n            font-size: 16px;\n            font-weight: 600;\n            line-height: 100%;\n            padding: 8px 16px;\n            text-align: center;\n            z-index: 2147483647 !important;\n            transition:\n                color 0.15s ease-in-out,\n                background-color 0.15s ease-in-out,\n                border-color 0.15s ease-in-out,\n                box-shadow 0.15s ease-in-out;\n            // vertical-align: middle;\n        `,\n        \"visual-builder__button--primary\": css`\n            background-color: #6c5ce7;\n            color: #fff;\n\n            &:hover {\n                background-color: #5d50be;\n            }\n        `,\n        \"visual-builder__button--secondary\": css`\n            background-color: #f9f8ff;\n            border: 1px solid #6c5ce7;\n            color: #6c5ce7;\n        `,\n        \"visual-builder__button--edit\": css`\n            svg {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #475161;\n                }\n            }\n        `,\n        \"visual-builder__button-loader\": css`\n            svg.loader {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #ffffff;\n                }\n            }\n        `,\n        \"visual-builder__button--comment-loader\": css`\n            cursor: wait !important;\n            svg.loader {\n                height: 16px;\n                width: 16px;\n\n                path {\n                    fill: #475161;\n                }\n            }\n        `,\n        \"visual-builder__field-icon\": css`\n            svg {\n                height: 16px;\n                width: 16px;\n                margin-right: 5px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__button-group\": css`\n            display: flex;\n            background: #fff;\n            border-radius: 2px;\n            height: 100%;\n            padding: 4px !important;\n            z-index: 2147483647 !important;\n\n            &:has(.visual-builder__button) {\n                padding: 2px;\n                gap: 8px;\n            }\n\n            .visual-builder__button:hover {\n                background-color: #f5f5f5;\n\n                svg {\n                    color: #5d50be;\n                }\n            }\n\n            .visual-builder__button {\n                background-color: #fff;\n                border-color: transparent;\n                color: #475161;\n                padding: 4px;\n                min-width: 32px;\n                min-height: 32px;\n            }\n        `,\n        \"visual-builder__focused-toolbar__text\": css`\n            font-family: Inter, \"sans-serif\";\n            font-size: 0.75rem;\n            font-style: normal;\n            font-weight: 400;\n            line-height: 150%;\n            letter-spacing: 0.015rem;\n            max-width: 150px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            text-wrap: nowrap;\n        `,\n        \"visual-builder__focused-toolbar__multiple-field-toolbar\": css`\n            height: 40px;\n            z-index: 2147483647 !important;\n\n            svg {\n                height: 100%;\n                width: 100%;\n            }\n        `,\n        \"visual-builder__rotate--90\": css`\n            transform: rotate(90deg);\n        `,\n        \"visual-builder__focused-toolbar--field-disabled\": css`\n            pointer-events: none;\n            cursor: not-allowed;\n            .visual-builder__focused-toolbar__field-label-wrapper__current-field {\n                background: #909090;\n            }\n        `,\n        \"visual-builder__cursor-disabled\": css`\n            .visual-builder__cursor-icon {\n                background: #909090;\n            }\n\n            .visual-builder__cursor-pointer path {\n                fill: #909090;\n            }\n        `,\n        \"visual-builder__tooltip\": css`\n            ${tooltipBaseStyle}\n\n            &:before {\n                display: none;\n            }\n\n            &:hover:before,\n            &:hover:after {\n                display: block;\n                z-index: 2147483647 !important;\n            }\n\n            &:after {\n                display: none;\n            }\n        `,\n        \"visual-builder__tooltip--bottom\": css`\n            &:before {\n                bottom: -66px;\n            }\n            &:after {\n                bottom: -6px;\n                transform: rotate(180deg);\n            }\n        `,\n\n        \"visual-builder__tooltip--persistent\": css`\n            ${tooltipBaseStyle}\n\n            &:before {\n                display: block;\n            }\n\n            &:after {\n                display: block;\n            }\n        `,\n        \"visual-builder__empty-block\": css`\n            width: 100%;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n            gap: 1rem;\n            min-height: 100px;\n        `,\n        \"visual-builder__empty-block-title\": css`\n            font-size: 0.95rem;\n            font-family: Inter;\n            font-weight: 400;\n            line-height: 100%;\n            color: #647696;\n        `,\n        \"visual-builder__empty-block-add-button\": css`\n            height: 32px;\n            border-radius: 4px;\n            background: #f9f8ff;\n            border-color: #6c5ce7;\n            border-width: 1px;\n            padding: 8px 16px 8px 16px;\n            font-size: 0.9rem;\n            font-family: Inter;\n            font-weight: 600;\n            color: #6c5ce7;\n            padding-block: 0px;\n            letter-spacing: 0.01rem;\n        `,\n        \"visual-builder__hover-outline\": css`\n            position: absolute;\n            outline: 2px dashed #6c5ce7;\n            transition: var(--outline-transition);\n            z-index: 2147483646 !important;\n        `,\n        \"visual-builder__hover-outline--hidden\": css`\n            visibility: hidden;\n        `,\n        \"visual-builder__hover-outline--unclickable\": css`\n            pointer-events: none;\n        `,\n        \"visual-builder__hover-outline--disabled\": css`\n            outline: 2px dashed #909090;\n        `,\n        \"visual-builder__default-cursor--disabled\": css`\n            cursor: none;\n        `,\n        \"visual-builder__draft-field\": css`\n            outline: 2px dashed #eb5646;\n        `,\n        \"visual-builder__variant-field\": css`\n            outline: 2px solid #bd59fa;\n        `,\n        \"visual-builder__pseudo-editable-element\": css`\n            z-index: 99999 !important;\n        `,\n        // cslp error styles\n        \"visual-builder__button-error\": css`\n            background-color: #ffeeeb;\n            padding: 0px !important;\n            &:hover {\n                background-color: #ffeeeb;\n            }\n        `,\n        \"visual-builder__focused-toolbar__error\": css`\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            column-gap: 3px;\n            padding: 4px 8px;\n        `,\n        \"visual-builder__focused-toolbar__error-text\": css`\n            font-weight: 400;\n            font-size: 12px;\n            line-height: 18px;\n            color: #a31b00;\n        `,\n        \"visual-builder__focused-toolbar__error-toolip\": css`\n            position: absolute;\n            width: 400px;\n            background-color: red;\n            left: 0;\n            top: -7px;\n            transform: translateY(-100%);\n            background-color: #767676;\n            border-radius: 4px;\n            box-shadow:\n                0px 1px 10px 0px #6c5ce733,\n                0px 5px 5px 0px #0000001f,\n                0px 2px 4px 0px #00000024;\n            padding: 12px;\n            text-align: left;\n\n            &:before {\n                content: \"\";\n                position: absolute;\n                bottom: -3px;\n                left: 4%;\n                transform: translateX(-50%) rotate(45deg);\n                width: 10px;\n                height: 10px;\n                background-color: #767676;\n            }\n\n            > p {\n                margin: 0;\n                color: #ffffff;\n                font-size: 14px;\n                font-weight: 600;\n                line-height: 21px;\n                margin-bottom: 4px;\n            }\n\n            > span {\n                color: #ffffff;\n                font-size: 12px;\n                font-weight: 400;\n                line-height: 18px;\n            }\n        `,\n        \"variant-field-revert-component\": css`\n            position: relative;\n            display: inline-block;\n            z-index: 2147483647 !important;\n        `,\n        \"variant-field-revert-component__dropdown-content\": css`\n            position: absolute;\n            top: -12px;\n            left: -4px;\n            background-color: #ffffff;\n            min-width: max-content;\n            box-shadow:\n                0 4px 15px 0 rgba(108, 92, 231, 0.2),\n                0 3px 14px 3px rgba(0, 0, 0, 0.12),\n                0 8px 10px 1px rgba(0, 0, 0, 0.14);\n            z-index: 2147483647 !important;\n            margin-top: 4px;\n            padding: 4px 0px;\n            border-radius: 2px;\n        `,\n        \"variant-field-revert-component__dropdown-content__list-item\": css`\n            color: black;\n            font-weight: 400;\n            padding: 9.6px 16px;\n            text-decoration: none;\n            display: block;\n            font-size: 0.75rem;\n            height: 32px;\n            line-height: 2rem;\n            display: flex;\n            align-items: center;\n            z-index: 2147483647 !important;\n            cursor: pointer;\n            &:hover {\n                background-color: #f1f1f1;\n            }\n            &:hover > span {\n                color: #5d50be;\n            }\n            & > span {\n                margin-top: 4px;\n                margin-bottom: 4px;\n            }\n        `,\n        \"visual-builder__no-cursor-style\": css`\n            cursor: none !important;\n        `,\n        \"visual-builder__field-toolbar-container\": css`\n            display: flex;\n            flex-direction: column-reverse;\n            z-index: 2147483647 !important;\n        `,\n        \"visual-builder__variant-button\": css`\n            display: flex;\n            min-width: 3rem !important;\n            gap: 0.25rem;\n            align-items: center;\n            justify-content: center;\n            display: flex;\n            & svg path {\n                fill: #475161;\n            }\n        `,\n    };\n}\n\nexport const VisualBuilderGlobalStyles = `\n       @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n       [data-cslp] [contenteditable=\"true\"] {\n            outline: none;\n        }\n\n        @keyframes visual-builder__spinner {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n`;\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/visualBuilder.style.d.cts

@@ -6,7 +6,12 @@ declare function visualBuilderStyles(): {
     "visual-builder__overlay": string;
     "visual-builder__add-button": string;
     "visual-builder__add-button-label": string;
+    "visual-builder__add-button--loading": string;
     "visual-builder__start-editing-btn": string;
+    "visual-builder__start-editing-btn__bottom-right": string;
+    "visual-builder__start-editing-btn__bottom-left": string;
+    "visual-builder__start-editing-btn__top-right": string;
+    "visual-builder__start-editing-btn__top-left": string;
     "visual-builder__cursor-icon": string;
     "visual-builder__cursor-pointer": string;
     "visual-builder__cursor-icon--loader": string;
@@ -54,6 +59,6 @@ declare function visualBuilderStyles(): {
     "visual-builder__field-toolbar-container": string;
     "visual-builder__variant-button": string;
 };
-declare const VisualBuilderGlobalStyles = "\n       @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n       [data-cslp] [contenteditable=\"true\"] {\n            outline: none;\n        }\n        \n        @keyframes visual-builder__spinner {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n";
+declare const VisualBuilderGlobalStyles = "\n       @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n       [data-cslp] [contenteditable=\"true\"] {\n            outline: none;\n        }\n\n        @keyframes visual-builder__spinner {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n";
 
 export { VisualBuilderGlobalStyles, visualBuilderStyles };

package/dist/modern/visualBuilder/visualBuilder.style.d.ts

@@ -6,7 +6,12 @@ declare function visualBuilderStyles(): {
     "visual-builder__overlay": string;
     "visual-builder__add-button": string;
     "visual-builder__add-button-label": string;
+    "visual-builder__add-button--loading": string;
     "visual-builder__start-editing-btn": string;
+    "visual-builder__start-editing-btn__bottom-right": string;
+    "visual-builder__start-editing-btn__bottom-left": string;
+    "visual-builder__start-editing-btn__top-right": string;
+    "visual-builder__start-editing-btn__top-left": string;
     "visual-builder__cursor-icon": string;
     "visual-builder__cursor-pointer": string;
     "visual-builder__cursor-icon--loader": string;
@@ -54,6 +59,6 @@ declare function visualBuilderStyles(): {
     "visual-builder__field-toolbar-container": string;
     "visual-builder__variant-button": string;
 };
-declare const VisualBuilderGlobalStyles = "\n       @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n       [data-cslp] [contenteditable=\"true\"] {\n            outline: none;\n        }\n        \n        @keyframes visual-builder__spinner {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n";
+declare const VisualBuilderGlobalStyles = "\n       @import url(\"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\");\n\n       [data-cslp] [contenteditable=\"true\"] {\n            outline: none;\n        }\n\n        @keyframes visual-builder__spinner {\n            0% {\n                transform: rotate(0deg);\n            }\n            100% {\n                transform: rotate(360deg);\n            }\n        }\n\n";
 
 export { VisualBuilderGlobalStyles, visualBuilderStyles };

package/dist/modern/visualBuilder/visualBuilder.style.js

@@ -112,7 +112,7 @@ function visualBuilderStyles() {
             color: #6c5ce7;
             overflow: hidden;
 
-            z-index: 2147483647 !important;
+            z-index: 2147483646 !important;
 
             display: grid;
             grid-template-columns: min-content 0fr;
@@ -149,12 +149,17 @@ function visualBuilderStyles() {
             overflow: hidden;
             text-overflow: ellipsis;
         `,
+    "visual-builder__add-button--loading": css`
+            cursor: wait;
+            /* we have not-allowed on disabled, so we need this */
+            &:disabled {
+                cursor: wait;
+            }
+        `,
     "visual-builder__start-editing-btn": css`
             z-index: 1000;
             text-decoration: none;
             position: fixed;
-            bottom: 30px;
-            right: 30px;
             box-shadow:
                 0px 4px 15px 0px rgba(108, 92, 231, 0.2),
                 0px 3px 14px 3px rgba(0, 0, 0, 0.12),
@@ -202,6 +207,22 @@ function visualBuilderStyles() {
                 text-transform: capitalize;
             }
         `,
+    "visual-builder__start-editing-btn__bottom-right": css`
+            bottom: 30px;
+            right: 30px;
+        `,
+    "visual-builder__start-editing-btn__bottom-left": css`
+            bottom: 30px;
+            left: 30px;
+        `,
+    "visual-builder__start-editing-btn__top-right": css`
+            top: 30px;
+            right: 30px;
+        `,
+    "visual-builder__start-editing-btn__top-left": css`
+            top: 30px;
+            left: 30px;
+        `,
     "visual-builder__cursor-icon": css`
             height: 40px;
             width: 40px;
@@ -335,6 +356,7 @@ function visualBuilderStyles() {
             }
         `,
     "visual-builder__button--comment-loader": css`
+            cursor: wait !important;
             svg.loader {
                 height: 16px;
                 width: 16px;
@@ -493,7 +515,7 @@ function visualBuilderStyles() {
             position: absolute;
             outline: 2px dashed #6c5ce7;
             transition: var(--outline-transition);
-            z-index: 2147483647 !important;
+            z-index: 2147483646 !important;
         `,
     "visual-builder__hover-outline--hidden": css`
             visibility: hidden;
@@ -651,7 +673,7 @@ var VisualBuilderGlobalStyles = `
        [data-cslp] [contenteditable="true"] {
             outline: none;
         }
-        
+
         @keyframes visual-builder__spinner {
             0% {
                 transform: rotate(0deg);