@lanaco/lnc-react-ui 4.0.162 → 4.0.164

package/dist/BlogExploreSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),b=require("react"),n=require("./index-BpbMKBf_.cjs"),z=require("./utils-Dl9xPH4c.cjs"),Y=require("./TextInput.cjs"),N=require("./Icon.cjs"),B=require("./Link.cjs"),L=require("./DropdownMenu.cjs"),P=require("./DropdownItem.cjs"),O=require("./tag-yputMSpE.cjs"),ee=require("./BlogProductCardsSection.cjs"),A=require("./emotion-styled.browser.esm-BtEseadx.cjs"),ne=require("./index-BueKsXT8.cjs"),$=require("./BlogListSection.cjs"),re=require("./consts-goSZX3xP.cjs"),te=A.styled.div`
+"use strict";const e=require("react/jsx-runtime"),x=require("react"),r=require("./index-BpbMKBf_.cjs"),oe=require("./useDetectMobile-zkbzoOGV.cjs"),P=require("./utils-Dl9xPH4c.cjs"),ce=require("./TextInput.cjs"),k=require("./Icon.cjs"),le=require("./Link.cjs"),$=require("./IconButton.cjs"),M=require("./DropdownMenu.cjs"),R=require("./DropdownItem.cjs"),de=require("./tag-CmeZsPQt.cjs"),me=require("./BlogProductCardsSection.cjs"),V=require("./emotion-styled.browser.esm-BtEseadx.cjs"),he=require("./index-BueKsXT8.cjs"),D=require("./BlogListSection.cjs"),pe=require("./consts-goSZX3xP.cjs"),ue=V.styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -79,7 +79,7 @@
       }
     }
   }
-`,ie=b.forwardRef(({perPageOptions:c=[{code:10,name:"Show 10 items"},{code:25,name:"Show 25 items"},{code:50,name:"Show 50 items"}],perPage:m,handlePerPage:u=()=>{},page:s=1,handlePage:o=()=>{},totalPage:r},d)=>{var _,l;const p=()=>{s>1&&(o==null||o(s-1))},f=()=>{s<r&&(o==null||o(s+1))},g=()=>{const i=[];if(r<=7)for(let a=1;a<=r;a++)i.push(a);else s<=3?i.push(1,2,3,"...",r):s>=r-2?i.push(1,"...",r-2,r-1,r):i.push(1,2,3,"...",r);return i==null?void 0:i.map((a,x)=>a==="..."?e.jsx("div",{className:"pagination__page ellipsis",children:a},`pagination-ellipsis__${x}`):e.jsx("div",{onClick:()=>o(a),className:`pagination__page ${s===a?"active":""}`,children:a},`pagination-page__${x}`))};return e.jsxs(te,{className:"pagination",children:[e.jsx(L,{color:"neutral",control:((_=c==null?void 0:c.find(i=>(i==null?void 0:i.code)===m))==null?void 0:_.name)||((l=c[0])==null?void 0:l.name),placement:"bottom",zIndex:1001,className:"pagination__per-page",children:c==null?void 0:c.map((i,a)=>e.jsx(P,{active:(i==null?void 0:i.code)===(m==null?void 0:m.code),className:"sort-by__item",onClick:()=>u(i),children:i==null?void 0:i.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:p,children:e.jsx(N,{icon:" mng-lnc-chevron--left"})}),g(),e.jsx("div",{className:`pagination__page ${s===r?"disabled":""}`,onClick:f,children:e.jsx(N,{icon:" mng-lnc-chevron--right"})})]})]})}),ae=A.styled.div`
+`,_e=x.forwardRef(({perPageOptions:l=[{code:10,name:"Show 10 items"},{code:25,name:"Show 25 items"},{code:50,name:"Show 50 items"}],perPage:u,handlePerPage:g=()=>{},page:s=1,handlePage:d=()=>{},totalPage:t},p)=>{var f,m;const _=()=>{s>1&&(d==null||d(s-1))},y=()=>{s<t&&(d==null||d(s+1))},b=()=>{const i=[];if(t<=7)for(let a=1;a<=t;a++)i.push(a);else s<=3?i.push(1,2,3,"...",t):s>=t-2?i.push(1,"...",t-2,t-1,t):i.push(1,2,3,"...",t);return i==null?void 0:i.map((a,v)=>a==="..."?e.jsx("div",{className:"pagination__page ellipsis",children:a},`pagination-ellipsis__${v}`):e.jsx("div",{onClick:()=>d(a),className:`pagination__page ${s===a?"active":""}`,children:a},`pagination-page__${v}`))};return e.jsxs(ue,{className:"pagination",children:[e.jsx(M,{color:"neutral",control:((f=l==null?void 0:l.find(i=>(i==null?void 0:i.code)===u))==null?void 0:f.name)||((m=l[0])==null?void 0:m.name),placement:"bottom",zIndex:1001,className:"pagination__per-page",children:l==null?void 0:l.map((i,a)=>e.jsx(R,{active:(i==null?void 0:i.code)===(u==null?void 0:u.code),className:"sort-by__item",onClick:()=>g(i),children:i==null?void 0:i.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(k,{icon:" mng-lnc-chevron--left"})}),b(),e.jsx("div",{className:`pagination__page ${s===t?"disabled":""}`,onClick:y,children:e.jsx(k,{icon:" mng-lnc-chevron--right"})})]})]})}),fe=V.styled.div`
   display: flex;
   align-items: flex-start;
   gap: 2rem;
@@ -96,18 +96,44 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 1.5rem;
+    max-width: 50rem;
 
     border-right: 1px solid var(--gray-200, #dddfe4);
     padding-right: 2rem;
 
     & .section__tags {
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      width: 100%;
+      overflow-x: hidden;
+      white-space: nowrap;
     }
 
     & .pagination {
       padding: 1.25rem 0;
     }
 
+    & .main-content__heading {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      & .main-content__tags-nav {
+        display: flex;
+        gap: 0.25rem;
+
+        & .main-content__tag-nav {
+          &:not(:disabled) {
+            color: var(--gray-950, #14161a);
+            background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+            &:hover {
+              background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+            }
+          }
+        }
+      }
+    }
+
     & .main-content__title {
       color: var(--gray-950, #14161a);
       font-size: 1.5rem;
@@ -118,7 +144,11 @@
 
     & .tags__item {
       &:not(.active) {
-        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+        background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+        &:hover {
+          background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+        }
       }
     }
 
@@ -255,7 +285,7 @@
             font-style: normal;
             font-weight: 500;
             line-height: 1.25rem;
-            ${z.truncateTextInRows(2)}
+            ${P.truncateTextInRows(2)}
           }
 
           & .item__description {
@@ -270,16 +300,19 @@
     }
   }
 
-  @media (max-width: ${re.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${pe.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
 
     & .landing__main-content {
       width: 100%;
+      max-width: 100%;
       padding-right: 0;
       border-right: none;
 
       & .section__tags {
-        flex-wrap: nowrap;
+        width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
       }
 
       & .main-content__actions {
@@ -287,6 +320,8 @@
       }
 
       & .main-content__items {
+        width: 100%;
+
         & .main-content__divider {
           display: none;
         }
@@ -317,4 +352,4 @@
       display: none;
     }
   }
-`,R=b.forwardRef(({mainTitle:c,sideTitle:m,tags:u,selectedTag:s,handleSelectTag:o=()=>{},blogs:r,miniBlogs:d,products:p,blogsLoading:f=!1,productsLoading:g=!1,sortingOptions:_,sortBy:l,handleSortBy:i=()=>{},allTagText:a="All",searchPlaceholderText:x="Search blogs",timeToReadText:S="{0} min read",getBlogImageUrl:y=()=>{},handleSelectBlog:v=()=>{},handleSelectBlogTag:k=()=>{},handleShareBlog:q=()=>{},showAllButtonLink:E,showAllButtonText:F="Show all products",viewAllButtonText:D="View all (11)",viewAllButtonLink:se,handleViewAll:M=()=>{},handleShowAll:U=()=>{},handleSelectProduct:V=()=>{},getProductImageUrl:H=()=>{},page:W,handlePage:T=()=>{},perPage:X,handlePerPage:Z=()=>{},totalPage:j,perPageOptions:G,handleSearch:J=()=>{},onBookmark:C=()=>{},bookmarkComponent:I=e.jsx(e.Fragment,{children:" "}),componentName:w},K)=>{const Q=t=>{document.getElementById("landing__container").scrollIntoView({behavior:"smooth",block:"start"}),T==null||T(t)};return e.jsxs(ae,{ref:K,id:"landing__container",children:[e.jsxs("div",{className:"landing__main-content",children:[c&&e.jsx("div",{className:"main-content__title",children:c}),u&&e.jsx(O.FaqSectionTags,{tags:u,allTagText:a,selectedTagCode:s,onSelectTag:o}),e.jsxs("div",{className:"main-content__actions",children:[e.jsx(Y,{className:"main-content__search",placeholder:x,debounceTime:200,prefix:e.jsx(N,{icon:" mng-lnc-search",sizeInUnits:"1.25rem",className:"main-content__search-prefix"}),color:"neutral",onChange:J}),e.jsx(L,{color:"neutral",control:l==null?void 0:l.name,zIndex:1001,className:"main-content__sort-by",children:_==null?void 0:_.map((t,h)=>e.jsx(P,{active:(t==null?void 0:t.code)===(l==null?void 0:l.code),className:"sort-by__item",onClick:()=>i(t),children:t==null?void 0:t.name},`blog-epxlore-section-sorting-option__${h+1}`))})]}),e.jsxs("div",{className:"main-content__items",children:[r&&(r==null?void 0:r.length)>0&&e.jsx($,{timeToReadText:S,items:r==null?void 0:r.slice(0,5),isLoading:f,getImage:y,onSelectCard:v,onSelectOption:k,onShare:q,onBookmark:C,bookmarkComponent:I,componentName:w}),e.jsx("div",{className:"main-content__divider"}),p&&(p==null?void 0:p.length)>0&&e.jsx(ee,{buttonText:F,buttonLink:E,onButtonAction:U,onSelectCard:V,items:p,isLoading:g,getImage:H,isHighlight:!0,componentName:w}),e.jsx("div",{className:"main-content__divider"}),r&&(r==null?void 0:r.length)>0&&e.jsx($,{timeToReadText:S,items:r==null?void 0:r.slice(5),isLoading:f,getImage:y,onSelectCard:v,onSelectOption:k,onShare:q,onBookmark:C,bookmarkComponent:I,componentName:w})]}),j&&j>1&&e.jsx(ie,{perPageOptions:G,perPage:X,handlePerPage:Z,page:W,handlePage:Q,totalPage:j})]}),e.jsxs("div",{className:"landing__side-content",children:[m&&e.jsx("div",{className:"side-content__title",children:m}),d&&(d==null?void 0:d.length)>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"side-content__items",children:d==null?void 0:d.map((t,h)=>e.jsx(b.Fragment,{children:e.jsxs("div",{className:"side-content__item",onClick:()=>v(t),children:[e.jsx(ne.ProductImageWrapper,{src:y(t==null?void 0:t.imageUrl,t==null?void 0:t.uuid)||null,alt:`Mini blog ${h+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:z.formatLocaleDateString(t==null?void 0:t.publishedAt)})]})]})},`mini_blg_${h}`))}),e.jsx(B,{onClick:M,className:"side-content__link",children:D})]})]})]})});R.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,totalPage:n.PropTypes.number,perPageOptions:n.PropTypes.array,handleSearch:n.PropTypes.func};module.exports=R;
+`,W=x.forwardRef(({mainTitle:l,sideTitle:u,tags:g,selectedTag:s,handleSelectTag:d=()=>{},blogs:t,miniBlogs:p,products:_,blogsLoading:y=!1,productsLoading:b=!1,sortingOptions:f,sortBy:m,handleSortBy:i=()=>{},allTagText:a="All",searchPlaceholderText:v="Search blogs",timeToReadText:C="{0} min read",getBlogImageUrl:w=()=>{},handleSelectBlog:T=()=>{},handleSelectBlogTag:q=()=>{},handleShareBlog:L=()=>{},showAllButtonLink:E,showAllButtonText:F="Show all products",viewAllButtonText:U="View all (11)",handleViewAll:H=()=>{},handleShowAll:X=()=>{},handleSelectProduct:Z=()=>{},getProductImageUrl:G=()=>{},page:J,handlePage:j=()=>{},perPage:K,handlePerPage:Q=()=>{},totalPage:N,perPageOptions:Y,handleSearch:B=()=>{},onBookmark:A=()=>{},bookmarkComponent:z=e.jsx(e.Fragment,{}),componentName:S},O)=>{const ee=n=>{document.getElementById("landing__container").scrollIntoView({behavior:"smooth",block:"start"}),j==null||j(n)},o=x.useRef(null),ne=oe.useDetectMobile(),[h,re]=x.useState({arrowsVisible:!1,leftArrowDisabled:!1,rightArrowDisabled:!1});x.useEffect(()=>{const n=o==null?void 0:o.current;if(!n)return;const c=()=>{const ae=n.scrollWidth-n.clientWidth;re(se=>({...se,arrowsVisible:n.clientWidth<n.scrollWidth,leftArrowDisabled:n.scrollLeft<=0,rightArrowDisabled:n.scrollLeft>=ae}))},I=new ResizeObserver(c);return I.observe(n),c(),n.addEventListener("scroll",c),()=>{I.disconnect(),n.removeEventListener("scroll",c)}},[]);const te=()=>{var n;(n=o==null?void 0:o.current)==null||n.scrollBy({left:100,behavior:"smooth"})},ie=()=>{var n;(n=o==null?void 0:o.current)==null||n.scrollBy({left:-100,behavior:"smooth"})};return e.jsxs(fe,{ref:O,id:"landing__container",children:[e.jsxs("div",{className:"landing__main-content",children:[e.jsxs("div",{className:"main-content__heading",children:[e.jsx("div",{className:"main-content__title",children:l}),!ne&&(h==null?void 0:h.arrowsVisible)&&e.jsxs("div",{className:"main-content__tags-nav",children:[e.jsx($,{icon:"chevron-left",borderRadius:"curved",btnType:"tinted",color:"neutral",disabled:h==null?void 0:h.leftArrowDisabled,className:"main-content__tag-nav",onClick:ie}),e.jsx($,{icon:"chevron-right",borderRadius:"curved",btnType:"tinted",color:"neutral",disabled:h==null?void 0:h.rightArrowDisabled,className:"main-content__tag-nav",onClick:te})]})]}),g&&e.jsx(de.FaqSectionTags,{ref:o,tags:g,allTagText:a,selectedTagCode:s,onSelectTag:d}),e.jsxs("div",{className:"main-content__actions",children:[e.jsx(ce,{className:"main-content__search",placeholder:v,debounceTime:200,prefix:e.jsx(k,{icon:" mng-lnc-search",sizeInUnits:"1.25rem",className:"main-content__search-prefix"}),color:"neutral",onChange:B}),e.jsx(M,{color:"neutral",control:m==null?void 0:m.name,zIndex:1001,className:"main-content__sort-by",children:f==null?void 0:f.map((n,c)=>e.jsx(R,{active:(n==null?void 0:n.code)===(m==null?void 0:m.code),className:"sort-by__item",onClick:()=>i(n),children:n==null?void 0:n.name},`blog-epxlore-section-sorting-option__${c+1}`))})]}),e.jsxs("div",{className:"main-content__items",children:[t&&(t==null?void 0:t.length)>0&&e.jsx(D,{timeToReadText:C,items:t==null?void 0:t.slice(0,5),isLoading:y,getImage:w,onSelectCard:T,onSelectOption:q,onShare:L,onBookmark:A,bookmarkComponent:z,componentName:S}),e.jsx("div",{className:"main-content__divider"}),_&&(_==null?void 0:_.length)>0&&e.jsx(me,{buttonText:F,buttonLink:E,onButtonAction:X,onSelectCard:Z,items:_,isLoading:b,getImage:G,isHighlight:!0,componentName:S}),e.jsx("div",{className:"main-content__divider"}),t&&(t==null?void 0:t.length)>0&&e.jsx(D,{timeToReadText:C,items:t==null?void 0:t.slice(5),isLoading:y,getImage:w,onSelectCard:T,onSelectOption:q,onShare:L,onBookmark:A,bookmarkComponent:z,componentName:S})]}),N&&N>1&&e.jsx(_e,{perPageOptions:Y,perPage:K,handlePerPage:Q,page:J,handlePage:ee,totalPage:N})]}),e.jsxs("div",{className:"landing__side-content",children:[u&&e.jsx("div",{className:"side-content__title",children:u}),p&&(p==null?void 0:p.length)>0&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"side-content__items",children:p==null?void 0:p.map((n,c)=>e.jsx(x.Fragment,{children:e.jsxs("div",{className:"side-content__item",onClick:()=>T(n),children:[e.jsx(he.ProductImageWrapper,{src:w(n==null?void 0:n.imageUrl,n==null?void 0:n.uuid)||null,alt:`Mini blog ${c+1}`,className:"item__image"}),e.jsxs("div",{className:"item__content",children:[e.jsx("div",{className:"item__title",children:n==null?void 0:n.title}),e.jsx("div",{className:"item__description",children:P.formatLocaleDateString(n==null?void 0:n.publishedAt)})]})]})},`mini_blg_${c}`))}),e.jsx(le,{onClick:H,className:"side-content__link",children:U})]})]})]})});W.propTypes={mainTitle:r.PropTypes.string,sideTitle:r.PropTypes.string,tags:r.PropTypes.array,selectedTag:r.PropTypes.any,handleSelectTag:r.PropTypes.func,blogs:r.PropTypes.array,miniBlogs:r.PropTypes.array,products:r.PropTypes.array,blogsLoading:r.PropTypes.bool,productsLoading:r.PropTypes.bool,sortingOptions:r.PropTypes.array,sortBy:r.PropTypes.any,handleSortBy:r.PropTypes.func,allTagText:r.PropTypes.string,searchPlaceholderText:r.PropTypes.string,timeToReadText:r.PropTypes.string,getBlogImageUrl:r.PropTypes.func,handleSelectBlog:r.PropTypes.func,handleSelectBlogTag:r.PropTypes.func,handleShareBlog:r.PropTypes.func,handleBookmarkBlog:r.PropTypes.func,showAllButtonLink:r.PropTypes.string,showAllButtonText:r.PropTypes.string,viewAllButtonText:r.PropTypes.string,handleShowAll:r.PropTypes.func,handleSelectProduct:r.PropTypes.func,getProductImageUrl:r.PropTypes.func,page:r.PropTypes.number,handlePage:r.PropTypes.func,perPage:r.PropTypes.any,handlePerPage:r.PropTypes.func,totalPage:r.PropTypes.number,perPageOptions:r.PropTypes.array,handleSearch:r.PropTypes.func};module.exports=W;