@sme.up/ketchup 6.2.0-SNAPSHOT → 6.2.0

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

@@ -3,6 +3,8 @@
 * @prop --kup-form-color: Sets text color of the component.
 * @prop --kup-form-font-family: Sets font family of the component.
 * @prop --kup-form-font-size: Sets font size of the component.
+* @prop --kup-form-label-alignment: Sets the text alignment of labels.
+* @prop --kup-form-label-width: Sets the width of labels.
 */
 :host {
   --kup_form_background_color: var(
@@ -12,20 +14,13 @@
   --kup_form_color: var(--kup-form-color, var(--kup-text-color));
   --kup_form_font_family: var(--kup-form-font-family, var(--kup-font-family));
   --kup_form_font_size: var(--kup-form-font-size, var(--kup-font-size));
+  --kup_form_label_alignment: var(--kup-form-label-alignment);
+  --kup_form_label_width: var(--kup-form-label-width);
   display: block;
   font-family: var(--kup_form_font_family);
   font-size: var(--kup_form_font_size);
 }
 
-:host([label-placement=left]) .form__label {
-  width: 0;
-}
-
-:host([label-placement=right]) .form__field {
-  min-width: 200px;
-  width: 0;
-}
-
 .form {
   background: var(--kup_form_background_color);
   color: var(--kup_form_color);
@@ -69,11 +64,29 @@
   left: 5px;
   transition: background-color 0.25s ease;
 }
+.form__section--left .form__label {
+  width: var(--kup_form_label_width, 0);
+}
+.form__section--right .form__field {
+  min-width: 200px;
+  width: 0;
+}
 .form__label {
   -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
   font-size: 0.875em;
   letter-spacing: 0.0178571429em;
   white-space: nowrap;
+  width: var(--kup_form_label_width);
+}
+.form__label--center {
+  text-align: var(--kup_form_label_alignment, center);
+}
+.form__label--left {
+  text-align: var(--kup_form_label_alignment, left);
+}
+.form__label--right {
+  text-align: var(--kup_form_label_alignment, right);
 }
 .form__field {
   min-height: 16px;

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

@@ -1,5 +1,5 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, Watch, } from '@stencil/core';
-import { KupFormProps, KupFormLabelPlacement, } from './kup-form-declarations';
+import { KupFormProps, KupFormLabelPlacement, KupFormLabelAlignment, } from './kup-form-declarations';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, identify, setProps } from '../../utils/utils';
 import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
@@ -24,11 +24,6 @@ export class KupForm {
      * @default null
      */
     this.data = null;
-    /**
-     * Placement of fields' labels.
-     * @default KupFormLabelPlacement.LEFT
-     */
-    this.labelPlacement = KupFormLabelPlacement.LEFT;
     /**
      * How the form will arrange its content.
      * @default null
@@ -175,6 +170,7 @@ export class KupForm {
     return h("form", { class: classObj }, formContent);
   }
   renderSection(section, parent, row, visibleColumns) {
+    var _a;
     let sectionContent = null;
     if (section.sections && section.sections.length > 0) {
       const sections = section.sections;
@@ -199,7 +195,7 @@ export class KupForm {
           formField: content[cnt++],
           row,
           visibleColumns,
-        }, true);
+        }, section);
         let field = formField;
         if (!section.horizontal) {
           field = h("tr", null, formField);
@@ -216,12 +212,14 @@ export class KupForm {
       });
     }
     const isGrid = !!section.columns;
+    const labelPlacement = ((_a = section === null || section === void 0 ? void 0 : section.label) === null || _a === void 0 ? void 0 : _a.placement) || KupFormLabelPlacement.LEFT;
     const sectionClass = {
       form__section: true,
       'form__section--column': !isGrid && !section.horizontal,
       'form__section--grid': isGrid,
       'form__section--titled': !!section.title,
       'form__section--last': !section.sections || section.sections.length === 0,
+      [`form__section--${labelPlacement}`]: true,
     };
     const sectionStyle = section.style || {};
     if (section.dim && parent) {
@@ -241,7 +239,8 @@ export class KupForm {
       h("table", null,
         h("tbody", null, section.horizontal ? (h("tr", null, sectionContent)) : (sectionContent)))));
   }
-  renderFormField({ formField, row, visibleColumns, }, fromSection) {
+  renderFormField({ formField, row, visibleColumns, }, section) {
+    var _a;
     const classObj = {
       form__field: true,
     };
@@ -259,7 +258,7 @@ export class KupForm {
       column = visibleColumns[index];
       visibleColumns.splice(index, 1);
     }
-    else if (fromSection) {
+    else if (section) {
       column = this.data.columns.find((x) => x.name === formField.column);
     }
     const cell = row.cells[formField.column];
@@ -282,7 +281,7 @@ export class KupForm {
       return null;
     }
     const cellProps = {
-      cell: cell,
+      cell: formField.data ? Object.assign(Object.assign({}, cell), { data: formField.data }) : cell,
       column: column,
       component: this,
       editable: true,
@@ -291,14 +290,15 @@ export class KupForm {
       setSizes: true,
       shape: formField.shape,
     };
+    const label = formField.label || column.title;
     resetLabel();
-    switch (this.labelPlacement) {
+    switch ((_a = section.label) === null || _a === void 0 ? void 0 : _a.placement) {
       case KupFormLabelPlacement.BOTTOM:
-        return [h("tr", null, fieldCell()), h("tr", null, labelCell())];
+        return [h("tr", null, fieldCell()), h("tr", null, labelCell(label))];
       case KupFormLabelPlacement.PLACEHOLDER:
         setPlaceholderLabel();
       case KupFormLabelPlacement.HIDDEN: {
-        if (fromSection) {
+        if (section) {
           return [fieldCell()];
         }
         else {
@@ -306,27 +306,27 @@ export class KupForm {
         }
       }
       case KupFormLabelPlacement.RIGHT: {
-        if (fromSection) {
-          return [fieldCell(), labelCell()];
+        if (section) {
+          return [fieldCell(), labelCell(label)];
         }
         else {
           return [
             h("tr", null,
               fieldCell(),
-              labelCell()),
+              labelCell(label)),
           ];
         }
       }
       case KupFormLabelPlacement.TOP:
-        return [h("tr", null, labelCell()), h("tr", null, fieldCell())];
+        return [h("tr", null, labelCell(label)), h("tr", null, fieldCell())];
       default: {
-        if (fromSection) {
-          return [labelCell(), fieldCell()];
+        if (section) {
+          return [labelCell(label), fieldCell()];
         }
         else {
           return [
             h("tr", null,
-              labelCell(),
+              labelCell(label),
               fieldCell()),
           ];
         }
@@ -335,9 +335,14 @@ export class KupForm {
     function fieldCell() {
       return (h("td", { "data-cell": cell, "data-row": row, "data-column": formField.column, class: classObj, style: styleObj, title: title }, cell && column ? (h(FCell, Object.assign({}, cellProps))) : (h("span", null, formField.value))));
     }
-    function labelCell() {
-      return (h("td", { class: "form__label" },
-        h("span", null, column.title)));
+    function labelCell(label) {
+      var _a, _b, _c;
+      const alignment = ((_a = section === null || section === void 0 ? void 0 : section.label) === null || _a === void 0 ? void 0 : _a.alignment) || KupFormLabelAlignment.LEFT;
+      const style = {
+        width: ((_b = section === null || section === void 0 ? void 0 : section.label) === null || _b === void 0 ? void 0 : _b.width) ? (_c = section === null || section === void 0 ? void 0 : section.label) === null || _c === void 0 ? void 0 : _c.width : '',
+      };
+      return (h("td", { class: `form__label form__label--${alignment}`, style: style },
+        h("span", null, label)));
     }
     function resetLabel() {
       if (!cell.data) {
@@ -493,32 +498,6 @@ export class KupForm {
       },
       "defaultValue": "null"
     },
-    "labelPlacement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "KupFormLabelPlacement",
-        "resolved": "KupFormLabelPlacement.BOTTOM | KupFormLabelPlacement.HIDDEN | KupFormLabelPlacement.LEFT | KupFormLabelPlacement.PLACEHOLDER | KupFormLabelPlacement.RIGHT | KupFormLabelPlacement.TOP",
-        "references": {
-          "KupFormLabelPlacement": {
-            "location": "import",
-            "path": "./kup-form-declarations"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "KupFormLabelPlacement.LEFT"
-          }],
-        "text": "Placement of fields' labels."
-      },
-      "attribute": "label-placement",
-      "reflect": true,
-      "defaultValue": "KupFormLabelPlacement.LEFT"
-    },
     "layout": {
       "type": "unknown",
       "mutable": false,

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

@@ -0,0 +1,9 @@
+export class KupImageListState {
+  constructor() {
+    this.load = false;
+  }
+  toDebugString() {
+    // TODO
+    return 'image-list state';
+  }
+}

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

@@ -70,14 +70,8 @@
   background-color: rgba(var(--kup_imagelist_primary_color_rgb), 0.15);
   color: var(--kup_imagelist_primary_color);
 }
-.navigation-bar__wrapper--active .navigation-bar__back,
-.navigation-bar__wrapper--active .navigation-bar__top {
-  display: block;
-}
 .navigation-bar__back, .navigation-bar__top {
   --kup-button-primary-color-rgb: 0;
-  animation: fade-in 0.375s ease-in;
-  display: none;
 }
 .navigation-bar__title {
   border-radius: 16px;

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

@@ -10,7 +10,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _KupImageList_instances, _KupImageList_clickTimeout, _KupImageList_kupManager, _KupImageList_backProps, _KupImageList_topProps, _KupImageList_createItem, _KupImageList_createList;
-import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupImageListProps, } from './kup-image-list-declarations';
@@ -22,12 +22,14 @@ import { FButtonStyling, } from '../../f-components/f-button/f-button-declaratio
 import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
 import { FCellPadding } from '../../f-components/f-cell/f-cell-declarations';
+import { KupImageListState } from './kup-image-list-state';
 export class KupImageList {
   constructor() {
     _KupImageList_instances.add(this);
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
     /*-------------------------------------------------*/
+    this.state = new KupImageListState();
     this.currentNode = null;
     this.navigationBarToggled = false;
     /*-------------------------------------------------*/
@@ -49,9 +51,18 @@ export class KupImageList {
      * @default true
      */
     this.ripple = true;
+    /**
+     * An array of integers containing the path to a selected child.\
+     */
+    this.selectedNode = [];
+    this.stateId = '';
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
     _KupImageList_clickTimeout.set(this, []);
     _KupImageList_kupManager.set(this, kupManagerInstance());
     _KupImageList_backProps.set(this, {
@@ -75,6 +86,32 @@ export class KupImageList {
       wrapperClass: 'navigation-bar__top',
     });
   }
+  initWithPersistedState() {
+    if (this.store && this.stateId) {
+      const state = this.store.getState(this.stateId);
+      if (state != null) {
+        this.currentNode =
+          this.kupManager.data.node.findByStrTreeNodePath(this.data, state.selectedTreeNodePath);
+      }
+    }
+  }
+  persistState() {
+    if (this.store && this.stateId) {
+      let somethingChanged = false;
+      let cNodeRowId = this.currentNode ? this.currentNode.id : '';
+      if (!this.kupManager.objects.deepEqual(this.state.selectedTreeNodePath, cNodeRowId)) {
+        this.state.selectedTreeNodePath = cNodeRowId;
+        somethingChanged = true;
+      }
+      if (!this.state.load) {
+        this.state.load = true;
+        return;
+      }
+      if (somethingChanged) {
+        this.store.persistState(this.stateId, this.state);
+      }
+    }
+  }
   onKupClick(node) {
     if (node.children && node.children.length > 0) {
       this.currentNode = node;
@@ -105,6 +142,15 @@ export class KupImageList {
     });
   }
   /*-------------------------------------------------*/
+  /*                  W a t c h e r s                */
+  /*-------------------------------------------------*/
+  selectNode(newData) {
+    if (!newData || newData.length == 0) {
+      return;
+    }
+    this.currentNode = this.kupManager.data.node.find(this.data, newData);
+  }
+  /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
   /*-------------------------------------------------*/
   /**
@@ -152,6 +198,9 @@ export class KupImageList {
         }
       }
     }
+    // *** Store
+    this.persistState();
+    // ***
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").debug.logRender(this, true);
   }
   render() {
@@ -253,6 +302,65 @@ export class KupImageList {
       "attribute": "ripple",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "selectedNode": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "TreeNodePath",
+        "resolved": "number[]",
+        "references": {
+          "TreeNodePath": {
+            "location": "import",
+            "path": "../kup-tree/kup-tree-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An array of integers containing the path to a selected child.\\"
+      },
+      "defaultValue": "[]"
+    },
+    "stateId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "state-id",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "store": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "KupStore",
+        "resolved": "KupStore",
+        "references": {
+          "KupStore": {
+            "location": "import",
+            "path": "../kup-state/kup-store"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {
@@ -400,6 +508,10 @@ export class KupImageList {
     }
   }; }
   static get elementRef() { return "rootElement"; }
+  static get watchers() { return [{
+      "propName": "selectedNode",
+      "methodName": "selectNode"
+    }]; }
 }
 _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakMap(), _KupImageList_backProps = new WeakMap(), _KupImageList_topProps = new WeakMap(), _KupImageList_instances = new WeakSet(), _KupImageList_createItem = function _KupImageList_createItem(node) {
   const props = {

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

@@ -1,20 +1,22 @@
 /**
-* @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-hor-alignment: Sets the horizontal alignment of the subcomponent.
 * @prop --kup-lazy-placeholder-color: Sets color of the placeholder icon.
+* @prop --kup-lazy-ver-alignment: Sets the vertical alignment of the subcomponent.
+* @prop --kup-lazy-width: Sets the width of the component and subcomponent.
 */
 :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_hor_alignment: var(--kup-lazy-hor-alignment, center);
   --kup_lazy_placeholder_color: var(
     --kup-lazy-placeholder-color,
     var(--kup-icon-color)
   );
+  --kup_lazy_ver_alignment: var(--kup-lazy-ver-alignment, center);
+  --kup_lazy_width: var(--kup-lazy-width, 100%);
   display: block;
   height: 100%;
-  width: 100%;
+  width: var(--kup_lazy_width);
   position: relative;
 }
 
@@ -23,12 +25,17 @@
   display: flex;
   justify-content: var(--kup_lazy_hor_alignment);
   height: 100%;
-  width: 100%;
+  width: var(--kup_lazy_width);
 }
 #kup-component kup-data-table {
   min-width: 100%;
 }
 
+.kup-loaded,
+.kup-to-be-loaded {
+  width: var(--kup_lazy_width);
+}
+
 svg {
   fill: var(--kup_lazy_placeholder_color);
   animation: shine ease var(--kup_lazy_animation_time) infinite;

package/dist/collection/components/kup-photo-frame/kup-photo-frame.css

@@ -38,19 +38,26 @@ img {
   display: none;
   transition: opacity var(--kup_photoframe_fade_out_time) ease-out;
   will-change: opacity;
+  z-index: 1;
 }
 .placeholder--loaded {
   display: block;
 }
 .placeholder--fade-out {
-  left: 0;
   opacity: 0;
   position: absolute;
-  top: 0;
 }
 
 .resource {
+  display: none;
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+}
+.resource--fade-in {
   display: block;
+  position: relative;
 }
 
 /*-------------------------------------------------*/

package/dist/collection/components/kup-photo-frame/kup-photo-frame.js

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupPhotoFrame_intObserver, _KupPhotoFrame_kupManager, _KupPhotoFrame_placeholderEl, _KupPhotoFrame_renderResource, _KupPhotoFrame_wrapperEl;
+var _KupPhotoFrame_intObserver, _KupPhotoFrame_kupManager, _KupPhotoFrame_placeholderEl, _KupPhotoFrame_resourceEl, _KupPhotoFrame_renderResource, _KupPhotoFrame_wrapperEl;
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State, } from '@stencil/core';
 import { Method } from '@stencil/core/internal';
 import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
@@ -52,6 +52,7 @@ export class KupPhotoFrame {
     _KupPhotoFrame_intObserver.set(this, null);
     _KupPhotoFrame_kupManager.set(this, kupManagerInstance());
     _KupPhotoFrame_placeholderEl.set(this, null);
+    _KupPhotoFrame_resourceEl.set(this, null);
     _KupPhotoFrame_renderResource.set(this, false);
     _KupPhotoFrame_wrapperEl.set(this, null);
   }
@@ -137,8 +138,9 @@ export class KupPhotoFrame {
               id: this.rootElement.id,
             });
           } })),
-        __classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f") ? (h("img", Object.assign({}, this.resourceAttrs, { class: "resource", onLoad: () => {
+        __classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f") ? (h("img", Object.assign({}, this.resourceAttrs, { class: "resource", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_resourceEl, el, "f")), onLoad: () => {
             __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").classList.add('placeholder--fade-out');
+            __classPrivateFieldGet(this, _KupPhotoFrame_resourceEl, "f").classList.add('resource--fade-in');
             this.kupPhotoFrameResourceLoad.emit({
               comp: this,
               id: this.rootElement.id,
@@ -377,4 +379,4 @@ export class KupPhotoFrame {
   }; }
   static get elementRef() { return "rootElement"; }
 }
-_KupPhotoFrame_intObserver = new WeakMap(), _KupPhotoFrame_kupManager = new WeakMap(), _KupPhotoFrame_placeholderEl = new WeakMap(), _KupPhotoFrame_renderResource = new WeakMap(), _KupPhotoFrame_wrapperEl = new WeakMap();
+_KupPhotoFrame_intObserver = new WeakMap(), _KupPhotoFrame_kupManager = new WeakMap(), _KupPhotoFrame_placeholderEl = new WeakMap(), _KupPhotoFrame_resourceEl = new WeakMap(), _KupPhotoFrame_renderResource = new WeakMap(), _KupPhotoFrame_wrapperEl = new WeakMap();

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

@@ -174,7 +174,6 @@ export class KupTree {
      * Reference to the column menu card.
      */
     this.columnMenuCard = null;
-    this.selectedColumn = '';
     this.clickTimeout = [];
     this.sizedColumns = undefined;
     this.filtersColumnMenuInstance = new FiltersColumnMenu();
@@ -659,6 +658,12 @@ export class KupTree {
       KupTreeExpansionMode.DROPDOWN ||
       (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
         !treeNodeData.expandable)) {
+      const td = e
+        ? this.getEventPath(e.target).find((el) => {
+          if (el.tagName === 'TD')
+            return el;
+        })
+        : null;
       // If this TreeNode is not disabled, then it can be selected and an event is emitted
       if (treeNodeData && !treeNodeData.disabled) {
         if (this.autoSelectionNodeMode)
@@ -672,11 +677,10 @@ export class KupTree {
             .split(',')
             .map((treeNodeIndex) => parseInt(treeNodeIndex)),
           treeNode: treeNodeData,
-          columnName: this.selectedColumn,
+          columnName: td ? td.dataset.column : null,
           auto: auto,
         });
       }
-      this.selectedColumn = '';
     }
     // If KupTreeExpansionMode.NODE then click is a collapse/expand click
     if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
@@ -1014,13 +1018,20 @@ export class KupTree {
     }
     // When can be expanded OR selected
     if (!treeNodeData.disabled) {
-      treeNodeOptions['onClick'] = () => {
-        this.clickTimeout.push(setTimeout((e) => this.hdlTreeNodeClick(e, treeNodeData, treeNodePath, false), 300));
+      treeNodeOptions['onClick'] = (e) => {
+        // Note: event must be cloned
+        // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+        const clone = {};
+        for (const key in e) {
+          clone[key] = e[key];
+        }
+        this.clickTimeout.push(setTimeout(() => this.hdlTreeNodeClick(clone, treeNodeData, treeNodePath, false), 300));
       };
     }
     // When a tree node is displayed as a table
     let treeNodeCells = null;
     let visibleCols = this.getVisibleColumns();
+    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     if (this.showColumns && visibleCols && visibleCols.length) {
       treeNodeCells = [];
       // Renders all the cells