{"file":"vds-teaser-grid.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,+9JAA+9J,CAAC;AACz/J,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;oBAoBD,CAAC;4BAMyB,KAAK;;IAEtD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QACvD,QACE,EAAC,IAAI,uDACH,2DAAI,KAAK,EAAC,oFAAoF,IAAE,QAAQ,CAAM,EAC9G,2DAAI,KAAK,EAAC,4FAA4F,IAAE,OAAO,CAAM,EACrH,4DAAK,KAAK,EAAE;gBACV,MAAM,EAAE,YAAY;gBACpB,qCAAqC,EAAE,CAAC,YAAY;gBACpD,cAAc,EAAE,CAAC,YAAY,IAAI,IAAI,GAAG,CAAC;gBACzC,cAAc,EAAE,CAAC,YAAY,IAAI,IAAI,IAAI,CAAC;aAC3C,IACC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/vds-teaser-grid/vds-teaser-grid.scss?tag=vds-teaser-grid&encapsulation=shadow","src/components/vds-teaser-grid/vds-teaser-grid.tsx"],"sourcesContent":[":host {\r\n  @apply block;\r\n}\r\n\r\n:host([custom-styles=false]) {\r\n  ::slotted([slot=items]) {\r\n    @apply py-3 h-fit;\r\n  }\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'vds-teaser-grid',\r\n  styleUrl: 'vds-teaser-grid.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsTeaserGrid {\r\n\r\n  /**\r\n   * Headline for the Content Modules\r\n   * Mandatory: no\r\n   * Max Chars: 50\r\n   */\r\n  @Prop() headline: string;\r\n\r\n  /**\r\n   * Subline for the Content Module\r\n   * Mandatory: no\r\n   * Max Chars: 150\r\n   */\r\n  @Prop() subline: string;\r\n\r\n  /**\r\n   * Sets the grid columns for desktop\r\n   * min: 2, max: 3\r\n   */\r\n  @Prop() cols: number = 3;\r\n\r\n  /**\r\n   * Set this to true if you want to use your own grid styles.\r\n   * This will remove included styles for the grid.\r\n   */\r\n  @Prop({ reflect: true }) customStyles: boolean = false;\r\n\r\n  render() {\r\n    const { headline, subline, cols, customStyles } = this;\r\n    return (\r\n      <Host>\r\n        <h2 class=\"font-heavy text-h2-mobile sm:text-h2-tablet lg:text-h2-desktop text-grey uppercase\">{headline}</h2>\r\n        <h3 class=\"font-regular text-s2-mobile sm:text-s2-tablet lg:text-s2-desktop text-berry uppercase mt-2\">{subline}</h3>\r\n        <div class={{\r\n          \"pt-6\": customStyles,\r\n          \"sm:columns-2 columns-1 gap-x-6 pt-3\": !customStyles,\r\n          \"md:columns-2\": !customStyles && cols < 3,\r\n          \"md:columns-3\": !customStyles && cols >= 3\r\n        }}>\r\n          <slot name=\"items\"></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}