@evergis/react 4.0.57 → 4.0.59

package/dist/components/Dashboard/headers/{FeatureCardGradientHeader → FeatureCardBackgroundHeader}/index.d.ts

@@ -1,3 +1,3 @@
 import { FC } from 'react';
 import { ContainerProps } from '../../types';
-export declare const FeatureCardGradientHeader: FC<ContainerProps>;
+export declare const FeatureCardBackgroundHeader: FC<ContainerProps>;

package/dist/components/Dashboard/headers/{FeatureCardGradientHeader → FeatureCardBackgroundHeader}/styled.d.ts

@@ -1,5 +1,5 @@
 export declare const HeaderIcon: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps, never>;
-export declare const GradientHeaderWrapper: import('styled-components').StyledComponent<"div", any, {
+export declare const BackgroundHeaderWrapper: import('styled-components').StyledComponent<"div", any, {
     $fontColor?: string;
     $bgColor?: string;
     $height?: number;

package/dist/components/Dashboard/headers/FeatureCardDefaultHeader/styled.d.ts

@@ -6,6 +6,7 @@ export declare const FeatureTitleContainer: import('styled-components').StyledCo
     clickable?: boolean;
 }, never>;
 export declare const Header: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    $overlay?: string;
     $isRow?: boolean;
 }, never>;
 export declare const DefaultHeaderWrapper: import('styled-components').StyledComponent<"div", any, {

package/dist/components/Dashboard/headers/index.d.ts

@@ -3,5 +3,5 @@ export * from './DashboardDefaultHeader';
 export * from './DashboardDefaultHeader/styled';
 export * from './FeatureCardDefaultHeader';
 export * from './FeatureCardDefaultHeader/styled';
-export * from './FeatureCardGradientHeader';
+export * from './FeatureCardBackgroundHeader';
 export * from './FeatureCardSlideshowHeader';

package/dist/components/Dashboard/types.d.ts

@@ -91,6 +91,7 @@ export interface ConfigOptions {
     separator?: string;
     lineBreak?: string;
     image?: string;
+    overlay?: string;
     bgColor?: string;
     noBg?: boolean;
     center?: boolean;
@@ -346,7 +347,7 @@ export declare enum ContainerTemplate {
 export declare enum HeaderTemplate {
     Default = "Default",
     Slideshow = "Slideshow",
-    Gradient = "Gradient"
+    Background = "Background"
 }
 export interface GetRenderElementProps extends Omit<ContainerProps, "renderElement"> {
     expandedContainers?: Record<string, boolean>;

package/dist/index.js

@@ -3405,7 +3405,7 @@ exports.HeaderTemplate = void 0;
 (function (HeaderTemplate) {
     HeaderTemplate["Default"] = "Default";
     HeaderTemplate["Slideshow"] = "Slideshow";
-    HeaderTemplate["Gradient"] = "Gradient";
+    HeaderTemplate["Background"] = "Background";
 })(exports.HeaderTemplate || (exports.HeaderTemplate = {}));
 exports.WidgetType = void 0;
 (function (WidgetType) {
@@ -3838,8 +3838,12 @@ const formatAttributeValue = ({ t, type, value, stringFormat, noUnits = false })
         return formatPointValue({ t, stringFormat, value: coordinates });
     }
     if (type === api.AttributeType.DateTime) {
-        if (!stringFormat?.format || isNilValue)
+        if (isNilValue) {
             return null;
+        }
+        if (!stringFormat?.format) {
+            return value;
+        }
         return formatDateValue(stringFormat, value);
     }
     if ([
@@ -8743,6 +8747,21 @@ const RowHeaderMixin = styled.css `
     max-width: calc(100% - 3.8rem);
   }
 `;
+const OverlayHeaderMixin = (overlay) => styled.css `
+  &&& {
+    :after {
+      content: "";
+      z-index: 2;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: ${overlay};
+      pointer-events: none;
+    }
+  }
+`;
 const Header = styled(uilibGl.Flex) `
   z-index: 1;
   position: relative;
@@ -8753,6 +8772,8 @@ const Header = styled(uilibGl.Flex) `
   overflow: hidden;
 
   ${({ $isRow }) => $isRow && RowHeaderMixin};
+
+  ${({ $overlay }) => $overlay && OverlayHeaderMixin($overlay)};
 `;
 const DefaultHeaderWrapper = styled.div `
   width: ${({ withPadding }) => (withPadding ? "100%" : "calc(100% + 1rem)")};
@@ -8863,8 +8884,8 @@ const FeatureCardDefaultHeader = ({ noFeature }) => {
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { themeName, withPadding, column, height } = options || {};
-    return (jsxRuntime.jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsx(Header, { "$isRow": !column, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: !column, children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
+    const { themeName, withPadding, column, height, overlay } = options || {};
+    return (jsxRuntime.jsx(DefaultHeaderWrapper, { withPadding: withPadding, height: height, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsx(Header, { "$overlay": overlay, "$isRow": !column, children: jsxRuntime.jsxs(HeaderFrontView, { isDefault: !column, children: [jsxRuntime.jsxs(HeaderContainer, { children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(HeaderTitle, { noFeature: noFeature })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }) }) }) }));
 };
 
 const HeaderWrapperMixin = styled.css `
@@ -8941,10 +8962,10 @@ const BottomBlurHeaderMixin = styled.css `
     &::after {
       content: "";
       position: absolute;
-      left: 0;
+      top: 0;
       right: 0;
       bottom: 0;
-      height: 2rem;
+      left: 0;
       z-index: 11;
       pointer-events: none;
       background: ${({ theme: { palette } }) => palette.background};
@@ -8957,7 +8978,7 @@ const BottomBlurHeaderMixin = styled.css `
     z-index: 12;
   }
 `;
-const GradientHeaderWrapper = styled.div `
+const BackgroundHeaderWrapper = styled.div `
   ${Header} {
     width: calc(100% + 1rem);
     height: ${({ $height }) => $height ? `${$height}px` : "auto"};
@@ -8976,24 +8997,6 @@ const GradientHeaderWrapper = styled.div `
   ${({ $bottomBlur }) => $bottomBlur && BottomBlurHeaderMixin};
 `;
 
-const FeatureCardGradientHeader = () => {
-    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
-    const { header } = config || {};
-    const { options } = header || {};
-    const { fontColor, bgColor, height, bigIcon, withPadding, bottomBlur, themeName, column } = options || {};
-    const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(GradientHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$height": height, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
-                                            id: "title",
-                                            wrap: false,
-                                        }), description: renderElement({
-                                            id: "description",
-                                            wrap: false,
-                                        }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(HeaderIcon, { children: renderElement({
-                            id: "icon",
-                            wrap: false,
-                        }) })] }) }) }));
-};
-
 const ImageContainerButton = styled(uilibGl.FlatButton) `
   min-height: 1.5rem;
   border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
@@ -9108,6 +9111,7 @@ const SmallPreviewRight = styled(SmallPreviewControl).attrs(() => ({
 `;
 const imgSlideShowMixin = styled.css `
   &:nth-child(${({ prevIndex }) => prevIndex}) {
+    visibility: visible;
     z-index: 2;
     position: absolute;
     top: 0;
@@ -9115,6 +9119,7 @@ const imgSlideShowMixin = styled.css `
     right: 0;
     bottom: 0;
     opacity: 0;
+    pointer-events: none;
 
     animation-duration: 0.25s;
     animation-name: fadeOut;
@@ -9156,6 +9161,7 @@ const SmallPreviewContainer$1 = styled.div `
   }
 
   img {
+    visibility: hidden;
     z-index: 0;
     cursor: pointer;
     position: absolute;
@@ -9168,6 +9174,7 @@ const SmallPreviewContainer$1 = styled.div `
     object-fit: cover;
 
     &:nth-child(${({ currentIndex }) => currentIndex}) {
+      visibility: visible;
       z-index: 1;
     }
 
@@ -9182,7 +9189,7 @@ const NoLiveSnapshot = () => {
 
 const SmallPreview = ({ images, totalCount, currentIndex, isLoading, setCurrentIndex, onClick, onNextPage }) => {
     const { t } = useGlobalContext();
-    const [prevIndex, setPrevIndex] = React.useState(currentIndex + 1);
+    const [prevIndex, setPrevIndex] = React.useState(currentIndex);
     const isPrevDisabled = currentIndex === 0;
     const total = totalCount || images?.length || 0;
     const isNextDisabled = currentIndex === total - 1;
@@ -9201,7 +9208,7 @@ const SmallPreview = ({ images, totalCount, currentIndex, isLoading, setCurrentI
             onNextPage();
         }
     }, [currentIndex, images, isNextDisabled, onNextPage, setCurrentIndex]);
-    return (jsxRuntime.jsxs(SmallPreviewContainer$1, { currentIndex: currentIndex + 1, prevIndex: prevIndex + 1, children: [isLoading && jsxRuntime.jsx(uilibGl.LinearProgress, {}), images.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SmallPreviewLeft, { "$isDisabled": isPrevDisabled, onClick: prev }), jsxRuntime.jsx(SmallPreviewRight, { "$isDisabled": isNextDisabled, onClick: next }), jsxRuntime.jsx(SmallPreviewCounter, { children: jsxRuntime.jsxs("div", { children: [currentIndex + 1, " ", t("of", { ns: "dashboard", defaultValue: "из" }), " ", total] }) })] })), jsxRuntime.jsx(SmallPreviewImages, { onClick: onClick, children: images.map(image => (jsxRuntime.jsx("img", { src: image.src, alt: "" }, image.src))) })] }));
+    return (jsxRuntime.jsxs(SmallPreviewContainer$1, { currentIndex: currentIndex + 1, prevIndex: prevIndex + 1, children: [isLoading && jsxRuntime.jsx(uilibGl.LinearProgress, {}), images.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SmallPreviewLeft, { "$isDisabled": isPrevDisabled, onClick: prev }), jsxRuntime.jsx(SmallPreviewRight, { "$isDisabled": isNextDisabled, onClick: next }), jsxRuntime.jsx(SmallPreviewCounter, { children: jsxRuntime.jsxs("div", { children: [currentIndex + 1, " ", t("of", { ns: "dashboard", defaultValue: "из" }), " ", total] }) })] })), jsxRuntime.jsx(SmallPreviewImages, { onClick: onClick, children: images.map((image, index) => (jsxRuntime.jsx("img", { src: image.src, alt: "" }, index))) })] }));
 };
 
 // const DEFAULT_ARCHIVED_PERIOD = "#24h";
@@ -9776,7 +9783,7 @@ const ElementSlideshow = ({ elementConfig, type, renderElement }) => {
     const { images } = useElementSlideshow({ type, elementConfig });
     const handleOpenGallery = React.useCallback(() => setPreviewIndex(currentIndex), [currentIndex]);
     const handleCloseGallery = React.useCallback(() => setPreviewIndex(null), []);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(SmallPreviewContainer, { children: [jsxRuntime.jsx(SmallPreview, { images: images, currentIndex: currentIndex, setCurrentIndex: setCurrentIndex, onClick: handleOpenGallery }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: images, initialIndex: previewIndex, isOpen: previewIndex !== null, onClose: handleCloseGallery }, previewIndex))] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsxs(SmallPreviewContainer, { children: [jsxRuntime.jsx(SmallPreview, { images: images, currentIndex: currentIndex, setCurrentIndex: setCurrentIndex, onClick: handleOpenGallery }), previewIndex !== null && (jsxRuntime.jsx(uilibGl.Preview, { images: images, initialIndex: previewIndex, isOpen: true, onClose: handleCloseGallery }, previewIndex))] }))] }));
 };
 
 const ElementSvg = React.memo(({ type, elementConfig, ...rest }) => {
@@ -9830,7 +9837,8 @@ const SlideshowHeaderWrapper = styled.div `
       position: absolute;
       top: 0;
       left: 0;
-      width: 100%;
+      right: 0;
+      pointer-events: none;
     }
 
     :before {
@@ -9879,16 +9887,42 @@ const HeaderSlideshow = styled.div `
     min-height: inherit;
     object-position: center;
     object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover img {
+    transform: scale(1.1);
   }
 `;
 
+const FeatureCardBackgroundHeader = () => {
+    const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
+    const { header } = config || {};
+    const { options } = header || {};
+    const { fontColor, bgColor, height, overlay, bigIcon, withPadding, bottomBlur, themeName, column } = options || {};
+    const renderElement = useHeaderRender(header);
+    return (jsxRuntime.jsx(BackgroundHeaderWrapper, { "$fontColor": fontColor, "$bgColor": bgColor, "$height": height, "$bigIcon": bigIcon, "$withPadding": withPadding, "$bottomBlur": bottomBlur, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$overlay": overlay, "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+                                            id: "title",
+                                            wrap: false,
+                                        }), description: renderElement({
+                                            id: "description",
+                                            wrap: false,
+                                        }) })] }), jsxRuntime.jsx(FeatureCardButtons, {})] }), jsxRuntime.jsx(ImageContainerBg, { children: renderElement({
+                            id: "bgImage",
+                            wrap: false,
+                        }) }), jsxRuntime.jsx(HeaderIcon, { children: renderElement({
+                            id: "icon",
+                            wrap: false,
+                        }) })] }) }) }));
+};
+
 const FeatureCardSlideshowHeader = () => {
     const { config } = useWidgetConfig(exports.WidgetType.FeatureCard);
     const { header } = config || {};
     const { options } = header || {};
-    const { height, fontColor, withPadding, themeName, column } = options || {};
+    const { height, fontColor, withPadding, themeName, column, overlay } = options || {};
     const renderElement = useHeaderRender(header);
-    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { fontColor: fontColor, withPadding: withPadding, height: height, big: true, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
+    return (jsxRuntime.jsx(SlideshowHeaderWrapper, { fontColor: fontColor, withPadding: withPadding, height: height, big: true, children: jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: getThemeByName(themeName), children: jsxRuntime.jsxs(Header, { "$overlay": overlay, "$isRow": !column, children: [jsxRuntime.jsxs(HeaderFrontView, { children: [jsxRuntime.jsxs(HeaderContainer, { column: column, children: [jsxRuntime.jsx(HeaderLayerIcon, {}), jsxRuntime.jsx(FeatureCardTitle, { title: renderElement({
                                             id: "title",
                                             wrap: false,
                                         }), description: renderElement({
@@ -10330,8 +10364,8 @@ const getFeatureCardHeader = (templateName) => {
     switch (templateName) {
         case exports.HeaderTemplate.Slideshow:
             return FeatureCardSlideshowHeader;
-        case exports.HeaderTemplate.Gradient:
-            return FeatureCardGradientHeader;
+        case exports.HeaderTemplate.Background:
+            return FeatureCardBackgroundHeader;
         case exports.HeaderTemplate.Default:
         default:
             return FeatureCardDefaultHeader;
@@ -13504,10 +13538,10 @@ exports.FEATURE_CARD_DEFAULT_COLORS = FEATURE_CARD_DEFAULT_COLORS;
 exports.FEATURE_CARD_OTHER_COLOR = FEATURE_CARD_OTHER_COLOR;
 exports.FILTERED_VALUE_OPACITY = FILTERED_VALUE_OPACITY;
 exports.FILTER_PREFIX = FILTER_PREFIX;
+exports.FeatureCardBackgroundHeader = FeatureCardBackgroundHeader;
 exports.FeatureCardButtons = FeatureCardButtons;
 exports.FeatureCardContext = FeatureCardContext;
 exports.FeatureCardDefaultHeader = FeatureCardDefaultHeader;
-exports.FeatureCardGradientHeader = FeatureCardGradientHeader;
 exports.FeatureCardHeader = FeatureCardHeader;
 exports.FeatureCardProvider = FeatureCardProvider;
 exports.FeatureCardSlideshowHeader = FeatureCardSlideshowHeader;