@contentstack/live-preview-utils 3.2.5 → 3.4.0

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

@@ -0,0 +1,167 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  ToolbarTooltip: () => ToolbarTooltip,
+  default: () => Tooltip_default
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_preact = require("preact");
+var import_hooks = require("preact/hooks");
+var import_dom = require("@floating-ui/dom");
+var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_icons = require("./icons/index.cjs");
+var import_generateCustomCursor = require("../generators/generateCustomCursor.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+var Tooltip = ({ children, content, placement = "top-start" }) => {
+  const [isVisible, setIsVisible] = (0, import_hooks.useState)(false);
+  const triggerRef = (0, import_hooks.useRef)(null);
+  const tooltipRef = (0, import_hooks.useRef)(null);
+  const arrowRef = (0, import_hooks.useRef)(null);
+  const showTooltip = () => setIsVisible(true);
+  const hideTooltip = () => setIsVisible(false);
+  (0, import_hooks.useEffect)(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    (0, import_dom.computePosition)(trigger, tooltip, {
+      placement,
+      // Middleware runs in order to modify the position
+      middleware: [
+        (0, import_dom.offset)(8),
+        // Add 8px of space between the trigger and tooltip
+        (0, import_dom.flip)(),
+        // Flip to the opposite side if it overflows
+        (0, import_dom.shift)({ padding: 5 }),
+        // Shift to keep it in view
+        ...arrowRef.current ? [(0, import_dom.arrow)({ element: arrowRef.current })] : []
+        // Handle arrow positioning
+      ]
+    }).then(({ x, y, placement: placement2, middlewareData }) => {
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (middlewareData.arrow && arrowRef.current) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const side = placement2.split("-")[0];
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[side];
+        const arrowElement = arrowRef.current;
+        Object.assign(arrowElement.style, {
+          left: "",
+          top: "",
+          right: "",
+          bottom: ""
+        });
+        if (placement2.includes("-start") || placement2.includes("-end")) {
+          const tooltipRect = tooltip.getBoundingClientRect();
+          if (side === "top" || side === "bottom") {
+            arrowElement.style.left = `${14}px`;
+            if (arrowY != null) {
+              arrowElement.style.top = `${arrowY}px`;
+            }
+          } else {
+            arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`;
+            if (arrowX != null) {
+              arrowElement.style.left = `${arrowX}px`;
+            }
+          }
+        } else {
+          if (arrowX != null) {
+            arrowElement.style.left = `${arrowX}px`;
+          }
+          if (arrowY != null) {
+            arrowElement.style.top = `${arrowY}px`;
+          }
+        }
+        arrowElement.style[staticSide] = "-4px";
+      }
+    });
+  }, [isVisible, placement, content]);
+  const triggerWithListeners = (0, import_preact.cloneElement)(children, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip,
+    "aria-describedby": "lightweight-tooltip"
+    // for accessibility
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    triggerWithListeners,
+    isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        id: "lightweight-tooltip",
+        className: (0, import_classnames.default)("tooltip-container", (0, import_visualBuilder.visualBuilderStyles)()["tooltip-container"]),
+        children: [
+          content,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: arrowRef, className: (0, import_classnames.default)("tooltip-arrow", (0, import_visualBuilder.visualBuilderStyles)()["tooltip-arrow"]) })
+        ]
+      }
+    )
+  ] });
+};
+function ToolbarTooltipContent({ contentTypeName, referenceFieldName }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content"]), children: [
+    contentTypeName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content-item", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ContentTypeIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: contentTypeName })
+    ] }),
+    referenceFieldName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content-item", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: import_generateCustomCursor.FieldTypeIconsMap.reference }, className: (0, import_classnames.default)("visual-builder__field-icon", (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-icon"]) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: referenceFieldName })
+    ] })
+  ] });
+}
+function ToolbarTooltip({ children, data, disabled = false }) {
+  if (disabled) {
+    return children;
+  }
+  const { contentTypeName, referenceFieldName } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarTooltipContent, { contentTypeName, referenceFieldName }), children });
+}
+var Tooltip_default = Tooltip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToolbarTooltip
+});
+//# sourceMappingURL=Tooltip.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/Tooltip.tsx"],"sourcesContent":["import { h, cloneElement } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow\n} from '@floating-ui/dom';\nimport { visualBuilderStyles } from '../visualBuilder.style';\nimport classNames from 'classnames';\nimport { ContentTypeIcon } from './icons';\nimport { FieldTypeIconsMap } from '../generators/generateCustomCursor';\ninterface TooltipProps {\n  children: JSX.Element;\n  content: JSX.Element;\n  placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';\n}\n\n/**\n * A lightweight, reusable tooltip component for Preact powered by Floating UI.\n *\n * @param {object} props - The component props.\n * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.\n * @param {string | preact.VNode} props.content - The content to display inside the tooltip.\n * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.\n */\nconst Tooltip = ({ children, content, placement = 'top-start' }: TooltipProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    // Create refs for the trigger and the floating tooltip elements\n    const triggerRef = useRef(null);\n    const tooltipRef = useRef(null);\n    const arrowRef = useRef(null);\n\n    const showTooltip = () => setIsVisible(true);\n    const hideTooltip = () => setIsVisible(false);\n\n    // This effect calculates the tooltip's position whenever it becomes visible\n    // or if its content or placement changes.\n    useEffect(() => {\n        if (!isVisible || !triggerRef.current || !tooltipRef.current) {\n            return;\n        }\n\n        const trigger = triggerRef.current as HTMLElement;\n        const tooltip = tooltipRef.current as HTMLElement;\n\n        computePosition(trigger, tooltip, {\n            placement,\n            // Middleware runs in order to modify the position\n            middleware: [\n                offset(8), // Add 8px of space between the trigger and tooltip\n                flip(),    // Flip to the opposite side if it overflows\n                shift({ padding: 5 }), // Shift to keep it in view\n                ...(arrowRef.current ? [arrow({ element: arrowRef.current as HTMLElement })] : []), // Handle arrow positioning\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            // Apply the calculated coordinates to the tooltip element\n            Object.assign(tooltip.style, {\n                left: `${x}px`,\n                top: `${y}px`,\n            });\n\n            // Position the arrow element\n            if (middlewareData.arrow && arrowRef.current) {\n                const { x: arrowX, y: arrowY } = middlewareData.arrow;\n                const side = placement.split('-')[0];\n                const staticSide = {\n                    top: 'bottom',\n                    right: 'left',\n                    bottom: 'top',\n                    left: 'right',\n                }[side] as string;\n\n                const arrowElement = arrowRef.current as HTMLElement;\n                \n                // Reset all positioning properties\n                Object.assign(arrowElement.style, {\n                    left: '',\n                    top: '',\n                    right: '',\n                    bottom: '',\n                });\n\n                // For placements like top-start, bottom-start, etc., we want the arrow \n                // to be centered on the tooltip rather than pointing at the trigger center\n                if (placement.includes('-start') || placement.includes('-end')) {\n                    const tooltipRect = tooltip.getBoundingClientRect();\n                    \n                    if (side === 'top' || side === 'bottom') {\n                        // For top/bottom placements, center the arrow horizontally\n                        arrowElement.style.left = `${14}px`; // 4px = half arrow width\n                        if (arrowY != null) {\n                            arrowElement.style.top = `${arrowY}px`;\n                        }\n                    } else {\n                        // For left/right placements, center the arrow vertically\n                        arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`; // 4px = half arrow height\n                        if (arrowX != null) {\n                            arrowElement.style.left = `${arrowX}px`;\n                        }\n                    }\n                } else {\n                    // For regular placements (top, bottom, left, right), use floating-ui's positioning\n                    if (arrowX != null) {\n                        arrowElement.style.left = `${arrowX}px`;\n                    }\n                    if (arrowY != null) {\n                        arrowElement.style.top = `${arrowY}px`;\n                    }\n                }\n\n                // Position arrow to overlap the tooltip's border\n                (arrowElement.style as any)[staticSide] = '-4px';\n            }\n        });\n\n    }, [isVisible, placement, content]);\n\n    // We need to clone the child element to attach our ref and event listeners.\n    // This ensures we don't wrap the child in an extra <div>.\n    const triggerWithListeners = cloneElement(children, {\n        ref: triggerRef,\n        onMouseEnter: showTooltip,\n        onMouseLeave: hideTooltip,\n        onFocus: showTooltip,\n        onBlur: hideTooltip,\n        'aria-describedby': 'lightweight-tooltip' // for accessibility\n    });\n\n    return (\n        <>\n            {triggerWithListeners}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    role=\"tooltip\"\n                    id=\"lightweight-tooltip\"\n                    className={classNames(\"tooltip-container\", visualBuilderStyles()[\"tooltip-container\"])}\n                >\n                    {content}\n                    <div ref={arrowRef} className={classNames(\"tooltip-arrow\", visualBuilderStyles()[\"tooltip-arrow\"])}></div>\n                </div>\n            )}\n        </>\n    );\n};\n\nfunction ToolbarTooltipContent({contentTypeName, referenceFieldName}: {contentTypeName: string, referenceFieldName: string}) {\n  return (\n    <div className={classNames(\"toolbar-tooltip-content\", visualBuilderStyles()[\"toolbar-tooltip-content\"])}>\n      {\n        contentTypeName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <ContentTypeIcon />\n            <p>{contentTypeName}</p>\n          </div>\n        )\n      }\n      {\n        referenceFieldName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <div dangerouslySetInnerHTML={{__html: FieldTypeIconsMap.reference}} className={classNames(\"visual-builder__field-icon\", visualBuilderStyles()[\"visual-builder__field-icon\"])}/>\n            <p>{referenceFieldName}</p>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n\nexport function ToolbarTooltip({children, data, disabled = false}: {children: JSX.Element, data: {contentTypeName: string, referenceFieldName: string}, disabled?: boolean}) {\n  if (disabled) {\n    return children;\n  }\n  const { contentTypeName, referenceFieldName } = data;\n  return (\n    <Tooltip content={<ToolbarTooltipContent contentTypeName={contentTypeName} referenceFieldName={referenceFieldName} />}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport default Tooltip;"],"mappings":"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","names":["placement","classNames"]}

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

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TooltipProps {
+    children: JSX.Element;
+    content: JSX.Element;
+    placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';
+}
+/**
+ * A lightweight, reusable tooltip component for Preact powered by Floating UI.
+ *
+ * @param {object} props - The component props.
+ * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.
+ * @param {string | preact.VNode} props.content - The content to display inside the tooltip.
+ * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.
+ */
+declare const Tooltip: ({ children, content, placement }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare function ToolbarTooltip({ children, data, disabled }: {
+    children: JSX.Element;
+    data: {
+        contentTypeName: string;
+        referenceFieldName: string;
+    };
+    disabled?: boolean;
+}): JSX.Element;
+
+export { ToolbarTooltip, Tooltip as default };

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

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TooltipProps {
+    children: JSX.Element;
+    content: JSX.Element;
+    placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';
+}
+/**
+ * A lightweight, reusable tooltip component for Preact powered by Floating UI.
+ *
+ * @param {object} props - The component props.
+ * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.
+ * @param {string | preact.VNode} props.content - The content to display inside the tooltip.
+ * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.
+ */
+declare const Tooltip: ({ children, content, placement }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare function ToolbarTooltip({ children, data, disabled }: {
+    children: JSX.Element;
+    data: {
+        contentTypeName: string;
+        referenceFieldName: string;
+    };
+    disabled?: boolean;
+}): JSX.Element;
+
+export { ToolbarTooltip, Tooltip as default };

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

@@ -0,0 +1,140 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Tooltip.tsx
+import { cloneElement } from "preact";
+import { useState, useEffect, useRef } from "preact/hooks";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  arrow
+} from "@floating-ui/dom";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import classNames from "classnames";
+import { ContentTypeIcon } from "./icons/index.js";
+import { FieldTypeIconsMap } from "../generators/generateCustomCursor.js";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var Tooltip = ({ children, content, placement = "top-start" }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const arrowRef = useRef(null);
+  const showTooltip = () => setIsVisible(true);
+  const hideTooltip = () => setIsVisible(false);
+  useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    computePosition(trigger, tooltip, {
+      placement,
+      // Middleware runs in order to modify the position
+      middleware: [
+        offset(8),
+        // Add 8px of space between the trigger and tooltip
+        flip(),
+        // Flip to the opposite side if it overflows
+        shift({ padding: 5 }),
+        // Shift to keep it in view
+        ...arrowRef.current ? [arrow({ element: arrowRef.current })] : []
+        // Handle arrow positioning
+      ]
+    }).then(({ x, y, placement: placement2, middlewareData }) => {
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (middlewareData.arrow && arrowRef.current) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const side = placement2.split("-")[0];
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[side];
+        const arrowElement = arrowRef.current;
+        Object.assign(arrowElement.style, {
+          left: "",
+          top: "",
+          right: "",
+          bottom: ""
+        });
+        if (placement2.includes("-start") || placement2.includes("-end")) {
+          const tooltipRect = tooltip.getBoundingClientRect();
+          if (side === "top" || side === "bottom") {
+            arrowElement.style.left = `${14}px`;
+            if (arrowY != null) {
+              arrowElement.style.top = `${arrowY}px`;
+            }
+          } else {
+            arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`;
+            if (arrowX != null) {
+              arrowElement.style.left = `${arrowX}px`;
+            }
+          }
+        } else {
+          if (arrowX != null) {
+            arrowElement.style.left = `${arrowX}px`;
+          }
+          if (arrowY != null) {
+            arrowElement.style.top = `${arrowY}px`;
+          }
+        }
+        arrowElement.style[staticSide] = "-4px";
+      }
+    });
+  }, [isVisible, placement, content]);
+  const triggerWithListeners = cloneElement(children, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip,
+    "aria-describedby": "lightweight-tooltip"
+    // for accessibility
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerWithListeners,
+    isVisible && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        id: "lightweight-tooltip",
+        className: classNames("tooltip-container", visualBuilderStyles()["tooltip-container"]),
+        children: [
+          content,
+          /* @__PURE__ */ jsx("div", { ref: arrowRef, className: classNames("tooltip-arrow", visualBuilderStyles()["tooltip-arrow"]) })
+        ]
+      }
+    )
+  ] });
+};
+function ToolbarTooltipContent({ contentTypeName, referenceFieldName }) {
+  return /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content", visualBuilderStyles()["toolbar-tooltip-content"]), children: [
+    contentTypeName && /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content-item", visualBuilderStyles()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ jsx(ContentTypeIcon, {}),
+      /* @__PURE__ */ jsx("p", { children: contentTypeName })
+    ] }),
+    referenceFieldName && /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content-item", visualBuilderStyles()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: FieldTypeIconsMap.reference }, className: classNames("visual-builder__field-icon", visualBuilderStyles()["visual-builder__field-icon"]) }),
+      /* @__PURE__ */ jsx("p", { children: referenceFieldName })
+    ] })
+  ] });
+}
+function ToolbarTooltip({ children, data, disabled = false }) {
+  if (disabled) {
+    return children;
+  }
+  const { contentTypeName, referenceFieldName } = data;
+  return /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ToolbarTooltipContent, { contentTypeName, referenceFieldName }), children });
+}
+var Tooltip_default = Tooltip;
+export {
+  ToolbarTooltip,
+  Tooltip_default as default
+};
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/Tooltip.tsx"],"sourcesContent":["import { h, cloneElement } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow\n} from '@floating-ui/dom';\nimport { visualBuilderStyles } from '../visualBuilder.style';\nimport classNames from 'classnames';\nimport { ContentTypeIcon } from './icons';\nimport { FieldTypeIconsMap } from '../generators/generateCustomCursor';\ninterface TooltipProps {\n  children: JSX.Element;\n  content: JSX.Element;\n  placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';\n}\n\n/**\n * A lightweight, reusable tooltip component for Preact powered by Floating UI.\n *\n * @param {object} props - The component props.\n * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.\n * @param {string | preact.VNode} props.content - The content to display inside the tooltip.\n * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.\n */\nconst Tooltip = ({ children, content, placement = 'top-start' }: TooltipProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    // Create refs for the trigger and the floating tooltip elements\n    const triggerRef = useRef(null);\n    const tooltipRef = useRef(null);\n    const arrowRef = useRef(null);\n\n    const showTooltip = () => setIsVisible(true);\n    const hideTooltip = () => setIsVisible(false);\n\n    // This effect calculates the tooltip's position whenever it becomes visible\n    // or if its content or placement changes.\n    useEffect(() => {\n        if (!isVisible || !triggerRef.current || !tooltipRef.current) {\n            return;\n        }\n\n        const trigger = triggerRef.current as HTMLElement;\n        const tooltip = tooltipRef.current as HTMLElement;\n\n        computePosition(trigger, tooltip, {\n            placement,\n            // Middleware runs in order to modify the position\n            middleware: [\n                offset(8), // Add 8px of space between the trigger and tooltip\n                flip(),    // Flip to the opposite side if it overflows\n                shift({ padding: 5 }), // Shift to keep it in view\n                ...(arrowRef.current ? [arrow({ element: arrowRef.current as HTMLElement })] : []), // Handle arrow positioning\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            // Apply the calculated coordinates to the tooltip element\n            Object.assign(tooltip.style, {\n                left: `${x}px`,\n                top: `${y}px`,\n            });\n\n            // Position the arrow element\n            if (middlewareData.arrow && arrowRef.current) {\n                const { x: arrowX, y: arrowY } = middlewareData.arrow;\n                const side = placement.split('-')[0];\n                const staticSide = {\n                    top: 'bottom',\n                    right: 'left',\n                    bottom: 'top',\n                    left: 'right',\n                }[side] as string;\n\n                const arrowElement = arrowRef.current as HTMLElement;\n                \n                // Reset all positioning properties\n                Object.assign(arrowElement.style, {\n                    left: '',\n                    top: '',\n                    right: '',\n                    bottom: '',\n                });\n\n                // For placements like top-start, bottom-start, etc., we want the arrow \n                // to be centered on the tooltip rather than pointing at the trigger center\n                if (placement.includes('-start') || placement.includes('-end')) {\n                    const tooltipRect = tooltip.getBoundingClientRect();\n                    \n                    if (side === 'top' || side === 'bottom') {\n                        // For top/bottom placements, center the arrow horizontally\n                        arrowElement.style.left = `${14}px`; // 4px = half arrow width\n                        if (arrowY != null) {\n                            arrowElement.style.top = `${arrowY}px`;\n                        }\n                    } else {\n                        // For left/right placements, center the arrow vertically\n                        arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`; // 4px = half arrow height\n                        if (arrowX != null) {\n                            arrowElement.style.left = `${arrowX}px`;\n                        }\n                    }\n                } else {\n                    // For regular placements (top, bottom, left, right), use floating-ui's positioning\n                    if (arrowX != null) {\n                        arrowElement.style.left = `${arrowX}px`;\n                    }\n                    if (arrowY != null) {\n                        arrowElement.style.top = `${arrowY}px`;\n                    }\n                }\n\n                // Position arrow to overlap the tooltip's border\n                (arrowElement.style as any)[staticSide] = '-4px';\n            }\n        });\n\n    }, [isVisible, placement, content]);\n\n    // We need to clone the child element to attach our ref and event listeners.\n    // This ensures we don't wrap the child in an extra <div>.\n    const triggerWithListeners = cloneElement(children, {\n        ref: triggerRef,\n        onMouseEnter: showTooltip,\n        onMouseLeave: hideTooltip,\n        onFocus: showTooltip,\n        onBlur: hideTooltip,\n        'aria-describedby': 'lightweight-tooltip' // for accessibility\n    });\n\n    return (\n        <>\n            {triggerWithListeners}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    role=\"tooltip\"\n                    id=\"lightweight-tooltip\"\n                    className={classNames(\"tooltip-container\", visualBuilderStyles()[\"tooltip-container\"])}\n                >\n                    {content}\n                    <div ref={arrowRef} className={classNames(\"tooltip-arrow\", visualBuilderStyles()[\"tooltip-arrow\"])}></div>\n                </div>\n            )}\n        </>\n    );\n};\n\nfunction ToolbarTooltipContent({contentTypeName, referenceFieldName}: {contentTypeName: string, referenceFieldName: string}) {\n  return (\n    <div className={classNames(\"toolbar-tooltip-content\", visualBuilderStyles()[\"toolbar-tooltip-content\"])}>\n      {\n        contentTypeName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <ContentTypeIcon />\n            <p>{contentTypeName}</p>\n          </div>\n        )\n      }\n      {\n        referenceFieldName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <div dangerouslySetInnerHTML={{__html: FieldTypeIconsMap.reference}} className={classNames(\"visual-builder__field-icon\", visualBuilderStyles()[\"visual-builder__field-icon\"])}/>\n            <p>{referenceFieldName}</p>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n\nexport function ToolbarTooltip({children, data, disabled = false}: {children: JSX.Element, data: {contentTypeName: string, referenceFieldName: string}, disabled?: boolean}) {\n  if (disabled) {\n    return children;\n  }\n  const { contentTypeName, referenceFieldName } = data;\n  return (\n    <Tooltip content={<ToolbarTooltipContent contentTypeName={contentTypeName} referenceFieldName={referenceFieldName} />}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport default Tooltip;"],"mappings":";;;AAAA,SAAY,oBAAoB;AAChC,SAAS,UAAU,WAAW,cAAc;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,OAAO,gBAAgB;AACvB,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAuH1B,mBAUY,KAPJ,YAHR;AAxGR,IAAM,UAAU,CAAC,EAAE,UAAU,SAAS,YAAY,YAAY,MAAoB;AAC9E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,WAAW,OAAO,IAAI;AAE5B,QAAM,cAAc,MAAM,aAAa,IAAI;AAC3C,QAAM,cAAc,MAAM,aAAa,KAAK;AAI5C,YAAU,MAAM;AACZ,QAAI,CAAC,aAAa,CAAC,WAAW,WAAW,CAAC,WAAW,SAAS;AAC1D;AAAA,IACJ;AAEA,UAAM,UAAU,WAAW;AAC3B,UAAM,UAAU,WAAW;AAE3B,oBAAgB,SAAS,SAAS;AAAA,MAC9B;AAAA;AAAA,MAEA,YAAY;AAAA,QACR,OAAO,CAAC;AAAA;AAAA,QACR,KAAK;AAAA;AAAA,QACL,MAAM,EAAE,SAAS,EAAE,CAAC;AAAA;AAAA,QACpB,GAAI,SAAS,UAAU,CAAC,MAAM,EAAE,SAAS,SAAS,QAAuB,CAAC,CAAC,IAAI,CAAC;AAAA;AAAA,MACpF;AAAA,IACJ,CAAC,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,WAAAA,YAAW,eAAe,MAAM;AAE7C,aAAO,OAAO,QAAQ,OAAO;AAAA,QACzB,MAAM,GAAG,CAAC;AAAA,QACV,KAAK,GAAG,CAAC;AAAA,MACb,CAAC;AAGD,UAAI,eAAe,SAAS,SAAS,SAAS;AAC1C,cAAM,EAAE,GAAG,QAAQ,GAAG,OAAO,IAAI,eAAe;AAChD,cAAM,OAAOA,WAAU,MAAM,GAAG,EAAE,CAAC;AACnC,cAAM,aAAa;AAAA,UACf,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,MAAM;AAAA,QACV,EAAE,IAAI;AAEN,cAAM,eAAe,SAAS;AAG9B,eAAO,OAAO,aAAa,OAAO;AAAA,UAC9B,MAAM;AAAA,UACN,KAAK;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACZ,CAAC;AAID,YAAIA,WAAU,SAAS,QAAQ,KAAKA,WAAU,SAAS,MAAM,GAAG;AAC5D,gBAAM,cAAc,QAAQ,sBAAsB;AAElD,cAAI,SAAS,SAAS,SAAS,UAAU;AAErC,yBAAa,MAAM,OAAO,GAAG,EAAE;AAC/B,gBAAI,UAAU,MAAM;AAChB,2BAAa,MAAM,MAAM,GAAG,MAAM;AAAA,YACtC;AAAA,UACJ,OAAO;AAEH,yBAAa,MAAM,MAAM,GAAG,YAAY,SAAS,IAAI,CAAC;AACtD,gBAAI,UAAU,MAAM;AAChB,2BAAa,MAAM,OAAO,GAAG,MAAM;AAAA,YACvC;AAAA,UACJ;AAAA,QACJ,OAAO;AAEH,cAAI,UAAU,MAAM;AAChB,yBAAa,MAAM,OAAO,GAAG,MAAM;AAAA,UACvC;AACA,cAAI,UAAU,MAAM;AAChB,yBAAa,MAAM,MAAM,GAAG,MAAM;AAAA,UACtC;AAAA,QACJ;AAGA,QAAC,aAAa,MAAc,UAAU,IAAI;AAAA,MAC9C;AAAA,IACJ,CAAC;AAAA,EAEL,GAAG,CAAC,WAAW,WAAW,OAAO,CAAC;AAIlC,QAAM,uBAAuB,aAAa,UAAU;AAAA,IAChD,KAAK;AAAA,IACL,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,oBAAoB;AAAA;AAAA,EACxB,CAAC;AAED,SACI,iCACK;AAAA;AAAA,IACA,aACG;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAG;AAAA,QACH,WAAW,WAAW,qBAAqB,oBAAoB,EAAE,mBAAmB,CAAC;AAAA,QAEpF;AAAA;AAAA,UACD,oBAAC,SAAI,KAAK,UAAU,WAAW,WAAW,iBAAiB,oBAAoB,EAAE,eAAe,CAAC,GAAG;AAAA;AAAA;AAAA,IACxG;AAAA,KAER;AAER;AAEA,SAAS,sBAAsB,EAAC,iBAAiB,mBAAkB,GAA0D;AAC3H,SACE,qBAAC,SAAI,WAAW,WAAW,2BAA2B,oBAAoB,EAAE,yBAAyB,CAAC,GAElG;AAAA,uBACE,qBAAC,SAAI,WAAW,WAAW,gCAAgC,oBAAoB,EAAE,8BAA8B,CAAC,GAC9G;AAAA,0BAAC,mBAAgB;AAAA,MACjB,oBAAC,OAAG,2BAAgB;AAAA,OACtB;AAAA,IAIF,sBACE,qBAAC,SAAI,WAAW,WAAW,gCAAgC,oBAAoB,EAAE,8BAA8B,CAAC,GAC9G;AAAA,0BAAC,SAAI,yBAAyB,EAAC,QAAQ,kBAAkB,UAAS,GAAG,WAAW,WAAW,8BAA8B,oBAAoB,EAAE,4BAA4B,CAAC,GAAE;AAAA,MAC9K,oBAAC,OAAG,8BAAmB;AAAA,OACzB;AAAA,KAGN;AAEJ;AAEO,SAAS,eAAe,EAAC,UAAU,MAAM,WAAW,MAAK,GAA6G;AAC3K,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AACA,QAAM,EAAE,iBAAiB,mBAAmB,IAAI;AAChD,SACE,oBAAC,WAAQ,SAAS,oBAAC,yBAAsB,iBAAkC,oBAAwC,GAChH,UACH;AAEJ;AAEA,IAAO,kBAAQ;","names":["placement"]}

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

@@ -38,6 +38,7 @@ var import_visualBuilder = require("../visualBuilder.style.cjs");
 var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
 var import_multipleElementAddButton = require("../utils/multipleElementAddButton.cjs");
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import_lodash_es = require("lodash-es");
 var import_jsx_runtime = require("preact/jsx-runtime");
 function EmptyBlock(props) {
   const { details } = props;
@@ -72,9 +73,20 @@ function EmptyBlock(props) {
               (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-title"]
             ),
             children: [
-              "There are no ",
-              blockParentName.toLowerCase(),
-              " on this page yet. Click the button below to add one."
+              "This page doesn\u2019t have any",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: (0, import_classnames.default)(
+                    "visual-builder__empty-block-field-name",
+                    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-field-name"]
+                  ),
+                  children: (0, import_lodash_es.startCase)((0, import_lodash_es.toLower)(blockParentName))
+                }
+              ),
+              " ",
+              "added. Click the button below to add one."
             ]
           }
         ),
@@ -89,8 +101,17 @@ function EmptyBlock(props) {
             type: "button",
             "data-testid": "visual-builder__empty-block-add-button",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "fas fa-plus" }),
-              " \xA0",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: (0, import_classnames.default)(
+                    "visual-builder__empty-block-plus-icon",
+                    (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__empty-block-plus-icon"]
+                  ),
+                  children: "+"
+                }
+              ),
+              "\xA0 Add ",
               blockParentName
             ]
           }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n                data-testid=\"visual-builder__empty-block-add-button\"\n            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,2BAAoC;AACpC,sCAAqC;AACrC,sCAAiD;AAEjD,yBAA+C;AAoCnC;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AArB1C;AAsBQ,YAAM,qCAAAA,YAAA,mBAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA;AAEJ,0EAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ;AAAA,0DAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":["visualBuilderPostMessage","classNames"]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\nimport { startCase, toLower } from \"lodash-es\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                This page doesn’t have any{\" \"}\n                <span\n                    className={classNames(\n                        \"visual-builder__empty-block-field-name\",\n                        visualBuilderStyles()[\n                            \"visual-builder__empty-block-field-name\"\n                        ]\n                    )}\n                >\n                    {startCase(toLower(blockParentName))}\n                </span>{\" \"}\n                added. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n                data-testid=\"visual-builder__empty-block-add-button\"\n            >\n                <span\n                    className={classNames(\n                        \"visual-builder__empty-block-plus-icon\",\n                        visualBuilderStyles()[\n                            \"visual-builder__empty-block-plus-icon\"\n                        ]\n                    )}\n                >\n                    +\n                </span>\n                &nbsp; Add {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AAEvB,2BAAoC;AACpC,sCAAqC;AACrC,sCAAiD;AAEjD,yBAA+C;AAE/C,uBAAmC;AAmCvB;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAtB1C;AAuBQ,YAAM,qCAAAA,YAAA,mBAA0B;AAAA,MAC5B,kDAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA;AAEJ,0EAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAC;AAAA,QACP;AAAA,YACA,0CAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cAC8B;AAAA,cAC3B;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAA;AAAA,oBACP;AAAA,wBACA,0CAAoB,EAChB,wCACJ;AAAA,kBACJ;AAAA,kBAEC,8CAAU,0BAAQ,eAAe,CAAC;AAAA;AAAA,cACvC;AAAA,cAAQ;AAAA,cAAI;AAAA;AAAA;AAAA,QAEhB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,cACP;AAAA,kBACA,0CAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACG,eAAW,kBAAAA;AAAA,oBACP;AAAA,wBACA,0CAAoB,EAChB,uCACJ;AAAA,kBACJ;AAAA,kBACH;AAAA;AAAA,cAED;AAAA,cAAO;AAAA,cACK;AAAA;AAAA;AAAA,QAChB;AAAA;AAAA;AAAA,EACJ;AAER;","names":["visualBuilderPostMessage","classNames"]}

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

@@ -6,6 +6,7 @@ import { visualBuilderStyles } from "../visualBuilder.style.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
 import { observeParentAndFocusNewInstance } from "../utils/multipleElementAddButton.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { startCase, toLower } from "lodash-es";
 import { jsx, jsxs } from "preact/jsx-runtime";
 function EmptyBlock(props) {
   const { details } = props;
@@ -40,9 +41,20 @@ function EmptyBlock(props) {
               visualBuilderStyles()["visual-builder__empty-block-title"]
             ),
             children: [
-              "There are no ",
-              blockParentName.toLowerCase(),
-              " on this page yet. Click the button below to add one."
+              "This page doesn\u2019t have any",
+              " ",
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classNames(
+                    "visual-builder__empty-block-field-name",
+                    visualBuilderStyles()["visual-builder__empty-block-field-name"]
+                  ),
+                  children: startCase(toLower(blockParentName))
+                }
+              ),
+              " ",
+              "added. Click the button below to add one."
             ]
           }
         ),
@@ -57,8 +69,17 @@ function EmptyBlock(props) {
             type: "button",
             "data-testid": "visual-builder__empty-block-add-button",
             children: [
-              /* @__PURE__ */ jsx("i", { className: "fas fa-plus" }),
-              " \xA0",
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classNames(
+                    "visual-builder__empty-block-plus-icon",
+                    visualBuilderStyles()["visual-builder__empty-block-plus-icon"]
+                  ),
+                  children: "+"
+                }
+              ),
+              "\xA0 Add ",
               blockParentName
             ]
           }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                There are no {blockParentName.toLowerCase()} on this page yet. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n                data-testid=\"visual-builder__empty-block-add-button\"\n            >\n                <i className=\"fas fa-plus\"></i> &nbsp;\n                {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,wCAAwC;AAEjD,SAAS,sCAAsC;AAoCnC,SAmBI,KAnBJ;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AArB1C;AAsBQ,YAAM,qDAA0B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA;AAEJ,qCAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cACiB,gBAAgB,YAAY;AAAA,cAAE;AAAA;AAAA;AAAA,QAChD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ;AAAA,kCAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}
+{"version":3,"sources":["../../../../src/visualBuilder/components/emptyBlock.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { observeParentAndFocusNewInstance } from \"../utils/multipleElementAddButton\";\nimport { ISchemaFieldMap } from \"../utils/types/index.types\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport React from \"preact/compat\";\nimport { startCase, toLower } from \"lodash-es\";\n\ninterface EmptyBlockProps {\n    details: {\n        fieldMetadata: CslpData;\n        fieldSchema: ISchemaFieldMap;\n    };\n}\n\nexport function EmptyBlock(props: EmptyBlockProps): JSX.Element {\n    const { details } = props;\n\n    const blockParentName = details.fieldSchema.display_name;\n\n    async function sendAddInstanceEvent() {\n        await visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.ADD_INSTANCE,\n            {\n                fieldMetadata: details.fieldMetadata,\n                index: 0,\n            }\n        );\n        observeParentAndFocusNewInstance({\n            parentCslp: details.fieldMetadata.cslpValue,\n            index: 0,\n        });\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__empty-block\",\n                visualBuilderStyles()[\"visual-builder__empty-block\"]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__empty-block-title\",\n                    visualBuilderStyles()[\"visual-builder__empty-block-title\"]\n                )}\n            >\n                This page doesn’t have any{\" \"}\n                <span\n                    className={classNames(\n                        \"visual-builder__empty-block-field-name\",\n                        visualBuilderStyles()[\n                            \"visual-builder__empty-block-field-name\"\n                        ]\n                    )}\n                >\n                    {startCase(toLower(blockParentName))}\n                </span>{\" \"}\n                added. Click the button below to add one.\n            </div>\n            <button\n                className={classNames(\n                    \"visual-builder__empty-block-add-button\",\n                    visualBuilderStyles()[\n                        \"visual-builder__empty-block-add-button\"\n                    ]\n                )}\n                onClick={() => sendAddInstanceEvent()}\n                type=\"button\"\n                data-testid=\"visual-builder__empty-block-add-button\"\n            >\n                <span\n                    className={classNames(\n                        \"visual-builder__empty-block-plus-icon\",\n                        visualBuilderStyles()[\n                            \"visual-builder__empty-block-plus-icon\"\n                        ]\n                    )}\n                >\n                    +\n                </span>\n                &nbsp; Add {blockParentName}\n            </button>\n        </div>\n    );\n}\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AAEvB,SAAS,2BAA2B;AACpC,OAAO,8BAA8B;AACrC,SAAS,wCAAwC;AAEjD,SAAS,sCAAsC;AAE/C,SAAS,WAAW,eAAe;AAmCvB,SAOI,KAPJ;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAtB1C;AAuBQ,YAAM,qDAA0B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA;AAEJ,qCAAiC;AAAA,MAC7B,YAAY,QAAQ,cAAc;AAAA,MAClC,OAAO;AAAA,IACX,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAAE,6BAA6B;AAAA,MACvD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAAE,mCAAmC;AAAA,YAC7D;AAAA,YACH;AAAA;AAAA,cAC8B;AAAA,cAC3B;AAAA,gBAAC;AAAA;AAAA,kBACG,WAAW;AAAA,oBACP;AAAA,oBACA,oBAAoB,EAChB,wCACJ;AAAA,kBACJ;AAAA,kBAEC,oBAAU,QAAQ,eAAe,CAAC;AAAA;AAAA,cACvC;AAAA,cAAQ;AAAA,cAAI;AAAA;AAAA;AAAA,QAEhB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,oBAAoB,EAChB,wCACJ;AAAA,YACJ;AAAA,YACA,SAAS,MAAM,qBAAqB;AAAA,YACpC,MAAK;AAAA,YACL,eAAY;AAAA,YAEZ;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACG,WAAW;AAAA,oBACP;AAAA,oBACA,oBAAoB,EAChB,uCACJ;AAAA,kBACJ;AAAA,kBACH;AAAA;AAAA,cAED;AAAA,cAAO;AAAA,cACK;AAAA;AAAA;AAAA,QAChB;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}