@payloadcms/ui 3.80.0-internal-debug.cd99b1f → 3.80.0-internal.21e9c47

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js

@@ -0,0 +1,187 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntersect } from '../../../../../hooks/useIntersect.js';
+import { FolderIcon } from '../../../../../icons/Folder/index.js';
+import { TagIcon } from '../../../../../icons/Tag/index.js';
+import { useConfig } from '../../../../../providers/Config/index.js';
+import { useTranslation } from '../../../../../providers/Translation/index.js';
+import { canUseDOM } from '../../../../../utilities/canUseDOM.js';
+import { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js';
+import { Button } from '../../../../Button/index.js';
+import { useHierarchyDrawer } from '../../../../HierarchyDrawer/index.js';
+import { useListRelationships } from '../../../RelationshipProvider/index.js';
+import './index.scss';
+const baseClass = 'hierarchy-cell';
+export const HierarchyCell = ({
+  cellData: cellDataFromProps,
+  collectionSlug,
+  customCellProps,
+  field,
+  rowData
+}) => {
+  const relationTo = 'relationTo' in field ? field.relationTo : undefined;
+  const hasMany = field.hasMany ?? false;
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const [intersectionRef, entry] = useIntersect();
+  const [values, setValues] = useState([]);
+  const {
+    documents,
+    getRelationships
+  } = useListRelationships();
+  const hasRequestedRef = useRef(false);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false;
+  // Get the hierarchy collection config
+  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined;
+  const hierarchyCollectionConfig = hierarchyCollectionSlug ? getEntityConfig({
+    collectionSlug: hierarchyCollectionSlug
+  }) : undefined;
+  // Use pre-rendered icon from server if available, otherwise determine on client
+  const hierarchyConfig = hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object' ? hierarchyCollectionConfig.hierarchy : undefined;
+  // Pre-rendered icon from server (supports custom icons)
+  const preRenderedIcon = customCellProps?.hierarchyIcon;
+  // Fallback icon for client-side rendering
+  const fallbackIcon = useMemo(() => {
+    if (preRenderedIcon) {
+      return null // Don't need fallback if we have pre-rendered icon
+;
+    }
+    // Default based on allowHasMany: false = folder-like, true = tag-like
+    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon;
+    return /*#__PURE__*/_jsx(IconComponent, {
+      color: "muted"
+    });
+  }, [hierarchyConfig, preRenderedIcon]);
+  // Set up the hierarchy drawer
+  const [HierarchyDrawer,, {
+    openDrawer
+  }] = useHierarchyDrawer({
+    hierarchyCollectionSlug: hierarchyCollectionSlug || ''
+  });
+  // Fetch relationship data when visible
+  useEffect(() => {
+    if ((cellDataFromProps || typeof cellDataFromProps === 'number') && isAboveViewport && !hasRequestedRef.current && typeof relationTo === 'string') {
+      const formattedValues = [];
+      const arrayCellData = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps];
+      arrayCellData.forEach(cell => {
+        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {
+          formattedValues.push(cell);
+        }
+        if (typeof cell === 'number' || typeof cell === 'string') {
+          formattedValues.push({
+            relationTo,
+            value: cell
+          });
+        }
+      });
+      getRelationships(formattedValues);
+      hasRequestedRef.current = true;
+      setValues(formattedValues);
+    }
+  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships]);
+  // Reset when data changes
+  useEffect(() => {
+    hasRequestedRef.current = false;
+  }, [cellDataFromProps]);
+  // Get current selection IDs for the drawer
+  const initialSelections = useMemo(() => {
+    if (!cellDataFromProps) {
+      return [];
+    }
+    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps];
+    return data.map(item => {
+      if (typeof item === 'object' && 'value' in item) {
+        return item.value;
+      }
+      return item;
+    });
+  }, [cellDataFromProps]);
+  // Handle save from drawer
+  const handleSave = useCallback(async ({
+    closeDrawer,
+    selections
+  }) => {
+    // Get selected IDs
+    const selectedIds = Array.from(selections.keys());
+    const newValue = hasMany ? selectedIds : selectedIds[0] ?? null;
+    // Update the document via API
+    try {
+      const response = await fetch(`${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`, {
+        body: JSON.stringify({
+          [field.name]: newValue
+        }),
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        method: 'PATCH'
+      });
+      if (response.ok && typeof relationTo === 'string') {
+        // Update local state with new selection to avoid page reload
+        const newValues = selectedIds.map(id => ({
+          relationTo,
+          value: id
+        }));
+        setValues(newValues);
+        // Request the new relationship docs to update the display
+        if (newValues.length > 0) {
+          getRelationships(newValues);
+        }
+      }
+    } catch (_error) {
+      // swallow error and close drawer anyway, user can try again
+    }
+    closeDrawer();
+  }, [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships]);
+  // Build display labels
+  const labels = useMemo(() => {
+    return values.map(({
+      relationTo: rel,
+      value
+    }) => {
+      const document = documents[rel]?.[value];
+      const relatedCollection = getEntityConfig({
+        collectionSlug: rel
+      });
+      return formatDocTitle({
+        collectionConfig: relatedCollection,
+        data: document || null,
+        dateFormat: config.admin.dateFormat,
+        fallback: `${t('general:untitled')} - ID: ${value}`,
+        i18n
+      });
+    });
+  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n]);
+  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none');
+  const isLoading = values.length > 0 && values.some(({
+    relationTo: rel_0,
+    value: value_0
+  }) => documents[rel_0]?.[value_0] === null);
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    ref: intersectionRef,
+    children: [/*#__PURE__*/_jsx(Button, {
+      buttonStyle: "subtle",
+      className: `${baseClass}__pill`,
+      icon: preRenderedIcon || fallbackIcon,
+      iconPosition: "left",
+      margin: false,
+      onClick: openDrawer,
+      size: "small",
+      children: isLoading ? `${t('general:loading')}...` : displayText
+    }), hierarchyCollectionSlug && /*#__PURE__*/_jsx(HierarchyDrawer, {
+      hasMany: hasMany,
+      initialSelections: initialSelections,
+      onSave: handleSave
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useIntersect","FolderIcon","TagIcon","useConfig","useTranslation","canUseDOM","formatDocTitle","Button","useHierarchyDrawer","useListRelationships","baseClass","HierarchyCell","cellData","cellDataFromProps","collectionSlug","customCellProps","field","rowData","relationTo","undefined","hasMany","config","getEntityConfig","intersectionRef","entry","values","setValues","documents","getRelationships","hasRequestedRef","i18n","t","isAboveViewport","boundingClientRect","top","window","innerHeight","hierarchyCollectionSlug","hierarchyCollectionConfig","hierarchyConfig","hierarchy","preRenderedIcon","hierarchyIcon","fallbackIcon","IconComponent","allowHasMany","_jsx","color","HierarchyDrawer","openDrawer","current","formattedValues","arrayCellData","Array","isArray","forEach","cell","push","value","initialSelections","data","map","item","handleSave","closeDrawer","selections","selectedIds","from","keys","newValue","response","fetch","serverURL","routes","api","id","body","JSON","stringify","name","credentials","headers","method","ok","newValues","length","_error","labels","rel","document","relatedCollection","collectionConfig","dateFormat","admin","fallback","displayText","join","isLoading","some","_jsxs","className","ref","buttonStyle","icon","iconPosition","margin","onClick","size","onSave"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { SelectionWithPath } from '../../../../HierarchyDrawer/types.js'\n\nimport { useIntersect } from '../../../../../hooks/useIntersect.js'\nimport { FolderIcon } from '../../../../../icons/Folder/index.js'\nimport { TagIcon } from '../../../../../icons/Tag/index.js'\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport { canUseDOM } from '../../../../../utilities/canUseDOM.js'\nimport { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'\nimport { Button } from '../../../../Button/index.js'\nimport { useHierarchyDrawer } from '../../../../HierarchyDrawer/index.js'\nimport { useListRelationships } from '../../../RelationshipProvider/index.js'\nimport './index.scss'\n\ntype Value = { relationTo: string; value: number | string }\nconst baseClass = 'hierarchy-cell'\n\nexport type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>\n\nexport const HierarchyCell: React.FC<HierarchyCellProps> = ({\n  cellData: cellDataFromProps,\n  collectionSlug,\n  customCellProps,\n  field,\n  rowData,\n}) => {\n  const relationTo = 'relationTo' in field ? field.relationTo : undefined\n  const hasMany = field.hasMany ?? false\n\n  const { config, getEntityConfig } = useConfig()\n  const [intersectionRef, entry] = useIntersect()\n  const [values, setValues] = useState<Value[]>([])\n  const { documents, getRelationships } = useListRelationships()\n  const hasRequestedRef = useRef(false)\n  const { i18n, t } = useTranslation()\n\n  const isAboveViewport = canUseDOM ? entry?.boundingClientRect?.top < window.innerHeight : false\n\n  // Get the hierarchy collection config\n  const hierarchyCollectionSlug = typeof relationTo === 'string' ? relationTo : undefined\n  const hierarchyCollectionConfig = hierarchyCollectionSlug\n    ? getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n    : undefined\n\n  // Use pre-rendered icon from server if available, otherwise determine on client\n  const hierarchyConfig =\n    hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object'\n      ? hierarchyCollectionConfig.hierarchy\n      : undefined\n\n  // Pre-rendered icon from server (supports custom icons)\n  const preRenderedIcon = customCellProps?.hierarchyIcon as React.ReactNode | undefined\n\n  // Fallback icon for client-side rendering\n  const fallbackIcon = useMemo(() => {\n    if (preRenderedIcon) {\n      return null // Don't need fallback if we have pre-rendered icon\n    }\n    // Default based on allowHasMany: false = folder-like, true = tag-like\n    const IconComponent = hierarchyConfig?.allowHasMany === false ? FolderIcon : TagIcon\n    return <IconComponent color=\"muted\" />\n  }, [hierarchyConfig, preRenderedIcon])\n\n  // Set up the hierarchy drawer\n  const [HierarchyDrawer, , { openDrawer }] = useHierarchyDrawer({\n    hierarchyCollectionSlug: hierarchyCollectionSlug || '',\n  })\n\n  // Fetch relationship data when visible\n  useEffect(() => {\n    if (\n      (cellDataFromProps || typeof cellDataFromProps === 'number') &&\n      isAboveViewport &&\n      !hasRequestedRef.current &&\n      typeof relationTo === 'string'\n    ) {\n      const formattedValues: Value[] = []\n      const arrayCellData = Array.isArray(cellDataFromProps)\n        ? cellDataFromProps\n        : [cellDataFromProps]\n\n      arrayCellData.forEach((cell) => {\n        if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {\n          formattedValues.push(cell)\n        }\n        if (typeof cell === 'number' || typeof cell === 'string') {\n          formattedValues.push({\n            relationTo,\n            value: cell,\n          })\n        }\n      })\n\n      getRelationships(formattedValues)\n      hasRequestedRef.current = true\n      setValues(formattedValues)\n    }\n  }, [cellDataFromProps, relationTo, isAboveViewport, getRelationships])\n\n  // Reset when data changes\n  useEffect(() => {\n    hasRequestedRef.current = false\n  }, [cellDataFromProps])\n\n  // Get current selection IDs for the drawer\n  const initialSelections = useMemo(() => {\n    if (!cellDataFromProps) {\n      return []\n    }\n    const data = Array.isArray(cellDataFromProps) ? cellDataFromProps : [cellDataFromProps]\n    return data.map((item) => {\n      if (typeof item === 'object' && 'value' in item) {\n        return item.value\n      }\n      return item\n    }) as (number | string)[]\n  }, [cellDataFromProps])\n\n  // Handle save from drawer\n  const handleSave = useCallback(\n    async ({\n      closeDrawer,\n      selections,\n    }: {\n      closeDrawer: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      // Get selected IDs\n      const selectedIds = Array.from(selections.keys())\n      const newValue = hasMany ? selectedIds : (selectedIds[0] ?? null)\n\n      // Update the document via API\n      try {\n        const response = await fetch(\n          `${config.serverURL}${config.routes.api}/${collectionSlug}/${rowData.id}`,\n          {\n            body: JSON.stringify({\n              [field.name]: newValue,\n            }),\n            credentials: 'include',\n            headers: {\n              'Content-Type': 'application/json',\n            },\n            method: 'PATCH',\n          },\n        )\n\n        if (response.ok && typeof relationTo === 'string') {\n          // Update local state with new selection to avoid page reload\n          const newValues: Value[] = selectedIds.map((id) => ({\n            relationTo,\n            value: id,\n          }))\n          setValues(newValues)\n\n          // Request the new relationship docs to update the display\n          if (newValues.length > 0) {\n            getRelationships(newValues)\n          }\n        }\n      } catch (_error) {\n        // swallow error and close drawer anyway, user can try again\n      }\n\n      closeDrawer()\n    },\n    [collectionSlug, config, field.name, hasMany, rowData, relationTo, getRelationships],\n  )\n\n  // Build display labels\n  const labels = useMemo(() => {\n    return values.map(({ relationTo: rel, value }) => {\n      const document = documents[rel]?.[value]\n      const relatedCollection = getEntityConfig({ collectionSlug: rel })\n\n      return formatDocTitle({\n        collectionConfig: relatedCollection,\n        data: document || null,\n        dateFormat: config.admin.dateFormat,\n        fallback: `${t('general:untitled')} - ID: ${value}`,\n        i18n,\n      })\n    })\n  }, [values, documents, getEntityConfig, config.admin.dateFormat, t, i18n])\n\n  const displayText = labels.length > 0 ? labels.join(', ') : t('general:none')\n  const isLoading =\n    values.length > 0 &&\n    values.some(({ relationTo: rel, value }) => documents[rel]?.[value] === null)\n\n  return (\n    <div className={baseClass} ref={intersectionRef}>\n      <Button\n        buttonStyle=\"subtle\"\n        className={`${baseClass}__pill`}\n        icon={preRenderedIcon || fallbackIcon}\n        iconPosition=\"left\"\n        margin={false}\n        onClick={openDrawer}\n        size=\"small\"\n      >\n        {isLoading ? `${t('general:loading')}...` : displayText}\n      </Button>\n      {hierarchyCollectionSlug && (\n        <HierarchyDrawer\n          hasMany={hasMany}\n          initialSelections={initialSelections}\n          onSave={handleSave}\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.scss

@@ -0,0 +1,29 @@
+.hierarchy-cell {
+  display: flex;
+  align-items: center;
+
+  &__pill {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--base) / 3);
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/dist/elements/Table/DefaultCell/fields/JSON/index.js

@@ -1,43 +1,51 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
 import './index.scss';
 import { stringifyTruncated } from '../../../../../utilities/stringifyTruncated.js';
-export const JSONCell = ({ cellData })=>{
-    const { t } = useTranslation();
-    try {
-        const cellDataString = stringifyTruncated(cellData, 100);
-        return /*#__PURE__*/ _jsxDEV("code", {
-            className: "json-cell",
-            children: /*#__PURE__*/ _jsxDEV("span", {
-                children: cellDataString
-            }, void 0, false, {
-                fileName: "src/elements/Table/DefaultCell/fields/JSON/index.tsx",
-                lineNumber: 16,
-                columnNumber: 9
-            }, this)
-        }, void 0, false, {
-            fileName: "src/elements/Table/DefaultCell/fields/JSON/index.tsx",
-            lineNumber: 15,
-            columnNumber: 7
-        }, this);
-    } catch (_ignore) {
-        return /*#__PURE__*/ _jsxDEV("code", {
-            className: "json-cell",
-            children: /*#__PURE__*/ _jsxDEV("span", {
-                children: t('general:error')
-            }, void 0, false, {
-                fileName: "src/elements/Table/DefaultCell/fields/JSON/index.tsx",
-                lineNumber: 22,
-                columnNumber: 9
-            }, this)
-        }, void 0, false, {
-            fileName: "src/elements/Table/DefaultCell/fields/JSON/index.tsx",
-            lineNumber: 21,
-            columnNumber: 7
-        }, this);
+export const JSONCell = t0 => {
+  const $ = _c(4);
+  const {
+    cellData
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  ;
+  try {
+    let t2;
+    if ($[0] !== cellData) {
+      const cellDataString = stringifyTruncated(cellData, 100);
+      t2 = _jsx("code", {
+        className: "json-cell",
+        children: _jsx("span", {
+          children: cellDataString
+        })
+      });
+      $[0] = cellData;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    return t2;
+  } catch (t1) {
+    let t2;
+    if ($[2] !== t) {
+      t2 = _jsx("code", {
+        className: "json-cell",
+        children: _jsx("span", {
+          children: t("general:error")
+        })
+      });
+      $[2] = t;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
     }
+    return t2;
+  }
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Table/DefaultCell/fields/JSON/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/Table/DefaultCell/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, JSONFieldClient } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport './index.scss'\nimport { stringifyTruncated } from '../../../../../utilities/stringifyTruncated.js'\n\nexport const JSONCell: React.FC<DefaultCellComponentProps<JSONFieldClient>> = ({ cellData }) => {\n  const { t } = useTranslation()\n  try {\n    const cellDataString = stringifyTruncated(cellData, 100)\n    return (\n      <code className=\"json-cell\">\n        <span>{cellDataString}</span>\n      </code>\n    )\n  } catch (_ignore) {\n    return (\n      <code className=\"json-cell\">\n        <span>{t('general:error')}</span>\n      </code>\n    )\n  }\n}\n"],"names":["React","useTranslation","stringifyTruncated","JSONCell","cellData","t","cellDataString","code","className","span","_ignore"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,gDAA+C;AAC9E,OAAO,eAAc;AACrB,SAASC,kBAAkB,QAAQ,iDAAgD;AAEnF,OAAO,MAAMC,WAAiE,CAAC,EAAEC,QAAQ,EAAE;IACzF,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,IAAI;QACF,MAAMK,iBAAiBJ,mBAAmBE,UAAU;QACpD,qBACE,QAACG;YAAKC,WAAU;sBACd,cAAA,QAACC;0BAAMH;;;;;;;;;;;IAGb,EAAE,OAAOI,SAAS;QAChB,qBACE,QAACH;YAAKC,WAAU;sBACd,cAAA,QAACC;0BAAMJ,EAAE;;;;;;;;;;;IAGf;AACF,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","stringifyTruncated","JSONCell","t0","$","cellData","t","t2","cellDataString","_jsx","className","children"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, JSONFieldClient } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport './index.scss'\nimport { stringifyTruncated } from '../../../../../utilities/stringifyTruncated.js'\n\nexport const JSONCell: React.FC<DefaultCellComponentProps<JSONFieldClient>> = ({ cellData }) => {\n  const { t } = useTranslation()\n  try {\n    const cellDataString = stringifyTruncated(cellData, 100)\n    return (\n      <code className=\"json-cell\">\n        <span>{cellDataString}</span>\n      </code>\n    )\n  } catch (_ignore) {\n    return (\n      <code className=\"json-cell\">\n        <span>{t('general:error')}</span>\n      </code>\n    )\n  }\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AACP,SAASC,kBAAkB,QAAQ;AAEnC,OAAO,MAAMC,QAAA,GAAiEC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO;EAAA,IAAAF,EAAY;EACzF;IAAAG;EAAA,IAAcN,cAAA;EAAA;EAAA;IAAA,IAAAO,EAAA;IAAA,IAAAH,CAAA,QAAAC,QAAA;MAEZ,MAAAG,cAAA,GAAuBP,kBAAA,CAAmBI,QAAA,KAAU;MAElDE,EAAA,GAAAE,IAAA,CAAC;QAAAC,SAAA,EAAe;QAAAC,QAAA,EACdF,IAAA,CAAC;UAAAE,QAAA,EAAMH;QAAA,C;;;;;;;WADTD,E;;;;MAMAA,EAAA,GAAAE,IAAA,CAAC;QAAAC,SAAA,EAAe;QAAAC,QAAA,EACdF,IAAA,CAAC;UAAAE,QAAA,EAAML,CAAA,CAAE;QAAA,C;;;;;;;WADXC,E;;CAKN","ignoreList":[]}