@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.0

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-list/kup-list-helper.js

@@ -26,15 +26,21 @@ export function consistencyCheck(idIn, listData, listEl, selectMode, displayMode
   if (selected == null && idIn == null && listData) {
     selected = getFirstItemSelected(listData);
   }
+  let trueValue = null;
   if (selected == null) {
     selected = {
       id: idIn == null ? '' : idIn,
       value: idIn == null ? '' : idIn,
     };
+    id = selected.id;
+    displayedValue = selected.id;
+    trueValue = selected.id;
+  }
+  else {
+    id = getIdOfItemByDisplayMode(selected, selectMode, ' - ');
+    displayedValue = getIdOfItemByDisplayMode(selected, displayMode, ' - ');
+    trueValue = getIdOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
   }
-  id = getIdOfItemByDisplayMode(selected, selectMode, ' - ');
-  displayedValue = getIdOfItemByDisplayMode(selected, displayMode, ' - ');
-  const trueValue = getIdOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
   return {
     value: id,
     displayedValue: displayedValue,

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

@@ -7,7 +7,7 @@
     --kup-photoframe-border,
     1px inset var(--kup-border-color)
   );
-  --kup_photoframe_fade_out_time: var(--kup-photoframe-fade-out-time, 3000ms);
+  --kup_photoframe_fade_out_time: var(--kup-photoframe-fade-out-time, 2000ms);
   border: var(--kup_photoframe_border);
   display: block;
   height: 100%;
@@ -35,19 +35,29 @@ img {
 }
 
 .placeholder {
-  opacity: 1;
+  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 {
   opacity: 0;
+  position: absolute;
 }
 
 .resource {
+  display: none;
   left: 0;
   position: absolute;
   top: 0;
-  z-index: -1;
+  z-index: 0;
+}
+.resource--fade-in {
+  display: block;
+  position: relative;
 }
 
 /*-------------------------------------------------*/

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

@@ -139,8 +139,8 @@ export class KupPhotoFrame {
             });
           } })),
         __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_resourceEl, "f").classList.add('resource--fade-in');
             __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,

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

@@ -5,6 +5,7 @@
 export var KupTextFieldProps;
 (function (KupTextFieldProps) {
   KupTextFieldProps["customStyle"] = "Custom style of the component.";
+  KupTextFieldProps["decimals"] = "Number of decimals (should be used when inputType is number).";
   KupTextFieldProps["disabled"] = "When set to true, the component is disabled.";
   KupTextFieldProps["emitSubmitEventOnEnter"] = "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit.";
   KupTextFieldProps["fullWidth"] = "When set to true, the component will be rendered at full width.";
@@ -17,7 +18,10 @@ export var KupTextFieldProps;
   KupTextFieldProps["isClearable"] = "Enables a clear trailing icon.";
   KupTextFieldProps["label"] = "When set, its content will be shown as a label.";
   KupTextFieldProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
+  KupTextFieldProps["max"] = "The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
   KupTextFieldProps["maxLength"] = "When set, the helper will display a character counter.";
+  KupTextFieldProps["min"] = "The HTML min attribute specifies the minimum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
+  KupTextFieldProps["name"] = "The HTML name attribute used for form autocomplete.";
   KupTextFieldProps["outlined"] = "When set to true, the component will be rendered as an outlined field.";
   KupTextFieldProps["readOnly"] = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.";
   KupTextFieldProps["step"] = "The HTML step of the input element. It has effect only with number input type.";

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

@@ -25,6 +25,11 @@ export class KupTextField {
      * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
      */
     this.customStyle = '';
+    /**
+     * Number of decimals (should be used when inputType is number).
+     * @default null
+     */
+    this.decimals = null;
     /**
      * When set to true, the component is disabled.
      * @default false
@@ -102,6 +107,11 @@ export class KupTextField {
      * @default null
      */
     this.min = null;
+    /**
+     * The HTML name attribute used for form autocomplete.
+     * @default null
+     */
+    this.name = null;
     /**
      * When set to true, the component will be rendered as an outlined field.
      * @default false
@@ -286,6 +296,7 @@ export class KupTextField {
       danger: this.rootElement.classList.contains('kup-danger')
         ? true
         : false,
+      decimals: this.decimals,
       disabled: this.disabled,
       fullHeight: this.rootElement.classList.contains('kup-full-height')
         ? true
@@ -305,6 +316,7 @@ export class KupTextField {
       max: this.max,
       maxLength: this.maxLength,
       min: this.min,
+      name: this.name,
       outlined: this.outlined,
       readOnly: this.readOnly,
       secondary: this.rootElement.classList.contains('kup-secondary')
@@ -374,6 +386,27 @@ export class KupTextField {
       "reflect": false,
       "defaultValue": "''"
     },
+    "decimals": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Number of decimals (should be used when inputType is number)."
+      },
+      "attribute": "decimals",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -689,6 +722,27 @@ export class KupTextField {
       "reflect": false,
       "defaultValue": "null"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "The HTML name attribute used for form autocomplete."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "outlined": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -61,12 +61,6 @@ export class KupTimePicker {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
-    this.hoursEl = undefined;
-    this.minutesEl = undefined;
-    this.secondsEl = undefined;
-    this.hoursCircleEl = undefined;
-    this.minutesCircleEl = undefined;
-    this.secondsCircleEl = undefined;
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;

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

@@ -19,6 +19,7 @@ import { KupPointerEventTypes } from '../../managers/kup-interact/kup-interact-d
 import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 export class KupTree {
   constructor() {
     /*-------------------------------------------------*/
@@ -173,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();
@@ -189,7 +189,6 @@ export class KupTree {
     if (this.store && this.stateId) {
       const state = this.store.getState(this.stateId);
       if (state != null) {
-        console.log('Initialize with state for stateId ' + this.stateId, state);
         this.density = state.density;
         this.showFilters = state.showFilters;
         this.showFooter = state.showFooter;
@@ -236,7 +235,6 @@ export class KupTree {
         return;
       }
       if (somethingChanged) {
-        console.log('Persisting state for stateId ' + this.stateId + ': ', this.state);
         this.store.persistState(this.stateId, this.state);
       }
     }
@@ -545,7 +543,7 @@ export class KupTree {
     this.closeTotalMenu();
     this.openTotalMenu(column);
   }
-  getEventDetails(path) {
+  getEventDetails(path, e) {
     let isHeader, isBody, isFooter, td, th, tr, filterRemove;
     if (path) {
       for (let i = path.length - 1; i >= 0; i--) {
@@ -617,6 +615,7 @@ export class KupTree {
       cell: cell ? cell : null,
       column: column ? column : null,
       filterRemove: filterRemove ? filterRemove : null,
+      originalEvent: e,
       row: row ? row : null,
       td: td ? td : null,
       th: th ? th : null,
@@ -625,7 +624,7 @@ export class KupTree {
   }
   contextMenuHandler(e) {
     e.preventDefault();
-    const details = this.getEventDetails(this.getEventPath(e.target));
+    const details = this.getEventDetails(this.getEventPath(e.target), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -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
@@ -1373,6 +1384,12 @@ export class KupTree {
         }
       }
     }
+    if (root) {
+      const fs = root.querySelectorAll('.f-text-field');
+      for (let index = 0; index < fs.length; index++) {
+        FTextFieldMDC(fs[index]);
+      }
+    }
     if (this.preventXScroll) {
       this.setEllipsis();
     }

package/dist/collection/f-components/f-button/f-button.js

@@ -58,7 +58,7 @@ function renderButton(props) {
   const styleSpinnerContainer = {
     '--kup_button_spinner_height': propsFImage.sizeY,
   };
-  return (h("button", { class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, type: "button" },
+  return (h("button", { class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title, type: "button" },
     props.trailingIcon
       ? [
         h("span", { class: classLabelObj }, props.label),
@@ -93,7 +93,7 @@ function renderIconButton(props) {
   const iconOff = props.iconOff
     ? props.iconOff
     : props.icon + '_border';
-  return (h("button", { class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, type: "button", value: props.checked ? 'on' : 'off' },
+  return (h("button", { class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, type: "button", value: props.checked ? 'on' : 'off', "aria-label": props.title },
     !props.showSpinner || props.disabled ? (h(FImage, Object.assign({}, propsFImage, { resource: props.toggable && !props.checked ? iconOff : props.icon, wrapperClass: `icon-button__icon kup-icon` }))) : null,
     props.toggable && !props.showSpinner ? (h(FImage, Object.assign({}, propsFImage, { resource: props.icon, wrapperClass: `icon-button__icon icon-button__icon--on kup-icon` }))) : null,
     props.showSpinner && !props.disabled ? (h("div", { class: "icon-button__spinner-container" },

package/dist/collection/f-components/f-cell/f-cell-declarations.js

@@ -1,5 +1,6 @@
 import { KupTagNames, } from '../../types/GenericTypes';
-export const autoAlignComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
+export const autoCenterComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
+export const fullWidthFieldsComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
 /**
  * Supported cell events.
  */
@@ -88,6 +89,7 @@ export var FCellShapes;
   FCellShapes["PROGRESS_BAR"] = "PGB";
   FCellShapes["RADIO"] = "RAD";
   FCellShapes["RATING"] = "RTG";
+  FCellShapes["SWITCH"] = "SWT";
   FCellShapes["TEXT_FIELD"] = "ITX";
 })(FCellShapes || (FCellShapes = {}));
 /**
@@ -117,6 +119,7 @@ export var FCellTypes;
   FCellTypes["RADIO"] = "radio";
   FCellTypes["RATING"] = "rating";
   FCellTypes["STRING"] = "string";
+  FCellTypes["SWITCH"] = "switch";
   FCellTypes["TIME"] = "time";
 })(FCellTypes || (FCellTypes = {}));
 export const editableTypes = [
@@ -128,6 +131,7 @@ export const editableTypes = [
   FCellTypes.NUMBER,
   FCellTypes.RATING,
   FCellTypes.STRING,
+  FCellTypes.SWITCH,
   FCellTypes.TIME,
 ];
 export const kupTypes = [