@lanaco/lnc-react-ui 4.0.80 → 4.0.81

package/dist/LoanCalculatorSection.js

@@ -1,27 +1,677 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { L as p } from "./index-CcLiL4eM.js";
-const m = u((o, a) => {
-  const {
-    loanCalculatorTitle: l,
-    loanCalculatorText: t,
-    loanCalculatorPlaceholder: r,
-    openCalculatorText: e,
-    onOpenCalculator: c = () => {
-    }
-  } = o;
-  return /* @__PURE__ */ n(
-    p,
+import { jsxs as t, jsx as e, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as I, useState as B, useRef as J } from "react";
+import { L as Q } from "./index-D0Cl3mpJ.js";
+import X from "./Modal.js";
+import D from "./Button.js";
+import F from "./TextInput.js";
+import K from "./RangeSlider.js";
+import { s as V } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import Y from "./IconButton.js";
+const Z = V.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  position: relative;
+  margin-bottom: 0.5rem;
+  margin-top: -0.5rem;
+  padding-bottom: 1rem;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: -1.5rem;
+    right: -1.5rem;
+    bottom: 0;
+    height: 0.0625rem;
+    background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+    z-index: 1;
+  }
+
+  & .header__title {
+    color: var(--gray-950, #14161a);
+    text-align: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.5rem;
+    width: 100%;
+  }
+
+  & .header__action {
+    position: absolute;
+    right: 0;
+  }
+`, U = V.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  align-self: stretch;
+  padding: 0.5rem;
+  border-top: 0.0625rem solid var(--neutral-95008, rgba(20, 22, 26, 0.08));
+
+  & .footer__action {
+    color: var(--gray-950-beta, #14161a);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.0056rem;
+  }
+`, ee = V.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+  align-self: stretch;
+  padding-top: 0.5rem;
+
+  & .loan-calculator__right {
+    max-width: 22rem;
+
+    & .loan-calculator__summary {
+      display: flex;
+      padding: 1.25rem;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.25rem;
+      flex: 1 0 0;
+      border-radius: 0.75rem;
+      border: 0.0625rem solid var(--neutral-95008, rgba(20, 22, 26, 0.08));
+      background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+      & .summary__hint {
+        color: var(--gray-600, #676e79);
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1rem;
+        letter-spacing: 0.025rem;
+      }
+
+      & .summary__separator {
+        height: 1px;
+        align-self: stretch;
+        background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+      }
+
+      & .summary__down {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        align-self: stretch;
+
+        & .summary__title-wrapper {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          align-self: stretch;
+
+          & .summary__title {
+            color: var(--gray-950, #14161a);
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 1.25rem;
+            letter-spacing: 0.0156rem;
+
+            &.strong {
+              font-weight: 600;
+              letter-spacing: 0.0063rem;
+            }
+          }
+        }
+      }
+
+      & .summary__up {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        align-self: stretch;
+
+        & .summary__title-wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.125rem;
+
+          & .summary__title {
+            color: var(--gray-950, #14161a);
+            font-size: 1rem;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 1.5rem;
+            letter-spacing: 0.0063rem;
+
+            &.large {
+              font-size: 1.375rem;
+              font-style: normal;
+              font-weight: 600;
+              line-height: 1.75rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  & .loan-calculator__left {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2rem;
+
+    & .loan-calculator__submit {
+      width: 100%;
+    }
+
+    & .loan-calculator__range-inputs {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.5rem;
+      align-self: stretch;
+
+      & .loan-calculator__range-input {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+        align-self: stretch;
+
+        & .range-input__hint {
+          color: var(--gray-500, #868c98);
+          font-size: 0.75rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1rem;
+          letter-spacing: 0.025rem;
+
+          &.center {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            align-self: stretch;
+          }
+        }
+
+        & .range-input__form-field {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.75rem;
+          align-self: stretch;
+
+          & .range-input__label-field {
+            display: flex;
+            align-items: center;
+            align-self: stretch;
+            justify-content: space-between;
+            & .range-input__label {
+              color: var(--gray-950, #14161a);
+              font-size: 0.875rem;
+              font-style: normal;
+              font-weight: 500;
+              line-height: 1.25rem;
+              letter-spacing: -0.0056rem;
+            }
+
+            & .range-input__text {
+              max-width: 100px;
+              width: 100%;
+            }
+          }
+
+          & .range-input__ranger-wrapper {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+`, te = I(
+  ({
+    defaultLoanAmount: n = 2e4,
+    defaultInterestRate: l = 5,
+    defaultLoanPeriod: s = 36,
+    monthlyPayment: v = 599,
+    totalInterestPaid: y = 21579,
+    currency: r = "KM",
+    loanPeriodUnit: c = "months",
+    minLoanAmount: d = 1,
+    maxLoanAmount: u = 3e5,
+    minInterestRate: h = 1,
+    maxInterestRate: g = 15,
+    isFixedInterestRate: x = !1,
+    minLoanPeriod: p = 1,
+    maxLoanPeriod: _ = 240,
+    loanAmountLabel: b = "Loan amount",
+    loanAmountHint: N = "Enter the total loan amount you want to borrow.",
+    interestRateLabel: C = "Interest rate",
+    interestRateHint: w = "Enter the annual interest rate for loan.",
+    loanPeriodLabel: L = "Loan period",
+    loanPeriodHint: $ = "Enter the duration of the loan in months.",
+    submitText: T = "Calculate",
+    summaryMonthlyPaymentText: M = "Monthly payment",
+    summaryMonthlyPaymentHint: E = "Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",
+    summaryTotalPaymentText: P = "Total interest paid",
+    summaryTotalPaymentHint: z = "Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",
+    handleSubmit: S = () => {
+    }
+  }, R) => {
+    const [f, k] = B(n), [i, A] = B(l), [m, O] = B(s), H = (a) => {
+      var o;
+      k(+((o = a == null ? void 0 : a.target) == null ? void 0 : o.value));
+    }, j = (a) => {
+      var o;
+      A(+((o = a == null ? void 0 : a.target) == null ? void 0 : o.value));
+    }, q = (a) => {
+      var o;
+      O(+((o = a == null ? void 0 : a.target) == null ? void 0 : o.value));
+    }, W = () => {
+      S({
+        loanAmount: f,
+        interestRate: i,
+        loanPeriod: m
+      });
+    };
+    return /* @__PURE__ */ t(ee, { children: [
+      /* @__PURE__ */ t("div", { className: "loan-calculator__left", children: [
+        /* @__PURE__ */ t("div", { className: "loan-calculator__range-inputs", children: [
+          /* @__PURE__ */ e("div", { className: "loan-calculator__range-input", children: /* @__PURE__ */ t("div", { className: "range-input__form-field", children: [
+            /* @__PURE__ */ t("div", { className: "range-input__label-field", children: [
+              /* @__PURE__ */ e("div", { className: "range-input__label", children: `${b} (${r})` }),
+              /* @__PURE__ */ e(
+                F,
+                {
+                  value: f,
+                  onChange: H,
+                  className: "range-input__text"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t("div", { className: "range-input__ranger-wrapper", children: [
+              /* @__PURE__ */ e(
+                K,
+                {
+                  className: "range-input__ranger",
+                  defaultValue: f,
+                  value: f,
+                  min: d,
+                  max: u,
+                  onChange: H
+                }
+              ),
+              /* @__PURE__ */ t("div", { className: "range-input__hint center", children: [
+                /* @__PURE__ */ e("div", { children: `${d} ${r}` }),
+                /* @__PURE__ */ e("div", { children: `${u} ${r}` })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "range-input__hint", children: N })
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: "loan-calculator__range-input", children: /* @__PURE__ */ t("div", { className: "range-input__form-field", children: [
+            /* @__PURE__ */ t("div", { className: "range-input__label-field", children: [
+              /* @__PURE__ */ e("div", { className: "range-input__label", children: `${C} (%)` }),
+              /* @__PURE__ */ e(
+                F,
+                {
+                  value: i,
+                  onChange: j,
+                  className: "range-input__text"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t("div", { className: "range-input__ranger-wrapper", children: [
+              /* @__PURE__ */ e(
+                K,
+                {
+                  className: "range-input__ranger",
+                  defaultValue: i,
+                  value: i,
+                  min: h,
+                  max: g,
+                  disabled: x,
+                  onChange: j
+                }
+              ),
+              /* @__PURE__ */ t("div", { className: "range-input__hint center", children: [
+                /* @__PURE__ */ e("div", { children: `${h} %` }),
+                /* @__PURE__ */ e("div", { children: `${g} %` })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "range-input__hint", children: w })
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: "loan-calculator__range-input", children: /* @__PURE__ */ t("div", { className: "range-input__form-field", children: [
+            /* @__PURE__ */ t("div", { className: "range-input__label-field", children: [
+              /* @__PURE__ */ e("div", { className: "range-input__label", children: `${L} (${c})` }),
+              /* @__PURE__ */ e(
+                F,
+                {
+                  value: m,
+                  onChange: q,
+                  className: "range-input__text"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t("div", { className: "range-input__ranger-wrapper", children: [
+              /* @__PURE__ */ e(
+                K,
+                {
+                  className: "range-input__ranger",
+                  defaultValue: m,
+                  value: m,
+                  min: p,
+                  max: _,
+                  onChange: q
+                }
+              ),
+              /* @__PURE__ */ t("div", { className: "range-input__hint center", children: [
+                /* @__PURE__ */ e("div", { children: `${p} ${c}` }),
+                /* @__PURE__ */ e("div", { children: `${_} ${c}` })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "range-input__hint", children: $ })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ e(
+          D,
+          {
+            text: T,
+            className: "loan-calculator__submit",
+            onClick: W
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "loan-calculator__right", children: /* @__PURE__ */ t("div", { className: "loan-calculator__summary", children: [
+        /* @__PURE__ */ t("div", { className: "summary__up", children: [
+          /* @__PURE__ */ t("div", { className: "summary__title-wrapper", children: [
+            /* @__PURE__ */ e("div", { className: "summary__title", children: M }),
+            /* @__PURE__ */ e("div", { className: "summary__title large", children: `${v} ${r}` })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "summary__hint", children: E })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "summary__separator" }),
+        /* @__PURE__ */ t("div", { className: "summary__down", children: [
+          /* @__PURE__ */ t("div", { className: "summary__title-wrapper", children: [
+            /* @__PURE__ */ e("div", { className: "summary__title strong", children: P }),
+            /* @__PURE__ */ e("div", { className: "summary__title", children: `${y} ${r}` })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "summary__hint", children: z })
+        ] })
+      ] }) })
+    ] });
+  }
+), ae = I(
+  ({
+    defaultLoanAmount: n = 2e4,
+    defaultInterestRate: l = 5,
+    defaultLoanPeriod: s = 36,
+    monthlyPayment: v = 599,
+    totalInterestPaid: y = 21579,
+    currency: r = "KM",
+    loanPeriodUnit: c = "months",
+    minLoanAmount: d = 1,
+    maxLoanAmount: u = 3e5,
+    minInterestRate: h = 1,
+    maxInterestRate: g = 15,
+    minLoanPeriod: x = 1,
+    maxLoanPeriod: p = 240,
+    isFixedInterestRate: _ = !1,
+    loanAmountLabel: b = "Loan amount",
+    loanAmountHint: N = "Enter the total loan amount you want to borrow.",
+    interestRateLabel: C = "Interest rate",
+    interestRateHint: w = "Enter the annual interest rate for loan.",
+    loanPeriodLabel: L = "Loan period",
+    loanPeriodHint: $ = "Enter the duration of the loan in months.",
+    submitText: T = "Calculate",
+    summaryMonthlyPaymentText: M = "Monthly payment",
+    summaryMonthlyPaymentHint: E = "Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",
+    summaryTotalPaymentText: P = "Total interest paid",
+    summaryTotalPaymentHint: z = "Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",
+    handleSubmit: S = () => {
+    }
+  }, R) => /* @__PURE__ */ e(
+    te,
     {
-      ref: a,
-      title: l,
-      text: t,
-      openCalculatorText: e,
-      onOpenCalculator: c,
-      placeholderText: r
-    }
-  );
+      defaultLoanAmount: n,
+      defaultInterestRate: l,
+      defaultLoanPeriod: s,
+      monthlyPayment: v,
+      totalInterestPaid: y,
+      currency: r,
+      loanPeriodUnit: c,
+      minLoanAmount: d,
+      maxLoanAmount: u,
+      minInterestRate: h,
+      maxInterestRate: g,
+      isFixedInterestRate: _,
+      minLoanPeriod: x,
+      maxLoanPeriod: p,
+      loanAmountLabel: b,
+      loanAmountHint: N,
+      interestRateLabel: C,
+      interestRateHint: w,
+      loanPeriodLabel: L,
+      loanPeriodHint: $,
+      submitText: T,
+      summaryMonthlyPaymentText: M,
+      summaryMonthlyPaymentHint: E,
+      summaryTotalPaymentText: P,
+      summaryTotalPaymentHint: z,
+      handleSubmit: S
+    }
+  )
+), ne = I(
+  ({ headerTitleText: n = "Loan calculator", handleClick: l = () => {
+  } }, s) => /* @__PURE__ */ t(Z, { children: [
+    /* @__PURE__ */ e("div", { className: "header__title", children: n }),
+    /* @__PURE__ */ e(
+      Y,
+      {
+        icon: "times",
+        borderRadius: "curved",
+        btnType: "basic",
+        color: "neutral",
+        size: "small",
+        className: "header__action",
+        onClick: l
+      }
+    )
+  ] })
+), le = I(
+  ({ footerTitleText: n = "Close", handleClick: l = () => {
+  } }, s) => /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(
+    D,
+    {
+      text: n,
+      btnType: "basic",
+      color: "neutral",
+      onClick: l,
+      className: "footer__action"
+    }
+  ) })
+), re = I(
+  ({
+    defaultLoanAmount: n = 2e4,
+    defaultInterestRate: l = 5,
+    defaultLoanPeriod: s = 36,
+    monthlyPayment: v = 599,
+    totalInterestPaid: y = 21579,
+    currency: r = "KM",
+    loanPeriodUnit: c = "months",
+    minLoanAmount: d = 1,
+    maxLoanAmount: u = 3e5,
+    minInterestRate: h = 1,
+    maxInterestRate: g = 15,
+    isFixedInterestRate: x = !1,
+    minLoanPeriod: p = 1,
+    maxLoanPeriod: _ = 240,
+    headerTitleText: b = "Loan calculator",
+    footerTitleText: N = "Close",
+    loanAmountLabel: C = "Loan amount",
+    loanAmountHint: w = "Enter the total loan amount you want to borrow.",
+    interestRateLabel: L = "Interest rate",
+    interestRateHint: $ = "Enter the annual interest rate for loan.",
+    loanPeriodLabel: T = "Loan period",
+    loanPeriodHint: M = "Enter the duration of the loan in months.",
+    submitText: E = "Calculate",
+    summaryMonthlyPaymentText: P = "Monthly payment",
+    summaryMonthlyPaymentHint: z = "Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",
+    summaryTotalPaymentText: S = "Total interest paid",
+    summaryTotalPaymentHint: R = "Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",
+    handleSubmit: f = () => {
+    },
+    handleCancel: k = () => {
+    }
+  }, i) => {
+    const A = () => {
+      var m;
+      (m = i == null ? void 0 : i.current) == null || m.close(), k();
+    };
+    return /* @__PURE__ */ e(
+      X,
+      {
+        ref: i,
+        header: /* @__PURE__ */ e(
+          ne,
+          {
+            headerTitleText: b,
+            handleClick: A
+          }
+        ),
+        footer: /* @__PURE__ */ e(
+          le,
+          {
+            footerTitleText: N,
+            handleClick: A
+          }
+        ),
+        showCloseButton: !1,
+        children: /* @__PURE__ */ e(
+          ae,
+          {
+            defaultLoanAmount: n,
+            defaultInterestRate: l,
+            defaultLoanPeriod: s,
+            monthlyPayment: v,
+            totalInterestPaid: y,
+            currency: r,
+            loanPeriodUnit: c,
+            minLoanAmount: d,
+            maxLoanAmount: u,
+            minInterestRate: h,
+            maxInterestRate: g,
+            minLoanPeriod: p,
+            maxLoanPeriod: _,
+            isFixedInterestRate: x,
+            loanAmountLabel: C,
+            loanAmountHint: w,
+            interestRateLabel: L,
+            interestRateHint: $,
+            loanPeriodLabel: T,
+            loanPeriodHint: M,
+            submitText: E,
+            summaryMonthlyPaymentText: P,
+            summaryMonthlyPaymentHint: z,
+            summaryTotalPaymentText: S,
+            summaryTotalPaymentHint: R,
+            handleSubmit: f
+          }
+        )
+      }
+    );
+  }
+), pe = I((n, l) => {
+  const {
+    loanCalculatorTitle: s,
+    loanCalculatorText: v,
+    loanCalculatorPlaceholder: y,
+    openCalculatorText: r,
+    onOpenCalculator: c = (a) => {
+    },
+    defaultLoanAmount: d,
+    defaultInterestRate: u,
+    defaultLoanPeriod: h,
+    monthlyPayment: g,
+    totalInterestPaid: x,
+    currency: p,
+    loanPeriodUnit: _,
+    minLoanAmount: b,
+    maxLoanAmount: N,
+    minInterestRate: C,
+    maxInterestRate: w,
+    minLoanPeriod: L,
+    maxLoanPeriod: $,
+    headerTitleText: T,
+    footerTitleText: M,
+    loanAmountLabel: E,
+    loanAmountHint: P,
+    interestRateLabel: z,
+    interestRateHint: S,
+    loanPeriodLabel: R,
+    loanPeriodHint: f,
+    submitText: k,
+    summaryMonthlyPaymentText: i,
+    summaryMonthlyPaymentHint: A,
+    summaryTotalPaymentText: m,
+    summaryTotalPaymentHint: O,
+    handleSubmit: H,
+    handleCancel: j
+  } = n, q = J();
+  return /* @__PURE__ */ t(G, { children: [
+    /* @__PURE__ */ e(
+      Q,
+      {
+        ref: l,
+        title: s,
+        text: v,
+        openCalculatorText: r,
+        onOpenCalculator: (a) => {
+          var o;
+          (o = q == null ? void 0 : q.current) == null || o.open(), c(a);
+        },
+        placeholderText: y
+      }
+    ),
+    /* @__PURE__ */ e(
+      re,
+      {
+        ref: q,
+        defaultLoanAmount: d,
+        defaultInterestRate: u,
+        defaultLoanPeriod: h,
+        monthlyPayment: g,
+        totalInterestPaid: x,
+        currency: p,
+        loanPeriodUnit: _,
+        minLoanAmount: b,
+        maxLoanAmount: N,
+        minInterestRate: C,
+        maxInterestRate: w,
+        minLoanPeriod: L,
+        maxLoanPeriod: $,
+        headerTitleText: T,
+        footerTitleText: M,
+        loanAmountLabel: E,
+        loanAmountHint: P,
+        interestRateLabel: z,
+        interestRateHint: S,
+        loanPeriodLabel: R,
+        loanPeriodHint: f,
+        submitText: k,
+        summaryMonthlyPaymentText: i,
+        summaryMonthlyPaymentHint: A,
+        summaryTotalPaymentText: m,
+        summaryTotalPaymentHint: O,
+        handleSubmit: H,
+        handleCancel: j
+      }
+    )
+  ] });
 });
 export {
-  m as default
+  pe as default
 };