{"file":"vds-teaser-small.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,2mMAA2mM,CAAC;AACtoM,6BAAe,iBAAiB;;MCMnB,cAAc;;;wBAON,EAAE;uBAMH,EAAE;oBAKL,EAAE;6BAKyB,MAAM;;IAEhD,MAAM;QACJ,IAAG,IAAI,CAAC,aAAa,IAAI,MAAM,EAAE;YAC/B,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,mHAAmH,IAC5H,WAAK,KAAK,EAAC,+DAA+D,IACxE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,uEAAuE,IAChF,UAAI,KAAK,EAAC,gGAAgG,EAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAO,EAC1I,UAAI,KAAK,EAAC,wGAAwG,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAO,EACjJ,SAAG,KAAK,EAAC,uFAAuF,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAM,EAC3H,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACD,EACP;SACH;aACI,IAAG,IAAI,CAAC,aAAa,IAAI,OAAO,EAAE;YACrC,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,mHAAmH,IAC5H,WAAK,KAAK,EAAC,uEAAuE,IAChF,UAAI,KAAK,EAAC,gGAAgG,EAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,GAAO,EAC1I,UAAI,KAAK,EAAC,wGAAwG,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAO,EACjJ,SAAG,KAAK,EAAC,uFAAuF,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAM,EAC3H,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,EACN,WAAK,KAAK,EAAC,+DAA+D,IACxE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACD,EACP;SACH;KACF;;;;;;","names":[],"sources":["src/components/vds-teaser-small/vds-teaser-small.scss?tag=vds-teaser-small&encapsulation=shadow","src/components/vds-teaser-small/vds-teaser-small.tsx"],"sourcesContent":[":host {\r\n  @apply block;\r\n}\r\n\r\n::slotted(img) {\r\n  @apply w-full h-full object-cover;\r\n}\r\n\r\n::slotted(picture) {\r\n  @apply flex w-full h-auto overflow-hidden;\r\n}\r\n\r\n:host([media-position=\"right\"]) {\r\n  ::slotted(img),\r\n  ::slotted(picture) {\r\n    @apply rounded-none md:rounded-[5px];\r\n  }\r\n}\r\n\r\n\r\n:host([media-position=\"right\"]) {\r\n  ::slotted(img),\r\n  ::slotted(picture) {\r\n    @apply rounded-none md:rounded-[5px];\r\n  }\r\n}\r\n","import { Component, Host, h, Prop} from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'vds-teaser-small',\r\n  styleUrl: 'vds-teaser-small.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsTeaserSmall {\r\n\r\n  /**\r\n   * Sets the headline of the component\r\n   * Mandatory: yes\r\n   * Max Chars: 50\r\n   */\r\n  @Prop() headline = '';\r\n\r\n  /**\r\n   * Subline displayed underneath the headline\r\n   * Mandatory: no\r\n   */\r\n  @Prop() subline = '';\r\n\r\n  /**\r\n   * Text content displayed above the call to action slot\r\n   */\r\n  @Prop() copy = '';\r\n\r\n  /**\r\n   * Sets the position of the media slot\r\n   */\r\n  @Prop() mediaPosition: 'left' | 'right' = 'left';\r\n\r\n  render() {\r\n    if(this.mediaPosition == \"left\") {\r\n      return (\r\n        <Host>\r\n          <div class=\"relative bg-white flex flex-wrap box-border border-2 border-grey-lighter border-b-8 border-b-yellow rounded-[5px]\">\r\n            <div class=\"box-border sm:w-6/12 lg:w-4/12 sm:py-[50px] sm:pl-[50px] pr-0\">\r\n              <slot name=\"media\"></slot>\r\n            </div>\r\n            <div class=\"sm:w-6/12 lg:w-8/12 p-[50px] bg-[length:57%] bg-[-45%_0] bg-no-repeat\">\r\n              <h2 class=\"font-heavy text-h2-mobile sm:text-h2-tablet lg:text-h2-desktop text-grey uppercase break-words\" innerHTML={this.headline}></h2>\r\n              <h3 class=\"font-regular text-s2-mobile sm:text-s2-tablet lg:text-s2-desktop text-berry uppercase mt-2 break-words\" innerHTML={this.subline}></h3>\r\n              <p class=\"font-regular text-base-mobile sm:text-base-tablet lg:text-base-desktop text-grey my-7\" innerHTML={this.copy}></p>\r\n              <slot name=\"cta\"></slot>\r\n            </div>\r\n          </div>\r\n        </Host>\r\n      );\r\n    }\r\n    else if(this.mediaPosition == \"right\") {\r\n      return (\r\n        <Host>\r\n          <div class=\"relative bg-white flex flex-wrap box-border border-2 border-grey-lighter border-b-8 border-b-yellow rounded-[5px]\">\r\n            <div class=\"sm:w-6/12 lg:w-8/12 p-[50px] bg-[length:57%] bg-[-45%_0] bg-no-repeat\">\r\n              <h2 class=\"font-heavy text-h2-mobile sm:text-h2-tablet lg:text-h2-desktop text-grey uppercase break-words\" innerHTML={this.headline}></h2>\r\n              <h3 class=\"font-regular text-s2-mobile sm:text-s2-tablet lg:text-s2-desktop text-berry uppercase mt-2 break-words\" innerHTML={this.subline}></h3>\r\n              <p class=\"font-regular text-base-mobile sm:text-base-tablet lg:text-base-desktop text-grey my-7\" innerHTML={this.copy}></p>\r\n              <slot name=\"cta\"></slot>\r\n            </div>\r\n            <div class=\"box-border sm:w-6/12 lg:w-4/12 sm:py-[50px] sm:pr-[50px] pr-0\">\r\n              <slot name=\"media\"></slot>\r\n            </div>\r\n          </div>\r\n        </Host>\r\n      );\r\n    }\r\n  }\r\n\r\n}\r\n"],"version":3}