@lanaco/lnc-react-ui 4.0.32 → 4.0.33

package/dist/BlogsSectionWithFilters.cjs

@@ -0,0 +1,173 @@
+"use strict";const r=require("react/jsx-runtime"),l=require("react"),N=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),I=require("./consts-dNz9tpt4.cjs"),H=require("./useDetectMobile-rBe0FiP2.cjs"),T=require("./utils-UJt-R-G3.cjs"),X=require("./style-CeMnBJ6v.cjs"),C=require("./Button.cjs"),Z=require("./Link.cjs"),o=require("./index-BPVoEhTF.cjs"),U=require("./FlexBox.cjs"),M=require("./IconButton.cjs"),J=require("./ThemeProvider.cjs"),Q=require("./useUpdateEffect-BtMgpgIV.cjs"),Y=require("./Icon.cjs"),ee=N.newStyled.div`
+  display: grid;
+  grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`,K=N.newStyled.div`
+  display: flex;
+  width: 100%;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 10.375rem;
+  max-height: 10.375rem;
+
+  & img {
+    max-width: 3.3125rem;
+    min-width: 3.3125rem;
+    min-height: 3.3125rem;
+    max-height: 3.3125rem;
+    border-radius: 0.75rem;
+    object-fit: cover;
+  }
+
+  & .skeleton-img {
+    max-width: 3.3125rem;
+    min-width: 3.3125rem;
+    min-height: 3.3125rem;
+    max-height: 3.3125rem;
+    border-radius: 0.75rem;
+    background-color: ${T.linearGradientAnimation("-90deg")};
+  }
+
+  & a {
+    margin-top: auto;
+  }
+
+  @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+  }
+`,_=N.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--gray-950, #14161a);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  & .skeleton-title {
+    height: 1.5rem;
+    width: 80%;
+    background-color: ${T.linearGradientAnimation("-90deg")};
+  }
+
+  & .skeleton-action {
+    height: 1.25rem;
+    width: 20%;
+    background-color: ${T.linearGradientAnimation("-90deg")};
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    color: var(--gray-700, #4e555f);
+    ${T.truncateTextInRows(3)}
+  }
+`;l.forwardRef(({},t)=>r.jsxs(K,{className:"blog-card",children:[r.jsxs(_,{children:[r.jsx("div",{className:"skeleton-title"}),r.jsx("div",{className:"text-wr"}),r.jsx("div",{className:"skeleton-action"})]}),r.jsx("div",{className:"skeleton-img"})]}));const z=l.forwardRef((t,f)=>{const{title:a,image:n,text:i,buttonText:p,onCardClick:c}=t;return r.jsxs(K,{className:"blog-card",onClick:c,children:[r.jsxs(_,{children:[r.jsx("div",{className:"text-wr-title",children:a}),r.jsx("div",{className:"text-wr",children:i}),r.jsx(Z,{color:"gray",onClick:c,children:p})]}),r.jsx("img",{src:n})]})}),re=N.newStyled.div`
+  position: relative;
+  padding: ${t=>t.padding};
+
+  & button {
+    white-space: nowrap;
+  }
+
+  & .badge-button {
+    ${t=>t.showTimesBtn===!0&&"padding-left: 0.5rem; padding-right: 0.5rem;"}
+  }
+
+  & .gradient {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 4;
+    transition: ${"0.3s"};
+    right: ${t=>t.noArrows!==!0?"6rem":"0"};
+    width: 2rem;
+    background: #fff;
+    height: 100%;
+    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
+    mask-image: linear-gradient(to left, black 10%, transparent 50%);
+  }
+
+  & .scrollable-container {
+    max-width: -webkit-fill-available;
+    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
+    max-width: fill-available;
+
+    ${t=>t.rightAlignArrows===!0&&t.noArrows!==!0&&"margin-right: 6rem"};
+    scroll-behavior: smooth;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    -ms-overflow-style: none;
+    /* Internet Explorer 10+ */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* Safari and Chrome */
+    }
+
+    @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+      margin-right: 0;
+    }
+  }
+  & .scroll-arrow-right,
+  & .scroll-arrow-left {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    visibility: ${t=>t.arrowsVisibleOnHover===!1&&t.hasOverflow?"visible":"hidden"};
+    z-index: 4;
+    transition: ${"0.3s"};
+  }
+  & .scroll-arrow-right {
+    ${t=>t.rightAlignArrows===!0?"right: 0":"right: 0.7rem"};
+  }
+  & .scroll-arrow-left {
+    ${t=>t.rightAlignArrows===!0?"right: 2.625rem":"left: 0.7rem"};
+  }
+  & .scrollable-container:hover > .scroll-arrow-left,
+  & .scrollable-container:hover > .scroll-arrow-right {
+    visibility: ${t=>t.hasOverflow?"visible":"hidden"};
+  }
+
+  @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+    & .scrollable-container {
+      overflow: auto;
+    }
+    & .scroll-arrow-left,
+    & .scroll-arrow-right {
+      display: none;
+    }
+
+    & .gradient {
+      right: 0;
+    }
+
+    & .scrollable-container button:nth-of-type(3) {
+      ${t=>t.noMargin!==!0&&"margin-left: 1rem"};
+    }
+  }
+`,te=t=>{const[f,a]=l.useState(!1),n=l.useMemo(()=>new IntersectionObserver(([i])=>a(i.isIntersecting)),[]);return l.useEffect(()=>(n.observe(t.current),()=>{n.disconnect()}),[t,n]),f},se=N.newStyled.div`
+  min-height: 1px;
+  ${t=>t.isHorizontal===!0?"min-width: 1px; width: 1px;":"width: 100%;"}
+`,E=l.forwardRef((t,f)=>{const{onIsVisible:a=()=>{},onIsNotVisible:n,isHorizontal:i=!1,className:p=""}=t,c=l.useRef(null),d=te(c);return Q.useUpdateEffect(()=>{d?a():n==null||n()},[d]),r.jsx(se,{ref:c,className:`scroller-element ${p}`,isHorizontal:i})});E.propTypes={onIsVisible:o.PropTypes.func,isHorizontal:o.PropTypes.bool};const D=l.forwardRef(({columnGap:t="2rem",rowGap:f="1.25rem",scrollBySize:a=300,wrapForMobile:n=!1,wrap:i=!1,children:p,methodsRef:c,arrowsVisibleOnHover:d=!0,rightAlignArrows:x=!1,padding:b="0",showTimesBtn:w,noArrows:e,noGradient:g=!1,hideDisabledArrows:y=!1,noMargin:S=!1,...P},$)=>{const R=H.useDetectMobile(),{theme:s}=J.useTheme(),[m,j]=l.useState(!1),[v,k]=l.useState(!1),[V,A]=l.useState(!0),u=l.useRef(),B=()=>{var h;(h=u.current)==null||h.scrollBy(a,0)},q=()=>{var h;(h=u.current)==null||h.scrollBy(-a,0)},[O,G]=l.useState(!1);l.useEffect(()=>{var h,W;G(((h=u==null?void 0:u.current)==null?void 0:h.scrollWidth)>((W=u==null?void 0:u.current)==null?void 0:W.clientWidth))},[p]),l.useImperativeHandle(c,()=>({scrollToEnd(){F()},scrollLeft(){q()},scrollRight(){B()}}));const F=()=>{u.current.scrollLeft=u.current.scrollWidth};return r.jsx(re,{ref:$,arrowsVisibleOnHover:d,hasOverflow:O,noArrows:e,padding:b,rightAlignArrows:x,showTimesBtn:w,theme:s,noMargin:S,...P,children:r.jsxs(U,{ref:u,className:"scrollable-container",columnGap:t,rowGap:f,wrap:i||n&&R?"Wrap":"NoWrap",children:[e!==!0&&r.jsxs(r.Fragment,{children:[!(y===!0&&v===!0)&&r.jsx(M,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:v,icon:"angle-left",onClick:q}),!(y===!0&&m===!0)&&r.jsx(M,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:m,icon:"angle-right",onClick:B})]}),r.jsx(E,{isHorizontal:!0,onIsNotVisible:()=>{v===!0&&k(!1)},onIsVisible:()=>{v===!1&&k(!0)}}),p,r.jsx(E,{className:"right-scroller",isHorizontal:!0,onIsNotVisible:()=>{m===!0&&j(!1),A(!0)},onIsVisible:()=>{m===!1&&j(!0),A(!1)}}),V&&O&&g!==!0&&r.jsx("div",{className:"gradient"})]})})});D.propTypes={title:o.PropTypes.string,rowGap:o.PropTypes.string,columnGap:o.PropTypes.string,scrollBySize:o.PropTypes.number,wrapForMobile:o.PropTypes.bool,wrap:o.PropTypes.bool,methodsRef:o.PropTypes.any,arrowsVisibleOnHover:o.PropTypes.bool,rightAlignArrows:o.PropTypes.bool,padding:o.PropTypes.string};const L=l.forwardRef((t,f)=>{const{allButton:a=!0,items:n=[],selectedIds:i=[],onSelect:p=()=>{},onRemove:c=()=>{},onSelectAll:d=()=>{},className:x,showTimesBtn:b=!1,labelKey:w="label",valueKey:e="value",codeKey:g="code",uniqueKey:y,typeKey:S,productsToolbarName:P="All",...$}=t,R=(s,m,j,v,k)=>{i!=null&&i.includes(s)?c(s,m,j,v,k):p(s,m,j,v,k)};return r.jsxs(D,{arrowsVisibleOnHover:!1,className:x,columnGap:"0.75rem",padding:"0.25rem 0",rightAlignArrows:!0,showTimesBtn:b,...$,children:[a&&r.jsx(C,{borderRadius:"curved",btnType:i.length===0?"filled":"tinted",className:"badge-button",color:"neutral",onClick:d,children:P}),n.map((s,m)=>r.jsxs(C,{borderRadius:"curved",btnType:i.includes(s.uuid)?"filled":"tinted",className:"badge-button",color:"neutral",onClick:()=>R(s[e],s[w],s[g],y?s[y]:null,S?s[S]:null),children:[T.isDefined(s==null?void 0:s.icon)&&r.jsxs(r.Fragment,{children:[r.jsx("i",{className:s==null?void 0:s.icon})," "]}),s[w],b===!0&&r.jsx(Y,{className:"times-btn",icon:"times",sizeInUnits:"0.75rem",onClick:()=>c(s[e],s[w],s[g],y?s[y]:null,S?s[S]:null)})]},m))]})});L.propTypes={allButton:o.PropTypes.bool,items:o.PropTypes.array,selectedIds:o.PropTypes.array,onSelect:o.PropTypes.func,onRemove:o.PropTypes.func,onSelectAll:o.PropTypes.func,className:o.PropTypes.string,showTimesBtn:o.PropTypes.bool,valuKey:o.PropTypes.string,labelKey:o.PropTypes.string,codeKey:o.PropTypes.string};const oe=l.forwardRef((t,f)=>{const{icon:a,title:n,items:i,buttonText:p,limit:c=3,options:d,onActionClick:x=()=>{},onSelectOption:b=()=>{}}=t,w=H.useDetectMobile();return r.jsxs(X.TitleWithOptionsSectionWrapper,{children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[T.isDefinedNotEmptyString(a)&&r.jsx("i",{className:a}),r.jsx("span",{children:n})]}),T.isDefinedNotEmptyString(onSectionClick)&&r.jsx(C,{type:"button",btnType:"tinted",color:"gray",onClick:x,borderRadius:"curved",children:p})]}),(d==null?void 0:d.length)>0&&r.jsx(L,{items:d,onRemove:e=>{b(e)},onSelect:e=>{b(e)},labelKey:"name",valueKey:"code",noMargin:!0}),r.jsx(ee,{limit:c,children:w===!0?i==null?void 0:i.map((e,g)=>r.jsx(z,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},g)):i==null?void 0:i.slice(0,c).map((e,g)=>r.jsx(z,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>onSelectCard(e==null?void 0:e.uuid)},g))})]})});module.exports=oe;