najwer23morsels 0.4.5 → 0.4.6

package/lib/Slider.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import n,{useState as l,useRef as t,useEffect as o,useCallback as s}from"react";import{s as i,T as a}from"./TextBox-CGTF50Z0.js";var d={najwer23morselsSliderContainer:"Slider-module_najwer23morselsSliderContainer__1SbJN",najwer23morselsSliderContainerSlider:"Slider-module_najwer23morselsSliderContainerSlider__7ONky",najwer23morselsSlideWrapper:"Slider-module_najwer23morselsSlideWrapper__veeuJ",najwer23morselsSlide:"Slider-module_najwer23morselsSlide__KHKZW",najwer23morselsBtnControl:"Slider-module_najwer23morselsBtnControl__RHrxn",najwer23morselsBtn:"Slider-module_najwer23morselsBtn__10p8D",najwer23morselsSliderCounter:"Slider-module_najwer23morselsSliderCounter__56f5P"};i("@layer najwer23morselsSlider{.Slider-module_najwer23morselsSliderContainer__1SbJN{height:100%;width:100%}.Slider-module_najwer23morselsSliderContainerSlider__7ONky{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_najwer23morselsSlideWrapper__veeuJ{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_najwer23morselsSlide__KHKZW{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_najwer23morselsBtnControl__RHrxn{align-items:center;display:flex;height:100%;left:0;padding:0 25px;pointer-events:none;position:absolute;right:0;z-index:100}.Slider-module_najwer23morselsBtn__10p8D{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--najwer23morselsSliderArrowsColorBackground,var(--abgc,#fff));border:1px solid var(--najwer23morselsSliderArrowsColorBorder,var(--abc,#000));border-radius:50%;color:var(--najwer23morselsSliderArrowsColor,var(--ac,#000));cursor:pointer;display:flex;left:50%;padding:10px;pointer-events:auto;transition:all .2s linear;transition:background-color .3s,box-shadow .3s;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;@media (hover:hover) and (pointer:fine){&:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 6px 20px 0 rgba(0,0,0,.19);filter:brightness(.95)}}}.Slider-module_najwer23morselsSliderCounter__56f5P{align-items:center;display:flex;justify-content:center}}");const c=(e,r,l=!1)=>(l?e.slice(0,r):e.slice(-r)).map((e,r)=>n.cloneElement(e,{key:`${l?"clone-first":"clone-last"}-${r}`,className:e.props.className})),m=({isCircular:i=!1,children:m,className:u,arrowsColor:h,arrowsColorBackground:w,arrowsColorBorder:p,showCounter:g=!0})=>{const S=n.Children.toArray(m).filter(n.isValidElement),[f,v]=l(i&&S.length>=2?2:0),[j,_]=l(!1),[C,x]=l(0),[b,y]=l(0),N=t(null),k=t([]),B=t(null),E=i&&S.length>=2?[...c(S,2,!1),...S.map((e,r)=>n.cloneElement(e,{key:e.key??r,className:e.props.className})),...c(S,2,!0)]:S.map((e,r)=>n.cloneElement(e,{key:e.key??r,className:e.props.className}));k.current.length!==E.length&&(k.current=Array(E.length).fill(null)),o(()=>{v(i&&S.length>=2?2:0)},[i,S.length]);const L=s(()=>{const e=N.current;if(!e)return;const r=k.current[0];if(!r)return;const n=window.getComputedStyle(r);x(r.offsetWidth+parseFloat(n.marginLeft)+parseFloat(n.marginRight)),y(e.offsetWidth)},[]);o(()=>{L();const e=()=>{null!==B.current&&clearTimeout(B.current),B.current=window.setTimeout(()=>{L(),_(!0)},150)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==B.current&&clearTimeout(B.current)}},[L]),o(()=>{const e=C+10;k.current.forEach((r,n)=>{if(!r)return;const l=(n-f)*e+(b-C)/2;r.style.transition=j?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",r.style.transform=`translateX(${l}px)`,r.style.left=""})},[f,C,b,j,E.length,i]),o(()=>{if(!j||!i)return;const e=k.current.length,r=k.current[e-1];if(!r)return;let n;const l=()=>{let t=f;1===f?t=e-3:f===e-2&&(t=2),t!==f&&v(t),_(!1),r.removeEventListener("transitionend",l),clearTimeout(n)};return r.addEventListener("transitionend",l),n=window.setTimeout(()=>{_(!1),r.removeEventListener("transitionend",l)},500),()=>{r.removeEventListener("transitionend",l),clearTimeout(n)}},[f,i,j]),o(()=>{if(!j)return;const e=k.current[0];if(!e)return;let r;const n=()=>{_(!1),e.removeEventListener("transitionend",n),clearTimeout(r)};return e.addEventListener("transitionend",n),r=window.setTimeout(()=>{_(!1),e.removeEventListener("transitionend",n)},500),()=>{e.removeEventListener("transitionend",n),clearTimeout(r)}},[j]);return e("div",{className:[d.najwer23morselsSliderContainer,"MorselsSlider",u].filter(Boolean).join(" "),children:[e("div",{className:[d.najwer23morselsSliderContainerSlider].filter(Boolean).join(" "),style:{"--ac":h,"--abgc":w,"--abc":p},children:[e("div",{className:[d.najwer23morselsBtnControl,"MorselsSliderControl",u].join(" "),style:{justifyContent:i?"space-between":0===f?"flex-end":f===S.length-1?"flex-start":"space-between"},children:[(i&&S.length>1||0!==f)&&r("button",{title:"Prev",className:d.najwer23morselsBtn,onClick:()=>{j||(_(!0),v(i?e=>e-1:e=>Math.max(e-1,0)))},disabled:j,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("path",{d:"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"})})}),(i&&S.length>1||f!==S.length-1)&&r("button",{title:"Next",className:d.najwer23morselsBtn,onClick:()=>{j||(_(!0),v(i?e=>e+1:e=>Math.min(e+1,E.length-1)))},disabled:j,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("path",{d:"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"})})})]}),r("div",{className:[d.najwer23morselsSlideWrapper,"MorselsSliderWrapper",u].join(" "),ref:N,children:E.map((e,n)=>r("div",{ref:e=>{k.current[n]=e},className:`${d.najwer23morselsSlide}`,style:{width:S.length>1?"calc(100% - 100px)":"100%"},"aria-hidden":f!==n,children:e},e.key??n))})]}),g&&r("div",{className:[d.najwer23morselsSliderCounter,"MorselsSliderCounter",u].join(" "),children:r(a,{mobileSize:16,desktopSize:16,color:"black",children:i?`${(()=>{if(!i)return f;const e=S.length;return e<1?0:(f-2+e)%e})()+1} / ${S.length}`:`${f+1} / ${S.length}`})})]})};m.displayName="Slider";export{m as Slider};
+import{jsxs as e,jsx as r,Fragment as n}from"react/jsx-runtime";import l,{useState as t,useRef as o,useEffect as i,useCallback as s}from"react";import{s as a,T as d}from"./TextBox-CGTF50Z0.js";var c={najwer23morselsSliderContainer:"Slider-module_najwer23morselsSliderContainer__1SbJN",najwer23morselsSliderContainerSlider:"Slider-module_najwer23morselsSliderContainerSlider__7ONky",najwer23morselsSlideWrapper:"Slider-module_najwer23morselsSlideWrapper__veeuJ",najwer23morselsSlide:"Slider-module_najwer23morselsSlide__KHKZW",najwer23morselsBtnControl:"Slider-module_najwer23morselsBtnControl__RHrxn",najwer23morselsBtn:"Slider-module_najwer23morselsBtn__10p8D",najwer23morselsSliderCounter:"Slider-module_najwer23morselsSliderCounter__56f5P",najwer23morselsLoading:"Slider-module_najwer23morselsLoading__Iv4D5"};a("@layer najwer23morselsSlider{.Slider-module_najwer23morselsSliderContainer__1SbJN{width:100%}.Slider-module_najwer23morselsSliderContainerSlider__7ONky{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_najwer23morselsSlideWrapper__veeuJ{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_najwer23morselsSlide__KHKZW{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_najwer23morselsBtnControl__RHrxn{align-items:center;display:flex;height:100%;left:0;opacity:0;padding:0 25px;pointer-events:none;position:absolute;right:0;transition:all .2s linear;z-index:100}.Slider-module_najwer23morselsSliderContainer__1SbJN:hover .Slider-module_najwer23morselsBtnControl__RHrxn{opacity:1;pointer-events:auto}.Slider-module_najwer23morselsBtn__10p8D{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--najwer23morselsSliderArrowsColorBackground,var(--abgc,#fff));border:1px solid var(--najwer23morselsSliderArrowsColorBorder,var(--abc,#000));border-radius:50%;color:var(--najwer23morselsSliderArrowsColor,var(--ac,#000));cursor:pointer;display:flex;left:50%;padding:10px;pointer-events:auto;transition:all .2s linear;transition:background-color .3s,box-shadow .3s;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;@media (hover:hover) and (pointer:fine){&:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 6px 20px 0 rgba(0,0,0,.19);filter:brightness(.95)}}}.Slider-module_najwer23morselsSliderCounter__56f5P{align-items:center;display:flex;height:35px;justify-content:center}.Slider-module_najwer23morselsLoading__Iv4D5{align-items:center;border:1px solid var(--najwer23morselsTextBoxColor,var(--lbc));display:flex;height:100%;justify-content:center;width:100%}}");const m=(e,r,n=!1)=>(n?e.slice(0,r):e.slice(-r)).map((e,r)=>l.cloneElement(e,{key:`${n?"clone-first":"clone-last"}-${r}`,className:e.props.className})),u=({isCircular:a=!1,children:u,className:h,arrowsColor:w,arrowsColorBackground:p,arrowsColorBorder:g,showCounter:S=!0,loading:v=!1,loadingTextColor:_="black"})=>{const f=l.Children.toArray(u).filter(l.isValidElement),[j,x]=t(a&&f.length>=2?2:0),[b,C]=t(!1),[y,N]=t(0),[k,B]=t(0),L=o(null),E=o([]),T=o(null),z=a&&f.length>=2?[...m(f,2,!1),...f.map((e,r)=>l.cloneElement(e,{key:e.key??r,className:e.props.className})),...m(f,2,!0)]:f.map((e,r)=>l.cloneElement(e,{key:e.key??r,className:e.props.className}));E.current.length!==z.length&&(E.current=Array(z.length).fill(null)),i(()=>{x(a&&f.length>=2?2:0)},[a,f.length,v]);const W=s(()=>{const e=L.current;if(!e)return;const r=E.current[0];if(!r)return;const n=window.getComputedStyle(r);N(r.offsetWidth+parseFloat(n.marginLeft)+parseFloat(n.marginRight)),B(e.offsetWidth)},[]);i(()=>{W();const e=()=>{null!==T.current&&clearTimeout(T.current),T.current=window.setTimeout(()=>{W(),C(!0)},150)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==T.current&&clearTimeout(T.current)}},[W,v]),i(()=>{const e=y+10;E.current.forEach((r,n)=>{if(!r)return;const l=(n-j)*e+(k-y)/2;r.style.transition=b?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",r.style.transform=`translateX(${l}px)`,r.style.left=""})},[j,y,k,b,z.length,a,v]),i(()=>{if(!b||!a)return;const e=E.current.length,r=E.current[e-1];if(!r)return;let n;const l=()=>{let t=j;1===j?t=e-3:j===e-2&&(t=2),t!==j&&x(t),C(!1),r.removeEventListener("transitionend",l),clearTimeout(n)};return r.addEventListener("transitionend",l),n=window.setTimeout(()=>{C(!1),r.removeEventListener("transitionend",l)},500),()=>{r.removeEventListener("transitionend",l),clearTimeout(n)}},[j,a,b,v]),i(()=>{if(!b)return;const e=E.current[0];if(!e)return;let r;const n=()=>{C(!1),e.removeEventListener("transitionend",n),clearTimeout(r)};return e.addEventListener("transitionend",n),r=window.setTimeout(()=>{C(!1),e.removeEventListener("transitionend",n)},500),()=>{e.removeEventListener("transitionend",n),clearTimeout(r)}},[b,v]);return e("div",{className:[c.najwer23morselsSliderContainer,"MorselsSlider",h].filter(Boolean).join(" "),style:{height:v?"calc(100% - 2px)":S?"calc(100% - 35px)":"100%"},children:[v&&r("div",{className:c.najwer23morselsLoading,style:{"--lbc":_},children:r(d,{mobileSize:16,desktopSize:16,color:_,children:"Loading..."})}),!v&&e(n,{children:[e("div",{className:[c.najwer23morselsSliderContainerSlider].filter(Boolean).join(" "),style:{"--ac":w,"--abgc":p,"--abc":g},children:[e("div",{className:[c.najwer23morselsBtnControl,"MorselsSliderControl",h].join(" "),style:{justifyContent:a?"space-between":0===j?"flex-end":j===f.length-1?"flex-start":"space-between"},children:[(a&&f.length>1||0!==j)&&r("button",{title:"Prev",className:c.najwer23morselsBtn,onClick:()=>{b||(C(!0),x(a?e=>e-1:e=>Math.max(e-1,0)))},disabled:b,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("path",{d:"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"})})}),(a&&f.length>1||j!==f.length-1)&&r("button",{title:"Next",className:c.najwer23morselsBtn,onClick:()=>{b||(C(!0),x(a?e=>e+1:e=>Math.min(e+1,z.length-1)))},disabled:b,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("path",{d:"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"})})})]}),r("div",{className:[c.najwer23morselsSlideWrapper,"MorselsSliderWrapper",h].join(" "),ref:L,children:z.map((e,n)=>r("div",{ref:e=>{E.current[n]=e},className:`${c.najwer23morselsSlide}`,style:{width:f.length>1?"calc(100% - 40px)":"100%"},"aria-hidden":j!==n,children:e},e.key??n))})]}),S&&r("div",{className:[c.najwer23morselsSliderCounter,"MorselsSliderCounter",h].join(" "),children:r(d,{mobileSize:16,desktopSize:16,color:"black",children:a?`${(()=>{if(!a)return j;const e=f.length;return e<1?0:(j-2+e)%e})()+1} / ${f.length}`:`${j+1} / ${f.length}`})})]})]})};u.displayName="Slider";export{u as Slider};

package/lib/slider/Slider.d.ts

@@ -6,6 +6,8 @@ interface SliderProps extends React.HTMLAttributes<HTMLDivElement> {
     arrowsColorBackground?: string;
     arrowsColorBorder?: string;
     showCounter?: boolean;
+    loading?: boolean;
+    loadingTextColor?: string;
 }
 export declare const Slider: React.FC<SliderProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najwer23morsels",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",