{"version":3,"names":["articleBodyTextCss","ArticleBodyTextStyle0","ArticleBodyText","componentDidLoad","elementsWithStyle","this","el","querySelectorAll","forEach","element","tagName","removeAttribute","render","jsonBodyText","JSON","parse","bodyText","h","Host","key","class","backgroundColor","textOrientation","paddingBottom","paddingTop","style","backgroundImage","innerHTML","replace"],"sources":["src/components/article-body-text/article-body-text.css?tag=article-body-text","src/components/article-body-text/article-body-text.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.article-body-container {\n  @apply mx-auto;\n}\n\n.body-text-wrapper {\n  @apply w-full;\n}\n\n.body-text {\n  @apply w-full mx-auto;\n}\n\n/* Article Body Text Style */\n.body-text h1, .body-text h2 {\n  @apply text-ui-gray-1 text-3 sm:text-4 md:text-5 lg:text-6 font-semibold my-20px relative;\n\n}\n.body-text h2:before {\n  @apply text-medium-blue bg-medium-blue h-4px -left-32px sm:-left-64px md:-left-100px xl:-left-120px w-20px sm:w-56px md:w-[80px] xl:w-[100px];\n  content: \"\\0020\"; /* Add a space character before the h2 */\n  font-family: 'Font Awesome 5 Free'; /* Replace with your desired font */\n  font-weight: 900;\n  font-size: 1.25em;\n  display: inline-block;\n  text-align: center;\n  position: absolute;\n  transform: translateY(16px);\n}\n\n.body-text h3 {\n  @apply text-ui-gray-1 text-2 md:text-3 lg:text-4 font-semibold my-20px;\n}\n\n.body-text a {\n  @apply text-medium-blue underline -text-1 md:text-0 hover:text-dark-blue transition-colors cursor-pointer;\n}\n\n/* .body-text p + p {\n  @apply mb-40px;\n} */\n\n.body-text p {\n  @apply text-ui-gray-2 -text-1 md:text-0 mb-12px;\n}\n\n.body-text ul {\n  @apply list-disc;\n}\n\n.body-text ol {\n  @apply list-decimal marker:text-medium-blue;\n}\n\n.body-text li {\n  @apply text-ui-gray-2 -text-1 md:text-0 mb-12px;\n}\n\n\n.body-text table {\n  @apply w-fit h-auto mx-auto;\n}\n\n.body-text table td {\n  @apply border border-ui-gray-4 px-8px py-12px;\n}","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n  tag: 'article-body-text',\n  styleUrl: 'article-body-text.css',\n  shadow: false,\n})\nexport class ArticleBodyText {\n  /**\n   * The title\n   */\n  @Prop() mainTitle: string;\n\n  /**\n   * The Body Text\n   */\n  @Prop() bodyText: string;\n\n  /**\n   * Text Orientation\n   */\n  @Prop() textOrientation: string;\n\n  /**\n   * Buttons Data\n   */\n  @Prop() buttonsData: 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   * 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  /**\n   * Element Selection\n   */\n  @Element() el: HTMLElement;  // This injects a reference to the host element\n\n  // private getText(): string {\n  //   return format(this.first, this.middle, this.last);\n  // }\n\n  componentDidLoad() {\n    // Select all elements with an inline style attribute within a specific container\n    var elementsWithStyle = this.el.querySelectorAll('.body-text-wrapper [style]');\n\n    // Iterate over each element and remove its style attribute\n    elementsWithStyle.forEach(function(element) {\n      // Check if the element is an image\n      if (element.tagName !== 'IMG') { \n        element.removeAttribute('style');\n    }\n    });\n  }\n\n  render() {\n    //console.log('data', this.imageUrl);\n    const jsonBodyText = JSON.parse(this.bodyText);\n    \n    //console.log('jsonBodyText', jsonBodyText);\n    return (\n      <Host>\n        <div\n          class={`${this.backgroundColor} article-body-container flex items-center relative  justify-center ${this.textOrientation} ${this.paddingBottom} ${this.paddingTop}`}\n          style={{ backgroundImage: `url(${this.backgroundImage})` }}\n        >\n          <div class={`body-text-wrapper `}>\n            {this.bodyText && <div class={`body-text`} innerHTML={jsonBodyText.replace(/‘/g, \"'\").replace(/’/g, \"'\").replace(/—/g, '-')}></div>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,4qFAC3B,MAAAC,EAAeD,E,MCMFE,EAAe,M,mXA2E1B,gBAAAC,GAEE,IAAIC,EAAoBC,KAAKC,GAAGC,iBAAiB,8BAGjDH,EAAkBI,SAAQ,SAASC,GAEjC,GAAIA,EAAQC,UAAY,MAAO,CAC7BD,EAAQE,gBAAgB,Q,KAK9B,MAAAC,GAEE,MAAMC,EAAeC,KAAKC,MAAMV,KAAKW,UAGrC,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,GAAGf,KAAKgB,qFAAqFhB,KAAKiB,mBAAmBjB,KAAKkB,iBAAiBlB,KAAKmB,aACvJC,MAAO,CAAEC,gBAAiB,OAAOrB,KAAKqB,qBAEtCT,EAAA,OAAAE,IAAA,2CAAKC,MAAO,sBACTf,KAAKW,UAAYC,EAAA,OAAKG,MAAO,YAAaO,UAAWd,EAAae,QAAQ,OAAQ,KAAKA,QAAQ,OAAQ,KAAKA,QAAQ,OAAQ,S"}