@lanaco/lnc-react-ui 4.0.208 → 4.0.209

package/dist/BannerSectionCarousel.cjs

@@ -1,4 +1,11 @@
-"use strict";const r=require("react/jsx-runtime"),d=require("react"),x=require("./index-DeS-oqJB.cjs"),v=require("./Button.cjs"),w=require("./useDetectMobile-DYV6V1yw.cjs"),t=require("./breakpoints-CcVm-gVm.cjs"),u=require("./emotion-styled.browser.esm-BtEseadx.cjs"),m=require("./style-BAcV7F53.cjs"),y=u.styled.div`
+"use strict";const r=require("react/jsx-runtime"),d=require("react"),x=require("./index-DeS-oqJB.cjs"),u=require("./style-BAcV7F53.cjs"),h=require("./emotion-styled.browser.esm-BtEseadx.cjs"),t=require("./breakpoints-CcVm-gVm.cjs"),v=require("./Button.cjs"),y=require("./useDetectMobile-DYV6V1yw.cjs"),w=require("./utils-CITgSxXe.cjs"),j=h.styled(u.SkeletonColumnWrapper)`
+  @media ${t.down("S")} {
+    & > div {
+      height: 100%;
+      aspect-ratio: 1 / 1;
+    }
+  }
+`,k=({keyPrefix:i})=>r.jsx(j,{noGradient:!0,children:r.jsx(u.SkeletonLinePlaceholder,{keyPrefix:`${i}-1`,height:"22.5rem"})}),S=({keyPrefix:i,isLoading:o=!1,fallbackComponent:n=r.jsx(r.Fragment,{}),children:a})=>r.jsx(d.Suspense,{fallbackComponent:n,children:o===!0?r.jsx(k,{keyPrefix:i}):a}),C=h.styled.div`
   &:hover {
     cursor: pointer;
 
@@ -189,11 +196,4 @@
       }
     }
   }
-`,j=u.styled(m.SkeletonColumnWrapper)`
-  @media ${t.down("S")} {
-    & > div {
-      height: 100%;
-      aspect-ratio: 1 / 1;
-    }
-  }
-`,k=({keyPrefix:i})=>r.jsx(j,{noGradient:!0,children:r.jsx(m.SkeletonLinePlaceholder,{keyPrefix:`${i}-1`,height:"22.5rem"})}),S=({keyPrefix:i,isLoading:o=!1,fallbackComponent:a=r.jsx(r.Fragment,{}),children:n})=>r.jsx(d.Suspense,{fallbackComponent:a,children:o===!0?r.jsx(k,{keyPrefix:i}):n}),C=d.forwardRef(({items:i=[],isLoading:o=!1,deviceType:a,partialVisible:n=!0,fallbackComponent:h=r.jsx(r.Fragment,{}),onSelectItem:_=()=>{},onButtonAction:p=()=>{},carouselProps:g},f)=>{const b={desktop:{breakpoint:{max:3e3,min:t.screenSizes.M.max},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:t.screenSizes.M.max,min:t.screenSizes.S.min},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:t.screenSizes.XS.max,min:0},items:1,partialVisibilityGutter:64}},c=w.useDetectMobile();return r.jsx(y,{ref:f,children:r.jsx(S,{fallbackComponent:h,keyPrefix:"banner-carousel-skeleton",isLoading:o,children:r.jsx(x.Carousel,{responsive:b,deviceType:a,removeArrowOnDeviceType:["tablet","mobile"],infinite:!c,keyBoardControl:!0,autoPlay:!0,partialVisible:n,customTransition:"transform 500ms ease-in-out",sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",rewind:!0,rewindWithAnimation:!0,...g,children:i==null?void 0:i.map((e,l)=>r.jsxs("div",{className:"section__card",onClick:()=>_(e),children:[r.jsx("img",{src:e==null?void 0:e.imageUrl,alt:`Slide ${l+1}`,className:"section__image"}),r.jsxs("div",{className:"card__content",children:[r.jsxs("div",{className:"card__text",children:[(e==null?void 0:e.title)&&r.jsx("div",{className:"card__title",children:e==null?void 0:e.title}),(e==null?void 0:e.title)&&r.jsx("div",{className:"card__description",children:e==null?void 0:e.description})]}),(e==null?void 0:e.buttonText)&&r.jsx(v,{text:e==null?void 0:e.buttonText,className:"card__action",size:"medium",onClick:s=>{s==null||s.stopPropagation(),p(e)}})]})]},`banner-section-carousel-item__${l+1}`))})})},`banner-section-carousel__${c}`)});module.exports=C;
+`,q=d.forwardRef(({items:i=[],isLoading:o=!1,deviceType:n,partialVisible:a=!0,fallbackComponent:m=r.jsx(r.Fragment,{}),onSelectItem:_=()=>{},onButtonAction:g=()=>{},carouselProps:p},f)=>{const b={desktop:{breakpoint:{max:3e3,min:t.screenSizes.M.max},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:t.screenSizes.M.max,min:t.screenSizes.S.min},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:t.screenSizes.XS.max,min:0},items:1,partialVisibilityGutter:64}},c=y.useDetectMobile();return r.jsx(C,{ref:f,children:r.jsx(S,{fallbackComponent:m,keyPrefix:"banner-carousel-skeleton",isLoading:o,children:r.jsx(x.Carousel,{responsive:b,deviceType:n,removeArrowOnDeviceType:["tablet","mobile"],infinite:!c,keyBoardControl:!0,autoPlay:!0,partialVisible:a,customTransition:"transform 500ms ease-in-out",sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",rewind:!0,rewindWithAnimation:!0,...p,children:i==null?void 0:i.map((e,l)=>r.jsxs("div",{className:"section__card",onClick:()=>_(e),children:[w.isDefined(e==null?void 0:e.imageComponent)?e==null?void 0:e.imageComponent:r.jsx("img",{src:e==null?void 0:e.imageUrl,alt:`Slide ${l+1}`,loading:"lazy",className:"section__image"}),r.jsxs("div",{className:"card__content",children:[r.jsxs("div",{className:"card__text",children:[(e==null?void 0:e.title)&&r.jsx("div",{className:"card__title",children:e==null?void 0:e.title}),(e==null?void 0:e.title)&&r.jsx("div",{className:"card__description",children:e==null?void 0:e.description})]}),(e==null?void 0:e.buttonText)&&r.jsx(v,{text:e==null?void 0:e.buttonText,className:"card__action",size:"medium",onClick:s=>{s==null||s.stopPropagation(),g(e)}})]})]},`banner-section-carousel-item__${l+1}`))})})},`banner-section-carousel__${c}`)});module.exports=q;

package/dist/BannerSectionCarousel.js

@@ -1,12 +1,25 @@
 import { jsx as r, Fragment as u, jsxs as l } from "react/jsx-runtime";
 import { Suspense as v, forwardRef as y } from "react";
 import { C as w } from "./index-BppfjY8h.js";
-import k from "./Button.js";
-import { u as C } from "./useDetectMobile-CcVo3PNi.js";
-import { d as a, s as i } from "./breakpoints-ff0SIcV3.js";
+import { b as k, a as C } from "./style-BwQ4djFC.js";
 import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as S, a as j } from "./style-BwQ4djFC.js";
-const $ = h.div`
+import { d as o, s as i } from "./breakpoints-ff0SIcV3.js";
+import S from "./Button.js";
+import { u as j } from "./useDetectMobile-CcVo3PNi.js";
+import { m as $ } from "./utils-B2fsQ6PS.js";
+const N = h(k)`
+  @media ${o("S")} {
+    & > div {
+      height: 100%;
+      aspect-ratio: 1 / 1;
+    }
+  }
+`, z = ({ keyPrefix: t }) => /* @__PURE__ */ r(N, { noGradient: !0, children: /* @__PURE__ */ r(C, { keyPrefix: `${t}-1`, height: "22.5rem" }) }), B = ({
+  keyPrefix: t,
+  isLoading: a = !1,
+  fallbackComponent: n = /* @__PURE__ */ r(u, {}),
+  children: s
+}) => /* @__PURE__ */ r(v, { fallbackComponent: n, children: a === !0 ? /* @__PURE__ */ r(z, { keyPrefix: t }) : s }), M = h.div`
   &:hover {
     cursor: pointer;
 
@@ -124,7 +137,7 @@ const $ = h.div`
     right: 1rem;
   }
 
-  @media ${a("M")} {
+  @media ${o("M")} {
     & .carousel-item .section__card,
     & .carousel-item:not(.react-multi-carousel-item--active) .section__card {
       height: 100%;
@@ -136,14 +149,14 @@ const $ = h.div`
     }
   }
 
-  @media ${a("S")} {
+  @media ${o("S")} {
     & .carousel-item .section__card .section__image {
       object-fit: cover;
       object-position: center;
     }
   }
 
-  @media ${a("XS")} {
+  @media ${o("XS")} {
     & .carousel-container {
       min-height: 23.4375rem;
     }
@@ -197,28 +210,16 @@ const $ = h.div`
       }
     }
   }
-`, N = h(S)`
-  @media ${a("S")} {
-    & > div {
-      height: 100%;
-      aspect-ratio: 1 / 1;
-    }
-  }
-`, z = ({ keyPrefix: t }) => /* @__PURE__ */ r(N, { noGradient: !0, children: /* @__PURE__ */ r(j, { keyPrefix: `${t}-1`, height: "22.5rem" }) }), B = ({
-  keyPrefix: t,
-  isLoading: o = !1,
-  fallbackComponent: n = /* @__PURE__ */ r(u, {}),
-  children: c
-}) => /* @__PURE__ */ r(v, { fallbackComponent: n, children: o === !0 ? /* @__PURE__ */ r(z, { keyPrefix: t }) : c }), W = y(
+`, F = y(
   ({
     items: t = [],
-    isLoading: o = !1,
+    isLoading: a = !1,
     deviceType: n,
-    partialVisible: c = !0,
+    partialVisible: s = !0,
     fallbackComponent: p = /* @__PURE__ */ r(u, {}),
-    onSelectItem: _ = () => {
+    onSelectItem: f = () => {
     },
-    onButtonAction: f = () => {
+    onButtonAction: _ = () => {
     },
     carouselProps: g
   }, b) => {
@@ -238,13 +239,13 @@ const $ = h.div`
         items: 1,
         partialVisibilityGutter: 64
       }
-    }, d = C();
-    return /* @__PURE__ */ r($, { ref: b, children: /* @__PURE__ */ r(
+    }, d = j();
+    return /* @__PURE__ */ r(M, { ref: b, children: /* @__PURE__ */ r(
       B,
       {
         fallbackComponent: p,
         keyPrefix: "banner-carousel-skeleton",
-        isLoading: o,
+        isLoading: a,
         children: /* @__PURE__ */ r(
           w,
           {
@@ -254,7 +255,7 @@ const $ = h.div`
             infinite: !d,
             keyBoardControl: !0,
             autoPlay: !0,
-            partialVisible: c,
+            partialVisible: s,
             customTransition: "transform 500ms ease-in-out",
             sliderClass: "carousel-slider",
             itemClass: "carousel-item",
@@ -266,13 +267,14 @@ const $ = h.div`
               "div",
               {
                 className: "section__card",
-                onClick: () => _(e),
+                onClick: () => f(e),
                 children: [
-                  /* @__PURE__ */ r(
+                  $(e == null ? void 0 : e.imageComponent) ? e == null ? void 0 : e.imageComponent : /* @__PURE__ */ r(
                     "img",
                     {
                       src: e == null ? void 0 : e.imageUrl,
                       alt: `Slide ${m + 1}`,
+                      loading: "lazy",
                       className: "section__image"
                     }
                   ),
@@ -282,13 +284,13 @@ const $ = h.div`
                       (e == null ? void 0 : e.title) && /* @__PURE__ */ r("div", { className: "card__description", children: e == null ? void 0 : e.description })
                     ] }),
                     (e == null ? void 0 : e.buttonText) && /* @__PURE__ */ r(
-                      k,
+                      S,
                       {
                         text: e == null ? void 0 : e.buttonText,
                         className: "card__action",
                         size: "medium",
-                        onClick: (s) => {
-                          s == null || s.stopPropagation(), f(e);
+                        onClick: (c) => {
+                          c == null || c.stopPropagation(), _(e);
                         }
                       }
                     )
@@ -304,5 +306,5 @@ const $ = h.div`
   }
 );
 export {
-  W as default
+  F as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.208",
+  "version": "4.0.209",
   "description": "React component library",
   "type": "module",
   "keywords": [