@contentstack/live-preview-utils 3.1.0 → 3.1.2

package/dist/modern/visualBuilder/listeners/mouseHover.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nexport interface HandleMouseHoverParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\"\n    > {\n    customCursor: HTMLDivElement | null;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n    if (customCursor) {\n        generateCustomCursor({\n            fieldType: \"empty\",\n            customCursor: customCursor,\n        });\n    }\n}\n\nfunction handleCursorPosition(\n    event: MouseEvent,\n    customCursor: HTMLDivElement | null\n): void {\n    if (customCursor) {\n        const mouseY = event.clientY;\n        const mouseX = event.clientX;\n\n        customCursor.style.left = `${mouseX}px`;\n        customCursor.style.top = `${mouseY}px`;\n    }\n}\n\nfunction addOutline(editableElement: Element, isFieldDisabled?: boolean): void {\n    if (!editableElement) return;\n\n    addHoverOutline(editableElement as HTMLElement, isFieldDisabled);\n}\n\nfunction hideDefaultCursor(): void {\n    if (\n        document?.body &&\n        !document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.add(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nfunction showDefaultCursor(): void {\n    if (\n        document?.body &&\n        document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.remove(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nexport function hideHoverOutline(\n    visualBuilderContainer: HTMLDivElement | null\n): void {\n    if (!visualBuilderContainer) {\n        return;\n    }\n    const hoverOutline = visualBuilderContainer.querySelector(\n        \".visual-builder__hover-outline\"\n    );\n    if (!hoverOutline) {\n        return;\n    }\n    hoverOutline.classList.add(\n        visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n    );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n    showDefaultCursor();\n    customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n    hideDefaultCursor();\n    customCursor?.classList.add(\"visible\");\n}\n\nfunction isOverlay(target: HTMLElement): boolean {\n    return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n    if (target.hasAttribute(\"contenteditable\"))\n        return target.getAttribute(\"contenteditable\") === \"true\";\n    return false;\n}\n\nasync function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {\n    throttle(async (params: HandleMouseHoverParams) => {\n        const eventDetails = getCsDataOfElement(params.event);\n        const eventTarget = params.event.target as HTMLElement | null;\n        if (!eventDetails) {\n            if (\n                eventTarget &&\n                (isOverlay(eventTarget) || isContentEditable(eventTarget))\n            ) {\n                hideCustomCursor(params.customCursor);\n                return;\n            }\n            resetCustomCursor(params.customCursor);\n            removeAddInstanceButtons({\n                eventTarget: params.event.target,\n                visualBuilderContainer: params.visualBuilderContainer,\n                overlayWrapper: params.overlayWrapper,\n            });\n            handleCursorPosition(params.event, params.customCursor);\n            return;\n        }\n\n        const { editableElement, fieldMetadata } = eventDetails;\n        const { content_type_uid, fieldPath } = fieldMetadata;\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM &&\n            VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n                editableElement\n            )\n        ) {\n            hideCustomCursor(params.customCursor);\n            return;\n        }\n\n        if (params.customCursor) {\n          const elementUnderCursor = document.elementFromPoint(params.event.clientX, params.event.clientY);\n            if(elementUnderCursor){\n              if(elementUnderCursor.nodeName === \"A\" || elementUnderCursor.nodeName === \"BUTTON\"){\n                elementUnderCursor.classList.add(\n                  visualBuilderStyles()['visual-builder__no-cursor-style']\n                )\n              }\n            }\n\n            if (\n                VisualBuilder.VisualBuilderGlobalState.value\n                    .previousHoveredTargetDOM !== editableElement\n            ) {\n                resetCustomCursor(params.customCursor);\n                removeAddInstanceButtons({\n                    eventTarget: params.event.target,\n                    visualBuilderContainer: params.visualBuilderContainer,\n                    overlayWrapper: params.overlayWrapper,\n                });\n            }\n\n            if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n                generateCustomCursor({\n                    fieldType: \"loading\",\n                    customCursor: params.customCursor,\n                });\n            }\n\n            /**\n             * We called it seperately inside the code block to ensure that\n             * the code will not wait for the promise to resolve.\n             * If we get a cache miss, we will send a message to the iframe\n             * without blocking the code.\n             */\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    if (!params.customCursor) return;\n                    const { isDisabled: fieldDisabled } = isFieldDisabled(\n                        fieldSchema,\n                        eventDetails\n                    );\n                    const fieldType = getFieldType(fieldSchema);\n                    generateCustomCursor({\n                        fieldType,\n                        customCursor: params.customCursor,\n                        fieldDisabled,\n                    });\n                }\n            );\n\n            handleCursorPosition(params.event, params.customCursor);\n            showCustomCursor(params.customCursor);\n        }\n\n        if (\n            !editableElement.classList.contains(\n                \"visual-builder__empty-block-parent\"\n            ) &&\n            !editableElement.classList.contains(\"visual-builder__empty-block\")\n        ) {\n            addOutline(editableElement);\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    const { isDisabled: fieldDisabled, reason } =\n                        isFieldDisabled(fieldSchema, eventDetails);\n                    addOutline(editableElement, fieldDisabled);\n                }\n            );\n        }\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousHoveredTargetDOM === editableElement\n        ) {\n            return;\n        }\n\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n            editableElement;\n    }, 10)(params);\n}\n\nexport default handleMouseHover;\n"],"mappings":"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","names":["isFieldDisabled","params"]}
+{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\n\nexport interface HandleMouseHoverParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\"\n    > {\n    customCursor: HTMLDivElement | null;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n    if (customCursor) {\n        generateCustomCursor({\n            fieldType: \"empty\",\n            customCursor: customCursor,\n        });\n    }\n}\n\nfunction handleCursorPosition(\n    event: MouseEvent,\n    customCursor: HTMLDivElement | null\n): void {\n    if (customCursor) {\n        const mouseY = event.clientY;\n        const mouseX = event.clientX;\n\n        customCursor.style.left = `${mouseX}px`;\n        customCursor.style.top = `${mouseY}px`;\n    }\n}\n\nfunction addOutline(editableElement: Element, isFieldDisabled?: boolean): void {\n    if (!editableElement) return;\n\n    addHoverOutline(editableElement as HTMLElement, isFieldDisabled);\n}\n\nfunction hideDefaultCursor(): void {\n    if (\n        document?.body &&\n        !document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.add(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nfunction showDefaultCursor(): void {\n    if (\n        document?.body &&\n        document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.remove(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nexport function hideHoverOutline(\n    visualBuilderContainer: HTMLDivElement | null\n): void {\n    if (!visualBuilderContainer) {\n        return;\n    }\n    const hoverOutline = visualBuilderContainer.querySelector(\n        \".visual-builder__hover-outline\"\n    );\n    if (!hoverOutline) {\n        return;\n    }\n    hoverOutline.classList.add(\n        visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n    );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n    showDefaultCursor();\n    customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n    hideDefaultCursor();\n    customCursor?.classList.add(\"visible\");\n}\n\nfunction isOverlay(target: HTMLElement): boolean {\n    return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n    if (target.hasAttribute(\"contenteditable\"))\n        return target.getAttribute(\"contenteditable\") === \"true\";\n    return false;\n}\n\nasync function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {\n    throttle(async (params: HandleMouseHoverParams) => {\n        const eventDetails = getCsDataOfElement(params.event);\n        const eventTarget = params.event.target as HTMLElement | null;\n        if (!eventDetails) {\n            if (\n                eventTarget &&\n                (isOverlay(eventTarget) || isContentEditable(eventTarget))\n            ) {\n                hideCustomCursor(params.customCursor);\n                return;\n            }\n            resetCustomCursor(params.customCursor);\n            removeAddInstanceButtons({\n                eventTarget: params.event.target,\n                visualBuilderContainer: params.visualBuilderContainer,\n                overlayWrapper: params.overlayWrapper,\n            });\n            handleCursorPosition(params.event, params.customCursor);\n            return;\n        }\n\n        const { editableElement, fieldMetadata } = eventDetails;\n        const { content_type_uid, fieldPath } = fieldMetadata;\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM &&\n            VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n                editableElement\n            )\n        ) {\n            hideCustomCursor(params.customCursor);\n            return;\n        }\n\n        if (params.customCursor) {\n          const elementUnderCursor = document.elementFromPoint(params.event.clientX, params.event.clientY);\n            if(elementUnderCursor){\n              if(elementUnderCursor.nodeName === \"A\" || elementUnderCursor.nodeName === \"BUTTON\"){\n                elementUnderCursor.classList.add(\n                  visualBuilderStyles()['visual-builder__no-cursor-style']\n                )\n              }\n            }\n\n            if (\n                VisualBuilder.VisualBuilderGlobalState.value\n                    .previousHoveredTargetDOM !== editableElement\n            ) {\n                resetCustomCursor(params.customCursor);\n                removeAddInstanceButtons({\n                    eventTarget: params.event.target,\n                    visualBuilderContainer: params.visualBuilderContainer,\n                    overlayWrapper: params.overlayWrapper,\n                });\n            }\n\n            if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n                generateCustomCursor({\n                    fieldType: \"loading\",\n                    customCursor: params.customCursor,\n                });\n            }\n\n            /**\n             * We called it seperately inside the code block to ensure that\n             * the code will not wait for the promise to resolve.\n             * If we get a cache miss, we will send a message to the iframe\n             * without blocking the code.\n             */\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    if (!params.customCursor) return;\n                    const { isDisabled: fieldDisabled } = isFieldDisabled(\n                        fieldSchema,\n                        eventDetails\n                    );\n                    const fieldType = getFieldType(fieldSchema);\n                    generateCustomCursor({\n                        fieldType,\n                        customCursor: params.customCursor,\n                        fieldDisabled,\n                    });\n                }\n            );\n\n            handleCursorPosition(params.event, params.customCursor);\n            showCustomCursor(params.customCursor);\n        }\n\n        if (\n            !editableElement.classList.contains(\n                VB_EmptyBlockParentClass\n            ) &&\n            !editableElement.classList.contains(\"visual-builder__empty-block\")\n        ) {\n            addOutline(editableElement);\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    const { isDisabled: fieldDisabled, reason } =\n                        isFieldDisabled(fieldSchema, eventDetails);\n                    addOutline(editableElement, fieldDisabled);\n                }\n            );\n        }\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousHoveredTargetDOM === editableElement\n        ) {\n            return;\n        }\n\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n            editableElement;\n    }, 10)(params);\n}\n\nexport default handleMouseHover;\n"],"mappings":"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","names":["import__","isFieldDisabled","params"]}

package/dist/modern/visualBuilder/listeners/mouseHover.js

@@ -11,6 +11,7 @@ import { getFieldType } from "../utils/getFieldType.js";
 import { VisualBuilder } from "../index.js";
 import { addHoverOutline } from "../generators/generateHoverOutline.js";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { VB_EmptyBlockParentClass } from "../../index.js";
 function resetCustomCursor(customCursor) {
   if (customCursor) {
     generateCustomCursor({
@@ -146,7 +147,7 @@ async function handleMouseHover(params) {
       showCustomCursor(params2.customCursor);
     }
     if (!editableElement.classList.contains(
-      "visual-builder__empty-block-parent"
+      VB_EmptyBlockParentClass
     ) && !editableElement.classList.contains("visual-builder__empty-block")) {
       addOutline(editableElement);
       FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(

package/dist/modern/visualBuilder/listeners/mouseHover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nexport interface HandleMouseHoverParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\"\n    > {\n    customCursor: HTMLDivElement | null;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n    if (customCursor) {\n        generateCustomCursor({\n            fieldType: \"empty\",\n            customCursor: customCursor,\n        });\n    }\n}\n\nfunction handleCursorPosition(\n    event: MouseEvent,\n    customCursor: HTMLDivElement | null\n): void {\n    if (customCursor) {\n        const mouseY = event.clientY;\n        const mouseX = event.clientX;\n\n        customCursor.style.left = `${mouseX}px`;\n        customCursor.style.top = `${mouseY}px`;\n    }\n}\n\nfunction addOutline(editableElement: Element, isFieldDisabled?: boolean): void {\n    if (!editableElement) return;\n\n    addHoverOutline(editableElement as HTMLElement, isFieldDisabled);\n}\n\nfunction hideDefaultCursor(): void {\n    if (\n        document?.body &&\n        !document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.add(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nfunction showDefaultCursor(): void {\n    if (\n        document?.body &&\n        document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.remove(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nexport function hideHoverOutline(\n    visualBuilderContainer: HTMLDivElement | null\n): void {\n    if (!visualBuilderContainer) {\n        return;\n    }\n    const hoverOutline = visualBuilderContainer.querySelector(\n        \".visual-builder__hover-outline\"\n    );\n    if (!hoverOutline) {\n        return;\n    }\n    hoverOutline.classList.add(\n        visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n    );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n    showDefaultCursor();\n    customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n    hideDefaultCursor();\n    customCursor?.classList.add(\"visible\");\n}\n\nfunction isOverlay(target: HTMLElement): boolean {\n    return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n    if (target.hasAttribute(\"contenteditable\"))\n        return target.getAttribute(\"contenteditable\") === \"true\";\n    return false;\n}\n\nasync function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {\n    throttle(async (params: HandleMouseHoverParams) => {\n        const eventDetails = getCsDataOfElement(params.event);\n        const eventTarget = params.event.target as HTMLElement | null;\n        if (!eventDetails) {\n            if (\n                eventTarget &&\n                (isOverlay(eventTarget) || isContentEditable(eventTarget))\n            ) {\n                hideCustomCursor(params.customCursor);\n                return;\n            }\n            resetCustomCursor(params.customCursor);\n            removeAddInstanceButtons({\n                eventTarget: params.event.target,\n                visualBuilderContainer: params.visualBuilderContainer,\n                overlayWrapper: params.overlayWrapper,\n            });\n            handleCursorPosition(params.event, params.customCursor);\n            return;\n        }\n\n        const { editableElement, fieldMetadata } = eventDetails;\n        const { content_type_uid, fieldPath } = fieldMetadata;\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM &&\n            VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n                editableElement\n            )\n        ) {\n            hideCustomCursor(params.customCursor);\n            return;\n        }\n\n        if (params.customCursor) {\n          const elementUnderCursor = document.elementFromPoint(params.event.clientX, params.event.clientY);\n            if(elementUnderCursor){\n              if(elementUnderCursor.nodeName === \"A\" || elementUnderCursor.nodeName === \"BUTTON\"){\n                elementUnderCursor.classList.add(\n                  visualBuilderStyles()['visual-builder__no-cursor-style']\n                )\n              }\n            }\n\n            if (\n                VisualBuilder.VisualBuilderGlobalState.value\n                    .previousHoveredTargetDOM !== editableElement\n            ) {\n                resetCustomCursor(params.customCursor);\n                removeAddInstanceButtons({\n                    eventTarget: params.event.target,\n                    visualBuilderContainer: params.visualBuilderContainer,\n                    overlayWrapper: params.overlayWrapper,\n                });\n            }\n\n            if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n                generateCustomCursor({\n                    fieldType: \"loading\",\n                    customCursor: params.customCursor,\n                });\n            }\n\n            /**\n             * We called it seperately inside the code block to ensure that\n             * the code will not wait for the promise to resolve.\n             * If we get a cache miss, we will send a message to the iframe\n             * without blocking the code.\n             */\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    if (!params.customCursor) return;\n                    const { isDisabled: fieldDisabled } = isFieldDisabled(\n                        fieldSchema,\n                        eventDetails\n                    );\n                    const fieldType = getFieldType(fieldSchema);\n                    generateCustomCursor({\n                        fieldType,\n                        customCursor: params.customCursor,\n                        fieldDisabled,\n                    });\n                }\n            );\n\n            handleCursorPosition(params.event, params.customCursor);\n            showCustomCursor(params.customCursor);\n        }\n\n        if (\n            !editableElement.classList.contains(\n                \"visual-builder__empty-block-parent\"\n            ) &&\n            !editableElement.classList.contains(\"visual-builder__empty-block\")\n        ) {\n            addOutline(editableElement);\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    const { isDisabled: fieldDisabled, reason } =\n                        isFieldDisabled(fieldSchema, eventDetails);\n                    addOutline(editableElement, fieldDisabled);\n                }\n            );\n        }\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousHoveredTargetDOM === editableElement\n        ) {\n            return;\n        }\n\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n            editableElement;\n    }, 10)(params);\n}\n\nexport default handleMouseHover;\n"],"mappings":"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","names":["isFieldDisabled","params"]}
+{"version":3,"sources":["../../../../src/visualBuilder/listeners/mouseHover.ts"],"sourcesContent":["import { throttle } from \"lodash-es\";\nimport { getCsDataOfElement } from \"../utils/getCsDataOfElement\";\nimport { removeAddInstanceButtons } from \"../utils/multipleElementAddButton\";\nimport { generateCustomCursor } from \"../generators/generateCustomCursor\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { getFieldType } from \"../utils/getFieldType\";\n\nimport EventListenerHandlerParams from \"./types\";\nimport { VisualBuilder } from \"..\";\nimport { addHoverOutline } from \"../generators/generateHoverOutline\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { VB_EmptyBlockParentClass } from \"../..\";\n\nexport interface HandleMouseHoverParams\n    extends Pick<\n        EventListenerHandlerParams,\n        \"event\" | \"overlayWrapper\" | \"visualBuilderContainer\"\n    > {\n    customCursor: HTMLDivElement | null;\n}\n\nfunction resetCustomCursor(customCursor: HTMLDivElement | null): void {\n    if (customCursor) {\n        generateCustomCursor({\n            fieldType: \"empty\",\n            customCursor: customCursor,\n        });\n    }\n}\n\nfunction handleCursorPosition(\n    event: MouseEvent,\n    customCursor: HTMLDivElement | null\n): void {\n    if (customCursor) {\n        const mouseY = event.clientY;\n        const mouseX = event.clientX;\n\n        customCursor.style.left = `${mouseX}px`;\n        customCursor.style.top = `${mouseY}px`;\n    }\n}\n\nfunction addOutline(editableElement: Element, isFieldDisabled?: boolean): void {\n    if (!editableElement) return;\n\n    addHoverOutline(editableElement as HTMLElement, isFieldDisabled);\n}\n\nfunction hideDefaultCursor(): void {\n    if (\n        document?.body &&\n        !document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.add(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nfunction showDefaultCursor(): void {\n    if (\n        document?.body &&\n        document.body.classList.contains(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        )\n    )\n        document.body.classList.remove(\n            visualBuilderStyles()[\"visual-builder__default-cursor--disabled\"]\n        );\n}\n\nexport function hideHoverOutline(\n    visualBuilderContainer: HTMLDivElement | null\n): void {\n    if (!visualBuilderContainer) {\n        return;\n    }\n    const hoverOutline = visualBuilderContainer.querySelector(\n        \".visual-builder__hover-outline\"\n    );\n    if (!hoverOutline) {\n        return;\n    }\n    hoverOutline.classList.add(\n        visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n    );\n}\n\nexport function hideCustomCursor(customCursor: HTMLDivElement | null): void {\n    showDefaultCursor();\n    customCursor?.classList.remove(\"visible\");\n}\n\nexport function showCustomCursor(customCursor: HTMLDivElement | null): void {\n    hideDefaultCursor();\n    customCursor?.classList.add(\"visible\");\n}\n\nfunction isOverlay(target: HTMLElement): boolean {\n    return target.classList.contains(\"visual-builder__overlay\");\n}\n\nfunction isContentEditable(target: HTMLElement): boolean {\n    if (target.hasAttribute(\"contenteditable\"))\n        return target.getAttribute(\"contenteditable\") === \"true\";\n    return false;\n}\n\nasync function handleMouseHover(params: HandleMouseHoverParams): Promise<void> {\n    throttle(async (params: HandleMouseHoverParams) => {\n        const eventDetails = getCsDataOfElement(params.event);\n        const eventTarget = params.event.target as HTMLElement | null;\n        if (!eventDetails) {\n            if (\n                eventTarget &&\n                (isOverlay(eventTarget) || isContentEditable(eventTarget))\n            ) {\n                hideCustomCursor(params.customCursor);\n                return;\n            }\n            resetCustomCursor(params.customCursor);\n            removeAddInstanceButtons({\n                eventTarget: params.event.target,\n                visualBuilderContainer: params.visualBuilderContainer,\n                overlayWrapper: params.overlayWrapper,\n            });\n            handleCursorPosition(params.event, params.customCursor);\n            return;\n        }\n\n        const { editableElement, fieldMetadata } = eventDetails;\n        const { content_type_uid, fieldPath } = fieldMetadata;\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousSelectedEditableDOM &&\n            VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM.isSameNode(\n                editableElement\n            )\n        ) {\n            hideCustomCursor(params.customCursor);\n            return;\n        }\n\n        if (params.customCursor) {\n          const elementUnderCursor = document.elementFromPoint(params.event.clientX, params.event.clientY);\n            if(elementUnderCursor){\n              if(elementUnderCursor.nodeName === \"A\" || elementUnderCursor.nodeName === \"BUTTON\"){\n                elementUnderCursor.classList.add(\n                  visualBuilderStyles()['visual-builder__no-cursor-style']\n                )\n              }\n            }\n\n            if (\n                VisualBuilder.VisualBuilderGlobalState.value\n                    .previousHoveredTargetDOM !== editableElement\n            ) {\n                resetCustomCursor(params.customCursor);\n                removeAddInstanceButtons({\n                    eventTarget: params.event.target,\n                    visualBuilderContainer: params.visualBuilderContainer,\n                    overlayWrapper: params.overlayWrapper,\n                });\n            }\n\n            if (!FieldSchemaMap.hasFieldSchema(content_type_uid, fieldPath)) {\n                generateCustomCursor({\n                    fieldType: \"loading\",\n                    customCursor: params.customCursor,\n                });\n            }\n\n            /**\n             * We called it seperately inside the code block to ensure that\n             * the code will not wait for the promise to resolve.\n             * If we get a cache miss, we will send a message to the iframe\n             * without blocking the code.\n             */\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    if (!params.customCursor) return;\n                    const { isDisabled: fieldDisabled } = isFieldDisabled(\n                        fieldSchema,\n                        eventDetails\n                    );\n                    const fieldType = getFieldType(fieldSchema);\n                    generateCustomCursor({\n                        fieldType,\n                        customCursor: params.customCursor,\n                        fieldDisabled,\n                    });\n                }\n            );\n\n            handleCursorPosition(params.event, params.customCursor);\n            showCustomCursor(params.customCursor);\n        }\n\n        if (\n            !editableElement.classList.contains(\n                VB_EmptyBlockParentClass\n            ) &&\n            !editableElement.classList.contains(\"visual-builder__empty-block\")\n        ) {\n            addOutline(editableElement);\n            FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath).then(\n                (fieldSchema) => {\n                    if(!fieldSchema) return;\n                    const { isDisabled: fieldDisabled, reason } =\n                        isFieldDisabled(fieldSchema, eventDetails);\n                    addOutline(editableElement, fieldDisabled);\n                }\n            );\n        }\n\n        if (\n            VisualBuilder.VisualBuilderGlobalState.value\n                .previousHoveredTargetDOM === editableElement\n        ) {\n            return;\n        }\n\n        VisualBuilder.VisualBuilderGlobalState.value.previousHoveredTargetDOM =\n            editableElement;\n    }, 10)(params);\n}\n\nexport default handleMouseHover;\n"],"mappings":"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","names":["isFieldDisabled","params"]}

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

@@ -34,6 +34,7 @@ __export(getChildrenDirection_exports, {
 });
 module.exports = __toCommonJS(getChildrenDirection_exports);
 var import_getChildElements = __toESM(require("./getChildElements.cjs"), 1);
+var validPositions = ["vertical", "horizontal", "none"];
 function getChildrenDirection(editableElement, parentCslpValue) {
   if (!editableElement) {
     return "none";
@@ -44,6 +45,13 @@ function getChildrenDirection(editableElement, parentCslpValue) {
   if (!parentElement) {
     return "none";
   }
+  const directionFromParentElement = parentElement.getAttribute("data-add-direction");
+  const isValidParentDirection = validPositions.includes(
+    directionFromParentElement
+  );
+  if (directionFromParentElement && isValidParentDirection) {
+    return directionFromParentElement;
+  }
   const [firstChildElement, secondChildElement, removeClone] = (0, import_getChildElements.default)(parentElement, parentCslpValue);
   if (!firstChildElement) return "none";
   const firstChildBounds = firstChildElement.getBoundingClientRect();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): \"none\" | \"horizontal\" | \"vertical\" {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6B;AAEd,SAAR,qBACH,iBACA,iBACkC;AAClC,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,QACrD,wBAAAA,SAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":["getChildElements"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\n\nconst validPositions = [\"vertical\", \"horizontal\", \"none\"] as const;\ntype ValidPositions = typeof validPositions[number];\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): ValidPositions {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const directionFromParentElement =\n        parentElement.getAttribute(\"data-add-direction\");\n\n    const isValidParentDirection = validPositions.includes(\n        directionFromParentElement as ValidPositions\n    );\n\n\n    if (directionFromParentElement && isValidParentDirection) {\n        return directionFromParentElement as ValidPositions;\n    }\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA6B;AAG7B,IAAM,iBAAiB,CAAC,YAAY,cAAc,MAAM;AAGzC,SAAR,qBACH,iBACA,iBACc;AACd,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,6BACF,cAAc,aAAa,oBAAoB;AAEnD,QAAM,yBAAyB,eAAe;AAAA,IAC1C;AAAA,EACJ;AAGA,MAAI,8BAA8B,wBAAwB;AACtD,WAAO;AAAA,EACX;AACA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,QACrD,wBAAAA,SAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":["getChildElements"]}

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

@@ -1,3 +1,5 @@
-declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): "none" | "horizontal" | "vertical";
+declare const validPositions: readonly ["vertical", "horizontal", "none"];
+type ValidPositions = typeof validPositions[number];
+declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): ValidPositions;
 
 export { getChildrenDirection as default };

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

@@ -1,3 +1,5 @@
-declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): "none" | "horizontal" | "vertical";
+declare const validPositions: readonly ["vertical", "horizontal", "none"];
+type ValidPositions = typeof validPositions[number];
+declare function getChildrenDirection(editableElement: Element, parentCslpValue: string): ValidPositions;
 
 export { getChildrenDirection as default };

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

@@ -2,6 +2,7 @@ import "../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/utils/getChildrenDirection.ts
 import getChildElements from "./getChildElements.js";
+var validPositions = ["vertical", "horizontal", "none"];
 function getChildrenDirection(editableElement, parentCslpValue) {
   if (!editableElement) {
     return "none";
@@ -12,6 +13,13 @@ function getChildrenDirection(editableElement, parentCslpValue) {
   if (!parentElement) {
     return "none";
   }
+  const directionFromParentElement = parentElement.getAttribute("data-add-direction");
+  const isValidParentDirection = validPositions.includes(
+    directionFromParentElement
+  );
+  if (directionFromParentElement && isValidParentDirection) {
+    return directionFromParentElement;
+  }
   const [firstChildElement, secondChildElement, removeClone] = getChildElements(parentElement, parentCslpValue);
   if (!firstChildElement) return "none";
   const firstChildBounds = firstChildElement.getBoundingClientRect();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): \"none\" | \"horizontal\" | \"vertical\" {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;AAAA,OAAO,sBAAsB;AAEd,SAAR,qBACH,iBACA,iBACkC;AAClC,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,IACrD,iBAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/getChildrenDirection.ts"],"sourcesContent":["import getChildElements from \"./getChildElements\";\n\n\nconst validPositions = [\"vertical\", \"horizontal\", \"none\"] as const;\ntype ValidPositions = typeof validPositions[number];\n\nexport default function getChildrenDirection(\n    editableElement: Element,\n    parentCslpValue: string\n): ValidPositions {\n    if (!editableElement) {\n        return \"none\";\n    }\n\n    const parentElement = editableElement.closest(\n        `[data-cslp=\"${parentCslpValue}\"]`\n    );\n\n    if (!parentElement) {\n        return \"none\";\n    }\n\n    const directionFromParentElement =\n        parentElement.getAttribute(\"data-add-direction\");\n\n    const isValidParentDirection = validPositions.includes(\n        directionFromParentElement as ValidPositions\n    );\n\n\n    if (directionFromParentElement && isValidParentDirection) {\n        return directionFromParentElement as ValidPositions;\n    }\n    const [firstChildElement, secondChildElement, removeClone] =\n        getChildElements(parentElement, parentCslpValue);\n\n    if (!firstChildElement) return \"none\";\n\n    // get horizontal and vertical position differences\n    const firstChildBounds = firstChildElement.getBoundingClientRect();\n    const secondChildBounds = secondChildElement.getBoundingClientRect();\n\n    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);\n    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);\n\n    const dir = deltaX > deltaY ? \"horizontal\" : \"vertical\";\n\n    // remove the clone that was created in case there was only one child\n    removeClone();\n\n    return dir;\n}\n"],"mappings":";;;AAAA,OAAO,sBAAsB;AAG7B,IAAM,iBAAiB,CAAC,YAAY,cAAc,MAAM;AAGzC,SAAR,qBACH,iBACA,iBACc;AACd,MAAI,CAAC,iBAAiB;AAClB,WAAO;AAAA,EACX;AAEA,QAAM,gBAAgB,gBAAgB;AAAA,IAClC,eAAe,eAAe;AAAA,EAClC;AAEA,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AAEA,QAAM,6BACF,cAAc,aAAa,oBAAoB;AAEnD,QAAM,yBAAyB,eAAe;AAAA,IAC1C;AAAA,EACJ;AAGA,MAAI,8BAA8B,wBAAwB;AACtD,WAAO;AAAA,EACX;AACA,QAAM,CAAC,mBAAmB,oBAAoB,WAAW,IACrD,iBAAiB,eAAe,eAAe;AAEnD,MAAI,CAAC,kBAAmB,QAAO;AAG/B,QAAM,mBAAmB,kBAAkB,sBAAsB;AACjE,QAAM,oBAAoB,mBAAmB,sBAAsB;AAEnE,QAAM,SAAS,KAAK,IAAI,iBAAiB,OAAO,kBAAkB,IAAI;AACtE,QAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,kBAAkB,GAAG;AAEpE,QAAM,MAAM,SAAS,SAAS,eAAe;AAG7C,cAAY;AAEZ,SAAO;AACX;","names":[]}

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

@@ -231,7 +231,9 @@ function cleanIndividualFieldResidual(elements) {
     focusedToolbar.innerHTML = "";
     const toolbarEvents = [import_postMessage.VisualBuilderPostMessageEvents.DELETE_INSTANCE, import_postMessage.VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID];
     toolbarEvents.forEach((event) => {
-      import_visualBuilderPostMessage.default?.unregisterEvent?.(event);
+      if (import_visualBuilderPostMessage.default?.requestMessageHandlers?.has(event)) {
+        import_visualBuilderPostMessage.default?.unregisterEvent?.(event);
+      }
     });
   }
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType, ISchemaFieldMap } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (isFieldMultiple(fieldSchema)) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n    } \n\n    !disabled && handleInlineEditing();\n\n    /**\n     * Handles inline editing for supported fields.\n     */\n    function handleInlineEditing() {\n\n        if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;\n\n        // Instances of ALLOWED_INLINE_EDITABLE_FIELD will always have index at last\n        const index = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1));\n        const isInstance = Number.isFinite(index);\n\n        // CASE 1: Handle inline editing for multiple field\n        if(isFieldMultiple(fieldSchema)) {\n            let expectedFieldInstanceData = null;\n            if(Array.isArray(expectedFieldData)) {\n                // CASE: Selected element is the multiple field itself.\n                // Inline Editing not allowed on field, only allowed on instance.\n                // (We recieve unreliable `multipleFieldMetadata` in this case)\n                if(!isInstance) {\n                    return;\n                }\n\n                // CASE: Value does not exist for the provided instance's index\n                if(index >= expectedFieldData.length) {\n                    // TODO: What should be the behavior here?\n                }\n                else {\n                    expectedFieldInstanceData = expectedFieldData.at(index);\n                }\n            }\n            // CASE: ContentType's Field changed from single to multiple, while Entry's Field still single.\n            else {\n                expectedFieldInstanceData = expectedFieldData;\n            }\n\n            enableInlineEditing(expectedFieldInstanceData);     \n        }\n        // CASE 2: Handle inline editing for a single field\n        else {\n            let expectedFieldInstanceData = null;\n            // CASE: ContentType's Field changed from multiple to single, while Entry's Field still multiple.\n            if(isInstance) {\n                if(index !== 0) {\n                    // TODO: Handle this with UX\n                    // Let user know, CSLP is invalid due to change in Content Type\n                    return;\n                }\n                expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;\n            }\n            enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);\n        }\n\n        function enableInlineEditing(expectedFieldData: any) {\n\n            let actualEditableField = editableElement as HTMLElement;\n\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n                actualEditableField?.innerText;\n\n            const elementComputedDisplay =\n                window.getComputedStyle(actualEditableField).display;\n\n            let textContent =\n                (editableElement as HTMLElement).innerText ||\n                editableElement.textContent ||\n                \"\";\n\n            if (fieldType === FieldDataType.MULTILINE) {\n                textContent = getMultilinePlaintext(actualEditableField);\n                actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n            }\n            const expectedTextContent = expectedFieldData;\n            if (\n                (expectedTextContent && textContent !== expectedTextContent) ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                \n                // TODO: Testing will be done in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: expectedFieldData }\n                );\n\n                (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n                // set field type attribute to the pseudo editable field\n                // ensures proper keydown handling similar to the actual editable field\n                pseudoEditableField.setAttribute(\n                    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n                    fieldType\n                );\n                visualBuilderContainer.appendChild(pseudoEditableField);\n                actualEditableField = pseudoEditableField;\n\n                if (fieldType === FieldDataType.MULTILINE)\n                    actualEditableField.addEventListener(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\n\n                // we will unobserve this in hideOverlay\n                elements.resizeObserver.observe(pseudoEditableField);\n            } else if (elementComputedDisplay === \"inline\") {\n                // if the editable field is inline\n                const onInlineElementInput = throttle(() => {\n                    const overlayWrapper = visualBuilderContainer.querySelector(\n                        \".visual-builder__overlay__wrapper\"\n                    ) as HTMLDivElement;\n                    const focusedToolbar = visualBuilderContainer.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n                    updateFocussedState({\n                        editableElement: actualEditableField,\n                        visualBuilderContainer,\n                        overlayWrapper,\n                        focusedToolbar,\n                        resizeObserver,\n                    });\n                }, 200);\n                actualEditableField.addEventListener(\n                    \"input\",\n                    onInlineElementInput\n                );\n            }\n\n            actualEditableField.setAttribute(\"contenteditable\", \"true\");\n            actualEditableField.addEventListener(\"input\", handleFieldInput);\n            actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n            // focus on the contenteditable element to start accepting input\n            actualEditableField.focus();\n\n            return;\n        }\n    }\n}\n\nfunction isFieldMultiple(fieldSchema: ISchemaFieldMap): boolean {\n    return fieldSchema &&\n    (fieldSchema.multiple ||\n        (fieldSchema.data_type === \"reference\" &&\n            // @ts-ignore\n            fieldSchema.field_metadata.ref_multiple));\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n        const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID]\n        toolbarEvents.forEach((event) => {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        });\n    }\n}\n\nconst 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":"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","names":["expectedFieldData","visualBuilderPostMessage"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType, ISchemaFieldMap } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (isFieldMultiple(fieldSchema)) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n    } \n\n    !disabled && handleInlineEditing();\n\n    /**\n     * Handles inline editing for supported fields.\n     */\n    function handleInlineEditing() {\n\n        if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;\n\n        // Instances of ALLOWED_INLINE_EDITABLE_FIELD will always have index at last\n        const index = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1));\n        const isInstance = Number.isFinite(index);\n\n        // CASE 1: Handle inline editing for multiple field\n        if(isFieldMultiple(fieldSchema)) {\n            let expectedFieldInstanceData = null;\n            if(Array.isArray(expectedFieldData)) {\n                // CASE: Selected element is the multiple field itself.\n                // Inline Editing not allowed on field, only allowed on instance.\n                // (We recieve unreliable `multipleFieldMetadata` in this case)\n                if(!isInstance) {\n                    return;\n                }\n\n                // CASE: Value does not exist for the provided instance's index\n                if(index >= expectedFieldData.length) {\n                    // TODO: What should be the behavior here?\n                }\n                else {\n                    expectedFieldInstanceData = expectedFieldData.at(index);\n                }\n            }\n            // CASE: ContentType's Field changed from single to multiple, while Entry's Field still single.\n            else {\n                expectedFieldInstanceData = expectedFieldData;\n            }\n\n            enableInlineEditing(expectedFieldInstanceData);     \n        }\n        // CASE 2: Handle inline editing for a single field\n        else {\n            let expectedFieldInstanceData = null;\n            // CASE: ContentType's Field changed from multiple to single, while Entry's Field still multiple.\n            if(isInstance) {\n                if(index !== 0) {\n                    // TODO: Handle this with UX\n                    // Let user know, CSLP is invalid due to change in Content Type\n                    return;\n                }\n                expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;\n            }\n            enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);\n        }\n\n        function enableInlineEditing(expectedFieldData: any) {\n\n            let actualEditableField = editableElement as HTMLElement;\n\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n                actualEditableField?.innerText;\n\n            const elementComputedDisplay =\n                window.getComputedStyle(actualEditableField).display;\n\n            let textContent =\n                (editableElement as HTMLElement).innerText ||\n                editableElement.textContent ||\n                \"\";\n\n            if (fieldType === FieldDataType.MULTILINE) {\n                textContent = getMultilinePlaintext(actualEditableField);\n                actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n            }\n            const expectedTextContent = expectedFieldData;\n            if (\n                (expectedTextContent && textContent !== expectedTextContent) ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                \n                // TODO: Testing will be done in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: expectedFieldData }\n                );\n\n                (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n                // set field type attribute to the pseudo editable field\n                // ensures proper keydown handling similar to the actual editable field\n                pseudoEditableField.setAttribute(\n                    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n                    fieldType\n                );\n                visualBuilderContainer.appendChild(pseudoEditableField);\n                actualEditableField = pseudoEditableField;\n\n                if (fieldType === FieldDataType.MULTILINE)\n                    actualEditableField.addEventListener(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\n\n                // we will unobserve this in hideOverlay\n                elements.resizeObserver.observe(pseudoEditableField);\n            } else if (elementComputedDisplay === \"inline\") {\n                // if the editable field is inline\n                const onInlineElementInput = throttle(() => {\n                    const overlayWrapper = visualBuilderContainer.querySelector(\n                        \".visual-builder__overlay__wrapper\"\n                    ) as HTMLDivElement;\n                    const focusedToolbar = visualBuilderContainer.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n                    updateFocussedState({\n                        editableElement: actualEditableField,\n                        visualBuilderContainer,\n                        overlayWrapper,\n                        focusedToolbar,\n                        resizeObserver,\n                    });\n                }, 200);\n                actualEditableField.addEventListener(\n                    \"input\",\n                    onInlineElementInput\n                );\n            }\n\n            actualEditableField.setAttribute(\"contenteditable\", \"true\");\n            actualEditableField.addEventListener(\"input\", handleFieldInput);\n            actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n            // focus on the contenteditable element to start accepting input\n            actualEditableField.focus();\n\n            return;\n        }\n    }\n}\n\nfunction isFieldMultiple(fieldSchema: ISchemaFieldMap): boolean {\n    return fieldSchema &&\n    (fieldSchema.multiple ||\n        (fieldSchema.data_type === \"reference\" &&\n            // @ts-ignore\n            fieldSchema.field_metadata.ref_multiple));\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n        const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID]\n        toolbarEvents.forEach((event) => {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            if (visualBuilderPostMessage?.requestMessageHandlers?.has(event)) {\n                //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n                visualBuilderPostMessage?.unregisterEvent?.(event);\n            }\n        });\n    }\n}\n\nconst 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":"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","names":["expectedFieldData","visualBuilderPostMessage"]}

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

@@ -207,7 +207,9 @@ function cleanIndividualFieldResidual(elements) {
     focusedToolbar.innerHTML = "";
     const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID];
     toolbarEvents.forEach((event) => {
-      visualBuilderPostMessage?.unregisterEvent?.(event);
+      if (visualBuilderPostMessage?.requestMessageHandlers?.has(event)) {
+        visualBuilderPostMessage?.unregisterEvent?.(event);
+      }
     });
   }
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType, ISchemaFieldMap } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (isFieldMultiple(fieldSchema)) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n    } \n\n    !disabled && handleInlineEditing();\n\n    /**\n     * Handles inline editing for supported fields.\n     */\n    function handleInlineEditing() {\n\n        if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;\n\n        // Instances of ALLOWED_INLINE_EDITABLE_FIELD will always have index at last\n        const index = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1));\n        const isInstance = Number.isFinite(index);\n\n        // CASE 1: Handle inline editing for multiple field\n        if(isFieldMultiple(fieldSchema)) {\n            let expectedFieldInstanceData = null;\n            if(Array.isArray(expectedFieldData)) {\n                // CASE: Selected element is the multiple field itself.\n                // Inline Editing not allowed on field, only allowed on instance.\n                // (We recieve unreliable `multipleFieldMetadata` in this case)\n                if(!isInstance) {\n                    return;\n                }\n\n                // CASE: Value does not exist for the provided instance's index\n                if(index >= expectedFieldData.length) {\n                    // TODO: What should be the behavior here?\n                }\n                else {\n                    expectedFieldInstanceData = expectedFieldData.at(index);\n                }\n            }\n            // CASE: ContentType's Field changed from single to multiple, while Entry's Field still single.\n            else {\n                expectedFieldInstanceData = expectedFieldData;\n            }\n\n            enableInlineEditing(expectedFieldInstanceData);     \n        }\n        // CASE 2: Handle inline editing for a single field\n        else {\n            let expectedFieldInstanceData = null;\n            // CASE: ContentType's Field changed from multiple to single, while Entry's Field still multiple.\n            if(isInstance) {\n                if(index !== 0) {\n                    // TODO: Handle this with UX\n                    // Let user know, CSLP is invalid due to change in Content Type\n                    return;\n                }\n                expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;\n            }\n            enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);\n        }\n\n        function enableInlineEditing(expectedFieldData: any) {\n\n            let actualEditableField = editableElement as HTMLElement;\n\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n                actualEditableField?.innerText;\n\n            const elementComputedDisplay =\n                window.getComputedStyle(actualEditableField).display;\n\n            let textContent =\n                (editableElement as HTMLElement).innerText ||\n                editableElement.textContent ||\n                \"\";\n\n            if (fieldType === FieldDataType.MULTILINE) {\n                textContent = getMultilinePlaintext(actualEditableField);\n                actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n            }\n            const expectedTextContent = expectedFieldData;\n            if (\n                (expectedTextContent && textContent !== expectedTextContent) ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                \n                // TODO: Testing will be done in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: expectedFieldData }\n                );\n\n                (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n                // set field type attribute to the pseudo editable field\n                // ensures proper keydown handling similar to the actual editable field\n                pseudoEditableField.setAttribute(\n                    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n                    fieldType\n                );\n                visualBuilderContainer.appendChild(pseudoEditableField);\n                actualEditableField = pseudoEditableField;\n\n                if (fieldType === FieldDataType.MULTILINE)\n                    actualEditableField.addEventListener(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\n\n                // we will unobserve this in hideOverlay\n                elements.resizeObserver.observe(pseudoEditableField);\n            } else if (elementComputedDisplay === \"inline\") {\n                // if the editable field is inline\n                const onInlineElementInput = throttle(() => {\n                    const overlayWrapper = visualBuilderContainer.querySelector(\n                        \".visual-builder__overlay__wrapper\"\n                    ) as HTMLDivElement;\n                    const focusedToolbar = visualBuilderContainer.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n                    updateFocussedState({\n                        editableElement: actualEditableField,\n                        visualBuilderContainer,\n                        overlayWrapper,\n                        focusedToolbar,\n                        resizeObserver,\n                    });\n                }, 200);\n                actualEditableField.addEventListener(\n                    \"input\",\n                    onInlineElementInput\n                );\n            }\n\n            actualEditableField.setAttribute(\"contenteditable\", \"true\");\n            actualEditableField.addEventListener(\"input\", handleFieldInput);\n            actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n            // focus on the contenteditable element to start accepting input\n            actualEditableField.focus();\n\n            return;\n        }\n    }\n}\n\nfunction isFieldMultiple(fieldSchema: ISchemaFieldMap): boolean {\n    return fieldSchema &&\n    (fieldSchema.multiple ||\n        (fieldSchema.data_type === \"reference\" &&\n            // @ts-ignore\n            fieldSchema.field_metadata.ref_multiple));\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n        const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID]\n        toolbarEvents.forEach((event) => {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            visualBuilderPostMessage?.unregisterEvent?.(event);\n        });\n    }\n}\n\nconst 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":"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","names":["expectedFieldData"]}
+{"version":3,"sources":["../../../../src/visualBuilder/utils/handleIndividualFields.ts"],"sourcesContent":["import { debounce, throttle } from \"lodash-es\";\nimport { VisualBuilder } from \"..\";\nimport {\n    generatePseudoEditableElement,\n    isEllipsisActive,\n} from \"../generators/generatePseudoEditableField\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport {\n    ALLOWED_INLINE_EDITABLE_FIELD,\n    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport { getFieldData } from \"./getFieldData\";\nimport { getFieldType } from \"./getFieldType\";\nimport { handleFieldInput, handleFieldKeyDown } from \"./handleFieldMouseDown\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\nimport {\n    handleAddButtonsForMultiple,\n    removeAddInstanceButtons,\n} from \"./multipleElementAddButton\";\nimport { updateFocussedState } from \"./updateFocussedState\";\nimport { FieldDataType, ISchemaFieldMap } from \"./types/index.types\";\nimport { getMultilinePlaintext } from \"./getMultilinePlaintext\";\nimport { VisualBuilderPostMessageEvents } from \"./types/postMessage.types\";\nimport visualBuilderPostMessage from \"./visualBuilderPostMessage\";\n\n/**\n * It handles all the fields based on their data type and its \"multiple\" property.\n * @param eventDetails The event details object that contain cslp and field metadata.\n * @param elements The elements object that contain the visual builder wrapper.\n */\nexport async function handleIndividualFields(\n    eventDetails: VisualBuilderCslpEventDetails,\n    elements: {\n        visualBuilderContainer: HTMLDivElement;\n        resizeObserver: ResizeObserver;\n        lastEditedField: Element | null;\n    }\n): Promise<void> {\n    const { fieldMetadata, editableElement } = eventDetails;\n    const { visualBuilderContainer, lastEditedField, resizeObserver } =\n        elements;\n    const {\n        content_type_uid,\n        entry_uid,\n        locale,\n        fieldPath,\n        fieldPathWithIndex,\n    } = fieldMetadata;\n\n    const [fieldSchema, expectedFieldData] = await Promise.all([\n        FieldSchemaMap.getFieldSchema(content_type_uid, fieldPath),\n        getFieldData(\n            { content_type_uid, entry_uid, locale },\n            fieldPathWithIndex\n        ),\n    ]);\n\n    const fieldType = getFieldType(fieldSchema);\n\n    const { isDisabled: disabled } = isFieldDisabled(fieldSchema, eventDetails);\n\n    editableElement.setAttribute(\n        VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n        fieldType\n    );\n\n    if (isFieldMultiple(fieldSchema)) {\n        if (lastEditedField !== editableElement) {\n            const addButtonLabel =\n                fieldSchema.data_type === \"blocks\"\n                    ? // ? `Add ${fieldSchema.display_name ?? \"Modular Block\"}`\n                      \"Add Section\"\n                    : undefined;\n\n            handleAddButtonsForMultiple(\n                eventDetails,\n                {\n                    editableElement: eventDetails.editableElement,\n                    visualBuilderContainer: visualBuilderContainer,\n                    resizeObserver: resizeObserver,\n                },\n                {\n                    fieldSchema,\n                    expectedFieldData,\n                    disabled,\n                    label: addButtonLabel,\n                }\n            );\n        }\n    } \n\n    !disabled && handleInlineEditing();\n\n    /**\n     * Handles inline editing for supported fields.\n     */\n    function handleInlineEditing() {\n\n        if (!ALLOWED_INLINE_EDITABLE_FIELD.includes(fieldType)) return;\n\n        // Instances of ALLOWED_INLINE_EDITABLE_FIELD will always have index at last\n        const index = Number(fieldMetadata.instance.fieldPathWithIndex.split('.').at(-1));\n        const isInstance = Number.isFinite(index);\n\n        // CASE 1: Handle inline editing for multiple field\n        if(isFieldMultiple(fieldSchema)) {\n            let expectedFieldInstanceData = null;\n            if(Array.isArray(expectedFieldData)) {\n                // CASE: Selected element is the multiple field itself.\n                // Inline Editing not allowed on field, only allowed on instance.\n                // (We recieve unreliable `multipleFieldMetadata` in this case)\n                if(!isInstance) {\n                    return;\n                }\n\n                // CASE: Value does not exist for the provided instance's index\n                if(index >= expectedFieldData.length) {\n                    // TODO: What should be the behavior here?\n                }\n                else {\n                    expectedFieldInstanceData = expectedFieldData.at(index);\n                }\n            }\n            // CASE: ContentType's Field changed from single to multiple, while Entry's Field still single.\n            else {\n                expectedFieldInstanceData = expectedFieldData;\n            }\n\n            enableInlineEditing(expectedFieldInstanceData);     \n        }\n        // CASE 2: Handle inline editing for a single field\n        else {\n            let expectedFieldInstanceData = null;\n            // CASE: ContentType's Field changed from multiple to single, while Entry's Field still multiple.\n            if(isInstance) {\n                if(index !== 0) {\n                    // TODO: Handle this with UX\n                    // Let user know, CSLP is invalid due to change in Content Type\n                    return;\n                }\n                expectedFieldInstanceData = Array.isArray(expectedFieldData) ? expectedFieldData.at(0) : expectedFieldData;\n            }\n            enableInlineEditing(expectedFieldInstanceData ?? expectedFieldData);\n        }\n\n        function enableInlineEditing(expectedFieldData: any) {\n\n            let actualEditableField = editableElement as HTMLElement;\n\n            VisualBuilder.VisualBuilderGlobalState.value.focusFieldValue =\n                actualEditableField?.innerText;\n\n            const elementComputedDisplay =\n                window.getComputedStyle(actualEditableField).display;\n\n            let textContent =\n                (editableElement as HTMLElement).innerText ||\n                editableElement.textContent ||\n                \"\";\n\n            if (fieldType === FieldDataType.MULTILINE) {\n                textContent = getMultilinePlaintext(actualEditableField);\n                actualEditableField.addEventListener(\"paste\", pasteAsPlainText);\n            }\n            const expectedTextContent = expectedFieldData;\n            if (\n                (expectedTextContent && textContent !== expectedTextContent) ||\n                isEllipsisActive(editableElement as HTMLElement)\n            ) {\n                \n                // TODO: Testing will be done in the E2E.\n                const pseudoEditableField = generatePseudoEditableElement(\n                    { editableElement: editableElement as HTMLElement },\n                    { textContent: expectedFieldData }\n                );\n\n                (editableElement as HTMLElement).style.visibility = \"hidden\";\n\n                // set field type attribute to the pseudo editable field\n                // ensures proper keydown handling similar to the actual editable field\n                pseudoEditableField.setAttribute(\n                    VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY,\n                    fieldType\n                );\n                visualBuilderContainer.appendChild(pseudoEditableField);\n                actualEditableField = pseudoEditableField;\n\n                if (fieldType === FieldDataType.MULTILINE)\n                    actualEditableField.addEventListener(\n                        \"paste\",\n                        pasteAsPlainText\n                    );\n\n                // we will unobserve this in hideOverlay\n                elements.resizeObserver.observe(pseudoEditableField);\n            } else if (elementComputedDisplay === \"inline\") {\n                // if the editable field is inline\n                const onInlineElementInput = throttle(() => {\n                    const overlayWrapper = visualBuilderContainer.querySelector(\n                        \".visual-builder__overlay__wrapper\"\n                    ) as HTMLDivElement;\n                    const focusedToolbar = visualBuilderContainer.querySelector(\n                        \".visual-builder__focused-toolbar\"\n                    ) as HTMLDivElement;\n                    updateFocussedState({\n                        editableElement: actualEditableField,\n                        visualBuilderContainer,\n                        overlayWrapper,\n                        focusedToolbar,\n                        resizeObserver,\n                    });\n                }, 200);\n                actualEditableField.addEventListener(\n                    \"input\",\n                    onInlineElementInput\n                );\n            }\n\n            actualEditableField.setAttribute(\"contenteditable\", \"true\");\n            actualEditableField.addEventListener(\"input\", handleFieldInput);\n            actualEditableField.addEventListener(\"keydown\", handleFieldKeyDown);\n            // focus on the contenteditable element to start accepting input\n            actualEditableField.focus();\n\n            return;\n        }\n    }\n}\n\nfunction isFieldMultiple(fieldSchema: ISchemaFieldMap): boolean {\n    return fieldSchema &&\n    (fieldSchema.multiple ||\n        (fieldSchema.data_type === \"reference\" &&\n            // @ts-ignore\n            fieldSchema.field_metadata.ref_multiple));\n}\n\nexport function cleanIndividualFieldResidual(elements: {\n    overlayWrapper: HTMLDivElement;\n    visualBuilderContainer: HTMLDivElement | null;\n    focusedToolbar: HTMLDivElement | null;\n    resizeObserver: ResizeObserver;\n}): void {\n    const { overlayWrapper, visualBuilderContainer, focusedToolbar } = elements;\n\n    removeAddInstanceButtons(\n        {\n            eventTarget: null,\n            visualBuilderContainer: visualBuilderContainer,\n            overlayWrapper: overlayWrapper,\n        },\n        true\n    );\n\n    const previousSelectedEditableDOM =\n        VisualBuilder.VisualBuilderGlobalState.value\n            .previousSelectedEditableDOM;\n    if (previousSelectedEditableDOM) {\n        previousSelectedEditableDOM.removeAttribute(\n            VISUAL_BUILDER_FIELD_TYPE_ATTRIBUTE_KEY\n        );\n        previousSelectedEditableDOM.removeAttribute(\"contenteditable\");\n        previousSelectedEditableDOM.removeEventListener(\n            \"input\",\n            handleFieldInput\n        );\n        previousSelectedEditableDOM.removeEventListener(\n            \"keydown\",\n            handleFieldKeyDown\n        );\n\n        previousSelectedEditableDOM.removeEventListener(\n            \"paste\",\n            pasteAsPlainText\n        );\n        // Note - this happens in two places, 1. hideOverlay and 2. here\n        // TODO maybe see all usages of both functions and try to do it in one place\n        elements.resizeObserver.unobserve(previousSelectedEditableDOM);\n    }\n\n    const pseudoEditableElement = visualBuilderContainer?.querySelector(\n        \".visual-builder__pseudo-editable-element\"\n    );\n    if (pseudoEditableElement) {\n        elements.resizeObserver.unobserve(pseudoEditableElement);\n        pseudoEditableElement.removeEventListener(\"paste\", pasteAsPlainText);\n        pseudoEditableElement.remove();\n        if (previousSelectedEditableDOM) {\n            (previousSelectedEditableDOM as HTMLElement).style.removeProperty(\n                \"visibility\"\n            );\n        }\n    }\n\n    if (focusedToolbar) {\n        focusedToolbar.innerHTML = \"\";\n        const toolbarEvents = [VisualBuilderPostMessageEvents.DELETE_INSTANCE, VisualBuilderPostMessageEvents.UPDATE_DISCUSSION_ID]\n        toolbarEvents.forEach((event) => {\n            //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n            if (visualBuilderPostMessage?.requestMessageHandlers?.has(event)) {\n                //@ts-expect-error - We are accessing private method here, but it is necessary to clean up the event listeners.\n                visualBuilderPostMessage?.unregisterEvent?.(event);\n            }\n        });\n    }\n}\n\nconst 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,UAAU,gBAAgB;AACnC,SAAS,qBAAqB;AAC9B;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB,0BAA0B;AACrD,SAAS,uBAAuB;AAChC;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,2BAA2B;AACpC,SAAS,qBAAsC;AAC/C,SAAS,6BAA6B;AACtC,SAAS,sCAAsC;AAC/C,OAAO,8BAA8B;AAOrC,eAAsB,uBAClB,cACA,UAKa;AACb,QAAM,EAAE,eAAe,gBAAgB,IAAI;AAC3C,QAAM,EAAE,wBAAwB,iBAAiB,eAAe,IAC5D;AACJ,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI;AAEJ,QAAM,CAAC,aAAa,iBAAiB,IAAI,MAAM,QAAQ,IAAI;AAAA,IACvD,eAAe,eAAe,kBAAkB,SAAS;AAAA,IACzD;AAAA,MACI,EAAE,kBAAkB,WAAW,OAAO;AAAA,MACtC;AAAA,IACJ;AAAA,EACJ,CAAC;AAED,QAAM,YAAY,aAAa,WAAW;AAE1C,QAAM,EAAE,YAAY,SAAS,IAAI,gBAAgB,aAAa,YAAY;AAE1E,kBAAgB;AAAA,IACZ;AAAA,IACA;AAAA,EACJ;AAEA,MAAI,gBAAgB,WAAW,GAAG;AAC9B,QAAI,oBAAoB,iBAAiB;AACrC,YAAM,iBACF,YAAY,cAAc;AAAA;AAAA,QAEpB;AAAA,UACA;AAEV;AAAA,QACI;AAAA,QACA;AAAA,UACI,iBAAiB,aAAa;AAAA,UAC9B;AAAA,UACA;AAAA,QACJ;AAAA,QACA;AAAA,UACI;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,QACX;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,GAAC,YAAY,oBAAoB;AAKjC,WAAS,sBAAsB;AAE3B,QAAI,CAAC,8BAA8B,SAAS,SAAS,EAAG;AAGxD,UAAM,QAAQ,OAAO,cAAc,SAAS,mBAAmB,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AAChF,UAAM,aAAa,OAAO,SAAS,KAAK;AAGxC,QAAG,gBAAgB,WAAW,GAAG;AAC7B,UAAI,4BAA4B;AAChC,UAAG,MAAM,QAAQ,iBAAiB,GAAG;AAIjC,YAAG,CAAC,YAAY;AACZ;AAAA,QACJ;AAGA,YAAG,SAAS,kBAAkB,QAAQ;AAAA,QAEtC,OACK;AACD,sCAA4B,kBAAkB,GAAG,KAAK;AAAA,QAC1D;AAAA,MACJ,OAEK;AACD,oCAA4B;AAAA,MAChC;AAEA,0BAAoB,yBAAyB;AAAA,IACjD,OAEK;AACD,UAAI,4BAA4B;AAEhC,UAAG,YAAY;AACX,YAAG,UAAU,GAAG;AAGZ;AAAA,QACJ;AACA,oCAA4B,MAAM,QAAQ,iBAAiB,IAAI,kBAAkB,GAAG,CAAC,IAAI;AAAA,MAC7F;AACA,0BAAoB,6BAA6B,iBAAiB;AAAA,IACtE;AAEA,aAAS,oBAAoBA,oBAAwB;AAEjD,UAAI,sBAAsB;AAE1B,oBAAc,yBAAyB,MAAM,kBACzC,qBAAqB;AAEzB,YAAM,yBACF,OAAO,iBAAiB,mBAAmB,EAAE;AAEjD,UAAI,cACC,gBAAgC,aACjC,gBAAgB,eAChB;AAEJ,UAAI,cAAc,cAAc,WAAW;AACvC,sBAAc,sBAAsB,mBAAmB;AACvD,4BAAoB,iBAAiB,SAAS,gBAAgB;AAAA,MAClE;AACA,YAAM,sBAAsBA;AAC5B,UACK,uBAAuB,gBAAgB,uBACxC,iBAAiB,eAA8B,GACjD;AAGE,cAAM,sBAAsB;AAAA,UACxB,EAAE,gBAAgD;AAAA,UAClD,EAAE,aAAaA,mBAAkB;AAAA,QACrC;AAEA,QAAC,gBAAgC,MAAM,aAAa;AAIpD,4BAAoB;AAAA,UAChB;AAAA,UACA;AAAA,QACJ;AACA,+BAAuB,YAAY,mBAAmB;AACtD,8BAAsB;AAEtB,YAAI,cAAc,cAAc;AAC5B,8BAAoB;AAAA,YAChB;AAAA,YACA;AAAA,UACJ;AAGJ,iBAAS,eAAe,QAAQ,mBAAmB;AAAA,MACvD,WAAW,2BAA2B,UAAU;AAE5C,cAAM,uBAAuB,SAAS,MAAM;AACxC,gBAAM,iBAAiB,uBAAuB;AAAA,YAC1C;AAAA,UACJ;AACA,gBAAM,iBAAiB,uBAAuB;AAAA,YAC1C;AAAA,UACJ;AACA,8BAAoB;AAAA,YAChB,iBAAiB;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACJ,CAAC;AAAA,QACL,GAAG,GAAG;AACN,4BAAoB;AAAA,UAChB;AAAA,UACA;AAAA,QACJ;AAAA,MACJ;AAEA,0BAAoB,aAAa,mBAAmB,MAAM;AAC1D,0BAAoB,iBAAiB,SAAS,gBAAgB;AAC9D,0BAAoB,iBAAiB,WAAW,kBAAkB;AAElE,0BAAoB,MAAM;AAE1B;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,SAAS,gBAAgB,aAAuC;AAC5D,SAAO,gBACN,YAAY,YACR,YAAY,cAAc;AAAA,EAEvB,YAAY,eAAe;AACvC;AAEO,SAAS,6BAA6B,UAKpC;AACL,QAAM,EAAE,gBAAgB,wBAAwB,eAAe,IAAI;AAEnE;AAAA,IACI;AAAA,MACI,aAAa;AAAA,MACb;AAAA,MACA;AAAA,IACJ;AAAA,IACA;AAAA,EACJ;AAEA,QAAM,8BACF,cAAc,yBAAyB,MAClC;AACT,MAAI,6BAA6B;AAC7B,gCAA4B;AAAA,MACxB;AAAA,IACJ;AACA,gCAA4B,gBAAgB,iBAAiB;AAC7D,gCAA4B;AAAA,MACxB;AAAA,MACA;AAAA,IACJ;AACA,gCAA4B;AAAA,MACxB;AAAA,MACA;AAAA,IACJ;AAEA,gCAA4B;AAAA,MACxB;AAAA,MACA;AAAA,IACJ;AAGA,aAAS,eAAe,UAAU,2BAA2B;AAAA,EACjE;AAEA,QAAM,wBAAwB,wBAAwB;AAAA,IAClD;AAAA,EACJ;AACA,MAAI,uBAAuB;AACvB,aAAS,eAAe,UAAU,qBAAqB;AACvD,0BAAsB,oBAAoB,SAAS,gBAAgB;AACnE,0BAAsB,OAAO;AAC7B,QAAI,6BAA6B;AAC7B,MAAC,4BAA4C,MAAM;AAAA,QAC/C;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAEA,MAAI,gBAAgB;AAChB,mBAAe,YAAY;AAC3B,UAAM,gBAAgB,CAAC,+BAA+B,iBAAiB,+BAA+B,oBAAoB;AAC1H,kBAAc,QAAQ,CAAC,UAAU;AAE7B,UAAI,0BAA0B,wBAAwB,IAAI,KAAK,GAAG;AAE9D,kCAA0B,kBAAkB,KAAK;AAAA,MACrD;AAAA,IACJ,CAAC;AAAA,EACL;AACJ;AAEA,IAAM,mBAAmB;AAAA,EACrB,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":["expectedFieldData"]}

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;
@@ -176,8 +176,6 @@ function visualBuilderStyles() {
             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 +223,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;
@@ -516,7 +530,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;

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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoB;AAEpB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiClB,SAAS,sBAAsB;AAClC,SAAO;AAAA,IACH,6BAA6B;AAAA;AAAA;AAAA;AAAA,IAI7B,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAyB1B,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAepC,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO3B,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoD9B,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqDrC,+BAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY/B,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,uCAAuC;AAAA;AAAA;AAAA,IAGvC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUnC,uEAAuE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBvE,sEAAsE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUtE,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY7B,wDAAwD;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxD,0DAA0D;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1D,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiB1B,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrC,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUhC,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUjC,0CAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU1C,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO9B,iDAAiD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8BjD,yCAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYzC,2DAA2D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS3D,8BAA8B;AAAA;AAAA;AAAA,IAG9B,mDAAmD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOnD,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASnC,2BAA2B;AAAA,cACrB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBtB,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUnC,uCAAuC;AAAA,cACjC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUtB,+BAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU/B,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOrC,0CAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc1C,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjC,yCAAyC;AAAA;AAAA;AAAA,IAGzC,8CAA8C;AAAA;AAAA;AAAA,IAG9C,2CAA2C;AAAA;AAAA;AAAA,IAG3C,4CAA4C;AAAA;AAAA;AAAA,IAG5C,+BAA+B;AAAA;AAAA;AAAA,IAG/B,iCAAiC;AAAA;AAAA;AAAA,IAGjC,2CAA2C;AAAA;AAAA;AAAA;AAAA,IAI3C,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhC,0CAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1C,+CAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/C,iDAAiD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2CjD,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlC,oDAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAepD,+DAA+D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwB/D,mCAAmC;AAAA;AAAA;AAAA,IAGnC,2CAA2C;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3C,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWtC;AACJ;AAEO,IAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","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__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            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":[]}