@scbt-ecom/ui 0.154.0 → 0.154.1
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.
- package/dist/lib/shared/ui/carousel/Carousel.js +1 -1
- package/dist/lib/shared/ui/carousel/Carousel.js.map +1 -1
- package/dist/lib/widgets/carouselBlock/CarouselBlock.js +1 -1
- package/dist/lib/widgets/carouselBlock/CarouselBlock.js.map +1 -1
- package/dist/stats.html +1 -1
- package/dist/types/lib/shared/ui/carousel/Carousel.d.ts +2 -2
- package/dist/types/lib/widgets/carouselBlock/CarouselBlock.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useCarousel as L}from"./model/hooks/useCarousel.js";import{useDotsNavigation as H}from"./model/hooks/useDotsNavigation.js";import{useArrowNavigation as M}from"./model/hooks/useArrowNavigation.js";import{cn as t}from"../../utils/cn.js";import{RenderSlides as R}from"./ui/RenderSlides.js";import{defaultNavigationOptions as T,defaultCarouselOptions as G,defaultAutoPlayOptions as V}from"./model/constant.js";import{ArrowNavigationButton as u}from"./ui/ArrowNavigationButton.js";import{TypeGuards as W}from"../../utils/typeGuards.js";import{StepsList as q}from"./ui/stepsList/StepsList.js";import{DotsNavigations as z}from"./ui/DotsNavigations.js";import{Heading as E}from"../heading/Heading.js";const eo=({carouselOptions:x,navigationOptions:w,autoPlayOptions:k,slidesOptions:d,setVisibleIndex:m,visibleIndex:l,heading:i,stepsList:p,carouselClasses:o})=>{const O={...G,...x},y={...T,...w},A={...V,...k},{arrowsOnMob:r,arrowsOnDesk:n,dotsOnMob:c,dotsOnDesk:f}=y,{slideVariant:D}=d,v=D==="stepsList",{emblaApi:a,navigationHandler:b,emblaRef:B}=L({carouselOptions:O,autoPlayOptions:A}),P=H({emblaApi:a,navigationHandler:b,setVisibleIndex:m}),{prevBtnDisabled:S,nextBtnDisabled:j,onClickNavigationButton:g}=M({emblaApi:a,navigationHandler:b}),C=N=>{a?.scrollTo(N),m(N)},h=e("div",{className:t("overflow-hidden",o?.overlay,{"max-w-[328px] desktop:max-w-[464px]":v}),ref:B,children:e(R,{classes:o?.renderSlidesClasses,slidesOptions:d})});return s("div",{className:"flex w-full flex-col",children:[s("div",{className:t("mb-6 flex items-center justify-between gap-6 desktop:mb-12",{"desktop:hidden":!n&&!i,"mobile:hidden":!r&&!i},o?.header),children:[!!i&&e(E,{as:"h2",className:t(o?.heading),children:i}),(r||n)&&s("div",{className:t("ml-auto flex items-center gap-2",{"mobile:hidden":!r,"desktop:hidden":!n},o?.arrowsWrapper),children:[e(u,{mode:"prev",onClick:g,disabled:S,classes:o?.arrowPrevClasses}),e(u,{mode:"next",onClick:g,disabled:j,classes:o?.arrowNextClasses})]})]}),v&&W.isArray(p)?s("div",{className:t("flex items-start gap-10 mobile:flex-col mobile:gap-4 desktop:justify-between",o?.content),children:[e(q,{visibleIndex:l,onChangeStep:C,stepsList:p,classes:o?.stepsListClasses}),h]}):h,(c||f)&&e("div",{className:t("mx-auto",{"mobile:hidden":!c,"desktop:hidden":!f},o?.dots),children:e(z,{visibleIndex:l,...P})})]})};export{eo as Carousel};
|
|
2
2
|
//# sourceMappingURL=Carousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../../../../lib/shared/ui/carousel/Carousel.tsx"],"sourcesContent":["import { type Dispatch, type SetStateAction } from 'react'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport { type AutoplayOptionsType } from 'embla-carousel-autoplay'\nimport { Heading } from '../heading'\nimport { useArrowNavigation, useCarousel, useDotsNavigation } from './model'\nimport {\n defaultAutoPlayOptions,\n defaultCarouselOptions,\n defaultNavigationOptions,\n type NavigationOptions,\n type SlidesOptions,\n type SlideVariant\n} from './model'\nimport {\n ArrowNavigationButton,\n type ArrowNavigationButtonClasses,\n DotsNavigations,\n RenderSlides,\n type RenderSlidesClasses,\n type StepListClasses,\n type StepListItemType,\n StepsList\n} from './ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\ntype CarouselClasses = {\n overlay?: string\n arrowsWrapper?: string\n header?: string\n heading?: string\n dots?: string\n content?: string\n arrowNextClasses?: ArrowNavigationButtonClasses\n arrowPrevClasses?: ArrowNavigationButtonClasses\n stepsListClasses?: StepListClasses\n renderSlidesClasses?: RenderSlidesClasses\n}\n\nexport interface CarouselProps<V extends SlideVariant> {\n setVisibleIndex: Dispatch<SetStateAction<number>>\n visibleIndex: number\n slidesOptions: SlidesOptions<V>\n\n heading?: string\n carouselOptions?: EmblaOptionsType\n autoPlayOptions?: AutoplayOptionsType\n navigationOptions?: NavigationOptions\n stepsList?: StepListItemType[]\n
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../../../../lib/shared/ui/carousel/Carousel.tsx"],"sourcesContent":["import { type Dispatch, type SetStateAction } from 'react'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport { type AutoplayOptionsType } from 'embla-carousel-autoplay'\nimport { Heading } from '../heading'\nimport { useArrowNavigation, useCarousel, useDotsNavigation } from './model'\nimport {\n defaultAutoPlayOptions,\n defaultCarouselOptions,\n defaultNavigationOptions,\n type NavigationOptions,\n type SlidesOptions,\n type SlideVariant\n} from './model'\nimport {\n ArrowNavigationButton,\n type ArrowNavigationButtonClasses,\n DotsNavigations,\n RenderSlides,\n type RenderSlidesClasses,\n type StepListClasses,\n type StepListItemType,\n StepsList\n} from './ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\ntype CarouselClasses = {\n overlay?: string\n arrowsWrapper?: string\n header?: string\n heading?: string\n dots?: string\n content?: string\n arrowNextClasses?: ArrowNavigationButtonClasses\n arrowPrevClasses?: ArrowNavigationButtonClasses\n stepsListClasses?: StepListClasses\n renderSlidesClasses?: RenderSlidesClasses\n}\n\nexport interface CarouselProps<V extends SlideVariant> {\n setVisibleIndex: Dispatch<SetStateAction<number>>\n visibleIndex: number\n slidesOptions: SlidesOptions<V>\n\n heading?: string\n carouselOptions?: EmblaOptionsType\n autoPlayOptions?: AutoplayOptionsType\n navigationOptions?: NavigationOptions\n stepsList?: StepListItemType[]\n carouselClasses?: CarouselClasses\n}\n\nexport const Carousel = <V extends SlideVariant>({\n carouselOptions,\n navigationOptions,\n autoPlayOptions,\n slidesOptions,\n setVisibleIndex,\n visibleIndex,\n heading,\n stepsList,\n carouselClasses\n}: CarouselProps<V>) => {\n const mergedCarouselOptions = { ...defaultCarouselOptions, ...carouselOptions }\n const mergedNavigationOptions = { ...defaultNavigationOptions, ...navigationOptions }\n const mergedAutoPlayOptions = { ...defaultAutoPlayOptions, ...autoPlayOptions }\n const { arrowsOnMob, arrowsOnDesk, dotsOnMob, dotsOnDesk } = mergedNavigationOptions\n const { slideVariant } = slidesOptions\n const isStepListVariant = slideVariant === 'stepsList'\n\n const { emblaApi, navigationHandler, emblaRef } = useCarousel({\n carouselOptions: mergedCarouselOptions,\n autoPlayOptions: mergedAutoPlayOptions\n })\n\n const dotsProps = useDotsNavigation({ emblaApi, navigationHandler, setVisibleIndex })\n const { prevBtnDisabled, nextBtnDisabled, onClickNavigationButton } = useArrowNavigation({\n emblaApi,\n navigationHandler\n })\n\n const onChangeStep = (stepIndex: number) => {\n emblaApi?.scrollTo(stepIndex)\n setVisibleIndex(stepIndex)\n }\n\n const slidesContent = (\n <div\n className={cn('overflow-hidden', carouselClasses?.overlay, { 'max-w-[328px] desktop:max-w-[464px]': isStepListVariant })}\n ref={emblaRef}\n >\n <RenderSlides classes={carouselClasses?.renderSlidesClasses} slidesOptions={slidesOptions} />\n </div>\n )\n\n return (\n <div className='flex w-full flex-col'>\n <div\n className={cn(\n 'mb-6 flex items-center justify-between gap-6 desktop:mb-12',\n {\n 'desktop:hidden': !arrowsOnDesk && !heading,\n 'mobile:hidden': !arrowsOnMob && !heading\n },\n carouselClasses?.header\n )}\n >\n {Boolean(heading) && (\n <Heading as='h2' className={cn(carouselClasses?.heading)}>\n {heading}\n </Heading>\n )}\n\n {(arrowsOnMob || arrowsOnDesk) && (\n <div\n className={cn(\n 'ml-auto flex items-center gap-2',\n { 'mobile:hidden': !arrowsOnMob, 'desktop:hidden': !arrowsOnDesk },\n carouselClasses?.arrowsWrapper\n )}\n >\n <ArrowNavigationButton\n mode='prev'\n onClick={onClickNavigationButton}\n disabled={prevBtnDisabled}\n classes={carouselClasses?.arrowPrevClasses}\n />\n <ArrowNavigationButton\n mode='next'\n onClick={onClickNavigationButton}\n disabled={nextBtnDisabled}\n classes={carouselClasses?.arrowNextClasses}\n />\n </div>\n )}\n </div>\n\n {isStepListVariant && TypeGuards.isArray(stepsList) ? (\n <div\n className={cn('flex items-start gap-10 mobile:flex-col mobile:gap-4 desktop:justify-between', carouselClasses?.content)}\n >\n <StepsList\n visibleIndex={visibleIndex}\n onChangeStep={onChangeStep}\n stepsList={stepsList}\n classes={carouselClasses?.stepsListClasses}\n />\n {slidesContent}\n </div>\n ) : (\n slidesContent\n )}\n\n {(dotsOnMob || dotsOnDesk) && (\n <div className={cn('mx-auto', { 'mobile:hidden': !dotsOnMob, 'desktop:hidden': !dotsOnDesk }, carouselClasses?.dots)}>\n <DotsNavigations visibleIndex={visibleIndex} {...dotsProps} />\n </div>\n )}\n </div>\n )\n}\n"],"names":["Carousel","carouselOptions","navigationOptions","autoPlayOptions","slidesOptions","setVisibleIndex","visibleIndex","heading","stepsList","carouselClasses","mergedCarouselOptions","defaultCarouselOptions","mergedNavigationOptions","defaultNavigationOptions","mergedAutoPlayOptions","defaultAutoPlayOptions","arrowsOnMob","arrowsOnDesk","dotsOnMob","dotsOnDesk","slideVariant","isStepListVariant","emblaApi","navigationHandler","emblaRef","useCarousel","dotsProps","useDotsNavigation","prevBtnDisabled","nextBtnDisabled","onClickNavigationButton","useArrowNavigation","onChangeStep","stepIndex","slidesContent","jsx","cn","RenderSlides","jsxs","Heading","ArrowNavigationButton","TypeGuards","StepsList","DotsNavigations"],"mappings":"8uBAmDO,MAAMA,GAAW,CAAyB,CAC/C,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,EACA,gBAAAC,CACF,IAAwB,CACtB,MAAMC,EAAwB,CAAE,GAAGC,EAAwB,GAAGV,CAAA,EACxDW,EAA0B,CAAE,GAAGC,EAA0B,GAAGX,CAAA,EAC5DY,EAAwB,CAAE,GAAGC,EAAwB,GAAGZ,CAAA,EACxD,CAAE,YAAAa,EAAa,aAAAC,EAAc,UAAAC,EAAW,WAAAC,GAAeP,EACvD,CAAE,aAAAQ,GAAiBhB,EACnBiB,EAAoBD,IAAiB,YAErC,CAAE,SAAAE,EAAU,kBAAAC,EAAmB,SAAAC,CAAA,EAAaC,EAAY,CAC5D,gBAAiBf,EACjB,gBAAiBI,CAAA,CAClB,EAEKY,EAAYC,EAAkB,CAAE,SAAAL,EAAU,kBAAAC,EAAmB,gBAAAlB,EAAiB,EAC9E,CAAE,gBAAAuB,EAAiB,gBAAAC,EAAiB,wBAAAC,CAAA,EAA4BC,EAAmB,CACvF,SAAAT,EACA,kBAAAC,CAAA,CACD,EAEKS,EAAgBC,GAAsB,CAC1CX,GAAU,SAASW,CAAS,EAC5B5B,EAAgB4B,CAAS,CAC3B,EAEMC,EACJC,EAAC,MAAA,CACC,UAAWC,EAAG,kBAAmB3B,GAAiB,QAAS,CAAE,sCAAuCY,EAAmB,EACvH,IAAKG,EAEL,SAAAW,EAACE,EAAA,CAAa,QAAS5B,GAAiB,oBAAqB,cAAAL,CAAA,CAA8B,CAAA,CAAA,EAI/F,OACEkC,EAAC,MAAA,CAAI,UAAU,uBACb,SAAA,CAAAA,EAAC,MAAA,CACC,UAAWF,EACT,6DACA,CACE,iBAAkB,CAACnB,GAAgB,CAACV,EACpC,gBAAiB,CAACS,GAAe,CAACT,CAAA,EAEpCE,GAAiB,MAAA,EAGlB,SAAA,CAAA,EAAQF,GACP4B,EAACI,EAAA,CAAQ,GAAG,KAAK,UAAWH,EAAG3B,GAAiB,OAAO,EACpD,SAAAF,CAAA,CACH,GAGAS,GAAeC,IACfqB,EAAC,MAAA,CACC,UAAWF,EACT,kCACA,CAAE,gBAAiB,CAACpB,EAAa,iBAAkB,CAACC,CAAA,EACpDR,GAAiB,aAAA,EAGnB,SAAA,CAAA0B,EAACK,EAAA,CACC,KAAK,OACL,QAASV,EACT,SAAUF,EACV,QAASnB,GAAiB,gBAAA,CAAA,EAE5B0B,EAACK,EAAA,CACC,KAAK,OACL,QAASV,EACT,SAAUD,EACV,QAASpB,GAAiB,gBAAA,CAAA,CAC5B,CAAA,CAAA,CACF,CAAA,CAAA,EAIHY,GAAqBoB,EAAW,QAAQjC,CAAS,EAChD8B,EAAC,MAAA,CACC,UAAWF,EAAG,+EAAgF3B,GAAiB,OAAO,EAEtH,SAAA,CAAA0B,EAACO,EAAA,CACC,aAAApC,EACA,aAAA0B,EACA,UAAAxB,EACA,QAASC,GAAiB,gBAAA,CAAA,EAE3ByB,CAAA,CAAA,CAAA,EAGHA,GAGAhB,GAAaC,IACbgB,EAAC,MAAA,CAAI,UAAWC,EAAG,UAAW,CAAE,gBAAiB,CAAClB,EAAW,iBAAkB,CAACC,GAAcV,GAAiB,IAAI,EACjH,WAACkC,EAAA,CAAgB,aAAArC,EAA6B,GAAGoB,CAAA,CAAW,CAAA,CAC9D,CAAA,EAEJ,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{useState as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{useState as a}from"react";import{cn as s}from"../../shared/utils/cn.js";import{Carousel as c}from"../../shared/ui/carousel/Carousel.js";import{widgetIds as r}from"../model/helpers.js";import{ResponsiveContainer as l}from"../../shared/ui/responsiveContainer/ResponsiveContainer.js";const x=e=>{const[t,i]=a(0);return o("section",{id:r.carouselBlock,"data-test-id":r.carouselBlock,className:s(e.classes?.root),children:o(l,{className:s(e.classes?.container),children:o(c,{visibleIndex:t,setVisibleIndex:i,...e})})})};export{x as CarouselBlock,x as default};
|
|
2
2
|
//# sourceMappingURL=CarouselBlock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselBlock.js","sources":["../../../../lib/widgets/carouselBlock/CarouselBlock.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { widgetIds } from '../model'\nimport { Carousel, type CarouselProps, ResponsiveContainer, type SlideVariant } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\n\nexport interface CarouselBlockProps<V extends SlideVariant> extends Omit<CarouselProps<V>, 'setVisibleIndex' | 'visibleIndex'> {\n
|
|
1
|
+
{"version":3,"file":"CarouselBlock.js","sources":["../../../../lib/widgets/carouselBlock/CarouselBlock.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { widgetIds } from '../model'\nimport { Carousel, type CarouselProps, ResponsiveContainer, type SlideVariant } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\n\nexport interface CarouselBlockProps<V extends SlideVariant> extends Omit<CarouselProps<V>, 'setVisibleIndex' | 'visibleIndex'> {\n classes?: {\n root?: string\n container?: string\n }\n}\n\nexport const CarouselBlock = <V extends SlideVariant>(props: CarouselBlockProps<V>) => {\n const [visibleIndex, setVisibleIndex] = useState(0)\n\n return (\n <section id={widgetIds.carouselBlock} data-test-id={widgetIds.carouselBlock} className={cn(props.classes?.root)}>\n <ResponsiveContainer className={cn(props.classes?.container)}>\n <Carousel visibleIndex={visibleIndex} setVisibleIndex={setVisibleIndex} {...props} />\n </ResponsiveContainer>\n </section>\n )\n}\n\nexport default CarouselBlock\n"],"names":["CarouselBlock","props","visibleIndex","setVisibleIndex","useState","jsx","widgetIds","cn","ResponsiveContainer","Carousel"],"mappings":"wUAYO,MAAMA,EAAyCC,GAAiC,CACrF,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAS,CAAC,EAElD,OACEC,EAAC,UAAA,CAAQ,GAAIC,EAAU,cAAe,eAAcA,EAAU,cAAe,UAAWC,EAAGN,EAAM,SAAS,IAAI,EAC5G,SAAAI,EAACG,EAAA,CAAoB,UAAWD,EAAGN,EAAM,SAAS,SAAS,EACzD,SAAAI,EAACI,EAAA,CAAS,aAAAP,EAA4B,gBAAAC,EAAmC,GAAGF,CAAA,CAAO,EACrF,EACF,CAEJ"}
|