@postnord/web-components
Version:
PostNord Web Components
122 lines (117 loc) • 9.92 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { o as open_in_new } from './open_in_new.js';
import { o as ripple } from './helpers.js';
import { d as defineCustomElement$3 } from './pn-icon2.js';
import { d as defineCustomElement$2 } from './pn-illustration2.js';
const pnTileCss = "pn-tile{position:relative;display:block}pn-tile .pn-tile{position:relative;overflow:hidden;word-break:break-word;text-align:center;border-radius:0.5em;padding:clamp(0.75em, 3vw, 1.5em);height:100%;color:#2d2013;background-color:#ffffff;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);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(1em, 5vw, 1.5em);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:box-shadow, 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-tile .pn-tile{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile .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}}pn-tile .pn-tile[data-horizontal]{text-align:left;flex-direction:row;flex-wrap:nowrap;gap:clamp(1em, 5vw, 1.5em)}pn-tile .pn-tile[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(0% 100% at 0% 50%)}pn-tile .pn-tile[data-horizontal] .pn-tile-text{flex-grow:2}pn-tile .pn-tile[data-href][data-focus]{outline-color:#005d92;box-shadow:0em 0em 0em 0em rgba(20, 20, 20, 0.11), 0em 0em 0em 0em rgba(0, 0, 0, 0.13)}pn-tile .pn-tile[data-href]:hover{background-color:rgba(183, 235, 252, 0.3)}pn-tile .pn-tile[data-href]:hover .pn-tile-illustration[data-circle]:before,pn-tile .pn-tile[data-href]:focus-within .pn-tile-illustration[data-circle]:before{clip-path:ellipse(100% 50% at 50% -25%)}pn-tile .pn-tile[data-href]:hover[data-horizontal] .pn-tile-illustration[data-circle]:before,pn-tile .pn-tile[data-href]:focus-within[data-horizontal] .pn-tile-illustration[data-circle]:before{clip-path:ellipse(50% 100% at -25% 50%)}pn-tile .pn-tile[data-href]:hover .pn-tile-link,pn-tile .pn-tile[data-href]:focus-within .pn-tile-link{color:#0d234b;text-decoration-color:#0d234b}pn-tile .pn-tile[data-href]:hover pn-icon .pn-icon-svg path,pn-tile .pn-tile[data-href]:focus-within pn-icon .pn-icon-svg path{fill:#0d234b}pn-tile .pn-tile-illustration{z-index:2;flex:1 1;max-width:7.5em;max-height:7.5em}pn-tile .pn-tile-illustration[data-icon]{flex:0 0}pn-tile .pn-tile-illustration[data-icon] pn-icon{padding:1em;border-radius:50%;background-color:#e0f8ff}pn-tile .pn-tile-illustration[data-icon] pn-icon>svg{font-size:2em}pn-tile .pn-tile-illustration-slot{display:block;height:100%;width:100%}pn-tile .pn-tile-illustration[data-circle]:before{content:\"\";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;background-color:rgba(183, 235, 252, 0.7);background-color:rgba(183, 235, 252, 0.7);clip-path:ellipse(100% 0% at 50% 0%);transition-property:clip-path;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tile .pn-tile-illustration[data-circle]:before{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile-text{z-index:3;flex:1 1;display:flex;flex-direction:column;gap:0.5em}pn-tile .pn-tile-link{cursor:pointer;color:#005d92;text-decoration:underline;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-tile .pn-tile-link{transition-duration:0s;transition-delay:0s}}pn-tile .pn-tile-link:focus{outline:0;text-decoration-color:#0d234b;color:#0d234b}pn-tile .pn-tile-link:after{content:\"\";position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}pn-tile .pn-tile-title{font-family:inherit;font-weight:700;font-size:clamp(1.25em, 3vw, 1.5em);margin:0em}pn-tile .pn-tile-title pn-icon{margin-left:0.25em;vertical-align:middle}pn-tile .pn-tile-slot{font-weight:400;color:#5e554a;display:flex;flex-direction:column;gap:0.25em}pn-tile .pn-tile-paragraph,pn-tile .pn-tile p{font-size:0.875em}pn-tile .pn-tile-paragraph:last-child,pn-tile .pn-tile p:last-child{margin:0em}";
const PnTile$1 = /*@__PURE__*/ proxyCustomElement(class PnTile extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.pnTile = createEvent(this, "pnTile", 7);
}
mo;
tile;
illustrationSlot;
visibleOutline = false;
get hostElement() { return this; }
/** Label of the link. This is required for the component to be accessible. */
label;
/** Set a string of text for the tile. Same as the default slot. @since v7.12.0 */
text;
/** The link of the tile. This is required for the component to be accessible. @category href */
url;
/** The target attribute of the link. @category href */
target;
/** The rel attribute of the link. @category href */
rel = 'noopener noreferrer';
/** The SVG content of an illustration. @category Image */
illustration;
/** The SVG content of a decorative icon. @since v7.12.0 @category Image */
icon;
/** Use the horizontal tile. @category Layout */
horizontal = false;
/**
* Emitted when the link is clicked. Use the `click` property to `preventDefault`
* if you wish to perform the navigation programmatically.
* @since v7.12.0
**/
pnTile;
connectedCallback() {
this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
this.mo.observe(this.hostElement, { subtree: true, childList: true });
}
disconnectedCallback() {
this.mo?.disconnect();
}
isExternal() {
return this.target === '_blank';
}
showIcon() {
return !!this.icon && !this.showSlotIllustration();
}
showPropIllustration() {
return !!this.illustration && !this.showSlotIllustration();
}
showSlotIllustration() {
return !!this.illustrationSlot?.querySelector('[slot="illustration"]');
}
showImage() {
return this.showIcon() || this.showPropIllustration() || this.showSlotIllustration();
}
handleFocus({ type, target }) {
this.visibleOutline = type === 'focus' && target.matches(':focus-visible');
}
clickHandler(event) {
ripple(event, this.tile);
this.pnTile.emit({ click: event });
}
render() {
return (h(Host, { key: 'c8df4d49b25764e6c3dae719fb5d673e68835961' }, h("div", { key: 'a8bb9f95b023f0fe95d3868af5c3770ef6a6ac62', class: "pn-tile", "data-horizontal": this.horizontal, "data-href": !!this.url, "data-focus": this.visibleOutline, ref: el => (this.tile = el) }, h("div", { key: '0207b2403197a599a40601640405ec3dab2b270e', class: "pn-tile-illustration", "data-circle": !!this.url, "data-icon": this.showIcon(), role: "presentation", hidden: !this.showImage() }, this.showPropIllustration() ? (h("pn-illustration", { illustration: this.illustration })) : (this.showIcon() && h("pn-icon", { color: "blue700", icon: this.icon })), h("div", { key: '2661e621547152c7d8ff757e474e86684e072af7', class: "pn-tile-illustration-slot", hidden: !this.showSlotIllustration(), ref: el => (this.illustrationSlot = el) }, h("slot", { key: 'c4a9b6db46237c3a64e184769c3ef540c31c39ec', name: "illustration" }))), h("div", { key: '4456439d4724f71c0e97ba57277613d445c88bb5', class: "pn-tile-text" }, h("h3", { key: 'd4970bcdd239b14ebab34962ca51c2db1c33ad8b', class: "pn-tile-title" }, this.url ? (h("a", { class: "pn-tile-link", href: this.url, target: this.target, rel: !this.rel && this.isExternal() ? 'noopener noreferrer' : this.rel, onClick: e => this.clickHandler(e), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.label)) : (this.label), this.isExternal() && h("pn-icon", { key: 'b53eac6e820ae01ac90c5b1e5686bfe9d7f9d2d6', icon: open_in_new, small: true, color: "blue700" })), h("div", { key: 'be0878cc01e5e03512a2470b30dab8fe3076674a', class: "pn-tile-slot" }, !!this.text && h("p", { key: 'e0654ac589ad6ba08d791e8959992a1bfb6bd634', class: "pn-tile-paragraph" }, this.text), h("slot", { key: '9b3d66e728da927ac0ff1b196d223e20c5676429' }))))));
}
static get style() { return pnTileCss; }
}, [260, "pn-tile", {
"label": [1],
"text": [1],
"url": [1],
"target": [1],
"rel": [1],
"illustration": [1],
"icon": [1],
"horizontal": [4],
"visibleOutline": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-tile", "pn-icon", "pn-illustration"];
components.forEach(tagName => { switch (tagName) {
case "pn-tile":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnTile$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "pn-illustration":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnTile = PnTile$1;
const defineCustomElement = defineCustomElement$1;
export { PnTile, defineCustomElement };
//# sourceMappingURL=pn-tile.js.map
//# sourceMappingURL=pn-tile.js.map