@contentstack/live-preview-utils 3.2.5 → 3.4.0

package/dist/modern/visualBuilder/components/FieldLocationAppList.js

@@ -0,0 +1,152 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/FieldLocationAppList.tsx
+import { useState, useMemo } from "preact/compat";
+import { EmptyAppIcon } from "./icons/EmptyAppIcon.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var normalize = (text) => text.toLowerCase().replace(/[^a-z0-9 ]/gi, "").trim();
+var FieldLocationAppList = ({
+  apps,
+  position,
+  toolbarRef,
+  domEditStack,
+  setDisplayAllApps
+}) => {
+  const remainingApps = apps.filter((app, index) => index !== 0);
+  const [search, setSearch] = useState("");
+  const filteredApps = useMemo(() => {
+    if (!search.trim()) return remainingApps;
+    const normalizedSearch = normalize(search);
+    return remainingApps.filter((app) => {
+      return normalize(app.title).includes(normalizedSearch);
+    });
+  }, [search, remainingApps]);
+  const handleAppClick = (app) => {
+    visualBuilderPostMessage?.send(
+      VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP,
+      {
+        app,
+        position: toolbarRef.current?.getBoundingClientRect(),
+        DomEditStack: domEditStack
+      }
+    );
+    setDisplayAllApps(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        visualBuilderStyles()["visual-builder__field-location-app-list"],
+        {
+          [visualBuilderStyles()["visual-builder__field-location-app-list--left"]]: position === "left",
+          [visualBuilderStyles()["visual-builder__field-location-app-list--right"]]: position === "right"
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: visualBuilderStyles()["visual-builder__field-location-app-list__search-container"],
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 14 14",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: classNames(
+                    "Search__search-icon Icon--mini",
+                    visualBuilderStyles()["visual-builder__field-location-app-list__search-icon"]
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M12.438 12.438L9.624 9.624M6.25 10.75a4.5 4.5 0 100-9 4.5 4.5 0 000 9z",
+                      stroke: "#A9B6CB",
+                      strokeWidth: "2",
+                      strokeMiterlimit: "10",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: search,
+                  onInput: (e) => setSearch(e.target.value),
+                  placeholder: "Search for Apps",
+                  className: visualBuilderStyles()["visual-builder__field-location-app-list__search-input"]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: visualBuilderStyles()["visual-builder__field-location-app-list__content"],
+            children: [
+              filteredApps.length === 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: visualBuilderStyles()["visual-builder__field-location-app-list__no-results"],
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: visualBuilderStyles()["visual-builder__field-location-app-list__no-results-text"],
+                      children: "No matching results found!"
+                    }
+                  )
+                }
+              ),
+              filteredApps.map((app) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: visualBuilderStyles()["visual-builder__field-location-app-list__item"],
+                  onClick: () => handleAppClick(app),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: visualBuilderStyles()["visual-builder__field-location-app-list__item-icon-container"],
+                        children: app.icon ? /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: app.icon,
+                            alt: app.title,
+                            className: visualBuilderStyles()["visual-builder__field-location-app-list__item-icon"]
+                          }
+                        ) : /* @__PURE__ */ jsx(EmptyAppIcon, { id: app.app_installation_uid })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: visualBuilderStyles()["visual-builder__field-location-app-list__item-title"],
+                        children: app.title
+                      }
+                    )
+                  ]
+                },
+                app.uid
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FieldLocationAppList
+};
+//# sourceMappingURL=FieldLocationAppList.js.map

package/dist/modern/visualBuilder/components/FieldLocationAppList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/FieldLocationAppList.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from \"preact/compat\";\nimport { EmptyAppIcon } from \"./icons/EmptyAppIcon\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport classNames from \"classnames\";\nimport { CslpData } from \"../../utils/cslpdata\";\n\ninterface App {\n    app_installation_uid: string;\n    app_uid: string;\n    contentTypeUid: string;\n    entryUid: string;\n    fieldDataType: string;\n    fieldDisplayName: string;\n    fieldPath: string;\n    icon?: string;\n    locale: string;\n    manifest: {\n        uid: string;\n        name: string;\n        description: string;\n        icon: string;\n        visibility: string;\n    };\n    title: string;\n    uid: string;\n}\n\ninterface FieldLocationAppListProps {\n    apps: App[];\n    position: \"left\" | \"right\";\n    toolbarRef: React.RefObject<HTMLDivElement>;\n    domEditStack:CslpData[]\n    setDisplayAllApps: (displayAllApps: boolean) => void;\n    displayAllApps: boolean;\n}\n\nconst normalize = (text: string) =>\n    text\n        .toLowerCase()\n        .replace(/[^a-z0-9 ]/gi, \"\")\n        .trim();\n\nexport const FieldLocationAppList = ({\n    apps,\n    position,\n    toolbarRef,\n    domEditStack,\n    setDisplayAllApps,\n}: FieldLocationAppListProps) => {\n    const remainingApps = apps.filter((app, index) => index !== 0);\n    const [search, setSearch] = useState(\"\");\n\n    const filteredApps = useMemo(() => {\n        if (!search.trim()) return remainingApps;\n\n        const normalizedSearch = normalize(search);\n        return remainingApps.filter((app) => {\n            return (\n                normalize(app.title).includes(normalizedSearch) \n            );\n        });\n    }, [search, remainingApps]);\n\n    const handleAppClick = (app: App) => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP,\n            {\n                app: app,\n                position: toolbarRef.current?.getBoundingClientRect(),\n                DomEditStack:domEditStack\n            }\n        );\n        setDisplayAllApps(false);\n    };\n\n    return (\n        <div\n            className={classNames(\n                visualBuilderStyles()[\n                    \"visual-builder__field-location-app-list\"\n                ],\n                {\n                    [visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list--left\"\n                    ]]: position === \"left\",\n                    [visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list--right\"\n                    ]]: position === \"right\",\n                }\n            )}\n        >\n            <div\n                className={\n                    visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list__search-container\"\n                    ]\n                }\n            >\n                <svg\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    className={classNames(\n                        \"Search__search-icon Icon--mini\",\n                        visualBuilderStyles()[\n                            \"visual-builder__field-location-app-list__search-icon\"\n                        ]\n                    )}\n                >\n                    <path\n                        d=\"M12.438 12.438L9.624 9.624M6.25 10.75a4.5 4.5 0 100-9 4.5 4.5 0 000 9z\"\n                        stroke=\"#A9B6CB\"\n                        strokeWidth=\"2\"\n                        strokeMiterlimit=\"10\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                    ></path>\n                </svg>\n                <input\n                    type=\"text\"\n                    value={search}\n                    onInput={(e) =>\n                        setSearch((e.target as HTMLInputElement).value)\n                    }\n                    placeholder=\"Search for Apps\"\n                    className={\n                        visualBuilderStyles()[\n                            \"visual-builder__field-location-app-list__search-input\"\n                        ]\n                    }\n                />\n            </div>\n\n            <div\n                className={\n                    visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list__content\"\n                    ]\n                }\n            >\n                {filteredApps.length === 0 && (\n                    <div\n                        className={\n                            visualBuilderStyles()[\n                                \"visual-builder__field-location-app-list__no-results\"\n                            ]\n                        }\n                    >\n                        <span\n                            className={\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-location-app-list__no-results-text\"\n                                ]\n                            }\n                        >\n                            No matching results found!\n                        </span>\n                    </div>\n                )}\n                {filteredApps.map((app) => (\n                    <div\n                        key={app.uid}\n                        className={\n                            visualBuilderStyles()[\n                                \"visual-builder__field-location-app-list__item\"\n                            ]\n                        }\n                        onClick={() => handleAppClick(app)}\n                    >\n                        <div\n                            className={\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-location-app-list__item-icon-container\"\n                                ]\n                            }\n                        >\n                            {app.icon ? (\n                                <img\n                                    src={app.icon}\n                                    alt={app.title}\n                                    className={\n                                        visualBuilderStyles()[\n                                            \"visual-builder__field-location-app-list__item-icon\"\n                                        ]\n                                    }\n                                />\n                            ) : (\n                                <EmptyAppIcon id={app.app_installation_uid} />\n                            )}\n                        </div>\n                        <span\n                            className={\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-location-app-list__item-title\"\n                                ]\n                            }\n                        >\n                            {app.title}\n                        </span>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","names":[]}

package/dist/modern/visualBuilder/components/FieldLocationIcon.cjs

@@ -0,0 +1,123 @@
+"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/FieldLocationIcon.tsx
+var FieldLocationIcon_exports = {};
+__export(FieldLocationIcon_exports, {
+  FieldLocationIcon: () => FieldLocationIcon
+});
+module.exports = __toCommonJS(FieldLocationIcon_exports);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_EmptyAppIcon = require("./icons/EmptyAppIcon.cjs");
+var import_icons = require("./icons/index.cjs");
+var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
+var import_jsx_runtime = require("preact/jsx-runtime");
+var FieldLocationIcon = ({
+  fieldLocationData,
+  multipleFieldToolbarButtonClasses,
+  handleMoreIconClick,
+  moreButtonRef,
+  toolbarRef,
+  domEditStack
+}) => {
+  if (!fieldLocationData?.apps || fieldLocationData?.apps?.length === 0) {
+    return null;
+  }
+  const handleAppClick = (app) => {
+    if (!toolbarRef.current) return;
+    import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP, {
+      app,
+      position: toolbarRef.current?.getBoundingClientRect(),
+      DomEditStack: domEditStack
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: toolbarRef,
+      className: (0, import_classnames.default)(
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-location-icons-container"]
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "hr",
+          {
+            className: (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-location-icons-container__divider"]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            title: fieldLocationData.apps[0].title,
+            className: multipleFieldToolbarButtonClasses,
+            "data-tooltip": fieldLocationData.apps[0].title,
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleAppClick(fieldLocationData.apps[0]);
+            },
+            "data-testid": "field-location-icon",
+            children: fieldLocationData.apps[0].icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "img",
+              {
+                src: fieldLocationData.apps[0].icon,
+                alt: fieldLocationData.apps[0].title,
+                className: (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-location-icons-container__app-icon"]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_EmptyAppIcon.EmptyAppIcon,
+              {
+                id: fieldLocationData.apps[0].app_installation_uid
+              }
+            )
+          },
+          `${fieldLocationData.apps[0].uid}`
+        ),
+        fieldLocationData.apps.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            ref: moreButtonRef,
+            className: multipleFieldToolbarButtonClasses,
+            "data-tooltip": "More",
+            onClick: handleMoreIconClick,
+            "data-testid": "field-location-more-button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MoreIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FieldLocationIcon
+});
+//# sourceMappingURL=FieldLocationIcon.cjs.map

package/dist/modern/visualBuilder/components/FieldLocationIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/FieldLocationIcon.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { EmptyAppIcon } from \"./icons/EmptyAppIcon\";\nimport { MoreIcon } from \"./icons\";\nimport React, { useRef } from \"preact/compat\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CslpData } from \"../../utils/cslpdata\";\n\nexport const FieldLocationIcon = ({\n    fieldLocationData,\n    multipleFieldToolbarButtonClasses,\n    handleMoreIconClick,\n    moreButtonRef,\n    toolbarRef,\n    domEditStack\n}: {\n    fieldLocationData: any;\n    multipleFieldToolbarButtonClasses: any;\n    handleMoreIconClick: () => void;\n    moreButtonRef: any;\n    toolbarRef: any;\n    domEditStack:CslpData[]\n}) => {\n\n\n\n    if (!fieldLocationData?.apps || fieldLocationData?.apps?.length === 0) {\n        return null;\n    }\n\n    const handleAppClick = (app: any) => {\n        if(!toolbarRef.current) return\n        visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP, {\n            app,\n            position: toolbarRef.current?.getBoundingClientRect(),\n            DomEditStack:domEditStack\n        });\n    };\n\n    return (\n        <div\n            ref={toolbarRef}\n            className={classNames(\n                visualBuilderStyles()[\n                    \"visual-builder__field-location-icons-container\"\n                ]\n            )}\n        >\n            <hr\n                className={visualBuilderStyles()[\"visual-builder__field-location-icons-container__divider\"]}\n            />\n            <button\n                key={`${fieldLocationData.apps[0].uid}`}\n                title={fieldLocationData.apps[0].title}\n                className={multipleFieldToolbarButtonClasses}\n                data-tooltip={fieldLocationData.apps[0].title}\n                onClick={(e) => {\n                   e.preventDefault();\n                   e.stopPropagation();\n                   handleAppClick(fieldLocationData.apps[0]);\n                }}\n                data-testid=\"field-location-icon\"\n            >\n                {fieldLocationData.apps[0].icon ? (\n                    <img\n                        src={fieldLocationData.apps[0].icon}\n                        alt={fieldLocationData.apps[0].title}\n                        className={visualBuilderStyles()[\"visual-builder__field-location-icons-container__app-icon\"]}\n                    />\n                ) : (\n                    <EmptyAppIcon\n                        id={fieldLocationData.apps[0].app_installation_uid}\n                    />\n                )}\n            </button>\n\n           \n           {\n            fieldLocationData.apps.length > 1 && (\n                <button\n                    ref={moreButtonRef}\n                    className={multipleFieldToolbarButtonClasses}\n                    data-tooltip={\"More\"}\n                    onClick={handleMoreIconClick}\n                    data-testid=\"field-location-more-button\"\n                >\n                    <MoreIcon />\n                </button>\n            )\n           }\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,2BAAoC;AACpC,0BAA6B;AAC7B,mBAAyB;AAGzB,yBAA+C;AAC/C,sCAAqC;AAmC7B;AAhCD,IAAM,oBAAoB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAOM;AAIF,MAAI,CAAC,mBAAmB,QAAQ,mBAAmB,MAAM,WAAW,GAAG;AACnE,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,CAAC,QAAa;AACjC,QAAG,CAAC,WAAW,QAAS;AACxB,oCAAAA,SAA0B,KAAK,kDAA+B,6BAA6B;AAAA,MACvF;AAAA,MACA,UAAU,WAAW,SAAS,sBAAsB;AAAA,MACpD,cAAa;AAAA,IACjB,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW,kBAAAC;AAAA,YACP,0CAAoB,EAChB,gDACJ;AAAA,MACJ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,0CAAoB,EAAE,yDAAyD;AAAA;AAAA,QAC9F;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAEG,OAAO,kBAAkB,KAAK,CAAC,EAAE;AAAA,YACjC,WAAW;AAAA,YACX,gBAAc,kBAAkB,KAAK,CAAC,EAAE;AAAA,YACxC,SAAS,CAAC,MAAM;AACb,gBAAE,eAAe;AACjB,gBAAE,gBAAgB;AAClB,6BAAe,kBAAkB,KAAK,CAAC,CAAC;AAAA,YAC3C;AAAA,YACA,eAAY;AAAA,YAEX,4BAAkB,KAAK,CAAC,EAAE,OACvB;AAAA,cAAC;AAAA;AAAA,gBACG,KAAK,kBAAkB,KAAK,CAAC,EAAE;AAAA,gBAC/B,KAAK,kBAAkB,KAAK,CAAC,EAAE;AAAA,gBAC/B,eAAW,0CAAoB,EAAE,0DAA0D;AAAA;AAAA,YAC/F,IAEA;AAAA,cAAC;AAAA;AAAA,gBACG,IAAI,kBAAkB,KAAK,CAAC,EAAE;AAAA;AAAA,YAClC;AAAA;AAAA,UApBC,GAAG,kBAAkB,KAAK,CAAC,EAAE,GAAG;AAAA,QAsBzC;AAAA,QAIA,kBAAkB,KAAK,SAAS,KAC5B;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,WAAW;AAAA,YACX,gBAAc;AAAA,YACd,SAAS;AAAA,YACT,eAAY;AAAA,YAEZ,sDAAC,yBAAS;AAAA;AAAA,QACd;AAAA;AAAA;AAAA,EAGR;AAER;","names":["visualBuilderPostMessage","classNames"]}

package/dist/modern/visualBuilder/components/FieldLocationIcon.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CslpData } from '../../utils/cslpdata.cjs';
+
+declare const FieldLocationIcon: ({ fieldLocationData, multipleFieldToolbarButtonClasses, handleMoreIconClick, moreButtonRef, toolbarRef, domEditStack }: {
+    fieldLocationData: any;
+    multipleFieldToolbarButtonClasses: any;
+    handleMoreIconClick: () => void;
+    moreButtonRef: any;
+    toolbarRef: any;
+    domEditStack: CslpData[];
+}) => react_jsx_runtime.JSX.Element | null;
+
+export { FieldLocationIcon };

package/dist/modern/visualBuilder/components/FieldLocationIcon.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CslpData } from '../../utils/cslpdata.js';
+
+declare const FieldLocationIcon: ({ fieldLocationData, multipleFieldToolbarButtonClasses, handleMoreIconClick, moreButtonRef, toolbarRef, domEditStack }: {
+    fieldLocationData: any;
+    multipleFieldToolbarButtonClasses: any;
+    handleMoreIconClick: () => void;
+    moreButtonRef: any;
+    toolbarRef: any;
+    domEditStack: CslpData[];
+}) => react_jsx_runtime.JSX.Element | null;
+
+export { FieldLocationIcon };

package/dist/modern/visualBuilder/components/FieldLocationIcon.js

@@ -0,0 +1,90 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/FieldLocationIcon.tsx
+import classNames from "classnames";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { EmptyAppIcon } from "./icons/EmptyAppIcon.js";
+import { MoreIcon } from "./icons/index.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var FieldLocationIcon = ({
+  fieldLocationData,
+  multipleFieldToolbarButtonClasses,
+  handleMoreIconClick,
+  moreButtonRef,
+  toolbarRef,
+  domEditStack
+}) => {
+  if (!fieldLocationData?.apps || fieldLocationData?.apps?.length === 0) {
+    return null;
+  }
+  const handleAppClick = (app) => {
+    if (!toolbarRef.current) return;
+    visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP, {
+      app,
+      position: toolbarRef.current?.getBoundingClientRect(),
+      DomEditStack: domEditStack
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: toolbarRef,
+      className: classNames(
+        visualBuilderStyles()["visual-builder__field-location-icons-container"]
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "hr",
+          {
+            className: visualBuilderStyles()["visual-builder__field-location-icons-container__divider"]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            title: fieldLocationData.apps[0].title,
+            className: multipleFieldToolbarButtonClasses,
+            "data-tooltip": fieldLocationData.apps[0].title,
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleAppClick(fieldLocationData.apps[0]);
+            },
+            "data-testid": "field-location-icon",
+            children: fieldLocationData.apps[0].icon ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: fieldLocationData.apps[0].icon,
+                alt: fieldLocationData.apps[0].title,
+                className: visualBuilderStyles()["visual-builder__field-location-icons-container__app-icon"]
+              }
+            ) : /* @__PURE__ */ jsx(
+              EmptyAppIcon,
+              {
+                id: fieldLocationData.apps[0].app_installation_uid
+              }
+            )
+          },
+          `${fieldLocationData.apps[0].uid}`
+        ),
+        fieldLocationData.apps.length > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: moreButtonRef,
+            className: multipleFieldToolbarButtonClasses,
+            "data-tooltip": "More",
+            onClick: handleMoreIconClick,
+            "data-testid": "field-location-more-button",
+            children: /* @__PURE__ */ jsx(MoreIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FieldLocationIcon
+};
+//# sourceMappingURL=FieldLocationIcon.js.map

package/dist/modern/visualBuilder/components/FieldLocationIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/FieldLocationIcon.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { EmptyAppIcon } from \"./icons/EmptyAppIcon\";\nimport { MoreIcon } from \"./icons\";\nimport React, { useRef } from \"preact/compat\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CslpData } from \"../../utils/cslpdata\";\n\nexport const FieldLocationIcon = ({\n    fieldLocationData,\n    multipleFieldToolbarButtonClasses,\n    handleMoreIconClick,\n    moreButtonRef,\n    toolbarRef,\n    domEditStack\n}: {\n    fieldLocationData: any;\n    multipleFieldToolbarButtonClasses: any;\n    handleMoreIconClick: () => void;\n    moreButtonRef: any;\n    toolbarRef: any;\n    domEditStack:CslpData[]\n}) => {\n\n\n\n    if (!fieldLocationData?.apps || fieldLocationData?.apps?.length === 0) {\n        return null;\n    }\n\n    const handleAppClick = (app: any) => {\n        if(!toolbarRef.current) return\n        visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP, {\n            app,\n            position: toolbarRef.current?.getBoundingClientRect(),\n            DomEditStack:domEditStack\n        });\n    };\n\n    return (\n        <div\n            ref={toolbarRef}\n            className={classNames(\n                visualBuilderStyles()[\n                    \"visual-builder__field-location-icons-container\"\n                ]\n            )}\n        >\n            <hr\n                className={visualBuilderStyles()[\"visual-builder__field-location-icons-container__divider\"]}\n            />\n            <button\n                key={`${fieldLocationData.apps[0].uid}`}\n                title={fieldLocationData.apps[0].title}\n                className={multipleFieldToolbarButtonClasses}\n                data-tooltip={fieldLocationData.apps[0].title}\n                onClick={(e) => {\n                   e.preventDefault();\n                   e.stopPropagation();\n                   handleAppClick(fieldLocationData.apps[0]);\n                }}\n                data-testid=\"field-location-icon\"\n            >\n                {fieldLocationData.apps[0].icon ? (\n                    <img\n                        src={fieldLocationData.apps[0].icon}\n                        alt={fieldLocationData.apps[0].title}\n                        className={visualBuilderStyles()[\"visual-builder__field-location-icons-container__app-icon\"]}\n                    />\n                ) : (\n                    <EmptyAppIcon\n                        id={fieldLocationData.apps[0].app_installation_uid}\n                    />\n                )}\n            </button>\n\n           \n           {\n            fieldLocationData.apps.length > 1 && (\n                <button\n                    ref={moreButtonRef}\n                    className={multipleFieldToolbarButtonClasses}\n                    data-tooltip={\"More\"}\n                    onClick={handleMoreIconClick}\n                    data-testid=\"field-location-more-button\"\n                >\n                    <MoreIcon />\n                </button>\n            )\n           }\n        </div>\n    );\n};\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAGzB,SAAS,sCAAsC;AAC/C,OAAO,8BAA8B;AAmC7B,SAQI,KARJ;AAhCD,IAAM,oBAAoB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAOM;AAIF,MAAI,CAAC,mBAAmB,QAAQ,mBAAmB,MAAM,WAAW,GAAG;AACnE,WAAO;AAAA,EACX;AAEA,QAAM,iBAAiB,CAAC,QAAa;AACjC,QAAG,CAAC,WAAW,QAAS;AACxB,8BAA0B,KAAK,+BAA+B,6BAA6B;AAAA,MACvF;AAAA,MACA,UAAU,WAAW,SAAS,sBAAsB;AAAA,MACpD,cAAa;AAAA,IACjB,CAAC;AAAA,EACL;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,WAAW;AAAA,QACP,oBAAoB,EAChB,gDACJ;AAAA,MACJ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW,oBAAoB,EAAE,yDAAyD;AAAA;AAAA,QAC9F;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAEG,OAAO,kBAAkB,KAAK,CAAC,EAAE;AAAA,YACjC,WAAW;AAAA,YACX,gBAAc,kBAAkB,KAAK,CAAC,EAAE;AAAA,YACxC,SAAS,CAAC,MAAM;AACb,gBAAE,eAAe;AACjB,gBAAE,gBAAgB;AAClB,6BAAe,kBAAkB,KAAK,CAAC,CAAC;AAAA,YAC3C;AAAA,YACA,eAAY;AAAA,YAEX,4BAAkB,KAAK,CAAC,EAAE,OACvB;AAAA,cAAC;AAAA;AAAA,gBACG,KAAK,kBAAkB,KAAK,CAAC,EAAE;AAAA,gBAC/B,KAAK,kBAAkB,KAAK,CAAC,EAAE;AAAA,gBAC/B,WAAW,oBAAoB,EAAE,0DAA0D;AAAA;AAAA,YAC/F,IAEA;AAAA,cAAC;AAAA;AAAA,gBACG,IAAI,kBAAkB,KAAK,CAAC,EAAE;AAAA;AAAA,YAClC;AAAA;AAAA,UApBC,GAAG,kBAAkB,KAAK,CAAC,EAAE,GAAG;AAAA,QAsBzC;AAAA,QAIA,kBAAkB,KAAK,SAAS,KAC5B;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,WAAW;AAAA,YACX,gBAAc;AAAA,YACd,SAAS;AAAA,YACT,eAAY;AAAA,YAEZ,8BAAC,YAAS;AAAA;AAAA,QACd;AAAA;AAAA;AAAA,EAGR;AAER;","names":[]}