rbro-tat-uds 1.6.36 → 2.0.1

package/build/esm/components/FormField/FormField.js

@@ -0,0 +1,159 @@
+"use strict";
+"use client";
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled, { css } from 'styled-components';
+import Icon from '../Icon/Icon.js';
+import { colors } from '../../utils';
+
+const intentLabelsColors = {
+  info: colors.gray_700,
+  success: colors.success_600,
+  warning: colors.warning_500,
+  danger: colors.danger_500
+};
+const FormFieldStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
+const FormFieldLabelStyled = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  min-height: ${(props) => props.$labelFontSize && [14, 16, 18].includes(props.$labelFontSize) && (props.$labelFontSize === 14 ? "17px" : "19px")};
+
+  & > label {
+    flex: 1;
+    font-size: ${(props) => props.$labelFontSize && [14, 16, 18].includes(props.$labelFontSize) ? props.$labelFontSize + "px" : "14px"};
+    font-weight: 400;
+    line-height: 1em;
+    color: ${colors.gray_800};
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    & > span {
+      color: ${colors.gray_800};
+      font-size: ${(props) => props.$labelFontSize && [14, 16, 18].includes(props.$labelFontSize) ? props.$labelFontSize + "px" : "14px"};
+      font-weight: 500;
+      line-height: 120%;
+    }
+  }
+`;
+const FormFieldSublabelStyled = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+
+  ${(props) => !props.$leftHelperText && props.$rightHelperText && css`
+      justify-content: end;
+    `}
+
+  & > div {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+
+    & > span {
+      flex: 1;
+      font-size: ${({ $helperTextSize }) => $helperTextSize && [12, 14].includes($helperTextSize) ? $helperTextSize + "px" : "12px"};
+      font-weight: 400;
+      line-height: 1em;
+      color: ${(props) => props.$helperIntent && ["info", "success", "danger", "warning"].includes(props.$helperIntent) ? intentLabelsColors[props.$helperIntent] : colors.gray_700};
+    }
+  }
+
+  & > span {
+    font-size: ${({ $helperTextSize }) => $helperTextSize && [12, 14].includes($helperTextSize) ? $helperTextSize + "px" : "12px"};
+    font-weight: 400;
+    line-height: 1em;
+    color: ${(props) => props.$helperIntent && ["info", "success", "danger", "warning"].includes(props.$helperIntent) ? intentLabelsColors[props.$helperIntent] : colors.gray_700};
+  }
+`;
+const FormField = React__default.forwardRef(
+  ({
+    children,
+    label = "Label",
+    labelFontSize = 14,
+    required = false,
+    showHelpButton = false,
+    leftHelperText,
+    rightHelperText,
+    helperTextSize = 12,
+    helperIntent = "info",
+    labelFor,
+    helpButtonOnClick,
+    rightText,
+    showLeftHelperIcon = true,
+    ...rest
+  }, ref) => {
+    const intentVariants = {
+      info: /* @__PURE__ */ jsx(Icon, { icon: "info_filled", color: colors.gray_500, size: 14 }),
+      success: /* @__PURE__ */ jsx(Icon, { icon: "checkmark_filled", color: colors.success_600, size: 14 }),
+      warning: /* @__PURE__ */ jsx(Icon, { icon: "warning_filled", color: colors.warning_500, size: 14 }),
+      danger: /* @__PURE__ */ jsx(Icon, { icon: "warning_filled", color: colors.danger_500, size: 14 })
+    };
+    return /* @__PURE__ */ jsxs(
+      FormFieldStyled,
+      {
+        ref,
+        $label: label,
+        $labelFontSize: labelFontSize,
+        $required: required,
+        $showHelpButton: showHelpButton,
+        $leftHelperText: leftHelperText,
+        $rightHelperText: rightHelperText,
+        $helperIntent: helperIntent,
+        $labelFor: labelFor,
+        $helpButtonOnClick: helpButtonOnClick,
+        ...rest,
+        children: [
+          (label || required || showHelpButton) && /* @__PURE__ */ jsxs(FormFieldLabelStyled, { $labelFontSize: labelFontSize, children: [
+            required && /* @__PURE__ */ jsx(Icon, { icon: "asterix", size: 8, color: colors.danger_500 }),
+            /* @__PURE__ */ jsx("label", { htmlFor: labelFor, children: label }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              rightText && typeof rightText === "string" && /* @__PURE__ */ jsx("span", { children: rightText }),
+              showHelpButton && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  style: { cursor: "pointer", paddingTop: "1px" },
+                  onClick: helpButtonOnClick,
+                  size: labelFontSize,
+                  color: colors.info_600,
+                  icon: "hint"
+                }
+              )
+            ] })
+          ] }),
+          children,
+          (typeof leftHelperText === "string" && !!leftHelperText.length || typeof rightHelperText === "string" && !!rightHelperText.length) && /* @__PURE__ */ jsxs(
+            FormFieldSublabelStyled,
+            {
+              $leftHelperText: leftHelperText,
+              $rightHelperText: rightHelperText,
+              $helperTextSize: helperTextSize,
+              $helperIntent: helperIntent,
+              children: [
+                typeof leftHelperText === "string" && !!leftHelperText.length && /* @__PURE__ */ jsxs("div", { children: [
+                  showLeftHelperIcon && intentVariants[helperIntent],
+                  /* @__PURE__ */ jsx("span", { children: leftHelperText })
+                ] }),
+                /* @__PURE__ */ jsx("span", { children: rightHelperText })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FormField.displayName = "FormField";
+
+export { FormField as default };

package/build/esm/components/FormField/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import FormField from './FormField.js';
+
+
+
+export { FormField as default };

package/build/esm/components/GraficConfiguratiePensii/GraficConfiguratiePensii.js

@@ -0,0 +1,148 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../utils';
+
+const GraficConfiguratiePensiiStyled = styled.svg`
+  & > .limitMinLabel {
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  & > rect:nth-child(1) {
+    fill: ${({ $selected }) => $selected ? colors.info_200 : colors.gray_60};
+  }
+`;
+const GraficConfiguratiePensii = ({
+  max = 100,
+  limit_max = 70,
+  limit_min = 40,
+  value = 80,
+  value_text = 4200,
+  decimals = 2,
+  currency = "RON",
+  height = 80,
+  selected = false
+}) => {
+  const RO = new Intl.NumberFormat("RO", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  });
+  const svg_ref = useRef(null);
+  const [w, setW] = useState(0);
+  const [h, setH] = useState(0);
+  const calculate = useMemo(() => {
+    const bar_h = 24;
+    const bar_y = h / 2 - bar_h / 2;
+    const secondary_bar_w = Math.min(w, Math.max(w * limit_min / max, 0));
+    const line_min_x_calc = limit_min * w / max - 1;
+    const line_min_x = Math.min(w, Math.max(line_min_x_calc, 0.5));
+    const line_max_calc = limit_max * w / max - 1;
+    const line_max_x = Math.min(w, Math.max(line_max_calc, 1));
+    return {
+      bar_h,
+      bar_y,
+      secondary_bar_w,
+      line_min_x,
+      line_max_x
+    };
+  }, [w, h, limit_max, limit_min, max]);
+  const calculate_value = useMemo(() => {
+    const initial = value * w / max;
+    const optimized = initial - calculate.secondary_bar_w;
+    const maximum = w - calculate.secondary_bar_w;
+    const fill_rect_primary = value >= limit_max ? colors.success_200 : colors.danger_200;
+    const fill_rect_secondary = value >= limit_max ? colors.success_500 : colors.danger_500;
+    const fill_value_text = value >= limit_max ? colors.success_800 : colors.danger_800;
+    return {
+      value: Math.min(maximum, Math.max(0, optimized)),
+      fill_rect_primary,
+      fill_rect_secondary,
+      fill_value_text
+    };
+  }, [value, w]);
+  useEffect(() => {
+    if (svg_ref && svg_ref.current) {
+      const handleResize = () => {
+        const clientW = svg_ref?.current?.clientWidth;
+        setW(+clientW);
+        setH(height);
+      };
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [svg_ref, height]);
+  return /* @__PURE__ */ jsxs(
+    GraficConfiguratiePensiiStyled,
+    {
+      ref: svg_ref,
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${w} ${h}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      $selected: selected,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: 0, y: calculate.bar_y, height: calculate.bar_h, width: w }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: calculate.bar_y,
+            height: calculate.bar_h,
+            width: calculate.secondary_bar_w,
+            fill: calculate_value.fill_rect_primary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "limitMinLabel",
+            textAnchor: "start",
+            x: 10,
+            y: calculate.bar_y + calculate.bar_h / 1.5,
+            fill: calculate_value.fill_value_text,
+            children: RO.format(value_text) + " " + currency
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: calculate.line_min_x,
+            y: calculate.bar_y,
+            height: calculate.bar_h,
+            width: calculate_value.value,
+            fill: calculate_value.fill_rect_secondary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: calculate.line_min_x,
+            x2: calculate.line_min_x,
+            y1: 0,
+            y2: h,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: calculate.line_max_x,
+            x2: calculate.line_max_x,
+            y1: 0,
+            y2: h,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { GraficConfiguratiePensii as default };

package/build/esm/components/GraficConfiguratiePensii/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import GraficConfiguratiePensii from './GraficConfiguratiePensii.js';
+
+
+
+export { GraficConfiguratiePensii as default };