@sme.up/ketchup 9.5.2 → 9.6.1

package/dist/cjs/{f-button-357a3dff.js → f-button-623dfcc3.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-8f2f4159.js');
+const index = require('./index-db0a6be6.js');
 const fButtonDeclarations = require('./f-button-declarations-51ef6d9a.js');
-const fImage = require('./f-image-30531fd0.js');
+const fImage = require('./f-image-b61cc967.js');
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/cjs/{f-cell-1de0ea69.js → f-cell-9c718d83.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-const kupManager = require('./kup-manager-cefb1999.js');
-const index = require('./index-8f2f4159.js');
-const fCheckbox = require('./f-checkbox-41864e53.js');
-const fTextField = require('./f-text-field-be758970.js');
-const fImage = require('./f-image-30531fd0.js');
-const fChip = require('./f-chip-bd5882a0.js');
-const fButton = require('./f-button-357a3dff.js');
+const kupManager = require('./kup-manager-227c4be2.js');
+const index = require('./index-db0a6be6.js');
+const fCheckbox = require('./f-checkbox-bfa92ebe.js');
+const fTextField = require('./f-text-field-a09b1705.js');
+const fImage = require('./f-image-b61cc967.js');
+const fChip = require('./f-chip-c8efad5b.js');
+const fButton = require('./f-button-623dfcc3.js');
 
 /**
  * Props of the kup-list component.
@@ -406,6 +406,7 @@ function setCellSizeKup(cellType, subcomponentProps, cell) {
     }
 }
 function setEditableCell(cellType, classObj, cell, column, props) {
+    var _a, _b;
     switch (cellType) {
         case kupManager.FCellTypes.AUTOCOMPLETE:
             return (index.h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, kupManager.FCellEvents.ICON_CLICK) })));
@@ -453,7 +454,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
                 ? dom.ketchup.math.numberifySafe(cell.value).toString()
                 : cell.value;
             if (cell.shape === kupManager.FCellShapes.INPUT_FIELD) {
-                return (index.h("input", { class: 'input-field', onChange: onChange, onInput: onInput, type: type, value: value }));
+                return (index.h("input", { class: 'input-field', onChange: onChange, onInput: onInput, type: type, value: value, maxLength: (_b = (_a = column.cellData) === null || _a === void 0 ? void 0 : _a.maxLength) !== null && _b !== void 0 ? _b : -1 }));
             }
             else {
                 return (index.h(fTextField.FTextField, Object.assign({ inputType: type, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.data && cell.data.icon

package/dist/cjs/{f-checkbox-41864e53.js → f-checkbox-bfa92ebe.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-8f2f4159.js');
+const index = require('./index-db0a6be6.js');
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/cjs/{f-chip-bd5882a0.js → f-chip-c8efad5b.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-8f2f4159.js');
-const fImage = require('./f-image-30531fd0.js');
-const kupManager = require('./kup-manager-cefb1999.js');
+const index = require('./index-db0a6be6.js');
+const fImage = require('./f-image-b61cc967.js');
+const kupManager = require('./kup-manager-227c4be2.js');
 
 /**
  * Types of the f-chip component.

package/dist/cjs/{f-image-30531fd0.js → f-image-b61cc967.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-8f2f4159.js');
-const kupManager = require('./kup-manager-cefb1999.js');
+const index = require('./index-db0a6be6.js');
+const kupManager = require('./kup-manager-227c4be2.js');
 
 /**
  * The type of a CSS step in CSS-drawing mode.

package/dist/cjs/{f-paginator-utils-ad8a4635.js → f-paginator-utils-f32382f6.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const kupManager = require('./kup-manager-cefb1999.js');
-const kupDates = require('./kup-dates-0e59b05d.js');
-const index = require('./index-8f2f4159.js');
-const fButton = require('./f-button-357a3dff.js');
+const kupManager = require('./kup-manager-227c4be2.js');
+const kupDates = require('./kup-dates-4aa560f0.js');
+const index = require('./index-db0a6be6.js');
+const fButton = require('./f-button-623dfcc3.js');
 const fButtonDeclarations = require('./f-button-declarations-51ef6d9a.js');
 
 /**
@@ -1441,11 +1441,11 @@ function cloneRowGroup(group) {
     return cloned;
 }
 
-exports.FPaginatorMode = void 0;
+var FPaginatorMode;
 (function (FPaginatorMode) {
     FPaginatorMode["SIMPLE"] = "simple";
     FPaginatorMode["FULL"] = "full";
-})(exports.FPaginatorMode || (exports.FPaginatorMode = {}));
+})(FPaginatorMode || (FPaginatorMode = {}));
 
 const dom$1 = document.documentElement;
 /*-------------------------------------------------*/
@@ -1486,9 +1486,9 @@ const FPaginator = (props) => {
         },
     };
     return (index.h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-        props.mode !== exports.FPaginatorMode.SIMPLE ? (index.h(fButton.FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, wrapperClass: "prev-page" })) : null,
+        props.mode !== FPaginatorMode.SIMPLE ? (index.h(fButton.FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, wrapperClass: "prev-page" })) : null,
         index.h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }),
-        props.mode !== exports.FPaginatorMode.SIMPLE ? (index.h(fButton.FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, wrapperClass: "next-page" })) : null,
+        props.mode !== FPaginatorMode.SIMPLE ? (index.h(fButton.FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, wrapperClass: "next-page" })) : null,
         index.h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }),
         props.onLoadMore ? (index.h(fButton.FButton, { icon: "plus", onClick: props.onLoadMore, label: dom$1.ketchup.language.translate(kupManager.KupLanguageGeneric.LOAD_MORE), styling: fButtonDeclarations.FButtonStyling.FLAT, wrapperClass: "load-more-button" })) : null));
 };

package/dist/cjs/{f-text-field-be758970.js → f-text-field-a09b1705.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-8f2f4159.js');
-const kupManager = require('./kup-manager-cefb1999.js');
+const index = require('./index-db0a6be6.js');
+const kupManager = require('./kup-manager-227c4be2.js');
 
 const dom = document.documentElement;
 /*-------------------------------------------------*/

package/dist/cjs/{index-8f2f4159.js → index-db0a6be6.js}

@@ -32,6 +32,7 @@ const NAMESPACE = 'ketchup';
  */
 let scopeId;
 let hostTagName;
+let useNativeShadowDom = false;
 let isSvgMode = false;
 let queuePending = false;
 const getAssetPath = (path) => {
@@ -800,8 +801,9 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
  * @param oldCh the old children of the parent node
  * @param newVNode the new VNode which will replace the parent
  * @param newCh the new children of the parent node
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
     let idxInOld = 0;
@@ -828,25 +830,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
         else if (newEndVnode == null) {
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
             // if the start nodes are the same then we should patch the new VNode
             // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
             // indices to reflect that. We don't need to move any DOM Nodes around
             // since things are matched up in order.
-            patch(oldStartVnode, newStartVnode);
+            patch(oldStartVnode, newStartVnode, isInitialRender);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
             // likewise, if the end nodes are the same we patch new onto old and
             // decrement our end indices, and also likewise in this case we don't
             // need to move any DOM Nodes.
-            patch(oldEndVnode, newEndVnode);
+            patch(oldEndVnode, newEndVnode, isInitialRender);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
-            patch(oldStartVnode, newEndVnode);
+        else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
+            patch(oldStartVnode, newEndVnode, isInitialRender);
             // We need to move the element for `oldStartVnode` into a position which
             // will be appropriate for `newEndVnode`. For this we can use
             // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
@@ -868,8 +870,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
-            patch(oldEndVnode, newStartVnode);
+        else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
+            patch(oldEndVnode, newStartVnode, isInitialRender);
             // We've already checked above if `oldStartVnode` and `newStartVnode` are
             // the same node, so since we're here we know that they are not. Thus we
             // can move the element for `oldEndVnode` _before_ the element for
@@ -906,7 +908,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                     node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
                 }
                 else {
-                    patch(elmToMove, newStartVnode);
+                    patch(elmToMove, newStartVnode, isInitialRender);
                     // invalidate the matching old node so that we won't try to update it
                     // again later on
                     oldCh[idxInOld] = undefined;
@@ -957,16 +959,22 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
+ * @param isInitialRender whether or not this is the first render of the vdom
  * @returns whether they're equal or not
  */
-const isSameVnode = (leftVNode, rightVNode) => {
+const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
-        // this will be set if components in the build have `key` attrs set on them
-        {
+        // this will be set if JSX tags in the build have `key` attrs set on them
+        // we only want to check this if we're not on the first render since on
+        // first render `leftVNode.$key$` will always be `null`, so we can be led
+        // astray and, for instance, accidentally delete a DOM node that we want to
+        // keep around.
+        if (!isInitialRender) {
             return leftVNode.$key$ === rightVNode.$key$;
         }
+        return true;
     }
     return false;
 };
@@ -977,8 +985,9 @@ const isSameVnode = (leftVNode, rightVNode) => {
  *
  * @param oldVNode an old VNode whose DOM element and children we want to update
  * @param newVNode a new VNode representing an updated version of the old one
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const patch = (oldVNode, newVNode) => {
+const patch = (oldVNode, newVNode, isInitialRender = false) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
@@ -991,8 +1000,7 @@ const patch = (oldVNode, newVNode) => {
             isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
         }
         {
-            if (tag === 'slot')
-                ;
+            if (tag === 'slot' && !useNativeShadowDom) ;
             else {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
@@ -1003,7 +1011,7 @@ const patch = (oldVNode, newVNode) => {
         if (oldChildren !== null && newChildren !== null) {
             // looks like there's child vnodes for both the old and new vnodes
             // so we need to call `updateChildren` to reconcile them
-            updateChildren(elm, oldChildren, newVNode, newChildren);
+            updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
         }
         else if (newChildren !== null) {
             // no old child vnodes, but there are new child vnodes to add
@@ -1097,8 +1105,9 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     {
         scopeId = hostElm['s-sc'];
     }
+    useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
     // synchronous patch
-    patch(oldVNode, rootVnode);
+    patch(oldVNode, rootVnode, isInitialLoad);
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
@@ -1832,25 +1841,29 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             }
         });
     });
-    // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
-    if (hasSlotRelocation) {
-        dataStyles.innerHTML += SLOT_FB_CSS;
-    }
-    // Add hydration styles
-    {
-        dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
-    }
-    // If we have styles, add them to the DOM
-    if (dataStyles.innerHTML.length) {
-        dataStyles.setAttribute('data-styles', '');
-        // Apply CSP nonce to the style tag if it exists
-        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
-        if (nonce != null) {
-            dataStyles.setAttribute('nonce', nonce);
+    // Only bother generating CSS if we have components
+    // TODO(STENCIL-1118): Add test cases for CSS content based on conditionals
+    if (cmpTags.length > 0) {
+        // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
+        if (hasSlotRelocation) {
+            dataStyles.innerHTML += SLOT_FB_CSS;
+        }
+        // Add hydration styles
+        {
+            dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
+        }
+        // If we have styles, add them to the DOM
+        if (dataStyles.innerHTML.length) {
+            dataStyles.setAttribute('data-styles', '');
+            // Apply CSP nonce to the style tag if it exists
+            const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+            if (nonce != null) {
+                dataStyles.setAttribute('nonce', nonce);
+            }
+            // Insert the styles into the document head
+            // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
+            head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         }
-        // Insert the styles into the document head
-        // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
-        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
@@ -1899,7 +1912,12 @@ const getHostListenerTarget = (elm, flags) => {
     return elm;
 };
 // prettier-ignore
-const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+const hostListenerOpts = (flags) => supportsListenerOptions
+    ? ({
+        passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,
+        capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
+    })
+    : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 /**
  * Assigns the given value to the nonce property on the runtime platform object.
  * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
@@ -1910,8 +1928,19 @@ const setNonce = (nonce) => (plt.$nonce$ = nonce);
 /**
  * A WeakMap mapping runtime component references to their corresponding host reference
  * instances.
+ *
+ * **Note**: If we're in an HMR context we need to store a reference to this
+ * value on `window` in order to maintain the mapping of {@link d.RuntimeRef}
+ * to {@link d.HostRef} across HMR updates.
+ *
+ * This is necessary because when HMR updates for a component are processed by
+ * the browser-side dev server client the JS bundle for that component is
+ * re-fetched. Since the module containing {@link hostRefs} is included in
+ * that bundle, if we do not store a reference to it the new iteration of the
+ * component will not have access to the previous hostRef map, leading to a
+ * bug where the new version of the component cannot properly initialize.
  */
-const hostRefs = /*@__PURE__*/ new WeakMap();
+const hostRefs = new WeakMap();
 /**
  * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
  *
@@ -1991,6 +2020,18 @@ const plt = {
     rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
+const supportsListenerOptions = /*@__PURE__*/ (() => {
+    let supportsListenerOptions = false;
+    try {
+        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
+            get() {
+                supportsListenerOptions = true;
+            },
+        }));
+    }
+    catch (e) { }
+    return supportsListenerOptions;
+})();
 const promiseResolve = (v) => Promise.resolve(v);
 const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
         try {

package/dist/cjs/index.cjs.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const kupManager = require('./kup-manager-cefb1999.js');
-require('./kup-dates-0e59b05d.js');
-require('./index-8f2f4159.js');
+const kupManager = require('./kup-manager-227c4be2.js');
+require('./kup-dates-4aa560f0.js');
+require('./index-db0a6be6.js');
 
 /** used for obtain a KupManager instance without a dom document (for UT)  */
 function newKupManager(init) {