@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d8e5eb5f.js');
-const kupManager = require('./kup-manager-7334c396.js');
+const index = require('./index-8f2f4159.js');
+const kupManager = require('./kup-manager-c63f4fb9.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
+require('./kup-dates-0e59b05d.js');
 
 /**
  * Props of the kup-lazy component.
@@ -12,186 +13,186 @@ const GenericVariables = require('./GenericVariables-1d52ba57.js');
  */
 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["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["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) {
-    index.registerInstance(this, hostRef);
-    this.kupLazyLoaded = index.createEvent(this, "kup-lazy-loaded", 6);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.kupLazyLoaded = index.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 = 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 kupManager.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 = 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 kupManager.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() {
-    index.forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    kupManager.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 method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        index.forceUpdate(this);
     }
-    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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.h("path", { d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
-        break;
-      case 'kup-data-table':
-        //table-large.svg
-        resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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;
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        kupManager.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);
     }
-    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 = (index.h(Tag, Object.assign({}, this.data, { ref: (el) => (this.lazyComponent = el) })));
-      className += ' kup-loaded';
+    /*-------------------------------------------------*/
+    /*          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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.h("path", { d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                break;
+            case 'kup-data-table':
+                //table-large.svg
+                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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 = (index.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 (index.h(index.Host, { class: className }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, content)));
     }
-    else if (this.showPlaceholder) {
-      content = resource;
-      className += ' kup-to-be-loaded';
+    disconnectedCallback() {
+        var _a;
+        this.kupManager.theme.unregister(this);
+        (_a = this.intObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.rootElement);
     }
-    return (index.h(index.Host, { class: className }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.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 index.getElement(this); }
+    get rootElement() { return index.getElement(this); }
 };
 KupLazy.style = kupLazyCss;