{"version":3,"names":["zrBannerxHeroCss","ZrBannerxHeroStyle0","ZrBannerxHero","render","h","key","href","this","ctaLink","ctaText","class","trans","srcSet","backgroundImage","type","media","src","mobileImage","alt","ariaLabel","loading","zrBannerxSliderCss","ZrBannerxSliderStyle0","ZrBannerxSlider","scrollTileIntoView","tile","slider","scrollTo","left","offsetLeft","behavior","handlePrevClick","Array","from","querySelectorAll","filter","scrollLeft","pop","handleNextClick","shift","products","length","ref","el","id","map","product","sku","Object","assign","citrusAdId","ctaTextAccessibility","zrBannerxSliderControlCss","ZrBannerxSliderControlStyle0","ZrBannerxSliderControl","role","onClick","bannerxPrevClick","emit","bannerxNextClick","zrBannerxWrapperCss","ZrBannerxWrapperStyle0","ZrBannerxWrapper","validHosts","citrusad","container","resolve","CitrusadService","loadBanner","async","getBanner","category","searchTerm","categoryPageRegExp","RegExp","isValidHost","some","host","window","location","hostname","endsWith","isCategoryPage","test","pathname","componentDidLoad","response","citrusadBannerData","Build","isBrowser","_a","sponsored","_b","bannerx","trackCitrusAd","style","setProperty","_c","bannerTextColour","_e","_d","backgroundColour","handleAddCartClick","detail","quantity","console","log","handleProductClick","Host","headingText","heroImageAltText","secondaryBackgroundImage","innerHTML","bannerText"],"sources":["src/components/zr-bannerx/zr-bannerx-hero.scss?tag=zr-bannerx-hero&encapsulation=shadow","src/components/zr-bannerx/zr-bannerx-hero.tsx","src/components/zr-bannerx/zr-bannerx-slider.scss?tag=zr-bannerx-slider&encapsulation=shadow","src/components/zr-bannerx/zr-bannerx-slider.tsx","src/components/zr-bannerx/zr-bannerx-slider-control.scss?tag=zr-bannerx-slider-control&encapsulation=shadow","src/components/zr-bannerx/zr-bannerx-slider-control.tsx","src/components/zr-bannerx/zr-bannerx-wrapper.scss?tag=zr-bannerx-wrapper&encapsulation=shadow","src/components/zr-bannerx/zr-bannerx-wrapper.tsx"],"sourcesContent":["// component name\n$component: 'zr-bannerx-hero';\n\n.#{$component}__image {\n max-width: 100%;\n min-width: 100%;\n height: auto;\n}\n\n.#{$component}__badge {\n background-color: var(--ci-neutral800);\n border-bottom-left-radius: 8px;\n color: #fff;\n font-weight: 600;\n padding: 4px 8px;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 10;\n}\n","import { Component, h, Prop } from '@stencil/core'\nimport { trans } from '~/store'\n\n@Component({\n tag: 'zr-bannerx-hero',\n styleUrl: 'zr-bannerx-hero.scss',\n shadow: true,\n})\n\n/**\n * ZooRoyal Banner X Hero.\n */\nexport class ZrBannerxHero {\n /**\n * The aria label for the image.\n */\n @Prop() ariaLabel: string\n\n /**\n * The hero image.\n */\n @Prop() backgroundImage: string\n\n /**\n * The mobile hero image.\n */\n @Prop() mobileImage: string\n\n /**\n * The CTA Link.\n */\n @Prop() ctaLink: string\n\n /**\n * The CTA Text.\n */\n @Prop() ctaText: string\n\n /**\n * Renders the component.\n */\n render() {\n return (\n \n \n {trans('frontend/detail/index.promotion', 'Gesponsert')}\n \n \n \n \n )\n }\n}\n","// component name\n$component: 'zr-bannerx-slider';\n\n@use '../zr-theme/zr-variables.scss' as *;\n\n.#{$component}__wrapper {\n overflow-x: scroll;\n\n @media only screen and (min-width: $tablet-screen) {\n border-radius: 0 0 6px 6px;\n }\n\n .#{$component}__slider {\n left: 0;\n padding: 8px 8px 8px 0;\n position: relative;\n transition: left 200ms ease-in-out;\n display: flex;\n flex-wrap: nowrap;\n gap: 0;\n\n @media only screen and (min-width: $tablet-screen) {\n padding-bottom: 20px;\n }\n }\n}\n\nzr-product-tile {\n padding: 0 10px;\n min-width: 300px;\n\n @media only screen and (min-width: $tablet-screen) {\n min-width: 282px;\n border: none;\n }\n}\n\nzr-product-tile::part(tile) {\n border-left: solid 1px var(--ci-neutral200);\n border-right: solid 1px var(--ci-neutral200);\n box-shadow: 0 5px 15px var(--ci-neutral400);\n border-radius: 8px;\n}\n\nzr-product-tile::part(rating) {\n min-height: 24px;\n display: block;\n\n @media only screen and (min-width: $tablet-screen) {\n min-height: auto;\n }\n}\n\n","import { Component, h, Listen, Prop } from '@stencil/core'\nimport { ListingProduct } from '@rdss/client'\n\n@Component({\n tag: 'zr-bannerx-slider',\n styleUrl: 'zr-bannerx-slider.scss',\n shadow: true,\n})\n\n/**\n * ZooRoyal Banner X Slider.\n */\nexport class ZrBannerxSlider {\n /**\n * The banner X products.\n */\n @Prop() products: ListingProduct[]\n\n /**\n * The CTA text.\n */\n @Prop() ctaText: string\n\n /**\n * The CTA link.\n */\n @Prop() ctaLink: string\n\n /**\n * The CTA text accessibility.\n */\n @Prop() ctaTextAccessibility: string\n\n /**\n * The citrus ad id.\n */\n @Prop() citrusAdId: string\n\n /**\n * Element reference to the scroller.\n */\n private slider: HTMLElement\n\n /**\n * Scroll the tile into view.\n */\n scrollTileIntoView = (tile: HTMLElement) => {\n if (tile) {\n this.slider.scrollTo({ left: tile.offsetLeft, behavior: 'smooth' })\n }\n }\n\n /**\n * Handle the click event on the prev button.\n */\n @Listen('bannerxPrevClick', { target: 'window' })\n handlePrevClick() {\n const tile = Array.from(this.slider.querySelectorAll('zr-product-tile'))\n .filter((tile: HTMLElement) => (tile.offsetLeft - this.slider.scrollLeft < 0))\n .pop()\n this.scrollTileIntoView(tile)\n }\n\n /**\n * Handle the click event on the next button.\n */\n @Listen('bannerxNextClick', { target: 'window' })\n handleNextClick() {\n const tile = Array.from(this.slider.querySelectorAll('zr-product-tile, zr-bannerx-cta'))\n .filter((tile: HTMLElement) => (tile.offsetLeft - this.slider.scrollLeft > 0))\n .shift()\n this.scrollTileIntoView(tile as HTMLElement)\n }\n\n /**\n * Renders the component.\n */\n render() {\n return (this.products && this.products.length > 0) && (\n
(this.slider = el)}>\n
\n {this.products.map(product => (\n \n ))}\n \n
\n
\n )\n }\n}\n","// component name\n$component: 'zr-bannerx-slider-control';\n\n@use '../zr-theme/zr-variables.scss' as *;\n@use \"../zr-css-icon/zr-css-icon.scss\" as i;\n\n:host {\n align-items: end;\n display: flex;\n}\n\n.#{$component} {\n display: flex;\n gap: 8px;\n\n button {\n background: #fff;\n border-radius: 25%;\n border: 1px solid #000;\n color: #000;\n cursor: pointer;\n font-size: 0;\n height: 44px;\n outline: none;\n width: 44px;\n\n &.button-prev {\n @include i.get-icon-left(arrow-left);\n\n &::before {\n position: relative;\n left: -2px;\n }\n }\n\n &.button-next {\n @include i.get-icon-left(arrow-right);\n\n &::before {\n position: relative;\n left: 2px;\n }\n }\n\n @media only screen and (min-width: $tablet-screen) {\n &:hover,\n &:focus-visible {\n background-color: var(--ci-primary400);\n border-color: #fff;\n color: #fff;\n\n &::before {\n background-color: #fff;\n }\n }\n }\n }\n}\n","import { Component, h, Event, EventEmitter } from '@stencil/core'\n\n@Component({\n tag: 'zr-bannerx-slider-control',\n styleUrl: 'zr-bannerx-slider-control.scss',\n shadow: true,\n})\n\n/**\n * ZooRoyal Banner X Slider Controls.\n */\nexport class ZrBannerxSliderControl {\n /**\n * Handle the click event on the prev button.\n */\n @Event() bannerxPrevClick: EventEmitter\n\n /**\n * Handle the click event on the next button.\n */\n @Event() bannerxNextClick: EventEmitter\n\n /**\n * Renders the component.\n */\n render() {\n return (\n
\n Zurück\n \n Weiter\n \n
\n )\n }\n}\n","/**\n * REWE Digital GmbH.\n * IT-Verticals\n *\n * zr-bannerx-wrapper component\n */\n\n@use '../zr-theme/zr-variables.scss' as *;\n@use '../zr-theme/functions/fonts' as f;\n\n// component name\n$component: 'zr-bannerx-wrapper';\n\n// component vars defaults\n:host {\n grid-row-start: 13;\n grid-column: 1 / -1;\n max-width: 100vw;\n margin-bottom: -20px;\n display: var(--zr-bannerx-display, none);\n\n @media only screen and (min-width: $tablet-screen) {\n grid-row-start: 4;\n }\n}\n\n.#{$component} {\n background: var(--zr-bannerx-background-color, #00859B);\n visibility: var(--zr-bannerx-visibility, hidden);\n overflow: hidden;\n position: relative;\n\n @media only screen and (min-width: $tablet-screen) {\n border-radius: 8px;\n }\n\n margin-bottom: 20px;\n}\n\n.#{$component}__content {\n padding: 0 8px 8px;\n}\n\n.#{$component}__head {\n display: flex;\n padding: 8px 0;\n\n .#{$component}__headline {\n color: var(--zr-bannerx-text-color, #fff);\n font-family: \"Museo Sans Rounded\", sans-serif;\n font-size: f.calc-em(20);\n font-weight: 600;\n line-height: 1.2em;\n margin: 8px;\n flex: 1;\n\n @media only screen and (min-width: $tablet-screen) {\n font-size: f.calc-em(32);\n }\n }\n}\n","import { Build, Component, h, Host, State, Prop, Element, Listen } from '@stencil/core'\nimport { container, CitrusadService, CitrusadBanner, ListingProduct } from '@rdss/client'\nimport { trackCitrusAd } from '~/utils'\n\n/**\n * Zoo BannerX.\n *\n * Bin/console ui:widgets:generate.\n */\n@Component({\n tag: 'zr-bannerx-wrapper',\n styleUrl: 'zr-bannerx-wrapper.scss',\n shadow: true,\n})\n\n/**\n * ZooRoyal Banner X Wrapper.\n */\nexport class ZrBannerxWrapper {\n /**\n * Element reference.\n */\n @Element() host: HTMLElement\n\n /**\n * Category property (1 is homepage).\n */\n @Prop() category = 1\n\n /**\n * Search term property (set in search context).\n */\n @Prop() searchTerm = ''\n\n /**\n * Banner X Mock Information property.\n */\n @State() citrusadBannerData: CitrusadBanner\n\n private validHosts = [\n 'hydrate.stenciljs.com',\n '.rdss.it',\n '.de',\n '.at',\n ]\n\n private readonly citrusad = container.resolve(CitrusadService)\n\n private loadBanner = async () => {\n return this.citrusad.getBanner(this.category, this.searchTerm)\n }\n\n /**\n * Regular expression to check if the pathname is a category page.\n */\n private categoryPageRegExp = new RegExp('^\\\\/[^/]+\\\\/$')\n\n /**\n * Checks if the host is valid.\n */\n private isValidHost() {\n return this.validHosts.some(host => window.location.hostname.endsWith(host))\n }\n\n /**\n * Checks pathname is a category page.\n */\n private isCategoryPage() {\n return this.categoryPageRegExp.test(location.pathname)\n }\n\n /**\n * Lifecycle method to set the margin bottom and border radius.\n */\n async componentDidLoad() {\n const response = await this.loadBanner() as unknown as CitrusadBanner\n if (response) {\n this.citrusadBannerData = response\n if (Build.isBrowser) {\n this.citrusadBannerData.products = this.citrusadBannerData?.products.map((product) => {\n product.sponsored = true\n product.citrusAdId = this.citrusadBannerData?.bannerx?.citrusAdId\n trackCitrusAd('impression', product)\n return product\n })\n }\n this.host.style.setProperty('--zr-bannerx-text-color', `#${this.citrusadBannerData?.bannerx?.bannerTextColour}`)\n this.host.style.setProperty('--zr-bannerx-background-color', `#${this.citrusadBannerData?.bannerx?.backgroundColour}`)\n this.host.style.setProperty('--zr-bannerx-display', 'block')\n }\n if (Build.isBrowser) {\n this.host.style.setProperty('--zr-bannerx-visibility', 'visible')\n }\n }\n\n /**\n * Handle add to cart click.\n */\n @Listen('addToCartClicked')\n handleAddCartClick({ detail } : CustomEvent<{ quantity: number, productId: number, context: string, increased: boolean }>) {\n if (detail.quantity > 0) {\n console.log('BANNERX: Add to cart clicked', detail)\n }\n }\n\n /**\n * Handle product click.\n */\n @Listen('productClicked')\n handleProductClick({ detail } : CustomEvent<{ product: ListingProduct }>) {\n // this will also call the pdp and potentially \"eat\" any request made here\n // track clicks on pdp by passing tracking id into parameter, e.g. citrusadid\n console.log('BANNERX: product clicked', detail)\n }\n\n /**\n * Renders the component.\n */\n render() {\n return (\n this.citrusadBannerData &&\n this.citrusadBannerData.products &&\n this.citrusadBannerData.products.length > 0 &&\n this.isValidHost() &&\n !this.isCategoryPage()) && (\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n )\n }\n}\n"],"mappings":";;;6MAAA,MAAMA,EAAmB,uPACzB,MAAAC,EAAeD,E,MCWFE,EAAa,M,0JA6BtB,MAAAC,GACI,OACIC,EAAA,KAAAC,IAAA,2CAAGC,KAAMC,KAAKC,QAAO,aAAcD,KAAKE,SACpCL,EAAA,WAAAC,IAAA,4CACID,EAAA,OAAAC,IAAA,2CACIK,MAAM,0BAA0BC,EAAM,kCAAmC,eAC7EP,EAAA,UAAAC,IAAA,2CACIO,OAAQL,KAAKM,gBACbC,KAAM,aACNC,MAAO,uBAEXX,EAAA,OAAAC,IAAA,2CACIK,MAAM,yBACNM,IAAKT,KAAKU,YACVC,IAAKX,KAAKY,UACVC,QAAQ,W,aCxDhC,MAAMC,EAAqB,+3BAC3B,MAAAC,EAAeD,E,MCWFE,EAAe,M,yBAkCxBhB,KAAAiB,mBAAsBC,IAClB,GAAIA,EAAM,CACNlB,KAAKmB,OAAOC,SAAS,CAAEC,KAAMH,EAAKI,WAAYC,SAAU,U,uIAQhE,eAAAC,GACI,MAAMN,EAAOO,MAAMC,KAAK1B,KAAKmB,OAAOQ,iBAAiB,oBAChDC,QAAQV,GAAuBA,EAAKI,WAAatB,KAAKmB,OAAOU,WAAa,IAC1EC,MACL9B,KAAKiB,mBAAmBC,E,CAO5B,eAAAa,GACI,MAAMb,EAAOO,MAAMC,KAAK1B,KAAKmB,OAAOQ,iBAAiB,oCAChDC,QAAQV,GAAuBA,EAAKI,WAAatB,KAAKmB,OAAOU,WAAa,IAC1EG,QACLhC,KAAKiB,mBAAmBC,E,CAM5B,MAAAtB,GACI,OAAQI,KAAKiC,UAAYjC,KAAKiC,SAASC,OAAS,GAC5CrC,EAAA,OAAAC,IAAA,2CAAKK,MAAM,6BAA6BgC,IAAKC,GAAOpC,KAAKmB,OAASiB,GAC9DvC,EAAA,OAAAC,IAAA,2CAAKuC,GAAG,iBAAiBlC,MAAM,6BAC1BH,KAAKiC,SAASK,KAAIC,GACf1C,EAAA,mBAAiBC,IAAKyC,EAAQC,IAAKD,QAAOE,OAAAC,OAAA,CAAIC,WAAY3C,KAAK2C,YAAeJ,OAElF1C,EAAA,kBAAAC,IAAA,2CACII,QAASF,KAAKE,QACdD,QAASD,KAAKC,QACd2C,qBAAsB5C,KAAK4C,wB,aCvFnD,MAAMC,EAA4B,ugGAClC,MAAAC,EAAeD,E,MCUFE,EAAsB,M,+HAc/B,MAAAnD,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKK,MAAM,6BACPN,EAAA,UAAAC,IAAA,2DACkB,iBACdK,MAAM,cACNI,KAAK,SACLyC,KAAK,SACLC,QAASjD,KAAKkD,iBAAiBC,MAAI,UAGvCtD,EAAA,UAAAC,IAAA,2DACkB,iBACdK,MAAM,cACNI,KAAK,SACLyC,KAAK,SACLC,QAASjD,KAAKoD,iBAAiBD,MAAI,U,aCzCvD,MAAME,EAAsB,s3BAC5B,MAAAC,EAAeD,E,MCiBFE,EAAgB,M,yBAqBjBvD,KAAAwD,WAAa,CACjB,wBACA,WACA,MACA,OAGaxD,KAAAyD,SAAWC,EAAUC,QAAQC,GAEtC5D,KAAA6D,WAAaC,SACV9D,KAAKyD,SAASM,UAAU/D,KAAKgE,SAAUhE,KAAKiE,YAM/CjE,KAAAkE,mBAAqB,IAAIC,OAAO,iB,cA5BrB,E,gBAKE,G,kCA4Bb,WAAAC,GACJ,OAAOpE,KAAKwD,WAAWa,MAAKC,GAAQC,OAAOC,SAASC,SAASC,SAASJ,I,CAMlE,cAAAK,GACJ,OAAO3E,KAAKkE,mBAAmBU,KAAKJ,SAASK,S,CAMjD,sBAAMC,G,cACF,MAAMC,QAAiB/E,KAAK6D,aAC5B,GAAIkB,EAAU,CACV/E,KAAKgF,mBAAqBD,EAC1B,GAAIE,EAAMC,UAAW,CACjBlF,KAAKgF,mBAAmB/C,UAAWkD,EAAAnF,KAAKgF,sBAAkB,MAAAG,SAAA,SAAAA,EAAElD,SAASK,KAAKC,I,QACtEA,EAAQ6C,UAAY,KACpB7C,EAAQI,YAAa0C,GAAAF,EAAAnF,KAAKgF,sBAAkB,MAAAG,SAAA,SAAAA,EAAEG,WAAO,MAAAD,SAAA,SAAAA,EAAE1C,WACvD4C,EAAc,aAAchD,GAC5B,OAAOA,CAAO,G,CAGtBvC,KAAKsE,KAAKkB,MAAMC,YAAY,0BAA2B,KAAIC,GAAAL,EAAArF,KAAKgF,sBAAkB,MAAAK,SAAA,SAAAA,EAAEC,WAAO,MAAAI,SAAA,SAAAA,EAAEC,oBAC7F3F,KAAKsE,KAAKkB,MAAMC,YAAY,gCAAiC,KAAIG,GAAAC,EAAA7F,KAAKgF,sBAAkB,MAAAa,SAAA,SAAAA,EAAEP,WAAO,MAAAM,SAAA,SAAAA,EAAEE,oBACnG9F,KAAKsE,KAAKkB,MAAMC,YAAY,uBAAwB,Q,CAExD,GAAIR,EAAMC,UAAW,CACjBlF,KAAKsE,KAAKkB,MAAMC,YAAY,0BAA2B,U,EAQ/D,kBAAAM,EAAmBC,OAAEA,IACjB,GAAIA,EAAOC,SAAW,EAAG,CACrBC,QAAQC,IAAI,+BAAgCH,E,EAQpD,kBAAAI,EAAmBJ,OAAEA,IAGjBE,QAAQC,IAAI,2BAA4BH,E,CAM5C,MAAApG,GACI,OACII,KAAKgF,oBACLhF,KAAKgF,mBAAmB/C,UACxBjC,KAAKgF,mBAAmB/C,SAASC,OAAS,GAC1ClC,KAAKoE,gBACJpE,KAAK2E,kBACN9E,EAACwG,EAAI,CAAAvG,IAAA,4CACDD,EAAA,WAAAC,IAAA,wDAAqBE,KAAKgF,mBAAmBM,QAAQgB,YAAanG,MAAM,sBACpEN,EAAA,mBAAAC,IAAA,2CACIc,UAAWZ,KAAKgF,mBAAmBM,QAAQiB,iBAC3C7F,YAAaV,KAAKgF,mBAAmBM,QAAQkB,yBAC7ClG,gBAAiBN,KAAKgF,mBAAmBM,QAAQhF,gBACjDL,QAASD,KAAKgF,mBAAmBM,QAAQrF,QACzCC,QAASF,KAAKgF,mBAAmBM,QAAQpF,UAE7CL,EAAA,OAAAC,IAAA,2CAAKK,MAAM,+BACPN,EAAA,OAAAC,IAAA,2CAAKK,MAAM,4BACPN,EAAA,OAAAC,IAAA,2CAAKK,MAAM,+BAA+BsG,UAAWzG,KAAKgF,mBAAmBM,QAAQoB,aACrF7G,EAAA,6BAAAC,IAAA,8CAEJD,EAAA,qBAAAC,IAAA,2CACI6C,WAAY3C,KAAKgF,mBAAmBM,QAAQ3C,WAC5CV,SAAUjC,KAAKgF,mBAAmB/C,SAClC/B,QAASF,KAAKgF,mBAAmBM,QAAQpF,QACzCD,QAASD,KAAKgF,mBAAmBM,QAAQrF,QACzC2C,qBAAsB5C,KAAKgF,mBAAmBM,QAAQ1C,yB"}