@evergis/react 3.1.46 → 3.1.47

package/dist/react.esm.js

@@ -5130,9 +5130,6 @@ const LayerListContainer = styled(Flex) `
 const ElementValueWrapper = styled.div `
   transition: background-color ${transition.toggle};
 `;
-const InnerContainerWrapper$1 = styled.div `
-  width: 100%;
-`;
 const ContainerWrapper = styled(Flex) `
   position: relative;
   min-height: 1rem;
@@ -5475,24 +5472,24 @@ const ContainersGroupContainer = memo(({ elementConfig, type, renderElement }) =
     const { column, expandable, expanded } = options || {};
     const isColumn = column === undefined || column;
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { style: style, isColumn: isColumn, children: jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { id: id, style: style, isColumn: isColumn, children: jsx(ContainerChildren, { items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
 const OneColumnContainer = memo(({ elementConfig, renderElement }) => {
-    const { options, style } = elementConfig || {};
+    const { id, options, style } = elementConfig || {};
     const { innerTemplateStyle, hideEmpty } = options || {};
     const value = renderElement({ id: "value" });
     const hasUnits = elementConfig?.children?.some(({ id }) => id === "units");
     if (!value && hideEmpty)
         return null;
-    return (jsxs(Container, { style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
+    return (jsxs(Container, { id: id, style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxs(ContainerValue, { children: [value, hasUnits && jsx(ContainerUnits, { children: renderElement({ id: "units" }) })] })] }));
 });
 
 const TwoColumnContainer = memo(({ config, elementConfig, type, renderElement }) => {
     const { selectedTabId, layerInfo, attributes } = useWidgetContext(type);
     const { attributes: renderAttributes } = elementConfig?.options || {};
     const renderContainer = useCallback((element, attribute) => {
-        const { options, style, children } = element || {};
+        const { id, options, style, children } = element || {};
         const { hideEmpty, innerTemplateStyle } = options || {};
         const hasUnits = children?.some(({ id }) => id === "units");
         const iconIndex = children?.findIndex(({ id }) => id === "icon");
@@ -5530,7 +5527,7 @@ const TwoColumnContainer = memo(({ config, elementConfig, type, renderElement })
         const value = render({ id: "value" });
         if (!value && hideEmpty)
             return null;
-        return (jsxs(TwoColumnContainerWrapper, { style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { children: [hasIcon && jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
+        return (jsxs(TwoColumnContainerWrapper, { id: id, style: innerTemplateStyle || style, children: [jsxs(ContainerAlias, { children: [hasIcon && jsx(ContainerAliasIcon, { children: render({ id: "icon" }) }), render({ id: "alias" }), render({ id: "tooltip" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && jsx(ContainerUnits, { children: render({ id: "units" }) })] })] }, attribute));
     }, [attributes, config, getRenderElement, layerInfo, renderElement, selectedTabId, type]);
     return renderAttributes?.length ? (jsx(Fragment$1, { children: renderAttributes.map(attribute => renderContainer(elementConfig, attribute)) })) : (renderContainer(elementConfig));
 });
@@ -5721,7 +5718,7 @@ const DataSourceProgressContainer = memo(({ config, elementConfig, type, innerCo
         dataSources
     });
     const { attributes } = layerInfo?.configuration?.attributesConfiguration || {};
-    const { id, options, children } = elementConfig || {};
+    const { id, options, children, style } = elementConfig || {};
     const { maxValue, showTotal, relatedDataSource, expandable, expanded } = options || {};
     const valueElement = children?.find(item => item.id === "value");
     const unitsElement = children?.find(item => item.id === "units");
@@ -5749,7 +5746,7 @@ const DataSourceProgressContainer = memo(({ config, elementConfig, type, innerCo
         return jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxs(DataSourceProgressContainerWrapper, { children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxs(Fragment$1, { children: [jsx(Divider, {}), jsxs(ProgressTotal, { children: [jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxs(ProgressValue, { children: [totalValue, jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsx(ContainerLoading, {})), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxs(DataSourceProgressContainerWrapper, { id: id, style: style, children: [sliceItems(dataSource?.features)?.map((feature, index) => (jsx(DataSourceInnerContainer, { type: type, index: index, feature: feature, config: config, elementConfig: elementConfig, maxValue: currentMaxValue, innerComponent: innerComponent }, index))), checkIsSliced(dataSource?.features) && (jsx(ContainerToggler, { toggled: showMore, onClick: onShowMore, children: showMore ? t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) : t("showAll", { ns: "dashboard", defaultValue: "Показать все" }) })), showTotal && (jsxs(Fragment$1, { children: [jsx(Divider, {}), jsxs(ProgressTotal, { children: [jsx(ProgressTotalTitle, { children: t("total", { ns: "dashboard", defaultValue: "Итого" }) }), jsxs(ProgressValue, { children: [totalValue, jsx(ProgressUnits, { children: totalUnits })] })] })] }))] })) : (jsx(ContainerLoading, {})), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type })] }));
 });
 
 const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index, renderElement }) => {
@@ -5761,7 +5758,7 @@ const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index,
         dataSources,
         feature
     });
-    const { children, options, style } = elementConfig || {};
+    const { id, children, options, style } = elementConfig || {};
     const { bgColor, innerTemplateStyle, maxValue: optionMaxValue, hideTitle, innerValue, colors, colorAttribute } = options;
     const valueElement = children?.find(({ id }) => id === "value");
     const unitsElement = children?.find(({ id }) => id === "units");
@@ -5788,7 +5785,7 @@ const ProgressContainer = memo(({ type, elementConfig, feature, maxValue, index,
     const color = useMemo(() => colorAttribute
         ? attributes?.find(({ name }) => name === colorAttribute)?.value
         : colors?.[index] || bgColor, [attributes, bgColor, colorAttribute, colors, index]);
-    return (jsx(Tooltip$1, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxs(ProgressContainerWrapper, { ref: ref, style: innerTemplateStyle || style, children: [renderIcon && jsx(ProgressIcon, { children: renderIcon }), jsxs(ProgressContent, { children: [!hideTitle && (jsxs(ProgressAlias, { children: [jsx("div", { children: renderAlias }), jsxs(ProgressValue, { children: [renderValue, unitsElement && jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsx(ProgressBarWrapper, { children: jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
+    return (jsx(Tooltip$1, { content: renderTooltip, placement: "top", arrow: true, children: ref => (jsxs(ProgressContainerWrapper, { ref: ref, id: id, style: innerTemplateStyle || style, children: [renderIcon && jsx(ProgressIcon, { children: renderIcon }), jsxs(ProgressContent, { children: [!hideTitle && (jsxs(ProgressAlias, { children: [jsx("div", { children: renderAlias }), jsxs(ProgressValue, { children: [renderValue, unitsElement && jsx(ProgressUnits, { children: renderElement({ id: "units" }) })] })] })), jsxs(ProgressBarContainer, { innerValue: innerValue, children: [jsx(ProgressBarWrapper, { children: jsx(ProgressBar, { "$width": width, "$color": color }) }), !!(hideTitle || innerValue) && jsx(ProgressInnerValue, { children: renderValue })] })] })] })) }));
 });
 
 const RANGE_MIN_VALUE = 0;
@@ -5982,7 +5979,7 @@ const FiltersContainer = memo(({ elementConfig, config, type, renderElement }) =
     }, [config, type]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const selectedItems = useMemo(() => getFilterSelectedItems(filterItems, filters, configFilters), [configFilters, filters, filterItems]);
-    return (jsxs(Fragment$1, { children: [jsx(Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsx(ContainerLoading, {}), !isLoading && isVisible && (jsx(FiltersContainerWrapper, { style: style, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0].options?.filterName })] }));
+    return (jsxs(Fragment$1, { children: [jsx(Flex, { mb: !isVisible && selectedItems.length ? "2rem" : 0, children: jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }) }), isLoading && jsx(ContainerLoading, {}), !isLoading && isVisible && (jsx(FiltersContainerWrapper, { id: id, style: style, "$padding": padding, "$bgColor": bgColor, "$fontSize": fontSize, "$fontColor": fontColor, children: filterItems?.map(renderFilter) })), jsx(HiddenTitleItems, { elementConfig: elementConfig, config: config, type: type, filter: filterItems[0].options?.filterName })] }));
 });
 
 const DefaultAttributesContainer = memo(({ type, renderElement }) => {
@@ -5991,7 +5988,7 @@ const DefaultAttributesContainer = memo(({ type, renderElement }) => {
 });
 
 const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement }) => {
-    const { options, children } = elementConfig || {};
+    const { id, style, options, children } = elementConfig || {};
     const { twoColumns, hideEmpty } = options || {};
     const aliasElement = children.find(({ id }) => id === "alias");
     const chartElement = children.find(({ id }) => id === "chart");
@@ -6006,7 +6003,7 @@ const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement })
     const hasItems = !!data[0]?.items?.length;
     if (!loading && !hasItems && hideEmpty)
         return null;
-    return (jsxs(FlexSpan, { flexDirection: "column", children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxs(Fragment$1, { children: [jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { id: id, style: style, isColumn: true, children: [aliasElement && jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { column: !twoColumns, alignItems: "center", children: hasItems ? (jsxs(Fragment$1, { children: [jsx(ContainerChart, { children: renderElement({ id: "chart" }) }), jsx(ContainerLegend, { justifyContent: legendElement?.options?.center ? "center" : "flex-start", children: renderElement({ id: "legend" }) })] })) : (jsx(Fragment$1, { children: "\u2014" })) })] }))] }));
 });
 
 const PagesContainer = memo(({ type = WidgetType.Dashboard, noBorders }) => {
@@ -6042,10 +6039,6 @@ const PagesContainer = memo(({ type = WidgetType.Dashboard, noBorders }) => {
     return (jsx(Container, { id: getRootElementId(type), style: { width }, isMain: true, isColumn: isColumn, noBorders: noBorders, children: jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) }));
 });
 
-const TwoColumnsInnerContainer = memo(({ renderElement }) => {
-    return (jsxs(Fragment$1, { children: [jsxs(TwoColumnContainerWrapper, { children: [jsxs(Container, { children: [jsx(ContainerAlias, { children: renderElement({ id: "firstAlias" }) }), jsx(ContainerValue, { big: true, children: renderElement({ id: "firstValue" }) })] }), jsxs(Container, { children: [jsx(ContainerAlias, { children: renderElement({ id: "secondAlias" }) }), jsx(ContainerValue, { big: true, children: renderElement({ id: "secondValue" }) })] })] }), renderElement({ id: "thirdContainer" })] }));
-});
-
 const ImageContainerBg$1 = styled.div `
   position: absolute;
   top: 0;
@@ -6107,8 +6100,8 @@ const ImageContainerWrapper = styled(Flex) `
 `;
 
 const ImageContainer = memo(({ elementConfig, renderElement }) => {
-    const { style } = elementConfig || {};
-    return (jsxs(ImageContainerWrapper, { style: style, children: [jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsx(ImageContainerBg$1, { children: renderElement({ id: "image" }) })] }));
+    const { id, style } = elementConfig || {};
+    return (jsxs(ImageContainerWrapper, { id: id, style: style, children: [jsx(ImageContainerTitle, { children: renderElement({ id: "alias" }) }), jsx(ImageContainerText, { children: renderElement({ id: "text" }) }), renderElement({ id: "button" }), jsx(ImageContainerBg$1, { children: renderElement({ id: "image" }) })] }));
 });
 
 const IconContainerWrapper = styled(Flex) `
@@ -6160,7 +6153,8 @@ const IconContainerText = styled.div `
 `;
 
 const IconContainer = memo(({ elementConfig, renderElement }) => {
-    return (jsxs(IconContainerWrapper, { style: elementConfig?.style, children: [jsxs(IconContainerHeaderWrapper, { children: [jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
+    const { id, style } = elementConfig || {};
+    return (jsxs(IconContainerWrapper, { id: id, style: style, children: [jsxs(IconContainerHeaderWrapper, { children: [jsxs(IconContainerHeader, { children: [renderElement({ id: "icon" }), jsx(IconContainerTitle, { children: renderElement({ id: "alias" }) })] }), renderElement({ id: "link" })] }), jsx(IconContainerText, { children: renderElement({ id: "text" }) })] }));
 });
 
 const DataSourceContainer = memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
@@ -6175,7 +6169,7 @@ const DataSourceContainer = memo(({ config, elementConfig, type, innerComponent,
         return jsx(DataSourceError, { name: elementConfig.templateName });
     }
     const isLoading = !dataSource?.features;
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsx(Container, { isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsx(ContainerLoading, {}))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsx(Container, { id: id, isColumn: column, style: { height: isLoading ? "3rem" : "auto", ...style }, children: dataSource.features?.map((feature, index) => (jsx(DataSourceInnerContainer, { index: index, type: type, config: config, feature: feature, elementConfig: elementConfig, innerComponent: innerComponent }, index))) })) : (jsx(ContainerLoading, {}))] }));
 });
 
 const SvgContainerColorMixin = css `
@@ -6216,10 +6210,6 @@ const ContainerIconTitle = styled(Flex) `
     flex-grow: 0;
     margin-right: 0.5rem;
   }
-
-  > * {
-    width: auto;
-  }
   
   svg,
   img,
@@ -6289,7 +6279,7 @@ const TitleContainer = memo(({ containerId, templateName, layerNames, fontColor,
     const { expandContainer, expandedContainers, setDashboardLayer } = useWidgetContext(type);
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = useTheme();
-    const { style, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { simple, downloadById } = options || {};
     const isLayers = templateName === ContainerTemplate.Layers;
     const { onExport } = useExportPdf(downloadById);
@@ -6307,7 +6297,7 @@ const TitleContainer = memo(({ containerId, templateName, layerNames, fontColor,
     const renderVisibility = useMemo(() => isLayers && (jsx(FlexSpan, { mr: "-1rem", children: jsx(IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = useMemo(() => !!containerId &&
         expandable && (jsx("div", { children: jsx(LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsx(Container, { isTitle: isVisible, style: style, children: jsxs(ContainerTitle, { simple: simple, children: [jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsx(IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsx(Container, { id: id, style: style, isTitle: isVisible, children: jsxs(ContainerTitle, { simple: simple, children: [jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsx(IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
 const ContainerDivider = styled(Divider) `
@@ -6316,7 +6306,8 @@ const ContainerDivider = styled(Divider) `
 `;
 
 const DividerContainer = memo(({ elementConfig, config }) => {
-    return (jsx(Container, { style: elementConfig?.style, children: jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
+    const { id, style } = elementConfig || {};
+    return (jsx(Container, { id: id, style: style, children: jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
 });
 
 const SlideshowContainer = memo(({ config, elementConfig, type }) => {
@@ -6326,7 +6317,7 @@ const SlideshowContainer = memo(({ config, elementConfig, type }) => {
         elementConfig,
         dataSources,
     });
-    const { id, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const render = useMemo(() => getRenderElement({
@@ -6351,7 +6342,7 @@ const SlideshowContainer = memo(({ config, elementConfig, type }) => {
         pageIndex,
         type,
     ]);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxs(Container, { style: elementConfig?.style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsx(ContainerValue, { children: render({
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: render }), isVisible && (jsxs(Container, { style: style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsx(ContainerValue, { children: render({
                             id: "slideshow",
                             wrap: false,
                         }) })] }))] }));
@@ -6362,7 +6353,7 @@ const CameraContainer = memo(({ elementConfig, type, renderElement }) => {
     const { id, options, style } = elementConfig || {};
     const { expandable, expanded } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { style: style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { id: id, style: style, children: [jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 const TabAnchor = styled.div `
@@ -6446,7 +6437,7 @@ const SwiperContainer = styled.div `
 const TabsContainer = memo(({ elementConfig, type }) => {
     const { palette } = useTheme();
     const { selectedTabId, setSelectedTabId } = useWidgetContext(type);
-    const { options, style, children: tabs } = elementConfig || {};
+    const { id, options, style, children: tabs } = elementConfig || {};
     const { radius, column, bgColor, noBg, onlyIcon, shownItems, maxLength = 12 } = options || {};
     const renderIcon = useCallback((icon, active) => {
         if (!icon)
@@ -6464,7 +6455,7 @@ const TabsContainer = memo(({ elementConfig, type }) => {
             setSelectedTabId(tabs[0].id);
         }
     }, []);
-    return (jsx(SwiperContainer, { style: style, children: jsx(Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxs(SwiperSlide, { children: [jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsx(TabValue, { children: jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsx(TabAnchor, { id: id })] }, id))) }) }));
+    return (jsx(SwiperContainer, { id: id, style: style, children: jsx(Swiper, { spaceBetween: 0, slidesPerView: shownItems || 2, children: tabs.map(({ id, value, options: tabOptions }) => (jsxs(SwiperSlide, { children: [jsxs(TabContainer, { href: `#${id}`, active: selectedTabId === id, column: column, bgColor: bgColor, noBg: noBg, radius: radius, onlyIcon: onlyIcon, hasIcon: !!tabOptions?.icon, onClick: () => onClick(id), children: [renderIcon(tabOptions?.icon, selectedTabId === id), !onlyIcon && (jsx(TabValue, { children: jsx(TextTrim, { maxLength: maxLength, children: value }) }))] }), jsx(TabAnchor, { id: id })] }, id))) }) }));
 });
 
 const ContainerIconValue = styled(Flex) ``;
@@ -6570,7 +6561,7 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
         dataSources,
         feature
     });
-    const { options, style, children } = elementConfig || {};
+    const { id, options, style, children } = elementConfig || {};
     const { maxLength, center, fontColor, innerTemplateStyle, inlineUnits, big, bigIcon, hideEmpty, colorAttribute } = options || {};
     const iconElement = children?.find(({ id }) => id === "icon");
     const aliasElement = children?.find(({ id }) => id === "alias");
@@ -6594,12 +6585,12 @@ const RoundedBackgroundContainer = memo(({ type, elementConfig, feature, renderE
     const renderValue = useMemo(() => isNil(value) ? null : (jsxs(ContainerValue, { style: valueElement?.style, big: true, children: [value, !!unitsElement && (jsx(ContainerUnits, { style: unitsElement?.style, children: renderElement({ id: "units" }) }))] })), [valueElement?.style, value, unitsElement, renderElement]);
     if (isNil(value) && hideEmpty)
         return null;
-    return (jsxs(RoundedBackgroundContainerWrapper, { style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
+    return (jsxs(RoundedBackgroundContainerWrapper, { id: id, style: innerTemplateStyle || style, "$center": center, "$color": color, "$inlineUnits": inlineUnits, "$big": big, "$bigIcon": bigIcon, children: [jsxs(ContainerIconValue, { children: [renderIcon, big ? renderAlias : renderValue] }), big ? renderValue : renderAlias] }));
 });
 
 const AddFeatureContainer = memo(({ elementConfig }) => {
-    const { children, style } = elementConfig || {};
-    return (jsx(Container, { style: style, children: children
+    const { id, children, style } = elementConfig || {};
+    return (jsx(Container, { id: id, style: style, children: children
             .filter(({ type }) => type === "button")
             .map(({ options }, index) => (jsx(AddFeatureButton, { icon: options?.icon, title: options?.title, layerName: options?.layerName, geometryType: options?.geometryType }, index))) }));
 });
@@ -6633,15 +6624,15 @@ const LayersContainer = memo(({ type, elementConfig, renderElement }) => {
             return currentPage.layers;
         return currentPage.layers.filter(({ name }) => layerNames.includes(name));
     }, [currentPage?.layers, layerNames]);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(LayersContainerWrapper, { style: style, children: jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(LayersContainerWrapper, { id: id, style: style, children: jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const ExportPdfContainer = memo(({ type, elementConfig }) => {
     const { t } = useGlobalContext();
     const { loading, onExport } = useExportPdf(getRootElementId(type));
-    const { style, options } = elementConfig || {};
+    const { id, style, options } = elementConfig || {};
     const { icon, title } = options || {};
-    return (jsx(Container, { children: jsx(IconButton, { kind: icon || "download", primary: true, disabled: loading, style: style, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
+    return (jsx(Container, { id: id, style: style, children: jsx(IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
 });
 
 const containerComponents = {
@@ -6652,7 +6643,6 @@ const containerComponents = {
     [ContainerTemplate.RoundedBackground]: RoundedBackgroundContainer,
     [ContainerTemplate.OneColumn]: OneColumnContainer,
     [ContainerTemplate.TwoColumn]: TwoColumnContainer,
-    [ContainerTemplate.TwoColumnsInner]: TwoColumnsInnerContainer,
     [ContainerTemplate.DataSource]: DataSourceContainer,
     [ContainerTemplate.DataSourceProgress]: DataSourceProgressContainer,
     [ContainerTemplate.Progress]: ProgressContainer,
@@ -10092,7 +10082,7 @@ const ContainerChildren = memo(({ items, isColumn, isMain, renderElement }) => {
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(InnerContainerWrapper$1, { id: item.id, children: render }, index));
+            return isMain ? (jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(Fragment, { children: render }, index));
         }) }));
 });
 
@@ -10581,5 +10571,5 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-export { AddFeatureButton, AddFeatureContainer, AttributeGalleryContainer, AttributeLabel, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, InnerContainerWrapper$1 as InnerContainerWrapper, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, TwoColumnsInnerContainer, WidgetType, addDataSource, addDataSources, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useGetConfigLayer, useGlobalContext, useHeaderRender, useLayerParams, useMapContext, useMapDraw, useProjectDashboardInit, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
+export { AddFeatureButton, AddFeatureContainer, AttributeGalleryContainer, AttributeLabel, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, WidgetType, addDataSource, addDataSources, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useGetConfigLayer, useGlobalContext, useHeaderRender, useLayerParams, useMapContext, useMapDraw, useProjectDashboardInit, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map