@contentstack/live-preview-utils 2.0.4 → 3.0.0

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

@@ -0,0 +1,13 @@
+import { CslpData } from '../../cslp/types/cslp.types.js';
+import { ISchemaFieldMap } from '../utils/types/index.types.js';
+import '../../cms/types/contentTypeSchema.types.js';
+
+interface EmptyBlockProps {
+    details: {
+        fieldMetadata: CslpData;
+        fieldSchema: ISchemaFieldMap;
+    };
+}
+declare function EmptyBlock(props: EmptyBlockProps): JSX.Element;
+
+export { EmptyBlock };

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

@@ -0,0 +1,70 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/emptyBlock.tsx
+import classNames from "classnames";
+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 { jsx, jsxs } from "preact/jsx-runtime";
+function EmptyBlock(props) {
+  const { details } = props;
+  const blockParentName = details.fieldSchema.display_name;
+  async function sendAddInstanceEvent() {
+    await visualBuilderPostMessage?.send(
+      VisualBuilderPostMessageEvents.ADD_INSTANCE,
+      {
+        fieldMetadata: details.fieldMetadata,
+        index: 0
+      }
+    );
+    observeParentAndFocusNewInstance({
+      parentCslp: details.fieldMetadata.cslpValue,
+      index: 0
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "visual-builder__empty-block",
+        visualBuilderStyles()["visual-builder__empty-block"]
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames(
+              "visual-builder__empty-block-title",
+              visualBuilderStyles()["visual-builder__empty-block-title"]
+            ),
+            children: [
+              "There are no ",
+              blockParentName.toLowerCase(),
+              " on this page yet. Click the button below to add one."
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: classNames(
+              "visual-builder__empty-block-add-button",
+              visualBuilderStyles()["visual-builder__empty-block-add-button"]
+            ),
+            onClick: () => sendAddInstanceEvent(),
+            children: [
+              /* @__PURE__ */ jsx("i", { className: "fas fa-plus" }),
+              " \xA0",
+              blockParentName
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EmptyBlock
+};
+//# sourceMappingURL=emptyBlock.js.map

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

@@ -0,0 +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            >\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,SAiBI,KAjBJ;AA1BL,SAAS,WAAW,OAAqC;AAC5D,QAAM,EAAE,QAAQ,IAAI;AAEpB,QAAM,kBAAkB,QAAQ,YAAY;AAE5C,iBAAe,uBAAuB;AAClC,UAAM,0BAA0B;AAAA,MAC5B,+BAA+B;AAAA,MAC/B;AAAA,QACI,eAAe,QAAQ;AAAA,QACvB,OAAO;AAAA,MACX;AAAA,IACJ;AACA,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,YAEpC;AAAA,kCAAC,OAAE,WAAU,eAAc;AAAA,cAAI;AAAA,cAC9B;AAAA;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}

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

@@ -0,0 +1,237 @@
+"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/fieldLabelWrapper.tsx
+var fieldLabelWrapper_exports = {};
+__export(fieldLabelWrapper_exports, {
+  default: () => fieldLabelWrapper_default
+});
+module.exports = __toCommonJS(fieldLabelWrapper_exports);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_compat = require("preact/compat");
+var import_cslp = require("../../cslp/index.cjs");
+var import_fieldSchemaMap = require("../utils/fieldSchemaMap.cjs");
+var import_isFieldDisabled = require("../utils/isFieldDisabled.cjs");
+var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
+var import_icons = require("./icons/index.cjs");
+var import_loading = require("./icons/loading.cjs");
+var import_generateCustomCursor = require("../generators/generateCustomCursor.cjs");
+var import_lodash_es = require("lodash-es");
+var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_CslpError = require("./CslpError.cjs");
+var import_errorHandling = require("../utils/errorHandling.cjs");
+var import_postMessage = require("../utils/types/postMessage.types.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+async function getFieldDisplayNames(fieldMetadata) {
+  const result = await import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);
+  return result;
+}
+function FieldLabelWrapperComponent(props) {
+  const { eventDetails } = props;
+  const [currentField, setCurrentField] = (0, import_compat.useState)({
+    text: "",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}),
+    prefixIcon: null,
+    disabled: false,
+    isVariant: false
+  });
+  const [displayNames, setDisplayNames] = (0, import_compat.useState)(
+    {}
+  );
+  const [displayNamesLoading, setDisplayNamesLoading] = (0, import_compat.useState)(true);
+  const [error, setError] = (0, import_compat.useState)(false);
+  const [isDropdownOpen, setIsDropdownOpen] = (0, import_compat.useState)(false);
+  function calculateTopOffset(index) {
+    const height = -30;
+    const offset = (index + 1) * height;
+    return `${offset}px`;
+  }
+  (0, import_compat.useEffect)(() => {
+    const fetchData = async () => {
+      setDisplayNamesLoading(true);
+      const allPaths = (0, import_lodash_es.uniqBy)(
+        [
+          props.fieldMetadata,
+          ...props.parentPaths.map((path) => {
+            return (0, import_cslp.extractDetailsFromCslp)(path);
+          })
+        ],
+        "cslpValue"
+      );
+      const displayNames2 = await getFieldDisplayNames(allPaths);
+      const fieldSchema = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
+        props.fieldMetadata.content_type_uid,
+        props.fieldMetadata.fieldPath
+      );
+      if ((0, import_errorHandling.hasPostMessageError)(displayNames2) || !fieldSchema) {
+        setDisplayNamesLoading(false);
+        setError(true);
+        return;
+      }
+      const { isDisabled: fieldDisabled, reason } = (0, import_isFieldDisabled.isFieldDisabled)(
+        fieldSchema,
+        eventDetails
+      );
+      const currentFieldDisplayName = displayNames2?.[props.fieldMetadata.cslpValue] ?? fieldSchema.display_name;
+      const hasParentPaths = !!props?.parentPaths?.length;
+      const isVariant = props.fieldMetadata.variant ? true : false;
+      setCurrentField({
+        text: currentFieldDisplayName,
+        icon: fieldDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__tooltip--persistent"]
+            ),
+            "data-tooltip": reason,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoIcon, {})
+          }
+        ) : hasParentPaths ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
+        prefixIcon: (0, import_generateCustomCursor.getFieldIcon)(fieldSchema),
+        disabled: fieldDisabled,
+        isVariant
+      });
+      if (displayNames2) {
+        setDisplayNames(displayNames2);
+      }
+      if (Object.keys(displayNames2 || {})?.length === allPaths.length) {
+        setDisplayNamesLoading(false);
+      }
+    };
+    fetchData();
+  }, [props]);
+  const onParentPathClick = (cslp) => {
+    const parentElement = props.getParentEditableElement(cslp);
+    if (parentElement) {
+      parentElement.click();
+    }
+  };
+  function getCurrentFieldIcon() {
+    if (error) {
+      return null;
+    } else if (displayNamesLoading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.LoadingIcon, {});
+    } else {
+      return currentField.icon;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "visual-builder__focused-toolbar__field-label-container",
+        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__field-label-container"]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: (0, import_classnames.default)(
+            "visual-builder__focused-toolbar__field-label-wrapper",
+            (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__field-label-wrapper"],
+            {
+              "visual-builder__focused-toolbar--field-disabled": currentField.disabled
+            },
+            {
+              [(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar--field-disabled"]]: currentField.disabled
+            },
+            {
+              "field-label-dropdown-open": isDropdownOpen,
+              [(0, import_visualBuilder.visualBuilderStyles)()["field-label-dropdown-open"]]: isDropdownOpen
+            }
+          ),
+          onClick: () => setIsDropdownOpen((prev) => !prev),
+          "data-testid": "visual-builder__focused-toolbar__field-label-wrapper",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                className: (0, import_classnames.default)(
+                  "visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader",
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__field-label-wrapper__current-field"],
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button"],
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button--primary"],
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-loader"],
+                  error && (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-error"]
+                ),
+                disabled: displayNamesLoading,
+                children: [
+                  currentField.prefixIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: (0, import_classnames.default)(
+                        "visual-builder__field-icon",
+                        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-icon"]
+                      ),
+                      dangerouslySetInnerHTML: {
+                        __html: currentField.prefixIcon
+                      },
+                      "data-testid": "visual-builder__field-icon"
+                    }
+                  ) : null,
+                  currentField.text ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: (0, import_classnames.default)(
+                        "visual-builder__focused-toolbar__text",
+                        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__text"]
+                      ),
+                      "data-testid": "visual-builder__focused-toolbar__text",
+                      children: currentField.text
+                    }
+                  ) : null,
+                  getCurrentFieldIcon(),
+                  error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CslpError.CslpError, {}) : null
+                ]
+              }
+            ),
+            props.parentPaths.map((path, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: (0, import_classnames.default)(
+                  "visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text",
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__field-label-wrapper__parent-field"],
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button"],
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button--secondary"],
+                  (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__text"]
+                ),
+                "data-target-cslp": path,
+                style: { top: calculateTopOffset(index) },
+                onClick: () => onParentPathClick(path),
+                children: displayNames[path]
+              },
+              path
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+var fieldLabelWrapper_default = FieldLabelWrapperComponent;
+//# sourceMappingURL=fieldLabelWrapper.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CaretIcon, InfoIcon } from \"./icons\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { getFieldIcon } from \"../generators/generateCustomCursor\";\nimport { uniqBy } from \"lodash-es\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { CslpError } from \"./CslpError\";\nimport { hasPostMessageError } from \"../utils/errorHandling\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nasync function getFieldDisplayNames(fieldMetadata: CslpData[]) {\n    const result = await visualBuilderPostMessage?.send<{\n        [k: string]: string;\n    }>(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);\n    return result;\n}\n\ninterface FieldLabelWrapperProps {\n    fieldMetadata: CslpData;\n    eventDetails: VisualBuilderCslpEventDetails;\n    parentPaths: string[];\n    getParentEditableElement: (cslp: string) => HTMLElement | null;\n}\n\ninterface ICurrentField {\n    text: string;\n    icon: JSX.Element;\n    prefixIcon: any;\n    disabled: boolean;\n    isVariant: boolean;\n}\n\nfunction FieldLabelWrapperComponent(\n    props: FieldLabelWrapperProps\n): JSX.Element {\n    const { eventDetails } = props;\n    const [currentField, setCurrentField] = useState<ICurrentField>({\n        text: \"\",\n        icon: <CaretIcon />,\n        prefixIcon: null,\n        disabled: false,\n        isVariant: false,\n    });\n    const [displayNames, setDisplayNames] = useState<Record<string, string>>(\n        {}\n    );\n    const [displayNamesLoading, setDisplayNamesLoading] = useState(true);\n    const [error, setError] = useState(false);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    function calculateTopOffset(index: number) {\n        const height = -30; // from bottom\n        const offset = (index + 1) * height;\n        return `${offset}px`;\n    }\n\n    useEffect(() => {\n        const fetchData = async () => {\n            setDisplayNamesLoading(true);\n            const allPaths = uniqBy(\n                [\n                    props.fieldMetadata,\n                    ...props.parentPaths.map((path) => {\n                        return extractDetailsFromCslp(path);\n                    }),\n                ],\n                \"cslpValue\"\n            );\n            const displayNames = await getFieldDisplayNames(allPaths);\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                props.fieldMetadata.content_type_uid,\n                props.fieldMetadata.fieldPath\n            );\n\n            if (hasPostMessageError(displayNames) || !fieldSchema) {\n                setDisplayNamesLoading(false);\n                setError(true);\n\n                return;\n            }\n\n            const { isDisabled: fieldDisabled, reason } = isFieldDisabled(\n                fieldSchema,\n                eventDetails\n            );\n\n            const currentFieldDisplayName =\n                displayNames?.[props.fieldMetadata.cslpValue] ??\n                fieldSchema.display_name;\n\n            const hasParentPaths = !!props?.parentPaths?.length;\n            const isVariant = props.fieldMetadata.variant ? true : false;\n\n            setCurrentField({\n                text: currentFieldDisplayName,\n                icon: fieldDisabled ? (\n                    <div\n                        className={classNames(\n                            visualBuilderStyles()[\n                                \"visual-builder__tooltip--persistent\"\n                            ]\n                        )}\n                        data-tooltip={reason}\n                    >\n                        <InfoIcon />\n                    </div>\n                ) : hasParentPaths ? (\n                    <CaretIcon />\n                ) : (\n                    <></>\n                ),\n                prefixIcon: getFieldIcon(fieldSchema),\n                disabled: fieldDisabled,\n                isVariant: isVariant,\n            });\n\n            if (displayNames) {\n                setDisplayNames(displayNames);\n            }\n            if (Object.keys(displayNames || {})?.length === allPaths.length) {\n                setDisplayNamesLoading(false);\n            }\n        };\n\n        fetchData();\n    }, [props]);\n\n    const onParentPathClick = (cslp: string) => {\n        const parentElement = props.getParentEditableElement(cslp);\n        if (parentElement) {\n            // emulate clicking on the parent element\n            parentElement.click();\n        }\n    };\n\n    function getCurrentFieldIcon() {\n        if (error) {\n            return null;\n        } else if (displayNamesLoading) {\n            return <LoadingIcon />;\n        } else {\n            return currentField.icon;\n        }\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__focused-toolbar__field-label-container\",\n                visualBuilderStyles()[\n                    \"visual-builder__focused-toolbar__field-label-container\"\n                ]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__field-label-wrapper\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__field-label-wrapper\"\n                    ],\n                    {\n                        \"visual-builder__focused-toolbar--field-disabled\":\n                            currentField.disabled,\n                    },\n                    {\n                        [visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar--field-disabled\"\n                        ]]: currentField.disabled,\n                    },\n                    {\n                        \"field-label-dropdown-open\": isDropdownOpen,\n                        [visualBuilderStyles()[\"field-label-dropdown-open\"]]:\n                            isDropdownOpen,\n                    }\n                )}\n                onClick={() => setIsDropdownOpen((prev) => !prev)}\n                data-testid=\"visual-builder__focused-toolbar__field-label-wrapper\"\n            >\n                <button\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__field-label-wrapper__current-field\"\n                        ],\n                        visualBuilderStyles()[\"visual-builder__button\"],\n                        visualBuilderStyles()[\n                            \"visual-builder__button--primary\"\n                        ],\n                        visualBuilderStyles()[\"visual-builder__button-loader\"],\n                        error &&\n                            visualBuilderStyles()[\n                                \"visual-builder__button-error\"\n                            ]\n                    )}\n                    disabled={displayNamesLoading}\n                >\n                    {currentField.prefixIcon ? (\n                        <div\n                            className={classNames(\n                                \"visual-builder__field-icon\",\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-icon\"\n                                ]\n                            )}\n                            dangerouslySetInnerHTML={{\n                                __html: currentField.prefixIcon,\n                            }}\n                            data-testid=\"visual-builder__field-icon\"\n                        />\n                    ) : null}\n                    {currentField.text ? (\n                        <div\n                            className={classNames(\n                                \"visual-builder__focused-toolbar__text\",\n                                visualBuilderStyles()[\n                                    \"visual-builder__focused-toolbar__text\"\n                                ]\n                            )}\n                            data-testid=\"visual-builder__focused-toolbar__text\"\n                        >\n                            {currentField.text}\n                        </div>\n                    ) : null}\n                    {getCurrentFieldIcon()}\n                    {error ? <CslpError /> : null}\n                </button>\n                {props.parentPaths.map((path, index) => (\n                    <button\n                        key={path}\n                        className={classNames(\n                            \"visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text\",\n                            visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\"\n                            ],\n                            visualBuilderStyles()[\"visual-builder__button\"],\n                            visualBuilderStyles()[\n                                \"visual-builder__button--secondary\"\n                            ],\n                            visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar__text\"\n                            ]\n                        )}\n                        data-target-cslp={path}\n                        style={{ top: calculateTopOffset(index) }}\n                        onClick={() => onParentPathClick(path)}\n                    >\n                        {displayNames[path]}\n                    </button>\n                ))}\n            </div>\n        </div>\n    );\n}\n\nexport default FieldLabelWrapperComponent;\n"],"mappings":"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","names":["visualBuilderPostMessage","displayNames","classNames"]}

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

@@ -0,0 +1,12 @@
+import { CslpData } from '../../cslp/types/cslp.types.cjs';
+import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.cjs';
+
+interface FieldLabelWrapperProps {
+    fieldMetadata: CslpData;
+    eventDetails: VisualBuilderCslpEventDetails;
+    parentPaths: string[];
+    getParentEditableElement: (cslp: string) => HTMLElement | null;
+}
+declare function FieldLabelWrapperComponent(props: FieldLabelWrapperProps): JSX.Element;
+
+export { FieldLabelWrapperComponent as default };

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

@@ -0,0 +1,12 @@
+import { CslpData } from '../../cslp/types/cslp.types.js';
+import { VisualBuilderCslpEventDetails } from '../types/visualBuilder.types.js';
+
+interface FieldLabelWrapperProps {
+    fieldMetadata: CslpData;
+    eventDetails: VisualBuilderCslpEventDetails;
+    parentPaths: string[];
+    getParentEditableElement: (cslp: string) => HTMLElement | null;
+}
+declare function FieldLabelWrapperComponent(props: FieldLabelWrapperProps): JSX.Element;
+
+export { FieldLabelWrapperComponent as default };

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

@@ -0,0 +1,208 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/fieldLabelWrapper.tsx
+import classNames from "classnames";
+import { useEffect, useState } from "preact/compat";
+import { extractDetailsFromCslp } from "../../cslp/index.js";
+import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
+import { isFieldDisabled } from "../utils/isFieldDisabled.js";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
+import { CaretIcon, InfoIcon } from "./icons/index.js";
+import { LoadingIcon } from "./icons/loading.js";
+import { getFieldIcon } from "../generators/generateCustomCursor.js";
+import { uniqBy } from "lodash-es";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import { CslpError } from "./CslpError.js";
+import { hasPostMessageError } from "../utils/errorHandling.js";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+async function getFieldDisplayNames(fieldMetadata) {
+  const result = await visualBuilderPostMessage?.send(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);
+  return result;
+}
+function FieldLabelWrapperComponent(props) {
+  const { eventDetails } = props;
+  const [currentField, setCurrentField] = useState({
+    text: "",
+    icon: /* @__PURE__ */ jsx(CaretIcon, {}),
+    prefixIcon: null,
+    disabled: false,
+    isVariant: false
+  });
+  const [displayNames, setDisplayNames] = useState(
+    {}
+  );
+  const [displayNamesLoading, setDisplayNamesLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  function calculateTopOffset(index) {
+    const height = -30;
+    const offset = (index + 1) * height;
+    return `${offset}px`;
+  }
+  useEffect(() => {
+    const fetchData = async () => {
+      setDisplayNamesLoading(true);
+      const allPaths = uniqBy(
+        [
+          props.fieldMetadata,
+          ...props.parentPaths.map((path) => {
+            return extractDetailsFromCslp(path);
+          })
+        ],
+        "cslpValue"
+      );
+      const displayNames2 = await getFieldDisplayNames(allPaths);
+      const fieldSchema = await FieldSchemaMap.getFieldSchema(
+        props.fieldMetadata.content_type_uid,
+        props.fieldMetadata.fieldPath
+      );
+      if (hasPostMessageError(displayNames2) || !fieldSchema) {
+        setDisplayNamesLoading(false);
+        setError(true);
+        return;
+      }
+      const { isDisabled: fieldDisabled, reason } = isFieldDisabled(
+        fieldSchema,
+        eventDetails
+      );
+      const currentFieldDisplayName = displayNames2?.[props.fieldMetadata.cslpValue] ?? fieldSchema.display_name;
+      const hasParentPaths = !!props?.parentPaths?.length;
+      const isVariant = props.fieldMetadata.variant ? true : false;
+      setCurrentField({
+        text: currentFieldDisplayName,
+        icon: fieldDisabled ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              visualBuilderStyles()["visual-builder__tooltip--persistent"]
+            ),
+            "data-tooltip": reason,
+            children: /* @__PURE__ */ jsx(InfoIcon, {})
+          }
+        ) : hasParentPaths ? /* @__PURE__ */ jsx(CaretIcon, {}) : /* @__PURE__ */ jsx(Fragment, {}),
+        prefixIcon: getFieldIcon(fieldSchema),
+        disabled: fieldDisabled,
+        isVariant
+      });
+      if (displayNames2) {
+        setDisplayNames(displayNames2);
+      }
+      if (Object.keys(displayNames2 || {})?.length === allPaths.length) {
+        setDisplayNamesLoading(false);
+      }
+    };
+    fetchData();
+  }, [props]);
+  const onParentPathClick = (cslp) => {
+    const parentElement = props.getParentEditableElement(cslp);
+    if (parentElement) {
+      parentElement.click();
+    }
+  };
+  function getCurrentFieldIcon() {
+    if (error) {
+      return null;
+    } else if (displayNamesLoading) {
+      return /* @__PURE__ */ jsx(LoadingIcon, {});
+    } else {
+      return currentField.icon;
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        "visual-builder__focused-toolbar__field-label-container",
+        visualBuilderStyles()["visual-builder__focused-toolbar__field-label-container"]
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(
+            "visual-builder__focused-toolbar__field-label-wrapper",
+            visualBuilderStyles()["visual-builder__focused-toolbar__field-label-wrapper"],
+            {
+              "visual-builder__focused-toolbar--field-disabled": currentField.disabled
+            },
+            {
+              [visualBuilderStyles()["visual-builder__focused-toolbar--field-disabled"]]: currentField.disabled
+            },
+            {
+              "field-label-dropdown-open": isDropdownOpen,
+              [visualBuilderStyles()["field-label-dropdown-open"]]: isDropdownOpen
+            }
+          ),
+          onClick: () => setIsDropdownOpen((prev) => !prev),
+          "data-testid": "visual-builder__focused-toolbar__field-label-wrapper",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: classNames(
+                  "visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader",
+                  visualBuilderStyles()["visual-builder__focused-toolbar__field-label-wrapper__current-field"],
+                  visualBuilderStyles()["visual-builder__button"],
+                  visualBuilderStyles()["visual-builder__button--primary"],
+                  visualBuilderStyles()["visual-builder__button-loader"],
+                  error && visualBuilderStyles()["visual-builder__button-error"]
+                ),
+                disabled: displayNamesLoading,
+                children: [
+                  currentField.prefixIcon ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classNames(
+                        "visual-builder__field-icon",
+                        visualBuilderStyles()["visual-builder__field-icon"]
+                      ),
+                      dangerouslySetInnerHTML: {
+                        __html: currentField.prefixIcon
+                      },
+                      "data-testid": "visual-builder__field-icon"
+                    }
+                  ) : null,
+                  currentField.text ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: classNames(
+                        "visual-builder__focused-toolbar__text",
+                        visualBuilderStyles()["visual-builder__focused-toolbar__text"]
+                      ),
+                      "data-testid": "visual-builder__focused-toolbar__text",
+                      children: currentField.text
+                    }
+                  ) : null,
+                  getCurrentFieldIcon(),
+                  error ? /* @__PURE__ */ jsx(CslpError, {}) : null
+                ]
+              }
+            ),
+            props.parentPaths.map((path, index) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: classNames(
+                  "visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text",
+                  visualBuilderStyles()["visual-builder__focused-toolbar__field-label-wrapper__parent-field"],
+                  visualBuilderStyles()["visual-builder__button"],
+                  visualBuilderStyles()["visual-builder__button--secondary"],
+                  visualBuilderStyles()["visual-builder__focused-toolbar__text"]
+                ),
+                "data-target-cslp": path,
+                style: { top: calculateTopOffset(index) },
+                onClick: () => onParentPathClick(path),
+                children: displayNames[path]
+              },
+              path
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+var fieldLabelWrapper_default = FieldLabelWrapperComponent;
+export {
+  fieldLabelWrapper_default as default
+};
+//# sourceMappingURL=fieldLabelWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CaretIcon, InfoIcon } from \"./icons\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { getFieldIcon } from \"../generators/generateCustomCursor\";\nimport { uniqBy } from \"lodash-es\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { CslpError } from \"./CslpError\";\nimport { hasPostMessageError } from \"../utils/errorHandling\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\n\nasync function getFieldDisplayNames(fieldMetadata: CslpData[]) {\n    const result = await visualBuilderPostMessage?.send<{\n        [k: string]: string;\n    }>(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);\n    return result;\n}\n\ninterface FieldLabelWrapperProps {\n    fieldMetadata: CslpData;\n    eventDetails: VisualBuilderCslpEventDetails;\n    parentPaths: string[];\n    getParentEditableElement: (cslp: string) => HTMLElement | null;\n}\n\ninterface ICurrentField {\n    text: string;\n    icon: JSX.Element;\n    prefixIcon: any;\n    disabled: boolean;\n    isVariant: boolean;\n}\n\nfunction FieldLabelWrapperComponent(\n    props: FieldLabelWrapperProps\n): JSX.Element {\n    const { eventDetails } = props;\n    const [currentField, setCurrentField] = useState<ICurrentField>({\n        text: \"\",\n        icon: <CaretIcon />,\n        prefixIcon: null,\n        disabled: false,\n        isVariant: false,\n    });\n    const [displayNames, setDisplayNames] = useState<Record<string, string>>(\n        {}\n    );\n    const [displayNamesLoading, setDisplayNamesLoading] = useState(true);\n    const [error, setError] = useState(false);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    function calculateTopOffset(index: number) {\n        const height = -30; // from bottom\n        const offset = (index + 1) * height;\n        return `${offset}px`;\n    }\n\n    useEffect(() => {\n        const fetchData = async () => {\n            setDisplayNamesLoading(true);\n            const allPaths = uniqBy(\n                [\n                    props.fieldMetadata,\n                    ...props.parentPaths.map((path) => {\n                        return extractDetailsFromCslp(path);\n                    }),\n                ],\n                \"cslpValue\"\n            );\n            const displayNames = await getFieldDisplayNames(allPaths);\n            const fieldSchema = await FieldSchemaMap.getFieldSchema(\n                props.fieldMetadata.content_type_uid,\n                props.fieldMetadata.fieldPath\n            );\n\n            if (hasPostMessageError(displayNames) || !fieldSchema) {\n                setDisplayNamesLoading(false);\n                setError(true);\n\n                return;\n            }\n\n            const { isDisabled: fieldDisabled, reason } = isFieldDisabled(\n                fieldSchema,\n                eventDetails\n            );\n\n            const currentFieldDisplayName =\n                displayNames?.[props.fieldMetadata.cslpValue] ??\n                fieldSchema.display_name;\n\n            const hasParentPaths = !!props?.parentPaths?.length;\n            const isVariant = props.fieldMetadata.variant ? true : false;\n\n            setCurrentField({\n                text: currentFieldDisplayName,\n                icon: fieldDisabled ? (\n                    <div\n                        className={classNames(\n                            visualBuilderStyles()[\n                                \"visual-builder__tooltip--persistent\"\n                            ]\n                        )}\n                        data-tooltip={reason}\n                    >\n                        <InfoIcon />\n                    </div>\n                ) : hasParentPaths ? (\n                    <CaretIcon />\n                ) : (\n                    <></>\n                ),\n                prefixIcon: getFieldIcon(fieldSchema),\n                disabled: fieldDisabled,\n                isVariant: isVariant,\n            });\n\n            if (displayNames) {\n                setDisplayNames(displayNames);\n            }\n            if (Object.keys(displayNames || {})?.length === allPaths.length) {\n                setDisplayNamesLoading(false);\n            }\n        };\n\n        fetchData();\n    }, [props]);\n\n    const onParentPathClick = (cslp: string) => {\n        const parentElement = props.getParentEditableElement(cslp);\n        if (parentElement) {\n            // emulate clicking on the parent element\n            parentElement.click();\n        }\n    };\n\n    function getCurrentFieldIcon() {\n        if (error) {\n            return null;\n        } else if (displayNamesLoading) {\n            return <LoadingIcon />;\n        } else {\n            return currentField.icon;\n        }\n    }\n\n    return (\n        <div\n            className={classNames(\n                \"visual-builder__focused-toolbar__field-label-container\",\n                visualBuilderStyles()[\n                    \"visual-builder__focused-toolbar__field-label-container\"\n                ]\n            )}\n        >\n            <div\n                className={classNames(\n                    \"visual-builder__focused-toolbar__field-label-wrapper\",\n                    visualBuilderStyles()[\n                        \"visual-builder__focused-toolbar__field-label-wrapper\"\n                    ],\n                    {\n                        \"visual-builder__focused-toolbar--field-disabled\":\n                            currentField.disabled,\n                    },\n                    {\n                        [visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar--field-disabled\"\n                        ]]: currentField.disabled,\n                    },\n                    {\n                        \"field-label-dropdown-open\": isDropdownOpen,\n                        [visualBuilderStyles()[\"field-label-dropdown-open\"]]:\n                            isDropdownOpen,\n                    }\n                )}\n                onClick={() => setIsDropdownOpen((prev) => !prev)}\n                data-testid=\"visual-builder__focused-toolbar__field-label-wrapper\"\n            >\n                <button\n                    className={classNames(\n                        \"visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader\",\n                        visualBuilderStyles()[\n                            \"visual-builder__focused-toolbar__field-label-wrapper__current-field\"\n                        ],\n                        visualBuilderStyles()[\"visual-builder__button\"],\n                        visualBuilderStyles()[\n                            \"visual-builder__button--primary\"\n                        ],\n                        visualBuilderStyles()[\"visual-builder__button-loader\"],\n                        error &&\n                            visualBuilderStyles()[\n                                \"visual-builder__button-error\"\n                            ]\n                    )}\n                    disabled={displayNamesLoading}\n                >\n                    {currentField.prefixIcon ? (\n                        <div\n                            className={classNames(\n                                \"visual-builder__field-icon\",\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-icon\"\n                                ]\n                            )}\n                            dangerouslySetInnerHTML={{\n                                __html: currentField.prefixIcon,\n                            }}\n                            data-testid=\"visual-builder__field-icon\"\n                        />\n                    ) : null}\n                    {currentField.text ? (\n                        <div\n                            className={classNames(\n                                \"visual-builder__focused-toolbar__text\",\n                                visualBuilderStyles()[\n                                    \"visual-builder__focused-toolbar__text\"\n                                ]\n                            )}\n                            data-testid=\"visual-builder__focused-toolbar__text\"\n                        >\n                            {currentField.text}\n                        </div>\n                    ) : null}\n                    {getCurrentFieldIcon()}\n                    {error ? <CslpError /> : null}\n                </button>\n                {props.parentPaths.map((path, index) => (\n                    <button\n                        key={path}\n                        className={classNames(\n                            \"visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text\",\n                            visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\"\n                            ],\n                            visualBuilderStyles()[\"visual-builder__button\"],\n                            visualBuilderStyles()[\n                                \"visual-builder__button--secondary\"\n                            ],\n                            visualBuilderStyles()[\n                                \"visual-builder__focused-toolbar__text\"\n                            ]\n                        )}\n                        data-target-cslp={path}\n                        style={{ top: calculateTopOffset(index) }}\n                        onClick={() => onParentPathClick(path)}\n                    >\n                        {displayNames[path]}\n                    </button>\n                ))}\n            </div>\n        </div>\n    );\n}\n\nexport default FieldLabelWrapperComponent;\n"],"mappings":";;;AAAA,OAAO,gBAAgB;AACvB,SAAgB,WAAW,gBAAgB;AAC3C,SAAS,8BAA8B;AAGvC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,OAAO,8BAA8B;AACrC,SAAS,WAAW,gBAAgB;AACpC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,sCAAsC;AA8BjC,SAuEM,UAvEN,KA4IE,YA5IF;AA5Bd,eAAe,qBAAqB,eAA2B;AAC3D,QAAM,SAAS,MAAM,0BAA0B,KAE5C,+BAA+B,yBAAyB,aAAa;AACxE,SAAO;AACX;AAiBA,SAAS,2BACL,OACW;AACX,QAAM,EAAE,aAAa,IAAI;AACzB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB;AAAA,IAC5D,MAAM;AAAA,IACN,MAAM,oBAAC,aAAU;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,EACf,CAAC;AACD,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACpC,CAAC;AAAA,EACL;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,IAAI;AACnE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,WAAS,mBAAmB,OAAe;AACvC,UAAM,SAAS;AACf,UAAM,UAAU,QAAQ,KAAK;AAC7B,WAAO,GAAG,MAAM;AAAA,EACpB;AAEA,YAAU,MAAM;AACZ,UAAM,YAAY,YAAY;AAC1B,6BAAuB,IAAI;AAC3B,YAAM,WAAW;AAAA,QACb;AAAA,UACI,MAAM;AAAA,UACN,GAAG,MAAM,YAAY,IAAI,CAAC,SAAS;AAC/B,mBAAO,uBAAuB,IAAI;AAAA,UACtC,CAAC;AAAA,QACL;AAAA,QACA;AAAA,MACJ;AACA,YAAMA,gBAAe,MAAM,qBAAqB,QAAQ;AACxD,YAAM,cAAc,MAAM,eAAe;AAAA,QACrC,MAAM,cAAc;AAAA,QACpB,MAAM,cAAc;AAAA,MACxB;AAEA,UAAI,oBAAoBA,aAAY,KAAK,CAAC,aAAa;AACnD,+BAAuB,KAAK;AAC5B,iBAAS,IAAI;AAEb;AAAA,MACJ;AAEA,YAAM,EAAE,YAAY,eAAe,OAAO,IAAI;AAAA,QAC1C;AAAA,QACA;AAAA,MACJ;AAEA,YAAM,0BACFA,gBAAe,MAAM,cAAc,SAAS,KAC5C,YAAY;AAEhB,YAAM,iBAAiB,CAAC,CAAC,OAAO,aAAa;AAC7C,YAAM,YAAY,MAAM,cAAc,UAAU,OAAO;AAEvD,sBAAgB;AAAA,QACZ,MAAM;AAAA,QACN,MAAM,gBACF;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP,oBAAoB,EAChB,qCACJ;AAAA,YACJ;AAAA,YACA,gBAAc;AAAA,YAEd,8BAAC,YAAS;AAAA;AAAA,QACd,IACA,iBACA,oBAAC,aAAU,IAEX,gCAAE;AAAA,QAEN,YAAY,aAAa,WAAW;AAAA,QACpC,UAAU;AAAA,QACV;AAAA,MACJ,CAAC;AAED,UAAIA,eAAc;AACd,wBAAgBA,aAAY;AAAA,MAChC;AACA,UAAI,OAAO,KAAKA,iBAAgB,CAAC,CAAC,GAAG,WAAW,SAAS,QAAQ;AAC7D,+BAAuB,KAAK;AAAA,MAChC;AAAA,IACJ;AAEA,cAAU;AAAA,EACd,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAoB,CAAC,SAAiB;AACxC,UAAM,gBAAgB,MAAM,yBAAyB,IAAI;AACzD,QAAI,eAAe;AAEf,oBAAc,MAAM;AAAA,IACxB;AAAA,EACJ;AAEA,WAAS,sBAAsB;AAC3B,QAAI,OAAO;AACP,aAAO;AAAA,IACX,WAAW,qBAAqB;AAC5B,aAAO,oBAAC,eAAY;AAAA,IACxB,OAAO;AACH,aAAO,aAAa;AAAA,IACxB;AAAA,EACJ;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,oBAAoB,EAChB,wDACJ;AAAA,MACJ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACG,WAAW;AAAA,YACP;AAAA,YACA,oBAAoB,EAChB,sDACJ;AAAA,YACA;AAAA,cACI,mDACI,aAAa;AAAA,YACrB;AAAA,YACA;AAAA,cACI,CAAC,oBAAoB,EACjB,iDACJ,CAAC,GAAG,aAAa;AAAA,YACrB;AAAA,YACA;AAAA,cACI,6BAA6B;AAAA,cAC7B,CAAC,oBAAoB,EAAE,2BAA2B,CAAC,GAC/C;AAAA,YACR;AAAA,UACJ;AAAA,UACA,SAAS,MAAM,kBAAkB,CAAC,SAAS,CAAC,IAAI;AAAA,UAChD,eAAY;AAAA,UAEZ;AAAA;AAAA,cAAC;AAAA;AAAA,gBACG,WAAW;AAAA,kBACP;AAAA,kBACA,oBAAoB,EAChB,qEACJ;AAAA,kBACA,oBAAoB,EAAE,wBAAwB;AAAA,kBAC9C,oBAAoB,EAChB,iCACJ;AAAA,kBACA,oBAAoB,EAAE,+BAA+B;AAAA,kBACrD,SACI,oBAAoB,EAChB,8BACJ;AAAA,gBACR;AAAA,gBACA,UAAU;AAAA,gBAET;AAAA,+BAAa,aACV;AAAA,oBAAC;AAAA;AAAA,sBACG,WAAW;AAAA,wBACP;AAAA,wBACA,oBAAoB,EAChB,4BACJ;AAAA,sBACJ;AAAA,sBACA,yBAAyB;AAAA,wBACrB,QAAQ,aAAa;AAAA,sBACzB;AAAA,sBACA,eAAY;AAAA;AAAA,kBAChB,IACA;AAAA,kBACH,aAAa,OACV;AAAA,oBAAC;AAAA;AAAA,sBACG,WAAW;AAAA,wBACP;AAAA,wBACA,oBAAoB,EAChB,uCACJ;AAAA,sBACJ;AAAA,sBACA,eAAY;AAAA,sBAEX,uBAAa;AAAA;AAAA,kBAClB,IACA;AAAA,kBACH,oBAAoB;AAAA,kBACpB,QAAQ,oBAAC,aAAU,IAAK;AAAA;AAAA;AAAA,YAC7B;AAAA,YACC,MAAM,YAAY,IAAI,CAAC,MAAM,UAC1B;AAAA,cAAC;AAAA;AAAA,gBAEG,WAAW;AAAA,kBACP;AAAA,kBACA,oBAAoB,EAChB,oEACJ;AAAA,kBACA,oBAAoB,EAAE,wBAAwB;AAAA,kBAC9C,oBAAoB,EAChB,mCACJ;AAAA,kBACA,oBAAoB,EAChB,uCACJ;AAAA,gBACJ;AAAA,gBACA,oBAAkB;AAAA,gBAClB,OAAO,EAAE,KAAK,mBAAmB,KAAK,EAAE;AAAA,gBACxC,SAAS,MAAM,kBAAkB,IAAI;AAAA,gBAEpC,uBAAa,IAAI;AAAA;AAAA,cAlBb;AAAA,YAmBT,CACH;AAAA;AAAA;AAAA,MACL;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,4BAAQ;","names":["displayNames"]}