@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -1,7 +1,7 @@
 import { Component, Element, h, Host, Event, forceUpdate, Method, Prop, } from '@stencil/core';
 import { KupFieldProps, } from './kup-field-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupField {
   constructor() {

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

@@ -1,10 +1,10 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps, unformattedStringToFormattedStringNumber, } from '../../utils/utils';
 import { KupGaugeProps } from './kup-gauge-declarations';
 import { arc } from 'd3-shape';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupGauge {
   constructor() {

package/dist/collection/components/kup-grid/kup-grid.css

@@ -162,7 +162,7 @@
     display: grid;
     margin: 0px;
     grid-gap: var(--kup_grid_gap_mobile);
-    grid-template-columns: repeat(8, minmax(0px, 1fr));
+    grid-template-columns: repeat(var(--kup_grid_columns, 8), minmax(0px, 1fr));
   }
 }
 @media (max-width: 599px) {
@@ -170,7 +170,7 @@
     display: grid;
     margin: 0px;
     grid-gap: var(--kup_grid_gap_mobile);
-    grid-template-columns: repeat(4, minmax(0px, 1fr));
+    grid-template-columns: repeat(var(--kup_grid_columns, 4), minmax(0px, 1fr));
   }
 }
 /*-------------------------------------------------*/

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

@@ -1,6 +1,6 @@
 import { Component, Element, forceUpdate, Host, h, Method, Prop, } from '@stencil/core';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupGridProps } from './kup-grid-declarations';
@@ -95,9 +95,10 @@ export class KupGrid {
       }
       content.push(el);
     }
-    const style = {
-      ['--kup_grid_columns']: this.columns,
-    };
+    const style = {};
+    if (this.columns && this.columns !== 12) {
+      style['--kup_grid_columns'] = this.columns;
+    }
     return (h(Host, { style: style },
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },

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

@@ -1,6 +1,6 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { KupIframeProps } from './kup-iframe-declarations';
 export class KupIframe {

package/dist/collection/components/kup-image/assets/svg/science.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><rect fill="none"/></g><g><path d="M19.8,18.4L14,10.67V6.5l1.35-1.69C15.61,4.48,15.38,4,14.96,4H9.04C8.62,4,8.39,4.48,8.65,4.81L10,6.5v4.17L4.2,18.4 C3.71,19.06,4.18,20,5,20h14C19.82,20,20.29,19.06,19.8,18.4z"/></g></svg>

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

@@ -1,10 +1,10 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { imageCanvas } from './canvas/kup-image-canvas';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupImageProps, } from './kup-image-declarations';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupImage {

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

@@ -1,8 +1,12 @@
 /**
+* @prop --kup-lazy-hor-alignment: Sets the horizontal alignment of the subcomponent.
+* @prop --kup-lazy-ver-alignment: Sets the vertical alignment of the subcomponent.
 * @prop --kup-lazy-animation-time: Sets the duration of the animation.
 * @prop --kup-lazy-placeholder-color: Sets color of the placeholder icon.
 */
 :host {
+  --kup_lazy_hor_alignment: var(--kup-lazy-hor-alignment, center);
+  --kup_lazy_ver_alignment: var(--kup-lazy-ver-alignment, center);
   --kup_lazy_animation_time: var(--kup-lazy-animation-time, 2s);
   --kup_lazy_placeholder_color: var(
     --kup-lazy-placeholder-color,
@@ -15,13 +19,15 @@
 }
 
 #kup-component {
+  align-items: var(--kup_lazy_ver_alignment);
   display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
+  justify-content: var(--kup_lazy_hor_alignment);
   height: 100%;
   width: 100%;
 }
+#kup-component kup-data-table {
+  min-width: 100%;
+}
 
 svg {
   fill: var(--kup_lazy_placeholder_color);
@@ -42,12 +48,20 @@ svg {
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/
-:host(.kup-left-aligned) #kup-component {
-  justify-content: left;
+: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-right-aligned) #kup-component {
-  justify-content: right;
+:host(.kup-top-aligned) {
+  --kup-lazy-ver-alignment: flex-start;
 }
 
 :host(.kup-to-be-loaded) #kup-component {
@@ -55,8 +69,4 @@ svg {
 }
 :host(.kup-to-be-loaded) #kup-component > * {
   margin: auto;
-}
-
-:host(.kup-data-table.kup-loaded) #kup-component {
-  display: block;
 }

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

@@ -1,6 +1,6 @@
-import { Component, Element, forceUpdate, h, Host, Prop, State, } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Prop, State, } from '@stencil/core';
 import { Method } from '@stencil/core/internal';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupLazyProps, KupLazyRender } from './kup-lazy-declarations';
@@ -51,6 +51,8 @@ export class KupLazy {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.lazyComponent = null;
+    this.lazyComponentLoaded = false;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -63,6 +65,13 @@ export class KupLazy {
   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.
    */
@@ -112,6 +121,13 @@ export class KupLazy {
     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() {
@@ -171,7 +187,7 @@ export class KupLazy {
         this.data &&
         this.isInViewport)) {
       let Tag = this.componentName;
-      content = h(Tag, Object.assign({}, this.data));
+      content = (h(Tag, Object.assign({}, this.data, { ref: (el) => (this.lazyComponent = el) })));
       className += ' kup-loaded';
     }
     else if (this.showPlaceholder) {
@@ -315,6 +331,27 @@ export class KupLazy {
   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"
+          }
+        }
+      }
+    }]; }
   static get methods() { return {
     "getProps": {
       "complexType": {
@@ -348,6 +385,28 @@ export class KupLazy {
           }]
       }
     },
+    "getComponent": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "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>",

package/dist/collection/components/kup-list/kup-list-helper.js

@@ -12,13 +12,14 @@ export function getValueOfItemByDisplayMode(item, mode, separator) {
   return item.value;
 }
 export function consistencyCheck(valueIn, listData, listEl, selectMode, displayMode, e) {
+  const validList = !!(listEl && listData && listData['data']);
   let value = '';
   let displayedValue = '';
   let selected = null;
   if (e != null) {
     selected = e.detail.selected;
   }
-  if (selected == null && valueIn != null && listData && listData['data']) {
+  if (selected == null && valueIn != null && validList) {
     selected = getItemByDisplayMode(listData, valueIn, displayMode, true);
     listEl.data = [...listData['data']];
   }
@@ -33,9 +34,14 @@ export function consistencyCheck(valueIn, listData, listEl, selectMode, displayM
   }
   value = getValueOfItemByDisplayMode(selected, selectMode, ' - ');
   displayedValue = getValueOfItemByDisplayMode(selected, displayMode, ' - ');
+  const trueValue = getValueOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
   return {
     value: value,
     displayedValue: displayedValue,
+    exists: validList &&
+      listData['data'].find((x) => x.value === trueValue)
+      ? true
+      : false,
   };
 }
 export function getFirstItemSelected(listData) {

package/dist/collection/components/kup-list/kup-list.css

@@ -57,6 +57,9 @@
   text-decoration: inherit;
   text-transform: inherit;
 }
+.list--empty {
+  padding: 0;
+}
 .list .list-item {
   display: -ms-flexbox;
   display: flex;