{"file":"vds-teaser-solutions.vds-teaser-solutions-item.entry.js","mappings":"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","names":[],"sources":["src/components/vds-teaser-solutions/vds-teaser-solutions.scss?tag=vds-teaser-solutions&encapsulation=shadow","src/components/vds-teaser-solutions/vds-teaser-solutions.tsx","src/components/vds-teaser-solutions-item/vds-teaser-solutions-item.scss?tag=vds-teaser-solutions-item&encapsulation=shadow","src/components/vds-teaser-solutions-item/vds-teaser-solutions-item.tsx"],"sourcesContent":[":host {\r\n  @apply block;\r\n}\r\n\r\n::slotted([slot=slides]) {\r\n  @apply overflow-visible;\r\n}\r\n","import { Component, Host, h, Element, Prop, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'vds-teaser-solutions',\r\n  styleUrl: 'vds-teaser-solutions.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsTeaserSolutions {\r\n\r\n  @Element() el!: HTMLElement;\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   * Id for connection between the pagination and slides elements\r\n   */\r\n  @Prop() slidesId: string;\r\n\r\n  /**\r\n   * Max value for the pagination element\r\n   */\r\n  @Prop({ mutable: true }) paginationMax: number;\r\n\r\n  /**\r\n   * Disables sliding\r\n   */\r\n  @Prop() disableSlides: boolean = false;\r\n\r\n  /**\r\n   * Sets displayed layout (2 or 3 items per view)\r\n   */\r\n  @Prop() layout: 'halves' | 'thirds' = 'thirds';\r\n\r\n  /**\r\n   * Controls the space between items\r\n   */\r\n  @Prop() spacing: 'default' | 'narrow' = 'default';\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleResize() {\r\n    this.setupSlides();\r\n    this.setPaginationMax();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n\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 mb-6 break-words\" innerHTML={this.subline}></h3>\r\n\r\n        <slot name=\"slides\"></slot>\r\n\r\n        <div\r\n          class={{\r\n            \"flex justify-center pt-[30px]\": true,\r\n            \"pb-[30px]\": this.paginationMax <= 1 || this.disableSlides,\r\n          }}>\r\n          <vds-pagination-progress\r\n            class={{ \"hidden\": this.disableSlides }}\r\n            max={this.paginationMax}\r\n            slides-ref={\"#\" + this.slidesId}>\r\n          </vds-pagination-progress>\r\n        </div>\r\n\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  async connectedCallback(): Promise<void> {\r\n    this.setSlidesId();\r\n  }\r\n\r\n  async componentDidRender(): Promise<void> {\r\n    this.setupSlides();\r\n    this.setPaginationMax();\r\n  }\r\n\r\n  private setSlidesId(): void {\r\n    const slidesEl = this.el.querySelector('vds-slides');\r\n    slidesEl.id = this.slidesId;\r\n  }\r\n\r\n  private setupSlides(): void {\r\n    const slidesEl = this.el.querySelector('vds-slides');\r\n    const slideEl = this.el.querySelectorAll('vds-slide');\r\n    const windowWidth = window.innerWidth;\r\n\r\n    slidesEl.disableCentering();\r\n\r\n    if(this.disableSlides) {\r\n      slidesEl.lockSwipes(true);\r\n    }\r\n\r\n    if(windowWidth >= 1200) {\r\n      if(this.spacing == 'narrow') {\r\n        slidesEl.setSpaceBetween(30);\r\n      }\r\n      else {\r\n        slidesEl.setSpaceBetween(50);\r\n      }\r\n    }\r\n    else {\r\n      slidesEl.setSpaceBetween(30);\r\n    }\r\n\r\n    slideEl.forEach((x) => {\r\n      x.style.width = `auto`;\r\n    });\r\n\r\n    if(this.layout == \"thirds\") {\r\n      if(windowWidth >= 960) {\r\n        slidesEl.setSlidesPerView(3);\r\n      }\r\n      if(windowWidth >= 640 && windowWidth < 960) {\r\n        slidesEl.setSlidesPerView(2);\r\n      }\r\n    }\r\n    else {\r\n      if(windowWidth >= 640) {\r\n        slidesEl.setSlidesPerView(2);\r\n      }\r\n    }\r\n\r\n    if(windowWidth < 640) {\r\n      slidesEl.setSlidesPerView(1);\r\n    }\r\n  }\r\n\r\n  private setPaginationMax(): void {\r\n    const slideCount = this.el.querySelectorAll('vds-slide').length;\r\n    const windowWidth = window.innerWidth;\r\n\r\n    if (this.layout == \"halves\") {\r\n      if (windowWidth >= 640) {\r\n        this.paginationMax = slideCount - 1;\r\n      }\r\n      else if (windowWidth < 640) {\r\n        this.paginationMax = slideCount;\r\n      }\r\n    }\r\n\r\n    if (this.layout == \"thirds\") {\r\n      if (windowWidth >= 960) {\r\n        this.paginationMax = slideCount - 2;\r\n      }\r\n      else if (windowWidth >= 640 && windowWidth < 960) {\r\n        this.paginationMax = slideCount - 1;\r\n      }\r\n      else if (windowWidth < 640) {\r\n        this.paginationMax = slideCount;\r\n      }\r\n    }\r\n  }\r\n\r\n}\r\n",":host {\r\n  @apply block w-full h-full;\r\n}\r\n\r\n::slotted(picture[slot=icon]) {\r\n  @apply w-full;\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'vds-teaser-solutions-item',\r\n  styleUrl: 'vds-teaser-solutions-item.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsTeaserSolutionsItem {\r\n\r\n  /**\r\n   * Headline\r\n   * Mandatory: no\r\n   * Max. 200 chars\r\n   */\r\n   @Prop() headline: string;\r\n\r\n   /**\r\n    * Copy\r\n    * Mandatory: yes\r\n    * Max. 80 chars\r\n    */\r\n   @Prop() copy: string;\r\n\r\n   /**\r\n    * Controls the visibility of the icon slot\r\n    */\r\n   @Prop() showIcon: boolean = true;\r\n\r\n   /**\r\n    * Sets alignment of content\r\n    */\r\n   @Prop() alignment: 'center' | 'left' = 'center';\r\n\r\n   /**\r\n   * Controls the whitespace arround content\r\n   */\r\n  @Prop() spacing: 'default' | 'narrow' = 'default';\r\n\r\n   render() {\r\n    const { headline, copy, showIcon, alignment, spacing } = this;\r\n\r\n     return (\r\n      <Host>\r\n        <div class=\"relative flex flex-col justify-around bg-white border-2 border-grey-lighter border-b-8 border-b-yellow rounded-[5px] pb-[50px] transition duration-300 hover:bg-white hover:shadow-[0_14px_25px_rgba(0,0,0,0.16)] hover:scale-[1.02] hover:cursor-pointer h-full\">\r\n\r\n          { showIcon && (\r\n            <div class=\"flex justify-center overflow-hidden\">\r\n              <slot name=\"icon\"></slot>\r\n            </div>\r\n          )}\r\n\r\n          <div class=\"flex-1 flex flex-col justify-between\">\r\n            <div class={{\r\n              \"px-[20px] sm:px-[30px] pb-[30px]\": true,\r\n              \"pt-6\": !showIcon && spacing === \"default\",\r\n              \"pt-8\": spacing === \"narrow\"\r\n            }}>\r\n              <h3 innerHTML={headline} class={{\r\n                \"flex items-center font-heavy text-h3-mobile sm:text-h3-tablet lg:text-h3-desktop uppercase break-words\": true,\r\n                \"justify-center text-center\": alignment === 'center',\r\n                \"justify-start text-left\": alignment === 'left',\r\n                \"min-h-[64px] mb-[40px]\": spacing === \"default\",\r\n                \"mb-[25px]\": spacing === \"narrow\"\r\n              }}>\r\n              </h3>\r\n              <p class=\"text-grey-dark text-sidebar-mobile sm:text-sidebar-desktop\">{copy}</p>\r\n            </div>\r\n            <div class={{\r\n              \"px-[20px] sm:px-[30px]\": true,\r\n              \"text-center\": alignment === 'center',\r\n              \"text-left\": alignment === 'left',\r\n              \"pt-0\": spacing === \"narrow\",\r\n              \"md:pt-[30px] md:pb-[20px]\": spacing === \"default\",\r\n            }}>\r\n              <slot name=\"cta\"></slot>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </Host>\r\n     );\r\n   }\r\n\r\n}\r\n"],"version":3}