@postnord/web-components
Version:
PostNord Web Components
5 lines • 8.39 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{transformTag as e,proxyCustomElement as a,HTMLElement as r,createEvent as n,h as t,Host as i}from"@stencil/core/internal/client";import{a as c}from"./arrow_right.js";import{o as d}from"./open_in_new.js";import{u as o,o as l}from"./helpers.js";import{d as p}from"./pn-icon2.js";const s=a(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.pnCard=n(this,"pnCard",7)}id="pn-card-"+o();idTitle=this.id+"-title";visibleOutline=!1;get hostElement(){return this}label;labelTag="h3";overline;text;cardId=null;horizontal=!1;reverse=!1;aspectRatio="";href;hrefLabel;target;rel="noopener noreferrer";icon=null;watchCardId(){this.idTitle=(this.cardId||this.id)+"-title"}pnCard;componentWillLoad(){this.watchCardId()}isExternal(){return"_blank"===this.target}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(){return this.icon?this.icon:this.isExternal()?d:c}getHeadingTag(){return["h2","h3","h4","h5","h6","p"].includes(this.labelTag)?this.labelTag:"h3"}handleFocus({type:e,target:a}){this.visibleOutline="focus"===e&&a.matches(":focus-visible")}handleClick(e){l(e,this.hostElement,".pn-card"),this.pnCard.emit({click:e})}render(){const e=this.getHeadingTag();return t(i,{key:"65ed28a0a625760d11f9bd7961978af7573f7062"},t("article",{key:"2f05480099b5bedddba115a3f00174d0ed4f9658",id:this.cardId,class:"pn-card","data-link":!!this.href,"data-horizontal":this.horizontal,"data-reverse":this.reverse,"data-focus":this.visibleOutline},t("div",{key:"1ec2a31f2e71b9f4a511efb49461541f141ff077",class:"pn-card-image"},t("picture",{key:"869648c55b9e64091b55f501b759ffcddc33a8c5",class:"pn-card-picture",style:{"--pn-card-aspect-ratio":this.aspectRatio||"unset"}},t("slot",{key:"9e31feb5e4c486159fb4f9ebb57cefbd7d156988",name:"image"}))),t("div",{key:"e2cfd35b304c05fb569da26aa7f248ed53b1e7aa",class:"pn-card-content"},t("header",{key:"a5730ce876dd1b5fa0c6c37ba400801530bf99ea",class:"pn-card-header"},t("div",{key:"4e9566e679185db1704e313002d20d7016558c25",class:"pn-card-tags"},t("slot",{key:"0c4863c1ef7b69ef8a333dd7ac834f76b8a3fc00",name:"tags"})),!!this.overline&&t("p",{key:"8129ee0e178e4db9fcbf9895e75d64c02279a0a6",class:"pn-card-label-overline"},this.overline),!!this.label&&t(e,{key:"62a8d9c1512683f3e4248eac05bf2f33e0374fe9",id:this.getTitleId(),class:"pn-card-label"},this.label),t("slot",{key:"13f3c2e3e182ce134dc7be0af3c8c2dec1c1f751",name:"header"})),t("section",{key:"c34ddb8484423b65927ace2e0b46deed6b1d3b64",class:"pn-card-section"},!!this.text&&t("p",{key:"8370b223a2af93f64eb2efd84dda0b172324be54",class:"pn-card-section-paragraph"},this.text),t("slot",{key:"363cc14089263d2e640f35707a6503aeb77ae8a6"})),t("nav",{key:"5636561cc2dc0eb1a1f42d213e87e73da9a3ce98",class:"pn-card-navigation"},this.showHref()&&t("a",{key:"9c7be2037e54320ccb2668170828e7ffc8fd7d25",class:"pn-card-link",href:this.href,target:this.target,rel:this.rel,"aria-labelledby":this.getLabelledby(),onClick:e=>this.handleClick(e),onFocus:e=>this.handleFocus(e),onBlur:e=>this.handleFocus(e)},this.hrefLabel,t("pn-icon",{key:"d77e3349eb1ed2cb3e8e72418c70d66b93ad5b20",color:"blue700",icon:this.getIcon()})),t("slot",{key:"c28d4208e146a77f334fc326e7abbbf53e86e028",name:"navigation"})))))}static get watchers(){return{cardId:[{watchCardId:0}]}}static get style(){return`${e("pn-card")}{position:relative;display:block}${e("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)} (prefers-reduced-motion: reduce){${e("pn-card")} .pn-card{transition-duration:0s;transition-delay:0s}}${e("pn-card")} .pn-card[data-link]:hover{background-color:#e0f8ff}${e("pn-card")} .pn-card[data-link][data-focus]{outline-color:#005d92}${e("pn-card")} .pn-card{}${e("pn-card")} .pn-card[data-link] .pn-card-navigation>[slot=navigation]{display:none}${e("pn-card")} .pn-card[data-horizontal]{flex-direction:row}${e("pn-card")} .pn-card[data-horizontal][data-reverse]{flex-direction:row-reverse}${e("pn-card")} .pn-card[data-horizontal][data-reverse] .pn-card-picture{clip-path:ellipse(100% 175% at right center)}${e("pn-card")} .pn-card[data-horizontal] .pn-card-content{flex:1 1 50%}${e("pn-card")} .pn-card[data-horizontal] .pn-card-image{flex:1 1 50%;flex-direction:row}${e("pn-card")} .pn-card[data-horizontal] .pn-card-picture{width:100%;clip-path:ellipse(100% 175% at left center)}${e("pn-card")} .pn-card[data-reverse]{flex-direction:column-reverse}${e("pn-card")} .pn-card[data-reverse] .pn-card-picture{clip-path:ellipse(175% 100% at bottom center)}${e("pn-card")} .pn-card-header{display:flex;flex-direction:column;gap:clamp(0.5em, 5vw, 0.75em)}${e("pn-card")} .pn-card-label{font-size:clamp(1.125em, 5vw, 1.5em);font-weight:700;margin:0}${e("pn-card")} .pn-card-label-overline{color:#5e554a;font-size:0.875em;font-weight:400;margin:0}${e("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)} (prefers-reduced-motion: reduce){${e("pn-card")} .pn-card-link{transition-duration:0s;transition-delay:0s}}${e("pn-card")} .pn-card-link:hover{color:#0d234b;text-decoration-color:#0d234b}${e("pn-card")} .pn-card-link:hover>${e("pn-icon")} .pn-icon-svg>path{fill:#0d234b}${e("pn-card")} .pn-card-link:focus{outline:0;color:#0d234b;text-decoration-color:#0d234b}${e("pn-card")} .pn-card-link:focus>${e("pn-icon")} .pn-icon-svg>path{fill:#0d234b}${e("pn-card")} .pn-card-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}${e("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)}${e("pn-card")} .pn-card-section{display:flex;flex-direction:column;gap:0.5em;color:#5e554a}${e("pn-card")} .pn-card-section-paragraph,${e("pn-card")} .pn-card-section p{margin:0 0 0.25em}${e("pn-card")} .pn-card-section-paragraph:last-child,${e("pn-card")} .pn-card-section p:last-child{margin:0em}${e("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}${e("pn-card")} .pn-card-navigation>${e("pn-button")}{flex:1 1 12em}${e("pn-card")} .pn-card-navigation:empty{display:none}${e("pn-card")} .pn-card-image{position:relative;display:flex;flex-direction:column}${e("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)}${e("pn-card")} .pn-card-picture:empty{display:none}${e("pn-card")} .pn-card-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${e("pn-card")} .pn-card-tags{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${e("pn-card")} .pn-card-tags:empty{display:none}${e("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} ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}`}},[772,"pn-card",{label:[1],labelTag:[1,"label-tag"],overline:[1],text:[1],cardId:[1,"card-id"],horizontal:[4],reverse:[4],aspectRatio:[1,"aspect-ratio"],href:[1],hrefLabel:[1,"href-label"],target:[1],rel:[1],icon:[1],visibleOutline:[32]},void 0,{cardId:[{watchCardId:0}]}]),f=s,h=function(){"undefined"!=typeof customElements&&["pn-card","pn-icon"].forEach((a=>{switch(a){case"pn-card":customElements.get(e(e(a)))||customElements.define(e(e(a)),s);break;case"pn-icon":customElements.get(e(e(a)))||p()}}))};export{f as PnCard,h as defineCustomElement}