@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/collection/components/kup-spinner/kup-spinner.js

@@ -1,468 +1,468 @@
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { getProps, setProps } from '../../utils/utils';
-import { componentWrapperId } from '../../variables/GenericVariables';
-import { KupSpinnerProps } from './kup-spinner-declarations';
-export class KupSpinner {
-  constructor() {
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
-    this.active = false;
-    this.barVariant = false;
-    this.customStyle = '';
-    this.dimensions = null;
-    this.fader = false;
-    this.faderTimeout = 3500;
-    this.fullScreen = false;
-    this.layout = 1;
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupSpinnerProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupSpinnerProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
-  }
-  componentDidLoad() {
-    this.kupSpinnerReady.emit({
-      comp: this,
-      id: this.rootElement.id,
-    });
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentDidUpdate() {
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      root.querySelector('#loading-wrapper-master').classList.remove('loading-wrapper-big-wait');
-    }
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      if (this.fader) {
-        setTimeout(function () {
-          root.querySelector('#loading-wrapper-master').classList.add('loading-wrapper-big-wait');
-        }, this.faderTimeout);
-      }
-    }
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    let masterClass = '';
-    let wrapperClass = '';
-    let spinnerClass = '';
-    let spinnerEl = '';
-    let elStyle = undefined;
-    if (this.barVariant) {
-      masterClass += ' bar-version';
-      wrapperClass = 'loading-wrapper-master-bar';
-      spinnerClass = 'spinner-bar-v' + this.layout;
-    }
-    else {
-      masterClass += ' spinner-version';
-      wrapperClass = 'loading-wrapper-master-spinner';
-      spinnerClass = 'spinner-v' + this.layout;
-      if (this.layout === 7) {
-        spinnerEl = [
-          h("div", { class: "sk-spinner-v7-dot" }),
-          h("div", { class: "sk-spinner-v7-dot" }),
-          h("div", { class: "sk-spinner-v7-dot" }),
-          h("div", { class: "sk-spinner-v7-dot" }),
-          h("div", { class: "sk-spinner-v7-dot" }),
-          h("div", { class: "sk-spinner-v7-dot" }),
-        ];
-      }
-      if (this.layout === 9) {
-        spinnerEl = [
-          h("div", { class: "sk-spinner-v9-bounce1" }),
-          h("div", { class: "sk-spinner-v9-bounce2" }),
-        ];
-      }
-      if (this.layout === 10) {
-        spinnerEl = [
-          h("div", { class: "sk-spinner-v10-cube1" }),
-          h("div", { class: "sk-spinner-v10-cube2" }),
-        ];
-      }
-      if (this.layout === 12) {
-        spinnerEl = [
-          h("div", { class: "sk-spinner-v12-dot1" }),
-          h("div", { class: "sk-spinner-v12-dot2" }),
-        ];
-      }
-      if (this.layout === 13) {
-        spinnerEl = [
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
-          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
-        ];
-      }
-      if (this.layout === 14) {
-        spinnerEl = [
-          h("div", { class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
-          h("div", { class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
-        ];
-      }
-    }
-    if (!this.fullScreen) {
-      elStyle = {
-        height: '100%',
-        width: '100%',
-      };
-    }
-    if (this.dimensions) {
-      elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: this.dimensions });
-    }
-    else if (!this.barVariant) {
-      elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '16px' });
-    }
-    else {
-      elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '3px' });
-    }
-    return (h(Host, { style: elStyle }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: elStyle }, h("div", { id: "loading-wrapper-master", class: masterClass, style: elStyle }, h("div", { id: wrapperClass, style: elStyle }, h("div", { class: spinnerClass }, spinnerEl))))));
-  }
-  disconnectedCallback() {
-    this.kupManager.theme.unregister(this);
-  }
-  static get is() { return "kup-spinner"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-spinner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-spinner.css"]
-    };
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "When set to true the spinner is animating."
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "barVariant": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Decides whether the component is a bar or a spinner."
-        },
-        "attribute": "bar-variant",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "dimensions": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Width and height of the spinner. For the bar variant, only height."
-        },
-        "attribute": "dimensions",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "fader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Places a blend modal over the wrapper to darken the view (or lighten, when the theme is dark)."
-        },
-        "attribute": "fader",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "faderTimeout": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "3500"
-            }],
-          "text": "The time required for the \"fader\" to trigger."
-        },
-        "attribute": "fader-timeout",
-        "reflect": false,
-        "defaultValue": "3500"
-      },
-      "fullScreen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "When set to true the component will fill the whole viewport."
-        },
-        "attribute": "full-screen",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "layout": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "1"
-            }],
-          "text": "Sets the layout of the spinner."
-        },
-        "attribute": "layout",
-        "reflect": false,
-        "defaultValue": "1"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupSpinnerReady",
-        "name": "kup-spinner-ready",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when the component is ready."
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-}
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupSpinnerProps } from './kup-spinner-declarations';
+export class KupSpinner {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+    this.active = false;
+    this.barVariant = false;
+    this.customStyle = '';
+    this.dimensions = null;
+    this.fader = false;
+    this.faderTimeout = 3500;
+    this.fullScreen = false;
+    this.layout = 1;
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupSpinnerProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupSpinnerProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.kupSpinnerReady.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentDidUpdate() {
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      root.querySelector('#loading-wrapper-master').classList.remove('loading-wrapper-big-wait');
+    }
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+  }
+  componentDidRender() {
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      if (this.fader) {
+        setTimeout(function () {
+          root.querySelector('#loading-wrapper-master').classList.add('loading-wrapper-big-wait');
+        }, this.faderTimeout);
+      }
+    }
+    this.kupManager.debug.logRender(this, true);
+  }
+  render() {
+    let masterClass = '';
+    let wrapperClass = '';
+    let spinnerClass = '';
+    let spinnerEl = '';
+    let elStyle = undefined;
+    if (this.barVariant) {
+      masterClass += ' bar-version';
+      wrapperClass = 'loading-wrapper-master-bar';
+      spinnerClass = 'spinner-bar-v' + this.layout;
+    }
+    else {
+      masterClass += ' spinner-version';
+      wrapperClass = 'loading-wrapper-master-spinner';
+      spinnerClass = 'spinner-v' + this.layout;
+      if (this.layout === 7) {
+        spinnerEl = [
+          h("div", { class: "sk-spinner-v7-dot" }),
+          h("div", { class: "sk-spinner-v7-dot" }),
+          h("div", { class: "sk-spinner-v7-dot" }),
+          h("div", { class: "sk-spinner-v7-dot" }),
+          h("div", { class: "sk-spinner-v7-dot" }),
+          h("div", { class: "sk-spinner-v7-dot" }),
+        ];
+      }
+      if (this.layout === 9) {
+        spinnerEl = [
+          h("div", { class: "sk-spinner-v9-bounce1" }),
+          h("div", { class: "sk-spinner-v9-bounce2" }),
+        ];
+      }
+      if (this.layout === 10) {
+        spinnerEl = [
+          h("div", { class: "sk-spinner-v10-cube1" }),
+          h("div", { class: "sk-spinner-v10-cube2" }),
+        ];
+      }
+      if (this.layout === 12) {
+        spinnerEl = [
+          h("div", { class: "sk-spinner-v12-dot1" }),
+          h("div", { class: "sk-spinner-v12-dot2" }),
+        ];
+      }
+      if (this.layout === 13) {
+        spinnerEl = [
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
+          h("div", { class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
+        ];
+      }
+      if (this.layout === 14) {
+        spinnerEl = [
+          h("div", { class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
+          h("div", { class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
+        ];
+      }
+    }
+    if (!this.fullScreen) {
+      elStyle = {
+        height: '100%',
+        width: '100%',
+      };
+    }
+    if (this.dimensions) {
+      elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: this.dimensions });
+    }
+    else if (!this.barVariant) {
+      elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '16px' });
+    }
+    else {
+      elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '3px' });
+    }
+    return (h(Host, { style: elStyle }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: elStyle }, h("div", { id: "loading-wrapper-master", class: masterClass, style: elStyle }, h("div", { id: wrapperClass, style: elStyle }, h("div", { class: spinnerClass }, spinnerEl))))));
+  }
+  disconnectedCallback() {
+    this.kupManager.theme.unregister(this);
+  }
+  static get is() { return "kup-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-spinner.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When set to true the spinner is animating."
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "barVariant": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Decides whether the component is a bar or a spinner."
+        },
+        "attribute": "bar-variant",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }, {
+              "name": "see",
+              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+            }],
+          "text": "Custom style of the component."
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "dimensions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Width and height of the spinner. For the bar variant, only height."
+        },
+        "attribute": "dimensions",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "fader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Places a blend modal over the wrapper to darken the view (or lighten, when the theme is dark)."
+        },
+        "attribute": "fader",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "faderTimeout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "3500"
+            }],
+          "text": "The time required for the \"fader\" to trigger."
+        },
+        "attribute": "fader-timeout",
+        "reflect": false,
+        "defaultValue": "3500"
+      },
+      "fullScreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When set to true the component will fill the whole viewport."
+        },
+        "attribute": "full-screen",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "layout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "1"
+            }],
+          "text": "Sets the layout of the spinner."
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "1"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupSpinnerReady",
+        "name": "kup-spinner-ready",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when the component is ready."
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<GenericObject>"
+        },
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
+      },
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
+      },
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "rootElement"; }
+}