@postnord/web-components
Version:
PostNord Web Components
149 lines (144 loc) • 10.8 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as arrow_right } from './arrow_right.js';
import { o as open_in_new } from './open_in_new.js';
import { u as uuidv4, o as ripple } from './helpers.js';
import { d as defineCustomElement$2 } from './pn-icon2.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{}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 PnCard$1 = /*@__PURE__*/ proxyCustomElement(class PnCard extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.pnCard = createEvent(this, "pnCard", 7);
}
id = `pn-card-${uuidv4()}`;
idTitle = `${this.id}-title`;
visibleOutline = false;
get hostElement() { return 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 : 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: '99d97442daa02d7ae0da69db84ae6ebf1d0145cd' }, h("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 }, h("div", { key: '76d3b45ce51ffeeb15cf1500b5128e0d90cf00d5', class: "pn-card-image" }, h("picture", { key: '6fbb2c6553e5a096c469374ab3538816cc58bcee', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'bf19dc236985578d244dbb1f27478a1e15fc4329', name: "image" }))), h("div", { key: '0b2fc27f0a6451aff18174841a26cfd8e8f0f101', class: "pn-card-content" }, h("header", { key: 'c24fe3514cffcae5408284b8cd630f395045ec34', class: "pn-card-header" }, h("div", { key: '41876b6073adcdc18a9d7dc0345c7adaec0df26a', class: "pn-card-tags" }, h("slot", { key: '7c65be5ef27775c022549583ae42071b85af9cfc', name: "tags" })), !!this.overline && h("p", { key: 'b08f053d89780f0dba59f7fc8bd46ceeb702688d', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'cbc9fdf4ea655c98d735dd7ebc991129d9808b02', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '79269ee892fcaec7c56b2629dcd42bb4ab2468e5', name: "header" })), h("section", { key: '4fe6fa933389c8b88945b9f9d53b5fb018c5cf83', class: "pn-card-section" }, !!this.text && h("p", { key: '35e3e02b4deefd71fd99f3096c79478b341ffb14', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'ebf6e503fd1a2eb82fd3888befb48ce7a03ef1ab' })), h("nav", { key: 'de98607f36de5916e52c0c281aa56a5c31a27a2b', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '4ad2924ae80f1c3c233be5c8b60da600120560cf', 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: '3a9a86b333d2a98863113465c814475dfa3dcf7d', color: "blue700", icon: this.getIcon() }))), h("slot", { key: '9dcd860d60f8e1df492eebf166b4ae037404b0d4', name: "navigation" }))))));
}
static get watchers() { return {
"cardId": ["watchCardId"]
}; }
static get style() { return pnCardCss; }
}, [260, "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]
}, undefined, {
"cardId": ["watchCardId"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-card", "pn-icon"];
components.forEach(tagName => { switch (tagName) {
case "pn-card":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnCard$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnCard = PnCard$1;
const defineCustomElement = defineCustomElement$1;
export { PnCard, defineCustomElement };
//# sourceMappingURL=pn-card.js.map
//# sourceMappingURL=pn-card.js.map