{"version":3,"names":["bannerArticleCss","BannerArticleStyle0","BannerArticle","componentDidLoad","addIntersectionObserver","this","el","querySelector","classList","add","render","buttons","JSON","parse","buttonsData","tags","tagsData","title","mainTitle","langCode","checkLanguageCookie","href","showTagsIds","h","Host","key","class","paddingBottom","paddingTop","style","backgroundImage","textColor","backgroundColor","postType","replace","postDate","authorName","length","map","button","assetType","imageUrl","imageAlt","imageClass","videoUrl","filter","tag_id","includes","tag_name","index","id","innerHTML"],"sources":["src/components/banner-article/banner-article.css?tag=banner-article","src/components/banner-article/banner-article.tsx"],"sourcesContent":["/* @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.banner-grid-article {\n @apply w-full h-auto grid gap-x-12px font-poppins;\n grid-template-columns: 1fr 2fr;\n grid-template-rows: auto auto;\n}\n.banner-grid-article-container.pt-xsmall,\n.banner-grid-article-container.pt-small,\n.banner-grid-article-container.pt-medium,\n.banner-grid-article-container.pt-large {\n @apply pt-0 !important;\n}\n\n.banner-grid-article-col-1 {\n @apply w-full h-full;\n}\n\n.banner-grid-article-col-2 {\n @apply w-full h-full;\n}\n\n.banner-grid-article .banner-grid-article-content {\n @apply w-full h-full rounded-[12px] flex flex-col justify-center items-start gap-[24px] p-40px;\n}\n\n.banner-grid-article .banner-grid-article-content .banner-grid-article-content-type {\n @apply w-full h-auto font-poppins text-0 md:text-1 font-medium;\n}\n\n.banner-grid-article .banner-grid-article-content .banner-grid-article-content-title {\n @apply w-full h-auto font-poppins text-3 sm:text-4 md:text-5 lg:text-6 font-semibold;\n}\n\n.banner-grid-article .banner-grid-article-content .banner-grid-article-content-byline {\n @apply w-full h-auto font-poppins -text-1 md:text-0 ;\n}\n\n.banner-grid-article .banner-grid-article-content .banner-grid-article-content-byline p {\n @apply inline;\n}\n\n\n.banner-grid-article .banner-grid-article-asset-wrapper {\n @apply w-full h-auto rounded-[12px] max-h-full aspect-video;\n}\n\n.banner-grid-article .banner-grid-article-asset-wrapper .banner-grid-article-asset {\n @apply w-full h-full max-h-full rounded-[12px] object-cover;\n}\n\n.banner-grid-article .banner-grid-article-tags-wrapper {\n @apply w-full h-auto flex flex-wrap justify-start items-center gap-4px px-32px py-16px bg-ui-gray-6 rounded-[12px] mt-12px;\n}\n\n.banner-grid-article .banner-grid-article-tags-wrapper .banner-grid-article-tag {\n @apply w-fit h-auto p-8px border border-ui-gray-4 rounded-[4px] text-ui-gray-2 -text-1 md:text-0 hover:border-medium-blue transition-colors hover:text-ui-gray-1;\n}\n\n@media(max-width: 767px) {\n .banner-grid-article {\n grid-template-columns: 1fr;\n row-gap: 12px;\n }\n}\n\n/* Animate in */@keyframes fade-in {\n 0% {\n opacity: 0.40;\n }\n 100% {\n opacity: 0;\n }\n}\n\n.overlay1, .overlay2 {\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.banner-grid-article-container.animate .overlay1 {\n animation-name: fade-in;\n animation-delay: 0.15s;\n }\n \n .banner-grid-article-container.animate .overlay2 {\n animation-name: fade-in;\n animation-delay: 0s;\n }\n\n@media (min-width: 1000px) {\n .banner-grid-article-container.animate .overlay1 {\n animation-name: fade-in;\n animation-delay: 0s;\n }\n \n .banner-grid-article-container.animate .overlay2 {\n animation-name: fade-in;\n animation-delay: 0.15s;\n }\n\n}\n\n\n.banner-grid-article-container.animate.content-right .overlay1 {\n animation-name: fade-in;\n animation-delay: 0.15s;\n}\n\n.banner-grid-article-container.animate.content-right .overlay2 {\n animation-name: fade-in;\n animation-delay: 0s;\n}","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { addIntersectionObserver, checkLanguageCookie } from '../../utils/utils';\n\n@Component({\n tag: 'banner-article',\n styleUrl: 'banner-article.css',\n shadow: false,\n})\nexport class BannerArticle {\n /**\n * The title\n */\n @Prop() mainTitle: string;\n\n /**\n * Buttons Data\n */\n @Prop() buttonsData: string;\n\n /**\n * Tags Data\n */\n @Prop() tagsData: string;\n\n /**\n * Asset Type\n */\n @Prop() assetType: string;\n\n /**\n * Image alt\n */\n @Prop() imageAlt: string;\n\n /**\n * Image Url\n */\n @Prop() imageUrl: any;\n\n /**\n * Video\n */\n @Prop() videoUrl: string;\n\n /**\n * Author Name\n */\n @Prop() authorName: string;\n\n /**\n * Post Type\n */\n @Prop() postType: string;\n\n /**\n * Post Date\n */\n @Prop() postDate: 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 // private getText(): string {\n // return format(this.first, this.middle, this.last);\n // }\n @Element() el: HTMLElement;\n\n componentDidLoad() {\n addIntersectionObserver(\n this.el.querySelector('.banner-grid-article-container'),\n () => {\n this.el.querySelector('.banner-grid-article-container').classList.add('animate');\n },\n ['.overlay1', '.overlay2'],\n );\n }\n\n render() {\n const buttons = JSON.parse(this.buttonsData);\n const tags = JSON.parse(this.tagsData);\n const title = JSON.parse(this.mainTitle);\n\n // Get the language code from the cookie\n const langCode = checkLanguageCookie('wp-wpml_current_language');\n // Construct the href dynamically\n const href = langCode ? `/${langCode}/resource-center/` : '/resource-center/';\n // const showTags = [\n // 'California Prop 65',\n // 'Chemicals',\n // 'Construction',\n // 'Consumer Packaged Goods',\n // 'ECHA',\n // 'Energy & Utilities',\n // 'EPA',\n // 'EU PCN',\n // 'GHS',\n // 'Healthcare & Hospitals',\n // 'Manufacturing',\n // 'Oil & Gas',\n // 'PFAS',\n // 'Pharma',\n // 'Plastics',\n // 'Product Stewardship',\n // 'REACH',\n // 'Retail',\n // 'RoHS',\n // 'SCIP',\n // 'Supply Chain',\n // 'Sustainability',\n // 'Transportation',\n // 'TSCA',\n // 'UFLPA',\n // 'Workplace Safety',\n // ];\n\n const showTagsIds = [\n 50, //CA Prop 65\n 57, //ECHA\n 59, //EPA\n 61, //EU PCN\n 198, //GHS\n 66, //PFAS\n 105, //Product Stewardship\n 70, //REACH\n 73, //RoHS\n 74, //SCIP\n 80, //UFLPA\n 79, //TSCA\n 126, //Sustainability\n 26, //Chemicals\n 27, //Construction\n 28, //Consumer Packaged Goods\n 127, //Energy & Utilities\n 118, //Healthcare & Hospitals\n 116, //Supply Chain Visibility\n 31, //Manufacturing\n 117, //Oil & Gas\n 33, //Pharma\n 34, //Plastics\n 35, //Retail\n 36, //Transportation\n 92, //Supply Chain\n 119, //Chemical &Workplace Safety\n 186, //Article\n 172, //Case Study\n 187, //Guide\n 189, //News and insights\n 180, //on-demand webinar\n 192, //Press Release\n 176, //Whitepaper\n ];\n return (\n \n
\n
\n
\n
\n
\n {this.postType &&

{this.postType}

}\n {this.mainTitle &&

{title.replace(/‘/g, \"'\").replace(/’/g, \"'\").replace(/—/g, '-')}

}{' '}\n
\n {this.postDate &&

{this.postDate}

}\n {this.postDate && this.authorName &&

  |  

}\n {this.authorName &&

By {this.authorName}

}\n
\n {buttons && buttons.length > 0 && (\n
\n {buttons.map(button => (\n \n ))}\n
\n )}\n
\n
\n
\n
\n
\n {this.assetType === 'image' && this.imageUrl && (\n \n )}\n {this.assetType === 'video' && this.videoUrl && }\n
\n
\n {tags &&\n tags.length > 0 &&\n tags\n .filter(({ tag_id }) => showTagsIds.includes(tag_id)) // Filter the tags array\n .map(({ tag_id, tag_name }, index) => (\n \n
\n \n ))}\n
\n
\n
\n
\n \n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAmB,w8IACzB,MAAAC,EAAeD,E,MCOFE,EAAa,M,8ZAiFxB,gBAAAC,GACEC,EACEC,KAAKC,GAAGC,cAAc,mCACtB,KACEF,KAAKC,GAAGC,cAAc,kCAAkCC,UAAUC,IAAI,UAAU,GAElF,CAAC,YAAa,a,CAIlB,MAAAC,GACE,MAAMC,EAAUC,KAAKC,MAAMR,KAAKS,aAChC,MAAMC,EAAOH,KAAKC,MAAMR,KAAKW,UAC7B,MAAMC,EAAQL,KAAKC,MAAMR,KAAKa,WAG9B,MAAMC,EAAWC,EAAoB,4BAErC,MAAMC,EAAOF,EAAW,IAAIA,qBAA8B,oBA8B1D,MAAMG,EAAc,CAClB,GACA,GACA,GACA,GACA,IACA,GACA,IACA,GACA,GACA,GACA,GACA,GACA,IACA,GACA,GACA,GACA,IACA,IACA,IACA,GACA,IACA,GACA,GACA,GACA,GACA,GACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KAEF,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,2CAA2CrB,KAAKsB,iBAAiBtB,KAAKuB,cAChFL,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,aACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,4BAA6BG,MAAO,CAAEC,gBAAiB,OAAOzB,KAAKyB,qBAC7EP,EAAA,OAAAE,IAAA,2CAAKC,MAAO,0CAA0CrB,KAAK0B,4BAA4B1B,KAAK2B,mBACzF3B,KAAK4B,UAAYV,EAAA,MAAIG,MAAO,+CAAgDrB,KAAK4B,UACjF5B,KAAKa,WAAaK,EAAA,MAAIG,MAAO,qCAAsCT,EAAMiB,QAAQ,OAAQ,KAAKA,QAAQ,OAAQ,KAAKA,QAAQ,OAAQ,MAAY,IAChJX,EAAA,OAAAE,IAAA,2CAAKC,MAAO,sCACTrB,KAAK8B,UAAYZ,EAAA,KAAGG,MAAO,oCAAqCrB,KAAK8B,SAAQ,KAC7E9B,KAAK8B,UAAY9B,KAAK+B,YAAcb,EAAA,KAAGG,MAAO,yCAAuC,SACrFrB,KAAK+B,YAAcb,EAAA,KAAGG,MAAO,sCAAoC,OAAOrB,KAAK+B,aAE/EzB,GAAWA,EAAQ0B,OAAS,GAC3Bd,EAAA,OAAKG,MAAM,yBACRf,EAAQ2B,KAAIC,GACXhB,EAAA,gBAAcT,YAAayB,SAMrChB,EAAA,OAAAE,IAAA,2CAAKC,MAAO,6BACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,aACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,qCACTrB,KAAKmC,YAAc,SAAWnC,KAAKoC,UAClClB,EAAA,eAAakB,SAAUpC,KAAKoC,SAAUC,SAAUrC,KAAKqC,SAAUC,WAAY,8BAE5EtC,KAAKmC,YAAc,SAAWnC,KAAKuC,UAAYrB,EAAA,eAAaqB,SAAUvC,KAAKuC,YAE9ErB,EAAA,OAAAE,IAAA,2CAAKC,MAAO,oCACTX,GACCA,EAAKsB,OAAS,GACdtB,EACG8B,QAAO,EAAGC,YAAaxB,EAAYyB,SAASD,KAC5CR,KAAI,EAAGQ,SAAQE,YAAYC,IAC1B1B,EAAA,KAAG2B,GAAIJ,EAAQrB,IAAKwB,EAAO5B,KAAM,GAAGA,SAAYyB,IAAUpB,MAAM,2BAC9DH,EAAA,OAAK4B,UAAW,GAAGH,a"}