@saasquatch/mint-components 1.6.6-6 → 1.6.6

package/dist/cjs/{sqm-portal-profile-view-b6403c2c.js → sqm-portal-profile-view-14d2f91d.js}

@@ -1,87 +1,87 @@
 'use strict';
 
 const index = require('./index-b0129cd6.js');
-const global = require('./global-9579749d.js');
-const JSS = require('./JSS-c73206b7.js');
-const sqmTextSpanView = require('./sqm-text-span-view-233a42ff.js');
+const global = require('./global-0b8cbb00.js');
+const JSS = require('./JSS-8503a151.js');
+const sqmTextSpanView = require('./sqm-text-span-view-c34577fa.js');
 
-function PortalProfileView(props) {
-  var _a, _b, _c, _d, _e;
-  const { states, callbacks } = props;
-  const { text, formState } = states;
-  const { errors, error } = formState;
-  const style = {
-    Container: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "var(--sl-spacing-xxx-large)",
-      padding: "var(--sl-spacing-xxx-large)",
-    },
-    FormStyle: {
-      width: "100%",
-      minWidth: "700px",
-      "& >*:not(:last-child)": {
-        "margin-bottom": "32px",
-      },
-      "@media screen and (max-width: 1100px)": {
-        minWidth: "100%",
-      },
-    },
-    Error: {
-      "&::part(erroralert-base)": {
-        "margin-bottom": "32px",
-      },
-    },
-    Success: {
-      "&::part(successalert-base)": {
-        "margin-bottom": "32px",
-      },
-    },
-    NameInputStyle: {
-      width: "50%",
-      "@media screen and (max-width: 860px)": {
-        width: "100%",
-        "margin-right": "0",
-      },
-    },
-    NameInputContainer: {
-      display: "flex",
-      gap: "32px",
-      width: "100%",
-      "@media screen and (max-width: 860px)": {
-        flexDirection: "column",
-      },
-    },
-  };
-  const sheet = JSS.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode) ? global.intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
-    type: "region",
-  })
-    : "";
-  return (index.h("div", { class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h1" }), text.editProfileHeader),
-    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.editProfileSubHeader),
-    index.h("form", { class: sheet.classes.FormStyle, onSubmit: callbacks.onSubmit },
-      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, exportparts: "success-icon" },
-        index.h("div", { part: "successalert-text" }, "Your profile has been successfully updated."))),
-      error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
-        index.h("div", { part: "erroralert-text" }, error))),
-      index.h("div", { class: sheet.classes.NameInputContainer },
-        index.h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_c = states.user) === null || _c === void 0 ? void 0 : _c.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, ((errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
-          ? { class: "ErrorStyles", helpText: "Cannot be empty" }
-          : []), { id: "firstName", name: "firstName", error: (errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
-            ? errors === null || errors === void 0 ? void 0 : errors.firstName.message : undefined })),
-        index.h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_d = states.user) === null || _d === void 0 ? void 0 : _d.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, ((errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
-          ? { class: "ErrorStyles", helpText: "Cannot be empty" }
-          : []), { error: (errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
-            ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
-      index.h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label", disabled: true }),
-      states.showCountry && (index.h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label", disabled: true })),
-      index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
-          callbacks.onSubmit(e);
-        }, submit: true }, text.submitChangeButtonText))));
+function PortalProfileView(props) {
+  var _a, _b, _c, _d, _e;
+  const { states, callbacks } = props;
+  const { text, formState } = states;
+  const { errors, error } = formState;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-xxx-large)",
+      padding: "var(--sl-spacing-xxx-large)",
+    },
+    FormStyle: {
+      width: "100%",
+      minWidth: "700px",
+      "& >*:not(:last-child)": {
+        "margin-bottom": "32px",
+      },
+      "@media screen and (max-width: 1100px)": {
+        minWidth: "100%",
+      },
+    },
+    Error: {
+      "&::part(erroralert-base)": {
+        "margin-bottom": "32px",
+      },
+    },
+    Success: {
+      "&::part(successalert-base)": {
+        "margin-bottom": "32px",
+      },
+    },
+    NameInputStyle: {
+      width: "50%",
+      "@media screen and (max-width: 860px)": {
+        width: "100%",
+        "margin-right": "0",
+      },
+    },
+    NameInputContainer: {
+      display: "flex",
+      gap: "32px",
+      width: "100%",
+      "@media screen and (max-width: 860px)": {
+        flexDirection: "column",
+      },
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const country = ((_a = states.user) === null || _a === void 0 ? void 0 : _a.countryCode) ? global.intl.formatDisplayName((_b = states.user) === null || _b === void 0 ? void 0 : _b.countryCode, {
+    type: "region",
+  })
+    : "";
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h1" }), text.editProfileHeader),
+    index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.editProfileSubHeader),
+    index.h("form", { class: sheet.classes.FormStyle, onSubmit: callbacks.onSubmit },
+      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, exportparts: "success-icon" },
+        index.h("div", { part: "successalert-text" }, "Your profile has been successfully updated."))),
+      error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
+        index.h("div", { part: "erroralert-text" }, error))),
+      index.h("div", { class: sheet.classes.NameInputContainer },
+        index.h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_c = states.user) === null || _c === void 0 ? void 0 : _c.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, ((errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
+          ? { class: "ErrorStyles", helpText: "Cannot be empty" }
+          : []), { id: "firstName", name: "firstName", error: (errors === null || errors === void 0 ? void 0 : errors.firstName) && (errors === null || errors === void 0 ? void 0 : errors.firstName.status) !== "valid"
+            ? errors === null || errors === void 0 ? void 0 : errors.firstName.message : undefined })),
+        index.h("sl-input", Object.assign({ class: sheet.classes.NameInputStyle, exportparts: "label: input-label", value: (_d = states.user) === null || _d === void 0 ? void 0 : _d.lastName, onInput: callbacks.onChange, label: text.lastnametext, disabled: states.loading, id: "lastName", name: "lastName" }, ((errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
+          ? { class: "ErrorStyles", helpText: "Cannot be empty" }
+          : []), { error: (errors === null || errors === void 0 ? void 0 : errors.lastName) && (errors === null || errors === void 0 ? void 0 : errors.lastName.status) !== "valid"
+            ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
+      index.h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label", disabled: true }),
+      states.showCountry && (index.h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label", disabled: true })),
+      index.h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+          callbacks.onSubmit(e);
+        }, submit: true }, text.submitChangeButtonText))));
 }
 
 exports.PortalProfileView = PortalProfileView;

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-6fe43579.js');
-require('./global-9579749d.js');
-require('./use-callback-5d15897d.js');
-const index_module = require('./index.module-0b9b8891.js');
+const stencilHooks_module = require('./stencil-hooks.module-e4bf7f2d.js');
+require('./global-0b8cbb00.js');
+require('./use-callback-86e9ac75.js');
+const index_module = require('./index.module-c6626247.js');
 const cjs = require('./cjs-1066ec21.js');
-require('./JSS-c73206b7.js');
-const utils = require('./utils-8ef4fe4a.js');
-require('./sqm-text-span-view-233a42ff.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-b6403c2c.js');
+require('./JSS-8503a151.js');
+const utils = require('./utils-6847bc06.js');
+require('./sqm-text-span-view-c34577fa.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-14d2f91d.js');
 
 const GET_USER = index_module.dist.gql `
   query {
@@ -26,7 +26,7 @@ const GET_USER = index_module.dist.gql `
       }
     }
   }
-`;
+`;
 const UPSERT_USER = index_module.dist.gql `
   mutation (
     $id: String!
@@ -46,203 +46,203 @@ const UPSERT_USER = index_module.dist.gql `
       lastName
     }
   }
-`;
-// view doesn't tolerate undefined, even when we're loading
-const defaultFormState = {
-  country: "",
-  email: "",
-  firstName: "",
-  lastName: "",
-  errors: {},
-  error: "",
-};
-function usePortalProfile(props) {
-  const userIdent = index_module.N();
-  const [success, setSuccess] = stencilHooks_module.useState(false);
-  const [userData, setUserData] = stencilHooks_module.useState(undefined);
-  const [formState, setFormState] = stencilHooks_module.useState(defaultFormState);
-  const userDataResponse = index_module.dn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
-  const [upsertUser, upsertUserResponse] = index_module.Pe(UPSERT_USER);
-  stencilHooks_module.useEffect(() => {
-    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
-      return;
-    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
-      setFormState((state) => {
-        var _a, _b, _c;
-        return ({
-          ...state,
-          error: (_c = (_b = (_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0].message,
-        });
-      });
-    }
-    else {
-      setUserData((state) => {
-        var _a;
-        return ({
-          ...state,
-          ...(_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data) === null || _a === void 0 ? void 0 : _a.upsertUser,
-        });
-      });
-      if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data)
-        setSuccess(true);
-    }
-  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
-  stencilHooks_module.useEffect(() => {
-    var _a, _b;
-    setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
-    setFormState({
-      ...defaultFormState,
-      ...(_a = userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer,
-      ...(_b = upsertUserResponse.data) === null || _b === void 0 ? void 0 : _b.upsertUser,
-    });
-  }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
-  stencilHooks_module.useEffect(() => {
-    var _a, _b;
-    if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
-      setFormState({
-        ...(_b = userDataResponse.data) === null || _b === void 0 ? void 0 : _b.viewer,
-        error: "Network request failed.",
-      });
-    }
-  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors]);
-  const onSubmit = () => {
-    setSuccess(false);
-    if (formState.firstName && formState.lastName) {
-      upsertUser({
-        id: userIdent === null || userIdent === void 0 ? void 0 : userIdent.id,
-        accountId: userIdent === null || userIdent === void 0 ? void 0 : userIdent.accountId,
-        firstName: formState.firstName,
-        lastName: formState.lastName,
-      });
-      setFormState((s) => ({ ...s, errors: {}, error: "" }));
-      return;
-    }
-    const errors = {};
-    if (!formState.firstName) {
-      errors["firstName"] = { message: "Field can't be empty" };
-    }
-    if (!formState.lastName) {
-      errors["lastName"] = { message: "Field can't be empty" };
-    }
-    if (errors !== {}) {
-      setFormState((e) => ({
-        ...e,
-        error: "Please correct the errors below to update your profile.",
-      }));
-    }
-    setFormState((e) => ({ ...e, errors }));
-  };
-  return {
-    states: {
-      success,
-      loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
-      submitDisabled: false,
-      showCountry: !props.hideCountry,
-      formState,
-      user: userData,
-      text: {
-        firstnametext: props.firstnametext,
-        lastnametext: props.lastnametext,
-        countrytext: props.countrytext,
-        emailtext: props.emailtext,
-        editProfileHeader: props.editProfileHeader,
-        editProfileSubHeader: props.editProfileSubHeader,
-        submitChangeButtonText: props.submitChangeButtonText,
-      },
-    },
-    callbacks: {
-      onSubmit,
-      onChange: (e) => {
-        const { name, value } = e.target;
-        setFormState((data) => ({ ...data, [name]: value }));
-      },
-    },
-  };
+`;
+// view doesn't tolerate undefined, even when we're loading
+const defaultFormState = {
+  country: "",
+  email: "",
+  firstName: "",
+  lastName: "",
+  errors: {},
+  error: "",
+};
+function usePortalProfile(props) {
+  const userIdent = index_module.N();
+  const [success, setSuccess] = stencilHooks_module.useState(false);
+  const [userData, setUserData] = stencilHooks_module.useState(undefined);
+  const [formState, setFormState] = stencilHooks_module.useState(defaultFormState);
+  const userDataResponse = index_module.dn(GET_USER, {}, !(userIdent === null || userIdent === void 0 ? void 0 : userIdent.jwt));
+  const [upsertUser, upsertUserResponse] = index_module.Pe(UPSERT_USER);
+  stencilHooks_module.useEffect(() => {
+    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading)
+      return;
+    if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) {
+      setFormState((state) => {
+        var _a, _b, _c;
+        return ({
+          ...state,
+          error: (_c = (_b = (_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0].message,
+        });
+      });
+    }
+    else {
+      setUserData((state) => {
+        var _a;
+        return ({
+          ...state,
+          ...(_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data) === null || _a === void 0 ? void 0 : _a.upsertUser,
+        });
+      });
+      if (upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.data)
+        setSuccess(true);
+    }
+  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.loading]);
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    setUserData((data) => { var _a; return ({ ...data, ...(_a = userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer }); });
+    setFormState({
+      ...defaultFormState,
+      ...(_a = userDataResponse.data) === null || _a === void 0 ? void 0 : _a.viewer,
+      ...(_b = upsertUserResponse.data) === null || _b === void 0 ? void 0 : _b.upsertUser,
+    });
+  }, [userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.data]);
+  stencilHooks_module.useEffect(() => {
+    var _a, _b;
+    if ((_a = upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors) === null || _a === void 0 ? void 0 : _a.message) {
+      setFormState({
+        ...(_b = userDataResponse.data) === null || _b === void 0 ? void 0 : _b.viewer,
+        error: "Network request failed.",
+      });
+    }
+  }, [upsertUserResponse === null || upsertUserResponse === void 0 ? void 0 : upsertUserResponse.errors]);
+  const onSubmit = () => {
+    setSuccess(false);
+    if (formState.firstName && formState.lastName) {
+      upsertUser({
+        id: userIdent === null || userIdent === void 0 ? void 0 : userIdent.id,
+        accountId: userIdent === null || userIdent === void 0 ? void 0 : userIdent.accountId,
+        firstName: formState.firstName,
+        lastName: formState.lastName,
+      });
+      setFormState((s) => ({ ...s, errors: {}, error: "" }));
+      return;
+    }
+    const errors = {};
+    if (!formState.firstName) {
+      errors["firstName"] = { message: "Field can't be empty" };
+    }
+    if (!formState.lastName) {
+      errors["lastName"] = { message: "Field can't be empty" };
+    }
+    if (errors !== {}) {
+      setFormState((e) => ({
+        ...e,
+        error: "Please correct the errors below to update your profile.",
+      }));
+    }
+    setFormState((e) => ({ ...e, errors }));
+  };
+  return {
+    states: {
+      success,
+      loading: (userDataResponse === null || userDataResponse === void 0 ? void 0 : userDataResponse.loading) || upsertUserResponse.loading,
+      submitDisabled: false,
+      showCountry: !props.hideCountry,
+      formState,
+      user: userData,
+      text: {
+        firstnametext: props.firstnametext,
+        lastnametext: props.lastnametext,
+        countrytext: props.countrytext,
+        emailtext: props.emailtext,
+        editProfileHeader: props.editProfileHeader,
+        editProfileSubHeader: props.editProfileSubHeader,
+        submitChangeButtonText: props.submitChangeButtonText,
+      },
+    },
+    callbacks: {
+      onSubmit,
+      onChange: (e) => {
+        const { name, value } = e.target;
+        setFormState((data) => ({ ...data, [name]: value }));
+      },
+    },
+  };
 }
 
-const PortalProfile = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName First Name Label
-     */
-    this.firstnametext = "First Name";
-    /**
-     * @uiName Last Name Field Label
-     */
-    this.lastnametext = "Last Name";
-    /**
-     * @uiName Email Field Label
-     */
-    this.emailtext = "Email";
-    /**
-     * @uiName Country Field Label
-     */
-    this.countrytext = "Country";
-    /**
-     * @uiName Edit Profile Header
-     */
-    this.editProfileHeader = "Edit your profile";
-    /**
-     * @uiName Edit Profile Sub Header
-     */
-    this.editProfileSubHeader = "Personal Information";
-    /**
-     * @uiName Submit Changes Button Text
-     */
-    this.submitChangeButtonText = "Submit Changes";
-    /**
-     * @uiName Hide Country Field
-     */
-    this.hideCountry = false;
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const props = index_module.isDemo()
-      ? usePortalProfileDemo(utils.getProps(this))
-      : usePortalProfile(utils.getProps(this));
-    return index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, props));
-  }
-};
-function usePortalProfileDemo(props) {
-  return cjs.cjs({
-    states: {
-      success: false,
-      loading: false,
-      submitDisabled: false,
-      showCountry: !props.hideCountry,
-      user: {
-        id: "01",
-        accountId: "111100000",
-        firstName: "Joe",
-        lastName: "Smith",
-        email: "jsmith@gmail.com",
-        countryCode: "CA",
-      },
-      text: {
-        firstnametext: props.firstnametext,
-        lastnametext: props.lastnametext,
-        emailtext: props.emailtext,
-        countrytext: props.countrytext,
-        editProfileHeader: props.editProfileHeader,
-        editProfileSubHeader: props.editProfileSubHeader,
-        submitChangeButtonText: props.submitChangeButtonText,
-      },
-      formState: {
-        country: "Canada",
-        firstName: "Joe",
-        lastName: "Smith",
-        errors: null,
-        error: "",
-      },
-    },
-    callbacks: {
-      onSubmit: (e) => console.log(e),
-      onChange: (e) => console.log(e),
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+const PortalProfile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName First Name Label
+     */
+    this.firstnametext = "First Name";
+    /**
+     * @uiName Last Name Field Label
+     */
+    this.lastnametext = "Last Name";
+    /**
+     * @uiName Email Field Label
+     */
+    this.emailtext = "Email";
+    /**
+     * @uiName Country Field Label
+     */
+    this.countrytext = "Country";
+    /**
+     * @uiName Edit Profile Header
+     */
+    this.editProfileHeader = "Edit your profile";
+    /**
+     * @uiName Edit Profile Sub Header
+     */
+    this.editProfileSubHeader = "Personal Information";
+    /**
+     * @uiName Submit Changes Button Text
+     */
+    this.submitChangeButtonText = "Submit Changes";
+    /**
+     * @uiName Hide Country Field
+     */
+    this.hideCountry = false;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = index_module.isDemo()
+      ? usePortalProfileDemo(utils.getProps(this))
+      : usePortalProfile(utils.getProps(this));
+    return index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, props));
+  }
+};
+function usePortalProfileDemo(props) {
+  return cjs.cjs({
+    states: {
+      success: false,
+      loading: false,
+      submitDisabled: false,
+      showCountry: !props.hideCountry,
+      user: {
+        id: "01",
+        accountId: "111100000",
+        firstName: "Joe",
+        lastName: "Smith",
+        email: "jsmith@gmail.com",
+        countryCode: "CA",
+      },
+      text: {
+        firstnametext: props.firstnametext,
+        lastnametext: props.lastnametext,
+        emailtext: props.emailtext,
+        countrytext: props.countrytext,
+        editProfileHeader: props.editProfileHeader,
+        editProfileSubHeader: props.editProfileSubHeader,
+        submitChangeButtonText: props.submitChangeButtonText,
+      },
+      formState: {
+        country: "Canada",
+        firstName: "Joe",
+        lastName: "Smith",
+        errors: null,
+        error: "",
+      },
+    },
+    callbacks: {
+      onSubmit: (e) => console.log(e),
+      onChange: (e) => console.log(e),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_portal_profile = PortalProfile;