@lanaco/lnc-react-ui 4.0.124 → 4.0.126

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.
@@ -141,4 +141,4 @@
141
141
  padding-right: 0.5rem;
142
142
  }
143
143
  }
144
- `,pt=x.forwardRef(({items:o=[],onSelectItem:i=()=>{},onButtonAction:t=()=>{}},e)=>{const r={desktop:{breakpoint:{max:3e3,min:1024},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:1024,min:464},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:464,min:0},items:1,partialVisibilityGutter:48}},a=mt.useDetectMobile();return P.jsx(oe,{ref:e,children:P.jsx(ie,{responsive:r,removeArrowOnDeviceType:"mobile",infinite:!a,keyBoardControl:!0,autoPlay:!0,partialVisible:!0,sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",children:o==null?void 0:o.map((n,s)=>P.jsxs("div",{className:"section__card",onClick:()=>i(n),children:[P.jsx("img",{src:n==null?void 0:n.imageUrl,alt:`Slide ${s+1}`,className:"section__image"}),P.jsxs("div",{className:"card__content",children:[P.jsxs("div",{className:"card__text",children:[(n==null?void 0:n.title)&&P.jsx("div",{className:"card__title",children:n==null?void 0:n.title}),(n==null?void 0:n.title)&&P.jsx("div",{className:"card__description",children:n==null?void 0:n.description})]}),(n==null?void 0:n.buttonText)&&P.jsx(ft,{text:n==null?void 0:n.buttonText,className:"card__action",size:"medium",onClick:l=>{l==null||l.stopPropagation(),t(n)}})]})]},`banner-section-carousel-item__${s+1}`))})},`banner-section-carousel__${a}`)});pt.propTypes={items:z.PropTypes.array,onSelectItem:z.PropTypes.func,onButtonAction:z.PropTypes.func};module.exports=pt;
144
+ `,pt=x.forwardRef(({items:o=[],onSelectItem:i=()=>{},onButtonAction:t=()=>{}},e)=>{const r={desktop:{breakpoint:{max:3e3,min:1024},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:1024,min:464},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:464,min:0},items:1,partialVisibilityGutter:48}},a=mt.useDetectMobile();return P.jsx(oe,{ref:e,children:P.jsx(ie,{responsive:r,removeArrowOnDeviceType:"mobile",infinite:!a,keyBoardControl:!0,autoPlay:!0,partialVisible:!0,customTransition:"transform 300ms ease-in-out",transitionDuration:300,sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",children:o==null?void 0:o.map((n,s)=>P.jsxs("div",{className:"section__card",onClick:()=>i(n),children:[P.jsx("img",{src:n==null?void 0:n.imageUrl,alt:`Slide ${s+1}`,className:"section__image"}),P.jsxs("div",{className:"card__content",children:[P.jsxs("div",{className:"card__text",children:[(n==null?void 0:n.title)&&P.jsx("div",{className:"card__title",children:n==null?void 0:n.title}),(n==null?void 0:n.title)&&P.jsx("div",{className:"card__description",children:n==null?void 0:n.description})]}),(n==null?void 0:n.buttonText)&&P.jsx(ft,{text:n==null?void 0:n.buttonText,className:"card__action",size:"medium",onClick:l=>{l==null||l.stopPropagation(),t(n)}})]})]},`banner-section-carousel-item__${s+1}`))})},`banner-section-carousel__${a}`)});pt.propTypes={items:z.PropTypes.array,onSelectItem:z.PropTypes.func,onButtonAction:z.PropTypes.func};module.exports=pt;
@@ -669,6 +669,8 @@ const re = /* @__PURE__ */ mt(oe), ne = yt.div`
669
669
  keyBoardControl: !0,
670
670
  autoPlay: !0,
671
671
  partialVisible: !0,
672
+ customTransition: "transform 300ms ease-in-out",
673
+ transitionDuration: 300,
672
674
  sliderClass: "carousel-slider",
673
675
  itemClass: "carousel-item",
674
676
  containerClass: "carousel-container",
@@ -0,0 +1,311 @@
1
+ "use strict";const e=require("react/jsx-runtime"),k=require("react"),n=require("./index-BpbMKBf_.cjs"),G=require("./utils-CZynEOC_.cjs"),J=require("./TextInput.cjs"),v=require("./Icon.cjs"),K=require("./Link.cjs"),P=require("./DropdownMenu.cjs"),S=require("./DropdownItem.cjs"),Q=require("./tag-BLBeUImg.cjs"),W=require("./BlogProductCardsSection.cjs"),q=require("./emotion-styled.browser.esm-BtEseadx.cjs"),N=require("./BlogListSection.cjs"),Y=require("./consts-goSZX3xP.cjs"),B=q.styled.div`
2
+ display: flex;
3
+ justify-content: space-between;
4
+ align-items: center;
5
+ align-self: stretch;
6
+ width: 100%;
7
+
8
+ & .pagination__per-page {
9
+ & button {
10
+ border-radius: 8px;
11
+ border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
12
+ background: transparent;
13
+ color: var(---gray-950, #14161a);
14
+ font-size: 0.875rem;
15
+ font-style: normal;
16
+ font-weight: 500;
17
+ line-height: 1.25rem;
18
+ }
19
+ }
20
+
21
+ & .pagination__pages {
22
+ display: flex;
23
+ align-items: center;
24
+ border-radius: 0.375rem;
25
+
26
+ & .pagination__page {
27
+ display: flex;
28
+ width: 2.5rem;
29
+ height: 2.25rem;
30
+ padding: 0.5rem 1rem;
31
+ flex-direction: column;
32
+ justify-content: center;
33
+ align-items: center;
34
+ border-top: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
35
+ border-right: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
36
+ border-bottom: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
37
+ color: var(--gray-600, #676e79);
38
+ font-size: 0.875rem;
39
+ font-style: normal;
40
+ font-weight: 500;
41
+ line-height: 1.25rem;
42
+
43
+ &:hover {
44
+ cursor: pointer;
45
+ background: var(--gray-200, #e4e9f0);
46
+ }
47
+
48
+ &.active {
49
+ border: 1px solid var(--teal-500, #009ea8);
50
+ background: var(--teal-50, #f4fdff);
51
+ color: var(--teal-500, #009ea8);
52
+ }
53
+
54
+ &.disabled {
55
+ cursor: unset;
56
+ border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
57
+ opacity: 0.4;
58
+
59
+ &:hover {
60
+ background: transparent;
61
+ }
62
+ }
63
+
64
+ &.ellipsis {
65
+ cursor: unset;
66
+
67
+ &:hover {
68
+ background: transparent;
69
+ }
70
+ }
71
+
72
+ &:first-of-type {
73
+ border-radius: 0.5rem 0 0 0.5rem;
74
+ border-left: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
75
+ }
76
+
77
+ &:last-of-type {
78
+ border-radius: 0 0.5rem 0.5rem 0;
79
+ }
80
+ }
81
+ }
82
+ `,O=k.forwardRef(({perPageOptions:c=[{code:10,name:"Show 10 items"},{code:25,name:"Show 25 items"},{code:50,name:"Show 50 items"}],perPage:l,handlePerPage:p=()=>{},page:s=1,handlePage:o=()=>{},total:i},m)=>{var d;const _=()=>{s>1&&(o==null||o(s-1))},h=()=>{s<i&&(o==null||o(s+1))},g=()=>{const r=[];if(i<=7)for(let a=1;a<=i;a++)r.push(a);else s<=3?r.push(1,2,3,"...",i):s>=i-2?r.push(1,"...",i-2,i-1,i):r.push(1,2,3,"...",i);return r==null?void 0:r.map((a,u)=>a==="..."?e.jsx("div",{className:"pagination__page ellipsis",children:a},`pagination-ellipsis__${u}`):e.jsx("div",{onClick:()=>o(a),className:`pagination__page ${s===a?"active":""}`,children:a},`pagination-page__${u}`))};return e.jsxs(B,{className:"pagination",children:[e.jsx(P,{color:"neutral",control:l||((d=c[0])==null?void 0:d.name),placement:"bottom",zIndex:1001,className:"pagination__per-page",children:c==null?void 0:c.map((r,a)=>e.jsx(S,{active:(r==null?void 0:r.code)===(l==null?void 0:l.code),className:"sort-by__item",onClick:()=>p(r),children:r==null?void 0:r.name},`blog-epxlore-section-per-page-option__${a+1}`))}),e.jsxs("div",{className:"pagination__pages",children:[e.jsx("div",{className:`pagination__page ${s===1?"disabled":""}`,onClick:_,children:e.jsx(v,{icon:" mng-lnc-chevron--left"})}),g(),e.jsx("div",{className:`pagination__page ${s===i?"disabled":""}`,onClick:h,children:e.jsx(v,{icon:" mng-lnc-chevron--right"})})]})]})}),ee=q.styled.div`
83
+ display: flex;
84
+ align-items: flex-start;
85
+ gap: 2rem;
86
+ align-self: stretch;
87
+
88
+ & button {
89
+ &:focus {
90
+ outline: none;
91
+ }
92
+ }
93
+
94
+ & .landing__main-content {
95
+ display: flex;
96
+ flex-direction: column;
97
+ align-items: flex-start;
98
+ gap: 1.5rem;
99
+
100
+ border-right: 1px solid var(--gray-200, #dddfe4);
101
+ padding-right: 2rem;
102
+
103
+ & .pagination {
104
+ padding: 1.25rem 0;
105
+ }
106
+
107
+ & .main-content__title {
108
+ color: var(--gray-950, #14161a);
109
+ font-size: 1.5rem;
110
+ font-style: normal;
111
+ font-weight: 600;
112
+ line-height: 2rem;
113
+ }
114
+
115
+ & .tags__item {
116
+ &:not(.active) {
117
+ background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
118
+ }
119
+ }
120
+
121
+ & .main-content__items {
122
+ display: flex;
123
+ flex-direction: column;
124
+ gap: 1.25rem;
125
+
126
+ & .main-content__divider {
127
+ content: "";
128
+ display: block;
129
+ height: 1px;
130
+ width: 100%;
131
+ background: var(--gray-200, #dddfe4);
132
+ }
133
+
134
+ & .blog-card-item {
135
+ background: transparent;
136
+ border: none;
137
+ padding: 0;
138
+ }
139
+ }
140
+
141
+ & .main-content__actions {
142
+ display: flex;
143
+ justify-content: space-between;
144
+ align-items: center;
145
+ align-self: stretch;
146
+ width: 100%;
147
+
148
+ & .main-content__search {
149
+ border-radius: 999px;
150
+ height: 2.5rem;
151
+ min-height: 2.5rem;
152
+ max-width: 23.75rem;
153
+ width: 100%;
154
+
155
+ border: 1px solid var(--gray-200, #e4e9f0);
156
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
157
+ outline: none;
158
+
159
+ & input::placeholder {
160
+ color: var(--gray-500, #7a8594);
161
+ font-size: 0.875rem;
162
+ font-style: normal;
163
+ font-weight: 400;
164
+ line-height: 1.25rem;
165
+ letter-spacing: 0.0156rem;
166
+ }
167
+
168
+ & .main-content__search-prefix {
169
+ color: var(--gray-500, #7a8594);
170
+ }
171
+ }
172
+
173
+ & .main-content__sort-by {
174
+ & button {
175
+ border-radius: 999px;
176
+ color: var(--gray-950, #14161a);
177
+ background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
178
+ font-size: 0.875rem;
179
+ font-style: normal;
180
+ font-weight: 500;
181
+ line-height: 1.25rem;
182
+ letter-spacing: -0.0056rem;
183
+ }
184
+ }
185
+ }
186
+ }
187
+
188
+ & .landing__side-content {
189
+ display: flex;
190
+ flex-direction: column;
191
+ align-items: flex-start;
192
+ gap: 1.5rem;
193
+ align-self: stretch;
194
+
195
+ & .side-content__title {
196
+ color: var(--gray-950, #14161a);
197
+ font-size: 1rem;
198
+ font-style: normal;
199
+ font-weight: 600;
200
+ line-height: 1.5rem;
201
+ }
202
+
203
+ & .side-content__link {
204
+ color: var(--gray-950, #14161a);
205
+ font-size: 0.75rem;
206
+ font-style: normal;
207
+ font-weight: 500;
208
+ line-height: 1rem;
209
+
210
+ &:hover {
211
+ cursor: pointer;
212
+ text-decoration: underline;
213
+ }
214
+ }
215
+
216
+ & .side-content__items {
217
+ display: flex;
218
+ flex-direction: column;
219
+ align-items: flex-start;
220
+ gap: 1.25rem;
221
+ align-self: stretch;
222
+
223
+ & .side-content__item {
224
+ display: flex;
225
+ align-items: flex-start;
226
+ gap: 1rem;
227
+ align-self: stretch;
228
+
229
+ &:hover {
230
+ cursor: pointer;
231
+ }
232
+
233
+ & .item__image {
234
+ width: 100%;
235
+ max-width: 6rem;
236
+ height: 100%;
237
+ max-height: 3.75rem;
238
+ object-fit: cover;
239
+ border-radius: 0.375rem;
240
+ }
241
+
242
+ & .item__content {
243
+ display: flex;
244
+ flex-direction: column;
245
+ align-items: flex-start;
246
+ gap: 0.25rem;
247
+
248
+ & .item__title {
249
+ color: var(--gray-950, #14161a);
250
+ font-size: 0.875rem;
251
+ font-style: normal;
252
+ font-weight: 500;
253
+ line-height: 1.25rem;
254
+ }
255
+
256
+ & .item__description {
257
+ color: var(--gray-600, #676e79);
258
+ font-size: 0.75rem;
259
+ font-style: normal;
260
+ font-weight: 400;
261
+ line-height: 1rem;
262
+ }
263
+ }
264
+ }
265
+ }
266
+ }
267
+
268
+ @media (max-width: ${Y.MOBILE_SIZE_PX+"px"}) {
269
+ flex-direction: column;
270
+
271
+ & .landing__main-content {
272
+ width: 100%;
273
+ padding-right: 0;
274
+ border-right: none;
275
+
276
+ & .main-content__actions {
277
+ gap: 0.5rem;
278
+ }
279
+
280
+ & .main-content__items {
281
+ & .main-content__divider {
282
+ display: none;
283
+ }
284
+
285
+ & .separated {
286
+ gap: 1.25rem;
287
+
288
+ & > div:not(:last-of-type)::after {
289
+ display: none;
290
+ }
291
+ }
292
+
293
+ & .blog-product-cards-section {
294
+ border-radius: 0;
295
+ }
296
+ }
297
+
298
+ & .pagination {
299
+ justify-content: center;
300
+
301
+ & .pagination__per-page {
302
+ display: none;
303
+ }
304
+ }
305
+ }
306
+
307
+ & .landing__side-content {
308
+ display: none;
309
+ }
310
+ }
311
+ `,C=k.forwardRef(({mainTitle:c,sideTitle:l,tags:p,selectedTag:s,handleSelectTag:o=()=>{},blogs:i,miniBlogs:m,products:_,blogsLoading:h=!1,productsLoading:g=!1,sortingOptions:d,sortBy:r,handleSortBy:a=()=>{},allTagText:u="All",searchPlaceholderText:z="Search blogs",timeToReadText:T="{0} min read",getBlogImageUrl:f=()=>{},handleSelectBlog:x=()=>{},handleSelectBlogTag:b=()=>{},handleShareBlog:j=()=>{},handleBookmarkBlog:w=()=>{},showAllButtonLink:I,showAllButtonText:L="Show all products",viewAllButtonText:$="View all (11)",viewAllButtonLink:ne,handleViewAll:A=()=>{},handleShowAll:R=()=>{},handleSelectProduct:D=()=>{},getProductImageUrl:E=()=>{},page:M,handlePage:U=()=>{},perPage:F,handlePerPage:H=()=>{},total:V,perPageOptions:X,handleSearch:Z=()=>{}},re)=>e.jsxs(ee,{children:[e.jsxs("div",{className:"landing__main-content",children:[e.jsx("div",{className:"main-content__title",children:c}),p&&e.jsx(Q.FaqSectionTags,{tags:p,allTagText:u,selectedTag:s,onSelectTag:o}),e.jsxs("div",{className:"main-content__actions",children:[e.jsx(J,{className:"main-content__search",placeholder:z,debounceTime:200,prefix:e.jsx(v,{icon:" mng-lnc-search",sizeInUnits:"1.25rem",className:"main-content__search-prefix"}),color:"neutral",onChange:Z}),e.jsx(P,{color:"neutral",control:r==null?void 0:r.name,zIndex:1001,className:"main-content__sort-by",children:d==null?void 0:d.map((t,y)=>e.jsx(S,{active:(t==null?void 0:t.code)===(r==null?void 0:r.code),className:"sort-by__item",onClick:()=>a(t),children:t==null?void 0:t.name},`blog-epxlore-section-sorting-option__${y+1}`))})]}),e.jsxs("div",{className:"main-content__items",children:[e.jsx(N,{timeToReadText:T,items:i==null?void 0:i.slice(0,5),isLoading:h,getImage:f,onSelectCard:x,onSelectOption:b,onShare:j,onBookmark:w}),e.jsx("div",{className:"main-content__divider"}),e.jsx(W,{buttonText:L,buttonLink:I,onButtonAction:R,onSelectCard:D,items:_,isLoading:g,getImage:E,isHighlight:!0}),e.jsx("div",{className:"main-content__divider"}),e.jsx(N,{timeToReadText:T,items:i==null?void 0:i.slice(5),isLoading:h,getImage:f,onSelectCard:x,onSelectOption:b,onShare:j,onBookmark:w})]}),e.jsx(O,{perPageOptions:X,perPage:F,handlePerPage:H,page:M,handlePage:U,total:V})]}),e.jsxs("div",{className:"landing__side-content",children:[e.jsx("div",{className:"side-content__title",children:l}),e.jsx("div",{className:"side-content__items",children:m&&(m==null?void 0:m.map((t,y)=>e.jsxs("div",{className:"side-content__item",onClick:()=>x(t),children:[e.jsx("img",{src:f(t==null?void 0:t.imageUrl,t==null?void 0:t.uuid)||null,alt:`Mini blog ${y+1}`,className:"item__image"}),e.jsxs("div",{className:"item__content",children:[e.jsx("div",{className:"item__title",children:t==null?void 0:t.title}),e.jsx("div",{className:"item__description",children:G.formatLocaleDateString(t==null?void 0:t.publishedAt)})]})]})))}),e.jsx(K,{onClick:A,className:"side-content__link",children:$})]})]}));C.propTypes={mainTitle:n.PropTypes.string,sideTitle:n.PropTypes.string,tags:n.PropTypes.array,selectedTag:n.PropTypes.any,handleSelectTag:n.PropTypes.func,blogs:n.PropTypes.array,miniBlogs:n.PropTypes.array,products:n.PropTypes.array,blogsLoading:n.PropTypes.bool,productsLoading:n.PropTypes.bool,sortingOptions:n.PropTypes.array,sortBy:n.PropTypes.any,handleSortBy:n.PropTypes.func,allTagText:n.PropTypes.string,searchPlaceholderText:n.PropTypes.string,timeToReadText:n.PropTypes.string,getBlogImageUrl:n.PropTypes.func,handleSelectBlog:n.PropTypes.func,handleSelectBlogTag:n.PropTypes.func,handleShareBlog:n.PropTypes.func,handleBookmarkBlog:n.PropTypes.func,showAllButtonLink:n.PropTypes.string,showAllButtonText:n.PropTypes.string,viewAllButtonText:n.PropTypes.string,handleShowAll:n.PropTypes.func,handleSelectProduct:n.PropTypes.func,getProductImageUrl:n.PropTypes.func,page:n.PropTypes.number,handlePage:n.PropTypes.func,perPage:n.PropTypes.any,handlePerPage:n.PropTypes.func,total:n.PropTypes.number,perPageOptions:n.PropTypes.array,handleSearch:n.PropTypes.func};module.exports=C;