@saasquatch/mint-components 1.13.0-0 → 1.13.0-2

package/dist/collection/components/sqm-portal-login/PortalLogin.stories.js

@@ -11,6 +11,7 @@ const defaultProps = {
     registerPath: "/register",
   },
   callbacks: {
+    googleSubmit: async () => { },
     submit: async (e) => await e,
   },
   content: {
@@ -25,9 +26,12 @@ const errorProps = {
     registerPath: "/register",
   },
   callbacks: {
+    googleSubmit: async () => { },
     submit: async (e) => await e,
   },
-  content: { pageLabel: "Sign in to your account" },
+  content: {
+    pageLabel: "Sign in to your account",
+  },
 };
 const loadingProps = {
   states: {
@@ -37,6 +41,7 @@ const loadingProps = {
     registerPath: "/register",
   },
   callbacks: {
+    googleSubmit: async () => { },
     submit: async (e) => await e,
   },
   content: {
@@ -44,12 +49,23 @@ const loadingProps = {
   },
 };
 export const Default = () => (h("sqm-portal-login", { showGoogleLogin: false, demoData: { ...defaultProps } }));
-export const IsGoogle = () => (h("sqm-portal-login", { showGoogleLogin: true, demoData: {
-    ...defaultProps,
-    content: {
-      googleButton: h("sl-button", null, "Sign in with Google"),
-    },
-    states: { ...defaultProps.states },
-  } }));
+export const IsGoogle = () => (
+// <sqm-portal-login
+//   showGoogleLogin
+//   demoData={{
+//     ...defaultProps,
+//     content: {
+//       googleButton: <sl-button>Sign in with Google</sl-button>,
+//     },
+//     states: { ...defaultProps.states },
+//   }}
+// ></sqm-portal-login>
+h(PortalLoginView, Object.assign({}, defaultProps, { content: {
+    secondaryButton: (h("span", null,
+      "Don't have an account?",
+      " ",
+      h("sl-button", { style: { width: "50px" }, size: "large", type: "text" }, "Register"))),
+    googleButton: h("sl-button", null, "Sign in with Google"),
+  } })));
 export const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
 export const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -1,5 +1,5 @@
 import { isDemo, navigation } from "@saasquatch/component-boilerplate";
-import { useState, withHooks } from "@saasquatch/stencil-hooks";
+import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { PortalLoginView } from "./sqm-portal-login-view";
@@ -67,7 +67,7 @@ export class PortalLogin {
     /**
      * @undocumented
      */
-    this.showGoogleLogin = true;
+    this.showGoogleLogin = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -75,7 +75,6 @@ export class PortalLogin {
     const { states, callbacks } = isDemo()
       ? useLoginDemo(this)
       : usePortalLogin(this);
-    // AL: TODO styling cleanup
     const styles = {
       RegisterButton: {
         "&::part(label)": {
@@ -88,13 +87,13 @@ export class PortalLogin {
     const content = {
       forgotPasswordButton: (h("slot", { name: "forgotPassword" },
         h("a", { onClick: () => navigation.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
-      googleButton: this.showGoogleLogin ? (h("sqm-google-sign-in", { onInitComplete: (res) => console.log(res) })) : null,
+      googleButton: this.showGoogleLogin ? (h("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })) : null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),
         this.showGoogleLogin ? (h("span", null,
           this.registerCTA,
           " ",
-          h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath), className: sheet.classes.RegisterButton }, this.registerLabel))) : (h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel)))),
+          h("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath), className: sheet.classes.RegisterButton }, this.registerLabel))) : (h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel)))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -367,7 +366,7 @@ export class PortalLogin {
       },
       "attribute": "show-google-login",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "demoData": {
       "type": "unknown",
@@ -414,6 +413,9 @@ function useLoginDemo(props) {
       showLoginForm: "manual",
     },
     callbacks: {
+      googleSubmit: async () => {
+        console.log("google submit");
+      },
       submit: async (_event) => {
         console.log("submit");
       },
@@ -423,11 +425,3 @@ function useLoginDemo(props) {
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
-function useGoogleDemo() {
-  const [showLoginForm, setShowLoginForm] = useState({
-    mode: "manual",
-  });
-  return {
-    showLoginForm,
-  };
-}

package/dist/collection/components/sqm-portal-login/usePortalLogin.js

@@ -1,13 +1,30 @@
 import jsonpointer from "jsonpointer";
 import { useState } from "@saasquatch/universal-hooks";
-import { navigation, useAuthenticateWithEmailAndPasswordMutation, } from "@saasquatch/component-boilerplate";
+import { navigation, useAuthenticateWithGoogle, useAuthenticateWithEmailAndPasswordMutation, } from "@saasquatch/component-boilerplate";
 import { sanitizeUrlPath } from "../../utils/utils";
 export function usePortalLogin(props) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   const [request, { loading, errors, data }] = useAuthenticateWithEmailAndPasswordMutation();
+  const [loginWithGoogle, { loading: gLoading, errors: gErrors }] = useAuthenticateWithGoogle();
   const [error, setError] = useState("");
   const urlParams = new URLSearchParams(navigation.location.search);
   const nextPageOverride = urlParams.get("nextPage");
+  const googleSubmit = async (e) => {
+    var _a, _b, _c;
+    if (!((_a = e.detail) === null || _a === void 0 ? void 0 : _a.credential))
+      return;
+    const result = await loginWithGoogle({ idToken: e.detail.credential });
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_b = result === null || result === void 0 ? void 0 : result["response"]) === null || _b === void 0 ? void 0 : _b["error"]))
+        setError(props.networkErrorMessage);
+      return;
+    }
+    if ((_c = result.authenticateManagedIdentityWithGoogle) === null || _c === void 0 ? void 0 : _c.token) {
+      urlParams.delete("nextPage");
+      const url = sanitizeUrlPath(nextPageOverride || props.nextPage);
+      navigation.push(url.href);
+    }
+  };
   const submit = async (event) => {
     var _a, _b;
     setError("");
@@ -30,14 +47,17 @@ export function usePortalLogin(props) {
   };
   const errorMessage = ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
     error;
+  const googleErrorMessage = ((_l = (_k = (_j = (_h = gErrors === null || gErrors === void 0 ? void 0 : gErrors.response) === null || _h === void 0 ? void 0 : _h.errors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.extensions) === null || _l === void 0 ? void 0 : _l.message) || ((_p = (_o = (_m = gErrors === null || gErrors === void 0 ? void 0 : gErrors.response) === null || _m === void 0 ? void 0 : _m.errors) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.message) ||
+    error;
   return {
     states: {
-      loading,
-      error: errorMessage,
+      loading: loading || gLoading,
+      error: errorMessage || googleErrorMessage,
       registerPath: props.registerPath,
       forgotPasswordPath: props.forgotPasswordPath,
     },
     callbacks: {
+      googleSubmit,
       submit,
     },
   };

package/dist/collection/components/sqm-portal-registration-form/usePortalRegistrationForm.js

@@ -100,9 +100,11 @@ export function usePortalRegistrationForm(props) {
     delete formData.password;
     delete formData.confirmPassword;
     const redirectPath = props.redirectPath;
+    const _googleOAuthIdToken = registrationFormState._googleOAuthIdToken;
     const variables = {
       key: props.formKey,
       formData: {
+        ...(_googleOAuthIdToken ? { _googleOAuthIdToken } : {}),
         locale,
         email,
         password,

package/dist/collection/components/sqm-portal-registration-form/useRegistrationFormState.js

@@ -1,8 +1,21 @@
 import { useHost } from "@saasquatch/component-boilerplate";
 import { useDomContextState } from "@saasquatch/dom-context-hooks";
+import { useDomContext } from "@saasquatch/stencil-hooks";
 export const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
+const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";
+export function useRegistrationForm() {
+  const parent = useDomContext(REGISTRATION_FORM_STATE_CONTEXT_INTERNAL);
+  const parentValue = useDomContext(REGISTRATION_FORM_STATE_CONTEXT);
+  if (!parent)
+    return [undefined, undefined];
+  return [parentValue, parent[1]];
+}
 export function useRegistrationFormState(formState) {
   const host = useHost();
   const [registrationFormState, setRegistrationFormState] = useDomContextState(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
+  useDomContextState(host, REGISTRATION_FORM_STATE_CONTEXT_INTERNAL, [
+    registrationFormState,
+    setRegistrationFormState,
+  ]);
   return { registrationFormState, setRegistrationFormState };
 }

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -289,7 +289,6 @@ export const PayoutFailed = () => {
       },
     ], statusText: statusText, statusLongText: statusLongText, fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}", deniedHelpText: "Contact support if you think this is a mistake." }));
 };
-// AL: TODO payout cancelled
 export const PayoutCancelled = () => {
   return (h("sqm-referral-table-rewards-cell", { rewards: [
       {

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -224,9 +224,7 @@ export const SourceCellDeletedUser = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));
 };
 export const SourceCellDeletedReferral = () => {
-  return (
-  // AL: TODO
-  h("sqm-rewards-table-source-cell", { 
+  return (h("sqm-rewards-table-source-cell", { 
     //@ts-ignore
     reward: { ...rewardsData, ...deletedReferral(null) }, referralText: "Referral to", deletedReferralText: "Deleted Referral" }));
 };

package/dist/esm/{GenericTableView-6aa9fac9.js → GenericTableView-7b9087af.js}

@@ -1,4 +1,4 @@
-import { h } from './index-60f16d0a.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as gap } from './mixins-83f90fa1.js';
 

package/dist/esm/{ShadowViewAddon-af23bc54.js → ShadowViewAddon-eba44767.js}

@@ -1,18 +1,18 @@
-import { h, c as Host, d as getAssetPath, g as getElement } from './index-60f16d0a.js';
-import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-e20edc0b.js';
-import { i as intl } from './global-3611a2b7.js';
-import { d as dist, z as z$1, K, D as Dn, E as En, x as xe, n as ne, g as getEnvironmentSDK, Q } from './index.module-f3d96fbb.js';
+import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
+import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
+import { i as intl } from './global-bedc4329.js';
+import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-a2989d3c.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-61eebf5d.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, C as CopyTextView } from './copy-text-view-b060162f.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { u as useChildElements } from './useChildElements-d1d3fedd.js';
-import { l as luxon } from './luxon-9b1f9912.js';
-import { T as TextSpanView } from './sqm-text-span-view-d1b54710.js';
+import { u as useChildElements } from './useChildElements-38c11321.js';
+import { l as luxon } from './luxon-8d51c92b.js';
+import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-33996ce7.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-c3be4b88.js';
+import { a as isValidColor, b as isMobile } from './utilities-863d06d1.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-1683ae32.js';
 
 const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
@@ -373,13 +373,13 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
 `;
 function useShareLink(props) {
   var _a, _b;
-  const { programId = z$1() } = props;
-  const user = K();
-  const engagementMedium = ne();
-  const contextData = Dn(REFERRAL_CODES_NAMESPACE);
-  const { data } = En(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
-  const [sendLoadEvent] = xe(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = xe(SET_CODE_COPIED);
+  const { programId = H() } = props;
+  const user = J();
+  const engagementMedium = B();
+  const contextData = Fn(REFERRAL_CODES_NAMESPACE);
+  const { data } = wn(MessageLinkQuery, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
+  const [setCopied, copiedRes] = $e(SET_CODE_COPIED);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -464,19 +464,19 @@ function GenericShare(messageLink, errorText) {
 function useShareButton(props) {
   var _a, _b;
   const { sharetitle, sharetext, medium } = props;
-  const programId = props.programId ? props.programId : z$1();
-  const user = K();
-  const engagementMedium = ne();
+  const programId = props.programId ? props.programId : H();
+  const user = J();
+  const engagementMedium = B();
   const variables = {
     engagementMedium,
     programId: programId,
     shareMedium: medium.toUpperCase(),
   };
-  const contextData = Dn(REFERRAL_CODES_NAMESPACE);
+  const contextData = Fn(REFERRAL_CODES_NAMESPACE);
   const overrideData = contextData === null || contextData === void 0 ? void 0 : contextData[medium];
   // only queries if a programId is available
-  const res = En(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
-  const [setCopied, copiedRes] = xe(SET_CODE_COPIED);
+  const res = wn(MessageLinkQuery$1, variables, !(user === null || user === void 0 ? void 0 : user.jwt) || !programId || overrideData !== undefined);
+  const [setCopied, copiedRes] = $e(SET_CODE_COPIED);
   const directLink = (overrideData === null || overrideData === void 0 ? void 0 : overrideData.shareLink) || ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.shareLink);
   const environment = getEnvironmentSDK();
   const hide = (medium.toLocaleUpperCase() === "SMS" &&
@@ -510,7 +510,7 @@ function useShareButton(props) {
 const debug = browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = En(query, variables);
+  const res = wn(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -921,7 +921,7 @@ const rewardsRedeemedWeekQuery = (programId, locale, type, unit, global = "") =>
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = En(query, {
+      const result = wn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -980,7 +980,7 @@ const rewardsRedeemedMonthQuery = (programId, locale, type, unit, global = "") =
           locale: $locale
           formatType: UNIT_FORMATTED
         )}`;
-      const result = En(query, {
+      const result = wn(query, {
         value: redeemedTotal,
         unit,
         locale,
@@ -1376,11 +1376,11 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment, programId = z$1(), } = props;
+  const { statType, flexReverse, alignment, programId = H(), } = props;
   // triggers a re-render if the label is manually changed
   useChildElements();
-  const locale = Q();
-  const userIdent = K();
+  const locale = L();
+  const userIdent = J();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {

package/dist/esm/{copy-text-view-61eebf5d.js → copy-text-view-b060162f.js}

@@ -1,6 +1,6 @@
-import { h } from './index-60f16d0a.js';
-import { f as useEffect } from './stencil-hooks.module-e20edc0b.js';
-import { d as dist, K, z, Y as Ye, O as On, F as Fn, n as ne } from './index.module-f3d96fbb.js';
+import { h } from './index-91e7729f.js';
+import { f as useEffect } from './stencil-hooks.module-4bc38af4.js';
+import { d as dist, J, H, Q as Qe, R as Rn, I as In, B } from './index.module-a2989d3c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { H as HostBlock } from './mixins-83f90fa1.js';
 
@@ -60,11 +60,11 @@ const SET_CODE_COPIED = dist.gql `
   }
 `;
 function useReferralCodes(props) {
-  const user = K();
-  const engagementMedium = ne();
-  const programId = props.programId || z();
-  const { refresh } = Ye();
-  const { envelope: referralData, states, callbacks, } = On(GET_REFERRAL_CODES, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodeList; }, {
+  const user = J();
+  const engagementMedium = B();
+  const programId = props.programId || H();
+  const { refresh } = Qe();
+  const { envelope: referralData, states, callbacks, } = Rn(GET_REFERRAL_CODES, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referralCodeList; }, {
     limit: 1,
     offset: 0,
   }, {
@@ -76,11 +76,11 @@ function useReferralCodes(props) {
       dateUsed_exists: false,
     },
   }, !(user === null || user === void 0 ? void 0 : user.jwt));
-  const [paginationContext, setPaginationContext] = Fn({
+  const [paginationContext, setPaginationContext] = In({
     namespace: REFERRAL_CODES_PAGINATION_CONTEXT,
     initialValue: { states, callbacks },
   });
-  const [referralCodesContext, setReferralCodesContext] = Fn({
+  const [referralCodesContext, setReferralCodesContext] = In({
     namespace: REFERRAL_CODES_NAMESPACE,
     initialValue: {
       refresh,

package/dist/esm/{email-registration-view-6870d230.js → email-registration-view-a7818cf2.js}

@@ -1,4 +1,4 @@
-import { h } from './index-60f16d0a.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, g as gap, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
 

package/dist/esm/{global-3611a2b7.js → global-bedc4329.js}

@@ -1,5 +1,5 @@
-import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-e20edc0b.js';
-import { s as src, m as memoize, J } from './index.module-f3d96fbb.js';
+import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './stencil-hooks.module-4bc38af4.js';
+import { s as src, m as memoize, U } from './index.module-a2989d3c.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
@@ -26635,7 +26635,7 @@ sl-input::part(label){
 
 `;
 
-J(l$1);
+U(l$1);
 const debug = browser("sq:global");
 const cache = createIntlCache();
 const intl = createIntl({

package/dist/esm/{index-60f16d0a.js → index-91e7729f.js}

@@ -1323,6 +1323,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if ( Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1351,6 +1352,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1399,6 +1405,10 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
         endConnected();
     }
 };