{"version":3,"file":"CardList.js","names":["define","gsap","analytics","helper","CardList","args","scope","window","matchMedia","matches","recalculateCards","querySelectorAll","forEach","tekCard","querySelector","addEventListener","cloneFullWidthCard","cloneNode","classList","remove","add","appendChild","tekExpandedCardsContainer","tekCollapsedCardsContainer","tekCardsExpanded","tekCardExpanded","tekCardBtnExpanded","expandedCard","closest","cardHeaderHeadingsExpandedCard","innerText","fromTo","opacity","duration","onComplete","tekCardCollapsed","cardHeaderCollapsedCard","cardHeaderHeadingsCollapsedCard","setupExpandedCardButton","scrollIntoView","behavior","block","inline","setTimeout","card","style","transition","tekCardsHeader","tekCardHeader","toggle","setupMobile","tekCards","contains","cardTrackedId","value","isNotNullOrUndefined","registerClick","replace","registerCardClick","addColumnsClasses","tekCardsVisible","tekCardsCounts","exactCardCount","cardIndex","index","length","tekCardsModulo","removeColumnsClasses","add3ColumnsClass","isExperienceEditor"],"sources":["site/Components/CardList.js"],"mappings":"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","sourcesContent":["define([\r\n    \"gsap\",\r\n    \"site/TEKsystems.SitecoreXP.Analytics\",\r\n    \"site/Components/Shared/Helper\"\r\n], function (\r\n    { gsap },\r\n    analytics,\r\n    helper\r\n) {\r\n    function CardList(args) {\r\n        const BREAKPOINT_DESKTOP = \"(min-width: 768px)\";\r\n        if (window.matchMedia(BREAKPOINT_DESKTOP).matches) {\r\n            recalculateCards(args.scope);\r\n            setupCardButtons(args.scope);\r\n        }\r\n        else {\r\n            setupMobile(args.scope);\r\n        }\r\n        registerCardClick(args.scope);\r\n    }\r\n    function registerCardClick(scope) {\r\n        const tekCards = scope.querySelectorAll(\".tek-card\");\r\n        tekCards.forEach((tekCard) => {\r\n            const tekCardCtaElement = tekCard.querySelector(\".tek-card-btn\")\r\n            tekCardCtaElement.addEventListener('mousedown', () => {\r\n                const isCardExpanded = tekCard.classList.contains(\"tek-card-open\");\r\n                if (!isCardExpanded) {\r\n                    const cardTrackedId = tekCard.querySelector(\"input[name=tracking]\").value;\r\n                    const tekCardHeader = tekCard.querySelector(\".tek-card-header\");\r\n                    const hasCardTrackedId = helper.isNotNullOrUndefined(cardTrackedId);\r\n                    hasCardTrackedId && analytics.registerClick(\"Expand\", tekCardHeader.innerText.replace(/(\\r\\n|\\n|\\r)/gm, \"\"), cardTrackedId);\r\n                }\r\n            });\r\n        });\r\n    }\r\n    function setupMobile(scope) {\r\n        const tekCardsHeader = scope.querySelectorAll(\".tek-card-header\");\r\n        tekCardsHeader.forEach((tekCardHeader) => {\r\n            tekCardHeader.addEventListener('click', () => {\r\n                const tekCard = tekCardHeader.closest(\".tek-card\");\r\n                tekCard.classList.toggle('tek-card-open');\r\n            });\r\n        });\r\n    }\r\n\r\n    function removeColumnsClasses(tekCardsVisible) {\r\n        tekCardsVisible.forEach((tekCard) => {\r\n            tekCard.classList.remove(\"fit-3\");\r\n            tekCard.classList.remove(\"fit-2\");\r\n        });\r\n    }\r\n\r\n    function add3ColumnsClass(tekCardsVisible) {\r\n        tekCardsVisible.forEach((tekCard) => {\r\n            tekCard.classList.add(\"fit-3\");\r\n    \r\n        });\r\n    }\r\n\r\n    function addColumnsClasses(tekCardsVisible, tekCardsCounts, exactCardCount, cardIndex) {\r\n        tekCardsVisible.forEach((tekCard, index) => {\r\n            if (tekCardsCounts === exactCardCount) {\r\n                tekCard.classList.add(\"fit-2\");\r\n            } else {\r\n                if (index < cardIndex) {\r\n                    tekCard.classList.add(\"fit-3\");\r\n                } else {\r\n                    tekCard.classList.add(\"fit-2\");\r\n                }\r\n            }\r\n        });\r\n    }\r\n    function recalculateCards(scope) {\r\n        // 9 => 3 + 3 + 3 => Modulo 0\r\n        // 8 => 3 + 3 + 2 => Modulo 2\r\n        // 7 => 3 + 2 + 2 => Modulo 1\r\n        // 6 => 3 + 3 => Modulo 0\r\n        // 5 => 3 + 2 => Modulo 2\r\n        // 4 => 2 + 2 => Modulo 1\r\n        // 3 => 3 => Modulo 0\r\n        // 2 => 2 => Modulo 2\r\n        // 1 => 1 => Modulo 1\r\n\r\n        const tekCardsVisible = scope.querySelectorAll(\".tek-collapsed-cards .tek-card:not(.hidden)\");\r\n        const tekCardsCounts = tekCardsVisible.length;\r\n        const tekCardsModulo = tekCardsCounts % 3;\r\n        removeColumnsClasses(tekCardsVisible);\r\n\r\n        if (tekCardsCounts > 1 && tekCardsModulo === 1) {\r\n            // last 4 cards fit-2 - others fit-3\r\n            addColumnsClasses(tekCardsVisible, tekCardsCounts, 4, 3)\r\n        } else if (tekCardsCounts === 2 || (tekCardsCounts > 4 && tekCardsModulo === 2)) {\r\n            // last 2 cards fit-2 - others fit-3\r\n            addColumnsClasses(tekCardsVisible, tekCardsCounts, 2, 3)\r\n        } else if (tekCardsCounts >= 3 && tekCardsModulo === 0) {\r\n            // all fit-3\r\n            add3ColumnsClass(tekCardsVisible)\r\n        }\r\n    }\r\n\r\n    function setupCardButtons(scope) {\r\n        const tekCards = scope.querySelectorAll(\".tek-collapsed-cards .tek-card\");\r\n        tekCards.forEach((tekCard) => {\r\n            const tekCardBtn = tekCard.querySelector(\".tek-card-btn\");\r\n            tekCardBtn.addEventListener('click', () => {\r\n                const cloneFullWidthCard = tekCard.cloneNode(true);\r\n                cloneFullWidthCard.classList.remove(\"fit-2\");\r\n                cloneFullWidthCard.classList.remove(\"fit-3\");\r\n                cloneFullWidthCard.classList.add(\"invisible\");\r\n                const tekExpandedCardsContainer = scope.querySelector(\".tek-expanded-cards\");\r\n                tekExpandedCardsContainer.appendChild(cloneFullWidthCard);\r\n                tekCard.classList.add(\"hidden\");\r\n                \r\n                setupExpandedCardButton(scope);\r\n                recalculateCards(scope);\r\n\r\n                cloneFullWidthCard.scrollIntoView({\r\n                    behavior: 'smooth',\r\n                    block: 'end',\r\n                    inline: 'nearest'\r\n                });\r\n                setTimeout(() => {\r\n                    cloneFullWidthCard.classList.remove(\"invisible\");\r\n                    fadeIn(cloneFullWidthCard, 1000)\r\n                }, 500)\r\n            });\r\n        });\r\n    }\r\n\r\n    function fadeIn(card, duration) {\r\n        card.style.transition = `opacity ${duration}ms`;\r\n        card.classList.add('visible');\r\n    }\r\n\r\n    function setupExpandedCardButton(scope) {\r\n        const tekExpandedCardsContainer = scope.querySelector(\".tek-expanded-cards\"); \r\n        const tekCollapsedCardsContainer = scope.querySelector(\".tek-collapsed-cards\");\r\n        const tekCardsExpanded = tekExpandedCardsContainer.querySelectorAll(\".tek-card\");\r\n\r\n        tekCardsExpanded.forEach((tekCardExpanded) => {\r\n            const tekCardBtnExpanded = tekCardExpanded.querySelector(\".tek-card-btn\");\r\n            tekCardBtnExpanded.addEventListener('click', () => {\r\n                \r\n                const expandedCard = tekCardBtnExpanded.closest(\".tek-card\");\r\n                const cardHeaderExpandedCard = expandedCard.querySelector(\".tek-card-header\");\r\n                const cardHeaderHeadingsExpandedCard = cardHeaderExpandedCard.querySelector(\"*:first-child\").innerText;\r\n                gsap.fromTo(expandedCard, { opacity: 1 }, {\r\n                    opacity: 0, duration: 1, onComplete: function () {\r\n                        expandedCard.remove();\r\n                    }\r\n                });\r\n\r\n                const tekCardsCollapsed = tekCollapsedCardsContainer.querySelectorAll(\".tek-card\");\r\n                tekCardsCollapsed.forEach((tekCardCollapsed) => {\r\n                    const cardHeaderCollapsedCard = tekCardCollapsed.querySelector(\".tek-card-header\");\r\n                    const cardHeaderHeadingsCollapsedCard = cardHeaderCollapsedCard.querySelector(\"*:first-child\").innerText;\r\n                    if (cardHeaderHeadingsExpandedCard === cardHeaderHeadingsCollapsedCard) {\r\n                        cardHeaderCollapsedCard.closest(\".tek-card\").classList.remove(\"hidden\");\r\n                    }\r\n                });  \r\n                recalculateCards(scope)\r\n            });\r\n        });\r\n\r\n    }\r\n\r\n    return function init(args) {\r\n        if (!args.isExperienceEditor) {\r\n            CardList(args);\r\n        }\r\n    };\r\n});"]}