rbro-tat-uds 1.6.35 → 2.0.0

package/build/cjs/components/Flex/Flex.cjs

@@ -0,0 +1,128 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const _directions = ["row", "row-reverse", "column", "column-reverse"];
+const _wrap = ["nowrap", "wrap", "wrap-reverse"];
+const _justify = [
+  "start",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "flex-start",
+  "flex-end"
+];
+const _items = ["stretch", "center", "start", "flex-end", "flex-start"];
+const _content = [
+  "start",
+  "center",
+  "space-between",
+  "space-around",
+  "flex-start",
+  "flex-end"
+];
+const StyledFlex = styled.div`
+  display: flex;
+
+  width: ${(props) => typeof props.$width === "string" && props.$width};
+
+  height: ${(props) => typeof props.$height === "string" && props.$height};
+
+  background-color: ${(props) => props.$background && utils.colors[props.$background]};
+
+  gap: ${(props) => typeof props.$gap === "number" && props.$gap + "px"};
+
+  flex-direction: ${(props) => props.$direction && _directions.includes(props.$direction) && props.$direction};
+
+  flex-wrap: ${(props) => props.$wrap && _wrap.includes(props.$wrap) && props.$wrap};
+
+  flex-grow: ${(props) => typeof props.$grow === "number" && props.$grow};
+
+  flex-shrink: ${(props) => typeof props.$shrink === "number" && props.$shrink};
+
+  flex-basis: ${(props) => typeof props.$basis === "string" && props.$basis};
+
+  justify-content: ${(props) => props.$justify && _justify.includes(props.$justify) && props.$justify};
+
+  align-items: ${(props) => props.$items && _items.includes(props.$items) && props.$items};
+
+  align-content: ${(props) => props.$content && _content.includes(props.$content) && props.$content};
+
+  padding: ${(props) => typeof props.$padding === "string" && props.$padding};
+
+  margin: ${(props) => typeof props.$margin === "string" && props.$margin};
+
+  border-radius: ${(props) => typeof props.$radius === "number" && props.$radius + "px"};
+
+  border: ${(props) => typeof props.$border === "string" && props.$border};
+
+  ${(props) => styled.css`
+    ${props.$css}
+  `}
+`;
+const Flex = ({
+  children,
+  element = "div",
+  width,
+  height,
+  background,
+  gap,
+  direction,
+  wrap,
+  grow,
+  shrink,
+  basis,
+  justify,
+  items,
+  content,
+  padding,
+  margin,
+  radius,
+  border,
+  css: css2,
+  ...rest
+}) => {
+  const limitedAs = {
+    div: "div",
+    main: "main",
+    article: "article",
+    p: "p",
+    span: "span"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledFlex,
+    {
+      $width: width,
+      $height: height,
+      $background: background,
+      $gap: gap,
+      $wrap: wrap,
+      $grow: grow,
+      $shrink: shrink,
+      $basis: basis,
+      $justify: justify,
+      $items: items,
+      $content: content,
+      $padding: padding,
+      $margin: margin,
+      $radius: radius,
+      $border: border,
+      $css: css2,
+      $direction: direction,
+      as: limitedAs[element],
+      ...rest,
+      children
+    }
+  );
+};
+
+exports.default = Flex;

package/build/cjs/components/Flex/index.cjs

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

package/build/cjs/components/FormField/FormField.cjs

@@ -0,0 +1,163 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styled = require('styled-components');
+var Icon = require('../Icon/Icon.cjs');
+var utils = require('../../utils');
+
+const intentLabelsColors = {
+  info: utils.colors.gray_700,
+  success: utils.colors.success_600,
+  warning: utils.colors.warning_500,
+  danger: utils.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: ${utils.colors.gray_800};
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    & > span {
+      color: ${utils.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 && styled.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] : utils.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] : utils.colors.gray_700};
+  }
+`;
+const FormField = React.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__ */ jsxRuntime.jsx(Icon.default, { icon: "info_filled", color: utils.colors.gray_500, size: 14 }),
+      success: /* @__PURE__ */ jsxRuntime.jsx(Icon.default, { icon: "checkmark_filled", color: utils.colors.success_600, size: 14 }),
+      warning: /* @__PURE__ */ jsxRuntime.jsx(Icon.default, { icon: "warning_filled", color: utils.colors.warning_500, size: 14 }),
+      danger: /* @__PURE__ */ jsxRuntime.jsx(Icon.default, { icon: "warning_filled", color: utils.colors.danger_500, size: 14 })
+    };
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(FormFieldLabelStyled, { $labelFontSize: labelFontSize, children: [
+            required && /* @__PURE__ */ jsxRuntime.jsx(Icon.default, { icon: "asterix", size: 8, color: utils.colors.danger_500 }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: labelFor, children: label }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              rightText && typeof rightText === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: rightText }),
+              showHelpButton && /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.default,
+                {
+                  style: { cursor: "pointer", paddingTop: "1px" },
+                  onClick: helpButtonOnClick,
+                  size: labelFontSize,
+                  color: utils.colors.info_600,
+                  icon: "hint"
+                }
+              )
+            ] })
+          ] }),
+          children,
+          (typeof leftHelperText === "string" && !!leftHelperText.length || typeof rightHelperText === "string" && !!rightHelperText.length) && /* @__PURE__ */ jsxRuntime.jsxs(
+            FormFieldSublabelStyled,
+            {
+              $leftHelperText: leftHelperText,
+              $rightHelperText: rightHelperText,
+              $helperTextSize: helperTextSize,
+              $helperIntent: helperIntent,
+              children: [
+                typeof leftHelperText === "string" && !!leftHelperText.length && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  showLeftHelperIcon && intentVariants[helperIntent],
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: leftHelperText })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: rightHelperText })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FormField.displayName = "FormField";
+
+exports.default = FormField;

package/build/cjs/components/FormField/index.cjs

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

package/build/cjs/components/GraficConfiguratiePensii/GraficConfiguratiePensii.cjs

@@ -0,0 +1,152 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const GraficConfiguratiePensiiStyled = styled.svg`
+  & > .limitMinLabel {
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  & > rect:nth-child(1) {
+    fill: ${({ $selected }) => $selected ? utils.colors.info_200 : utils.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 = React.useRef(null);
+  const [w, setW] = React.useState(0);
+  const [h, setH] = React.useState(0);
+  const calculate = React.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 = React.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 ? utils.colors.success_200 : utils.colors.danger_200;
+    const fill_rect_secondary = value >= limit_max ? utils.colors.success_500 : utils.colors.danger_500;
+    const fill_value_text = value >= limit_max ? utils.colors.success_800 : utils.colors.danger_800;
+    return {
+      value: Math.min(maximum, Math.max(0, optimized)),
+      fill_rect_primary,
+      fill_rect_secondary,
+      fill_value_text
+    };
+  }, [value, w]);
+  React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { x: 0, y: calculate.bar_y, height: calculate.bar_h, width: w }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: 0,
+            y: calculate.bar_y,
+            height: calculate.bar_h,
+            width: calculate.secondary_bar_w,
+            fill: calculate_value.fill_rect_primary
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.line_min_x,
+            x2: calculate.line_min_x,
+            y1: 0,
+            y2: h,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.line_max_x,
+            x2: calculate.line_max_x,
+            y1: 0,
+            y2: h,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.default = GraficConfiguratiePensii;

package/build/cjs/components/GraficConfiguratiePensii/index.cjs

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