{"version":3,"names":["bannerEventCss","BannerEventStyle0","BannerEvent","componentDidLoad","addIntersectionObserver","this","el","shadowRoot","querySelector","classList","add","render","buttons","JSON","parse","buttonsData","address","displayAddress","replace","urlAddress","trim","startDate","Date","endDate","months","formattedStartDate","getMonth","getDate","formattedEndDate","getFullYear","startTime","getHours","getMinutes","endTime","displayDate","toDateString","displayTime","h","Host","key","class","textColor","paddingBottom","paddingTop","style","backgroundImage","backgroundColor","postType","mainTitle","length","map","button","details","venueName","href","target","innerHTML","assetType","imageUrl","imageAlt","videoUrl","description"],"sources":["src/components/banner-event/banner-event.css?tag=banner-event&encapsulation=shadow","src/components/banner-event/banner-event.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.banner-grid-event-container.pt-medium {\n  @apply pt-0;\n}\n\n\n.banner-grid-event {\n  @apply w-full h-auto grid gap-8px md:gap-12px font-poppins;\n  grid-template-columns: 1fr 2fr;\n  align-items: stretch;\n}\n\n.banner-grid-event-col-1 {\n  @apply flex flex-col gap-12px;\n}\n\n.banner-grid-event-col-1 > div:first-child {\n  @apply grow;\n}\n\n.banner-grid-event-col-2 {\n  @apply flex flex-col gap-12px;\n}\n\n.banner-grid-event .banner-grid-event-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-event .banner-grid-event-content .banner-grid-event-content-type {\n  @apply w-full h-auto font-poppins fs-1 font-medium;\n}\n\n.banner-grid-event .banner-grid-event-content .banner-grid-event-content-title {\n  @apply w-full h-auto font-poppins fs-4 font-semibold;\n}\n\n.banner-grid-event .banner-grid-event-content .banner-grid-event-content-byline {\n  @apply w-full h-auto font-poppins fs-0 ;\n}\n\n.banner-grid-event .banner-grid-event-content .banner-grid-event-content-byline p {\n  @apply inline;\n}\n\n\n.banner-grid-event .banner-grid-event-asset-wrapper {\n  @apply w-full h-auto rounded-[12px] max-h-[405px];\n}\n\n.banner-grid-event .banner-grid-event-asset-wrapper .banner-grid-event-asset {\n  @apply w-full h-auto max-h-[405px] rounded-[12px] object-cover;\n}\n.presenter-image-wrapper {\n  @apply aspect-square h-100px min-w-100px rounded-l-xl overflow-hidden;\n}\n.presenter-image {\n  @apply w-full h-full object-cover;\n}\n/* Linedin Btn */\n\n.linkedin-btn {\n  @apply block h-24px w-24px fs-2 font-medium rounded text-white transition-colors hover:bg-dark-blue;\n  background-image: url('/wp-content/themes/3ecotheme/component-library/src/assets/color-icons/icon-linkedin.svg');\n  background-size: 24px;\n  background-position:90% center;\n  background-repeat: no-repeat;\n}\n\n\n.banner-grid-event-description {\n  @apply text-white min-w-full prose prose-strong:text-white prose-headings:font-semibold prose-headings:text-white  marker:text-light-blue prose-a:text-light-blue prose-a:hover:text-medium-blue;\n}\n\n.banner-grid-event .banner-grid-event-tags-wrapper {\n  @apply w-full h-auto flex flex-wrap justify-start items-center gap-4px px-20px md:px-32px py-16px bg-ui-gray-6 rounded-[12px];\n}\n\n.banner-grid-event .banner-grid-event-tags-wrapper .banner-grid-event-tag {\n  @apply w-fit h-auto p-8px border-2 border-ui-gray-4 rounded-[4px] text-ui-gray-2 fs-0 hover:border-medium-blue hover:text-ui-gray-1 transition-colors;\n}\n\n.location-icon {\n  @apply w-64px h-64px;\n  background-image: url('/wp-content/themes/3ecotheme/component-library/src/assets/general-icons/icon-distance.svg');\n  background-size: 64px;\n  background-position: center;\n  background-repeat: no-repeat;\n\n}\n\n.calender-icon {\n  @apply w-64px h-64px;\n  background-image: url('/wp-content/themes/3ecotheme/component-library/src/assets/general-icons/icon_calendar_month.svg');\n  background-size: 64px;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n@media(max-width: 767px) {\n  .banner-grid-event {\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-event-container.animate .overlay1 {\n    animation-name: fade-in;\n    animation-delay: 0.15s;\n  }\n  \n  .banner-grid-event-container.animate .overlay2 {\n    animation-name: fade-in;\n    animation-delay: 0s;\n  }\n\n@media (min-width: 1000px) {\n  .banner-grid-event-container.animate .overlay1 {\n    animation-name: fade-in;\n    animation-delay: 0s;\n  }\n  \n  .banner-grid-event-container.animate .overlay2 {\n    animation-name: fade-in;\n    animation-delay: 0.15s;\n  }\n\n}\n\n\n.banner-grid-event-container.animate.content-right .overlay1 {\n  animation-name: fade-in;\n  animation-delay: 0.15s;\n}\n\n.banner-grid-event-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 } from '../../utils/utils';\n\n@Component({\n  tag: 'banner-event',\n  styleUrl: 'banner-event.css',\n  shadow: true,\n})\nexport class BannerEvent {\n  /**\n   * The title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * The Post Date\n   */\n  @Prop() postDate: string;\n\n  /**\n   * The Description\n   */\n  @Prop() description: string;\n\n  /**\n   * The Details\n   */\n  @Prop() details: string;\n\n  /**\n   * The Post Type\n   */\n  @Prop() postType: string;\n\n  /**\n   * Buttons Data\n   */\n  @Prop() buttonsData: string;\n\n  /**\n   * Asset Type\n   */\n  @Prop() assetType: string;\n\n  /**\n   * Address\n   */\n  @Prop() address: string;\n\n  /**\n   * Venue Name\n   */\n  @Prop() venueName: string;\n\n  /**\n   * startDate\n   */\n  @Prop() startDate: string;\n\n  /**\n   * endDate\n   */\n  @Prop() endDate: 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   * 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('.banner-grid-event-container'),\n      () => {\n        this.el.shadowRoot.querySelector('.banner-grid-event-container').classList.add('animate');\n      },\n      ['.overlay1', '.overlay2'],\n    );\n  }\n  render() {\n    const buttons = JSON.parse(this.buttonsData);\n    let address = JSON.parse(this.address);\n\n    let displayAddress = address.replace(/,/g, '');\n    displayAddress = displayAddress.replace(/<\\/?span[^>]*>/g, '');\n\n    let urlAddress = address.replace(/\\+/g, ' ');\n\n    // Replace '+' with ' '\n    urlAddress = urlAddress.replace(/\\+/g, ' ');\n    // Remove all span tags\n    urlAddress = urlAddress.replace(/<\\/?span[^>]*>/g, '');\n    // Remove commas\n    urlAddress = urlAddress.replace(/,/g, '');\n    // Remove extra spaces\n    urlAddress = urlAddress.trim();\n\n    // Replace spaces with '+'\n    urlAddress = urlAddress.replace(/ /g, '+');\n\n    //Date formatting\n    let startDate = new Date(this.startDate);\n    let endDate = new Date(this.endDate);\n\n    let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\n    let formattedStartDate = `${months[startDate.getMonth()]} ${startDate.getDate()}`;\n    let formattedEndDate = `${endDate.getDate()}, ${endDate.getFullYear()}`;\n    let startTime = `${startDate.getHours() % 12 || 12}:${startDate.getMinutes() < 10 ? '0' : ''}${startDate.getMinutes()} ${startDate.getHours() >= 12 ? 'PM' : 'AM'}`;\n    let endTime = `${endDate.getHours() % 12 || 12}:${endDate.getMinutes() < 10 ? '0' : ''}${endDate.getMinutes()} ${endDate.getHours() >= 12 ? 'PM' : 'AM'}`;\n\n    let displayDate = startDate.toDateString() === endDate.toDateString() ? `${formattedStartDate}, ${endDate.getFullYear()}` : `${formattedStartDate}-${formattedEndDate}`;\n\n    let displayTime = startTime === endTime ? `${startTime}` : `${startTime}-${endTime}`;\n\n    return (\n      <Host>\n        <div class={`${this.textColor} container banner-grid-event-container ${this.paddingBottom} ${this.paddingTop}`} style={{ backgroundImage: `url(${this.backgroundImage})` }}>\n          <div class={`overlay1`}></div>\n          <div class={`banner-grid-event`}>\n            <div class={`banner-grid-event-col-1`}>\n              <div class={`bg-light-blue rounded-xl ${this.backgroundColor} ${this.textColor} p-20px md:p-40px flex flex-col justify-center`}>\n                {this.postType && <p class={`fs-1 font-normal text-dark-blue capitalize mb-8px`}>{this.postType}</p>}\n                {this.mainTitle && <h1 class={`fs-4 font-semibold text-dark-blue mb-24px md:mb-32px`}>{this.mainTitle}</h1>}\n                {/* {this.postDate && <p>{this.postDate}</p>} */}\n                <div class={`w-fit`}>{buttons.length > 0 && buttons && buttons.map(button => <button-block buttonsData={button}></button-block>)}</div>\n              </div>\n              <div class={`bg-medium-blue text-white rounded-xl gap-8px flex flex-col p-20px md:p-40px `}>\n                <h4 class={`fs-1 font-semibold mb-8px`}>{this.details}</h4>\n                <div class={`flex items-center bg-light-blue rounded-xl`}>\n                  <div class={`bg-dark-blue rounded-l-xl flex items-center h-full`}>\n                    <div class={`calender-icon`}></div>\n                  </div>\n                  <div class={`px-12px py-20px`}>\n                    {this.startDate && this.endDate && <p>{displayDate}</p>}\n                    {this.startDate && this.endDate && <p>{displayTime}</p>}\n                  </div>\n                </div>\n                <div class={`flex items-center bg-light-blue rounded-xl`}>\n                  <div class={`bg-dark-blue rounded-l-xl flex items-center h-full`}>\n                    <div class={`location-icon`}></div>\n                  </div>\n                  <div class={`px-12px py-20px`}>\n                    {this.venueName && <p class={`pb-12px`}>{this.venueName}</p>}\n                    {this.address && (\n                      <a href={`https://www.google.com/maps/place/${urlAddress}`} target=\"_blank\">\n                        <div innerHTML={displayAddress}></div>\n                      </a>\n                    )}\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class={`banner-grid-event-col-2`}>\n              <div class={`rounded-xl overflow-hidden`}>\n                {this.assetType === 'image' && this.imageUrl && <image-block imageUrl={this.imageUrl} imageAlt={this.imageAlt}></image-block>}\n                {this.assetType === 'video' && this.videoUrl && <video-block videoUrl={this.videoUrl}></video-block>}\n              </div>\n              <div class={`bg-dark-blue p-20px md:p-40px rounded-xl banner-grid-event-description`}>{this.description && <div innerHTML={this.description}></div>}</div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}