{"version":3,"file":"default/js/experience/layouts/tabCarousels.js","mappings":";;;;;AAAA;;AAEa;;AAEb;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,gCAAgC,qBAAqB,IAAI,8EAA8E;AACvI;;AAEA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,2FAA2F,WAAW;;AAEtG;AACA,oFAAoF,WAAW;AAC/F;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL,CAAC","sources":["webpack://sfra-startup-kit/./cartridges/app_ahumada/cartridge/client/default/js/experience/layouts/tabCarousels.js"],"sourcesContent":["/* eslint-env jquery */\n\n\"use strict\";\n\nconst populateCarouselTabHeaders = ($tabHeader, $carouselContainer) => {\n    $tabHeader.empty();\n\n    const $carousels = $carouselContainer.find(\".js-swiper-products-carousel, .js-einstein-carousel\");\n\n    $carousels.each(function () {\n        const $carousel = $(this);\n        const isEinsteinCarousel = $carousel.hasClass(\"js-einstein-carousel\");\n        const $tabHeaderItem = $(\n            `<li class=\"tab-carousels__tabs-tab js-tab-item font-medium\"\n            data-carousel-id=\"${$carousel.data(\"id\")}\">${isEinsteinCarousel ? $carousel.data(\"carousel-name\") : $carousel.data(\"name\")}</li>`\n        );\n\n        $tabHeader.append($tabHeaderItem);\n    });\n};\n\nconst setupTabCarousel = ($tabCarousel) => {\n    const $tabsContent = $tabCarousel.find(\".js-tab-content\");\n    const $tabCarousels = $tabsContent.find(\".js-swiper-products-carousel, .js-einstein-carousel\");\n    const $tabHeaderContainer = $tabCarousel.find(\".js-tabs\");\n\n    //Take all the carousels, and populate the tab headers by using the name for each one.\n    populateCarouselTabHeaders($tabHeaderContainer, $tabsContent);\n\n    //Take all the populated tab headers into a list for later user, this need to be called after the populateCarouselTabHeaders function.\n    const $tabHeaders = $tabHeaderContainer.find(\".js-tab-item\");\n\n    //On click on a tab header, show the associated tab\n    $tabHeaderContainer.on(\"click\", \".js-tab-item\", function () {\n        const $tabItem = $(this);\n        const carouselId = $tabItem.data(\"carousel-id\");\n        let $selectedCarousel = $tabsContent.find(`.js-swiper-products-carousel[data-id=\"${carouselId}\"]`);\n\n        if ($selectedCarousel.length === 0) {\n            $selectedCarousel = $tabsContent.find(`.js-einstein-carousel[data-id=\"${carouselId}\"]`);\n        }\n\n        //Hide all carousels and inactive all headers\n        $tabCarousels.hide();\n        $tabHeaders.removeClass(\"active\");\n        //Show the selected carousel and activate the selected header\n        $selectedCarousel.show();\n        $tabItem.addClass(\"active\");\n    });\n\n    //On startup, only make the first carousel visible, and make the associated tab header active.\n    $tabCarousels.hide();\n    $tabCarousels.first().show();\n    $tabHeaders.first().addClass(\"active\");\n};\n\n$(window).on(\"load\", () => {\n    const $tabCarousels = $(\".js-tab-carousels\");\n\n    $tabCarousels.each(function () {\n        const $tabCarousel = $(this);\n        setupTabCarousel($tabCarousel);\n    });\n});\n"],"names":[],"sourceRoot":""}