@limetech/lime-elements
Version:
82 lines (81 loc) • 4.13 kB
JavaScript
import { h } from '@stencil/core';
/**
* @exampleComponent limel-example-spinner
* @exampleComponent limel-example-spinner-color
* @exampleComponent limel-example-spinner-size
*/
export class Spinner {
constructor() {
this.size = 'mini';
this.limeBranded = false;
}
render() {
return [
h("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner()),
];
}
renderSpinner() {
if (!this.limeBranded) {
return (h("g", null, h("circle", { class: "outline", cx: "12", cy: "12", r: "10" }), h("g", { class: "spinner" }, h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }))));
}
return (h("g", null, h("g", { "clip-path": "url(#mask)" }, h("circle", { class: "outline thick", cx: "12", cy: "12", r: "12" }), h("g", { class: "spinner" }, h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }))), h("clipPath", { id: "mask" }, h("path", { d: "M2.166 11.248C2.166 5.04 7.058 0 13.083 0 19.108 0 24 5.04 24 11.248c0 3.229-1.307 6.548-4.533 9.306-3.908 3.343-9.15 3.8-17.254 3.249-2.405-.164-2.753-.588-1.51-1.533C4.61 19.3 2.165 17.025 2.165 11.248zm3.124 9.834c5.563.227 9.416-.246 12.397-2.76 2.432-2.05 3.482-4.56 3.51-7.074.05-4.613-3.636-8.36-8.114-8.36-4.478 0-8.114 3.746-8.114 8.36 0 2.793.607 4.737.726 6.345.092 1.252.03 2.388-.405 3.49z" }))));
}
static get is() { return "limel-spinner"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["spinner.scss"]
};
}
static get styleUrls() {
return {
"$": ["spinner.css"]
};
}
static get properties() {
return {
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "SpinnerSize",
"resolved": "\"large\" | \"medium\" | \"mini\" | \"small\" | \"x-small\"",
"references": {
"SpinnerSize": {
"location": "import",
"path": "./spinner.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines the size of the spinner."
},
"attribute": "size",
"reflect": true,
"defaultValue": "'mini'"
},
"limeBranded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Gives the spinner the shape of Lime Technologies' logo"
},
"attribute": "lime-branded",
"reflect": false,
"defaultValue": "false"
}
};
}
}
//# sourceMappingURL=spinner.js.map