https://bernstein-badshop.de/cdn/shop/t/2/assets/product-dimension.js?v=167405830539214987621770121533

1const dataMap={B:{svg:'<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="19" cy="19" r="19" fill="#F5F5F5"/><path d="M30.7271 18.8542C30.9712 18.6101 30.9712 18.2144 30.7271 17.9703L26.7496 13.9928C26.5055 13.7487 26.1098 13.7487 25.8657 13.9928C25.6217 14.2369 25.6217 14.6326 25.8657 14.8767L29.4013 18.4122L25.8657 21.9478C25.6217 22.1918 25.6217 22.5876 25.8657 22.8316C26.1098 23.0757 26.5055 23.0757 26.7496 22.8316L30.7271 18.8542ZM7.28071 17.9703C7.03664 18.2144 7.03664 18.6101 7.28071 18.8542L11.2582 22.8317C11.5023 23.0757 11.898 23.0757 12.1421 22.8317C12.3862 22.5876 12.3862 22.1918 12.1421 21.9478L8.60654 18.4122L12.1421 14.8767C12.3862 14.6326 12.3862 14.2369 12.1421 13.9928C11.898 13.7487 11.5023 13.7487 11.2582 13.9928L7.28071 17.9703ZM30.2852 18.4122L30.2852 17.7872L7.72266 17.7872L7.72266 18.4122L7.72266 19.0372L30.2852 19.0372L30.2852 18.4122Z" fill="#111111"/></svg>',title:"Breite"},L:{svg:'<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5015" cy="18.5015" r="18.5015" fill="#F5F5F5"/><path d="M12.4041 27.5957C12.4934 27.9291 12.8362 28.1269 13.1696 28.0376L18.6029 26.5817C18.9363 26.4924 19.1342 26.1497 19.0448 25.8163C18.9555 25.4829 18.6128 25.285 18.2794 25.3743L13.4498 26.6684L12.1557 21.8388C12.0663 21.5054 11.7236 21.3075 11.3902 21.3969C11.0568 21.4862 10.8589 21.8289 10.9483 22.1623L12.4041 27.5957ZM24.5968 8.24513C24.5074 7.91172 24.1647 7.71385 23.8313 7.80319L18.398 9.25905C18.0645 9.34839 17.8667 9.6911 17.956 10.0245C18.0454 10.3579 18.3881 10.5558 18.7215 10.4665L23.5511 9.17236L24.8452 14.002C24.9345 14.3354 25.2773 14.5333 25.6107 14.4439C25.9441 14.3546 26.142 14.0119 26.0526 13.6785L24.5968 8.24513ZM13.0078 27.4339L13.5491 27.7464L24.5343 8.7194L23.9931 8.4069L23.4518 8.0944L12.4665 27.1214L13.0078 27.4339Z" fill="#111111"/></svg>',title:"Länge"}

1,T:{svg:'<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5015" cy="18.5015" r="18.5015" fill="#F5F5F5"/><path d="M12.4041 27.5957C12.4934 27.9291 12.8362 28.1269 13.1696 28.0376L18.6029 26.5817C18.9363 26.4924 19.1342 26.1497 19.0448 25.8163C18.9555 25.4829 18.6128 25.285 18.2794 25.3743L13.4498 26.6684L12.1557 21.8388C12.0663 21.5054 11.7236 21.3075 11.3902 21.3969C11.0568 21.4862 10.8589 21.8289 10.9483 22.1623L12.4041 27.5957ZM24.5968 8.24513C24.5074 7.91172 24.1647 7.71385 23.8313 7.80319L18.398 9.25905C18.0645 9.34839 17.8667 9.6911 17.956 10.0245C18.0454 10.3579 18.3881 10.5558 18.7215 10.4665L23.5511 9.17236L24.8452 14.002C24.9345 14.3354 25.2773 14.5333 25.6107 14.4439C25.9441 14.3546 26.142 14.0119 26.0526 13.6785L24.5968 8.24513ZM13.0078 27.4339L13.5491 27.7464L24.5343 8.7194L23.9931 8.4069L23.4518 8.0944L12.4665 27.1214L13.0078 27.4339Z" fill="#111111"/></svg>',title:"Tiefe"},H:{svg:'<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="19.5" cy="19.5" r="19.5" fill="#F5F5F5"/><path d="M19.0581 30.9107C19.3021 31.1548 19.6979 31.1548 19.9419 30.9107L23.9194 26.9332C24.1635 26.6891 24.1635 26.2934 23.9194 26.0493C23.6753 25.8053 23.2796 25.8053 23.0355 26.0493L19.5 29.5849L15.9645 26.0493C15.7204 25.8053 15.3247 25.8053 15.0806 26.0493C14.8365 26.2934 14.8365 26.6891 15.0806 26.9332L19.0581 30.9107ZM19.9419 6.87056C19.6979 6.62648 19.3021 6.62648 19.0581 6.87056L15.0806 10.848C14.8365 11.0921 14.8365 11.4878 15.0806 11.7319C15.3247 11.976 15.7204 11.976 15.9645 11.7319L19.5 8.19638L23.0355 11.7319C23.2796 11.976 23.6753 11.976 23.9194 11.7319C24.1635 11.4878 24.1635 11.0921 23.9194 10.848L19.9419 6.87056ZM19.5 30.4688L20.125 30.4688L20.125 7.3125L19.5 7.3125L18.875 7.3125L18.875 30.4687L19.5 30.4688Z" fill="#111111"/></svg>',title:"Höhe"}

1,D:{svg:'<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18.5015" cy="18.5015" r="18.5015" fill="#F5F5F5"/><path d="M12.4041 27.5957C12.4934 27.9291 12.8362 28.1269 13.1696 28.0376L18.6029 26.5817C18.9363 26.4924 19.1342 26.1497 19.0448 25.8163C18.9555 25.4829 18.6128 25.285 18.2794 25.3743L13.4498 26.6684L12.1557 21.8388C12.0663 21.5054 11.7236 21.3075 11.3902 21.3969C11.0568 21.4862 10.8589 21.8289 10.9483 22.1623L12.4041 27.5957ZM24.5968 8.24513C24.5074 7.91172 24.1647 7.71385 23.8313 7.80319L18.398 9.25905C18.0645 9.34839 17.8667 9.6911 17.956 10.0245C18.0454 10.3579 18.3881 10.5558 18.7215 10.4665L23.5511 9.17236L24.8452 14.002C24.9345 14.3354 25.2773 14.5333 25.6107 14.4439C25.9441 14.3546 26.142 14.0119 26.0526 13.6785L24.5968 8.24513ZM13.0078 27.4339L13.5491 27.7464L24.5343 8.7194L23.9931 8.4069L23.4518 8.0944L12.4665 27.1214L13.0078 27.4339Z" fill="#111111"/></svg>',title:"Durchmesser"},GH:{svg:'<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="19.5" cy="19.5" r="19.5" fill="#F5F5F5"/><path d="M19.5 30V9M15 12l4.5-3L24 12M15 27l4.5 3 4.5-3" stroke="#111111" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"Glashöhe"}};class ProductDimensionsLiquid extends HTMLElement{constructor(){super(),this.metafieldHTML=this.getAttribute("data-metafield-html"),this.DEFAULT_ORDER=["L","B","H"],this.DEFAULT_DIAMETER_ORDER=["D","B"]}connectedCallback(){this.metafieldHTML&&this.parseAndRender(this.metafieldHTML)}parseAndRender(e){e=[...(new DOMParser).parseFromString(e,"text/html").querySelectorAll("tr")];const i=this.parseSameLine(e),l=this.parseMultiLine(e);var t;let s="mm";var e=[...i?.order.map((e,t)=>({k:e,v:i.values[t],u:i.unit}))||[],...l?.order.map((e,t)=>({k:e,v:l.values[t],u:l.unit}))||[]];const n={};e.forEach(e=>{void 0!==e.v&&void 0===n[e.k]&&(n[e.k]=e.v,s=e.u)}),n.GH&&n.H&&n.GH===n.H&&delete n.H,e=Object.keys(n),t=Object.values(n),0<e.length&&this.render({order:e,values:t,unit:s})}parseSameLine(e){e=e.find(e=>/maße|abmessungen|größe|innenmaß/i.test(e.textContent)&&!e.textContent.toLowerCase().includes("verpackung"));if(!e)return null;var t=e.querySelector("td:nth-child(2)");if(!t)return null;var t=t.textContent,i=t.match(/([cmd]m)/i)?.[1];if(!i)return null;e=e.textContent.match(/\(([^)]+)\)/)?.[1];let l=[];(l=e&&/^[BLHTxX\s,]+$/i.test(e)?e.match(/[BLHT]/gi)?.map(e=>e.toUpperCase())||[]:l).length||(l=/Ø|ø/.test(t)?this.DEFAULT_DIAMETER_ORDER:this.DEFAULT_ORDER);e=t.replace(/(ca\.|etwa|circa|approx\.?)/i,"").match(/[\d,.]+/g);return!e||e.length<2?null:{order:t=l.slice(0,e.length),values:e.slice(0,t.length),unit:i}}parseMultiLine(e){const t={breite:"B","höhe":"H","länge":"L",tiefe:"T","glashöhe":"GH"},s=[],n=[],r=[];return e.forEach(e=>{const l=e.textContent.toLowerCase().replace(/(ca\.|etwa|circa)/g,"");Object.entries(t).forEach(([e,t])=>{var i;l.includes(e)&&!s.includes(t)&&(e=l.match(/\d+[\d,.]*/)?.[0],i=l.match(/([cmd]m)/)?.[1],e)&&i&&(s.push(t),n.push(e),r.push(i))})}),0<s.length?{order:s,values:n,unit:r[0]}:null}render({order:e,values:i,unit:l}){let s="";e.forEach((e,t)=>{s+=`
2                <div class="size-item">
3                    ${dataMap[e].svg}
4                    <p>
5                        ${dataMap[e].title}<br>
6                        <span>${i[t]} ${l}</span>
7                    </p>
8                </div>
9            `}),this.innerHTML=`
10            <div class="size">
11                ${s}
12            </div>
13        `}}customElements.get("product-dimensions-liquid")||customElements.define("product-dimensions-liquid",ProductDimensionsLiquid);