@mailstep/design-system 0.8.52 → 0.9.1

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfigControls.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+interface ItemConfigProps {
+    onRemove: () => void;
+    onSave: () => void;
+    onCancel: () => void;
+}
+declare const ItemConfigControls: ({ onCancel, onSave, onRemove }: ItemConfigProps) => JSX.Element;
+export default ItemConfigControls;

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfigControls.js

@@ -0,0 +1,31 @@
+import styles_default from "../../../../styles.js";
+import Text from "../../../Text/Text.js";
+import ComponentContext from "../../../../context/ComponentContext.js";
+import React from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfigControls.tsx
+const ItemConfigControls = ({ onCancel, onSave, onRemove }) => {
+	const { Button } = React.useContext(ComponentContext);
+	return /* @__PURE__ */ jsxs(styles_default.WidgetConfigButtons, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: onRemove,
+		children: /* @__PURE__ */ jsx(Text, { code: "buttons.removeWidget" })
+	}), /* @__PURE__ */ jsxs(x.div, {
+		display: "flex",
+		gap: "8px",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				onClick: onCancel,
+				appearance: "secondary",
+				children: /* @__PURE__ */ jsx(Text, { code: "buttons.cancel" })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: onSave,
+				children: /* @__PURE__ */ jsx(Text, { code: "buttons.save" })
+			}),
+			" "
+		]
+	})] });
+};
+//#endregion
+export { ItemConfigControls as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/index.d.ts

@@ -0,0 +1,2 @@
+import ItemConfig from './ItemConfig';
+export default ItemConfig;

package/ui/Modules/Dashboard/components/Layout/components/ItemConfig/index.js

@@ -0,0 +1,5 @@
+import ItemConfig from "./ItemConfig.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemConfig/index.ts
+var ItemConfig_default = ItemConfig;
+//#endregion
+export { ItemConfig_default as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/ItemHeader.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import type { JSX } from 'react';
+import { WidgetDefinition, WidgetConfig } from '../../../../types';
+type DashboardItemProps = {
+    widget: WidgetDefinition;
+    config: WidgetConfig;
+    toggleConfigOpen: () => void;
+    dragHandleClassName: string;
+    headerRef: RefObject<HTMLDivElement>;
+};
+declare const ItemHeader: ({ widget, config, toggleConfigOpen, dragHandleClassName, headerRef, }: DashboardItemProps) => JSX.Element;
+export default ItemHeader;

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/ItemHeader.js

@@ -0,0 +1,27 @@
+import styles_default from "../../../../styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import MoveSvg from "../../../../assets/move.svg";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemHeader/ItemHeader.tsx
+const ItemHeader = ({ widget, config, toggleConfigOpen, dragHandleClassName, headerRef }) => {
+	const name = config?.name || widget.name;
+	const widgetIcon = widget.icon || null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: headerRef,
+		children: [
+			/* @__PURE__ */ jsx(styles_default.ItemMoveWrapper, {
+				className: dragHandleClassName,
+				children: /* @__PURE__ */ jsx("img", {
+					src: MoveSvg,
+					alt: "move-icon"
+				})
+			}),
+			/* @__PURE__ */ jsx(styles_default.ItemPanelButton, {
+				onClick: toggleConfigOpen,
+				children: "⋯"
+			}),
+			name && /* @__PURE__ */ jsxs(styles_default.ItemName, { children: [widgetIcon, name] })
+		]
+	});
+};
+//#endregion
+export { ItemHeader as default };

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/index.d.ts

@@ -0,0 +1,2 @@
+import ItemHeader from './ItemHeader';
+export default ItemHeader;

package/ui/Modules/Dashboard/components/Layout/components/ItemHeader/index.js

@@ -0,0 +1,5 @@
+import ItemHeader from "./ItemHeader.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemHeader/index.tsx
+var ItemHeader_default = ItemHeader;
+//#endregion
+export { ItemHeader_default as default };

package/ui/Modules/Dashboard/components/Layout/index.d.ts

@@ -0,0 +1,2 @@
+import LayoutContainer from './LayoutContainer';
+export default LayoutContainer;

package/ui/Modules/Dashboard/components/Layout/index.js

@@ -0,0 +1,5 @@
+import LayoutContainer from "./LayoutContainer.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/index.tsx
+var Layout_default = LayoutContainer;
+//#endregion
+export { Layout_default as default };

package/ui/Modules/Dashboard/components/NoData/NoData.d.ts

@@ -0,0 +1,2 @@
+declare const NoData: () => import("react/jsx-runtime").JSX.Element;
+export default NoData;

package/ui/Modules/Dashboard/components/NoData/NoData.js

@@ -0,0 +1,14 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import styles_default from "../../styles.js";
+import Text from "../Text/Text.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/NoData/NoData.tsx
+const NoData = () => {
+	return /* @__PURE__ */ jsxs(styles_default.NoData, { children: [/* @__PURE__ */ jsx(Icon, {
+		icon: "search",
+		size: "64px"
+	}), /* @__PURE__ */ jsx(Text, { code: "widgets.noData" })] });
+};
+//#endregion
+export { NoData as default };

package/ui/Modules/Dashboard/components/NoData/index.d.ts

@@ -0,0 +1,2 @@
+import NoData from './NoData';
+export default NoData;

package/ui/Modules/Dashboard/components/NoData/index.js

@@ -0,0 +1,5 @@
+import NoData from "./NoData.js";
+//#region packages/ui/Modules/Dashboard/components/NoData/index.ts
+var NoData_default = NoData;
+//#endregion
+export { NoData_default as default };

package/ui/Modules/Dashboard/components/Picker/Picker.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../types';
+export interface PickerProps {
+    onAdd: (code: string) => void;
+    widgetDefinitions: WidgetDefinition[];
+}
+declare const DashboardPicker: ({ onAdd, widgetDefinitions }: PickerProps) => JSX.Element;
+export default DashboardPicker;

package/ui/Modules/Dashboard/components/Picker/Picker.js

@@ -0,0 +1,38 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import styles_default from "../../styles.js";
+import Text from "../Text/Text.js";
+import DashboardPickerItem from "./components/PickerItem.js";
+import ComponentContext from "../../context/ComponentContext.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Picker/Picker.tsx
+const DashboardPicker = ({ onAdd, widgetDefinitions }) => {
+	const { Button } = React.useContext(ComponentContext);
+	const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+	const onPickerOpen = React.useCallback(() => {
+		setIsPickerOpen(true);
+	}, []);
+	const onClose = React.useCallback(() => {
+		setIsPickerOpen(false);
+	}, []);
+	const handleOnAdd = React.useCallback((code) => {
+		onAdd(code);
+		onClose();
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: onPickerOpen,
+		children: /* @__PURE__ */ jsx(Text, { code: "buttons.addWidget" })
+	}), isPickerOpen && /* @__PURE__ */ jsx(styles_default.PickerWrapper, { children: /* @__PURE__ */ jsxs(styles_default.Picker, { children: [/* @__PURE__ */ jsxs(styles_default.PickerHeader, { children: [/* @__PURE__ */ jsx(Text, { code: "picker.header" }), /* @__PURE__ */ jsx(styles_default.PickerClose, {
+		onClick: onClose,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "close",
+			size: "16px",
+			fill: "gray5"
+		})
+	})] }), /* @__PURE__ */ jsx(styles_default.PickerBody, { children: (widgetDefinitions || []).map((widget) => /* @__PURE__ */ jsx(DashboardPickerItem, {
+		widget,
+		onAdd: handleOnAdd
+	}, widget.code)) })] }) })] });
+};
+//#endregion
+export { DashboardPicker as default };

package/ui/Modules/Dashboard/components/Picker/PickerContainer.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../types';
+type PickerPropsContainer = {
+    widgetDefinitions: WidgetDefinition[];
+};
+declare const PickerContainer: ({ widgetDefinitions }: PickerPropsContainer) => JSX.Element | null;
+export default PickerContainer;

package/ui/Modules/Dashboard/components/Picker/PickerContainer.js

@@ -0,0 +1,38 @@
+import { actions } from "../../store/reducers/widgetListReducer.js";
+import ComponentContext from "../../context/ComponentContext.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { nanoid } from "nanoid";
+import { useDispatch } from "react-redux";
+//#region packages/ui/Modules/Dashboard/components/Picker/PickerContainer.tsx
+const PickerContainer = ({ widgetDefinitions }) => {
+	const { Picker } = React.useContext(ComponentContext);
+	const dispatch = useDispatch();
+	return /* @__PURE__ */ jsx(Picker, {
+		onAdd: React.useCallback((code) => {
+			const widget = widgetDefinitions.find((widget) => widget.code === code);
+			const id = nanoid();
+			const layout = {
+				w: widget?.initWidth,
+				h: widget?.initHeight,
+				x: 0,
+				y: 0,
+				i: id,
+				minW: widget?.minWidth,
+				maxW: widget?.maxWidth,
+				minH: widget?.minHeight,
+				maxH: widget?.maxHeight,
+				moved: false,
+				resizeHandles: void 0,
+				static: false,
+				isDraggable: true,
+				isResizable: true,
+				isBounded: false
+			};
+			dispatch(actions.addWidget(code, id, layout, null));
+		}, [dispatch, widgetDefinitions]),
+		widgetDefinitions
+	});
+};
+//#endregion
+export { PickerContainer as default };

package/ui/Modules/Dashboard/components/Picker/components/PickerItem.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../../types';
+interface DashboardPickerItemProps {
+    widget: WidgetDefinition;
+    onAdd: (code: string) => void;
+}
+declare const DashboardPickerItem: ({ widget, onAdd }: DashboardPickerItemProps) => JSX.Element;
+export default DashboardPickerItem;

package/ui/Modules/Dashboard/components/Picker/components/PickerItem.js

@@ -0,0 +1,25 @@
+import styles_default from "../../../styles.js";
+import Text from "../../Text/Text.js";
+import ComponentContext from "../../../context/ComponentContext.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Picker/components/PickerItem.tsx
+const DashboardPickerItem = ({ widget, onAdd }) => {
+	const { Button } = React.useContext(ComponentContext);
+	const onAddWidget = React.useCallback(() => onAdd(widget.code), [onAdd, widget.code]);
+	return /* @__PURE__ */ jsxs(styles_default.PickerItem, { children: [
+		/* @__PURE__ */ jsx("img", {
+			src: widget.preview,
+			width: "50",
+			height: "50",
+			alt: widget.name
+		}),
+		/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: widget.name }), /* @__PURE__ */ jsx("p", { children: widget.description })] }),
+		/* @__PURE__ */ jsx(Button, {
+			onClick: onAddWidget,
+			children: /* @__PURE__ */ jsx(Text, { code: "buttons.addWidget" })
+		})
+	] });
+};
+//#endregion
+export { DashboardPickerItem as default };

package/ui/Modules/Dashboard/components/Picker/index.d.ts

@@ -0,0 +1,2 @@
+import PickerContainer from './PickerContainer';
+export default PickerContainer;

package/ui/Modules/Dashboard/components/Picker/index.js

@@ -0,0 +1,5 @@
+import PickerContainer from "./PickerContainer.js";
+//#region packages/ui/Modules/Dashboard/components/Picker/index.ts
+var Picker_default = PickerContainer;
+//#endregion
+export { Picker_default as default };

package/ui/Modules/Dashboard/components/Text/Text.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+interface TextProps {
+    code: string;
+}
+declare const Text: ({ code }: TextProps) => JSX.Element;
+export declare const useText: (code: string) => string;
+export default Text;

package/ui/Modules/Dashboard/components/Text/Text.js

@@ -0,0 +1,14 @@
+import LangContext from "../../context/LangContext.js";
+import translations from "../../locale/index.js";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Text/Text.tsx
+const Text = ({ code }) => {
+	const text = translations[React.useContext(LangContext)]?.[code];
+	return /* @__PURE__ */ jsx(Fragment, { children: text || code });
+};
+const useText = (code) => {
+	return translations[React.useContext(LangContext)]?.[code] || code;
+};
+//#endregion
+export { Text as default, useText };

package/ui/Modules/Dashboard/components/Text/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Text';

package/ui/Modules/Dashboard/components/Text/index.js

@@ -0,0 +1,2 @@
+import Text from "./Text.js";
+export { Text as default };

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { BarDatum } from '@nivo/bar';
+import { WidgetComponentProps } from '../../../types';
+interface BarDataRow extends BarDatum {
+    id: string | number;
+    value: number;
+    label: string;
+}
+export type Props = WidgetComponentProps<BarDataRow[]> & {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    text?: string;
+    hasLegend?: boolean;
+    legendRowMaxLength?: number;
+};
+declare const _default: React.MemoExoticComponent<({ data, isLoading, error, title, subtitle, description, text, hasLegend, legendRowMaxLength, innerRef, ...barProps }: Props) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,52 @@
+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 { Description, OtherText, Subtitle, Title, Wrapper, WrapperText, margin } from "./styles.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ResponsiveBar } from "@nivo/bar";
+//#region packages/ui/Modules/Dashboard/components/Widgets/BarChart/BarChart.tsx
+const defaultLegendRowMaxLength = 4;
+const Bar = ({ data = [], isLoading, error, title, subtitle, description, text, hasLegend = true, legendRowMaxLength = defaultLegendRowMaxLength, innerRef, ...barProps }) => {
+	const colors = createWidgetColors("barChartColor", 5);
+	const hasText = title || subtitle || description || text;
+	const legends = React.useMemo(() => {
+		if (!hasLegend) return void 0;
+		return createLegendData(data, colors, legendRowMaxLength, { translateY: 70 });
+	}, [
+		hasLegend,
+		data,
+		colors
+	]);
+	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(ResponsiveBar, {
+					data,
+					isInteractive: true,
+					animate: true,
+					margin,
+					colors,
+					colorBy: "indexValue",
+					legends,
+					...barProps
+				})
+			] })
+		})
+	});
+};
+var BarChart_default = React.memo(Bar);
+//#endregion
+export { BarChart_default as default };

package/ui/Modules/Dashboard/components/Widgets/BarChart/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/BarChart/Config.js

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+export declare const margin: {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+};
+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/BarChart/styles.js

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+//#region packages/ui/Modules/Dashboard/components/Widgets/BarChart/styles.ts
+const margin = {
+	top: 20,
+	bottom: 120,
+	right: 20,
+	left: 100
+};
+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, margin };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { WidgetComponentProps } from '../../../types';
+/**
+ * This is only example of widget
+ */
+declare const ColorBox: ({ config, innerRef }: WidgetComponentProps) => React.ReactElement;
+export default ColorBox;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/ColorBox/ColorBox.tsx
+/**
+* This is only example of widget
+*/
+const ColorBox = ({ config = {}, innerRef }) => {
+	return /* @__PURE__ */ jsx("div", {
+		style: React.useMemo(() => ({
+			backgroundColor: config?.color || "transparent",
+			border: "1px solid #ccc",
+			width: 50,
+			height: 50,
+			borderRadius: "100%"
+		}), [config]),
+		ref: innerRef,
+		children: config?.name
+	});
+};
+//#endregion
+export { ColorBox as default };

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

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import { ConfigProps } from '../../../types';
+export declare const Config: ({ onChange, config }: ConfigProps) => JSX.Element;

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

@@ -0,0 +1,23 @@
+import styles_default from "../../../styles.js";
+import { useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/ColorBox/Config.tsx
+const Config = ({ onChange, config }) => {
+	const onChangeInput = useCallback((e) => onChange({
+		...config,
+		[e.target.name]: e.target.value
+	}), [onChange, config]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [/* @__PURE__ */ jsx(styles_default.ConfigLabel, { children: "Name: " }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: /* @__PURE__ */ jsx("input", {
+		name: "name",
+		type: "text",
+		onChange: onChangeInput,
+		value: config?.name || ""
+	}) })] }), /* @__PURE__ */ jsxs(styles_default.ConfigRow, { children: [/* @__PURE__ */ jsx(styles_default.ConfigLabel, { children: "Color: " }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: /* @__PURE__ */ jsx("input", {
+		name: "color",
+		type: "color",
+		onChange: onChangeInput,
+		value: config?.color || ""
+	}) })] })] });
+};
+//#endregion
+export { Config };

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+/**
+ * Empty widget
+ * This is only for error case, invalid widget definition etc...
+ */
+declare const EmptyWidget: () => JSX.Element;
+export default EmptyWidget;

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

@@ -0,0 +1,10 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/EmptyWidget/EmptyWidget.tsx
+/**
+* Empty widget
+* This is only for error case, invalid widget definition etc...
+*/
+const EmptyWidget = () => /* @__PURE__ */ jsx("span", { children: "Error" });
+//#endregion
+export { EmptyWidget as default };

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

@@ -0,0 +1,2 @@
+import EmptyWidget from './EmptyWidget';
+export default EmptyWidget;

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

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

package/ui/Modules/Dashboard/components/Widgets/HorizontalBar/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/HorizontalBar/Config.js

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

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

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { HorizontalBarProps } from './types';
+declare const HorizontalBar: ({ data, title, description, isLoading, error, innerRef }: HorizontalBarProps) => JSX.Element;
+export default HorizontalBar;

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

@@ -0,0 +1,38 @@
+import styles_default from "../../../styles.js";
+import LoadingBoundary from "../../../Hoc/LoadingBoundary.js";
+import NoData_default from "../../NoData/index.js";
+import styles_default$1 from "./styles.js";
+import { ProgressLine } from "./components/ProgressLine.js";
+import { LabelsLine } from "./components/LabelsLine.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Widgets/HorizontalBar/HorizontalBar.tsx
+const fallbackFillColor = "#000";
+const fallbackBgColor = "#ebedf2";
+const HorizontalBar = ({ data = [], title, description, isLoading, error, innerRef }) => /* @__PURE__ */ jsx(LoadingBoundary, {
+	isLoading,
+	error,
+	children: /* @__PURE__ */ jsx(styles_default.ItemContent, { children: /* @__PURE__ */ jsxs("div", {
+		ref: innerRef,
+		children: [
+			title && /* @__PURE__ */ jsx(styles_default$1.Title, { children: title }),
+			description && /* @__PURE__ */ jsx(styles_default$1.Description, { children: description }),
+			(!data || data.length === 0) && /* @__PURE__ */ jsx(NoData_default, {}),
+			data.map((row) => {
+				const { id, label, percent, value, color = fallbackFillColor, backgroundColor = fallbackBgColor } = row;
+				const validPercent = percent >= 0 && percent <= 100 ? percent : 0;
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(LabelsLine, {
+					value,
+					label,
+					color
+				}), /* @__PURE__ */ jsx(ProgressLine, {
+					percent: validPercent,
+					color,
+					backgroundColor
+				})] }, id);
+			})
+		]
+	}) })
+});
+//#endregion
+export { HorizontalBar as default };