@saasquatch/mint-components 1.6.6-6 → 1.6.6

package/dist/collection/components/sqm-portal-register/PortalRegister.stories.js

@@ -1,109 +1,109 @@
-import { h } from "@stencil/core";
-import { PortalRegisterView, } from "./sqm-portal-register-view";
-export default {
-  title: "Components/Portal Register",
-};
-const defaultProps = {
-  states: {
-    registrationFormState: {},
-    error: "",
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
-};
-const errorProps = {
-  states: {
-    error: "Something went wrong. Please try again.",
-    registrationFormState: {},
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
-  },
-};
-const loadingProps = {
-  states: {
-    registrationFormState: {},
-    error: "",
-    loading: true,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
-};
-const slottedProps = {
-  states: {
-    registrationFormState: {},
-    error: "",
-    loading: false,
-    confirmPassword: true,
-    hideInputs: false,
-    loginPath: "/login",
-  },
-  callbacks: {
-    submit: () => console.log("Submit!"),
-    inputFunction: () => { },
-  },
-  refs: {
-    formRef: {},
-  },
-  content: {
-    pageLabel: "Register",
-    confirmPasswordLabel: "Confirm Password",
-    formData: (h("div", null,
-      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label", label: "Slotted Input", required: true }),
-      h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),
-  },
-};
-export const Default = () => h(PortalRegisterView, Object.assign({}, defaultProps));
-export const RegisterWithError = () => h(PortalRegisterView, Object.assign({}, errorProps));
-export const RegisterLoading = () => h(PortalRegisterView, Object.assign({}, loadingProps));
-export const FieldsHidden = () => {
-  return (h("sqm-portal-register", { demoData: {
-      states: {
-        registrationFormState: {},
-        error: "",
-        loading: true,
-        confirmPassword: true,
-        hideInputs: true,
-        loginPath: "/login",
-      },
-    } }));
-};
-export const SlottedInputs = () => h(PortalRegisterView, Object.assign({}, slottedProps));
-export const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaultProps, { content: {
-    ...defaultProps.content,
-    terms: (h("p", null,
-      "By signing up you agree to the",
-      " ",
-      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
-  } })));
+import { h } from "@stencil/core";
+import { PortalRegisterView, } from "./sqm-portal-register-view";
+export default {
+  title: "Components/Portal Register",
+};
+const defaultProps = {
+  states: {
+    registrationFormState: {},
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+};
+const errorProps = {
+  states: {
+    error: "Something went wrong. Please try again.",
+    registrationFormState: {},
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+  },
+};
+const loadingProps = {
+  states: {
+    registrationFormState: {},
+    error: "",
+    loading: true,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+};
+const slottedProps = {
+  states: {
+    registrationFormState: {},
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+    formData: (h("div", null,
+      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label", label: "Slotted Input", required: true }),
+      h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),
+  },
+};
+export const Default = () => h(PortalRegisterView, Object.assign({}, defaultProps));
+export const RegisterWithError = () => h(PortalRegisterView, Object.assign({}, errorProps));
+export const RegisterLoading = () => h(PortalRegisterView, Object.assign({}, loadingProps));
+export const FieldsHidden = () => {
+  return (h("sqm-portal-register", { demoData: {
+      states: {
+        registrationFormState: {},
+        error: "",
+        loading: true,
+        confirmPassword: true,
+        hideInputs: true,
+        loginPath: "/login",
+      },
+    } }));
+};
+export const SlottedInputs = () => h(PortalRegisterView, Object.assign({}, slottedProps));
+export const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    terms: (h("p", null,
+      "By signing up you agree to the",
+      " ",
+      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
+  } })));

package/dist/collection/components/sqm-portal-register/sqm-portal-register-view.js

@@ -1,18 +1,18 @@
-import { h } from "@stencil/core";
-import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock, } from "../../global/mixins";
-import { createStyleSheet } from "../../styling/JSS";
-import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-const style = {
-  Wrapper: { ...AuthWrapper, "max-width": "600px" },
-  Column: AuthColumn,
-  HostBlock: HostBlock,
-  ":host": {
-    margin: "0 auto",
-    width: "100%",
-  },
-  ButtonsContainer: AuthButtonsContainer,
-  ErrorStyle: ErrorStyles,
-};
+import { h } from "@stencil/core";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock, } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
+import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
+const style = {
+  Wrapper: { ...AuthWrapper, "max-width": "600px" },
+  Column: AuthColumn,
+  HostBlock: HostBlock,
+  ":host": {
+    margin: "0 auto",
+    width: "100%",
+  },
+  ButtonsContainer: AuthButtonsContainer,
+  ErrorStyle: ErrorStyles,
+};
 const vanillaStyle = `
 sqm-portal-register {
   margin: 0 auto;
@@ -27,47 +27,47 @@ sqm-portal-register {
 :host([hidden]) {
   display: none;
 }
-`;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function PortalRegisterView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { states, refs, callbacks, content } = props;
-  if (states.error) {
-    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-  }
-  return (h("div", { class: sheet.classes.Wrapper },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h(TextSpanView, { type: "h3" }, content.pageLabel),
-    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
-      content.formData,
-      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
-          if (!value) {
-            return "Cannot be empty";
-          }
-          // this matches shoelace validation, but could be better
-          if (!value.includes("@")) {
-            return "Must be a valid email address";
-          }
-        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
-          "Cannot be empty",
-      }
-        : [])))),
-      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
-      content.passwordField,
-      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
-        class: sheet.classes.ErrorStyle,
-        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || "Cannot be empty",
-      }
-        : [])))),
-      content.terms,
-      h("div", { class: sheet.classes.ButtonsContainer },
-        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
-        content.secondaryButton))));
-}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PortalRegisterView(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { states, refs, callbacks, content } = props;
+  if (states.error) {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  }
+  return (h("div", { class: sheet.classes.Wrapper },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    h(TextSpanView, { type: "h3" }, content.pageLabel),
+    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
+        h("div", { part: "erroralert-text" }, props.states.error))),
+      content.formData,
+      !states.hideInputs && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
+          if (!value) {
+            return "Cannot be empty";
+          }
+          // this matches shoelace validation, but could be better
+          if (!value.includes("@")) {
+            return "Must be a valid email address";
+          }
+        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
+          "Cannot be empty",
+      }
+        : [])))),
+      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation })),
+      content.passwordField,
+      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading, required: true }, (((_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.validationErrors) === null || _f === void 0 ? void 0 : _f.confirmPassword) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.confirmPassword) || "Cannot be empty",
+      }
+        : [])))),
+      content.terms,
+      h("div", { class: sheet.classes.ButtonsContainer },
+        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
+        content.secondaryButton))));
+}