@limetech/lime-elements
Version:
91 lines (90 loc) • 5.11 kB
JavaScript
import { h, Host } from "@stencil/core";
/**
* @exampleComponent limel-example-spinner-basic
* @exampleComponent limel-example-spinner-color
* @exampleComponent limel-example-spinner-size
*/
export class Spinner {
constructor() {
/**
* Determines the size of the spinner.
*/
this.size = 'mini';
/**
* Gives the spinner the shape of Lime Technologies' logo
*/
this.limeBranded = false;
}
render() {
return (h(Host, { key: 'bb72728921dd48ab02cad031e3b35641c92b4dce' }, h("svg", { key: 'fccd59e394e3e4a0101d2e7f903b1b4f9dffc630', 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",
"id": "src/components/spinner/spinner.types.ts::SpinnerSize",
"referenceLocation": "SpinnerSize"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines the size of the spinner."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "size",
"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"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "lime-branded",
"defaultValue": "false"
}
};
}
}