@evergis/react 3.1.52 → 3.1.53

package/dist/components/Dashboard/containers/styled.d.ts

@@ -1,4 +1,3 @@
-export declare const Container: any;
 export declare const ContainerAlias: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
     hasBottomMargin?: boolean;
 }, never>;

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

@@ -1,3 +1,4 @@
+export declare const Container: any;
 export declare const ContainerWrapper: any;
 export declare const DashboardChip: import('styled-components').StyledComponent<any, any, any, any>;
 export declare const DashboardPlaceholderWrap: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;

package/dist/index.js

@@ -4576,34 +4576,6 @@ const getChartMarkers = (items, markers, dataSources) => {
     })) || []);
 };
 
-const ChartLegendContainer = styled(uilibGl.Flex) `
-  flex-direction: column;
-  flex-wrap: wrap;
-  justify-content: ${({ twoColumns }) => (twoColumns ? "flex-start" : "center")};
-`;
-const ChartLegendItem = styled(uilibGl.Flex) `
-  cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
-  align-items: center;
-  flex-wrap: nowrap;
-  width: auto;
-  margin-right: 0.375rem;
-  margin-bottom: 0.25rem;
-  line-height: 0.75rem;
-  opacity: ${({ isFiltered, hasAnyFilter }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
-`;
-const ChartLegendColor = styled.div `
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-right: 0.375rem;
-  background-color: ${({ color }) => color};
-  border-radius: ${({ theme: { borderRadius } }) => borderRadius.tiny};
-`;
-const ChartLegendName = styled.div `
-  flex: 1;
-  font-size: ${({ $fontSize }) => $fontSize || "0.625rem"};
-  color: ${({ theme: { palette }, $fontColor }) => $fontColor || palette.textPrimary};
-`;
-
 const LayerGroupContainer = styled(uilibGl.Flex) `
   display: flex;
   justify-content: center;
@@ -5132,6 +5104,43 @@ const LayerListContainer = styled(uilibGl.Flex) `
   box-sizing: border-box;
 `;
 
+const Container = styled(uilibGl.Flex) `
+  flex-direction: column;
+  width: 100%;
+
+  ${({ isColumn }) => isColumn
+    ? styled.css `
+          > * {
+            width: 100%;
+          }
+        `
+    : styled.css `
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+        `}
+
+  ${({ isMain, isColumn }) => (isMain || isColumn) &&
+    styled.css `
+      > :not(:last-child) {
+        margin-bottom: 1.5rem;
+      }
+    `}
+
+  ${({ isTitle }) => isTitle &&
+    styled.css `
+      &&&& {
+        margin-bottom: 0.75rem;
+      }
+    `}
+  
+  ${({ noBorders }) => noBorders && styled.css `
+    ${ContainerWrapper} {
+      box-shadow: none;
+      padding: 0;
+    }
+  `}
+`;
 const ContainerWrapper = styled(uilibGl.Flex) `
   position: relative;
   box-sizing: border-box;
@@ -5398,43 +5407,43 @@ const FeatureControls = styled(uilibGl.Flex) `
   }
 `;
 
-const Container = styled(uilibGl.Flex) `
+const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
+    const { expandedContainers } = useWidgetContext(type);
+    const { id, children, options, style } = elementConfig || {};
+    const { column, expandable, expanded } = options || {};
+    const isColumn = column === undefined || column;
+    const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, isColumn: isColumn, children: jsxRuntime.jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
+});
+
+const ChartLegendContainer = styled(uilibGl.Flex) `
   flex-direction: column;
-  width: 100%;
-
-  ${({ isColumn }) => isColumn
-    ? styled.css `
-          > * {
-            width: 100%;
-          }
-        `
-    : styled.css `
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-        `}
-
-  ${({ isMain, isColumn }) => (isMain || isColumn) &&
-    styled.css `
-      > :not(:last-child) {
-        margin-bottom: 1.5rem;
-      }
-    `}
-
-  ${({ isTitle }) => isTitle &&
-    styled.css `
-      &&&& {
-        margin-bottom: 0.75rem;
-      }
-    `}
-  
-  ${({ noBorders }) => noBorders && styled.css `
-    ${ContainerWrapper} {
-      box-shadow: none;
-      padding: 0;
-    }
-  `}
+  flex-wrap: wrap;
+  justify-content: ${({ twoColumns }) => (twoColumns ? "flex-start" : "center")};
+`;
+const ChartLegendItem = styled(uilibGl.Flex) `
+  cursor: ${({ onClick }) => (onClick ? "pointer" : "default")};
+  align-items: center;
+  flex-wrap: nowrap;
+  width: auto;
+  margin-right: 0.375rem;
+  margin-bottom: 0.25rem;
+  line-height: 0.75rem;
+  opacity: ${({ isFiltered, hasAnyFilter }) => (isFiltered ? 1 : hasAnyFilter ? FILTERED_VALUE_OPACITY / 100 : 1)};
+`;
+const ChartLegendColor = styled.div `
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.375rem;
+  background-color: ${({ color }) => color};
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.tiny};
 `;
+const ChartLegendName = styled.div `
+  flex: 1;
+  font-size: ${({ $fontSize }) => $fontSize || "0.625rem"};
+  color: ${({ theme: { palette }, $fontColor }) => $fontColor || palette.textPrimary};
+`;
+
 const ContainerAlias = styled(uilibGl.Flex) `
   align-items: center;
   flex-wrap: nowrap;
@@ -5548,15 +5557,6 @@ const TwoColumnContainerWrapper = styled(uilibGl.Flex) `
   }
 `;
 
-const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
-    const { expandedContainers } = useWidgetContext(type);
-    const { id, children, options, style } = elementConfig || {};
-    const { column, expandable, expanded } = options || {};
-    const isColumn = column === undefined || column;
-    const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, isColumn: isColumn, children: jsxRuntime.jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
-});
-
 const OneColumnContainer = React.memo(({ elementConfig, renderElement }) => {
     const { id, options, style } = elementConfig || {};
     const { innerTemplateStyle, hideEmpty } = options || {};
@@ -10758,6 +10758,7 @@ exports.Chart = Chart;
 exports.ChartContainer = ChartContainer;
 exports.ChartLegend = ChartLegend;
 exports.ChartLoading = ChartLoading;
+exports.Container = Container;
 exports.ContainerChildren = ContainerChildren;
 exports.ContainerLoading = ContainerLoading;
 exports.ContainerWrapper = ContainerWrapper;