@evergis/react 3.1.126 → 3.1.128

package/dist/components/Dashboard/elements/ElementModal/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ContainerProps } from '../../types';
+export declare const ElementModal: FC<ContainerProps>;

package/dist/components/Dashboard/elements/ElementModal/styled.d.ts

@@ -0,0 +1 @@
+export declare const ModalIcon: import('styled-components').StyledComponent<"span", any, import('@evergis/uilib-gl').IIconProps, never>;

package/dist/components/Dashboard/elements/registry.d.ts

@@ -15,4 +15,5 @@ export declare const elementComponents: {
     }>;
     readonly markdown: import('react').FC<import('..').ContainerProps>;
     readonly uploader: import('react').FC<import('..').ContainerProps>;
+    readonly modal: import('react').FC<import('..').ContainerProps>;
 };

package/dist/components/Dashboard/types.d.ts

@@ -149,6 +149,7 @@ export interface ConfigOptions {
     baseMapName?: string;
     baseMapSettings?: Record<string, BaseMapSettings>;
     expandedLayers?: boolean;
+    modalId?: string;
 }
 export interface ConfigDataSource {
     name: string;
@@ -225,6 +226,21 @@ export interface ConfigTask {
     updateDate?: string;
     id?: string;
 }
+export interface ConfigModalOptions {
+    title?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    minHeight?: string;
+}
+export interface ConfigModalContentRef {
+    containerId: string;
+}
+export type ConfigModalContentItem = ConfigContainerChild | ConfigModalContentRef;
+export interface ConfigModal {
+    id: string;
+    options?: ConfigModalOptions;
+    children: ConfigModalContentItem[];
+}
 export interface ConfigContainerHeader {
     id?: string;
     templateName?: HeaderTemplate;
@@ -238,6 +254,7 @@ export interface ConfigContainer {
     dataSources?: ConfigDataSource[];
     filters?: ConfigFilter[];
     tasks?: ConfigTask[];
+    modals?: ConfigModal[];
     options?: ConfigOptions;
     header?: ConfigContainerHeader;
 }

package/dist/components/Dashboard/utils/getElementValue.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ClientFeatureAttribute, ConfigContainerChild, ContainerProps, RenderElementValue } from '../types';
 import { LayerInfo } from '../../../types';
-export declare const getElementValue: ({ getDefaultContainer, ...props }: Pick<ContainerProps, "type" | "elementConfig" | "renderElement"> & {
+export declare const getElementValue: ({ getDefaultContainer, ...props }: Pick<ContainerProps, "type" | "config" | "elementConfig" | "renderElement"> & {
     layerInfo: LayerInfo;
     attributes: ClientFeatureAttribute[];
     element: ConfigContainerChild;

package/dist/index.js

@@ -5579,35 +5579,36 @@ const LayerListContainer = styled(uilibGl.Flex) `
 
 const ElementValueWrapper = styled.div `
   transition: background-color ${uilibGl.transition.toggle};
-  
-  ${({ noMargin }) => styled.css `
-    &&&& {
-      margin-bottom: 0;
-    }
-  `};
+
+  ${({ noMargin }) => !!noMargin &&
+    styled.css `
+      &&&& {
+        margin-bottom: 0;
+      }
+    `};
 `;
 const Container = styled(uilibGl.Flex) `
   flex-direction: column;
   width: 100%;
-  
+
   ${({ isColumn }) => isColumn
     ? styled.css `
-      &&& > * {
-        justify-content: flex-start;
-      }
-      > * {
-        width: 100%;
-
-        :not(:last-child) {
-          margin-bottom: 0.5rem;
-        }
-      }
-      `
+          &&& > * {
+            justify-content: flex-start;
+          }
+          > * {
+            width: 100%;
+
+            :not(:last-child) {
+              margin-bottom: 0.5rem;
+            }
+          }
+        `
     : styled.css `
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-      `}
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+        `}
 
   ${({ isTitle }) => isTitle &&
     styled.css `
@@ -5616,12 +5617,13 @@ const Container = styled(uilibGl.Flex) `
       }
     `}
   
-  ${({ noBorders }) => noBorders && styled.css `
-    ${ContainerWrapper} {
-      box-shadow: none;
-      padding: 0;
-    }
-  `}
+  ${({ noBorders }) => noBorders &&
+    styled.css `
+      ${ContainerWrapper} {
+        box-shadow: none;
+        padding: 0;
+      }
+    `}
 `;
 const ContainerWrapper = styled(uilibGl.Flex) `
   position: relative;
@@ -5636,12 +5638,13 @@ const ContainerWrapper = styled(uilibGl.Flex) `
   color: ${({ theme: { palette } }) => palette.textPrimary};
   z-index: ${({ $zIndex }) => $zIndex ?? 1};
   transition: background-color ${uilibGl.transition.toggle};
-  
-  ${({ $noMargin }) => $noMargin && styled.css `
-    &&&& {
-      margin-bottom: 0;
-    }
-  `}
+
+  ${({ $noMargin }) => $noMargin &&
+    styled.css `
+      &&&& {
+        margin-bottom: 0;
+      }
+    `}
 `;
 const DashboardChip = styled(uilibGl.Chip) `
   margin: 0 0.25rem 0.25rem 0;
@@ -5656,7 +5659,7 @@ const DashboardChip = styled(uilibGl.Chip) `
   }
 
   span[kind]:after {
-    color: ${({ $isDefault, $fontColor, theme: { palette } }) => ($isDefault ? palette.icon : $fontColor || "#fff")};
+    color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.icon : $fontColor || "#fff"};
   }
 `;
 const DashboardPlaceholderWrap = styled(uilibGl.Flex) `
@@ -5677,7 +5680,7 @@ const DashboardPlaceholder = styled(uilibGl.Flex) `
     styled.css `
       width: 6.25rem;
     `}
-  
+
   &&& > * {
     margin-bottom: 0;
   }
@@ -5844,7 +5847,7 @@ const PresentationPanelContainer = styled.div `
     height: auto;
     margin: 0 -1.125rem -1.5rem;
     padding: 0;
-  
+
     ${LayerGroupList} {
       padding: 0;
     }
@@ -5871,7 +5874,7 @@ const DataSourceErrorContainer = styled(uilibGl.Flex) `
 `;
 const AttributeLabel = styled(uilibGl.Description) `
   margin-top: 0 !important;
-  margin-bottom: ${({ forCheckbox }) => (forCheckbox ? "0.75rem" : "0.25rem")} !important;
+  margin-bottom: ${({ forCheckbox }) => forCheckbox ? "0.75rem" : "0.25rem"} !important;
   padding-left: ${({ isEdit }) => (isEdit ? "0.5rem" : "0")};
 `;
 const FeatureControls = styled(uilibGl.Flex) `
@@ -5896,9 +5899,11 @@ const getAttributeByName = (attributeName, attributes) => {
 };
 
 const formatElementValue = ({ t, value, elementConfig, attributes, wrap, }) => {
-    const { id, type, defaultValue, options, style, attributeName, templateName } = elementConfig || {};
-    const attribute = attributeName ? getAttributeByName(attributeName, attributes) : null;
-    const { fontColor, fontSize, noUnits, tagView, bgColor, withDivider, radius, noMargin } = options || {};
+    const { id, type, defaultValue, options, style, attributeName, templateName, } = elementConfig || {};
+    const attribute = attributeName
+        ? getAttributeByName(attributeName, attributes)
+        : null;
+    const { fontColor, fontSize, noUnits, tagView, bgColor, withDivider, radius, noMargin, } = options || {};
     const valueOrDefault = value || defaultValue;
     const resultValue = type === "attributeValue" && attribute?.type && attribute?.stringFormat
         ? formatAttributeValue({
@@ -6169,7 +6174,7 @@ const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) =
         const { id, value, hideEmpty, style, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
         if (!value && hideEmpty)
             return null;
-        return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }));
+        return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }));
     }, [getRenderContainerItem, elementConfig]);
     return renderAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAttributes.map(renderContainer) })) : (renderContainer());
 });
@@ -6182,7 +6187,7 @@ const TwoColumnContainer = React.memo(({ elementConfig, type, renderElement }) =
         const { id, value, hideEmpty, style, hasIcon, hasUnits, render } = getRenderContainerItem(elementConfig, attribute);
         if (!value && hideEmpty)
             return null;
-        return (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
+        return (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }, attribute));
     }, [getRenderContainerItem, elementConfig]);
     return renderAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderAttributes.map(attribute => renderContainer(attribute)) })) : (renderContainer());
 });
@@ -9129,6 +9134,131 @@ const ElementUploader = React.memo(({ elementConfig, type }) => {
     return (jsxRuntime.jsx(UploaderContainer, { id: id, style: style, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(uilibGl.Uploader, { currentRef: refInput, title: renderTitle, accept: fileExtensions, width: "100%", fileItems: files, isMultiple: multiSelect, onUpload: onUpload, onDelete: onDelete }) }) }));
 });
 
+const ModalIcon = styled(uilibGl.Icon) `
+  &&& {
+    cursor: pointer;
+
+    :after {
+      font-size: 0.75rem;
+      color: ${({ theme: { palette } }) => palette.iconDisabled};
+      transition: color ${uilibGl.transition.hover};
+    }
+
+    :hover:after {
+      color: ${({ theme: { palette } }) => palette.icon};
+    }
+  }
+`;
+
+const isEmptyElementValue = (value) => value === "" || value === null || value === undefined;
+
+const isHiddenEmptyValue = ({ value, children, hideEmpty, renderElement, }) => {
+    const valueElement = children?.find(item => item.id === "value");
+    const renderedValue = valueElement ? renderElement({ id: "value" }) : null;
+    const isEmpty = isEmptyElementValue(value) || (valueElement && (renderedValue === null || renderedValue === ""));
+    return isEmpty && hideEmpty;
+};
+
+const isNotValidSelectedTab = (tabId, selectedTabId) => {
+    if (!tabId || !selectedTabId)
+        return false;
+    return Array.isArray(tabId) ? !tabId.includes(selectedTabId) : tabId !== selectedTabId;
+};
+
+const isVisibleContainer = (id, expandable, expanded, expandedContainers) => !expandable || (expandedContainers?.[id] !== undefined ? expandedContainers[id] : expanded) || false;
+
+const isContainerRef = (element) => "containerId" in element &&
+    !("templateName" in element) &&
+    !("type" in element) &&
+    !("children" in element);
+const getRenderElement = ({ t, config, elementConfig, attributes = [], layerInfo, selectedTabId, setSelectedTabId, pageIndex, expandedContainers, type = exports.WidgetType.FeatureCard, }) => (props) => {
+    const { id, index, wrap = true } = props;
+    const currentConfig = elementConfig || config;
+    let element = id
+        ? findAnd.returnFound(currentConfig?.children, { id })
+        : index !== undefined
+            ? currentConfig?.children[index]
+            : null;
+    if (Array.isArray(element)) {
+        element = element[0];
+    }
+    if (element && isContainerRef(element)) {
+        let container = findAnd.returnFound(config, { id: element.containerId });
+        if (Array.isArray(container))
+            container = container[0];
+        element = container || undefined;
+    }
+    const { options, children, templateName } = element || {};
+    const { tabId, hideEmpty, expandable, expanded, innerTemplateName } = options || {};
+    if (isNotValidSelectedTab(tabId, selectedTabId))
+        return null;
+    const renderElement = getRenderElement({
+        t,
+        config,
+        elementConfig: element,
+        attributes,
+        layerInfo,
+        expandedContainers,
+        selectedTabId,
+        setSelectedTabId,
+        pageIndex,
+        type,
+    });
+    const value = getElementValue({
+        type,
+        element: currentConfig,
+        elementConfig: element,
+        config,
+        attributes,
+        layerInfo,
+        renderElement,
+        getDefaultContainer: () => {
+            if (!templateName) {
+                return null;
+            }
+            const ContainerTemplateValue = getContainerComponent(templateName);
+            if (!ContainerTemplateValue) {
+                return null;
+            }
+            return (jsxRuntime.jsx(ContainerTemplateValue, { id: id, type: type, config: config, elementConfig: element, layerInfo: layerInfo, attributes: attributes, innerComponent: getContainerComponent(innerTemplateName), isVisible: isVisibleContainer(id, expandable, expanded, expandedContainers), renderElement: renderElement }, id));
+        },
+    });
+    if (isHiddenEmptyValue({ value, children, hideEmpty, renderElement }))
+        return null;
+    return formatElementValue({
+        t,
+        value,
+        elementConfig: element,
+        attributes,
+        wrap,
+    });
+};
+
+const ElementModal = React.memo(({ type = exports.WidgetType.Dashboard, elementConfig }) => {
+    const { config } = useWidgetConfig(type);
+    const { expandedContainers, attributes, isLoading } = useWidgetContext(type);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const { options } = elementConfig || {};
+    const { modalId, icon } = options || {};
+    const modalConfig = React.useMemo(() => (config?.modals ?? []).find(({ id }) => id === modalId) ?? null, [config?.modals, modalId]);
+    const modalContent = React.useMemo(() => (modalConfig?.children ?? []), [modalConfig]);
+    const renderElementConfig = React.useMemo(() => ({ children: modalContent }), [modalContent]);
+    const renderElement = React.useMemo(() => getRenderElement({
+        type,
+        config,
+        elementConfig: renderElementConfig,
+        attributes,
+        expandedContainers,
+    }), [type, config, renderElementConfig, attributes, expandedContainers]);
+    const handleOpen = React.useCallback(() => setIsOpen(true), []);
+    const handleClose = React.useCallback(() => setIsOpen(false), []);
+    if (!modalConfig)
+        return null;
+    const { options: modalOptions } = modalConfig;
+    const { title, maxWidth, minWidth, minHeight } = modalOptions || {};
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalIcon, { kind: icon || "new_window", onClick: handleOpen }), jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: handleClose, modal: true, maxWidth: maxWidth, minWidth: minWidth, minHeight: minHeight, style: { paddingBottom: "2rem" }, children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [!!title && jsxRuntime.jsx("span", { children: title }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: handleClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: isLoading ? (jsxRuntime.jsx(DashboardLoading, {})) : (jsxRuntime.jsx(Container, { isColumn: true, noBorders: true, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: modalContent, isMain: true, renderElement: renderElement }) })) })] })] }));
+});
+
 const elementComponents = {
     control: ElementControl,
     image: ElementImage,
@@ -9144,6 +9274,7 @@ const elementComponents = {
     legend: ElementLegend,
     markdown: ElementMarkdown,
     uploader: ElementUploader,
+    modal: ElementModal,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -9172,10 +9303,13 @@ const getElementValue = ({ getDefaultContainer, ...props }) => {
     }
     if (type === "attributeDescription") {
         const attribute = getAttributeByName(attributeName, attributes);
-        return attribute?.name ? layerInfo.layerDefinition.attributes[attribute.name]?.description || null : null;
+        return attribute?.name
+            ? layerInfo.layerDefinition.attributes[attribute.name]?.description ||
+                null
+            : null;
     }
     const ElementComponent = type ? elementComponents[type] : null;
-    return ElementComponent ? jsxRuntime.jsx(ElementComponent, { ...props }) : getDefaultContainer?.();
+    return ElementComponent ? (jsxRuntime.jsx(ElementComponent, { ...props })) : (getDefaultContainer?.());
 };
 
 const getLayerAttributes = (layerDefinition) => {
@@ -10144,69 +10278,6 @@ const getRelatedAttribute = (layerInfo, sourceAttributeName, relatedLayerName) =
     return attributeConfig?.options?.relatedAttributes?.find(({ layerName }) => layerName === relatedLayerName);
 };
 
-const isEmptyElementValue = (value) => value === "" || value === null || value === undefined;
-
-const isHiddenEmptyValue = ({ value, children, hideEmpty, renderElement, }) => {
-    const valueElement = children?.find(item => item.id === "value");
-    const renderedValue = valueElement ? renderElement({ id: "value" }) : null;
-    const isEmpty = isEmptyElementValue(value) || (valueElement && (renderedValue === null || renderedValue === ""));
-    return isEmpty && hideEmpty;
-};
-
-const isNotValidSelectedTab = (tabId, selectedTabId) => {
-    if (!tabId || !selectedTabId)
-        return false;
-    return Array.isArray(tabId) ? !tabId.includes(selectedTabId) : tabId !== selectedTabId;
-};
-
-const isVisibleContainer = (id, expandable, expanded, expandedContainers) => !expandable || (expandedContainers?.[id] !== undefined ? expandedContainers[id] : expanded) || false;
-
-const getRenderElement = ({ t, config, elementConfig, attributes = [], layerInfo, selectedTabId, setSelectedTabId, pageIndex, expandedContainers, type = exports.WidgetType.FeatureCard, }) => (props) => {
-    const { id, index, wrap = true } = props;
-    const currentConfig = elementConfig || config;
-    let element = id ? findAnd.returnFound(currentConfig?.children, { id }) : index ? currentConfig?.children[index] : null;
-    if (Array.isArray(element)) {
-        element = element[0];
-    }
-    const { options, children, templateName } = element || {};
-    const { tabId, hideEmpty, expandable, expanded, innerTemplateName } = options || {};
-    if (isNotValidSelectedTab(tabId, selectedTabId))
-        return null;
-    const renderElement = getRenderElement({
-        t,
-        config,
-        elementConfig: element,
-        attributes,
-        layerInfo,
-        expandedContainers,
-        selectedTabId,
-        setSelectedTabId,
-        pageIndex,
-        type,
-    });
-    const value = getElementValue({
-        type,
-        element: currentConfig,
-        elementConfig: element,
-        attributes,
-        layerInfo,
-        renderElement,
-        getDefaultContainer: () => {
-            if (!templateName) {
-                return null;
-            }
-            const ContainerTemplateValue = getContainerComponent(templateName);
-            if (!ContainerTemplateValue) {
-                return null;
-            }
-            return (jsxRuntime.jsx(ContainerTemplateValue, { id: id, type: type, config: config, elementConfig: element, layerInfo: layerInfo, attributes: attributes, innerComponent: getContainerComponent(innerTemplateName), isVisible: isVisibleContainer(id, expandable, expanded, expandedContainers), renderElement: renderElement }, id));
-        },
-    });
-    if (isHiddenEmptyValue({ value, children, hideEmpty, renderElement }))
-        return null;
-    return formatElementValue({ t, value, elementConfig: element, attributes, wrap });
-};
-
 const getResourceUrl = (url) => {
     return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
 };