@postnord/web-components
Version:
PostNord Web Components
104 lines (99 loc) • 14 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DWu-2oJc.js');
const pnSkeletonLoaderCss = () => ` pn-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}${index.transformTag("pn-skeleton-loader")}{display:block;background:transparent}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader{background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--box{width:100%;height:100%;min-height:3em;min-width:10em;border-radius:0.5em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--card{width:100%;min-width:10em;border-radius:0.5em;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);background:#ffffff;animation:none;overflow:hidden;display:flex;flex-direction:column}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-card-image{width:100%;height:10em;clip-path:ellipse(175% 100% at top center);background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-card-image{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-card-content{display:flex;flex-direction:column;gap:0.5em;padding:clamp(0.75em, 5vw, 1.5em)}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--tile{width:100%;border-radius:0.5em;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);background:#ffffff;animation:none;display:flex;flex-direction:column;align-items:center;padding:clamp(0.75em, 3vw, 1.5em);gap:clamp(1em, 5vw, 1.5em);text-align:center}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-tile-circle{width:7em;height:7em;border-radius:50%;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-tile-circle{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-tile-content{display:flex;flex-direction:column;gap:0.5em;width:100%}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--header{width:100%;background:none;animation:none;display:flex;flex-direction:column;gap:1em;padding:clamp(1em, 3vw, 2em) clamp(0.5em, 3vw, 2em)}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-header-back{width:5em;height:1em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-header-back{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-header-heading{width:40%;height:2em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-header-heading{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-header-subheading{width:30%;height:1em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-header-subheading{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--chip{display:inline-block;width:6em;height:2.5em;border-radius:0.5em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--chip.pn-skeleton-loader--small{height:2em;width:5em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--chip.pn-skeleton-loader--large{height:2.875em;width:7em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--input{width:100%;min-width:10em;height:3em;border-radius:0.5em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--avatar{width:3em;height:3em;border-radius:50%}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--button{display:inline-block;min-width:5.5em;height:3em;border-radius:3em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic{position:relative;background:none;animation:none;pointer-events:none}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic *{color:transparent !important;text-shadow:none !important}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic img,${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic svg,${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic ${index.transformTag("pn-icon")},${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic ${index.transformTag("pn-illustration")}{visibility:hidden}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton]{position:relative;overflow:hidden}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton]::after{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=avatar]{border-radius:50%;overflow:hidden}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=button]{border-radius:3em;min-height:3em;min-width:5.5em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=button] *{visibility:hidden}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=chip]{border-radius:0.5em;min-height:2.5em;min-width:4em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=chip] *{visibility:hidden}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]::after{display:none}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]>*{position:relative;overflow:hidden;border-radius:0.25em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]>*::after{content:"";position:absolute;inset:0;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--automatic [data-skeleton=text]>*::after{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--text{width:100%;min-width:10em;height:1em;border-radius:0.25em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--paragraph{display:flex;flex-direction:column;gap:0.5em;min-width:10em;background:none;animation:none}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader--table{display:flex;flex-direction:column;gap:0.5em;min-width:10em;background:none;animation:none;border-radius:0.5em}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-table-header{width:100%;height:4em;border-radius:0.5em 0.5em 0 0;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-table-header{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-table-row{width:100%;height:3em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-table-row:last-child{border-radius:0 0 0.5em 0.5em} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-table-row{animation:none}}${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-line{width:100%;height:1em;border-radius:0.25em;background:linear-gradient(90deg, #f3f2f2 25%, #f9f8f8 50%, #f3f2f2 75%);background-size:200% 100%;animation:pn-shimmer 1.5s infinite ease-in-out} (prefers-reduced-motion: reduce){${index.transformTag("pn-skeleton-loader")} .pn-skeleton-loader-line{animation:none}}`;
const PnSkeletonLoader = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
/** The skeleton shape to render.
*/
type = 'box';
/** Custom width (CSS value). Overrides type default.
*/
width;
/** Custom height (CSS value). Overrides type default.
*/
height;
/** Custom border-radius (CSS value). Overrides type default.
*/
borderRadius;
/** Small size variant for type="chip".
*/
small = false;
/** Large size variant for type="chip".
*/
large = false;
/** Number of lines for type="paragraph" or body rows for type="table". Does not do anything for other types. Default is 3.
*/
lines = 3;
/** When true, masks slotted content with shimmer instead of rendering a skeleton shape. The slotted content keeps its layout but text and images are hidden behind the shimmer effect.
*/
automatic = false;
/** When true, hides the skeleton. For automatic mode, the slotted content is shown without masking.
*/
hide = false;
getStyle() {
const style = {};
if (this.width)
style['width'] = this.width;
if (this.height)
style['height'] = this.height;
if (this.borderRadius)
style['border-radius'] = this.borderRadius;
return style;
}
renderParagraph() {
const rows = [];
for (let i = 0; i < this.lines; i++) {
const isLast = i === this.lines - 1;
rows.push(index.h("div", { class: "pn-skeleton-loader-line", style: isLast ? { width: '75%' } : undefined }));
}
return rows;
}
renderTable() {
const rows = [];
for (let i = 0; i < this.lines; i++) {
rows.push(index.h("div", { class: "pn-skeleton-loader-table-row" }));
}
return rows;
}
render() {
const style = this.getStyle();
if (this.automatic) {
return (index.h(index.Host, null, index.h("div", { class: {
'pn-skeleton-loader--automatic': !this.hide,
}, role: !this.hide ? 'status' : undefined, "aria-busy": !this.hide ? 'true' : undefined, "aria-label": !this.hide ? 'Loading' : undefined }, index.h("slot", null))));
}
if (this.hide) {
return index.h(index.Host, { style: { display: 'none' } });
}
if (this.type === 'paragraph') {
return (index.h(index.Host, null, index.h("div", { class: "pn-skeleton-loader pn-skeleton-loader--paragraph", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, this.renderParagraph())));
}
if (this.type === 'table') {
return (index.h(index.Host, null, index.h("div", { class: "pn-skeleton-loader pn-skeleton-loader--table", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, index.h("div", { class: "pn-skeleton-loader-table-header" }), this.renderTable())));
}
if (this.type === 'card') {
return (index.h(index.Host, null, index.h("div", { class: "pn-skeleton-loader pn-skeleton-loader--card", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, index.h("div", { class: "pn-skeleton-loader-card-image" }), index.h("div", { class: "pn-skeleton-loader-card-content" }, this.renderParagraph()))));
}
if (this.type === 'tile') {
return (index.h(index.Host, null, index.h("div", { class: "pn-skeleton-loader pn-skeleton-loader--tile", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, index.h("div", { class: "pn-skeleton-loader-tile-circle" }), index.h("div", { class: "pn-skeleton-loader-tile-content" }, index.h("div", { class: "pn-skeleton-loader-line" }), index.h("div", { class: "pn-skeleton-loader-line", style: { width: '75%' } })))));
}
if (this.type === 'header') {
return (index.h(index.Host, null, index.h("div", { class: "pn-skeleton-loader pn-skeleton-loader--header", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, index.h("div", { class: "pn-skeleton-loader-header-back" }), index.h("div", { class: "pn-skeleton-loader-header-heading" }), index.h("div", { class: "pn-skeleton-loader-header-subheading" }))));
}
const classes = {
'pn-skeleton-loader': true,
[`pn-skeleton-loader--${this.type}`]: true,
'pn-skeleton-loader--small': this.small,
'pn-skeleton-loader--large': this.large,
};
return (index.h(index.Host, null, index.h("div", { class: classes, style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" })));
}
};
PnSkeletonLoader.style = pnSkeletonLoaderCss();
exports.pn_skeleton_loader = PnSkeletonLoader;