@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/components/kup-lazy.js

@@ -1,354 +1,354 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { k as kupManagerInstance, g as getProps, s as setProps, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
-/**
- * Props of the kup-lazy component.
- * Used to export every prop in an object.
- */
-var KupLazyProps;
-(function (KupLazyProps) {
-  KupLazyProps["componentName"] = "Sets the tag name of the component to be lazy loaded.";
-  KupLazyProps["customStyle"] = "Custom style of the component.";
-  KupLazyProps["data"] = "Sets the data of the component to be lazy loaded.";
-  KupLazyProps["showPlaceholder"] = "Displays an animated SVG placeholder until the component is loaded.";
-})(KupLazyProps || (KupLazyProps = {}));
-/**
- * Decides when the sub component should be rendered.
- */
-var KupLazyRender;
-(function (KupLazyRender) {
-  KupLazyRender["VIEWPORT"] = "viewport";
-  KupLazyRender["PROPS"] = "props";
-  KupLazyRender["BOTH"] = "both";
+/**
+ * Props of the kup-lazy component.
+ * Used to export every prop in an object.
+ */
+var KupLazyProps;
+(function (KupLazyProps) {
+  KupLazyProps["componentName"] = "Sets the tag name of the component to be lazy loaded.";
+  KupLazyProps["customStyle"] = "Custom style of the component.";
+  KupLazyProps["data"] = "Sets the data of the component to be lazy loaded.";
+  KupLazyProps["showPlaceholder"] = "Displays an animated SVG placeholder until the component is loaded.";
+})(KupLazyProps || (KupLazyProps = {}));
+/**
+ * Decides when the sub component should be rendered.
+ */
+var KupLazyRender;
+(function (KupLazyRender) {
+  KupLazyRender["VIEWPORT"] = "viewport";
+  KupLazyRender["PROPS"] = "props";
+  KupLazyRender["BOTH"] = "both";
 })(KupLazyRender || (KupLazyRender = {}));
 
 const kupLazyCss = ":host{--kup_lazy_animation_time:var(--kup-lazy-animation-time, 2s);--kup_lazy_hor_alignment:var(--kup-lazy-hor-alignment, center);--kup_lazy_placeholder_color:var(\n    --kup-lazy-placeholder-color,\n    var(--kup-icon-color)\n  );--kup_lazy_height:var(--kup-lazy-height, 100%);--kup_lazy_ver_alignment:var(--kup-lazy-ver-alignment, center);--kup_lazy_width:var(--kup-lazy-width, 100%);display:block;height:var(--kup_lazy_height);width:var(--kup_lazy_width);position:relative}#kup-component{align-items:var(--kup_lazy_ver_alignment);display:flex;justify-content:var(--kup_lazy_hor_alignment);height:var(--kup_lazy_height);width:var(--kup_lazy_width)}#kup-component>*{height:var(--kup_lazy_height)}#kup-component kup-data-table{min-width:100%}.kup-loaded,.kup-to-be-loaded{height:var(--kup_lazy_height);width:var(--kup_lazy_width)}svg{fill:var(--kup_lazy_placeholder_color);animation:shine ease var(--kup_lazy_animation_time) infinite}@keyframes shine{0%{opacity:0.4}50%{opacity:0.8}100%{opacity:0.4}}:host(.kup-bottom-aligned){--kup-lazy-ver-alignment:flex-end}:host(.kup-left-aligned){--kup-lazy-hor-alignment:flex-start}:host(.kup-right-aligned){--kup-lazy-hor-alignment:flex-end}:host(.kup-top-aligned){--kup-lazy-ver-alignment:flex-start}:host(.kup-to-be-loaded) #kup-component{position:absolute}:host(.kup-to-be-loaded) #kup-component>*{margin:auto}";
 
-const KupLazy$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.kupLazyLoaded = createEvent(this, "kup-lazy-loaded", 6);
-    /*-------------------------------------------------*/
-    /*       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;
-  }
-  /*-------------------------------------------------*/
-  /*           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,
-      });
-    }
-    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;
-    }
-    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';
-    }
-    else if (this.showPlaceholder) {
-      content = resource;
-      className += ' kup-to-be-loaded';
-    }
-    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);
-  }
-  get rootElement() { return this; }
-  static get style() { return kupLazyCss; }
-}, [1, "kup-lazy", {
-    "componentName": [1, "component-name"],
-    "customStyle": [1, "custom-style"],
-    "data": [16],
-    "renderMode": [1, "render-mode"],
-    "showPlaceholder": [4, "show-placeholder"],
-    "isInViewport": [32],
-    "getProps": [64],
-    "getComponent": [64],
-    "refresh": [64],
-    "setProps": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["kup-lazy", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
-  components.forEach(tagName => { switch (tagName) {
-    case "kup-lazy":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, KupLazy$1);
-      }
-      break;
-    case "kup-autocomplete":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$s();
-      }
-      break;
-    case "kup-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$r();
-      }
-      break;
-    case "kup-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$q();
-      }
-      break;
-    case "kup-button-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$p();
-      }
-      break;
-    case "kup-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$o();
-      }
-      break;
-    case "kup-chart":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$n();
-      }
-      break;
-    case "kup-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$m();
-      }
-      break;
-    case "kup-chip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "kup-color-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "kup-combobox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "kup-data-table":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "kup-date-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "kup-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "kup-dropdown-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "kup-form":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "kup-gauge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "kup-image":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "kup-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "kup-progress-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "kup-radio":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "kup-rating":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "kup-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "kup-switch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "kup-tab-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "kup-text-field":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "kup-time-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "kup-tree":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const KupLazy$1 = /*@__PURE__*/ proxyCustomElement(class KupLazy extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.kupLazyLoaded = createEvent(this, "kup-lazy-loaded", 6);
+    /*-------------------------------------------------*/
+    /*       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;
+  }
+  /*-------------------------------------------------*/
+  /*           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,
+      });
+    }
+    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;
+    }
+    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';
+    }
+    else if (this.showPlaceholder) {
+      content = resource;
+      className += ' kup-to-be-loaded';
+    }
+    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);
+  }
+  get rootElement() { return this; }
+  static get style() { return kupLazyCss; }
+}, [1, "kup-lazy", {
+    "componentName": [1, "component-name"],
+    "customStyle": [1, "custom-style"],
+    "data": [16],
+    "renderMode": [1, "render-mode"],
+    "showPlaceholder": [4, "show-placeholder"],
+    "isInViewport": [32],
+    "getProps": [64],
+    "getComponent": [64],
+    "refresh": [64],
+    "setProps": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["kup-lazy", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+  components.forEach(tagName => { switch (tagName) {
+    case "kup-lazy":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, KupLazy$1);
+      }
+      break;
+    case "kup-autocomplete":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$s();
+      }
+      break;
+    case "kup-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$r();
+      }
+      break;
+    case "kup-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "kup-button-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "kup-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "kup-chart":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "kup-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "kup-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "kup-color-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "kup-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "kup-data-table":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "kup-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "kup-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "kup-dropdown-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "kup-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "kup-gauge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "kup-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "kup-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "kup-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "kup-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "kup-rating":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "kup-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "kup-switch":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "kup-tab-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "kup-text-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "kup-time-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "kup-tree":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const KupLazy = KupLazy$1;