import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { ErrorStyles } from "../../global/mixins";
const style = {
  InputContainer: {
    "& > :not(:last-child)": {
      "margin-bottom": "20px",
    },
  },
  ErrorStyle: ErrorStyles,
};
const vanillaStyle = `
:host {
  margin: 0 auto;
  width: 100%;
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function PortalResetPasswordView(props) {
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
  const { states, callbacks } = props;
  return (h("div", { class: sheet.classes.InputContainer, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/password", label: states.content.fieldLabel || "Password", required: true, disabled: ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.loading) || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled), validationError: ({ value }) => {
        if (!value) {
          return "Cannot be empty";
        }
      } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.password) ? {
      value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.password,
    }
      : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.password) ? {
      class: sheet.classes.ErrorStyle,
      helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.password) ||
        "Cannot be empty",
    }
      : []), { onInput: (input) => states.enableValidation && callbacks.onInput(input) })),
    states.dynamicValidation));
}
