@evergis/react 3.1.51 → 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,4 +1,4 @@
-export declare const ElementValueWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+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

@@ -4507,183 +4507,74 @@ const DashboardChip$1 = styled(uilibGl.Chip) `
   ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
 `;
 
-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 getAttributeByName = (attributeName, attributes) => {
+    return Array.isArray(attributeName)
+        ? null
+        : attributeName
+            ? attributes?.find(({ name }) => name === attributeName)
+            : null;
+};
 
-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 ContainerAlias = styled(uilibGl.Flex) `
-  align-items: center;
-  flex-wrap: nowrap;
-  margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? 0.25 : 0)}rem;
-  font-size: 0.75rem;
-  color: ${({ theme: { palette } }) => palette.textSecondary};
-
-  span[kind] {
-    margin-right: 0.5rem;
-
-    :after {
-      color: ${({ theme: { palette } }) => palette.primary};
-    }
-  }
-`;
-const ContainerAliasIcon = styled.div `
-  margin-right: 0.5rem;
-`;
-const ContainerChart = styled(uilibGl.Flex) `
-  justify-content: flex-start;
-
-  > * {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-`;
-const ContainerLegend = styled(uilibGl.Flex) ``;
-const ContainerUnits = styled.div `
-  margin-left: 0.5rem;
-  white-space: nowrap;
-  font-size: 0.75rem;
-`;
-const ContainerValue = styled(uilibGl.Flex) `
-  justify-content: flex-end;
-  align-items: center;
-  flex-wrap: nowrap;
-  width: 100%;
-  font-size: ${({ big }) => (big ? 1.5 : 1)}rem;
-  color: ${({ fontColor, theme: { palette } }) => fontColor || palette.textPrimary};
-
-  > * {
-    width: ${({ column }) => (column ? "100%" : "auto")};
-  }
-
-  ${ContainerChart}, ${ContainerLegend} {
-    width: ${({ column }) => (column ? "100%" : "50%")};
-  }
-
-  ${ContainerLegend} {
-    margin-left: ${({ column }) => (column ? 0 : "1rem")};
-  }
-
-  ${ChartLegendContainer} {
-    flex-direction: ${({ column }) => (column ? "row" : "column")};
-    margin-top: ${({ column }) => (column ? "1rem" : 0)};
-  }
-`;
-const ColorIconMixin = styled.css `
-  :after {
-    color: ${({ $fontColor }) => $fontColor} !important;
-  }
-`;
-const SizeIconMixin = styled.css `
-  :after {
-    font-size: ${({ $fontSize }) => $fontSize}px !important;
-  }
-`;
-const ContainerIcon = styled(uilibGl.Icon) `
-  width: auto;
-  height: auto;
-  margin-bottom: 0.5rem;
-  ${({ $fontColor }) => !!$fontColor && ColorIconMixin};
-  ${({ $fontSize }) => !!$fontSize && SizeIconMixin};
-`;
-const SvgContainerColorMixin$1 = styled.css `
-  path,
-  line,
-  circle {
-    fill: ${({ $fontColor }) => $fontColor};
-  }
-`;
-const SvgContainer$1 = styled.div `
-  &&& {
-    min-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
-    max-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
-
-    ${({ $fontColor }) => !!$fontColor && SvgContainerColorMixin$1};
-
-    > * {
-      min-width: inherit;
-    }
-  }
-`;
-const TwoColumnContainerWrapper = styled(uilibGl.Flex) `
-  width: 100%;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-
-  > * {
-    flex: 1;
-  }
-
-  > ${ContainerValue} {
-    justify-content: flex-end;
-
-    > * {
-      text-align: right;
-    }
-  }
-`;
+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 } = options || {};
+    const valueOrDefault = value || defaultValue;
+    const resultValue = type === "attributeValue" && attribute?.type && attribute?.stringFormat
+        ? formatAttributeValue({
+            t,
+            type: attribute.type,
+            value: valueOrDefault,
+            stringFormat: attribute.stringFormat,
+            noUnits,
+        })
+        : valueOrDefault;
+    if (!wrap)
+        return resultValue;
+    return (jsxRuntime.jsxs(React.Fragment, { children: [tagView ? (jsxRuntime.jsx(DashboardChip$1, { text: resultValue, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$radius": radius, style: style })) : resultValue, withDivider && jsxRuntime.jsx(uilibGl.Divider, {})] }, id));
+};
+
+const getAttributeValue = (element, attributes) => {
+    const attribute = getAttributeByName(element?.attributeName, attributes);
+    const { maxLength, separator, expandable, lineBreak } = element.options || {};
+    let value = "";
+    if (attribute?.type === api.AttributeType.Boolean && typeof attribute.value === "boolean") {
+        return jsxRuntime.jsx(DashboardCheckbox, { title: attribute.alias || attribute.name, checked: attribute.value });
+    }
+    if (Array.isArray(element?.attributeName)) {
+        const concatAttributes = element.attributeName.map((attributeName) => attributes?.find(({ name }) => name === attributeName)?.value || "");
+        value = concatAttributes.join(separator || ", ");
+    }
+    else {
+        value = attribute?.value?.toString() || "";
+    }
+    return maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
+};
+
+const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
+
+const getChartFilterName = (relatedDataSources) => {
+    const relatedAttributes = relatedDataSources || [];
+    const axes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
+    return axes?.[0]?.filterName;
+};
+
+function getValueIndex(items, attributes) {
+    return items?.findIndex(({ name }) => name.toString() === attributes.value?.toString());
+}
+const getChartMarkers = (items, markers, dataSources) => {
+    if (typeof markers === "string") {
+        const dataSource = getDataSource(markers, dataSources);
+        return dataSource?.features?.map(({ attributes }) => ({
+            ...attributes,
+            value: getValueIndex(items, attributes),
+        })) || [];
+    }
+    return (markers?.map(marker => ({
+        ...marker,
+        value: getValueIndex(items, marker),
+    })) || []);
+};
 
 const LayerGroupContainer = styled(uilibGl.Flex) `
   display: flex;
@@ -5213,12 +5104,45 @@ const LayerListContainer = styled(uilibGl.Flex) `
   box-sizing: border-box;
 `;
 
-const ElementValueWrapper = styled.div `
-  transition: background-color ${uilibGl.transition.toggle};
+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;
-  min-height: 1rem;
   box-sizing: border-box;
   width: 100%;
   background: ${({ theme: { palette } }) => palette.backgroundAlpha};
@@ -5230,7 +5154,7 @@ const ContainerWrapper = styled(uilibGl.Flex) `
   z-index: ${({ $zIndex }) => $zIndex ?? 1};
   transition: background-color ${uilibGl.transition.toggle};
 
-  ${Container} > ${ElementValueWrapper}:not(:last-child) {
+  ${Container} > :not(:last-child) {
     margin-bottom: 1.5rem;
   }
 `;
@@ -5483,75 +5407,6 @@ const FeatureControls = styled(uilibGl.Flex) `
   }
 `;
 
-const getAttributeByName = (attributeName, attributes) => {
-    return Array.isArray(attributeName)
-        ? null
-        : attributeName
-            ? attributes?.find(({ name }) => name === attributeName)
-            : null;
-};
-
-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 } = options || {};
-    const valueOrDefault = value || defaultValue;
-    const resultValue = type === "attributeValue" && attribute?.type && attribute?.stringFormat
-        ? formatAttributeValue({
-            t,
-            type: attribute.type,
-            value: valueOrDefault,
-            stringFormat: attribute.stringFormat,
-            noUnits,
-        })
-        : valueOrDefault;
-    if (!wrap)
-        return resultValue;
-    return (jsxRuntime.jsxs(React.Fragment, { children: [tagView ? (jsxRuntime.jsx(DashboardChip$1, { text: resultValue, "$bgColor": bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$radius": radius, style: style })) : (jsxRuntime.jsx(ElementValueWrapper, { "data-id": id, "data-templatename": templateName, style: style, children: resultValue })), withDivider && jsxRuntime.jsx(uilibGl.Divider, {})] }, id));
-};
-
-const getAttributeValue = (element, attributes) => {
-    const attribute = getAttributeByName(element?.attributeName, attributes);
-    const { maxLength, separator, expandable, lineBreak } = element.options || {};
-    let value = "";
-    if (attribute?.type === api.AttributeType.Boolean && typeof attribute.value === "boolean") {
-        return jsxRuntime.jsx(DashboardCheckbox, { title: attribute.alias || attribute.name, checked: attribute.value });
-    }
-    if (Array.isArray(element?.attributeName)) {
-        const concatAttributes = element.attributeName.map((attributeName) => attributes?.find(({ name }) => name === attributeName)?.value || "");
-        value = concatAttributes.join(separator || ", ");
-    }
-    else {
-        value = attribute?.value?.toString() || "";
-    }
-    return maxLength && maxLength < value.length ? (jsxRuntime.jsx(TextTrim, { maxLength: maxLength, expandable: expandable, lineBreak: lineBreak, children: value })) : (value);
-};
-
-const getChartAxes = (chartElement) => chartElement?.options?.relatedDataSources?.filter(({ chartAxis }) => chartAxis === "y");
-
-const getChartFilterName = (relatedDataSources) => {
-    const relatedAttributes = relatedDataSources || [];
-    const axes = relatedAttributes.filter(({ chartAxis }) => chartAxis === "y");
-    return axes?.[0]?.filterName;
-};
-
-function getValueIndex(items, attributes) {
-    return items?.findIndex(({ name }) => name.toString() === attributes.value?.toString());
-}
-const getChartMarkers = (items, markers, dataSources) => {
-    if (typeof markers === "string") {
-        const dataSource = getDataSource(markers, dataSources);
-        return dataSource?.features?.map(({ attributes }) => ({
-            ...attributes,
-            value: getValueIndex(items, attributes),
-        })) || [];
-    }
-    return (markers?.map(marker => ({
-        ...marker,
-        value: getValueIndex(items, marker),
-    })) || []);
-};
-
 const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, children, options, style } = elementConfig || {};
@@ -5561,6 +5416,147 @@ const ContainersGroupContainer = React.memo(({ elementConfig, type, renderElemen
     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;
+  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;
+  margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? 0.25 : 0)}rem;
+  font-size: 0.75rem;
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+
+  span[kind] {
+    margin-right: 0.5rem;
+
+    :after {
+      color: ${({ theme: { palette } }) => palette.primary};
+    }
+  }
+`;
+const ContainerAliasIcon = styled.div `
+  margin-right: 0.5rem;
+`;
+const ContainerChart = styled(uilibGl.Flex) `
+  justify-content: flex-start;
+
+  > * {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+`;
+const ContainerLegend = styled(uilibGl.Flex) ``;
+const ContainerUnits = styled.div `
+  margin-left: 0.5rem;
+  white-space: nowrap;
+  font-size: 0.75rem;
+`;
+const ContainerValue = styled(uilibGl.Flex) `
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: nowrap;
+  width: 100%;
+  font-size: ${({ big }) => (big ? 1.5 : 1)}rem;
+  color: ${({ fontColor, theme: { palette } }) => fontColor || palette.textPrimary};
+
+  > * {
+    width: ${({ column }) => (column ? "100%" : "auto")};
+  }
+
+  ${ContainerChart}, ${ContainerLegend} {
+    width: ${({ column }) => (column ? "100%" : "50%")};
+  }
+
+  ${ContainerLegend} {
+    margin-left: ${({ column }) => (column ? 0 : "1rem")};
+  }
+
+  ${ChartLegendContainer} {
+    flex-direction: ${({ column }) => (column ? "row" : "column")};
+    margin-top: ${({ column }) => (column ? "1rem" : 0)};
+  }
+`;
+const ColorIconMixin = styled.css `
+  :after {
+    color: ${({ $fontColor }) => $fontColor} !important;
+  }
+`;
+const SizeIconMixin = styled.css `
+  :after {
+    font-size: ${({ $fontSize }) => $fontSize}px !important;
+  }
+`;
+const ContainerIcon = styled(uilibGl.Icon) `
+  width: auto;
+  height: auto;
+  margin-bottom: 0.5rem;
+  ${({ $fontColor }) => !!$fontColor && ColorIconMixin};
+  ${({ $fontSize }) => !!$fontSize && SizeIconMixin};
+`;
+const SvgContainerColorMixin$1 = styled.css `
+  path,
+  line,
+  circle {
+    fill: ${({ $fontColor }) => $fontColor};
+  }
+`;
+const SvgContainer$1 = styled.div `
+  &&& {
+    min-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
+    max-width: ${({ $width }) => ($width ? `${$width}px` : "1rem")};
+
+    ${({ $fontColor }) => !!$fontColor && SvgContainerColorMixin$1};
+
+    > * {
+      min-width: inherit;
+    }
+  }
+`;
+const TwoColumnContainerWrapper = styled(uilibGl.Flex) `
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  > * {
+    flex: 1;
+  }
+
+  > ${ContainerValue} {
+    justify-content: flex-end;
+
+    > * {
+      text-align: right;
+    }
+  }
+`;
+
 const OneColumnContainer = React.memo(({ elementConfig, renderElement }) => {
     const { id, options, style } = elementConfig || {};
     const { innerTemplateStyle, hideEmpty } = options || {};
@@ -6767,7 +6763,7 @@ const UploadContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const onUpload = React.useCallback(async (input) => {
         const files = Array.isArray(input) ? input : [input];
         const response = await Promise.all(files.map(file => {
-            return api.file.upload(file, true, parentResourceId);
+            return api.file.upload(file, true, parentResourceId, file.name);
         }));
         const uploadedFiles = response.map(item => ({
             name: item.name,
@@ -10762,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;
@@ -10817,7 +10814,6 @@ exports.ElementMarkdown = ElementMarkdown;
 exports.ElementSlideshow = ElementSlideshow;
 exports.ElementSvg = ElementSvg;
 exports.ElementTooltip = ElementTooltip;
-exports.ElementValueWrapper = ElementValueWrapper;
 exports.ExpandableTitle = ExpandableTitle;
 exports.FEATURE_CARD_DEFAULT_COLORS = FEATURE_CARD_DEFAULT_COLORS;
 exports.FEATURE_CARD_OTHER_COLOR = FEATURE_CARD_OTHER_COLOR;