@sme.up/ketchup 8.3.3 → 9.1.0

package/dist/esm/{f-paginator-utils-e559dac8.js → f-paginator-utils-743522fa.js}

@@ -1,6 +1,6 @@
-import { E as Filters, J as FilterInterval, H as getValueForDisplay, D as getValueForDisplay2, af as getCellValueForDisplay, v as getColumnByName, z as KupObjects, ah as KupData, ai as compareCell, N as TotalMode, h as KupDatesFormats, a2 as SortMode, aj as KupLanguagePage, r as KupLanguageRow, m as KupLanguageGeneric } from './kup-manager-a4153fb2.js';
-import { h } from './index-d413187a.js';
-import { F as FButton } from './f-button-e54ce8d5.js';
+import { E as Filters, J as FilterInterval, H as getValueForDisplay, D as getValueForDisplay2, af as getCellValueForDisplay, v as getColumnByName, z as KupObjects, ah as KupData, ai as compareCell, N as TotalMode, h as KupDatesFormats, a2 as SortMode, aj as KupLanguagePage, r as KupLanguageRow, m as KupLanguageGeneric } from './kup-manager-94b3d177.js';
+import { h } from './index-c161a33e.js';
+import { F as FButton } from './f-button-f247ce10.js';
 import { F as FButtonStyling } from './f-button-declarations-8a009df1.js';
 
 /**
@@ -869,19 +869,19 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
     return;
   }
   keys.forEach((key) => {
-    const currentTotalValue = dom$2.ketchup.math.numberify(groupRow.group.totals[key] || 0);
     const cell = addedRow.cells[key];
     if (cell) {
-      let _isNumber = dom$2.ketchup.objects.isNumber(cell.obj);
+      const _isNumber = dom$2.ketchup.objects.isNumber(cell.obj);
       const totalMode = totals[key];
       switch (totalMode) {
         case TotalMode.COUNT:
-          groupRow.group.totals[key] = currentTotalValue + 1;
+          let currentTotalValue = groupRow.group.totals[key] || 0;
+          groupRow.group.totals[key] = ++currentTotalValue;
           // updating parents
           let parent = groupRow.group.parent;
           while (parent != null) {
-            const currentParentCount = parent.group.totals[key] || 0;
-            parent.group.totals[key] = currentParentCount + 1;
+            let currentParentCount = parent.group.totals[key] || 0;
+            parent.group.totals[key] = ++currentParentCount;
             parent = parent.group.parent;
           }
           break;
@@ -939,8 +939,9 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
           break;
         case TotalMode.SUM:
         case TotalMode.AVERAGE:
-          if (_isNumber) {
+          if (_isNumber && cell.value) {
             const cellValue = dom$2.ketchup.math.numberify(dom$2.ketchup.math.numberifySafe(cell.value));
+            const currentTotalValue = groupRow.group.totals[key] || 0;
             groupRow.group.totals[key] =
               cellValue + currentTotalValue;
             // updating parents
@@ -955,11 +956,11 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
           break;
         // TODO DRY the MIN and MAX functions
         case TotalMode.MIN:
-          if (_isNumber) {
-            const currentTotalValue = groupRow.group.totals[key];
+          if (_isNumber && cell.value) {
+            const currentMinValue = groupRow.group.totals[key];
             const cellValue = dom$2.ketchup.math.numberify(dom$2.ketchup.math.numberifySafe(cell.value));
-            if (currentTotalValue) {
-              groupRow.group.totals[key] = Math.min(currentTotalValue, cellValue);
+            if (currentMinValue) {
+              groupRow.group.totals[key] = Math.min(currentMinValue, cellValue);
             }
             else {
               // first round
@@ -979,22 +980,21 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (dom$2.ketchup.objects.isDate(cell.obj)) {
-            const momentValue = cell.obj
-              ? dom$2.ketchup.objects.parseDate(cell.obj)
-              : dom$2.ketchup.dates.toDayjs(cell.value);
-            if (dom$2.ketchup.dates.isValid(momentValue)) {
-              const cellValue = dom$2.ketchup.dates.toDate(momentValue);
-              const currentTotalValue = groupRow.group.totals[key];
-              if (currentTotalValue) {
+          else if (cell.value &&
+            dom$2.ketchup.objects.isDate(cell.obj)) {
+            const cellValue = dom$2.ketchup.dates.toDayjs(cell.value);
+            if (dom$2.ketchup.dates.isValid(cellValue)) {
+              const currentMinValue = groupRow.group.totals[key];
+              if (currentMinValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(dom$2.ketchup.dates.format(currentTotalValue));
+                moments.push(dom$2.ketchup.dates.toDayjs(currentMinValue));
                 groupRow.group.totals[key] =
-                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments));
+                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments), KupDatesFormats.ISO_DATE);
               }
               else {
-                groupRow.group.totals[key] = cellValue;
+                groupRow.group.totals[key] =
+                  dom$2.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
               }
               // updating parents
               let parent = groupRow.group.parent;
@@ -1003,13 +1003,14 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
                 if (currentParentMin) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(dom$2.ketchup.dates.format(currentParentMin));
+                  moments.push(dom$2.ketchup.dates.toDayjs(currentParentMin));
                   parent.group.totals[key] =
-                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments));
+                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.min(moments), KupDatesFormats.ISO_DATE);
                 }
                 else {
                   // first round
-                  parent.group.totals[key] = cellValue;
+                  parent.group.totals[key] =
+                    dom$2.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
                 }
                 parent = parent.group.parent;
               }
@@ -1018,11 +1019,11 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
           break;
         // TODO DRY the MIN and MAX functions
         case TotalMode.MAX:
-          if (_isNumber) {
-            const currentTotalValue = groupRow.group.totals[key];
+          if (_isNumber && cell.value) {
+            const currentMaxValue = groupRow.group.totals[key];
             const cellValue = dom$2.ketchup.math.numberify(dom$2.ketchup.math.numberifySafe(cell.value));
-            if (currentTotalValue) {
-              groupRow.group.totals[key] = Math.max(currentTotalValue, cellValue);
+            if (currentMaxValue) {
+              groupRow.group.totals[key] = Math.max(currentMaxValue, cellValue);
             }
             else {
               // first round
@@ -1042,37 +1043,37 @@ function updateGroupTotal(groupRow, totals, addedRow, distinctObj) {
               parent = parent.group.parent;
             }
           }
-          else if (dom$2.ketchup.objects.isDate(cell.obj)) {
-            const momentValue = cell.obj
-              ? dom$2.ketchup.objects.parseDate(cell.obj)
-              : dom$2.ketchup.dates.toDayjs(cell.value);
-            if (dom$2.ketchup.dates.isValid(momentValue)) {
-              const cellValue = dom$2.ketchup.dates.toDate(momentValue);
-              const currentTotalValue = groupRow.group.totals[key];
-              if (currentTotalValue) {
+          else if (cell.value &&
+            dom$2.ketchup.objects.isDate(cell.obj)) {
+            const cellValue = dom$2.ketchup.dates.toDayjs(cell.value);
+            if (dom$2.ketchup.dates.isValid(cellValue)) {
+              const currentMaxValue = groupRow.group.totals[key];
+              if (currentMaxValue) {
                 let moments = [];
                 moments.push(cellValue);
-                moments.push(dom$2.ketchup.dates.format(currentTotalValue));
+                moments.push(dom$2.ketchup.dates.toDayjs(currentMaxValue));
                 groupRow.group.totals[key] =
-                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments));
+                  dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments), KupDatesFormats.ISO_DATE);
               }
               else {
-                groupRow.group.totals[key] = cellValue;
+                groupRow.group.totals[key] =
+                  dom$2.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
               }
               // updating parents
               let parent = groupRow.group.parent;
               while (parent != null) {
-                const currentParentMin = parent.group.totals[key];
-                if (currentParentMin) {
+                const currentParentMax = parent.group.totals[key];
+                if (currentParentMax) {
                   let moments = [];
                   moments.push(cellValue);
-                  moments.push(dom$2.ketchup.dates.format(currentParentMin));
+                  moments.push(dom$2.ketchup.dates.toDayjs(currentParentMax));
                   parent.group.totals[key] =
-                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments));
+                    dom$2.ketchup.dates.format(dom$2.ketchup.dates.max(moments), KupDatesFormats.ISO_DATE);
                 }
                 else {
                   // first round
-                  parent.group.totals[key] = cellValue;
+                  parent.group.totals[key] =
+                    dom$2.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
                 }
                 parent = parent.group.parent;
               }
@@ -1161,9 +1162,7 @@ function adjustGroupAverageOrFormula(row, type, toAdjustKeys, totals) {
   // adjust average/formulas
   toAdjustKeys.forEach((key) => {
     if (type == TotalMode.AVERAGE) {
-      row.group.totals[key] =
-        dom$2.ketchup.math.numberify(row.group.totals[key]) /
-          numberOfLeaf;
+      row.group.totals[key] = row.group.totals[key] / numberOfLeaf;
     }
     if (type == TotalMode.MATH) {
       let formula = totals[key].substring(TotalMode.MATH.length);

package/dist/esm/{f-text-field-aa4497a8.js → f-text-field-4d91ccfc.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-d413187a.js';
-import { K as KupThemeIconValues } from './kup-manager-a4153fb2.js';
+import { h, a as getAssetPath } from './index-c161a33e.js';
+import { K as KupThemeIconValues } from './kup-manager-94b3d177.js';
 
 const dom = document.documentElement;
 /*-------------------------------------------------*/
@@ -55,7 +55,8 @@ function setContent(props) {
   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) {
+  if (props.inputType === 'number' &&
+    ((props.decimals && props.decimals > 0) || props.group)) {
     inputType = 'text';
     persManageForNumberFormat = true;
   }
@@ -99,7 +100,40 @@ function setContent(props) {
             group: props.group,
             integer: props.integers,
           };
-          e.target.value = formatValue(e.target.value, options, true);
+          if (props.min !== undefined &&
+            props.min !== null &&
+            props.min >
+              parseFloat(e.target.value)) {
+            e.target.value =
+              formatValue(props.min.toString(), options, true);
+          }
+          else if (props.max !== undefined &&
+            props.max !== null &&
+            props.max <
+              parseFloat(e.target.value)) {
+            e.target.value =
+              formatValue(props.max.toString(), options, true);
+          }
+          else {
+            e.target.value =
+              formatValue(e.target.value, options, true);
+          }
+        }
+        else {
+          if (props.min !== undefined &&
+            props.min !== null &&
+            props.min >
+              parseFloat(e.target.value)) {
+            e.target.value =
+              props.min.toString();
+          }
+          else if (props.max !== undefined &&
+            props.max !== null &&
+            props.max <
+              parseFloat(e.target.value)) {
+            e.target.value =
+              props.max.toString();
+          }
         }
         if (props.onChange) {
           props.onChange(e);

package/dist/esm/{f-text-field-mdc-32a1ffd9.js → f-text-field-mdc-1143cf21.js}

@@ -1,4 +1,4 @@
-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-cc25b031.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-879e99bf.js';
 
 /**
  * @license

package/dist/esm/{index-d413187a.js → index-c161a33e.js}

@@ -111,10 +111,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
-        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
+        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -381,6 +381,21 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  *
  * Modified for Stencil's compiler and vdom
  */
+/**
+ * When running a VDom render set properties present on a VDom node onto the
+ * corresponding HTML element.
+ *
+ * Note that this function has special functionality for the `class`,
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
+ * `onClick`, etc). All others are just passed through as-is.
+ *
+ * @param elm the HTMLElement onto which attributes should be set
+ * @param memberName the name of the attribute to set
+ * @param oldValue the old value for the attribute
+ * @param newValue the new value for the attribute
+ * @param isSvg whether we're in an svg context or not
+ * @param flags bitflags for Vdom variables
+ */
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
@@ -982,17 +997,44 @@ const nullifyVNodeRefs = (vNode) => {
  * @param hostRef data needed to root and render the virtual DOM tree, such as
  * the DOM node into which it should be rendered.
  * @param renderFnResults the virtual DOM nodes to be rendered
+ * @param isInitialLoad whether or not this is the first call after page load
  */
-const renderVdom = (hostRef, renderFnResults) => {
+const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    // if `renderFnResults` is a Host node then we can use it directly. If not,
+    // we need to call `h` again to wrap the children of our component in a
+    // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
+    // implicitly that the top-level vdom node is 1) an only child and 2)
+    // contains attrs that need to be set on the host element.
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
     if (cmpMeta.$attrsToReflect$) {
         rootVnode.$attrs$ = rootVnode.$attrs$ || {};
         cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
     }
+    // On the first render and *only* on the first render we want to check for
+    // any attributes set on the host element which are also set on the vdom
+    // node. If we find them, we override the value on the VDom node attrs with
+    // the value from the host element, which allows developers building apps
+    // with Stencil components to override e.g. the `role` attribute on a
+    // component even if it's already set on the `Host`.
+    if (isInitialLoad && rootVnode.$attrs$) {
+        for (const key of Object.keys(rootVnode.$attrs$)) {
+            // We have a special implementation in `setAccessor` for `style` and
+            // `class` which reconciles values coming from the VDom with values
+            // already present on the DOM element, so we don't want to override those
+            // attributes on the VDom tree with values from the host element if they
+            // are present.
+            //
+            // Likewise, `ref` and `key` are special internal values for the Stencil
+            // runtime and we don't want to override those either.
+            if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
+                rootVnode.$attrs$[key] = hostElm[key];
+            }
+        }
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -1111,6 +1153,16 @@ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.th
  */
 const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
     (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
+/**
+ * Update a component given reference to its host elements and so on.
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param isInitialLoad whether or not this function is being called as part of
+ * the first render cycle
+ */
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
     var _a;
     const elm = hostRef.$hostElement$;
@@ -1122,7 +1174,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     }
     const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     {
-        callRender(hostRef, instance);
+        callRender(hostRef, instance, elm, isInitialLoad);
     }
     if (rc) {
         // ok, so turns out there are some child host elements
@@ -1146,7 +1198,19 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         }
     }
 };
-const callRender = (hostRef, instance, elm) => {
+/**
+ * Handle making the call to the VDom renderer with the proper context given
+ * various build variables
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param elm the Host element for the component
+ * @param isInitialLoad whether or not this function is being called as part of
+ * @returns an empty promise
+ */
+const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
         instance = instance.render() ;
         {
@@ -1161,7 +1225,7 @@ const callRender = (hostRef, instance, elm) => {
                 // or we need to update the css class/attrs on the host element
                 // DOM WRITE!
                 {
-                    renderVdom(hostRef, instance);
+                    renderVdom(hostRef, instance, isInitialLoad);
                 }
             }
         }
@@ -1309,6 +1373,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    var _a;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
@@ -1346,7 +1411,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -1369,12 +1434,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -1394,21 +1459,49 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            const entry = cmpMeta.$watchers$[attrName];
+                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
+                                if (instance[callbackName] != null) {
+                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
-                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
-                }
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...members
+                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
+                    .map(([propName, m]) => {
+                    const attrName = m[1] || propName;
+                    attrNameToPropName.set(attrName, propName);
+                    if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
+                        cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                    }
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
@@ -1491,6 +1584,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1534,22 +1629,34 @@ 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
+            if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
+            else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+                hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+            }
         }
         endConnected();
     }
 };
-const disconnectedCallback = (elm) => {
+const disconnectInstance = (instance) => {
+    {
+        safeCall(instance, 'disconnectedCallback');
+    }
+};
+const disconnectedCallback = async (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
-        const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
                 hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
-        {
-            safeCall(instance, 'disconnectedCallback');
+        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+            disconnectInstance(hostRef.$lazyInstance$);
+        }
+        else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+            hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
         }
     }
 };
@@ -1569,6 +1676,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
+            var _a;
             const cmpMeta = {
                 $flags$: compactMeta[0],
                 $tagName$: compactMeta[1],
@@ -1585,7 +1693,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$attrsToReflect$ = [];
             }
             {
-                cmpMeta.$watchers$ = {};
+                cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {