@postnord/web-components/postnord-web-components/p-4c986dbf.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as a,c as e,g as r,h as n,a as t}from"./p-C247oTEA.js";import{a as c}from"./p-D_UyW-KH.js";import{o as i}from"./p-IFVOY5Gf.js";import{uuidv4 as d,ripple as o}from"./index.esm.js";const p='pn-card{position:relative;display:block}pn-card .pn-card{position:relative;background-color:#ffffff;color:#2d2013;border-radius:0.5em;display:flex;flex-direction:column;height:100%;overflow:hidden;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);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property: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-card .pn-card{transition-duration:0s;transition-delay:0s}}pn-card .pn-card[data-link]:hover{background-color:#e0f8ff}pn-card .pn-card[data-link][data-focus]{outline-color:#005d92}pn-card .pn-card{}pn-card .pn-card[data-link] .pn-card-navigation>[slot=navigation]{display:none}pn-card .pn-card[data-horizontal]{flex-direction:row}pn-card .pn-card[data-horizontal][data-reverse]{flex-direction:row-reverse}pn-card .pn-card[data-horizontal][data-reverse] .pn-card-picture{clip-path:ellipse(100% 175% at right center)}pn-card .pn-card[data-horizontal] .pn-card-content{flex:1 1 50%}pn-card .pn-card[data-horizontal] .pn-card-image{flex:1 1 50%;flex-direction:row}pn-card .pn-card[data-horizontal] .pn-card-picture{width:100%;clip-path:ellipse(100% 175% at left center)}pn-card .pn-card[data-reverse]{flex-direction:column-reverse}pn-card .pn-card[data-reverse] .pn-card-picture{clip-path:ellipse(175% 100% at bottom center)}pn-card .pn-card-header{display:flex;flex-direction:column;gap:clamp(0.5em, 5vw, 0.75em)}pn-card .pn-card-label{font-size:clamp(1.125em, 5vw, 1.5em);font-weight:700;margin:0}pn-card .pn-card-label-overline{color:#5e554a;font-size:0.875em;font-weight:400;margin:0}pn-card .pn-card-link{display:inline-flex;align-items:center;gap:0.25em;color:#005d92;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-card .pn-card-link{transition-duration:0s;transition-delay:0s}}pn-card .pn-card-link:hover{color:#0d234b;text-decoration-color:#0d234b}pn-card .pn-card-link:hover>pn-icon>.pn-icon-svg>path{fill:#0d234b}pn-card .pn-card-link:focus{outline:0;color:#0d234b;text-decoration-color:#0d234b}pn-card .pn-card-link:focus>pn-icon>.pn-icon-svg>path{fill:#0d234b}pn-card .pn-card-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}pn-card .pn-card-content{display:flex;flex-direction:column;flex-wrap:nowrap;flex:1;gap:clamp(0.5em, 5vw, 0.75em);padding:clamp(0.75em, 5vw, 1.5em) clamp(0.75em, 5vw, 1.5em)}pn-card .pn-card-section{display:flex;flex-direction:column;gap:0.5em;color:#5e554a}pn-card .pn-card-section-paragraph,pn-card .pn-card-section p{margin:0 0 0.25em}pn-card .pn-card-section-paragraph:last-child,pn-card .pn-card-section p:last-child{margin:0em}pn-card .pn-card-navigation{margin-top:auto;padding-top:clamp(0.5em, 5vw, 0.75em);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}pn-card .pn-card-navigation>pn-button{flex:1 1 12em}pn-card .pn-card-navigation:empty{display:none}pn-card .pn-card-image{position:relative;display:flex;flex-direction:column}pn-card .pn-card-picture{margin:0;padding:0;display:block;overflow:hidden;clip-path:ellipse(175% 100% at top center);aspect-ratio:var(--pn-card-aspect-ratio)}pn-card .pn-card-picture:empty{display:none}pn-card .pn-card-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}pn-card .pn-card-tags{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}pn-card .pn-card-tags:empty{display:none}pn-card .pn-card>.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}}';const l=class{constructor(r){a(this,r);this.pnCard=e(this,"pnCard")}id=`pn-card-${d()}`;idTitle=`${this.id}-title`;visibleOutline=false;get hostElement(){return r(this)}label;labelTag="h3";overline;text;cardId=null;horizontal=false;reverse=false;aspectRatio="";href;hrefLabel;target;rel="noopener noreferrer";icon=null;watchCardId(){const a=this.cardId||this.id;this.idTitle=`${a}-title`}pnCard;componentWillLoad(){this.watchCardId()}isExternal(){return this.target==="_blank"}showTitle(){return!!this.label}showHref(){return!!this.href&&(this.hrefLabel||this.showTitle())}getTitleId(){return this.hrefLabel?null:this.idTitle}getLabelledby(){return this.hrefLabel?null:this.showTitle()?this.idTitle:null}getIcon(){if(!!this.icon)return this.icon;return this.isExternal()?i:c}getHeadingTag(){const a=["h2","h3","h4","h5","h6","p"];return a.includes(this.labelTag)?this.labelTag:"h3"}handleFocus({type:a,target:e}){this.visibleOutline=a==="focus"&&e.matches(":focus-visible")}handleClick(a){o(a,this.hostElement,".pn-card");this.pnCard.emit({click:a})}render(){const a=this.getHeadingTag();return n(t,{key:"99d97442daa02d7ae0da69db84ae6ebf1d0145cd"},n("article",{key:"f2aef6939a35ba9268ae4e88f00c02dac93b4563",id:this.cardId,class:"pn-card","data-link":!!this.href,"data-horizontal":this.horizontal,"data-reverse":this.reverse,"data-focus":this.visibleOutline},n("div",{key:"76d3b45ce51ffeeb15cf1500b5128e0d90cf00d5",class:"pn-card-image"},n("picture",{key:"6fbb2c6553e5a096c469374ab3538816cc58bcee",class:"pn-card-picture",style:{"--pn-card-aspect-ratio":this.aspectRatio||"unset"}},n("slot",{key:"bf19dc236985578d244dbb1f27478a1e15fc4329",name:"image"}))),n("div",{key:"0b2fc27f0a6451aff18174841a26cfd8e8f0f101",class:"pn-card-content"},n("header",{key:"c24fe3514cffcae5408284b8cd630f395045ec34",class:"pn-card-header"},n("div",{key:"41876b6073adcdc18a9d7dc0345c7adaec0df26a",class:"pn-card-tags"},n("slot",{key:"7c65be5ef27775c022549583ae42071b85af9cfc",name:"tags"})),!!this.overline&&n("p",{key:"b08f053d89780f0dba59f7fc8bd46ceeb702688d",class:"pn-card-label-overline"},this.overline),!!this.label&&n(a,{key:"cbc9fdf4ea655c98d735dd7ebc991129d9808b02",id:this.getTitleId(),class:"pn-card-label"},this.label),n("slot",{key:"79269ee892fcaec7c56b2629dcd42bb4ab2468e5",name:"header"})),n("section",{key:"4fe6fa933389c8b88945b9f9d53b5fb018c5cf83",class:"pn-card-section"},!!this.text&&n("p",{key:"35e3e02b4deefd71fd99f3096c79478b341ffb14",class:"pn-card-section-paragraph"},this.text),n("slot",{key:"ebf6e503fd1a2eb82fd3888befb48ce7a03ef1ab"})),n("nav",{key:"de98607f36de5916e52c0c281aa56a5c31a27a2b",class:"pn-card-navigation"},this.showHref()&&n("a",{key:"4ad2924ae80f1c3c233be5c8b60da600120560cf",class:"pn-card-link",href:this.href,target:this.target,rel:this.rel,"aria-labelledby":this.getLabelledby(),onClick:a=>this.handleClick(a),onFocus:a=>this.handleFocus(a),onBlur:a=>this.handleFocus(a)},this.hrefLabel,n("pn-icon",{key:"3a9a86b333d2a98863113465c814475dfa3dcf7d",color:"blue700",icon:this.getIcon()})),n("slot",{key:"9dcd860d60f8e1df492eebf166b4ae037404b0d4",name:"navigation"})))))}static get watchers(){return{cardId:["watchCardId"]}}};l.style=p;export{l as pn_card};
//# sourceMappingURL=p-4c986dbf.entry.js.map