datastake-daf 0.6.154 → 0.6.155

package/dist/components/index.js

@@ -11455,7 +11455,7 @@ var f="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_
 const MOBILE_W = 850;
 const MOBILE_WIDTH = `max-width: ${MOBILE_W}px`;
 
-const Style$H = dt.div`
+const Style$I = dt.div`
   .ant-btn {
     border-radius: 100px 100px 100px 0;
     padding: 10px;
@@ -11516,7 +11516,7 @@ const BorderedButton = _ref => {
       children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$n);
-  return /*#__PURE__*/jsxRuntime.jsx(Style$H, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$I, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
       children: children
@@ -11627,7 +11627,7 @@ function Badge(_ref) {
   }, [tooltip]);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
     title: tooltipTitle,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Style$G, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Style$H, {
       className: "".concat((_variantConfig$varian = variantConfig[variant]) === null || _variantConfig$varian === void 0 ? void 0 : _variantConfig$varian.className, " ").concat(roundedConfig[rounded], " ").concat(className ? className : ""),
       style: _objectSpread2({
         width: size === "icon" ? "fit-content" : isNumberSize ? "".concat(size, "px") : "100%"
@@ -11642,7 +11642,7 @@ function Badge(_ref) {
     })
   });
 }
-const Style$G = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
+const Style$H = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
 Badge.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -11984,7 +11984,7 @@ GoToSelect.propTypes = {
 
 const _excluded$l = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
-  useToken: useToken$j
+  useToken: useToken$k
 } = antd.theme;
 
 /**
@@ -12078,7 +12078,7 @@ function Multiselect(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded$l);
   const {
     token
-  } = useToken$j();
+  } = useToken$k();
   const [selectValue, setSelectValue] = React.useState(Array.isArray(defaultSelected) ? defaultSelected.length > 0 ? defaultSelected : [] : [defaultSelected]);
   function onSelectChange(value) {
     if (!canUnselectLast && value.length === 0) {
@@ -12582,7 +12582,7 @@ const useHeader = _ref => {
 };
 
 const {
-  useToken: useToken$i
+  useToken: useToken$j
 } = antd.theme;
 function BreadCrumbs({
   breadcrumbs = [],
@@ -12591,7 +12591,7 @@ function BreadCrumbs({
   const [splitIndex, setSplitIndex] = React.useState(0);
   const {
     token
-  } = useToken$i();
+  } = useToken$j();
   const _renderBreadcrumb = (b, i, isLast, noOnClickLast = false) => {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex breadcrumb-item",
@@ -15536,7 +15536,7 @@ function FlowWidget(_ref) {
     className: "with-border-header ".concat(widgetClassname),
     tabsConfig: tabConfig
   }, rest), {}, {
-    children: !isEmpty ? /*#__PURE__*/jsxRuntime.jsx(Style$F, {
+    children: !isEmpty ? /*#__PURE__*/jsxRuntime.jsx(Style$G, {
       children: /*#__PURE__*/jsxRuntime.jsx(antd.Steps, {
         current: currentForActiveTab,
         initial: initialForActiveTab,
@@ -15578,7 +15578,7 @@ function Icon(_ref2) {
     return icon(status);
   }
 }
-const Style$F = dt.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\tscrollbar-width: none;\n\n\t-ms-overflow-style: none;\n\n\t@media (max-width: 532px) {\n\t\toverflow-x: hidden;\n\t}\n\n\t:where(.ant-steps-horizontal):not(.ant-steps-label-vertical) {\n\t\t.ant-steps-item-content {\n\t\t\twidth: 100%;\n\n\t\t\t.ant-steps-item-description {\n\t\t\t\tmin-width: 205px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n"])));
+const Style$G = dt.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n\n\tscrollbar-width: none;\n\n\t-ms-overflow-style: none;\n\n\t@media (max-width: 532px) {\n\t\toverflow-x: hidden;\n\t}\n\n\t:where(.ant-steps-horizontal):not(.ant-steps-label-vertical) {\n\t\t.ant-steps-item-content {\n\t\t\twidth: 100%;\n\n\t\t\t.ant-steps-item-description {\n\t\t\t\tmin-width: 205px;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n"])));
 FlowWidget.propTypes = {
   title: PropTypes__default["default"].string,
   loading: PropTypes__default["default"].bool,
@@ -15640,7 +15640,7 @@ ActionWidget.propTypes = {
   onClick: PropTypes__default["default"].func
 };
 
-const Style$E = dt.div`
+const Style$F = dt.div`
 	overflow-x: auto;
 
 	@media (${MOBILE_WIDTH}) {
@@ -15831,7 +15831,7 @@ function KeyIndicatorsWidget$1(_ref) {
     className: formatClassname(["flex-1 with-border-header", widgetClassName]),
     title: noTitle ? undefined : t(title),
     noTitle: noTitle,
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(Style$E, {
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(Style$F, {
       className: formatClassname(["flex", className]),
       children: config.map((c, i) => /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "row-item",
@@ -15884,7 +15884,7 @@ function TooltipIcon(_ref) {
   });
 }
 
-const Style$D = dt.div`
+const Style$E = dt.div`
   display: flex;
   flex-direction: row;
   position: relative;
@@ -17275,7 +17275,7 @@ function LocationIcon({
   });
 }
 
-const Style$C = dt.div`
+const Style$D = dt.div`
   .main {
     width: 24px;
     height: 24px;
@@ -17417,7 +17417,7 @@ function StakeholderIcon({
         link,
         onClickLink: () => onClickLink(marker)
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx(Style$C
+      children: /*#__PURE__*/jsxRuntime.jsx(Style$D
       // onClick={toggleOpen}
       , {
         className: `map-marker marker closed`,
@@ -17430,7 +17430,7 @@ function StakeholderIcon({
       })
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$C, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$D, {
     onClick: toggleOpen,
     className: `map-marker marker ${isActive ? "opened" : "closed"}`,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -18152,7 +18152,7 @@ const useMap$1 = ({
 };
 
 var _templateObject$9;
-const Style$B = dt.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t.p-placeholder {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t\tz-index: 100;\n\t}\n"])));
+const Style$C = dt.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t.p-placeholder {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t\tz-index: 100;\n\t}\n"])));
 
 /**
  * ComponentWithFocus
@@ -18212,7 +18212,7 @@ function ComponentWithFocus(_ref) {
       setClosed(false);
     }
   }, [closed]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$B, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$C, {
     className: className,
     ref: ref,
     style: style,
@@ -18224,7 +18224,7 @@ function ComponentWithFocus(_ref) {
   });
 }
 
-const Style$A = dt.div`
+const Style$B = dt.div`
   position: absolute; 
   top: 24px;
   left: 24px;
@@ -18283,7 +18283,7 @@ function Filters({
         return null;
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(Style$A, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$B, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Button, {
       onClick: () => setOpened(p => !p),
       children: [t("Filter"), /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
@@ -18358,7 +18358,7 @@ function Map$3(_ref) {
     isSatellite
   });
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(Style$D, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Style$E, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),
       children: [filtersConfig ? /*#__PURE__*/jsxRuntime.jsx(Filters, {
         t: t,
@@ -18464,7 +18464,7 @@ Map$3.propTypes = {
   nameAsSiderTitle: PropTypes__default["default"].bool
 };
 
-const Style$z = dt.div`
+const Style$A = dt.div`
   display: flex;
   flex-direction: row;
   position: relative;
@@ -19731,7 +19731,7 @@ function Globe(_ref) {
     onRender === null || onRender === void 0 || onRender();
   }, [onRender]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(Style$z, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Style$A, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),
       children: [filtersConfig ? /*#__PURE__*/jsxRuntime.jsx(Filters, {
         t: t,
@@ -19975,7 +19975,7 @@ function DashboardLayout(_ref) {
   });
 }
 
-const Style$y = dt.div`
+const Style$z = dt.div`
 
 
     .card {
@@ -20055,7 +20055,7 @@ const Details = _ref => {
     loading: loading,
     title: title
   }, rest), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Style$y, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Style$z, {
       children: config.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(MapConfig, {
         config: config
       }) : /*#__PURE__*/jsxRuntime.jsx(antd.Empty, {
@@ -20078,7 +20078,7 @@ const KeyIndicatorsDetails = _ref => {
     title: title,
     loading: loading
   }, rest), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Style$y, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Style$z, {
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "key-info-card",
         children: /*#__PURE__*/jsxRuntime.jsx(MapConfig, {
@@ -20090,7 +20090,7 @@ const KeyIndicatorsDetails = _ref => {
   }));
 };
 
-const Style$x = dt.div`
+const Style$y = dt.div`
 
     .main-details {
         display: grid;
@@ -20111,7 +20111,7 @@ const DetailsSection = _ref => {
       firstColumnWidth = "250px"
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$e);
-  return /*#__PURE__*/jsxRuntime.jsx(Style$x, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$y, {
     firstColumnWidth: firstColumnWidth,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "main-details",
@@ -20388,7 +20388,7 @@ const {
   Meta
 } = antd.Card;
 const {
-  useToken: useToken$h
+  useToken: useToken$i
 } = antd.theme;
 function ProjectWidget(_ref) {
   let {
@@ -20407,7 +20407,7 @@ function ProjectWidget(_ref) {
   const [isHovered, setIsHovered] = React__default["default"].useState(false);
   const {
     token
-  } = useToken$h();
+  } = useToken$i();
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Card, _objectSpread2(_objectSpread2({
     style: {
       flex: 1
@@ -20471,6 +20471,110 @@ function ProjectWidget(_ref) {
   }));
 }
 
+const Style$x = dt.div`
+    .daf-widget {
+        background-color: ${props => props.backgroundColor} !important;
+        border-color: ${props => props.backgroundBorderColor} !important;
+    }
+`;
+
+const {
+  useToken: useToken$h
+} = antd.theme;
+const WidgetCard = _ref => {
+  let {
+    title,
+    backgroundColor,
+    backgroundBorderColor,
+    data = [],
+    link,
+    logoIcon,
+    description,
+    loading = false,
+    iconColor,
+    buttonIcon
+  } = _ref;
+  useToken$h();
+  return /*#__PURE__*/jsxRuntime.jsx(Style$x, {
+    backgroundColor: backgroundColor,
+    backgroundBorderColor: backgroundBorderColor,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Widget, {
+      title: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          display: "flex",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            backgroundColor: '#FFFFFF',
+            borderRadius: "20%",
+            width: "32px",
+            height: "32px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginRight: "8px",
+            border: "1px solid #E5E7EB"
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            name: logoIcon,
+            width: 25,
+            height: 25
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: title,
+          children: title
+        })]
+      }),
+      addedHeader: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1"
+        }), /*#__PURE__*/jsxRuntime.jsx("a", {
+          style: {
+            backgroundColor: '#FFFFFF',
+            borderRadius: "20%",
+            width: "32px",
+            height: "32px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            border: "1px solid #E5E7EB"
+          },
+          href: link,
+          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            className: buttonIcon,
+            name: "Link",
+            size: 16,
+            color: iconColor || antd.theme.colorPrimary
+          })
+        })]
+      }),
+      loading: loading,
+      children: [description && /*#__PURE__*/jsxRuntime.jsx("p", {
+        children: description
+      }), data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          display: "flex",
+          justifyContent: "space-between"
+        },
+        children: [item.isTag ? /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+          style: {
+            width: '70px',
+            textAlign: 'center',
+            borderRadius: '10px'
+          },
+          color: item.tagColor || 'default',
+          children: item.label
+        }) : /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: item.label
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: item.value
+        })]
+      }, item))]
+    })
+  });
+};
+
 var Style$w = dt.div`
   border: 1px solid var(--base-gray-40);
   padding: 12px;
@@ -59851,6 +59955,7 @@ exports.ViewForm = Content;
 exports.ViewFormInput = Input;
 exports.ViewFormNavigation = Navigation;
 exports.Widget = Widget;
+exports.WidgetCard = WidgetCard;
 exports.WidgetImage = ImageWidget;
 exports.WidgetLoader = Loader;
 exports.WidgetPlaceholder = WidgetPlaceholder;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.154",
+	"version": "0.6.155",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Widget/WidgetCard/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Widget from '../index'
+import Widget from '../index.jsx'
 import { theme, Tooltip, Tag } from 'antd'
 import CustomIcon from '../../../Icon/CustomIcon.jsx'
 import Style from './style.js'

package/src/index.js

@@ -71,6 +71,7 @@ export { default as DetailsSection } from "./@daf/core/components/Dashboard/Widg
 export { default as SDGWidget } from "./@daf/core/components/Dashboard/Widget/SDGWidget/index.jsx";
 export { default as ComponentWithFocus } from "./@daf/core/components/Dashboard/ComponentWithFocus/index.jsx";
 export { default as ProjectWidget } from "./@daf/core/components/Dashboard/Widget/ProjectWidget/index.jsx";
+export { default as WidgetCard } from "./@daf/core/components/Dashboard/Widget/WidgetCard/index.js";
 // export { default as WidgetCatalogue } from "./@daf/core/components/Dashboard/Widget/WidgetCatalogue/index.jsx";
 
 // Forms