{"version":3,"names":["promoBlocksCss","PromoBlocksStyle0","PromoBlocks","componentDidLoad","addIntersectionObserver","this","el","shadowRoot","querySelector","classList","add","render","cards","JSON","parse","cardsData","h","Host","key","class","paddingBottom","paddingTop","length","map","title","description","button","image","imageAlt","index","textColor","style","backgroundImage","backgroundColor","innerHTML","cta","buttonsData","imageUrl","imageClass"],"sources":["src/components/promo-blocks/promo-blocks.css?tag=promo-blocks&encapsulation=shadow","src/components/promo-blocks/promo-blocks.tsx"],"sourcesContent":["/* @import '../../global/app.css'; */\n@import '../../global/min-app.css';\n\n:host {\n @apply selection:text-dark-blue selection:bg-logo-orange font-poppins;\n display: block;\n}\n\n.promo-block-container {\n @apply mt-72px sm:mt-0 relative;\n}\n\n.promo-block-container.promo-blocks-flexed {\n @apply flex md:flex-row justify-center items-stretch sm:mt-72px flex-col;\n}\n\n.promo-block-container .promo-block {\n @apply w-full h-auto md:max-w-[100%] min-h-[250px] md:min-h-[200px] flex flex-col-reverse sm:flex-row items-start sm:items-center rounded-[12px] px-16px md:px-40px relative md:justify-evenly gap-x-[16px];\n}\n\n.promo-block-container.promo-blocks-flexed .promo-block{\n @apply flex md:flex-col-reverse items-start sm:items-center justify-end;\n}\n\n.promo-block-container .promo-block .promo-block-content {\n @apply block w-fit h-auto sm:max-w-[75%] md:max-w-[40%] text-left py-24px sm:py-40px;\n}\n\n.promo-block-container .promo-block .promo-block-content.promo-block-single-shift{\n @apply md:pb-0 md:pt-[25px] md:max-h-[188px];\n}\n\n.promo-block-container.promo-blocks-flexed .promo-block .promo-block-content{\n @apply w-full h-full max-w-[90%] md:!max-w-[100%] flex flex-col items-start;\n}\n\n.promo-block-container .promo-block .promo-block-content .promo-block-content-title {\n @apply font-poppins font-semibold fs-2;\n}\n\n.promo-block-container .promo-block .promo-block-content .promo-block-content-description {\n @apply font-poppins fs-1 mt-12px;\n}\n\n.promo-block-container .promo-block .promo-block-asset-wrapper {\n @apply w-full h-full max-w-[217px] md:max-w-[500px] relative md:self-end aspect-square;\n}\n\n.promo-block-container .promo-block .promo-block-asset-wrapper.promo-block-single-asset {\n @apply md:max-h-[250px] md:max-w-[250px];\n}\n\n.promo-block-container .promo-block .promo-block-asset {\n @apply w-full h-full object-cover rounded-[12px];\n\n}\n\n.promo-block-container.promo-blocks-flexed .promo-block .promo-block-asset-wrapper {\n @apply h-auto md:!self-start max-w-[217px] md:max-w-[270px] aspect-square;\n}\n\n/* .promo-block-container.promo-blocks-flexed .promo-block .promo-block-asset {\n @apply !bottom-auto !top-0 !left-0;\n transform: translateY(-50%) !important;\n} */\n\n.promo-block-container .promo-block .promo-block-content-buttons-mobile {\n @apply w-fit mt-16px md:hidden;\n}\n\n.promo-block-container .promo-block .promo-block-content-buttons-desktop {\n @apply hidden md:flex flex-row justify-end md:w-fit;\n}\n\n.promo-block-container .promo-block .promo-block-content-buttons-desktop.promo-block-single-shift {\n @apply md:translate-y-[10%];\n}\n\n.promo-block-container.promo-blocks-flexed .promo-block .promo-block-content-buttons-desktop {\n @apply !hidden;\n}\n\n.promo-block-container.promo-blocks-flexed .promo-block .promo-block-content-buttons-mobile {\n @apply !block;\n}\n\n.promo-block-container .promo-block .promo-block-content-buttons-desktop a {\n @apply w-fit\n}\n\n.promo-block-background {\n @apply w-full h-[90%] sm:w-[90%] sm:h-full md:w-full md:h-[90%] absolute bottom-0 left-0 z-[-1] rounded-xl;\n}\n\n.promo-block-background.promo-block-background-slim {\n @apply w-full h-[90%] sm:w-[90%] sm:h-full md:w-full md:h-[85%];\n}\n\n.promo-blocks-flexed .promo-block .promo-block-background.two, .promo-blocks-flexed .promo-block .promo-block-background.three {\n @apply !h-full md:!h-[90%];\n}\n\n/* Animation fadeIn */\n@keyframes fade-in {\n 0% {\n opacity: 0.40;\n }\n 100% {\n opacity: 0;\n }\n}\n\n.overlay1, .overlay2, .overlay3, .overlay4, .overlay5, .overlay6{\n @apply bg-white absolute w-full h-full top-0 left-0 z-10 opacity-50;\n /* filter: grayscale(100%); */\n animation-fill-mode: forwards;\n animation-timing-function: ease-in-out;\n animation-duration: 200ms;\n}\n\n.promo-block-container.animate .overlay1 {\n animation-name: fade-in;\n animation-delay: 0s;\n }\n \n.promo-block-container.animate .overlay2 {\n animation-name: fade-in;\n animation-delay: .15s;\n}\n\n.promo-block-container.animate .overlay3 {\n animation-name: fade-in;\n animation-delay: 0.3s;\n}","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { addIntersectionObserver } from '../../utils/utils';\n\n@Component({\n tag: 'promo-blocks',\n styleUrl: 'promo-blocks.css',\n shadow: true,\n})\nexport class PromoBlocks {\n /**\n * The title\n */\n @Prop() mainTitle: string;\n\n /**\n * The description\n */\n @Prop() description: string;\n\n /**\n * Cards Data\n */\n @Prop() cardsData: string;\n\n /**\n * Background Color\n */\n @Prop() backgroundColor: string;\n\n /**\n * Text Color\n */\n @Prop() textColor: string;\n\n /**\n * Padding Top\n */\n @Prop() paddingTop: string;\n\n /**\n * Padding Bottom\n */\n @Prop() paddingBottom: string;\n\n /**\n * Background Image Url\n */\n @Prop() backgroundImage: string;\n\n @Element() el: HTMLElement;\n\n componentDidLoad() {\n addIntersectionObserver(\n this.el.shadowRoot.querySelector('.promo-block-container'),\n () => {\n this.el.shadowRoot.querySelector('.promo-block-container').classList.add('animate');\n },\n ['.overlay1', '.overlay2', '.overlay3'],\n );\n }\n\n render() {\n const cards = JSON.parse(this.cardsData);\n\n return (\n \n
\n
= 2 ? 'promo-blocks-flexed' : ''}`}>\n {cards.length > 0 &&\n cards.map(({ title, description, button, image, imageAlt }, index) => (\n
= 2 ? 'promo-blocks-column' : ''} `}>\n
\n = 2 && index === 0 ? 'md:!rounded-r-none md:!rounded-l-xl !rounded-b-none' : ''\n } ${cards.length == 2 && index === 1 ? 'md:!rounded-l-none md:!rounded-r-xl !rounded-t-none two' : ''} ${\n cards.length >= 3 && index === 1 ? 'md:!rounded-r-none md:!rounded-l-none !rounded-t-none two' : ''\n } ${cards.length >= 3 && index === 2 ? 'md:!rounded-l-none three' : ''}`}\n >
\n
\n {title &&

{title}

}\n {description &&
}\n {button.cta && (\n
\n {' '}\n {' '}\n
\n )}\n
\n\n
\n {image && }\n
\n\n {button.cta && (\n
\n {' '}\n {' '}\n
\n )}\n
\n ))}\n
\n \n \n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,m7yBACvB,MAAAC,EAAeD,E,MCOFE,EAAW,M,oPA2CtB,gBAAAC,GACEC,EACEC,KAAKC,GAAGC,WAAWC,cAAc,2BACjC,KACEH,KAAKC,GAAGC,WAAWC,cAAc,0BAA0BC,UAAUC,IAAI,UAAU,GAErF,CAAC,YAAa,YAAa,a,CAI/B,MAAAC,GACE,MAAMC,EAAQC,KAAKC,MAAMT,KAAKU,WAE9B,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,iCAAiCd,KAAKe,iBAAiBf,KAAKgB,cACtEL,EAAA,OAAAE,IAAA,2CAAKC,MAAO,yBAAyBP,EAAMU,QAAU,EAAI,sBAAwB,MAC9EV,EAAMU,OAAS,GACdV,EAAMW,KAAI,EAAGC,QAAOC,cAAaC,SAAQC,QAAOC,YAAYC,IAC1Db,EAAA,OAAKG,MAAO,eAAed,KAAKyB,aAAalB,EAAMU,QAAU,EAAI,sBAAwB,OACvFN,EAAA,OAAKG,MAAO,UAAUU,EAAQ,MAC9Bb,EAAA,OACEe,MAAO,CAAEC,gBAAiB,OAAO3B,KAAK2B,oBACtCb,MAAO,0BAA0BP,EAAMU,QAAU,EAAI,8BAAgC,OAAOjB,KAAK4B,mBAC/FrB,EAAMU,QAAU,GAAKO,IAAU,EAAI,sDAAwD,MACzFjB,EAAMU,QAAU,GAAKO,IAAU,EAAI,0DAA4D,QACjGjB,EAAMU,QAAU,GAAKO,IAAU,EAAI,4DAA8D,MAC/FjB,EAAMU,QAAU,GAAKO,IAAU,EAAI,2BAA6B,OAEtEb,EAAA,OAAKG,MAAO,uBAAuBP,EAAMU,QAAU,EAAI,2BAA6B,MACjFE,GAASR,EAAA,MAAIG,MAAO,6BAA8BK,GAClDC,GAAeT,EAAA,OAAKG,MAAO,kCAAmCe,UAAWT,IACzEC,EAAOS,KACNnB,EAAA,OAAKG,MAAO,sCACT,IACDH,EAAA,gBAAcoB,YAAaV,IAAwB,MAKzDV,EAAA,OAAKG,MAAO,6BAA6BP,EAAMU,QAAU,EAAI,2BAA6B,MACvFK,GAASX,EAAA,eAAaqB,SAAUV,EAAOC,SAAUA,EAAUU,WAAY,uBAGzEZ,EAAOS,KACNnB,EAAA,OAAKG,MAAO,uCAAuCP,EAAMU,QAAU,EAAI,2BAA6B,MACjG,IACDN,EAAA,gBAAcoB,YAAaV,IAAwB,U"}