@evergis/react 4.0.92 → 4.0.94

package/dist/react.esm.js

@@ -4,8 +4,7 @@ import { createContext, memo, useRef, useState, useCallback, useEffect, useConte
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
 import { AttributeType, generateId, STORAGE_TOKEN_KEY, parseJwt, STORAGE_REFRESH_TOKEN_KEY, RemoteTaskStatus, LayerServiceType, OgcGeometryType, StringSubType, AttributeConfigurationType } from '@evergis/api';
-import Gradient from 'javascript-color-gradient';
-import { Color as Color$1 } from '@evergis/color';
+import { Color as Color$1, ColorScale } from '@evergis/color';
 import { isValid, format, parseJSON, parseISO, toDate } from 'date-fns';
 import { isNil, isEmpty, isEqual, uniqueId, unescape } from 'lodash';
 import { ru, enUS } from 'date-fns/locale';
@@ -3562,13 +3561,26 @@ const GRADIENT_COLORS = [
     "#A1E062",
     "#51D8A5",
 ];
-const getGradientColors = (colorsCount) => {
-    return new Gradient()
-        .setColorGradient(...GRADIENT_COLORS)
-        .setMidpoint(colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount + 10)
-        .getColors()
-        .slice(0, colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount);
+const HEX_RRGGBB_LENGTH = 7;
+/**
+ * Растягивает палитру на нужное количество цветов: опорные цвета равномерно
+ * раскладываются по шкале, недостающие интерполируются между ними.
+ * @param colors - опорные цвета палитры в hex
+ * @param count - требуемое количество цветов
+ * @returns массив ровно из count цветов
+ */
+const stretchPalette = (colors, count) => {
+    if (!colors?.length || count <= 0)
+        return [];
+    if (colors.length === 1)
+        return Array.from({ length: count }, () => colors[0]);
+    const scale = new ColorScale(colors.map((color, index) => [index / (colors.length - 1), color]));
+    return Array.from({ length: count }, (_, index) => {
+        const color = scale.getColor(count === 1 ? 0 : index / (count - 1));
+        return color ? new Color$1(color).toString("hex").slice(0, HEX_RRGGBB_LENGTH) : colors[colors.length - 1];
+    });
 };
+const getGradientColors = (colorsCount) => stretchPalette(GRADIENT_COLORS, colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount);
 /**
  * Converts HSL hue value to RGB
  * @param p - lower bound
@@ -6405,11 +6417,11 @@ const getChartMarkers = (items, markers, dataSources) => {
 
 const ContainersGroupContainer = memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
-    const { id, children, options } = elementConfig || {};
-    const { column, expandable, expanded } = options || {};
+    const { id, style, children, options } = elementConfig || {};
+    const { column, expandable, expanded, width, height } = 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, { id: id, isColumn: isColumn, children: jsx(ContainerChildren, { type: type, 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, isColumn: isColumn, style: getWrapperSizeStyle(style, width, height), children: jsx(ContainerChildren, { type: type, items: children, elementConfig: elementConfig, isColumn: isColumn, isMain: id?.startsWith(CONFIG_PAGE_ID), renderElement: renderElement }) }))] }));
 });
 
 const ChartLegendContainer = styled(Flex) `
@@ -6590,7 +6602,8 @@ const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, })
 };
 
 const OneColumnContainer = memo(({ type, elementConfig, renderElement }) => {
-    const renderBody = useCallback(({ id, value, style, hasUnits, render }) => (jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxs(ContainerValue, { children: [value, hasUnits && (jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), []);
+    const { width, height } = elementConfig?.options || {};
+    const renderBody = useCallback(({ id, value, style, hasUnits, render }) => (jsxs(Container, { id: id, isColumn: true, style: getWrapperSizeStyle({ ...BASE_CONTAINER_STYLE, ...style }, width, height), children: [jsxs(ContainerAlias, { hasBottomMargin: true, children: [render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxs(ContainerValue, { children: [value, hasUnits && (jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -6601,7 +6614,8 @@ const OneColumnContainer = memo(({ type, elementConfig, renderElement }) => {
 });
 
 const TwoColumnContainer = memo(({ elementConfig, type, renderElement }) => {
-    const renderBody = useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxs(ContainerAlias, { children: [hasIcon && (jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), []);
+    const { width, height } = elementConfig?.options || {};
+    const renderBody = useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxs(TwoColumnContainerWrapper, { id: id, style: getWrapperSizeStyle(style, width, height), children: [jsxs(ContainerAlias, { children: [hasIcon && (jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), [width, height]);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -6787,7 +6801,7 @@ const DataSourceProgressContainer = memo(({ config, elementConfig, type, innerCo
     });
     const { attributes } = layerInfo?.configuration?.attributesConfiguration || {};
     const { id, options, children, style } = elementConfig || {};
-    const { maxValue, showTotal, relatedDataSource, expandable, expanded } = options || {};
+    const { maxValue, showTotal, relatedDataSource, expandable, expanded, width, height } = options || {};
     const valueElement = children?.find(item => item.id === "value");
     const unitsElement = children?.find(item => item.id === "units");
     const { sliceItems, checkIsSliced, showMore, onShowMore } = useShownOtherItems(options);
@@ -6820,7 +6834,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, { 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", {
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsxs(DataSourceProgressContainerWrapper, { id: id, style: getWrapperSizeStyle(style, width, height), 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 })] }));
@@ -7047,7 +7061,7 @@ const FiltersContainer = memo(({ elementConfig, config, type, renderElement }) =
     const { currentPage } = useWidgetPage(type);
     const { filters: configFilters } = currentPage;
     const { id, style, options } = elementConfig || {};
-    const { padding, bgColor, fontColor, fontSize, expandable, expanded } = options || {};
+    const { padding, bgColor, fontColor, fontSize, expandable, expanded, width, height } = options || {};
     const isLoading = useMemo(() => checkIsLoading(dataSources, config, configFilters), [configFilters, config, dataSources]);
     const filterItems = useMemo(() => elementConfig?.children?.filter(child => child.options?.filterName), [elementConfig?.children]);
     const renderFilter = useCallback((filter, index) => {
@@ -7056,7 +7070,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, { 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 })] }));
+    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: getWrapperSizeStyle(style, width, height), "$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 }) => {
@@ -7237,7 +7251,7 @@ const IconContainer = memo(({ elementConfig, renderElement }) => {
 const DataSourceContainer = memo(({ config, elementConfig, type, innerComponent, renderElement }) => {
     const { dataSources, expandedContainers } = useWidgetContext(type);
     const { id, style, options } = elementConfig || {};
-    const { column = true, relatedDataSource, expandable, expanded } = options || {};
+    const { column = true, relatedDataSource, expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const dataSource = useMemo(() => dataSources?.find(({ name }) => name === relatedDataSource), [dataSources, relatedDataSource]);
     if (!relatedDataSource)
@@ -7246,7 +7260,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, { 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, {}))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), !isVisible ? null : dataSource ? (jsx(Container, { id: id, isColumn: column, style: getWrapperSizeStyle({ height: isLoading ? "3rem" : "auto", ...style }, width, height), 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 `
@@ -7385,7 +7399,7 @@ const SlideshowContainer = memo(({ config, elementConfig, type }) => {
         dataSources,
     });
     const { id, style, options } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const render = useMemo(() => getRenderElement({
         config,
@@ -7409,7 +7423,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: 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: getWrapperSizeStyle(style, width, height), children: [jsx(ContainerAlias, { hasBottomMargin: true, children: render({ id: "alias" }) }), jsx(ContainerValue, { children: render({
                             id: "slideshow",
                             wrap: false,
                         }) })] }))] }));
@@ -7418,9 +7432,9 @@ const SlideshowContainer = memo(({ config, elementConfig, type }) => {
 const CameraContainer = memo(({ elementConfig, type, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, options, style } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    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 }) })] }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxs(Container, { id: id, style: getWrapperSizeStyle(style, width, height), children: [jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsx(ContainerValue, { children: renderElement({ id: "value", wrap: false }) })] }))] }));
 });
 
 const TabAnchor = styled.div `
@@ -7684,7 +7698,7 @@ const LayersContainer = memo(({ type, elementConfig, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
     const { id, options, style } = elementConfig || {};
-    const { layerNames, expandable, expanded } = options || {};
+    const { layerNames, expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
     const layers = useMemo(() => {
         if (!currentPage?.layers)
@@ -7693,7 +7707,7 @@ 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, { id: id, 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: getWrapperSizeStyle(style, width, height), children: jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
 const ExportPdfContainer = memo(({ type, elementConfig }) => {
@@ -7707,9 +7721,9 @@ const ExportPdfContainer = memo(({ type, elementConfig }) => {
 const UploadContainer = memo(({ type, elementConfig, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { id, options } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && renderElement({ id: "uploader", wrap: false })] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Flex, { column: true, style: getWrapperSizeStyle({ width: "100%" }, width, height), children: renderElement({ id: "uploader", wrap: false }) }))] }));
 });
 
 const StatusBadge = styled(Chip) `
@@ -7924,7 +7938,7 @@ const TaskContainer = memo(({ type, elementConfig, renderElement }) => {
     const { currentPage } = useWidgetPage(type);
     const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, log, lastMessage, result, } = usePythonTask();
     const { options } = elementConfig || {};
-    const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, } = options || {};
+    const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, width, height, } = options || {};
     const { setNotificationDismissed } = useTaskNotifications({
         enabled: !!useNotifications,
         suppressed: isLogDialogOpen,
@@ -7964,7 +7978,7 @@ const TaskContainer = memo(({ type, elementConfig, renderElement }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [attributes, currentPage.filters, dataSources, ewktGeometry, layerInfo, projectDataSources, relatedResources, runTask, selectedFilters, stopTask, taskId]);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxs(Flex, { justifyContent: center ? "center" : "flex-start", children: [jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxs(Fragment$1, { children: [jsx(IconButton, { kind: "info", onClick: openLog }), jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxs(Flex, { justifyContent: center ? "center" : "flex-start", style: getWrapperSizeStyle(undefined, width, height), children: [jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxs(Fragment$1, { children: [jsx(IconButton, { kind: "info", onClick: openLog }), jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
 });
 
 const EditContainer = ({ type, elementConfig, renderElement }) => {
@@ -8705,7 +8719,7 @@ const AttachmentContainer = memo(({ type, elementConfig, renderElement }) => {
     const { expandedContainers } = useWidgetContext(type);
     const { items, visibleItems, viewMode, setViewMode, showMore, setShowMore, hasMore, hiddenCount } = useAttachmentContainer({ type, elementConfig });
     const { id, style, options } = elementConfig || {};
-    const { expandable, expanded } = options || {};
+    const { expandable, expanded, width, height } = options || {};
     const [previewIndex, setPreviewIndex] = useState(null);
     const previewImages = useAttachmentPreviewImages({ items, active: previewIndex !== null });
     const handlePreview = useCallback((link) => {
@@ -8716,7 +8730,7 @@ const AttachmentContainer = memo(({ type, elementConfig, renderElement }) => {
     const handleClosePreview = useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = useCallback(() => setShowMore(true), [setShowMore]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: jsxs(Flex, { column: true, children: [jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsx(Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsx(Container, { id: id, style: getWrapperSizeStyle({ ...BASE_CONTAINER_STYLE, ...style }, width, height), children: jsxs(Flex, { column: true, children: [jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsx(Preview, { images: previewImages, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
                                 ns: "common",
                                 defaultValue: "Ресурс недоступен",
                             }) }, previewIndex))] }) }))] }));
@@ -10266,7 +10280,7 @@ const getDashboardHeader = (templateName) => {
 };
 
 const getDataFromAttributes = (t, config, attributes) => {
-    const colors = config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS;
+    const colors = stretchPalette(config?.options?.colors || FEATURE_CARD_DEFAULT_COLORS, config?.children?.length || 0);
     const data = config?.children?.map(({ attributeName }, index) => {
         const attribute = attributes?.find(item => item.attributeName === attributeName);
         return {
@@ -10318,12 +10332,8 @@ const getDataFromRelatedFeatures = ({ t, config, filters, relatedConfig, dataSou
     if (isOtherSliced) {
         data = data.slice(0, config?.options?.otherItems);
     }
-    const gradientColors = colors?.length === 1 ? [colors[0], colors[0]] : colors;
-    const gradientArray = relatedConfig.chartAxis && colors?.length < data.length
-        ? new Gradient()
-            .setColorGradient(...gradientColors)
-            .setMidpoint(data.length)
-            .getColors()
+    const gradientArray = relatedConfig.chartAxis
+        ? stretchPalette(colors, data.length)
         : colors;
     const filter = getConfigFilter(relatedConfig?.filterName, filters);
     const result = data.reduce((acc, feature, index) => {
@@ -12045,6 +12055,18 @@ const getThemeByName = (themeName) => {
     return themeName === ThemeName.Dark ? darkTheme : defaultTheme;
 };
 
+/**
+ * Мержит `width`/`height` из options контейнера в inline-style его корневой обёртки.
+ *
+ * Значения размера из options имеют приоритет над одноимёнными полями `style`.
+ * Поле добавляется только когда задано — иначе `style` остаётся нетронутым.
+ */
+const getWrapperSizeStyle = (style, width, height) => ({
+    ...style,
+    ...(width != null && { width }),
+    ...(height != null && { height }),
+});
+
 const getDisplayTemplateNameFromAttribute = (attribute) => {
     if (attribute?.subType === StringSubType.Attachments) {
         return ContainerTemplate.Attachment;
@@ -14415,5 +14437,5 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-export { ALIGNMENTS, AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, CHART_TYPES, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, 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_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_FILTER_PADDING, 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, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardBackgroundHeader, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFontColorMixin, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, POLL_SUBTASK_INTERVAL_MS, POLL_SUBTASK_TIMEOUT_MS, PROVIDER_PREFIX, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, ProviderPrefix, RoundedBackgroundContainer, SAVE_HOOK_RESULT_DURATION, SERVER_NOTIFICATION_EVENT, STACK_BAR_TOTAL_HEIGHT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, VIEW_MODES, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyTreeFilterToCondition, applyVarsToCondition, asAttributeName, asChartId, asContainerId, asDataSourceName, asFilterName, asLayerName, asModalId, asResourceId, asTabId, checkEqualOrIncludes, checkIsLoading, createConfigLayer, createConfigPage, createNewPageId, createSaveNotificationId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, geometryToEwkt, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getDisplayTemplateNameFromAttribute, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTemplateNameFromAttribute, getThemeByName, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isHookActive, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isTreeFilterValue, isVisibleContainer, metersPerPixel, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, toRenderableValue, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, updateDataSource, useAfterSave, useAppHeight, useAttachmentItems, useAttachmentPreviewImages, useAutoCompleteControl, useBeforeSave, useChartChange, useChartData, useContainerAttributes, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useEditGroupAttributes, useExpandableContainers, useExportPdf, useFeatureSaveHooks, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRemoteTask, useRenderElement, useSavePrototypeBuilder, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
+export { ALIGNMENTS, AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, CHART_TYPES, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, Container, 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_DROPDOWN_WIDTH, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_FILTER_PADDING, 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, ElementControl, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardBackgroundHeader, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFontColorMixin, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerIconContainer, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogTerminal, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, POLL_SUBTASK_INTERVAL_MS, POLL_SUBTASK_TIMEOUT_MS, PROVIDER_PREFIX, PageNavigator, PageTitle, PageTitleContainer, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, ProviderPrefix, RoundedBackgroundContainer, SAVE_HOOK_RESULT_DURATION, SERVER_NOTIFICATION_EVENT, STACK_BAR_TOTAL_HEIGHT, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TopContainer, TopContainerButtons, TwoColumnContainer, UploadContainer, VIEW_MODES, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyTreeFilterToCondition, applyVarsToCondition, asAttributeName, asChartId, asContainerId, asDataSourceName, asFilterName, asLayerName, asModalId, asResourceId, asTabId, checkEqualOrIncludes, checkIsLoading, createConfigLayer, createConfigPage, createNewPageId, createSaveNotificationId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, geometryToEwkt, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getDisplayTemplateNameFromAttribute, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTemplateNameFromAttribute, getThemeByName, getTotalFromAttributes, getTotalFromRelatedFeatures, getWrapperSizeStyle, hexToRgba, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isHookActive, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isTreeFilterValue, isVisibleContainer, metersPerPixel, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, stretchPalette, timeOptions, toRenderableValue, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, updateDataSource, useAfterSave, useAppHeight, useAttachmentItems, useAttachmentPreviewImages, useAutoCompleteControl, useBeforeSave, useChartChange, useChartData, useContainerAttributes, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useEditGroupAttributes, useExpandableContainers, useExportPdf, useFeatureSaveHooks, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRemoteTask, useRenderElement, useSavePrototypeBuilder, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map