import { h } from './index-38ad4957.js';
import { j as jn } from './index.module-b23fdad8.js';
import { c as createStyleSheet } from './JSS-67b5cff8.js';
import { A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, H as HostBlock, E as ErrorStyles } from './mixins-f750863a.js';
import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';

const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
function PortalForgotPasswordView(props) {
  const { states, callbacks, content } = props;
  const style = {
    FormWrapper: {
      ...AuthWrapper,
      background: content.backgroundColor || "var(--sqm-portal-background)",
      borderRadius: content.borderRadius || "var(--sqm-border-radius-normal)",
      border: content.border ||
        "var(--sqm-border-thickness) solid var(--sqm-border-color)",
    },
    Column: { ...AuthColumn },
    ButtonsContainer: AuthButtonsContainer,
    SecondaryButton: {
      margin: "auto",
      display: "block",
      cursor: "pointer",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h(TextSpanView, { type: "h3" }, content.messageSlot),
    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
      props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, props.states.error))),
      props.states.success && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
        h("div", { part: "successalert-text" }, content.successAlertText))),
      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
      h("div", { class: sheet.classes.ButtonsContainer },
        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
        h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => jn.push(states.loginPath) }, content.loginText)))));
}

const style = {
  Wrapper: AuthWrapper,
  Column: AuthColumn,
  ForgotButtonContainer: {
    display: "inline",
    cursor: "pointer",
    "font-size": "13px",
    "font-weight": "600",
    color: "var(--sqm-text-subdued)",
    margin: "0",
  },
  ButtonsContainer: {
    ...AuthButtonsContainer,
    gap: "var(--sl-spacing-medium)",
    "& > *": {
      margin: "0 !important",
    },
  },
};
const vanillaStyle$1 = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
function PortalLoginView(props) {
  const { states, callbacks, content } = props;
  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle$1,
      styleString),
    h(TextSpanView, { type: "h3" }, content.pageLabel),
    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
      props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, props.states.error))),
      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
      h("div", null,
        h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: content.passwordLabel || "Password", disabled: states.loading, required: true }),
        h("div", { class: sheet.classes.ForgotButtonContainer }, content.forgotPasswordButton)),
      h("div", { class: sheet.classes.ButtonsContainer },
        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Login"),
        content.googleButton && h("sl-menu-divider", null),
        content.googleButton,
        content.secondaryButton))));
}

const style$1 = {
  Wrapper: { ...AuthWrapper, "max-width": "600px" },
  Column: AuthColumn,
  HostBlock: HostBlock,
  ":host": {
    margin: "0 auto",
    width: "100%",
  },
  ButtonsContainer: AuthButtonsContainer,
  ErrorStyle: ErrorStyles,
};
const vanillaStyle$2 = `
sqm-portal-register {
  margin: 0 auto;
  width: 100%;
  display: block;
}

:host{
  display: block;
}

:host([hidden]) {
  display: none;
}
`;
const sheet$1 = createStyleSheet(style$1);
const styleString$1 = sheet$1.toString();
function PortalRegisterView(props) {
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
  const { states, refs, callbacks, content } = props;
  if (states.error) {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  }
  return (h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle$2,
      styleString$1),
    h(TextSpanView, { type: "h3" }, content.pageLabel),
    h("sl-form", { class: sheet$1.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, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
          if (!value) {
            return content.requiredFieldErrorMessage;
          }
          // this matches shoelace validation, but could be better
          if (!value.includes("@")) {
            return content.invalidEmailErrorMessage;
          }
        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
        class: sheet$1.classes.ErrorStyle,
        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
          content.requiredFieldErrorMessage,
      }
        : [])))),
      !states.hideInputs && (h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": states.disablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
      content.passwordField,
      !states.hideInputs && states.confirmPassword && (h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.disabled), required: true }, (((_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.confirmPassword) ? {
        value: (_j = (_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.initialData) === null || _j === void 0 ? void 0 : _j.confirmPassword,
      }
        : {}), (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.validationErrors) === null || _l === void 0 ? void 0 : _l.confirmPassword) ? {
        class: sheet$1.classes.ErrorStyle,
        helpText: ((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.validationErrors) === null || _o === void 0 ? void 0 : _o.confirmPassword) || content.requiredFieldErrorMessage,
      }
        : [])))),
      content.terms,
      h("div", { class: sheet$1.classes.ButtonsContainer },
        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
        content.secondaryButton))));
}

const style$2 = {
  Wrapper: AuthWrapper,
  Column: AuthColumn,
  ContinueButton: {
    width: "100%",
  },
};
const vanillaStyle$3 = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
const sheet$2 = createStyleSheet(style$2);
const styleString$2 = sheet$2.toString();
function PortalVerifyEmailView(props) {
  const { states, data, callbacks, content } = props;
  if (states.loading)
    return;
  if (states.success) {
    return (h("div", { class: sheet$2.classes.Wrapper, part: "sqm-base" },
      h("style", { type: "text/css" },
        vanillaStyle$3,
        styleString$2),
      h(TextSpanView, { type: "h3" }, content.verifyEmailText),
      h("sqm-form-message", { exportparts: "success-icon" },
        h("div", { part: "successalert-text" }, content.verifySuccessText)),
      h("sl-button", { class: sheet$2.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.continueText)));
  }
  if (states.error || !data.oobCode) {
    return (h("div", { class: sheet$2.classes.Wrapper, part: "sqm-base" },
      h("style", { type: "text/css" }, styleString$2),
      h(TextSpanView, { type: "h3" }, content.verifyEmailText),
      h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, content.verifyInvalidText)),
      h("sl-button", { class: sheet$2.classes.ContinueButton, onClick: callbacks.failed, disabled: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.continueText)));
  }
}

export { PortalForgotPasswordView as P, PortalLoginView as a, PortalRegisterView as b, PortalVerifyEmailView as c };
