@railzai/railz-visualizations
Version:
Railz.ai Visualizations
129 lines • 3.96 kB
JavaScript
/*!
* Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
* Built with Stencil
* Copyright (c) FIS.
*/
/* eslint-disable max-len */
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
import { Component, h, Prop } from '@stencil/core';
import { RAILZ_PRIMARY_COLOR } from '../../types';
export class Loading {
constructor() {
/**
* Fill color of the loading indicator
*/
this.fillColor = RAILZ_PRIMARY_COLOR;
/**
* Width of the SVG Loading Indicator
*/
this.width = '48px';
/**
* Height of the SVG Loading Indicator
*/
this.height = '48px';
}
render() {
return (h("div", { class: "rv-loading-container" },
h("svg", { "aria-hidden": "true", version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: this.width || '48px', height: this.height || '48px', viewBox: '0 0 50 50', style: { 'enable-background': 'new 0 0 50 50' } },
h("path", { fill: this.fillColor || RAILZ_PRIMARY_COLOR, d: "M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z", transform: "rotate(360 -4.05439e-8 -4.05439e-8)" },
h("animateTransform", { attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "0.6s", repeatCount: "indefinite" }))),
this.loadingText && (h("p", { class: "rv-loading-title", style: this.textStyle }, this.loadingText))));
}
static get is() { return "railz-loading"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["./loading.scss"]
}; }
static get styleUrls() { return {
"$": ["loading.css"]
}; }
static get properties() { return {
"loadingText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Text to display at the bottom of the loading indicator"
},
"attribute": "loading-text",
"reflect": false
},
"fillColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Fill color of the loading indicator"
},
"attribute": "fill-color",
"reflect": false,
"defaultValue": "RAILZ_PRIMARY_COLOR"
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Width of the SVG Loading Indicator"
},
"attribute": "width",
"reflect": false,
"defaultValue": "'48px'"
},
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Height of the SVG Loading Indicator"
},
"attribute": "height",
"reflect": false,
"defaultValue": "'48px'"
},
"textStyle": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{ [key: string]: any }",
"resolved": "{ [key: string]: any; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Style of the text"
}
}
}; }
}
//# sourceMappingURL=loading.js.map