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

Page Generator

// src/components/PageGenerator/PageGenerator.tsx
import { getBaseHTMLProps, Grid } from "@norges-domstoler/dds-components";

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

// src/components/PageGenerator/PageGeneratorContext.tsx
import { createContext } from "react";
var PageGeneratorContext = 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
import { useEffect, useState } from "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
import {
  useScreenSize,
  ScreenSize as ScreenSize2
} from "@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 = useScreenSize();
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Telefon",
      width: actualScreenSize >= ScreenSize2.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 = useScreenSize();
  return {
    component: "TextInput" /* TextInput */,
    props: {
      label: "Poststed",
      type: "text",
      width: actualScreenSize >= ScreenSize2.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
import { idnr } from "@navikt/fnrvalidator";
import { Paragraph, List, ListItem } from "@norges-domstoler/dds-components";
import { Fragment, jsx, jsxs } from "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 = 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__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Paragraph, { children: leadText || "Disse feilene m\xE5 rettes f\xF8r du kan lagre:" }),
    /* @__PURE__ */ jsx(List, { children: formMessages.map((formMessage, index) => {
      return /* @__PURE__ */ jsx(ListItem, { children: formMessage }, index);
    }) })
  ] });
};

// src/components/PageGenerator/PageGeneratorProvider.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var PageGeneratorProvider = ({
  children,
  fields,
  formDataOnChange,
  state,
  setState
}) => {
  const [formData, setFormData] = useState({
    errors: null,
    errorMessages: null,
    submitted: false,
    touched: false,
    valid: false
  });
  useEffect(() => {
    setFormData({
      ...formData,
      submitted: false
    });
  }, [state]);
  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__ */ jsx2(
    PageGeneratorContext.Provider,
    {
      value: {
        fields,
        state,
        fieldOnChange,
        selectOnChange,
        datePickerOnChange,
        onBlur,
        onBlurSelect,
        formData,
        validateAllFields
      },
      children: children(validateAllFields)
    }
  );
};

// src/components/Generate/GenerateGridChildren.tsx
import { useContext as useContext3 } from "react";

// src/components/Generate/GenerateGridChild.tsx
import {
  GridChild,
  useScreenSize as useScreenSize2
} from "@norges-domstoler/dds-components";

// src/components/Generate/GenerateComponent.tsx
import {
  Button,
  Card,
  Checkbox,
  CheckboxGroup,
  DatePicker,
  DescriptionList,
  DescriptionListGroup,
  DescriptionListDesc,
  DescriptionListTerm,
  Divider,
  Drawer,
  DrawerGroup,
  Fieldset,
  GlobalMessage,
  InputMessage,
  Legend,
  List as List2,
  ListItem as ListItem2,
  LocalMessage,
  RadioButton,
  ScreenSize as ScreenSize3,
  RadioButtonGroup,
  Select,
  Spinner,
  TextArea,
  TextInput,
  ToggleButton,
  ToggleButtonGroup,
  VisuallyHidden,
  HStack,
  VStack,
  Heading,
  Label,
  Link,
  Paragraph as Paragraph2,
  Typography,
  ToggleBar,
  ToggleRadio,
  DetailList as DetailList2,
  DetailListRow as DetailListRow2,
  DetailListDesc,
  DetailListTerm
} from "@norges-domstoler/dds-components";
import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
import { createElement } from "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__ */ createElement(Button, { ...field.props, key: index }, field.innerHTML);
    case "Card" /* Card */:
      if (field.innerHTML) {
        return /* @__PURE__ */ createElement(Card, { ...field.props, key: index }, field.innerHTML);
      } else if (field.children) {
        /* @__PURE__ */ createElement(Card, { ...field.props, key: index }, /* @__PURE__ */ jsx3(SectionGenerator, { as: "fragment", fields: field.children }));
      }
      return /* @__PURE__ */ jsx3(Fragment2, {});
    case "Checkbox" /* Checkbox */:
      return /* @__PURE__ */ createElement(Checkbox, { ...field.props, key: index, onChange: inputFieldOnChange });
    case "CheckboxGroup" /* CheckboxGroup */:
      return /* @__PURE__ */ createElement(CheckboxGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DatePicker" /* DatePicker */:
      return /* @__PURE__ */ createElement(
        DatePicker,
        {
          ...field.props,
          key: index,
          onChange: (value) => datePickerOnChange(value, field.name),
          onBlur: (_event) => {
            onBlurSelect(field.name);
          }
        }
      );
    case "DescriptionList" /* DescriptionList */:
      return /* @__PURE__ */ createElement(DescriptionList, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DescriptionListGroup" /* DescriptionListGroup */:
      return /* @__PURE__ */ createElement(DescriptionListGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DescriptionListDesc" /* DescriptionListDesc */:
      return /* @__PURE__ */ createElement(DescriptionListDesc, { ...field.props, key: index }, field.innerHTML);
    case "DescriptionListTerm" /* DescriptionListTerm */:
      return /* @__PURE__ */ createElement(DescriptionListTerm, { ...field.props, key: index }, field.innerHTML);
    case "DetailList" /* DetailList */:
      return /* @__PURE__ */ createElement(DetailList2, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DetailListRow" /* DetailListRow */:
      return /* @__PURE__ */ createElement(DetailListRow2, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "DetailListDesc" /* DetailListDesc */:
      return /* @__PURE__ */ createElement(DetailListDesc, { ...field.props, key: index }, field.innerHTML);
    case "DetailListTerm" /* DetailListTerm */:
      return /* @__PURE__ */ createElement(DetailListTerm, { ...field.props, key: index }, field.innerHTML);
    case "Divider" /* Divider */:
      return /* @__PURE__ */ createElement(Divider, { ...field.props, key: index });
    case "Drawer" /* Drawer */:
      return /* @__PURE__ */ createElement(Drawer, { ...field.props, key: index }, field.innerHTML);
    case "DrawerGroup" /* DrawerGroup */:
      return /* @__PURE__ */ createElement(DrawerGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "Fieldset" /* Fieldset */:
      return /* @__PURE__ */ createElement(
        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__ */ jsx3(
              GenerateComponent,
              {
                index: childIndex,
                field: child,
                gridChildProps: props.gridChildProps
              },
              childIndex
            );
          } else {
            return /* @__PURE__ */ jsx3(
              GenerateGridChild,
              {
                obj: child,
                index: childIndex
              },
              childIndex
            );
          }
        })
      );
    case "GlobalMessage" /* GlobalMessage */:
      return /* @__PURE__ */ createElement(GlobalMessage, { ...field.props, key: index }, field.innerHTML);
    case "Heading" /* Heading */:
      return /* @__PURE__ */ createElement(Heading, { ...field.props, key: index }, field.innerHTML);
    case "HStack" /* HStack */:
      return /* @__PURE__ */ createElement(HStack, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "InputMessage" /* InputMessage */:
      return /* @__PURE__ */ createElement(InputMessage, { ...field.props, key: index });
    case "Label" /* Label */:
      return /* @__PURE__ */ createElement(Label, { ...field.props, key: index }, field.innerHTML);
    case "Legend" /* Legend */:
      return /* @__PURE__ */ createElement(Legend, { ...field.props, key: index }, field.innerHTML);
    case "Link" /* Link */:
      return /* @__PURE__ */ createElement(Link, { ...field.props, key: index }, field.innerHTML);
    case "List" /* List */:
      return /* @__PURE__ */ createElement(List2, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "ListItem" /* ListItem */:
      return /* @__PURE__ */ createElement(ListItem2, { ...field.props, key: index }, field.innerHTML);
    case "LocalMessage" /* LocalMessage */:
      return /* @__PURE__ */ createElement(LocalMessage, { ...field.props, key: index }, field.innerHTML);
    case "Paragraph" /* Paragraph */:
      return /* @__PURE__ */ createElement(Paragraph2, { ...field.props, key: index }, field.innerHTML);
    case "RadioButton" /* RadioButton */:
      return /* @__PURE__ */ createElement(
        RadioButton,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange
        }
      );
    case "RadioButtonGroup" /* RadioButtonGroup */:
      field.props.direction = screenSize > ScreenSize3.XSmall ? "row" : "column";
      return /* @__PURE__ */ createElement(RadioButtonGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "Select" /* Select */:
      return /* @__PURE__ */ createElement(
        Select,
        {
          ...field.props,
          key: index,
          onChange: (option) => selectOnChange(option, field.name),
          onBlur: (_event) => {
            onBlurSelect(field.name);
          }
        }
      );
    case "Spinner" /* Spinner */:
      return /* @__PURE__ */ createElement(Spinner, { ...field.props, key: index });
    case "TextArea" /* TextArea */:
      return /* @__PURE__ */ createElement(
        TextArea,
        {
          ...field.props,
          key: index,
          onChange: textAreaFieldOnChange,
          onBlur
        }
      );
    case "TextInput" /* TextInput */:
      return /* @__PURE__ */ createElement(
        TextInput,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange,
          onBlur
        }
      );
    case "ToggleBar" /* ToggleBar */:
      return /* @__PURE__ */ createElement(ToggleBar, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "ToggleButton" /* ToggleButton */:
      return /* @__PURE__ */ createElement(
        ToggleButton,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange
        }
      );
    case "ToggleButtonGroup" /* ToggleButtonGroup */:
      return /* @__PURE__ */ createElement(ToggleButtonGroup, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    case "ToggleRadio" /* ToggleRadio */:
      return /* @__PURE__ */ createElement(
        ToggleRadio,
        {
          ...field.props,
          key: index,
          onChange: inputFieldOnChange
        }
      );
    case "Typography" /* Typography */:
      return /* @__PURE__ */ createElement(Typography, { ...field.props, key: index }, field.innerHTML);
    case "VisuallyHidden" /* VisuallyHidden */:
      return /* @__PURE__ */ createElement(VisuallyHidden, { ...field.props, key: index }, field.innerHTML);
    case "VStack" /* VStack */:
      return /* @__PURE__ */ createElement(VStack, { ...field.props, key: index }, field.children.map((child, childIndex) => {
        return !child.hide && /* @__PURE__ */ jsx3(
          GenerateComponent,
          {
            index: childIndex,
            field: child,
            gridChildProps: props.gridChildProps
          },
          childIndex
        );
      }));
    default:
      return /* @__PURE__ */ jsx3(Fragment2, {});
  }
};

// src/components/Generate/GenerateRow.tsx
import { HStack as HStack2 } from "@norges-domstoler/dds-components";
import { useContext } from "react";
import { jsx as jsx4 } from "react/jsx-runtime";
var GenerateRow = (props) => {
  const { index, fields, gridChildProps } = props;
  const { formData } = useContext(PageGeneratorContext);
  return /* @__PURE__ */ jsx4(
    HStack2,
    {
      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__ */ jsx4(
          GenerateComponent,
          {
            index: childIndex,
            field,
            gridChildProps
          },
          childIndex
        );
      })
    },
    index
  );
};

// src/components/Generate/GenerateGridChild.tsx
import { useContext as useContext2 } from "react";
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
var GenerateGridChild = (props) => {
  const isRow = isPageGeneratorRow(props.obj);
  const {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    formData
  } = useContext2(PageGeneratorContext);
  const screenSize = useScreenSize2();
  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__ */ jsxs2(GridChild, { columnsOccupied: "all", children: [
    isRow && /* @__PURE__ */ jsx5(
      GenerateRow,
      {
        index,
        fields: obj.fields,
        gridChildProps
      }
    ),
    !isRow && /* @__PURE__ */ jsx5(
      GenerateComponent,
      {
        index,
        field: obj,
        gridChildProps
      }
    )
  ] }, index);
};

// src/components/Generate/GenerateGridChildren.tsx
import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
var GenerateGridChildren = () => {
  const { fields } = useContext3(PageGeneratorContext);
  return /* @__PURE__ */ jsx6(Fragment3, { children: fields.map((obj, index) => /* @__PURE__ */ jsx6(GenerateGridChild, { obj, index }, index)) });
};

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

// src/components/SectionGenerator/SectionGenerator.tsx
import {
  getBaseHTMLProps as getBaseHTMLProps2,
  useScreenSize as useScreenSize3
} from "@norges-domstoler/dds-components";
import React, { useContext as useContext4 } from "react";
import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
var SectionGenerator = (props) => {
  const {
    fields = [],
    formDataOnChange,
    state,
    setState,
    as,
    id,
    className,
    htmlProps,
    ...rest
  } = props;
  const {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    validateAllFields
  } = useContext4(PageGeneratorContext);
  const screenSize = useScreenSize3();
  const generateGridChildProps = {
    fieldOnChange,
    selectOnChange,
    datePickerOnChange,
    onBlur,
    onBlurSelect,
    screenSize
  };
  const Parent = (props2) => {
    if (as === "div") {
      return /* @__PURE__ */ jsx8("div", { ...getBaseHTMLProps2(id, className, htmlProps, rest), children: props2.children });
    } else if (as === "form") {
      return /* @__PURE__ */ jsx8("form", { ...getBaseHTMLProps2(id, className, htmlProps, rest), children: props2.children });
    } else if (as === "fragment") {
      return /* @__PURE__ */ jsx8(React.Fragment, { children: props2.children });
    } else {
      return /* @__PURE__ */ jsx8(Fragment4, {});
    }
  };
  const children = (validateAllFields2) => {
    return /* @__PURE__ */ jsx8(Parent, { children: fields.map((obj, index) => {
      const isRow = isSectionGeneratorRow(obj);
      return !obj.hide && /* @__PURE__ */ jsxs3(React.Fragment, { children: [
        isRow && /* @__PURE__ */ jsx8(
          GenerateRow,
          {
            index,
            fields: obj.fields,
            gridChildProps: generateGridChildProps
          }
        ),
        !isRow && /* @__PURE__ */ jsx8(
          GenerateComponent,
          {
            index,
            field: obj,
            gridChildProps: generateGridChildProps
          }
        )
      ] }, index);
    }) });
  };
  return /* @__PURE__ */ jsx8(
    PageGeneratorProvider,
    {
      fields,
      formDataOnChange,
      state,
      setState,
      children
    }
  );
};
SectionGenerator.displayName = "SectionGenerator";
export {
  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.mjs.map