@evergis/react 4.0.54 → 4.0.56

package/dist/index.js

@@ -3406,7 +3406,6 @@ exports.HeaderTemplate = void 0;
     HeaderTemplate["Default"] = "Default";
     HeaderTemplate["Slideshow"] = "Slideshow";
     HeaderTemplate["Gradient"] = "Gradient";
-    HeaderTemplate["Icon"] = "Icon";
 })(exports.HeaderTemplate || (exports.HeaderTemplate = {}));
 exports.WidgetType = void 0;
 (function (WidgetType) {
@@ -6034,8 +6033,7 @@ const SvgContainer$1 = styled.div `
     }
   }
 `;
-const TwoColumnContainerWrapper = styled(uilibGl.Flex) `
-  width: 100%;
+const TwoColumnContainerWrapper = styled(Container) `
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
@@ -6109,7 +6107,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,
@@ -6138,7 +6135,7 @@ const OneColumnContainer = React.memo(({ type, elementConfig, renderElement }) =
 });
 
 const TwoColumnContainer = React.memo(({ elementConfig, type, renderElement }) => {
-    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }, attribute) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] }, attribute)), []);
+    const renderBody = React.useCallback(({ id, value, style, hasIcon, hasUnits, render }) => (jsxRuntime.jsxs(TwoColumnContainerWrapper, { id: id, style: style, children: [jsxRuntime.jsxs(ContainerAlias, { children: [hasIcon && (jsxRuntime.jsx(ContainerAliasIcon, { children: render({ id: "icon" }) })), render({ id: "alias" }), render({ id: "tooltip" }), render({ id: "modal" })] }), jsxRuntime.jsxs(ContainerValue, { big: true, children: [value, hasUnits && (jsxRuntime.jsx(ContainerUnits, { children: render({ id: "units" }) }))] })] })), []);
     const { renderContainer, attributesToRender } = useRenderContainer({
         type,
         elementConfig,
@@ -8042,10 +8039,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};
+
+  ${uilibGl.Icon} {
+    width: 37.5%;
+    height: 37.5%;
+  }
+
+  ${uilibGl.Icon}:after {
+    font-size: 1.5rem;
+    color: ${({ theme }) => theme.palette.textSecondary};
+  }
+`;
 const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
     const { api } = useGlobalContext();
     const [imageSrc, setImageSrc] = React.useState();
+    const [hasError, setHasError] = React.useState(false);
     React.useEffect(() => {
+        setHasError(false);
         if (isExternal) {
             setImageSrc(link);
             return;
@@ -8063,14 +8081,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 (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [!imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "" }))] }));
+    return (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsxRuntime.jsx(ImagePreviewError, { borderRadius: borderRadius, children: jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), !hasError && imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
 };
 
 const getFileType = (mimeType = "", name = "") => {
@@ -8223,6 +8245,60 @@ const useAttachmentContainer = ({ type, elementConfig, valueOverride, }) => {
     };
 };
 
+const usePreviewImages = ({ items, active }) => {
+    const { api } = useGlobalContext();
+    const [blobUrls, setBlobUrls] = React.useState({});
+    const [failedLinks, setFailedLinks] = React.useState({});
+    const inFlightRef = React.useRef(new Set());
+    const blobUrlsRef = React.useRef(blobUrls);
+    blobUrlsRef.current = blobUrls;
+    React.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]);
+    React.useEffect(() => () => {
+        Object.values(blobUrlsRef.current).forEach(URL.revokeObjectURL);
+    }, []);
+    return React.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",
@@ -8269,20 +8345,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 = React.memo(({ type, elementConfig, renderElement }) => {
     const { api } = useGlobalContext();
     const { selectAttachmentsFromCatalog } = useWidgetContext(type);
@@ -8293,7 +8355,7 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
     const [previewIndex, setPreviewIndex] = React.useState(null);
     const [uploading, setUploading] = React.useState(false);
     const [isLinkDialogOpen, , setLinkDialogOpen] = useToggle(false);
-    const previewImages = React.useMemo(() => items.map(buildPreviewImage$1), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = React.useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8302,7 +8364,7 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
             ...previewImages.filter((_, idx) => idx !== previewIndex),
         ];
     }, [previewImages, previewIndex]);
-    const persist = React.useCallback((next) => onChange(JSON.stringify(next)), [onChange]);
+    const persist = React.useCallback((next) => onChange(next), [onChange]);
     const handlePreview = React.useCallback((link) => {
         const idx = items.findIndex(item => item.link === link);
         if (idx >= 0)
@@ -8362,23 +8424,14 @@ const EditAttachmentContainer = React.memo(({ type, elementConfig, renderElement
     return (jsxRuntime.jsxs(AttachmentsContainer, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: true, onPreview: handlePreview, onDelete: handleDelete })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), jsxRuntime.jsx(AddButton, { accept: fileExtensions, onSelectFiles: uploading ? () => undefined : handleUpload, onSelectFromCatalog: handleSelectFromCatalog, onSelectFromLink: handleOpenLinkDialog }), jsxRuntime.jsx(AttachmentLinkDialog, { isOpen: isLinkDialogOpen, onClose: handleCloseLinkDialog, onSubmit: handleAddByLink }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.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 = React.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] = React.useState(null);
-    const previewImages = React.useMemo(() => items.map(buildPreviewImage), [items]);
+    const previewImages = usePreviewImages({ items, active: previewIndex !== null });
     const orderedPreviewImages = React.useMemo(() => {
         if (previewIndex === null)
             return previewImages;
@@ -8395,7 +8448,10 @@ const AttachmentContainer = React.memo(({ type, elementConfig, renderElement })
     const handleClosePreview = React.useCallback(() => setPreviewIndex(null), []);
     const handleShowMore = React.useCallback(() => setShowMore(true), [setShowMore]);
     const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: style, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview }))] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(Container, { id: id, style: { ...BASE_CONTAINER_STYLE, ...style }, children: jsxRuntime.jsxs(uilibGl.Flex, { column: true, children: [jsxRuntime.jsx(AttachmentsHeader, { alias: renderElement?.({ id: "alias" }), count: items.length, viewMode: viewMode, onChangeViewMode: setViewMode }), jsxRuntime.jsx(AttachmentsContent, { children: viewMode === "grid" ? (jsxRuntime.jsx(AttachmentsGrid, { items: visibleItems, isEdit: false, onPreview: handlePreview })) : (jsxRuntime.jsx(AttachmentsList, { items: visibleItems, isEdit: false, onPreview: handlePreview })) }), hasMore && !showMore && (jsxRuntime.jsx(ShowMoreButton, { hiddenCount: hiddenCount, onClick: handleShowMore })), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: orderedPreviewImages, isOpen: previewIndex !== null, onClose: handleClosePreview, errorTitleText: t("attachments.resourceUnavailable", {
+                                ns: "common",
+                                defaultValue: "Ресурс недоступен",
+                            }) }))] }) }))] }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -8616,17 +8672,17 @@ const HeaderFrontView = styled(uilibGl.Flex) `
   width: 100%;
   font: ${({ theme: { fonts } }) => fonts.subtitle};
 `;
-const HeaderContainer = styled(uilibGl.FlexSpan) `
+const HeaderContainer = styled(uilibGl.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;
@@ -8682,6 +8738,10 @@ const Header = styled(uilibGl.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;
   }
@@ -8708,7 +8768,7 @@ const HeaderTitle = ({ noFeature }) => {
                 stringFormat: layerDefinitionAttribute.stringFormat,
             })) ||
             feature?.id);
-    }, [attributes, feature, configuration]);
+    }, [configuration, attributes, t, feature?.id]);
     return (jsxRuntime.jsxs(HeaderTitleContainer, { children: [noFeature ? (jsxRuntime.jsx(FeatureTitleContainer, { children: t("noObjectFound", { ns: "dashboard", defaultValue: "Объектов не найдено" }) })) : (jsxRuntime.jsx(FeatureTitleContainer, { clickable: true, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { ref: ref, onClick: () => zoomToFeatures([feature]), children: resultTitle })) }) })), jsxRuntime.jsx(LayerDescription, { title: resultDescription, children: resultDescription })] }));
 };
 
@@ -8767,81 +8827,14 @@ const LayerIcon = ({ layerInfo, error }) => {
 };
 
 const FeatureCardDefaultHeader = ({ noFeature }) => {
-    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
-    return (jsxRuntime.jsx(DefaultHeaderWrapper, { children: jsxRuntime.jsx(Header, { "$isRow": true, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: true, children: [jsxRuntime.jsxs(HeaderContainer, { children: [!!layerInfo?.name && jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }));
-};
-
-const HeaderFontColorMixin$1 = styled.css `
-  ${HeaderTitleContainer}, ${LayerDescription} {
-    color: ${({ $fontColor }) => $fontColor};
-  }
-`;
-const HeaderWrapperMixin$1 = styled.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(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { fontColor, bgColor } = options || {};
-    const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsx(Header, { "$isRow": isRow, children: jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
-                                        id: "title",
-                                        wrap: false,
-                                    }), description: renderElement({
-                                        id: "description",
-                                        wrap: false,
-                                    }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
+    const { themeName } = options || {};
+    return (jsxRuntime.jsx(DefaultHeaderWrapper, { children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsx(Header, { "$isRow": true, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: true, children: [jsxRuntime.jsxs(HeaderContainer, { children: [!!layerInfo?.name && jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
-const LayerIconClickable = styled.div `
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`;
 const HeaderFontColorMixin = styled.css `
   ${HeaderTitleContainer}, ${HeaderTitleContainer} *, ${LayerDescription} {
     color: ${({ $fontColor }) => $fontColor};
@@ -8871,13 +8864,18 @@ const HeaderIcon = styled(uilibGl.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,
@@ -8903,34 +8901,77 @@ const BigIconHeaderMixin = styled.css `
     }
   }
 `;
-const IconHeaderWrapper = styled.div `
+const WithPaddingHeaderMixin = styled.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 = styled.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(exports.WidgetType.FeatureCard);
-    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const zoomToFeatures = useZoomToFeatures();
     const getMaxZoomTo = useMaxZoomTo();
     const [optionsMaxZoomTo, layerMaxZoomTo] = React.useMemo(() => getMaxZoomTo(layerInfo?.name), [layerInfo?.name, getMaxZoomTo]);
+    const handleIconClick = React.useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
+    return (jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIconClickable, { ref: ref, onClick: handleIconClick, children: jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }) })) }));
+};
+
+const FeatureCardGradientHeader = ({ isRow }) => {
+    const { config } = useWidgetConfig(exports.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 = React.useCallback(() => zoomToFeatures([feature], { maxZoom: layerMaxZoomTo ?? optionsMaxZoomTo }), [zoomToFeatures, feature, layerMaxZoomTo, optionsMaxZoomTo]);
-    return (jsxRuntime.jsx(IconHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.defaultTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, placement: "top", content: t("zoomToFeature", { ns: "dashboard", defaultValue: "Приблизить к объекту" }), delay: [600, 0], children: ref => (jsxRuntime.jsx(LayerIconClickable, { ref: ref, onClick: handleIconClick, children: jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }) })) }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: true, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -9801,13 +9842,12 @@ const HeaderSlideshow = styled.div `
 `;
 
 const FeatureCardSlideshowHeader = ({ isRow }) => {
-    const { layerInfo } = useWidgetContext(exports.WidgetType.FeatureCard);
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { height, withPadding } = options || {};
+    const { height, withPadding, themeName } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { big: true, withPadding: withPadding, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(LayerIcon, { layerInfo: layerInfo }), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { big: true, withPadding: withPadding, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$isRow": isRow, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: true, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -10143,13 +10183,6 @@ const ElementModal = React.memo(({ type = exports.WidgetType.Dashboard, elementC
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalIcon, { kind: icon || "new_window", onClick: handleOpen, children: title }), jsxRuntime.jsxs(uilibGl.Dialog, { maxWidth: maxWidth, minWidth: minWidth, minHeight: minHeight, isOpen: isOpen, modal: true, onCloseRequest: handleClose, style: { paddingBottom: "2rem" }, children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [!!title && jsxRuntime.jsx("span", { children: title }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: handleClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: isLoading ? (jsxRuntime.jsx(DashboardLoading, {})) : (jsxRuntime.jsx(Container, { isColumn: true, noBorders: true, children: jsxRuntime.jsx(ContainerChildren, { type: type, items: modalContent, isMain: true, renderElement: renderElement }) })) })] })] }));
 });
 
-const ElementLayerName = React.memo(({ type }) => {
-    const { layerInfo } = useWidgetContext(type);
-    if (!layerInfo?.name)
-        return null;
-    return jsxRuntime.jsx("span", { children: layerInfo.name });
-});
-
 const elementComponents = {
     control: ElementControl,
     image: ElementImage,
@@ -10166,7 +10199,6 @@ const elementComponents = {
     markdown: ElementMarkdown,
     uploader: ElementUploader,
     modal: ElementModal,
-    layerName: ElementLayerName,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -10200,6 +10232,9 @@ const getElementValue = ({ getDefaultContainer, ...props }) => {
                 null
             : null;
     }
+    if (type === "layerName") {
+        return layerInfo?.name || "";
+    }
     const ElementComponent = type ? elementComponents[type] : null;
     return ElementComponent ? (jsxRuntime.jsx(ElementComponent, { ...props })) : (getDefaultContainer?.());
 };
@@ -10256,8 +10291,6 @@ const getFeatureCardHeader = (templateName) => {
             return FeatureCardSlideshowHeader;
         case exports.HeaderTemplate.Gradient:
             return FeatureCardGradientHeader;
-        case exports.HeaderTemplate.Icon:
-            return FeatureCardIconHeader;
         case exports.HeaderTemplate.Default:
         default:
             return FeatureCardDefaultHeader;
@@ -11174,6 +11207,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 || {};
@@ -11223,6 +11260,10 @@ const getTemplateNameFromAttribute = (attribute) => {
     }
 };
 
+const getThemeByName = (themeName) => {
+    return themeName === exports.ThemeName.Dark ? uilibGl.darkTheme : uilibGl.defaultTheme;
+};
+
 const getDisplayTemplateNameFromAttribute = (attribute) => {
     if (attribute?.subType === api.StringSubType.Attachments) {
         return exports.ContainerTemplate.Attachment;
@@ -13401,7 +13442,6 @@ exports.FeatureCardContext = FeatureCardContext;
 exports.FeatureCardDefaultHeader = FeatureCardDefaultHeader;
 exports.FeatureCardGradientHeader = FeatureCardGradientHeader;
 exports.FeatureCardHeader = FeatureCardHeader;
-exports.FeatureCardIconHeader = FeatureCardIconHeader;
 exports.FeatureCardProvider = FeatureCardProvider;
 exports.FeatureCardSlideshowHeader = FeatureCardSlideshowHeader;
 exports.FeatureCardTitle = FeatureCardTitle;
@@ -13542,6 +13582,7 @@ exports.getSelectedFilterValue = getSelectedFilterValue;
 exports.getSlideshowImages = getSlideshowImages;
 exports.getSvgUrl = getSvgUrl;
 exports.getTemplateNameFromAttribute = getTemplateNameFromAttribute;
+exports.getThemeByName = getThemeByName;
 exports.getTotalFromAttributes = getTotalFromAttributes;
 exports.getTotalFromRelatedFeatures = getTotalFromRelatedFeatures;
 exports.hexToRgba = hexToRgba;