this._renderBoundaries[2]&&(this._renderBoundaries[2]=p+2*d),u+2*d>this._renderBoundaries[3]&&(this._renderBoundaries[3]=u+2*d)}},_colorize:function(){var e=this._renderBoundaries[0],t=this._renderBoundaries[1],a=this._renderBoundaries[2]-e,i=this._renderBoundaries[3]-t,n=this._width,s=this._height,r=this._opacity,o=this._maxOpacity,l=this._minOpacity,c=this._useGradientOpacity;e<0&&(e=0),t<0&&(t=0),e+a>n&&(a=n-e),t+i>s&&(i=s-t);for(var d=this.shadowCtx.getImageData(e,t,a,i),m=d.data,p=m.length,u=this._palette,h=3;h0?r:b>0,t},getDataURL:function(){return this.canvas.toDataURL()}},i}(),i=function(){var t=!1;return"canvas2d"===e["defaultRenderer"]&&(t=a),t}(),n={merge:function(){for(var e={},t=arguments.length,a=0;a(Object(s["openBlock"])(),Object(s["createElementBlock"])("button",{type:"button",class:Object(s["normalizeClass"])(["hsrToggleBtn",["heatmapType"+t.key,{active:t.key===e.heatmapType}]]),onClick:a=>e.changeHeatmapType(t.key),key:t.key},Object(s["toDisplayString"])(t.name),11,d))),128))]),Object(s["createElementVNode"])("div",m,[(Object(s["openBlock"])(!0),Object(s["createElementBlock"])(s["Fragment"],null,Object(s["renderList"])(e.deviceTypesWithResolution,t=>(Object(s["openBlock"])(),Object(s["createElementBlock"])("button",{type:"button",class:Object(s["normalizeClass"])(["hsrToggleBtn",["deviceType"+t.key,{active:t.key===e.deviceType}]]),onClick:a=>e.changeDeviceType(t.key),key:t.key},[Object(s["createElementVNode"])("img",{height:"15",src:t.logo,alt:`${e.translate("DevicesDetection_Device")} ${t.name}`},null,8,u),Object(s["createElementVNode"])("span",h,Object(s["toDisplayString"])(t.name),1),Object(s["createElementVNode"])("span",g,Object(s["toDisplayString"])(t.resolution)+"px",1)],10,p))),128))]),Object(s["createElementVNode"])("div",b,[Object(s["createElementVNode"])("span",{class:"customIframeWidthLabel",textContent:Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_CustomWidth"))},null,8,v),Object(s["createVNode"])(de,{uicontrol:"select",name:"iframewidth","model-value":e.customIframeWidth,"onUpdate:modelValue":t[0]||(t[0]=t=>{e.customIframeWidth=t,e.changeIframeWidth(e.customIframeWidth,!0)}),options:e.iframeWidthOptions,"full-width":!0},null,8,["model-value","options"])]),Object(s["createElementVNode"])("div",y,[Object(s["createElementVNode"])("span",f,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_LegendLow")),1),Object(s["createElementVNode"])("div",O,[Object(s["createElementVNode"])("img",{class:"gradient",alt:"gradient",src:e.gradientImgData},null,8,j)]),Object(s["createElementVNode"])("span",S,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_LegendHigh")),1)])]),Object(s["createElementVNode"])("div",H,[Object(s["createElementVNode"])("div",{class:Object(s["normalizeClass"])(["heatmapScrollArea",{heatmapScrollAreaEmpty:!e.hasSnapshot}]),ref:"heatmapScrollArea",style:Object(s["normalizeStyle"])(e.scrollAreaStyle)},[e.hasSnapshot?(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",{key:0,class:"heatmapScaleBox",style:Object(s["normalizeStyle"])(e.scaleBoxStyle)},[Object(s["createElementVNode"])("div",{class:"iframeRecordingContainer",ref:"iframeRecordingContainer",style:Object(s["normalizeStyle"])(e.containerStyle)},[Object(s["createElementVNode"])("div",E,[Object(s["createElementVNode"])("div",_,null,512),w]),Object(s["withDirectives"])(Object(s["createElementVNode"])("div",{class:"aboveFoldLine",ref:"aboveFoldLine",title:e.translate("HeatmapSessionRecording_AvgAboveFoldDescription"),style:Object(s["normalizeStyle"])({width:e.iframeWidth+"px",top:e.avgFold+"px"})},[Object(s["createElementVNode"])("div",null,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_AvgFold",e.avgFold)),1)],12,k),[[s["vShow"],e.avgFold]]),e.embedUrl?(Object(s["openBlock"])(),Object(s["createElementBlock"])("iframe",{key:0,id:"recordingPlayer",ref:"recordingPlayer",sandbox:"allow-scripts allow-same-origin",referrerpolicy:"no-referrer",onLoad:t[1]||(t[1]=t=>e.onLoaded()),height:"400",src:e.embedUrl,width:e.iframeWidth},null,40,R)):Object(s["createCommentVNode"])("",!0)],4)],4)):(Object(s["openBlock"])(),Object(s["createBlock"])(me,{key:1,state:e.emptyStateKey,"id-site-hsr":e.idSiteHsr},null,8,["state","id-site-hsr"])),Object(s["withDirectives"])(Object(s["createElementVNode"])("div",N,[V,Object(s["createElementVNode"])("div",C,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_LoadingHeatmap")),1)],512),[[s["vShow"],e.isLoading]])],6),e.showSummaryCard?(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",x,[Object(s["createElementVNode"])("div",T,[Object(s["createElementVNode"])("div",D,[Object(s["createElementVNode"])("span",M,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_Recordings")),1),Object(s["createElementVNode"])("span",A,Object(s["toDisplayString"])(e.selectedDeviceTypeName),1)]),Object(s["createElementVNode"])("h2",P,Object(s["toDisplayString"])(e.totalRecordings),1),e.deviceBreakdown.length?(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",L,[Object(s["createElementVNode"])("div",I,[(Object(s["openBlock"])(!0),Object(s["createElementBlock"])(s["Fragment"],null,Object(s["renderList"])(e.deviceBreakdown,e=>(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",{class:Object(s["normalizeClass"])(["deviceBreakdownSegment","deviceBreakdownDevice"+e.key]),key:e.key,style:Object(s["normalizeStyle"])({width:e.percent+"%"}),title:`${e.name} ${e.percentLabel}`},null,14,F))),128))]),Object(s["createElementVNode"])("div",U,[(Object(s["openBlock"])(!0),Object(s["createElementBlock"])(s["Fragment"],null,Object(s["renderList"])(e.deviceBreakdown,e=>(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",{class:"deviceBreakdownLegendItem",key:e.key},[Object(s["createElementVNode"])("span",{class:Object(s["normalizeClass"])(["deviceBreakdownSwatch","deviceBreakdownDevice"+e.key])},null,2),Object(s["createElementVNode"])("span",$,Object(s["toDisplayString"])(e.name),1),Object(s["createElementVNode"])("span",z,Object(s["toDisplayString"])(e.percentLabel),1)]))),128))])])):(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",B,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_WaitingForFirstRecording")),1)),e.hasSnapshot?(Object(s["openBlock"])(),Object(s["createElementBlock"])(s["Fragment"],{key:2},[W,Object(s["createElementVNode"])("div",q,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_TopClickedElements")),1),e.topClickedElements.length?(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",G,[(Object(s["openBlock"])(!0),Object(s["createElementBlock"])(s["Fragment"],null,Object(s["renderList"])(e.topClickedElements,e=>(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",{class:"topClickedElementRow",key:e.key},[Object(s["createElementVNode"])("div",X,[Object(s["createElementVNode"])("div",{class:"topClickedElementLabel",title:e.label},Object(s["toDisplayString"])(e.label),9,J),Object(s["createElementVNode"])("div",K,[Object(s["createElementVNode"])("div",Y,[Object(s["createElementVNode"])("div",{class:"topClickedElementBarFill",style:Object(s["normalizeStyle"])({width:e.percent+"%"})},null,4)])])]),Object(s["createElementVNode"])("span",Q,Object(s["toDisplayString"])(e.percentLabel),1)]))),128))])):(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",Z,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_NoClickedElements")),1)),ee,Object(s["createElementVNode"])("div",te,[Object(s["createElementVNode"])("span",ae,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_ScrollReach")),1),e.summaryAvgFold?(Object(s["openBlock"])(),Object(s["createElementBlock"])("span",ie,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_AvgFold",e.summaryAvgFold)),1)):Object(s["createCommentVNode"])("",!0)]),e.scrollReach.length?(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",ne,[(Object(s["openBlock"])(!0),Object(s["createElementBlock"])(s["Fragment"],null,Object(s["renderList"])(e.scrollReach,e=>(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",{class:"scrollReachRow",key:e.key},[Object(s["createElementVNode"])("span",se,Object(s["toDisplayString"])(e.label),1),Object(s["createElementVNode"])("div",re,[Object(s["createElementVNode"])("div",{class:"topClickedElementBarFill",style:Object(s["normalizeStyle"])({width:e.percent+"%"})},null,4)]),Object(s["createElementVNode"])("span",oe,Object(s["toDisplayString"])(e.percentLabel),1)]))),128))])):(Object(s["openBlock"])(),Object(s["createElementBlock"])("div",le,Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_NoScrollData")),1))],64)):Object(s["createCommentVNode"])("",!0)])])):Object(s["createCommentVNode"])("",!0)]),Object(s["createVNode"])(pe,{ref:"tooltip","click-count":e.clickCount,"click-rate":e.clickRate,"is-moves":1===e.heatmapType},null,8,["click-count","click-rate","is-moves"])])}var de=a("246e"),me=a.n(de);function pe(e,t){if(e.match(/^[a-z]+:\/\//i))return e;if(e.match(/^\/\//))return window.location.protocol+e;if(e.match(/^[a-z]+:/i))return e;const a=document.implementation.createHTMLDocument(),i=a.createElement("base"),n=a.createElement("a");return a.head.appendChild(i),a.body.appendChild(n),t&&(i.href=t),n.href=e,n.href}const ue=(()=>{let e=0;const t=()=>("0000"+(Math.random()*36**4<<0).toString(36)).slice(-4);return()=>(e+=1,`u${t()}${e}`)})();function he(e){const t=[];for(let a=0,i=e.length;aSe||e.height>Se)&&(e.width>Se&&e.height>Se?e.width>e.height?(e.height*=Se/e.width,e.width=Se):(e.width*=Se/e.height,e.height=Se):e.width>Se?(e.height*=Se/e.width,e.width=Se):(e.width*=Se/e.height,e.height=Se))}function Ee(e){return new Promise((t,a)=>{const i=new Image;i.onload=()=>{i.decode().then(()=>{requestAnimationFrame(()=>t(i))})},i.onerror=a,i.crossOrigin="anonymous",i.decoding="async",i.src=e})}async function _e(e){return Promise.resolve().then(()=>(new XMLSerializer).serializeToString(e)).then(encodeURIComponent).then(e=>"data:image/svg+xml;charset=utf-8,"+e)}async function we(e,t,a){const i="http://www.w3.org/2000/svg",n=document.createElementNS(i,"svg"),s=document.createElementNS(i,"foreignObject");return n.setAttribute("width",""+t),n.setAttribute("height",""+a),n.setAttribute("viewBox",`0 0 ${t} ${a}`),s.setAttribute("width","100%"),s.setAttribute("height","100%"),s.setAttribute("x","0"),s.setAttribute("y","0"),s.setAttribute("externalResourcesRequired","true"),n.appendChild(s),s.appendChild(e),_e(n)}const ke=(e,t)=>{if(e instanceof t)return!0;const a=Object.getPrototypeOf(e);return null!==a&&(a.constructor.name===t.name||ke(a,t))};function Re(e){const t=e.getPropertyValue("content");return`${e.cssText} content: '${t.replace(/'|"/g,"")}';`}function Ne(e,t){return be(t).map(t=>{const a=e.getPropertyValue(t),i=e.getPropertyPriority(t);return`${t}: ${a}${i?" !important":""};`}).join(" ")}function Ve(e,t,a,i){const n=`.${e}:${t}`,s=a.cssText?Re(a):Ne(a,i);return document.createTextNode(`${n}{${s}}`)}function Ce(e,t,a,i){const n=window.getComputedStyle(e,a),s=n.getPropertyValue("content");if(""===s||"none"===s)return;const r=ue();try{t.className=`${t.className} ${r}`}catch(l){return}const o=document.createElement("style");o.appendChild(Ve(r,a,n,i)),t.appendChild(o)}function xe(e,t,a){Ce(e,t,":before",a),Ce(e,t,":after",a)}const Te="application/font-woff",De="image/jpeg",Me={woff:Te,woff2:Te,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:De,jpeg:De,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml",webp:"image/webp"};function Ae(e){const t=/\.([^./]*?)$/g.exec(e);return t?t[1]:""}function Pe(e){const t=Ae(e).toLowerCase();return Me[t]||""}function Be(e){return e.split(/,/)[1]}function Le(e){return-1!==e.search(/^(data:)/)}function Ie(e,t){return`data:${t};base64,${e}`}async function Fe(e,t,a){const i=await fetch(e,t);if(404===i.status)throw new Error(`Resource "${i.url}" not found`);const n=await i.blob();return new Promise((e,t)=>{const s=new FileReader;s.onerror=t,s.onloadend=()=>{try{e(a({res:i,result:s.result}))}catch(n){t(n)}},s.readAsDataURL(n)})}const Ue={};function $e(e,t,a){let i=e.replace(/\?.*/,"");return a&&(i=e),/ttf|otf|eot|woff2?/i.test(i)&&(i=i.replace(/.*\//,"")),t?`[${t}]${i}`:i}async function ze(e,t,a){const i=$e(e,t,a.includeQueryParams);if(null!=Ue[i])return Ue[i];let n;a.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+(new Date).getTime());try{const i=await Fe(e,a.fetchRequestInit,({res:e,result:a})=>(t||(t=e.headers.get("Content-Type")||""),Be(a)));n=Ie(i,t)}catch(s){n=a.imagePlaceholder||"";let t="Failed to fetch resource: "+e;s&&(t="string"===typeof s?s:s.message),t&&console.warn(t)}return Ue[i]=n,n}async function We(e){const t=e.toDataURL();return"data:,"===t?e.cloneNode(!1):Ee(t)}async function qe(e,t){if(e.currentSrc){const t=document.createElement("canvas"),a=t.getContext("2d");t.width=e.clientWidth,t.height=e.clientHeight,null===a||void 0===a||a.drawImage(e,0,0,t.width,t.height);const i=t.toDataURL();return Ee(i)}const a=e.poster,i=Pe(a),n=await ze(a,i,t);return Ee(n)}async function Ge(e,t){var a;try{if(null===(a=null===e||void 0===e?void 0:e.contentDocument)||void 0===a?void 0:a.body)return await it(e.contentDocument.body,t,!0)}catch(i){}return e.cloneNode(!1)}async function Xe(e,t){return ke(e,HTMLCanvasElement)?We(e):ke(e,HTMLVideoElement)?qe(e,t):ke(e,HTMLIFrameElement)?Ge(e,t):e.cloneNode(Ke(e))}const Je=e=>null!=e.tagName&&"SLOT"===e.tagName.toUpperCase(),Ke=e=>null!=e.tagName&&"SVG"===e.tagName.toUpperCase();async function Ye(e,t,a){var i,n;if(Ke(t))return t;let s=[];return s=Je(e)&&e.assignedNodes?he(e.assignedNodes()):ke(e,HTMLIFrameElement)&&(null===(i=e.contentDocument)||void 0===i?void 0:i.body)?[]:he((null!==(n=e.shadowRoot)&&void 0!==n?n:e).childNodes),0===s.length||ke(e,HTMLVideoElement)||await s.reduce((e,i)=>e.then(()=>it(i,a)).then(e=>{e&&t.appendChild(e)}),Promise.resolve()),t}function Qe(e,t,a){const i=t.style;if(!i)return;const n=window.getComputedStyle(e);n.cssText?(i.cssText=n.cssText,i.transformOrigin=n.transformOrigin):be(a).forEach(a=>{let s=n.getPropertyValue(a);if("font-size"===a&&s.endsWith("px")){const e=Math.floor(parseFloat(s.substring(0,s.length-2)))-.1;s=e+"px"}ke(e,HTMLIFrameElement)&&"display"===a&&"inline"===s&&(s="block"),"d"===a&&t.getAttribute("d")&&(s=`path(${t.getAttribute("d")})`),i.setProperty(a,s,n.getPropertyPriority(a))})}function Ze(e,t){ke(e,HTMLTextAreaElement)&&(t.innerHTML=e.value),ke(e,HTMLInputElement)&&t.setAttribute("value",e.value)}function et(e,t){if(ke(e,HTMLSelectElement)){const a=t,i=Array.from(a.children).find(t=>e.value===t.getAttribute("value"));i&&i.setAttribute("selected","")}}function tt(e,t,a){return ke(t,Element)&&(Qe(e,t,a),xe(e,t,a),Ze(e,t),et(e,t)),t}async function at(e,t){const a=e.querySelectorAll?e.querySelectorAll("use"):[];if(0===a.length)return e;const i={};for(let s=0;sXe(e,t)).then(a=>Ye(e,a,t)).then(a=>tt(e,a,t)).then(e=>at(e,t)):null}const nt=/url\((['"]?)([^'"]+?)\1\)/g,st=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,rt=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function ot(e){const t=e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return new RegExp(`(url\\(['"]?)(${t})(['"]?\\))`,"g")}function lt(e){const t=[];return e.replace(nt,(e,a,i)=>(t.push(i),e)),t.filter(e=>!Le(e))}async function ct(e,t,a,i,n){try{const s=a?pe(t,a):t,r=Pe(t);let o;if(n){const e=await n(s);o=Ie(e,r)}else o=await ze(s,r,i);return e.replace(ot(t),`$1${o}$3`)}catch(s){}return e}function dt(e,{preferredFontFormat:t}){return t?e.replace(rt,e=>{while(1){const[a,,i]=st.exec(e)||[];if(!i)return"";if(i===t)return`src: ${a};`}}):e}function mt(e){return-1!==e.search(nt)}async function pt(e,t,a){if(!mt(e))return e;const i=dt(e,a),n=lt(i);return n.reduce((e,i)=>e.then(e=>ct(e,i,t,a)),Promise.resolve(i))}async function ut(e,t,a){var i;const n=null===(i=t.style)||void 0===i?void 0:i.getPropertyValue(e);if(n){const i=await pt(n,null,a);return t.style.setProperty(e,i,t.style.getPropertyPriority(e)),!0}return!1}async function ht(e,t){await ut("background",e,t)||await ut("background-image",e,t),await ut("mask",e,t)||await ut("-webkit-mask",e,t)||await ut("mask-image",e,t)||await ut("-webkit-mask-image",e,t)}async function gt(e,t){const a=ke(e,HTMLImageElement);if((!a||Le(e.src))&&(!ke(e,SVGImageElement)||Le(e.href.baseVal)))return;const i=a?e.src:e.href.baseVal,n=await ze(i,Pe(i),t);await new Promise((i,s)=>{e.onload=i,e.onerror=t.onImageErrorHandler?(...e)=>{try{i(t.onImageErrorHandler(...e))}catch(a){s(a)}}:s;const r=e;r.decode&&(r.decode=i),"lazy"===r.loading&&(r.loading="eager"),a?(e.srcset="",e.src=n):e.href.baseVal=n})}async function bt(e,t){const a=he(e.childNodes),i=a.map(e=>vt(e,t));await Promise.all(i).then(()=>e)}async function vt(e,t){ke(e,Element)&&(await ht(e,t),await gt(e,t),await bt(e,t))}function yt(e,t){const{style:a}=e;t.backgroundColor&&(a.backgroundColor=t.backgroundColor),t.width&&(a.width=t.width+"px"),t.height&&(a.height=t.height+"px");const i=t.style;return null!=i&&Object.keys(i).forEach(e=>{a[e]=i[e]}),e}const ft={};async function Ot(e){let t=ft[e];if(null!=t)return t;const a=await fetch(e),i=await a.text();return t={url:e,cssText:i},ft[e]=t,t}async function jt(e,t){let a=e.cssText;const i=/url\(["']?([^"')]+)["']?\)/g,n=a.match(/url\([^)]+\)/g)||[],s=n.map(async n=>{let s=n.replace(i,"$1");return s.startsWith("https://")||(s=new URL(s,e.url).href),Fe(s,t.fetchRequestInit,({result:e})=>(a=a.replace(n,`url(${e})`),[n,e]))});return Promise.all(s).then(()=>a)}function St(e){if(null==e)return[];const t=[],a=/(\/\*[\s\S]*?\*\/)/gi;let i=e.replace(a,"");const n=new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})","gi");while(1){const e=n.exec(i);if(null===e)break;t.push(e[0])}i=i.replace(n,"");const s=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,r="((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})",o=new RegExp(r,"gi");while(1){let e=s.exec(i);if(null===e){if(e=o.exec(i),null===e)break;s.lastIndex=o.lastIndex}else o.lastIndex=s.lastIndex;t.push(e[0])}return t}async function Ht(e,t){const a=[],i=[];return e.forEach(a=>{if("cssRules"in a)try{he(a.cssRules||[]).forEach((e,n)=>{if(e.type===CSSRule.IMPORT_RULE){let s=n+1;const r=e.href,o=Ot(r).then(e=>jt(e,t)).then(e=>St(e).forEach(e=>{try{a.insertRule(e,e.startsWith("@import")?s+=1:a.cssRules.length)}catch(t){console.error("Error inserting rule from remote css",{rule:e,error:t})}})).catch(e=>{console.error("Error loading remote css",e.toString())});i.push(o)}})}catch(n){const s=e.find(e=>null==e.href)||document.styleSheets[0];null!=a.href&&i.push(Ot(a.href).then(e=>jt(e,t)).then(e=>St(e).forEach(e=>{s.insertRule(e,s.cssRules.length)})).catch(e=>{console.error("Error loading remote stylesheet",e)})),console.error("Error inlining remote css file",n)}}),Promise.all(i).then(()=>(e.forEach(e=>{if("cssRules"in e)try{he(e.cssRules||[]).forEach(e=>{a.push(e)})}catch(t){console.error("Error while reading CSS rules from "+e.href,t)}}),a))}function Et(e){return e.filter(e=>e.type===CSSRule.FONT_FACE_RULE).filter(e=>mt(e.style.getPropertyValue("src")))}async function _t(e,t){if(null==e.ownerDocument)throw new Error("Provided element is not within a Document");const a=he(e.ownerDocument.styleSheets),i=await Ht(a,t);return Et(i)}function wt(e){return e.trim().replace(/["']/g,"")}function kt(e){const t=new Set;function a(e){const i=e.style.fontFamily||getComputedStyle(e).fontFamily;i.split(",").forEach(e=>{t.add(wt(e))}),Array.from(e.children).forEach(e=>{e instanceof HTMLElement&&a(e)})}return a(e),t}async function Rt(e,t){const a=await _t(e,t),i=kt(e),n=await Promise.all(a.filter(e=>i.has(wt(e.style.fontFamily))).map(e=>{const a=e.parentStyleSheet?e.parentStyleSheet.href:null;return pt(e.cssText,a,t)}));return n.join("\n")}async function Nt(e,t){const a=null!=t.fontEmbedCSS?t.fontEmbedCSS:t.skipFonts?null:await Rt(e,t);if(a){const t=document.createElement("style"),i=document.createTextNode(a);t.appendChild(i),e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t)}}async function Vt(e,t={}){const{width:a,height:i}=Oe(e,t),n=await it(e,t,!0);await Nt(n,t),await vt(n,t),yt(n,t);const s=await we(n,a,i);return s}async function Ct(e,t={}){const{width:a,height:i}=Oe(e,t),n=await Vt(e,t),s=await Ee(n),r=document.createElement("canvas"),o=r.getContext("2d"),l=t.pixelRatio||je(),c=t.canvasWidth||a,d=t.canvasHeight||i;return r.width=c*l,r.height=d*l,t.skipAutoScale||He(r),r.style.width=""+c,r.style.height=""+d,t.backgroundColor&&(o.fillStyle=t.backgroundColor,o.fillRect(0,0,r.width,r.height)),o.drawImage(s,0,0,r.width,r.height),r}async function xt(e,t={}){const a=await Ct(e,t);return a.toDataURL()}var Tt=a("19dc"),Dt=a("a5a2");
+/**
+ * Copyright (C) InnoCraft Ltd - All rights reserved.
+ *
+ * NOTICE: All information contained herein is, and remains the property of InnoCraft Ltd.
+ * The intellectual and technical concepts contained herein are protected by trade secret
+ * or copyright law. Redistribution of this information or reproduction of this material is
+ * strictly forbidden unless prior written permission is obtained from InnoCraft Ltd.
+ *
+ * You shall use this code only in accordance with the license agreement obtained from
+ * InnoCraft Ltd.
+ *
+ * @link https://www.innocraft.com/
+ * @license For license details see https://www.innocraft.com/license
+ */
+const Mt=[{stop:0,rgb:[43,89,255]},{stop:.2,rgb:[22,184,192]},{stop:.4,rgb:[76,175,80]},{stop:.6,rgb:[255,224,0]},{stop:.8,rgb:[245,124,0]},{stop:1,rgb:[229,57,53]}];function At(e=Mt){const t={};for(let a=0;a=i[d].stop&&s<=i[d+1].stop){r=i[d],o=i[d+1];break}const l=o.stop-r.stop,c=0===l?0:(s-r.stop)/l;return[Math.round(r.rgb[0]+(o.rgb[0]-r.rgb[0])*c),Math.round(r.rgb[1]+(o.rgb[1]-r.rgb[1])*c),Math.round(r.rgb[2]+(o.rgb[2]-r.rgb[2])*c)]}function Bt(e=100,t=10,a=Mt){const i=document.createElement("canvas");i.width=e,i.height=t;const n=i.getContext("2d");if(!n)return"";const s=n.createLinearGradient(0,0,e,0);for(let r=0;r(a&&(a.abort(),a=null),a=new AbortController,Tt["AjaxHelper"].post(Object.assign(Object.assign({},i),{},{method:e}),n,Object.assign(Object.assign({},t),{},{abortController:a})).finally(()=>{a=null}))}const Ft={class:"tooltip-item"},Ut={class:"tooltip-label"},$t={class:"tooltip-value"},zt={class:"tooltip-item"},Wt={class:"tooltip-label"},qt={class:"tooltip-value"};function Gt(e,t,a,i,n,r){return Object(s["withDirectives"])((Object(s["openBlock"])(),Object(s["createElementBlock"])("div",{ref:"tooltipRef",class:"tooltip",style:Object(s["normalizeStyle"])(e.tooltipStyle)},[Object(s["createElementVNode"])("div",Ft,[Object(s["createElementVNode"])("span",Ut,Object(s["toDisplayString"])(e.getClickCountTranslation),1),Object(s["createElementVNode"])("span",$t,Object(s["toDisplayString"])(e.getClickCount),1)]),Object(s["createElementVNode"])("div",zt,[Object(s["createElementVNode"])("span",Wt,Object(s["toDisplayString"])(e.getClickRateTranslation),1),Object(s["createElementVNode"])("span",qt,Object(s["toDisplayString"])(e.getClickRate),1)])],4)),[[s["vShow"],e.visible]])}var Xt=Object(s["defineComponent"])({props:{clickCount:{type:Number,required:!0},clickRate:{type:Number,required:!0},isMoves:{type:Boolean,required:!1,default:!1}},setup(){const e=Object(s["reactive"])({visible:!1,position:{top:0,left:0}}),t=Object(s["ref"])(null),a=Object(s["computed"])(()=>({top:e.position.top+"px",left:e.position.left+"px",position:"fixed",zIndex:1e3}));function i(a){e.position.top=a.clientY+10,e.position.left=a.clientX+10,e.visible=!0,Object(s["nextTick"])(()=>{const i=t.value;if(i){const{innerWidth:t,innerHeight:n}=window,s=i.getBoundingClientRect();s.right>t&&(e.position.left=a.clientX-s.width-10),s.bottom>n&&(e.position.top=a.clientY-s.height-10);const r=i.getBoundingClientRect();r.left<0&&(e.position.left=10),r.top<0&&(e.position.top=10)}})}function n(){e.visible=!1}return Object.assign(Object.assign({},Object(s["toRefs"])(e)),{},{tooltipRef:t,show:i,hide:n,tooltipStyle:a,translate:Tt["translate"]})},computed:{getClickCount(){return Tt["NumberFormatter"].formatNumber(this.clickCount)},getClickRate(){return Tt["NumberFormatter"].formatPercent(this.clickRate)},getClickCountTranslation(){const e=this.isMoves?"HeatmapSessionRecording_Moves":"HeatmapSessionRecording_Clicks";return Object(Tt["translate"])(e)},getClickRateTranslation(){const e=this.isMoves?"HeatmapSessionRecording_MoveRate":"HeatmapSessionRecording_ClickRate";return Object(Tt["translate"])(e)}}});Xt.render=Gt;var Jt=Xt;const Kt={class:"heatmapEmptyState"},Yt={class:"heatmapEmptyStateIcon"},Qt={key:0,src:"plugins/HeatmapSessionRecording/images/no-interactions.svg",width:"34",height:"38",alt:""},Zt={key:1,class:"icon-delete"},ea={class:"heatmapEmptyStateTitle"},ta={class:"heatmapEmptyStateSubtitle"},aa={class:"heatmapEmptyStateCodeWrapper"},ia=["textContent"],na=["href"];function sa(e,t,a,i,n,r){const o=Object(s["resolveDirective"])("copy-to-clipboard");return Object(s["openBlock"])(),Object(s["createElementBlock"])("div",Kt,[Object(s["createElementVNode"])("div",Yt,["noInteractions"===e.state?(Object(s["openBlock"])(),Object(s["createElementBlock"])("img",Qt)):(Object(s["openBlock"])(),Object(s["createElementBlock"])("span",Zt))]),Object(s["createElementVNode"])("h3",ea,Object(s["toDisplayString"])(e.title),1),Object(s["createElementVNode"])("p",ta,Object(s["toDisplayString"])(e.subtitle),1),"deletedManual"===e.state?(Object(s["openBlock"])(),Object(s["createElementBlock"])(s["Fragment"],{key:0},[Object(s["createElementVNode"])("div",aa,[Object(s["withDirectives"])(Object(s["createElementVNode"])("pre",{class:"heatmapEmptyStateCode",textContent:Object(s["toDisplayString"])(e.captureCommand)},null,8,ia),[[o,{}]])]),Object(s["createElementVNode"])("a",{class:"heatmapEmptyStateGuide btn",target:"_blank",rel:"noreferrer noopener",href:e.guideUrl},Object(s["toDisplayString"])(e.translate("HeatmapSessionRecording_ReadTheGuide")),9,na)],64)):Object(s["createCommentVNode"])("",!0)])}const ra="https://matomo.org/faq/heatmap-session-recording/how-to-capture-the-initial-heatmap-snapshot-manually/";var oa=Object(s["defineComponent"])({directives:{CopyToClipboard:Tt["CopyToClipboard"]},props:{state:{type:String,required:!0},idSiteHsr:{type:Number,required:!0}},computed:{title(){return"noInteractions"===this.state?Object(Tt["translate"])("HeatmapSessionRecording_EmptyStateNoInteractionsTitle"):Object(Tt["translate"])("HeatmapSessionRecording_EmptyStateSnapshotDeletedTitle")},subtitle(){switch(this.state){case"noInteractions":return Object(Tt["translate"])("HeatmapSessionRecording_EmptyStateNoInteractionsSubtitle");case"deletedManual":return Object(Tt["translate"])("HeatmapSessionRecording_EmptyStateSnapshotDeletedManualSubtitle");case"deletedPaused":return Object(Tt["translate"])("HeatmapSessionRecording_EmptyStateSnapshotDeletedPausedSubtitle");case"deletedNoRetake":return Object(Tt["translate"])("HeatmapSessionRecording_EmptyStateSnapshotDeletedEndedSubtitle");default:return Object(Tt["translate"])("HeatmapSessionRecording_EmptyStateSnapshotDeletedAutoSubtitle")}},captureCommand(){return`_paq.push(['HeatmapSessionRecording::captureInitialDom', ${this.idSiteHsr}])`},guideUrl(){return Object(Tt["externalRawLink"])(ra)}}});oa.render=sa;var la=oa;const{$:ca}=window,da=1,ma=2,pa=3,ua=15,ha=5,ga=60;let ba=null;const va=97,ya=10*va,fa='a, button, input, select, textarea, label, summary, [role="button"], [role="link"], [tabindex]',Oa={nav:"HeatmapSessionRecording_ElementTypeNavigation",ul:"HeatmapSessionRecording_ElementTypeList",ol:"HeatmapSessionRecording_ElementTypeList",form:"HeatmapSessionRecording_ElementTypeForm",header:"HeatmapSessionRecording_ElementTypeHeader",footer:"HeatmapSessionRecording_ElementTypeFooter",main:"HeatmapSessionRecording_ElementTypeMainContent",aside:"HeatmapSessionRecording_ElementTypeSidebar",section:"HeatmapSessionRecording_ElementTypeSection",article:"HeatmapSessionRecording_ElementTypeArticle",table:"General_Table"},ja=Object.keys(Oa).concat(["div","li","td","th","tr","tbody","thead"]);let Sa=32e3;const Ha=String(window.navigator.userAgent).toLowerCase();function Ea(e,t,a){const i=ca(e);i.css("height","400px");const n=a.getIframeHeight();i.css("height",n+"px"),ca(t).css("height",n+"px").css("width",i.width()+"px").empty();const s=Math.ceil(n/Sa);for(let r=1;r<=s;r+=1){let e=Sa;r===s&&(e=n%Sa),ca(t).append(``),ca(t).find("#heatmap"+r).css({height:e+"px"})}return s}function _a(e,t,a,i){const n=ca(t);n.css("height","400px");const s=a.getIframeHeight();n.css("height",s+"px");const r=1e3,o=s/r,l=i.reduce((e,t)=>e+parseInt(t.value,10),0),c=[];let d=0,m=null,p=100,u=0;if(i.forEach(e=>{const t=parseInt(e.value,10),a=parseInt(e.label,10),i=Math.round(a*o);m&&m.position===i?d+=t:(0!==l&&(p=(l-d)/l*100),d+=t,m={percentageValue:10*parseFloat(p.toFixed(1)),position:u,percent:p.toFixed(1)},c.push(m)),u=i}),c.length){const e=c.some(e=>0===e.position);e||c.unshift({percent:"100.0",percentageValue:1e3,position:0})}else c.push({percent:"0",percentageValue:0,position:0});let h=0;const g=1e3;c&&c.length&&c[0]&&(h=c[c.length-1].percentageValue);const b=n.width();let v=null;for(let y=0;y`)}ca(".scrollHeatmapLeaf",e).tooltip({track:!0,items:"*",tooltipClass:"heatmapTooltip",show:!1,hide:!1})}function wa(e,t,a,i){const n=Ea(e,t,a),s=[];for(let r=1;r<=n;r+=1){const e={min:i.min,max:i.max,data:[]},t={container:document.getElementById("heatmap"+r),radius:10,maxOpacity:.5,minOpacity:0,blur:.75,gradient:At()};if(i&&i.data&&i.data.length>=2e4?t.radius=8:i&&i.data&&i.data.length>=2e3&&(t.radius=9),1===n)e.data=i.data;else{const t=(r-1)*Sa,a=t+Sa-1;i.data.forEach(i=>{if(i.y>=t&&i.y<=a){const a=Object.assign(Object.assign({},i),{},{y:i.y-t});e.data.push(a)}})}const a=me.a.create(t);a.setData(e),s.push(a)}return s}async function ka(e,t){const a=t.createElement("img");a.src=e;try{return await a.decode(),!0}catch(i){return!1}}Ha.match(/(iPod|iPhone|iPad|Android|IEMobile|Windows Phone)/i)?Sa=2e3:(Ha.indexOf("msie ")>0||Ha.indexOf("trident/")>0||Ha.indexOf("edge")>0)&&(Sa=8e3);var Ra=Object(s["defineComponent"])({props:{idSiteHsr:{type:Number,required:!0},deviceTypes:{type:Array,required:!0},heatmapTypes:{type:Array,required:!0},breakpointMobile:{type:Number,required:!0},breakpointTablet:{type:Number,required:!0},offsetAccuracy:{type:Number,required:!0},heatmapPeriod:{type:String,required:!0},heatmapDate:{type:String,required:!0},url:{type:String,required:!0},isActive:Boolean,numSamples:{type:Object,required:!0},excludedElements:{type:String,required:!0},createdDate:{type:String,required:!0},createdDateRaw:{type:String,required:!0},heatmapName:{type:String,required:!0},desktopPreviewSize:{type:Number,required:!0},iframeResolutionsValues:{type:Object,required:!0},imageProxyNonce:{type:String,default:""},hasSnapshot:{type:Boolean,default:!0},captureManually:Boolean,snapshotDeleted:Boolean,isPaused:Boolean},components:{Field:Dt["Field"],Tooltip:Jt,HeatmapEmptyState:la},data(){return{isLoading:!1,isExporting:!1,iframeWidth:this.desktopPreviewSize,customIframeWidth:this.desktopPreviewSize,avgFold:0,summaryAvgFold:0,heatmapType:this.heatmapTypes[0].key,deviceType:this.deviceTypes[0].key,iframeResolutions:this.iframeResolutionsValues,actualNumSamples:this.numSamples,dataCoordinates:[],currentElement:null,totalClicks:0,topClickedElements:[],scrollReach:[],fetchGeneration:0,scrollAreaMaxHeight:0,previewScale:1,recordingHeight:0,summaryCardHeight:0,frameNeedsVScroll:!0,tooltipShowTimeoutId:null,clickCount:0,clickRate:0}},setup(e){const t=Object(s["ref"])(null);let a=null;const i=new Promise(e=>{a=e});let n=null;const r=t=>(n||(n=Lt(t).recordingFrame,n.excludeElements(e.excludedElements),n.addClass("html","piwikHeatmap"),n.addClass("html","matomoHeatmap"),n.addWorkaroundForSharepointHeatmaps()),n),o=Object(s["ref"])(null),l=(e,t,a,i)=>{o.value=wa(e,t,a,i)};return{iframeLoadedPromise:i,onLoaded:a,getRecordedHeatmap:It("HeatmapSessionRecording.getRecordedHeatmap"),getRecordedClickHeatmap:It("HeatmapSessionRecording.getRecordedHeatmap"),getRecordedScrollHeatmap:It("HeatmapSessionRecording.getRecordedHeatmap"),getRecordedHeatmapMetadata:It("HeatmapSessionRecording.getRecordedHeatmapMetadata"),getRecordingIframe:r,heatmapInstances:o,renderHeatmap:l,tooltip:t}},created(){-1===this.iframeResolutions.indexOf(this.breakpointMobile)&&this.iframeResolutions.push(this.breakpointMobile),-1===this.iframeResolutions.indexOf(this.breakpointTablet)&&this.iframeResolutions.push(this.breakpointTablet),this.iframeResolutions=this.iframeResolutions.sort((e,t)=>e-t),this.fetchHeatmap(),Tt["Matomo"].postEvent("hidePeriodSelector")},mounted(){this.onWindowResize(),window.addEventListener("resize",this.onWindowResize)},updated(){this.updateSummaryCardHeight()},emits:["exporting"],watch:{isExporting(){this.$emit("exporting",this.isExporting)},isLoading(){if(!0===this.isLoading)return;this.$nextTick(()=>this.onWindowResize());const e=window.document.getElementById("heatmapContainer");e&&(e.addEventListener("mouseleave",e=>{this.tooltipShowTimeoutId&&(clearTimeout(this.tooltipShowTimeoutId),this.tooltipShowTimeoutId=null),this.currentElement=null,this.handleTooltip(e,0,0,"hide");const t=window.document.getElementById("highlightDiv");t&&(t.hidden=!0)}),e.addEventListener("mousemove",e=>{this.handleMouseMove(e)}))}},beforeUnmount(){window.removeEventListener("resize",this.onWindowResize),this.removeScrollHeatmap()},methods:{onWindowResize(){this.updateScrollAreaMaxHeight(),this.updateSummaryCardHeight(),this.updatePreviewScale()},getScrollbarGutterWidth(){if(null===ba){const e=document.createElement("div");e.className="heatmapScrollArea",e.style.cssText="position:absolute;visibility:hidden;pointer-events:none;width:100px;height:100px;border:0;padding:0;overflow-y:scroll;",document.body.appendChild(e),ba=Math.max(0,e.offsetWidth-e.clientWidth),e.remove()}return ba},updateSummaryCardHeight(){const e=this.$refs.heatmapScrollArea,t=null===e||void 0===e?void 0:e.parentElement,a=null===t||void 0===t?void 0:t.querySelector(".heatmapSummaryCard");if(!t||!a)return;const i="column"===window.getComputedStyle(t).flexDirection,n=i?0:Math.round(a.getBoundingClientRect().height);n!==this.summaryCardHeight&&(this.summaryCardHeight=n)},updatePreviewScale(){const e=this.$refs.heatmapScrollArea,t=null===e||void 0===e?void 0:e.parentElement;if(!e||!t||!t.clientWidth||!this.iframeWidth)return;const a=window.getComputedStyle(t),i=window.getComputedStyle(e),n="column"===a.flexDirection,s=t.querySelector(".heatmapSummaryCard"),r=!n&&s?s.getBoundingClientRect().width+(parseFloat(a.columnGap||"0")||0):0,o=(parseFloat(i.borderLeftWidth||"0")||0)+(parseFloat(i.borderRightWidth||"0")||0),l=t.clientWidth-r-o;if(l<=0)return;const c=e=>Math.round(1e4*e)/1e4,d=Math.min(1,c(l/this.iframeWidth)),m=this.scrollAreaMaxHeight?Math.max(Math.min(this.scrollAreaMaxHeight,this.recordingHeight||1/0),this.summaryCardHeight):1/0,p=!this.recordingHeight||d*this.recordingHeight<=m;this.frameNeedsVScroll=!p,this.previewScale=p?d:Math.min(1,c((l-this.getScrollbarGutterWidth())/this.iframeWidth))},updateScrollAreaMaxHeight(){const e=this.$refs.heatmapScrollArea,t=this.$el;if(!e||null===t||void 0===t||!t.getBoundingClientRect)return;const a=e.parentElement,i=e.getBoundingClientRect(),n=a?t.getBoundingClientRect().bottom-a.getBoundingClientRect().bottom:0,s=i.top+window.scrollY;this.scrollAreaMaxHeight=Math.max(400,window.innerHeight-s-n-16)},getDeviceSamples(e){return parseInt(String(this.actualNumSamples["nb_samples_device_"+e]),10)||0},resolveClickedElement(e,t){const a=e.findElement(t),i=a&&a[0]?a[0]:null;if(!i)return null;const n=this.normalizeClickedElement(i,!0);return n?{key:this.getElementKey(n),label:this.getElementLabel(n,t),boundingRectangle:n.getBoundingClientRect(),isPreferred:null!==this.normalizeClickedElement(i,!1)}:null},normalizeClickedElement(e,t){const a=e.closest(fa);if(a)return a;const i=this.getWrappedInteractiveElement(e);return i||(this.isUsefulClickedElement(e,t)?e:null)},getWrappedInteractiveElement(e){const t=e.tagName.toLowerCase();if(Oa[t]||this.getElementText(e))return null;const a=e.querySelectorAll(fa);return 1===a.length?a[0]:null},isUsefulClickedElement(e,t){const a=e.tagName.toLowerCase();return-1===["html","body"].indexOf(a)&&(!!/^h[1-6]$/.test(a)||(!!t||!(-1!==ja.indexOf(a)&&e.children.length)))},getElementKey(e){const t=e.getAttribute("id");if(t)return`${e.tagName.toLowerCase()}#${t}`;const a=e.getAttribute("name");return a?`${e.tagName.toLowerCase()}[name="${a}"]`:this.getElementPath(e)},getElementPath(e){const t=[];let a=e;while(a){const e=a.tagName.toLowerCase();if("body"===e||"html"===e)break;const i=a.getAttribute("id");if(i){t.unshift(`${e}#${i}`);break}const n=a.parentElement;if(!n){t.unshift(e);break}const s=a.tagName,r=Array.from(n.children).filter(e=>e.tagName===s).indexOf(a)+1;t.unshift(`${e}:nth-of-type(${r})`),a=n}return t.join(">")||e.tagName.toLowerCase()},getElementLabel(e,t){const a=e.tagName.toLowerCase(),i=e.getAttribute("type"),n=[this.getElementText(e),e.getAttribute("aria-label"),e.getAttribute("title"),e.getAttribute("alt"),e.getAttribute("placeholder"),e.getAttribute("name"),e.getAttribute("id"),"button"===i&&e.getAttribute("value")||"",this.getDescendantImageLabel(e),t,a].map(e=>(e||"").replace(/\s+/g," ").trim()).find(e=>!!e)||a,s=n.length>ga?n.slice(0,ga-3)+"...":n,r=this.getElementTypeLabel(e);return r?Object(Tt["translate"])("HeatmapSessionRecording_TopClickedElementLabel",s,r):s},getElementText(e){const t=e.matches(fa)?e.textContent||"":[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent||"").join(" ");return t.replace(/\s+/g," ").trim()},getDescendantImageLabel(e){const t=e.querySelector("img");return t?(t.getAttribute("alt")||t.getAttribute("title")||"").replace(/\s+/g," ").trim():""},getElementTypeLabel(e){const t=e.tagName.toLowerCase(),a=e.getAttribute("role"),i=e.getAttribute("type");if("img"===t||e.matches(fa)&&!this.getElementText(e)&&e.querySelector("img"))return Object(Tt["translate"])("HeatmapSessionRecording_ElementTypeImage");if("a"===t||"link"===a)return Object(Tt["translate"])("HeatmapSessionRecording_ElementTypeLink");if("button"===t||"button"===a||"button"===i)return Object(Tt["translate"])("HeatmapSessionRecording_ElementTypeButton");if(/^h[1-6]$/.test(t))return Object(Tt["translate"])("HeatmapSessionRecording_ElementTypeHeading");if(-1!==["input","select","textarea"].indexOf(t))return Object(Tt["translate"])("HeatmapSessionRecording_ElementTypeField");const n=Oa[t];return n?Object(Tt["translate"])(n):""},formatTopClickedElements(e,t){return[...e.values()].sort((e,t)=>t.count-e.count||e.label.localeCompare(t.label)).slice(0,ha).map(e=>{const a=t?Math.round(e.count/t*100):0;return Object.assign(Object.assign({},e),{},{percent:a,percentLabel:Tt["NumberFormatter"].formatPercent(a)})})},getScrollReach(e){const t=e.reduce((e,t)=>e+(parseInt(t.value,10)||0),0);if(!t)return[];const a=[{key:"top",mark:0,label:Object(Tt["translate"])("HeatmapSessionRecording_ScrollReachTop")},{key:"q25",mark:250,label:Tt["NumberFormatter"].formatPercent(25)},{key:"q50",mark:500,label:Tt["NumberFormatter"].formatPercent(50)},{key:"q75",mark:750,label:Tt["NumberFormatter"].formatPercent(75)},{key:"bottom",mark:ya,label:Object(Tt["translate"])("HeatmapSessionRecording_ScrollReachBottom")}];return a.map(({key:a,mark:i,label:n})=>{const s=e.reduce((e,t)=>(parseInt(t.label,10)||0)>=i?e+(parseInt(t.value,10)||0):e,0),r=Math.round(s/t*100);return{key:a,label:n,percent:r,percentLabel:Tt["NumberFormatter"].formatPercent(r)}})},isCurrentFetch(e){return e===this.fetchGeneration},applyScrollReach(e,t){this.isCurrentFetch(t)&&(this.scrollReach=this.getScrollReach(e))},getHeatmapDataPoints(e,t){const a={min:0,max:0,data:[]};let i=0,n=0;for(let s=0;s1&&(n+=1))}}return{dataPoints:a,numEntriesHigherThan1:n,totalValue:i}},getTopClickedElements(e,t,a){const i=this.collectClickCandidates(e,t),n=new Map(Array.from(i.entries()).filter(([,e])=>e.isPreferred)),s=n.size>=ha?n:i;return this.rankClickedElements(s,e,a)},collectClickCandidates(e,t){const a=new Map,i=new Map;return e.data.forEach(e=>{const n=parseInt(e.value,10)||0;if(!e.selector||!n)return;let s=i.get(e.selector);if(i.has(e.selector)||(s=this.resolveClickedElement(t,e.selector),i.set(e.selector,s)),!s)return;const r=a.get(s.key);r?r.count+=n:a.set(s.key,Object.assign(Object.assign({},s),{},{count:n,percent:0,percentLabel:Tt["NumberFormatter"].formatPercent(0)}))}),a},rankClickedElements(e,t,a){const i=new Map(Array.from(e.entries()).sort((e,t)=>t[1].count-e[1].count||e[1].label.localeCompare(t[1].label)).slice(0,ua)),n=new Map;i.forEach((e,t)=>{n.set(t,e.count),e.count=0});const s=Array.from(i.values()),r=e=>(e.boundingRectangle.right-e.boundingRectangle.left)*(e.boundingRectangle.bottom-e.boundingRectangle.top);return t.data.forEach(e=>{const t=s.filter(t=>(null===e||void 0===e?void 0:e.x)>=t.boundingRectangle.left&&(null===e||void 0===e?void 0:e.x)<=t.boundingRectangle.right&&(null===e||void 0===e?void 0:e.y)>=t.boundingRectangle.top&&(null===e||void 0===e?void 0:e.y)<=t.boundingRectangle.bottom);if(!t.length)return;const a=t.reduce((e,t)=>r(t){e.count||(e.count=n.get(t)||0)}),this.formatTopClickedElements(new Map(Array.from(i.entries()).sort((e,t)=>t[1].count-e[1].count||e[1].label.localeCompare(t[1].label)).slice(0,ha)),a)},removeScrollHeatmap(){const e=this.$refs.iframeRecordingContainer;ca(e).find(".scrollHeatmapLeaf").remove()},proxyImageUrl(e,t){const a=Tt["MatomoUrl"].stringify({module:"HeatmapSessionRecording",action:"getProxiedImage",idSite:Tt["Matomo"].idSite,idSiteHsr:this.idSiteHsr,url:e,nonce:t});return new URL("?"+a,window.location.href).href},isCrossOriginUrl(e){if(!e||e.startsWith("data:"))return!1;try{return new URL(e).origin!==window.location.origin}catch(t){return!1}},extractCrossOriginBackgroundUrls(e){const t=[],a=/url\(\s*['"]?([^'")]+)['"]?\s*\)/g;let i=a.exec(e);while(null!==i)this.isCrossOriginUrl(i[1])&&t.push(i[1]),i=a.exec(e);return t},proxyCssBackground(e,t,a){return e.replace(/url\(\s*['"]?([^'")]+)['"]?\s*\)/g,(e,i)=>this.isCrossOriginUrl(i)&&a.has(i)?`url("${this.proxyImageUrl(i,t)}")`:e)},async exportToImage(){if(!this.hasAdminAccess)return;this.isExporting=!0,Tt["NotificationsStore"].remove("hsrExportImage");const e=[],t=[],a=[];let i=null;const n=this.$refs.heatmapContainer,s=n.style.zIndex,r=this.$refs.aboveFoldLine,o=r.style.zIndex;try{var l,c;const d=this.$refs.recordingPlayer,m=d.contentDocument;if(!m)return;const p=this.imageProxyNonce;n.style.zIndex="2147483646",r.style.zIndex="2147483647",m.querySelectorAll("svg").forEach(e=>{e.hasAttribute("xmlns:xlink")||(a.push(()=>e.removeAttribute("xmlns:xlink")),e.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"))}),m.querySelectorAll("img").forEach(t=>{if(!(t.complete&&t.naturalWidth>0))return;const a=t.currentSrc||t.src;this.isCrossOriginUrl(a)?(e.push({img:t,src:t.src,srcset:t.srcset}),t.src=this.proxyImageUrl(a,p),t.srcset=""):a!==t.src&&(e.push({img:t,src:t.src,srcset:t.srcset}),t.src=a,t.srcset="")});const u=m.defaultView||window,h=[],g=new Set;m.querySelectorAll("*").forEach(e=>{const t=u.getComputedStyle(e).backgroundImage;if(!t||!t.includes("url("))return;const a=this.extractCrossOriginBackgroundUrls(t);a.length&&(h.push({el:e,background:t}),a.forEach(e=>g.add(e)))});const b=new Set;await Promise.all([...g].map(async e=>{await ka(e,m)&&b.add(e)})),h.forEach(({el:e,background:a})=>{const i=this.proxyCssBackground(a,p,b);i!==a&&(t.push({el:e,background:e.style.backgroundImage}),e.style.backgroundImage=i)});const v=u.getComputedStyle(m.documentElement),y=u.getComputedStyle(m.body),f=e=>!!e&&"transparent"!==e&&"rgba(0, 0, 0, 0)"!==e,O="none"!==v.backgroundImage||f(v.backgroundColor)?v:y;i=d.style.cssText,["background-color","background-position","background-size","background-repeat","background-origin","background-clip","background-attachment"].forEach(e=>{d.style.setProperty(e,O.getPropertyValue(e))}),d.style.backgroundImage=this.proxyCssBackground(O.getPropertyValue("background-image"),p,b);const j=this.$refs.iframeRecordingContainer,S=d.offsetWidth,H=j.offsetHeight,E=m.body.getBoundingClientRect();d.style.marginLeft=E.left+u.scrollX+parseFloat(y.borderLeftWidth)+parseFloat(y.paddingLeft)+"px",d.style.marginTop=E.top+u.scrollY+parseFloat(y.borderTopWidth)+parseFloat(y.paddingTop)+"px";const _=await xt(j,{width:S,height:H,backgroundColor:f(O.backgroundColor)?O.backgroundColor:"#ffffff",pixelRatio:1,cacheBust:!0,includeQueryParams:!0,onImageErrorHandler:()=>{},style:{transform:"none"}}),w=(null===(l=this.heatmapTypes.find(e=>e.key===this.heatmapType))||void 0===l?void 0:l.name)||"",k=(null===(c=this.deviceTypes.find(e=>e.key===this.deviceType))||void 0===c?void 0:c.name)||"",R=[this.createdDateRaw.slice(0,10),"Heatmap",this.heatmapName,w,k,this.iframeWidth+"px"].join(" ").replace(/[\\/:*?"<>|]/g,"").replace(/\s+/g," ").trim(),N=document.createElement("a");N.href=_,N.download=R+".png",document.body.appendChild(N),N.click(),document.body.removeChild(N)}catch(d){console.error("Failed to export heatmap image",d),Tt["NotificationsStore"].show({message:Object(Tt["translate"])("HeatmapSessionRecording_ExportImageError"),context:"error",id:"hsrExportImage",type:"transient"})}finally{e.forEach(({img:e,src:t,srcset:a})=>{e.src=t,e.srcset=a}),t.forEach(({el:e,background:t})=>{e.style.backgroundImage=t}),a.forEach(e=>e()),null!==i&&(this.$refs.recordingPlayer.style.cssText=i),n.style.zIndex=s,r.style.zIndex=o,this.isExporting=!1}},fetchSummaryMetadata(){this.fetchGeneration+=1;const e=this.fetchGeneration,t=Tt["MatomoUrl"].parsed.value.segment?decodeURIComponent(Tt["MatomoUrl"].parsed.value.segment):void 0,a={idSiteHsr:this.idSiteHsr,heatmapType:this.heatmapType,deviceType:this.deviceType,period:this.heatmapPeriod,date:this.heatmapDate,filter_limit:-1,segment:t};this.getRecordedHeatmapMetadata(a).then(t=>{e===this.fetchGeneration&&(Array.isArray(t)&&t[0]?[this.actualNumSamples]=t:this.actualNumSamples=t)})},fetchHeatmap(){if(!this.hasSnapshot)return this.isLoading=!1,void this.fetchSummaryMetadata();if(this.removeScrollHeatmap(),this.heatmapInstances){const e=this.heatmapInstances;e.forEach(e=>{e.setData({max:1,min:0,data:[]})})}this.isLoading=!0,this.avgFold=0,this.summaryAvgFold=0,this.dataCoordinates=[],this.totalClicks=0,this.topClickedElements=[],this.scrollReach=[],this.fetchGeneration+=1;const e=this.fetchGeneration,t=Tt["MatomoUrl"].parsed.value.segment?decodeURIComponent(Tt["MatomoUrl"].parsed.value.segment):void 0,a={idSiteHsr:this.idSiteHsr,heatmapType:this.heatmapType,deviceType:this.deviceType,period:this.heatmapPeriod,date:this.heatmapDate,filter_limit:-1,segment:t},i=this.getRecordedHeatmap(a),n=this.getRecordedHeatmapMetadata(a);Promise.all([i,n,this.iframeLoadedPromise]).then(e=>{var t;const a=this.$refs.recordingPlayer,i=this.getRecordingIframe(a);Ea(this.$refs.recordingPlayer,this.$refs.heatmapContainer,i),this.removeScrollHeatmap();const n=e[0],s=e[1];if(Array.isArray(s)&&s[0]?[this.actualNumSamples]=s:this.actualNumSamples=s,this.isLoading=!1,this.isScrollHeatmapType)this.scrollReach=this.getScrollReach(n),_a(this.$refs.iframeRecordingContainer,a,i,n);else{const e=this.getHeatmapDataPoints(n,i),{dataPoints:t}=e;if(this.dataCoordinates=t.data,this.totalClicks=e.totalValue,2===this.heatmapType)this.topClickedElements=this.getTopClickedElements(e.dataPoints,i,e.totalValue),e.numEntriesHigherThan1/t.data.length>=.1&&t.data.length>120?t.max=2:t.max=1;else{const e=10,a={};if(t.data.forEach(i=>{if(!i||!i.value)return;let n=parseInt(i.value,10);n>t.max&&(t.max=n),n>e&&(n=e);const s=""+n;s in a?a[s]+=1:a[s]=0}),t.max>e){let i=0;for(let n=e;n>1;n-=1){const e=""+n;if(e in a&&(i+=a[e]),i/t.data.length>=.2){t.max=n;break}}if(t.max>e){t.max=5;for(let e=5;e>0;e-=1){const i=""+e;if(i in a){t.max=e;break}}}}}this.renderHeatmap(this.$refs.recordingPlayer,this.$refs.heatmapContainer,i,t)}this.recordingHeight=i.getIframeHeight()||0;let r=0;if(null!==(t=this.actualNumSamples)&&void 0!==t&&t["avg_fold_device_"+this.deviceType]){const e=this.actualNumSamples["avg_fold_device_"+this.deviceType],t=i.getIframeHeight();t&&(this.summaryAvgFold=parseInt(""+e/100*t,10),e{this.isLoading=!1}),2!==this.heatmapType&&Promise.all([this.getRecordedClickHeatmap(Object.assign(Object.assign({},a),{},{heatmapType:2})),this.iframeLoadedPromise]).then(t=>{if(!this.isCurrentFetch(e))return;const a=this.getRecordingIframe(this.$refs.recordingPlayer),i=this.getHeatmapDataPoints(t[0],a);this.topClickedElements=this.getTopClickedElements(i.dataPoints,a,i.totalValue)}).catch(()=>{this.isCurrentFetch(e)&&(this.topClickedElements=[])}),3!==this.heatmapType&&this.getRecordedScrollHeatmap(Object.assign(Object.assign({},a),{},{heatmapType:3})).then(t=>{this.applyScrollReach(t,e)}).catch(()=>{this.isCurrentFetch(e)&&(this.scrollReach=[])})},changeDeviceType(e){this.deviceType=e,this.deviceType===da?this.changeIframeWidth(this.desktopPreviewSize,!1):this.deviceType===ma?this.changeIframeWidth(this.breakpointTablet||960,!1):this.deviceType===pa&&this.changeIframeWidth(this.breakpointMobile||600,!1)},changeIframeWidth(e,t){this.iframeWidth=e,this.customIframeWidth=this.iframeWidth,this.totalClicks=0,this.dataCoordinates=[],this.updatePreviewScale(),this.fetchHeatmap(),t&&Tt["Matomo"].helper.lazyScrollToContent()},changeHeatmapType(e){this.heatmapType=e,this.totalClicks=0,this.clickCount=0,this.clickRate=0,this.dataCoordinates=[],this.fetchHeatmap()},handleMouseMove(e){const t=window.document.getElementById("highlightDiv");if(!t)return;this.tooltipShowTimeoutId&&(clearTimeout(this.tooltipShowTimeoutId),this.tooltipShowTimeoutId=null,this.currentElement=null),t.hidden||this.handleTooltip(e,0,0,"move");const a=this.lookUpRecordedElementAtEventLocation(e);if(!a||a===this.currentElement)return;this.handleTooltip(e,0,0,"hide"),t.hidden=!0;const i=a.getBoundingClientRect();let n=0;this.dataCoordinates.forEach(e=>{e.yi.bottom||e.xi.right||(n+=parseInt(e.value,10))}),this.tooltipShowTimeoutId=setTimeout(()=>{this.currentElement=a,t.hidden=!1;const i=this.totalClicks?Math.round(n/this.totalClicks*1e4)/100:0,s=a.getBoundingClientRect();t.style.top=s.top+"px",t.style.left=s.left+"px",t.style.width=s.width+"px",t.style.height=s.height+"px",this.handleTooltip(e,n,i,"show"),this.tooltipShowTimeoutId=null},100)},lookUpRecordedElementAtEventLocation(e){const t=e.target;if(!t)return null;const a=window.document.getElementById("recordingPlayer");if(!a)return null;const i=a.contentWindow?a.contentWindow.document:a.contentDocument;if(!i)return null;const n=t.getBoundingClientRect();return i.elementFromPoint((e.clientX-n.left)/this.previewScale,(e.clientY-n.top)/this.previewScale)},handleTooltip(e,t,a,i){this.tooltip&&("show"===i?(this.clickCount=t,this.clickRate=a,this.tooltip.show(e)):"move"===i?this.tooltip.show(e):this.tooltip.hide())}},computed:{totalRecordings(){return this.getDeviceSamples(this.deviceType)},selectedDeviceTypeName(){const e=this.deviceTypes.find(e=>e.key===this.deviceType);return e?e.name:""},scrollAreaStyle(){if(this.scrollAreaMaxHeight){if(this.recordingHeight){const e=Math.max(Math.min(this.scrollAreaMaxHeight,this.recordingHeight),this.summaryCardHeight),t={height:e+"px"};return this.frameNeedsVScroll||(t["overflow-y"]="hidden"),t}return{maxHeight:this.scrollAreaMaxHeight+"px"}}},scaleBoxStyle(){const e={width:Math.round(this.previewScale*this.iframeWidth)+"px"};return this.previewScale<1&&this.recordingHeight&&(e.height=Math.round(this.previewScale*this.recordingHeight)+"px"),e},containerStyle(){const e={width:this.iframeWidth+"px","--preview-scale":""+this.previewScale};return this.previewScale<1&&(e.transform=`scale(${this.previewScale})`,e["transform-origin"]="0 0"),e},deviceBreakdown(){const e=this.deviceTypes,t=e.map(e=>this.getDeviceSamples(e.key)),a=t.reduce((e,t)=>e+t,0);return a?e.map((e,i)=>{const n=t[i]/a*100;return{key:e.key,name:e.name,percent:n,percentLabel:Tt["NumberFormatter"].formatPercent(Math.round(n))}}):[]},isScrollHeatmapType(){return 3===this.heatmapType},tokenAuth(){return Tt["MatomoUrl"].parsed.value.token_auth},embedUrl(){return"?"+Tt["MatomoUrl"].stringify({module:"HeatmapSessionRecording",action:"embedPage",idSite:Tt["Matomo"].idSite,idSiteHsr:this.idSiteHsr,token_auth:this.tokenAuth||void 0})},iframeWidthOptions(){return this.iframeResolutions.map(e=>({key:e,value:e+"px"}))},recordedSamplesSince(){const e=Object(Tt["translate"])("HeatmapSessionRecording_HeatmapXRecordedSamplesSince",`${this.actualNumSamples.nb_samples_device_all}`,this.createdDate),t=Object(Tt["externalLink"])("https://matomo.org/faq/heatmap-session-recording/troubleshooting-heatmaps/"),a=Object(Tt["translate"])("HeatmapSessionRecording_HeatmapTroubleshoot",t,"