{"version":3,"names":["newsCarouselSinglePageCss","NewsCarouselSinglePage","this","resizeObserver","C7ElementResizeObserver","onCategoriesChange","value","categories","coerceNumberArray","onExcludeCategoriesChange","excludeCategories","onItemsChange","items","onExcludeItemsChange","excludeItems","connectedCallback","observe","element","disconnectedCallback","unobserve","async","page","setPage","client","NewsClient","getArticles","pageSize","articles","render","options","loop","effect","transition","fadeEffect","crossFade","cssClassNames","prevBtn","enablePrevNextButtons","h","class","onClick","_slidesRef","slidePrev","name","nextBtn","slideNext","positionalRender","push","Host","map","el","pager","disablePager","ref","article","category","categoryNames","part","Object","assign","ItemLinkProps","src","teaserPictureUrl","disableCategory","enableDate","DateRender","date","created","format","day","month","year","teaserText","readMoreLabel"],"sources":["./src/components/news/special/news-carousel-single-page/news-carousel-single-page.scss?tag=c7-news-carousel-single-page","./src/components/news/special/news-carousel-single-page/news-carousel-single-page.tsx"],"sourcesContent":[".c7-news-carousel-single-page {\n  display: block;\n  overflow: hidden;\n  overflow: clip;\n  height: var(--c7-news-carousel-single-page-height);\n  position: relative;\n\n  --swiper-pagination-color: var(--c7-500);\n  --c7-news-carousel-single-page-height: 600px;\n  --c7-slide-gap: 4rem;\n  --c7-swiper-pagination-gap: 1rem;\n\n  .c7-news-carousel-center {\n    height: 100%;\n    display: flex;\n    min-width: 0;\n\n    .c7-news-carousel-left, .c7-news-carousel-right {\n      display: flex;\n      align-items: center;\n\n      .c7-carousel-navigation {\n        width: 44px;\n        height: 44px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: transparent;\n        border: none;\n        padding: 0;\n        color: lightgray;\n\n        & > ion-icon {\n          width: 36px;\n          height: 36px;\n          pointer-events: none;\n        }\n      }\n    }\n\n    .c7-news-carousel-main {\n      height: 100%;\n      flex: 1 1 auto;\n      min-width: 0;\n      overflow: hidden;\n\n      c7-slides {\n        height: 100%;\n\n        .swiper-wrapper {\n          c7-slide {\n            align-items: stretch;\n            text-align: left;\n            height: 100%;\n\n            article {\n              display: flex;\n              gap: var(--c7-slide-gap);\n              height: 100%;\n\n              .c7-news-teaser-picture {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                overflow: hidden;\n                flex: 1 1 50%;\n                height: 100%;\n                width: 100%;\n\n                c7-img {\n                  height: 100%;\n                  width: 100%;\n                }\n              }\n\n              .c7-news-teaser-content {\n                flex: 1 1 50%;\n                display: flex;\n                flex-direction: column;\n                gap: 1rem;\n                padding: 2rem 0;\n\n                h3 {\n                  --max-lines: 2;\n                  margin: 0;\n                  display: -webkit-box;\n                  -webkit-box-orient: vertical;\n                  overflow: hidden;\n                  text-overflow: ellipsis;\n                  -webkit-line-clamp: var(--max-lines);\n                }\n\n                p {\n                  --max-lines: 5;\n                  margin: 0;\n                  display: -webkit-box;\n                  -webkit-box-orient: vertical;\n                  overflow: hidden;\n                  text-overflow: ellipsis;\n                  -webkit-line-clamp: var(--max-lines);\n                }\n\n                c7-button {\n                  margin-top: auto;\n                }\n              }\n            }\n          }\n        }\n      }\n\n      .swiper-horizontal > .swiper-pagination-bullets {\n        left: calc(50% + var(--c7-slide-gap) / 2);\n        bottom: 0;\n        width: fit-content;\n        display: flex;\n        gap: var(--c7-swiper-pagination-gap);\n\n        .swiper-pagination-bullet {\n          margin: 0;\n          width: 15px;\n          height: 15px;\n        }\n      }\n    }\n  }\n}\n\n.c7-news-carousel-single-page.size-md,\n.c7-news-carousel-single-page.size-sm,\n.c7-news-carousel-single-page.size-xs {\n  --c7-news-carousel-single-page-height: fit-content;\n\n  c7-slide {\n    article {\n      flex-direction: column;\n      .c7-news-teaser-content {\n        padding: 0 0 2rem;\n      }\n    }\n  }\n  .swiper-pagination {\n    width: 100%;\n    left: 0;\n    justify-content: center;\n  }\n}\n\n:host(.size-md) {\n  --c7-slide-gap: 2rem;\n\n  c7-slides {\n    .swiper-wrapper {\n      c7-slide {\n        article {\n          .c7-news-teaser-picture {\n            c7-img {\n              height: 400px;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.c7-news-carousel-single-page.size-sm {\n  --c7-slide-gap: 1rem;\n\n  c7-slides {\n    .swiper-wrapper {\n      c7-slide {\n        article {\n          .c7-news-teaser-picture {\n            c7-img {\n              height: 300px;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.c7-news-carousel-single-page.size-xs {\n  --c7-slide-gap: 1rem;\n\n  c7-slides {\n    .swiper-wrapper {\n      c7-slide {\n        article {\n          .c7-news-teaser-picture {\n            c7-img {\n              height: 200px;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, Element, Host, h, Prop, State, Watch} from \"@stencil/core\";\nimport { SwiperOptions } from \"swiper\";\nimport { NewsArticleTeaserDto, NewsClient } from \"../../../../api/APIClient\";\nimport { setPage } from \"../../../../utils/page\";\nimport { coerceNumberArray } from '../../../../utils/coerce';\nimport { ItemLinkProps } from '../../../../utils/link';\nimport { C7ElementResizeObserver } from '../../../../utils/resize-observer';\nimport { DateRender } from '../../../utility/date/date';\n\n\n/**\n * @type news\n * @group special\n */\n@Component({\n    tag: \"c7-news-carousel-single-page\",\n    styleUrl: \"news-carousel-single-page.scss\",\n    shadow: false\n})\n\nexport class NewsCarouselSinglePage {\n    @Prop({mutable: true}) page: number;\n\n    /**\n     * @group pagination\n     */\n    @Prop() pageSize: number = 4;\n\n    /**\n     * @group pagination\n     */\n    @Prop() loop: boolean;\n\n    /**\n     * @group pagination\n     */\n    @Prop() enablePrevNextButtons: boolean = false;\n\n    /**\n     * @group pagination\n     */\n    @Prop() disablePager: boolean = false;\n\n    /**\n     * @group label\n     */\n    @Prop() readMoreLabel: string = \"weiterlesen\";\n\n    /**\n     * @group label\n     */\n    @Prop() transition: \"slide\" | \"fade\" = \"slide\";\n\n\n    /**\n    * @group categories\n    */\n    @Prop({mutable: true}) categories: number[] | string = [];\n    @Watch('categories')\n    onCategoriesChange(value) {\n        this.categories = coerceNumberArray(value);\n    }\n\n    /**\n     * @group categories\n     */\n    @Prop({mutable: true}) excludeCategories: number[] | string = [];\n    @Watch('excludeCategories')\n    onExcludeCategoriesChange(value: number[] | string) {\n      this.excludeCategories = coerceNumberArray(value);\n    }\n\n    /**\n     * @group items\n     */\n    @Prop({mutable: true}) items: number[] | string = [];\n    @Watch('items')\n    onItemsChange(value: number[] | string) {\n      this.items = coerceNumberArray(value);\n    }\n\n    /**\n     * @group items\n     */\n    @Prop({mutable: true}) excludeItems: number[] | string = [];\n    @Watch('excludeItems')\n    onExcludeItemsChange(value: number[] | string) {\n      this.excludeItems = coerceNumberArray(value);\n    }\n\n    /**\n     * @group content\n     */\n    @Prop() disableCategory: boolean = false;\n\n  /**\n   * @group content\n   */\n  @Prop() enableDate: boolean = false;\n\n\n  @Element() element: HTMLElement;\n\n    private _slidesRef!: HTMLC7SlidesElement;\n\n    private resizeObserver: C7ElementResizeObserver = new C7ElementResizeObserver( {\n        ['size-xs']: 576,\n        ['size-sm']: 768,\n        ['size-md']: 992,\n        ['size-lg']: 1200,\n        ['size-xl']: 1500,\n        ['size-xxl']: 10000\n    });\n\n    connectedCallback() {\n    this.resizeObserver.observe(this.element);\n    }\n\n    disconnectedCallback() {\n    this.resizeObserver.unobserve(this.element);\n    }\n\n    @State() articles: NewsArticleTeaserDto[] = [];\n\n    async componentWillLoad() {\n        this.categories = coerceNumberArray(this.categories);\n        this.items = coerceNumberArray(this.items);\n        this.excludeCategories = coerceNumberArray(this.excludeCategories);\n        this.excludeItems = coerceNumberArray(this.excludeItems);\n\n        if(!this.page) {\n            await setPage(this);\n        }\n\n        const client = new NewsClient();\n        const {items} = await client.getArticles(this.page, 1, this.pageSize, this.categories, this.items, this.excludeCategories, this.excludeItems);\n\n        this.articles = items;\n\n    }\n\n    render(){\n        const options: SwiperOptions = {\n            loop: this.loop,\n            effect: this.transition,\n            fadeEffect: {\n              crossFade: true\n            },\n        }\n\n        const cssClassNames = {\n            'c7-news': true,\n            'c7-news-carousel-single-page': true\n        }\n\n        const prevBtn = this.enablePrevNextButtons && (\n            <button class={{\n            'c7-carousel-navigation': true,\n            'c7-carousel-navigation-prev': true\n            }} onClick={() => this._slidesRef.slidePrev()}>\n                <ion-icon aria-hidden=\"true\" name=\"chevron-back-outline\" />\n            </button>\n        );\n\n        const nextBtn = this.enablePrevNextButtons && (\n            <button class={{\n              'c7-carousel-navigation': true,\n              'c7-carousel-navigation-next': true\n            }} onClick={() => this._slidesRef.slideNext()}>\n              <ion-icon aria-hidden=\"true\" name=\"chevron-forward-outline\" />\n            </button>\n        );\n\n        const positionalRender = {\n            ['center-left']: [],\n            ['center-right']: []\n        }\n\n        if (this.enablePrevNextButtons) {\n          positionalRender['center-left'].push(prevBtn);\n          positionalRender['center-right'].push(nextBtn);\n        }\n\n        return (\n            <Host class={cssClassNames}>\n                <div class={{'c7-news-carousel-center': true}}>\n                    <div class={{'c7-news-carousel-left': true}}>\n                      {positionalRender['center-left'].map(el => el)}\n                    </div>\n\n                    <div class={{'c7-news-carousel-main': true}}>\n                        <c7-slides options={options} pager={!this.disablePager} ref={(el) => this._slidesRef = el}>\n                    {\n                      this.articles.map( article => {\n                        const {0: category} = article.categoryNames;\n                        return (\n                          <c7-slide>\n                            <article part=\"article\">\n                              <a {...ItemLinkProps(article)}  class={\"c7-news-teaser-picture\"}>\n                                <c7-img src={article.teaserPictureUrl}/>\n                              </a>\n\n                              <div class={\"c7-news-teaser-content\"}>\n\n                                {!this.disableCategory && (\n                                  <div class={\"c7-news-teaser-category\"}>{category.name}</div>\n                                )}\n                                {this.enableDate && (\n                                  <DateRender date={article.created} format={{\n                                    day: '2-digit',\n                                    month: '2-digit',\n                                    year: 'numeric'\n                                  }}/>\n                                )}\n\n                                <h3 class={\"c7-news-teaser-title\"}>{article.name}</h3>\n                                <p class={\"c7-news-teaser-text\"}>{article.teaserText}</p>\n                                <c7-button {...ItemLinkProps(article)}>\n                                  {this.readMoreLabel}\n                                </c7-button>\n\n                              </div>\n                            </article>\n                          </c7-slide>\n                        )\n                      })\n                    }\n                    </c7-slides>\n                    </div>\n\n                    <div class={{'c7-news-carousel-right': true}}>\n                      {positionalRender['center-right'].map(el => el)}\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"],"mappings":"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"}