@mailstep/design-system 0.8.52 → 0.9.1

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/LabelsLine.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { JSX } from 'react';
+export interface LabelsLineProps {
+    label: React.ReactNode;
+    value: number | string;
+    color: string;
+}
+export declare const LabelsLine: ({ label, value, color }: LabelsLineProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/LabelsLine.js

@@ -0,0 +1,14 @@
+import styles_default from "../styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/LabelsLine.tsx
+const BoldSpan = styled.span`
+  font-weight: bold;
+`;
+const LabelsLine = ({ label, value, color }) => /* @__PURE__ */ jsxs(styles_default.LabelsContainer, {
+	color,
+	children: [/* @__PURE__ */ jsx(BoldSpan, { children: label }), /* @__PURE__ */ jsx("span", { children: value })]
+});
+//#endregion
+export { LabelsLine };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/ProgressLine.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export interface ProgressLineProps {
+    percent: number;
+    color: string;
+    backgroundColor: string;
+}
+export declare const ProgressLine: ({ percent, color, backgroundColor }: ProgressLineProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/ProgressLine.js

@@ -0,0 +1,14 @@
+import styles_default from "../styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/components/ProgressLine.tsx
+const ProgressLine = ({ percent, color, backgroundColor }) => /* @__PURE__ */ jsx(styles_default.ProgressContainer, {
+	bgColor: backgroundColor,
+	children: /* @__PURE__ */ jsx(styles_default.Progress, {
+		color,
+		percent,
+		children: /* @__PURE__ */ jsx(styles_default.Circle, { color })
+	})
+});
+//#endregion
+export { ProgressLine };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/index.d.ts

@@ -0,0 +1,4 @@
+import HorizontalBar from './HorizontalBar';
+export * from './HorizontalBar';
+export * from './Config';
+export default HorizontalBar;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/index.js

@@ -0,0 +1,6 @@
+import HorizontalBar from "./HorizontalBar.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/index.tsx
+var HorizontalBar_default = HorizontalBar;
+//#endregion
+export { Config, HorizontalBar_default as default };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/storybook.sample.d.ts

@@ -0,0 +1,2 @@
+import { HorizontalBarProps } from './types';
+export declare const horizontalBarData: HorizontalBarProps['data'];

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/storybook.sample.js

@@ -0,0 +1,33 @@
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/storybook.sample.ts
+const horizontalBarData = [
+	{
+		id: "1",
+		label: "Resolved",
+		percent: 70,
+		value: 69e3,
+		color: "linear-gradient(90deg, rgba(60,186,146,1) 0%, rgba(13,164,98,1) 100%)"
+	},
+	{
+		id: "2",
+		label: "In progress",
+		percent: 30,
+		value: 2500,
+		color: "linear-gradient(90deg, rgba(119,119,255,1) 0%, rgba(92,26,195,1) 100%)"
+	},
+	{
+		id: "3",
+		label: "Pending",
+		percent: 20,
+		value: 8500,
+		color: "linear-gradient(90deg, rgba(226,160,63,1) 0%, rgba(250,108,69,1) 100%)"
+	},
+	{
+		id: "4",
+		label: "Others",
+		percent: 9,
+		value: 500,
+		color: "green"
+	}
+];
+//#endregion
+export { horizontalBarData };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/styles.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    Title: import("styled-components").StyledComponent<"h2", any, {}, never>;
+    Description: import("styled-components").StyledComponent<"h3", any, {}, never>;
+    LabelsContainer: import("styled-components").StyledComponent<"div", any, {
+        color: string;
+    }, never>;
+    ProgressContainer: import("styled-components").StyledComponent<"div", any, {
+        bgColor: string;
+    }, never>;
+    Progress: import("styled-components").StyledComponent<"div", any, {
+        percent: number;
+        color: string;
+    }, never>;
+    Circle: import("styled-components").StyledComponent<"div", any, {
+        color: string;
+    }, never>;
+};
+export default _default;

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/styles.js

@@ -0,0 +1,58 @@
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/styles.ts
+var styles_default = {
+	Title: styled.h2`
+    padding: 0;
+    margin: 0;
+  `,
+	Description: styled.h3`
+    padding: 0;
+    margin: 0;
+    opacity: 0.8;
+    margin-bottom: 25px;
+  `,
+	LabelsContainer: styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    > * {
+      color: ${(props) => props.color};
+      background: ${(props) => props.color};
+      // Compatibility for gradient colors
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  `,
+	ProgressContainer: styled.div`
+    height: 17px;
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 15px;
+    border-radius: 10px;
+    background-color: ${(props) => props.bgColor};
+    opacity: 0.9;
+    :hover {
+      opacity: 1;
+    }
+  `,
+	Progress: styled.div`
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 100%;
+    width: ${(props) => `${props.percent}%`};
+    background: ${(props) => `${props.color}`};
+    border-radius: inherit;
+    padding-right: 5px;
+  `,
+	Circle: styled.div`
+    background: ${(props) => `${props.color}`};
+    border: 3px solid #fff;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+  `
+};
+//#endregion
+export { styles_default as default };

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/types.d.ts

@@ -0,0 +1,13 @@
+import { WidgetComponentProps } from '../../../types';
+export type HorizontalBarRow = {
+    id: string;
+    label: React.ReactNode;
+    value: number;
+    percent: number;
+    color?: string;
+    backgroundColor?: string;
+};
+export interface HorizontalBarProps extends WidgetComponentProps<HorizontalBarRow[]> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Modules/Dashboard/components/Widgets/NumberBox/Config.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { MultiConfigProps } from '../../Config/MultiConfig';
+export type NumberBoxConfigProps = MultiConfigProps;
+export declare const Config: ({ sources, ...configProps }: NumberBoxConfigProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/Config.js

@@ -0,0 +1,38 @@
+import { useText } from "../../Text/Text.js";
+import { MultiConfig } from "../../Config/MultiConfig.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/Config.tsx
+const unitOptions = [
+	"%",
+	"ks",
+	"$",
+	"h",
+	"m"
+].map((unit) => ({
+	label: unit,
+	value: unit
+}));
+const defaultSources = [];
+const Config = ({ sources = defaultSources, ...configProps }) => {
+	const labelSelectUnit = useText("widgets.selectUnit");
+	return /* @__PURE__ */ jsx(MultiConfig, {
+		sources: useMemo(() => {
+			const unitFilter = {
+				name: "unit",
+				label: labelSelectUnit,
+				options: unitOptions
+			};
+			return sources.map((source) => {
+				const { filters = [], ...rest } = source;
+				return {
+					filters: [unitFilter].concat(filters),
+					...rest
+				};
+			});
+		}, [labelSelectUnit, sources]),
+		...configProps
+	});
+};
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/NumberBox/NumberBox.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import { WidgetComponentProps, NumberClickCallback } from '../../../types';
+export type Props = WidgetComponentProps<number, NumberClickCallback>;
+declare const NumberBox: ({ data, isLoading, error, onValueClick, config, innerRef }: Props) => JSX.Element;
+export default NumberBox;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/NumberBox.js

@@ -0,0 +1,38 @@
+import styles_default from "../../../styles.js";
+import Text from "../../Text/Text.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import { StyledNumberBox, StyledNumberBoxNumber } from "./styles.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/NumberBox.tsx
+const NumberBox = ({ data, isLoading, error, onValueClick, config = {}, innerRef }) => {
+	const formatedNumber = String(data).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+	const unit = config?.unit || "";
+	const onClick = React.useCallback(() => onValueClick?.(data, config), [
+		onValueClick,
+		data,
+		config
+	]);
+	return /* @__PURE__ */ jsx(LoadingBoundary, {
+		isLoading,
+		error,
+		children: /* @__PURE__ */ jsxs(styles_default.ItemContent, {
+			ref: innerRef,
+			children: [!data && data != 0 && /* @__PURE__ */ jsx(NoData_default, {}), /* @__PURE__ */ jsx(StyledNumberBox, { children: /* @__PURE__ */ jsxs(StyledNumberBoxNumber, {
+				onClick: onValueClick && onClick,
+				children: [/* @__PURE__ */ jsx("svg", {
+					height: "50%",
+					viewBox: `0 0 ${(String(data).length + unit.length) * 12 || "12"} 17`,
+					children: /* @__PURE__ */ jsxs("foreignObject", { children: [data || data === 0 ? formatedNumber : "?", unit] })
+				}), /* @__PURE__ */ jsx("svg", {
+					height: "30%",
+					viewBox: `0 0 ${String(config?.sourceLabel?.length * 12 || "100")} 17`,
+					children: /* @__PURE__ */ jsx("foreignObject", { children: config?.sourceLabel || /* @__PURE__ */ jsx(Text, { code: "widgets.selectSource" }) })
+				})]
+			}) })]
+		})
+	});
+};
+//#endregion
+export { NumberBox as default };

package/ui/Modules/Dashboard/components/Widgets/NumberBox/index.d.ts

@@ -0,0 +1,4 @@
+import NumberBox from './NumberBox';
+export * from './NumberBox';
+export * from './Config';
+export default NumberBox;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/index.js

@@ -0,0 +1,6 @@
+import NumberBox from "./NumberBox.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/index.ts
+var NumberBox_default = NumberBox;
+//#endregion
+export { Config, NumberBox_default as default };

package/ui/Modules/Dashboard/components/Widgets/NumberBox/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledNumberBox: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledNumberBoxNumber: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    onClick?: () => void;
+}, never>;

package/ui/Modules/Dashboard/components/Widgets/NumberBox/styles.js

@@ -0,0 +1,25 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/NumberBox/styles.ts
+const StyledNumberBox = styled$1.div`
+  width: 100%;
+  height: 100%;
+`;
+const StyledNumberBoxNumber = styled$1.div`
+  height: 100%;
+  text-align: center;
+  color: black;
+  cursor: ${(props) => props.onClick ? "pointer" : "auto"};
+  &:hover{
+    opacity: ${(props) => props.onClick ? "0.5" : "1"};
+  }
+  &>svg {
+      width: 100%;
+      & > foreignObject {
+        width: 100%;
+        height: 100%;
+        
+      }
+  }
+`;
+//#endregion
+export { StyledNumberBox, StyledNumberBoxNumber };

package/ui/Modules/Dashboard/components/Widgets/PieChart/Config.d.ts

@@ -0,0 +1 @@
+export declare const Config: ({ onChange, config, sources }: import("../../..").MultiConfigProps) => import("react").JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/PieChart/Config.js

@@ -0,0 +1,5 @@
+import { MultiConfig } from "../../Config/MultiConfig.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/Config.tsx
+const Config = MultiConfig;
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/PieChart/PieChart.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { DefaultRawDatum } from '@nivo/pie';
+import { WidgetComponentProps } from '../../../types';
+import { Colors } from '../utils/helpers';
+import { CenteredMetricProps } from './components/CenteredMetric';
+interface PieDataRow extends DefaultRawDatum {
+    label: string;
+}
+export type Props = WidgetComponentProps<PieDataRow[]> & {
+    centeredMetric?: (props: CenteredMetricProps) => JSX.Element;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    text?: string;
+    hasLegend?: boolean;
+    legendRowMaxLength?: number;
+    colors?: Colors;
+};
+declare const _default: React.MemoExoticComponent<({ data, isLoading, error, title, subtitle, description, text, hasLegend, legendRowMaxLength, centeredMetric, colors, innerRef, }: Props) => JSX.Element>;
+export default _default;

package/ui/Modules/Dashboard/components/Widgets/PieChart/PieChart.js

@@ -0,0 +1,59 @@
+import styles_default from "../../../styles.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import { createLegendData } from "../utils/legends.js";
+import { createWidgetColors } from "../utils/generic.js";
+import { getColorStringArray } from "../utils/helpers.js";
+import { Description, OtherText, Subtitle, Title, Wrapper, WrapperText, layers, margin } from "./styles.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+import { ResponsivePie } from "@nivo/pie";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/PieChart.tsx
+const defaultLegendRowMaxLength = 4;
+const Pie = ({ data = [], isLoading, error, title, subtitle, description, text, hasLegend = true, legendRowMaxLength = defaultLegendRowMaxLength, centeredMetric, colors, innerRef }) => {
+	const theme = useTheme();
+	const colorStringArray = React.useMemo(() => colors ? getColorStringArray(colors) : createWidgetColors("pieChartColor", 5), [theme, colors]);
+	const hasText = title || subtitle || description || text;
+	const legends = React.useMemo(() => {
+		if (!hasLegend) return void 0;
+		return createLegendData(data, colorStringArray, legendRowMaxLength);
+	}, [
+		hasLegend,
+		data,
+		colorStringArray
+	]);
+	return /* @__PURE__ */ jsx(LoadingBoundary, {
+		isLoading,
+		error,
+		children: /* @__PURE__ */ jsx(styles_default.ItemContent, {
+			ref: innerRef,
+			children: /* @__PURE__ */ jsxs(Wrapper, { children: [
+				hasText && /* @__PURE__ */ jsxs(WrapperText, { children: [
+					/* @__PURE__ */ jsx(Title, { children: title }),
+					/* @__PURE__ */ jsx(Subtitle, { children: subtitle }),
+					/* @__PURE__ */ jsx(Description, { children: description }),
+					/* @__PURE__ */ jsx(OtherText, { children: text })
+				] }),
+				(!data || data.length === 0) && /* @__PURE__ */ jsx(NoData_default, {}),
+				data && data.length > 0 && /* @__PURE__ */ jsx(ResponsivePie, {
+					data,
+					innerRadius: .55,
+					arcLinkLabelsThickness: 2,
+					activeOuterRadiusOffset: 6,
+					padAngle: 1,
+					sortByValue: true,
+					isInteractive: true,
+					animate: true,
+					margin,
+					colors: colorStringArray,
+					legends,
+					layers: layers(centeredMetric)
+				})
+			] })
+		})
+	});
+};
+var PieChart_default = React.memo(Pie);
+//#endregion
+export { PieChart_default as default };

package/ui/Modules/Dashboard/components/Widgets/PieChart/components/CenteredMetric.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+export interface CenteredMetricProps {
+    dataWithArc: {
+        value: number;
+    }[];
+    centerX: number;
+    centerY: number;
+}
+declare const CenteredMetric: ({ dataWithArc, centerX, centerY }: CenteredMetricProps) => JSX.Element;
+export default CenteredMetric;

package/ui/Modules/Dashboard/components/Widgets/PieChart/components/CenteredMetric.js

@@ -0,0 +1,24 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/components/CenteredMetric.tsx
+const style = {
+	fontSize: "40px",
+	fontWeight: 600,
+	color: "#333"
+};
+const CenteredMetric = ({ dataWithArc, centerX, centerY }) => {
+	let total = 0;
+	dataWithArc.forEach((datum) => {
+		total += datum.value;
+	});
+	return /* @__PURE__ */ jsx("text", {
+		x: centerX,
+		y: centerY,
+		textAnchor: "middle",
+		dominantBaseline: "central",
+		style,
+		children: total
+	});
+};
+//#endregion
+export { CenteredMetric as default };

package/ui/Modules/Dashboard/components/Widgets/PieChart/index.d.ts

@@ -0,0 +1,4 @@
+import PieChart from './PieChart';
+export * from './PieChart';
+export * from './Config';
+export default PieChart;

package/ui/Modules/Dashboard/components/Widgets/PieChart/index.js

@@ -0,0 +1,6 @@
+import PieChart_default$1 from "./PieChart.js";
+import { Config } from "./Config.js";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/index.tsx
+var PieChart_default = PieChart_default$1;
+//#endregion
+export { Config, PieChart_default as default };

package/ui/Modules/Dashboard/components/Widgets/PieChart/styles.d.ts

@@ -0,0 +1,14 @@
+import { DefaultRawDatum, PieLayer } from '@nivo/pie';
+export declare const margin: {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+export declare const layers: (centeredMetric?: ({ dataWithArc, centerX, centerY }: import("./components/CenteredMetric").CenteredMetricProps) => import("react").JSX.Element) => PieLayer<DefaultRawDatum>[];
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Subtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OtherText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/ui/Modules/Dashboard/components/Widgets/PieChart/styles.js

@@ -0,0 +1,47 @@
+import CenteredMetric from "./components/CenteredMetric.js";
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/PieChart/styles.ts
+const margin = {
+	top: 20,
+	bottom: 120,
+	right: 20,
+	left: 100
+};
+const layers = (centeredMetric = CenteredMetric) => [
+	"arcs",
+	"arcLabels",
+	"arcLinkLabels",
+	"legends",
+	centeredMetric
+];
+const Title = styled.div`
+  font-size: 30px;
+  color: #333;
+  margin-bottom: 35px;
+`;
+const Subtitle = styled.div`
+  font-size: 20px;
+  color: #999;
+  margin-bottom: 5px;
+`;
+const Description = styled.div`
+  font-size: 22px;
+  color: #333;
+  margin-bottom: 15px;
+`;
+const OtherText = styled.div`
+  font-size: 15px;
+  color: #aaa;
+`;
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`;
+const WrapperText = styled.div`
+  margin-right: 20px;
+  padding-left: 30px;
+  padding-top: 30px;
+`;
+//#endregion
+export { Description, OtherText, Subtitle, Title, Wrapper, WrapperText, layers, margin };

package/ui/Modules/Dashboard/components/Widgets/Table/Config.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import { MultiConfigProps } from '../../Config/MultiConfig';
+import { Source } from '../../../types';
+import { TableColumn } from './types';
+export type TableConfigProps = MultiConfigProps & {
+    columns?: TableColumn[];
+    sources?: Source[];
+};
+export declare const Config: ({ onChange, config, columns, sources }: TableConfigProps) => JSX.Element;

package/ui/Modules/Dashboard/components/Widgets/Table/Config.js

@@ -0,0 +1,87 @@
+import Button_default from "../../../../../Elements/Button/index.js";
+import styles_default from "../../../styles.js";
+import Text, { useText } from "../../Text/Text.js";
+import { MultiConfig } from "../../Config/MultiConfig.js";
+import useCondition from "./hooks/useCondition.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/Table/Config.tsx
+const Config = ({ onChange, config, columns, sources }) => {
+	const [add, remove, change] = useCondition(onChange, config);
+	const textAllColumns = useText("widgets.allColumns");
+	const textColumn = useText("widgets.column");
+	const textCondition = useText("widgets.condition");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MultiConfig, {
+		onChange,
+		config,
+		sources
+	}), /* @__PURE__ */ jsxs(styles_default.ConfigRow, {
+		isBlock: true,
+		children: [/* @__PURE__ */ jsxs(styles_default.ConfigLabel, { children: [/* @__PURE__ */ jsx(Text, { code: "widgets.conditions" }), ":"] }), /* @__PURE__ */ jsxs(styles_default.ConfigInput, { children: [config?.conditions?.map((cond, key) => /* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [
+			/* @__PURE__ */ jsxs(styles_default.Select, {
+				onChange: change(key, "column"),
+				value: cond.column || "",
+				width: "100px",
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: true,
+						children: textColumn
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "all",
+						children: textAllColumns
+					}),
+					columns?.map?.((column, index) => /* @__PURE__ */ jsx("option", {
+						value: column.key,
+						children: column.label
+					}, `${column.key}-${index}`))
+				]
+			}),
+			/* @__PURE__ */ jsxs(styles_default.Select, {
+				onChange: change(key, "comparator"),
+				value: cond.comparator || "",
+				width: "100px",
+				children: [
+					/* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: true,
+						children: textCondition
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "<",
+						children: "<"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: ">",
+						children: ">"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "=",
+						children: "="
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(styles_default.Input, {
+				onChange: change(key, "value"),
+				defaultValue: cond.value || "",
+				type: "text",
+				placeholder: "value",
+				width: "100px"
+			}),
+			/* @__PURE__ */ jsx(styles_default.Input, {
+				onChange: change(key, "color"),
+				defaultValue: cond.color || "",
+				type: "color"
+			}),
+			/* @__PURE__ */ jsx(Button_default, {
+				onClick: remove(key),
+				children: "🗑"
+			})
+		] }, key)), /* @__PURE__ */ jsx(Button_default, {
+			onClick: add,
+			children: "+"
+		})] })]
+	})] });
+};
+//#endregion
+export { Config };

package/ui/Modules/Dashboard/components/Widgets/Table/Table.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { TableProps } from './types';
+declare const Table: ({ data, columns, isLoading, error, onValueClick, onChange, onSaveConfigProps, config, hasPages, hasServerPages, hasSorting, hasServerSorting, innerRef, returnWidgetWithPaginationHeight, minRows, serverTotal, components, }: TableProps) => JSX.Element;
+export default Table;