@evergis/react 3.1.41 → 3.1.46

package/dist/index.js

@@ -22,6 +22,8 @@ var MapGL = require('react-map-gl/mapbox');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 require('mapbox-gl/dist/mapbox-gl.css');
 var react = require('swiper/react');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
 
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
@@ -4448,24 +4450,48 @@ const formatDataSourceCondition = ({ condition, configFilters, filters, attribut
 const DashboardChipsContainer = styled(uilibGl.Flex) `
   flex-wrap: wrap;
 `;
+const DefaultChipColorMixin = styled.css `
+  && {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && > * {
+    color: ${({ theme: { palette } }) => palette.textPrimary};
+  }
+
+  && span[kind]:after {
+    color: ${({ theme: { palette } }) => palette.icon};
+  }
+`;
+const CustomChipColorMixin = styled.css `
+  && {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && > * {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+
+  && span[kind]:after {
+    color: ${({ $fontColor }) => $fontColor};
+  }
+`;
 const DashboardChip$1 = styled(uilibGl.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;
     }
   }
@@ -4474,6 +4500,9 @@ const DashboardChip$1 = styled(uilibGl.Chip) `
     width: auto;
     padding: 0 0.5rem;
   }
+
+  ${({ $isDefault }) => $isDefault && DefaultChipColorMixin}
+  ${({ $fontColor, $isDefault }) => !!$fontColor && !$isDefault && CustomChipColorMixin}
 `;
 
 const ChartLegendContainer = styled(uilibGl.Flex) `
@@ -4500,7 +4529,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};
 `;
 
@@ -5040,7 +5069,7 @@ const LayerGroup = ({ group, onlyMainTools }) => {
     if (!group) {
         return null;
     }
-    return (jsxRuntime.jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxRuntime.jsxs(LayerGroupMain, { children: [jsxRuntime.jsx(uilibGl.Icon, { kind: group.isExpanded ? "tree_folder_open" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxRuntime.jsxs(uilibGl.Description, { children: [jsxRuntime.jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsxRuntime.jsx(uilibGl.IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsxRuntime.jsx(uilibGl.Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsxRuntime.jsx(uilibGl.Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
+    return (jsxRuntime.jsx(LayerGroupContainer, { visible: group.isVisible, children: jsxRuntime.jsxs(LayerGroupMain, { children: [jsxRuntime.jsx(uilibGl.Icon, { kind: group.isExpanded ? "tree_folder_opened" : "tree_folder_closed", style: { color: group.clientData.color } }), jsxRuntime.jsxs(uilibGl.Description, { children: [jsxRuntime.jsx("div", { style: { wordBreak: "break-word" }, children: group?.alias || group?.name }), jsxRuntime.jsx(uilibGl.IconButton, { kind: group.isExpanded ? "reduce" : "expand", onClick: () => onToggleExpand(group.name, !group.isExpanded) })] }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { flexWrap: "nowrap", p: "0 0.5rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: group.isVisible ? "password_show" : "password_hide", className: "feature-visible", isSelected: group.isVisible, onClick: () => onToggleVisibility(group.name, !group.isVisible) }) }), !onlyMainTools && (jsxRuntime.jsx(uilibGl.Popup, { distance: -14, isVisible: isMenuOpen, onRequestClose: toggleMenu, anchor: ref => (jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.IconButton, { innerRef: ref, kind: "menu_vertical", onClick: toggleMenu }) })), children: jsxRuntime.jsx(uilibGl.Menu, { options: options, selectOption: selectOption }) }))] }) })] }) }));
 };
 
 const createTreeNode = (layer, Component, onlyMainTools) => {
@@ -5103,6 +5132,9 @@ const LayerListContainer = styled(uilibGl.Flex) `
 const ElementValueWrapper = styled.div `
   transition: background-color ${uilibGl.transition.toggle};
 `;
+const InnerContainerWrapper$1 = styled.div `
+  width: 100%;
+`;
 const ContainerWrapper = styled(uilibGl.Flex) `
   position: relative;
   min-height: 1rem;
@@ -6171,12 +6203,29 @@ const SvgContainer = styled.div `
 const ContainerIconTitle = styled(uilibGl.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;
   }
 
@@ -6197,6 +6246,17 @@ const ContainerIconTitle = styled(uilibGl.Flex) `
   ${uilibGl.LegendToggler} {
     margin-left: 0.25rem;
   }
+  
+  span[kind="download"] {
+    opacity: 0;
+    transition: opacity ${uilibGl.transition.hover};
+  }
+  
+  :hover {
+    span[kind="download"] {
+      opacity: 1;
+    }
+  }
 `;
 const ContainerTitle = styled(uilibGl.Flex) `
   align-items: center;
@@ -6232,8 +6292,9 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const [layersVisibility, toggleVisibility] = useToggle(true);
     const { palette } = styled.useTheme();
     const { style, options } = elementConfig || {};
-    const { simple } = options || {};
+    const { simple, downloadById } = options || {};
     const isLayers = templateName === exports.ContainerTemplate.Layers;
+    const { onExport } = useExportPdf(downloadById);
     const onClick = React.useCallback(() => {
         if (!expandable)
             return;
@@ -6248,7 +6309,7 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
     const renderVisibility = React.useMemo(() => isLayers && (jsxRuntime.jsx(uilibGl.FlexSpan, { mr: "-1rem", children: jsxRuntime.jsx(uilibGl.IconToggle, { kind: layersVisibility ? "password_show" : "password_hide", className: "feature-visible", isSelected: layersVisibility, onClick: onToggleVisibility }) })), [isLayers, layersVisibility, onToggleVisibility]);
     const renderToggler = React.useMemo(() => !!containerId &&
         expandable && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(uilibGl.LegendToggler, { color: palette.icon, toggled: expandedContainers?.[containerId] !== undefined ? expandedContainers[containerId] : expanded, onClick: onClick }) })), [containerId, expandable, expanded, expandedContainers, onClick, palette.icon]);
-    return (jsxRuntime.jsx(Container, { isTitle: isVisible, style: style, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
+    return (jsxRuntime.jsx(Container, { isTitle: isVisible, style: style, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
 });
 
 const ContainerDivider = styled(uilibGl.Divider) `
@@ -7437,7 +7498,7 @@ const ElementImage = React.memo(({ type, elementConfig }) => {
 const ElementLegend = React.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 = React.useMemo(() => findAnd.returnFound(element?.children, { id: chartId }), [chartId, element?.children]);
     const { data, loading } = useChartData({
         element: chartElement,
@@ -7464,7 +7525,7 @@ const ElementLegend = React.memo(({ type, element, elementConfig, expandedContai
                 return { ...item, name: attribute?.alias || item.name };
             });
     }, [attributes, axes, data, options.chartType, relatedDataSources, dataSources]);
-    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, type: type })) : null;
+    return !chartElement?.options?.expanded || expandedContainers?.[chartElement.id] ? (jsxRuntime.jsx(ChartLegend, { data: legendData, loading: loading, chartElement: chartElement, twoColumns: twoColumns, fontSize: fontSize, type: type })) : null;
 });
 
 const ExternalLink = styled(uilibGl.IconButton).attrs(() => ({
@@ -7535,6 +7596,169 @@ const ElementLink = React.memo(({ type, elementConfig }) => {
     return link.startsWith("http") ? jsxRuntime.jsx(ExternalLink, { onClick: () => window.open(link) }) : jsxRuntime.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(uilibGl.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(uilibGl.IconButton) `
+  margin-bottom: 1rem;
+`;
+
+const ElementMarkdown = React.memo(({ elementConfig, type }) => {
+    const { attributes } = useWidgetContext(type);
+    const { t } = useGlobalContext();
+    const [expanded, setExpanded] = React.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 (jsxRuntime.jsx(MarkdownWrapper, { children: jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString }) }));
+    }
+    // Truncated content for collapsed state
+    const truncatedContent = markdownString.substring(0, expandLength);
+    // Collapsed state
+    if (!expanded) {
+        return (jsxRuntime.jsxs(MarkdownWrapper, { children: [jsxRuntime.jsx(ExpandButton, { primary: true, icon: jsxRuntime.jsx(uilibGl.Expander, { isSelected: false }), onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) }), jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: truncatedContent })] }));
+    }
+    // Expanded state
+    return (jsxRuntime.jsxs(MarkdownWrapper, { children: [jsxRuntime.jsx(ExpandButton, { primary: true, icon: jsxRuntime.jsx(uilibGl.Expander, { isSelected: true }), onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) }), jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: markdownString })] }));
+});
+
 const SmallPreviewContainer = styled.div `
   width: 100%;
   height: 100%;
@@ -7814,6 +8038,7 @@ const elementComponents = {
     camera: ElementCamera,
     chart: ElementChart,
     legend: ElementLegend,
+    markdown: ElementMarkdown,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -8405,6 +8630,268 @@ const RangeDateFilter = ({ type, filter }) => {
     return (jsxRuntime.jsx(uilibGl.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: jsxRuntime.jsx(uilibGl.Icon, { kind: "date", disabled: true }), suffix: !isEmpty && !isDefault && jsxRuntime.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(uilibGl.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 = styled.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 = React.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 jsxRuntime.jsx(uilibGl.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 (jsxRuntime.jsx(SvgImage, { url: iconValue, width: 14, height: 14, fontColor: iconColor }));
+        }
+        // Otherwise, it's a regular image
+        return jsxRuntime.jsx("img", { src: iconValue, alt: "" });
+    }, [isActive, textColor, palette.textContrast, palette.textSecondary]);
+    return (jsxRuntime.jsxs(FilterChip, { "$isActive": isActive, "$bgColor": bgColor, "$textColor": textColor, ...props, children: [icon && jsxRuntime.jsx(ChipIconWrapper, { children: renderIcon(icon) }), jsxRuntime.jsx(ChipText, { "$maxTextWidth": maxTextWidth, children: text })] }));
+};
+
+const ChipsFilter = ({ type, filter, elementConfig, }) => {
+    const { filters, dataSources, changeFilters } = useWidgetContext(type);
+    const { currentPage } = useWidgetPage(type);
+    const theme = styled.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 = React.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 = React.useCallback((chipValue) => {
+        const currentValue = filters?.[filterName]?.value;
+        if (currentValue === undefined) {
+            return checkEqualOrIncludes(configFilter?.defaultValue, chipValue);
+        }
+        return checkEqualOrIncludes(currentValue, chipValue);
+    }, [filters, filterName, configFilter]);
+    const handleChipClick = React.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 (jsxRuntime.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 (jsxRuntime.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":
@@ -8417,6 +8904,8 @@ const getFilterComponent = (filterType) => {
             return RangeDateFilter;
         case "text":
             return TextFilter;
+        case "chips":
+            return ChipsFilter;
         case "dropdown":
         default:
             return DropdownFilter;
@@ -8602,7 +9091,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;
@@ -9582,7 +10073,7 @@ const Chart = React.memo(({ config, element, elementConfig, type, renderElement
     return (jsxRuntime.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 = React.useMemo(() => getChartAxes(chartElement), [chartElement]);
@@ -9591,7 +10082,7 @@ const ChartLegend = ({ data, chartElement, type, twoColumns, loading }) => {
     const showMoreBtn = !!shownItems && data.length > shownItems;
     if (!loading && !data?.length && !!hideEmpty)
         return null;
-    return (jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
+    return (jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", opacity: loading ? FILTERED_VALUE_OPACITY / 100 : 1, children: [jsxRuntime.jsx(ChartLegendContainer, { twoColumns: twoColumns, children: sliceItems(data)?.map(({ name, color }, index) => (jsxRuntime.jsxs(ChartLegendItem, { hasAnyFilter: hasAnyFilter, isFiltered: isFiltered(name), onClick: axes?.[0]?.filterName ? () => onFilter(name) : undefined, children: [jsxRuntime.jsx(ChartLegendColor, { color: color }), jsxRuntime.jsx(ChartLegendName, { "$fontSize": fontSize, "$fontColor": fontColor, children: name })] }, index))) }), showMoreBtn && (jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: onShowMore, toggled: showMore, children: t("other", { ns: "dashboard", defaultValue: "Другое" }) }))] }));
 };
 
 const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }) => {
@@ -9603,7 +10094,7 @@ const ContainerChildren = React.memo(({ items, isColumn, isMain, renderElement }
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(React.Fragment, { children: render }, index));
+            return isMain ? (jsxRuntime.jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsxRuntime.jsx(DashboardWrapper, { children: render }) }, index)) : (jsxRuntime.jsx(InnerContainerWrapper$1, { id: item.id, children: render }, index));
         }) }));
 });
 
@@ -10154,6 +10645,7 @@ exports.ElementIcon = ElementIcon;
 exports.ElementImage = ElementImage;
 exports.ElementLegend = ElementLegend;
 exports.ElementLink = ElementLink;
+exports.ElementMarkdown = ElementMarkdown;
 exports.ElementSlideshow = ElementSlideshow;
 exports.ElementSvg = ElementSvg;
 exports.ElementTooltip = ElementTooltip;
@@ -10185,6 +10677,7 @@ exports.HeaderTitleContainer = HeaderTitleContainer;
 exports.HiddenTitleItems = HiddenTitleItems;
 exports.IconContainer = IconContainer;
 exports.ImageContainer = ImageContainer;
+exports.InnerContainerWrapper = InnerContainerWrapper$1;
 exports.LEFT_PANEL_HEADER_HEIGHT = LEFT_PANEL_HEADER_HEIGHT;
 exports.Layer = Layer;
 exports.LayerDescription = LayerDescription;