@postnord/web-components
Version:
PostNord Web Components
81 lines (80 loc) • 2.73 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
/** Display a spinner to indicate a loading state. */
export class PnSpinner {
hostElement;
/** Light version of the spinner. */
light = false;
/** Size in em. */
size = 1.5;
getColor() {
if (this.light)
return '#fff';
return '#005d92';
}
getSize() {
return `${this.size}em`;
}
render() {
return (h(Host, { key: 'a143e0f8959099811a49a4772809bea95ac7b3c5' }, h("svg", { key: '14d49833b52a340b3b3d1a3c1dfdfb8e9c176858', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: 'b66d19a748cf83364f508956c9c3e1a487de96fc', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: 'e576947e99cd98ead97e4a49327fcce9e5811af3', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
}
static get is() { return "pn-spinner"; }
static get originalStyleUrls() {
return {
"$": ["pn-spinner.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-spinner.css"]
};
}
static get properties() {
return {
"light": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Light version of the spinner."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "light",
"defaultValue": "false"
},
"size": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size in em."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "size",
"defaultValue": "1.5"
}
};
}
static get elementRef() { return "hostElement"; }
}