@postnord/web-components
Version:
PostNord Web Components
292 lines (291 loc) • 11.8 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
/** Display a skeleton loader placeholder to indicate content is loading. */
export class PnSkeletonLoader {
/** 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(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(h("div", { class: "pn-skeleton-loader-table-row" }));
}
return rows;
}
render() {
const style = this.getStyle();
if (this.automatic) {
return (h(Host, null, 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 }, h("slot", null))));
}
if (this.hide) {
return h(Host, { style: { display: 'none' } });
}
if (this.type === 'paragraph') {
return (h(Host, null, 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 (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--table", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-table-header" }), this.renderTable())));
}
if (this.type === 'card') {
return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--card", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-card-image" }), h("div", { class: "pn-skeleton-loader-card-content" }, this.renderParagraph()))));
}
if (this.type === 'tile') {
return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--tile", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-tile-circle" }), h("div", { class: "pn-skeleton-loader-tile-content" }, h("div", { class: "pn-skeleton-loader-line" }), h("div", { class: "pn-skeleton-loader-line", style: { width: '75%' } })))));
}
if (this.type === 'header') {
return (h(Host, null, h("div", { class: "pn-skeleton-loader pn-skeleton-loader--header", style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" }, h("div", { class: "pn-skeleton-loader-header-back" }), h("div", { class: "pn-skeleton-loader-header-heading" }), 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 (h(Host, null, h("div", { class: classes, style: style, role: "status", "aria-busy": "true", "aria-label": "Loading" })));
}
static get is() { return "pn-skeleton-loader"; }
static get originalStyleUrls() {
return {
"$": ["pn-skeleton-loader.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-skeleton-loader.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnSkeletonLoaderType",
"resolved": "\"avatar\" | \"box\" | \"button\" | \"card\" | \"chip\" | \"header\" | \"input\" | \"paragraph\" | \"table\" | \"text\" | \"tile\"",
"references": {
"PnSkeletonLoaderType": {
"location": "local",
"path": "/home/runner/work/web-components/web-components/src/components/feedback/pn-skeleton-loader/pn-skeleton-loader.tsx",
"id": "src/components/feedback/pn-skeleton-loader/pn-skeleton-loader.tsx::PnSkeletonLoaderType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The skeleton shape to render."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "type",
"defaultValue": "'box'"
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom width (CSS value). Overrides type default."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "width"
},
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom height (CSS value). Overrides type default."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "height"
},
"borderRadius": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom border-radius (CSS value). Overrides type default."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "border-radius"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Small size variant for type=\"chip\"."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "small",
"defaultValue": "false"
},
"large": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Large size variant for type=\"chip\"."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "large",
"defaultValue": "false"
},
"lines": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of lines for type=\"paragraph\" or body rows for type=\"table\". Does not do anything for other types. Default is 3."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "lines",
"defaultValue": "3"
},
"automatic": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "automatic",
"defaultValue": "false"
},
"hide": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When true, hides the skeleton. For automatic mode, the slotted content is shown without masking."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "hide",
"defaultValue": "false"
}
};
}
}