@contentstack/live-preview-utils 3.1.1 → 3.1.2

package/dist/legacy/visualBuilder/components/FieldToolbar.cjs.map

@@ -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    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":["import_icons","visualBuilderPostMessage","_a","getChildrenDirection","classNames","fieldSchema","CommentIcon"]}
+{"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    isVariant?: boolean;\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, isVariant: isVariantOrParentOfVariant } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const isVariant = !!fieldMetadata?.variant || isVariantOrParentOfVariant;\n    const direction = getChildrenDirection(targetElement, parentPath);\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        //     !isVariant\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":["import_icons","visualBuilderPostMessage","_a","getChildrenDirection","classNames","fieldSchema","CommentIcon"]}

package/dist/legacy/visualBuilder/components/FieldToolbar.d.cts

@@ -5,6 +5,7 @@ type FieldDetails = Pick<VisualBuilderCslpEventDetails, "editableElement" | "fie
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
     hideOverlay: () => void;
+    isVariant?: boolean;
 }
 declare function FieldToolbarComponent(props: MultipleFieldToolbarProps): JSX.Element | null;
 

package/dist/legacy/visualBuilder/components/FieldToolbar.d.ts

@@ -5,6 +5,7 @@ type FieldDetails = Pick<VisualBuilderCslpEventDetails, "editableElement" | "fie
 interface MultipleFieldToolbarProps {
     eventDetails: VisualBuilderCslpEventDetails;
     hideOverlay: () => void;
+    isVariant?: boolean;
 }
 declare function FieldToolbarComponent(props: MultipleFieldToolbarProps): JSX.Element | null;
 

package/dist/legacy/visualBuilder/components/FieldToolbar.js

@@ -4,8 +4,7 @@ import "../../chunk-5WRI5ZAA.js";
 import getChildrenDirection from "../utils/getChildrenDirection.js";
 import {
   ALLOWED_MODAL_EDITABLE_FIELD,
-  ALLOWED_REPLACE_FIELDS,
-  DEFAULT_MULTIPLE_FIELDS
+  ALLOWED_REPLACE_FIELDS
 } from "../utils/constants.js";
 import { getFieldType } from "../utils/getFieldType.js";
 import {
@@ -89,11 +88,11 @@ function handleFormFieldFocus(eventDetails) {
 }
 function FieldToolbarComponent(props) {
   var _a, _b, _c, _d, _e;
-  const { eventDetails } = props;
+  const { eventDetails, isVariant: isVariantOrParentOfVariant } = props;
   const { fieldMetadata, editableElement: targetElement } = eventDetails;
   const parentPath = ((_b = (_a = fieldMetadata == null ? void 0 : fieldMetadata.multipleFieldMetadata) == null ? void 0 : _a.parentDetails) == null ? void 0 : _b.parentCslpValue) || "";
+  const isVariant = !!(fieldMetadata == null ? void 0 : fieldMetadata.variant) || isVariantOrParentOfVariant;
   const direction = getChildrenDirection(targetElement, parentPath);
-  const isVariant = !!(fieldMetadata == null ? void 0 : fieldMetadata.variant);
   const [fieldSchema, setFieldSchema] = useState(
     null
   );
@@ -121,9 +120,6 @@ function FieldToolbarComponent(props) {
     if (fieldType === FieldDataType.REFERENCE)
       isMultiple = fieldSchema.field_metadata.ref_multiple;
     isWholeMultipleField = isMultiple && (fieldMetadata.fieldPathWithIndex === fieldMetadata.instance.fieldPathWithIndex || ((_c = fieldMetadata.multipleFieldMetadata) == null ? void 0 : _c.index) === -1);
-    if (DEFAULT_MULTIPLE_FIELDS.includes(fieldType) && isWholeMultipleField) {
-      return null;
-    }
   }
   const invertTooltipPosition = targetElement.getBoundingClientRect().top <= TOOLTIP_TOP_EDGE_BUFFER;
   const editButton = Icon ? /* @__PURE__ */ jsx(

package/dist/legacy/visualBuilder/components/FieldToolbar.js.map

@@ -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    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":["_a","fieldSchema"]}
+{"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    isVariant?: boolean;\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, isVariant: isVariantOrParentOfVariant } = props;\n    const { fieldMetadata, editableElement: targetElement } = eventDetails;\n\n    const parentPath =\n        fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||\n        \"\";\n    const isVariant = !!fieldMetadata?.variant || isVariantOrParentOfVariant;\n    const direction = getChildrenDirection(targetElement, parentPath);\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        //     !isVariant\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":["_a","fieldSchema"]}

package/dist/legacy/visualBuilder/components/startEditingButton.cjs

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

package/dist/legacy/visualBuilder/components/startEditingButton.cjs.map

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

package/dist/legacy/visualBuilder/components/startEditingButton.d.cts

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

package/dist/legacy/visualBuilder/components/startEditingButton.d.ts

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

package/dist/legacy/visualBuilder/components/startEditingButton.js

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

package/dist/legacy/visualBuilder/components/startEditingButton.js.map

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