@conduction/components 2.2.19 → 2.2.21

package/lib/components/denhaag-wrappers/pagination/Pagination.css

@@ -1,120 +1,120 @@
-.denhaag-pagination {
-  --denhaag-pagination-align: center;
-
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: var(--denhaag-pagination-align);
-}
-
-@media (min-width: 640px) {
-  .denhaag-pagination,
-  .denhaag-pagination--start {
-    --denhaag-pagination-align: flex-start;
-  }
-
-  .denhaag-pagination--center {
-    --denhaag-pagination-align: center;
-  }
-
-  .denhaag-pagination--end {
-    --denhaag-pagination-align: end;
-  }
-}
-
-.denhaag-pagination__links {
-  display: flex;
-  flex-direction: row;
-}
-
-.denhaag-pagination__link {
-  aspect-ratio: 1 / 1;
-  align-items: center;
-  background-color: var(--denhaag-pagination-background-color, transparent);
-  border: 0;
-  border-radius: var(
-    --denhaag-pagination-border-radius,
-    var(--denhaag-border-radius)
-  );
-  color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
-  display: flex;
-  height: var(--denhaag-pagination-size);
-  justify-content: center;
-  line-height: 1.5;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  width: var(--denhaag-pagination-size);
-  font-style: normal;
-  font-weight: var(--denhaag-pagination-font-weight);
-  font-size: var(--denhaag-pagination-font-size);
-}
-
-.denhaag-pagination__link:hover,
-.denhaag-pagination__link--hover {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
-  cursor: pointer;
-}
-
-.denhaag-pagination__link:focus,
-.denhaag-pagination__link--focus {
-  outline: var(--denhaag-link-focus-outline);
-  border-radius: 0;
-}
-
-.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
-
-  pointer-events: none;
-}
-
-.denhaag-pagination__link--arrow {
-  --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
-  --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
-}
-
-[dir="rtl"] .denhaag-pagination__link--arrow {
-  transform: scaleX(-1);
-}
-
-.denhaag-pagination__link + .denhaag-pagination__links,
-.denhaag-pagination__links + .denhaag-pagination__link {
-  margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
-  overflow: hidden;
-  pointer-events: none;
-  text-indent: calc(var(--denhaag-pagination-size) * 2);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
-  content: "...";
-  left: calc(50% - 7px);
-  line-height: 0;
-  position: absolute;
-  text-indent: 0;
-  vertical-align: baseline;
-}
-
-.denhaag-pagination__link--current {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
-  --denhaag-pagination-font-weight: var(
-    --denhaag-pagination-link-current-font-weight
-  );
-}
-
-.denhaag-pagination__link--current.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--current.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(
-    --denhaag-pagination-link-current-disabled-color
-  );
-  --denhaag-pagination-background-color: var(
-    --denhaag-pagination-link-current-disabled-background-color
-  );
-}
-
-.denhaag-pagination .denhaag-icon {
-  font-size: inherit;
-}
+.denhaag-pagination {
+  --denhaag-pagination-align: center;
+
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--denhaag-pagination-align);
+}
+
+@media (min-width: 640px) {
+  .denhaag-pagination,
+  .denhaag-pagination--start {
+    --denhaag-pagination-align: flex-start;
+  }
+
+  .denhaag-pagination--center {
+    --denhaag-pagination-align: center;
+  }
+
+  .denhaag-pagination--end {
+    --denhaag-pagination-align: end;
+  }
+}
+
+.denhaag-pagination__links {
+  display: flex;
+  flex-direction: row;
+}
+
+.denhaag-pagination__link {
+  aspect-ratio: 1 / 1;
+  align-items: center;
+  background-color: var(--denhaag-pagination-background-color, transparent);
+  border: 0;
+  border-radius: var(
+    --denhaag-pagination-border-radius,
+    var(--denhaag-border-radius)
+  );
+  color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
+  display: flex;
+  height: var(--denhaag-pagination-size);
+  justify-content: center;
+  line-height: 1.5;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  width: var(--denhaag-pagination-size);
+  font-style: normal;
+  font-weight: var(--denhaag-pagination-font-weight);
+  font-size: var(--denhaag-pagination-font-size);
+}
+
+.denhaag-pagination__link:hover,
+.denhaag-pagination__link--hover {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
+  cursor: pointer;
+}
+
+.denhaag-pagination__link:focus,
+.denhaag-pagination__link--focus {
+  outline: var(--denhaag-link-focus-outline);
+  border-radius: 0;
+}
+
+.denhaag-pagination__link:disabled,
+.denhaag-pagination__link--disabled {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
+
+  pointer-events: none;
+}
+
+.denhaag-pagination__link--arrow {
+  --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
+  --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
+}
+
+[dir="rtl"] .denhaag-pagination__link--arrow {
+  transform: scaleX(-1);
+}
+
+.denhaag-pagination__link + .denhaag-pagination__links,
+.denhaag-pagination__links + .denhaag-pagination__link {
+  margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
+}
+
+.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
+  overflow: hidden;
+  pointer-events: none;
+  text-indent: calc(var(--denhaag-pagination-size) * 2);
+}
+
+.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  vertical-align: baseline;
+}
+
+.denhaag-pagination__link--current {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
+  --denhaag-pagination-font-weight: var(
+    --denhaag-pagination-link-current-font-weight
+  );
+}
+
+.denhaag-pagination__link--current.denhaag-pagination__link:disabled,
+.denhaag-pagination__link--current.denhaag-pagination__link--disabled {
+  --denhaag-pagination-color: var(
+    --denhaag-pagination-link-current-disabled-color
+  );
+  --denhaag-pagination-background-color: var(
+    --denhaag-pagination-link-current-disabled-background-color
+  );
+}
+
+.denhaag-pagination .denhaag-icon {
+  font-size: inherit;
+}

package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import "./Pagination.css";
-interface PaginationProps {
-    pages: number;
-    currentPage: number;
-    setPage: (page: number) => any;
-}
-export declare const Pagination: ({ pages, currentPage, setPage }: PaginationProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import "./Pagination.css";
+interface PaginationProps {
+    pages: number;
+    currentPage: number;
+    setPage: (page: number) => any;
+}
+export declare const Pagination: ({ pages, currentPage, setPage }: PaginationProps) => JSX.Element;
+export {};

package/lib/components/denhaag-wrappers/pagination/Pagination.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import "./Pagination.css";
-export const Pagination = ({ pages, currentPage, setPage }) => {
-    return (_jsxs("nav", { className: "denhaag-pagination", children: [_jsx(PreviousButton, { previousPage: currentPage > 1 ? currentPage - 1 : undefined, ...{ setPage } }), _jsx("span", { className: "denhaag-pagination__links", role: "group", children: Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (_jsx(Link, { ...{ page }, current: page === currentPage, ...{ setPage } }, idx))) }), _jsx(NextButton, { nextPage: currentPage < pages ? currentPage + 1 : undefined, ...{ setPage } })] }));
-};
-const Link = ({ page, current, setPage }) => {
-    return (_jsx("a", { "aria-current": current && "page", "aria-label": `Page ${page}`, className: clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current"), onClick: () => setPage(page), children: page }));
-};
-const PreviousButton = ({ previousPage, setPage }) => {
-    return (_jsx("a", { "aria-label": "Previous page", className: clsx("denhaag-pagination__link denhaag-pagination__link--arrow", !previousPage && "denhaag-pagination__link--disabled"), onClick: () => previousPage && setPage(previousPage), rel: "prev", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z", fill: "currentColor" }) }) }));
-};
-const NextButton = ({ nextPage, setPage }) => {
-    return (_jsx("a", { "aria-label": "Next page", className: clsx("denhaag-pagination__link denhaag-pagination__link--arrow", !nextPage && "denhaag-pagination__link--disabled"), onClick: () => nextPage && setPage(nextPage), rel: "next", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z", fill: "currentColor" }) }) }));
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import "./Pagination.css";
+export const Pagination = ({ pages, currentPage, setPage }) => {
+    return (_jsxs("nav", { className: "denhaag-pagination", children: [_jsx(PreviousButton, { previousPage: currentPage > 1 ? currentPage - 1 : undefined, ...{ setPage } }), _jsx("span", { className: "denhaag-pagination__links", role: "group", children: Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (_jsx(Link, { ...{ page }, current: page === currentPage, ...{ setPage } }, idx))) }), _jsx(NextButton, { nextPage: currentPage < pages ? currentPage + 1 : undefined, ...{ setPage } })] }));
+};
+const Link = ({ page, current, setPage }) => {
+    return (_jsx("a", { "aria-current": current && "page", "aria-label": `Page ${page}`, className: clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current"), onClick: () => setPage(page), children: page }));
+};
+const PreviousButton = ({ previousPage, setPage }) => {
+    return (_jsx("a", { "aria-label": "Previous page", className: clsx("denhaag-pagination__link denhaag-pagination__link--arrow", !previousPage && "denhaag-pagination__link--disabled"), onClick: () => previousPage && setPage(previousPage), rel: "prev", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z", fill: "currentColor" }) }) }));
+};
+const NextButton = ({ nextPage, setPage }) => {
+    return (_jsx("a", { "aria-label": "Next page", className: clsx("denhaag-pagination__link denhaag-pagination__link--arrow", !nextPage && "denhaag-pagination__link--disabled"), onClick: () => nextPage && setPage(nextPage), rel: "next", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z", fill: "currentColor" }) }) }));
+};

package/lib/components/editableTableRow/EditableTableRow.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-interface InputTypes {
-    inputType: "text" | "email";
-}
-interface EditableTableRowProps {
-    thead: string;
-    value: string;
-    saveLabel: string;
-    cancelLabel: string;
-    editLabel: string;
-    handleSave: (value: any) => void;
-}
-export declare const EditableTableRow: ({ thead, value, inputType, editLabel, cancelLabel, saveLabel, handleSave, }: EditableTableRowProps & InputTypes) => JSX.Element;
-export {};
+/// <reference types="react" />
+interface InputTypes {
+    inputType: "text" | "email";
+}
+interface EditableTableRowProps {
+    thead: string;
+    value: string;
+    saveLabel: string;
+    cancelLabel: string;
+    editLabel: string;
+    handleSave: (value: any) => void;
+}
+export declare const EditableTableRow: ({ thead, value, inputType, editLabel, cancelLabel, saveLabel, handleSave, }: EditableTableRowProps & InputTypes) => JSX.Element;
+export {};

package/lib/components/editableTableRow/EditableTableRow.js

@@ -1,31 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
-import * as styles from "./EditableTableRow.module.css";
-import * as React from "react";
-import { Link } from "@gemeente-denhaag/link";
-import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
-import { useForm } from "react-hook-form";
-import { InputEmail, InputText } from "../formFields";
-export const EditableTableRow = ({ thead, value, inputType, editLabel, cancelLabel, saveLabel, handleSave, }) => {
-    const [editing, setEditing] = React.useState(false);
-    return (_jsxs(TableRow, { children: [_jsx(TableHeader, { className: styles.th, children: thead }), editing && _jsx(EditingTableRow, { ...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel } }), !editing && _jsx(RegularTableRow, { ...{ value, setEditing, editLabel } })] }));
-};
-const RegularTableRow = ({ value, editLabel, setEditing }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: value }), _jsx(TableCell, { children: _jsx("div", { className: styles.editButton, onClick: () => setEditing(true), children: _jsx(Link, { icon: _jsx(EditIcon, {}), iconAlign: "start", children: editLabel }) }) })] }));
-};
-const EditingTableRow = ({ value, setEditing, handleSave, inputType, saveLabel, cancelLabel, }) => {
-    const { register, handleSubmit, formState: { errors }, } = useForm();
-    const onSubmit = (data) => {
-        handleSave(data.value);
-        setEditing(false);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { ...{ inputType, value, register, errors } }), _jsxs("div", { className: styles.editButtonsContainer, children: [_jsx("button", { type: "submit", className: styles.submit, children: _jsx(Link, { icon: _jsx(CheckedIcon, {}), iconAlign: "start", children: saveLabel }) }), _jsx("div", { onClick: () => setEditing(false), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", className: styles.cancel, children: cancelLabel }) })] })] }) }), _jsx(TableCell, {})] }));
-};
-const FormField = ({ inputType, value, register, errors }) => {
-    switch (inputType) {
-        case "email":
-            return _jsx(InputEmail, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
-        case "text":
-            return _jsx(InputText, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
-    }
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import * as styles from "./EditableTableRow.module.css";
+import * as React from "react";
+import { Link } from "@gemeente-denhaag/link";
+import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
+import { useForm } from "react-hook-form";
+import { InputEmail, InputText } from "../formFields";
+export const EditableTableRow = ({ thead, value, inputType, editLabel, cancelLabel, saveLabel, handleSave, }) => {
+    const [editing, setEditing] = React.useState(false);
+    return (_jsxs(TableRow, { children: [_jsx(TableHeader, { className: styles.th, children: thead }), editing && _jsx(EditingTableRow, { ...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel } }), !editing && _jsx(RegularTableRow, { ...{ value, setEditing, editLabel } })] }));
+};
+const RegularTableRow = ({ value, editLabel, setEditing }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: value }), _jsx(TableCell, { children: _jsx("div", { className: styles.editButton, onClick: () => setEditing(true), children: _jsx(Link, { icon: _jsx(EditIcon, {}), iconAlign: "start", children: editLabel }) }) })] }));
+};
+const EditingTableRow = ({ value, setEditing, handleSave, inputType, saveLabel, cancelLabel, }) => {
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    const onSubmit = (data) => {
+        handleSave(data.value);
+        setEditing(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { ...{ inputType, value, register, errors } }), _jsxs("div", { className: styles.editButtonsContainer, children: [_jsx("button", { type: "submit", className: styles.submit, children: _jsx(Link, { icon: _jsx(CheckedIcon, {}), iconAlign: "start", children: saveLabel }) }), _jsx("div", { onClick: () => setEditing(false), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", className: styles.cancel, children: cancelLabel }) })] })] }) }), _jsx(TableCell, {})] }));
+};
+const FormField = ({ inputType, value, register, errors }) => {
+    switch (inputType) {
+        case "email":
+            return _jsx(InputEmail, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
+        case "text":
+            return _jsx(InputText, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
+    }
+};

package/lib/components/editableTableRow/EditableTableRow.module.css

@@ -1,25 +1,25 @@
-.th {
-  width: 35%;
-}
-
-.cancel {
-  color: var(--skeleton-color-grey-3) !important;
-}
-
-.editButtonsContainer {
-  display: flex;
-  margin-block-start: var(--skeleton-size-xs);
-}
-
-.editButtonsContainer > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.submit {
-  all: unset;
-}
-
-.editButton {
-  display: flex;
-  justify-content: flex-end;
-}
+.th {
+  width: 35%;
+}
+
+.cancel {
+  color: var(--skeleton-color-grey-3) !important;
+}
+
+.editButtonsContainer {
+  display: flex;
+  margin-block-start: var(--skeleton-size-xs);
+}
+
+.editButtonsContainer > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.submit {
+  all: unset;
+}
+
+.editButton {
+  display: flex;
+  justify-content: flex-end;
+}

package/lib/components/formFields/checkbox/Checkbox.module.css

@@ -1,7 +1,7 @@
-.container {
-  user-select: none;
-}
-
-.container:hover {
-  cursor: pointer;
-}
+.container {
+  user-select: none;
+}
+
+.container:hover {
+  cursor: pointer;
+}

package/lib/components/formFields/checkbox/checkbox.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { IReactHookFormProps } from "./../types";
-export interface ICheckboxProps {
-    label: string;
-    name: string;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-}
-export declare const InputCheckbox: ({ name, validation, register, label, defaultChecked, disabled, }: ICheckboxProps & IReactHookFormProps) => JSX.Element;
+/// <reference types="react" />
+import { IReactHookFormProps } from "./../types";
+export interface ICheckboxProps {
+    label: string;
+    name: string;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+}
+export declare const InputCheckbox: ({ name, validation, register, label, defaultChecked, disabled, }: ICheckboxProps & IReactHookFormProps) => JSX.Element;

package/lib/components/formFields/checkbox/checkbox.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./Checkbox.module.css";
-export const InputCheckbox = ({ name, validation, register, label, defaultChecked, disabled, }) => (_jsxs("div", { className: styles.container, children: [_jsx("input", { type: "checkbox", id: `checkbox${name}`, ...{ defaultChecked, disabled }, ...register(name, { ...validation }) }), _jsx("label", { htmlFor: `checkbox${name}`, children: label })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./Checkbox.module.css";
+export const InputCheckbox = ({ name, validation, register, label, defaultChecked, disabled, }) => (_jsxs("div", { className: styles.container, children: [_jsx("input", { type: "checkbox", id: `checkbox${name}`, ...{ defaultChecked, disabled }, ...register(name, { ...validation }) }), _jsx("label", { htmlFor: `checkbox${name}`, children: label })] }));

package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { Control, FieldValues } from "react-hook-form";
-import { IReactHookFormProps } from "../types";
-/**
- * Export KeyValue input component (wrapped in FormFieldGroup)
- */
-interface CreateKeyValueProps {
-    name: string;
-    control: Control<FieldValues, any>;
-    defaultValue?: IKeyValue[];
-    disabled?: boolean;
-    copyValue?: {
-        canCopy: boolean;
-        onCopied?: () => any;
-    };
-    hideErrorMessage?: boolean;
-}
-export interface IKeyValue {
-    key: string;
-    value: string;
-}
-export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { Control, FieldValues } from "react-hook-form";
+import { IReactHookFormProps } from "../types";
+/**
+ * Export KeyValue input component (wrapped in FormFieldGroup)
+ */
+interface CreateKeyValueProps {
+    name: string;
+    control: Control<FieldValues, any>;
+    defaultValue?: IKeyValue[];
+    disabled?: boolean;
+    copyValue?: {
+        canCopy: boolean;
+        onCopied?: () => any;
+    };
+    hideErrorMessage?: boolean;
+}
+export interface IKeyValue {
+    key: string;
+    value: string;
+}
+export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
+export {};

package/lib/components/formFields/createKeyValue/CreateKeyValue.js

@@ -1,40 +1,40 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as styles from "./CreateKeyValue.module.css";
-import { Controller } from "react-hook-form";
-import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, Textbox, Button, } from "@utrecht/component-library-react/dist/css-module";
-import clsx from "clsx";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { ErrorMessage } from "../errorMessage/ErrorMessage";
-export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }) => {
-    return (_jsx(Controller, { ...{ control, name, errors }, rules: validation, render: ({ field: { onChange } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
-        } }));
-};
-const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, }) => {
-    const [currentKey, setCurrentKey] = React.useState("");
-    const [currentValue, setCurrentValue] = React.useState("");
-    const [keyValues, setKeyValues] = React.useState(defaultValue ?? []);
-    const [currentCopyIdx, setCurrentCopyIdx] = React.useState();
-    const currentKeyRef = React.useRef(null);
-    const currentValueRef = React.useRef(null);
-    const handleCreate = () => {
-        const keyValue = { key: currentKey, value: currentValue };
-        setCurrentKey("");
-        setCurrentValue("");
-        setKeyValues([...keyValues, keyValue]);
-    };
-    const handleCopyToClipboard = (value, id) => {
-        navigator.clipboard.writeText(value);
-        setCurrentCopyIdx(id);
-        copyValue?.onCopied && copyValue.onCopied();
-    };
-    React.useEffect(() => {
-        defaultValue && setKeyValues(defaultValue);
-    }, [defaultValue]);
-    React.useEffect(() => {
-        handleChange(keyValues);
-    }, [keyValues]);
-    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), appearance: currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button", children: _jsx(FontAwesomeIcon, { icon: faCopy }) })), _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx(Textbox, { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx(Textbox, { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as styles from "./CreateKeyValue.module.css";
+import { Controller } from "react-hook-form";
+import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, Textbox, Button, } from "@utrecht/component-library-react/dist/css-module";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
+export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }) => {
+    return (_jsx(Controller, { ...{ control, name, errors }, rules: validation, render: ({ field: { onChange } }) => {
+            return (_jsxs(_Fragment, { children: [_jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+        } }));
+};
+const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, }) => {
+    const [currentKey, setCurrentKey] = React.useState("");
+    const [currentValue, setCurrentValue] = React.useState("");
+    const [keyValues, setKeyValues] = React.useState(defaultValue ?? []);
+    const [currentCopyIdx, setCurrentCopyIdx] = React.useState();
+    const currentKeyRef = React.useRef(null);
+    const currentValueRef = React.useRef(null);
+    const handleCreate = () => {
+        const keyValue = { key: currentKey, value: currentValue };
+        setCurrentKey("");
+        setCurrentValue("");
+        setKeyValues([...keyValues, keyValue]);
+    };
+    const handleCopyToClipboard = (value, id) => {
+        navigator.clipboard.writeText(value);
+        setCurrentCopyIdx(id);
+        copyValue?.onCopied && copyValue.onCopied();
+    };
+    React.useEffect(() => {
+        defaultValue && setKeyValues(defaultValue);
+    }, [defaultValue]);
+    React.useEffect(() => {
+        handleChange(keyValues);
+    }, [keyValues]);
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), appearance: currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button", children: _jsx(FontAwesomeIcon, { icon: faCopy }) })), _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx(Textbox, { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx(Textbox, { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
+};