@norges-domstoler/dds-page-generator/dist/index.js

Page Generator

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  CountryCodeInput: () => CountryCodeInput,
  DateOfBirthDatepicker: () => DateOfBirthDatepicker,
  DetailList: () => DetailList,
  DetailListRow: () => DetailListRow,
  EmailInput: () => EmailInput,
  EmailValidator: () => EmailValidator,
  FirstNameInput: () => FirstNameInput,
  HouseNumberInput: () => HouseNumberInput,
  LastNameInput: () => LastNameInput,
  NameRow: () => NameRow,
  NinInput: () => NinInput,
  NinValidator: () => NinValidator,
  NumbersOnlyValidator: () => NumbersOnlyValidator,
  PageGenerator: () => PageGenerator,
  PageGeneratorSupportedFields: () => PageGeneratorSupportedFields,
  PhoneNumberInput: () => PhoneNumberInput,
  PhoneNumberRow: () => PhoneNumberRow,
  PhoneNumberValidator: () => PhoneNumberValidator,
  PostalCodeInput: () => PostalCodeInput,
  PostalNumberInput: () => PostalNumberInput,
  PostalRow: () => PostalRow,
  RequiredDatePickerValidator: () => RequiredDatePickerValidator,
  RequiredSelectValidator: () => RequiredSelectValidator,
  RequiredValidator: () => RequiredValidator,
  SectionGenerator: () => SectionGenerator,
  StreetAddressRow: () => StreetAddressRow,
  StreetNameInput: () => StreetNameInput,
  getFormErrorMessage: () => getFormErrorMessage,
  isFieldWithValidations: () => isFieldWithValidations,
  isMultiValue: () => isMultiValue,
  isPageGeneratorRow: () => isPageGeneratorRow,
  isSectionGeneratorRow: () => isSectionGeneratorRow
});
module.exports = __toCommonJS(index_exports);

// src/components/PageGenerator/PageGenerator.tsx
var import_dds_components7 = require("@norges-domstoler/dds-components");

// src/tokens/PageGeneratorTokens.tsx
var import_dds_components = require("@norges-domstoler/dds-components");
var import_dds_design_tokens = require("@norges-domstoler/dds-design-tokens");
var PageGeneratorTokens = {
  Stack: {
    [import_dds_components.ScreenSize.XSmall]: "x1",
    [import_dds_components.ScreenSize.Small]: "x1",
    [import_dds_components.ScreenSize.Medium]: "x1",
    [import_dds_components.ScreenSize.Large]: "x1",
    [import_dds_components.ScreenSize.XLarge]: "x1.5"
  },
  rowGaps: {
    xs: import_dds_design_tokens.ddsTokens.core.ddsSpacingX1,
    sm: import_dds_design_tokens.ddsTokens.core.ddsSpacingX1,
    md: import_dds_design_tokens.ddsTokens.core.ddsSpacingX1,
    lg: import_dds_design_tokens.ddsTokens.core.ddsSpacingX1,
    xl: import_dds_design_tokens.ddsTokens.core.ddsSpacingX15
  }
};

// src/components/PageGenerator/PageGeneratorContext.tsx
var import_react = require("react");
var PageGeneratorContext = (0, import_react.createContext)({
  fields: [],
  state: {},
  fieldOnChange: () => {
  },
  selectOnChange: () => {
  },
  datePickerOnChange: () => {
  },
  onBlur: () => {
  },
  onBlurSelect: () => {
  },
  formData: {
    errors: null,
    errorMessages: null,
    submitted: false,
    touched: false,
    valid: false
  },
  validateAllFields: (next) => {
  }
});

// src/components/PageGenerator/PageGeneratorProvider.tsx
var import_react2 = require("react");

// src/helpers/isFieldWithValidations.tsx
var isFieldWithValidations = (obj) => {
  return obj && obj.validations !== void 0;
};

// src/helpers/isMultiValue.tsx
var isMultiValue = (obj) => {
  return (obj == null ? void 0 : obj.values) !== void 0;
};

// src/helpers/isPageGeneratorRow.tsx
var isPageGeneratorRow = (obj) => {
  return obj.fields !== void 0;
};

// src/helpers/isSectionGeneratorRow.tsx
var isSectionGeneratorRow = (obj) => {
  return obj.fields !== void 0;
};

// src/helpers/PageGeneratorFields.tsx
var import_dds_components2 = require("@norges-domstoler/dds-components");

// src/types/PageGeneratorSupportedFields.tsx
var PageGeneratorSupportedFields = /* @__PURE__ */ ((PageGeneratorSupportedFields2) => {
  PageGeneratorSupportedFields2["Button"] = "Button";
  PageGeneratorSupportedFields2["Card"] = "Card";
  PageGeneratorSupportedFields2["Checkbox"] = "Checkbox";
  PageGeneratorSupportedFields2["CheckboxGroup"] = "CheckboxGroup";
  PageGeneratorSupportedFields2["DatePicker"] = "DatePicker";
  PageGeneratorSupportedFields2["DescriptionList"] = "DescriptionList";
  PageGeneratorSupportedFields2["DescriptionListGroup"] = "DescriptionListGroup";
  PageGeneratorSupportedFields2["DescriptionListDesc"] = "DescriptionListDesc";
  PageGeneratorSupportedFields2["DescriptionListTerm"] = "DescriptionListTerm";
  PageGeneratorSupportedFields2["DetailList"] = "DetailList";
  PageGeneratorSupportedFields2["DetailListRow"] = "DetailListRow";
  PageGeneratorSupportedFields2["DetailListTerm"] = "DetailListTerm";
  PageGeneratorSupportedFields2["DetailListDesc"] = "DetailListDesc";
  PageGeneratorSupportedFields2["Divider"] = "Divider";
  PageGeneratorSupportedFields2["Drawer"] = "Drawer";
  PageGeneratorSupportedFields2["DrawerGroup"] = "DrawerGroup";
  PageGeneratorSupportedFields2["Fieldset"] = "Fieldset";
  PageGeneratorSupportedFields2["GlobalMessage"] = "GlobalMessage";
  PageGeneratorSupportedFields2["Heading"] = "Heading";
  PageGeneratorSupportedFields2["HStack"] = "HStack";
  PageGeneratorSupportedFields2["InputMessage"] = "InputMessage";
  PageGeneratorSupportedFields2["Label"] = "Label";
  PageGeneratorSupportedFields2["Legend"] = "Legend";
  PageGeneratorSupportedFields2["Link"] = "Link";
  PageGeneratorSupportedFields2["List"] = "List";
  PageGeneratorSupportedFields2["ListItem"] = "ListItem";
  PageGeneratorSupportedFields2["LocalMessage"] = "LocalMessage";
  PageGeneratorSupportedFields2["Paragraph"] = "Paragraph";
  PageGeneratorSupportedFields2["RadioButton"] = "RadioButton";
  PageGeneratorSupportedFields2["RadioButtonGroup"] = "RadioButtonGroup";
  PageGeneratorSupportedFields2["Select"] = "Select";
  PageGeneratorSupportedFields2["Spinner"] = "Spinner";
  PageGeneratorSupportedFields2["TextArea"] = "TextArea";
  PageGeneratorSupportedFields2["TextInput"] = "TextInput";
  PageGeneratorSupportedFields2["ToggleBar"] = "ToggleBar";
  PageGeneratorSupportedFields2["ToggleRadio"] = "ToggleRadio";
  PageGeneratorSupportedFields2["ToggleButton"] = "ToggleButton";
  PageGeneratorSupportedFields2["ToggleButtonGroup"] = "ToggleButtonGroup";
  PageGeneratorSupportedFields2["Typography"] = "Typography";
  PageGeneratorSupportedFields2["VisuallyHidden"] = "VisuallyHidden";
  PageGeneratorSupportedFields2["VStack"] = "VStack";
  return PageGeneratorSupportedFields2;
})(PageGeneratorSupportedFields || {});

// src/helpers/PageGeneratorFields.tsx
var NinInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "F\xF8dselsnummer",
      type: "text",
      name: "nin",
      ...props
    },
    ...fieldProps
  };
};
var FirstNameInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Fornavn",
      type: "text",
      name: "firstName",
      ...props
    },
    ...fieldProps
  };
};
var LastNameInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Etternavn",
      type: "text",
      name: "lastName",
      ...props
    },
    ...fieldProps
  };
};
var DateOfBirthDatepicker = (props) => {
  return {
    component: "DatePicker" /* DatePicker */,
    props: {
      label: "F\xF8dselsdato",
      name: "dateOfBirth",
      ...props
    },
    name: "dateOfBirth"
  };
};
var EmailInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "E-post",
      name: "email",
      ...props
    },
    ...fieldProps
  };
};
var StreetNameInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Gatenavn",
      type: "text",
      name: "streetName",
      ...props
    },
    ...fieldProps
  };
};
var HouseNumberInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Husnummer",
      width: "90px",
      type: "text",
      name: "houseNumber",
      ...props
    },
    ...fieldProps
  };
};
var CountryCodeInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Landkode",
      width: "90px",
      name: "countryCode",
      tip: "Husk + foran landkoden",
      ...props
    },
    ...fieldProps
  };
};
var PhoneNumberInput = ({
  props,
  fieldProps
}) => {
  const actualScreenSize = (0, import_dds_components2.useScreenSize)();
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Telefon",
      width: actualScreenSize >= import_dds_components2.ScreenSize.XLarge ? "206px" : "214px",
      name: "phoneNumber",
      ...props
    },
    ...fieldProps
  };
};
var PostalNumberInput = ({
  props,
  fieldProps
}) => {
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Postnummer",
      width: "90px",
      name: "postalNumber",
      ...props
    },
    ...fieldProps
  };
};
var PostalCodeInput = ({
  props,
  fieldProps
}) => {
  const actualScreenSize = (0, import_dds_components2.useScreenSize)();
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Poststed",
      type: "text",
      width: actualScreenSize >= import_dds_components2.ScreenSize.XLarge ? "206px" : "214px",
      name: "postalCode",
      ...props
    },
    ...fieldProps
  };
};
var NameRow = (firstNameProps, lastNameProps, rowProps) => {
  return {
    fields: [
      FirstNameInput(firstNameProps || {}),
      LastNameInput(lastNameProps || {})
    ],
    ...rowProps
  };
};
var StreetAddressRow = (streetNameProps, houseNumberProps, rowProps) => {
  return {
    fields: [
      StreetNameInput(streetNameProps || {}),
      HouseNumberInput(houseNumberProps || {})
    ],
    ...rowProps
  };
};
var PhoneNumberRow = (countryCodeProps, phoneNumberProps, rowProps) => {
  return {
    fields: [
      CountryCodeInput(countryCodeProps || {}),
      PhoneNumberInput(phoneNumberProps || {})
    ],
    ...rowProps
  };
};
var PostalRow = (postalNumberProps, postalCodeProps, rowProps) => {
  return {
    fields: [
      PostalNumberInput(postalNumberProps || {}),
      PostalCodeInput(postalCodeProps || {})
    ],
    ...rowProps
  };
};
var DetailList = (rows) => {
  return {
    component: "DetailList" /* DetailList */,
    props: {
      striped: false,
      size: "small"
    },
    children: rows.map((row) => {
      return {
        component: "DetailListRow" /* DetailListRow */,
        props: {},
        children: [
          {
            component: "DetailListTerm" /* DetailListTerm */,
            props: {},
            innerHTML: row.term
          },
          {
            component: "DetailListDesc" /* DetailListDesc */,
            props: {
              style: {
                textAlign: "right"
              }
            },
            innerHTML: row.desc
          }
        ]
      };
    })
  };
};
var DetailListRow = (term, desc) => {
  return {
    term,
    desc: desc || "-"
  };
};

// src/helpers/Validators.tsx
var import_fnrvalidator = require("@navikt/fnrvalidator");
var import_dds_components3 = require("@norges-domstoler/dds-components");
var import_jsx_runtime = require("react/jsx-runtime");
var RequiredValidator = (message, formMessage) => {
  return {
    message: message || "Feltet er p\xE5krevd",
    formMessage: formMessage || "Feltet er p\xE5krevd",
    rule: (value) => !!value && value.length > 0
  };
};
var RequiredSelectValidator = (message, formMessage) => {
  return {
    message: message || "Feltet er p\xE5krevd",
    formMessage: formMessage || "Feltet er p\xE5krevd",
    rule: (value) => {
      if (Array.isArray(value)) {
        return value.length > 0;
      }
      return !!value;
    }
  };
};
var RequiredDatePickerValidator = (message, formMessage) => {
  return {
    message: message || "Feltet er p\xE5krevd",
    formMessage: formMessage || "Feltet er p\xE5krevd",
    rule: (value) => !!value
  };
};
var NumbersOnlyValidator = (message, formMessage) => {
  return {
    message: message || "Feltet kan bare inneholde tall",
    formMessage: formMessage || "Feltet kan bare inneholde tall",
    rule: (value) => value.length > 0 ? value.match(/^\d+$/) !== null : true
  };
};
var NinValidator = {
  message: "F\xF8dselsnummer er ugyldig",
  formMessage: "F\xF8dselsnummer er ugyldig",
  rule: (value) => {
    if (value.length > 0) {
      const result = (0, import_fnrvalidator.idnr)(value);
      return result.status === "valid";
    }
    return true;
  }
};
var PhoneNumberValidator = {
  message: "Kan bare inneholde tall",
  formMessage: "Telefonnummer kan bare inneholde tall",
  rule: (value) => value.length > 0 ? value.match(/^\d+$/) !== null : true
};
var EmailValidator = {
  message: "E-post er ugyldig",
  formMessage: "E-post er ugyldig",
  rule: (value) => value.length > 0 ? value.match(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/) !== null : true
};
var getFormErrorMessage = (errors, leadText) => {
  const actualErrors = Object.keys(errors).filter(
    (key) => errors[key].errors.length > 0
  );
  const formMessages = actualErrors.map((e) => {
    const obj = errors[e];
    return obj.errors[0].formMessage || obj.errors[0].message;
  });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dds_components3.Paragraph, { children: leadText || "Disse feilene m\xE5 rettes f\xF8r du kan lagre:" }),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dds_components3.List, { children: formMessages.map((formMessage, index) => {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dds_components3.ListItem, { children: formMessage }, index);
    }) })
  ] });
};

// src/components/PageGenerator/PageGeneratorProvider.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var PageGeneratorProvider = ({
  children,
  fields,
  formDataOnChange,
  state,
  setState
}) => {
  const [formData, setFormData] = (0, import_react2.useState)({
    errors: null,
    errorMessages: null,
    submitted: false,
    touched: false,
    valid: false
  });
  (0, import_react2.useEffect)(() => {
    setFormData({
      ...formData,
      submitted: false
    });
  }, [state]);
  (0, import_react2.useEffect)(() => {
    let newErrorMessages = { ...formData.errorMessages };
    if (formData.errors && Object.keys(formData.errors).length > 0) {
      Object.keys(formData.errors).forEach((key) => {
        if (formData.errors) {
          const error = formData.errors[key];
          if (error && error.errors.length > 0) {
            newErrorMessages = {
              ...newErrorMessages,
              [key]: error.errors[0].message
            };
          } else {
            newErrorMessages = {
              ...newErrorMessages,
              [key]: ""
            };
          }
        }
      });
      let valid = true;
      Object.keys(formData.errors).forEach((key) => {
        if (formData.errors && formData.errors[key].errors.length > 0) {
          valid = false;
          return;
        }
      });
      let newFormData = { ...formData, valid };
      if (newErrorMessages && (formData.touched || formData.submitted)) {
        newFormData = {
          ...newFormData,
          errorMessages: newErrorMessages
        };
      }
      setFormData(newFormData);
      if (formDataOnChange) {
        formDataOnChange(newFormData);
      }
    }
  }, [formData.errors]);
  const findFieldByNameInternal = (name, fieldsToSearch) => {
    for (const f of fieldsToSearch) {
      if (isFieldWithValidations(f) && f.props && f.props.name === name) {
        return f;
      }
      if (isPageGeneratorRow(f) && f.fields && Array.isArray(f.fields)) {
        const result = findFieldByNameInternal(name, f.fields);
        if (result) {
          return result;
        }
      }
    }
    return null;
  };
  const getFieldErrors = (name, value) => {
    var _a, _b;
    const field = findFieldByNameInternal(name, fields);
    if (field && isFieldWithValidations(field)) {
      const fieldErrors = (_b = (_a = field.validations) == null ? void 0 : _a.filter(
        (v) => !v.rule(value)
      )) != null ? _b : [];
      return fieldErrors;
    }
    return [];
  };
  const validateField = (name, value) => {
    var _a, _b;
    const field = findFieldByNameInternal(name, fields);
    if (field && isFieldWithValidations(field)) {
      const fieldErrors = (_b = (_a = field.validations) == null ? void 0 : _a.filter(
        (v) => !v.rule(value)
      )) != null ? _b : [];
      const newErrors = {
        ...formData.errors,
        [name]: {
          value,
          errors: fieldErrors
        }
      };
      setFormData({
        ...formData,
        errors: newErrors,
        touched: true
      });
    }
  };
  const validateAllFields = (next) => {
    let newErrors = {};
    fields.forEach((field) => {
      var _a;
      if (isFieldWithValidations(field) && state && ((_a = field.props) == null ? void 0 : _a.name)) {
        const value = state[field.props.name];
        const name = field.props.name;
        const fieldErrors = getFieldErrors(name, value);
        newErrors = {
          ...newErrors,
          [name]: {
            value,
            errors: fieldErrors
          }
        };
      }
    });
    let valid = true;
    Object.keys(newErrors).forEach((key) => {
      if (newErrors[key].errors.length > 0) {
        valid = false;
        return;
      }
    });
    setFormData({
      ...formData,
      submitted: true,
      errors: newErrors,
      valid
    });
    if (valid) {
      next();
    }
  };
  const onBlur = (event) => {
    const { name, value } = event.target;
    validateField(name, value);
  };
  const onBlurSelect = (name) => {
    if (state) {
      validateField(name, state[name]);
    }
  };
  const fieldOnChange = (event) => {
    var _a;
    const { id, name, value } = event.target;
    const checked = (_a = event.target) == null ? void 0 : _a.checked;
    setFormData({
      ...formData,
      touched: true,
      errorMessages: {
        ...formData.errorMessages,
        [name]: ""
      }
    });
    const newState = {
      ...state,
      [name || id]: event.target.type === "checkbox" ? checked : value
    };
    if (setState) {
      setState(newState);
    }
  };
  const selectOnChange = (chosen, name) => {
    let value = null;
    if (isMultiValue(chosen)) {
      value = Array.isArray(chosen) ? chosen : null;
    } else {
      value = chosen != null ? chosen : null;
    }
    setFormData({
      ...formData,
      touched: true,
      submitted: false,
      errorMessages: {
        ...formData.errorMessages,
        [name]: ""
      }
    });
    const newState = {
      ...state,
      [name]: value
    };
    validateField(name, chosen);
    if (setState) {
      setState(newState);
    }
  };
  const datePickerOnChange = (value, name) => {
    const newState = {
      ...state,
      [name]: value
    };
    setFormData({
      ...formData,
      touched: true,
      submitted: false,
      errorMessages: {
        ...formData.errorMessages,
        [name]: ""
      }
    });
    validateField(name, value);
    if (setState) {
      setState(newState);
    }
  };
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    PageGeneratorContext.Provider,
    {
      value: {
        fields,
        state,
        fieldOnChange,
        selectOnChange,
        datePickerOnChange,
        onBlur,
        onBlurSelect,
        formData,
        validateAllFields
      },
      children: children(validateAllFields)
    }
  );
};

// src/components/Generate/GenerateGridChildren.tsx
var import_react6 = require("react");

// src/components/Generate/GenerateGridChild.tsx
var import_dds_components6 = require("@norges-domstoler/dds-components");

// src/components/Generate/GenerateComponent.tsx
var import_dds_components4 = require("@norges-domstoler/dds-components");
var import_jsx_runtime3 = require("react/jsx-runtime");
var import_react3 = require("react");
var GenerateComponent = (props) => {
  const { index, field, gridChildProps } = props;
  const {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    screenSize
  } = gridChildProps;
  const inputFieldOnChange = (event) => fieldOnChange(event);
  const textAreaFieldOnChange = (event) => fieldOnChange(event);
  const GridStyling = {
    marginLeft: void 0,
    marginRight: void 0
  };
  switch (field.component) {
    case "Button" /* Button */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Button, { ...field.props, key: index }, field.innerHTML);
    case "Card" /* Card */:
      if (field.innerHTML) {
        return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Card, { ...field.props, key: index }, field.innerHTML);
      } else if (field.children) {
        /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Card, { ...field.props, key: index }, /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SectionGenerator, { as: "fragment", fields: field.children }));
      }
      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
    case "Checkbox" /* Checkbox */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Checkbox, { ...field.props, key: index, onChange: inputFieldOnChange });
    case "CheckboxGroup" /* CheckboxGroup */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.CheckboxGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DatePicker" /* DatePicker */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.DatePicker,
        {
          ...field.props,
          key: index,
          onChange: (value) => datePickerOnChange(value, field.name),
          onBlur: (_event) => {
            onBlurSelect(field.name);
          }
        }
      );
    case "DescriptionList" /* DescriptionList */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DescriptionList, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DescriptionListGroup" /* DescriptionListGroup */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DescriptionListGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DescriptionListDesc" /* DescriptionListDesc */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DescriptionListDesc, { ...field.props, key: index }, field.innerHTML);
    case "DescriptionListTerm" /* DescriptionListTerm */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DescriptionListTerm, { ...field.props, key: index }, field.innerHTML);
    case "DetailList" /* DetailList */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DetailList, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DetailListRow" /* DetailListRow */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DetailListRow, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DetailListDesc" /* DetailListDesc */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DetailListDesc, { ...field.props, key: index }, field.innerHTML);
    case "DetailListTerm" /* DetailListTerm */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DetailListTerm, { ...field.props, key: index }, field.innerHTML);
    case "Divider" /* Divider */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Divider, { ...field.props, key: index });
    case "Drawer" /* Drawer */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Drawer, { ...field.props, key: index }, field.innerHTML);
    case "DrawerGroup" /* DrawerGroup */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.DrawerGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "Fieldset" /* Fieldset */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.Fieldset,
        {
          ...field.props,
          htmlProps: {
            ...field.props.htmlProps,
            className: "page-generator-fieldset",
            style: {
              ...GridStyling
            }
          },
          key: index
        },
        field.children.map((child, childIndex) => {
          if (child.component === "Legend") {
            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
              GenerateComponent,
              {
                index: childIndex,
                field: child,
                gridChildProps: props.gridChildProps
              },
              childIndex
            );
          } else {
            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
              GenerateGridChild,
              {
                obj: child,
                index: childIndex
              },
              childIndex
            );
          }
        })
      );
    case "GlobalMessage" /* GlobalMessage */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.GlobalMessage, { ...field.props, key: index }, field.innerHTML);
    case "Heading" /* Heading */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Heading, { ...field.props, key: index }, field.innerHTML);
    case "HStack" /* HStack */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.HStack, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "InputMessage" /* InputMessage */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.InputMessage, { ...field.props, key: index });
    case "Label" /* Label */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Label, { ...field.props, key: index }, field.innerHTML);
    case "Legend" /* Legend */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Legend, { ...field.props, key: index }, field.innerHTML);
    case "Link" /* Link */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Link, { ...field.props, key: index }, field.innerHTML);
    case "List" /* List */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.List, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "ListItem" /* ListItem */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.ListItem, { ...field.props, key: index }, field.innerHTML);
    case "LocalMessage" /* LocalMessage */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.LocalMessage, { ...field.props, key: index }, field.innerHTML);
    case "Paragraph" /* Paragraph */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Paragraph, { ...field.props, key: index }, field.innerHTML);
    case "RadioButton" /* RadioButton */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.RadioButton,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange
        }
      );
    case "RadioButtonGroup" /* RadioButtonGroup */:
      field.props.direction = screenSize > import_dds_components4.ScreenSize.XSmall ? "row" : "column";
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.RadioButtonGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "Select" /* Select */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.Select,
        {
          ...field.props,
          key: index,
          onChange: (option) => selectOnChange(option, field.name),
          onBlur: (_event) => {
            onBlurSelect(field.name);
          }
        }
      );
    case "Spinner" /* Spinner */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Spinner, { ...field.props, key: index });
    case "TextArea" /* TextArea */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.TextArea,
        {
          ...field.props,
          key: index,
          onChange: textAreaFieldOnChange,
          onBlur
        }
      );
    case "TextInput" /* TextInput */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.TextInput,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange,
          onBlur
        }
      );
    case "ToggleBar" /* ToggleBar */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.ToggleBar, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "ToggleButton" /* ToggleButton */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.ToggleButton,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange
        }
      );
    case "ToggleButtonGroup" /* ToggleButtonGroup */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.ToggleButtonGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "ToggleRadio" /* ToggleRadio */:
      return /* @__PURE__ */ (0, import_react3.createElement)(
        import_dds_components4.ToggleRadio,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange
        }
      );
    case "Typography" /* Typography */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.Typography, { ...field.props, key: index }, field.innerHTML);
    case "VisuallyHidden" /* VisuallyHidden */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.VisuallyHidden, { ...field.props, key: index }, field.innerHTML);
    case "VStack" /* VStack */:
      return /* @__PURE__ */ (0, import_react3.createElement)(import_dds_components4.VStack, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    default:
      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
  }
};

// src/components/Generate/GenerateRow.tsx
var import_dds_components5 = require("@norges-domstoler/dds-components");
var import_react4 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var GenerateRow = (props) => {
  const { index, fields, gridChildProps } = props;
  const { formData } = (0, import_react4.useContext)(PageGeneratorContext);
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    import_dds_components5.HStack,
    {
      gap: PageGeneratorTokens.Stack[gridChildProps.screenSize] || 0,
      align: "flex-start",
      htmlProps: { style: { flexWrap: "wrap" } },
      children: fields.map((field, childIndex) => {
        if (isFieldWithValidations(field) && field.props.name && formData.errorMessages) {
          field.props = {
            ...field.props,
            errorMessage: formData.errorMessages[field.props.name]
          };
        }
        return !field.hide && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
          GenerateComponent,
          {
            index: childIndex,
            field,
            gridChildProps
          },
          childIndex
        );
      })
    },
    index
  );
};

// src/components/Generate/GenerateGridChild.tsx
var import_react5 = require("react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var GenerateGridChild = (props) => {
  const isRow = isPageGeneratorRow(props.obj);
  const {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    formData
  } = (0, import_react5.useContext)(PageGeneratorContext);
  const screenSize = (0, import_dds_components6.useScreenSize)();
  const { obj, index } = props;
  const gridChildProps = {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    screenSize
  };
  if (isFieldWithValidations(obj) && obj.props.name && formData.errorMessages) {
    obj.props = {
      ...obj.props,
      errorMessage: formData.errorMessages[obj.props.name]
    };
  }
  return !obj.hide && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_dds_components6.GridChild, { columnsOccupied: "all", children: [
    isRow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      GenerateRow,
      {
        index,
        fields: obj.fields,
        gridChildProps
      }
    ),
    !isRow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      GenerateComponent,
      {
        index,
        field: obj,
        gridChildProps
      }
    )
  ] }, index);
};

// src/components/Generate/GenerateGridChildren.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var GenerateGridChildren = () => {
  const { fields } = (0, import_react6.useContext)(PageGeneratorContext);
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: fields.map((obj, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GenerateGridChild, { obj, index }, index)) });
};

// src/components/PageGenerator/PageGenerator.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var PageGenerator = (props) => {
  const {
    id,
    className,
    htmlProps,
    fields = [],
    formDataOnChange,
    state,
    setState,
    as,
    onSubmit,
    ...rest
  } = props;
  const children = (validateAllFields) => {
    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
      import_dds_components7.Grid,
      {
        ...(0, import_dds_components7.getBaseHTMLProps)(id, className, htmlProps, rest),
        as,
        rowGap: PageGeneratorTokens.rowGaps,
        htmlProps: {
          ...htmlProps,
          ...onSubmit ? {
            onSubmit: (event) => {
              event.preventDefault();
              if (onSubmit) {
                validateAllFields(onSubmit);
              }
            }
          } : {}
        },
        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GenerateGridChildren, {})
      }
    );
  };
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
    PageGeneratorProvider,
    {
      fields,
      formDataOnChange,
      state,
      setState,
      children
    }
  );
};
PageGenerator.displayName = "PageGenerator";

// src/components/SectionGenerator/SectionGenerator.tsx
var import_dds_components8 = require("@norges-domstoler/dds-components");
var import_react7 = __toESM(require("react"));
var import_jsx_runtime8 = require("react/jsx-runtime");
var SectionGenerator = (props) => {
  const {
    fields = [],
    formDataOnChange,
    state,
    setState,
    as,
    id,
    className,
    htmlProps,
    ...rest
  } = props;
  const {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    validateAllFields
  } = (0, import_react7.useContext)(PageGeneratorContext);
  const screenSize = (0, import_dds_components8.useScreenSize)();
  const generateGridChildProps = {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    screenSize
  };
  const Parent = (props2) => {
    if (as === "div") {
      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...(0, import_dds_components8.getBaseHTMLProps)(id, className, htmlProps, rest), children: props2.children });
    } else if (as === "form") {
      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("form", { ...(0, import_dds_components8.getBaseHTMLProps)(id, className, htmlProps, rest), children: props2.children });
    } else if (as === "fragment") {
      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react7.default.Fragment, { children: props2.children });
    } else {
      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
    }
  };
  const children = (validateAllFields2) => {
    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Parent, { children: fields.map((obj, index) => {
      const isRow = isSectionGeneratorRow(obj);
      return !obj.hide && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react7.default.Fragment, { children: [
        isRow && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
          GenerateRow,
          {
            index,
            fields: obj.fields,
            gridChildProps: generateGridChildProps
          }
        ),
        !isRow && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
          GenerateComponent,
          {
            index,
            field: obj,
            gridChildProps: generateGridChildProps
          }
        )
      ] }, index);
    }) });
  };
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
    PageGeneratorProvider,
    {
      fields,
      formDataOnChange,
      state,
      setState,
      children
    }
  );
};
SectionGenerator.displayName = "SectionGenerator";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CountryCodeInput,
  DateOfBirthDatepicker,
  DetailList,
  DetailListRow,
  EmailInput,
  EmailValidator,
  FirstNameInput,
  HouseNumberInput,
  LastNameInput,
  NameRow,
  NinInput,
  NinValidator,
  NumbersOnlyValidator,
  PageGenerator,
  PageGeneratorSupportedFields,
  PhoneNumberInput,
  PhoneNumberRow,
  PhoneNumberValidator,
  PostalCodeInput,
  PostalNumberInput,
  PostalRow,
  RequiredDatePickerValidator,
  RequiredSelectValidator,
  RequiredValidator,
  SectionGenerator,
  StreetAddressRow,
  StreetNameInput,
  getFormErrorMessage,
  isFieldWithValidations,
  isMultiValue,
  isPageGeneratorRow,
  isSectionGeneratorRow
});
//# sourceMappingURL=index.js.map