@lanaco/lnc-react-ui 4.0.188 → 4.0.189

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
- "version": "4.0.188",
3
+ "version": "4.0.189",
4
4
  "description": "React component library",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -1,308 +0,0 @@
1
- "use strict";const e=require("react/jsx-runtime"),c=require("react"),S=require("./emotion-styled.browser.esm-BtEseadx.cjs"),q=require("./consts-goSZX3xP.cjs"),a=require("./utils-RnrgDDZP.cjs"),xe=require("./index-uwl7BjRF.cjs"),N=require("./Badge.cjs"),Se=require("./Popover.cjs"),ye=require("./PopoverTrigger.cjs"),Pe=require("./PopoverContent.cjs"),Ce=require("./useDetectMobile-zkbzoOGV.cjs"),r=require("./style-BAcV7F53.cjs"),_e=S.styled.a`
2
- display: flex;
3
- flex-direction: column;
4
- gap: 0.5rem;
5
- cursor: pointer;
6
- overflow: hidden;
7
- width: 100%;
8
- text-decoration: none;
9
- color: var(--gray-950, #14161a);
10
- & .seller {
11
- text-transform: uppercase;
12
- ${a.truncateText()}
13
- color: var(--gray-500);
14
- font-size: 0.625rem;
15
- font-weight: 400;
16
- }
17
-
18
- & .wrapper-card-1 {
19
- display: flex;
20
- flex-direction: column;
21
- gap: 0.12rem;
22
- }
23
-
24
- & .wrapper-card-2 {
25
- display: flex;
26
- flex-direction: column;
27
- gap: 0;
28
- }
29
-
30
- & .wrapper-card-3 {
31
- display: flex;
32
- flex-wrap: wrap;
33
- gap: 0.25rem;
34
-
35
- & > div {
36
- & > div {
37
- width: 100% !important;
38
- }
39
- }
40
- }
41
-
42
- & .tag {
43
- height: 1.5rem;
44
- gap: 0.25rem;
45
- padding: 0.25rem 0.375rem;
46
- border-radius: 0.375rem;
47
- background: #f9fafb;
48
- border: 1px solid var(--gray-95012, #14161a1f);
49
- font-weight: 400;
50
- font-size: 0.75rem;
51
- line-height: 1rem;
52
- letter-spacing: 0.025rem;
53
- color: var(--gray-950, #14161a);
54
- white-space: nowrap;
55
- flex: 0 0 auto;
56
-
57
- & i {
58
- color: var(--yellow-500, #f59e0b);
59
- }
60
- }
61
-
62
- & .card-title {
63
- font-size: 0.875rem;
64
- font-weight: 600;
65
- ${a.truncateTextInRows(2)}
66
- }
67
-
68
- & .price-text {
69
- font-size: 1rem;
70
- font-weight: 600;
71
- ${a.truncateText()}
72
- display: flex;
73
- align-items: end;
74
- gap: 0.5rem;
75
- color: var(--gray-950, #14161a);
76
-
77
- &.new-price {
78
- color: var(--danger-600, #e11d48);
79
- }
80
-
81
- & .full-price {
82
- text-decoration: line-through;
83
- font-size: 0.75rem;
84
- font-weight: 400;
85
- padding-bottom: 0.125rem;
86
- color: var(--gray-600, #676e79);
87
- }
88
- }
89
-
90
- & .location-text {
91
- font-size: 0.75rem;
92
- font-weight: 400;
93
- color: var(--gray-600, #676e79);
94
- ${a.truncateText()}
95
- }
96
-
97
- & .tags-wrapper {
98
- display: flex;
99
- gap: 0.5rem;
100
- }
101
-
102
- & .tags-popover__trigger {
103
- display: flex;
104
- gap: 0.25rem;
105
- }
106
-
107
- @media (max-width: ${q.MOBILE_SIZE_PX+"px"}) {
108
- overflow: visible;
109
-
110
- & .wrapper-card-3 {
111
- flex-wrap: nowrap;
112
- justify-content: flex-start;
113
- overflow-x: scroll;
114
- width: 8.875rem !important;
115
-
116
- -webkit-overflow-scrolling: touch;
117
- ::-webkit-scrollbar {
118
- -webkit-appearance: none;
119
- }
120
- -ms-overflow-style: none;
121
- /* Internet Explorer 10+ */
122
- scrollbar-width: none;
123
- /* Firefox */
124
-
125
- &::-webkit-scrollbar {
126
- display: none;
127
- /* Safari and Chrome */
128
- }
129
-
130
- & > div {
131
- & > div {
132
- width: 8.875rem !important;
133
- }
134
- }
135
- }
136
-
137
- & .tags-popover__trigger {
138
- overflow-x: scroll;
139
- justify-content: flex-start;
140
- width: 100%;
141
-
142
- -webkit-overflow-scrolling: touch;
143
- ::-webkit-scrollbar {
144
- -webkit-appearance: none;
145
- }
146
- -ms-overflow-style: none;
147
- /* Internet Explorer 10+ */
148
- scrollbar-width: none;
149
- /* Firefox */
150
-
151
- &::-webkit-scrollbar {
152
- display: none;
153
- /* Safari and Chrome */
154
- }
155
- }
156
-
157
- & .price-text {
158
- font-size: 0.875rem;
159
- font-weight: 600;
160
-
161
- & .full-price {
162
- display: none;
163
- }
164
- }
165
- }
166
-
167
- &:hover .product-image-wrapper img {
168
- transform: scale(1.1);
169
- }
170
- `,Re=S.styled.div`
171
- position: relative;
172
- overflow: hidden;
173
- border-radius: 0.75rem;
174
- width: 100%;
175
- aspect-ratio: 1 / 1;
176
- border: 1px solid #0c15201f;
177
-
178
- & .bookmarking-btn {
179
- position: absolute;
180
- right: 0.5rem;
181
- top: 0.5rem;
182
- z-index: 1;
183
-
184
- display: none;
185
-
186
- align-items: center;
187
- justify-content: center;
188
-
189
- width: 2.25rem;
190
- height: 2.25rem;
191
- border-radius: ${i=>a.getBorderRadiusValueWithUnits(i.theme,"curved")};
192
- border: 1px solid var(--gray-95008);
193
- background-color: white;
194
- color: var(--gray-950);
195
- transition: transform 0.2s ease;
196
-
197
- &:hover {
198
- transform: scale(1.05);
199
- }
200
-
201
- i {
202
- color: #14161a;
203
- font-size: 1.1rem;
204
- line-height: 1;
205
- }
206
- }
207
-
208
- &:hover {
209
- & .bookmarking-btn {
210
- display: flex;
211
- }
212
- }
213
-
214
- & img {
215
- display: block;
216
- width: 100%;
217
- height: 100%;
218
- object-fit: cover;
219
- border-radius: 0.75rem;
220
- transition: var(--transition, all 0.3s ease);
221
- }
222
-
223
- @media (max-width: ${q.MOBILE_SIZE_PX+"px"}) {
224
- & img {
225
- width: 8.875rem;
226
- height: 8.875rem;
227
- min-width: 8.875rem;
228
- min-height: 8.875rem;
229
- object-fit: cover;
230
- }
231
-
232
- & .bookmarking-btn {
233
- display: flex;
234
- bottom: 0.5rem;
235
- top: unset;
236
- }
237
- }
238
- `,Le=S.styled.div`
239
- background: var(--white, #fff);
240
- z-index: 1;
241
-
242
- border: 1px solid var(--gray-200, #dddfe4);
243
- border-radius: 0.5rem;
244
- line-height: 1rem;
245
- position: absolute;
246
- padding: 0.5rem 0.75rem;
247
- top: 0.5rem;
248
- left: 25%;
249
- transform: translateX(-50%);
250
- min-width: 13rem;
251
-
252
- &::before,
253
- &::after {
254
- content: "";
255
- position: absolute;
256
- left: 50%;
257
- transform: translateX(-50%);
258
- border-style: solid;
259
- border-width: 0.625rem;
260
- }
261
-
262
- &::after {
263
- top: -1.1875rem;
264
- border-color: transparent transparent var(--white, #fff) transparent;
265
- }
266
-
267
- &::before {
268
- top: -1.25rem;
269
- border-color: transparent transparent var(--gray-200, #dddfe4) transparent;
270
- }
271
-
272
- & .tags-popover__content {
273
- display: flex;
274
- flex-wrap: wrap;
275
- flex-direction: column;
276
- gap: 0.375rem;
277
- font-size: 0.75rem;
278
- font-weight: 400;
279
-
280
- & .tags-popover__name {
281
- color: var(--gray-600, #676e79);
282
- }
283
-
284
- & .tags-popover__value {
285
- color: var(--gray-950, #14161a);
286
- }
287
- }
288
- `,Ne=S.styled.div`
289
- display: flex;
290
- align-items: center;
291
- gap: 0.25rem;
292
- color: var(--gray-500);
293
- font-size: 0.75rem;
294
- font-weight: 500;
295
-
296
- & i {
297
- font-size: 1rem;
298
- color: var(--warning-500, #F59E0B);
299
- }
300
- `,$e=c.forwardRef(({sponsoredText:i="Sponsored"},y)=>e.jsxs(Ne,{ref:y,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:i})]})),We="Vehicles_Cars",Ee="Vehicles_Motorcycles",Te="Vehicles_Trucks",qe="Vehicles_AgriculturalMachines_Tractors",Oe="Vehicles_ConstructionMachines",Ve="Vehicles_Bus",Be="Vehicles_Campers",ze="RealEstates_",s={Mileage:{icon:"mng-lnc-road",measure:"km"},YearOfProduction:{icon:"mng-lnc-calendar",measure:""},Fuel:{icon:"mng-lnc-gas-station",measure:""},EnginePowerKW:{icon:"mng-lnc-engine",measure:"kW"},Transmission:{icon:"mng-lnc-transmission",measure:""},Model:{icon:"mng-lnc-application",measure:""},Brand:{icon:"mng-lnc-car--front",measure:""},SurfaceArea:{icon:"mng-lnc-right-angle",measure:""},Floor:{icon:"mng-lnc-elevator",measure:""},FurnishedCondition:{icon:"mng-lnc-sofa-01",measure:""},AdType:{icon:"mng-lnc-notes",measure:""},NumberOfRooms:{icon:"mng-lnc-meeting-room",measure:""},HeatingType:{icon:"mng-lnc-heat",measure:""},AirConditioning:{icon:"mng-lnc-air-conditioner",measure:""},Type:{icon:"mng-lnc-house-building",measure:""},Parking:{icon:"mng-lnc-parking-area-circle",measure:""},Internet:{icon:"mng-lnc-wifi-02",measure:""},State:{icon:"mng-lnc-settings-1",measure:""},NumberOfPremises:{icon:"mng-lnc-meeting-room",measure:""},Pool:{icon:"mng-lnc-pool",measure:""},Approach:{icon:"mng-lnc-driveway",measure:""},NumberOfBeds:{icon:"mng-lnc-bed",measure:""},Kitchen:{icon:"mng-lnc-fridge",measure:""},BathroomToilet:{icon:"mng-lnc-bath",measure:""},default:{icon:" mng-lnc-clock--filled",measure:""}},Ie=c.forwardRef((i,y)=>{const{uuid:m,sellerUuid:$,name:A,price:P=0,sellingPrice:w,currency:j,isNegotiable:C,isFree:_,imageUrl:K,location:H,sponsored:Q,imageComponent:O,freeText:J="Free",negotiableText:ee="Negotiable",tags:t=[],categoryCode:R,categoryName:re,condition:V,quantity:W,trade:B,sponsoredText:oe,forCart:ne,forOrder:te,contactSeller:ie,hasVariants:ae,hasQuantities:se,status:le,onBookmark:E=()=>{},actionComponent:k,bookmarked:z,bookmarkLists:ce,metadata:b,sellerName:I,nameSlug:L,onSelectCard:de=()=>{},LinkComponent:M}=i,me=M||"a",T=Ce.useDetectMobile(),he=()=>{var h;if(!a.isDefined(k))return e.jsx(e.Fragment,{});const o=k,n=(h=k==null?void 0:k.props)==null?void 0:h.children,d=c.cloneElement(n,{key:`bookmark_pr__${z}`,bookmarked:z,productUuid:m,onAddToBookmark:()=>E(!0,m),onRemoveFromBookmark:()=>E(!1,m),bookmarkedUuidList:ce,sellerUuid:$,handleBookmarking:E,forCart:ne,forOrder:te,contactSeller:ie,hasVariants:ae,status:le,quantity:W,hasQuantities:se,productBasicInfo:{uuid:m,price:P,sellingPrice:w,categoryCode:R,categoryName:re,currency:j,isNegotiable:C,isFree:_}});return c.cloneElement(o,void 0,d)},D=[We,Ee,Te,qe,Oe,Ve,Be,ze].some(o=>R==null?void 0:R.includes(o)),[pe,F]=c.useState(!1),ue=()=>{F(!0)},ge=()=>{F(!1)},l=c.useRef(null),g=c.useRef([]),[fe,G]=c.useState(t==null?void 0:t.length),be=()=>{var h,v,x;if(!(l!=null&&l.current)||((h=g==null?void 0:g.current)==null?void 0:h.length)===0)return;if(T){G(t==null?void 0:t.length);return}const o=(v=l==null?void 0:l.current)==null?void 0:v.offsetWidth;let n=0,d=0;for(let p=0;p<(t==null?void 0:t.length);p++){const f=((x=g==null?void 0:g.current[p])==null?void 0:x.offsetWidth)||0,u=n+f+4;if(u<=o)n+=u,d++;else break}G(d)};c.useEffect(()=>{const o=l==null?void 0:l.current;if(!o)return;const n=new ResizeObserver(()=>{be()});return n.observe(o),()=>{n.disconnect()}},[t,T]);const ve=()=>{var o;return e.jsx("div",{className:"tags-popover__trigger",children:(o=t==null?void 0:t.slice(0,fe))==null?void 0:o.map((n,d)=>{var f,u,X,Y,Z;const h=((f=s==null?void 0:s[n==null?void 0:n.code])==null?void 0:f.icon)??((u=s==null?void 0:s.default)==null?void 0:u.icon)??"",v=((X=n==null?void 0:n.measurementUnit)==null?void 0:X.symbol)??((Y=s==null?void 0:s[n==null?void 0:n.code])==null?void 0:Y.measure)??"",p=[(n==null?void 0:n.value)??((Z=n==null?void 0:n.multiOptions)==null?void 0:Z[0])??"",v].filter(Boolean).join(" ");return e.jsxs(N,{ref:ke=>g.current[d]=ke,className:"tag",children:[e.jsx("i",{className:h}),p]},`detailed-products-section-tag__${d+1}`)})})},we=()=>e.jsx("div",{className:"tags-popover__content",children:t==null?void 0:t.map((o,n)=>{var p,f,u;const d=((p=o==null?void 0:o.measurementUnit)==null?void 0:p.symbol)??((f=s==null?void 0:s[o==null?void 0:o.code])==null?void 0:f.measure)??"",v=[(o==null?void 0:o.value)??((u=o==null?void 0:o.multiOptions)==null?void 0:u[0])??"",d].filter(Boolean).join(" "),x=o==null?void 0:o.name;return e.jsxs("div",{children:[e.jsx("span",{className:"tags-popover__name",children:`${x}: `}),e.jsx("span",{className:"tags-popover__value",children:v})]},`detailed-products-section-tag-dropdown__${n+1}`)})}),je=()=>e.jsxs(e.Fragment,{children:[V&&e.jsx(N,{className:"tag",children:V},"detailed-products-section-tag__condition"),W&&e.jsx(N,{className:"tag",children:W},"detailed-products-section-tag__quantity"),B&&e.jsx(N,{className:"tag",children:B},"detailed-products-section-tag__trade")]}),U=P>0&&j&&C!==!0&&_!==!0&&P!==w;return e.jsxs(_e,{ref:l,className:"product-card","data-accessor":b==null?void 0:b.accessor,name:b==null?void 0:b.name,onClick:o=>de(o,l),as:me,...M?{to:`/product/${a.isDefinedNotEmptyString(L)?`${L}-`:""}${m}`}:{href:`/product/${a.isDefinedNotEmptyString(L)?`${L}-`:""}${m}`},children:[e.jsxs(Re,{className:"product-image-wrapper",children:[e.jsx("div",{onClick:o=>{o==null||o.preventDefault(),o==null||o.stopPropagation()},children:e.jsx(he,{})}),a.isDefined(O)?O:e.jsx(xe.ProductImageWrapper,{src:K})]}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"seller",title:I,children:I}),e.jsx("div",{className:"card-title",children:A})]}),e.jsxs("div",{className:"wrapper-card-3",onClick:o=>{o==null||o.preventDefault(),o==null||o.stopPropagation()},children:[D&&e.jsx("div",{...T?{}:{onMouseEnter:ue,onMouseLeave:ge},children:e.jsxs(Se,{placement:"bottom",open:pe,children:[e.jsx(ye,{children:ve()}),e.jsx(Pe,{style:{all:"unset"},children:e.jsx(Le,{children:we()})})]})}),!D&&je()]}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:`price-text ${U?"new-price":""}`,children:[w>0&&j&&C!==!0&&_!==!0&&e.jsx("div",{children:`${a.formatPrice(w)} ${a.GetCurrencySymbol(j)}`}),U&&e.jsx("div",{className:`${w>0?"full-price":""}`,children:`${a.formatPrice(P)} ${a.GetCurrencySymbol(j)}`}),C&&ee,_&&J]}),e.jsx("div",{className:"location-text",children:H})]}),Q===!0&&e.jsx($e,{sponsoredText:oe})]})}),Me=S.styled(r.SkeletonRowWrapper)`
301
- @media (max-width: ${q.MOBILE_SIZE_PX+"px"}) {
302
- & > div {
303
- &:nth-of-type(even) {
304
- display: none;
305
- }
306
- }
307
- }
308
- `,De=({keyPrefix:i})=>e.jsxs(Me,{children:[e.jsxs(r.SkeletonColumnWrapper,{gap:"0.5rem",children:[e.jsx(r.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),e.jsx(r.SkeletonColumnWrapper,{height:"1rem",children:e.jsx(r.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"})}),e.jsxs(r.SkeletonRowWrapper,{gap:"0.5rem",children:[e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),e.jsx(r.SkeletonColumnWrapper,{height:"2rem",children:e.jsx(r.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})})]},`${i}-1`),e.jsxs(r.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),e.jsxs(r.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),e.jsx(r.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${i}-2`),e.jsxs(r.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),e.jsxs(r.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),e.jsx(r.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${i}-3`),e.jsxs(r.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),e.jsxs(r.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),e.jsx(r.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${i}-4`),e.jsxs(r.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),e.jsxs(r.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),e.jsx(r.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${i}-5`),e.jsxs(r.SkeletonColumnWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonSquarePlaceholder,{height:"100%",width:"100%",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1rem",borderRadius:"0.75rem"}),e.jsxs(r.SkeletonRowWrapper,{gap:"0.5rem",noGradient:!0,children:[e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"}),e.jsx(r.SkeletonLinePlaceholder,{height:"1.5rem",borderRadius:"0.75rem"})]}),e.jsx(r.SkeletonLinePlaceholder,{height:"2rem",borderRadius:"0.75rem"})]},`${i}-6`)]}),Fe=({keyPrefix:i,isLoading:y=!1,fallbackComponent:m=e.jsx(e.Fragment,{}),children:$})=>e.jsx(c.Suspense,{fallbackComponent:m,children:y===!0?e.jsx(De,{keyPrefix:i}):$});exports.DetailedProductCard=Ie;exports.SuspenseDetailedProductCard=Fe;