@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/esm/{f-text-field-d231982c.js → f-text-field-92bb3a1f.js}

@@ -1,176 +1,176 @@
-import { h, a as getAssetPath } from './index-8bd38435.js';
-import { K as KupThemeIconValues } from './kup-manager-d1da769e.js';
+import { h, a as getAssetPath } from './index-bb15ce14.js';
+import { K as KupThemeIconValues } from './kup-manager-1e6ea451.js';
 
-const dom = document.documentElement;
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FTextField = (props, children) => {
-  return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
-      setContent(props),
-      setHelper(props),
-      h("label", null, props.label),
-    ])) : ([setContent(props), setHelper(props)]),
-    children));
-};
-/*-------------------------------------------------*/
-/*                  M e t h o d s                  */
-/*-------------------------------------------------*/
-function setContent(props) {
-  var _a, _b;
-  const isOutlined = props.textArea || props.outlined;
-  let labelEl;
-  let iconEl;
-  if (props.label && !props.leadingLabel && !props.trailingLabel) {
-    labelEl = (h("label", { class: "mdc-floating-label", htmlFor: "kup-input" }, props.label));
-  }
-  if (props.icon) {
-    let iconStyle;
-    let iconClass = '';
-    if (Object.values(KupThemeIconValues).indexOf(props.icon) > -1) {
-      iconClass = props.icon.replace('--', '');
-    }
-    else {
-      let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
-      iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-    }
-    iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
-  }
-  const classObj = {
-    'is-clearable': props.isClearable,
-    'mdc-text-field': true,
-    'mdc-text-field--disabled': props.disabled,
-    'mdc-text-field--filled': !props.fullWidth && !isOutlined,
-    'mdc-text-field--no-label': !props.label,
-    'mdc-text-field--fullwidth': props.fullWidth,
-    'mdc-text-field--outlined': isOutlined,
-    'mdc-text-field--textarea': props.textArea,
-    'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
-    'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
-  };
-  let value = props.value;
-  let inputType = (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
-  let persManageForNumberFormat = false;
-  if (props.inputType === 'number' && props.decimals && props.decimals > 0) {
-    inputType = 'text';
-    persManageForNumberFormat = true;
-  }
-  if (props.inputType === 'number') {
-    const options = {
-      allowNegative: (_b = props.allowNegative) !== null && _b !== void 0 ? _b : true,
-      decimal: props.decimals,
-      group: props.group,
-      integer: props.integers,
-    };
-    value = formatValue(value, options, false);
-  }
-  return (h("div", { class: classObj },
-    props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
-      "'0 / ' + ",
-      props.maxLength)) : undefined,
-    !props.trailingIcon ? iconEl : undefined,
-    props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
-      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: inputType, step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
-        ? props.label
-        : undefined, maxlength: props.maxLength, value: value, onBlur: (e) => {
-        var _a;
-        if (persManageForNumberFormat) {
-          const options = {
-            allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
-            decimal: props.decimals,
-            group: props.group,
-            integer: props.integers,
-          };
-          e.target.value = formatValue(e.target.value, options, true);
-        }
-        if (props.onBlur) {
-          props.onBlur(e);
-        }
-      }, onChange: (e) => {
-        var _a;
-        if (persManageForNumberFormat) {
-          const options = {
-            allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
-            decimal: props.decimals,
-            group: props.group,
-            integer: props.integers,
-          };
-          e.target.value = formatValue(e.target.value, options, true);
-        }
-        if (props.onChange) {
-          props.onChange(e);
-        }
-      }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown, onKeyPress: (e) => {
-        var _a;
-        if (!persManageForNumberFormat) {
-          return;
-        }
-        if (e.ctrlKey) {
-          return;
-        }
-        if (e.key.length > 1) {
-          return;
-        }
-        const options = {
-          allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
-          decimal: props.decimals,
-          group: props.group,
-          integer: props.integers,
-        };
-        let component = e.target;
-        let value = component.value;
-        let beginVal = value.substring(0, component.selectionStart);
-        let endVal = value.substring(component.selectionEnd, component.selectionEnd + value.length - 1);
-        let val = beginVal + e.key + endVal;
-        if (!dom.ketchup.math.matchNumericValueWithOptions(val, options)) {
-          e.preventDefault();
-          return;
-        }
-      } })),
-    props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
-    props.trailingIcon ? iconEl : undefined,
-    !props.fullWidth && !isOutlined ? labelEl : undefined,
-    isOutlined ? (h("div", { class: "mdc-notched-outline" },
-      h("div", { class: "mdc-notched-outline__leading" }),
-      h("div", { class: "mdc-notched-outline__notch" }, labelEl),
-      h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
-}
-function setHelper(props) {
-  if (props.helperEnabled !== false) {
-    if (props.helper) {
-      const classObj = {
-        'mdc-text-field-helper-text': true,
-        'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
-      };
-      return (h("div", { class: "mdc-text-field-helper-line" },
-        h("div", { class: classObj }, props.helper),
-        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
-          "'0 / ' + ",
-          props.maxLength.toString())) : undefined));
-    }
-    else {
-      if (props.maxLength && !props.textArea) {
-        return (h("div", { class: "mdc-text-field-helper-line" },
-          h("div", { class: "mdc-text-field-character-counter" },
-            "'0 / ' + ",
-            props.maxLength)));
-      }
-    }
-  }
-}
-const formatValue = function (value, options, inputIsLocalized) {
-  let formatedValue = value;
-  if (!formatedValue) {
-    return formatedValue;
-  }
-  if (formatedValue == '-') {
-    return '';
-  }
-  return dom.ketchup.math.format(formatedValue, dom.ketchup.math.createFormatPattern(options.group, options.decimal), inputIsLocalized);
+const dom = document.documentElement;
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FTextField = (props, children) => {
+  return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
+      setContent(props),
+      setHelper(props),
+      h("label", null, props.label),
+    ])) : ([setContent(props), setHelper(props)]),
+    children));
+};
+/*-------------------------------------------------*/
+/*                  M e t h o d s                  */
+/*-------------------------------------------------*/
+function setContent(props) {
+  var _a, _b;
+  const isOutlined = props.textArea || props.outlined;
+  let labelEl;
+  let iconEl;
+  if (props.label && !props.leadingLabel && !props.trailingLabel) {
+    labelEl = (h("label", { class: "mdc-floating-label", htmlFor: "kup-input" }, props.label));
+  }
+  if (props.icon) {
+    let iconStyle;
+    let iconClass = '';
+    if (Object.values(KupThemeIconValues).indexOf(props.icon) > -1) {
+      iconClass = props.icon.replace('--', '');
+    }
+    else {
+      let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
+      iconStyle = {
+        mask: svg,
+        webkitMask: svg,
+      };
+    }
+    iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
+  }
+  const classObj = {
+    'is-clearable': props.isClearable,
+    'mdc-text-field': true,
+    'mdc-text-field--disabled': props.disabled,
+    'mdc-text-field--filled': !props.fullWidth && !isOutlined,
+    'mdc-text-field--no-label': !props.label,
+    'mdc-text-field--fullwidth': props.fullWidth,
+    'mdc-text-field--outlined': isOutlined,
+    'mdc-text-field--textarea': props.textArea,
+    'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
+    'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
+  };
+  let value = props.value;
+  let inputType = (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
+  let persManageForNumberFormat = false;
+  if (props.inputType === 'number' && props.decimals && props.decimals > 0) {
+    inputType = 'text';
+    persManageForNumberFormat = true;
+  }
+  if (props.inputType === 'number') {
+    const options = {
+      allowNegative: (_b = props.allowNegative) !== null && _b !== void 0 ? _b : true,
+      decimal: props.decimals,
+      group: props.group,
+      integer: props.integers,
+    };
+    value = formatValue(value, options, false);
+  }
+  return (h("div", { class: classObj },
+    props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
+      "'0 / ' + ",
+      props.maxLength)) : undefined,
+    !props.trailingIcon ? iconEl : undefined,
+    props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
+      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: inputType, step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
+        ? props.label
+        : undefined, maxlength: props.maxLength, value: value, onBlur: (e) => {
+        var _a;
+        if (persManageForNumberFormat) {
+          const options = {
+            allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
+            decimal: props.decimals,
+            group: props.group,
+            integer: props.integers,
+          };
+          e.target.value = formatValue(e.target.value, options, true);
+        }
+        if (props.onBlur) {
+          props.onBlur(e);
+        }
+      }, onChange: (e) => {
+        var _a;
+        if (persManageForNumberFormat) {
+          const options = {
+            allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
+            decimal: props.decimals,
+            group: props.group,
+            integer: props.integers,
+          };
+          e.target.value = formatValue(e.target.value, options, true);
+        }
+        if (props.onChange) {
+          props.onChange(e);
+        }
+      }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown, onKeyPress: (e) => {
+        var _a;
+        if (!persManageForNumberFormat) {
+          return;
+        }
+        if (e.ctrlKey) {
+          return;
+        }
+        if (e.key.length > 1) {
+          return;
+        }
+        const options = {
+          allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
+          decimal: props.decimals,
+          group: props.group,
+          integer: props.integers,
+        };
+        let component = e.target;
+        let value = component.value;
+        let beginVal = value.substring(0, component.selectionStart);
+        let endVal = value.substring(component.selectionEnd, component.selectionEnd + value.length - 1);
+        let val = beginVal + e.key + endVal;
+        if (!dom.ketchup.math.matchNumericValueWithOptions(val, options)) {
+          e.preventDefault();
+          return;
+        }
+      } })),
+    props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
+    props.trailingIcon ? iconEl : undefined,
+    !props.fullWidth && !isOutlined ? labelEl : undefined,
+    isOutlined ? (h("div", { class: "mdc-notched-outline" },
+      h("div", { class: "mdc-notched-outline__leading" }),
+      h("div", { class: "mdc-notched-outline__notch" }, labelEl),
+      h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
+}
+function setHelper(props) {
+  if (props.helperEnabled !== false) {
+    if (props.helper) {
+      const classObj = {
+        'mdc-text-field-helper-text': true,
+        'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
+      };
+      return (h("div", { class: "mdc-text-field-helper-line" },
+        h("div", { class: classObj }, props.helper),
+        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
+          "'0 / ' + ",
+          props.maxLength.toString())) : undefined));
+    }
+    else {
+      if (props.maxLength && !props.textArea) {
+        return (h("div", { class: "mdc-text-field-helper-line" },
+          h("div", { class: "mdc-text-field-character-counter" },
+            "'0 / ' + ",
+            props.maxLength)));
+      }
+    }
+  }
+}
+const formatValue = function (value, options, inputIsLocalized) {
+  let formatedValue = value;
+  if (!formatedValue) {
+    return formatedValue;
+  }
+  if (formatedValue == '-') {
+    return '';
+  }
+  return dom.ketchup.math.format(formatedValue, dom.ketchup.math.createFormatPattern(options.group, options.decimal), inputIsLocalized);
 };
 
 export { FTextField as F };

package/dist/esm/{f-text-field-mdc-cee583ea.js → f-text-field-mdc-a1b4a919.js}

@@ -1,5 +1,4 @@
-import { _ as __extends, a as __assign, b as __values } from './tslib.es6-8c2af864.js';
-import { a as MDCFoundation, b as MDCComponent, e as estimateScrollWidth, c as applyPassive, M as MDCRipple, m as matches, d as MDCRippleFoundation } from './component-120651a0.js';
+import { _ as __extends, a as __assign, b as MDCFoundation, c as MDCComponent, e as estimateScrollWidth, d as __values, f as applyPassive, M as MDCRipple, m as matches, g as MDCRippleFoundation } from './component-e86c51ea.js';
 
 /**
  * @license
@@ -2537,32 +2536,32 @@ var MDCFormField = /** @class */ (function (_super) {
     return MDCFormField;
 }(MDCComponent));
 
-/**
- * Instantiates Material Design text field component.
- * @param el - Must be the f-component wrapper (.f-text-field)
- * @see https://material-components.github.io/material-components-web-catalog/#/component/text-field
- */
-function FTextFieldMDC(el) {
-  const component = new MDCTextField(el.querySelector('.mdc-text-field'));
-  const form = el.querySelector('.mdc-form-field');
-  const helper = el.querySelector('.mdc-text-field-helper-text');
-  const counter = el.querySelector('.mdc-text-field-character-counter');
-  const icon = el.querySelector('.mdc-text-field-icon');
-  if (form) {
-    const formField = MDCFormField.attachTo(form);
-    if (formField) {
-      formField.input = component;
-    }
-  }
-  if (helper) {
-    new MDCTextFieldHelperText(helper);
-  }
-  if (counter) {
-    new MDCTextFieldCharacterCounter(counter);
-  }
-  if (icon) {
-    new MDCTextFieldIcon(icon);
-  }
+/**
+ * Instantiates Material Design text field component.
+ * @param el - Must be the f-component wrapper (.f-text-field)
+ * @see https://material-components.github.io/material-components-web-catalog/#/component/text-field
+ */
+function FTextFieldMDC(el) {
+  const component = new MDCTextField(el.querySelector('.mdc-text-field'));
+  const form = el.querySelector('.mdc-form-field');
+  const helper = el.querySelector('.mdc-text-field-helper-text');
+  const counter = el.querySelector('.mdc-text-field-character-counter');
+  const icon = el.querySelector('.mdc-text-field-icon');
+  if (form) {
+    const formField = MDCFormField.attachTo(form);
+    if (formField) {
+      formField.input = component;
+    }
+  }
+  if (helper) {
+    new MDCTextFieldHelperText(helper);
+  }
+  if (counter) {
+    new MDCTextFieldCharacterCounter(counter);
+  }
+  if (icon) {
+    new MDCTextFieldIcon(icon);
+  }
 }
 
 export { FTextFieldMDC as F };

package/dist/esm/{index-8bd38435.js → index-bb15ce14.js}

@@ -653,16 +653,17 @@ 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);
-            // remove the vnode's element from the dom
-            elm.remove();
+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) {
+                // remove the vnode's element from the dom
+                elm.remove();
+            }
         }
     }
 };
@@ -961,10 +962,17 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
-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);
     }
 };
 /**
@@ -1019,35 +1027,96 @@ 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 */;
             if (hostRef.$queuedListeners$) {
                 hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
-                hostRef.$queuedListeners$ = null;
+                hostRef.$queuedListeners$ = undefined;
             }
         }
         {
-            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');
         }
     }
     else {
         {
-            promise = safeCall(instance, 'componentWillUpdate');
+            // Like `componentWillLoad` above, we allow Stencil component
+            // authors to return a `Promise` from this lifecycle callback, and
+            // we specify that our runtime will wait for that `Promise` to
+            // resolve before the component re-renders. So if the method
+            // returns a `Promise` we need to keep it around!
+            maybePromise = safeCall(instance, 'componentWillUpdate');
         }
     }
     {
-        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) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+/**
+ * Check that a value is a `Promise`. To check, we first see if the value is an
+ * instance of the `Promise` global. In a few circumstances, in particular if
+ * the global has been overwritten, this is could be misleading, so we also do
+ * a little 'duck typing' check to see if the `.then` property of the value is
+ * defined and a function.
+ *
+ * @param maybePromise it might be a promise!
+ * @returns whether it is or not
+ */
+const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
+    (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
-    // updateComponent
+    var _a;
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
@@ -1069,7 +1138,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     endRender();
     endUpdate();
     {
-        const childrenPromises = elm['s-p'];
+        const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
         const postUpdate = () => postUpdateComponent(hostRef);
         if (childrenPromises.length === 0) {
             postUpdate();
@@ -1188,9 +1257,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);
@@ -1354,9 +1420,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
@@ -1684,6 +1750,8 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 const styles = /*@__PURE__*/ new Map();
 const win = typeof window !== 'undefined' ? window : {};
 const doc = win.document || { head: {} };
+const H = (win.HTMLElement || class {
+});
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
@@ -1746,4 +1814,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, getAssetPath as a, bootstrapLazy as b, createEvent as c, setAssetPath as d, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, getAssetPath as a, bootstrapLazy as b, createEvent as c, setAssetPath as d, H as e, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };