@saasquatch/mint-components 1.13.5 → 1.14.0-0

package/dist/cjs/sqm-widget-verification-controller.cjs.entry.js

@@ -37,18 +37,26 @@ function useTemplateChildren({ parent, callback }) {
 const WidgetVerificationController = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * @componentState { "title": "Not Verified", "slot": "not-verified", "props": { "isAuth": false } }
+     * @componentState { "title": "Verified", "slot": "verified", "props": { "isAuth": true } }
+     */
+    this.stateController = "{}";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
+    var _a;
     const [context, setContext] = index_module.In({
       namespace: keys.VERIFICATION_PARENT_NAMESPACE,
       initialValue: false,
     });
+    const props = JSON.parse(this.stateController);
+    const demoIsAuth = index_module.isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
     const [container, setContainer] = stencilHooks_module.useState(undefined);
     const [slot, setSlot] = stencilHooks_module.useState(undefined);
     const updateTemplates = index_module.useCallback(() => {
-      const isAuth = context;
+      const isAuth = demoIsAuth || context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -96,7 +104,7 @@ const WidgetVerificationController = class {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, context]);
+    }, [container, slot, context, demoIsAuth]);
     stencilHooks_module.useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -105,7 +113,7 @@ const WidgetVerificationController = class {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context]);
+    }, [slot, container, context, demoIsAuth]);
     return (index.h(index.Host, null, index.h("div", { ref: setSlot, style: { display: "contents" } }, index.h("slot", { name: "not-verified" }), index.h("slot", { name: "verified" })), index.h("div", { ref: setContainer }, index.h("slot", { name: "shown" }))));
   }
 };

package/dist/cjs/sqm-widget-verification.cjs.entry.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 const index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
+const parseStates = require('./parseStates-d1effc19.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 const keys = require('./keys-cff24974.js');
 
@@ -163,6 +165,11 @@ const WidgetVerification = class {
      * @uiGroup Code Verification Step
      */
     this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /**
+     * @componentState { "title": "Email Step", "props": { "showCode": false } }
+     * @componentState { "title": "Code Step", "props": { "showCode": true } }
+     */
+    this.stateController = "{}";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -171,20 +178,20 @@ const WidgetVerification = class {
     return extractProps.extractProps(props, prefix);
   }
   render() {
-    const { showCode, onVerification, loading } = index_module.isDemo()
-      ? useDemoWidgetVerificationInternal()
+    const props = index_module.isDemo()
+      ? useDemoWidgetVerificationInternal(this)
       : useWidgetVerification();
-    if (loading)
+    if (props.loading)
       return index.h("sl-spinner", null);
     const generalText = this.getStepTextProps("general_");
     return (index.h("div", null, index.h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader), index.h("p", { style: {
         color: "var(--sl-color-neutral-500)",
         fontSize: "var(--sl-font-size-medium)",
         margin: "0",
-      } }, generalText.verifyEmailDescription), showCode ? (index.h("sqm-code-verification", Object.assign({ onVerification: onVerification }, this.getStepTextProps("codeStep_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"))))));
+      } }, generalText.verifyEmailDescription), props.showCode ? (index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps.extractProps(props, "sqm-code-verification_")))) : (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps.extractProps(props, "sqm-email-verification_"))))));
   }
 };
-function useDemoWidgetVerificationInternal() {
+function useDemoWidgetVerificationInternal(props) {
   const [showCode, setShowCode] = index_module.In({
     namespace: keys.SHOW_CODE_NAMESPACE,
     initialValue: false,
@@ -194,10 +201,14 @@ function useDemoWidgetVerificationInternal() {
     initialValue: undefined,
   });
   const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  const states = parseStates.parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
   const onVerification = () => {
     setContext(true);
   };
-  return { showCode, onVerification, loading: false };
+  return cjs.cjs({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_widget_verification = WidgetVerification;

package/dist/cjs/utils-8257e7ab.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const index = require('./index-a29c60ef.js');
+const global = require('./global-e31dc4f5.js');
+const JSS = require('./JSS-8503a151.js');
+
+const style = {
+  Container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+  },
+  TitleSkeleton: {
+    width: "45%",
+    height: "40px !important",
+  },
+  StepSkeleton: {
+    width: "15%",
+  },
+  HeaderSkeleton: {
+    width: "25%",
+    height: "30px !important",
+  },
+  InputSkeleton: {
+    width: "75%",
+  },
+  ButtonSkeleton: {
+    width: "80px",
+    height: "30px !important",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const LoadingView = () => {
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
+    index.h("div", { class: sheet.classes.HeaderContainer },
+      index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      index.h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
+};
+
+function validTaxDocument(requiredType) {
+  const validTypes = ["W9", "W8BENE", "W8BEN"];
+  if (validTypes.includes(requiredType))
+    return true;
+  return false;
+}
+const objectIsFull = (obj) => {
+  return !Object.keys(obj).find((k) => obj[k] == undefined);
+};
+const taxTypeToName = (taxType) => {
+  switch (taxType) {
+    case "W9":
+      return "W-9";
+    case "W8BEN":
+    case "W8BENE":
+      return "W-8";
+    default:
+      return "";
+  }
+};
+function validateBillingField(regex, value) {
+  const trimmed = value.trim();
+  const idx = trimmed.search(regex);
+  return idx > -1;
+}
+const formatErrorMessage = (fieldName, errorMessage) => {
+  return global.intl.formatMessage({
+    id: fieldName,
+    defaultMessage: errorMessage,
+  }, {
+    fieldName,
+  });
+};
+function getCountryObj({ countryCode, locale, }) {
+  // @ts-ignore DisplayNames not in Intl type
+  const displayName = new Intl.DisplayNames([locale], {
+    type: "region",
+  }).of(countryCode);
+  return {
+    countryCode,
+    displayName,
+  };
+}
+
+exports.LoadingView = LoadingView;
+exports.formatErrorMessage = formatErrorMessage;
+exports.getCountryObj = getCountryObj;
+exports.objectIsFull = objectIsFull;
+exports.taxTypeToName = taxTypeToName;
+exports.validTaxDocument = validTaxDocument;
+exports.validateBillingField = validateBillingField;

package/dist/collection/components/sqm-pagination/sqm-pagination.js

@@ -10,7 +10,7 @@ import { usePagination } from "./usePagination";
 /**
  * @uiName Pagination
  * @exampleGroup Common Components
- * @example Promo Code Pagination - <sqm-pagination></sqm-pagination>
+ * @example Link Button - <sqm-pagination></sqm-pagination>
  */
 export class Pagination {
   constructor() {

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,106 +1,106 @@
-import { h, Component, Host, State } from "@stencil/core";
-import { useStencilbook } from "@saasquatch/stencilbook";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../sqm-share-button/ShareButton.stories";
-import * as EmptyState from "../sqm-empty/EmptyState.stories";
-import * as Pagination from "../sqm-pagination/Pagination.stories";
-import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import { useStencilbook } from "@saasquatch/stencilbook";
+import { Component, h, Host, State } from "@stencil/core";
+import * as NewPortal from "../../stories/NewPortal.stories";
+import * as PortalTemplates from "../../stories/PortalTemplates.stories";
+import * as PoweredByImg from "../../stories/PoweredByImg.stories";
+import * as Widget from "../../stories/Widget.stories";
+import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
+import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
 import * as BigStat from "../sqm-big-stat/BigStat.stories";
-import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
-import * as Router from "../sqm-router/Router.stories";
-import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
-import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
-import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
-import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
-import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
 import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
+import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
+import * as CloseButton from "../sqm-close-button/CloseButton.stories";
+import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
+import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
 import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
-import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as EmptyState from "../sqm-empty/EmptyState.stories";
 import * as FormMessage from "../sqm-form-message/FormMessage.stories";
-import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
-import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
-import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
-import * as NewPortal from "../../stories/NewPortal.stories";
-import * as Widget from "../../stories/Widget.stories";
+import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as Image from "../sqm-image/Image.stories";
+import * as InputField from "../sqm-input-field/InputField.stories";
+import * as UseInputField from "../sqm-input-field/UseInputField.stories";
+import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
+import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
+import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as LinkButton from "../sqm-link-button/LinkButton.stories";
+import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
+import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
 import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
 import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as Pagination from "../sqm-pagination/Pagination.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
 import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
 import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
-import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
 import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
 import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
-import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
-import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
-import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
-import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories";
-import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
+import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
+import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
+import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
+import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
 import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
 import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
 import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
-import * as UserName from "../sqm-user-name/UserName.stories";
-import * as PasswordField from "../sqm-password-field/PasswordField.stories";
-import * as TaskCard from "../sqm-task-card/TaskCard.stories";
-import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
-import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
-import * as Hero from "../sqm-hero/Hero.stories";
-import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
-import * as NameFields from "../sqm-name-fields/NameFields.stories";
-import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
-import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories";
-import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
-import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
-import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
-import * as InputField from "../sqm-input-field/InputField.stories";
-import * as UseInputField from "../sqm-input-field/UseInputField.stories";
+import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
-import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
-import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
-import * as BrandStories from "../sqm-brand/SqmBrand.stories";
-import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
-import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
-import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
 import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
-import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
-import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
-import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
-import * as Timeline from "../sqm-timeline/Timeline.stories";
-import * as Image from "../sqm-image/Image.stories";
-import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as Router from "../sqm-router/Router.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
-import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
-import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories";
-import * as EmailRegistration from "../views/EmailRegistration.stories";
-import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
-import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories";
-import * as LinkButton from "../sqm-link-button/LinkButton.stories";
-import * as CloseButton from "../sqm-close-button/CloseButton.stories";
-import * as TaxForm from "../tax-and-cash/TaxForm.stories";
-import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
-import * as RadioCard from "../sqm-radio-card/RadioCard.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as Tabs from "../sqm-tabs/Tabs.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as ProgressBar from "../sqm-task-card/progress-bar/ProgressBar.stories";
-import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories";
-import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
-import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories";
-import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories";
-import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories";
-import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
+import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
 import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories";
-import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories";
+import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories";
+import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories";
+import * as TaxForm from "../tax-and-cash/TaxForm.stories";
+import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories";
 import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories";
-import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories";
-import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories";
-import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
-import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
-import * as Themes from "./Themes";
+import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories";
+import * as EmailRegistration from "../views/EmailRegistration.stories";
+import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
-import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { ResizerStylesheet } from "./Resizer";
+import * as Themes from "./Themes";
 const stories = [
   InvoiceTable,
   InvoiceTableCells,

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js

@@ -2,10 +2,11 @@ import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../../utils/parseStates";
 import { getProps } from "../../../utils/utils";
+import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
 import { useWidgetCodeVerification } from "./useCodeVerification";
-import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 export class WidgetCodeVerification {
   constructor() {
     /**
@@ -45,6 +46,12 @@ export class WidgetCodeVerification {
      * @uiName Network error message
      */
     this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    /**
+     * @parentState {"parent": "sqm-widget-verification", "title": "Code Step" }
+     * @componentState { "title": "Verification Failed", "props": { "states": { "verifyFailed": true } } }
+     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -228,6 +235,33 @@ export class WidgetCodeVerification {
       "reflect": false,
       "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{\"parent\": \"sqm-widget-verification\", \"title\": \"Code Step\" }",
+            "name": "parentState"
+          }, {
+            "text": "{ \"title\": \"Verification Failed\", \"props\": { \"states\": { \"verifyFailed\": true } } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Loading\", \"props\": { \"states\": { \"loading\": true } } }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -283,10 +317,10 @@ function useDemoWidgetCodeVerification(props) {
   const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   return deepmerge({
     states: {
+      initialiseLoading: false,
       loading: false,
       email: "test@example.com",
       emailResent,
-      resendError: false,
       verifyFailed: false,
     },
     refs: {
@@ -297,5 +331,5 @@ function useDemoWidgetCodeVerification(props) {
       submitCode: async () => setVerifiedContext(true),
     },
     text: props.getTextProps(),
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  }, props.demoData || parseStates(props.stateController) || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification-controller.js

@@ -1,7 +1,7 @@
-import { useParentState } from "@saasquatch/component-boilerplate";
+import { isDemo, useParentState } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks";
-import { Component, h, Host } from "@stencil/core";
+import { Component, h, Host, Prop } from "@stencil/core";
 import debugFn from "debug";
 import { VERIFICATION_PARENT_NAMESPACE } from "./keys";
 const debug = debugFn("sq:widget-verification");
@@ -40,18 +40,26 @@ function useTemplateChildren({ parent, callback }) {
  */
 export class WidgetVerificationController {
   constructor() {
+    /**
+     * @componentState { "title": "Not Verified", "slot": "not-verified", "props": { "isAuth": false } }
+     * @componentState { "title": "Verified", "slot": "verified", "props": { "isAuth": true } }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
+    var _a;
     const [context, setContext] = useParentState({
       namespace: VERIFICATION_PARENT_NAMESPACE,
       initialValue: false,
     });
+    const props = JSON.parse(this.stateController);
+    const demoIsAuth = isDemo() && ((_a = props["sqm-widget-verification-controller"]) === null || _a === void 0 ? void 0 : _a.isAuth);
     const [container, setContainer] = useState(undefined);
     const [slot, setSlot] = useState(undefined);
     const updateTemplates = useCallback(() => {
-      const isAuth = context;
+      const isAuth = demoIsAuth || context;
       const templates = slot.querySelectorAll(`template`);
       const template = Array.from(templates).find((t) => t.slot === (isAuth ? "verified" : "not-verified"));
       if (template) {
@@ -99,7 +107,7 @@ export class WidgetVerificationController {
           target.style.height = "25px";
         });
       }
-    }, [container, slot, context]);
+    }, [container, slot, context, demoIsAuth]);
     useEffect(() => {
       if (!container || !slot) {
         debug("DOM not ready:");
@@ -108,7 +116,7 @@ export class WidgetVerificationController {
       // Run on first render
       updateTemplates();
       return useTemplateChildren({ parent: slot, callback: updateTemplates });
-    }, [slot, container, context]);
+    }, [slot, container, context, demoIsAuth]);
     return (h(Host, null,
       h("div", { ref: setSlot, style: { display: "contents" } },
         h("slot", { name: "not-verified" }),
@@ -117,4 +125,30 @@ export class WidgetVerificationController {
         h("slot", { name: "shown" }))));
   }
   static get is() { return "sqm-widget-verification-controller"; }
+  static get properties() { return {
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{ \"title\": \"Not Verified\", \"slot\": \"not-verified\", \"props\": { \"isAuth\": false } }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Verified\", \"slot\": \"verified\", \"props\": { \"isAuth\": true } }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    }
+  }; }
 }