{"version":3,"names":["articleLargeAssetCss","ArticleLargeAssetStyle0","ArticleLargeAsset","render","h","Host","key","class","this","backgroundColor","paddingBottom","paddingTop","style","backgroundImage","assetType","controls","src","videoUrl","imageUrl","alt","imageAlt","caption"],"sources":["src/components/article-large-asset/article-large-asset.css?tag=article-large-asset&encapsulation=shadow","src/components/article-large-asset/article-large-asset.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\n.article-container {\n  @apply md:pr-32px w-full;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'article-large-asset',\n  styleUrl: 'article-large-asset.css',\n  shadow: true,\n})\nexport class ArticleLargeAsset {\n  /**\n   * Image Url\n   */\n  @Prop() imageUrl: string;\n  /**\n   * Image alt\n   */\n  @Prop() imageAlt: string;\n  /**\n   * Asset Type\n   */\n  @Prop() assetType: string;\n  /**\n   * Video\n   */\n  @Prop() videoUrl: string;\n  /**\n   * Caption\n   */\n  @Prop() caption: 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  render() {\n    return (\n      <Host>\n        <div class={`article-container ${this.backgroundColor} ${this.paddingBottom} ${this.paddingTop}`} style={{ backgroundImage: `url(${this.backgroundImage})` }}>\n          {this.assetType === 'video' ? <video class={`max-h-full max-w-full overflow-hidden rounded-xl`} controls src={this.videoUrl} /> : null}\n          {this.assetType === 'image' ? <img class={`max-h-full max-w-full overflow-hidden rounded-xl`} src={this.imageUrl} alt={this.imageAlt} /> : null}\n          {this.caption ? <p class=\"text-end fs--1 text-ui-gray-3 my-12px\">{this.caption}</p> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAuB,yinBAC7B,MAAAC,EAAeD,E,MCMFE,EAAiB,M,+RA8C5B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,qBAAqBC,KAAKC,mBAAmBD,KAAKE,iBAAiBF,KAAKG,aAAcC,MAAO,CAAEC,gBAAiB,OAAOL,KAAKK,qBACrIL,KAAKM,YAAc,QAAUV,EAAA,SAAOG,MAAO,mDAAoDQ,SAAQ,KAACC,IAAKR,KAAKS,WAAe,KACjIT,KAAKM,YAAc,QAAUV,EAAA,OAAKG,MAAO,mDAAoDS,IAAKR,KAAKU,SAAUC,IAAKX,KAAKY,WAAe,KAC1IZ,KAAKa,QAAUjB,EAAA,KAAGG,MAAM,yCAAyCC,KAAKa,SAAe,M"}