@postnord/web-components/postnord-web-components/p-363a7dc5.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,g as t,f as i,h as l,a as n}from"./p-c2c6299e.js";import{o as s}from"./p-773aa70a.js";import{r as o}from"./p-c511b4fb.js";const r="pn-tile{position:relative;font-size:1em;}pn-tile a.pn-tile-link{position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;opacity:0}pn-tile .pn-tile{border:0.1rem solid #d3cecb;outline:none;background:#ffffff;box-shadow:0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);cursor:pointer;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;padding:1.5em;padding:min(7%, 1.5em);word-break:break-word;text-decoration:none;border-radius:0.8rem;transition:box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s, background 0.2s linear, border 0.1s linear;position:relative;overflow:hidden;text-align:left;user-select:text;height:100%}pn-tile .pn-tile.vertical,pn-tile .pn-tile.simple{text-align:center}pn-tile .pn-tile.vertical h3,pn-tile .pn-tile.simple h3{font-size:1.5em;font-size:clamp(1em, var(--w) * 1.4, 1.5em)}pn-tile .pn-tile.vertical .tile-slot,pn-tile .pn-tile.simple .tile-slot{font-size:1em;font-size:clamp(1.2rem, var(--w), 1em)}pn-tile .pn-tile.vertical>*,pn-tile .pn-tile.simple>*{margin:0.5em 0}pn-tile .pn-tile.simple{flex-direction:column;align-items:center}pn-tile .pn-tile.simple .tile-slot{display:none}pn-tile .pn-tile.simple h3>pn-icon{margin-left:0.1em;vertical-align:bottom}pn-tile .pn-tile.simple>*{margin:0.5em}pn-tile .pn-tile.simple>.text-cont{margin:0.5em}pn-tile .pn-tile.simple>svg,pn-tile .pn-tile.simple>.tile-illustration-slot{max-width:clamp(3em, 70%, 10em)}pn-tile .pn-tile.simple>svg,pn-tile .pn-tile.simple>.tile-illustration-slot,pn-tile .pn-tile.simple>.text-cont{flex:auto}pn-tile .pn-tile.horizontal{flex-wrap:nowrap}pn-tile .pn-tile>*{margin:0.5em;z-index:2}pn-tile .pn-tile>svg,pn-tile .pn-tile>.tile-illustration-slot{width:100%;max-width:8em;flex:0.5 3 calc((32rem - 100%) * 999);z-index:2}pn-tile .pn-tile>.tile-illustration-slot{max-width:13em}pn-tile .pn-tile>.tile-illustration-slot>*{width:100%;display:block}pn-tile .pn-tile>.text-cont{flex:1 1 calc((32rem - 100%) * 999)}pn-tile .pn-tile>.text-cont.horizontal{flex:1 1 0}pn-tile .pn-tile>.text-cont.horizontal>h3{white-space:nowrap}pn-tile .pn-tile h3{color:#005d92;font-size:1.5em}pn-tile .pn-tile .tile-slot{color:#5e554a;margin-top:0.25em}pn-tile a:focus-visible+.pn-tile{box-shadow:0 0 0 0.3rem #ffffff, 0 0 0 0.6rem #005d92}pn-tile .pn-tile:hover,pn-tile a:focus-visible+.pn-tile{background:#effbff;border:0.1rem solid #8eddf9}pn-tile .pn-tile:hover.vertical .tile-circle,pn-tile .pn-tile:hover.simple .tile-circle,pn-tile a:focus-visible+.pn-tile.vertical .tile-circle,pn-tile a:focus-visible+.pn-tile.simple .tile-circle{transform:translate(-50%, -90%);transform:translate(-50%, calc(var(--w) * 2 - 90%));opacity:1}pn-tile .pn-tile .tile-circle{position:absolute;top:0;left:50%;width:40em;height:40em;margin:0;background-color:#005d92;border-radius:50%;z-index:1;transform:translate(-50%, -100%);transition:transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1);opacity:0}pn-tile .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.05}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}";const a=r;const p=class{constructor(t){e(this,t)}mo;get hostElement(){return t(this)}simple=false;emInPx=16;longpress=false;timer;label;illustration;url;horizontal=false;target;rel="noopener";checkCardSize=new ResizeObserver((e=>{const t=e=>{const t=e*.1/this.emInPx;return`${t}em`};e.forEach((e=>{if(this.horizontal)return;const i=e.contentRect.width;e.target.classList.toggle("vertical",i<this.remToPx(31.99));requestAnimationFrame((()=>{e.target.style.setProperty("--w",t(i))}))}))}));setIllustration(){const e=this.hostElement.querySelector(".tile-illustration");if(!this.illustration){e.remove();return}const t=this.illustration;e.outerHTML=t}componentWillLoad(){const e=this.hostElement.querySelector('[slot="illustration"]');this.illustration=e?null:this.illustration}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>i(this.hostElement)));this.mo.observe(this.hostElement,{childList:true});this.setIllustration();const e=this.hostElement.querySelector(".pn-tile");const t=this.hostElement.querySelector(".pn-tile-link");this.checkCardSize.observe(e);this.clickHandler([t,e],(t=>o(t,e)));this.simple=!this.horizontal&&!this.hostElement.querySelector(".tile-slot").textContent.trim();this.emInPx=parseFloat(window.getComputedStyle(this.hostElement).fontSize)}remToPx(e){return e*parseFloat(getComputedStyle(document.documentElement).fontSize)}clickHandler(e,t){const i=["mouseup","mousedown"];const l=["pn-button","button","a","input","pn-checkbox","pn-radio-button"];const n=e=>l.some((t=>e.target.closest(t)));const s=e=>{if(e.type==="mousedown"){this.longpress=false;this.timer=setTimeout((()=>this.longpress=true),200)}};const o=(e,i)=>{e.addEventListener(i,(e=>{if(n(e))return;s(e);if(e.type==="mouseup"){clearTimeout(this.timer);if(this.longpress||e.button===2)return;const i=e.target.closest("pn-tile").querySelector("a");e.preventDefault();t(e);if(!i.matches(":focus"))i.focus();if(e.ctrlKey||e.metaKey||e.button===1){window.open(i.getAttribute("href"),"_blank");return}i.click()}}))};e.forEach((e=>{if(e.tagName==="A"){e.addEventListener("click",(e=>t(e)));return}i.forEach((t=>o(e,t)))}))}getClassNames(){let e="pn-tile ";if(this.simple)e+="simple ";if(this.horizontal)e+="horizontal ";return e}getTextContClassNames(){let e="text-cont ";if(this.horizontal)e+="horizontal ";return e}render(){const e={href:this.url,target:this.target,rel:!this.rel&&this.target==="_blank"?"noopener":this.rel};return l(n,{key:"ff4eb09a7bbe9b1fb48524adf400e61c137a22e1"},l("a",{key:"9910f4f0ced66a1fb371610221f98358722256f4",class:"pn-tile-link",...e},this.label),l("div",{key:"28dfbc275f37318f598d87e7259bc974d6f4e005",class:this.getClassNames()},l("div",{key:"2a8c55b27898e42100991b2f66c26d1cc0b20360",class:"tile-circle"}),l("div",{key:"9d4c121e2d5fccdd83a1c1d3f84978e8006be483",class:"tile-illustration"}),!this.illustration&&l("div",{key:"cd5abb9f8faeb36a8d9fad505fd691456bb2f69a",class:"tile-illustration-slot"},l("slot",{key:"d3f42654d23b220a9b5f8527e479e07f51c3b1ef",name:"illustration"})),l("div",{key:"82fe3c9f45e968acb08945ae0a155eb595a57556",class:this.getTextContClassNames()},l("h3",{key:"127bdf4704f51afb10d2b7057d176798035ac929"},this.label,this.target==="_blank"?l("pn-icon",{icon:s,small:true,color:"blue700"}):null),l("div",{key:"d27a02a87e368e88947569d511edee7e27659ed0",class:"tile-slot"},l("slot",{key:"6a4de1735bc2e720c53afb3274b6ecf13e674a07"})))))}};p.style=a;export{p as pn_tile};
//# sourceMappingURL=p-363a7dc5.entry.js.map