@lmb-it/kitsconcerto-native 0.1.236

package/form-renderer/components/fields/Combined/index.cjs

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var index_native = require('../../../../form/helpers/FormContainer/index.cjs');
+var index_native$1 = require('../../FormRenderer/index.cjs');
+var index = require('../../../../layout/Flex/index.cjs');
+
+const CombinedElement = ({
+  element,
+  control,
+  getValues,
+  groupField,
+  focusedField,
+  setFocusedField,
+  fieldLogic
+}) => {
+  const {
+    isShown,
+    label,
+    helperText,
+    field,
+    fieldState,
+    isRequired,
+    isDisabled,
+    formContext,
+    hideError
+  } = fieldLogic;
+  const combinedElement = element;
+  const { grid, output, elements: childElements } = combinedElement;
+  const childIds = React.useMemo(
+    () => childElements.map((el) => el.id),
+    [childElements]
+  );
+  const childValues = reactHookForm.useWatch({
+    name: childIds,
+    control
+  });
+  React.useEffect(() => {
+    const outputTokens = output.trim().split(/\s+/);
+    let computedValue;
+    if (outputTokens.length === 1) {
+      const childIndex = childIds.indexOf(outputTokens[0]);
+      computedValue = childIndex >= 0 ? childValues[childIndex] : void 0;
+    } else {
+      computedValue = outputTokens.map((token) => {
+        const childIndex = childIds.indexOf(token);
+        return childIndex >= 0 ? childValues[childIndex] ?? "" : "";
+      }).filter((v) => v !== "").join(" ");
+    }
+    const currentValue = formContext.getValues(field.name);
+    if (currentValue !== computedValue) {
+      formContext.setValue(field.name, computedValue, {
+        shouldValidate: true,
+        shouldDirty: true
+      });
+    }
+  }, [childValues, output, childIds, field.name, formContext]);
+  const attachedElements = React.useMemo(
+    () => childElements.map((el) => ({
+      ...el,
+      // Remove label and schema from children — parent handles these
+      label: void 0,
+      schema: void 0,
+      hideError: true,
+      attached: true
+    })),
+    [childElements]
+  );
+  if (!isShown) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      id: element.id,
+      label,
+      required: isRequired,
+      errors: fieldState.error?.message,
+      invalid: fieldState.invalid,
+      helperText,
+      hideError,
+      disabled: isDisabled,
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { w: "full", gap: 8, alignItems: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        index_native$1.FormRenderer,
+        {
+          elements: attachedElements,
+          control,
+          getValues,
+          groupField,
+          focusedField,
+          setFocusedField,
+          grid: {
+            columns: 12,
+            columnGap: 8,
+            rowGap: 0,
+            colSpan: 12,
+            ...grid
+          }
+        }
+      ) })
+    }
+  );
+};
+
+exports.CombinedElement = CombinedElement;
+exports.default = CombinedElement;
+//# sourceMappingURL=index.cjs.map

package/form-renderer/components/fields/Combined/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/Combined/index.tsx"],"sourcesContent":["import React, {useEffect, useMemo} from 'react';\nimport {type FieldValues, useWatch} from 'react-hook-form';\nimport type {ICombined, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../../_compat\";\nimport KitsContainer from \"../../../../form/helpers/FormContainer\";\nimport {FormRenderer} from \"../../FormRenderer\";\n\n/**\n * Combined element: groups multiple child inputs under one logical field.\n *\n * - Renders a single KitsContainer with one label and one validation error.\n * - Child elements render with `attached: true` (no individual containers/labels).\n * - The parent's value is computed from child values via the `output` template.\n */\nexport const CombinedElement = <T extends FieldValues>({\n                                                           element,\n                                                           control,\n                                                           getValues,\n                                                           groupField,\n                                                           focusedField,\n                                                           setFocusedField,\n                                                           fieldLogic,\n                                                       }: UseFieldLogicElementProps<T>) => {\n\n    const {\n        isShown,\n        label,\n        helperText,\n        field,\n        fieldState,\n        isRequired,\n        isDisabled,\n        formContext,\n        hideError,\n    } = fieldLogic;\n\n    const combinedElement = element as ICombined<T>;\n    const {grid, output, elements: childElements} = combinedElement;\n\n    // Extract child field IDs for watching\n    const childIds = useMemo(() =>\n            childElements.map(el => el.id as string),\n        [childElements]\n    );\n\n    // Watch all child field values\n    const childValues = useWatch({\n        name: childIds as any,\n        control,\n    });\n\n    // Compute and sync the output value whenever child values change\n    useEffect(() => {\n        const outputTokens = output.trim().split(/\\s+/);\n        let computedValue: any;\n\n        if (outputTokens.length === 1) {\n            // Single token — map to that child's value directly\n            const childIndex = childIds.indexOf(outputTokens[0]);\n            computedValue = childIndex >= 0 ? childValues[childIndex] : undefined;\n        } else {\n            // Multi-token — concatenate child values with spaces\n            computedValue = outputTokens\n                .map(token => {\n                    const childIndex = childIds.indexOf(token);\n                    return childIndex >= 0 ? (childValues[childIndex] ?? '') : '';\n                })\n                .filter(v => v !== '')\n                .join(' ');\n        }\n\n        // Only update if the value has actually changed\n        const currentValue = formContext.getValues(field.name);\n        if (currentValue !== computedValue) {\n            formContext.setValue(field.name, computedValue, {\n                shouldValidate: true,\n                shouldDirty: true,\n            });\n        }\n    }, [childValues, output, childIds, field.name, formContext]);\n\n    // Prepare child elements with attached=true to strip their containers/labels\n    const attachedElements = useMemo(() =>\n            childElements.map(el => ({\n                ...el,\n                // Remove label and schema from children — parent handles these\n                label: undefined,\n                schema: undefined,\n                hideError: true,\n                attached: true,\n            })),\n        [childElements]\n    );\n\n    if (!isShown) {\n        return null;\n    }\n\n    return (\n        <KitsContainer\n            id={element.id as string}\n            label={label}\n            required={isRequired}\n            errors={fieldState.error?.message}\n            invalid={fieldState.invalid}\n            helperText={helperText}\n            hideError={hideError}\n            disabled={isDisabled}\n        >\n            <Flex w=\"full\" gap={8} alignItems=\"center\">\n                <FormRenderer\n                    elements={attachedElements}\n                    control={control}\n                    getValues={getValues}\n                    groupField={groupField}\n                    focusedField={focusedField}\n                    setFocusedField={setFocusedField!}\n                    grid={{\n                        columns: 12,\n                        columnGap: 8,\n                        rowGap: 0,\n                        colSpan: 12,\n                        ...grid,\n                    } as any}\n                />\n            </Flex>\n        </KitsContainer>\n    );\n};\n\nexport default CombinedElement;\n"],"names":["useMemo","useWatch","useEffect","jsx","KitsContainer","Flex","FormRenderer"],"mappings":"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"}

package/form-renderer/components/fields/Combined/index.js

@@ -0,0 +1,106 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import KitsContainer from '../../../../form/helpers/FormContainer/index.js';
+import { FormRenderer } from '../../FormRenderer/index.js';
+import Flex from '../../../../layout/Flex/index.js';
+
+const CombinedElement = ({
+  element,
+  control,
+  getValues,
+  groupField,
+  focusedField,
+  setFocusedField,
+  fieldLogic
+}) => {
+  const {
+    isShown,
+    label,
+    helperText,
+    field,
+    fieldState,
+    isRequired,
+    isDisabled,
+    formContext,
+    hideError
+  } = fieldLogic;
+  const combinedElement = element;
+  const { grid, output, elements: childElements } = combinedElement;
+  const childIds = useMemo(
+    () => childElements.map((el) => el.id),
+    [childElements]
+  );
+  const childValues = useWatch({
+    name: childIds,
+    control
+  });
+  useEffect(() => {
+    const outputTokens = output.trim().split(/\s+/);
+    let computedValue;
+    if (outputTokens.length === 1) {
+      const childIndex = childIds.indexOf(outputTokens[0]);
+      computedValue = childIndex >= 0 ? childValues[childIndex] : void 0;
+    } else {
+      computedValue = outputTokens.map((token) => {
+        const childIndex = childIds.indexOf(token);
+        return childIndex >= 0 ? childValues[childIndex] ?? "" : "";
+      }).filter((v) => v !== "").join(" ");
+    }
+    const currentValue = formContext.getValues(field.name);
+    if (currentValue !== computedValue) {
+      formContext.setValue(field.name, computedValue, {
+        shouldValidate: true,
+        shouldDirty: true
+      });
+    }
+  }, [childValues, output, childIds, field.name, formContext]);
+  const attachedElements = useMemo(
+    () => childElements.map((el) => ({
+      ...el,
+      // Remove label and schema from children — parent handles these
+      label: void 0,
+      schema: void 0,
+      hideError: true,
+      attached: true
+    })),
+    [childElements]
+  );
+  if (!isShown) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    KitsContainer,
+    {
+      id: element.id,
+      label,
+      required: isRequired,
+      errors: fieldState.error?.message,
+      invalid: fieldState.invalid,
+      helperText,
+      hideError,
+      disabled: isDisabled,
+      children: /* @__PURE__ */ jsx(Flex, { w: "full", gap: 8, alignItems: "center", children: /* @__PURE__ */ jsx(
+        FormRenderer,
+        {
+          elements: attachedElements,
+          control,
+          getValues,
+          groupField,
+          focusedField,
+          setFocusedField,
+          grid: {
+            columns: 12,
+            columnGap: 8,
+            rowGap: 0,
+            colSpan: 12,
+            ...grid
+          }
+        }
+      ) })
+    }
+  );
+};
+
+export { CombinedElement, CombinedElement as default };
+//# sourceMappingURL=index.js.map

package/form-renderer/components/fields/Combined/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/Combined/index.tsx"],"sourcesContent":["import React, {useEffect, useMemo} from 'react';\nimport {type FieldValues, useWatch} from 'react-hook-form';\nimport type {ICombined, UseFieldLogicElementProps} from \"@lmb-it/kitsconcerto-types\";\nimport {Flex} from \"../../../../_compat\";\nimport KitsContainer from \"../../../../form/helpers/FormContainer\";\nimport {FormRenderer} from \"../../FormRenderer\";\n\n/**\n * Combined element: groups multiple child inputs under one logical field.\n *\n * - Renders a single KitsContainer with one label and one validation error.\n * - Child elements render with `attached: true` (no individual containers/labels).\n * - The parent's value is computed from child values via the `output` template.\n */\nexport const CombinedElement = <T extends FieldValues>({\n                                                           element,\n                                                           control,\n                                                           getValues,\n                                                           groupField,\n                                                           focusedField,\n                                                           setFocusedField,\n                                                           fieldLogic,\n                                                       }: UseFieldLogicElementProps<T>) => {\n\n    const {\n        isShown,\n        label,\n        helperText,\n        field,\n        fieldState,\n        isRequired,\n        isDisabled,\n        formContext,\n        hideError,\n    } = fieldLogic;\n\n    const combinedElement = element as ICombined<T>;\n    const {grid, output, elements: childElements} = combinedElement;\n\n    // Extract child field IDs for watching\n    const childIds = useMemo(() =>\n            childElements.map(el => el.id as string),\n        [childElements]\n    );\n\n    // Watch all child field values\n    const childValues = useWatch({\n        name: childIds as any,\n        control,\n    });\n\n    // Compute and sync the output value whenever child values change\n    useEffect(() => {\n        const outputTokens = output.trim().split(/\\s+/);\n        let computedValue: any;\n\n        if (outputTokens.length === 1) {\n            // Single token — map to that child's value directly\n            const childIndex = childIds.indexOf(outputTokens[0]);\n            computedValue = childIndex >= 0 ? childValues[childIndex] : undefined;\n        } else {\n            // Multi-token — concatenate child values with spaces\n            computedValue = outputTokens\n                .map(token => {\n                    const childIndex = childIds.indexOf(token);\n                    return childIndex >= 0 ? (childValues[childIndex] ?? '') : '';\n                })\n                .filter(v => v !== '')\n                .join(' ');\n        }\n\n        // Only update if the value has actually changed\n        const currentValue = formContext.getValues(field.name);\n        if (currentValue !== computedValue) {\n            formContext.setValue(field.name, computedValue, {\n                shouldValidate: true,\n                shouldDirty: true,\n            });\n        }\n    }, [childValues, output, childIds, field.name, formContext]);\n\n    // Prepare child elements with attached=true to strip their containers/labels\n    const attachedElements = useMemo(() =>\n            childElements.map(el => ({\n                ...el,\n                // Remove label and schema from children — parent handles these\n                label: undefined,\n                schema: undefined,\n                hideError: true,\n                attached: true,\n            })),\n        [childElements]\n    );\n\n    if (!isShown) {\n        return null;\n    }\n\n    return (\n        <KitsContainer\n            id={element.id as string}\n            label={label}\n            required={isRequired}\n            errors={fieldState.error?.message}\n            invalid={fieldState.invalid}\n            helperText={helperText}\n            hideError={hideError}\n            disabled={isDisabled}\n        >\n            <Flex w=\"full\" gap={8} alignItems=\"center\">\n                <FormRenderer\n                    elements={attachedElements}\n                    control={control}\n                    getValues={getValues}\n                    groupField={groupField}\n                    focusedField={focusedField}\n                    setFocusedField={setFocusedField!}\n                    grid={{\n                        columns: 12,\n                        columnGap: 8,\n                        rowGap: 0,\n                        colSpan: 12,\n                        ...grid,\n                    } as any}\n                />\n            </Flex>\n        </KitsContainer>\n    );\n};\n\nexport default CombinedElement;\n"],"names":[],"mappings":"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"}

package/form-renderer/components/fields/Container/index.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var label_native = require('../../../../form/helpers/Label/label.cjs');
+var index_native = require('../../../../primitives/Text/index.cjs');
+
+const Container = ({
+  element,
+  control,
+  groupField,
+  getValues,
+  parentPath = "",
+  fieldLogic
+}) => {
+  const formContext = reactHookForm.useFormContext();
+  const {
+    field,
+    label,
+    helperText,
+    watchedValues
+  } = fieldLogic;
+  const containerElement = element;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(label_native.default, { as: "h2", label, elementId: element.id }),
+    helperText && typeof helperText != "function" && /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { fontSize: 10, as: "small", children: helperText }),
+    typeof containerElement.children !== "function" ? containerElement.children : containerElement.children(field, formContext, groupField, watchedValues)
+  ] });
+};
+
+exports.Container = Container;
+exports.default = Container;
+//# sourceMappingURL=index.cjs.map

package/form-renderer/components/fields/Container/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/Container/index.tsx"],"sourcesContent":["// components/fields/Container.tsx\n\nimport React from 'react';\nimport {type FieldValues, useFormContext} from 'react-hook-form';\nimport type {IContainer, UseFieldLogicElementProps} from '@lmb-it/kitsconcerto-types';\nimport {Label, Text} from \"../../../../_compat\";\n\n// The Container needs the parentPath to know which part of the form values to watch.\ninterface ContainerProps<T extends FieldValues> extends UseFieldLogicElementProps<T> {\n    parentPath?: string;\n}\n\nexport const Container = <T extends FieldValues>({\n                                                     element,\n                                                     control, groupField,\n                                                     getValues,\n                                                     parentPath = '', fieldLogic\n                                                 }: ContainerProps<T>) => {\n    // 1. Get the full formContext from the provider.\n    // This is the one case where a component needs more than what useFieldLogic provides.\n    const formContext = useFormContext<T>();\n\n    const {\n        field, label, helperText, watchedValues\n    } = fieldLogic;\n\n    // 2. Watch the parent path to get currentGroupValues.\n    // We watch the path without the trailing dot (e.g., 'user' or 'addresses.0').\n    // const currentGroupValues = useWatch({\n    //     control,\n    //     name: parentPath.endsWith('.') ? parentPath.slice(0, -1) as any : parentPath as any,\n    // });\n\n    const containerElement = element as IContainer<T>;\n\n    // 4. Call the children render prop with the required data.\n    return (\n        <>\n\n            {label && (\n                <Label as=\"h2\" label={label} elementId={element.id as string}/>\n            )}\n            {helperText && typeof helperText != \"function\" && (\n                <Text fontSize={10} as={\"small\"}>\n                    {helperText}\n                </Text>\n            )}\n            {typeof containerElement.children !== 'function'?containerElement.children:containerElement.children(field, formContext, groupField, watchedValues)}\n        </>\n    );\n};\n\nexport default Container;\n"],"names":["useFormContext","jsxs","Fragment","Label","jsx","Text"],"mappings":";;;;;;;;;AAYO,MAAM,YAAY,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EAAS,UAAA;AAAA,EACT,SAAA;AAAA,EACA,UAAA,GAAa,EAAA;AAAA,EAAI;AACrB,CAAA,KAAyB;AAGtE,EAAA,MAAM,cAAcA,4BAAA,EAAkB;AAEtC,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IAAO,KAAA;AAAA,IAAO,UAAA;AAAA,IAAY;AAAA,GAC9B,GAAI,UAAA;AASJ,EAAA,MAAM,gBAAA,GAAmB,OAAA;AAGzB,EAAA,uBACIC,eAAA,CAAAC,mBAAA,EAAA,EAEK,QAAA,EAAA;AAAA,IAAA,KAAA,mCACIC,oBAAA,EAAA,EAAM,EAAA,EAAG,MAAK,KAAA,EAAc,SAAA,EAAW,QAAQ,EAAA,EAAa,CAAA;AAAA,IAEhE,UAAA,IAAc,OAAO,UAAA,IAAc,UAAA,oBAChCC,cAAA,CAACC,wBAAK,QAAA,EAAU,EAAA,EAAI,EAAA,EAAI,OAAA,EACnB,QAAA,EAAA,UAAA,EACL,CAAA;AAAA,IAEH,OAAO,gBAAA,CAAiB,QAAA,KAAa,UAAA,GAAW,gBAAA,CAAiB,QAAA,GAAS,gBAAA,CAAiB,QAAA,CAAS,KAAA,EAAO,WAAA,EAAa,UAAA,EAAY,aAAa;AAAA,GAAA,EACtJ,CAAA;AAER;;;;;"}

package/form-renderer/components/fields/Container/index.js

@@ -0,0 +1,30 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useFormContext } from 'react-hook-form';
+import Label from '../../../../form/helpers/Label/label.js';
+import Text from '../../../../primitives/Text/index.js';
+
+const Container = ({
+  element,
+  control,
+  groupField,
+  getValues,
+  parentPath = "",
+  fieldLogic
+}) => {
+  const formContext = useFormContext();
+  const {
+    field,
+    label,
+    helperText,
+    watchedValues
+  } = fieldLogic;
+  const containerElement = element;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(Label, { as: "h2", label, elementId: element.id }),
+    helperText && typeof helperText != "function" && /* @__PURE__ */ jsx(Text, { fontSize: 10, as: "small", children: helperText }),
+    typeof containerElement.children !== "function" ? containerElement.children : containerElement.children(field, formContext, groupField, watchedValues)
+  ] });
+};
+
+export { Container, Container as default };
+//# sourceMappingURL=index.js.map

package/form-renderer/components/fields/Container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/Container/index.tsx"],"sourcesContent":["// components/fields/Container.tsx\n\nimport React from 'react';\nimport {type FieldValues, useFormContext} from 'react-hook-form';\nimport type {IContainer, UseFieldLogicElementProps} from '@lmb-it/kitsconcerto-types';\nimport {Label, Text} from \"../../../../_compat\";\n\n// The Container needs the parentPath to know which part of the form values to watch.\ninterface ContainerProps<T extends FieldValues> extends UseFieldLogicElementProps<T> {\n    parentPath?: string;\n}\n\nexport const Container = <T extends FieldValues>({\n                                                     element,\n                                                     control, groupField,\n                                                     getValues,\n                                                     parentPath = '', fieldLogic\n                                                 }: ContainerProps<T>) => {\n    // 1. Get the full formContext from the provider.\n    // This is the one case where a component needs more than what useFieldLogic provides.\n    const formContext = useFormContext<T>();\n\n    const {\n        field, label, helperText, watchedValues\n    } = fieldLogic;\n\n    // 2. Watch the parent path to get currentGroupValues.\n    // We watch the path without the trailing dot (e.g., 'user' or 'addresses.0').\n    // const currentGroupValues = useWatch({\n    //     control,\n    //     name: parentPath.endsWith('.') ? parentPath.slice(0, -1) as any : parentPath as any,\n    // });\n\n    const containerElement = element as IContainer<T>;\n\n    // 4. Call the children render prop with the required data.\n    return (\n        <>\n\n            {label && (\n                <Label as=\"h2\" label={label} elementId={element.id as string}/>\n            )}\n            {helperText && typeof helperText != \"function\" && (\n                <Text fontSize={10} as={\"small\"}>\n                    {helperText}\n                </Text>\n            )}\n            {typeof containerElement.children !== 'function'?containerElement.children:containerElement.children(field, formContext, groupField, watchedValues)}\n        </>\n    );\n};\n\nexport default Container;\n"],"names":[],"mappings":";;;;;AAYO,MAAM,YAAY,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EAAS,UAAA;AAAA,EACT,SAAA;AAAA,EACA,UAAA,GAAa,EAAA;AAAA,EAAI;AACrB,CAAA,KAAyB;AAGtE,EAAA,MAAM,cAAc,cAAA,EAAkB;AAEtC,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IAAO,KAAA;AAAA,IAAO,UAAA;AAAA,IAAY;AAAA,GAC9B,GAAI,UAAA;AASJ,EAAA,MAAM,gBAAA,GAAmB,OAAA;AAGzB,EAAA,uBACI,IAAA,CAAA,QAAA,EAAA,EAEK,QAAA,EAAA;AAAA,IAAA,KAAA,wBACI,KAAA,EAAA,EAAM,EAAA,EAAG,MAAK,KAAA,EAAc,SAAA,EAAW,QAAQ,EAAA,EAAa,CAAA;AAAA,IAEhE,UAAA,IAAc,OAAO,UAAA,IAAc,UAAA,oBAChC,GAAA,CAAC,QAAK,QAAA,EAAU,EAAA,EAAI,EAAA,EAAI,OAAA,EACnB,QAAA,EAAA,UAAA,EACL,CAAA;AAAA,IAEH,OAAO,gBAAA,CAAiB,QAAA,KAAa,UAAA,GAAW,gBAAA,CAAiB,QAAA,GAAS,gBAAA,CAAiB,QAAA,CAAS,KAAA,EAAO,WAAA,EAAa,UAAA,EAAY,aAAa;AAAA,GAAA,EACtJ,CAAA;AAER;;;;"}

package/form-renderer/components/fields/DateField/index.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index_native = require('../../../../form/inputs/Datepicker/index.cjs');
+require('react');
+require('axios');
+
+const DateField = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const {
+    field,
+    fieldState,
+    label,
+    placeholder,
+    isDisabled,
+    isRequired,
+    helperText,
+    leftAddon,
+    rightAddon,
+    // The hook now resolves addons
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  const dateElement = element;
+  const { localProps } = dateElement;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      id: field.name,
+      label,
+      value: field.value,
+      onChange: field.onChange,
+      onBlur: field.onBlur,
+      placeholder,
+      disabled: isDisabled,
+      required: isRequired,
+      invalid: fieldState.invalid,
+      errors: fieldState.error?.message,
+      helperText,
+      hideError: element.hideError,
+      leftAddon,
+      rightAddon,
+      attached,
+      style: elementStyle?.input,
+      containerStyle: elementStyle?.container,
+      slots,
+      localProps: {
+        ...localProps
+      }
+    }
+  );
+};
+
+exports.DateField = DateField;
+exports.default = DateField;
+//# sourceMappingURL=index.cjs.map

package/form-renderer/components/fields/DateField/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/DateField/index.tsx"],"sourcesContent":["// components/fields/DateField.tsx\n\nimport React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {IDate, UseFieldLogicElementProps} from '@lmb-it/kitsconcerto-types';\nimport {KitsDatepicker} from \"../../../../_compat\";\n\n/**\n * Renders a date picker component.\n\n */\nexport const DateField = <T extends FieldValues>({\n                                                     element,\n                                                     control,\n                                                     getValues,\n                                                     fieldLogic,\n                                                 }: UseFieldLogicElementProps<T>) => {\n\n    // 1. The central hook provides all the necessary state and resolved props.\n    const {\n        field,\n        fieldState,\n        label,\n        placeholder,\n        isDisabled,\n        isRequired,\n        helperText,\n        leftAddon,\n        rightAddon, // The hook now resolves addons\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic;\n\n    // 2. Cast the element to its specific type to access unique properties.\n    const dateElement = element as IDate<T>;\n    const {localProps} = dateElement;\n\n    // 3. The component is now only responsible for rendering the UI.\n    return (\n        <KitsDatepicker<any>\n            id={field.name}\n            label={label}\n            value={field.value}\n            onChange={field.onChange}\n            //@ts-ignore\n            onBlur={field.onBlur}     // Pass onBlur directly\n\n            // --- Resolved props from useFieldLogic ---\n            placeholder={placeholder}\n            disabled={isDisabled}\n            required={isRequired}\n            invalid={fieldState.invalid}\n            errors={fieldState.error?.message}\n            helperText={helperText}\n            hideError={element.hideError}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            attached={attached}\n            style={elementStyle?.input}\n            containerStyle={elementStyle?.container}\n            slots={slots}\n\n            // --- Props from the element definition ---\n            localProps={{\n                ...localProps\n            }}\n        />\n    );\n};\n\nexport default DateField;\n"],"names":["jsx","KitsDatepicker"],"mappings":";;;;;;;;;AAWO,MAAM,YAAY,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAGjF,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,WAAA,GAAc,OAAA;AACpB,EAAA,MAAM,EAAC,YAAU,GAAI,WAAA;AAGrB,EAAA,uBACIA,cAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACG,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,UAAU,KAAA,CAAM,QAAA;AAAA,MAEhB,QAAQ,KAAA,CAAM,MAAA;AAAA,MAGd,WAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,WAAW,OAAA,CAAQ,SAAA;AAAA,MACnB,SAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B,KAAA;AAAA,MAGA,UAAA,EAAY;AAAA,QACR,GAAG;AAAA;AACP;AAAA,GACJ;AAER;;;;;"}

package/form-renderer/components/fields/DateField/index.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import KitsInputCalendar from '../../../../form/inputs/Datepicker/index.js';
+import 'react';
+import 'axios';
+
+const DateField = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const {
+    field,
+    fieldState,
+    label,
+    placeholder,
+    isDisabled,
+    isRequired,
+    helperText,
+    leftAddon,
+    rightAddon,
+    // The hook now resolves addons
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  const dateElement = element;
+  const { localProps } = dateElement;
+  return /* @__PURE__ */ jsx(
+    KitsInputCalendar,
+    {
+      id: field.name,
+      label,
+      value: field.value,
+      onChange: field.onChange,
+      onBlur: field.onBlur,
+      placeholder,
+      disabled: isDisabled,
+      required: isRequired,
+      invalid: fieldState.invalid,
+      errors: fieldState.error?.message,
+      helperText,
+      hideError: element.hideError,
+      leftAddon,
+      rightAddon,
+      attached,
+      style: elementStyle?.input,
+      containerStyle: elementStyle?.container,
+      slots,
+      localProps: {
+        ...localProps
+      }
+    }
+  );
+};
+
+export { DateField, DateField as default };
+//# sourceMappingURL=index.js.map

package/form-renderer/components/fields/DateField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/form-renderer/components/fields/DateField/index.tsx"],"sourcesContent":["// components/fields/DateField.tsx\n\nimport React from 'react';\nimport type {FieldValues} from 'react-hook-form';\nimport type {IDate, UseFieldLogicElementProps} from '@lmb-it/kitsconcerto-types';\nimport {KitsDatepicker} from \"../../../../_compat\";\n\n/**\n * Renders a date picker component.\n\n */\nexport const DateField = <T extends FieldValues>({\n                                                     element,\n                                                     control,\n                                                     getValues,\n                                                     fieldLogic,\n                                                 }: UseFieldLogicElementProps<T>) => {\n\n    // 1. The central hook provides all the necessary state and resolved props.\n    const {\n        field,\n        fieldState,\n        label,\n        placeholder,\n        isDisabled,\n        isRequired,\n        helperText,\n        leftAddon,\n        rightAddon, // The hook now resolves addons\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic;\n\n    // 2. Cast the element to its specific type to access unique properties.\n    const dateElement = element as IDate<T>;\n    const {localProps} = dateElement;\n\n    // 3. The component is now only responsible for rendering the UI.\n    return (\n        <KitsDatepicker<any>\n            id={field.name}\n            label={label}\n            value={field.value}\n            onChange={field.onChange}\n            //@ts-ignore\n            onBlur={field.onBlur}     // Pass onBlur directly\n\n            // --- Resolved props from useFieldLogic ---\n            placeholder={placeholder}\n            disabled={isDisabled}\n            required={isRequired}\n            invalid={fieldState.invalid}\n            errors={fieldState.error?.message}\n            helperText={helperText}\n            hideError={element.hideError}\n            leftAddon={leftAddon}\n            rightAddon={rightAddon}\n            attached={attached}\n            style={elementStyle?.input}\n            containerStyle={elementStyle?.container}\n            slots={slots}\n\n            // --- Props from the element definition ---\n            localProps={{\n                ...localProps\n            }}\n        />\n    );\n};\n\nexport default DateField;\n"],"names":["KitsDatepicker"],"mappings":";;;;;AAWO,MAAM,YAAY,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAGjF,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,WAAA,GAAc,OAAA;AACpB,EAAA,MAAM,EAAC,YAAU,GAAI,WAAA;AAGrB,EAAA,uBACI,GAAA;AAAA,IAACA,iBAAA;AAAA,IAAA;AAAA,MACG,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAO,KAAA,CAAM,KAAA;AAAA,MACb,UAAU,KAAA,CAAM,QAAA;AAAA,MAEhB,QAAQ,KAAA,CAAM,MAAA;AAAA,MAGd,WAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,WAAW,OAAA,CAAQ,SAAA;AAAA,MACnB,SAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B,KAAA;AAAA,MAGA,UAAA,EAAY;AAAA,QACR,GAAG;AAAA;AACP;AAAA,GACJ;AAER;;;;"}

package/form-renderer/components/fields/FileUploader/index.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var index_native = require('../../../../form/file-pickers/index.cjs');
+require('react');
+require('axios');
+require('../../../../contexts/DialogContext.cjs');
+require('../../../../form/selects/SelectContext.cjs');
+
+const FileUploader = ({
+  element,
+  control,
+  getValues,
+  fieldLogic
+}) => {
+  const { setError, clearErrors, getValues: getFormConfig } = reactHookForm.useFormContext();
+  const outputFormat = getFormConfig().outputFormat || "Json";
+  const {
+    field,
+    fieldState,
+    label,
+    isDisabled,
+    isRequired,
+    helperText,
+    placeholder,
+    attached,
+    style: elementStyle,
+    slots
+  } = fieldLogic;
+  const fileElement = element;
+  const {
+    type,
+    multiple,
+    limit,
+    acceptedTypes,
+    maxFileSize,
+    minFileSize,
+    classicUploader,
+    children
+  } = fileElement;
+  const handleOnChange = (files, base64Data) => {
+    if (outputFormat === "FormData") {
+      field.onChange(multiple ? files : files[0]);
+    } else {
+      field.onChange(multiple ? base64Data : base64Data[0]);
+    }
+  };
+  const handleError = (errorMessage) => {
+    if (errorMessage === "clear") {
+      clearErrors(field.name);
+    } else {
+      setError(field.name, { type: "custom", message: errorMessage });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index_native.default,
+    {
+      id: field.name,
+      value: field.value,
+      onChange: handleOnChange,
+      onError: handleError,
+      label,
+      disabled: isDisabled,
+      required: isRequired,
+      invalid: fieldState.invalid,
+      errors: fieldState.error?.message,
+      helperText,
+      placeholder,
+      attached,
+      type,
+      multiple,
+      limit,
+      acceptedTypes,
+      maxFileSize,
+      minFileSize,
+      classicUploader,
+      isJsonOutput: outputFormat === "Json",
+      children,
+      style: elementStyle?.input,
+      containerStyle: elementStyle?.container,
+      slots
+    }
+  );
+};
+
+exports.FileUploader = FileUploader;
+exports.default = FileUploader;
+//# sourceMappingURL=index.cjs.map

package/form-renderer/components/fields/FileUploader/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../src/form-renderer/components/fields/FileUploader/index.tsx"],"sourcesContent":["// components/fields/FileUploader.tsx\n\nimport React from 'react';\nimport {type FieldValues, useFormContext} from 'react-hook-form';\nimport {KitsFilePicker} from \"../../../../_compat\";\nimport type {IFile, UseFieldLogicElementProps} from '@lmb-it/kitsconcerto-types';\n\n/**\n * Renders a file or image uploader.\n * It uses useFieldLogic for standard field state and useFormContext for form-level\n * configurations like outputFormat and error handling.\n */\nexport const FileUploader = <T extends FieldValues>({\n                                                        element,\n                                                        control,\n                                                        getValues,\n                                                        fieldLogic,\n                                                    }: UseFieldLogicElementProps<T>) => {\n\n    // 1. Get form-level context for special properties.\n    // We need to know the outputFormat to correctly structure the onChange payload.\n    // We also need setError and clearErrors for the custom onError handler.\n    const {setError, clearErrors, getValues: getFormConfig} = useFormContext();\n    const outputFormat = (getFormConfig() as any).outputFormat || 'Json'; // Get form's output format\n\n    // 2. Get field-level state and props from the central logic hook.\n    const {\n        field,\n        fieldState,\n        label,\n        isDisabled,\n        isRequired,\n        helperText,\n        placeholder,\n        attached,\n        style: elementStyle,\n        slots,\n    } = fieldLogic\n\n    // 3. Cast the element to its specific type to access unique properties.\n    const fileElement = element as IFile<T>;\n    const {\n        type,\n        multiple,\n        limit,\n        acceptedTypes,\n        maxFileSize,\n        minFileSize,\n        classicUploader,\n        children,\n    } = fileElement;\n\n    // 4. Define the specific handlers for this component.\n    const handleOnChange = (files: File[], base64Data: any[]) => {\n        if (outputFormat === 'FormData') {\n            field.onChange(multiple ? files : files[0]);\n        } else {\n            field.onChange(multiple ? base64Data : base64Data[0]);\n        }\n    };\n\n    const handleError = (errorMessage: string) => {\n        if (errorMessage === 'clear') {\n            clearErrors(field.name);\n        } else {\n            setError(field.name, {type: 'custom', message: errorMessage});\n        }\n    };\n\n    // 5. Render the \"dumb\" UI component with the resolved props.\n    return (\n        <KitsFilePicker\n            id={field.name}\n            value={field.value}\n            //@ts-ignore\n            onChange={handleOnChange}\n            onError={handleError}\n\n            // --- Resolved props ---\n            label={label}\n            disabled={isDisabled}\n            required={isRequired}\n            invalid={fieldState.invalid}\n            errors={fieldState.error?.message}\n            helperText={helperText}\n            placeholder={placeholder}\n            attached={attached}\n\n            // --- Props from element definition ---\n            type={type}\n            multiple={multiple}\n            limit={limit}\n            acceptedTypes={acceptedTypes}\n            maxFileSize={maxFileSize}\n            minFileSize={minFileSize}\n            classicUploader={classicUploader}\n            isJsonOutput={outputFormat === 'Json'}\n            children={children}\n            style={elementStyle?.input}\n            containerStyle={elementStyle?.container}\n            slots={slots}\n        />\n    );\n};\n\nexport default FileUploader;\n"],"names":["useFormContext","jsx","KitsFilePicker"],"mappings":";;;;;;;;;;;;AAYO,MAAM,eAAe,CAAwB;AAAA,EACI,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACJ,CAAA,KAAoC;AAKpF,EAAA,MAAM,EAAC,QAAA,EAAU,WAAA,EAAa,SAAA,EAAW,aAAA,KAAiBA,4BAAA,EAAe;AACzE,EAAA,MAAM,YAAA,GAAgB,aAAA,EAAc,CAAU,YAAA,IAAgB,MAAA;AAG9D,EAAA,MAAM;AAAA,IACF,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,YAAA;AAAA,IACP;AAAA,GACJ,GAAI,UAAA;AAGJ,EAAA,MAAM,WAAA,GAAc,OAAA;AACpB,EAAA,MAAM;AAAA,IACF,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACJ,GAAI,WAAA;AAGJ,EAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,EAAe,UAAA,KAAsB;AACzD,IAAA,IAAI,iBAAiB,UAAA,EAAY;AAC7B,MAAA,KAAA,CAAM,QAAA,CAAS,QAAA,GAAW,KAAA,GAAQ,KAAA,CAAM,CAAC,CAAC,CAAA;AAAA,IAC9C,CAAA,MAAO;AACH,MAAA,KAAA,CAAM,QAAA,CAAS,QAAA,GAAW,UAAA,GAAa,UAAA,CAAW,CAAC,CAAC,CAAA;AAAA,IACxD;AAAA,EACJ,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,YAAA,KAAyB;AAC1C,IAAA,IAAI,iBAAiB,OAAA,EAAS;AAC1B,MAAA,WAAA,CAAY,MAAM,IAAI,CAAA;AAAA,IAC1B,CAAA,MAAO;AACH,MAAA,QAAA,CAAS,MAAM,IAAA,EAAM,EAAC,MAAM,QAAA,EAAU,OAAA,EAAS,cAAa,CAAA;AAAA,IAChE;AAAA,EACJ,CAAA;AAGA,EAAA,uBACIC,cAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACG,IAAI,KAAA,CAAM,IAAA;AAAA,MACV,OAAO,KAAA,CAAM,KAAA;AAAA,MAEb,QAAA,EAAU,cAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAGT,KAAA;AAAA,MACA,QAAA,EAAU,UAAA;AAAA,MACV,QAAA,EAAU,UAAA;AAAA,MACV,SAAS,UAAA,CAAW,OAAA;AAAA,MACpB,MAAA,EAAQ,WAAW,KAAA,EAAO,OAAA;AAAA,MAC1B,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MAGA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAc,YAAA,KAAiB,MAAA;AAAA,MAC/B,QAAA;AAAA,MACA,OAAO,YAAA,EAAc,KAAA;AAAA,MACrB,gBAAgB,YAAA,EAAc,SAAA;AAAA,MAC9B;AAAA;AAAA,GACJ;AAER;;;;;"}