@evergis/react 3.1.41 → 3.1.46

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, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, darkTheme, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, 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, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, Expander, darkTheme, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
 import { createContext, memo, useRef, useState, useEffect, useCallback, useContext, useMemo, Fragment } from 'react';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
@@ -20,6 +20,8 @@ import MapGL, { Source, Layer as Layer$1 } from 'react-map-gl/mapbox';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
@@ -4446,24 +4448,48 @@ const formatDataSourceCondition = ({ condition, configFilters, filters, attribut
 const DashboardChipsContainer = styled(Flex) `
   flex-wrap: wrap;
 `;
+const DefaultChipColorMixin = css `
+  && {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && > * {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && span[kind]:after {
+    color: ${({ theme: { palette } }) => palette.icon};
+  }
+`;
+const CustomChipColorMixin = css `
+  && {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && > * {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && span[kind]:after {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+`;
 const DashboardChip$1 = styled(Chip) `
   margin: 0 0.25rem 0.25rem 0;
   background: ${({ $isDefault, $bgColor, theme: { palette } }) => $isDefault ? palette.element : $bgColor || palette.primary};
   border-radius: ${({ $radius, theme: { borderRadius } }) => $radius || borderRadius.medium};
   white-space: nowrap;
   font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
-  color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.textPrimary : $fontColor || "#fff"};
+  color: ${({ theme: { palette } }) => palette.iconContrast};
 
   > * {
     font-size: ${({ $fontSize }) => $fontSize || "0.875rem"};
-    color: ${({ $isDefault, $fontColor, theme: { palette } }) => $isDefault ? palette.textPrimary : $fontColor || "#fff"};
   }
 
   span[kind] {
     height: 0.875rem;
 
     :after {
-      color: ${({ $isDefault, $fontColor, theme: { palette } }) => ($isDefault ? palette.icon : $fontColor || "#fff")};
       font-size: 0.875rem;
     }
   }
@@ -4472,6 +4498,9 @@ const DashboardChip$1 = styled(Chip) `
     width: auto;
     padding: 0 0.5rem;
   }
+
+  ${({ $isDefault }) => $isDefault && DefaultChipColorMixin}
+  ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
 `;
 
 const ChartLegendContainer = styled(Flex) `
@@ -4498,7 +4527,7 @@ const ChartLegendColor = styled.div `
 `;
 const ChartLegendName = styled.div `
   flex: 1;
-  font-size: 0.625rem;
+  font-size: ${({ $fontSize }) => $fontSize || "0.625rem"};
   color: ${({ theme: { palette }, $fontColor }) => $fontColor || palette.textPrimary};
 `;
 
@@ -5038,7 +5067,7 @@ const LayerGroup = ({ group, onlyMainTools }) => {
     if (!group) {
         return null;
     }
-    return (jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxs(LayerGroupMain, { children: [jsx(Icon, { kind: group.isExpanded ? "tree_folder_open" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxs(Description, { children: [jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsx(IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsx(FlexSpan, { children: jsxs(Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsx(FlexSpan, { children: jsx(IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsx(Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsx(FlexSpan, { children: jsx(IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsx(Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
+    return (jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxs(LayerGroupMain, { children: [jsx(Icon, { kind: group.isExpanded ? "tree_folder_opened" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxs(Description, { children: [jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsx(IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsx(FlexSpan, { children: jsxs(Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsx(FlexSpan, { children: jsx(IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsx(Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsx(FlexSpan, { children: jsx(IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsx(Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
 };
 
 const createTreeNode = (layer, Component, onlyMainTools) => {
@@ -5101,6 +5130,9 @@ const LayerListContainer = styled(Flex) `
 const ElementValueWrapper = styled.div `
   transition: background-color ${transition.toggle};
 `;
+const InnerContainerWrapper$1 = styled.div `
+  width: 100%;
+`;
 const ContainerWrapper = styled(Flex) `
   position: relative;
   min-height: 1rem;
@@ -6169,12 +6201,29 @@ const SvgContainer = styled.div `
 const ContainerIconTitle = styled(Flex) `
   align-items: center;
   flex-wrap: nowrap;
+  flex-shrink: 1;
+  flex-grow: 0;
   color: ${({ fontColor, theme: { palette } }) => fontColor || palette.textSecondary};
 
+  > div {
+    flex-shrink: 1;
+    flex-grow: 0;
+    width: auto;
+  }
+
+  ${SvgContainer} {
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-right: 0.5rem;
+  }
+
+  > * {
+    width: auto;
+  }
+  
   svg,
   img,
-  span[kind],
-  ${SvgContainer} {
+  span[kind] {
     margin-right: 0.5rem;
   }
 
@@ -6195,6 +6244,17 @@ const ContainerIconTitle = styled(Flex) `
   ${LegendToggler} {
     margin-left: 0.25rem;
   }
+  
+  span[kind="download"] {
+    opacity: 0;
+    transition: opacity ${transition.hover};
+  }
+  
+  :hover {
+    span[kind="download"] {
+      opacity: 1;
+    }
+  }
 `;
 const ContainerTitle = styled(Flex) `
   align-items: center;
@@ -6230,8 +6290,9 @@ const TitleContainer = memo(({ containerId, templateName, layerNames, fontColor,
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = useTheme();
     const { style, options } = elementConfig || {};
-    const { simple } = options || {};
+    const { simple, downloadById } = options || {};
     const isLayers = templateName === ContainerTemplate.Layers;
+    const { onExport } = useExportPdf(downloadById);
     const onClick = useCallback(() => {
         if (!expandable)
             return;
@@ -6246,7 +6307,7 @@ const TitleContainer = memo(({ containerId, templateName, layerNames, fontColor,
     const renderVisibility = useMemo(() => isLayers && (jsx(FlexSpan, { mr: "-1rem", children: jsx(IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = useMemo(() => !!containerId &&
         expandable && (jsx("div", { children: jsx(LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsx(Container, { isTitle: isVisible, style: style, children: jsxs(ContainerTitle, { simple: simple, children: [jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsx(Container, { isTitle: isVisible, style: style, children: jsxs(ContainerTitle, { simple: simple, children: [jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsx(IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
 const ContainerDivider = styled(Divider) `
@@ -7435,7 +7496,7 @@ const ElementImage = memo(({ type, elementConfig }) => {
 const ElementLegend = memo(({ type, element, elementConfig, expandedContainers }) => {
     const { attributes, dataSources } = useWidgetContext(type);
     const { options } = elementConfig || {};
-    const { twoColumns, chartId, relatedDataSources } = options || {};
+    const { twoColumns, chartId, relatedDataSources, fontSize } = options || {};
     const chartElement = useMemo(() => returnFound(element?.children, { id: chartId }), [chartId, element?.children]);
     const { data, loading } = useChartData({
         element: chartElement,
@@ -7462,7 +7523,7 @@ const ElementLegend = memo(({ type, element, elementConfig, expandedContainers }
                 return { ...item, name: attribute?.alias || item.name };
             });
     }, [attributes, axes, data, options.chartType, relatedDataSources, dataSources]);
-    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, type: type })) : null;
+    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
 });
 
 const ExternalLink = styled(IconButton).attrs(() => ({
@@ -7533,6 +7594,169 @@ const ElementLink = memo(({ type, elementConfig }) => {
     return link.startsWith("http") ? jsx(ExternalLink, { onClick: () => window.open(link) }) : jsx(LocalLink, { link: link });
 });
 
+const MarkdownWrapper = styled.div `
+  padding: 0;
+  background: transparent;
+  border-radius: 0.5rem;
+  font-family: 'Nunito Sans', sans-serif;
+  color: ${({ theme: { palette } }) => palette.textPrimary};
+
+  /* Paragraphs */
+  p {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    letter-spacing: 0.0052rem;
+    margin: 0 0 1rem 0;
+    font-weight: 400;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  /* Headings */
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 0 0.75rem 0;
+    font-weight: 300;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+    object-fit: cover;
+    margin: 0.75rem 0;
+  }
+
+  /* Links */
+  a {
+    color: ${({ theme: { palette } }) => palette.primary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  /* Lists */
+  ul, ol {
+    margin: 0 0 1rem 0;
+    padding-left: 1.25rem;
+
+    li {
+      font-size: 0.875rem;
+      line-height: 1rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  /* Code */
+  code {
+    background: ${({ theme: { palette } }) => palette.element};
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-family: monospace;
+    font-size: 0.8125rem;
+  }
+
+  pre {
+    background: ${({ theme: { palette } }) => palette.element};
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    margin: 0.75rem 0;
+
+    code {
+      background: transparent;
+      padding: 0;
+    }
+  }
+
+  /* Hide horizontal rules */
+  hr {
+    display: none;
+  }
+`;
+styled(Flex) `
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+`;
+styled.span `
+  display: block;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
+  opacity: 0.36;
+  margin: 0 0 0.5rem 0;
+`;
+styled.div `
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  img, svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+const ExpandButton = styled(IconButton) `
+  margin-bottom: 1rem;
+`;
+
+const ElementMarkdown = memo(({ elementConfig, type }) => {
+    const { attributes } = useWidgetContext(type);
+    const { t } = useGlobalContext();
+    const [expanded, setExpanded] = useState(false);
+    const { attributeName, value, options } = elementConfig || {};
+    const expandLength = options?.expandLength || 0;
+    // Get markdown content from:
+    // 1. value (static content)
+    // 2. attribute by attributeName (dynamic content from data)
+    let content = value;
+    if (!content && attributeName && attributes) {
+        const attribute = attributes.find(attr => attr.name === attributeName);
+        content = attribute?.value;
+    }
+    if (!content)
+        return null;
+    const markdownString = String(content);
+    const shouldShowExpand = expandLength > 0 && markdownString.length > expandLength;
+    // If expand is not needed, show full content
+    if (!shouldShowExpand) {
+        return (jsx(MarkdownWrapper, { children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString }) }));
+    }
+    // Truncated content for collapsed state
+    const truncatedContent = markdownString.substring(0, expandLength);
+    // Collapsed state
+    if (!expanded) {
+        return (jsxs(MarkdownWrapper, { children: [jsx(ExpandButton, { primary: true, icon: jsx(Expander, { isSelected: false }), onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) }), jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: truncatedContent })] }));
+    }
+    // Expanded state
+    return (jsxs(MarkdownWrapper, { children: [jsx(ExpandButton, { primary: true, icon: jsx(Expander, { isSelected: true }), onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) }), jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString })] }));
+});
+
 const SmallPreviewContainer = styled.div `
   width: 100%;
   height: 100%;
@@ -7812,6 +8036,7 @@ const elementComponents = {
     camera: ElementCamera,
     chart: ElementChart,
     legend: ElementLegend,
+    markdown: ElementMarkdown,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -8403,6 +8628,268 @@ const RangeDateFilter = ({ type, filter }) => {
     return (jsx(RangeNumberInput, { label: label || t("interval", { ns: "dashboard", defaultValue: "Интервал" }), selectedOption: { range: true }, minDate: getDate(minDate), maxDate: getDate(maxDate), value: [getDate(value[0]), getDate(value[1])], zIndex: 100, prefix: jsx(Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && jsx(StyledIconButton, { kind: "error", onClick: reset }), withTime: withTime, isDate: true, onChange: onChange }));
 };
 
+const getJustifyContent = (align) => {
+    switch (align) {
+        case "center":
+            return "center";
+        case "right":
+            return "flex-end";
+        case "left":
+        default:
+            return "flex-start";
+    }
+};
+const ChipsContainer = styled(Flex) `
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  background: transparent;
+  justify-content: ${({ $align }) => getJustifyContent($align)};
+`;
+
+const FilterChip = styled.div `
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.3125rem 0.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  background-color: ${({ $isActive, $bgColor, theme }) => $bgColor
+    ? $bgColor
+    : $isActive
+        ? theme.palette?.primary
+        : theme.palette?.elementLight};
+  color: ${({ $isActive, $textColor, theme }) => $textColor
+    ? $textColor
+    : $isActive
+        ? theme.palette?.textContrast
+        : theme.palette?.textSecondary};
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.2s ease-in-out;
+  margin: 0 0.25rem 0 0;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: ${({ $isActive, $bgColor, theme }) => $isActive
+    ? $bgColor || 'inherit'
+    : $bgColor || theme.palette?.elementDark};
+  }
+`;
+const ChipIconWrapper = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+
+  svg, img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+const ChipText = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  ${({ $maxTextWidth }) => $maxTextWidth && `max-width: ${$maxTextWidth / 16}rem;`}
+`;
+
+const CustomChip = ({ text, icon, color, primary, secondary, error, disabled, isActive, maxTextWidth, fontColor: customFontColor, backgroundColor: customBackgroundColor, ...props }) => {
+    const theme = useTheme();
+    const { palette } = theme;
+    // Helper to add transparency to hex color
+    const addTransparency = (hex, transparency = '1f') => {
+        // Ensure hex starts with #
+        const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
+        return `${cleanHex}${transparency}`;
+    };
+    // Calculate colors based on priority:
+    // 1. customFontColor / customBackgroundColor (highest, from options)
+    // 2. color (from attribute)
+    // 3. primary/secondary/error
+    // 4. default theme colors
+    let bgColor;
+    let textColor;
+    if (isActive) {
+        // Priority 1: Custom colors from options
+        if (customFontColor) {
+            textColor = customFontColor;
+            bgColor = customBackgroundColor || addTransparency(customFontColor); // 12% opacity
+        }
+        // Priority 2: Color from attribute
+        else if (color) {
+            textColor = palette.textPrimary; // White text for active chip
+            bgColor = color; // Full color without transparency
+        }
+        // Priority 3: Variant colors
+        else if (primary) {
+            bgColor = theme.message.color.success; // Green
+            textColor = palette.textContrast;
+        }
+        else if (secondary) {
+            bgColor = palette.primary;
+            textColor = palette.textContrast;
+        }
+        else if (error) {
+            bgColor = theme.message.color.warning; // Yellow
+            textColor = palette.textPrimary;
+        }
+        // Priority 4: Default - no colors specified
+        else {
+            textColor = palette.primary;
+            bgColor = addTransparency(palette.primary); // palette.primary + 12%
+        }
+    }
+    else {
+        // Inactive state
+        if (color) {
+            textColor = color; // Use color for text
+            bgColor = addTransparency(color); // Uses default 1f (12%) transparency
+        }
+        // else: No color attribute - leave bgColor and textColor undefined
+        // Styled component will use fallback for inactive: bg = rgba(0,0,0,0.06), text = palette.textSecondary
+    }
+    const renderIcon = useCallback((iconValue) => {
+        if (!iconValue) {
+            return null;
+        }
+        // If icon doesn't contain a dot and doesn't start with /sp/, it's a built-in icon from uilib-gl
+        if (!iconValue.includes(".") && !iconValue.startsWith("/sp/")) {
+            return jsx(Icon, { kind: iconValue });
+        }
+        // If it's an SVG file or resourceId path, use SvgImage component
+        const isSvg = iconValue.endsWith(".svg") || iconValue.startsWith("/sp/resources/file/");
+        if (isSvg) {
+            const iconColor = textColor
+                ? textColor
+                : isActive
+                    ? palette.textContrast
+                    : palette.textSecondary;
+            return (jsx(SvgImage, { url: iconValue, width: 14, height: 14, fontColor: iconColor }));
+        }
+        // Otherwise, it's a regular image
+        return jsx("img", { src: iconValue, alt: "" });
+    }, [isActive, textColor, palette.textContrast, palette.textSecondary]);
+    return (jsxs(FilterChip, { "$isActive": isActive, "$bgColor": bgColor, "$textColor": textColor, ...props, children: [icon && jsx(ChipIconWrapper, { children: renderIcon(icon) }), jsx(ChipText, { "$maxTextWidth": maxTextWidth, children: text })] }));
+};
+
+const ChipsFilter = ({ type, filter, elementConfig, }) => {
+    const { filters, dataSources, changeFilters } = useWidgetContext(type);
+    const { currentPage } = useWidgetPage(type);
+    const theme = useTheme();
+    const { filters: configFilters } = currentPage;
+    const { options } = elementConfig || {};
+    const { align } = options || {};
+    const { filterName, colorAttribute, iconAttribute, maxTextWidth, icon, fontColor, backgroundColor, } = filter.options;
+    const configFilter = getConfigFilter(filterName, configFilters);
+    const multiSelect = configFilter?.valueType === "array";
+    // Process icon URL (resourceId or direct URL)
+    const processedIcon = icon ? getResourceUrl(icon) : undefined;
+    const chipOptions = useMemo(() => {
+        if (!configFilter)
+            return [];
+        const dataSource = getDataSource(configFilter.relatedDataSource, dataSources);
+        if (!dataSource?.features)
+            return [];
+        const features = dataSource.features;
+        return features.map(feature => {
+            const attrs = feature.attributes;
+            const text = attrs[configFilter.attributeAlias || DEFAULT_ATTRIBUTE_NAME];
+            const value = attrs[configFilter.attributeValue || DEFAULT_ATTRIBUTE_NAME];
+            const chipIcon = iconAttribute
+                ? getIconFromAttribute(attrs, iconAttribute)
+                : undefined;
+            const chipColor = colorAttribute
+                ? getColorFromAttribute(attrs, colorAttribute, theme)
+                : undefined;
+            return {
+                text,
+                value,
+                color: chipColor,
+                icon: chipIcon,
+            };
+        });
+    }, [configFilter, dataSources, colorAttribute, iconAttribute, theme]);
+    const isChipActive = useCallback((chipValue) => {
+        const currentValue = filters?.[filterName]?.value;
+        if (currentValue === undefined) {
+            return checkEqualOrIncludes(configFilter?.defaultValue, chipValue);
+        }
+        return checkEqualOrIncludes(currentValue, chipValue);
+    }, [filters, filterName, configFilter]);
+    const handleChipClick = useCallback((chipValue) => {
+        const currentValue = filters?.[filterName]?.value;
+        let newValue;
+        if (multiSelect) {
+            const currentArray = Array.isArray(currentValue)
+                ? currentValue
+                : currentValue
+                    ? [currentValue]
+                    : [];
+            const valueIndex = currentArray.indexOf(chipValue);
+            if (valueIndex >= 0) {
+                const filtered = currentArray.filter(v => v !== chipValue);
+                if (filtered.length === 0) {
+                    newValue = configFilter?.defaultValue || null;
+                }
+                else {
+                    newValue = filtered;
+                }
+            }
+            else {
+                newValue = [...currentArray, chipValue];
+            }
+        }
+        else {
+            if (currentValue === chipValue) {
+                newValue = configFilter?.defaultValue || null;
+            }
+            else {
+                newValue = chipValue;
+            }
+        }
+        changeFilters({
+            [filterName]: { value: newValue },
+        });
+    }, [filters, filterName, multiSelect, changeFilters, configFilter]);
+    if (!configFilter)
+        return null;
+    return (jsx(ChipsContainer, { "$align": align, children: chipOptions.map((chip, index) => {
+            const isActive = isChipActive(chip.value);
+            // Use chip.icon from attribute or fallback to static icon
+            const chipIcon = chip.icon || processedIcon;
+            return (jsx(CustomChip, { text: chip.text, icon: chipIcon, color: chip.color, isActive: isActive, maxTextWidth: maxTextWidth, fontColor: fontColor, backgroundColor: backgroundColor, onClick: () => handleChipClick(chip.value), title: chip.text }, index));
+        }) }));
+};
+function getColorFromAttribute(option, colorAttribute, theme) {
+    const value = option[colorAttribute];
+    // If value is already a hex color (starts with #), return it directly
+    if (value && typeof value === 'string' && value.startsWith('#')) {
+        return value;
+    }
+    // Otherwise, map string values to theme colors
+    const colorMap = {
+        active: theme?.message?.color?.success,
+        warning: theme?.message?.color?.warning,
+        info: theme?.message?.color?.info,
+        inactive: theme?.palette?.textDisabled,
+    };
+    return value && typeof value === 'string' ? colorMap[value.toLowerCase()] : undefined;
+}
+function getIconFromAttribute(option, iconAttribute) {
+    const iconValue = option[iconAttribute];
+    if (!iconValue || typeof iconValue !== 'string') {
+        return undefined;
+    }
+    // Process through getResourceUrl to handle both URLs and resourceIds
+    return getResourceUrl(iconValue);
+}
+
 const getFilterComponent = (filterType) => {
     switch (filterType) {
         case "checkbox":
@@ -8415,6 +8902,8 @@ const getFilterComponent = (filterType) => {
             return RangeDateFilter;
         case "text":
             return TextFilter;
+        case "chips":
+            return ChipsFilter;
         case "dropdown":
         default:
             return DropdownFilter;
@@ -8600,7 +9089,9 @@ const getRenderElement = ({ t, config, elementConfig, attributes = [], layerInfo
     return formatElementValue({ t, value, elementConfig: element, attributes, wrap });
 };
 
-const getResourceUrl = (url) => url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
+const getResourceUrl = (url) => {
+    return url ? (url.startsWith("http") ? url : `/sp/resources/file/${url}`) : "";
+};
 
 const getSlideshowImages = ({ element, attribute, }) => {
     const { defaultValue, options } = element;
@@ -9580,7 +10071,7 @@ const Chart = memo(({ config, element, elementConfig, type, renderElement }) =>
     return (jsx(ChartWrapper, { width: width, height: isStackBar ? "auto" : isPieChart ? width : height, column: column, loading: loading, children: renderChart }));
 });
 
-const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
+const ChartLegend = ({ data, chartElement, fontSize, type, twoColumns, loading }) => {
     const { t } = useGlobalContext();
     const { sliceItems, showMore, onShowMore } = useShownOtherItems(chartElement?.options);
     const axes = useMemo(() => getChartAxes(chartElement), [chartElement]);
@@ -9589,7 +10080,7 @@ const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
         return null;
-    return (jsxs(Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
+    return (jsxs(Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsx(ChartLegendColor, { color: color }), jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsx(LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
 };
 
 const ContainerChildren = memo(({ items, isColumn, isMain, renderElement }) => {
@@ -9601,7 +10092,7 @@ const ContainerChildren = memo(({ items, isColumn, isMain, renderElement }) => {
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(Fragment, { children: render }, index));
+            return isMain ? (jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(InnerContainerWrapper$1, { id: item.id, children: render }, index));
         }) }));
 });
 
@@ -10090,5 +10581,5 @@ const Map$1 = ({ zIndex, lowerSiblings, upperSiblings, onError, children, ...res
                 }, children: children }), upperSiblings] }));
 };
 
-export { AddFeatureButton, AddFeatureContainer, AttributeGalleryContainer, AttributeLabel, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, TwoColumnsInnerContainer, WidgetType, addDataSource, addDataSources, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useGetConfigLayer, useGlobalContext, useHeaderRender, useLayerParams, useMapContext, useMapDraw, useProjectDashboardInit, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
+export { AddFeatureButton, AddFeatureContainer, AttributeGalleryContainer, AttributeLabel, BaseMapTheme, CONFIG_PAGES_ID, CONFIG_PAGE_ID, CameraContainer, Chart, ChartContainer, ChartLegend, ChartLoading, ContainerChildren, ContainerLoading, ContainerTemplate, ContainerWrapper, ContainersGroupContainer, DEFAULT_ATTRIBUTE_NAME, DEFAULT_BARCHART_RADIUS, DEFAULT_BASE_MAP, DEFAULT_CHART_ANGLE, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CIRCLE_PAINT, DEFAULT_DASHBOARD_CONFIG, DEFAULT_DATA_SOURCE_LIMIT, DEFAULT_FILL_EXTRUSION_PAINT, DEFAULT_FILL_PAINT, DEFAULT_ID_ATTRIBUTE_NAME, DEFAULT_LAT, DEFAULT_LINE_PAINT, DEFAULT_LNG, DEFAULT_PAGES_CONFIG, DEFAULT_PIECHART_RADIUS, DEFAULT_ZOOM, Dashboard, DashboardCheckbox, DashboardChip, DashboardContent, DashboardContext, DashboardDefaultHeader, DashboardHeader, DashboardLoading, DashboardPlaceholder, DashboardPlaceholderWrap, DashboardProvider, DashboardWrapper, DataSourceContainer, DataSourceError, DataSourceErrorContainer, DataSourceInnerContainer, DataSourceProgressContainer, DateFormat, DefaultAttributesContainer, DefaultHeaderContainer, DefaultHeaderWrapper, DividerContainer, EditGeometryType, ElementButton, ElementCamera, ElementChart, ElementChips, ElementIcon, ElementImage, ElementLegend, ElementLink, ElementMarkdown, ElementSlideshow, ElementSvg, ElementTooltip, ElementValueWrapper, ExpandableTitle, FEATURE_CARD_DEFAULT_COLORS, FEATURE_CARD_OTHER_COLOR, FILTERED_VALUE_OPACITY, FILTER_PREFIX, FeatureCardButtons, FeatureCardContext, FeatureCardDefaultHeader, FeatureCardGradientHeader, FeatureCardHeader, FeatureCardIconHeader, FeatureCardProvider, FeatureCardSlideshowHeader, FeatureCardTitle, FeatureControls, FeatureTitleContainer, FiltersContainer, GEOMETRY_ATTRIBUTE, GlobalContext, GlobalProvider, Header, HeaderContainer, HeaderFrontView, HeaderTemplate, HeaderTitleContainer, HiddenTitleItems, IconContainer, ImageContainer, InnerContainerWrapper$1 as InnerContainerWrapper, LEFT_PANEL_HEADER_HEIGHT, Layer, LayerDescription, LayerGroup, LayerGroupList, LayerIcon, LayerListContainer, LayerTree, LayersContainer, LayersListWrapper, LinearProgressContainer, LogoContainer, MAX_CHART_WIDTH, Map$1 as Map, MapContext, MapProvider, NO_CONTENT_VALUE, NUMERIC_ATTRIBUTE_TYPES, NoLiveSnapshotContainer, OneColumnContainer, PageNavigator, PageTitle, PagesContainer, Pagination, PresentationHeader, PresentationHeaderButtons, PresentationHeaderTools, PresentationPanelContainer, PresentationPanelWrapper, PresentationWrapper, ProgressContainer, RoundedBackgroundContainer, ScalingFactor, ServerNotificationsContext, ServerNotificationsProvider, SlideshowContainer, SmallPreviewContainer$1 as SmallPreviewContainer, SmallPreviewControl, SmallPreviewCounter, SmallPreviewImages, SmallPreviewLeft, SmallPreviewRight, StackBar, SvgImage, TIME_ZONE_FORMAT, TabsContainer, TextTrim, ThemeName, TitleContainer, TmsType, TopContainer, TopContainerButtons, TwoColumnContainer, TwoColumnsInnerContainer, WidgetType, addDataSource, addDataSources, applyFiltersToCondition, applyQueryFilters, applyVarsToCondition, checkEqualOrIncludes, checkIsLoading, convertSpToTurfFeature, createConfigLayer, createConfigPage, createNewPageId, createTreeNode, dateOptions, debounce, decimalOpacityToHex, eqlParametersToPayload, findAttributeInExpression, formatArea, formatAttributeValue, formatChartRelatedValue, formatConditionValue, formatDataSourceCondition, formatDate$1 as formatDate, formatElementValue, formatLength, formatNumber, formatPolygonMeasure, getActualExtrusionHeight, getAttributeByName, getAttributeValue, getAttributesConfiguration, getChartAxes, getChartFilterName, getChartMarkers, getConfigFilter, getContainerComponent, getDashboardHeader, getDataFromAttributes, getDataFromRelatedFeatures, getDataSource, getDataSourceFilterValue, getDate, getDefaultConfig, getElementValue, getFeatureAttributes, getFeatureCardHeader, getFilterComponent, getFilterSelectedItems, getFilterValue, getFormattedAttributes, getGradientColors, getLayerDefinition, getLayerInfo, getLayerInfoFromDataSources, getPagesFromConfig, getPagesFromProjectInfo, getProxyService, getRelatedAttribute, getRenderElement, getResourceUrl, getRootElementId, getSelectedFilterValue, getSlideshowImages, getSvgUrl, getTotalFromAttributes, getTotalFromRelatedFeatures, hexToRgba, isCompositeLayerConfiguration, isEmptyElementValue, isEmptyValue, isHiddenEmptyValue, isLayerService, isNotValidSelectedTab, isNumeric, isObject, isProxyService, isVisibleContainer, numberOptions, parseClientStyle, pieChartTooltipFromAttributes, pieChartTooltipFromRelatedFeatures, pointOptions, removeDataSource, rgbToHex, roundTotalSum, sliceShownOtherItems, timeOptions, tooltipNameFromAttributes, tooltipValueFromAttributes, tooltipValueFromRelatedFeatures, transparentizeColor, treeNodesToProjectItems, useAppHeight, useChartChange, useChartData, useDashboardHeader, useDataSources, useDebouncedCallback, useDiffPage, useExpandableContainers, useExportPdf, useGetConfigLayer, useGlobalContext, useHeaderRender, useLayerParams, useMapContext, useMapDraw, useProjectDashboardInit, useRedrawLayer, useRelatedDataSourceAttributes, useRenderElement, useServerNotificationsContext, useShownOtherItems, useToggle, useUpdateDataSource, useWidgetConfig, useWidgetContext, useWidgetFilters, useWidgetPage, useWindowResize, useZoomToFeatures, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map