@anker-in/headless-ui 1.0.26-alpha.1762489449442 → 1.0.26-alpha.1762494680050
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/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.js.map +1 -1
- package/dist/cjs/biz-components/Ksp/index.d.ts +5 -4
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/Ksp/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/dist/cjs/biz-components/MarqueeReview/index.d.ts +2 -2
- package/dist/cjs/biz-components/MarqueeReview/index.js +1 -1
- package/dist/cjs/biz-components/MarqueeReview/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +8 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +11 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.d.ts +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.js +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/index.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.d.ts +17 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js +2 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/types.js.map +7 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +11 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +2 -0
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +7 -0
- package/dist/cjs/biz-components/ThreeDCarousel/index.d.ts +2 -15
- package/dist/cjs/biz-components/ThreeDCarousel/index.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/index.js.map +4 -4
- package/dist/cjs/biz-components/ThreeDCarousel/types.d.ts +24 -0
- package/dist/cjs/biz-components/ThreeDCarousel/types.js +2 -0
- package/dist/cjs/biz-components/ThreeDCarousel/types.js.map +7 -0
- package/dist/cjs/biz-components/index.d.ts +5 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/stories/MediaSceneSwitcher.stories.js +2 -0
- package/dist/cjs/stories/MediaSceneSwitcher.stories.js.map +7 -0
- package/dist/cjs/stories/ThreeDCarousel.stories.js +128 -1
- package/dist/cjs/stories/ThreeDCarousel.stories.js.map +3 -3
- package/dist/cjs/stories/ksp.stories.js +2 -2
- package/dist/cjs/stories/ksp.stories.js.map +2 -2
- package/dist/cjs/types/props.d.ts +4 -1
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/types.d.ts +1 -1
- package/dist/esm/biz-components/Ksp/index.d.ts +5 -4
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/Ksp/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map +2 -2
- package/dist/esm/biz-components/MarqueeReview/index.d.ts +2 -2
- package/dist/esm/biz-components/MarqueeReview/index.js +1 -1
- package/dist/esm/biz-components/MarqueeReview/index.js.map +2 -2
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts +8 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +11 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.d.ts +2 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.js +2 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/index.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.d.ts +17 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.js +1 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/types.js.map +7 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts +11 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +2 -0
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +7 -0
- package/dist/esm/biz-components/ThreeDCarousel/index.d.ts +2 -15
- package/dist/esm/biz-components/ThreeDCarousel/index.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/index.js.map +4 -4
- package/dist/esm/biz-components/ThreeDCarousel/types.d.ts +24 -0
- package/dist/esm/biz-components/ThreeDCarousel/types.js +1 -0
- package/dist/esm/biz-components/ThreeDCarousel/types.js.map +7 -0
- package/dist/esm/biz-components/index.d.ts +5 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +2 -2
- package/dist/esm/stories/MediaSceneSwitcher.stories.js +2 -0
- package/dist/esm/stories/MediaSceneSwitcher.stories.js.map +7 -0
- package/dist/esm/stories/ThreeDCarousel.stories.js +128 -1
- package/dist/esm/stories/ThreeDCarousel.stories.js.map +3 -3
- package/dist/esm/stories/ksp.stories.js +3 -3
- package/dist/esm/stories/ksp.stories.js.map +2 -2
- package/dist/esm/types/props.d.ts +4 -1
- package/package.json +1 -1
- package/tailwind.config.js +5 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MarqueeReview/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Theme } from '../../types/props.js'\n\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n name: string\n /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n avatar:
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDI,IAAAI,EAAA,6BAtDJC,EAAmE,qCACnEC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,OACf,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,QAAC,OAAI,UAAU,uLACb,qBAAC,OAAI,UAAU,uBACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,OAAI,UAAU,kBACZ,aAAI,MAAMA,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,OAC3C,OAACC,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,KACA,QAAC,UAAO,KAAK,QAAQ,UAAU,sDAC7B,oBAAC,eAAY,IAAKG,EAAK,
|
|
4
|
+
"sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n name: string\n /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n avatar: Media\n /** \u8BC4\u8BBA\u5185\u5BB9 */\n comment: string\n /** \u8BC4\u5206(1-5\u661F) */\n rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n /** \u4E3B\u6807\u9898 */\n title: string\n /** \u526F\u6807\u9898 */\n subtitle: string\n /** \u8BC4\u8BBA\u5217\u8868 */\n items: ReviewItem[]\n /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n /** \u8BC4\u8BBA\u6570\u636E */\n data: MarqueeReviewData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n array.slice(index * size, (index + 1) * size)\n )\n}\n\nconst StarIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n)\n\ninterface CardProps {\n item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n return (\n <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n <div className=\"flex justify-between\">\n <div className=\"flex flex-col\">\n <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n <div className=\"mt-2 flex gap-1\">\n {new Array(item.rating || 5).fill(0).map((_, index) => (\n <StarIcon key={index} />\n ))}\n </div>\n </div>\n <Avatar size=\"small\" className=\" h-[40px] w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n <AvatarImage src={item.avatar?.url} alt={item.avatar?.alt || ''} />\n <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n </Avatar>\n </div>\n <div>\n <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n </div>\n </div>\n )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n * data={{\n * title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n * subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n * items: [\n * {\n * name: \"\u5F20\u4E09\",\n * avatar: \"/avatar1.jpg\",\n * comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n * rating: 5\n * }\n * ]\n * }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n const { title, subtitle, items = [], theme = 'light' } = data\n\n const chunkItems = _chunk(\n items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n COUNT\n )\n .slice(0, 3)\n .map(item => [...item, ...item])\n\n return (\n <section\n className={cn('flex flex-col items-center justify-center py-3 text-info-primary', className, {\n 'aiui-dark': theme === 'dark',\n })}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n <Text\n size={2}\n html={subtitle}\n className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n <div\n className={cn(\n 'mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n )}\n >\n {chunkItems.map((items, index) => (\n <div\n key={index}\n className={cn('animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit', {\n 'top-10': index === 0 || index === 2,\n 'hidden desktop:flex': index === 1,\n 'hidden tablet:flex': index === 2,\n })}\n >\n {items.map((item, innerIndex) => (\n <Card key={innerIndex} item={item} />\n ))}\n </div>\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(MarqueeReview)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDI,IAAAI,EAAA,6BAtDJC,EAAmE,qCACnEC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,OACf,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,QAAC,OAAI,UAAU,uLACb,qBAAC,OAAI,UAAU,uBACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,OAAI,UAAU,kBACZ,aAAI,MAAMA,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,OAC3C,OAACC,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,KACA,QAAC,UAAO,KAAK,QAAQ,UAAU,sDAC7B,oBAAC,eAAY,IAAKG,EAAK,QAAQ,IAAK,IAAKA,EAAK,QAAQ,KAAO,GAAI,KACjE,OAAC,kBAAiB,UAAAA,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,KACA,OAAC,OACC,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIA,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,SACE,QAAC,WACC,aAAW,MAAG,mEAAoEG,EAAW,CAC3F,YAAaI,IAAU,MACzB,CAAC,EAED,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMH,EAAO,UAAU,sCAAsC,KACvF,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,8KACZ,KACA,OAAC,OACC,aAAW,MACT,2HACF,EAEC,SAAAG,EAAW,IAAI,CAACF,EAAOT,OACtB,OAAC,OAEC,aAAW,MAAG,mEAAoE,CAChF,SAAUA,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,OAChB,OAACV,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOZ,KAAQ,cAAWgB,CAAa",
|
|
6
6
|
"names": ["MarqueeReview_exports", "__export", "MarqueeReview_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "FIX_ITEMS_LENGTH", "COUNT", "_chunk", "array", "size", "_", "index", "StarIcon", "Card", "item", "MarqueeReview", "data", "className", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { MediaSceneSwitcherProps } from './types.js';
|
|
3
|
+
import 'swiper/css';
|
|
4
|
+
declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
5
|
+
className?: string | undefined;
|
|
6
|
+
data?: Record<string, any> | undefined;
|
|
7
|
+
}, "ref"> & import("react").RefAttributes<any>>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";"use client";var y=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var B=(t,i)=>{for(var a in i)y(t,a,{get:i[a],enumerable:!0})},V=(t,i,a,c)=>{if(i&&typeof i=="object"||typeof i=="function")for(let d of j(i))!H.call(t,d)&&d!==a&&y(t,d,{get:()=>i[d],enumerable:!(c=R(i,d))||c.enumerable});return t};var _=t=>V(y({},"__esModule",{value:!0}),t);var O={};B(O,{default:()=>$});module.exports=_(O);var e=require("react/jsx-runtime"),l=require("react"),S=require("react-responsive"),u=require("../../helpers/utils.js"),A=require("../../shared/Styles.js"),r=require("../../components/index.js"),W=require("../SwiperBox/index.js"),h=require("../../hooks/useExposure.js"),f=require("swiper/react"),P=require("swiper/modules"),Y=require("swiper/css");const U="media",k="media_scene_switcher",v=3e3,q=({data:t,configuration:i})=>{const a=(0,l.useRef)(null),c=i?.isActive||!1;return(0,h.useExposure)(a,{componentType:U,componentName:k,componentTitle:t?.title,position:(i?.index??0)+1}),(0,e.jsxs)("div",{ref:a,className:(0,u.cn)("media-scene-switcher-item cursor-pointer overflow-hidden rounded-[16px] transition-colors","text-[#B6B6BA]",{"bg-[#1D1D1F] text-white":c}),onClick:()=>i?.onItemClick?.(i?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content flex items-center justify-between gap-[24px] laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px]",children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:"media-scene-switcher-item-badge rounded-[200px] border-[1.6px] px-[18px] py-[7px]",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":c}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:c?`progress-bar ${v}ms ease-out`:"none"}})]})},F=({data:t,configuration:i})=>{const a=(0,l.useRef)(null),c=i?.isActive||!1,d=(0,S.useMediaQuery)({query:"(max-width: 768px)"});(0,h.useExposure)(a,{componentType:U,componentName:k,componentTitle:t?.title,position:(i?.index??0)+1});const m=d&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,p=d&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,o=p||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:a,className:"media-scene-switcher-mobile-item flex h-[360px] w-[296px] flex-col overflow-hidden rounded-[16px]",children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:m?(0,e.jsx)("video",{src:m,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:o,className:"size-full object-cover"}):p?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:p,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white",children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-badge flex-shrink-0 rounded-[200px] border-[1.6px] px-[12px] py-[5px]",children:(0,e.jsx)(r.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":c}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:c?`progress-bar ${v}ms ease-out`:"none"}})]})},T=(0,l.forwardRef)(({className:t="",data:i,id:a,style:c},d)=>{const{title:m,subtitle:p,items:o=[]}=i||{},[w,b]=(0,l.useState)(0),[D,L]=(0,l.useState)(0),g=(0,l.useRef)(null),x=(0,l.useRef)(0),M=(0,S.useMediaQuery)({query:"(max-width: 1023px)"});(0,l.useImperativeHandle)(d,()=>g.current),(0,h.useExposure)(g,{componentType:U,componentName:k,componentTitle:m}),(0,l.useEffect)(()=>{if(!(M||o.length===0))return x.current=window.setInterval(()=>{b(s=>(s+1)%o.length)},v),()=>{x.current&&window.clearInterval(x.current)}},[M,o.length]);const C=s=>{b(s),x.current&&window.clearInterval(x.current),x.current=window.setInterval(()=>{b(n=>(n+1)%o.length)},v)},N=o[w],Q=N?.videoUrl?.url,J=N?.imageUrl?.url||N?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:`
|
|
2
|
+
@keyframes progress-bar {
|
|
3
|
+
from {
|
|
4
|
+
transform: translate3d(-100%, -2px, 0);
|
|
5
|
+
}
|
|
6
|
+
to {
|
|
7
|
+
transform: translate3d(0, -2px, 0);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
`}),(0,e.jsxs)("section",{id:a,ref:g,className:(0,u.cn)("media-scene-switcher w-full overflow-hidden text-white",t),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop hidden w-full items-stretch gap-[40px] overflow-hidden laptop:flex",children:[(0,e.jsx)("div",{className:"media-scene-switcher-preview relative aspect-[824/640] max-w-[824px] flex-shrink-0 overflow-hidden rounded-[16px] laptop:flex-1",children:o.map((s,n)=>{const z=s?.videoUrl?.url,I=s?.imageUrl?.url,E=I||s?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-media absolute inset-0 hidden size-full overflow-hidden rounded-[16px]",{"inline-block":n===w}),children:z?(0,e.jsx)("video",{src:z,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:E,className:"size-full object-cover"}):I?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:s?.title||""}):null},s.id||n)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar flex flex-shrink-0 flex-col justify-between laptop:flex-1",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[m&&(0,e.jsx)(r.Heading,{as:"h3",html:m,size:4,className:"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]"}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle relative -top-2 text-[14px] text-white tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:o.map((s,n)=>(0,e.jsx)(q,{data:s,configuration:{index:n,isActive:n===w,onItemClick:C}},s.id||n))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile flex flex-col overflow-visible laptop:hidden",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[m&&(0,e.jsx)(r.Heading,{as:"h2",html:m,size:2,className:"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]"}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle text-[14px] text-white"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(f.Swiper,{onSlideChange:s=>L(s.realIndex),initialSlide:0,modules:[P.Autoplay],loop:o.length>1,autoplay:o.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:o.map((s,n)=>(0,e.jsx)(f.SwiperSlide,{className:"!h-auto !w-[296px]",children:(0,e.jsx)(F,{data:s,configuration:{index:n,isActive:n===D}})},s.id||n))})})]})]})]})});T.displayName="MediaSceneSwitcher";var $=(0,A.withLayout)(T);
|
|
11
|
+
//# sourceMappingURL=MediaSceneSwitcher.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n}\n\nconst DesktopItem = ({ data, configuration }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item cursor-pointer overflow-hidden rounded-[16px] transition-colors',\n 'text-[#B6B6BA]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content flex items-center justify-between gap-[24px] laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-item-badge rounded-[200px] border-[1.6px] px-[18px] py-[7px]\">\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className=\"media-scene-switcher-mobile-item flex h-[360px] w-[296px] flex-col overflow-hidden rounded-[16px]\"\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div className=\"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white\">\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-mobile-badge flex-shrink-0 rounded-[200px] border-[1.6px] px-[12px] py-[5px]\">\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n ({ className = '', data, id, style }, ref) => {\n const { title, subtitle, items = [] } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, -2px, 0);\n }\n to {\n transform: translate3d(0, -2px, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn('media-scene-switcher w-full overflow-hidden text-white', className)}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop hidden w-full items-stretch gap-[40px] overflow-hidden laptop:flex\">\n <div className=\"media-scene-switcher-preview relative aspect-[824/640] max-w-[824px] flex-shrink-0 overflow-hidden rounded-[16px] laptop:flex-1\">\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media absolute inset-0 hidden size-full overflow-hidden rounded-[16px]',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar flex flex-shrink-0 flex-col justify-between laptop:flex-1\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle relative -top-2 text-[14px] text-white tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile flex flex-col overflow-visible laptop:hidden\">\n <div className=\"media-scene-switcher-mobile-header\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaSceneSwitcher_exports", "__export", "MediaSceneSwitcher_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_utils", "import_Styles", "import_components", "import_SwiperBox", "import_useExposure", "import_modules", "import_css", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "style", "title", "subtitle", "items", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var l=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(o,r)=>{for(var e in r)m(o,e,{get:r[e],enumerable:!0})},t=(o,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of b(r))!g.call(o,f)&&f!==e&&m(o,f,{get:()=>r[f],enumerable:!(a=u(r,f))||a.enumerable});return o},x=(o,r,e)=>(t(o,r,"default"),e&&t(e,r,"default")),i=(o,r,e)=>(e=o!=null?l(c(o)):{},t(r||!o||!o.__esModule?m(e,"default",{value:o,enumerable:!0}):e,o)),j=o=>t(m({},"__esModule",{value:!0}),o);var p={};h(p,{default:()=>d.default});module.exports=j(p);var d=i(require("./MediaSceneSwitcher.js"));x(p,require("./types.js"),module.exports);
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { default } from './MediaSceneSwitcher.js'\nexport * from './types.js'\n"],
|
|
5
|
+
"mappings": "wmBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB,sCACxBC,EAAAJ,EAAc,sBADd",
|
|
6
|
+
"names": ["MediaSceneSwitcher_exports", "__export", "__toCommonJS", "import_MediaSceneSwitcher", "__reExport"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ComponentCommonProps, Media } from '../../types/props.js';
|
|
2
|
+
export interface MediaSceneSwitcherItem {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
tag?: string;
|
|
6
|
+
videoUrl?: Media | null;
|
|
7
|
+
imageUrl?: Media | null;
|
|
8
|
+
mobVideoUrl?: Media | null;
|
|
9
|
+
mobImageUrl?: Media | null;
|
|
10
|
+
}
|
|
11
|
+
export interface MediaSceneSwitcherProps extends ComponentCommonProps {
|
|
12
|
+
data: {
|
|
13
|
+
title?: string;
|
|
14
|
+
subtitle?: string;
|
|
15
|
+
items?: MediaSceneSwitcherItem[];
|
|
16
|
+
};
|
|
17
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var s=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of l(e))!m.call(t,i)&&i!==o&&n(t,i,{get:()=>e[i],enumerable:!(r=a(e,i))||r.enumerable});return t};var d=t=>s(n({},"__esModule",{value:!0}),t);var p={};module.exports=d(p);
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/types.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ComponentCommonProps, Media } from '../../types/props.js'\n\nexport interface MediaSceneSwitcherItem {\n id: string\n title: string\n tag?: string\n videoUrl?: Media | null\n imageUrl?: Media | null\n mobVideoUrl?: Media | null\n mobImageUrl?: Media | null\n}\n\nexport interface MediaSceneSwitcherProps extends ComponentCommonProps {\n data: {\n title?: string\n subtitle?: string\n items?: MediaSceneSwitcherItem[]\n }\n}\n"],
|
|
5
|
+
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
|
+
"names": ["types_exports", "__toCommonJS"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ThreeDCarouselProps } from './types.js';
|
|
3
|
+
import 'swiper/css';
|
|
4
|
+
import 'swiper/css/navigation';
|
|
5
|
+
import 'swiper/css/pagination';
|
|
6
|
+
import 'swiper/css/effect-coverflow';
|
|
7
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ThreeDCarouselProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
|
|
8
|
+
className?: string | undefined;
|
|
9
|
+
data?: Record<string, any> | undefined;
|
|
10
|
+
}, "ref"> & React.RefAttributes<any>>;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";"use client";var g=Object.create;var n=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var T=(o,r)=>{for(var l in r)n(o,l,{get:r[l],enumerable:!0})},w=(o,r,l,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of N(r))!y.call(o,a)&&a!==l&&n(o,a,{get:()=>r[a],enumerable:!(c=k(r,a))||c.enumerable});return o};var C=(o,r,l)=>(l=o!=null?g(S(o)):{},w(r||!o||!o.__esModule?n(l,"default",{value:o,enumerable:!0}):l,o)),L=o=>w(n({},"__esModule",{value:!0}),o);var j={};T(j,{default:()=>R});module.exports=L(j);var e=require("react/jsx-runtime"),i=C(require("react")),s=require("../../components/index.js"),m=require("../../helpers/utils.js"),v=require("../../shared/Styles.js"),b=require("../../hooks/useExposure.js"),d=require("swiper/react"),p=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),B=require("swiper/css/pagination"),I=require("swiper/css/effect-coverflow");const E="carousel",D="three_d_carousel",P=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),z=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=i.default.forwardRef(({data:o,className:r},l)=>{const{title:c,items:a=[]}=o,u=(0,i.useRef)(null),h=(0,i.useRef)(null);return(0,b.useExposure)(h,{componentType:E,componentName:D,componentTitle:c}),(0,i.useImperativeHandle)(l,()=>h.current),(0,e.jsxs)("section",{ref:h,"data-ui-component-id":"ThreeDCarousel",className:(0,m.cn)("three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden",r),children:[(0,e.jsx)(s.Heading,{as:"h1",size:4,html:c,className:"three-d-carousel__title text-left laptop:text-center"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block",children:[(0,e.jsx)(d.Swiper,{onSwiper:t=>u.current=t,centeredSlides:!0,initialSlide:1,loop:!0,slidesPerView:"auto",loopAdditionalSlides:1,spaceBetween:0,grabCursor:!0,modules:[p.EffectCoverflow,p.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper relative aspect-[1386/502] overflow-visible rounded-[16px]",effect:"coverflow",coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,modifier:1,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,modifier:1,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,modifier:1,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,depth:300,modifier:1,slideShadows:!0}}},children:a.map((t,f)=>(0,e.jsx)(d.SwiperSlide,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden",children:({isActive:_})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,m.cn)("three-d-carousel__image mx-auto overflow-hidden rounded-xl shadow-lg"),style:{filter:_?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:"three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[(0,e.jsx)(s.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(s.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px] text-white"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:(0,e.jsx)("button",{className:"three-d-carousel__image-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]})},f))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>u.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(P,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>u.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(z,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden",children:(0,e.jsx)(d.Swiper,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:a.map((t,f)=>(0,e.jsxs)(d.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(s.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile mx-auto overflow-hidden rounded-xl shadow-lg"}),(0,e.jsxs)("div",{className:"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[(0,e.jsx)(s.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(s.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)("button",{className:"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]},f))})})]})});x.displayName="ThreeDCarousel";var R=(0,v.withLayout)(x);
|
|
2
|
+
//# sourceMappingURL=ThreeDCarousel.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title text-left laptop:text-center\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={1}\n loop\n slidesPerView={'auto'}\n loopAdditionalSlides={1}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper relative aspect-[1386/502] overflow-visible rounded-[16px]\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch: 427,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: 427,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: 350,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: 334,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: 230,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: 286,\n depth: 300,\n modifier: 1,\n slideShadows: true,\n },\n },\n }}\n >\n {items.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden\"\n >\n {({ isActive }) => (\n <>\n <Picture\n source={item.imageUrl?.url || ''}\n alt={item.imageUrl?.alt || item.title}\n className={cn('three-d-carousel__image mx-auto overflow-hidden rounded-xl shadow-lg')}\n style={{\n filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n }}\n />\n <div className=\"three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1\">\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-description text-[14px] text-white\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n <button className=\"three-d-carousel__image-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold\">\n {item.buttonText}\n </button>\n </a>\n )}\n </div>\n </>\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]\">\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n\n {/* Mobile carousel */}\n <div className=\"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden\">\n <Swiper\n loop={true}\n slidesPerView={'auto'}\n spaceBetween={12}\n grabCursor\n className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n >\n <Picture\n source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n alt={item.mobImageUrl?.alt || item.title}\n className=\"three-d-carousel__image-mobile mx-auto overflow-hidden rounded-xl shadow-lg\"\n />\n <div className=\"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1\">\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n <button className=\"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold\">\n {item.buttonText}\n </button>\n </a>\n )}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["ThreeDCarousel_exports", "__export", "ThreeDCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_modules", "import_css", "import_navigation", "import_pagination", "import_effect_coverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "React", "data", "className", "ref", "title", "items", "swiperRef", "boxRef", "swiper", "item", "index", "isActive"]
|
|
7
|
+
}
|
|
@@ -1,15 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
mobImageUrl?: string;
|
|
4
|
-
title?: string;
|
|
5
|
-
description?: string;
|
|
6
|
-
}
|
|
7
|
-
interface ThreeDCarouselProps {
|
|
8
|
-
data: {
|
|
9
|
-
title?: string;
|
|
10
|
-
items: CarouselItem[];
|
|
11
|
-
};
|
|
12
|
-
className?: string;
|
|
13
|
-
}
|
|
14
|
-
export default function ThreeDCarousel({ data, className }: ThreeDCarouselProps): import("react/jsx-runtime").JSX.Element | null;
|
|
15
|
-
export {};
|
|
1
|
+
export { default } from './ThreeDCarousel.js';
|
|
2
|
+
export type { ThreeDCarouselProps, ThreeDCarouselItem } from './types.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var l=Object.create;var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(e,r)=>{for(var o in r)p(e,o,{get:r[o],enumerable:!0})},a=(e,r,o,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of u(r))!x.call(e,t)&&t!==o&&p(e,t,{get:()=>r[t],enumerable:!(s=m(r,t))||s.enumerable});return e};var C=(e,r,o)=>(o=e!=null?l(h(e)):{},a(r||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>a(p({},"__esModule",{value:!0}),e);var T={};y(T,{default:()=>f.default});module.exports=D(T);var f=C(require("./ThreeDCarousel.js"));
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/biz-components/ThreeDCarousel/index.
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Heading, Picture } from '../../components/index.js'\nimport { useRef, useState, useEffect, useCallback } from 'react'\nimport { cn } from '../../helpers/index.js'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\ninterface CarouselItem {\n imageUrl: string\n mobImageUrl?: string\n title?: string\n description?: string\n}\n\ninterface ThreeDCarouselProps {\n data: {\n title?: string\n items: CarouselItem[]\n }\n className?: string\n}\n\nexport default function ThreeDCarousel({ data, className }: ThreeDCarouselProps) {\n const containerRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const mobileTrackRef = useRef<HTMLDivElement>(null)\n const { title, items = [] } = data\n\n const [activeIndex, setActiveIndex] = useState(1)\n const [isDragging, setIsDragging] = useState(false)\n const [startX, setStartX] = useState(0)\n const [scrollLeft, setScrollLeft] = useState(0)\n\n // \u521B\u5EFA\u5FAA\u73AF\u6570\u7EC4\uFF08\u5728\u5F00\u5934\u548C\u7ED3\u5C3E\u6DFB\u52A0\u514B\u9686\uFF09\n const extendedItems = items.length > 0 ? [items[items.length - 1], ...items, items[0]] : []\n\n // \u5904\u7406\u684C\u9762\u7AEF\u5207\u6362\n const handlePrev = useCallback(() => {\n setActiveIndex(prev => {\n const newIndex = prev - 1\n if (newIndex < 0) {\n return extendedItems.length - 2\n }\n return newIndex\n })\n }, [extendedItems.length])\n\n const handleNext = useCallback(() => {\n setActiveIndex(prev => {\n const newIndex = prev + 1\n if (newIndex >= extendedItems.length - 1) {\n return 1\n }\n return newIndex\n })\n }, [extendedItems.length])\n\n // \u5904\u7406\u684C\u9762\u7AEF\u62D6\u62FD\n const handleMouseDown = (e: React.MouseEvent) => {\n setIsDragging(true)\n setStartX(e.pageX)\n setScrollLeft(activeIndex)\n }\n\n const handleMouseMove = useCallback(\n (e: MouseEvent) => {\n if (!isDragging) return\n e.preventDefault()\n const x = e.pageX\n const walk = (startX - x) / 100 // \u8C03\u6574\u7075\u654F\u5EA6\n const newIndex = Math.round(scrollLeft + walk)\n\n if (newIndex >= 0 && newIndex < extendedItems.length) {\n setActiveIndex(newIndex)\n }\n },\n [isDragging, startX, scrollLeft, extendedItems.length]\n )\n\n const handleMouseUp = useCallback(() => {\n setIsDragging(false)\n }, [])\n\n // \u5904\u7406\u79FB\u52A8\u7AEF\u6EDA\u52A8\uFF08\u7528\u4E8E\u672A\u6765\u53EF\u80FD\u7684\u6EDA\u52A8\u6307\u793A\u5668\uFF09\n const handleMobileScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {\n // \u53EF\u4EE5\u5728\u8FD9\u91CC\u6DFB\u52A0\u6EDA\u52A8\u4F4D\u7F6E\u8FFD\u8E2A\u903B\u8F91\n }, [])\n\n // \u952E\u76D8\u4E8B\u4EF6\n const handleKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'ArrowLeft') {\n handlePrev()\n } else if (e.key === 'ArrowRight') {\n handleNext()\n }\n },\n [handlePrev, handleNext]\n )\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener('mousemove', handleMouseMove)\n document.addEventListener('mouseup', handleMouseUp)\n return () => {\n document.removeEventListener('mousemove', handleMouseMove)\n document.removeEventListener('mouseup', handleMouseUp)\n }\n }\n }, [isDragging, handleMouseMove, handleMouseUp])\n\n useEffect(() => {\n window.addEventListener('keydown', handleKeyDown)\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n }\n }, [handleKeyDown])\n\n // \u8BA1\u7B97\u6BCF\u4E2A\u5361\u7247\u7684\u53D8\u6362\n const getCardStyle = (index: number) => {\n const offset = index - activeIndex\n const absOffset = Math.abs(offset)\n\n // \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u8C03\u6574\u53C2\u6570\n const isLargeDesktop = typeof window !== 'undefined' && window.innerWidth >= 1921\n const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 1441\n const isSmallDesktop = typeof window !== 'undefined' && window.innerWidth >= 1025\n\n let stretch = 427\n if (!isLargeDesktop && isDesktop) stretch = 334\n else if (!isDesktop && isSmallDesktop) stretch = 230\n else if (!isSmallDesktop) stretch = 286\n\n // \u8BA1\u7B97\u4F4D\u7F6E\n const translateX = offset * stretch\n const translateZ = absOffset === 0 ? 0 : -300 * absOffset\n const scale = absOffset === 0 ? 1 : 0.85 - absOffset * 0.1\n const opacity = absOffset === 0 ? 1 : 0.6\n const brightness = absOffset === 0 ? 100 : 50\n\n return {\n transform: `translateX(${translateX}px) translateZ(${translateZ}px) scale(${Math.max(scale, 0.5)})`,\n opacity: Math.max(opacity, 0.3),\n filter: `brightness(${brightness}%) contrast(120%)`,\n transition: isDragging ? 'none' : 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',\n zIndex: 100 - absOffset,\n }\n }\n\n if (!items || items.length === 0) {\n return null\n }\n\n return (\n <section className={cn('laptop:overflow-hidden w-full overflow-visible text-white', className)} ref={containerRef}>\n {title && <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center text-left\" />}\n\n {/* \u684C\u9762\u7AEF 3D \u8F6E\u64AD */}\n <div className=\"laptop:block relative mx-auto mt-[24px] hidden w-full\">\n <div className=\"relative mx-auto h-[480px] w-full overflow-visible\" style={{ perspective: '1200px' }}>\n <div\n ref={trackRef}\n className={cn(\n 'absolute left-1/2 top-1/2 h-full w-[824px] -translate-x-1/2 -translate-y-1/2',\n isDragging ? 'cursor-grabbing' : 'cursor-grab'\n )}\n style={{ transformStyle: 'preserve-3d' }}\n onMouseDown={handleMouseDown}\n >\n {extendedItems.map((item, index) => (\n <div\n key={index}\n className=\"absolute left-1/2 top-0 h-full w-[824px] -translate-x-1/2 overflow-hidden rounded-[16px]\"\n style={getCardStyle(index)}\n onClick={() => index !== activeIndex && setActiveIndex(index)}\n >\n <div className=\"relative size-full\">\n <Picture source={item.imageUrl} alt={item.title || ''} className=\"size-full object-cover\" />\n <div className=\"absolute inset-0 bg-black/60\" />\n {item.title && (\n <div className=\"absolute inset-x-0 bottom-0 p-8\">\n <h3 className=\"font-['Mont_For_Anker:SemiBold'] text-[32px] leading-[1.2] tracking-[-1.28px] text-white\">\n {item.title}\n </h3>\n {item.description && (\n <p className=\"mt-1 font-['Mont_For_Anker:SemiBold'] text-[18px] leading-[1.4] tracking-[-0.36px] text-white\">\n {item.description}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n ))}\n </div>\n\n {/* \u5BFC\u822A\u6309\u94AE */}\n <div className=\"laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] pointer-events-none absolute left-1/2 top-1/2 z-[200] flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n <button\n onClick={handlePrev}\n className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n onClick={handleNext}\n className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n </div>\n\n {/* \u79FB\u52A8\u7AEF\u6A2A\u5411\u6EDA\u52A8 */}\n <div className=\"laptop:hidden mt-[24px] block w-full\">\n <div\n ref={mobileTrackRef}\n className=\"flex gap-3 overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n onScroll={handleMobileScroll}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className=\"relative h-[360px] w-[296px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg\"\n >\n <Picture\n source={item.mobImageUrl || item.imageUrl}\n alt={item.title || ''}\n className=\"size-full object-cover\"\n />\n {item.title && (\n <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-6\">\n <p className=\"text-[24px] leading-[1.2] tracking-[-0.96px] text-white\">{item.title}</p>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["ThreeDCarousel_exports", "__export", "
|
|
3
|
+
"sources": ["../../../../src/biz-components/ThreeDCarousel/index.ts"],
|
|
4
|
+
"sourcesContent": ["export { default } from './ThreeDCarousel.js'\nexport type { ThreeDCarouselProps, ThreeDCarouselItem } from './types.js'\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
|
|
6
|
+
"names": ["ThreeDCarousel_exports", "__export", "__toCommonJS", "import_ThreeDCarousel"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { Media } from '../../types/props';
|
|
2
|
+
export interface ThreeDCarouselItem {
|
|
3
|
+
/** 桌面端图片 */
|
|
4
|
+
imageUrl: Media | null;
|
|
5
|
+
/** 移动端图片 */
|
|
6
|
+
mobImageUrl: Media | null;
|
|
7
|
+
/** 标题 */
|
|
8
|
+
title: string;
|
|
9
|
+
/** 描述 */
|
|
10
|
+
description: string;
|
|
11
|
+
/** 按钮文本 */
|
|
12
|
+
buttonText?: string;
|
|
13
|
+
/** 按钮链接 */
|
|
14
|
+
buttonLink?: string | null;
|
|
15
|
+
}
|
|
16
|
+
export interface ThreeDCarouselProps {
|
|
17
|
+
data: {
|
|
18
|
+
title: string;
|
|
19
|
+
/** 轮播项列表 */
|
|
20
|
+
items: ThreeDCarouselItem[];
|
|
21
|
+
};
|
|
22
|
+
/** 自定义类名 */
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var s=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var m=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of l(e))!o.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=a(e,r))||i.enumerable});return t};var p=t=>m(s({},"__esModule",{value:!0}),t);var g={};module.exports=p(g);
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/biz-components/ThreeDCarousel/types.ts"],
|
|
4
|
+
"sourcesContent": ["import type { Media } from '../../types/props'\n\nexport interface ThreeDCarouselItem {\n /** \u684C\u9762\u7AEF\u56FE\u7247 */\n imageUrl: Media | null\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n mobImageUrl: Media | null\n /** \u6807\u9898 */\n title: string\n /** \u63CF\u8FF0 */\n description: string\n /** \u6309\u94AE\u6587\u672C */\n buttonText?: string\n /** \u6309\u94AE\u94FE\u63A5 */\n buttonLink?: string | null\n}\n\nexport interface ThreeDCarouselProps {\n data: {\n title: string\n /** \u8F6E\u64AD\u9879\u5217\u8868 */\n items: ThreeDCarouselItem[]\n }\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n"],
|
|
5
|
+
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
|
+
"names": ["types_exports", "__toCommonJS"]
|
|
7
|
+
}
|
|
@@ -80,6 +80,10 @@ export { default as ProductHero } from './ProductHero/index.js';
|
|
|
80
80
|
export type { ProductHeroProps } from './ProductHero/index.js';
|
|
81
81
|
export { default as SpecsComparison } from './SpecsComparison/index.js';
|
|
82
82
|
export type { SpecsComparisonProps, SpecsComparisonMenuItem, SpecsComparisonLeftMenuItem, } from './SpecsComparison/index.js';
|
|
83
|
+
export { default as MediaSceneSwitcher } from './MediaSceneSwitcher/index.js';
|
|
84
|
+
export type { MediaSceneSwitcherProps } from './MediaSceneSwitcher/types.js';
|
|
85
|
+
export { default as ThreeDCarousel } from './ThreeDCarousel/index.js';
|
|
86
|
+
export type { ThreeDCarouselProps } from './ThreeDCarousel/index.js';
|
|
83
87
|
export declare const PAYLOAD_COMPONENT_MAP: {
|
|
84
88
|
'ipc-accordioncards': string;
|
|
85
89
|
'ipc-aplusdesc': string;
|
|
@@ -115,4 +119,5 @@ export declare const PAYLOAD_COMPONENT_MAP: {
|
|
|
115
119
|
'ipc-text-marquee': string;
|
|
116
120
|
'ipc-title': string;
|
|
117
121
|
'ipc-whychoose': string;
|
|
122
|
+
ksp: string;
|
|
118
123
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Te=Object.create;var s=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,Fe=Object.prototype.hasOwnProperty;var qe=(r,a)=>{for(var t in a)s(r,t,{get:a[t],enumerable:!0})},u=(r,a,t,f)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of Ie(a))!Fe.call(r,p)&&p!==t&&s(r,p,{get:()=>a[p],enumerable:!(f=be(a,p))||f.enumerable});return r};var e=(r,a,t)=>(t=r!=null?Te(Be(r)):{},u(a||!r||!r.__esModule?s(t,"default",{value:r,enumerable:!0}):t,r)),Ge=r=>u(s({},"__esModule",{value:!0}),r);var je={};qe(je,{AccordionCards:()=>g.default,AiuiProvider:()=>A.default,AplusDesc:()=>pe.default,BenefitsTab:()=>re.default,BizProductProvider:()=>O.default,BrandEquity:()=>d.default,Category:()=>P.default,CreativeModule:()=>W.default,DownLoad:()=>fe.default,Evaluate:()=>h.default,Faq:()=>F.default,FeatureCards:()=>me.default,FeatureShowcase:()=>ye.default,Features:()=>oe.default,FootCharger:()=>ue.default,FooterNavigation:()=>j.default,GiftBox:()=>se.default,Graphic:()=>M.default,GraphicAttractionBlock:()=>G.default,GraphicMore:()=>te.default,GraphicOverlay:()=>E.default,HeaderNavigation:()=>v.default,HeroBanner:()=>y.default,IPC_SEARCH_PAGE:()=>i.IPC_SEARCH_PAGE,ImageTextFeature:()=>le.default,ImageWithText:()=>xe.default,Ksp:()=>ce.default,Listing:()=>K.default,Marquee:()=>b.default,MarqueeImageContent:()=>o.MarqueeImageContent,MarqueeItem:()=>o.MarqueeItem,MarqueeReview:()=>I.default,MarqueeTextContent:()=>o.MarqueeTextContent,MediaPlayerBase:()=>S.default,MediaPlayerMulti:()=>T.default,MediaPlayerSticky:()=>C.default,MediaSceneSwitcher:()=>Se.default,MemberEquity:()=>c.default,MultiLayoutGraphicBlock:()=>q.default,PAYLOAD_COMPONENT_MAP:()=>ve,PaidShipping:()=>ae.default,ProductActions:()=>N.default,ProductBenefitsTabs:()=>V.default,ProductBundle:()=>U.default,ProductCard:()=>_.default,ProductCompare:()=>de.default,ProductDetail:()=>$.default,ProductExchangePurchase:()=>J.default,ProductFreeGift:()=>Y.default,ProductGallery:()=>Z.default,ProductGridBox:()=>X.default,ProductHero:()=>ge.default,ProductHighlight:()=>z.default,ProductOptions:()=>Q.default,ProductSummary:()=>ee.default,PurchaseBar:()=>R.default,SearchPage:()=>w.default,SearchPageTabType:()=>i.SearchPageTabType,SelectStore:()=>ie.default,ShelfDisplay:()=>n.default,Slogan:()=>l.default,Spacer:()=>x.default,Specs:()=>L.default,SpecsComparison:()=>Me.default,TabGroup:()=>H.default,TabWithImage:()=>Pe.default,Tabs:()=>D.default,TabsWithMedia:()=>he.default,ThreeDCarousel:()=>Ce.default,Title:()=>m.default,VideoFeature:()=>ne.default,WhyChoose:()=>B.default,withLayout:()=>k.withLayout});module.exports=Ge(je);var d=e(require("./BrandEquity/index.js")),c=e(require("./MemberEquity/index.js")),l=e(require("./Slogan/index.js")),m=e(require("./Title/index.js")),x=e(require("./Spacer/index.js")),n=e(require("./ShelfDisplay/index.js")),h=e(require("./Evaluate/index.js")),P=e(require("./Category/index.js")),y=e(require("./HeroBanner/index.js")),g=e(require("./AccordionCards/index.js")),M=e(require("./Graphic/index.js")),S=e(require("./MediaPlayerBase/index.js")),C=e(require("./MediaPlayerSticky/index.js")),T=e(require("./MediaPlayerMulti/index.js")),b=e(require("./Marquee/index.js")),I=e(require("./MarqueeReview/index.js")),B=e(require("./WhyChoose/index.js")),F=e(require("./Faq/index.js")),o=require("./Marquee/index.js"),q=e(require("./MultiLayoutGraphicBlock/index.js")),G=e(require("./GraphicAttractionBlock/index.js")),v=e(require("./HeaderNavigation/index.js")),j=e(require("./FooterNavigation/index.js")),w=e(require("./SearchPage/index.js")),i=require("./SearchPage/types.js"),k=require("../shared/Styles.js"),A=e(require("./AiuiProvider/index.js")),D=e(require("./Tabs/index.js")),W=e(require("./CreativeModule/index.js")),E=e(require("./GraphicOverlay/index.js")),L=e(require("./Specs/index.js")),H=e(require("./TabsGroup/index.js")),K=e(require("./Listing/index.js")),O=e(require("./Listing/BizProductProvider.js")),R=e(require("./Listing/components/PurchaseBar/index.js")),N=e(require("./Listing/components/PurchaseBar/ProductActions/index.js")),_=e(require("./Listing/components/ProductCard/index.js")),V=e(require("./Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js")),z=e(require("./Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js")),Y=e(require("./Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js")),J=e(require("./Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js")),Q=e(require("./Listing/components/ProductCard/ProductDetail/ProductOptions/index.js")),U=e(require("./Listing/components/ProductCard/ProductDetail/ProductBundle/index.js")),X=e(require("./Listing/components/ProductCard/ProductGridBox.js")),Z=e(require("./Listing/components/ProductCard/ProductGallery/index.js")),$=e(require("./Listing/components/ProductCard/ProductDetail/index.js")),ee=e(require("./Listing/components/ProductCard/ProductSummary/index.js")),re=e(require("./Listing/components/ProductCard/ProductDetail/BenefitsTab")),ae=e(require("./Listing/components/PaidShipping/index.js")),te=e(require("./GraphicMore/index.js")),oe=e(require("./Features/index.js")),pe=e(require("./AplusDesc/index.js")),se=e(require("./GiftBox/index.js")),ie=e(require("./SelectStore/index.js")),fe=e(require("./DownLoad/index.js")),ue=e(require("./FootCharger/index.js")),de=e(require("./ProductCompare/index.js")),ce=e(require("./Ksp/index.js")),le=e(require("./ImageTextFeature/index.js")),me=e(require("./FeatureCards/index.js")),xe=e(require("./ImageWithText/index.js")),ne=e(require("./VideoFeature/index.js")),he=e(require("./TabsWithMedia/index.js")),Pe=e(require("./TabWithImage/index.js")),ye=e(require("./FeatureShowcase/index.js")),ge=e(require("./ProductHero/index.js")),Me=e(require("./SpecsComparison/index.js")),Se=e(require("./MediaSceneSwitcher/index.js")),Ce=e(require("./ThreeDCarousel/index.js"));const ve={"ipc-accordioncards":"AccordionCards","ipc-aplusdesc":"AplusDesc","ipc-banner":"HeroBanner","ipc-brand-equity":"BrandEquity","ipc-category":"Category","ipc-collection-banner":"CollectionBanner","ipc-collection-shelves":"CollectionShelves","ipc-creativemodule":"CreativeModule","ipc-download":"DownLoad","ipc-evaluate":"Evaluate","ipc-faq":"Faq","ipc-features":"Features","ipc-footcharger":"FootCharger","ipc-ga-block":"GraphicAttractionBlock","ipc-giftbox":"GiftBox","ipc-graphic":"Graphic","ipc-graphicmore":"GraphicMore","ipc-graphicoverlay":"GraphicOverlay","ipc-marquee":"Marquee","ipc-mediaplayerbase":"MediaPlayerBase","ipc-mediaplayermulti":"MediaPlayerMulti","ipc-mediaplayersticky":"MediaPlayerSticky","ipc-member-equity":"MemberEquity","ipc-mlg-block":"MultiLayoutGraphicBlock","ipc-search-page-tabs":"SearchPageBlock","ipc-selectstore":"SelectStore","ipc-shelfdisplay":"ShelfDisplay","ipc-slogan":"Slogan","ipc-spacer":"Spacer","ipc-specs":"Specs","ipc-tabs":"Tabs","ipc-text-marquee":"TextMarquee","ipc-title":"Title","ipc-whychoose":"WhyChoose",ksp:"Ksp"};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/biz-components/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as MarqueeReview } from './MarqueeReview/index.js'\nexport type { MarqueeReviewProps, MarqueeReviewData, ReviewItem } from './MarqueeReview/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\nexport { default as Listing } from './Listing/index.js'\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\n\nexport { default as ProductCompare } from './ProductCompare/index.js'\nexport type { ProductCompareProps, ProductItemData } from './ProductCompare/index.js'\nexport { default as Ksp } from './Ksp/index.js'\nexport type { KspProps, KspData, KspCardItem } from './Ksp/index.js'\nexport { default as ImageTextFeature } from './ImageTextFeature/index.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './ImageTextFeature/index.js'\nexport { default as FeatureCards } from './FeatureCards/index.js'\nexport type { FeatureCardsProps, FeatureCardItem } from './FeatureCards/index.js'\nexport { default as ImageWithText } from './ImageWithText/index.js'\nexport type { ImageWithTextProps } from './ImageWithText/index.js'\nexport { default as VideoFeature } from './VideoFeature/index.js'\nexport type { VideoFeatureProps } from './VideoFeature/index.js'\nexport { default as TabsWithMedia } from './TabsWithMedia/index.js'\nexport type { TabsWithMediaProps, TabItem, TimeIndex } from './TabsWithMedia/index.js'\nexport { default as TabWithImage } from './TabWithImage/index.js'\nexport type { TabWithImageProps, TabWithImageDataItem } from './TabWithImage/index.js'\nexport { default as FeatureShowcase } from './FeatureShowcase/index.js'\nexport type { FeatureShowcaseProps, FeatureShowcaseItem } from './FeatureShowcase/index.js'\nexport { default as ProductHero } from './ProductHero/index.js'\nexport type { ProductHeroProps } from './ProductHero/index.js'\nexport { default as SpecsComparison } from './SpecsComparison/index.js'\nexport type {\n SpecsComparisonProps,\n SpecsComparisonMenuItem,\n SpecsComparisonLeftMenuItem,\n} from './SpecsComparison/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n 'ipc-accordioncards': 'AccordionCards',\n 'ipc-aplusdesc': 'AplusDesc',\n 'ipc-banner': 'HeroBanner',\n 'ipc-brand-equity': 'BrandEquity',\n 'ipc-category': 'Category',\n 'ipc-collection-banner': 'CollectionBanner',\n 'ipc-collection-shelves': 'CollectionShelves',\n 'ipc-creativemodule': 'CreativeModule',\n 'ipc-download': 'DownLoad',\n 'ipc-evaluate': 'Evaluate',\n 'ipc-faq': 'Faq',\n 'ipc-features': 'Features',\n 'ipc-footcharger': 'FootCharger',\n 'ipc-ga-block': 'GraphicAttractionBlock',\n 'ipc-giftbox': 'GiftBox',\n 'ipc-graphic': 'Graphic',\n 'ipc-graphicmore': 'GraphicMore',\n 'ipc-graphicoverlay': 'GraphicOverlay',\n 'ipc-marquee': 'Marquee',\n 'ipc-mediaplayerbase': 'MediaPlayerBase',\n 'ipc-mediaplayermulti': 'MediaPlayerMulti',\n 'ipc-mediaplayersticky': 'MediaPlayerSticky',\n 'ipc-member-equity': 'MemberEquity',\n 'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n 'ipc-search-page-tabs': 'SearchPageBlock',\n 'ipc-selectstore': 'SelectStore',\n 'ipc-shelfdisplay': 'ShelfDisplay',\n 'ipc-slogan': 'Slogan',\n 'ipc-spacer': 'Spacer',\n 'ipc-specs': 'Specs',\n 'ipc-tabs': 'Tabs',\n 'ipc-text-marquee': 'TextMarquee',\n 'ipc-title': 'Title',\n 'ipc-whychoose': 'WhyChoose',\n
|
|
5
|
-
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,
|
|
6
|
-
"names": ["biz_components_exports", "__export", "PAYLOAD_COMPONENT_MAP", "__toCommonJS", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_Title", "import_Spacer", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "import_AccordionCards", "import_Graphic", "import_MediaPlayerBase", "import_MediaPlayerSticky", "import_MediaPlayerMulti", "import_Marquee", "import_MarqueeReview", "import_WhyChoose", "import_Faq", "import_MultiLayoutGraphicBlock", "import_GraphicAttractionBlock", "import_HeaderNavigation", "import_FooterNavigation", "import_SearchPage", "import_types", "import_Styles", "import_AiuiProvider", "import_Tabs", "import_CreativeModule", "import_GraphicOverlay", "import_Specs", "import_TabsGroup", "import_Listing", "import_BizProductProvider", "import_PurchaseBar", "import_ProductActions", "import_ProductCard", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductExchangePurchase", "import_ProductOptions", "import_ProductBundle", "import_ProductGridBox", "import_ProductGallery", "import_ProductDetail", "import_ProductSummary", "import_BenefitsTab", "import_PaidShipping", "import_GraphicMore", "import_Features", "import_AplusDesc", "import_GiftBox", "import_SelectStore", "import_DownLoad", "import_FootCharger", "import_ProductCompare", "import_Ksp", "import_ImageTextFeature", "import_FeatureCards", "import_ImageWithText", "import_VideoFeature", "import_TabsWithMedia", "import_TabWithImage", "import_FeatureShowcase", "import_ProductHero", "import_SpecsComparison"]
|
|
4
|
+
"sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as MarqueeReview } from './MarqueeReview/index.js'\nexport type { MarqueeReviewProps, MarqueeReviewData, ReviewItem } from './MarqueeReview/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\nexport { default as Listing } from './Listing/index.js'\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\n\nexport { default as ProductCompare } from './ProductCompare/index.js'\nexport type { ProductCompareProps, ProductItemData } from './ProductCompare/index.js'\nexport { default as Ksp } from './Ksp/index.js'\nexport type { KspProps, KspData, KspCardItem } from './Ksp/index.js'\nexport { default as ImageTextFeature } from './ImageTextFeature/index.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './ImageTextFeature/index.js'\nexport { default as FeatureCards } from './FeatureCards/index.js'\nexport type { FeatureCardsProps, FeatureCardItem } from './FeatureCards/index.js'\nexport { default as ImageWithText } from './ImageWithText/index.js'\nexport type { ImageWithTextProps } from './ImageWithText/index.js'\nexport { default as VideoFeature } from './VideoFeature/index.js'\nexport type { VideoFeatureProps } from './VideoFeature/index.js'\nexport { default as TabsWithMedia } from './TabsWithMedia/index.js'\nexport type { TabsWithMediaProps, TabItem, TimeIndex } from './TabsWithMedia/index.js'\nexport { default as TabWithImage } from './TabWithImage/index.js'\nexport type { TabWithImageProps, TabWithImageDataItem } from './TabWithImage/index.js'\nexport { default as FeatureShowcase } from './FeatureShowcase/index.js'\nexport type { FeatureShowcaseProps, FeatureShowcaseItem } from './FeatureShowcase/index.js'\nexport { default as ProductHero } from './ProductHero/index.js'\nexport type { ProductHeroProps } from './ProductHero/index.js'\nexport { default as SpecsComparison } from './SpecsComparison/index.js'\nexport type {\n SpecsComparisonProps,\n SpecsComparisonMenuItem,\n SpecsComparisonLeftMenuItem,\n} from './SpecsComparison/index.js'\nexport { default as MediaSceneSwitcher } from './MediaSceneSwitcher/index.js'\nexport type { MediaSceneSwitcherProps } from './MediaSceneSwitcher/types.js'\nexport { default as ThreeDCarousel } from './ThreeDCarousel/index.js'\nexport type { ThreeDCarouselProps } from './ThreeDCarousel/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n 'ipc-accordioncards': 'AccordionCards',\n 'ipc-aplusdesc': 'AplusDesc',\n 'ipc-banner': 'HeroBanner',\n 'ipc-brand-equity': 'BrandEquity',\n 'ipc-category': 'Category',\n 'ipc-collection-banner': 'CollectionBanner',\n 'ipc-collection-shelves': 'CollectionShelves',\n 'ipc-creativemodule': 'CreativeModule',\n 'ipc-download': 'DownLoad',\n 'ipc-evaluate': 'Evaluate',\n 'ipc-faq': 'Faq',\n 'ipc-features': 'Features',\n 'ipc-footcharger': 'FootCharger',\n 'ipc-ga-block': 'GraphicAttractionBlock',\n 'ipc-giftbox': 'GiftBox',\n 'ipc-graphic': 'Graphic',\n 'ipc-graphicmore': 'GraphicMore',\n 'ipc-graphicoverlay': 'GraphicOverlay',\n 'ipc-marquee': 'Marquee',\n 'ipc-mediaplayerbase': 'MediaPlayerBase',\n 'ipc-mediaplayermulti': 'MediaPlayerMulti',\n 'ipc-mediaplayersticky': 'MediaPlayerSticky',\n 'ipc-member-equity': 'MemberEquity',\n 'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n 'ipc-search-page-tabs': 'SearchPageBlock',\n 'ipc-selectstore': 'SelectStore',\n 'ipc-shelfdisplay': 'ShelfDisplay',\n 'ipc-slogan': 'Slogan',\n 'ipc-spacer': 'Spacer',\n 'ipc-specs': 'Specs',\n 'ipc-tabs': 'Tabs',\n 'ipc-text-marquee': 'TextMarquee',\n 'ipc-title': 'Title',\n 'ipc-whychoose': 'WhyChoose',\n ksp: 'Ksp',\n}\n"],
|
|
5
|
+
"mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,4nCAAAE,GAAA,o6BAAAC,GAAAH,IAAA,IAAAI,EAAuC,qCACvCC,EAAwC,sCACxCC,EAAkC,gCAClCC,EAAiC,+BACjCC,EAAkC,gCAClCC,EAAwC,sCACxCC,EAAoC,kCACpCC,EAAoC,kCACpCC,EAAsC,oCACtCC,EAA0C,wCAC1CC,EAAmC,iCACnCC,EAA2C,yCAC3CC,EAA6C,2CAC7CC,EAA4C,0CAC5CC,EAAmC,iCACnCC,EAAyC,uCAEzCC,EAAqC,mCACrCC,EAA+B,6BAC/BH,EAAqE,8BACrEI,EAAmD,iDAEnDC,EAAkD,gDAElDC,EAA4C,0CAC5CC,EAA4C,0CAC5CC,EAAsC,oCAEtCC,EAAmD,iCAEnDC,EAA2B,+BAC3BC,EAAwC,sCACxCC,EAAgC,8BAChCC,EAA0C,wCAC1CC,EAA0C,wCAC1CC,EAAiC,+BACjCC,EAAoC,mCACpCC,EAAmC,iCACnCC,EAA8C,8CAC9CC,EAAuC,wDACvCC,EAA0C,uEAC1CC,EAAuC,wDACvCC,EAA+C,0FAC/CC,EAA4C,uFAC5CC,EAA2C,sFAC3CC,EAAmD,8FACnDC,EAA0C,qFAC1CC,EAAyC,oFACzCC,EAA0C,iEAC1CC,EAA0C,uEAC1CC,EAAyC,sEACzCC,GAA0C,uEAC1CC,GAAuC,yEACvCC,GAAwC,yDACxCC,GAAuC,qCACvCC,GAAoC,kCACpCC,GAAqC,mCACrCC,GAAmC,iCACnCC,GAAuC,qCACvCC,GAAoC,kCACpCC,GAAuC,qCAEvCC,GAA0C,wCAE1CC,GAA+B,6BAE/BC,GAA4C,0CAE5CC,GAAwC,sCAExCC,GAAyC,uCAEzCC,GAAwC,sCAExCC,GAAyC,uCAEzCC,GAAwC,sCAExCC,GAA2C,yCAE3CC,GAAuC,qCAEvCC,GAA2C,yCAM3CC,GAA8C,4CAE9CC,GAA0C,wCAGnC,MAAMrE,GAAwB,CACnC,qBAAsB,iBACtB,gBAAiB,YACjB,aAAc,aACd,mBAAoB,cACpB,eAAgB,WAChB,wBAAyB,mBACzB,yBAA0B,oBAC1B,qBAAsB,iBACtB,eAAgB,WAChB,eAAgB,WAChB,UAAW,MACX,eAAgB,WAChB,kBAAmB,cACnB,eAAgB,yBAChB,cAAe,UACf,cAAe,UACf,kBAAmB,cACnB,qBAAsB,iBACtB,cAAe,UACf,sBAAuB,kBACvB,uBAAwB,mBACxB,wBAAyB,oBACzB,oBAAqB,eACrB,gBAAiB,0BACjB,uBAAwB,kBACxB,kBAAmB,cACnB,mBAAoB,eACpB,aAAc,SACd,aAAc,SACd,YAAa,QACb,WAAY,OACZ,mBAAoB,cACpB,YAAa,QACb,gBAAiB,YACjB,IAAK,KACP",
|
|
6
|
+
"names": ["biz_components_exports", "__export", "PAYLOAD_COMPONENT_MAP", "__toCommonJS", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_Title", "import_Spacer", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "import_AccordionCards", "import_Graphic", "import_MediaPlayerBase", "import_MediaPlayerSticky", "import_MediaPlayerMulti", "import_Marquee", "import_MarqueeReview", "import_WhyChoose", "import_Faq", "import_MultiLayoutGraphicBlock", "import_GraphicAttractionBlock", "import_HeaderNavigation", "import_FooterNavigation", "import_SearchPage", "import_types", "import_Styles", "import_AiuiProvider", "import_Tabs", "import_CreativeModule", "import_GraphicOverlay", "import_Specs", "import_TabsGroup", "import_Listing", "import_BizProductProvider", "import_PurchaseBar", "import_ProductActions", "import_ProductCard", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductExchangePurchase", "import_ProductOptions", "import_ProductBundle", "import_ProductGridBox", "import_ProductGallery", "import_ProductDetail", "import_ProductSummary", "import_BenefitsTab", "import_PaidShipping", "import_GraphicMore", "import_Features", "import_AplusDesc", "import_GiftBox", "import_SelectStore", "import_DownLoad", "import_FootCharger", "import_ProductCompare", "import_Ksp", "import_ImageTextFeature", "import_FeatureCards", "import_ImageWithText", "import_VideoFeature", "import_TabsWithMedia", "import_TabWithImage", "import_FeatureShowcase", "import_ProductHero", "import_SpecsComparison", "import_MediaSceneSwitcher", "import_ThreeDCarousel"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var n=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var h=(e,i)=>{for(var t in i)a(e,t,{get:i[t],enumerable:!0})},o=(e,i,t,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of p(i))!b.call(e,s)&&s!==t&&a(e,s,{get:()=>i[s],enumerable:!(d=f(i,s))||d.enumerable});return e};var g=(e,i,t)=>(t=e!=null?n(r(e)):{},o(i||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),u=e=>o(a({},"__esModule",{value:!0}),e);var F={};h(F,{Default:()=>_,ImageOnly:()=>S,TwoItems:()=>w,WithoutTags:()=>U,default:()=>v});module.exports=u(F);var l=require("react/jsx-runtime"),m=g(require("../biz-components/MediaSceneSwitcher/index.js"));const y={title:"Biz-Components/MediaSceneSwitcher",component:m.default,parameters:{layout:"fullscreen",docs:{description:{component:"Media Scene Switcher component - A versatile component for switching between multiple media scenes with auto-play functionality"}}},decorators:[e=>(0,l.jsx)("div",{style:{paddingTop:"2em",background:"#000",minHeight:"100vh"},children:(0,l.jsx)(e,{})})],tags:["autodocs"]};var v=y;const c={id:"690c3b11535a7c9975ffcd47",display:"visible",title:"360 Times/Minute",subtitle:"Self-Cleaning",container:{mobileSpan:"12",desktopSpan:"10"},blockName:"\u591A\u573A\u666F\u5207\u63621_10\u6805\u683C_public",blockType:"MediaSceneSwitcher",items:[{id:"690c3b32535a7c9975ffcd49",title:"Scrapes Off Dirt",tag:"20% OFF",videoUrl:{id:3066,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3067,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b35535a7c9975ffcd4b",title:"Cleans the Mop with Water and Detergent",tag:"20% OFF",videoUrl:{id:3068,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3069,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null},{id:"690c3b38535a7c9975ffcd4d",title:"Squeezes Out Dirty Water",tag:"20% OFF",videoUrl:{id:3070,alt:null,baseUrl:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",url:"https://cdn.shopify.com/videos/c/o/v/1e998bd871c04ccbb800c1d8d3d3fea8.mp4",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/preview_images/1e998bd871c04ccbb800c1d8d3d3fea8.thumbnail.0000000000.jpg?v=1762410832",filename:"987f27aa1745438f80200fa6bc87429f.mp4",mimeType:"video/mp4",width:null,height:null},imageUrl:{id:3071,alt:null,baseUrl:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",url:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",thumbnailURL:"https://cdn.shopify.com/s/files/1/0615/0511/0255/files/d1d9f512-4594-4e99-b4f7-18823466e20c_Frame_2121235302.png?v=1762410856",filename:"Frame_2121235302.png",mimeType:"image/png",width:1648,height:1120},mobVideoUrl:null,mobImageUrl:null}]},_={args:{data:c}},U={args:{data:{...c,items:c.items.map(e=>({...e,tag:void 0}))}}},S={args:{data:{...c,items:c.items.map(e=>({...e,videoUrl:null}))}}},w={args:{data:{...c,items:c.items.slice(0,2)}}};
|
|
2
|
+
//# sourceMappingURL=MediaSceneSwitcher.stories.js.map
|