@evergis/react 4.0.54 → 4.0.56

package/dist/react.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, Dialog, DialogTitle, ThemeProvider, darkTheme, DialogContent, CircularProgress, Switch, AutoComplete, Input, Slider, Dropdown, Checkbox, DatePicker, getLocale, IconToggleButton, LinearProgress, ActionsGroup, DialogActions, RaisedButton, Preview, H2, defaultTheme, Blank, Popover, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
+import { IconButton, Flex, transition, Chip, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, Divider, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, Dialog, DialogTitle, ThemeProvider, darkTheme, DialogContent, CircularProgress, Switch, AutoComplete, Input, Slider, Dropdown, Checkbox, DatePicker, getLocale, IconToggleButton, LinearProgress, ActionsGroup, DialogActions, RaisedButton, Preview, H2, Blank, Popover, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, RangeNumberInput, defaultTheme, dateFormat } from '@evergis/uilib-gl';
 import { useState, useMemo, useCallback, createContext, memo, useRef, useEffect, useContext, Fragment } from 'react';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
@@ -3404,7 +3404,6 @@ var HeaderTemplate;
     HeaderTemplate["Default"] = "Default";
     HeaderTemplate["Slideshow"] = "Slideshow";
     HeaderTemplate["Gradient"] = "Gradient";
-    HeaderTemplate["Icon"] = "Icon";
 })(HeaderTemplate || (HeaderTemplate = {}));
 var WidgetType;
 (function (WidgetType) {
@@ -6032,8 +6031,7 @@ const SvgContainer$1 = styled.div `
     }
   }
 `;
-const TwoColumnContainerWrapper = styled(Flex) `
-  width: 100%;
+const TwoColumnContainerWrapper = styled(Container) `
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
@@ -6107,7 +6105,6 @@ const useRenderContainer = ({ elementConfig, type, renderElement, renderBody, })
             if (OverrideContainer) {
                 const itemConfig = {
                     ...elementConfig,
-                    style: { ...BASE_CONTAINER_STYLE, ...elementConfig.style },
                     children: (elementConfig?.children ?? []).map(child => ({
                         ...child,
                         attributeName: attribute,
@@ -6136,7 +6133,7 @@ const OneColumnContainer = memo(({ type, elementConfig, renderElement }) => {
 });
 
 const TwoColumnContainer = memo(({ elementConfig, type, renderElement }) => {
-    const renderBody = useCallback(({ id, value, style, hasIcon, hasUnits, render }, attribute) => (jsxs(TwoColumnContainerWrapper, { id: id, style: { ...BASE_CONTAINER_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" }) }))] })] }, attribute)), []);
+    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 { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -8040,10 +8037,31 @@ const useGlobalContext = () => {
     }), [language, translate, api, ewktGeometry, themeName]);
 };
 
+const ImagePreviewError = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.palette.elementDark};
+  border-radius: ${({ theme: { borderRadius: themeBorder }, borderRadius }) => borderRadius || themeBorder.smallest};
+
+  ${Icon} {
+    width: 37.5%;
+    height: 37.5%;
+  }
+
+  ${Icon}:after {
+    font-size: 1.5rem;
+    color: ${({ theme }) => theme.palette.textSecondary};
+  }
+`;
 const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
     const { api } = useGlobalContext();
     const [imageSrc, setImageSrc] = useState();
+    const [hasError, setHasError] = useState(false);
     useEffect(() => {
+        setHasError(false);
         if (isExternal) {
             setImageSrc(link);
             return;
@@ -8061,14 +8079,18 @@ const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
             objectUrl = URL.createObjectURL(blob);
             setImageSrc(objectUrl);
         })
-            .catch(() => { });
+            .catch(() => {
+            if (cancelled)
+                return;
+            setHasError(true);
+        });
         return () => {
             cancelled = true;
             if (objectUrl)
                 URL.revokeObjectURL(objectUrl);
         };
     }, [api, link, isExternal]);
-    return (jsxs(ImagePreviewContainer, { size: size, children: [!imageSrc && (jsx(ImagePreviewLoaderContainer, { children: jsx(LinearProgress, {}) })), imageSrc && (jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "" }))] }));
+    return (jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsx(ImagePreviewError, { borderRadius: borderRadius, children: jsx(Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsx(ImagePreviewLoaderContainer, { children: jsx(LinearProgress, {}) })), !hasError && imageSrc && (jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
 };
 
 const getFileType = (mimeType = "", name = "") => {
@@ -8221,6 +8243,60 @@ const useAttachmentContainer = ({ type, elementConfig, valueOverride, }) => {
     };
 };
 
+const usePreviewImages = ({ items, active }) => {
+    const { api } = useGlobalContext();
+    const [blobUrls, setBlobUrls] = useState({});
+    const [failedLinks, setFailedLinks] = useState({});
+    const inFlightRef = useRef(new Set());
+    const blobUrlsRef = useRef(blobUrls);
+    blobUrlsRef.current = blobUrls;
+    useEffect(() => {
+        if (!active || !api?.catalog?.getFile)
+            return;
+        items.forEach(item => {
+            const fileType = getFileType(item.mimeType, item.name);
+            const isImage = IMAGE_FILE_TYPES.includes(fileType);
+            if (!isImage || item.isExternal)
+                return;
+            if (blobUrlsRef.current[item.link] || inFlightRef.current.has(item.link))
+                return;
+            inFlightRef.current.add(item.link);
+            api.catalog
+                .getFile(item.link)
+                .then(blob => {
+                const objectUrl = URL.createObjectURL(blob);
+                setBlobUrls(prev => ({ ...prev, [item.link]: objectUrl }));
+            })
+                .catch(() => {
+                setFailedLinks(prev => (prev[item.link] ? prev : { ...prev, [item.link]: true }));
+            })
+                .finally(() => {
+                inFlightRef.current.delete(item.link);
+            });
+        });
+    }, [active, api, items]);
+    useEffect(() => () => {
+        Object.values(blobUrlsRef.current).forEach(URL.revokeObjectURL);
+    }, []);
+    return useMemo(() => items.map(item => {
+        const fileType = getFileType(item.mimeType, item.name);
+        const isImage = IMAGE_FILE_TYPES.includes(fileType);
+        const fileName = item.name;
+        if (!isImage)
+            return { src: getFileTypeIcon(fileType), fileName };
+        if (item.isExternal)
+            return { src: item.link, fileName };
+        const hasError = !!failedLinks[item.link];
+        const blobUrl = blobUrls[item.link];
+        return {
+            src: blobUrl ?? "",
+            fileName,
+            hasError,
+            isLoading: !hasError && !blobUrl,
+        };
+    }), [items, blobUrls, failedLinks]);
+};
+
 const EXTENSION_TO_MIME = {
     apng: "image/apng",
     avif: "image/avif",
@@ -8267,20 +8343,6 @@ const getFileNameFromUrl = (url) => {
     }
 };
 
-const getResourceUrl = (url) => {
-    return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
-};
-
-const buildPreviewImage$1 = (item) => {
-    const fileType = getFileType(item.mimeType, item.name);
-    const isImage = IMAGE_FILE_TYPES.includes(fileType);
-    const src = isImage
-        ? item.isExternal
-            ? item.link
-            : getResourceUrl(item.link)
-        : getFileTypeIcon(fileType);
-    return { src, fileName: item.name };
-};
 const EditAttachmentContainer = memo(({ type, elementConfig, renderElement }) => {
     const { api } = useGlobalContext();
     const { selectAttachmentsFromCatalog } = useWidgetContext(type);
@@ -8291,7 +8353,7 @@ const EditAttachmentContainer = memo(({ type, elementConfig, renderElement }) =>
     const [previewIndex, setPreviewIndex] = useState(null);
     const [uploading, setUploading] = useState(false);
     const [isLinkDialogOpen, , setLinkDialogOpen] = useToggle(false);
-    const previewImages = useMemo(() => items.map(buildPreviewImage$1), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8300,7 +8362,7 @@ const EditAttachmentContainer = memo(({ type, elementConfig, renderElement }) =>
             ...previewImages.filter((_, idx) => idx !== previewIndex),
         ];
     }, [previewImages, previewIndex]);
-    const persist = useCallback((next) => onChange(JSON.stringify(next)), [onChange]);
+    const persist = useCallback((next) => onChange(next), [onChange]);
     const handlePreview = useCallback((link) => {
         const idx = items.findIndex(item => item.link === link);
         if (idx >= 0)
@@ -8360,23 +8422,14 @@ const EditAttachmentContainer = memo(({ type, elementConfig, renderElement }) =>
     return (jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsx(Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview }))] }));
 });
 
-const buildPreviewImage = (item) => {
-    const fileType = getFileType(item.mimeType, item.name);
-    const isImage = IMAGE_FILE_TYPES.includes(fileType);
-    const src = isImage
-        ? item.isExternal
-            ? item.link
-            : getResourceUrl(item.link)
-        : getFileTypeIcon(fileType);
-    return { src, fileName: item.name };
-};
 const AttachmentContainer = memo(({ type, elementConfig, renderElement }) => {
+    const { t } = useGlobalContext();
     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 [previewIndex, setPreviewIndex] = useState(null);
-    const previewImages = useMemo(() => items.map(buildPreviewImage), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8393,7 +8446,10 @@ 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 && (jsxs(Container, { id: id, isColumn: true, style: style, 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: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview }))] }))] }));
+    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: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+                                ns: "common",
+                                defaultValue: "Ресурс недоступен",
+                            }) }))] }) }))] }));
 });
 
 const ContainerDivider = styled(Divider) `
@@ -8614,17 +8670,17 @@ const HeaderFrontView = styled(Flex) `
   width: 100%;
   font: ${({ theme: { fonts } }) => fonts.subtitle};
 `;
-const HeaderContainer = styled(FlexSpan) `
+const HeaderContainer = styled(Flex) `
   display: flex;
   flex-grow: 1;
   flex-wrap: nowrap;
-  width: calc(100% - 48px);
+  width: calc(100% - 3rem);
 `;
 const FeatureTitleContainer = styled.div `
   display: -webkit-box;
   max-width: 100%;
   width: 100%;
-  margin: 0.5rem 0;
+  margin-top: 0.5rem;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -8680,6 +8736,10 @@ const Header = styled(Flex) `
   ${({ $isRow }) => $isRow && RowHeaderMixin};
 `;
 const DefaultHeaderWrapper = styled.div `
+  padding: 1rem 0 0 1rem;
+  margin: -1rem 0 0 -1rem;
+  background: url(${img$4}) 50% -2rem no-repeat;
+  
   ${Header} {
     padding: 0 1.5rem 1.5rem 0;
   }
@@ -8706,7 +8766,7 @@ const HeaderTitle = ({ noFeature }) => {
                 stringFormat: layerDefinitionAttribute.stringFormat,
             })) ||
             feature?.id);
-    }, [attributes, feature, configuration]);
+    }, [configuration, attributes, t, feature?.id]);
     return (jsxs(HeaderTitleContainer, { children: [noFeature ? (jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard", defaultValue: "Объектов не найдено" }) })) : (jsx(FeatureTitleContainer, { clickable: true, children: jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsx(FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
 };
 
@@ -8765,81 +8825,14 @@ const LayerIcon = ({ layerInfo, error }) => {
 };
 
 const FeatureCardDefaultHeader = ({ noFeature }) => {
-    const { layerInfo } = useWidgetContext(WidgetType.FeatureCard);
-    return (jsx(DefaultHeaderWrapper, { children: jsx(Header, { "$isRow": true, children: jsxs(HeaderFrontView, { isDefault: true, children: [jsxs(HeaderContainer, { children: [!!layerInfo?.name && jsx(LayerIcon, { layerInfo: layerInfo }), jsx(HeaderTitle, { noFeature: noFeature })] }), jsx(FeatureCardButtons, {})] }) }) }));
-};
-
-const HeaderFontColorMixin$1 = css `
-  ${HeaderTitleContainer}, ${LayerDescription} {
-    color: ${({ $fontColor }) => $fontColor};
-  }
-`;
-const HeaderWrapperMixin$1 = css `
-  ${Header} {
-    min-height: 5.25rem;
-  }
-
-  ${HeaderContainer} {
-    max-width: 100%;
-    width: 100%;
-  }
-
-  ${FeatureControls} {
-    max-width: calc(100% - 2rem);
-    width: calc(100% - 2rem);
-    margin-top: -0.5rem;
-    padding-top: 1rem;
-    border-radius: ${({ theme: { borderRadius } }) => borderRadius.medium};
-  }
-
-  ${({ $fontColor }) => !!$fontColor && HeaderFontColorMixin$1};
-`;
-const GradientHeaderWrapper = styled.div `
-  ${Header} {
-    background: ${({ $bgColor }) => $bgColor || "radial-gradient(129.21% 133.22% at 51.94% 0%, #e8fffe 9.48%, #5fcaff 100%)"};
-  }
-
-  ${HeaderContainer} {
-    align-items: center;
-  }
-
-  ${HeaderTitleContainer} {
-    margin-left: 0;
-    text-align: center;
-  }
-
-  ${FeatureTitleContainer} {
-    text-align: center;
-  }
-
-  ${LayerDescription} {
-    text-align: center;
-  }
-
-  ${HeaderWrapperMixin$1};
-`;
-
-const FeatureCardGradientHeader = ({ isRow }) => {
     const { layerInfo } = useWidgetContext(WidgetType.FeatureCard);
     const { config } = useWidgetConfig(WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { fontColor, bgColor } = options || {};
-    const renderElement = useHeaderRender(header);
-    return (jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, children: jsx(ThemeProvider, { theme: defaultTheme, children: jsx(Header, { "$isRow": isRow, children: jsxs(HeaderFrontView, { children: [jsxs(HeaderContainer, { children: [jsx(LayerIcon, { layerInfo: layerInfo }), jsx(FeatureCardTitle, { title: renderElement({
-                                        id: "title",
-                                        wrap: false,
-                                    }), description: renderElement({
-                                        id: "description",
-                                        wrap: false,
-                                    }) })] }), jsx(FeatureCardButtons, {})] }) }) }) }));
+    const { themeName } = options || {};
+    return (jsx(DefaultHeaderWrapper, { children: jsx(ThemeProvider, { theme: getThemeByName(themeName), children: jsx(Header, { "$isRow": true, children: jsxs(HeaderFrontView, { isDefault: true, children: [jsxs(HeaderContainer, { children: [!!layerInfo?.name && jsx(LayerIcon, { layerInfo: layerInfo }), jsx(HeaderTitle, { noFeature: noFeature })] }), jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
-const LayerIconClickable = styled.div `
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
 const HeaderFontColorMixin = css `
   ${HeaderTitleContainer}, ${HeaderTitleContainer} *, ${LayerDescription} {
     color: ${({ $fontColor }) => $fontColor};
@@ -8869,13 +8862,18 @@ const HeaderIcon = styled(Flex) `
   position: absolute;
   top: 0;
   right: 0;
-  justify-content: flex-end;
   align-items: center;
-  min-width: 7.5rem;
+  justify-content: center;
+  width: 7.625rem;
   height: 100%;
 
-  span[kind]:after {
-    font-size: 7.5rem;
+  span[kind] {
+    width: 4rem;
+    
+    :after {
+      font-size: 4rem;
+      color: rgba(255, 255, 255, 0.36);
+    }
   }
 
   span[kind]:after,
@@ -8901,34 +8899,77 @@ const BigIconHeaderMixin = css `
     }
   }
 `;
-const IconHeaderWrapper = styled.div `
+const WithPaddingHeaderMixin = css `
   ${Header} {
-    width: calc(100% + 0.5rem);
-    margin: -1rem -1rem 0.5rem -1rem;
-    padding: 1.5rem;
-    border-top-left-radius: 0.5rem;
-    border-top-right-radius: 0.5rem;
+    width: calc(100% - 1rem);
+    margin: -0.5rem -0.5rem 0.5rem -0.5rem;
+  }
+`;
+const BottomBlurHeaderMixin = css `
+  ${Header} {
+    margin-bottom: 0;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 1.5rem;
+      z-index: 11;
+      pointer-events: none;
+      background: ${({ theme: { palette } }) => palette.background};
+      mask-image: linear-gradient(to top, #000 0%, transparent 100%);
+      -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
+  }
+
+  ${HeaderFrontView} {
+    z-index: 12;
+  }
+`;
+const GradientHeaderWrapper = styled.div `
+  ${Header} {
+    margin: -1rem -1rem 1rem -1rem;
+    padding: 1rem 1.5rem;
+    border-radius: 0.5rem;
     background: ${({ $bgColor }) => $bgColor || "linear-gradient(96.55deg, #FFFCD3 0%, #B4DC47 100%)"};
+    overflow: hidden;
   }
 
   ${HeaderWrapperMixin};
 
   ${({ $bigIcon }) => $bigIcon && BigIconHeaderMixin};
+
+  ${({ $withPadding }) => $withPadding && WithPaddingHeaderMixin};
+  
+  ${({ $bottomBlur }) => $bottomBlur && BottomBlurHeaderMixin};
+`;
+
+const LayerIconClickable = styled.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 `;
 
-const FeatureCardIconHeader = ({ isRow }) => {
+const HeaderLayerIcon = () => {
     const { t } = useGlobalContext();
     const { layerInfo, feature } = useWidgetContext(WidgetType.FeatureCard);
-    const { config } = useWidgetConfig(WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
     const getMaxZoomTo = useMaxZoomTo();
     const [optionsMaxZoomTo, layerMaxZoomTo] = useMemo(() => getMaxZoomTo(layerInfo?.name), [layerInfo?.name, getMaxZoomTo]);
+    const handleIconClick = useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
+    return (jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsx(LayerIconClickable, { ref: ref, onClick: handleIconClick, children: jsx(LayerIcon, { layerInfo: layerInfo }) })) }));
+};
+
+const FeatureCardGradientHeader = ({ isRow }) => {
+    const { config } = useWidgetConfig(WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { fontColor, bgColor, bigIcon } = options || {};
+    const { fontColor, bgColor, bigIcon, withPadding, bottomBlur, themeName } = options || {};
     const renderElement = useHeaderRender(header);
-    const handleIconClick = useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
-    return (jsx(IconHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, children: jsx(ThemeProvider, { theme: defaultTheme, children: jsxs(Header, { "$isRow": isRow, children: [jsxs(HeaderFrontView, { children: [jsxs(HeaderContainer, { children: [jsx(Tooltip$1, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsx(LayerIconClickable, { ref: ref, onClick: handleIconClick, children: jsx(LayerIcon, { layerInfo: layerInfo }) })) }), jsx(FeatureCardTitle, { title: renderElement({
+    return (jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsx(ThemeProvider, { theme: getThemeByName(themeName), children: jsxs(Header, { "$isRow": isRow, children: [jsxs(HeaderFrontView, { children: [jsxs(HeaderContainer, { column: true, children: [jsx(HeaderLayerIcon, {}), jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -9799,13 +9840,12 @@ const HeaderSlideshow = styled.div `
 `;
 
 const FeatureCardSlideshowHeader = ({ isRow }) => {
-    const { layerInfo } = useWidgetContext(WidgetType.FeatureCard);
     const { config } = useWidgetConfig(WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { height, withPadding } = options || {};
+    const { height, withPadding, themeName } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsx(SlideshowHeaderWrapper, { big: true, withPadding: withPadding, children: jsx(ThemeProvider, { theme: darkTheme, children: jsxs(Header, { "$isRow": isRow, children: [jsxs(HeaderFrontView, { children: [jsxs(HeaderContainer, { children: [jsx(LayerIcon, { layerInfo: layerInfo }), jsx(FeatureCardTitle, { title: renderElement({
+    return (jsx(SlideshowHeaderWrapper, { big: true, withPadding: withPadding, children: jsx(ThemeProvider, { theme: getThemeByName(themeName), children: jsxs(Header, { "$isRow": isRow, children: [jsxs(HeaderFrontView, { children: [jsxs(HeaderContainer, { column: true, children: [jsx(HeaderLayerIcon, {}), jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -10141,13 +10181,6 @@ const ElementModal = memo(({ type = WidgetType.Dashboard, elementConfig }) => {
     return (jsxs(Fragment$1, { children: [jsx(ModalIcon, { kind: icon || "new_window", onClick: handleOpen, children: title }), jsxs(Dialog, { maxWidth: maxWidth, minWidth: minWidth, minHeight: minHeight, isOpen: isOpen, modal: true, onCloseRequest: handleClose, style: { paddingBottom: "2rem" }, children: [jsx(DialogTitle, { children: jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [!!title && jsx("span", { children: title }), jsx(IconButton, { kind: "close", onClick: handleClose })] }) }), jsx(DialogContent, { children: isLoading ? (jsx(DashboardLoading, {})) : (jsx(Container, { isColumn: true, noBorders: true, children: jsx(ContainerChildren, { type: type, items: modalContent, isMain: true, renderElement: renderElement }) })) })] })] }));
 });
 
-const ElementLayerName = memo(({ type }) => {
-    const { layerInfo } = useWidgetContext(type);
-    if (!layerInfo?.name)
-        return null;
-    return jsx("span", { children: layerInfo.name });
-});
-
 const elementComponents = {
     control: ElementControl,
     image: ElementImage,
@@ -10164,7 +10197,6 @@ const elementComponents = {
     markdown: ElementMarkdown,
     uploader: ElementUploader,
     modal: ElementModal,
-    layerName: ElementLayerName,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -10198,6 +10230,9 @@ const getElementValue = ({ getDefaultContainer, ...props }) => {
                 null
             : null;
     }
+    if (type === "layerName") {
+        return layerInfo?.name || "";
+    }
     const ElementComponent = type ? elementComponents[type] : null;
     return ElementComponent ? (jsx(ElementComponent, { ...props })) : (getDefaultContainer?.());
 };
@@ -10254,8 +10289,6 @@ const getFeatureCardHeader = (templateName) => {
             return FeatureCardSlideshowHeader;
         case HeaderTemplate.Gradient:
             return FeatureCardGradientHeader;
-        case HeaderTemplate.Icon:
-            return FeatureCardIconHeader;
         case HeaderTemplate.Default:
         default:
             return FeatureCardDefaultHeader;
@@ -11172,6 +11205,10 @@ const getRelatedAttribute = (layerInfo, sourceAttributeName, relatedLayerName) =
     return attributeConfig?.options?.relatedAttributes?.find(({ layerName }) => layerName === relatedLayerName);
 };
 
+const getResourceUrl = (url) => {
+    return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
+};
+
 const getSlideshowImages = ({ element, attribute, }) => {
     const { defaultValue, options } = element;
     const { separator } = options || {};
@@ -11221,6 +11258,10 @@ const getTemplateNameFromAttribute = (attribute) => {
     }
 };
 
+const getThemeByName = (themeName) => {
+    return themeName === ThemeName.Dark ? darkTheme : defaultTheme;
+};
+
 const getDisplayTemplateNameFromAttribute = (attribute) => {
     if (attribute?.subType === StringSubType.Attachments) {
         return ContainerTemplate.Attachment;
@@ -13315,5 +13356,5 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-export { AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, 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, 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, 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, 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, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, 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, getDisplayTemplateNameFromAttribute, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTemplateNameFromAttribute, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, metersPerPixel, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, updateDataSource, useAppHeight, useAutoCompleteControl, useChartChange, useChartData, useContainerAttributes, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
+export { AddFeatureButton, AddFeatureContainer, AlertIconContainer, AttachmentContainer, AttributeGalleryContainer, AttributeLabel, BASE_CONTAINER_STYLE, BaseMapTheme, 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, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, 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, 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, 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, WidgetType, addDataSource, addDataSources, adjustColor, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, 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, 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, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, metersPerPixel, numberOptions, parseClientStyle, parseIconNames, parseIconNamesFromClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, updateDataSource, useAppHeight, useAutoCompleteControl, useChartChange, useChartData, useContainerAttributes, useCurrentPageLayers, useCustomFeatureSelect, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useFetchImageWithAuth, useFetchWithAuth, useGetConfigLayer, useGlobalContext, useHeaderRender, useHideIfEmptyDataSource, useIconsFromLayers, useLayerHiddenAttributes, useLayerParams, useMapContext, useMapDraw, useMapImages, useMaxZoomTo, useProjectDashboardInit, usePythonSandbox, usePythonTask, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useVisibleProjectItems, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map