@siemens/ix 1.5.0-beta.4 → 1.6.0

package/dist/esm/{index-3d163acd.js → index-8ddfb6d8.js}

@@ -709,30 +709,31 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
  * @param vnodes a list of virtual DOM nodes to remove
  * @param startIdx the index at which to start removing nodes (inclusive)
  * @param endIdx the index at which to stop removing nodes (inclusive)
- * @param vnode a VNode
- * @param elm an element
  */
-const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
-    for (; startIdx <= endIdx; ++startIdx) {
-        if ((vnode = vnodes[startIdx])) {
-            elm = vnode.$elm$;
-            callNodeRefs(vnode);
-            {
-                // we're removing this element
-                // so it's possible we need to show slot fallback content now
-                checkSlotFallbackVisibility = true;
-                if (elm['s-ol']) {
-                    // remove the original location comment
-                    elm['s-ol'].remove();
-                }
-                else {
-                    // it's possible that child nodes of the node
-                    // that's being removed are slot nodes
-                    putBackInOriginalLocation(elm, true);
+const removeVnodes = (vnodes, startIdx, endIdx) => {
+    for (let index = startIdx; index <= endIdx; ++index) {
+        const vnode = vnodes[index];
+        if (vnode) {
+            const elm = vnode.$elm$;
+            nullifyVNodeRefs(vnode);
+            if (elm) {
+                {
+                    // we're removing this element
+                    // so it's possible we need to show slot fallback content now
+                    checkSlotFallbackVisibility = true;
+                    if (elm['s-ol']) {
+                        // remove the original location comment
+                        elm['s-ol'].remove();
+                    }
+                    else {
+                        // it's possible that child nodes of the node
+                        // that's being removed are slot nodes
+                        putBackInOriginalLocation(elm, true);
+                    }
                 }
+                // remove the vnode's element from the dom
+                elm.remove();
             }
-            // remove the vnode's element from the dom
-            elm.remove();
         }
     }
 };
@@ -1213,10 +1214,17 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
     }
     return slotNameAttr === '';
 };
-const callNodeRefs = (vNode) => {
+/**
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
+ * calling them with `null`. This signals that the DOM element corresponding to
+ * the VDom node has been removed from the DOM.
+ *
+ * @param vNode a virtual DOM node
+ */
+const nullifyVNodeRefs = (vNode) => {
     {
         vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+        vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
     }
 };
 /**
@@ -1353,10 +1361,32 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
     const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
     return writeTask(dispatch) ;
 };
+/**
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+ * component lifecycle methods like `componentWillLoad` as well as
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
+ *
+ * @param hostRef a reference to a host DOM node
+ * @param isInitialLoad whether we're on the initial load or not
+ * @returns an empty Promise which is used to enqueue a series of operations for
+ * the component
+ */
 const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
-    let promise;
+    // We're going to use this variable together with `enqueue` to implement a
+    // little promise-based queue. We start out with it `undefined`. When we add
+    // the first function to the queue we'll set this variable to be that
+    // function's return value. When we attempt to add subsequent values to the
+    // queue we'll check that value and, if it was a `Promise`, we'll then chain
+    // the new function off of that `Promise` using `.then()`. This will give our
+    // queue two nice properties:
+    //
+    // 1. If all functions added to the queue are synchronous they'll be called
+    //    synchronously right away.
+    // 2. If all functions added to the queue are asynchronous they'll all be
+    //    called in order after `dispatchHooks` exits.
+    let maybePromise;
     if (isInitialLoad) {
         {
             hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
@@ -1366,17 +1396,38 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             }
         }
         {
-            promise = safeCall(instance, 'componentWillLoad');
+            // If `componentWillLoad` returns a `Promise` then we want to wait on
+            // whatever's going on in that `Promise` before we launch into
+            // rendering the component, doing other lifecycle stuff, etc. So
+            // in that case we assign the returned promise to the variable we
+            // declared above to hold a possible 'queueing' Promise
+            maybePromise = safeCall(instance, 'componentWillLoad');
         }
     }
     {
-        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+        maybePromise = enqueue(maybePromise, () => safeCall(instance, 'componentWillRender'));
     }
     endSchedule();
-    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
+    return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
+/**
+ * This function uses a Promise to implement a simple first-in, first-out queue
+ * of functions to be called.
+ *
+ * The queue is ordered on the basis of the first argument. If it's
+ * `undefined`, then nothing is on the queue yet, so the provided function can
+ * be called synchronously (although note that this function may return a
+ * `Promise`). The idea is that then the return value of that enqueueing
+ * operation is kept around, so that if it was a `Promise` then subsequent
+ * functions can be enqueued by calling this function again with that `Promise`
+ * as the first argument.
+ *
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+ * @param fn a function to enqueue
+ * @returns either a `Promise` or the return value of the provided function
+ */
+const enqueue = (maybePromise, fn) => maybePromise instanceof Promise ? maybePromise.then(fn) : fn();
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
-    // updateComponent
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
@@ -1514,9 +1565,6 @@ const safeCall = (instance, method, arg) => {
     }
     return undefined;
 };
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1680,9 +1728,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
+        // Let the runtime know that the component has been initialized
+        hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
         {
-            // we haven't initialized this element yet
-            hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -1727,6 +1775,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1755,6 +1804,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1808,6 +1862,8 @@ const connectedCallback = (elm) => {
             // reattach any event listeners to the host
             // since they would have been removed when disconnected
             addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         endConnected();
     }
@@ -2245,6 +2301,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-upload.entry.js').then(processMod, consoleError);
+        case 'ix-content-header':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-content-header.entry.js').then(processMod, consoleError);
+        case 'ix-empty-state':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-empty-state.entry.js').then(processMod, consoleError);
         case 'ix-animated-tab_2':
           return import(
             /* webpackMode: "lazy" */
@@ -2301,6 +2365,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-menu_9.entry.js').then(processMod, consoleError);
+        case 'ix-action-card':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-action-card.entry.js').then(processMod, consoleError);
+        case 'ix-card-list':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-card-list.entry.js').then(processMod, consoleError);
+        case 'ix-css-grid':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-css-grid.entry.js').then(processMod, consoleError);
+        case 'ix-css-grid-item':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-css-grid-item.entry.js').then(processMod, consoleError);
         case 'ix-datetime-picker':
           return import(
             /* webpackMode: "lazy" */
@@ -2317,6 +2397,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-dropdown-quick-actions.entry.js').then(processMod, consoleError);
+        case 'ix-key-value':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-key-value.entry.js').then(processMod, consoleError);
+        case 'ix-key-value-list':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-key-value-list.entry.js').then(processMod, consoleError);
         case 'ix-kpi':
           return import(
             /* webpackMode: "lazy" */
@@ -2329,6 +2417,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-pagination.entry.js').then(processMod, consoleError);
+        case 'ix-push-card':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-push-card.entry.js').then(processMod, consoleError);
         case 'ix-tooltip':
           return import(
             /* webpackMode: "lazy" */
@@ -2341,6 +2433,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './my-component.entry.js').then(processMod, consoleError);
+        case 'ix-card-accordion_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-card-accordion_2.entry.js').then(processMod, consoleError);
         case 'ix-date-picker_2':
           return import(
             /* webpackMode: "lazy" */
@@ -2353,10 +2449,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-index-button.entry.js').then(processMod, consoleError);
-        case 'ix-typography':
-          return import(
-            /* webpackMode: "lazy" */
-            './ix-typography.entry.js').then(processMod, consoleError);
         case 'ix-tab-item':
           return import(
             /* webpackMode: "lazy" */
@@ -2365,6 +2457,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ix-tabs.entry.js').then(processMod, consoleError);
+        case 'ix-card_3':
+          return import(
+            /* webpackMode: "lazy" */
+            './ix-card_3.entry.js').then(processMod, consoleError);
         case 'ix-date-time-card':
           return import(
             /* webpackMode: "lazy" */
@@ -2454,4 +2550,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Fragment as F, Host as H, bootstrapLazy as b, createEvent as c, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-3d163acd.js.map
+//# sourceMappingURL=index-8ddfb6d8.js.map