@adiba-banking-cloud/backoffice 0.0.26 → 0.0.28

package/build/index.cjs.js/index.js

@@ -12062,6 +12062,73 @@ const PageTitle = _ref => {
   }))), /*#__PURE__*/React.createElement(React.Fragment, null, rightsection)));
 };
 
+const TitleWithIndex = _ref => {
+  let {
+    title,
+    growth,
+    subtitle,
+    hasError,
+    errorLabel,
+    errorFn = () => void 0
+  } = _ref;
+  return /*#__PURE__*/React.createElement(core.Group, null, /*#__PURE__*/React.createElement(core.Group, {
+    gap: 'xs'
+  }, /*#__PURE__*/React.createElement(core.Title, {
+    order: 3,
+    fw: 500
+  }, title), /*#__PURE__*/React.createElement(Growth, growth), /*#__PURE__*/React.createElement(core.Text, {
+    c: "dimmed",
+    size: "xs",
+    fw: 300
+  }, subtitle)), /*#__PURE__*/React.createElement(core.Space, {
+    flex: 1
+  }), /*#__PURE__*/React.createElement(core.Box, {
+    hidden: !hasError
+  }, /*#__PURE__*/React.createElement(WidgetError, {
+    errorLabel: errorLabel,
+    errorFn: errorFn
+  })));
+};
+const Growth = _ref2 => {
+  let {
+    text,
+    direction
+  } = _ref2;
+  const color = direction === "up" ? "rgb(64, 192, 87)" : "rgb(250,82,82)";
+  const name = direction === "up" ? "TrendUp" : "TrendDown";
+  return /*#__PURE__*/React.createElement(core.Group, {
+    c: color,
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Icons, {
+    name: name,
+    color: color,
+    size: 12,
+    stroke: 2.5,
+    variant: "Bold"
+  }), /*#__PURE__*/React.createElement(core.Text, {
+    size: "xs",
+    fw: 500
+  }, text));
+};
+const WidgetError = _ref3 => {
+  let {
+    errorLabel,
+    errorFn
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(core.Button, {
+    size: "sm",
+    variant: "transparent",
+    leftSection: /*#__PURE__*/React.createElement(Icons, {
+      name: "Danger",
+      color: "rgb(250,82,82",
+      stroke: 1.5
+    }),
+    onClick: errorFn,
+    fw: 300,
+    c: "rgb(250,82,82"
+  }, errorLabel));
+};
+
 const ConnectionPanelDetail = _ref => {
   let {
     label,
@@ -12228,6 +12295,7 @@ const ApplicationPanel = _ref => {
     ratio: 3 / 2
   }, /*#__PURE__*/React.createElement(core.Image, {
     alt: name,
+    src: coverImage,
     fallbackSrc: img$a
   }), /*#__PURE__*/React.createElement(core.Overlay, {
     gradient: "linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 100%)"
@@ -12241,7 +12309,7 @@ const ApplicationPanel = _ref => {
     fw: 400
   }, name), /*#__PURE__*/React.createElement(core.Badge, {
     style: {
-      display: String(discount).length < 1 ? "none" : "block"
+      display: String(discount).length > 1 ? "block" : "none"
     },
     fw: 300,
     variant: "outline"
@@ -12614,6 +12682,7 @@ exports.SimpleTable = SimpleTable;
 exports.SimpleText = SimpleText;
 exports.StackedColumn = StackedColumn;
 exports.SubscriptionPlans = SubscriptionPlans;
+exports.TitleWithIndex = TitleWithIndex;
 exports.TitledPanel = TitledPanel;
 exports.UserMenu = UserMenu;
 exports.theme = theme;

package/build/index.esm.js/index.js

@@ -12041,6 +12041,73 @@ const PageTitle = _ref => {
   }))), /*#__PURE__*/React.createElement(React.Fragment, null, rightsection)));
 };
 
+const TitleWithIndex = _ref => {
+  let {
+    title,
+    growth,
+    subtitle,
+    hasError,
+    errorLabel,
+    errorFn = () => void 0
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Group, {
+    gap: 'xs'
+  }, /*#__PURE__*/React.createElement(Title, {
+    order: 3,
+    fw: 500
+  }, title), /*#__PURE__*/React.createElement(Growth, growth), /*#__PURE__*/React.createElement(Text, {
+    c: "dimmed",
+    size: "xs",
+    fw: 300
+  }, subtitle)), /*#__PURE__*/React.createElement(Space, {
+    flex: 1
+  }), /*#__PURE__*/React.createElement(Box, {
+    hidden: !hasError
+  }, /*#__PURE__*/React.createElement(WidgetError, {
+    errorLabel: errorLabel,
+    errorFn: errorFn
+  })));
+};
+const Growth = _ref2 => {
+  let {
+    text,
+    direction
+  } = _ref2;
+  const color = direction === "up" ? "rgb(64, 192, 87)" : "rgb(250,82,82)";
+  const name = direction === "up" ? "TrendUp" : "TrendDown";
+  return /*#__PURE__*/React.createElement(Group, {
+    c: color,
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Icons, {
+    name: name,
+    color: color,
+    size: 12,
+    stroke: 2.5,
+    variant: "Bold"
+  }), /*#__PURE__*/React.createElement(Text, {
+    size: "xs",
+    fw: 500
+  }, text));
+};
+const WidgetError = _ref3 => {
+  let {
+    errorLabel,
+    errorFn
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    variant: "transparent",
+    leftSection: /*#__PURE__*/React.createElement(Icons, {
+      name: "Danger",
+      color: "rgb(250,82,82",
+      stroke: 1.5
+    }),
+    onClick: errorFn,
+    fw: 300,
+    c: "rgb(250,82,82"
+  }, errorLabel));
+};
+
 const ConnectionPanelDetail = _ref => {
   let {
     label,
@@ -12207,6 +12274,7 @@ const ApplicationPanel = _ref => {
     ratio: 3 / 2
   }, /*#__PURE__*/React.createElement(Image, {
     alt: name,
+    src: coverImage,
     fallbackSrc: img$a
   }), /*#__PURE__*/React.createElement(Overlay, {
     gradient: "linear-gradient(45deg, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.1) 100%)"
@@ -12220,7 +12288,7 @@ const ApplicationPanel = _ref => {
     fw: 400
   }, name), /*#__PURE__*/React.createElement(Badge, {
     style: {
-      display: String(discount).length < 1 ? "none" : "block"
+      display: String(discount).length > 1 ? "block" : "none"
     },
     fw: 300,
     variant: "outline"
@@ -12572,4 +12640,4 @@ const File = _ref => {
   }, /*#__PURE__*/React.createElement(Icons, rightsection === null || rightsection === void 0 ? void 0 : rightsection.icon)) : undefined)));
 };
 
-export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DynamicLogo, DynamicShigaLogo, EqualizerColumn, File, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleColumn, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, TitledPanel, UserMenu, theme };
+export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DynamicLogo, DynamicShigaLogo, EqualizerColumn, File, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleColumn, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, TitleWithIndex, TitledPanel, UserMenu, theme };

package/build/typings/components/index.d.ts

@@ -8,6 +8,7 @@ export { SimplePanel, SearchPanel, TitledPanel } from "./panels/simple/Simple";
 export { LabelPanel, AvatarLabelPanel } from "./panels/label/Label";
 export { SimpleText } from "./general/text/Text";
 export { PageTitle } from "./general/title/Title";
+export { TitleWithIndex } from "./general/title/TitleWithIndex";
 export { ConnectionPanel } from "./panels/connection/Connection";
 export { ApplicationPanel } from "./panels/application/Application";
 export { SubscriptionPlans } from "./widgets/subscription_plan/SubscriptionPlan";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",