{"version":3,"names":["articleRelatedArticlesCss","ArticleRelatedArticlesStyle0","ArticleRelatedArticles","this","isSticky","isAtBottom","navScroll","sideNav","el","querySelector","flexibleContent","document","navTop","offsetTop","navHeight","offsetHeight","contentBottom","window","scrollY","style","position","top","sideNavigation","onscroll","componentDidLoad","addIntersectionObserver","classList","add","render","cards","JSON","parse","cardsData","count","length","h","Host","key","class","mainTitle","map","title","category","image_url","image_alt","link","imageUrl","imageAlt","imageClass","href"],"sources":["src/components/article-related-articles/article-related-articles.css?tag=article-related-articles","src/components/article-related-articles/article-related-articles.tsx"],"sourcesContent":["/* @import '../../global/min-app.css'; */\n\n:host {\n  @apply selection:text-dark-blue selection:bg-logo-orange font-poppins scroll-smooth;\n  display: block;\n}\n\n.blog-side-nav {\n  @apply sticky top-0 w-full;\n}\n\n.related-article-container {\n  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 gap-12px;\n}\n\n.related-article-item:hover {\n  @apply bg-ui-gray-6;\n  transtion: all 0.2s ease-in-out;\n}\n\n.card {\n  @apply relative ;\n}\n\n.card-image-container {\n  @apply aspect-video max-w-[125px] rounded-xl overflow-hidden;\n}\n\n.card-image {\n  @apply aspect-video max-w-[125px] rounded-xl object-cover;\n}\n\n\n.card-text-container {\n  @apply md:max-w-[50%] xl:max-w-none;\n}\n\n.card-overlay {\n  @apply absolute top-0 left-0 w-full h-full  flex items-center justify-center rounded-xl;\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 {\n  @apply bg-white absolute w-full h-full top-0 left-0 z-10 opacity-50;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease-in-out;\n  animation-duration: 200ms;\n}\n\n.blog-side-nav.animate .overlay1 {\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: 'article-related-articles',\n  styleUrl: 'article-related-articles.css',\n  shadow: false,\n})\nexport class ArticleRelatedArticles {\n  /**\n   * Cards Data\n   */\n  @Prop() cardsData: string;\n  /**\n   * Main Title\n   */\n  @Prop() mainTitle: string;\n\n  @Element() el: HTMLElement;\n  private isSticky = false;\n  private isAtBottom = false;\n\n  navScroll() {\n    //check if nav needs to be stopped\n    const sideNav = this.el.querySelector('.blog-side-nav') as HTMLElement;\n    const flexibleContent = document.querySelector('.article-content-wrapper') as HTMLElement;\n\n    const navTop = sideNav.offsetTop;\n    const navHeight = sideNav.offsetHeight;\n    const contentBottom = flexibleContent.offsetTop + flexibleContent.offsetHeight;\n\n    if (!this.isSticky && window.scrollY >= navTop) {\n      sideNav.style.position = 'sticky';\n      this.isSticky = true;\n    } else if (this.isSticky && window.scrollY < navTop) {\n      sideNav.style.position = 'static';\n      this.isSticky = false;\n    }\n\n    if (!this.isAtBottom && window.scrollY >= contentBottom - navHeight) {\n      // sideNav.style.position = 'absolute';\n      sideNav.style.top = `-300px`;\n      this.isAtBottom = true;\n    } else if (this.isAtBottom && window.scrollY < contentBottom - navHeight) {\n      sideNav.style.position = 'sticky';\n      this.isAtBottom = false;\n    }\n  }\n\n  sideNavigation() {\n    window.onscroll = () => this.navScroll();\n  }\n\n  componentDidLoad() {\n    // window.setTimeout(() => {\n    //   this.sideNavigation();\n    // }, 300);\n    addIntersectionObserver(\n      this.el.querySelector('.blog-side-nav'),\n      () => {\n        this.el.querySelector('.blog-side-nav').classList.add('animate');\n      },\n      ['.overlay1'],\n    );\n  }\n  render() {\n    const cards = JSON.parse(this.cardsData);\n    const count = cards.length;\n    return (\n      <Host>\n        <div class={`flex flex-col gap-12px blog-side-nav`}>\n          <div class={`overlay1`}></div>\n          <h2 class={`fs-0 text-ui-gray-1 font-semibold border-b-2 border-ui-gray-6 pb-12px`}>{this.mainTitle}</h2>\n          <div class={`related-article-container blog-side-nav-container-mobile`}>\n            {cards.length > 0 &&\n              cards.map(({ title, category, image_url, image_alt, link }) => (\n                <div class={`related-article-item flex flex-row items-center justify-start text-start flex-grow rounded-xl card gap-12px group `}>\n                  <div class=\"card-image-container relative overflow-hidden\">\n                    {image_url && <image-block imageUrl={image_url} imageAlt={image_alt} imageClass={`card-image`}></image-block>}\n                    {/* {image_url && <img src={image_url} alt={image_alt} class={`card-image`} />} */}\n                  </div>\n                  <div class={`card-text-container`}>\n                    {category && <p class={`text-ui-gray-2 fs--1 capitalize mb-8px`}>{category}</p>}\n                    {title && <h3 class={`card-title line-clamp-2 text-ui-gray-1 font-medium fs--1`}>{title}</h3>}\n                    {link && count > 1 ? <div class={`card-link `}></div> : <div class={`learn-more-btn`}>Learn more</div>}\n                  </div>\n                  <a class={`card-overlay`} href={link}></a>\n                </div>\n              ))}\n          </div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAA4B,8gDAClC,MAAAC,EAAeD,E,MCOFE,EAAsB,M,yBAWzBC,KAAAC,SAAW,MACXD,KAAAE,WAAa,M,kDAErB,SAAAC,GAEE,MAAMC,EAAUJ,KAAKK,GAAGC,cAAc,kBACtC,MAAMC,EAAkBC,SAASF,cAAc,4BAE/C,MAAMG,EAASL,EAAQM,UACvB,MAAMC,EAAYP,EAAQQ,aAC1B,MAAMC,EAAgBN,EAAgBG,UAAYH,EAAgBK,aAElE,IAAKZ,KAAKC,UAAYa,OAAOC,SAAWN,EAAQ,CAC9CL,EAAQY,MAAMC,SAAW,SACzBjB,KAAKC,SAAW,I,MACX,GAAID,KAAKC,UAAYa,OAAOC,QAAUN,EAAQ,CACnDL,EAAQY,MAAMC,SAAW,SACzBjB,KAAKC,SAAW,K,CAGlB,IAAKD,KAAKE,YAAcY,OAAOC,SAAWF,EAAgBF,EAAW,CAEnEP,EAAQY,MAAME,IAAM,SACpBlB,KAAKE,WAAa,I,MACb,GAAIF,KAAKE,YAAcY,OAAOC,QAAUF,EAAgBF,EAAW,CACxEP,EAAQY,MAAMC,SAAW,SACzBjB,KAAKE,WAAa,K,EAItB,cAAAiB,GACEL,OAAOM,SAAW,IAAMpB,KAAKG,W,CAG/B,gBAAAkB,GAIEC,EACEtB,KAAKK,GAAGC,cAAc,mBACtB,KACEN,KAAKK,GAAGC,cAAc,kBAAkBiB,UAAUC,IAAI,UAAU,GAElE,CAAC,a,CAGL,MAAAC,GACE,MAAMC,EAAQC,KAAKC,MAAM5B,KAAK6B,WAC9B,MAAMC,EAAQJ,EAAMK,OACpB,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,wCACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,aACZH,EAAA,MAAAE,IAAA,2CAAIC,MAAO,yEAA0EnC,KAAKoC,WAC1FJ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,4DACTT,EAAMK,OAAS,GACdL,EAAMW,KAAI,EAAGC,QAAOC,WAAUC,YAAWC,YAAWC,UAClDV,EAAA,OAAKG,MAAO,sHACVH,EAAA,OAAKG,MAAM,iDACRK,GAAaR,EAAA,eAAaW,SAAUH,EAAWI,SAAUH,EAAWI,WAAY,gBAGnFb,EAAA,OAAKG,MAAO,uBACTI,GAAYP,EAAA,KAAGG,MAAO,0CAA2CI,GACjED,GAASN,EAAA,MAAIG,MAAO,4DAA6DG,GACjFI,GAAQZ,EAAQ,EAAIE,EAAA,OAAKG,MAAO,eAAuBH,EAAA,OAAKG,MAAO,kBAAgB,eAEtFH,EAAA,KAAGG,MAAO,eAAgBW,KAAMJ,SAK1CV,EAAA,QAAAE,IAAA,6C"}