1"use strict";(self.webpackChunkwebpack=self.webpackChunkwebpack||[]).push([[8398,6497,6251],{26225:function(e,t,i){i.d(t,{u:function(){return r}});const a=1024,s=1280,r={mobS:{name:"Mobile small",breakpoint:425,breakpointPX:"425px",breakpointW:"425w"},mob:{name:"Mobile",breakpoint:640,breakpointPX:"640px",breakpointW:"640w"},tablet:{name:"Tablet ",breakpoint:a,breakpointPX:"1024px",breakpointW:"1024w"},desktop:{name:"Desktop",breakpoint:s,breakpointPX:"1280px",breakpointW:"1280w"}}},92576:function(e,t,i){i.r(t),i.d(t,{SegmentedButton:function(){return c}});var a=i(68687),s=i(47359),r=i(96627),n=i(77905),d=i(43322);class c extends a.oi{static get properties(){return{name:{type:String,attribute:"name"},truncation:{type:Boolean,attribute:"truncation"},buttons:{type:Array,reflect:!0,attribute:"buttons"}}}constructor(){super(),this.buttons=[],this.truncation=!1}connectedCallback(){super.connectedCallback()}createRenderRoot(){return this}firstUpdated(){this._updateButtons()}_updateButtons(){const e=this.buttons.map(((e,t)=>({...e,id:e.id||(0,n.y)()})));if(!e.some((e=>e.checked&&!e.disabled))&&e.length>0){const t=e.find((e=>!e.disabled));t&&(t.checked=!0)}this.buttons=e}handleChange(e,t){this.buttons=this.buttons.map(((e,i)=>({...e,checked:i===t}))),(0,s.r)(this,"wc-btn-segmented-changed",e.currentTarget)}getInnerSegmentedButton=(e,t)=>a.dy` <div class="a-btn-segmented__item"> 2 <input 3 type="radio" 4 name=${this.name} 5 id="${this.name}-${e.id}" 6 value=${e.value||a.Ld} 7 disabled=${e.disabled||a.Ld} 8 .checked=${e.checked||a.Ld} 9 @change=${e=>this.handleChange(e,t)} 10 /> 11 12 <label class="u-label" for="${this.name}-${e.id}" 13 >${e.icon?(0,d.aT)(e.icon,"u-icon-tiny"):e.checked?(0,d.aT)(r.aX.Available,"u-icon-tiny"):a.Ld} 14 <span class="${this.truncation?"u-text-ellipsis":a.Ld}" 15 >${e.label}</span 16 ></label 17 > 18 </div>`;render(){return a.dy` 19 <div class="a-btn-segmented" role="group"> 20 ${this.buttons.map(((e,t)=>this.getInnerSegmentedButton(e,t)))} 21 </div> 22 `}}customElements.define("wc-btn-segmented",c)},78398:function(e,t,i){i.r(t);var a=i(68687),s=i(13857),r=i(43322),n=i(41181),d=i(35442),c=i(47359),l=(i(92576),i(6251),i(74873)),h=i(77905);class o extends a.oi{static get properties(){return{parm:{type:Object,reflex:!0},selectedData:{type:Object,attribute:!1},categories:{type:Array,attribute:!1},activeCategory:{type:Object,attribute:!1},previews:{type:Array,attribute:!1},selectedPreview:{type:Object,attribute:!1},previewLoading:{type:Boolean,attribute:!1,reflex:!0},mainCardLoading:{type:Boolean,attribute:!1,reflex:!0},cachedData:{type:Array,attribute:!1,reflex:!0}}}set parm(e){const t="string"==typeof e?JSON.parse(e||"{}"):e;this._parm=t,t&&(this.categories=t.categories||[],this.previews=t.previews||[],this.selectedData=t.data||{},this.selectedPreview=this.previews[0],this.activeCategory=this.categories[0],this.activeCategory&&(this.categories[0].checked=!0),this.selectedPreview&&(this.previews[0].checked=!0,this.previews[0].data=this.selectedData),this.groupName=(0,h.y)(),this.createCachedData())}get parm(){return this._parm}constructor(){super(),(0,r.mI)(),this.cachedData={},this.mainCardLoading=!0,this.previewLoading=!0,this.categories=[],this.previews=[],this.isPreviewChanging=!1,this.isCategoryChanging=!1,this.handleCategoryChanged=this.handleCategoryChanged.bind(this),this.handlePreviewChanged=this.handlePreviewChanged.bind(this),this.categoryDataCallback=this.categoryDataCallback.bind(this),this.previewChangeCallback=this.previewChangeCallback.bind(this)}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.addEventListener("wc-btn-segmented-changed",this.handleCategoryChanged)}disconnectedCallback(){super.disconnectedCallback(),this.cachedData={},this.removeEventListener("wc-btn-segmented-changed",this.handleCategoryChanged)}firstUpdated(){if(super.firstUpdated(),this.reverseCtas(),this.previews.length&&(this.createCachedData(),this.setShadows()),this.mainSlider=this.querySelector("wc-slider-thumb-main"),!this.mainSlider)return this.mainCardLoading=!1,void(this.previewLoading=!1);this.mainSlider.addEventListener("swiperReady",(e=>{this.mainSlider=e.detail.swiper,this.mainCardLoading=!1,this.previewLoading=!1}))}createCachedData(){if(this.categories.length){let e=this.categories;e[0].items=this.previews,this.cachedData=e.reduce(((e,t)=>(e[t.id]={label:t.label,items:t.items||[]},e)),{})}else this.cachedData.items=this.previews}async setShadows(){requestAnimationFrame((()=>{const e=this.querySelector(".js-shadow");e&&(0,l.Xy)(e.firstElementChild,e)}))}setActiveCategory(e){this.categories&&(this.categories=this.categories.map((t=>{const i=t.value===e;return i&&(this.activeCategory=t),{...t,checked:i}})),this.activeCategory||(this.activeCategory=this.categories[0]))}setActivePreview(){this.previews.length&&(this.selectedPreview=this.previews.find((e=>e.checked))||this.previews[0],this.selectedPreview&&(this.selectedPreview.checked=!0))}cachedDataExist(e){const t=this.cachedData.items||this.cachedData[this.activeCategory.id]?.items;if(t?.length){e||(this.previews=t.map((({data:e,...t})=>t)),this.setActivePreview());const i=t.find((e=>e.id===this.selectedPreview.id));if(i.data)return this.selectedData=i.data,!0}return!1}updateCachedData(){const e=this.cachedData[this.activeCategory?.id]||this.cachedData;e.items?.length||(e.items=this.previews,e.checked=!0);const t=e.items.find((e=>e.id===this.selectedPreview.id));t&&(t.data=this.selectedData)}handlePreviewChanged=e=>{e&&(this.previews=this.previews.map((t=>{const i=t.id===e.currentTarget.value;return i&&(this.selectedPreview=t),{...t,checked:i}})),this.cachedDataExist(!0)||(this.mainCardLoading=!0,this.isPreviewChanging=!0,this.isCategoryChanging=!0,(0,c.r)(this,"wc-inspiration-sli
22der-preview-changed",{category:this.activeCategory,preview:this.selectedPreview,callback:this.previewChangeCallback})))};previewChangeCallback=e=>{this.selectedData=e,this.reverseCtas(),this.updateCachedData(),this.isPreviewChanging=!1,this.isCategoryChanging=!1,this.mainCardLoading=!1};handleCategoryChanged=e=>{e&&(this.setActiveCategory(e.detail.value),this.setShadows(),this.cachedDataExist()||(this.mainCardLoading=!0,this.previewLoading=!0,this.isCategoryChanging=!0,(0,c.r)(this,"wc-inspiration-slider-category-changed",{category:this.activeCategory,callback:this.categoryDataCallback})))};categoryDataCallback=e=>{this.previews=e.previews,this.setActivePreview(),this.selectedData=e.data,this.reverseCtas(),this.updateCachedData(),this.mainCardLoading=!1,this.previewLoading=!1,this.isCategoryChanging=!1};reverseCtas(){this.selectedData.ctas&&this.selectedData.ctas?.reverse()}getCategoriesHtml(){return this.categories.length>1?a.dy`<div 23 class="wc-inspiration-slider__categories" 24 aria-busy="${this.isCategoryChanging||a.Ld}" 25 is-loading-disabled="${this.isCategoryChanging||a.Ld};" 26 > 27 <wc-btn-segmented 28 name=${this.parm.name} 29 buttons="${JSON.stringify(this.categories.map((({items:e,...t})=>t)))}" 30 ></wc-btn-segmented> 31 </div>`:a.Ld}getMediaSliderHtml(){const e=this.selectedData.mediaItems;return e.length?e.length>1?a.dy`<div class="wc-slider-wrapper m-card-inspiration__slider"> 32 <wc-slider-thumb-main 33 class="wc-slider-main u-h-100" 34 till-label=${this.parm.tillLabel} 35 > 36 <wc-slider-wrapper> 37 ${e.map((e=>a.dy` <wc-slider-item class="swiper-slide"> 38 <img 39 src="${e}" 40 alt="" 41 width="836" 42 height="627" 43 class="o-fit" 44 /> 45 </wc-slider-item>`))} 46 </wc-slider-wrapper> 47 <button 48 type="button" 49 disabled 50 class="swiper-button-prev a-btn a-btn--tertiary a-btn--icon" 51 > 52 ${(0,r.aT)(n.aX.ArrowLeft,"a-btn__icon")} 53 </button> 54 <button 55 disabled 56 type="button" 57 class="swiper-button-next a-btn a-btn--tertiary a-btn--icon" 58 > 59 ${(0,r.aT)(n.aX.ArrowRight,"a-btn__icon")} 60 </button> 61 </wc-slider-thumb-main> 62 <div class="wc-slider-main-thumb__nav"> 63 <div class="swiper-pagination wc-slider-main-thumb__pagination"></div> 64 <div class="swiper-scrollbar"></div> 65 </div> 66 </div>`:a.dy`<img src="${e[0]}" alt="" width="836" height="627" class="o-fit" />`:a.Ld}getMainContentHtml(){return a.dy` 67 <div> 68 ${this.selectedData.caption?a.dy`<div class="m-card-inspiration__caption u-text-caption"> 69 ${this.selectedData.caption} 70 </div>`:a.Ld} 71 <h3>${this.selectedData.title}</h3> 72 ${this.selectedData.description?a.dy`<div class="m-rt u-text-small"> 73 ${(0,s.A)(this.selectedData.description)} 74 </div>`:a.Ld} 75 </div> 76 ${this.selectedData.ctas&&this.selectedData.ctas.length>0?a.dy` <div class="a-btn-group"> 77 ${this.selectedData.ctas.map(((e,t)=>a.dy` 78 <a 79 href="${e.ctaLink}" 80 target="${e.ctaTarget||a.Ld}" 81 class="a-btn ${t!==this.selectedData.ctas.length-1?"a-btn--secondary":"a-btn--primary"}" 82 > 83 ${e.ctaLabel} 84 </a> 85 `))} 86 </div>`:a.Ld} 87 `}getMainCard(){return a.dy`<div
88 class="wc-inspiration-slider__card" 89 aria-busy="${this.mainCardLoading}" 90 aria-live="polite" 91 aria-atomic="true" 92 > 93 ${this.mainCardLoading?this.getMainCardSkeletonLoading():this.selectedData?a.dy` 94 <article class="m-card-inspiration${this.mainCardLoading?" u-hide":""}"> 95 <div class="m-card-inspiration__content"> 96 ${this.getMainContentHtml()} 97 </div> 98 <div class="m-card-inspiration__media"> 99 ${this.getMediaSliderHtml()} 100 </div> 101 </article> 102 `:a.Ld} 103 </div>`}getPreviewMenu(){return this.previewLoading?this.getPreviewSkeletonLoading():this.previews?.length>1?a.dy`<aside 104 class="wc-inspiration-slider__nav a-scroll a-scroll--horizontal@mob js-shadow" 105 is-loading-disabled="${this.isPreviewChanging||a.Ld};" 106 > 107 <div 108 class="wc-inspiration-slider__nav-inner u-scroll" 109 aria-live="polite" 110 aria-atomic="true" 111 > 112 ${this.previews.map((e=>(0,d.s)({image:e.image,width:"80",height:"80",title:e.title,description:e.description,cardTitleWrapperType:"radio",groupName:this.activeCategory?.id||this.groupName,cardId:e.id,checked:e.checked,value:e.id,extraClass:"m-card--horizontal m-card--horizontal-small",changeCallback:this.handlePreviewChanged})))} 113 </div> 114 </aside>`:a.Ld}getMainCardSkeletonLoading(){return this.mainCardLoading?a.dy` 115 <div class="o-skel o-skel--subtle-bg m-card-inspiration o-gap-3 "> 116 <div class="m-card-inspiration__content"> 117 <div class="o-flex o-flex--column o-gap-2"> 118 <div class="o-skel__item o-skel__item--third-width u-text-small u-mbe-2"> 119 120 </div> 121 <div role="group" class="o-skel__paragraph"> 122 <div class="o-skel__item o-skel__item--ultra-tiny"> </div> 123 <div class="o-skel__item o-skel__item--ultra-tiny"> </div> 124 <div class="o-skel__item o-skel__item--ultra-tiny"> </div> 125 <div class="o-skel__item o-skel__item--ultra-tiny"> </div> 126 </div> 127 <div class="a-btn o-skel__item u-mbs-4"> </div> 128 </div> 129 </div> 130 <div class="m-card-inspiration__media"> 131 <div class="o-skel__image o-skel__image--full o-skel__item o-ra o-ra--3/2"> 132 133 </div> 134 </div> 135 </div> 136 `:a.Ld}getSkeletonPreviewCard(){return a.dy` <article 137 class="m-card m-card--horizontal m-card--horizontal-small o-skel-card o-skel-card--h " 138 > 139 <div class="m-card__media o-skel-card__media o-skel__item"> </div> 140 <div class="m-card__body o-skel-card__body"> 141 <div class="o-skel__item u-h6"> </div> 142 </div> 143 </article>`}getPreviewSkeletonLoading(){return this.previewLoading?a.dy`<aside class="wc-inspiration-slider__nav u-scroll" aria-busy="true"> 144 <div class="wc-inspiration-slider__nav-inner o-skel"> 145 ${[...Array(3)].map((()=>this.getSkeletonPreviewCard()))} 146 </div> 147 </aside> `:a.Ld}render(){return a.dy`${this.getCategoriesHtml()} ${this.getMainCard()} ${this.getPreviewMenu()}`}}customElements.define("wc-inspiration-slider",o)},6251:function(e,t,i){i.r(t),i.d(t,{SliderThumbnailMain:function(){return r}});var a=i(10519),s=i(26225);class r extends a.i{constructor(){super()}_setAttributes(){super._setAttributes(),this.attrs={...this.attrs,scrollbar:!0,scrollbarOutside:!0,pagination:!0,observer:!0,paginationOutside:!0,tillLabel:super.getAttributeValue("till-label")||"/"}}_setSettings(){super._setSettings(),this.defaultSettings.scrollbar.hide=!1,this.defaultSettings={...this.defaultSettings,autoHeight:!1,pagination:{el:".swiper-pagination",type:"fraction",renderFraction:(e,t)=>'<span class=" '+e+'"></span> '+this.attrs.tillLabel+' <span class="'+t+'"></span>'},breakpoints:{0:{navigation:{enabled:!1},scrollbar:{enabled:!0}},[s.u.mob.breakpoint]:{navigation:{enabled:!0},scrollbar:{enabled:!1}}}}}}r.registerWebComponent("wc-slider-thumb-main")}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.