{"version":3,"names":["logoRowCss","LogoRowStyle0","LogoRow","componentDidLoad","addIntersectionObserver","this","el","shadowRoot","querySelector","classList","add","render","logoRow","JSON","parse","count","length","h","Host","key","class","backgroundColor","style","backgroundImage","backgroundRepeat","backgroundSize","paddingBottom","paddingTop","map","logo","index","src","url","alt","width","height"],"sources":["src/components/logo-row/logo-row.css?tag=logo-row&encapsulation=shadow","src/components/logo-row/logo-row.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.logo-grid {\n  @apply grid  grid-cols-3  gap-32px w-full items-center md:gap-64px;\n}\n.logo-layout-6 {\n  @apply sm:grid-cols-6 !important;\n}\n\n.logo-layout-5 {\n  @apply md:grid-cols-5 !important;\n}\n\n@media (max-width: 1000px) { /* Tailwind's sm breakpoint for tablet */\n  .logo-layout-5 {\n    @apply grid grid-cols-3;\n  }\n  .logo-layout-5 .grid-item:nth-last-child(-n+2) { /* targets the last two .grid-item elements */\n    @apply col-start-1 col-end-3 self-center;\n  }\n}\n.logo-layout-4 {\n  @apply grid-cols-2 sm:grid-cols-4 !important;\n}\n\n.logo-layout-3 {\n  @apply sm:grid-cols-3 !important;\n}\n\n.logo-layout-2 {\n  @apply sm:grid-cols-2 !important;\n}\n\n.logo-layout-1 {\n  @apply sm:grid-cols-1 !important;\n}\n\n.grid-item {\n  @apply col-span-1 mx-auto ;\n}\n\n.logo-container {\n  @apply flex justify-center items-center aspect-square w-full max-w-[250px] max-h-[250px];\n}\n\n/* Animations */\n@keyframes fade-in {\n  0% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 0;\n\n  }\n}\n\n.overlay1, .overlay2, .overlay3, .overlay4{\n  @apply absolute bg-white w-full h-full top-0 left-0 z-20 opacity-50;\n  /* filter: grayscale(100%); */\n  animation-fill-mode: forwards;\n  animation-timing-function: ease-in-out;\n  animation-duration: .5s;\n}\n\n.logo-grid.animate .overlay1 {\n  animation-name: fade-in;\n  animation-delay: 0s;\n}\n\n.logo-grid.animate .overlay2 {\n  animation-name: fade-in;\n  animation-delay: .15s;\n}\n\n.logo-grid.animate .overlay3 {\n  animation-name: fade-in;\n  animation-delay: .30s;\n}\n\n.logo-grid.animate .overlay4 {\n  animation-name: fade-in;\n  animation-delay: .45s;\n}\n\n.logo-grid.animate .overlay5 {\n  animation-name: fade-in;\n  animation-delay: .60s;\n}\n\n.logo-grid.animate .overlay6 {\n  animation-name: fade-in;\n  animation-delay: .75s;\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { addIntersectionObserver } from '../../utils/utils';\n\n@Component({\n  tag: 'logo-row',\n  styleUrl: 'logo-row.css',\n  shadow: true,\n})\nexport class LogoRow {\n  /**\n   * The title\n   */\n  @Prop() logoRow: string;\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('.logo-grid'),\n      () => {\n        this.el.shadowRoot.querySelector('.logo-grid').classList.add('animate');\n      },\n      ['.overlay1', '.overlay2', '.overlay3', '.overlay4', '.overlay5', '.overlay6', '.overlay7', '.overlay8'],\n    );\n  }\n  render() {\n    const logoRow = JSON.parse(this.logoRow);\n    //console.log(logoRow)\n    const count = logoRow.length;\n    return (\n      <Host>\n        <section class={` ${this.backgroundColor}`} style={{ backgroundImage: `url(${this.backgroundImage})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}>\n          <div class={`container flex items-center relative   justify-center ${this.paddingBottom} ${this.paddingTop} layout-${count}`}>\n            <div class={`logo-grid logo-layout-${count} `}>\n              {logoRow.map((logo, index) => (\n                <div class={`grid-item logo-container`}>\n                  <div class={`overlay${index + 1} ${this.backgroundColor}`}></div>\n                  {/* <image-block imageUrl={logo.url} imageAlt={logo.alt ? logo.alt : 'company logo'} imageClass=\"\"></image-block> */}\n                  <img src={logo.url} alt={logo.alt ? logo.alt : 'company logo'} width=\"250\" height=\"250\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAa,2wqBACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,8LAgClB,gBAAAC,GACEC,EACEC,KAAKC,GAAGC,WAAWC,cAAc,eACjC,KACEH,KAAKC,GAAGC,WAAWC,cAAc,cAAcC,UAAUC,IAAI,UAAU,GAEzE,CAAC,YAAa,YAAa,YAAa,YAAa,YAAa,YAAa,YAAa,a,CAGhG,MAAAC,GACE,MAAMC,EAAUC,KAAKC,MAAMT,KAAKO,SAEhC,MAAMG,EAAQH,EAAQI,OACtB,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WAAAE,IAAA,2CAASC,MAAO,IAAIf,KAAKgB,kBAAmBC,MAAO,CAAEC,gBAAiB,OAAOlB,KAAKkB,mBAAoBC,iBAAkB,YAAaC,eAAgB,UACnJR,EAAA,OAAAE,IAAA,2CAAKC,MAAO,yDAAyDf,KAAKqB,iBAAiBrB,KAAKsB,qBAAqBZ,KACnHE,EAAA,OAAAE,IAAA,2CAAKC,MAAO,yBAAyBL,MAClCH,EAAQgB,KAAI,CAACC,EAAMC,IAClBb,EAAA,OAAKG,MAAO,4BACVH,EAAA,OAAKG,MAAO,UAAUU,EAAQ,KAAKzB,KAAKgB,oBAExCJ,EAAA,OAAKc,IAAKF,EAAKG,IAAKC,IAAKJ,EAAKI,IAAMJ,EAAKI,IAAM,eAAgBC,MAAM,MAAMC,OAAO,c"}