rbro-tat-uds 2.2.1 → 2.2.3

package/build/cjs/components/GraficContributieUnitlinked/GraficContributieUnitlinked.cjs

@@ -0,0 +1,157 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('../../utils');
+var React = require('react');
+var styled = require('styled-components');
+
+const GraficContributieUnitlinkedStyled = styled.svg`
+  & > .limit_label_main {
+    font-size: 14px;
+    font-weight: 400;
+    fill: ${utils.colors.gray_950};
+  }
+  & > .limit_label_secondary {
+    font-size: 16px;
+    font-weight: 700;
+    fill: ${utils.colors.gray_950};
+  }
+`;
+const GraficContributieUnitlinked = ({
+  limitTop = 50,
+  limitBottom = 100,
+  limitTopLabel = "Top Label",
+  limitBottomLabel = "Bottom Label",
+  currency = "RON",
+  height = 142,
+  colorBar = utils.colors.danger_100,
+  colorFilledBar = utils.colors.success_400
+}) => {
+  const RO = new Intl.NumberFormat("RO");
+  const svg_ref = React.useRef(null);
+  const [w, setW] = React.useState(0);
+  const BAR_HEIGHT = 24;
+  const configuration = React.useMemo(() => {
+    const barY = height / 2 - BAR_HEIGHT / 2;
+    const barYStop = barY + BAR_HEIGHT;
+    const limitTopHeight = height - barYStop + BAR_HEIGHT;
+    const limitTopX = Math.min(Math.max(0, limitTop / limitBottom * w), w - 2);
+    const limitTopLabelsAnchor = limitTopX > w * 0.75 ? "end" : "start";
+    const limitBottomX = w - 2;
+    const limitBottomY = barY;
+    const limitBottomHeight = limitTopHeight;
+    return {
+      barY,
+      barYStop,
+      limitTopHeight,
+      limitTopX,
+      limitTopLabelsAnchor,
+      limitBottomY,
+      limitBottomHeight,
+      limitBottomX
+    };
+  }, [limitTop, limitBottom, height, w]);
+  React.useEffect(() => {
+    if (svg_ref.current) {
+      setW(svg_ref.current.clientWidth);
+    }
+  }, [svg_ref]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    GraficContributieUnitlinkedStyled,
+    {
+      ref: svg_ref,
+      width: "100%",
+      height,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: 0,
+            y: configuration.barY,
+            width: "100%",
+            height: BAR_HEIGHT,
+            fill: colorBar
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: 0,
+            y: configuration.barY,
+            width: configuration.limitTopX,
+            height: BAR_HEIGHT,
+            fill: colorFilledBar
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: configuration.limitTopX,
+            y: 0,
+            height: configuration.limitTopHeight,
+            fill: "black",
+            width: 2
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "limit_label_main",
+            textAnchor: configuration.limitTopLabelsAnchor,
+            x: configuration.limitTopX + (configuration.limitTopLabelsAnchor === "start" ? 12 : -12),
+            y: 12,
+            children: limitTopLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "limit_label_secondary",
+            textAnchor: configuration.limitTopLabelsAnchor,
+            x: configuration.limitTopX + (configuration.limitTopLabelsAnchor === "start" ? 12 : -12),
+            y: 12 + 20,
+            children: RO.format(limitTop) + " " + currency
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: configuration.limitBottomX,
+            y: configuration.limitBottomY,
+            height: configuration.limitBottomHeight,
+            fill: "black",
+            width: 2
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "limit_label_main",
+            textAnchor: "end",
+            x: configuration.limitBottomX - 12,
+            y: height - 20,
+            children: limitBottomLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "limit_label_secondary",
+            textAnchor: "end",
+            x: configuration.limitBottomX - 12,
+            y: height,
+            children: RO.format(limitBottom) + " " + currency
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.default = GraficContributieUnitlinked;

package/build/cjs/components/GraficContributieUnitlinked/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var GraficContributieUnitlinked = require('./GraficContributieUnitlinked.cjs');
+
+
+
+exports.default = GraficContributieUnitlinked.default;

package/build/cjs/components/Illustration/Illustrations.cjs

@@ -13,6 +13,7 @@ var mNoFees = require('./illustrations/m-no-fees.svg.cjs');
 var mQuickMoney = require('./illustrations/m-quick-money.svg.cjs');
 var mCelebrationRaiffeisen = require('./illustrations/m-celebration-raiffeisen.svg.cjs');
 var sHousingLoan = require('./illustrations/s-housing-loan.svg.cjs');
+var sRegularInvestment = require('./illustrations/s-regular-investment.svg.cjs');
 
 const illustrations = {
   "m-investing-money": mInvestingMoney.default,
@@ -24,7 +25,8 @@ const illustrations = {
   "m-no-fees": mNoFees.default,
   "m-quick-money": mQuickMoney.default,
   "m-celebration-raiffeisen": mCelebrationRaiffeisen.default,
-  "s-housing-loan": sHousingLoan.default
+  "s-housing-loan": sHousingLoan.default,
+  "s-regular-investment": sRegularInvestment.default
 };
 
 exports.illustrations = illustrations;