npm - @contentstack/live-preview-utils - Versions diffs - 3.2.1 → 3.2.2 - Mend

@contentstack/live-preview-utils 3.2.1 → 3.2.2

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

Files changed (194) hide show

package/dist/legacy/visualBuilder/utils/updateFocussedState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n addFocusOverlay,\n hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport {\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n RIGHT_EDGE_BUFFER,\n TOOLBAR_EDGE_BUFFER,\n TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport getStyleOfAnElement from \"./getStyleOfAnElement\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n /\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver \| null;\n}): void {\n let previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n\n // prefer data-cslp-unique-id when available else use data-cslp.\n // unique ID is added on click when multiple elements with same\n // data-cslp are found.\n const previousSelectedElementCslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const previousSelectedElementCslpUniqueId =\n previousSelectedEditableDOM?.getAttribute(\"data-cslp-unique-id\");\n const newPreviousSelectedElement =\n document.querySelector(\n `[data-cslp-unique-id=\"${previousSelectedElementCslpUniqueId}\"]`\n ) \|\| document.querySelector(`[data-cslp=\"${previousSelectedElementCslp}\"]`);\n if (!newPreviousSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n previousSelectedEditableDOM;\n }\n\n hideHoverOutline(visualBuilderContainer);\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n\n const fieldMetadata = extractDetailsFromCslp(previousSelectedElementCslp);\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n\n if (!selectedElement) return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n resizeObserver: ResizeObserver \| null\n) {\n if (!focusOverlayWrapper) return;\n\n let selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (!selectedElement) return;\n\n const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n const selectedElementCslpUniqueId = selectedElement?.getAttribute(\n \"data-cslp-unique-id\"\n );\n const newSelectedElement =\n document.querySelector(\n `[data-cslp-unique-id=\"${selectedElementCslpUniqueId}\"]`\n ) \|\| document.querySelector(`[data-cslp=\"${selectedElementCslp}\"]`);\n if (!newSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: focusOverlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n\n if (newSelectedElement !== selectedElement) {\n selectedElement = newSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n selectedElement;\n }\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if (dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if (\n dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !==\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n ) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if (\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left\n ) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if (\n dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !==\n document.documentElement.clientWidth -\n selectedElementDimension.right\n ) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth -\n selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`)\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (\n psuedoEditableElement &&\n (psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\")\n ) {\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}\n"],"mappings":"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","names":["distanceFromTop"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/updateFocussedState.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { getAddInstanceButtons } from \"../generators/generateAddInstanceButtons\";\nimport {\n addFocusOverlay,\n hideFocusOverlay,\n} from \"../generators/generateOverlay\";\nimport { hideHoverOutline } from \"../listeners/mouseHover\";\nimport { getEntryPermissionsCached } from \"./getEntryPermissionsCached\";\nimport {\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX,\n RIGHT_EDGE_BUFFER,\n TOOLBAR_EDGE_BUFFER,\n TOP_EDGE_BUFFER,\n} from \"./constants\";\nimport { FieldSchemaMap } from \"./fieldSchemaMap\";\nimport getChildrenDirection from \"./getChildrenDirection\";\nimport { getPsuedoEditableElementStyles } from \"./getPsuedoEditableStylesElement\";\nimport { isFieldDisabled } from \"./isFieldDisabled\";\n\ninterface ToolbarPositionParams {\n focusedToolbar: HTMLElement \| null;\n selectedElementDimension: DOMRect;\n}\n/*\n Adjust the position of the field toolbar instead of clearing the innerhtml fo the focused toolbar.\n * By doing this, can avoid the re-rendering of the focus field toolbar.\n /\nfunction positionToolbar({\n focusedToolbar,\n selectedElementDimension,\n}: ToolbarPositionParams): void {\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n\n // Adjust top position based on the available space\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n // Handle right-edge overflow\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`)\n ) {\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${selectedElementDimension.right + LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX}px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // Default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n // Adjust top position if necessary\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n}\n\n/\n This function can be used to re-draw/update the focussed state of an element.\n * The focussed state includes the overlay, psuedo-editable, toolbar, and multiple\n * instance add buttons. It is similar to handleBuilderInteraction but it does not\n * create new elements, it just updates the existing ones whenever possible.\n * NOTE: breakdown this function into multiple functions when the need arises\n /\nexport async function updateFocussedState({\n editableElement,\n visualBuilderContainer,\n overlayWrapper,\n focusedToolbar,\n resizeObserver,\n}: {\n editableElement: HTMLElement \| null;\n visualBuilderContainer: HTMLDivElement \| null;\n overlayWrapper: HTMLDivElement \| null;\n focusedToolbar: HTMLDivElement \| null;\n resizeObserver: ResizeObserver \| null;\n}): Promise<void> {\n let previousSelectedEditableDOM =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (\n !visualBuilderContainer \|\|\n !editableElement \|\|\n !previousSelectedEditableDOM \|\|\n !overlayWrapper\n ) {\n return;\n }\n\n // prefer data-cslp-unique-id when available else use data-cslp.\n // unique ID is added on click when multiple elements with same\n // data-cslp are found.\n const previousSelectedElementCslp =\n editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const previousSelectedElementCslpUniqueId =\n previousSelectedEditableDOM?.getAttribute(\"data-cslp-unique-id\");\n const newPreviousSelectedElement =\n document.querySelector(\n `[data-cslp-unique-id=\"${previousSelectedElementCslpUniqueId}\"]`\n ) \|\|\n document.querySelector(`[data-cslp=\"${previousSelectedElementCslp}\"]`);\n if (!newPreviousSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: overlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n if (newPreviousSelectedElement !== previousSelectedEditableDOM) {\n previousSelectedEditableDOM = newPreviousSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n previousSelectedEditableDOM;\n }\n\n const cslp = editableElement?.getAttribute(\"data-cslp\") \|\| \"\";\n const fieldMetadata = extractDetailsFromCslp(cslp);\n\n hideHoverOutline(visualBuilderContainer);\n\n // in every case, this function will bring cached values\n // and this should be quick\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n );\n const entryAcl = await getEntryPermissionsCached({\n entryUid: fieldMetadata.entry_uid,\n contentTypeUid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n });\n const { isDisabled } = isFieldDisabled(\n fieldSchema,\n { editableElement, fieldMetadata },\n entryAcl\n );\n addFocusOverlay(previousSelectedEditableDOM, overlayWrapper, isDisabled);\n\n // update psuedo editable element if present\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n if (psuedoEditableElement) {\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n\n const targetElementDimension = editableElement.getBoundingClientRect();\n if (targetElementDimension.width && targetElementDimension.height) {\n const selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n\n if (!selectedElement) return;\n // position the focused tool bar\n positionToolbar({\n focusedToolbar: focusedToolbar,\n selectedElementDimension: selectedElement.getBoundingClientRect(),\n });\n }\n\n // re-add multiple instance add buttons\n const buttons = getAddInstanceButtons(visualBuilderContainer);\n const parentCslpValue =\n fieldMetadata.multipleFieldMetadata?.parentDetails?.parentCslpValue;\n if (\n buttons &&\n parentCslpValue &&\n buttons.length > 1 &&\n buttons[0] &&\n buttons[1]\n ) {\n const [previousButton, nextButton] = buttons;\n const direction = getChildrenDirection(\n editableElement,\n parentCslpValue\n );\n const targetDOMDimension = editableElement.getBoundingClientRect();\n\n if (direction === \"horizontal\") {\n const middleHeight =\n targetDOMDimension.top +\n (targetDOMDimension.bottom - targetDOMDimension.top) / 2 +\n window.scrollY;\n previousButton.style.left = `${targetDOMDimension.left}px`;\n previousButton.style.top = `${middleHeight}px`;\n\n nextButton.style.left = `${targetDOMDimension.right}px`;\n nextButton.style.top = `${middleHeight}px`;\n } else if (direction === \"vertical\") {\n const middleWidth =\n targetDOMDimension.left +\n (targetDOMDimension.right - targetDOMDimension.left) / 2;\n previousButton.style.left = `${middleWidth}px`;\n previousButton.style.top = `${\n targetDOMDimension.top + window.scrollY\n }px`;\n\n nextButton.style.left = `${middleWidth}px`;\n nextButton.style.top = `${\n targetDOMDimension.bottom + window.scrollY\n }px`;\n }\n }\n}\n\n/\n This function is used to resize/reposition focus overlay and toolbar due to a\n * mutation in the DOM or due to changes in a different field (other than the focussed field).\n /\nexport function updateFocussedStateOnMutation(\n focusOverlayWrapper: HTMLDivElement \| null,\n focusedToolbar: HTMLDivElement \| null,\n visualBuilderContainer: HTMLDivElement \| null,\n resizeObserver: ResizeObserver \| null\n) {\n if (!focusOverlayWrapper) return;\n\n let selectedElement =\n VisualBuilder.VisualBuilderGlobalState.value\n .previousSelectedEditableDOM;\n if (!selectedElement) return;\n\n const selectedElementCslp = selectedElement?.getAttribute(\"data-cslp\");\n const selectedElementCslpUniqueId = selectedElement?.getAttribute(\n \"data-cslp-unique-id\"\n );\n const newSelectedElement =\n document.querySelector(\n `[data-cslp-unique-id=\"${selectedElementCslpUniqueId}\"]`\n ) \|\| document.querySelector(`[data-cslp=\"${selectedElementCslp}\"]`);\n if (!newSelectedElement && resizeObserver) {\n hideFocusOverlay({\n visualBuilderOverlayWrapper: focusOverlayWrapper,\n focusedToolbar,\n visualBuilderContainer,\n resizeObserver,\n noTrigger: true,\n });\n return;\n }\n\n if (newSelectedElement !== selectedElement) {\n selectedElement = newSelectedElement as HTMLElement;\n VisualBuilder.VisualBuilderGlobalState.value.previousSelectedEditableDOM =\n selectedElement;\n }\n\n const selectedElementDimension = selectedElement.getBoundingClientRect();\n\n /\n Update the focus outline if it exists.\n /\n const focusOutline = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--outline\"\n );\n\n if (focusOutline) {\n const focusOutlineDimension = focusOutline.getBoundingClientRect();\n if (!isSameRect(selectedElementDimension, focusOutlineDimension)) {\n focusOutline.style.top = `${selectedElementDimension.top + window.scrollY}px`;\n focusOutline.style.left = `${selectedElementDimension.left}px`;\n focusOutline.style.width = `${selectedElementDimension.width}px`;\n focusOutline.style.height = `${selectedElementDimension.height}px`;\n }\n }\n\n /\n Update the focus overlays if they exists.\n /\n\n const focusedOverlayTop = focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--top\"\n );\n const focusedOverlayBottom =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--bottom\"\n );\n const focusedOverlayLeft =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--left\"\n );\n const focusedOverlayRight =\n focusOverlayWrapper.querySelector<HTMLDivElement>(\n \".visual-builder__overlay--right\"\n );\n\n const distanceFromTop = selectedElementDimension.top + window.scrollY;\n\n if (focusedOverlayTop) {\n const dimension = focusedOverlayTop.getBoundingClientRect();\n if (dimension.height !== distanceFromTop) {\n focusedOverlayTop.style.height = `calc(${distanceFromTop}px)`;\n }\n }\n\n if (focusedOverlayBottom) {\n const dimension = focusedOverlayBottom.getBoundingClientRect();\n if (\n dimension.top !== selectedElementDimension.bottom \|\|\n dimension.height !==\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n ) {\n focusedOverlayBottom.style.top = `${\n selectedElementDimension.bottom + window.scrollY\n }px`;\n focusedOverlayBottom.style.height = `${\n window.document.body.scrollHeight -\n selectedElementDimension.bottom -\n window.scrollY\n }px`;\n }\n }\n\n if (focusedOverlayLeft) {\n const dimension = focusedOverlayLeft.getBoundingClientRect();\n if (\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !== selectedElementDimension.left\n ) {\n focusedOverlayLeft.style.top = `${distanceFromTop}px`;\n focusedOverlayLeft.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayLeft.style.width = `${selectedElementDimension.left}px`;\n }\n }\n\n if (focusedOverlayRight) {\n const dimension = focusedOverlayRight.getBoundingClientRect();\n if (\n dimension.left !== selectedElementDimension.right \|\|\n dimension.top + window.scrollY !== distanceFromTop \|\|\n dimension.height !== selectedElementDimension.height \|\|\n dimension.width !==\n document.documentElement.clientWidth -\n selectedElementDimension.right\n ) {\n focusedOverlayRight.style.left = `${selectedElementDimension.right}px`;\n focusedOverlayRight.style.top = `${distanceFromTop}px`;\n focusedOverlayRight.style.height = `${selectedElementDimension.height}px`;\n focusedOverlayRight.style.width = `${\n document.documentElement.clientWidth -\n selectedElementDimension.right\n }px`;\n }\n }\n\n /\n Update the focus toolbar if it exists.\n /\n\n if (focusedToolbar) {\n const targetElementRightEdgeOffset =\n window.scrollX + window.innerWidth - selectedElementDimension.left;\n const distanceFromTop =\n selectedElementDimension.top + window.scrollY - TOOLBAR_EDGE_BUFFER;\n // Position the toolbar at the top unless there's insufficient space or scrolling up is not possible (topmost element targetted).\n const adjustedDistanceFromTop =\n selectedElementDimension.top + window.scrollY < TOP_EDGE_BUFFER\n ? distanceFromTop +\n selectedElementDimension.height +\n TOP_EDGE_BUFFER\n : distanceFromTop;\n\n const distanceFromLeft =\n selectedElementDimension.left - LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX;\n const adjustedDistanceFromLeft = Math.max(\n distanceFromLeft,\n TOOLBAR_EDGE_BUFFER\n );\n\n if (\n targetElementRightEdgeOffset < RIGHT_EDGE_BUFFER &&\n (focusedToolbar.style.justifyContent !== \"flex-end\" \|\|\n focusedToolbar.style.left !==\n `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`)\n ) {\n // Overflow / Cutoff on right edge\n focusedToolbar.style.justifyContent = \"flex-end\";\n focusedToolbar.style.left = `${\n selectedElementDimension.right +\n LIVE_PREVIEW_OUTLINE_WIDTH_IN_PX\n }px`;\n } else if (\n focusedToolbar.style.justifyContent !== \"flex-start\" \|\|\n focusedToolbar.style.left !== `${adjustedDistanceFromLeft}px`\n ) {\n focusedToolbar.style.justifyContent = \"flex-start\"; // default\n focusedToolbar.style.left = `${adjustedDistanceFromLeft}px`;\n }\n\n if (focusedToolbar.style.top !== `${adjustedDistanceFromTop}px`) {\n focusedToolbar.style.top = `${adjustedDistanceFromTop}px`;\n }\n }\n\n /\n Update the pseudo-editable if it exists.\n */\n\n if (visualBuilderContainer) {\n const psuedoEditableElement = visualBuilderContainer.querySelector(\n \".visual-builder__pseudo-editable-element\"\n ) as HTMLElement;\n const editableElement = selectedElement as HTMLElement;\n const styles = getPsuedoEditableElementStyles(editableElement);\n const styleString = Object.entries(styles).reduce(\n (acc, [key, value]) => {\n return `${acc}${key}:${value};`;\n },\n \"\"\n );\n if (\n psuedoEditableElement &&\n (psuedoEditableElement.style.cssText !== styleString \|\|\n psuedoEditableElement.style.visibility !== \"visible\")\n ) {\n psuedoEditableElement.style.cssText = styleString;\n // since we are copying styles from the editableEl\n // it will now have a visibility of hidden, which we added\n // when creating the pseudo editable element, so make the psuedo visible\n psuedoEditableElement.style.visibility = \"visible\";\n }\n }\n}\n\nfunction isSameRect(rect1: DOMRect, rect2: DOMRect) {\n return (\n rect1.top === rect2.top &&\n rect1.left === rect2.left &&\n rect1.width === rect2.width &&\n rect1.height === rect2.height\n );\n}\n"],"mappings":"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","names":["distanceFromTop"]}

package/dist/legacy/visualBuilder/visualBuilder.style.cjs CHANGED Viewed

@@ -344,6 +344,15 @@ function visualBuilderStyles() {
                 border-color 0.15s ease-in-out,
                 box-shadow 0.15s ease-in-out;
             // vertical-align: middle;
+            &:disabled {
+                cursor: not-allowed;
+                svg {
+                    fill: #999;
+                    path {
+                        fill: #999;
+                    }
+                }
+            }
         `,
     "visual-builder__button--primary": import_goober.css`
             background-color: #6c5ce7;
@@ -409,7 +418,7 @@ function visualBuilderStyles() {
                 gap: 8px;
             }
-            .visual-builder__button:hover {
+            .visual-builder__button:enabled:hover {
                 background-color: #f5f5f5;
                 svg {

package/dist/legacy/visualBuilder/visualBuilder.style.cjs.map CHANGED Viewed

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

package/dist/legacy/visualBuilder/visualBuilder.style.js CHANGED Viewed

@@ -321,6 +321,15 @@ function visualBuilderStyles() {
                 border-color 0.15s ease-in-out,
                 box-shadow 0.15s ease-in-out;
             // vertical-align: middle;
+            &:disabled {
+                cursor: not-allowed;
+                svg {
+                    fill: #999;
+                    path {
+                        fill: #999;
+                    }
+                }
+            }
         `,
     "visual-builder__button--primary": css`
             background-color: #6c5ce7;
@@ -386,7 +395,7 @@ function visualBuilderStyles() {
                 gap: 8px;
             }
-            .visual-builder__button:hover {
+            .visual-builder__button:enabled:hover {
                 background-color: #f5f5f5;
                 svg {

package/dist/legacy/visualBuilder/visualBuilder.style.js.map CHANGED Viewed

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

package/dist/modern/index.cjs CHANGED Viewed

@@ -72,7 +72,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
   static unsubscribeOnEntryChange() {
   }
   static getSdkVersion() {
-    return "3.2.1";
+    return "3.2.2";
   }
 };
 _LightLivePreviewHoC.previewConstructors = {};

package/dist/modern/index.js CHANGED Viewed

@@ -39,7 +39,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
   static unsubscribeOnEntryChange() {
   }
   static getSdkVersion() {
-    return "3.2.1";
+    return "3.2.2";
   }
 };
 _LightLivePreviewHoC.previewConstructors = {};

package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs CHANGED Viewed

@@ -86,7 +86,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: import_configManager.default.get().ssr,
         href: window.location.href,
-        sdkVersion: "3.2.1",
+        sdkVersion: "3.2.2",
         mode: import_configManager.default.get().mode
       }
     }

package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js CHANGED Viewed

@@ -52,7 +52,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: Config.get().ssr,
         href: window.location.href,
-        sdkVersion: "3.2.1",
+        sdkVersion: "3.2.2",
         mode: Config.get().mode
       }
     }

package/dist/modern/preview/contentstack-live-preview-HOC.cjs CHANGED Viewed

@@ -227,7 +227,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "3.2.1";
+    return "3.2.2";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/modern/preview/contentstack-live-preview-HOC.js CHANGED Viewed

@@ -195,7 +195,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "3.2.1";
+    return "3.2.2";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs CHANGED Viewed

@@ -180,7 +180,8 @@ var VariantRevertDropdown = (props) => {
     closeDropdown,
     invertTooltipPosition,
     toggleVariantDropdown,
-    variantStatus = BASE_VARIANT_STATUS
+    variantStatus = BASE_VARIANT_STATUS,
+    disabled
   } = props;
   const dropdownRef = (0, import_compat.useRef)(null);
   (0, import_useHandleOutsideClick.default)(dropdownRef, closeDropdown);
@@ -205,6 +206,7 @@ var VariantRevertDropdown = (props) => {
         style: { padding: "6px" },
         "data-tooltip": "Variant",
         "data-testid": `visual-builder-canvas-variant-icon`,
+        disabled,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variant.VariantIcon, {})
       }
     );
@@ -220,6 +222,7 @@ var VariantRevertDropdown = (props) => {
         "data-tooltip": "Variant Revert",
         "data-testid": `visual-builder-canvas-variant-revert`,
         onClick: toggleVariantDropdown,
+        disabled,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variant.VariantIcon, {}),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, { open: props.isOpen })

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useRef, useEffect } from \"preact/compat\";\nimport { visualBuilderStyles } from \"../../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../../utils/visualBuilderPostMessage\";\nimport { CslpData } from \"../../../cslp/types/cslp.types\";\nimport { VariantIcon } from \"../icons/variant\";\nimport { CaretIcon } from \"../icons\";\nimport useHandleOutsideClick from \"./useHandleOutsideClick\";\n\nexport interface IVariantStatus {\n fieldLevelCustomizations: boolean;\n isBaseModified: boolean;\n isAddedInstances: boolean;\n isDeletedInstances: boolean;\n isOrderChanged: boolean;\n}\n\nexport type TFieldRevertActionCallback =\n \| \"revert_to_base_entry_value\"\n \| \"revert_added_instances\"\n \| \"restore_deleted_instances\"\n \| \"reset_field_level_customizations\"\n \| \"restore_sorted_instances\";\n\ninterface FieldRevertComponentProps {\n fieldDataName: string;\n fieldMetadata: CslpData;\n isOpen: boolean;\n closeDropdown: () => void;\n variantStatus?: IVariantStatus;\n}\n\ninterface IItem {\n label: string;\n action: TFieldRevertActionCallback;\n id: string;\n testId: string;\n fieldDataName: string;\n}\n\nexport const BASE_VARIANT_STATUS: IVariantStatus = {\n isAddedInstances: false,\n isBaseModified: false,\n isDeletedInstances: false,\n isOrderChanged: false,\n fieldLevelCustomizations: false,\n};\n\nexport async function getFieldVariantStatus(\n fieldMetadata: CslpData\n): Promise<IVariantStatus \| undefined> {\n try {\n const result = await visualBuilderPostMessage?.send<IVariantStatus>(\n \"get-field-variant-status\",\n fieldMetadata\n );\n return result;\n } catch (error) {\n console.error(\"Failed to get field variant status:\", error);\n }\n}\n\nexport const FieldRevertComponent = (props: FieldRevertComponentProps) => {\n const {\n fieldDataName,\n fieldMetadata,\n variantStatus = BASE_VARIANT_STATUS,\n isOpen,\n closeDropdown,\n } = props;\n\n const getDropdownItems = () => {\n const {\n isAddedInstances,\n isDeletedInstances,\n isBaseModified,\n isOrderChanged,\n fieldLevelCustomizations,\n } = variantStatus;\n\n const dropdownItems: IItem[] = [];\n\n if (isBaseModified) {\n dropdownItems.push({\n label: \"Revert to base entry value\",\n action: \"revert_to_base_entry_value\",\n id: `iframe-cs-variant-field-${fieldDataName}-revert`,\n testId: `iframe-cs-variant-field-${fieldDataName}-revert`,\n fieldDataName,\n });\n }\n\n if (isAddedInstances) {\n dropdownItems.push({\n label: \"Revert added instances\",\n action: \"revert_added_instances\",\n id: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n testId: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n fieldDataName,\n });\n }\n\n if (isDeletedInstances) {\n dropdownItems.push({\n label: \"Restore deleted instances\",\n action: \"restore_deleted_instances\",\n id: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n testId: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n fieldDataName,\n });\n }\n\n if (fieldLevelCustomizations) {\n dropdownItems.push({\n label: \"Reset field-level customizations\",\n action: \"reset_field_level_customizations\",\n id: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n testId: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n fieldDataName,\n });\n }\n\n if (isOrderChanged) {\n dropdownItems.push({\n label: \"Restore sorted instances\",\n action: \"restore_sorted_instances\",\n id: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n testId: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n fieldDataName,\n });\n }\n\n return dropdownItems;\n };\n\n const dropdownItems = getDropdownItems();\n\n function handleOnClick(item: IItem) {\n const { fieldDataName, action } = item;\n visualBuilderPostMessage?.send(\"send-variant-revert-action-trigger\", {\n fieldDataName,\n action,\n euid: fieldMetadata.entry_uid,\n ct_uid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n });\n }\n\n return (\n <div\n className={classNames(\n \"variant-field-revert-component\",\n visualBuilderStyles()[\"variant-field-revert-component\"]\n )}\n onClick={(e) => e.stopPropagation()}\n >\n {isOpen && (\n <div\n data-testid=\"variant-field-revert-component__dropdown-content\"\n className={classNames(\n \"variant-field-revert-component__dropdown-content\",\n visualBuilderStyles()[\n \"variant-field-revert-component__dropdown-content\"\n ]\n )}\n >\n {dropdownItems.map((item) => (\n <div\n className={classNames(\n \"variant-field-revert-component__dropdown-content__list-item\",\n visualBuilderStyles()[\n \"variant-field-revert-component__dropdown-content__list-item\"\n ]\n )}\n onClick={(e) => {\n e.preventDefault();\n handleOnClick(item);\n closeDropdown();\n }}\n key={item.id}\n data-testid={item.testId}\n >\n <span>{item.label}</span>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n\nexport const VariantRevertDropdown = (props: any) => {\n const {\n closeDropdown,\n invertTooltipPosition,\n toggleVariantDropdown,\n variantStatus = BASE_VARIANT_STATUS,\n } = props;\n const dropdownRef = useRef<HTMLDivElement>(null);\n useHandleOutsideClick(dropdownRef, closeDropdown);\n const hasDropdownItems = Object.values(variantStatus).some(\n (value) => value\n );\n\n const buttonClassNames = classNames(\n \"visual-builder__button visual-builder__button--secondary\",\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\"visual-builder__button--secondary\"],\n visualBuilderStyles()[\"visual-builder__tooltip\"],\n {\n \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n invertTooltipPosition,\n }\n );\n\n if (!hasDropdownItems) {\n return (\n <button\n className={classNames(buttonClassNames)}\n style={{ padding: \"6px\" }}\n data-tooltip={\"Variant\"}\n data-testid={`visual-builder-canvas-variant-icon`}\n >\n <VariantIcon />\n </button>\n );\n }\n return (\n <div ref={dropdownRef}>\n <button\n className={classNames(\n buttonClassNames,\n visualBuilderStyles()[\"visual-builder__variant-button\"]\n )}\n data-tooltip={\"Variant Revert\"}\n data-testid={`visual-builder-canvas-variant-revert`}\n onClick={toggleVariantDropdown}\n >\n <VariantIcon />\n <CaretIcon open={props.isOpen} />\n </button>\n <FieldRevertComponent {...props} />\n </div>\n );\n};\n"],"mappings":"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","names":["visualBuilderPostMessage","dropdownItems","fieldDataName","classNames","useHandleOutsideClick"]}
1	+ {"version":3,"sources":["../../../../../src/visualBuilder/components/FieldRevert/FieldRevertComponent.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useRef, useEffect } from \"preact/compat\";\nimport { visualBuilderStyles } from \"../../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../../utils/visualBuilderPostMessage\";\nimport { CslpData } from \"../../../cslp/types/cslp.types\";\nimport { VariantIcon } from \"../icons/variant\";\nimport { CaretIcon } from \"../icons\";\nimport useHandleOutsideClick from \"./useHandleOutsideClick\";\n\nexport interface IVariantStatus {\n fieldLevelCustomizations: boolean;\n isBaseModified: boolean;\n isAddedInstances: boolean;\n isDeletedInstances: boolean;\n isOrderChanged: boolean;\n}\n\nexport type TFieldRevertActionCallback =\n \| \"revert_to_base_entry_value\"\n \| \"revert_added_instances\"\n \| \"restore_deleted_instances\"\n \| \"reset_field_level_customizations\"\n \| \"restore_sorted_instances\";\n\ninterface FieldRevertComponentProps {\n fieldDataName: string;\n fieldMetadata: CslpData;\n isOpen: boolean;\n closeDropdown: () => void;\n variantStatus?: IVariantStatus;\n}\n\ninterface IItem {\n label: string;\n action: TFieldRevertActionCallback;\n id: string;\n testId: string;\n fieldDataName: string;\n}\n\nexport const BASE_VARIANT_STATUS: IVariantStatus = {\n isAddedInstances: false,\n isBaseModified: false,\n isDeletedInstances: false,\n isOrderChanged: false,\n fieldLevelCustomizations: false,\n};\n\nexport async function getFieldVariantStatus(\n fieldMetadata: CslpData\n): Promise<IVariantStatus \| undefined> {\n try {\n const result = await visualBuilderPostMessage?.send<IVariantStatus>(\n \"get-field-variant-status\",\n fieldMetadata\n );\n return result;\n } catch (error) {\n console.error(\"Failed to get field variant status:\", error);\n }\n}\n\nexport const FieldRevertComponent = (props: FieldRevertComponentProps) => {\n const {\n fieldDataName,\n fieldMetadata,\n variantStatus = BASE_VARIANT_STATUS,\n isOpen,\n closeDropdown,\n } = props;\n\n const getDropdownItems = () => {\n const {\n isAddedInstances,\n isDeletedInstances,\n isBaseModified,\n isOrderChanged,\n fieldLevelCustomizations,\n } = variantStatus;\n\n const dropdownItems: IItem[] = [];\n\n if (isBaseModified) {\n dropdownItems.push({\n label: \"Revert to base entry value\",\n action: \"revert_to_base_entry_value\",\n id: `iframe-cs-variant-field-${fieldDataName}-revert`,\n testId: `iframe-cs-variant-field-${fieldDataName}-revert`,\n fieldDataName,\n });\n }\n\n if (isAddedInstances) {\n dropdownItems.push({\n label: \"Revert added instances\",\n action: \"revert_added_instances\",\n id: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n testId: `iframe-cs-variant-field-${fieldDataName}-revert-added-instances`,\n fieldDataName,\n });\n }\n\n if (isDeletedInstances) {\n dropdownItems.push({\n label: \"Restore deleted instances\",\n action: \"restore_deleted_instances\",\n id: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n testId: `iframe-cs-variant-field-${fieldDataName}-restore-deleted-instances`,\n fieldDataName,\n });\n }\n\n if (fieldLevelCustomizations) {\n dropdownItems.push({\n label: \"Reset field-level customizations\",\n action: \"reset_field_level_customizations\",\n id: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n testId: `iframe-cs-variant-field-${fieldDataName}-reset-field-level-customizations`,\n fieldDataName,\n });\n }\n\n if (isOrderChanged) {\n dropdownItems.push({\n label: \"Restore sorted instances\",\n action: \"restore_sorted_instances\",\n id: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n testId: `iframe-cs-variant-field-${fieldDataName}-restore-sorted-instances`,\n fieldDataName,\n });\n }\n\n return dropdownItems;\n };\n\n const dropdownItems = getDropdownItems();\n\n function handleOnClick(item: IItem) {\n const { fieldDataName, action } = item;\n visualBuilderPostMessage?.send(\"send-variant-revert-action-trigger\", {\n fieldDataName,\n action,\n euid: fieldMetadata.entry_uid,\n ct_uid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n });\n }\n\n return (\n <div\n className={classNames(\n \"variant-field-revert-component\",\n visualBuilderStyles()[\"variant-field-revert-component\"]\n )}\n onClick={(e) => e.stopPropagation()}\n >\n {isOpen && (\n <div\n data-testid=\"variant-field-revert-component__dropdown-content\"\n className={classNames(\n \"variant-field-revert-component__dropdown-content\",\n visualBuilderStyles()[\n \"variant-field-revert-component__dropdown-content\"\n ]\n )}\n >\n {dropdownItems.map((item) => (\n <div\n className={classNames(\n \"variant-field-revert-component__dropdown-content__list-item\",\n visualBuilderStyles()[\n \"variant-field-revert-component__dropdown-content__list-item\"\n ]\n )}\n onClick={(e) => {\n e.preventDefault();\n handleOnClick(item);\n closeDropdown();\n }}\n key={item.id}\n data-testid={item.testId}\n >\n <span>{item.label}</span>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n\nexport const VariantRevertDropdown = (props: any) => {\n const {\n closeDropdown,\n invertTooltipPosition,\n toggleVariantDropdown,\n variantStatus = BASE_VARIANT_STATUS,\n disabled,\n } = props;\n const dropdownRef = useRef<HTMLDivElement>(null);\n useHandleOutsideClick(dropdownRef, closeDropdown);\n const hasDropdownItems = Object.values(variantStatus).some(\n (value) => value\n );\n\n const buttonClassNames = classNames(\n \"visual-builder__button visual-builder__button--secondary\",\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\"visual-builder__button--secondary\"],\n visualBuilderStyles()[\"visual-builder__tooltip\"],\n {\n \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n invertTooltipPosition,\n }\n );\n\n if (!hasDropdownItems) {\n return (\n <button\n className={classNames(buttonClassNames)}\n style={{ padding: \"6px\" }}\n data-tooltip={\"Variant\"}\n data-testid={`visual-builder-canvas-variant-icon`}\n disabled={disabled}\n >\n <VariantIcon />\n </button>\n );\n }\n return (\n <div ref={dropdownRef}>\n <button\n className={classNames(\n buttonClassNames,\n visualBuilderStyles()[\"visual-builder__variant-button\"]\n )}\n data-tooltip={\"Variant Revert\"}\n data-testid={`visual-builder-canvas-variant-revert`}\n onClick={toggleVariantDropdown}\n disabled={disabled}\n >\n <VariantIcon />\n <CaretIcon open={props.isOpen} />\n </button>\n <FieldRevertComponent {...props} />\n </div>\n );\n};\n"],"mappings":"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","names":["visualBuilderPostMessage","dropdownItems","fieldDataName","classNames","useHandleOutsideClick"]}

package/dist/modern/visualBuilder/components/FieldRevert/FieldRevertComponent.js CHANGED Viewed

@@ -145,7 +145,8 @@ var VariantRevertDropdown = (props) => {
     closeDropdown,
     invertTooltipPosition,
     toggleVariantDropdown,
-    variantStatus = BASE_VARIANT_STATUS
+    variantStatus = BASE_VARIANT_STATUS,
+    disabled
   } = props;
   const dropdownRef = useRef(null);
   useHandleOutsideClick(dropdownRef, closeDropdown);
@@ -170,6 +171,7 @@ var VariantRevertDropdown = (props) => {
         style: { padding: "6px" },
         "data-tooltip": "Variant",
         "data-testid": `visual-builder-canvas-variant-icon`,
+        disabled,
         children: /* @__PURE__ */ jsx(VariantIcon, {})
       }
     );
@@ -185,6 +187,7 @@ var VariantRevertDropdown = (props) => {
         "data-tooltip": "Variant Revert",
         "data-testid": `visual-builder-canvas-variant-revert`,
         onClick: toggleVariantDropdown,
+        disabled,
         children: [
           /* @__PURE__ */ jsx(VariantIcon, {}),
           /* @__PURE__ */ jsx(CaretIcon, { open: props.isOpen })