@sme.up/ketchup 10.1.1 → 10.2.0

package/dist/cjs/{f-checkbox-59fb7aa5.js → f-checkbox-aaa6d45c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const fImage = require('./f-image-d22b012f.js');
-const index = require('./index-e8aa3c73.js');
+const fImage = require('./f-image-db10b066.js');
+const index = require('./index-c7d441d8.js');
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -16,6 +16,7 @@ const FCheckbox = (props) => {
         'checkbox--disabled': props.disabled ? true : false,
         'checkbox--indeterminate': props.indeterminate ? true : false,
         'checkbox--legacy-look': props.legacyLook ? true : false,
+        [`checkbox--${props.sizing || 'small'}`]: true,
     };
     const propsFImage = {
         color: props.error

package/dist/cjs/{f-chip-90155c76.js → f-chip-b936dcaf.js}

@@ -1,8 +1,139 @@
 'use strict';
 
-const index = require('./index-e8aa3c73.js');
-const fImage = require('./f-image-d22b012f.js');
-const kupManager = require('./kup-manager-d67049ad.js');
+const index = require('./index-c7d441d8.js');
+const fImage = require('./f-image-db10b066.js');
+const kupManager = require('./kup-manager-39bc2be8.js');
+
+function getIdOfItemByDisplayMode(item, mode, separator) {
+    const { id, value } = item;
+    if (id == null && value) {
+        return value;
+    }
+    if (id && value == null) {
+        return id;
+    }
+    switch (mode) {
+        case kupManager.ItemsDisplayMode.CODE:
+            return id;
+        case kupManager.ItemsDisplayMode.DESCRIPTION:
+            return value;
+        case kupManager.ItemsDisplayMode.CODE_AND_DESC:
+        case kupManager.ItemsDisplayMode.CODE_AND_DESC_ALIAS:
+            return id && value ? id + separator + value : id || value;
+        case kupManager.ItemsDisplayMode.DESC_AND_CODE:
+            return value && id ? value + separator + id : value || id;
+        default:
+            return id;
+    }
+}
+function consistencyCheck(idIn, listData, listEl, selectMode, displayMode, e) {
+    const validList = !!(listEl && listData && listData['data']);
+    let id = '';
+    let displayedValue = '';
+    let selected = null;
+    if (e != null) {
+        selected = e.detail.selected;
+    }
+    if (selected == null && idIn != null && validList) {
+        selected = getItemByDisplayMode(listData, idIn, displayMode, true);
+        listEl.data = [...listData['data']];
+    }
+    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, id == '' ? kupManager.ItemsDisplayMode.DESCRIPTION : displayMode, ' - ');
+        trueValue = getIdOfItemByDisplayMode(selected, kupManager.ItemsDisplayMode.CODE, ' - ');
+    }
+    const listNode = validList
+        ? listData['data'].find((x) => x.id === trueValue)
+        : null;
+    let exists = listNode ? true : false;
+    return {
+        value: id,
+        displayedValue: displayedValue,
+        node: listNode,
+        exists: exists,
+    };
+}
+function getFirstItemSelected(listData) {
+    if (listData['data']) {
+        for (let i = 0; i < listData['data'].length; i++) {
+            if (listData['data'][i].selected) {
+                return listData['data'][i];
+            }
+        }
+    }
+    return null;
+}
+function getItemById(listData, id, setSelected) {
+    if (listData && listData['data']) {
+        let found = false;
+        let item = null;
+        for (let i = 0; i < listData['data'].length; i++) {
+            if (setSelected == true) {
+                listData['data'][i].selected = false;
+            }
+            if (!found &&
+                listData['data'][i].id.toString().toLowerCase() ==
+                    id.toString().toLowerCase()) {
+                item = listData['data'][i];
+                item.selected = true;
+                found = true;
+            }
+        }
+        if (found == true) {
+            return item;
+        }
+        for (let i = 0; i < listData['data'].length; i++) {
+            if (listData['data'][i].value.toString().toLowerCase() ==
+                id.toString().toLowerCase()) {
+                item = listData['data'][i];
+                item.selected = true;
+                found = true;
+                break;
+            }
+        }
+        if (found == true) {
+            return item;
+        }
+    }
+    return null;
+}
+function getItemByDisplayMode(listData, id, displayMode, setSelected) {
+    if (listData && listData['data']) {
+        let found = false;
+        let item = null;
+        for (let i = 0; i < listData['data'].length; i++) {
+            let displayedValue = getIdOfItemByDisplayMode(listData['data'][i], id == '' ? kupManager.ItemsDisplayMode.DESCRIPTION : displayMode, ' - ');
+            if (setSelected == true) {
+                listData['data'][i].selected = false;
+            }
+            if (!found &&
+                displayedValue.toString().toLowerCase() ==
+                    id.toString().toLowerCase()) {
+                item = listData['data'][i];
+                item.selected = true;
+                found = true;
+            }
+        }
+        if (found == true) {
+            return item;
+        }
+    }
+    return getItemById(listData, id, setSelected);
+}
 
 /**
  * Types of the f-chip component.
@@ -53,6 +184,9 @@ const FChip = (props) => {
     if (!props.type) {
         props.type = exports.FChipType.STANDARD;
     }
+    if (!props.displayMode) {
+        props.displayMode = kupManager.ItemsDisplayMode.DESCRIPTION;
+    }
     const isChoice = props.type.toLowerCase() === exports.FChipType.CHOICE;
     const isFilter = props.type.toLowerCase() === exports.FChipType.FILTER;
     const isInput = props.type.toLowerCase() === exports.FChipType.INPUT;
@@ -65,7 +199,7 @@ const FChip = (props) => {
         'chip-set--input': isInput ? true : false,
         'chip--outlined': isOutlined ? true : false,
         'chip--raised': isRaised ? true : false,
-        [`chip--${props.sizing}`]: props.sizing ? true : false,
+        [`chip--${props.sizing || 'extra-small'}`]: true,
     };
     return (index.h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''} ${props.primary ? 'kup-primary' : ''}` }, props.dataSet, { id: props.id, title: props.title }),
         index.h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
@@ -85,6 +219,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
             const indentStyle = {
                 ['--kup_chip_indent_offset']: indent.toString(),
             };
+            const isDisabled = props.disabled;
             chipGroup.push(index.h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
                     ? 'chip-set__wrapper--hidden-children'
                     : ''}` },
@@ -96,7 +231,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
                         '/' +
                         dom.ketchup.language.translate(kupManager.KupLanguageGeneric.COLLAPSE) +
                         ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (index.h(fImage.FImage, { resource: "blank", sizeX: "16px", sizeY: "16px", wrapperClass: "dropdown-icon" })) : null,
-                createChip(chip)));
+                createChip(chip, isDisabled)));
             if (showChildren) {
                 for (let index = 0; index < chip.children.length; index++) {
                     if (chip.children[index]) {
@@ -105,9 +240,9 @@ function createChipList(props, isChoice, isFilter, isInput) {
                 }
             }
         }
-        function createChip(chip) {
+        function createChip(chip, disabled) {
             const onlyIcon = !!(chip.icon && !chip.value);
-            let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''}`;
+            let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''} ${disabled && 'chip--disabled'}`;
             let iconEl = [];
             let iconClass = 'chip__icon chip__icon--leading';
             if (isFilter || isChoice) {
@@ -136,6 +271,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
                     index.h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
                         index.h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
             }
+            let chipText = getIdOfItemByDisplayMode(chip, chip.value == '' ? kupManager.ItemsDisplayMode.CODE : props.displayMode, ' - ');
             return (index.h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
                     ? props.onClick[i].bind(props.onClick[i], chip)
                     : null, role: "row", title: chip.title ? chip.title : '' },
@@ -149,9 +285,7 @@ function createChipList(props, isChoice, isFilter, isInput) {
                             : null, onFocus: props.onFocus && props.onFocus[i]
                             ? props.onFocus[i].bind(props.onFocus[i], chip)
                             : null },
-                        index.h("span", { class: "chip__text" }, props.displayId
-                            ? chip.id + ' - ' + chip.value
-                            : chip.value))),
+                        index.h("span", { class: "chip__text" }, chipText))),
                 isInput ? (index.h("span", { role: "gridcell" },
                     index.h("span", { tabindex: "-1", class: `kup-icon chip__icon ${kupManager.KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
                             ? props.onIconClick[i].bind(props.onIconClick[i], chip)
@@ -162,3 +296,5 @@ function createChipList(props, isChoice, isFilter, isInput) {
 }
 
 exports.FChip = FChip;
+exports.consistencyCheck = consistencyCheck;
+exports.getIdOfItemByDisplayMode = getIdOfItemByDisplayMode;

package/dist/cjs/{f-image-d22b012f.js → f-image-db10b066.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-e8aa3c73.js');
+const index = require('./index-c7d441d8.js');
 
 /**
  * The type of a CSS step in CSS-drawing mode.

package/dist/cjs/{f-object-field-902b9d05.js → f-object-field-348fa103.js}

@@ -1,22 +1,29 @@
 'use strict';
 
-const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-d67049ad.js');
-const fButton = require('./f-button-c3ae141e.js');
+const index = require('./index-c7d441d8.js');
+const kupManager = require('./kup-manager-39bc2be8.js');
+const fButton = require('./f-button-bfafefb3.js');
 const fButtonDeclarations = require('./f-button-declarations-76ef9f87.js');
-const fTextField = require('./f-text-field-80716a60.js');
+const fTextField = require('./f-text-field-e41f653a.js');
 
 const STATE = new WeakMap();
 const FObjectField = (props) => {
     var _a;
+    let helperSection;
+    const attachHelperSection = (element) => {
+        helperSection = element;
+        return false;
+    };
     return (index.h("div", { class: `f-object-field ${props.wrapperClass ? props.wrapperClass : ''}`, ref: async (el) => {
             if (el) {
                 props.root = el;
                 setState(props);
             }
         } },
-        index.h(fTextField.FTextField, Object.assign({ icon: 'search', trailingIcon: true, disabled: false }, (_a = props.cell) === null || _a === void 0 ? void 0 : _a.data, { value: props.inputValue, onChange: props.onChange, onIconClick: handlers.icon.bind(props), onInput: handlers.input.bind(props), onKeyDown: handlers.keydown.bind(props) })),
-        index.h(fButton.FButton, { icon: 'menu', onClick: handlers.button.bind(props), sizing: kupManager.KupComponentSizing.SMALL, styling: fButtonDeclarations.FButtonStyling.FLAT, wrapperClass: "obj-field-extra-btn" }),
+        index.h("div", { class: "fields-wrapper" },
+            index.h(fTextField.FTextField, Object.assign({ icon: 'search', trailingIcon: true, disabled: false }, (_a = props.cell) === null || _a === void 0 ? void 0 : _a.data, { attachHelperSection: attachHelperSection, value: props.inputValue, onChange: props.onChange, onIconClick: handlers.icon.bind(props), onInput: handlers.input.bind(props), onKeyDown: handlers.keydown.bind(props) })),
+            index.h(fButton.FButton, { icon: 'menu', onClick: handlers.button.bind(props), sizing: kupManager.KupComponentSizing.SMALL, styling: fButtonDeclarations.FButtonStyling.FLAT, wrapperClass: "obj-field-extra-btn" })),
+        helperSection,
         index.h("kup-toolbar", { "onKup-toolbar-click": handlers.toolbar.bind(props) })));
 };
 function openList(props) {

package/dist/cjs/{f-paginator-utils-7df7d997.js → f-paginator-utils-f951cc54.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-d67049ad.js');
-const fButton = require('./f-button-c3ae141e.js');
+const index = require('./index-c7d441d8.js');
+const kupManager = require('./kup-manager-39bc2be8.js');
+const fButton = require('./f-button-bfafefb3.js');
 const fButtonDeclarations = require('./f-button-declarations-76ef9f87.js');
 
 var FPaginatorMode;

package/dist/cjs/{f-text-field-80716a60.js → f-text-field-e41f653a.js}

@@ -1,14 +1,15 @@
 'use strict';
 
-const index = require('./index-e8aa3c73.js');
-const kupManager = require('./kup-manager-d67049ad.js');
-const fImage = require('./f-image-d22b012f.js');
+const index = require('./index-c7d441d8.js');
+const kupManager = require('./kup-manager-39bc2be8.js');
+const fImage = require('./f-image-db10b066.js');
 
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 const FTextField = (props, children) => {
+    var _a, _b;
     const classObj = {
         'f-text-field': true,
         'kup-danger': props.danger,
@@ -20,14 +21,17 @@ const FTextField = (props, children) => {
         'kup-shaped': props.shaped,
         'kup-success': props.success,
         'kup-warning': props.warning,
+        [`f-text-field--${props.sizing || 'small'}`]: true,
         [props.wrapperClass]: !!props.wrapperClass,
     };
+    const helper = setHelper(props);
+    const attachHelperSection = (_b = (_a = props.attachHelperSection) === null || _a === void 0 ? void 0 : _a.call(props, helper)) !== null && _b !== void 0 ? _b : true;
     return (index.h("div", Object.assign({ class: classObj }, props.dataSet, { id: props.id, title: props.title }),
         props.leadingLabel || props.trailingLabel ? (index.h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
             setContent(props),
-            setHelper(props),
+            attachHelperSection ? helper : null,
             index.h("label", null, props.label),
-        ])) : ([setContent(props), setHelper(props)]),
+        ])) : ([setContent(props), attachHelperSection ? helper : null]),
         children));
 };
 /*-------------------------------------------------*/
@@ -43,7 +47,11 @@ function setContent(props) {
     if (props.maxLength >= 256) {
         props.textArea = true;
     }
-    if (props.label && !props.leadingLabel && !props.trailingLabel) {
+    if (props.label &&
+        !props.leadingLabel &&
+        !props.trailingLabel &&
+        !props.legacyLook // do not show label in input panel absolute ( legacy mode )
+    ) {
         labelEl = (index.h("div", { class: "mdc-text-field__label-container" },
             index.h("label", { class: "mdc-label", htmlFor: "kup-input" }, props.label),
             props.maxLength && props.showCounter ? (index.h("div", { class: "mdc-text-field__label-character-counter" },
@@ -118,7 +126,7 @@ function setContent(props) {
     let value = props.value;
     let inputType = props.quantityButtons
         ? 'number'
-        : (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
+        : ((_a = props.inputType) !== null && _a !== void 0 ? _a : 'text');
     let persManageForNumberFormat = false;
     if (props.inputType === 'number') {
         inputType = 'text';
@@ -134,14 +142,6 @@ function setContent(props) {
         };
         value = formatValue(value, options, false);
     }
-    if (props.textArea) {
-        try {
-            value = JSON.parse(`"${value}"`);
-        }
-        catch (e) {
-            value = JSON.parse(JSON.stringify(value));
-        }
-    }
     return (index.h("div", { class: classContainerObj },
         !props.fullWidth ? labelEl : undefined,
         index.h("div", { class: classObj },

package/dist/cjs/{f-typography-271f5037.js → f-typography-85d8238a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-e8aa3c73.js');
+const index = require('./index-c7d441d8.js');
 
 /**
  * Styling options for the f-button component.

package/dist/cjs/{index-e8aa3c73.js → index-c7d441d8.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'ketchup';
-const BUILD = /* ketchup */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* ketchup */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.20.0 | MIT Licensed | https://stenciljs.com
@@ -74,10 +74,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'kup-autocomplete_28.cjs':
+                case 'kup-autocomplete_29.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './kup-autocomplete_28.cjs.entry.js')); }).then(processMod, consoleError);
+                        './kup-autocomplete_29.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'kup-accordion.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -1186,6 +1186,11 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         }
       }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (instance.componentShouldUpdate) {
+          if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+            return;
+          }
+        }
         scheduleUpdate(hostRef, false);
       }
     }

package/dist/cjs/index.cjs.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const kupManager = require('./kup-manager-d67049ad.js');
+const kupManager = require('./kup-manager-39bc2be8.js');
 require('./kup-dates-bc4cf9d0.js');
-require('./index-e8aa3c73.js');
+require('./index-c7d441d8.js');
 
 /** used for obtain a KupManager instance without a dom document (for UT)  */
 function newKupManager(init) {