@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -4,437 +4,437 @@ import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupLazyProps, KupLazyRender } from "./kup-lazy-declarations";
 export class KupLazy {
-  constructor() {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        /**
+         * Instance of the intersection observer.
+         */
+        this.intObserver = null;
+        /**
+         * Instance of the KupManager class.
+         */
+        this.kupManager = kupManagerInstance();
+        this.lazyComponent = null;
+        this.lazyComponentLoaded = false;
+        this.isInViewport = false;
+        this.componentName = null;
+        this.customStyle = '';
+        this.data = null;
+        this.renderMode = KupLazyRender.BOTH;
+        this.showPlaceholder = true;
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
     /**
-     * Instance of the intersection observer.
+     * 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.
      */
-    this.intObserver = null;
+    async getProps(descriptions) {
+        return getProps(this, KupLazyProps, descriptions);
+    }
     /**
-     * Instance of the KupManager class.
+     * Returns the HTMLElement of the component to lazy load.
+     * @returns {HTMLElement} Lazy loaded component.
      */
-    this.kupManager = kupManagerInstance();
-    this.lazyComponent = null;
-    this.lazyComponentLoaded = false;
-    this.isInViewport = false;
-    this.componentName = null;
-    this.customStyle = '';
-    this.data = null;
-    this.renderMode = KupLazyRender.BOTH;
-    this.showPlaceholder = true;
-  }
-  /*-------------------------------------------------*/
-  /*           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, KupLazyProps, descriptions);
-  }
-  /**
-   * Returns the HTMLElement of the component to lazy load.
-   * @returns {HTMLElement} Lazy loaded component.
-   */
-  async getComponent() {
-    return this.lazyComponent;
-  }
-  /**
-   * 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, KupLazyProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  setObserver() {
-    let callback = (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          this.kupManager.debug.logMessage(this, 'kup-lazy entering the viewport, rendering ' +
-            this.componentName +
-            '.');
-          this.isInViewport = true;
-          this.intObserver.unobserve(this.rootElement);
-        }
-      });
-    };
-    let options = {
-      threshold: 0.25,
-    };
-    this.intObserver = new IntersectionObserver(callback, options);
-  }
-  /*-------------------------------------------------*/
-  /*          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);
-    this.setObserver();
-  }
-  componentDidLoad() {
-    this.intObserver.observe(this.rootElement);
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    if (this.lazyComponent && !this.lazyComponentLoaded) {
-      this.lazyComponentLoaded = true;
-      this.kupLazyLoaded.emit({
-        comp: this,
-        id: this.rootElement.id,
-      });
+    async getComponent() {
+        return this.lazyComponent;
     }
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    let content;
-    let resource;
-    let className = this.componentName;
-    switch (this.componentName) {
-      case 'kup-button':
-        //call_to_action.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
-        break;
-      case 'kup-card':
-        //art_track.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
-        break;
-      case 'kup-checkbox':
-        //check_box_outline_blank.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
-        break;
-      case 'kup-chart':
-        //chart-bar.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
-        break;
-      case 'kup-data-table':
-        //table-large.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
-        break;
-      case 'kup-image':
-        //photo.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
-        break;
-      case 'kup-progress-bar':
-        //linear_scale.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
-        break;
-      case 'kup-radio':
-        //radio_button_unchecked.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
-        break;
-      default:
-        //art_track.svg
-        resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
-        break;
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
     }
-    if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
-      (this.renderMode === KupLazyRender.PROPS && this.data) ||
-      (this.renderMode === KupLazyRender.BOTH &&
-        this.data &&
-        this.isInViewport)) {
-      let Tag = this.componentName;
-      content = (h(Tag, Object.assign({}, this.data, { ref: (el) => (this.lazyComponent = el) })));
-      className += ' kup-loaded';
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupLazyProps, props);
     }
-    else if (this.showPlaceholder) {
-      content = resource;
-      className += ' kup-to-be-loaded';
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+    setObserver() {
+        let callback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.kupManager.debug.logMessage(this, 'kup-lazy entering the viewport, rendering ' +
+                        this.componentName +
+                        '.');
+                    this.isInViewport = true;
+                    this.intObserver.unobserve(this.rootElement);
+                }
+            });
+        };
+        let options = {
+            threshold: 0.25,
+        };
+        this.intObserver = new IntersectionObserver(callback, options);
     }
-    return (h(Host, { class: className }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, content)));
-  }
-  disconnectedCallback() {
-    var _a;
-    this.kupManager.theme.unregister(this);
-    (_a = this.intObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.rootElement);
-  }
-  static get is() { return "kup-lazy"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-lazy.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-lazy.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "componentName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Sets the tag name of the component to be lazy loaded."
-        },
-        "attribute": "component-name",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "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": "''"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "GenericObject",
-          "resolved": "GenericObject",
-          "references": {
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Sets the data of the component to be lazy loaded."
-        },
-        "defaultValue": "null"
-      },
-      "renderMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "KupLazyRender",
-          "resolved": "KupLazyRender.BOTH | KupLazyRender.PROPS | KupLazyRender.VIEWPORT",
-          "references": {
-            "KupLazyRender": {
-              "location": "import",
-              "path": "./kup-lazy-declarations",
-              "id": "src/components/kup-lazy/kup-lazy-declarations.ts::KupLazyRender"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "KupLazyRender.BOTH"
-            }],
-          "text": "Decides when the sub-component should be rendered.\r\nBy default when both the component props exist and the component is in the viewport."
-        },
-        "attribute": "render-mode",
-        "reflect": false,
-        "defaultValue": "KupLazyRender.BOTH"
-      },
-      "showPlaceholder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "true"
-            }],
-          "text": "Displays an animated SVG placeholder until the component is loaded."
-        },
-        "attribute": "show-placeholder",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isInViewport": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupLazyLoaded",
-        "name": "kup-lazy-loaded",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when the component is loaded."
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
-            }
-          }
+    /*-------------------------------------------------*/
+    /*          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);
+        this.setObserver();
+    }
+    componentDidLoad() {
+        this.intObserver.observe(this.rootElement);
+        this.kupManager.debug.logLoad(this, true);
+    }
+    componentWillRender() {
+        this.kupManager.debug.logRender(this, false);
+    }
+    componentDidRender() {
+        if (this.lazyComponent && !this.lazyComponentLoaded) {
+            this.lazyComponentLoaded = true;
+            this.kupLazyLoaded.emit({
+                comp: this,
+                id: this.rootElement.id,
+            });
         }
-      }];
-  }
-  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",
-              "id": "global::Promise"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
-            }
-          },
-          "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."
-            }]
+        this.kupManager.debug.logRender(this, true);
+    }
+    render() {
+        let content;
+        let resource;
+        let className = this.componentName;
+        switch (this.componentName) {
+            case 'kup-button':
+                //call_to_action.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                break;
+            case 'kup-card':
+                //art_track.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                break;
+            case 'kup-checkbox':
+                //check_box_outline_blank.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                break;
+            case 'kup-chart':
+                //chart-bar.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                break;
+            case 'kup-data-table':
+                //table-large.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                break;
+            case 'kup-image':
+                //photo.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                break;
+            case 'kup-progress-bar':
+                //linear_scale.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                break;
+            case 'kup-radio':
+                //radio_button_unchecked.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                break;
+            default:
+                //art_track.svg
+                resource = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                break;
         }
-      },
-      "getComponent": {
-        "complexType": {
-          "signature": "() => Promise<HTMLElement>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
-            }
-          },
-          "return": "Promise<HTMLElement>"
-        },
-        "docs": {
-          "text": "Returns the HTMLElement of the component to lazy load.",
-          "tags": [{
-              "name": "returns",
-              "text": "Lazy loaded component."
-            }]
+        if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
+            (this.renderMode === KupLazyRender.PROPS && this.data) ||
+            (this.renderMode === KupLazyRender.BOTH &&
+                this.data &&
+                this.isInViewport)) {
+            let Tag = this.componentName;
+            content = (h(Tag, Object.assign({}, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            className += ' kup-loaded';
         }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
+        else if (this.showPlaceholder) {
+            content = resource;
+            className += ' kup-to-be-loaded';
         }
-      },
-      "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",
-              "id": "global::Promise"
+        return (h(Host, { class: className }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, content)));
+    }
+    disconnectedCallback() {
+        var _a;
+        this.kupManager.theme.unregister(this);
+        (_a = this.intObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.rootElement);
+    }
+    static get is() { return "kup-lazy"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-lazy.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-lazy.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Sets the tag name of the component to be lazy loaded."
+                },
+                "attribute": "component-name",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "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": "''"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "GenericObject",
+                    "resolved": "GenericObject",
+                    "references": {
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Sets the data of the component to be lazy loaded."
+                },
+                "defaultValue": "null"
+            },
+            "renderMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupLazyRender",
+                    "resolved": "KupLazyRender.BOTH | KupLazyRender.PROPS | KupLazyRender.VIEWPORT",
+                    "references": {
+                        "KupLazyRender": {
+                            "location": "import",
+                            "path": "./kup-lazy-declarations",
+                            "id": "src/components/kup-lazy/kup-lazy-declarations.ts::KupLazyRender"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "KupLazyRender.BOTH"
+                        }],
+                    "text": "Decides when the sub-component should be rendered.\r\nBy default when both the component props exist and the component is in the viewport."
+                },
+                "attribute": "render-mode",
+                "reflect": false,
+                "defaultValue": "KupLazyRender.BOTH"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "showPlaceholder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Displays an animated SVG placeholder until the component is loaded."
+                },
+                "attribute": "show-placeholder",
+                "reflect": false,
+                "defaultValue": "true"
             }
-          },
-          "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"; }
+        };
+    }
+    static get states() {
+        return {
+            "isInViewport": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupLazyLoaded",
+                "name": "kup-lazy-loaded",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the component is loaded."
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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."
+                        }]
+                }
+            },
+            "getComponent": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement>"
+                },
+                "docs": {
+                    "text": "Returns the HTMLElement of the component to lazy load.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Lazy loaded component."
+                        }]
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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"; }
 }