npm - @contentstack/live-preview-utils - Versions diffs - 3.0.2 → 3.1.0 - Mend

@contentstack/live-preview-utils 3.0.2 → 3.1.0

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

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

@@ -34,8 +34,8 @@ import { getDOMEditStack } from "../utils/getCsDataOfElement.js";
 import { VariantIcon } from "./icons/variant.js";
 import {
   BASE_VARIANT_STATUS,
-  FieldRevertComponent,
-  getFieldVariantStatus
+  getFieldVariantStatus,
+  VariantRevertDropdown
 } from "./FieldRevert/FieldRevertComponent.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 var TOOLTIP_TOP_EDGE_BUFFER = 96;
@@ -264,132 +264,131 @@ function FieldToolbarComponent(props) {
       [visualBuilderStyles()["visual-builder__tooltip--bottom"]]: invertTooltipPosition
     }
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: classNames(
         "visual-builder__field-toolbar-container",
         visualBuilderStyles()["visual-builder__field-toolbar-container"]
       ),
-      children: [
-        isVariant && /* @__PURE__ */ jsx(
-          FieldRevertComponent,
-          {
-            fieldDataName: fieldMetadata.fieldPathWithIndex,
-            fieldMetadata,
-            variantStatus: fieldVariantStatus,
-            isOpen: isOpenVariantRevert,
-            closeDropdown: closeVariantDropdown
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(
-              "visual-builder__focused-toolbar__multiple-field-toolbar",
-              visualBuilderStyles()["visual-builder__focused-toolbar__multiple-field-toolbar"]
-            ),
-            "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar",
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: classNames(
-                  "visual-builder__focused-toolbar__button-group",
-                  visualBuilderStyles()["visual-builder__focused-toolbar__button-group"]
-                ),
-                children: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  isVariant ? variantButton : null,
-                  isMultiple && !isWholeMultipleField ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
-                        className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": direction === "vertical" ? "Move up" : "Move left",
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleMoveInstance(
-                            fieldMetadata,
-                            "previous"
-                          );
-                        },
-                        disabled: disableMoveLeft,
-                        children: /* @__PURE__ */ jsx(
-                          MoveLeftIcon,
-                          {
-                            className: classNames({
-                              "visual-builder__rotate--90": direction === "vertical",
-                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
-                            }),
-                            disabled: disableMoveLeft
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
-                        className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": direction === "vertical" ? "Move down" : "Move right",
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleMoveInstance(
-                            fieldMetadata,
-                            "next"
-                          );
-                        },
-                        disabled: disableMoveRight,
-                        children: /* @__PURE__ */ jsx(
-                          MoveRightIcon,
-                          {
-                            className: classNames({
-                              "visual-builder__rotate--90": direction === "vertical",
-                              [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
-                            }),
-                            disabled: disableMoveRight
-                          }
-                        )
-                      }
-                    ),
-                    isModalEditable ? editButton : null,
-                    formButton,
-                    isReplaceAllowed ? replaceButton : null,
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button",
-                        className: multipleFieldToolbarButtonClasses,
-                        "data-tooltip": "Delete",
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleDeleteInstance(fieldMetadata);
-                        },
-                        children: /* @__PURE__ */ jsx(DeleteIcon, {})
-                      }
-                    )
-                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    isModalEditable ? editButton : null,
-                    isReplaceAllowed ? replaceButton : null,
-                    formButton,
-                    fieldSchema ? /* @__PURE__ */ jsx(
-                      CommentIcon,
-                      {
-                        fieldMetadata,
-                        fieldSchema,
-                        invertTooltipPosition
-                      }
-                    ) : null
-                  ] })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(
+            "visual-builder__focused-toolbar__multiple-field-toolbar",
+            visualBuilderStyles()["visual-builder__focused-toolbar__multiple-field-toolbar"]
+          ),
+          "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar",
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(
+                "visual-builder__focused-toolbar__button-group",
+                visualBuilderStyles()["visual-builder__focused-toolbar__button-group"]
+              ),
+              children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                isVariant ? /* @__PURE__ */ jsx(
+                  VariantRevertDropdown,
+                  {
+                    fieldDataName: fieldMetadata.fieldPathWithIndex,
+                    fieldMetadata,
+                    variantStatus: fieldVariantStatus,
+                    isOpen: isOpenVariantRevert,
+                    closeDropdown: closeVariantDropdown,
+                    invertTooltipPosition,
+                    toggleVariantDropdown
+                  }
+                ) : null,
+                isMultiple && !isWholeMultipleField ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button",
+                      className: multipleFieldToolbarButtonClasses,
+                      "data-tooltip": direction === "vertical" ? "Move up" : "Move left",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleMoveInstance(
+                          fieldMetadata,
+                          "previous"
+                        );
+                      },
+                      disabled: disableMoveLeft,
+                      children: /* @__PURE__ */ jsx(
+                        MoveLeftIcon,
+                        {
+                          className: classNames({
+                            "visual-builder__rotate--90": direction === "vertical",
+                            [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
+                          }),
+                          disabled: disableMoveLeft
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button",
+                      className: multipleFieldToolbarButtonClasses,
+                      "data-tooltip": direction === "vertical" ? "Move down" : "Move right",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleMoveInstance(
+                          fieldMetadata,
+                          "next"
+                        );
+                      },
+                      disabled: disableMoveRight,
+                      children: /* @__PURE__ */ jsx(
+                        MoveRightIcon,
+                        {
+                          className: classNames({
+                            "visual-builder__rotate--90": direction === "vertical",
+                            [visualBuilderStyles()["visual-builder__rotate--90"]]: direction === "vertical"
+                          }),
+                          disabled: disableMoveRight
+                        }
+                      )
+                    }
+                  ),
+                  isModalEditable ? editButton : null,
+                  formButton,
+                  isReplaceAllowed ? replaceButton : null,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "data-testid": "visual-builder__focused-toolbar__multiple-field-toolbar__delete-button",
+                      className: multipleFieldToolbarButtonClasses,
+                      "data-tooltip": "Delete",
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleDeleteInstance(fieldMetadata);
+                      },
+                      children: /* @__PURE__ */ jsx(DeleteIcon, {})
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  isModalEditable ? editButton : null,
+                  isReplaceAllowed ? replaceButton : null,
+                  formButton,
+                  fieldSchema ? /* @__PURE__ */ jsx(
+                    CommentIcon,
+                    {
+                      fieldMetadata,
+                      fieldSchema,
+                      invertTooltipPosition
+                    }
+                  ) : null
                 ] })
-              }
-            )
-          }
-        )
-      ]
+              ] })
+            }
+          )
+        }
+      )
     }
   );
 }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n ALLOWED_MODAL_EDITABLE_FIELD,\n ALLOWED_REPLACE_FIELDS,\n DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n handleDeleteInstance,\n handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n CaretIcon,\n DeleteIcon,\n MoveLeftIcon,\n MoveRightIcon,\n ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n BASE_VARIANT_STATUS,\n FieldRevertComponent,\n getFieldVariantStatus,\n IVariantStatus,\n} from \"./FieldRevert/FieldRevertComponent\";\n\nexport type FieldDetails = Pick<\n VisualBuilderCslpEventDetails,\n \"editableElement\" \| \"fieldMetadata\"\n>;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n eventDetails: VisualBuilderCslpEventDetails;\n hideOverlay: () => void;\n}\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n // TODO avoid sending whole fieldMetadata\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n {\n fieldMetadata,\n }\n );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n const isMultipleInstance =\n fieldMetadata.multipleFieldMetadata.index > -1 &&\n fieldMetadata.fieldPathWithIndex ===\n fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n const entryPath = isMultipleInstance\n ? fieldMetadata.instance.fieldPathWithIndex\n : fieldMetadata.fieldPathWithIndex;\n\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n {\n entry_uid: fieldMetadata.entry_uid,\n content_type_uid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n fieldPath: fieldMetadata.fieldPath,\n fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n entryPath,\n }\n );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n { fieldMetadata }\n );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n const { editableElement, fieldMetadata, cslpData } = eventDetails;\n visualBuilderPostMessage\n ?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {\n fieldMetadata,\n cslpData,\n })\n .then(() => {\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.FOCUS_FIELD,\n {\n DOMEditStack: getDOMEditStack(editableElement),\n }\n );\n });\n}\n\nfunction FieldToolbarComponent(\n props: MultipleFieldToolbarProps\n): JSX.Element \| null {\n const { eventDetails } = props;\n const { fieldMetadata, editableElement: targetElement } = eventDetails;\n\n const parentPath =\n fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue \|\|\n \"\";\n const direction = getChildrenDirection(targetElement, parentPath);\n const isVariant = !!fieldMetadata?.variant;\n const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap \| null>(\n null\n );\n const [fieldVariantStatus, setFieldVariantStatus] =\n useState<IVariantStatus>(BASE_VARIANT_STATUS);\n const [isOpenVariantRevert, setIsOpenVariantRevert] =\n useState<boolean>(false);\n\n let isModalEditable = false;\n let isReplaceAllowed = false;\n let isMultiple = false;\n let Icon = null;\n let fieldType = null;\n let isWholeMultipleField = false;\n\n if (fieldSchema) {\n const { isDisabled } = isFieldDisabled(fieldSchema, {\n editableElement: targetElement,\n fieldMetadata,\n });\n\n // field is disabled, no actions needed\n if (isDisabled) {\n return null;\n }\n\n fieldType = getFieldType(fieldSchema);\n isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);\n\n Icon = fieldIcons[fieldType];\n\n isMultiple = fieldSchema.multiple \|\| false;\n if (fieldType === FieldDataType.REFERENCE)\n isMultiple = (fieldSchema as IReferenceContentTypeSchema)\n .field_metadata.ref_multiple;\n\n // field is multiple but an instance is not selected\n // instead the whole field (all instances) is selected.\n // Currently, when whole featured_blogs is selected in canvas,\n // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n // cannot rely on -1 index, as the non-negative index then refers to the index of\n // the featured_blogs block in page_components\n // It is not needed except taxanomy.\n isWholeMultipleField =\n isMultiple &&\n (fieldMetadata.fieldPathWithIndex ===\n fieldMetadata.instance.fieldPathWithIndex \|\|\n fieldMetadata.multipleFieldMetadata?.index === -1);\n\n if (\n DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&\n isWholeMultipleField\n ) {\n return null;\n }\n }\n\n const invertTooltipPosition =\n targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n const editButton = Icon ? (\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n className={classNames(\n \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\"visual-builder__button--secondary\"],\n visualBuilderStyles()[\"visual-builder__button--edit\"],\n visualBuilderStyles()[\"visual-builder__tooltip\"],\n {\n \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n invertTooltipPosition,\n }\n )}\n data-tooltip={\"Edit\"}\n onClick={(e) => {\n // TODO the listener for field path is attached to the common parent requiring\n // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n e.preventDefault();\n e.stopPropagation();\n handleEdit(fieldMetadata);\n }}\n >\n <Icon />\n </button>\n ) : null;\n\n const replaceButton = fieldType ? (\n <button\n className={classNames(\n \"visual-builder__replace-button 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 data-tooltip={\"Replace\"}\n data-testid={`visual-builder-replace-${fieldType}`}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n if (fieldType === FieldDataType.REFERENCE) {\n handleReplaceReference(fieldMetadata);\n return;\n } else if (fieldType === FieldDataType.FILE) {\n handleReplaceAsset(fieldMetadata);\n return;\n }\n }}\n >\n <ReplaceAssetIcon />\n </button>\n ) : null;\n\n const formButton = (\n <button\n className={classNames(\n \"visual-builder__replace-button 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 data-tooltip={\"Form\"}\n data-testid={`visual-builder-form`}\n onClick={(e) => {\n handleFormFieldFocus(eventDetails);\n }}\n >\n <FormIcon />\n </button>\n );\n\n const toggleVariantDropdown = () => {\n setIsOpenVariantRevert(!isOpenVariantRevert);\n };\n\n const closeVariantDropdown = () => {\n setIsOpenVariantRevert(false);\n };\n\n const variantButton = (\n <button\n className={classNames(\n \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\"visual-builder__button--secondary\"],\n visualBuilderStyles()[\"visual-builder__tooltip\"],\n visualBuilderStyles()[\"visual-builder__variant-button\"],\n {\n \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n invertTooltipPosition,\n }\n )}\n data-tooltip={\"Variant Revert\"}\n data-testid={`visual-builder-canvas-variant-revert`}\n onClick={toggleVariantDropdown}\n >\n <VariantIcon />\n <CaretIcon open={isOpenVariantRevert} />\n </button>\n );\n\n const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n const disableMoveLeft = indexOfElement === 0; // first element\n const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n useEffect(() => {\n async function fetchFieldSchema() {\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n );\n if (fieldSchema) {\n setFieldSchema(fieldSchema);\n }\n const variantStatus = await getFieldVariantStatus(fieldMetadata);\n setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n }\n fetchFieldSchema();\n }, [fieldMetadata]);\n\n useEffect(() => {\n const event = visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n (args: { data: { path: string } }) => {\n if (\n args.data?.path ===\n fieldMetadata.instance.fieldPathWithIndex\n ) {\n props.hideOverlay();\n }\n }\n );\n return () => {\n event?.unregister();\n };\n }, []);\n\n const multipleFieldToolbarButtonClasses = 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 return (\n <div\n className={classNames(\n \"visual-builder__field-toolbar-container\",\n visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n )}\n >\n {isVariant && (\n <FieldRevertComponent\n fieldDataName={fieldMetadata.fieldPathWithIndex}\n fieldMetadata={fieldMetadata}\n variantStatus={fieldVariantStatus}\n isOpen={isOpenVariantRevert}\n closeDropdown={closeVariantDropdown}\n />\n )}\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__multiple-field-toolbar\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__multiple-field-toolbar\"\n ]\n )}\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar\"\n >\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__button-group\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__button-group\"\n ]\n )}\n >\n <>\n {isVariant ? variantButton : null}\n {isMultiple && !isWholeMultipleField ? (\n <>\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n className={\n multipleFieldToolbarButtonClasses\n }\n data-tooltip={\n direction === \"vertical\"\n ? \"Move up\"\n : \"Move left\"\n }\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleMoveInstance(\n fieldMetadata,\n \"previous\"\n );\n }}\n disabled={disableMoveLeft}\n >\n <MoveLeftIcon\n className={classNames({\n \"visual-builder__rotate--90\":\n direction === \"vertical\",\n [visualBuilderStyles()[\n \"visual-builder__rotate--90\"\n ]]: direction === \"vertical\",\n })}\n disabled={disableMoveLeft}\n />\n </button>\n\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n className={\n multipleFieldToolbarButtonClasses\n }\n data-tooltip={\n direction === \"vertical\"\n ? \"Move down\"\n : \"Move right\"\n }\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleMoveInstance(\n fieldMetadata,\n \"next\"\n );\n }}\n disabled={disableMoveRight}\n >\n <MoveRightIcon\n className={classNames({\n \"visual-builder__rotate--90\":\n direction === \"vertical\",\n [visualBuilderStyles()[\n \"visual-builder__rotate--90\"\n ]]: direction === \"vertical\",\n })}\n disabled={disableMoveRight}\n />\n </button>\n\n {isModalEditable ? editButton : null}\n {formButton}\n {isReplaceAllowed ? replaceButton : null}\n\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n className={\n multipleFieldToolbarButtonClasses\n }\n data-tooltip={\"Delete\"}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleDeleteInstance(fieldMetadata);\n }}\n >\n <DeleteIcon />\n </button>\n </>\n ) : (\n <>\n {isModalEditable ? editButton : null}\n {isReplaceAllowed ? replaceButton : null}\n {formButton}\n {fieldSchema ? (\n <CommentIcon\n fieldMetadata={fieldMetadata}\n fieldSchema={fieldSchema}\n invertTooltipPosition={\n invertTooltipPosition\n }\n />\n ) : null}\n </>\n )}\n </>\n </div>\n </div>\n </div>\n );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["fieldSchema"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/FieldToolbar.tsx"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport getChildrenDirection from \"../utils/getChildrenDirection\";\nimport {\n ALLOWED_MODAL_EDITABLE_FIELD,\n ALLOWED_REPLACE_FIELDS,\n DEFAULT_MULTIPLE_FIELDS,\n} from \"../utils/constants\";\nimport { getFieldType } from \"../utils/getFieldType\";\nimport {\n handleDeleteInstance,\n handleMoveInstance,\n} from \"../utils/instanceHandlers\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { FieldDataType, ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport {\n CaretIcon,\n DeleteIcon,\n MoveLeftIcon,\n MoveRightIcon,\n ReplaceAssetIcon,\n} from \"./icons\";\nimport { fieldIcons } from \"./icons/fields\";\nimport classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport CommentIcon from \"./CommentIcon\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport { IReferenceContentTypeSchema } from \"../../cms/types/contentTypeSchema.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FormIcon } from \"./icons\";\nimport { getDOMEditStack } from \"../utils/getCsDataOfElement\";\nimport { VariantIcon } from \"./icons/variant\";\nimport {\n BASE_VARIANT_STATUS,\n FieldRevertComponent,\n getFieldVariantStatus,\n IVariantStatus,\n VariantRevertDropdown,\n} from \"./FieldRevert/FieldRevertComponent\";\n\nexport type FieldDetails = Pick<\n VisualBuilderCslpEventDetails,\n \"editableElement\" \| \"fieldMetadata\"\n>;\n\nconst TOOLTIP_TOP_EDGE_BUFFER = 96;\n\ninterface MultipleFieldToolbarProps {\n eventDetails: VisualBuilderCslpEventDetails;\n hideOverlay: () => void;\n}\n\nfunction handleReplaceAsset(fieldMetadata: CslpData) {\n // TODO avoid sending whole fieldMetadata\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.OPEN_ASSET_MODAL,\n {\n fieldMetadata,\n }\n );\n}\n\nfunction handleReplaceReference(fieldMetadata: CslpData) {\n const isMultipleInstance =\n fieldMetadata.multipleFieldMetadata.index > -1 &&\n fieldMetadata.fieldPathWithIndex ===\n fieldMetadata.multipleFieldMetadata.parentDetails?.parentPath;\n const entryPath = isMultipleInstance\n ? fieldMetadata.instance.fieldPathWithIndex\n : fieldMetadata.fieldPathWithIndex;\n\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.OPEN_REFERENCE_MODAL,\n {\n entry_uid: fieldMetadata.entry_uid,\n content_type_uid: fieldMetadata.content_type_uid,\n locale: fieldMetadata.locale,\n fieldPath: fieldMetadata.fieldPath,\n fieldPathWithIndex: fieldMetadata.fieldPathWithIndex,\n entryPath,\n }\n );\n}\n\nfunction handleEdit(fieldMetadata: CslpData) {\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,\n { fieldMetadata }\n );\n}\n\nfunction handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {\n const { editableElement, fieldMetadata, cslpData } = eventDetails;\n visualBuilderPostMessage\n ?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {\n fieldMetadata,\n cslpData,\n })\n .then(() => {\n visualBuilderPostMessage?.send(\n VisualBuilderPostMessageEvents.FOCUS_FIELD,\n {\n DOMEditStack: getDOMEditStack(editableElement),\n }\n );\n });\n}\n\nfunction FieldToolbarComponent(\n props: MultipleFieldToolbarProps\n): JSX.Element \| null {\n const { eventDetails } = props;\n const { fieldMetadata, editableElement: targetElement } = eventDetails;\n\n const parentPath =\n fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue \|\|\n \"\";\n const direction = getChildrenDirection(targetElement, parentPath);\n const isVariant = !!fieldMetadata?.variant;\n const [fieldSchema, setFieldSchema] = useState<ISchemaFieldMap \| null>(\n null\n );\n const [fieldVariantStatus, setFieldVariantStatus] =\n useState<IVariantStatus>(BASE_VARIANT_STATUS);\n const [isOpenVariantRevert, setIsOpenVariantRevert] =\n useState<boolean>(false);\n\n let isModalEditable = false;\n let isReplaceAllowed = false;\n let isMultiple = false;\n let Icon = null;\n let fieldType = null;\n let isWholeMultipleField = false;\n\n if (fieldSchema) {\n const { isDisabled } = isFieldDisabled(fieldSchema, {\n editableElement: targetElement,\n fieldMetadata,\n });\n\n // field is disabled, no actions needed\n if (isDisabled) {\n return null;\n }\n\n fieldType = getFieldType(fieldSchema);\n isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);\n isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);\n\n Icon = fieldIcons[fieldType];\n\n isMultiple = fieldSchema.multiple \|\| false;\n if (fieldType === FieldDataType.REFERENCE)\n isMultiple = (fieldSchema as IReferenceContentTypeSchema)\n .field_metadata.ref_multiple;\n\n // field is multiple but an instance is not selected\n // instead the whole field (all instances) is selected.\n // Currently, when whole featured_blogs is selected in canvas,\n // the fieldPathWithIndex and instance.fieldPathWithIndex are the same\n // cannot rely on -1 index, as the non-negative index then refers to the index of\n // the featured_blogs block in page_components\n // It is not needed except taxanomy.\n isWholeMultipleField =\n isMultiple &&\n (fieldMetadata.fieldPathWithIndex ===\n fieldMetadata.instance.fieldPathWithIndex \|\|\n fieldMetadata.multipleFieldMetadata?.index === -1);\n\n if (\n DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&\n isWholeMultipleField\n ) {\n return null;\n }\n }\n\n const invertTooltipPosition =\n targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;\n\n const editButton = Icon ? (\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__edit-button\"\n className={classNames(\n \"visual-builder__button visual-builder__button--secondary visual-builder__button--edit\",\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\"visual-builder__button--secondary\"],\n visualBuilderStyles()[\"visual-builder__button--edit\"],\n visualBuilderStyles()[\"visual-builder__tooltip\"],\n {\n \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n invertTooltipPosition,\n }\n )}\n data-tooltip={\"Edit\"}\n onClick={(e) => {\n // TODO the listener for field path is attached to the common parent requiring\n // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown\n e.preventDefault();\n e.stopPropagation();\n handleEdit(fieldMetadata);\n }}\n >\n <Icon />\n </button>\n ) : null;\n\n const replaceButton = fieldType ? (\n <button\n className={classNames(\n \"visual-builder__replace-button 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 data-tooltip={\"Replace\"}\n data-testid={`visual-builder-replace-${fieldType}`}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n if (fieldType === FieldDataType.REFERENCE) {\n handleReplaceReference(fieldMetadata);\n return;\n } else if (fieldType === FieldDataType.FILE) {\n handleReplaceAsset(fieldMetadata);\n return;\n }\n }}\n >\n <ReplaceAssetIcon />\n </button>\n ) : null;\n\n const formButton = (\n <button\n className={classNames(\n \"visual-builder__replace-button 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 data-tooltip={\"Form\"}\n data-testid={`visual-builder-form`}\n onClick={(e) => {\n handleFormFieldFocus(eventDetails);\n }}\n >\n <FormIcon />\n </button>\n );\n\n const toggleVariantDropdown = () => {\n setIsOpenVariantRevert(!isOpenVariantRevert);\n };\n\n const closeVariantDropdown = () => {\n setIsOpenVariantRevert(false);\n };\n\n const variantButton = (\n <button\n className={classNames(\n \"visual-builder__variant-button visual-builder__button visual-builder__button--secondary\",\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\"visual-builder__button--secondary\"],\n visualBuilderStyles()[\"visual-builder__tooltip\"],\n visualBuilderStyles()[\"visual-builder__variant-button\"],\n {\n \"visual-builder__tooltip--bottom\": invertTooltipPosition,\n [visualBuilderStyles()[\"visual-builder__tooltip--bottom\"]]:\n invertTooltipPosition,\n }\n )}\n data-tooltip={\"Variant Revert\"}\n data-testid={`visual-builder-canvas-variant-revert`}\n onClick={toggleVariantDropdown}\n >\n <VariantIcon />\n <CaretIcon open={isOpenVariantRevert} />\n </button>\n );\n\n const totalElementCount = targetElement?.parentNode?.childElementCount ?? 1;\n const indexOfElement = fieldMetadata?.multipleFieldMetadata?.index;\n\n const disableMoveLeft = indexOfElement === 0; // first element\n const disableMoveRight = indexOfElement === totalElementCount - 1; // last element\n\n useEffect(() => {\n async function fetchFieldSchema() {\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n fieldMetadata.content_type_uid,\n fieldMetadata.fieldPath\n );\n if (fieldSchema) {\n setFieldSchema(fieldSchema);\n }\n const variantStatus = await getFieldVariantStatus(fieldMetadata);\n setFieldVariantStatus(variantStatus ?? BASE_VARIANT_STATUS);\n }\n fetchFieldSchema();\n }, [fieldMetadata]);\n\n useEffect(() => {\n const event = visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.DELETE_INSTANCE,\n (args: { data: { path: string } }) => {\n if (\n args.data?.path ===\n fieldMetadata.instance.fieldPathWithIndex\n ) {\n props.hideOverlay();\n }\n }\n );\n return () => {\n event?.unregister();\n };\n }, []);\n\n const multipleFieldToolbarButtonClasses = 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 return (\n <div\n className={classNames(\n \"visual-builder__field-toolbar-container\",\n visualBuilderStyles()[\"visual-builder__field-toolbar-container\"]\n )}\n >\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__multiple-field-toolbar\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__multiple-field-toolbar\"\n ]\n )}\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar\"\n >\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__button-group\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__button-group\"\n ]\n )}\n >\n <>\n {isVariant ? (\n <VariantRevertDropdown\n fieldDataName={fieldMetadata.fieldPathWithIndex}\n fieldMetadata={fieldMetadata}\n variantStatus={fieldVariantStatus}\n isOpen={isOpenVariantRevert}\n closeDropdown={closeVariantDropdown}\n invertTooltipPosition={invertTooltipPosition}\n toggleVariantDropdown={toggleVariantDropdown}\n />\n ) : null}\n {isMultiple && !isWholeMultipleField ? (\n <>\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button\"\n className={\n multipleFieldToolbarButtonClasses\n }\n data-tooltip={\n direction === \"vertical\"\n ? \"Move up\"\n : \"Move left\"\n }\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleMoveInstance(\n fieldMetadata,\n \"previous\"\n );\n }}\n disabled={disableMoveLeft}\n >\n <MoveLeftIcon\n className={classNames({\n \"visual-builder__rotate--90\":\n direction === \"vertical\",\n [visualBuilderStyles()[\n \"visual-builder__rotate--90\"\n ]]: direction === \"vertical\",\n })}\n disabled={disableMoveLeft}\n />\n </button>\n\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__move-right-button\"\n className={\n multipleFieldToolbarButtonClasses\n }\n data-tooltip={\n direction === \"vertical\"\n ? \"Move down\"\n : \"Move right\"\n }\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleMoveInstance(\n fieldMetadata,\n \"next\"\n );\n }}\n disabled={disableMoveRight}\n >\n <MoveRightIcon\n className={classNames({\n \"visual-builder__rotate--90\":\n direction === \"vertical\",\n [visualBuilderStyles()[\n \"visual-builder__rotate--90\"\n ]]: direction === \"vertical\",\n })}\n disabled={disableMoveRight}\n />\n </button>\n\n {isModalEditable ? editButton : null}\n {formButton}\n {isReplaceAllowed ? replaceButton : null}\n\n <button\n data-testid=\"visual-builder__focused-toolbar__multiple-field-toolbar__delete-button\"\n className={\n multipleFieldToolbarButtonClasses\n }\n data-tooltip={\"Delete\"}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleDeleteInstance(fieldMetadata);\n }}\n >\n <DeleteIcon />\n </button>\n </>\n ) : (\n <>\n {isModalEditable ? editButton : null}\n {isReplaceAllowed ? replaceButton : null}\n {formButton}\n {fieldSchema ? (\n <CommentIcon\n fieldMetadata={fieldMetadata}\n fieldSchema={fieldSchema}\n invertTooltipPosition={\n invertTooltipPosition\n }\n />\n ) : null}\n </>\n )}\n </>\n </div>\n </div>\n </div>\n );\n}\n\nexport default FieldToolbarComponent;\n"],"mappings":"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","names":["fieldSchema"]}

package/dist/modern/visualBuilder/components/icons/variant.cjs CHANGED Viewed

@@ -39,7 +39,7 @@ function VariantIcon() {
           "fill-rule": "evenodd",
           "clip-rule": "evenodd",
           d: "M4.41131 0.157165C4.34585 0.0589769 4.23565 0 4.11765 0C3.99964 0 3.88944 0.0589769 3.82398 0.157165L0.0592764 5.80422C-0.0197588 5.92278 -0.0197588 6.07722 0.0592764 6.19578L3.82398 11.8428C3.88944 11.941 3.99964 12 4.11765 12C4.23565 12 4.34585 11.941 4.41131 11.8428L6 9.4598L7.58869 11.8428C7.65415 11.941 7.76435 12 7.88235 12C8.00036 12 8.11056 11.941 8.17602 11.8428L11.9407 6.19578C12.0198 6.07722 12.0198 5.92278 11.9407 5.80422L8.17602 0.157165C8.11056 0.0589769 8.00036 0 7.88235 0C7.76435 0 7.65415 0.0589769 7.58869 0.157165L6 2.5402L4.41131 0.157165ZM5.57582 3.17647L4.11765 0.989215L0.777124 6L4.11765 11.0108L5.57582 8.82353L3.82398 6.19578C3.74495 6.07722 3.74495 5.92278 3.82398 5.80422L5.57582 3.17647ZM6 8.18726L4.54183 6L6 3.81274L7.45817 6L6 8.18726ZM6.42418 8.82353L8.17602 6.19578C8.25505 6.07722 8.25505 5.92278 8.17602 5.80422L6.42418 3.17647L7.88235 0.989215L11.2229 6L7.88235 11.0108L6.42418 8.82353Z",
-          fill: "white"
+          fill: "currentColor"
         }
       )
     }

package/dist/modern/visualBuilder/components/icons/variant.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/visualBuilder/components/icons/variant.tsx"],"sourcesContent":["import React from \"preact/compat\";\n\nexport function VariantIcon(): JSX.Element {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.41131 0.157165C4.34585 0.0589769 4.23565 0 4.11765 0C3.99964 0 3.88944 0.0589769 3.82398 0.157165L0.0592764 5.80422C-0.0197588 5.92278 -0.0197588 6.07722 0.0592764 6.19578L3.82398 11.8428C3.88944 11.941 3.99964 12 4.11765 12C4.23565 12 4.34585 11.941 4.41131 11.8428L6 9.4598L7.58869 11.8428C7.65415 11.941 7.76435 12 7.88235 12C8.00036 12 8.11056 11.941 8.17602 11.8428L11.9407 6.19578C12.0198 6.07722 12.0198 5.92278 11.9407 5.80422L8.17602 0.157165C8.11056 0.0589769 8.00036 0 7.88235 0C7.76435 0 7.65415 0.0589769 7.58869 0.157165L6 2.5402L4.41131 0.157165ZM5.57582 3.17647L4.11765 0.989215L0.777124 6L4.11765 11.0108L5.57582 8.82353L3.82398 6.19578C3.74495 6.07722 3.74495 5.92278 3.82398 5.80422L5.57582 3.17647ZM6 8.18726L4.54183 6L6 3.81274L7.45817 6L6 8.18726ZM6.42418 8.82353L8.17602 6.19578C8.25505 6.07722 8.25505 5.92278 8.17602 5.80422L6.42418 3.17647L7.88235 0.989215L11.2229 6L7.88235 11.0108L6.42418 8.82353Z\"\n fill=\"~~white~~\"\n />\n </svg>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWY;AATL,SAAS,cAA2B;AACvC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACG,aAAU;AAAA,UACV,aAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACT;AAAA;AAAA,EACJ;AAER;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/visualBuilder/components/icons/variant.tsx"],"sourcesContent":["import React from \"preact/compat\";\n\nexport function VariantIcon(): JSX.Element {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.41131 0.157165C4.34585 0.0589769 4.23565 0 4.11765 0C3.99964 0 3.88944 0.0589769 3.82398 0.157165L0.0592764 5.80422C-0.0197588 5.92278 -0.0197588 6.07722 0.0592764 6.19578L3.82398 11.8428C3.88944 11.941 3.99964 12 4.11765 12C4.23565 12 4.34585 11.941 4.41131 11.8428L6 9.4598L7.58869 11.8428C7.65415 11.941 7.76435 12 7.88235 12C8.00036 12 8.11056 11.941 8.17602 11.8428L11.9407 6.19578C12.0198 6.07722 12.0198 5.92278 11.9407 5.80422L8.17602 0.157165C8.11056 0.0589769 8.00036 0 7.88235 0C7.76435 0 7.65415 0.0589769 7.58869 0.157165L6 2.5402L4.41131 0.157165ZM5.57582 3.17647L4.11765 0.989215L0.777124 6L4.11765 11.0108L5.57582 8.82353L3.82398 6.19578C3.74495 6.07722 3.74495 5.92278 3.82398 5.80422L5.57582 3.17647ZM6 8.18726L4.54183 6L6 3.81274L7.45817 6L6 8.18726ZM6.42418 8.82353L8.17602 6.19578C8.25505 6.07722 8.25505 5.92278 8.17602 5.80422L6.42418 3.17647L7.88235 0.989215L11.2229 6L7.88235 11.0108L6.42418 8.82353Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWY;AATL,SAAS,cAA2B;AACvC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACG,aAAU;AAAA,UACV,aAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACT;AAAA;AAAA,EACJ;AAER;","names":[]}

package/dist/modern/visualBuilder/components/icons/variant.js CHANGED Viewed

@@ -17,7 +17,7 @@ function VariantIcon() {
           "fill-rule": "evenodd",
           "clip-rule": "evenodd",
           d: "M4.41131 0.157165C4.34585 0.0589769 4.23565 0 4.11765 0C3.99964 0 3.88944 0.0589769 3.82398 0.157165L0.0592764 5.80422C-0.0197588 5.92278 -0.0197588 6.07722 0.0592764 6.19578L3.82398 11.8428C3.88944 11.941 3.99964 12 4.11765 12C4.23565 12 4.34585 11.941 4.41131 11.8428L6 9.4598L7.58869 11.8428C7.65415 11.941 7.76435 12 7.88235 12C8.00036 12 8.11056 11.941 8.17602 11.8428L11.9407 6.19578C12.0198 6.07722 12.0198 5.92278 11.9407 5.80422L8.17602 0.157165C8.11056 0.0589769 8.00036 0 7.88235 0C7.76435 0 7.65415 0.0589769 7.58869 0.157165L6 2.5402L4.41131 0.157165ZM5.57582 3.17647L4.11765 0.989215L0.777124 6L4.11765 11.0108L5.57582 8.82353L3.82398 6.19578C3.74495 6.07722 3.74495 5.92278 3.82398 5.80422L5.57582 3.17647ZM6 8.18726L4.54183 6L6 3.81274L7.45817 6L6 8.18726ZM6.42418 8.82353L8.17602 6.19578C8.25505 6.07722 8.25505 5.92278 8.17602 5.80422L6.42418 3.17647L7.88235 0.989215L11.2229 6L7.88235 11.0108L6.42418 8.82353Z",
-          fill: "white"
+          fill: "currentColor"
         }
       )
     }

package/dist/modern/visualBuilder/components/icons/variant.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/visualBuilder/components/icons/variant.tsx"],"sourcesContent":["import React from \"preact/compat\";\n\nexport function VariantIcon(): JSX.Element {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.41131 0.157165C4.34585 0.0589769 4.23565 0 4.11765 0C3.99964 0 3.88944 0.0589769 3.82398 0.157165L0.0592764 5.80422C-0.0197588 5.92278 -0.0197588 6.07722 0.0592764 6.19578L3.82398 11.8428C3.88944 11.941 3.99964 12 4.11765 12C4.23565 12 4.34585 11.941 4.41131 11.8428L6 9.4598L7.58869 11.8428C7.65415 11.941 7.76435 12 7.88235 12C8.00036 12 8.11056 11.941 8.17602 11.8428L11.9407 6.19578C12.0198 6.07722 12.0198 5.92278 11.9407 5.80422L8.17602 0.157165C8.11056 0.0589769 8.00036 0 7.88235 0C7.76435 0 7.65415 0.0589769 7.58869 0.157165L6 2.5402L4.41131 0.157165ZM5.57582 3.17647L4.11765 0.989215L0.777124 6L4.11765 11.0108L5.57582 8.82353L3.82398 6.19578C3.74495 6.07722 3.74495 5.92278 3.82398 5.80422L5.57582 3.17647ZM6 8.18726L4.54183 6L6 3.81274L7.45817 6L6 8.18726ZM6.42418 8.82353L8.17602 6.19578C8.25505 6.07722 8.25505 5.92278 8.17602 5.80422L6.42418 3.17647L7.88235 0.989215L11.2229 6L7.88235 11.0108L6.42418 8.82353Z\"\n fill=\"~~white~~\"\n />\n </svg>\n );\n}\n"],"mappings":";;;AAWY;AATL,SAAS,cAA2B;AACvC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACG,aAAU;AAAA,UACV,aAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACT;AAAA;AAAA,EACJ;AAER;","names":[]}
1	+ {"version":3,"sources":["../../../../../src/visualBuilder/components/icons/variant.tsx"],"sourcesContent":["import React from \"preact/compat\";\n\nexport function VariantIcon(): JSX.Element {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M4.41131 0.157165C4.34585 0.0589769 4.23565 0 4.11765 0C3.99964 0 3.88944 0.0589769 3.82398 0.157165L0.0592764 5.80422C-0.0197588 5.92278 -0.0197588 6.07722 0.0592764 6.19578L3.82398 11.8428C3.88944 11.941 3.99964 12 4.11765 12C4.23565 12 4.34585 11.941 4.41131 11.8428L6 9.4598L7.58869 11.8428C7.65415 11.941 7.76435 12 7.88235 12C8.00036 12 8.11056 11.941 8.17602 11.8428L11.9407 6.19578C12.0198 6.07722 12.0198 5.92278 11.9407 5.80422L8.17602 0.157165C8.11056 0.0589769 8.00036 0 7.88235 0C7.76435 0 7.65415 0.0589769 7.58869 0.157165L6 2.5402L4.41131 0.157165ZM5.57582 3.17647L4.11765 0.989215L0.777124 6L4.11765 11.0108L5.57582 8.82353L3.82398 6.19578C3.74495 6.07722 3.74495 5.92278 3.82398 5.80422L5.57582 3.17647ZM6 8.18726L4.54183 6L6 3.81274L7.45817 6L6 8.18726ZM6.42418 8.82353L8.17602 6.19578C8.25505 6.07722 8.25505 5.92278 8.17602 5.80422L6.42418 3.17647L7.88235 0.989215L11.2229 6L7.88235 11.0108L6.42418 8.82353Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n}\n"],"mappings":";;;AAWY;AATL,SAAS,cAA2B;AACvC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MAEN;AAAA,QAAC;AAAA;AAAA,UACG,aAAU;AAAA,UACV,aAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACT;AAAA;AAAA,EACJ;AAER;","names":[]}

package/dist/modern/visualBuilder/utils/getCsDataOfElement.cjs CHANGED Viewed

@@ -46,13 +46,28 @@ function getCsDataOfElement(event) {
     fieldMetadata
   };
 }
+function getPrefix(cslp) {
+  let prefix;
+  if (cslp.startsWith("v2:")) {
+    const variantPrefix = cslp.split(":")[1];
+    const content_type_uid = variantPrefix.split(".")[0];
+    const euid = variantPrefix.split(".")[1].split("_")[0];
+    const locale = variantPrefix.split(".")[2];
+    prefix = `${content_type_uid}.${euid}.${locale}`;
+  } else {
+    prefix = cslp;
+  }
+  return prefix.split(".").slice(0, 3).join(".");
+}
 function getDOMEditStack(ele) {
   const cslpSet = [];
   let curr = ele.closest(`[${import_constants.DATA_CSLP_ATTR_SELECTOR}]`);
   while (curr) {
     const cslp = curr.getAttribute(import_constants.DATA_CSLP_ATTR_SELECTOR);
-    const entryPrefix = cslp.split(".").slice(0, 3).join(".");
-    const hasSamePrevPrefix = (cslpSet.at(0) || "").startsWith(entryPrefix);
+    const entryPrefix = getPrefix(cslp);
+    const hasSamePrevPrefix = getPrefix(cslpSet.at(0) || "").startsWith(
+      entryPrefix
+    );
     if (!hasSamePrevPrefix) {
       cslpSet.unshift(cslp);
     }

package/dist/modern/visualBuilder/utils/getCsDataOfElement.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/*\n Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails \| undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = cslp~~.split(\".\"~~)~~.slice(0, 3).join(\".\")~~;\n const hasSamePrevPrefix = (cslpSet.at(0) \|\| \"\").startsWith(entryPrefix);\n if (!hasSamePrevPrefix) {\n cslpSet.unshift(cslp);\n }\n curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n }\n return cslpSet.map((cslp) => extractDetailsFromCslp(cslp));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAuC;AACvC,uBAAwC;AASjC,SAAS,mBACZ,OACyC;AACzC,QAAM,gBAAgB,MAAM;AAC5B,MAAI,CAAC,eAAe;AAChB;AAAA,EACJ;AACA,QAAM,kBAAkB,cAAc,QAAQ,aAAa;AAE3D,MAAI,CAAC,iBAAiB;AAClB;AAAA,EACJ;AACA,QAAM,WAAW,gBAAgB,aAAa,WAAW;AACzD,MAAI,CAAC,UAAU;AACX;AAAA,EACJ;AACA,QAAM,oBAAgB,wCAAuB,QAAQ;AAErD,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEO,SAAS,gBAAgB,KAA0B;AACtD,QAAM,UAAoB,CAAC;AAC3B,MAAI,OAAY,IAAI,QAAQ,IAAI,wCAAuB,GAAG;AAC1D,SAAO,MAAM;AACT,UAAM,OAAO,KAAK,aAAa,wCAAuB;AACtD,UAAM,cAAc,~~KAAK~~,~~MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG~~;~~AACxD~~,UAAM,~~qBAAqB~~,QAAQ,GAAG,CAAC,KAAK,~~IAAI~~,~~WAAW~~,~~WAAW~~;~~AACtE~~,QAAI,CAAC,mBAAmB;AACpB,cAAQ,QAAQ,IAAI;AAAA,IACxB;AACA,WAAO,KAAK,eAAe,QAAQ,IAAI,wCAAuB,GAAG;AAAA,EACrE;AACA,SAAO,QAAQ,IAAI,CAAC,aAAS,wCAAuB,IAAI,CAAC;AAC7D;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/*\n Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails \| undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nfunction getPrefix(cslp: string): string {\n let prefix;\n if (cslp.startsWith(\"v2:\")) {\n // v2: prefix is added to cslp in variant cases\n const variantPrefix = cslp.split(\":\")[1];\n const content_type_uid = variantPrefix.split(\".\")[0];\n const euid = variantPrefix.split(\".\")[1].split(\"_\")[0]; //page.blt7a1e5b297a97bd12_cs8171e34d92207334.en-us\n const locale = variantPrefix.split(\".\")[2];\n prefix = `${content_type_uid}.${euid}.${locale}`;\n } else {\n prefix = cslp;\n }\n return prefix.split(\".\").slice(0, 3).join(\".\");\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = getPrefix(cslp);\n const hasSamePrevPrefix = getPrefix(cslpSet.at(0) \|\| \"\").startsWith(\n entryPrefix\n );\n if (!hasSamePrevPrefix) {\n cslpSet.unshift(cslp);\n }\n curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n }\n return cslpSet.map((cslp) => extractDetailsFromCslp(cslp));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAuC;AACvC,uBAAwC;AASjC,SAAS,mBACZ,OACyC;AACzC,QAAM,gBAAgB,MAAM;AAC5B,MAAI,CAAC,eAAe;AAChB;AAAA,EACJ;AACA,QAAM,kBAAkB,cAAc,QAAQ,aAAa;AAE3D,MAAI,CAAC,iBAAiB;AAClB;AAAA,EACJ;AACA,QAAM,WAAW,gBAAgB,aAAa,WAAW;AACzD,MAAI,CAAC,UAAU;AACX;AAAA,EACJ;AACA,QAAM,oBAAgB,wCAAuB,QAAQ;AAErD,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEA,SAAS,UAAU,MAAsB;AACrC,MAAI;AACJ,MAAI,KAAK,WAAW,KAAK,GAAG;AAExB,UAAM,gBAAgB,KAAK,MAAM,GAAG,EAAE,CAAC;AACvC,UAAM,mBAAmB,cAAc,MAAM,GAAG,EAAE,CAAC;AACnD,UAAM,OAAO,cAAc,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;AACrD,UAAM,SAAS,cAAc,MAAM,GAAG,EAAE,CAAC;AACzC,aAAS,GAAG,gBAAgB,IAAI,IAAI,IAAI,MAAM;AAAA,EAClD,OAAO;AACH,aAAS;AAAA,EACb;AACA,SAAO,OAAO,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG;AACjD;AAEO,SAAS,gBAAgB,KAA0B;AACtD,QAAM,UAAoB,CAAC;AAC3B,MAAI,OAAY,IAAI,QAAQ,IAAI,wCAAuB,GAAG;AAC1D,SAAO,MAAM;AACT,UAAM,OAAO,KAAK,aAAa,wCAAuB;AACtD,UAAM,cAAc,UAAU,IAAI;AAClC,UAAM,oBAAoB,UAAU,QAAQ,GAAG,CAAC,KAAK,EAAE,EAAE;AAAA,MACrD;AAAA,IACJ;AACA,QAAI,CAAC,mBAAmB;AACpB,cAAQ,QAAQ,IAAI;AAAA,IACxB;AACA,WAAO,KAAK,eAAe,QAAQ,IAAI,wCAAuB,GAAG;AAAA,EACrE;AACA,SAAO,QAAQ,IAAI,CAAC,aAAS,wCAAuB,IAAI,CAAC;AAC7D;","names":[]}

package/dist/modern/visualBuilder/utils/getCsDataOfElement.js CHANGED Viewed

@@ -23,13 +23,28 @@ function getCsDataOfElement(event) {
     fieldMetadata
   };
 }
+function getPrefix(cslp) {
+  let prefix;
+  if (cslp.startsWith("v2:")) {
+    const variantPrefix = cslp.split(":")[1];
+    const content_type_uid = variantPrefix.split(".")[0];
+    const euid = variantPrefix.split(".")[1].split("_")[0];
+    const locale = variantPrefix.split(".")[2];
+    prefix = `${content_type_uid}.${euid}.${locale}`;
+  } else {
+    prefix = cslp;
+  }
+  return prefix.split(".").slice(0, 3).join(".");
+}
 function getDOMEditStack(ele) {
   const cslpSet = [];
   let curr = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);
   while (curr) {
     const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR);
-    const entryPrefix = cslp.split(".").slice(0, 3).join(".");
-    const hasSamePrevPrefix = (cslpSet.at(0) || "").startsWith(entryPrefix);
+    const entryPrefix = getPrefix(cslp);
+    const hasSamePrevPrefix = getPrefix(cslpSet.at(0) || "").startsWith(
+      entryPrefix
+    );
     if (!hasSamePrevPrefix) {
       cslpSet.unshift(cslp);
     }

package/dist/modern/visualBuilder/utils/getCsDataOfElement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/*\n Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails \| undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = cslp~~.split(\".\"~~)~~.slice(0, 3).join(\".\")~~;\n const hasSamePrevPrefix = (cslpSet.at(0) \|\| \"\").startsWith(entryPrefix);\n if (!hasSamePrevPrefix) {\n cslpSet.unshift(cslp);\n }\n curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n }\n return cslpSet.map((cslp) => extractDetailsFromCslp(cslp));\n}\n"],"mappings":";;;AAEA,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AASjC,SAAS,mBACZ,OACyC;AACzC,QAAM,gBAAgB,MAAM;AAC5B,MAAI,CAAC,eAAe;AAChB;AAAA,EACJ;AACA,QAAM,kBAAkB,cAAc,QAAQ,aAAa;AAE3D,MAAI,CAAC,iBAAiB;AAClB;AAAA,EACJ;AACA,QAAM,WAAW,gBAAgB,aAAa,WAAW;AACzD,MAAI,CAAC,UAAU;AACX;AAAA,EACJ;AACA,QAAM,gBAAgB,uBAAuB,QAAQ;AAErD,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEO,SAAS,gBAAgB,KAA0B;AACtD,QAAM,UAAoB,CAAC;AAC3B,MAAI,OAAY,IAAI,QAAQ,IAAI,uBAAuB,GAAG;AAC1D,SAAO,MAAM;AACT,UAAM,OAAO,KAAK,aAAa,uBAAuB;AACtD,UAAM,cAAc,~~KAAK~~,~~MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG~~;~~AACxD~~,UAAM,~~qBAAqB~~,QAAQ,GAAG,CAAC,KAAK,~~IAAI~~,~~WAAW~~,~~WAAW~~;~~AACtE~~,QAAI,CAAC,mBAAmB;AACpB,cAAQ,QAAQ,IAAI;AAAA,IACxB;AACA,WAAO,KAAK,eAAe,QAAQ,IAAI,uBAAuB,GAAG;AAAA,EACrE;AACA,SAAO,QAAQ,IAAI,CAAC,SAAS,uBAAuB,IAAI,CAAC;AAC7D;","names":[]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/utils/getCsDataOfElement.ts"],"sourcesContent":["import { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"./constants\";\n\n/*\n Returns the CSLP data of the closest ancestor element with a `data-cslp` attribute\n * to the target element of a mouse event.\n * @param event - The mouse event.\n * @returns The CSLP data of the closest ancestor element with a `data-cslp` attribute,\n * along with metadata and schema information for the corresponding field.\n */\nexport function getCsDataOfElement(\n event: MouseEvent\n): VisualBuilderCslpEventDetails \| undefined {\n const targetElement = event.target as HTMLElement;\n if (!targetElement) {\n return;\n }\n const editableElement = targetElement.closest(\"[data-cslp]\");\n\n if (!editableElement) {\n return;\n }\n const cslpData = editableElement.getAttribute(\"data-cslp\");\n if (!cslpData) {\n return;\n }\n const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n return {\n editableElement: editableElement,\n cslpData,\n fieldMetadata,\n };\n}\n\nfunction getPrefix(cslp: string): string {\n let prefix;\n if (cslp.startsWith(\"v2:\")) {\n // v2: prefix is added to cslp in variant cases\n const variantPrefix = cslp.split(\":\")[1];\n const content_type_uid = variantPrefix.split(\".\")[0];\n const euid = variantPrefix.split(\".\")[1].split(\"_\")[0]; //page.blt7a1e5b297a97bd12_cs8171e34d92207334.en-us\n const locale = variantPrefix.split(\".\")[2];\n prefix = `${content_type_uid}.${euid}.${locale}`;\n } else {\n prefix = cslp;\n }\n return prefix.split(\".\").slice(0, 3).join(\".\");\n}\n\nexport function getDOMEditStack(ele: Element): CslpData[] {\n const cslpSet: string[] = [];\n let curr: any = ele.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n while (curr) {\n const cslp = curr.getAttribute(DATA_CSLP_ATTR_SELECTOR)!;\n const entryPrefix = getPrefix(cslp);\n const hasSamePrevPrefix = getPrefix(cslpSet.at(0) \|\| \"\").startsWith(\n entryPrefix\n );\n if (!hasSamePrevPrefix) {\n cslpSet.unshift(cslp);\n }\n curr = curr.parentElement?.closest(`[${DATA_CSLP_ATTR_SELECTOR}]`);\n }\n return cslpSet.map((cslp) => extractDetailsFromCslp(cslp));\n}\n"],"mappings":";;;AAEA,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AASjC,SAAS,mBACZ,OACyC;AACzC,QAAM,gBAAgB,MAAM;AAC5B,MAAI,CAAC,eAAe;AAChB;AAAA,EACJ;AACA,QAAM,kBAAkB,cAAc,QAAQ,aAAa;AAE3D,MAAI,CAAC,iBAAiB;AAClB;AAAA,EACJ;AACA,QAAM,WAAW,gBAAgB,aAAa,WAAW;AACzD,MAAI,CAAC,UAAU;AACX;AAAA,EACJ;AACA,QAAM,gBAAgB,uBAAuB,QAAQ;AAErD,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACJ;AAEA,SAAS,UAAU,MAAsB;AACrC,MAAI;AACJ,MAAI,KAAK,WAAW,KAAK,GAAG;AAExB,UAAM,gBAAgB,KAAK,MAAM,GAAG,EAAE,CAAC;AACvC,UAAM,mBAAmB,cAAc,MAAM,GAAG,EAAE,CAAC;AACnD,UAAM,OAAO,cAAc,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC;AACrD,UAAM,SAAS,cAAc,MAAM,GAAG,EAAE,CAAC;AACzC,aAAS,GAAG,gBAAgB,IAAI,IAAI,IAAI,MAAM;AAAA,EAClD,OAAO;AACH,aAAS;AAAA,EACb;AACA,SAAO,OAAO,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG;AACjD;AAEO,SAAS,gBAAgB,KAA0B;AACtD,QAAM,UAAoB,CAAC;AAC3B,MAAI,OAAY,IAAI,QAAQ,IAAI,uBAAuB,GAAG;AAC1D,SAAO,MAAM;AACT,UAAM,OAAO,KAAK,aAAa,uBAAuB;AACtD,UAAM,cAAc,UAAU,IAAI;AAClC,UAAM,oBAAoB,UAAU,QAAQ,GAAG,CAAC,KAAK,EAAE,EAAE;AAAA,MACrD;AAAA,IACJ;AACA,QAAI,CAAC,mBAAmB;AACpB,cAAQ,QAAQ,IAAI;AAAA,IACxB;AACA,WAAO,KAAK,eAAe,QAAQ,IAAI,uBAAuB,GAAG;AAAA,EACrE;AACA,SAAO,QAAQ,IAAI,CAAC,SAAS,uBAAuB,IAAI,CAAC;AAC7D;","names":[]}

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

@@ -610,6 +610,8 @@ function visualBuilderStyles() {
         `,
     "variant-field-revert-component__dropdown-content": import_goober.css`
             position: absolute;
+            top: -12px;
+            left: -4px;
             background-color: #ffffff;
             min-width: max-content;
             box-shadow:
@@ -623,6 +625,7 @@ function visualBuilderStyles() {
         `,
     "variant-field-revert-component__dropdown-content__list-item": import_goober.css`
             color: black;
+            font-weight: 400;
             padding: 9.6px 16px;
             text-decoration: none;
             display: block;