/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var arrow_right = require('./arrow_right-CABi9Wkp.js');
var open_in_new = require('./open_in_new-B-zmn5xr.js');
var index$1 = require('./index.cjs.js');

const pnCardCss = () => `${index.transformTag("pn-card")}{position:relative;display:block}${index.transformTag("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){${index.transformTag("pn-card")} .pn-card{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-card")} .pn-card[data-link]:hover{background-color:#e0f8ff}${index.transformTag("pn-card")} .pn-card[data-link][data-focus]{outline-color:#005d92}${index.transformTag("pn-card")} .pn-card{}${index.transformTag("pn-card")} .pn-card[data-link] .pn-card-navigation>[slot=navigation]{display:none}${index.transformTag("pn-card")} .pn-card[data-horizontal]{flex-direction:row}${index.transformTag("pn-card")} .pn-card[data-horizontal][data-reverse]{flex-direction:row-reverse}${index.transformTag("pn-card")} .pn-card[data-horizontal][data-reverse] .pn-card-picture{clip-path:ellipse(100% 175% at right center)}${index.transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-content{flex:1 1 50%}${index.transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-image{flex:1 1 50%;flex-direction:row}${index.transformTag("pn-card")} .pn-card[data-horizontal] .pn-card-picture{width:100%;clip-path:ellipse(100% 175% at left center)}${index.transformTag("pn-card")} .pn-card[data-reverse]{flex-direction:column-reverse}${index.transformTag("pn-card")} .pn-card[data-reverse] .pn-card-picture{clip-path:ellipse(175% 100% at bottom center)}${index.transformTag("pn-card")} .pn-card-header{display:flex;flex-direction:column;gap:clamp(0.5em, 5vw, 0.75em)}${index.transformTag("pn-card")} .pn-card-label{font-size:clamp(1.125em, 5vw, 1.5em);font-weight:700;margin:0}${index.transformTag("pn-card")} .pn-card-label-overline{color:#5e554a;font-size:0.875em;font-weight:400;margin:0}${index.transformTag("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){${index.transformTag("pn-card")} .pn-card-link{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-card")} .pn-card-link:hover{color:#0d234b;text-decoration-color:#0d234b}${index.transformTag("pn-card")} .pn-card-link:hover>${index.transformTag("pn-icon")}>.pn-icon-svg>path{fill:#0d234b}${index.transformTag("pn-card")} .pn-card-link:focus{outline:0;color:#0d234b;text-decoration-color:#0d234b}${index.transformTag("pn-card")} .pn-card-link:focus>${index.transformTag("pn-icon")}>.pn-icon-svg>path{fill:#0d234b}${index.transformTag("pn-card")} .pn-card-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%}${index.transformTag("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)}${index.transformTag("pn-card")} .pn-card-section{display:flex;flex-direction:column;gap:0.5em;color:#5e554a}${index.transformTag("pn-card")} .pn-card-section-paragraph,${index.transformTag("pn-card")} .pn-card-section p{margin:0 0 0.25em}${index.transformTag("pn-card")} .pn-card-section-paragraph:last-child,${index.transformTag("pn-card")} .pn-card-section p:last-child{margin:0em}${index.transformTag("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}${index.transformTag("pn-card")} .pn-card-navigation>${index.transformTag("pn-button")}{flex:1 1 12em}${index.transformTag("pn-card")} .pn-card-navigation:empty{display:none}${index.transformTag("pn-card")} .pn-card-image{position:relative;display:flex;flex-direction:column}${index.transformTag("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)}${index.transformTag("pn-card")} .pn-card-picture:empty{display:none}${index.transformTag("pn-card")} .pn-card-picture>*[slot=image]{display:block;height:100%;width:100%;object-fit:cover}${index.transformTag("pn-card")} .pn-card-tags{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5em}${index.transformTag("pn-card")} .pn-card-tags:empty{display:none}${index.transformTag("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 PnCard = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.pnCard = index.createEvent(this, "pnCard");
    }
    id = `pn-card-${index$1.uuidv4()}`;
    idTitle = `${this.id}-title`;
    visibleOutline = false;
    get hostElement() { return index.getElement(this); }
    /** Headline of the card. Will act as label for the link if there is no `href-label` set. */
    label;
    /** The label HTML tag. Default is `h3`. */
    labelTag = 'h3';
    /** Set a smaller text above the `label` text. */
    overline;
    /** Text content of the card. */
    text;
    /** Set a HTML id for the card. Optional and not required. */
    cardId = null;
    /**
     * Uee the horizontal card layout.
     * @category Features
     * */
    horizontal = false;
    /** Reverse the order of which the image will wrap. @category Features */
    reverse = false;
    /**
     * Select image aspect ratio. Example: '3/3', '16/9'.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio CSS documentation.}
     * @category Features
     * */
    aspectRatio = '';
    /** The card link. @category Href */
    href;
    /** The link text. @category Href */
    hrefLabel;
    /** The target attribute of the link. @category Href */
    target;
    /** The rel attribute of the link. @category Href */
    rel = 'noopener noreferrer';
    /** The link icon. Defaults to `arrow_right` or `open_in_new` if `target="_blank"`. @category Href */
    icon = null;
    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.open_in_new : arrow_right.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) {
        index$1.ripple(event, this.hostElement, '.pn-card');
        this.pnCard.emit({ click: event });
    }
    render() {
        const TitleTag = this.getHeadingTag();
        return (index.h(index.Host, { key: '66bfbab30790857e909606b687989d845eef9c42' }, index.h("article", { key: 'eb3d30790de5f65da87dc40731b81fb9120c88db', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, index.h("div", { key: '626daade06dd8b45c47e58cd5fbcef0322e3398f', class: "pn-card-image" }, index.h("picture", { key: '5f0539bf93afe3a8070c4e31bcabcd6e09f6cd5b', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, index.h("slot", { key: 'ead1ab12ad886e48daf022a26afc0deb29998d9e', name: "image" }))), index.h("div", { key: '79b1e1dcf658daf770ef2038770ad36d827d61fb', class: "pn-card-content" }, index.h("header", { key: '9b122547f47bace150f3dd17ccbe0ffe17a499b7', class: "pn-card-header" }, index.h("div", { key: 'eff03ae597d4d47ec6ef78634b9f1e3b3c65d420', class: "pn-card-tags" }, index.h("slot", { key: 'bce8ed2e135c2f7575923678477c278c82b26664', name: "tags" })), !!this.overline && index.h("p", { key: '4c5012ffa0d5e4054be3dc99fea4fd3d2d2e4383', class: "pn-card-label-overline" }, this.overline), !!this.label && (index.h(TitleTag, { key: 'a1a2a9ce01834943f3909a95dd4ac9c12c62fcc5', id: this.getTitleId(), class: "pn-card-label" }, this.label)), index.h("slot", { key: '7e231155db5155d5d4a5a272f845c6822235bb54', name: "header" })), index.h("section", { key: '118b273cd31a00de1fd16ee297bb206a33e7f977', class: "pn-card-section" }, !!this.text && index.h("p", { key: '66addec056571f3b511718cc8a4a60f64c3ac62b', class: "pn-card-section-paragraph" }, this.text), index.h("slot", { key: 'f9ec7149a4e48f59143b81470677be0b24791c8e' })), index.h("nav", { key: 'bb0ea19f4db135fd1b32496e167b67358df6ada8', class: "pn-card-navigation" }, this.showHref() && (index.h("a", { key: '182c9afcbb00b56c16b53ad15f12449e5feaf11a', 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, index.h("pn-icon", { key: '50ed52dbc3fd815c9d7b37542ad566a607e43da3', color: "blue700", icon: this.getIcon() }))), index.h("slot", { key: '6204a8a4944a85d522b4522352f67e73bc52792a', name: "navigation" }))))));
    }
    static get watchers() { return {
        "cardId": [{
                "watchCardId": 0
            }]
    }; }
};
PnCard.style = pnCardCss();

exports.pn_card = PnCard;
