@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/esm/kup-lazy.entry.js

@@ -1,194 +1,194 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-8bd38435.js';
-import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-d1da769e.js';
-import { c as componentWrapperId } from './GenericVariables-665de00a.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-bb15ce14.js';
+import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-1e6ea451.js';
+import { c as componentWrapperId } from './GenericVariables-6dfdd433.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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 getElement(this); }
-};
+const KupLazy = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
 KupLazy.style = kupLazyCss;
 
 export { KupLazy as kup_lazy };