@bodynarf/react.components 1.4.19 → 1.4.20

package/components/form/component/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import "./styles.scss";
+import { FormConfig } from "../types";
+import { FieldValue } from "../redux";
+/** Form component input props type */
+export interface FormModuleProps extends FormConfig {
+    /** Handler for form submit event */
+    onSubmit: (values: Array<FieldValue>) => void;
+}
+/**
+ * Form component
+ * Allows to render a form by config
+ */
+declare const FormContextContainer: (formConfig: FormModuleProps) => JSX.Element;
+export default FormContextContainer;
+//# sourceMappingURL=index.d.ts.map

package/components/form/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,sCAAsC;AACtC,MAAM,WAAW,eAAgB,SAAQ,UAAU;IAC/C,oCAAoC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACjD;AAED;;;GAGG;AACH,QAAA,MAAM,oBAAoB,eAAgB,eAAe,KAAG,WAM3D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/components/form/component/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider } from "react-redux";
+import "./styles.scss";
+import store from "../redux/store";
+import FormContainer from "../components/container";
+/**
+ * Form component
+ * Allows to render a form by config
+ */
+const FormContextContainer = (formConfig) => {
+    return (_jsx(Provider, { store: store, children: _jsx(FormContainer, { ...formConfig }) }));
+};
+export default FormContextContainer;

package/components/form/component/styles.scss

@@ -0,0 +1,33 @@
+.bbr-form {
+    &__row {
+        &--has-errors {
+            .column {
+                padding-bottom: 0.25rem;
+            }
+        }
+    }
+
+    &__field {
+        &--vertically-center {
+            display: flex;
+            align-items: center;
+        }
+
+        &--is-checkbox {
+            .field-label {
+                padding-top: 0.15em;
+            }
+        }
+
+        .field-label {
+            max-width: 8rem;
+            flex-basis: auto;
+
+            & label.is-required::after {
+                content: "*";
+                color: red;
+                margin-left: 0.25rem;
+            }
+        }
+    }
+}

package/components/form/components/cell/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { GridCell, FormItem } from "../../types";
+/** Grid cell component props */
+interface CellProps {
+    /** Field */
+    item: FormItem<any>;
+    /** Cell configuration */
+    cellConfig: GridCell;
+}
+/** Layout row cell */
+declare const Cell: ({ item, cellConfig }: CellProps) => JSX.Element;
+export default Cell;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/cell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/cell/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIjD,gCAAgC;AAChC,UAAU,SAAS;IACf,YAAY;IACZ,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEpB,yBAAyB;IACzB,UAAU,EAAE,QAAQ,CAAC;CACxB;AAED,sBAAsB;AACtB,QAAA,MAAM,IAAI,yBAA0B,SAAS,KAAG,WAQ/C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/form/components/cell/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormItemViewComponent } from "../item";
+;
+/** Layout row cell */
+const Cell = ({ item, cellConfig }) => {
+    return (_jsx("div", { className: cellConfig.className, children: _jsx(FormItemViewComponent, { ...item }) }));
+};
+export default Cell;

package/components/form/components/container/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { FormState } from "../../redux";
+import { FormModuleProps } from "../../component";
+/** Form container props type */
+interface FormContainerComponentProps extends Omit<FormState, 'initialConfig' | 'purityState'> {
+    /** Form initial configuration */
+    formCfg: FormModuleProps;
+    /**
+     * Submit form action.
+     * Callback for successfull form validation
+     */
+    submitForm: () => void;
+}
+/** Form container component */
+declare const FormContainer: import("react-redux").ConnectedComponent<({ items, state, valuesStorage, formCfg, submitForm }: FormContainerComponentProps) => JSX.Element, {
+    onSubmit: (values: import("../../redux").FieldValue[]) => void;
+    name: string;
+    caption?: string | undefined;
+    items: import("../../types").Field<any>[];
+    context?: import("react").Context<import("react-redux").ReactReduxContextValue<any, import("redux").AnyAction>> | undefined;
+    store?: import("redux").Store<any, import("redux").AnyAction> | undefined;
+}>;
+export default FormContainer;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/container/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAmC,SAAS,EAAE,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAuClD,gCAAgC;AAChC,UAAU,2BAA4B,SAAQ,IAAI,CAAC,SAAS,EAAE,eAAe,GAAG,aAAa,CAAC;IAE1F,iCAAiC;IACjC,OAAO,EAAE,eAAe,CAAC;IAEzB;;;OAGG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,+BAA+B;AAC/B,QAAA,MAAM,aAAa,kGA7ChB,2BAA2B,KAAG,WAAW;;;;;;;EAmDnB,CAAC;AAE1B,eAAe,aAAa,CAAC"}

package/components/form/components/container/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { useDispatch, connect } from "react-redux";
+import Form from "../form";
+import { getInitAction, getSetFormStatus } from "../../redux";
+import { submitFormAsync } from "../../redux/actions";
+import Button from "../../../button";
+const FormContainerComponent = ({ items, state, valuesStorage, formCfg, submitForm }) => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        if (state === "init") {
+            dispatch(getInitAction(formCfg));
+        }
+        else if (state === "submited") {
+            formCfg.onSubmit(valuesStorage);
+            dispatch(getSetFormStatus("idle"));
+        }
+    }, [state]);
+    const onSubmitClick = useCallback(submitForm, [submitForm]);
+    return (_jsxs(_Fragment, { children: [_jsx(Form, { items: items, name: formCfg.name, caption: formCfg.caption }), _jsx(Button, { onClick: onSubmitClick, caption: "Submit", type: "success", disabled: state === "validating" })] }));
+};
+/** Form container component */
+const FormContainer = connect(({ items, state, valuesStorage }, props) => ({ items, state, valuesStorage, formCfg: props }), {
+    submitForm: submitFormAsync,
+})(FormContainerComponent);
+export default FormContainer;

package/components/form/components/form/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FormConfig, FormItem } from "../../types";
+/** Form component props type */
+interface FormProps extends Omit<FormConfig, 'items'> {
+    /** Form caption */
+    items: Array<FormItem<any>>;
+}
+/** Layout form group */
+declare const Form: ({ name, caption, items }: FormProps) => JSX.Element;
+export default Form;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAInD,gCAAgC;AAChC,UAAU,SAAU,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IACjD,mBAAmB;IACnB,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAC/B;AAED,wBAAwB;AACxB,QAAA,MAAM,IAAI,6BAA8B,SAAS,KAAG,WAuBnD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/form/components/form/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Row from "../row";
+import { getRows } from "../../utils/grid";
+/** Layout form group */
+const Form = ({ name, caption, items }) => {
+    const rows = useMemo(() => getRows(items), [items]);
+    return (_jsxs("div", { className: "bbr-form", "data-form": name, role: "form", children: [caption &&
+                _jsx("div", { className: "content", children: _jsx("h3", { className: "is-title", children: caption }) }), _jsx("section", { children: rows.map((x, i) => _jsx(Row, { items: x }, i)) })] }));
+};
+export default Form;

package/components/form/components/inputs/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CheckboxFormItem } from "../../../types";
+/** Checkbox component for boolean form item */
+declare const CheckBoxFormComponent: ({ modelConfig, name, viewConfig, extension }: CheckboxFormItem) => JSX.Element;
+export default CheckBoxFormComponent;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/inputs/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/components/inputs/checkbox/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,+CAA+C;AAC/C,QAAA,MAAM,qBAAqB,iDAAkD,gBAAgB,KAAG,WAwB/F,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/components/form/components/inputs/checkbox/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { InputColor } from "../../../../primitives";
+import Checkbox from "../../../../primitives/checkbox";
+import { getSetFieldValueAction } from "../../../redux";
+import { getValidationState } from "../../../utils";
+/** Checkbox component for boolean form item */
+const CheckBoxFormComponent = ({ modelConfig, name, viewConfig, extension }) => {
+    const dispatcher = useDispatch();
+    const state = useSelector(x => x.state);
+    const validationState = getValidationState(modelConfig);
+    const onValueChange = useCallback((value) => dispatcher(getSetFieldValueAction(name, value)), [name]);
+    return (_jsx(Checkbox, { className: viewConfig.className, defaultValue: modelConfig.defaultValue, onValueChange: onValueChange, label: {
+            caption: viewConfig.caption,
+            horizontal: true,
+        }, disabled: viewConfig.disabled || state === "validating", validationState: validationState, readonly: state === "validating", isFormLabel: true, withoutBorder: extension?.withoutBorder ?? false, style: InputColor.Link }));
+};
+export default CheckBoxFormComponent;

package/components/form/components/inputs/date/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import Date from "../../../../primitives/date";
+import { FormItem } from "../../../types";
+/** Date picker component for date form item */
+declare const DateFormComponent: ({ modelConfig, name, viewConfig }: FormItem<Date>) => JSX.Element;
+export default DateFormComponent;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/inputs/date/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/components/inputs/date/index.tsx"],"names":[],"mappings":";AAIA,OAAO,IAAI,MAAM,6BAA6B,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,+CAA+C;AAC/C,QAAA,MAAM,iBAAiB,sCAAuC,SAAS,IAAI,CAAC,KAAG,WAsB9E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/form/components/inputs/date/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Date from "../../../../primitives/date";
+import { getSetFieldValueAction } from "../../../redux";
+import { getValidationState } from "../../../utils";
+/** Date picker component for date form item */
+const DateFormComponent = ({ modelConfig, name, viewConfig }) => {
+    const dispatcher = useDispatch();
+    const state = useSelector(x => x.state);
+    const validationState = getValidationState(modelConfig);
+    const onValueChange = useCallback((value) => dispatcher(getSetFieldValueAction(name, value)), [name]);
+    return (_jsx(Date, { name: name, className: viewConfig.className, defaultValue: modelConfig.defaultValue, onValueChange: onValueChange, label: {
+            caption: viewConfig.caption,
+            horizontal: true,
+            className: modelConfig.required ? "is-required" : ""
+        }, disabled: viewConfig.disabled || state === "validating", validationState: validationState }));
+};
+export default DateFormComponent;

package/components/form/components/inputs/lookup/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { LookupFormItem } from "../../../types";
+/** Dropdown component for lookup form item */
+declare const LookupFormComponent: ({ modelConfig, name, viewConfig, extension }: LookupFormItem) => JSX.Element;
+export default LookupFormComponent;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/inputs/lookup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/components/inputs/lookup/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,8CAA8C;AAC9C,QAAA,MAAM,mBAAmB,iDAAkD,cAAc,KAAG,WA0B3F,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/components/form/components/inputs/lookup/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Dropdown from "../../../../dropdown";
+import { getSetFieldValueAction } from "../../../redux";
+import { getValidationState } from "../../../utils";
+/** Dropdown component for lookup form item */
+const LookupFormComponent = ({ modelConfig, name, viewConfig, extension }) => {
+    const dispatcher = useDispatch();
+    const state = useSelector(x => x.state);
+    const validationState = getValidationState(modelConfig);
+    const onSelect = useCallback((value) => dispatcher(getSetFieldValueAction(name, value)), [name]);
+    return (_jsx(Dropdown, { className: viewConfig.className, value: modelConfig.value, onSelect: onSelect, label: {
+            caption: viewConfig.caption,
+            horizontal: true,
+            className: modelConfig.required ? "is-required" : ""
+        }, disabled: viewConfig.disabled || state === "validating", validationState: validationState, placeholder: viewConfig.caption, hideOnOuterClick: true, deselectable: true, items: extension?.items ?? [], listMaxHeight: extension?.listMaxHeight?.toString() }));
+};
+export default LookupFormComponent;

package/components/form/components/inputs/multiline/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FormItem } from "../../../types";
+/** Multiline component for multiline text form item */
+declare const MultilineFormComponent: ({ modelConfig, name, viewConfig }: FormItem<string>) => JSX.Element;
+export default MultilineFormComponent;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/inputs/multiline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/components/inputs/multiline/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,uDAAuD;AACvD,QAAA,MAAM,sBAAsB,sCAAuC,SAAS,MAAM,CAAC,KAAG,WAuBrF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/components/form/components/inputs/multiline/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Multiline from "../../../../primitives/multiline";
+import { getSetFieldValueAction } from "../../../redux";
+import { getValidationState } from "../../../utils";
+/** Multiline component for multiline text form item */
+const MultilineFormComponent = ({ modelConfig, name, viewConfig }) => {
+    const dispatcher = useDispatch();
+    const state = useSelector(x => x.state);
+    const validationState = getValidationState(modelConfig);
+    const onValueChange = useCallback((value) => dispatcher(getSetFieldValueAction(name, value)), [name]);
+    return (_jsx(Multiline, { name: name, className: viewConfig.className, defaultValue: modelConfig.defaultValue, onValueChange: onValueChange, label: {
+            caption: viewConfig.caption,
+            horizontal: true,
+            className: modelConfig.required ? "is-required" : ""
+        }, disabled: viewConfig.disabled || state === "validating", validationState: validationState, placeholder: viewConfig.caption }));
+};
+export default MultilineFormComponent;

package/components/form/components/inputs/number/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FormItem } from "../../../types";
+/** Number picker component for number form item */
+declare const NumberFormComponent: ({ modelConfig, name, viewConfig }: FormItem<number>) => JSX.Element;
+export default NumberFormComponent;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/inputs/number/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/components/inputs/number/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,mDAAmD;AACnD,QAAA,MAAM,mBAAmB,sCAAuC,SAAS,MAAM,CAAC,KAAG,WAuBlF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/components/form/components/inputs/number/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Number from "../../../../primitives/number";
+import { getSetFieldValueAction } from "../../../redux";
+import { getValidationState } from "../../../utils";
+/** Number picker component for number form item */
+const NumberFormComponent = ({ modelConfig, name, viewConfig }) => {
+    const dispatcher = useDispatch();
+    const state = useSelector(x => x.state);
+    const validationState = getValidationState(modelConfig);
+    const onValueChange = useCallback((value) => dispatcher(getSetFieldValueAction(name, value)), [name]);
+    return (_jsx(Number, { name: name, className: viewConfig.className, defaultValue: modelConfig.defaultValue, onValueChange: onValueChange, label: {
+            caption: viewConfig.caption,
+            horizontal: true,
+            className: modelConfig.required ? "is-required" : ""
+        }, disabled: viewConfig.disabled || state === "validating", validationState: validationState, placeholder: viewConfig.caption }));
+};
+export default NumberFormComponent;

package/components/form/components/inputs/password/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FormItem } from "../../../types";
+/** Password component for password text form item */
+declare const PasswordFormComponent: ({ modelConfig, name, viewConfig }: FormItem<string>) => JSX.Element;
+export default PasswordFormComponent;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/inputs/password/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/components/inputs/password/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,qDAAqD;AACrD,QAAA,MAAM,qBAAqB,sCAAuC,SAAS,MAAM,CAAC,KAAG,WAuBpF,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/components/form/components/inputs/password/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Password from "../../../../primitives/password";
+import { getSetFieldValueAction } from "../../../redux";
+import { getValidationState } from "../../../utils";
+/** Password component for password text form item */
+const PasswordFormComponent = ({ modelConfig, name, viewConfig }) => {
+    const dispatcher = useDispatch();
+    const state = useSelector(x => x.state);
+    const validationState = getValidationState(modelConfig);
+    const onValueChange = useCallback((value) => dispatcher(getSetFieldValueAction(name, value)), [name]);
+    return (_jsx(Password, { name: name, className: viewConfig.className, onValueChange: onValueChange, label: {
+            caption: viewConfig.caption,
+            horizontal: true,
+            className: modelConfig.required ? "is-required" : ""
+        }, disabled: viewConfig.disabled || state === "validating", validationState: validationState, canShowPassword: true, placeholder: viewConfig.caption }));
+};
+export default PasswordFormComponent;

package/components/form/components/inputs/text/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FormItem } from "../../../types";
+/** Text component for single-line text form item */
+declare const TextFormComponent: ({ modelConfig, name, viewConfig }: FormItem<string>) => JSX.Element;
+export default TextFormComponent;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/inputs/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/components/inputs/text/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C,oDAAoD;AACpD,QAAA,MAAM,iBAAiB,sCAAuC,SAAS,MAAM,CAAC,KAAG,WA0BhF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/form/components/inputs/text/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { isNullOrEmpty } from "@bodynarf/utils";
+import Text from "../../../../primitives/text";
+import { getSetFieldValueAction } from "../../../redux";
+import { getValidationState } from "../../../utils";
+/** Text component for single-line text form item */
+const TextFormComponent = ({ modelConfig, name, viewConfig }) => {
+    const dispatcher = useDispatch();
+    const state = useSelector(x => x.state);
+    const validationState = getValidationState(modelConfig);
+    const onValueChange = useCallback((value) => {
+        const newValue = isNullOrEmpty(value) ? undefined : value;
+        dispatcher(getSetFieldValueAction(name, newValue));
+    }, [name]);
+    return (_jsx(Text, { name: name, className: viewConfig.className, defaultValue: modelConfig.defaultValue, onValueChange: onValueChange, label: {
+            caption: viewConfig.caption,
+            horizontal: true,
+            className: modelConfig.required ? "is-required" : ""
+        }, disabled: viewConfig.disabled || state === "validating", validationState: validationState, placeholder: viewConfig.caption }));
+};
+export default TextFormComponent;

package/components/form/components/item/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FormItem } from "../../types";
+export declare const FormItemViewComponent: (item: FormItem<any>) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/item/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAoB,QAAQ,EAAkB,MAAM,aAAa,CAAC;AAEzE,eAAO,MAAM,qBAAqB,SAAU,SAAS,GAAG,CAAC,KAAG,WAmB3D,CAAC"}

package/components/form/components/item/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import CheckBoxFormComponent from "../inputs/checkbox";
+import DateFormComponent from "../inputs/date";
+import LookupFormComponent from "../inputs/lookup";
+import MultilineFormComponent from "../inputs/multiline";
+import NumberFormComponent from "../inputs/number";
+import PasswordFormComponent from "../inputs/password";
+import TextFormComponent from "../inputs/text";
+export const FormItemViewComponent = (item) => {
+    switch (item.viewConfig.type) {
+        case "text":
+            return _jsx(TextFormComponent, { ...item });
+        case "multiline":
+            return _jsx(MultilineFormComponent, { ...item });
+        case "checkbox":
+            return _jsx(CheckBoxFormComponent, { ...item });
+        case "number":
+            return _jsx(NumberFormComponent, { ...item });
+        case "date":
+            return _jsx(DateFormComponent, { ...item });
+        case "lookup":
+            return _jsx(LookupFormComponent, { ...item });
+        case "password":
+            return _jsx(PasswordFormComponent, { ...item });
+        default:
+            return _jsx(_Fragment, { children: "INVALID COMPONENT" });
+    }
+};

package/components/form/components/row/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FormItem } from "../../types";
+interface RowProps {
+    /** Row fields */
+    items: Array<FormItem<any>>;
+}
+/** Layout row with fields */
+declare const Row: ({ items }: RowProps) => JSX.Element;
+export default Row;
+//# sourceMappingURL=index.d.ts.map

package/components/form/components/row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/row/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,QAAQ,EAA2B,MAAM,aAAa,CAAC;AAKhE,UAAU,QAAQ;IACd,iBAAiB;IACjB,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;CAC/B;AAED,6BAA6B;AAC7B,QAAA,MAAM,GAAG,cAAe,QAAQ,KAAG,WAkClC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/form/components/row/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "@bodynarf/utils";
+import { useMemo } from "react";
+import { FormItemValidationState } from "../../types";
+import { getSortedColumns } from "../../utils/grid";
+import Cell from "../cell";
+;
+/** Layout row with fields */
+const Row = ({ items }) => {
+    const columns = useMemo(() => {
+        const sortedColumns = getSortedColumns(items);
+        return sortedColumns.map(x => ({
+            item: items.find(({ name }) => name === x.name),
+            cellConfig: x,
+        }));
+    }, [items]);
+    const className = getClassName([
+        "columns",
+        "m-0",
+        "bbr-form__row",
+        columns.some(({ item }) => item.modelConfig.validationState === FormItemValidationState.Invalid)
+            ? "bbr-form__row--has-errors"
+            : ""
+    ]);
+    return (_jsx("div", { className: className, children: columns.map(x => _jsx(Cell, { ...x }, x.item.name)) }));
+};
+export default Row;

package/components/form/index.d.ts

@@ -0,0 +1,3 @@
+import Form from "./component";
+export default Form;
+//# sourceMappingURL=index.d.ts.map

package/components/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,eAAe,IAAI,CAAC"}

package/components/form/index.js

@@ -0,0 +1,2 @@
+import Form from "./component";
+export default Form;

package/components/form/redux/actionCreators/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./initForm";
+export * from "./setFieldValue";
+export * from "./submitForm";
+export * from "./validateField";
+export * from "./setFormState";
+export * from "./setValidationResult";
+//# sourceMappingURL=index.d.ts.map

package/components/form/redux/actionCreators/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/redux/actionCreators/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/components/form/redux/actionCreators/index.js

@@ -0,0 +1,6 @@
+export * from "./initForm";
+export * from "./setFieldValue";
+export * from "./submitForm";
+export * from "./validateField";
+export * from "./setFormState";
+export * from "./setValidationResult";

package/components/form/redux/actionCreators/initForm.d.ts

@@ -0,0 +1,9 @@
+import { FormConfig } from "../../types";
+import { ActionWithPayload } from "../types";
+/**
+ * Get redux action "Init form state"
+ * @param {object} initialConfig Initial form configuration
+ * @returns State updating action
+ */
+export declare const getInitAction: (initialConfig: FormConfig) => ActionWithPayload;
+//# sourceMappingURL=initForm.d.ts.map

package/components/form/redux/actionCreators/initForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/redux/actionCreators/initForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,eAAO,MAAM,aAAa,kBAAmB,UAAU,KAAG,iBAKzD,CAAC"}

package/components/form/redux/actionCreators/initForm.js

@@ -0,0 +1,12 @@
+import { initForm } from "../actionTypes";
+/**
+ * Get redux action "Init form state"
+ * @param {object} initialConfig Initial form configuration
+ * @returns State updating action
+ */
+export const getInitAction = (initialConfig) => {
+    return ({
+        type: initForm,
+        payload: { initialConfig }
+    });
+};

package/components/form/redux/actionCreators/setFieldValue.d.ts

@@ -0,0 +1,9 @@
+import { ActionWithPayload } from "../types";
+/**
+ * Get redux action "Set field value"
+ * @param {string} fieldName Field name
+ * @param {any | undefined} fieldValue Field value
+ * @returns State updating action
+ */
+export declare const getSetFieldValueAction: (fieldName: string, fieldValue: any | undefined) => ActionWithPayload;
+//# sourceMappingURL=setFieldValue.d.ts.map

package/components/form/redux/actionCreators/setFieldValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setFieldValue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/redux/actionCreators/setFieldValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,cAAe,MAAM,cAAc,GAAG,GAAG,SAAS,KAAG,iBAUvF,CAAC"}

package/components/form/redux/actionCreators/setFieldValue.js

@@ -0,0 +1,18 @@
+import { setFieldValue } from "../actionTypes";
+/**
+ * Get redux action "Set field value"
+ * @param {string} fieldName Field name
+ * @param {any | undefined} fieldValue Field value
+ * @returns State updating action
+ */
+export const getSetFieldValueAction = (fieldName, fieldValue) => {
+    return ({
+        type: setFieldValue,
+        payload: {
+            field: {
+                name: fieldName,
+                value: fieldValue
+            }
+        }
+    });
+};

package/components/form/redux/actionCreators/setFormState.d.ts

@@ -0,0 +1,8 @@
+import { ActionWithPayload, FormStatus } from "../types";
+/**
+ * Get redux action "Set form state status"
+ * @param newStatus New form state status
+ * @returns State updating action
+ */
+export declare const getSetFormStatus: (newStatus: FormStatus) => ActionWithPayload;
+//# sourceMappingURL=setFormState.d.ts.map

package/components/form/redux/actionCreators/setFormState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setFormState.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/redux/actionCreators/setFormState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGzD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,cAAe,UAAU,KAAG,iBAOxD,CAAC"}