@anker-in/headless-ui 1.2.2 → 1.2.3-alpha.1778583232121
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/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/ActivityMechanism/index.js +1 -1
- package/dist/cjs/biz-components/ActivityMechanism/index.js.map +3 -3
- package/dist/cjs/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/cjs/biz-components/ActivitySchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/cjs/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/cjs/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.js +1 -1
- package/dist/cjs/biz-components/BrandCardLink/BrandCardLink.js.map +3 -3
- package/dist/cjs/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/cjs/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/cjs/biz-components/Category/index.js +1 -1
- package/dist/cjs/biz-components/Category/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/EventSchedule/index.js +1 -1
- package/dist/cjs/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/cjs/biz-components/Faq/Faq.js +1 -1
- package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
- package/dist/cjs/biz-components/Faq/types.d.ts +0 -1
- package/dist/cjs/biz-components/Faq/types.js +1 -1
- package/dist/cjs/biz-components/Faq/types.js.map +1 -1
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js +1 -1
- package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +3 -3
- package/dist/cjs/biz-components/GiftBox/index.js +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js.map +2 -2
- package/dist/cjs/biz-components/GiftShelf/index.js +1 -1
- package/dist/cjs/biz-components/GiftShelf/index.js.map +3 -3
- package/dist/cjs/biz-components/GiftTierShelf/index.js +1 -1
- package/dist/cjs/biz-components/GiftTierShelf/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/MobileTextLinksMenu.d.ts +12 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileTextLinksMenu.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/MobileTextLinksMenu.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/TextLinksDropdown.d.ts +10 -0
- package/dist/cjs/biz-components/HeaderNavigation/TextLinksDropdown.js +2 -0
- package/dist/cjs/biz-components/HeaderNavigation/TextLinksDropdown.js.map +7 -0
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/types.d.ts +8 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.d.ts +1 -0
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/withCategory.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +5 -0
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js +1 -1
- package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js.map +2 -2
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/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 +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/types.d.ts +2 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/types.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/types.js.map +1 -1
- package/dist/cjs/biz-components/LotteryShared/ErrorModal.d.ts +4 -0
- package/dist/cjs/biz-components/LotteryShared/ErrorModal.js.map +2 -2
- package/dist/cjs/biz-components/LotteryShared/MyRewardsModal.d.ts +13 -13
- package/dist/cjs/biz-components/LotteryShared/MyRewardsModal.js +1 -1
- package/dist/cjs/biz-components/LotteryShared/MyRewardsModal.js.map +3 -3
- package/dist/cjs/biz-components/LotteryShared/types.d.ts +9 -0
- package/dist/cjs/biz-components/LotteryShared/types.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/Marquee.d.ts +11 -4
- package/dist/cjs/biz-components/Marquee/Marquee.js +1 -1
- package/dist/cjs/biz-components/Marquee/Marquee.js.map +3 -3
- package/dist/cjs/biz-components/Marquee/index.d.ts +1 -1
- package/dist/cjs/biz-components/Marquee/index.js +1 -1
- package/dist/cjs/biz-components/Marquee/index.js.map +2 -2
- package/dist/cjs/biz-components/Marquee/type.d.ts +22 -4
- package/dist/cjs/biz-components/Marquee/type.js +1 -1
- package/dist/cjs/biz-components/Marquee/type.js.map +1 -1
- package/dist/cjs/biz-components/Media/index.js +1 -1
- package/dist/cjs/biz-components/Media/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.d.ts +9 -0
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +7 -0
- package/dist/cjs/biz-components/MediaTextOverlay/index.d.ts +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/index.js +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/index.js.map +7 -0
- package/dist/cjs/biz-components/MediaTextOverlay/types.d.ts +24 -0
- package/dist/cjs/biz-components/MediaTextOverlay/types.js +2 -0
- package/dist/cjs/biz-components/MediaTextOverlay/types.js.map +7 -0
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
- package/dist/cjs/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.js.map +3 -3
- package/dist/cjs/biz-components/ProductLottery/types.d.ts +62 -5
- package/dist/cjs/biz-components/ProductLottery/types.js +1 -1
- package/dist/cjs/biz-components/ProductLottery/types.js.map +2 -2
- package/dist/cjs/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/cjs/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/cjs/biz-components/PromotionalBar/index.js +1 -1
- package/dist/cjs/biz-components/PromotionalBar/index.js.map +3 -3
- package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.d.ts +1 -0
- package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.js.map +3 -3
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +9 -0
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +1 -0
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/Subscribe/index.js +1 -1
- package/dist/cjs/biz-components/Subscribe/index.js.map +2 -2
- package/dist/cjs/biz-components/SwiperBox/index.js +1 -1
- package/dist/cjs/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +3 -3
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +3 -3
- package/dist/cjs/biz-components/WebPushPopup/index.d.ts +44 -0
- package/dist/cjs/biz-components/WebPushPopup/index.js +2 -0
- package/dist/cjs/biz-components/WebPushPopup/index.js.map +7 -0
- package/dist/cjs/biz-components/WheelLottery/index.js +1 -1
- package/dist/cjs/biz-components/WheelLottery/index.js.map +3 -3
- package/dist/cjs/biz-components/index.d.ts +6 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/biz-components/index.js.map +3 -3
- package/dist/cjs/components/Countdown.js +1 -1
- package/dist/cjs/components/Countdown.js.map +3 -3
- package/dist/cjs/components/button.d.ts +4 -0
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +3 -3
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/components/link.js.map +2 -2
- package/dist/cjs/helpers/index.d.ts +1 -1
- package/dist/cjs/helpers/index.js +1 -1
- package/dist/cjs/helpers/index.js.map +2 -2
- package/dist/cjs/helpers/isLexicalEmpty.d.ts +5 -0
- package/dist/cjs/helpers/isLexicalEmpty.js +1 -1
- package/dist/cjs/helpers/isLexicalEmpty.js.map +3 -3
- package/dist/cjs/hooks/useEmarsysWebPush.d.ts +111 -0
- package/dist/cjs/hooks/useEmarsysWebPush.js +2 -0
- package/dist/cjs/hooks/useEmarsysWebPush.js.map +7 -0
- package/dist/cjs/hooks/useProductListTrack.d.ts +43 -0
- package/dist/cjs/hooks/useProductListTrack.js +2 -0
- package/dist/cjs/hooks/useProductListTrack.js.map +7 -0
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/ActivityMechanism/index.js +1 -1
- package/dist/esm/biz-components/ActivityMechanism/index.js.map +3 -3
- package/dist/esm/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/esm/biz-components/ActivitySchedule/index.js.map +3 -3
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.js.map +3 -3
- package/dist/esm/biz-components/AnchorNavigation/index.js +1 -1
- package/dist/esm/biz-components/AnchorNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/BrandCardLink/BrandCardLink.js +1 -1
- package/dist/esm/biz-components/BrandCardLink/BrandCardLink.js.map +3 -3
- package/dist/esm/biz-components/Category/SwiperCategory.js +1 -1
- package/dist/esm/biz-components/Category/SwiperCategory.js.map +3 -3
- package/dist/esm/biz-components/Category/index.js +1 -1
- package/dist/esm/biz-components/Category/index.js.map +3 -3
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/EventSchedule/index.js +1 -1
- package/dist/esm/biz-components/EventSchedule/index.js.map +3 -3
- package/dist/esm/biz-components/Faq/Faq.js +1 -1
- package/dist/esm/biz-components/Faq/Faq.js.map +2 -2
- package/dist/esm/biz-components/Faq/types.d.ts +0 -1
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js +1 -1
- package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +3 -3
- package/dist/esm/biz-components/GiftBox/index.js +1 -1
- package/dist/esm/biz-components/GiftBox/index.js.map +2 -2
- package/dist/esm/biz-components/GiftShelf/index.js +1 -1
- package/dist/esm/biz-components/GiftShelf/index.js.map +3 -3
- package/dist/esm/biz-components/GiftTierShelf/index.js +1 -1
- package/dist/esm/biz-components/GiftTierShelf/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/MobileTextLinksMenu.d.ts +12 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileTextLinksMenu.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/MobileTextLinksMenu.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/TextLinksDropdown.d.ts +10 -0
- package/dist/esm/biz-components/HeaderNavigation/TextLinksDropdown.js +2 -0
- package/dist/esm/biz-components/HeaderNavigation/TextLinksDropdown.js.map +7 -0
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/types.d.ts +8 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/types.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/withCategory.d.ts +1 -0
- package/dist/esm/biz-components/HeaderNavigation/withCategory.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/withCategory.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +5 -0
- package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js +1 -1
- package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/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 +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/types.d.ts +2 -0
- package/dist/esm/biz-components/LotteryShared/ErrorModal.d.ts +4 -0
- package/dist/esm/biz-components/LotteryShared/ErrorModal.js.map +2 -2
- package/dist/esm/biz-components/LotteryShared/MyRewardsModal.d.ts +13 -13
- package/dist/esm/biz-components/LotteryShared/MyRewardsModal.js +1 -1
- package/dist/esm/biz-components/LotteryShared/MyRewardsModal.js.map +3 -3
- package/dist/esm/biz-components/LotteryShared/types.d.ts +9 -0
- package/dist/esm/biz-components/LotteryShared/types.js.map +2 -2
- package/dist/esm/biz-components/Marquee/Marquee.d.ts +11 -4
- package/dist/esm/biz-components/Marquee/Marquee.js +1 -1
- package/dist/esm/biz-components/Marquee/Marquee.js.map +3 -3
- package/dist/esm/biz-components/Marquee/index.d.ts +1 -1
- package/dist/esm/biz-components/Marquee/index.js +1 -1
- package/dist/esm/biz-components/Marquee/index.js.map +3 -3
- package/dist/esm/biz-components/Marquee/type.d.ts +22 -4
- package/dist/esm/biz-components/Media/index.js +1 -1
- package/dist/esm/biz-components/Media/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +3 -3
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.d.ts +9 -0
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js +2 -0
- package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js.map +7 -0
- package/dist/esm/biz-components/MediaTextOverlay/index.d.ts +2 -0
- package/dist/esm/biz-components/MediaTextOverlay/index.js +2 -0
- package/dist/esm/biz-components/MediaTextOverlay/index.js.map +7 -0
- package/dist/esm/biz-components/MediaTextOverlay/types.d.ts +24 -0
- package/dist/esm/biz-components/MediaTextOverlay/types.js +1 -0
- package/dist/esm/biz-components/MediaTextOverlay/types.js.map +7 -0
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/esm/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.js.map +3 -3
- package/dist/esm/biz-components/ProductLottery/types.d.ts +62 -5
- package/dist/esm/biz-components/ProductLottery/types.js.map +2 -2
- package/dist/esm/biz-components/ProductNav/ProductNav.js +1 -1
- package/dist/esm/biz-components/ProductNav/ProductNav.js.map +3 -3
- package/dist/esm/biz-components/PromotionalBar/index.js +1 -1
- package/dist/esm/biz-components/PromotionalBar/index.js.map +3 -3
- package/dist/esm/biz-components/SecondaryBanner/SecondaryBannerCarousel.d.ts +1 -0
- package/dist/esm/biz-components/SecondaryBanner/SecondaryBannerCarousel.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/SecondaryBannerCarousel.js.map +3 -3
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +9 -0
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +1 -0
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/Subscribe/index.js +1 -1
- package/dist/esm/biz-components/Subscribe/index.js.map +2 -2
- package/dist/esm/biz-components/SwiperBox/index.js +1 -1
- package/dist/esm/biz-components/SwiperBox/index.js.map +3 -3
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +3 -3
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +3 -3
- package/dist/esm/biz-components/WebPushPopup/index.d.ts +44 -0
- package/dist/esm/biz-components/WebPushPopup/index.js +2 -0
- package/dist/esm/biz-components/WebPushPopup/index.js.map +7 -0
- package/dist/esm/biz-components/WheelLottery/index.js +1 -1
- package/dist/esm/biz-components/WheelLottery/index.js.map +2 -2
- package/dist/esm/biz-components/index.d.ts +6 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/biz-components/index.js.map +3 -3
- package/dist/esm/components/Countdown.js +1 -1
- package/dist/esm/components/Countdown.js.map +3 -3
- package/dist/esm/components/button.d.ts +4 -0
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +3 -3
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/components/link.js.map +2 -2
- package/dist/esm/helpers/index.d.ts +1 -1
- package/dist/esm/helpers/index.js +1 -1
- package/dist/esm/helpers/index.js.map +3 -3
- package/dist/esm/helpers/isLexicalEmpty.d.ts +5 -0
- package/dist/esm/helpers/isLexicalEmpty.js +1 -1
- package/dist/esm/helpers/isLexicalEmpty.js.map +3 -3
- package/dist/esm/hooks/useEmarsysWebPush.d.ts +111 -0
- package/dist/esm/hooks/useEmarsysWebPush.js +2 -0
- package/dist/esm/hooks/useEmarsysWebPush.js.map +7 -0
- package/dist/esm/hooks/useProductListTrack.d.ts +43 -0
- package/dist/esm/hooks/useProductListTrack.js +2 -0
- package/dist/esm/hooks/useProductListTrack.js.map +7 -0
- package/package.json +1 -1
- package/style.css +143 -11
- package/tailwind.config.js +10 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ActivitySchedule/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\n\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n 'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n {\n variants: {\n state: {\n // Active state - gradient background\n 'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n 'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n // Inactive state - solid background\n 'inactive-light': 'bg-[#EAEAEC]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n size: {\n // Small size - 120px height with responsive scaling\n small: 'laptop:h-[160px] h-[120px]',\n // Large size - 200px height with responsive scaling\n large: 'laptop:h-[240px] h-[200px]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n size: 'small',\n },\n }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // Active state - white text\n 'active-light': 'text-white',\n 'active-dark': 'text-white',\n // Inactive state - dark text\n 'inactive-light': 'text-[#080A0F]',\n 'inactive-dark': 'text-white',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n ({\n item,\n theme = 'light',\n className,\n size,\n }: {\n item: ActivityScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n size: 'small' | 'large'\n }) => {\n const isActive = item.isActive || false\n\n // Calculate combined state\n const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'active-dark'\n | 'inactive-light'\n | 'inactive-dark'\n\n return (\n <div\n className={cn(activityCardVariants({ state: cardState, size }), className)}\n data-ui-component-id=\"ActivityScheduleCard\"\n >\n <Link
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Heading", "Container", "Link", "cva", "Swiper", "SwiperSlide", "withLayout", "activityCardVariants", "cardTextVariants", "ActivityScheduleCard", "item", "theme", "className", "size", "isActive", "cardState", "ActivitySchedule", "classNames", "data", "rest", "ref", "itemsPerRow", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "index", "ActivitySchedule_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { Text, Picture, Heading, Container, Link } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { ActivityScheduleProps, ActivityScheduleItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'activity_schedule'\n/**\n * Card style variants for activity schedule\n */\nconst activityCardVariants = cva(\n 'rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3',\n {\n variants: {\n state: {\n // Active state - gradient background\n 'active-light': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n 'active-dark': 'bg-gradient-to-r from-[#3555aa] to-[#6988e3]',\n // Inactive state - solid background\n 'inactive-light': 'bg-[#EAEAEC]',\n 'inactive-dark': 'bg-[#1E2024]',\n },\n size: {\n // Small size - 120px height with responsive scaling\n small: 'laptop:h-[160px] h-[120px]',\n // Large size - 200px height with responsive scaling\n large: 'laptop:h-[240px] h-[200px]',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n size: 'small',\n },\n }\n)\n\n/**\n * Text style variants for card\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n variants: {\n state: {\n // Active state - white text\n 'active-light': 'text-white',\n 'active-dark': 'text-white',\n // Inactive state - dark text\n 'inactive-light': 'text-[#080A0F]',\n 'inactive-dark': 'text-white',\n },\n },\n defaultVariants: {\n state: 'inactive-light',\n },\n})\n\n/**\n * Activity Schedule Card Component\n */\nconst ActivityScheduleCard = React.memo(\n ({\n item,\n theme = 'light',\n className,\n size,\n }: {\n item: ActivityScheduleItem\n theme?: 'light' | 'dark'\n className?: string\n size: 'small' | 'large'\n }) => {\n const isActive = item.isActive || false\n const { locale = 'us', trackingData } = useAiuiContext()\n const contextHandle = trackingData?.contextHandle || ''\n // Calculate combined state\n const cardState = `${isActive ? 'active' : 'inactive'}-${theme}` as\n | 'active-light'\n | 'active-dark'\n | 'inactive-light'\n | 'inactive-dark'\n\n return (\n <div\n className={cn(activityCardVariants({ state: cardState, size }), className)}\n data-ui-component-id=\"ActivityScheduleCard\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item.title}##`}\n >\n <Link\n asChild={!item?.link}\n href={\n item?.link\n ? trackUrlRef(getLocalizedPath(item.link, locale), `${contextHandle}_${componentType}_${componentName}`)\n : undefined\n }\n className=\"size-full no-underline hover:text-current\"\n >\n {/* Background decoration icon - show activeIcon when active, inactiveIcon when inactive */}\n {(isActive ? item.activeIcon : item.inactiveIcon) && (\n <div className=\"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]\">\n <Picture\n source={isActive ? item.activeIcon!.url : item.inactiveIcon!.url}\n alt={isActive ? item.activeIcon!.alt : item.inactiveIcon!.alt}\n className=\"aspect-square\"\n />\n </div>\n )}\n\n {/* Content area */}\n <div className=\"relative z-20 flex h-full flex-col justify-between\">\n {/* Title */}\n <Heading as=\"h3\" size={3} html={item.title} className={cn(cardTextVariants({ state: cardState }))} />\n\n <div className=\"flex flex-col gap-1\">\n {/* Subtitle */}\n <div className=\"flex flex-col justify-end overflow-hidden\">\n <Heading\n as=\"h4\"\n size={2}\n html={item.subtitle}\n className={cn(' line-clamp-2', cardTextVariants({ state: cardState }))}\n />\n </div>\n {/* Detailed description - only show when size is large */}\n {size === 'large' && item.description && (\n <Text\n html={item.description}\n className={cn(\n 'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]',\n cardTextVariants({ state: cardState })\n )}\n />\n )}\n </div>\n </div>\n </Link>\n </div>\n )\n }\n)\n\nActivityScheduleCard.displayName = 'ActivityScheduleCard'\n\n/**\n * ActivitySchedule - Activity Schedule Component\n *\n * @description Display activity schedule card list with active/inactive states, theme switching, and responsive layout\n */\nconst ActivitySchedule = React.forwardRef<HTMLDivElement, ActivityScheduleProps>(\n ({ classNames = {}, data, ...rest }, ref) => {\n const innerRef = React.useRef<HTMLDivElement>(null)\n\n React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data.scheduleList?.[0]?.title || '',\n componentDescription: '',\n })\n\n const theme = data.theme || 'light'\n const size = data.size || 'large'\n\n const itemsPerRow = React.useMemo(() => {\n return data?.scheduleList?.length || 2\n }, [data?.scheduleList])\n\n const swiperBreakpoints = React.useMemo(() => {\n const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n switch (breakpoint) {\n case 'mobile':\n return { slidesPerView: 1.17, spaceBetween: 12 }\n case 'tablet':\n if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 12 }\n return { slidesPerView: 2.4, spaceBetween: 12 }\n case 'laptop':\n if (itemsPerRow === 2) return {}\n if (itemsPerRow === 4) return { slidesPerView: 3.2, spaceBetween: 16 }\n return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n case 'desktop':\n if (itemsPerRow === 2) return { slidesPerView: 2, spaceBetween: 16 }\n return { slidesPerView: itemsPerRow, spaceBetween: 16 }\n }\n }\n\n const mobileConfig = getBreakpointConfig('mobile')\n const tabletConfig = getBreakpointConfig('tablet')\n const laptopConfig = getBreakpointConfig('laptop')\n const desktopConfig = getBreakpointConfig('desktop')\n\n return {\n 0: mobileConfig,\n 768: tabletConfig,\n 1024: laptopConfig,\n 1440: desktopConfig,\n }\n }, [itemsPerRow])\n\n return (\n <Container\n ref={innerRef}\n className={cn(classNames?.root)}\n childClassName=\"overflow-hidden\"\n data-ui-component-id=\"ActivitySchedule\"\n {...rest}\n >\n <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n {data.scheduleList.map((item, index) => (\n <SwiperSlide key={'activityScheduleCardItem' + index}>\n <ActivityScheduleCard item={item} theme={theme} size={size} className={classNames?.card} />\n </SwiperSlide>\n ))}\n </Swiper>\n </Container>\n )\n }\n)\n\nActivitySchedule.displayName = 'ActivitySchedule'\n\nexport default withLayout(ActivitySchedule)\nexport type { ActivityScheduleProps, ActivityScheduleData, ActivityScheduleItem } from './types.js'\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "cn", "useAiuiContext", "trackUrlRef", "getLocalizedPath", "Text", "Picture", "Heading", "Container", "Link", "cva", "Swiper", "SwiperSlide", "withLayout", "useExposure", "componentType", "componentName", "activityCardVariants", "cardTextVariants", "ActivityScheduleCard", "item", "theme", "className", "size", "isActive", "locale", "trackingData", "contextHandle", "cardState", "ActivitySchedule", "classNames", "data", "rest", "ref", "innerRef", "itemsPerRow", "swiperBreakpoints", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "index", "ActivitySchedule_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as b}from"react/jsx-runtime";import{gaTrack as x}from"../../shared/track.js";import{createContext as A,useContext as E,useEffect as g,useRef as y}from"react";const v=A({trackingData:{},locale:void 0,copyWriting:{}}),P=()=>{const r=E(v);if(!r)throw new Error("useAiui must be used in <AiuiProvider>");return r},C=({children:r,...a})=>{const c=y(null),u=y(a?.trackingData);return g(()=>{u.current=a?.trackingData},[a?.trackingData]),g(()=>{const o=c.current;if(!o)return;const p=(t,e)=>{const n={};if(!e||!e.attributes)return;for(const k of Array.from(e.attributes)){const s=k?.name;s?.startsWith("data-headless-")&&(n[s]=e.getAttribute(s)||"")}const f=n["data-headless-sku"],l=n["data-headless-type-name"]?.split?.("#"),i=n["data-headless-title-desc-button"]?.split?.("#"),m=n["data-headless-nav-position"]?.split?.("#"),h=n["data-headless-creative-id"];x({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:u.current?.pageGroup||"Home Page",component_type:l?.[0]||"",component_name:l?.[1]||"",position:m?.[1]||"",navigation:m?.[0]||"",button_name:i?.[2]||"",SKU:f||"",component_title:i?.[0]||"",component_description:i?.[1]||"",creative_id:h}})},d=new MutationObserver(()=>{o.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",e=>p(e,t)),t.setAttribute("data-headless-track-bound","true"))})});return d.observe(o,{childList:!0,subtree:!0}),o.querySelectorAll("[data-headless-type-name]").forEach(t=>{t.hasAttribute("data-headless-track-bound")||(t.addEventListener("click",e=>p(e,t)),t.setAttribute("data-headless-track-bound","true"))}),()=>d.disconnect()},[]),b(v.Provider,{value:a,children:b("div",{ref:c,children:r})})};var R=C;export{v as AiuiContext,R as default,P as useAiuiContext};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect, useRef } from 'react'\nimport type { CurrencyDisplayType } from '../../types/props.js'\n\n/**\n * Exposure tracking parameters\n */\nexport interface ExposureParams {\n componentType: string\n componentName: string\n componentTitle?: string\n componentDescription?: string\n navigation?: string\n pageGroup?: string\n position?: number\n}\n\n/**\n * Callback function for custom exposure handling\n */\nexport type OnExposureCallback = (params: ExposureParams) => void\n\ninterface AiuiContextType {\n /**\n * \u5168\u5C40\u57CB\u70B9\u6570\u636E\uFF0C\u81F3\u5C11\u5E94\u5305\u542B pageGroup \u5B57\u6BB5\u7528\u4E8E\u533A\u5206\u9875\u9762\uFF0C\u5176\u4ED6\u5B57\u6BB5\u53EF\u6839\u636E\u9700\u8981\u6DFB\u52A0\n */\n trackingData: Record<string, any>\n /**\n * \u5F53\u524D\u8BED\u8A00\u73AF\u5883\uFF0C\u9ED8\u8BA4\u4E3A\u6D4F\u89C8\u5668\u8BED\u8A00\n */\n locale?: string\n /**\n * \u5F53\u524D\u9875\u9762\u8DEF\u5F84\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u9875\u9762\uFF0C\u9ED8\u8BA4\u4E3A window.location.pathname\n */\n pathname?: string\n /**\n * \u5546\u6237\u81EA\u5B9A\u4E49\u7684\u5E97\u94FA\u57DF\u540D\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u5546\u6237\uFF0C\u9ED8\u8BA4\u4E3A\u7A7A\u5B57\u7B26\u4E32\n */\n storeDomain?: string\n /**\n * \u5F53\u524D\u9875\u9762\u7684 handle\uFF08slug\uFF09\uFF0C\u7528\u4E8E tracking \u57CB\u70B9\u533A\u5206\u9875\u9762\u8D44\u6E90\uFF0C\u7531\u6D88\u8D39\u65B9\u4F20\u5165\u3002\n * \u4F8B\u5982\uFF1A<AiuiProvider pageHandle={page.handle} ...>\n * ProductLottery\u3001Media Endorsement \u7B49\u7EC4\u4EF6\u53EF\u901A\u8FC7 useAiuiContext() \u8BFB\u53D6\u6B64\u5B57\u6BB5\u3002\n */\n pageHandle?: string\n /**\n * \u7528\u6237\u662F\u5426\u767B\u5F55\n */\n isLogin?: boolean\n\n /**\n * \u7528\u6237\u662F\u5426\u4E3APlus\u4F1A\u5458\n */\n isPlusMember?: boolean\n /**\n * \u8D27\u5E01\u4EE3\u7801\uFF0C\u9ED8\u8BA4\u4E3AUSD\n */\n currencyCode?: string\n /**\n * \u8D27\u5E01\u663E\u793A\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u4E3Asymbol\uFF08\u7B26\u53F7\uFF09\uFF0C\u53EF\u9009\u503C\u5305\u62EC\uFF1A'symbol'\uFF08\u7B26\u53F7\uFF0C\u5982$\uFF09\u3001'code'\uFF08\u8D27\u5E01\u4EE3\u7801\uFF0C\u5982USD\uFF09\u548C'name'\uFF08\u8D27\u5E01\u540D\u79F0\uFF0C\u5982\u7F8E\u5143\uFF09\u3002\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay for more details\n */\n currencyDisplay?: CurrencyDisplayType\n /**\n * \u6587\u6848\u914D\u7F6E\uFF0C\u5546\u6237\u53EF\u901A\u8FC7\u6B64\u5B57\u6BB5\u8986\u76D6\u9ED8\u8BA4\u6587\u6848\n */\n copyWriting?: Record<string, string>\n /**\n * \u81EA\u5B9A\u4E49\u66DD\u5149\u56DE\u8C03\u3002\u4F20\u5165\u540E\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 GA \u57CB\u70B9\u903B\u8F91\u3002\n *\n * @example\n * <AiuiProvider\n * trackingData={{ pageGroup: 'Home Page' }}\n * onExposure={(params) => {\n * // \u4F7F\u7528\u5546\u6237\u81EA\u5DF1\u7684\u57CB\u70B9\u7CFB\u7EDF\u8BB0\u5F55\u66DD\u5149\u4E8B\u4EF6\n * ga.track('component_impression', params)\n * }}\n * >\n * {children}\n * </AiuiProvider>\n */\n onExposure?: OnExposureCallback\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return context\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const trackingDataRef = useRef(rest?.trackingData)\n useEffect(() => {\n trackingDataRef.current = rest?.trackingData\n }, [rest?.trackingData])\n\n useEffect(() => {\n const root = rootRef.current\n if (!root) return\n\n const handleTrackClick = (_e: Event, el: Element) => {\n const out:
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "gaTrack", "createContext", "useContext", "useEffect", "useRef", "AiuiContext", "useAiuiContext", "context", "AiuiProvider", "children", "rest", "rootRef", "trackingDataRef", "root", "handleTrackClick", "_e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer", "AiuiProvider_default"]
|
|
4
|
+
"sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect, useRef } from 'react'\nimport type { CurrencyDisplayType } from '../../types/props.js'\n\n/**\n * Exposure tracking parameters\n */\nexport interface ExposureParams {\n componentType: string\n componentName: string\n componentTitle?: string\n componentDescription?: string\n navigation?: string\n pageGroup?: string\n position?: number\n}\n\n/**\n * Callback function for custom exposure handling\n */\nexport type OnExposureCallback = (params: ExposureParams) => void\n\ninterface AiuiContextType {\n /**\n * \u5168\u5C40\u57CB\u70B9\u6570\u636E\uFF0C\u81F3\u5C11\u5E94\u5305\u542B pageGroup \u5B57\u6BB5\u7528\u4E8E\u533A\u5206\u9875\u9762\uFF0C\u5176\u4ED6\u5B57\u6BB5\u53EF\u6839\u636E\u9700\u8981\u6DFB\u52A0\n */\n trackingData: Record<string, any>\n /**\n * \u5F53\u524D\u8BED\u8A00\u73AF\u5883\uFF0C\u9ED8\u8BA4\u4E3A\u6D4F\u89C8\u5668\u8BED\u8A00\n */\n locale?: string\n /**\n * \u5F53\u524D\u9875\u9762\u8DEF\u5F84\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u9875\u9762\uFF0C\u9ED8\u8BA4\u4E3A window.location.pathname\n */\n pathname?: string\n /**\n * \u5546\u6237\u81EA\u5B9A\u4E49\u7684\u5E97\u94FA\u57DF\u540D\uFF0C\u7528\u4E8E\u57CB\u70B9\u533A\u5206\u4E0D\u540C\u5546\u6237\uFF0C\u9ED8\u8BA4\u4E3A\u7A7A\u5B57\u7B26\u4E32\n */\n storeDomain?: string\n /**\n * \u5F53\u524D\u9875\u9762\u7684 handle\uFF08slug\uFF09\uFF0C\u7528\u4E8E tracking \u57CB\u70B9\u533A\u5206\u9875\u9762\u8D44\u6E90\uFF0C\u7531\u6D88\u8D39\u65B9\u4F20\u5165\u3002\n * \u4F8B\u5982\uFF1A<AiuiProvider pageHandle={page.handle} ...>\n * ProductLottery\u3001Media Endorsement \u7B49\u7EC4\u4EF6\u53EF\u901A\u8FC7 useAiuiContext() \u8BFB\u53D6\u6B64\u5B57\u6BB5\u3002\n */\n pageHandle?: string\n /**\n * \u7528\u6237\u662F\u5426\u767B\u5F55\n */\n isLogin?: boolean\n\n /**\n * \u7528\u6237\u662F\u5426\u4E3APlus\u4F1A\u5458\n */\n isPlusMember?: boolean\n /**\n * \u8D27\u5E01\u4EE3\u7801\uFF0C\u9ED8\u8BA4\u4E3AUSD\n */\n currencyCode?: string\n /**\n * \u8D27\u5E01\u663E\u793A\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u4E3Asymbol\uFF08\u7B26\u53F7\uFF09\uFF0C\u53EF\u9009\u503C\u5305\u62EC\uFF1A'symbol'\uFF08\u7B26\u53F7\uFF0C\u5982$\uFF09\u3001'code'\uFF08\u8D27\u5E01\u4EE3\u7801\uFF0C\u5982USD\uFF09\u548C'name'\uFF08\u8D27\u5E01\u540D\u79F0\uFF0C\u5982\u7F8E\u5143\uFF09\u3002\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay for more details\n */\n currencyDisplay?: CurrencyDisplayType\n /**\n * \u6587\u6848\u914D\u7F6E\uFF0C\u5546\u6237\u53EF\u901A\u8FC7\u6B64\u5B57\u6BB5\u8986\u76D6\u9ED8\u8BA4\u6587\u6848\n */\n copyWriting?: Record<string, string>\n /**\n * \u81EA\u5B9A\u4E49\u66DD\u5149\u56DE\u8C03\u3002\u4F20\u5165\u540E\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 GA \u57CB\u70B9\u903B\u8F91\u3002\n *\n * @example\n * <AiuiProvider\n * trackingData={{ pageGroup: 'Home Page' }}\n * onExposure={(params) => {\n * // \u4F7F\u7528\u5546\u6237\u81EA\u5DF1\u7684\u57CB\u70B9\u7CFB\u7EDF\u8BB0\u5F55\u66DD\u5149\u4E8B\u4EF6\n * ga.track('component_impression', params)\n * }}\n * >\n * {children}\n * </AiuiProvider>\n */\n onExposure?: OnExposureCallback\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n trackingData: {},\n locale: undefined,\n copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n const context = useContext(AiuiContext)\n if (!context) {\n throw new Error('useAiui must be used in <AiuiProvider>')\n }\n return context\n}\n\nconst AiuiProvider = ({\n children,\n ...rest\n}: {\n children: React.ReactNode\n} & AiuiContextType) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const trackingDataRef = useRef(rest?.trackingData)\n useEffect(() => {\n trackingDataRef.current = rest?.trackingData\n }, [rest?.trackingData])\n\n useEffect(() => {\n const root = rootRef.current\n if (!root) return\n\n const handleTrackClick = (_e: Event, el: Element) => {\n const out: Record<string, string> = {}\n if (!el || !el.attributes) return\n for (const attr of Array.from(el.attributes)) {\n const name = (attr as Attr)?.name\n if (name?.startsWith('data-headless-')) {\n out[name] = el.getAttribute(name) || ''\n }\n }\n const sku = out['data-headless-sku']\n const nameType = out['data-headless-type-name']?.split?.('#')\n const titleDesc = out['data-headless-title-desc-button']?.split?.('#')\n const navPosition = out['data-headless-nav-position']?.split?.('#')\n const creativeId = out['data-headless-creative-id']\n\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: trackingDataRef.current?.pageGroup || 'Home Page',\n component_type: nameType?.[0] || '',\n component_name: nameType?.[1] || '',\n position: navPosition?.[1] || '',\n navigation: navPosition?.[0] || '',\n button_name: titleDesc?.[2] || '',\n SKU: sku || '',\n component_title: titleDesc?.[0] || '',\n component_description: titleDesc?.[1] || '',\n creative_id: creativeId,\n },\n })\n }\n\n const observer = new MutationObserver(() => {\n root.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n })\n observer.observe(root, { childList: true, subtree: true })\n // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n root.querySelectorAll('[data-headless-type-name]').forEach(el => {\n if (!el.hasAttribute('data-headless-track-bound')) {\n el.addEventListener('click', e => handleTrackClick(e, el))\n el.setAttribute('data-headless-track-bound', 'true')\n }\n })\n\n return () => observer.disconnect()\n }, [])\n\n return (\n <AiuiContext.Provider value={rest}>\n <div ref={rootRef}>{children}</div>\n </AiuiContext.Provider>\n )\n}\n\nexport default AiuiProvider\n"],
|
|
5
|
+
"mappings": "AAyKM,cAAAA,MAAA,oBAzKN,OAAS,WAAAC,MAAe,wBACxB,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,EAAW,UAAAC,MAAc,QAmF7D,MAAMC,EAAcJ,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYK,EAAiB,IAAM,CAClC,MAAMC,EAAUL,EAAWG,CAAW,EACtC,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOA,CACT,EAEMC,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,IAEwB,CACtB,MAAMC,EAAUP,EAAuB,IAAI,EACrCQ,EAAkBR,EAAOM,GAAM,YAAY,EACjD,OAAAP,EAAU,IAAM,CACdS,EAAgB,QAAUF,GAAM,YAClC,EAAG,CAACA,GAAM,YAAY,CAAC,EAEvBP,EAAU,IAAM,CACd,MAAMU,EAAOF,EAAQ,QACrB,GAAI,CAACE,EAAM,OAEX,MAAMC,EAAmB,CAACC,EAAWC,IAAgB,CACnD,MAAMC,EAA8B,CAAC,EACrC,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAC3B,UAAWE,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAe,KACzBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,GAAK,GAEzC,CACA,MAAMC,EAAMH,EAAI,mBAAmB,EAC7BI,EAAWJ,EAAI,yBAAyB,GAAG,QAAQ,GAAG,EACtDK,EAAYL,EAAI,iCAAiC,GAAG,QAAQ,GAAG,EAC/DM,EAAcN,EAAI,4BAA4B,GAAG,QAAQ,GAAG,EAC5DO,EAAaP,EAAI,2BAA2B,EAElDjB,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYY,EAAgB,SAAS,WAAa,YAClD,eAAgBS,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,GACzC,YAAaE,CACf,CACF,CAAC,CACH,EAEMC,EAAW,IAAI,iBAAiB,IAAM,CAC1CZ,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAS,EAAS,QAAQZ,EAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAEzDA,EAAK,iBAAiB,2BAA2B,EAAE,QAAQG,GAAM,CAC1DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EAEM,IAAMS,EAAS,WAAW,CACnC,EAAG,CAAC,CAAC,EAGH1B,EAACM,EAAY,SAAZ,CAAqB,MAAOK,EAC3B,SAAAX,EAAC,OAAI,IAAKY,EAAU,SAAAF,EAAS,EAC/B,CAEJ,EAEA,IAAOiB,EAAQlB",
|
|
6
|
+
"names": ["jsx", "gaTrack", "createContext", "useContext", "useEffect", "useRef", "AiuiContext", "useAiuiContext", "context", "AiuiProvider", "children", "rest", "rootRef", "trackingDataRef", "root", "handleTrackClick", "_e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "creativeId", "observer", "AiuiProvider_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as p}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as p}from"react/jsx-runtime";import*as n from"react";import{cn as g}from"../../helpers/utils.js";import{cva as h}from"class-variance-authority";import L from"./useAnchorPosition.js";import{Container as S}from"../../components/container.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as k}from"../../hooks/useExposure.js";const y="copy",N="anchor_navigation",B=h("anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"tablet:justify-start",center:"tablet:justify-center",end:"tablet:justify-end"},size:{small:"gap-3",large:"gap-6"}},defaultVariants:{alignment:"start",size:"small"}}),V=h("anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300",{variants:{size:{small:"py-3",large:"py-4"}},defaultVariants:{size:"small"}}),z=h("!sticky top-0 !z-40 w-full",{variants:{theme:{light:"!bg-white",dark:"!bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),M={defaultColor:"text-[#4A4C56]",activeColor:"text-[#080A0F]",activeIndicatorColor:"after:bg-brand-0"},P={defaultColor:"text-[#8A8D92]",activeColor:"text-white",activeIndicatorColor:"after:bg-brand-0"},R=n.forwardRef(({classNames:l={},data:r,onItemClick:I,buttonStyle:s,className:T,...x},w)=>{const{alignment:D="start",theme:b="light",size:C="small"}=r,c=L(r.sectionIds?.map(t=>t.targetId)||[]),i=n.useRef(null),f=n.useRef(null),A=n.useRef([]);n.useImperativeHandle(w,()=>i.current),k(i,{componentType:y,componentName:N,componentTitle:"",componentDescription:""});const d=b==="dark"?P:M,u={defaultColor:s?.defaultColor??d.defaultColor,activeColor:s?.activeColor??d.activeColor,activeIndicatorColor:s?.activeIndicatorColor??d.activeIndicatorColor},m=n.useCallback(t=>{const e=A.current[t];if(e&&f.current){const a=f.current,o=e,v=o.offsetLeft-a.offsetWidth/2+o.offsetWidth/2;typeof a.scrollTo=="function"&&a.scrollTo({left:v,behavior:"smooth"})}},[]);return n.useEffect(()=>{if(!c)return;const t=r.sectionIds?.findIndex(e=>e.targetId===c);t!==void 0&&t!==-1&&m(t)},[c,r.sectionIds,m]),p(S,{ref:i,className:g(z({theme:b}),T,l?.root),...x,children:p("div",{ref:f,className:g(B({alignment:D,size:C}),"relative",l?.content),children:r.sectionIds?.map((t,e)=>{const a=c===t.targetId;return p("button",{ref:o=>{o&&(A.current[e]=o)},"data-headless-type-name":`${y}#${N}`,"data-headless-title-desc-button":`##${t.label}`,"data-headless-nav-position":`${t.label}#${e+1}`,"aria-current":a?!0:void 0,onClick:()=>{if(m(e),I){I(t,e);return}const o=document.getElementById(t.targetId);if(o&&i.current){const v=i.current.offsetHeight,E=o.getBoundingClientRect().top+window.scrollY-v;window.scrollTo({top:E,behavior:"smooth"})}},className:g(V({size:C}),a?[u.activeColor,u.activeIndicatorColor,"after:w-full after:opacity-100"]:u.defaultColor,l?.item),children:t.label},t.targetId)})})})});R.displayName="AnchorNavigation";var W=H(R);export{W as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AnchorNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { Container } from '../../components/container.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport interface AnchorNavigationSemanticName {\n root: 'root'\n content: 'content'\n item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'tablet:justify-start',\n center: 'tablet:justify-center',\n end: 'tablet:justify-end',\n },\n size: {\n small: 'gap-3',\n large: 'gap-6',\n },\n },\n defaultVariants: {\n alignment: 'start',\n size: 'small',\n },\n }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\uFF08\u4E0D\u542B\u989C\u8272\uFF0C\u989C\u8272\u7531 buttonStyle \u63A7\u5236\uFF09\n */\nconst anchorItemVariants = cva(\n 'anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300',\n {\n variants: {\n size: {\n small: 'py-3',\n large: 'py-4',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('!sticky top-0 !z-40 w-full', {\n variants: {\n theme: {\n light: 'bg-white',\n dark: 'bg-[#1E2024]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u5141\u8BB8\u6309 theme \u5206\u522B\u8986\u76D6\u9ED8\u8BA4\u8272\u3001\u6FC0\u6D3B\u6587\u5B57\u8272\u3001\u6FC0\u6D3B\u6307\u793A\u5668\u8272\n */\nexport interface AnchorButtonStyle {\n /** \u9ED8\u8BA4\uFF08\u672A\u6FC0\u6D3B\uFF09\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-secondary' */\n defaultColor?: string\n /** \u6FC0\u6D3B\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-primary' */\n activeColor?: string\n /** \u6FC0\u6D3B\u6307\u793A\u5668\uFF08\u4E0B\u5212\u7EBF\uFF09\u80CC\u666F\u8272\uFF0CTailwind class\uFF0C\u5982 'after:bg-brand-0' */\n activeIndicatorColor?: string\n}\n\n/**\n * \u951A\u70B9\u9879\u63A5\u53E3\n */\nexport interface AnchorSectionItem {\n targetId: string\n label: string\n}\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n /** \u951A\u70B9\u5217\u8868 */\n sectionIds: AnchorSectionItem[]\n /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n alignment?: 'start' | 'center' | 'end'\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n /** \u5BFC\u822A\u5927\u5C0F */\n size?: 'small' | 'large'\n}\n\nexport interface AnchorNavigationProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: AnchorNavigationData\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>\n /** \u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684\u6EDA\u52A8\u884C\u4E3A */\n onItemClick?: (item: AnchorSectionItem, index: number) => void\n /**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u8986\u76D6 light/dark \u4E3B\u9898\u4E0B\u7684\u9ED8\u8BA4\u989C\u8272\u3002\n * \u672A\u4F20\u65F6\u6309\u4E3B\u9898\u4F7F\u7528\u5185\u7F6E\u9ED8\u8BA4\u503C\u3002\n *\n * @example\n * // \u81EA\u5B9A\u4E49\u989C\u8272\n * buttonStyle={{ defaultColor: 'text-info-secondary', activeColor: 'text-info-primary', activeIndicatorColor: 'after:bg-brand-3' }}\n */\n buttonStyle?: AnchorButtonStyle\n}\n\n/** light \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst LIGHT_DEFAULTS: Required<AnchorButtonStyle> = {\n defaultColor: 'text-[#4A4C56]',\n activeColor: 'text-[#080A0F]',\n activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/** dark \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst DARK_DEFAULTS: Required<AnchorButtonStyle> = {\n defaultColor: 'text-[#8A8D92]',\n activeColor: 'text-white',\n activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n ({ classNames = {}, data, onItemClick, buttonStyle, className, ...rest }, ref) => {\n const { alignment = 'start', theme = 'light', size = 'small' } = data\n const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n const rootRef = React.useRef<HTMLDivElement>(null)\n const containerRef = React.useRef<HTMLDivElement>(null)\n const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n // \u66B4\u9732 rootRef \u7ED9\u5916\u90E8 ref\n React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement)\n\n // \u5408\u5E76\u4E3B\u9898\u9ED8\u8BA4\u503C\u4E0E\u5916\u90E8\u4F20\u5165\u7684 buttonStyle\n const themeDefaults = theme === 'dark' ? DARK_DEFAULTS : LIGHT_DEFAULTS\n const resolvedButtonStyle: Required<AnchorButtonStyle> = {\n defaultColor: buttonStyle?.defaultColor ?? themeDefaults.defaultColor,\n activeColor: buttonStyle?.activeColor ?? themeDefaults.activeColor,\n activeIndicatorColor: buttonStyle?.activeIndicatorColor ?? themeDefaults.activeIndicatorColor,\n }\n\n const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n const curRef = sectionRefs.current[activeIdIndex]\n\n if (curRef && containerRef.current) {\n const container = containerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n // \u68C0\u67E5 scrollTo \u65B9\u6CD5\u662F\u5426\u5B58\u5728\uFF08\u517C\u5BB9\u6D4B\u8BD5\u73AF\u5883\u548C\u65E7\u6D4F\u89C8\u5668\uFF09\n if (typeof container.scrollTo === 'function') {\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n }, [])\n\n // \u5F53\u5C4F\u5E55\u6EDA\u52A8\u5BFC\u81F4 activeId \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5BFC\u822A\u680F\u5230\u5BF9\u5E94\u9879\n React.useEffect(() => {\n if (!activeId) return\n\n const activeIndex = data.sectionIds?.findIndex(item => item.targetId === activeId)\n if (activeIndex !== undefined && activeIndex !== -1) {\n autoScrollToActiveItem(activeIndex)\n }\n }, [activeId, data.sectionIds, autoScrollToActiveItem])\n\n return (\n <Container ref={rootRef} className={cn(containerVariants({ theme }), classNames?.root)} {...rest}>\n <div\n ref={containerRef}\n className={cn(anchorNavigationVariants({ alignment, size }), 'relative', classNames?.content)}\n >\n {data.sectionIds?.map((item, index) => {\n const isActive = activeId === item.targetId\n\n return (\n <button\n key={item.targetId}\n ref={el => {\n if (el) {\n sectionRefs.current[index] = el\n }\n }}\n aria-current={isActive ? true : undefined}\n onClick={() => {\n // \u9ED8\u8BA4\u884C\u4E3A\uFF1A\u6EDA\u52A8\u5230\u5BF9\u5E94\u951A\u70B9\n autoScrollToActiveItem(index)\n\n // \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\n if (onItemClick) {\n onItemClick(item, index)\n return\n }\n\n // \u624B\u52A8\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n const targetElement = document.getElementById(item.targetId)\n if (targetElement && rootRef.current) {\n const navHeight = rootRef.current.offsetHeight\n const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight\n\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n }\n }}\n className={cn(\n anchorItemVariants({ size }),\n isActive\n ? [\n resolvedButtonStyle.activeColor,\n resolvedButtonStyle.activeIndicatorColor,\n 'after:w-full after:opacity-100',\n ]\n : resolvedButtonStyle.defaultColor,\n classNames?.item\n )}\n >\n {item.label}\n </button>\n )\n })}\n </div>\n </Container>\n )\n }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default withLayout(AnchorNavigation)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "React", "cn", "cva", "useAnchorPosition", "Container", "withLayout", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "LIGHT_DEFAULTS", "DARK_DEFAULTS", "AnchorNavigation", "classNames", "data", "onItemClick", "buttonStyle", "className", "rest", "ref", "alignment", "theme", "size", "activeId", "item", "rootRef", "containerRef", "sectionRefs", "themeDefaults", "resolvedButtonStyle", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "el", "targetElement", "navHeight", "targetPosition", "AnchorNavigation_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\nimport { Container } from '../../components/container.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'copy'\nconst componentName = 'anchor_navigation'\n\nexport interface AnchorNavigationSemanticName {\n root: 'root'\n content: 'content'\n item: 'item'\n}\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n 'anchor-navigation-content flex items-center overflow-x-auto [&::-webkit-scrollbar]:hidden',\n {\n variants: {\n alignment: {\n start: 'tablet:justify-start',\n center: 'tablet:justify-center',\n end: 'tablet:justify-end',\n },\n size: {\n small: 'gap-3',\n large: 'gap-6',\n },\n },\n defaultVariants: {\n alignment: 'start',\n size: 'small',\n },\n }\n)\n\n/**\n * \u5BFC\u822A\u9879\u6837\u5F0F\u53D8\u4F53\uFF08\u4E0D\u542B\u989C\u8272\uFF0C\u989C\u8272\u7531 buttonStyle \u63A7\u5236\uFF09\n */\nconst anchorItemVariants = cva(\n 'anchor-navigation-item relative shrink-0 text-sm font-bold after:absolute after:bottom-0 after:left-0 after:h-1 after:w-0 after:opacity-0 after:transition-all after:duration-300',\n {\n variants: {\n size: {\n small: 'py-3',\n large: 'py-4',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('!sticky top-0 !z-40 w-full', {\n variants: {\n theme: {\n light: '!bg-white',\n dark: '!bg-[#1E2024]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u5141\u8BB8\u6309 theme \u5206\u522B\u8986\u76D6\u9ED8\u8BA4\u8272\u3001\u6FC0\u6D3B\u6587\u5B57\u8272\u3001\u6FC0\u6D3B\u6307\u793A\u5668\u8272\n */\nexport interface AnchorButtonStyle {\n /** \u9ED8\u8BA4\uFF08\u672A\u6FC0\u6D3B\uFF09\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-secondary' */\n defaultColor?: string\n /** \u6FC0\u6D3B\u6587\u5B57\u8272\uFF0CTailwind class\uFF0C\u5982 'text-info-primary' */\n activeColor?: string\n /** \u6FC0\u6D3B\u6307\u793A\u5668\uFF08\u4E0B\u5212\u7EBF\uFF09\u80CC\u666F\u8272\uFF0CTailwind class\uFF0C\u5982 'after:bg-brand-0' */\n activeIndicatorColor?: string\n}\n\n/**\n * \u951A\u70B9\u9879\u63A5\u53E3\n */\nexport interface AnchorSectionItem {\n targetId: string\n label: string\n}\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n /** \u951A\u70B9\u5217\u8868 */\n sectionIds: AnchorSectionItem[]\n /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n alignment?: 'start' | 'center' | 'end'\n /** \u4E3B\u9898\u6A21\u5F0F */\n theme?: 'light' | 'dark'\n /** \u5BFC\u822A\u5927\u5C0F */\n size?: 'small' | 'large'\n}\n\nexport interface AnchorNavigationProps\n extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: AnchorNavigationData\n /** \u8BED\u4E49\u5316\u7C7B\u540D */\n classNames?: Partial<Record<keyof AnchorNavigationSemanticName, string>>\n /** \u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684\u6EDA\u52A8\u884C\u4E3A */\n onItemClick?: (item: AnchorSectionItem, index: number) => void\n /**\n * \u6309\u94AE\u989C\u8272\u914D\u7F6E\uFF0C\u8986\u76D6 light/dark \u4E3B\u9898\u4E0B\u7684\u9ED8\u8BA4\u989C\u8272\u3002\n * \u672A\u4F20\u65F6\u6309\u4E3B\u9898\u4F7F\u7528\u5185\u7F6E\u9ED8\u8BA4\u503C\u3002\n *\n * @example\n * // \u81EA\u5B9A\u4E49\u989C\u8272\n * buttonStyle={{ defaultColor: 'text-info-secondary', activeColor: 'text-info-primary', activeIndicatorColor: 'after:bg-brand-3' }}\n */\n buttonStyle?: AnchorButtonStyle\n}\n\n/** light \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst LIGHT_DEFAULTS: Required<AnchorButtonStyle> = {\n defaultColor: 'text-[#4A4C56]',\n activeColor: 'text-[#080A0F]',\n activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/** dark \u4E3B\u9898\u9ED8\u8BA4\u989C\u8272 */\nconst DARK_DEFAULTS: Required<AnchorButtonStyle> = {\n defaultColor: 'text-[#8A8D92]',\n activeColor: 'text-white',\n activeIndicatorColor: 'after:bg-brand-0',\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n ({ classNames = {}, data, onItemClick, buttonStyle, className, ...rest }, ref) => {\n const { alignment = 'start', theme = 'light', size = 'small' } = data\n const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n const rootRef = React.useRef<HTMLDivElement>(null)\n const containerRef = React.useRef<HTMLDivElement>(null)\n const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n // \u66B4\u9732 rootRef \u7ED9\u5916\u90E8 ref\n React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement)\n\n // \u66DD\u5149\u57CB\u70B9\n useExposure(rootRef, {\n componentType,\n componentName,\n componentTitle: '',\n componentDescription: '',\n })\n\n // \u5408\u5E76\u4E3B\u9898\u9ED8\u8BA4\u503C\u4E0E\u5916\u90E8\u4F20\u5165\u7684 buttonStyle\n const themeDefaults = theme === 'dark' ? DARK_DEFAULTS : LIGHT_DEFAULTS\n const resolvedButtonStyle: Required<AnchorButtonStyle> = {\n defaultColor: buttonStyle?.defaultColor ?? themeDefaults.defaultColor,\n activeColor: buttonStyle?.activeColor ?? themeDefaults.activeColor,\n activeIndicatorColor: buttonStyle?.activeIndicatorColor ?? themeDefaults.activeIndicatorColor,\n }\n\n const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n const curRef = sectionRefs.current[activeIdIndex]\n\n if (curRef && containerRef.current) {\n const container = containerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n // \u68C0\u67E5 scrollTo \u65B9\u6CD5\u662F\u5426\u5B58\u5728\uFF08\u517C\u5BB9\u6D4B\u8BD5\u73AF\u5883\u548C\u65E7\u6D4F\u89C8\u5668\uFF09\n if (typeof container.scrollTo === 'function') {\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n }\n }, [])\n\n // \u5F53\u5C4F\u5E55\u6EDA\u52A8\u5BFC\u81F4 activeId \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5BFC\u822A\u680F\u5230\u5BF9\u5E94\u9879\n React.useEffect(() => {\n if (!activeId) return\n\n const activeIndex = data.sectionIds?.findIndex(item => item.targetId === activeId)\n if (activeIndex !== undefined && activeIndex !== -1) {\n autoScrollToActiveItem(activeIndex)\n }\n }, [activeId, data.sectionIds, autoScrollToActiveItem])\n\n return (\n <Container ref={rootRef} className={cn(containerVariants({ theme }), className, classNames?.root)} {...rest}>\n <div\n ref={containerRef}\n className={cn(anchorNavigationVariants({ alignment, size }), 'relative', classNames?.content)}\n >\n {data.sectionIds?.map((item, index) => {\n const isActive = activeId === item.targetId\n\n return (\n <button\n key={item.targetId}\n ref={el => {\n if (el) {\n sectionRefs.current[index] = el\n }\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`##${item.label}`}\n data-headless-nav-position={`${item.label}#${index + 1}`}\n aria-current={isActive ? true : undefined}\n onClick={() => {\n // \u9ED8\u8BA4\u884C\u4E3A\uFF1A\u6EDA\u52A8\u5230\u5BF9\u5E94\u951A\u70B9\n autoScrollToActiveItem(index)\n\n // \u5982\u679C\u6709\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\n if (onItemClick) {\n onItemClick(item, index)\n return\n }\n\n // \u624B\u52A8\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u8003\u8651\u5BFC\u822A\u680F\u9AD8\u5EA6\n const targetElement = document.getElementById(item.targetId)\n if (targetElement && rootRef.current) {\n const navHeight = rootRef.current.offsetHeight\n const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight\n\n window.scrollTo({\n top: targetPosition,\n behavior: 'smooth',\n })\n }\n }}\n className={cn(\n anchorItemVariants({ size }),\n isActive\n ? [\n resolvedButtonStyle.activeColor,\n resolvedButtonStyle.activeIndicatorColor,\n 'after:w-full after:opacity-100',\n ]\n : resolvedButtonStyle.defaultColor,\n classNames?.item\n )}\n >\n {item.label}\n </button>\n )\n })}\n </div>\n </Container>\n )\n }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default withLayout(AnchorNavigation)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "React", "cn", "cva", "useAnchorPosition", "Container", "withLayout", "useExposure", "componentType", "componentName", "anchorNavigationVariants", "anchorItemVariants", "containerVariants", "LIGHT_DEFAULTS", "DARK_DEFAULTS", "AnchorNavigation", "classNames", "data", "onItemClick", "buttonStyle", "className", "rest", "ref", "alignment", "theme", "size", "activeId", "item", "rootRef", "containerRef", "sectionRefs", "themeDefaults", "resolvedButtonStyle", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "activeIndex", "index", "isActive", "el", "targetElement", "navHeight", "targetPosition", "AnchorNavigation_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import{forwardRef as
|
|
1
|
+
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import{forwardRef as N,useEffect as C,useRef as k,useState as M,useImperativeHandle as S}from"react";import{cn as p,getLocalizedPath as B}from"../../helpers/utils.js";import A from"../../components/picture.js";import{withLayout as P}from"../../shared/Styles.js";import{useMediaQuery as T}from"react-responsive";import{useExposure as D}from"../../hooks/useExposure.js";import{useAiuiContext as x}from"../AiuiProvider/index.js";import{trackUrlRef as E}from"../../shared/trackUrlRef.js";import{Swiper as I,SwiperSlide as j}from"swiper/react";import{Pagination as H,FreeMode as R,Mousewheel as q}from"swiper/modules";import"../Title/index.js";import z from"../../components/link.js";const g="copy",v="store_benefits",F=(e,r)=>{const o=[];for(let i=0;i<e.length;i+=r)o.push(e.slice(i,i+r));return o},h=N(({data:{items:e=[],itemShape:r},className:o},i)=>{const[n,b]=M(!1),m=T({query:"(max-width: 768px)"}),c=k(null),d=k(null),{locale:u="us",trackingData:_}=x();S(i,()=>d.current),D(d,{componentType:g,componentName:v}),C(()=>{b(m)},[m]);const y=n?F(e,3):e;return t("div",{ref:d,className:p("brand-equity-wrapper w-full",o),children:n?s(I,{className:p(o),modules:[R,q,H],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:c.current},breakpoints:{0:{spaceBetween:12}},children:[y?.map((a,l)=>t(j,{className:"!flex flex-col gap-3",children:Array.isArray(a)&&a?.map((L,f)=>t(w,{data:L,itemShape:r,index:f,locale:u},f))},"SwiperSlide"+l)),t("div",{ref:c,className:"mt-3 flex justify-center"})]}):t("div",{className:p("laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3"),children:e.map((a,l)=>t(w,{data:a,itemShape:r,index:l,locale:u},l))})})}),w=({data:e,itemShape:r,index:o,locale:i})=>{const{trackingData:n}=x();return s("div",{className:p("brand-equity-item","lg-desktop:p-8 desktop:p-6 p-4","box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]",r==="round"?"rounded-box":"rounded-none"),children:[s("div",{className:"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3",children:[t("h3",{className:"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),t("div",{className:"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0",children:t(A,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),s("div",{className:"box-border overflow-hidden",children:[t("p",{title:e.description||"",className:"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]",children:e.description||""}),s(z,{href:E(B(e?.link||"",i),`${n?.contextHandle||""}_${g}_${v}`),asChild:!e?.link,className:"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline",children:[t("span",{className:"link-item-text laptop:text-base text-sm",children:e?.linkText}),t("div",{className:"size-6",children:t("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:t("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})]})};h.displayName="BrandCardLink";var te=P(h);export{te as default};
|
|
2
2
|
//# sourceMappingURL=BrandCardLink.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/BrandCardLink/BrandCardLink.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandCardLinkProps, BrandCardLinkItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\nimport Link from '../../components/link.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandCardLinkItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandCardLink = forwardRef<HTMLDivElement, BrandCardLinkProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n const { locale = 'us' } = useAiuiContext()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3')}>\n {items.map((item, index) => (\n <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandCardLinkItem = ({\n data,\n itemShape,\n index,\n locale,\n}: {\n data: BrandCardLinkItemProps\n itemShape?: 'round' | 'square'\n index: number\n locale: string\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'lg-desktop:p-8 desktop:p-6 p-4',\n // 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n 'box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]',\n itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3\">\n <h3 className=\"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n {data.title}\n </h3>\n <div className=\"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n </div>\n <div className=\"box-border overflow-hidden\">\n <p\n title={data.description || ''}\n className=\"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]\"\n >\n {data.description || ''}\n </p>\n <Link\n href={getLocalizedPath(data?.link || '', locale)}\n asChild={!data?.link}\n className=\"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline\"\n >\n <span className=\"link-item-text laptop:text-base text-sm\">{data?.linkText}</span>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </Link>\n </div>\n </div>\n )\n}\n\nBrandCardLink.displayName = 'BrandCardLink'\n\nexport default withLayout(BrandCardLink)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "getLocalizedPath", "Picture", "withLayout", "useMediaQuery", "useExposure", "useAiuiContext", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "Link", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "BrandCardLink", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "locale", "itemsArray", "item", "jIndex", "index", "BrandCardLinkItem", "data", "BrandCardLink_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandCardLinkProps, BrandCardLinkItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\nimport Link from '../../components/link.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandCardLinkItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandCardLink = forwardRef<HTMLDivElement, BrandCardLinkProps>(\n ({ data: { items = [], itemShape }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n const { locale = 'us', trackingData } = useAiuiContext()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3')}>\n {items.map((item, index) => (\n <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandCardLinkItem = ({\n data,\n itemShape,\n index,\n locale,\n}: {\n data: BrandCardLinkItemProps\n itemShape?: 'round' | 'square'\n index: number\n locale: string\n}) => {\n const { trackingData } = useAiuiContext()\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'lg-desktop:p-8 desktop:p-6 p-4',\n // 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n 'box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]',\n itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3\">\n <h3 className=\"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n {data.title}\n </h3>\n <div className=\"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n </div>\n <div className=\"box-border overflow-hidden\">\n <p\n title={data.description || ''}\n className=\"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]\"\n >\n {data.description || ''}\n </p>\n <Link\n href={trackUrlRef(\n getLocalizedPath(data?.link || '', locale),\n `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n )}\n asChild={!data?.link}\n className=\"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline\"\n >\n <span className=\"link-item-text laptop:text-base text-sm\">{data?.linkText}</span>\n <div className=\"size-6\">\n <svg\n width=\"24\"\n height=\"24\"\n className=\"mb-[3px]\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <path\n className=\"transition-all duration-[0.4s]\"\n d=\"M10.5 8L14.5 12L10.5 16\"\n stroke=\"#777\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n ></path>\n </svg>\n </div>\n </Link>\n </div>\n </div>\n )\n}\n\nBrandCardLink.displayName = 'BrandCardLink'\n\nexport default withLayout(BrandCardLink)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "getLocalizedPath", "Picture", "withLayout", "useMediaQuery", "useExposure", "useAiuiContext", "trackUrlRef", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "Link", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "BrandCardLink", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "locale", "trackingData", "itemsArray", "item", "jIndex", "index", "BrandCardLinkItem", "data", "BrandCardLink_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as i,jsxs as B}from"react/jsx-runtime";import c,{useState as u,useEffect as w}from"react";import{Swiper as m,SwiperSlide as g}from"swiper/react";import{Pagination as S,FreeMode as M,Mousewheel as P}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const t=c.forwardRef(({data:e,Slide:a,id:s,isHalf:r,paginationClassName:n},l)=>{const[p,f]=u(!1);return w(()=>{f(!0)},[]),p?B(m,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1,el:`.swiper-pagination-${s}`},className:`!overflow-visible ${n||""}`,modules:[M,P,S],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:r?2:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:r?2:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:[e?.list?.map((d,o)=>i(g,{className:"!h-[unset]",children:i(a,{data:d,configuration:{...e?.configuration,index:o}})},s+"SwiperSlide"+o)),i("div",{className:`swiper-pagination-${s} swiper-pagination`})]}):i("div",{ref:l})});t.displayName="SwiperBox";var N=t;export{N as default};
|
|
2
2
|
//# sourceMappingURL=SwiperCategory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n id: string\n className?: string\n isHalf?: boolean\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n /** \u81EA\u5B9A\u4E49 pagination \u6837\u5F0F\u7C7B\u540D */\n paginationClassName?: string\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(\n ({ data, Slide, id, isHalf, paginationClassName }, ref) => {\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n el: `.swiper-pagination-${id}`,\n }}\n className={`!overflow-visible ${paginationClassName || ''}`}\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n <div className={`swiper-pagination-${id} swiper-pagination`} />\n </Swiper>\n )\n }\n)\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "isHalf", "paginationClassName", "ref", "item", "jIndex", "SwiperCategory_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n data: {\n list: any[]\n configuration?: any\n }\n id: string\n className?: string\n isHalf?: boolean\n breakpoints?: Record<number, Object>\n Slide: React.ComponentType<{ data: any; configuration?: any }>\n /** \u81EA\u5B9A\u4E49 pagination \u6837\u5F0F\u7C7B\u540D */\n paginationClassName?: string\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(\n ({ data, Slide, id, isHalf, paginationClassName }, ref) => {\n const [isMounted, setIsMounted] = useState(false)\n\n useEffect(() => {\n setIsMounted(true)\n }, [])\n\n if (!isMounted) {\n return <div ref={ref as React.Ref<HTMLDivElement>} />\n }\n\n return (\n <Swiper\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n dynamicBullets: false,\n el: `.swiper-pagination-${id}`,\n }}\n className={`!overflow-visible ${paginationClassName || ''}`}\n modules={[FreeMode, Mousewheel, Pagination]}\n breakpoints={{\n 0: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 376: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isHalf ? 2 : 1,\n slidesPerGroup: 1,\n },\n 767: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n slidesPerGroup: 4,\n },\n 1441: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: Math.min(6, data?.list?.length),\n slidesPerGroup: Math.min(6, data?.list?.length),\n },\n }}\n >\n {data?.list?.map((item, jIndex) => (\n <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n </SwiperSlide>\n ))}\n <div className={`swiper-pagination-${id} swiper-pagination`} />\n </Swiper>\n )\n }\n)\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
|
|
5
|
+
"mappings": "aA8Ba,cAAAA,EAIP,QAAAC,MAJO,oBA7Bb,OAAOC,GAAS,YAAAC,EAAU,aAAAC,MAAiB,QAC3C,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAgBP,MAAMC,EAAYR,EAAM,WACtB,CAAC,CAAE,KAAAS,EAAM,MAAAC,EAAO,GAAAC,EAAI,OAAAC,EAAQ,oBAAAC,CAAoB,EAAGC,IAAQ,CACzD,KAAM,CAACC,EAAWC,CAAY,EAAIf,EAAS,EAAK,EAMhD,OAJAC,EAAU,IAAM,CACdc,EAAa,EAAI,CACnB,EAAG,CAAC,CAAC,EAEAD,EAKHhB,EAACI,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,GAChB,GAAI,sBAAsBQ,CAAE,EAC9B,EACA,UAAW,qBAAqBE,GAAuB,EAAE,GACzD,QAAS,CAACP,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAeO,EAAS,EAAI,EAC5B,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,EAC5B,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGH,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,UAAAA,GAAM,MAAM,IAAI,CAACQ,EAAMC,IACtBpB,EAACM,EAAA,CAA8C,UAAU,aACvD,SAAAN,EAACY,EAAA,CAAM,KAAMO,EAAM,cAAe,CAAE,GAAGR,GAAM,cAAe,MAAOS,CAAO,EAAG,GAD7DP,EAAK,cAAgBO,CAEvC,CACD,EACDpB,EAAC,OAAI,UAAW,qBAAqBa,CAAE,qBAAsB,GAC/D,EAjDOb,EAAC,OAAI,IAAKgB,EAAkC,CAmDvD,CACF,EAEAN,EAAU,YAAc,YAExB,IAAOW,EAAQX",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useState", "useEffect", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "isHalf", "paginationClassName", "ref", "isMounted", "setIsMounted", "item", "jIndex", "SwiperCategory_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as o,jsxs as
|
|
1
|
+
"use client";import{jsx as o,jsxs as g}from"react/jsx-runtime";import N,{useImperativeHandle as I,useRef as d}from"react";import{cn as r}from"../../helpers/utils.js";import v from"../../components/picture.js";import{withLayout as $}from"../../shared/Styles.js";import H from"../Title/index.js";import y from"./SwiperCategory.js";import{useExposure as b}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";import{useAiuiContext as w}from"../AiuiProvider/index.js";const c="image",p="category_banner",u=5,L=3,T=(e,a)=>{const t=[];for(let n=0;n<e.length;n+=a)t.push(e.slice(n,n+a));return t},D=({data:e,configuration:a})=>{const t=d(null),{trackingData:n}=w(),i=n?.contextHandle||"";return b(t,{componentType:c,componentName:p,componentTitle:e?.name,position:a?.index+1}),o("div",{className:r("relative max-h-[240px] overflow-hidden"),children:o("div",{className:r("aspect-w-[167] aspect-h-[120]","tablet:aspect-w-[404] tablet:aspect-h-[240]","laptop:aspect-w-[212] laptop:aspect-h-[144]","desktop:aspect-w-[205] desktop:aspect-h-[192]","lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]"),children:g("div",{ref:t,className:r("tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 max-h-[240px] justify-between","bg-container-primary hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300",a?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("div",{className:"flex items-center justify-center transition-all duration-300 group-hover:scale-110",children:o("a",{"aria-label":e?.name,href:k(e?.link,`${i}_${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>a?.event?.primaryButton(e,a?.index),children:o(v,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-1/2 tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),o("p",{className:"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4",children:e?.name})]})})})},E=({data:e,configuration:a,index:t,isFirstItemLarger:n})=>{const i=d(null),{trackingData:s}=w(),m=s?.contextHandle||"";b(i,{componentType:c,componentName:p,componentTitle:e?.name,position:a?.index+1});const l=t===0;return g("div",{ref:i,className:r("bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",n?r("p-4",l?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",a?.shape==="round"?"rounded-2xl":"rounded-none"),children:[o("a",{href:k(e?.link,`${m}_${c}_${p}`),"data-headless-type-name":`${c}#${p}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-position":`''#${a?.index+1}`,onClick:()=>a?.event?.primaryButton(e,a?.index+1),children:o(v,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:r("m-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",n?r(l?"size-full max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),o("p",{className:r("text-info-primary w-full text-center text-sm font-bold",n?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},M=({data:e,configuration:a})=>{const n=(a?.totalCategories??0)<=u;return o("div",{className:`gap-3 ${n?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((i,s)=>o(E,{index:s,data:i,configuration:a,isFirstItemLarger:n},s))})},C=N.forwardRef((e,a)=>{const{data:t,className:n="",key:i,event:s,...m}=e,l=(t?.isShowSelect?t?.products:t?.productData)||[],f=l.length>u,h=l.length,_=T(l,f?L:u),x=d(null);return I(a,()=>x.current),g("div",{...m,ref:x,className:r("w-full overflow-hidden",n,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&o(H,{data:{title:t?.title},className:"text-4xl"}),o("div",{className:"tablet:block hidden",children:o(y,{id:`Category${i}`,Slide:D,data:{list:l,configuration:{shape:t?.shape,event:s,title:t?.title,totalCategories:h}},paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),o("div",{className:"tablet:hidden block",children:o(y,{id:`Category1${i}`,Slide:M,data:{list:_,configuration:{shape:t?.shape,event:s,title:t?.title,totalCategories:h}},isHalf:f,paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),o("div",{className:"h-7"})]})});C.displayName="Category";var G=$(C);export{G as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Category/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\nconst MOBILE_FULL_PAGE_CAPACITY = 5\nconst MOBILE_COMPACT_PAGE_SIZE = 3\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div className={cn('relative max-h-[240px] overflow-hidden')}>\n <div\n className={cn(\n 'aspect-w-[167] aspect-h-[120]',\n 'tablet:aspect-w-[404] tablet:aspect-h-[240]',\n 'laptop:aspect-w-[212] laptop:aspect-h-[144]',\n 'desktop:aspect-w-[205] desktop:aspect-h-[192]',\n 'lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]'\n )}\n >\n <div\n ref={ref}\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 max-h-[240px] justify-between',\n 'bg-container-primary hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"flex items-center justify-center transition-all duration-300 group-hover:scale-110\">\n <a\n aria-label={data?.name}\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-1/2 tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4\">\n {data?.name}\n </p>\n </div>\n </div>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n isFirstItemLarger,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n isFirstItemLarger: boolean\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger\n ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(isFirstItem ? 'size-full max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n : 'size-[72px]'\n )}\n />\n </a>\n <p\n className={cn(\n 'text-info-primary w-full text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n )}\n >\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n const totalCategories = configuration?.totalCategories ?? 0\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCategories <= MOBILE_FULL_PAGE_CAPACITY\n return (\n <div className={`gap-3 ${isFirstItemLarger ? 'grid grid-cols-2' : 'flex h-full flex-col'}`}>\n {data?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n configuration={configuration}\n isFirstItemLarger={isFirstItemLarger}\n />\n ))}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event, ...rest } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = (data?.isShowSelect ? data?.products : data?.productData) || []\n const isCardShow = currentData.length > MOBILE_FULL_PAGE_CAPACITY\n const totalCategories = currentData.length\n const mobileSlides = chunkArray(currentData, isCardShow ? MOBILE_COMPACT_PAGE_SIZE : MOBILE_FULL_PAGE_CAPACITY)\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n return (\n <div\n {...rest}\n ref={innerRef}\n className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{\n list: currentData,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{\n list: mobileSlides,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n isHalf={isCardShow}\n paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nCategory.displayName = 'Category'\n\nexport default withLayout(Category)\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "componentType", "componentName", "MOBILE_FULL_PAGE_CAPACITY", "MOBILE_COMPACT_PAGE_SIZE", "chunkArray", "arr", "size", "chunks", "CategoryPcItem", "data", "configuration", "ref", "SingleMobileItem", "index", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "props", "className", "key", "event", "rest", "currentData", "isCardShow", "totalCategories", "mobileSlides", "innerRef", "Category_default"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\nconst MOBILE_FULL_PAGE_CAPACITY = 5\nconst MOBILE_COMPACT_PAGE_SIZE = 3\n\nexport interface CategoryItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n image: Img\n name: string\n link?: string\n}\n\nexport interface CategoryProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E3B\u9898\u8272*/\n data: {\n isShowSelect: boolean\n products: CategoryItem[]\n productData: CategoryItem[]\n /** \u5361\u7247\u5F62\u72B6 */\n shape?: 'round' | 'square'\n title?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n key?: string\n}\n\nconst chunkArray = (arr: any[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n const { trackingData } = useAiuiContext()\n const contextHandle = trackingData?.contextHandle || ''\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n return (\n <div className={cn('relative max-h-[240px] overflow-hidden')}>\n <div\n className={cn(\n 'aspect-w-[167] aspect-h-[120]',\n 'tablet:aspect-w-[404] tablet:aspect-h-[240]',\n 'laptop:aspect-w-[212] laptop:aspect-h-[144]',\n 'desktop:aspect-w-[205] desktop:aspect-h-[192]',\n 'lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]'\n )}\n >\n <div\n ref={ref}\n className={cn(\n 'tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 max-h-[240px] justify-between',\n 'bg-container-primary hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className=\"flex items-center justify-center transition-all duration-300 group-hover:scale-110\">\n <a\n aria-label={data?.name}\n href={trackUrlRef(data?.link, `${contextHandle}_${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n >\n <Picture\n alt={data?.image?.alt || ''}\n source={data?.image?.url || ''}\n className=\"laptop:size-1/2 tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n />\n </a>\n </div>\n <p className=\"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4\">\n {data?.name}\n </p>\n </div>\n </div>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n data,\n configuration,\n index,\n isFirstItemLarger,\n}: {\n data: CategoryItem\n configuration?: any\n index: number\n isFirstItemLarger: boolean\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n\n const { trackingData } = useAiuiContext()\n const contextHandle = trackingData?.contextHandle || ''\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.name,\n position: configuration?.index + 1,\n })\n\n const isFirstItem = index === 0\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n 'hover:bg-info-white cursor-pointer duration-300',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n isFirstItemLarger\n ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n : 'max-h-[126px] px-3 py-4',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <a\n href={trackUrlRef(data?.link, `${contextHandle}_${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.name}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n >\n <Picture\n source={data?.image?.url || ''}\n alt={data?.image?.alt || ''}\n className={cn(\n 'm-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n isFirstItemLarger\n ? cn(isFirstItem ? 'size-full max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n : 'size-[72px]'\n )}\n />\n </a>\n <p\n className={cn(\n 'text-info-primary w-full text-center text-sm font-bold',\n // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n )}\n >\n {data?.name}\n </p>\n </div>\n )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n const totalCategories = configuration?.totalCategories ?? 0\n // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n const isFirstItemLarger = totalCategories <= MOBILE_FULL_PAGE_CAPACITY\n return (\n <div className={`gap-3 ${isFirstItemLarger ? 'grid grid-cols-2' : 'flex h-full flex-col'}`}>\n {data?.map((item, index) => (\n <SingleMobileItem\n key={index}\n index={index}\n data={item}\n configuration={configuration}\n isFirstItemLarger={isFirstItemLarger}\n />\n ))}\n </div>\n )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n const { data, className = '', key, event, ...rest } = props\n // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n const currentData = (data?.isShowSelect ? data?.products : data?.productData) || []\n const isCardShow = currentData.length > MOBILE_FULL_PAGE_CAPACITY\n const totalCategories = currentData.length\n const mobileSlides = chunkArray(currentData, isCardShow ? MOBILE_COMPACT_PAGE_SIZE : MOBILE_FULL_PAGE_CAPACITY)\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n return (\n <div\n {...rest}\n ref={innerRef}\n className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n <div className=\"tablet:block hidden\">\n <SwiperBox\n id={`Category${key}`}\n Slide={CategoryPcItem}\n data={{\n list: currentData,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n />\n </div>\n <div className=\"tablet:hidden block\">\n <SwiperBox\n id={`Category1${key}`}\n Slide={CategoryMobileItem}\n data={{\n list: mobileSlides,\n configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n }}\n isHalf={isCardShow}\n paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n />\n </div>\n <div className=\"h-7\" />\n </div>\n )\n})\n\nCategory.displayName = 'Category'\n\nexport default withLayout(Category)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "Picture", "withLayout", "Title", "SwiperBox", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "MOBILE_FULL_PAGE_CAPACITY", "MOBILE_COMPACT_PAGE_SIZE", "chunkArray", "arr", "size", "chunks", "i", "CategoryPcItem", "data", "configuration", "ref", "trackingData", "contextHandle", "SingleMobileItem", "index", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "props", "className", "key", "event", "rest", "currentData", "isCardShow", "totalCategories", "mobileSlides", "innerRef", "Category_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import g,{useImperativeHandle as k,useRef as b,useState as y}from"react";import{createPortal as N}from"react-dom";import M from"../Title/index.js";import{cn as n,getLocalizedPath as L}from"../../helpers/utils.js";import T from"../../components/picture.js";import C from"../SwiperBox/index.js";import{withLayout as E}from"../../shared/Styles.js";import{Avatar as P,AvatarImage as $,AvatarFallback as z}from"../../components/avatar.js";import{Container as A}from"../../components/container.js";import{Text as B}from"../../components/text.js";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as H}from"../../shared/trackUrlRef.js";import{useAiuiContext as w}from"../AiuiProvider/index.js";const u="copy",f="product_review",I=({data:e,configuration:i})=>{const p=b(null),{trackingData:m}=w(),[o,d]=y({visible:!1,x:0,y:0,text:""}),a=s=>{const l=Number(s),x=Number.isFinite(l)?Math.max(0,Math.floor(l)):0;return Array.from({length:x})||[]},c=s=>{e?.description&&d({visible:!0,x:s.clientX,y:s.clientY,text:e.description})},v=()=>{d(s=>({...s,visible:!1}))};return D(p,{componentType:u,componentName:f,componentTitle:e?.title,componentDescription:e?.description,position:i?.index+1}),t("div",{ref:p,className:n("bg-background tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300",i?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:r("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[r("div",{className:n("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[r("div",{className:"flex-1",children:[e?.title?t("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,t("div",{className:"mt-1 flex items-center",children:a(e?.rating)?.map?.((s,l)=>t("div",{className:"mr-1",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("path",{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",fill:"#F77234"})})},l))})]}),t("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?r(P,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[t($,{src:e?.avatar?.url}),t(z,{children:e?.title})]}):null})]}),r("div",{className:"flex-1",onMouseMove:c,onMouseLeave:v,children:[t(B,{className:n("lg-desktop:text-2xl text-info-primary evaluate-description line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:e?.description||""}),typeof window<"u"&&o.visible&&N(t("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${o.x+16}px`,top:`${o.y+16}px`},children:o.text}),document.body)]}),t("a",{href:H(L(e?.link||"",i?.locale||"us"),`${m?.contextHandle||""}_${u}_${f}`),onClick:()=>{i?.event?.primaryButton(e,i?.index+1)},"data-headless-type-name":`${u}#${f}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-position":`''#${i?.index+1}`,children:r("div",{className:n("mt-3 flex cursor-pointer items-center overflow-hidden bg-[#F7F8F9] p-3",i?.shape==="round"?"rounded-lg":"rounded-none"),children:[t("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:t(T,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),t("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},h=g.forwardRef(({className:e="",data:i,key:p,...m},o)=>{const{products:d,title:a,theme:c,...v}=i,s=b(null),{locale:l="us",trackingData:x}=w();return k(o,()=>s.current),t("div",{...m,ref:s,className:e,children:t("div",{className:"evaluate-box relative z-10",children:t(A,{...i?.containerProps||{},className:"overflow-hidden",children:r("div",{ref:o,className:n("w-full",e,{"aiui-dark":c==="dark"}),children:[a&&t(M,{data:{title:a}}),t(C,{className:"!overflow-visible",id:"Evaluate"+p,data:{list:d,configuration:{...v,title:a,locale:l}},Slide:I,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});h.displayName="Evaluate";var K=E(h);export{K as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|