@postnord/web-components/postnord-web-components/p-605d99df.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as e,g as i,f as n,h as l,a}from"./p-43660913.js";import{o}from"./p-773aa70a.js";import{o as r}from"./p-f64d17a6.js";const s='pn-tile{position:relative;display:block}pn-tile .pn-tile{position:relative;overflow:hidden;word-break:break-word;text-align:center;border-radius:0.5em;padding:clamp(0.75em, 3vw, 1.5em);height:100%;color:#2d2013;background-color:#ffffff;box-shadow:0em 0.0625em 0.125em 0em rgba(20, 20, 20, 0.11), 0em 0.1875em 0.4375em 0em rgba(0, 0, 0, 0.13);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1em, 5vw, 1.5em);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:box-shadow, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tile .pn-tile{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-tile .pn-tile[data-horizontal]{text-align:left;flex-direction:row;flex-wrap:nowrap;gap:clamp(1em, 5vw, 1.5em)}pn-tile .pn-tile[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(0% 100% at 0% 50%)}pn-tile .pn-tile[data-horizontal] .pn-tile-text{flex-grow:2}pn-tile .pn-tile[data-href][data-focus]{outline-color:#005d92;box-shadow:0em 0em 0em 0em rgba(20, 20, 20, 0.11), 0em 0em 0em 0em rgba(0, 0, 0, 0.13)}pn-tile .pn-tile[data-href]:hover{background-color:rgba(183, 235, 252, 0.3)}pn-tile .pn-tile[data-href]:hover .pn-tile-illustration[data-circle]:before,pn-tile .pn-tile[data-href]:focus-within .pn-tile-illustration[data-circle]:before{clip-path:ellipse(100% 50% at 50% -25%)}pn-tile .pn-tile[data-href]:hover[data-horizontal] .pn-tile-illustration[data-circle]:before,pn-tile .pn-tile[data-href]:focus-within[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(50% 100% at -25% 50%)}pn-tile .pn-tile[data-href]:hover .pn-tile-link,pn-tile .pn-tile[data-href]:focus-within .pn-tile-link{color:#0d234b;text-decoration-color:#0d234b}pn-tile .pn-tile[data-href]:hover pn-icon .pn-icon-svg path,pn-tile .pn-tile[data-href]:focus-within pn-icon .pn-icon-svg path{fill:#0d234b}pn-tile .pn-tile-illustration{z-index:2;flex:1 1;max-width:7.5em;max-height:7.5em}pn-tile .pn-tile-illustration[data-icon]{flex:0 0}pn-tile .pn-tile-illustration[data-icon] pn-icon{padding:1em;border-radius:50%;background-color:#e0f8ff}pn-tile .pn-tile-illustration[data-icon] pn-icon>svg{font-size:2em}pn-tile .pn-tile-illustration-slot{display:block;height:100%;width:100%}pn-tile .pn-tile-illustration[data-circle]:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-color:rgba(183, 235, 252, 0.7);background-color:rgba(183, 235, 252, 0.7);clip-path:ellipse(100% 0% at 50% 0%);transition-property:clip-path;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tile .pn-tile-illustration[data-circle]:before{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile-text{z-index:3;flex:1 1;display:flex;flex-direction:column;gap:0.5em}pn-tile .pn-tile-link{cursor:pointer;color:#005d92;text-decoration:underline;text-decoration-color:transparent;-webkit-tap-highlight-color:transparent;transition-property:color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tile .pn-tile-link{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile-link:focus{outline:0;text-decoration-color:#0d234b;color:#0d234b}pn-tile .pn-tile-link:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}pn-tile .pn-tile-title{font-family:inherit;font-weight:700;font-size:clamp(1.25em, 3vw, 1.5em);margin:0em}pn-tile .pn-tile-title pn-icon{margin-left:0.25em;vertical-align:middle}pn-tile .pn-tile-slot{font-weight:400;color:#5e554a;display:flex;flex-direction:column;gap:0.25em}pn-tile .pn-tile-paragraph,pn-tile .pn-tile p{font-size:0.875em}pn-tile .pn-tile-paragraph:last-child,pn-tile .pn-tile p:last-child{margin:0em}';const p=s;const c=class{constructor(i){t(this,i);this.pnTile=e(this,"pnTile",7);this.visibleOutline=false;this.label=undefined;this.text=undefined;this.url=undefined;this.target=undefined;this.rel="noopener noreferrer";this.illustration=undefined;this.icon=undefined;this.horizontal=false}mo;tile;illustrationSlot;get hostElement(){return i(this)}pnTile;connectedCallback(){this.mo=new MutationObserver((()=>n(this.hostElement)));this.mo.observe(this.hostElement,{subtree:true,childList:true})}disconnectedCallback(){this.mo?.disconnect()}isExternal(){return this.target==="_blank"}showIcon(){return!!this.icon&&!this.showSlotIllustration()}showPropIllustration(){return!!this.illustration&&!this.showSlotIllustration()}showSlotIllustration(){return!!this.illustrationSlot?.querySelector('[slot="illustration"]')}showImage(){return this.showIcon()||this.showPropIllustration()||this.showSlotIllustration()}handleFocus({type:t,target:e}){this.visibleOutline=t==="focus"&&e.matches(":focus-visible")}clickHandler(t){r(t,this.tile);this.pnTile.emit({click:t})}render(){return l(a,{key:"3aad61d5d06a72a5f2a5cd1808b18c3f7d8e437b"},l("div",{key:"15c10f8f668544caa32385121caf382626aa1b8f",class:"pn-tile","data-horizontal":this.horizontal,"data-href":!!this.url,"data-focus":this.visibleOutline,ref:t=>this.tile=t},l("div",{key:"9e61d1919dff7343e394ed86b1800284eb750121",class:"pn-tile-illustration","data-circle":!!this.url,"data-icon":this.showIcon(),role:"presentation",hidden:!this.showImage()},this.showPropIllustration()?l("pn-illustration",{illustration:this.illustration}):this.showIcon()&&l("pn-icon",{color:"blue700",icon:this.icon}),l("div",{key:"59e5cdf5d9fb09045e215758692d5dc402a2a49a",class:"pn-tile-illustration-slot",hidden:!this.showSlotIllustration(),ref:t=>this.illustrationSlot=t},l("slot",{key:"00bc0dafa3ae0f89959d0a61d8221ce1e4bc8c2f",name:"illustration"}))),l("div",{key:"c88f8daa6ee6f309d71a3205299ab98a1157a9a9",class:"pn-tile-text"},l("h3",{key:"2cb429bf55430c1fcea8965c4cc73b511738d89d",class:"pn-tile-title"},this.url?l("a",{class:"pn-tile-link",href:this.url,target:this.target,rel:!this.rel&&this.isExternal()?"noopener noreferrer":this.rel,onClick:t=>this.clickHandler(t),onFocus:t=>this.handleFocus(t),onBlur:t=>this.handleFocus(t)},this.label):this.label,this.isExternal()&&l("pn-icon",{key:"5ea4aae5bf9328d68da0ee75990d95c590dc6749",icon:o,small:true,color:"blue700"})),l("div",{key:"b9d56f8d2ee862215ef7ae7143d3da8073274fe5",class:"pn-tile-slot"},!!this.text&&l("p",{key:"76b95108a202c183f270868959cb4a7bb5fe0c57",class:"pn-tile-paragraph"},this.text),l("slot",{key:"fb3b513fd684adbcbd2af81360437ceec1ff9928"})))))}};c.style=p;export{c as pn_tile};
//# sourceMappingURL=p-605d99df.entry.js.map