@railzai/railz-visualizations/dist/components/loading.js

Railz.ai Visualizations

/*!
 * Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
 * Built with Stencil
 * Copyright (c) FIS.
 */
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import './financial-ratios.js';
import { R as RAILZ_PRIMARY_COLOR } from './colors.js';

const loadingCss = "@font-face{font-family:Inter;src:url(\"../assets/fonts/Inter-italic-var.woff2\");font-family:Inter;src:url(\"../assets/fonts/Inter-upright-var.woff2\")}body,div[class^=railz-],div[class*=\" railz-\"]{font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}:host{flex:1;display:flex;text-align:center;align-items:center;flex-direction:column;justify-content:center}.rv-loading-container{display:flex;flex-direction:column;align-items:center}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-android{animation:none}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-android .path{stroke-linecap:round;animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-android .path{stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}}.rv-loading-container svg.spinner-android{animation:rotate 2s linear infinite}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-android .path{stroke-linecap:round;animation:none}}.rv-loading-container svg.spinner-android .path{stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios{animation:none}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(1){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(1){animation:pulse 1s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(2){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(2){animation:pulse 1s -0.083s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(3){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(3){animation:pulse 1s -0.166s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(4){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(4){animation:pulse 1s -0.249s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(5){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(5){animation:pulse 1s -0.332s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(6){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(6){animation:pulse 1s -0.415s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(7){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(7){animation:pulse 1s -0.498s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(8){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(8){animation:pulse 1s -0.581s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(9){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(9){animation:pulse 1s -0.664s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(10){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(10){animation:pulse 1s -0.747s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(11){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(11){animation:pulse 1s -0.83s infinite linear}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(12){animation:none}}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(12){animation:pulse 1s -0.913s infinite linear}}.rv-loading-container svg.spinner-ios{animation:iosIntro 0.6s}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(1){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(1){animation:pulse 1s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(2){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(2){animation:pulse 1s -0.083s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(3){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(3){animation:pulse 1s -0.166s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(4){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(4){animation:pulse 1s -0.249s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(5){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(5){animation:pulse 1s -0.332s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(6){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(6){animation:pulse 1s -0.415s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(7){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(7){animation:pulse 1s -0.498s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(8){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(8){animation:pulse 1s -0.581s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(9){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(9){animation:pulse 1s -0.664s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(10){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(10){animation:pulse 1s -0.747s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(11){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(11){animation:pulse 1s -0.83s infinite linear}@media screen and (prefers-reduced-motion: reduce){.rv-loading-container svg.spinner-ios path:nth-of-type(12){animation:none}}.rv-loading-container svg.spinner-ios path:nth-of-type(12){animation:pulse 1s -0.913s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes pulse{50%{fill-opacity:0.2}to{fill-opacity:1}}@keyframes ios-intro{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.rv-loading-container .rv-loading-title{font-size:12px;color:#000}";

const Loading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * 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 style() { return loadingCss; }
}, [1, "railz-loading", {
    "loadingText": [1, "loading-text"],
    "fillColor": [1, "fill-color"],
    "width": [1],
    "height": [1],
    "textStyle": [16]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["railz-loading"];
  components.forEach(tagName => { switch (tagName) {
    case "railz-loading":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, Loading);
      }
      break;
  } });
}

export { Loading as L, defineCustomElement as d };

//# sourceMappingURL=loading.js.map