@postnord/web-components/esm/pn-card.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-5606614b.js';
import { a as arrow_right } from './arrow_right-1b36bbb0.js';
import { o as open_in_new } from './open_in_new-3f9f4e63.js';
import { u as uuidv4, o as ripple } from './helpers-9dac5241.js';

const pnCardCss = "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[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 PnCardStyle0 = pnCardCss;

const PnCard = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.pnCard = createEvent(this, "pnCard", 7);
        this.visibleOutline = false;
        this.label = undefined;
        this.labelTag = 'h3';
        this.overline = undefined;
        this.text = undefined;
        this.cardId = null;
        this.horizontal = false;
        this.reverse = false;
        this.aspectRatio = '';
        this.href = undefined;
        this.hrefLabel = undefined;
        this.target = undefined;
        this.rel = 'noopener noreferrer';
        this.icon = null;
    }
    id = `pn-card-${uuidv4()}`;
    idTitle = `${this.id}-title`;
    get hostElement() { return getElement(this); }
    watchCardId() {
        const id = this.cardId || this.id;
        this.idTitle = `${id}-title`;
    }
    /** Emitted when you click on the card link (if you use the `href` prop). */
    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() ? open_in_new : arrow_right;
    }
    getHeadingTag() {
        const tags = ['h2', 'h3', 'h4', 'h5', 'h6', 'p'];
        return tags.includes(this.labelTag) ? this.labelTag : 'h3';
    }
    handleFocus({ type, target }) {
        this.visibleOutline = type === 'focus' && target.matches(':focus-visible');
    }
    handleClick(event) {
        ripple(event, this.hostElement, '.pn-card');
        this.pnCard.emit({ click: event });
    }
    render() {
        const TitleTag = this.getHeadingTag();
        return (h(Host, { key: '4c1a897e5b6fd69663aa076de44231cbde9b85b1' }, h("article", { key: 'a93fb7255cd352eed29814f010f0111eebcf0d46', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '1861f3a85267df00d8d974ed2f014fb097288d4c', class: "pn-card-image" }, h("picture", { key: 'd0acfe747efd63762ddb0dd7cbe67baadb7ad4e1', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'e8360ba8b54d5ad376b549189102eb6412fb6a3e', name: "image" }))), h("div", { key: '1b613813ac38d257cd2c64cb3e7f053950b8d58a', class: "pn-card-content" }, h("header", { key: '4048f0f93b62c71f3caa553ba0f217064f1f8b80', class: "pn-card-header" }, h("div", { key: '071f1f13e492909e27aa4fb860c8ba3a9e88efc4', class: "pn-card-tags" }, h("slot", { key: 'bb4ad165fc8443b55784fcad35d8733f89e34b55', name: "tags" })), !!this.overline && h("p", { key: 'c75cfc0045739d7dfa4c2c6aef79dd57d64ccbc1', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'e65289e4307c08f8c92e9b83b3981cd8413a63d4', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: 'd901c192ed2e029f9b2a0a7df421d6c008f80ea6', name: "header" })), h("section", { key: 'da99e7c8a01924e670a9cbee424ac899870c1a8f', class: "pn-card-section" }, !!this.text && h("p", { key: 'c27938d4704111825dca3ab621133bdd99e401f0', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: '6dfd91ac2b404b23522812c22247d01c5da6a557' })), h("nav", { key: '10252f1454848d360a727c2a85b9ab5461d73b0b', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '82640b1972e9f740694a5c135857e8b3c87e7a2b', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '50d3021b2f7f2722426f5299fea249b596e8f28b', color: "blue700", icon: this.getIcon() }))), h("slot", { key: 'be97f6fc934ccd5f55fb577028c52757ada6c128', name: "navigation" }))))));
    }
    static get watchers() { return {
        "cardId": ["watchCardId"]
    }; }
};
PnCard.style = PnCardStyle0;

export { PnCard as pn_card };

//# sourceMappingURL=pn-card.entry.js.map