@contentstack/live-preview-utils 2.0.4 → 3.0.1

package/dist/modern/visualBuilder/generators/generateEmptyBlock.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/generators/generateEmptyBlock.tsx
+var generateEmptyBlock_exports = {};
+__export(generateEmptyBlock_exports, {
+  generateEmptyBlocks: () => generateEmptyBlocks,
+  removeEmptyBlocks: () => removeEmptyBlocks
+});
+module.exports = __toCommonJS(generateEmptyBlock_exports);
+var import_preact = require("preact");
+var import_emptyBlock = require("../components/emptyBlock.cjs");
+var import_cslp = require("../../cslp/index.cjs");
+var import_fieldSchemaMap = require("../utils/fieldSchemaMap.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+async function generateEmptyBlocks(emptyBlockParents) {
+  for (const emptyBlockParent of emptyBlockParents) {
+    const cslpData = emptyBlockParent.getAttribute("data-cslp");
+    if (!cslpData) {
+      return;
+    }
+    const fieldMetadata = (0, import_cslp.extractDetailsFromCslp)(cslpData);
+    const fieldSchema = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
+      fieldMetadata.content_type_uid,
+      fieldMetadata.fieldPath
+    );
+    if (!fieldSchema) {
+      return;
+    }
+    (0, import_preact.hydrate)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_emptyBlock.EmptyBlock,
+        {
+          details: {
+            fieldSchema,
+            fieldMetadata
+          }
+        }
+      ),
+      emptyBlockParent
+    );
+  }
+}
+function removeEmptyBlocks(emptyBlockParents) {
+  emptyBlockParents?.forEach((emptyBlockParent) => {
+    const emptyBlock = emptyBlockParent.querySelector(
+      ".visual-builder__empty-block"
+    );
+    if (emptyBlock) {
+      emptyBlock.remove();
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateEmptyBlocks,
+  removeEmptyBlocks
+});
+//# sourceMappingURL=generateEmptyBlock.cjs.map

package/dist/modern/visualBuilder/generators/generateEmptyBlock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateEmptyBlock.tsx"],"sourcesContent":["import { hydrate } from \"preact\";\nimport { EmptyBlock } from \"../components/emptyBlock\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\n\nexport async function generateEmptyBlocks(\n    emptyBlockParents: Element[] | []\n): Promise<void> {\n    for (const emptyBlockParent of emptyBlockParents) {\n        const cslpData = emptyBlockParent.getAttribute(\"data-cslp\");\n        if (!cslpData) {\n            return;\n        }\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        const fieldSchema = await FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        );\n        \n        if(!fieldSchema){\n            return;\n        }\n\n        hydrate(\n            <EmptyBlock\n                details={{\n                    fieldSchema,\n                    fieldMetadata,\n                }}\n            />,\n            emptyBlockParent\n        );\n    }\n}\n\nexport function removeEmptyBlocks(emptyBlockParents: Element[] | []): void {\n    emptyBlockParents?.forEach((emptyBlockParent) => {\n        const emptyBlock = emptyBlockParent.querySelector(\n            \".visual-builder__empty-block\"\n        );\n\n        if (emptyBlock) {\n            emptyBlock.remove();\n        }\n    });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAwB;AACxB,wBAA2B;AAC3B,kBAAuC;AACvC,4BAA+B;AAsBnB;AApBZ,eAAsB,oBAClB,mBACa;AACb,aAAW,oBAAoB,mBAAmB;AAC9C,UAAM,WAAW,iBAAiB,aAAa,WAAW;AAC1D,QAAI,CAAC,UAAU;AACX;AAAA,IACJ;AACA,UAAM,oBAAgB,oCAAuB,QAAQ;AAErD,UAAM,cAAc,MAAM,qCAAe;AAAA,MACrC,cAAc;AAAA,MACd,cAAc;AAAA,IAClB;AAEA,QAAG,CAAC,aAAY;AACZ;AAAA,IACJ;AAEA;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG,SAAS;AAAA,YACL;AAAA,YACA;AAAA,UACJ;AAAA;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,SAAS,kBAAkB,mBAAyC;AACvE,qBAAmB,QAAQ,CAAC,qBAAqB;AAC7C,UAAM,aAAa,iBAAiB;AAAA,MAChC;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,iBAAW,OAAO;AAAA,IACtB;AAAA,EACJ,CAAC;AACL;","names":[]}

package/dist/modern/visualBuilder/generators/generateEmptyBlock.d.cts

@@ -0,0 +1,4 @@
+declare function generateEmptyBlocks(emptyBlockParents: Element[] | []): Promise<void>;
+declare function removeEmptyBlocks(emptyBlockParents: Element[] | []): void;
+
+export { generateEmptyBlocks, removeEmptyBlocks };

package/dist/modern/visualBuilder/generators/generateEmptyBlock.d.ts

@@ -0,0 +1,4 @@
+declare function generateEmptyBlocks(emptyBlockParents: Element[] | []): Promise<void>;
+declare function removeEmptyBlocks(emptyBlockParents: Element[] | []): void;
+
+export { generateEmptyBlocks, removeEmptyBlocks };

package/dist/modern/visualBuilder/generators/generateEmptyBlock.js

@@ -0,0 +1,51 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generateEmptyBlock.tsx
+import { hydrate } from "preact";
+import { EmptyBlock } from "../components/emptyBlock.js";
+import { extractDetailsFromCslp } from "../../cslp/index.js";
+import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
+import { jsx } from "preact/jsx-runtime";
+async function generateEmptyBlocks(emptyBlockParents) {
+  for (const emptyBlockParent of emptyBlockParents) {
+    const cslpData = emptyBlockParent.getAttribute("data-cslp");
+    if (!cslpData) {
+      return;
+    }
+    const fieldMetadata = extractDetailsFromCslp(cslpData);
+    const fieldSchema = await FieldSchemaMap.getFieldSchema(
+      fieldMetadata.content_type_uid,
+      fieldMetadata.fieldPath
+    );
+    if (!fieldSchema) {
+      return;
+    }
+    hydrate(
+      /* @__PURE__ */ jsx(
+        EmptyBlock,
+        {
+          details: {
+            fieldSchema,
+            fieldMetadata
+          }
+        }
+      ),
+      emptyBlockParent
+    );
+  }
+}
+function removeEmptyBlocks(emptyBlockParents) {
+  emptyBlockParents?.forEach((emptyBlockParent) => {
+    const emptyBlock = emptyBlockParent.querySelector(
+      ".visual-builder__empty-block"
+    );
+    if (emptyBlock) {
+      emptyBlock.remove();
+    }
+  });
+}
+export {
+  generateEmptyBlocks,
+  removeEmptyBlocks
+};
+//# sourceMappingURL=generateEmptyBlock.js.map

package/dist/modern/visualBuilder/generators/generateEmptyBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateEmptyBlock.tsx"],"sourcesContent":["import { hydrate } from \"preact\";\nimport { EmptyBlock } from \"../components/emptyBlock\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\n\nexport async function generateEmptyBlocks(\n    emptyBlockParents: Element[] | []\n): Promise<void> {\n    for (const emptyBlockParent of emptyBlockParents) {\n        const cslpData = emptyBlockParent.getAttribute(\"data-cslp\");\n        if (!cslpData) {\n            return;\n        }\n        const fieldMetadata = extractDetailsFromCslp(cslpData);\n\n        const fieldSchema = await FieldSchemaMap.getFieldSchema(\n            fieldMetadata.content_type_uid,\n            fieldMetadata.fieldPath\n        );\n        \n        if(!fieldSchema){\n            return;\n        }\n\n        hydrate(\n            <EmptyBlock\n                details={{\n                    fieldSchema,\n                    fieldMetadata,\n                }}\n            />,\n            emptyBlockParent\n        );\n    }\n}\n\nexport function removeEmptyBlocks(emptyBlockParents: Element[] | []): void {\n    emptyBlockParents?.forEach((emptyBlockParent) => {\n        const emptyBlock = emptyBlockParent.querySelector(\n            \".visual-builder__empty-block\"\n        );\n\n        if (emptyBlock) {\n            emptyBlock.remove();\n        }\n    });\n}\n"],"mappings":";;;AAAA,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAsBnB;AApBZ,eAAsB,oBAClB,mBACa;AACb,aAAW,oBAAoB,mBAAmB;AAC9C,UAAM,WAAW,iBAAiB,aAAa,WAAW;AAC1D,QAAI,CAAC,UAAU;AACX;AAAA,IACJ;AACA,UAAM,gBAAgB,uBAAuB,QAAQ;AAErD,UAAM,cAAc,MAAM,eAAe;AAAA,MACrC,cAAc;AAAA,MACd,cAAc;AAAA,IAClB;AAEA,QAAG,CAAC,aAAY;AACZ;AAAA,IACJ;AAEA;AAAA,MACI;AAAA,QAAC;AAAA;AAAA,UACG,SAAS;AAAA,YACL;AAAA,YACA;AAAA,UACJ;AAAA;AAAA,MACJ;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AACJ;AAEO,SAAS,kBAAkB,mBAAyC;AACvE,qBAAmB,QAAQ,CAAC,qBAAqB;AAC7C,UAAM,aAAa,iBAAiB;AAAA,MAChC;AAAA,IACJ;AAEA,QAAI,YAAY;AACZ,iBAAW,OAAO;AAAA,IACtB;AAAA,EACJ,CAAC;AACL;","names":[]}

package/dist/modern/visualBuilder/generators/generateHighlightedComment.cjs

@@ -0,0 +1,147 @@
+"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/generators/generateHighlightedComment.tsx
+var generateHighlightedComment_exports = {};
+__export(generateHighlightedComment_exports, {
+  highlightCommentIconOnCanvas: () => highlightCommentIconOnCanvas,
+  removeAllHighlightedCommentIcons: () => removeAllHighlightedCommentIcons,
+  removeHighlightedCommentIcon: () => removeHighlightedCommentIcon,
+  showAllHiddenHighlightedCommentIcons: () => showAllHiddenHighlightedCommentIcons,
+  toggleHighlightedCommentIconDisplay: () => toggleHighlightedCommentIconDisplay,
+  updateHighlightedCommentIconPosition: () => updateHighlightedCommentIconPosition
+});
+module.exports = __toCommonJS(generateHighlightedComment_exports);
+var import_preact = require("preact");
+var import_preact2 = require("preact");
+var import_HighlightedCommentIcon = __toESM(require("../components/HighlightedCommentIcon.cjs"), 1);
+var import_goober = require("goober");
+var highlighCommentOffset = 25;
+function highlightCommentIconOnCanvas(payload) {
+  const uniquePaths = {};
+  payload.forEach((data) => {
+    const cslpValue = data?.fieldMetadata?.cslpValue;
+    if (!cslpValue || uniquePaths[cslpValue]) {
+      return;
+    }
+    uniquePaths[cslpValue] = true;
+    const element = document.querySelector(`[data-cslp="${cslpValue}"]`);
+    if (element && element instanceof HTMLElement) {
+      const { top, left } = element.getBoundingClientRect();
+      const iconContainer = document.createElement("div");
+      iconContainer.setAttribute("field-path", cslpValue);
+      iconContainer.style.position = "fixed";
+      iconContainer.style.top = `${top - highlighCommentOffset}px`;
+      iconContainer.style.left = `${left - highlighCommentOffset}px`;
+      iconContainer.style.zIndex = "1000";
+      iconContainer.style.cursor = "pointer";
+      iconContainer.className = "highlighted-comment";
+      (0, import_preact2.render)(
+        (0, import_preact.h)(import_HighlightedCommentIcon.default, { data }),
+        // Use h directly with Preact
+        iconContainer
+      );
+      const visualBuilderContainer = document.querySelector(
+        ".visual-builder__container"
+      );
+      if (visualBuilderContainer) {
+        let highlightCommentWrapper = visualBuilderContainer.querySelector(
+          ".visual-builder__highlighted-comment-wrapper"
+        );
+        if (!highlightCommentWrapper) {
+          highlightCommentWrapper = document.createElement("div");
+          highlightCommentWrapper.className = "visual-builder__highlighted-comment-wrapper";
+          visualBuilderContainer.appendChild(highlightCommentWrapper);
+        }
+        highlightCommentWrapper.appendChild(iconContainer);
+      }
+    }
+  });
+}
+function updateHighlightedCommentIconPosition() {
+  const icons = document.querySelectorAll(".highlighted-comment");
+  icons.forEach((icon) => {
+    if (icon && icon instanceof HTMLElement) {
+      const path = icon.getAttribute("field-path");
+      if (path) {
+        const targetElement = document.querySelector(
+          `[data-cslp="${path}"]`
+        );
+        if (targetElement && targetElement instanceof HTMLElement) {
+          const { top, left } = targetElement.getBoundingClientRect();
+          icon.style.top = `${top - highlighCommentOffset}px`;
+          icon.style.left = `${left - highlighCommentOffset}px`;
+        }
+      }
+    }
+  });
+}
+function removeHighlightedCommentIcon(pathToRemove) {
+  const iconToRemove = document.querySelectorAll(
+    `.highlighted-comment[field-path="${pathToRemove}"]`
+  );
+  iconToRemove?.forEach((icon) => icon?.remove());
+}
+function removeAllHighlightedCommentIcons() {
+  const icons = document.querySelectorAll(".highlighted-comment");
+  icons?.forEach((icon) => icon?.remove());
+}
+var hiddenClass = import_goober.css`
+    display: none;
+`;
+function toggleHighlightedCommentIconDisplay(path, shouldShow) {
+  const icons = document.querySelectorAll(
+    `.highlighted-comment[field-path="${path}"]`
+  );
+  icons.forEach((icon) => {
+    if (shouldShow) {
+      icon.classList.remove(hiddenClass);
+    } else {
+      icon.classList.add(hiddenClass);
+    }
+  });
+}
+function showAllHiddenHighlightedCommentIcons() {
+  const hiddenIcons = document.querySelectorAll(
+    `.highlighted-comment.${hiddenClass}`
+  );
+  hiddenIcons.forEach((icon) => {
+    icon.classList.remove(hiddenClass);
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  highlightCommentIconOnCanvas,
+  removeAllHighlightedCommentIcons,
+  removeHighlightedCommentIcon,
+  showAllHiddenHighlightedCommentIcons,
+  toggleHighlightedCommentIconDisplay,
+  updateHighlightedCommentIconPosition
+});
+//# sourceMappingURL=generateHighlightedComment.cjs.map

package/dist/modern/visualBuilder/generators/generateHighlightedComment.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHighlightedComment.tsx"],"sourcesContent":["import { h, VNode } from \"preact\"; // Explicitly import VNode from Preact\nimport { render } from \"preact\";\nimport HighlightedCommentIcon from \"../components/HighlightedCommentIcon\";\nimport { css } from \"goober\";\nimport React from \"preact/compat\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\n/**\n * Inserts highlighted comment icons based on an array of paths.\n *\n * This function locates elements in the DOM based on the `fieldMetadata.cslpValue`,\n * and appends a comment icon near each matching element.\n *\n * @param payload - Array of comment data with field metadata, schema, absolutePath and discussion ID.\n */\nconst highlighCommentOffset = 25;\n\nexport function highlightCommentIconOnCanvas(\n    payload: IHighlightCommentData[]\n): void {\n    const uniquePaths: { [key: string]: boolean } = {}; // Using object for uniqueness\n\n    payload.forEach((data) => {\n        const cslpValue = data?.fieldMetadata?.cslpValue;\n\n        // Check if the cslpValue is already in the Object\n        if (!cslpValue || uniquePaths[cslpValue]) {\n            return; // Skip if the value is not unique\n        }\n\n        uniquePaths[cslpValue] = true; // Mark it as processed\n\n        const element = document.querySelector(`[data-cslp=\"${cslpValue}\"]`);\n        if (element && element instanceof HTMLElement) {\n            const { top, left } = element.getBoundingClientRect();\n\n            const iconContainer = document.createElement(\"div\");\n            iconContainer.setAttribute(\"field-path\", cslpValue);\n\n            iconContainer.style.position = \"fixed\";\n            iconContainer.style.top = `${top - highlighCommentOffset}px`;\n            iconContainer.style.left = `${left - highlighCommentOffset}px`;\n            iconContainer.style.zIndex = \"1000\";\n            iconContainer.style.cursor = \"pointer\"\n            iconContainer.className = \"highlighted-comment\";\n\n            // Render the HighlightedCommentIcon using Preact's render method\n            render(\n                h(HighlightedCommentIcon, { data }), // Use h directly with Preact\n                iconContainer\n            );\n\n            const visualBuilderContainer = document.querySelector(\n                \".visual-builder__container\"\n            );\n            if (visualBuilderContainer) {\n                let highlightCommentWrapper =\n                    visualBuilderContainer.querySelector(\n                        \".visual-builder__highlighted-comment-wrapper\"\n                    );\n                if (!highlightCommentWrapper) {\n                    highlightCommentWrapper = document.createElement(\"div\");\n                    highlightCommentWrapper.className =\n                        \"visual-builder__highlighted-comment-wrapper\";\n                    visualBuilderContainer.appendChild(highlightCommentWrapper);\n                }\n                highlightCommentWrapper.appendChild(iconContainer);\n            }\n        }\n    });\n}\n\n/**\n * Update Highlighted comment position , whenever scroll or resize happen.\n */\n\nexport function updateHighlightedCommentIconPosition() {\n    // Query all elements with the .highlighted-comment class\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n\n    icons.forEach((icon) => {\n        if (icon && icon instanceof HTMLElement) {\n            // Get the field-path attribute from the icon container\n            const path = icon.getAttribute(\"field-path\");\n            if (path) {\n                // Query the target element using the path\n                const targetElement = document.querySelector(\n                    `[data-cslp=\"${path}\"]`\n                );\n                if (targetElement && targetElement instanceof HTMLElement) {\n                    // Get the target element's position relative to the viewport\n                    const { top, left } = targetElement.getBoundingClientRect();\n\n                    // Update the position of the icon container\n                    icon.style.top = `${top - highlighCommentOffset}px`; // Adjust based on the target element's top\n                    icon.style.left = `${left - highlighCommentOffset}px`; // Adjust based on the target element's left\n                }\n            }\n        }\n    });\n}\n\n/**\n * Removes the first highlighted comment icon based on an array of paths.\n *\n * @param pathsToRemove - Array of field-paths to remove.\n */\nexport function removeHighlightedCommentIcon(pathToRemove: string): void {\n    // Loop through each path in the array\n    const iconToRemove = document.querySelectorAll(\n        `.highlighted-comment[field-path=\"${pathToRemove}\"]`\n    );\n    iconToRemove?.forEach((icon) => icon?.remove());\n}\n\nexport function removeAllHighlightedCommentIcons(): void {\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n    icons?.forEach((icon) => icon?.remove());\n}\n\n// Define a hidden class in goober\nconst hiddenClass = css`\n    display: none;\n`;\n\n/**\n * Toggle display style of a specific highlighted comment icon.\n *\n * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.\n * @param shouldShow - Boolean value to determine whether to show or hide the icon.\n * If true, the icon will be displayed. If false, the icon will be hidden.\n */\nexport function toggleHighlightedCommentIconDisplay(\n    path: string,\n    shouldShow: boolean\n): void {\n    const icons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment[field-path=\"${path}\"]`\n    );\n\n    icons.forEach((icon) => {\n        if (shouldShow) {\n            icon.classList.remove(hiddenClass); // Show the element\n        } else {\n            icon.classList.add(hiddenClass); // Hide the element using goober's hidden class\n        }\n    });\n}\n\n/**\n * Show all .highlighted-comment icons that have the hiddenClass applied.\n */\nexport function showAllHiddenHighlightedCommentIcons(): void {\n    // Query all elements that have both .highlighted-comment and hiddenClass\n    const hiddenIcons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment.${hiddenClass}`\n    );\n\n    // Loop through each hidden icon and remove the hiddenClass\n    hiddenIcons.forEach((icon) => {\n        icon.classList.remove(hiddenClass); // Remove the hiddenClass to show the icon\n    });\n}\n"],"mappings":"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","names":["import_preact","HighlightedCommentIcon"]}

package/dist/modern/visualBuilder/generators/generateHighlightedComment.d.cts

@@ -0,0 +1,33 @@
+import { IHighlightCommentData } from '../eventManager/useHighlightCommentIcon.cjs';
+import '../../cslp/types/cslp.types.cjs';
+import '../utils/types/index.types.cjs';
+import '../../cms/types/contentTypeSchema.types.cjs';
+import '../components/CommentIcon.cjs';
+import 'react/jsx-runtime';
+
+declare function highlightCommentIconOnCanvas(payload: IHighlightCommentData[]): void;
+/**
+ * Update Highlighted comment position , whenever scroll or resize happen.
+ */
+declare function updateHighlightedCommentIconPosition(): void;
+/**
+ * Removes the first highlighted comment icon based on an array of paths.
+ *
+ * @param pathsToRemove - Array of field-paths to remove.
+ */
+declare function removeHighlightedCommentIcon(pathToRemove: string): void;
+declare function removeAllHighlightedCommentIcons(): void;
+/**
+ * Toggle display style of a specific highlighted comment icon.
+ *
+ * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.
+ * @param shouldShow - Boolean value to determine whether to show or hide the icon.
+ * If true, the icon will be displayed. If false, the icon will be hidden.
+ */
+declare function toggleHighlightedCommentIconDisplay(path: string, shouldShow: boolean): void;
+/**
+ * Show all .highlighted-comment icons that have the hiddenClass applied.
+ */
+declare function showAllHiddenHighlightedCommentIcons(): void;
+
+export { highlightCommentIconOnCanvas, removeAllHighlightedCommentIcons, removeHighlightedCommentIcon, showAllHiddenHighlightedCommentIcons, toggleHighlightedCommentIconDisplay, updateHighlightedCommentIconPosition };

package/dist/modern/visualBuilder/generators/generateHighlightedComment.d.ts

@@ -0,0 +1,33 @@
+import { IHighlightCommentData } from '../eventManager/useHighlightCommentIcon.js';
+import '../../cslp/types/cslp.types.js';
+import '../utils/types/index.types.js';
+import '../../cms/types/contentTypeSchema.types.js';
+import '../components/CommentIcon.js';
+import 'react/jsx-runtime';
+
+declare function highlightCommentIconOnCanvas(payload: IHighlightCommentData[]): void;
+/**
+ * Update Highlighted comment position , whenever scroll or resize happen.
+ */
+declare function updateHighlightedCommentIconPosition(): void;
+/**
+ * Removes the first highlighted comment icon based on an array of paths.
+ *
+ * @param pathsToRemove - Array of field-paths to remove.
+ */
+declare function removeHighlightedCommentIcon(pathToRemove: string): void;
+declare function removeAllHighlightedCommentIcons(): void;
+/**
+ * Toggle display style of a specific highlighted comment icon.
+ *
+ * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.
+ * @param shouldShow - Boolean value to determine whether to show or hide the icon.
+ * If true, the icon will be displayed. If false, the icon will be hidden.
+ */
+declare function toggleHighlightedCommentIconDisplay(path: string, shouldShow: boolean): void;
+/**
+ * Show all .highlighted-comment icons that have the hiddenClass applied.
+ */
+declare function showAllHiddenHighlightedCommentIcons(): void;
+
+export { highlightCommentIconOnCanvas, removeAllHighlightedCommentIcons, removeHighlightedCommentIcon, showAllHiddenHighlightedCommentIcons, toggleHighlightedCommentIconDisplay, updateHighlightedCommentIconPosition };

package/dist/modern/visualBuilder/generators/generateHighlightedComment.js

@@ -0,0 +1,109 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generateHighlightedComment.tsx
+import { h } from "preact";
+import { render } from "preact";
+import HighlightedCommentIcon from "../components/HighlightedCommentIcon.js";
+import { css } from "goober";
+var highlighCommentOffset = 25;
+function highlightCommentIconOnCanvas(payload) {
+  const uniquePaths = {};
+  payload.forEach((data) => {
+    const cslpValue = data?.fieldMetadata?.cslpValue;
+    if (!cslpValue || uniquePaths[cslpValue]) {
+      return;
+    }
+    uniquePaths[cslpValue] = true;
+    const element = document.querySelector(`[data-cslp="${cslpValue}"]`);
+    if (element && element instanceof HTMLElement) {
+      const { top, left } = element.getBoundingClientRect();
+      const iconContainer = document.createElement("div");
+      iconContainer.setAttribute("field-path", cslpValue);
+      iconContainer.style.position = "fixed";
+      iconContainer.style.top = `${top - highlighCommentOffset}px`;
+      iconContainer.style.left = `${left - highlighCommentOffset}px`;
+      iconContainer.style.zIndex = "1000";
+      iconContainer.style.cursor = "pointer";
+      iconContainer.className = "highlighted-comment";
+      render(
+        h(HighlightedCommentIcon, { data }),
+        // Use h directly with Preact
+        iconContainer
+      );
+      const visualBuilderContainer = document.querySelector(
+        ".visual-builder__container"
+      );
+      if (visualBuilderContainer) {
+        let highlightCommentWrapper = visualBuilderContainer.querySelector(
+          ".visual-builder__highlighted-comment-wrapper"
+        );
+        if (!highlightCommentWrapper) {
+          highlightCommentWrapper = document.createElement("div");
+          highlightCommentWrapper.className = "visual-builder__highlighted-comment-wrapper";
+          visualBuilderContainer.appendChild(highlightCommentWrapper);
+        }
+        highlightCommentWrapper.appendChild(iconContainer);
+      }
+    }
+  });
+}
+function updateHighlightedCommentIconPosition() {
+  const icons = document.querySelectorAll(".highlighted-comment");
+  icons.forEach((icon) => {
+    if (icon && icon instanceof HTMLElement) {
+      const path = icon.getAttribute("field-path");
+      if (path) {
+        const targetElement = document.querySelector(
+          `[data-cslp="${path}"]`
+        );
+        if (targetElement && targetElement instanceof HTMLElement) {
+          const { top, left } = targetElement.getBoundingClientRect();
+          icon.style.top = `${top - highlighCommentOffset}px`;
+          icon.style.left = `${left - highlighCommentOffset}px`;
+        }
+      }
+    }
+  });
+}
+function removeHighlightedCommentIcon(pathToRemove) {
+  const iconToRemove = document.querySelectorAll(
+    `.highlighted-comment[field-path="${pathToRemove}"]`
+  );
+  iconToRemove?.forEach((icon) => icon?.remove());
+}
+function removeAllHighlightedCommentIcons() {
+  const icons = document.querySelectorAll(".highlighted-comment");
+  icons?.forEach((icon) => icon?.remove());
+}
+var hiddenClass = css`
+    display: none;
+`;
+function toggleHighlightedCommentIconDisplay(path, shouldShow) {
+  const icons = document.querySelectorAll(
+    `.highlighted-comment[field-path="${path}"]`
+  );
+  icons.forEach((icon) => {
+    if (shouldShow) {
+      icon.classList.remove(hiddenClass);
+    } else {
+      icon.classList.add(hiddenClass);
+    }
+  });
+}
+function showAllHiddenHighlightedCommentIcons() {
+  const hiddenIcons = document.querySelectorAll(
+    `.highlighted-comment.${hiddenClass}`
+  );
+  hiddenIcons.forEach((icon) => {
+    icon.classList.remove(hiddenClass);
+  });
+}
+export {
+  highlightCommentIconOnCanvas,
+  removeAllHighlightedCommentIcons,
+  removeHighlightedCommentIcon,
+  showAllHiddenHighlightedCommentIcons,
+  toggleHighlightedCommentIconDisplay,
+  updateHighlightedCommentIconPosition
+};
+//# sourceMappingURL=generateHighlightedComment.js.map

package/dist/modern/visualBuilder/generators/generateHighlightedComment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHighlightedComment.tsx"],"sourcesContent":["import { h, VNode } from \"preact\"; // Explicitly import VNode from Preact\nimport { render } from \"preact\";\nimport HighlightedCommentIcon from \"../components/HighlightedCommentIcon\";\nimport { css } from \"goober\";\nimport React from \"preact/compat\";\nimport { IHighlightCommentData } from \"../eventManager/useHighlightCommentIcon\";\n\n/**\n * Inserts highlighted comment icons based on an array of paths.\n *\n * This function locates elements in the DOM based on the `fieldMetadata.cslpValue`,\n * and appends a comment icon near each matching element.\n *\n * @param payload - Array of comment data with field metadata, schema, absolutePath and discussion ID.\n */\nconst highlighCommentOffset = 25;\n\nexport function highlightCommentIconOnCanvas(\n    payload: IHighlightCommentData[]\n): void {\n    const uniquePaths: { [key: string]: boolean } = {}; // Using object for uniqueness\n\n    payload.forEach((data) => {\n        const cslpValue = data?.fieldMetadata?.cslpValue;\n\n        // Check if the cslpValue is already in the Object\n        if (!cslpValue || uniquePaths[cslpValue]) {\n            return; // Skip if the value is not unique\n        }\n\n        uniquePaths[cslpValue] = true; // Mark it as processed\n\n        const element = document.querySelector(`[data-cslp=\"${cslpValue}\"]`);\n        if (element && element instanceof HTMLElement) {\n            const { top, left } = element.getBoundingClientRect();\n\n            const iconContainer = document.createElement(\"div\");\n            iconContainer.setAttribute(\"field-path\", cslpValue);\n\n            iconContainer.style.position = \"fixed\";\n            iconContainer.style.top = `${top - highlighCommentOffset}px`;\n            iconContainer.style.left = `${left - highlighCommentOffset}px`;\n            iconContainer.style.zIndex = \"1000\";\n            iconContainer.style.cursor = \"pointer\"\n            iconContainer.className = \"highlighted-comment\";\n\n            // Render the HighlightedCommentIcon using Preact's render method\n            render(\n                h(HighlightedCommentIcon, { data }), // Use h directly with Preact\n                iconContainer\n            );\n\n            const visualBuilderContainer = document.querySelector(\n                \".visual-builder__container\"\n            );\n            if (visualBuilderContainer) {\n                let highlightCommentWrapper =\n                    visualBuilderContainer.querySelector(\n                        \".visual-builder__highlighted-comment-wrapper\"\n                    );\n                if (!highlightCommentWrapper) {\n                    highlightCommentWrapper = document.createElement(\"div\");\n                    highlightCommentWrapper.className =\n                        \"visual-builder__highlighted-comment-wrapper\";\n                    visualBuilderContainer.appendChild(highlightCommentWrapper);\n                }\n                highlightCommentWrapper.appendChild(iconContainer);\n            }\n        }\n    });\n}\n\n/**\n * Update Highlighted comment position , whenever scroll or resize happen.\n */\n\nexport function updateHighlightedCommentIconPosition() {\n    // Query all elements with the .highlighted-comment class\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n\n    icons.forEach((icon) => {\n        if (icon && icon instanceof HTMLElement) {\n            // Get the field-path attribute from the icon container\n            const path = icon.getAttribute(\"field-path\");\n            if (path) {\n                // Query the target element using the path\n                const targetElement = document.querySelector(\n                    `[data-cslp=\"${path}\"]`\n                );\n                if (targetElement && targetElement instanceof HTMLElement) {\n                    // Get the target element's position relative to the viewport\n                    const { top, left } = targetElement.getBoundingClientRect();\n\n                    // Update the position of the icon container\n                    icon.style.top = `${top - highlighCommentOffset}px`; // Adjust based on the target element's top\n                    icon.style.left = `${left - highlighCommentOffset}px`; // Adjust based on the target element's left\n                }\n            }\n        }\n    });\n}\n\n/**\n * Removes the first highlighted comment icon based on an array of paths.\n *\n * @param pathsToRemove - Array of field-paths to remove.\n */\nexport function removeHighlightedCommentIcon(pathToRemove: string): void {\n    // Loop through each path in the array\n    const iconToRemove = document.querySelectorAll(\n        `.highlighted-comment[field-path=\"${pathToRemove}\"]`\n    );\n    iconToRemove?.forEach((icon) => icon?.remove());\n}\n\nexport function removeAllHighlightedCommentIcons(): void {\n    const icons = document.querySelectorAll(\".highlighted-comment\");\n    icons?.forEach((icon) => icon?.remove());\n}\n\n// Define a hidden class in goober\nconst hiddenClass = css`\n    display: none;\n`;\n\n/**\n * Toggle display style of a specific highlighted comment icon.\n *\n * @param path - The data-cslp attribute of the element whose corresponding highlighted comment icon should be toggled.\n * @param shouldShow - Boolean value to determine whether to show or hide the icon.\n * If true, the icon will be displayed. If false, the icon will be hidden.\n */\nexport function toggleHighlightedCommentIconDisplay(\n    path: string,\n    shouldShow: boolean\n): void {\n    const icons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment[field-path=\"${path}\"]`\n    );\n\n    icons.forEach((icon) => {\n        if (shouldShow) {\n            icon.classList.remove(hiddenClass); // Show the element\n        } else {\n            icon.classList.add(hiddenClass); // Hide the element using goober's hidden class\n        }\n    });\n}\n\n/**\n * Show all .highlighted-comment icons that have the hiddenClass applied.\n */\nexport function showAllHiddenHighlightedCommentIcons(): void {\n    // Query all elements that have both .highlighted-comment and hiddenClass\n    const hiddenIcons = document.querySelectorAll<HTMLElement>(\n        `.highlighted-comment.${hiddenClass}`\n    );\n\n    // Loop through each hidden icon and remove the hiddenClass\n    hiddenIcons.forEach((icon) => {\n        icon.classList.remove(hiddenClass); // Remove the hiddenClass to show the icon\n    });\n}\n"],"mappings":";;;AAAA,SAAS,SAAgB;AACzB,SAAS,cAAc;AACvB,OAAO,4BAA4B;AACnC,SAAS,WAAW;AAYpB,IAAM,wBAAwB;AAEvB,SAAS,6BACZ,SACI;AACJ,QAAM,cAA0C,CAAC;AAEjD,UAAQ,QAAQ,CAAC,SAAS;AACtB,UAAM,YAAY,MAAM,eAAe;AAGvC,QAAI,CAAC,aAAa,YAAY,SAAS,GAAG;AACtC;AAAA,IACJ;AAEA,gBAAY,SAAS,IAAI;AAEzB,UAAM,UAAU,SAAS,cAAc,eAAe,SAAS,IAAI;AACnE,QAAI,WAAW,mBAAmB,aAAa;AAC3C,YAAM,EAAE,KAAK,KAAK,IAAI,QAAQ,sBAAsB;AAEpD,YAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,oBAAc,aAAa,cAAc,SAAS;AAElD,oBAAc,MAAM,WAAW;AAC/B,oBAAc,MAAM,MAAM,GAAG,MAAM,qBAAqB;AACxD,oBAAc,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAC1D,oBAAc,MAAM,SAAS;AAC7B,oBAAc,MAAM,SAAS;AAC7B,oBAAc,YAAY;AAG1B;AAAA,QACI,EAAE,wBAAwB,EAAE,KAAK,CAAC;AAAA;AAAA,QAClC;AAAA,MACJ;AAEA,YAAM,yBAAyB,SAAS;AAAA,QACpC;AAAA,MACJ;AACA,UAAI,wBAAwB;AACxB,YAAI,0BACA,uBAAuB;AAAA,UACnB;AAAA,QACJ;AACJ,YAAI,CAAC,yBAAyB;AAC1B,oCAA0B,SAAS,cAAc,KAAK;AACtD,kCAAwB,YACpB;AACJ,iCAAuB,YAAY,uBAAuB;AAAA,QAC9D;AACA,gCAAwB,YAAY,aAAa;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAMO,SAAS,uCAAuC;AAEnD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAE9D,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,QAAQ,gBAAgB,aAAa;AAErC,YAAM,OAAO,KAAK,aAAa,YAAY;AAC3C,UAAI,MAAM;AAEN,cAAM,gBAAgB,SAAS;AAAA,UAC3B,eAAe,IAAI;AAAA,QACvB;AACA,YAAI,iBAAiB,yBAAyB,aAAa;AAEvD,gBAAM,EAAE,KAAK,KAAK,IAAI,cAAc,sBAAsB;AAG1D,eAAK,MAAM,MAAM,GAAG,MAAM,qBAAqB;AAC/C,eAAK,MAAM,OAAO,GAAG,OAAO,qBAAqB;AAAA,QACrD;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CAAC;AACL;AAOO,SAAS,6BAA6B,cAA4B;AAErE,QAAM,eAAe,SAAS;AAAA,IAC1B,oCAAoC,YAAY;AAAA,EACpD;AACA,gBAAc,QAAQ,CAAC,SAAS,MAAM,OAAO,CAAC;AAClD;AAEO,SAAS,mCAAyC;AACrD,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAC9D,SAAO,QAAQ,CAAC,SAAS,MAAM,OAAO,CAAC;AAC3C;AAGA,IAAM,cAAc;AAAA;AAAA;AAWb,SAAS,oCACZ,MACA,YACI;AACJ,QAAM,QAAQ,SAAS;AAAA,IACnB,oCAAoC,IAAI;AAAA,EAC5C;AAEA,QAAM,QAAQ,CAAC,SAAS;AACpB,QAAI,YAAY;AACZ,WAAK,UAAU,OAAO,WAAW;AAAA,IACrC,OAAO;AACH,WAAK,UAAU,IAAI,WAAW;AAAA,IAClC;AAAA,EACJ,CAAC;AACL;AAKO,SAAS,uCAA6C;AAEzD,QAAM,cAAc,SAAS;AAAA,IACzB,wBAAwB,WAAW;AAAA,EACvC;AAGA,cAAY,QAAQ,CAAC,SAAS;AAC1B,SAAK,UAAU,OAAO,WAAW;AAAA,EACrC,CAAC;AACL;","names":[]}

package/dist/modern/visualBuilder/generators/generateHoverOutline.cjs

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/generators/generateHoverOutline.tsx
+var generateHoverOutline_exports = {};
+__export(generateHoverOutline_exports, {
+  addHoverOutline: () => addHoverOutline
+});
+module.exports = __toCommonJS(generateHoverOutline_exports);
+var import_visualBuilder = require("../visualBuilder.style.cjs");
+function addHoverOutline(targetElement, disabled) {
+  const targetElementDimension = targetElement.getBoundingClientRect();
+  const hoverOutline = document.querySelector(
+    ".visual-builder__hover-outline"
+  );
+  if (hoverOutline) {
+    hoverOutline.classList.remove(
+      (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__hover-outline--hidden"]
+    );
+    if (disabled) {
+      hoverOutline.classList.add(
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__hover-outline--disabled"]
+      );
+    } else {
+      hoverOutline.classList.remove(
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__hover-outline--disabled"]
+      );
+    }
+    hoverOutline.style.top = `${targetElementDimension.top + window.scrollY}px`;
+    hoverOutline.style.left = `${targetElementDimension.left}px`;
+    hoverOutline.style.width = `${targetElementDimension.width}px`;
+    hoverOutline.style.height = `${targetElementDimension.height}px`;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addHoverOutline
+});
+//# sourceMappingURL=generateHoverOutline.cjs.map

package/dist/modern/visualBuilder/generators/generateHoverOutline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHoverOutline.tsx"],"sourcesContent":["import { visualBuilderStyles } from \"../visualBuilder.style\";\n\n/**\n * Adds a hover outline to the target element.\n * @param targetElement - The element to add the hover outline to.\n * @param isAnchorElement - Boolean to check for anchor elements.\n * @returns void\n */\nexport function addHoverOutline(\n    targetElement: Element,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const hoverOutline = document.querySelector<HTMLDivElement>(\n        \".visual-builder__hover-outline\"\n    );\n\n    if (hoverOutline) {\n        hoverOutline.classList.remove(\n            visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n        );\n\n        if (disabled) {\n            hoverOutline.classList.add(\n                visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n            );\n        } else {\n            hoverOutline.classList.remove(\n                visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n            );\n        }\n\n        hoverOutline.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        hoverOutline.style.left = `${targetElementDimension.left}px`;\n        hoverOutline.style.width = `${targetElementDimension.width}px`;\n        hoverOutline.style.height = `${targetElementDimension.height}px`;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAoC;AAQ7B,SAAS,gBACZ,eACA,UACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,eAAe,SAAS;AAAA,IAC1B;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,iBAAa,UAAU;AAAA,UACnB,0CAAoB,EAAE,uCAAuC;AAAA,IACjE;AAEA,QAAI,UAAU;AACV,mBAAa,UAAU;AAAA,YACnB,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ,OAAO;AACH,mBAAa,UAAU;AAAA,YACnB,0CAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ;AAEA,iBAAa,MAAM,MAAM,GACrB,uBAAuB,MAAM,OAAO,OACxC;AACA,iBAAa,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACxD,iBAAa,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AAC1D,iBAAa,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAAA,EAChE;AACJ;","names":[]}

package/dist/modern/visualBuilder/generators/generateHoverOutline.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Adds a hover outline to the target element.
+ * @param targetElement - The element to add the hover outline to.
+ * @param isAnchorElement - Boolean to check for anchor elements.
+ * @returns void
+ */
+declare function addHoverOutline(targetElement: Element, disabled?: boolean): void;
+
+export { addHoverOutline };

package/dist/modern/visualBuilder/generators/generateHoverOutline.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Adds a hover outline to the target element.
+ * @param targetElement - The element to add the hover outline to.
+ * @param isAnchorElement - Boolean to check for anchor elements.
+ * @returns void
+ */
+declare function addHoverOutline(targetElement: Element, disabled?: boolean): void;
+
+export { addHoverOutline };

package/dist/modern/visualBuilder/generators/generateHoverOutline.js

@@ -0,0 +1,32 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/generators/generateHoverOutline.tsx
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+function addHoverOutline(targetElement, disabled) {
+  const targetElementDimension = targetElement.getBoundingClientRect();
+  const hoverOutline = document.querySelector(
+    ".visual-builder__hover-outline"
+  );
+  if (hoverOutline) {
+    hoverOutline.classList.remove(
+      visualBuilderStyles()["visual-builder__hover-outline--hidden"]
+    );
+    if (disabled) {
+      hoverOutline.classList.add(
+        visualBuilderStyles()["visual-builder__hover-outline--disabled"]
+      );
+    } else {
+      hoverOutline.classList.remove(
+        visualBuilderStyles()["visual-builder__hover-outline--disabled"]
+      );
+    }
+    hoverOutline.style.top = `${targetElementDimension.top + window.scrollY}px`;
+    hoverOutline.style.left = `${targetElementDimension.left}px`;
+    hoverOutline.style.width = `${targetElementDimension.width}px`;
+    hoverOutline.style.height = `${targetElementDimension.height}px`;
+  }
+}
+export {
+  addHoverOutline
+};
+//# sourceMappingURL=generateHoverOutline.js.map

package/dist/modern/visualBuilder/generators/generateHoverOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/generators/generateHoverOutline.tsx"],"sourcesContent":["import { visualBuilderStyles } from \"../visualBuilder.style\";\n\n/**\n * Adds a hover outline to the target element.\n * @param targetElement - The element to add the hover outline to.\n * @param isAnchorElement - Boolean to check for anchor elements.\n * @returns void\n */\nexport function addHoverOutline(\n    targetElement: Element,\n    disabled?: boolean\n): void {\n    const targetElementDimension = targetElement.getBoundingClientRect();\n\n    const hoverOutline = document.querySelector<HTMLDivElement>(\n        \".visual-builder__hover-outline\"\n    );\n\n    if (hoverOutline) {\n        hoverOutline.classList.remove(\n            visualBuilderStyles()[\"visual-builder__hover-outline--hidden\"]\n        );\n\n        if (disabled) {\n            hoverOutline.classList.add(\n                visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n            );\n        } else {\n            hoverOutline.classList.remove(\n                visualBuilderStyles()[\"visual-builder__hover-outline--disabled\"]\n            );\n        }\n\n        hoverOutline.style.top = `${\n            targetElementDimension.top + window.scrollY\n        }px`;\n        hoverOutline.style.left = `${targetElementDimension.left}px`;\n        hoverOutline.style.width = `${targetElementDimension.width}px`;\n        hoverOutline.style.height = `${targetElementDimension.height}px`;\n    }\n}\n"],"mappings":";;;AAAA,SAAS,2BAA2B;AAQ7B,SAAS,gBACZ,eACA,UACI;AACJ,QAAM,yBAAyB,cAAc,sBAAsB;AAEnE,QAAM,eAAe,SAAS;AAAA,IAC1B;AAAA,EACJ;AAEA,MAAI,cAAc;AACd,iBAAa,UAAU;AAAA,MACnB,oBAAoB,EAAE,uCAAuC;AAAA,IACjE;AAEA,QAAI,UAAU;AACV,mBAAa,UAAU;AAAA,QACnB,oBAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ,OAAO;AACH,mBAAa,UAAU;AAAA,QACnB,oBAAoB,EAAE,yCAAyC;AAAA,MACnE;AAAA,IACJ;AAEA,iBAAa,MAAM,MAAM,GACrB,uBAAuB,MAAM,OAAO,OACxC;AACA,iBAAa,MAAM,OAAO,GAAG,uBAAuB,IAAI;AACxD,iBAAa,MAAM,QAAQ,GAAG,uBAAuB,KAAK;AAC1D,iBAAa,MAAM,SAAS,GAAG,uBAAuB,MAAM;AAAA,EAChE;AACJ;","names":[]}