https://www.tesa.com/relaunch2020/build/usp-slider.28cf3067.js

1"use strict";(globalThis.webpackChunktesa_2016=globalThis.webpackChunktesa_2016||[]).push([[7187,4388],{5274:(e,l,t)=>{t.r(l),t.d(l,{default:()=>v});var a=t(5166),o=t(7105),i=t(7651),r=t(7345);const n={class:"responsive-video"},s={class:"responsive-video__video-wrapper",ref:"videoContainer"},u=["preload","controls","controlslist","autoplay","muted","loop","aria-label","aria-hidden","title"],d=["media","src","type"],c={class:"play-button__inner"},p=Object.assign({name:"BaseVideo"},{__name:"BaseVideo",props:{freeze:{type:Boolean,default:!1},progressSteps:{type:Number,default:0},playAfterUnfreeze:{type:Boolean,default:!1},trackingLabel:{type:String,default:""},isMoodVideo:{type:Boolean,default:!1},stageSliderSlideIndex:{type:Number,default:null},aspectRatio:{type:Number,default:1},autoplay:{type:Boolean,default:!1},controls:{type:Boolean,default:!0},controlsList:{type:String,default:"nodownload"},loop:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},playButton:{type:Boolean,default:!0},poster:{type:Object,default:null},preload:{type:String,default:"metadata"},showPoster:{type:Boolean,default:!0},sources:{type:Array,default:()=>[]},description:{type:String,default:null}},emits:["ended","progress","startplaying","stopplaying"],setup(e,l){var t;let{expose:p,emit:v}=l;const m=window.matchMedia("(prefers-reduced-motion: reduce)").matches,y=null===(t=(0,a.FN)())||void 0===t?void 0:t.proxy,f=(0,a.iH)(null),g=e,b=v,_=(0,a.f3)("stageSliderState",null),{labelStore:h}=(0,o.b)({labelsRequired:["global"]}),S=(0,a.iH)(!1),k=(0,a.iH)(null),w=(0,a.iH)(!1),x=(0,a.iH)(null),C=(0,a.iH)(null),U=(0,a.iH)(null),B=(0,a.iH)(null),D=(0,a.Fl)(()=>{var e;const l=null==_||null===(e=_.getCurrentSlide)||void 0===e?void 0:e.call(_);return"number"==typeof g.stageSliderSlideIndex&&"number"==typeof l?l!==g.stageSliderSlideIndex:g.freeze}),N=(0,a.Fl)(()=>parseFloat(g.aspectRatio)<1),j=(0,a.Fl)(()=>g.autoplay&&g.loop&&g.muted&&!g.controls),O=(0,a.Fl)(()=>{var e;return g.description||(j.value?null===(e=h.value)||void 0===e?void 0:e["global.mood_video_description"]:null)}),F=(0,a.Fl)(()=>j.value&&m),$=(0,a.Fl)(()=>g.sources.slice().sort(function(e,l){return e.isMobile!==l.isMobile?e.isMobile?1:-1:e.mimeType!==l.mimeType?"video/webm"!==e.mimeType?1:-1:0}));function M(){return x.value||f.value||y.$el.querySelector("video")}function L(){const e=y.$el.querySelector("[data-responsive-video-mood-poster]"),l=y.$el.querySelector("[data-responsive-video-poster]");if(e&&(e.hidden=!F.value),!l)return;l.hidden=F.value||S.value;const t=l.querySelector("[data-responsive-video-poster-image]");t&&(t.hidden=w.value)}function H(){var e;D.value||F.value||(null===(e=M())||void 0===e||e.play())}function q(){var e;null===(e=M())||void 0===e||e.pause()}function A(e){let{target:{currentTime:l,duration:t}}=e;k.value=Math.floor(l/t*g.progressSteps)}function I(){if(D.value)return q();S.value=!0,w.value=!1,L(),b("startplaying")}function T(){S.value=!1,w.value=!0,L(),b("stopplaying")}function W(){S.value=!1,w.value=!1,L(),b("stopplaying"),b("ended"),k.value=null}function Z(e){e.preventDefault(),H()}return(0,a.bv)(()=>{var e,l;x.value=f.value||y.$el.querySelector("video"),y.$el.querySelector("[data-responsive-video]")&&(x.value=y.$el.querySelector("[data-responsive-video]"),C.value={play:I,pause:T,timeupdate:A,ended:W},Object.entries(C.value).forEach(e=>{let[l,t]=e;x.value.addEventListener(l,t)}),U.value=y.$el.querySelector("[data-responsive-video-poster]"),null===(l=U.value)||void 0===l||l.addEventListener("click",Z)),L(),Object.prototype.hasOwnProperty.call((null===(e=M())||void 0===e?void 0:e.dataset)||{},"autoplay")&&!F.value&&(B.value=new IntersectionObserver(e=>{let[l]=e;l.isIntersecting?S.value||H():S.value&&q()}),B.value.observe(y.$el))}),(0,a.Jd)(()=>{var e,l;x.value&&C.value&&Object.entries(C.value).forEach(e=>{let[l,t]=e;x.value.removeEventListener(l,t)}),null===(e=U.value)||void 0===e||e.removeEventListener("click",Z),null===(l=B.value)||void 0===l||l.disconnect()}),(0,a.YP)(k,()=>{if(g.progressSteps>0&&"number"==typeof k.value){b("progress",k.value);const e=k.value/g.progressSteps*100;if(isNaN(e)||e<0||e>100)return;const l={name:"",details:{video_title:g.trackingLabel}};0===e?l.name="video_start":100===e?l.name="video_complete":(l.name="video_progress",l.details.video_progress=`${e}%`),i.Ng.trackGa4Event(l)}}),(0,a.YP)(D,()=>{D.value&&q(),D.value||!g.playAfterUnfreeze||F.value||H()}),p({playing:S,play:H,pause:q}),(l,t)=>{const o=(0,a.up)("Icon");return(0,a.wg)(),(0,a.iD)("div",n,[(0,a._)("div",s,[(0,a._)("video",{ref_key:"video",ref:f,preload:e.preload,class:(0,a.C_)({"mobile-aspect-ratio":N.value}),controls:e.controls,controlslist:e.controlsList,autoplay:e.autoplay&&!F.value,muted:e.muted,loop:e.loop,"aria-label":j.value?null:O.value,"aria-hidden":j.value?"true":null,title:j.value?" ":e.description,onPlay:I,onPause:T,onTimeupdate:A,onEnded:W,playsinline:""},[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)($.value,(e,l)=>((0,a.wg)(),(0,a.iD)("source",{key:`video-src-${l}`,media:e.minWidth?`(min-width: ${e.minWidth})`:"",src:e.path,type:e.mimeType},null,8,d))),128))],42,u)],512),t[0]||(t[0]=(0,a.Uk)()),e.poster&&e.showPoster&&!w.value&&!S.value||F.value?((0,a.wg)(),(0,a.j4)((0,a.SU)(r.Z),(0,a.dG)({key:0},e.poster,{preload:"metadata",class:"responsive-video__poster",onClick:Z}),null,16)):(0,a.kq)("v-if",!0),t[1]||(t[1]=(0,a.Uk)()),e.playButton&&!S.value?((0,a.wg)(),(0,a.iD)("div",{key:1,class:"play-button",onClick:Z},[(0,a._)("div",c,[(0,a.Wm)(o,{name:"play-fill"})])])):(0,a.kq)("v-if",!0)])}}});const v=(0,t(3744).Z)(p,[["__scopeId","data-v-420d4ad4"]])},5330:(e,l,t)=>{t.d(l,{Z:()=>n});var a=t(5166),o=t(6122),i=t(7651);const r=Object.assign({name:"NoUiSliderWrapper"},{__name:"NoUiSliderWrapper",props:{value:{type:[Array,Number],required:!0},min:{type:Number,required:!0},max:{type:Number,required:!0},step:{type:Number,default:1},connect:{type:[Boolean,Array],default:!0},tooltips:{type:[Boolean,Array],default:()=>[!0,!0]},pips:{type:Object,default:null},disabled:{type:Boolean,default:!1},ariaLabels:{type:Array,default:()=>["Minimum value","Maximum value"]},decimals:{type:Number,default:null}},emits:["change","input"],setup(e,l){let{emit:t}=l;const r=(0,a.iH)(null),n=e,s=t,u=(0,a.iH)(null),d=(0,a.iH)(!1);function c(){u.value&&u.value.updateOptions({range:{min:n.min,max:n.max},step:n.step},!0)}function p(e){const l=n.decimals||Math.max((0,i.D9)(n.min,n.max)),t=Math.pow(10,l);return Math.round(e*t)/t}return(0,a.bv)(()=>{o.ZP.create(r.value,{start:n.value,connect:n.connect,range:{min:n.min,max:n.max},step:n.step,tooltips:n.tooltips,keyboardSupport:!0,format:{to:e

1=>parseFloat(e),from:e=>parseFloat(e)},pips:n.pips,handleAttributes:[{"aria-label":n.ariaLabels[0]},...Array.isArray(n.value)&&n.value.length>1?[{"aria-label":n.ariaLabels[1]}]:[]]}),u.value=r.value.noUiSlider,u.value.on("update",e=>{const l=e.map(e=>p(Number(e)));d.value||s("input",l)}),u.value.on("change",e=>{const l=e.map(e=>p(Number(e)));s("change",l)}),n.disabled&&u.value.disable()}),(0,a.Jd)(()=>{u.value&&u.value.destroy()}),(0,a.YP)(()=>n.value,e=>{if(!u.value)return;const l=u.value.get(),t=Array.isArray(l)?null==l?void 0:l.map(e=>p(Number(e))):[p(Number(l))];JSON.stringify(t)!==JSON.stringify(e)&&(d.value=!0,u.value.set(e),d.value=!1)},{deep:!0}),(0,a.YP)(()=>n.min,c),(0,a.YP)(()=>n.max,c),(0,a.YP)(()=>n.step,c),(0,a.YP)(()=>n.disabled,e=>{u.value&&(e?u.value.disable():u.value.enable())}),(e,l)=>((0,a.wg)(),(0,a.iD)("div",{class:"no-ui-slider-wrapper",ref_key:"sliderElement",ref:r},null,512))}});const n=(0,t(3744).Z)(r,[["__scopeId","data-v-fa86b27e"]])},8375:(e,l,t)=>{t.r(l),t.d(l,{default:()=>Z});var a=t(5166),o=t(8945),i=t(6138),r=t(5330);const n=Object.assign({name:"UspSliderSlider"},{__name:"UspSliderSlider",props:{max:{type:[String,Number],default:10}},emits:["onChange"],setup(e,l){var t;let{emit:o}=l;const i=null===(t=(0,a.FN)())||void 0===t?void 0:t.proxy,n=o,s=(0,a.iH)(1);function u(e){s.value=e[0],n("onChange",s.value);const l=i.$el.querySelectorAll(".noUi-pips .noUi-marker");l.forEach(e=>e.classList.remove("-active")),[...l].slice(0,s.value).forEach(e=>e.classList.add("-active"))}return(l,t)=>((0,a.wg)(),(0,a.iD)("div",{class:"generic-slider",style:(0,a.j5)(`--active-step: ${s.value}`)},[(0,a.Wm)(r.Z,{max:e.max,min:1,value:1,step:1,pips:{mode:"steps",stepped:!0,density:100},connect:[!0,!1],tooltips:!1,inputClass:"tesa-slider",onInput:u},null,8,["max"])],4))}});var s=t(3744);const u=(0,s.Z)(n,[["__scopeId","data-v-77f3f6cd"]]);var d=t(7345),c=t(5274);const p={class:"usp-module__buttons"},v=["id"],m=["id"],y=["for"],f=["for"],g={__name:"UspModuleRadioButtons",props:{leftText:{type:String,default:"ohne tesa"},rightText:{type:String,default:"mit tesa"},disabledButtons:{type:Boolean,default:!1},slotid:{type:String,default:""}},emits:["clickOnButton","onChange"],setup(e,l){let{emit:t}=l;const o=e,i=t,r=(0,a.iH)(1);function n(e){!0===o.disabledButtons&&i("clickOnButton",e)}function s(e){!1===o.disabledButtons&&(r.value=e,i("onChange",e))}const u=(0,a.Fl)(()=>`button--1-${o.slotid}`),d=(0,a.Fl)(()=>`button--2-${o.slotid}`);return i("onChange",r.value),(0,a.bv)(()=>s(1)),(l,t)=>((0,a.wg)(),(0,a.iD)("div",p,[(0,a._)("input",{type:"radio",name:"tesa-option",id:u.value,value:"1",onClick:t[0]||(t[0]=e=>s(1))},null,8,v),t[4]||(t[4]=(0,a.Uk)()),(0,a._)("input",{type:"radio",name:"tesa-option",id:d.value,value:"2",onClick:t[1]||(t[1]=e=>s(2))},null,8,m),t[5]||(t[5]=(0,a.Uk)()),(0,a._)("label",{for:u.value},[(0,a.Wm)(a.uT,{name:"fade"},{default:(0,a.w5)(()=>[e.disabledButtons?(0,a.kq)("v-if",!0):((0,a.wg)(),(0,a.iD)("div",{key:0,class:(0,a.C_)(["button button--inline button--cta-2",{"button--on-blue-bg":2===r.value}]),onClick:t[2]||(t[2]=e=>n(1))},(0,a.zw)(e.leftText),3))]),_:1})],8,y),t[6]||(t[6]=(0,a.Uk)()),(0,a._)("label",{for:d.value},[(0,a.Wm)(a.uT,{name:"fade"},{default:(0,a.w5)(()=>[e.disabledButtons?(0,a.kq)("v-if",!0):((0,a.wg)(),(0,a.iD)("div",{key:0,class:(0,a.C_)(["button button--inline button--cta-2",{"button--on-blue-bg":1===r.value}]),onClick:t[3]||(t[3]=e=>n(2))},(0,a.zw)(e.rightText),3))]),_:1})],8,f)]))}},b=(0,s.Z)(g,[["__scopeId","data-v-2ac6c509"]]);var _=t(9043),h=t(5868),S=t(9238),k=t(6806);const w=["id"],x={key:0,class:"usp-module__full-width"},C={key:1,class:"usp-module__full-width usp-module__mobile-aspect-ratio"},U={class:"container usp-module__content"},B={class:"grid-row"},D={class:"col-12"},N={class:"slider-media-wrapper"},j={class:"grid-item text-wrapper grid-row"},O={class:"header col-12 col-md-centered-10"},F={class:"usp-module__title"},$={class:"usp-module__subline"},M={class:"subline"},L={class:"grid-row"},H={class:"col-12"},q={key:0,class:"usp-module__slider"},A={class:"usp-module__slider--main"},I={class:"usp-module__anchor-link--text anchor-item"},T={class:"usp-module__anchor-link--icon anchor-item"},W=Object.assign({name:"UspSlider"},{__name:"UspSlider",props:{boldheadline:{type:[Boolean,String],default:!1},colorscheme:{type:[String,Array,Object],default:()=>({})},isstage:{type:[Boolean,String],default:!1},labels:{type:[Array,Object,String],default:()=>({})},media:{type:[Array,Object,String],default:()=>({})},mobilemedia:{type:[Array,Object,String],default:()=>({})},slotid:{type:String,default:"default"},title:{type:String,default:null}},setup(e){var l;const t=null===(l=(0,a.FN)())||void 0===l?void 0:l.proxy,r=e,{activeLayout:n}

1=(0,i.S)(),{trackComparisonState:s,trackSliderState:p,trackTeaserClick:v}=(0,o.xN)(r),m=(0,a.iH)(1),y=(0,a.iH)(null),f=(0,a.iH)([]),g=(0,a.Fl)(()=>{var e;let l;try{l="string"==typeof r.colorscheme?JSON.parse(r.colorscheme):"object"==typeof r.colorscheme?r.colorscheme:[]}catch(e){l={anchorColor:_.DM.brandBlue}}let t=null===(e=l)||void 0===e?void 0:e.anchorColor;return t=t||_.DM.brandBlue,t}),W=(0,a.Fl)(()=>{var e;return(null===(e=Y.value)||void 0===e?void 0:e.length)<3}),Z=(0,a.Fl)(()=>"true"===r.isstage||!0===r.isstage),P=(0,a.Fl)(()=>{let e;try{e="string"==typeof r.labels?JSON.parse(r.labels):"object"==typeof r.labels?r.labels:[]}catch(l){e={}}return e}),Y=(0,a.Fl)(()=>"string"==typeof r.media?JSON.parse(r.media):"object"==typeof r.media?r.media:[]),z=(0,a.Fl)(()=>"string"==typeof r.mobilemedia?JSON.parse(r.mobilemedia):"object"==typeof r.mobilemedia?r.mobilemedia:[]),E=(0,a.Fl)(()=>"usp-module-"+r.slotid),J=(0,a.Fl)(()=>{var e;let l;try{l="string"==typeof r.colorscheme?JSON.parse(r.colorscheme):"object"==typeof r.colorscheme?r.colorscheme:[]}catch(e){l={sliderColor:_.DM.brandBlue}}let t=null===(e=l)||void 0===e?void 0:e.sliderColor;return t=t||_.DM.brandBlue,t}),R=(0,a.Fl)(()=>{var e;let l;try{l="string"==typeof r.colorscheme?JSON.parse(r.colorscheme):"object"==typeof r.colorscheme?r.colorscheme:[]}catch(e){l={textColor:_.DM.black}}let t=null===(e=l)||void 0===e?void 0:e.textColor;return t=t||_.DM.black,t}),G=(0,a.Fl)(()=>{var e;let l;try{l="string"==typeof r.colorscheme?JSON.parse(r.colorscheme):"object"==typeof r.colorscheme?r.colorscheme:[]}catch(e){l={textLeftColor:_.DM.grey5}}let t=null===(e=l)||void 0===e?void 0:e.textLeftColor;return t=t||_.DM.grey5,t}),K=(0,a.Fl)(()=>{var e;let l;try{l="string"==typeof r.colorscheme?JSON.parse(r.colorscheme):"object"==typeof r.colorscheme?r.colorscheme:[]}catch(e){l={textRightColor:_.DM.brandBlue}}let t=null===(e=l)||void 0===e?void 0:e.textRightColor;return t=t||_.DM.brandBlue,t}),V=(0,a.Fl)(()=>Z.value?"desktop"===n.value||"tablet"===n.value?"crop3x1":"crop2x3":"desktop"===n.value||"tablet"===n.value?"crop16x9":"crop2x3");function Q(){let e=t.$el.nextElementSibling;do{var l,a;if(null!==(l=e)&&void 0!==l&&l.id){y.value=e.id;break}e=null===(a=e)||void 0===a?void 0:a.nextElementSibling}while(e)}function X(e){return e===m.value}function ee(e){return e===Y.value.length}function le(){if(event.target.closest(".anchor-link")){const e=W.value?"Compare":"Slider";v(e)}}return(0,a.bv)(()=>{(0,k.Z)({images:Y.value.map(e=>({...e,variant:V.value})).filter(e=>"image"===e.type),sizes:t.$el.clientWidth}),(0,k.Z)({images:z.value.map(e=>({...e,variant:V.value})).filter(e=>"image"===e.type),sizes:t.$el.clientWidth}),(0,a.Y3)(()=>{Q()})}),(0,a.YP)(m,e=>{!function(e){if(W.value){const l=e.toLocaleString("en-US",{minimumIntegerDigits:2});f.value.find(e=>e===l)||(s(l),f.value.push(l))}else{const l=1===e?"00":(e-1).toLocaleString("en-US",{minimumIntegerDigits:2});f.value.find(e=>e===l)||(p(l),f.value.push(l))}}(e)}),window.onload=()=>{Q()},(l,t)=>((0,a.wg)(),(0,a.iD)("section",{id:E.value,class:(0,a.C_)(["usp-module marg-t--component",{stage:Z.value}]),style:(0,a.j5)({"--text-color":R.value,"--slider-color":J.value,"--anchor-color":g.value}),onClick:(0,a.iM)(le,["stop"])},[(0,a._)("div",{class:(0,a.C_)(["usp-module__base-image",{container:!Z.value}])},["desktop"==(0,a.SU)(n)||"tablet"==(0,a.SU)(n)?((0,a.wg)(),(0,a.iD)("div",x,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(Y.value,(e,l)=>((0,a.wg)(),(0,a.iD)(a.HY,null,["image"===e.type?((0,a.wg)(),(0,a.j4)((0,a.SU)(d.Z),(0,a.dG)({key:0,ref_for:!0},e,{ref_for:!0,ref:"media",key:`desktop-base-image-${l}`,class:[{"-active":X(l+1)},"grid-item"],variant:V.value,"lazy-load":!1}),null,16,["class","variant"])):"video"===e.type?((0,a.wg)(),(0,a.j4)((0,a.SU)(c.default),(0,a.dG)({key:1,ref_for:!0},e,{ref_for:!0,ref:"media",key:`desktop-base-video-${l}`,class:[{"-active":X(l+1)},"grid-item"],controls:!1,autoplay:!0,loop:!0,muted:!0,"show-poster":!1,"play-button":!e.loop||!e.autoplay}),null,16,["class","play-button"])):(0,a.kq)("v-if",!0)],64))),256))])):((0,a.wg)(),(0,a.iD)("div",C,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(z.value,(e,l)=>((0,a.wg)(),(0,a.iD)(a.HY,null,["image"===e.type?((0,a.wg)(),(0,a.j4)((0,a.SU)(d.Z),(0,a.dG)({key:0,ref_for:!0},e,{key:`mobile-base-image-${l}`,ref_for:!0,ref:"media",class:[{"-active":X(l+1)},"grid-item"],variant:V.value,"lazy-load":!1}),null,16,["class","variant"])):"video"===e.type?((0,a.wg)(),(0,a.j4)((0,a.SU)(c.default),(0,a.dG)({key:1,ref_for:!0},e,{key:`mobile-base-video-${l}`,ref_for:!0,ref:"media",class:[{"-active":X(l+1)},"grid-item"],controls:!1,autoplay:!0,loop:!0,muted:!0,"show-poster":!1}),null,16,["class"])):(0,a.kq)("v-if",!0)],64))),256))]))],2),t[9]||(t[9]=(0,a.Uk)()),(0,a._)("div",U,[(0,a._)("div",B,[(0,a._)("div",D,[(0,a._)("div",N,[(0,a._)("div",j,[(0,a._)("header",O,[(0,a._)("div",F,[(0,a.WI)(l.$slots,"headline")]),t[3]||(t[3]=(0,a.Uk)()),(0,a._)("div",$,[(0,a._)("p",M,[(0,a.WI)(l.$slots,"subline")])])])])])])]),t[8]||(t[8]=(0,a.Uk)()),(0,a._)("div",L,[(0,a._)("div",H,[W.value?((0,a.wg)(),(0,a.j4)((0,a.SU)(b),{key:1,slotid:e.slotid,"left-text":P.value.textLeft,"right-text":P.value.textRight,onOnChange:t[1]||(t[1]=e=>m.value=e)},null,8,["slotid","left-text","right-text"])):((0,a.wg)(),(0,a.iD)("div",q,[(0,a._)("div",{class:"usp-module__text--left",style:(0,a.j5)({color:ee(m.value)?K.value:G.value})},(0,a.zw)(P.value.textLeft),5),t[4]||(t[4]=(0,a.Uk)()),(0,a._)("div",A,[(0,a.Wm)(u,{max:Y.value.length,color:J.value,onOnChange:t[0]||(t[0]=e=>m.value=e)},null,8,["max","color"])]),t[5]||(t[5]=(0,a.Uk)()),(0,a._)("div",{class:"usp-module__text--right",style:(0,a.j5)({color:ee(m.value)?G.value:K.value})}

1,(0,a.zw)(P.value.textRight),5)])),t[7]||(t[7]=(0,a.Uk)()),P.value.teaserLine&&null!==y.value?((0,a.wg)(),(0,a.iD)("div",{key:2,class:"usp-module__anchor-link",onClick:t[2]||(t[2]=e=>Q())},[(0,a.Wm)((0,a.SU)(h.Z),{"target-id":y.value},{default:(0,a.w5)(()=>[(0,a._)("span",I,(0,a.zw)(P.value.teaserLine),1),t[6]||(t[6]=(0,a.Uk)()),(0,a._)("span",T,[(0,a.Wm)((0,a.SU)(S.Z),{name:"angle-down"})])]),_:1},8,["target-id"])])):(0,a.kq)("v-if",!0)])])])],14,w))}}),Z=(0,s.Z)(W,[["__scopeId","data-v-7357b52e"]])}}]);