@lanaco/lnc-react-ui 4.0.80 → 4.0.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- "use strict";const e=require("react/jsx-runtime"),h=require("react"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./consts-CtNoHdBj.cjs"),f=require("./index-opywxmcY.cjs"),q=require("./index-BuKj-ITH.cjs"),L=C.styled.div`
1
+ "use strict";const e=require("react/jsx-runtime"),h=require("react"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),T=require("./consts-CtNoHdBj.cjs"),f=require("./index-opywxmcY.cjs"),q=require("./index-Dy-o153l.cjs"),L=C.styled.div`
2
2
  display: flex;
3
3
  gap: 2rem;
4
4
 
@@ -3,7 +3,7 @@ import { forwardRef as h } from "react";
3
3
  import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
4
4
  import { M as L } from "./consts-C1uHV4xc.js";
5
5
  import { L as T } from "./index-5F6QsgOG.js";
6
- import { L as F } from "./index-CcLiL4eM.js";
6
+ import { L as F } from "./index-D0Cl3mpJ.js";
7
7
  const M = C.div`
8
8
  display: flex;
9
9
  gap: 2rem;
@@ -1 +1,226 @@
1
- "use strict";const n=require("react/jsx-runtime"),u=require("react"),s=require("./index-BuKj-ITH.cjs"),i=u.forwardRef((t,e)=>{const{loanCalculatorTitle:o,loanCalculatorText:a,loanCalculatorPlaceholder:l,openCalculatorText:r,onOpenCalculator:c=()=>{}}=t;return n.jsx(s.LoanCalculator,{ref:e,title:o,text:a,openCalculatorText:r,onOpenCalculator:c,placeholderText:l})});module.exports=i;
1
+ "use strict";const e=require("react/jsx-runtime"),i=require("react"),W=require("./index-Dy-o153l.cjs"),D=require("./Modal.cjs"),V=require("./Button.cjs"),F=require("./TextInput.cjs"),K=require("./RangeSlider.cjs"),O=require("./emotion-styled.browser.esm-BtEseadx.cjs"),G=require("./IconButton.cjs"),J=O.styled.div`
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 0.5rem;
5
+ align-self: stretch;
6
+ position: relative;
7
+ margin-bottom: 0.5rem;
8
+ margin-top: -0.5rem;
9
+ padding-bottom: 1rem;
10
+
11
+ &::after {
12
+ content: "";
13
+ position: absolute;
14
+ left: -1.5rem;
15
+ right: -1.5rem;
16
+ bottom: 0;
17
+ height: 0.0625rem;
18
+ background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
19
+ z-index: 1;
20
+ }
21
+
22
+ & .header__title {
23
+ color: var(--gray-950, #14161a);
24
+ text-align: center;
25
+ font-size: 1rem;
26
+ font-style: normal;
27
+ font-weight: 500;
28
+ line-height: 1.5rem;
29
+ width: 100%;
30
+ }
31
+
32
+ & .header__action {
33
+ position: absolute;
34
+ right: 0;
35
+ }
36
+ `,Q=O.styled.div`
37
+ display: flex;
38
+ justify-content: flex-end;
39
+ align-items: center;
40
+ align-self: stretch;
41
+ padding: 0.5rem;
42
+ border-top: 0.0625rem solid var(--neutral-95008, rgba(20, 22, 26, 0.08));
43
+
44
+ & .footer__action {
45
+ color: var(--gray-950-beta, #14161a);
46
+ font-size: 0.875rem;
47
+ font-style: normal;
48
+ font-weight: 500;
49
+ line-height: 1.25rem;
50
+ letter-spacing: -0.0056rem;
51
+ }
52
+ `,X=O.styled.div`
53
+ display: flex;
54
+ align-items: flex-start;
55
+ gap: 2rem;
56
+ align-self: stretch;
57
+ padding-top: 0.5rem;
58
+
59
+ & .loan-calculator__right {
60
+ max-width: 22rem;
61
+
62
+ & .loan-calculator__summary {
63
+ display: flex;
64
+ padding: 1.25rem;
65
+ flex-direction: column;
66
+ align-items: flex-start;
67
+ gap: 1.25rem;
68
+ flex: 1 0 0;
69
+ border-radius: 0.75rem;
70
+ border: 0.0625rem solid var(--neutral-95008, rgba(20, 22, 26, 0.08));
71
+ background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
72
+
73
+ & .summary__hint {
74
+ color: var(--gray-600, #676e79);
75
+ font-size: 0.75rem;
76
+ font-style: normal;
77
+ font-weight: 400;
78
+ line-height: 1rem;
79
+ letter-spacing: 0.025rem;
80
+ }
81
+
82
+ & .summary__separator {
83
+ height: 1px;
84
+ align-self: stretch;
85
+ background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
86
+ }
87
+
88
+ & .summary__down {
89
+ display: flex;
90
+ flex-direction: column;
91
+ align-items: center;
92
+ gap: 0.5rem;
93
+ align-self: stretch;
94
+
95
+ & .summary__title-wrapper {
96
+ display: flex;
97
+ justify-content: space-between;
98
+ align-items: center;
99
+ align-self: stretch;
100
+
101
+ & .summary__title {
102
+ color: var(--gray-950, #14161a);
103
+ font-size: 0.875rem;
104
+ font-style: normal;
105
+ font-weight: 400;
106
+ line-height: 1.25rem;
107
+ letter-spacing: 0.0156rem;
108
+
109
+ &.strong {
110
+ font-weight: 600;
111
+ letter-spacing: 0.0063rem;
112
+ }
113
+ }
114
+ }
115
+ }
116
+
117
+ & .summary__up {
118
+ display: flex;
119
+ flex-direction: column;
120
+ align-items: flex-start;
121
+ gap: 8px;
122
+ align-self: stretch;
123
+
124
+ & .summary__title-wrapper {
125
+ display: flex;
126
+ flex-direction: column;
127
+ align-items: flex-start;
128
+ gap: 0.125rem;
129
+
130
+ & .summary__title {
131
+ color: var(--gray-950, #14161a);
132
+ font-size: 1rem;
133
+ font-style: normal;
134
+ font-weight: 600;
135
+ line-height: 1.5rem;
136
+ letter-spacing: 0.0063rem;
137
+
138
+ &.large {
139
+ font-size: 1.375rem;
140
+ font-style: normal;
141
+ font-weight: 600;
142
+ line-height: 1.75rem;
143
+ }
144
+ }
145
+ }
146
+ }
147
+ }
148
+ }
149
+
150
+ & .loan-calculator__left {
151
+ display: flex;
152
+ flex-direction: column;
153
+ align-items: flex-start;
154
+ gap: 2rem;
155
+
156
+ & .loan-calculator__submit {
157
+ width: 100%;
158
+ }
159
+
160
+ & .loan-calculator__range-inputs {
161
+ display: flex;
162
+ flex-direction: column;
163
+ align-items: flex-start;
164
+ gap: 1.5rem;
165
+ align-self: stretch;
166
+
167
+ & .loan-calculator__range-input {
168
+ display: flex;
169
+ flex-direction: column;
170
+ align-items: flex-start;
171
+ gap: 1rem;
172
+ align-self: stretch;
173
+
174
+ & .range-input__hint {
175
+ color: var(--gray-500, #868c98);
176
+ font-size: 0.75rem;
177
+ font-style: normal;
178
+ font-weight: 400;
179
+ line-height: 1rem;
180
+ letter-spacing: 0.025rem;
181
+
182
+ &.center {
183
+ display: flex;
184
+ justify-content: space-between;
185
+ align-items: center;
186
+ align-self: stretch;
187
+ }
188
+ }
189
+
190
+ & .range-input__form-field {
191
+ display: flex;
192
+ flex-direction: column;
193
+ align-items: flex-start;
194
+ gap: 0.75rem;
195
+ align-self: stretch;
196
+
197
+ & .range-input__label-field {
198
+ display: flex;
199
+ align-items: center;
200
+ align-self: stretch;
201
+ justify-content: space-between;
202
+ & .range-input__label {
203
+ color: var(--gray-950, #14161a);
204
+ font-size: 0.875rem;
205
+ font-style: normal;
206
+ font-weight: 500;
207
+ line-height: 1.25rem;
208
+ letter-spacing: -0.0056rem;
209
+ }
210
+
211
+ & .range-input__text {
212
+ max-width: 100px;
213
+ width: 100%;
214
+ }
215
+ }
216
+
217
+ & .range-input__ranger-wrapper {
218
+ display: flex;
219
+ flex-direction: column;
220
+ width: 100%;
221
+ }
222
+ }
223
+ }
224
+ }
225
+ }
226
+ `,Y=i.forwardRef(({defaultLoanAmount:t=2e4,defaultInterestRate:n=5,defaultLoanPeriod:o=36,monthlyPayment:x=599,totalInterestPaid:y=21579,currency:l="KM",loanPeriodUnit:c="months",minLoanAmount:d=1,maxLoanAmount:u=3e5,minInterestRate:h=1,maxInterestRate:g=15,isFixedInterestRate:v=!1,minLoanPeriod:_=1,maxLoanPeriod:p=240,loanAmountLabel:j="Loan amount",loanAmountHint:b="Enter the total loan amount you want to borrow.",interestRateLabel:N="Interest rate",interestRateHint:w="Enter the annual interest rate for loan.",loanPeriodLabel:C="Loan period",loanPeriodHint:L="Enter the duration of the loan in months.",submitText:T="Calculate",summaryMonthlyPaymentText:$="Monthly payment",summaryMonthlyPaymentHint:q="Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",summaryTotalPaymentText:R="Total interest paid",summaryTotalPaymentHint:M="Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",handleSubmit:S=()=>{}},z)=>{const[f,A]=i.useState(t),[r,P]=i.useState(n),[m,H]=i.useState(o),I=a=>{var s;A(+((s=a==null?void 0:a.target)==null?void 0:s.value))},k=a=>{var s;P(+((s=a==null?void 0:a.target)==null?void 0:s.value))},E=a=>{var s;H(+((s=a==null?void 0:a.target)==null?void 0:s.value))},B=()=>{S({loanAmount:f,interestRate:r,loanPeriod:m})};return e.jsxs(X,{className:"loan-calculator__modal-content",children:[e.jsxs("div",{className:"loan-calculator__left",children:[e.jsxs("div",{className:"loan-calculator__range-inputs",children:[e.jsx("div",{className:"loan-calculator__range-input",children:e.jsxs("div",{className:"range-input__form-field",children:[e.jsxs("div",{className:"range-input__label-field",children:[e.jsx("div",{className:"range-input__label",children:`${j} (${l})`}),e.jsx(F,{value:f,onChange:I,className:"range-input__text"})]}),e.jsxs("div",{className:"range-input__ranger-wrapper",children:[e.jsx(K,{className:"range-input__ranger",defaultValue:f,value:f,min:d,max:u,onChange:I}),e.jsxs("div",{className:"range-input__hint center",children:[e.jsx("div",{children:`${d} ${l}`}),e.jsx("div",{children:`${u} ${l}`})]})]}),e.jsx("div",{className:"range-input__hint",children:b})]})}),e.jsx("div",{className:"loan-calculator__range-input",children:e.jsxs("div",{className:"range-input__form-field",children:[e.jsxs("div",{className:"range-input__label-field",children:[e.jsx("div",{className:"range-input__label",children:`${N} (%)`}),e.jsx(F,{value:r,onChange:k,className:"range-input__text"})]}),e.jsxs("div",{className:"range-input__ranger-wrapper",children:[e.jsx(K,{className:"range-input__ranger",defaultValue:r,value:r,min:h,max:g,disabled:v,onChange:k}),e.jsxs("div",{className:"range-input__hint center",children:[e.jsx("div",{children:`${h} %`}),e.jsx("div",{children:`${g} %`})]})]}),e.jsx("div",{className:"range-input__hint",children:w})]})}),e.jsx("div",{className:"loan-calculator__range-input",children:e.jsxs("div",{className:"range-input__form-field",children:[e.jsxs("div",{className:"range-input__label-field",children:[e.jsx("div",{className:"range-input__label",children:`${C} (${c})`}),e.jsx(F,{value:m,onChange:E,className:"range-input__text"})]}),e.jsxs("div",{className:"range-input__ranger-wrapper",children:[e.jsx(K,{className:"range-input__ranger",defaultValue:m,value:m,min:_,max:p,onChange:E}),e.jsxs("div",{className:"range-input__hint center",children:[e.jsx("div",{children:`${_} ${c}`}),e.jsx("div",{children:`${p} ${c}`})]})]}),e.jsx("div",{className:"range-input__hint",children:L})]})})]}),e.jsx(V,{text:T,className:"loan-calculator__submit",onClick:B})]}),e.jsx("div",{className:"loan-calculator__right",children:e.jsxs("div",{className:"loan-calculator__summary",children:[e.jsxs("div",{className:"summary__up",children:[e.jsxs("div",{className:"summary__title-wrapper",children:[e.jsx("div",{className:"summary__title",children:$}),e.jsx("div",{className:"summary__title large",children:`${x} ${l}`})]}),e.jsx("div",{className:"summary__hint",children:q})]}),e.jsx("div",{className:"summary__separator"}),e.jsxs("div",{className:"summary__down",children:[e.jsxs("div",{className:"summary__title-wrapper",children:[e.jsx("div",{className:"summary__title strong",children:R}),e.jsx("div",{className:"summary__title",children:`${y} ${l}`})]}),e.jsx("div",{className:"summary__hint",children:M})]})]})})]})}),Z=i.forwardRef(({defaultLoanAmount:t=2e4,defaultInterestRate:n=5,defaultLoanPeriod:o=36,monthlyPayment:x=599,totalInterestPaid:y=21579,currency:l="KM",loanPeriodUnit:c="months",minLoanAmount:d=1,maxLoanAmount:u=3e5,minInterestRate:h=1,maxInterestRate:g=15,minLoanPeriod:v=1,maxLoanPeriod:_=240,isFixedInterestRate:p=!1,loanAmountLabel:j="Loan amount",loanAmountHint:b="Enter the total loan amount you want to borrow.",interestRateLabel:N="Interest rate",interestRateHint:w="Enter the annual interest rate for loan.",loanPeriodLabel:C="Loan period",loanPeriodHint:L="Enter the duration of the loan in months.",submitText:T="Calculate",summaryMonthlyPaymentText:$="Monthly payment",summaryMonthlyPaymentHint:q="Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",summaryTotalPaymentText:R="Total interest paid",summaryTotalPaymentHint:M="Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",handleSubmit:S=()=>{}},z)=>e.jsx(Y,{defaultLoanAmount:t,defaultInterestRate:n,defaultLoanPeriod:o,monthlyPayment:x,totalInterestPaid:y,currency:l,loanPeriodUnit:c,minLoanAmount:d,maxLoanAmount:u,minInterestRate:h,maxInterestRate:g,isFixedInterestRate:p,minLoanPeriod:v,maxLoanPeriod:_,loanAmountLabel:j,loanAmountHint:b,interestRateLabel:N,interestRateHint:w,loanPeriodLabel:C,loanPeriodHint:L,submitText:T,summaryMonthlyPaymentText:$,summaryMonthlyPaymentHint:q,summaryTotalPaymentText:R,summaryTotalPaymentHint:M,handleSubmit:S})),U=i.forwardRef(({headerTitleText:t="Loan calculator",handleClick:n=()=>{}},o)=>e.jsxs(J,{className:"loan-calculator__modal-header",children:[e.jsx("div",{className:"header__title",children:t}),e.jsx(G,{icon:"times",borderRadius:"curved",btnType:"basic",color:"neutral",size:"small",className:"header__action",onClick:n})]})),ee=i.forwardRef(({footerTitleText:t="Close",handleClick:n=()=>{}},o)=>e.jsx(Q,{className:"loan-calculator__modal-footer",children:e.jsx(V,{text:t,btnType:"basic",color:"neutral",onClick:n,className:"footer__action"})})),ae=i.forwardRef(({defaultLoanAmount:t=2e4,defaultInterestRate:n=5,defaultLoanPeriod:o=36,monthlyPayment:x=599,totalInterestPaid:y=21579,currency:l="KM",loanPeriodUnit:c="months",minLoanAmount:d=1,maxLoanAmount:u=3e5,minInterestRate:h=1,maxInterestRate:g=15,isFixedInterestRate:v=!1,minLoanPeriod:_=1,maxLoanPeriod:p=240,headerTitleText:j="Loan calculator",footerTitleText:b="Close",loanAmountLabel:N="Loan amount",loanAmountHint:w="Enter the total loan amount you want to borrow.",interestRateLabel:C="Interest rate",interestRateHint:L="Enter the annual interest rate for loan.",loanPeriodLabel:T="Loan period",loanPeriodHint:$="Enter the duration of the loan in months.",submitText:q="Calculate",summaryMonthlyPaymentText:R="Monthly payment",summaryMonthlyPaymentHint:M="Lorem ipsum dolor sit amet consectetur. Eu eu velit faucibus hendrerit egestas aliquam.",summaryTotalPaymentText:S="Total interest paid",summaryTotalPaymentHint:z="Lorem ipsum dolor sit amet consectetur. Sed sed viverra sed lobortis. At eu tellus tristique hac quis.",handleSubmit:f=()=>{},handleCancel:A=()=>{}},r)=>{const P=()=>{var m;(m=r==null?void 0:r.current)==null||m.close(),A()};return e.jsx(D,{ref:r,header:e.jsx(U,{headerTitleText:j,handleClick:P}),footer:e.jsx(ee,{footerTitleText:b,handleClick:P}),showCloseButton:!1,className:"loan-calculator__modal",children:e.jsx(Z,{defaultLoanAmount:t,defaultInterestRate:n,defaultLoanPeriod:o,monthlyPayment:x,totalInterestPaid:y,currency:l,loanPeriodUnit:c,minLoanAmount:d,maxLoanAmount:u,minInterestRate:h,maxInterestRate:g,minLoanPeriod:_,maxLoanPeriod:p,isFixedInterestRate:v,loanAmountLabel:N,loanAmountHint:w,interestRateLabel:C,interestRateHint:L,loanPeriodLabel:T,loanPeriodHint:$,submitText:q,summaryMonthlyPaymentText:R,summaryMonthlyPaymentHint:M,summaryTotalPaymentText:S,summaryTotalPaymentHint:z,handleSubmit:f})})}),te=i.forwardRef((t,n)=>{const{loanCalculatorTitle:o,loanCalculatorText:x,loanCalculatorPlaceholder:y,openCalculatorText:l,onOpenCalculator:c=a=>{},defaultLoanAmount:d,defaultInterestRate:u,defaultLoanPeriod:h,monthlyPayment:g,totalInterestPaid:v,currency:_,loanPeriodUnit:p,minLoanAmount:j,maxLoanAmount:b,minInterestRate:N,maxInterestRate:w,minLoanPeriod:C,maxLoanPeriod:L,headerTitleText:T,footerTitleText:$,loanAmountLabel:q,loanAmountHint:R,interestRateLabel:M,interestRateHint:S,loanPeriodLabel:z,loanPeriodHint:f,submitText:A,summaryMonthlyPaymentText:r,summaryMonthlyPaymentHint:P,summaryTotalPaymentText:m,summaryTotalPaymentHint:H,handleSubmit:I,handleCancel:k}=t,E=i.useRef(),B=a=>{var s;(s=E==null?void 0:E.current)==null||s.open(),c(a)};return e.jsxs(e.Fragment,{children:[e.jsx(W.LoanCalculator,{ref:n,title:o,text:x,openCalculatorText:l,onOpenCalculator:B,placeholderText:y}),e.jsx(ae,{ref:E,defaultLoanAmount:d,defaultInterestRate:u,defaultLoanPeriod:h,monthlyPayment:g,totalInterestPaid:v,currency:_,loanPeriodUnit:p,minLoanAmount:j,maxLoanAmount:b,minInterestRate:N,maxInterestRate:w,minLoanPeriod:C,maxLoanPeriod:L,headerTitleText:T,footerTitleText:$,loanAmountLabel:q,loanAmountHint:R,interestRateLabel:M,interestRateHint:S,loanPeriodLabel:z,loanPeriodHint:f,submitText:A,summaryMonthlyPaymentText:r,summaryMonthlyPaymentHint:P,summaryTotalPaymentText:m,summaryTotalPaymentHint:H,handleSubmit:I,handleCancel:k})]})});module.exports=te;