@apia/validations 4.0.58 → 4.0.63

package/dist/index.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from '@apia/theme/jsx-runtime';
-import { customEvents, usePropsSelector, propsStore, getLabel, useUnmount, useMount, PropsSelectorUndefinedObject, formatMessage, toBoolean, EventEmitter, StatefulEmitter, useSubscription, getValueByPath } from '@apia/util';
+import { customEvents, usePropsSelector, propsStore, getLabel, useUnmount, useMount, PropsSelectorUndefinedObject, formatMessage, EventEmitter, StatefulEmitter, useSubscription, getLabelTooltip, getLabelName, getValueByPath } from '@apia/util';
 import uniqueId from 'lodash-es/uniqueId';
-import React, { useState, createContext, useContext } from 'react';
+import React, { useRef, useState, createContext, useContext } from 'react';
 import { Box, getVariant, Input as Input$1, Label, Radio as Radio$1, Select as Select$1, Switch, Textarea as Textarea$1, Button } from '@apia/theme';
 import { notify } from '@apia/notifications';
-import { RequiredMark, Captcha, Checkbox as Checkbox$1, IconButton, getFieldErrorStyles, DateInput, ApiaUtil, NumberInput, SimpleButton, useModalContext, FieldLabel } from '@apia/components';
+import { RequiredMark, Captcha, Checkbox as Checkbox$1, IconButton, getFieldErrorStyles, DateInput, ApiaUtil, NumberInput, SimpleButton, AutogrowTextarea as AutogrowTextarea$1, SwitchMultiple, useModalContext, FieldLabel } from '@apia/components';
 import { shallowEqual } from 'react-redux';
-import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
+import { makeObservable, observable } from 'mobx';
 
 const FormContext = React.createContext(
   {}
@@ -234,20 +234,20 @@ function getValidations(outerValidation) {
   };
 }
 
-var __defProp$a = Object.defineProperty;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$a = (obj, key, value) => {
-  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$f = Object.defineProperty;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$f = (obj, key, value) => {
+  __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const validationsStore = new class {
   constructor() {
-    __publicField$a(this, "activeForms", []);
-    __publicField$a(this, "timeouts", {});
-    __publicField$a(this, "existsField", (formName, fieldName) => {
+    __publicField$f(this, "activeForms", []);
+    __publicField$f(this, "timeouts", {});
+    __publicField$f(this, "existsField", (formName, fieldName) => {
       return !!this.getFormStore(formName)?.fields?.includes(fieldName);
     });
-    __publicField$a(this, "registerField", (formName, registerData, options = { registerIfExists: true }) => {
+    __publicField$f(this, "registerField", (formName, registerData, options = { registerIfExists: true }) => {
       const formProps = this.getFormStore(formName);
       if (formProps === void 0)
         this.registerForm(formName);
@@ -259,7 +259,7 @@ const validationsStore = new class {
           ]
         });
       const existsInStore = this.getFieldStore(formName, registerData.name);
-      if ((formProps?.avoidFieldsOverride || !options.registerIfExists) && existsInStore) {
+      if (!existsInStore || options.registerIfExists || !formProps?.avoidFieldsOverride && existsInStore && options.registerIfExists !== false) {
         const { value, ...updateData } = registerData;
         this.updateField(formName, updateData, {
           markFormAsTouched: false,
@@ -267,17 +267,11 @@ const validationsStore = new class {
         });
         return;
       }
-      this.updateFieldStore(
-        formName,
-        registerData.name,
-        registerData,
-        options.avoidPropagation
-      );
     });
     /**
      * Inicializa el estado de un nuevo formulario
      */
-    __publicField$a(this, "registerForm", (formName, props = { avoidFieldsOverride: false }) => {
+    __publicField$f(this, "registerForm", (formName, props = { avoidFieldsOverride: false }) => {
       props.persistToSessionStorage && this.loadFromSessionStorage(formName);
       if (this.activeForms.includes(formName)) {
         this.updateFormStore(
@@ -323,7 +317,7 @@ const validationsStore = new class {
      * Setea el valor del campo con el nombre provisto. Si el campo no existe
      * en el formulario lo crea.
      */
-    __publicField$a(this, "setFieldValue", (formName, fieldName, newValue, options) => {
+    __publicField$f(this, "setFieldValue", (formName, fieldName, newValue, options) => {
       if (!this.getFieldStore(formName, fieldName))
         this.registerField(formName, { name: fieldName, value: newValue });
       else
@@ -339,7 +333,7 @@ const validationsStore = new class {
       if (this.getFormStore(formName).isValid)
         this.updateFormStore(formName, { isValid: false });
     });
-    __publicField$a(this, "setFormIsTouched", (formName, isTouched = true) => {
+    __publicField$f(this, "setFormIsTouched", (formName, isTouched = true) => {
       this.updateFormStore(formName, { isTouched }, true);
     });
     /**
@@ -347,7 +341,7 @@ const validationsStore = new class {
      * forma cualquier validación que pudiera aplicarse sobre el mismo, ya no se
      * aplicará.
      */
-    __publicField$a(this, "unregisterField", (formName, fieldName) => {
+    __publicField$f(this, "unregisterField", (formName, fieldName) => {
       if (this.getFormStore(formName))
         this.updateFormStore(formName, {
           fields: this.getFormStore(formName).fields.filter((current) => {
@@ -360,7 +354,7 @@ const validationsStore = new class {
      * Elimina un formulario del store de validación junto con todos los campos
      * asociados al mismo.
      */
-    __publicField$a(this, "unregisterForm", (formName) => {
+    __publicField$f(this, "unregisterForm", (formName) => {
       this.getFormStore(formName)?.fields?.forEach((current) => {
         return propsStore.removeField(this.makeFieldName(formName, current));
       });
@@ -374,7 +368,7 @@ const validationsStore = new class {
      * Actualiza las propiedades de un campo, si no existe, lo registra en el
      * formulario.
      */
-    __publicField$a(this, "updateField", (formName, field, options) => {
+    __publicField$f(this, "updateField", (formName, field, options) => {
       const previousValue = this.getFieldStore(formName, field.name)?.value;
       if (this.getFormStore(formName))
         this.updateFormStore(formName, { isValid: false }, true);
@@ -402,7 +396,7 @@ const validationsStore = new class {
     /**
      * Actualiza múltiples campos al mismo tiempo.
      */
-    __publicField$a(this, "updateMultipleFields", (formName, fields, options) => {
+    __publicField$f(this, "updateMultipleFields", (formName, fields, options) => {
       fields.forEach((current) => {
         return this.updateField(formName, current, options);
       });
@@ -431,7 +425,7 @@ const validationsStore = new class {
      *   console.error('Validation error', result);
      * }
      */
-    __publicField$a(this, "validateForm", async (formName) => {
+    __publicField$f(this, "validateForm", async (formName) => {
       const state = this.getFormStore(formName);
       if (!state)
         return { errors: { form: "No form with name " + formName } };
@@ -709,7 +703,7 @@ function useField(fieldDefinition) {
     }
   );
   const [localValue, setLocalValue] = React.useState(
-    fieldDefinition.initialValue
+    storeValue ?? fieldDefinition.initialValue
   );
   React.useEffect(() => {
     setLocalValue(storeValue);
@@ -1015,6 +1009,7 @@ const Checkbox = React.forwardRef(
         label,
         className: `checkbox ${className ?? ""}`,
         avoidSemicolon,
+        title: props.title,
         children: /* @__PURE__ */ jsx(
           Checkbox$1,
           {
@@ -1106,6 +1101,7 @@ const DeletableInput = React.forwardRef(
         ),
         className: `deletableInput ${className ?? ""}`,
         avoidSemicolon,
+        title: props.title,
         children: [
           /* @__PURE__ */ jsx(
             Input$1,
@@ -1188,6 +1184,7 @@ const FileInput = React.memo(
           label,
           className: `input ${className ?? ""}`,
           avoidSemicolon,
+          title: props.title,
           children: /* @__PURE__ */ jsx(
             Input$1,
             {
@@ -1280,6 +1277,7 @@ const Input = React.memo(
           label,
           className: `input ${className ?? ""}`,
           avoidSemicolon,
+          title: props.title,
           children: type === "date" ? /* @__PURE__ */ jsx(
             DateInput,
             {
@@ -1398,6 +1396,7 @@ const NumberInputf = React.memo(
           ),
           className: `input ${className ?? ""}`,
           avoidSemicolon,
+          title: props.title,
           children: /* @__PURE__ */ jsx(
             NumberInput,
             {
@@ -1471,6 +1470,7 @@ const Radio = React.forwardRef(
         className: `radio ${className ?? ""}`,
         avoidSemicolon,
         as: "ul",
+        title: props.title,
         children: options?.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Label, { title: option.label, className: "radio-label", children: [
           /* @__PURE__ */ jsx(
             Radio$1,
@@ -1540,6 +1540,7 @@ const Select = React.forwardRef(
         label,
         className: `select ${className ?? ""}`,
         avoidSemicolon,
+        title: props.title,
         children: /* @__PURE__ */ jsxs(
           Select$1,
           {
@@ -1584,7 +1585,6 @@ const Switchbox = React.forwardRef(
     label,
     onChange: outerOnChange,
     type,
-    reverse = false,
     avoidRegisterIfExists,
     formName,
     initialValue,
@@ -1604,23 +1604,31 @@ const Switchbox = React.forwardRef(
       validationFunction,
       validationRules
     });
-    const { onChange, updateValidations, isTouched, ...inputProps } = useField({
+    const {
+      value: innerValue,
+      onChange,
+      updateValidations,
+      isTouched,
+      ...inputProps
+    } = useField({
       avoidRegisterIfExists,
       formName,
       name,
-      initialValue: (initialValue ?? "off") === "on" || toBoolean(initialValue) ? "on" : "off",
+      initialValue,
       removeOnUnmount,
       submitValueParser,
       validationFunction: actualValidationFunction,
       validationRules: actualValidationRules
     });
+    const putValue = useRef(false);
     return /* @__PURE__ */ jsx(
       FieldWrapper,
       {
         name,
         label,
-        className: `switchbox ${className ?? ""}`,
+        className: `checkbox ${className ?? ""}`,
         avoidSemicolon,
+        title: props.title,
         children: /* @__PURE__ */ jsx(
           Switch,
           {
@@ -1628,13 +1636,21 @@ const Switchbox = React.forwardRef(
             ...inputProps,
             "aria-label": props["aria-label"] ?? label,
             onChange: (ev) => {
-              onChange(ev.target.checked !== reverse ? "on" : "off");
+              onChange(ev.target.checked);
               if (outerOnChange) {
                 outerOnChange(ev);
               }
             },
-            checked: (inputProps.value ?? "off") === "on" !== reverse,
-            ref
+            value: innerValue ? "on" : "off",
+            ref: (el) => {
+              ref?.(el);
+              if (el && putValue.current !== innerValue) {
+                putValue.current = innerValue;
+                if (innerValue !== void 0 && innerValue !== null && putValue.current !== el.checked) {
+                  el.click();
+                }
+              }
+            }
           }
         )
       }
@@ -1697,6 +1713,7 @@ const Textarea = React.forwardRef(
         label,
         className: `textarea ${className ?? ""}`,
         avoidSemicolon,
+        title: props.title,
         children: /* @__PURE__ */ jsx(
           Textarea$1,
           {
@@ -1714,10 +1731,10 @@ const Textarea = React.forwardRef(
 );
 Textarea.displayName = "Textarea";
 
-var __defProp$9 = Object.defineProperty;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$9 = (obj, key, value) => {
-  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$e = Object.defineProperty;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$e = (obj, key, value) => {
+  __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$2 = (obj, member, msg) => {
@@ -1742,17 +1759,17 @@ class CollectorField extends EventEmitter {
     __privateAdd$2(this, _emitter, new StatefulEmitter({
       isHidden: false
     }));
-    __publicField$9(this, "collector", {});
-    __publicField$9(this, "isHidden", () => __privateGet$2(this, _emitter).getState("isHidden"));
-    __publicField$9(this, "setIsHidden", (isHidden) => {
+    __publicField$e(this, "_collector", {});
+    __publicField$e(this, "isHidden", () => __privateGet$2(this, _emitter).getState("isHidden"));
+    __publicField$e(this, "setIsHidden", (isHidden) => {
       __privateGet$2(this, _emitter).emit("isHidden", isHidden);
     });
-    __publicField$9(this, "properties", {});
-    __publicField$9(this, "setProperties", (newProps) => {
-      this.properties = newProps;
+    __publicField$e(this, "properties", {});
+    __publicField$e(this, "setProperties", (newProps) => {
+      this.properties = { ...this.properties, ...newProps };
       this.emit("propsUpdate", { ...this.properties });
     });
-    __publicField$9(this, "useProperties", () => {
+    __publicField$e(this, "useProperties", () => {
       return useSubscription({
         getInitialState: () => this.properties,
         makeSubscription: (setProps) => this.on("propsUpdate", setProps)
@@ -1762,7 +1779,7 @@ class CollectorField extends EventEmitter {
      * Este componente se utiliza para controlar propiedades comunes a todos los
      * campos.
      */
-    __publicField$9(this, "SuperComponent", () => {
+    __publicField$e(this, "SuperComponent", () => {
       if (__privateGet$2(this, _emitter).useState("isHidden"))
         return null;
       return /* @__PURE__ */ jsx(Box, { className: `collector__field ${this.type}`, children: /* @__PURE__ */ jsx(this.Component, {}) });
@@ -1771,13 +1788,19 @@ class CollectorField extends EventEmitter {
       this.properties = properties;
     }
   }
+  get collector() {
+    return this._collector;
+  }
+  set collector(c) {
+    this._collector = c;
+  }
 }
 _emitter = new WeakMap();
 
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => {
-  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$d = Object.defineProperty;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$d = (obj, key, value) => {
+  __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ValidatedCollectorField extends CollectorField {
@@ -1786,21 +1809,24 @@ class ValidatedCollectorField extends CollectorField {
     this.name = name;
     this.label = label;
     this.config = config;
-    __publicField$8(this, "setInitialValue", (newValue) => {
+    __publicField$d(this, "setInitialValue", (newValue) => {
       this.config.initialValue = newValue;
     });
-    __publicField$8(this, "setValidationFunction", (newFunction) => {
+    __publicField$d(this, "setValidationFunction", (newFunction) => {
       this.config.validationFunction = newFunction;
       this.emit("functionUpdate", this.config.validationFunction);
     });
-    __publicField$8(this, "setValidationRules", (newRules) => {
+    __publicField$d(this, "setValidationRules", (newRules) => {
       this.config.validationRules = newRules;
       this.emit("rulesUpdate", { ...this.config.validationRules });
     });
-    __publicField$8(this, "setValue", (newValue) => {
-      validationsStore.setFieldValue(this.collector.id, this.name, newValue);
+    __publicField$d(this, "toggleRequired", (isReq = this.config?.validationRules?.required ?? false) => {
+      if (!this.config.validationRules) {
+        this.config.validationRules = {};
+      }
+      this.config.validationRules.required = isReq;
     });
-    __publicField$8(this, "useValidationFunction", () => {
+    __publicField$d(this, "useValidationFunction", () => {
       return useSubscription({
         getInitialState: () => () => this.config.validationFunction,
         makeSubscription: (setValidationFunction) => {
@@ -1808,7 +1834,7 @@ class ValidatedCollectorField extends CollectorField {
         }
       });
     });
-    __publicField$8(this, "useValidationRules", () => {
+    __publicField$d(this, "useValidationRules", () => {
       return useSubscription({
         getInitialState: () => this.config.validationRules,
         makeSubscription: (setValidationRules) => {
@@ -1817,25 +1843,37 @@ class ValidatedCollectorField extends CollectorField {
       });
     });
   }
+  set collector(c) {
+    this._collector = c;
+    validationsStore.registerField(this._collector.id, {
+      name: this.name,
+      validationFunction: this.config.validationFunction,
+      validationRules: this.config.validationRules,
+      value: this.config.initialValue
+    });
+  }
   get initialValue() {
     return this.config.initialValue;
   }
   get value() {
-    return validationsStore.getFieldStore(this.collector.id, this.name).value;
+    return validationsStore.getFieldStore(this._collector.id, this.name).value;
+  }
+  setValue(newValue) {
+    validationsStore.setFieldValue(this._collector.id, this.name, newValue);
   }
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$7 = (obj, key, value) => {
-  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$c = Object.defineProperty;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$c = (obj, key, value) => {
+  __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class CollectorCheckbox extends ValidatedCollectorField {
   constructor() {
     super(...arguments);
-    __publicField$7(this, "type", "checkbox");
-    __publicField$7(this, "Component", () => {
+    __publicField$c(this, "type", "checkbox");
+    __publicField$c(this, "Component", () => {
       const rules = this.useValidationRules();
       const validationFunction = this.useValidationFunction();
       const props = this.useProperties();
@@ -1846,26 +1884,29 @@ class CollectorCheckbox extends ValidatedCollectorField {
           initialValue: this.config.initialValue,
           validationFunction,
           name: this.name,
-          label: this.label,
+          label: getLabelName(this.label),
+          title: getLabelTooltip(this.label),
           validationRules: rules,
-          avoidSemicolon: true
+          avoidSemicolon: true,
+          removeOnUnmount: false,
+          avoidRegisterIfExists: true
         }
       );
     });
   }
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$6 = (obj, key, value) => {
-  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$b = Object.defineProperty;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$b = (obj, key, value) => {
+  __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class CollectorInput extends ValidatedCollectorField {
   constructor() {
     super(...arguments);
-    __publicField$6(this, "type", "input");
-    __publicField$6(this, "Component", () => {
+    __publicField$b(this, "type", "input");
+    __publicField$b(this, "Component", () => {
       const rules = this.useValidationRules();
       const validationFunction = this.useValidationFunction();
       const props = this.useProperties();
@@ -1876,18 +1917,20 @@ class CollectorInput extends ValidatedCollectorField {
           initialValue: this.config.initialValue,
           validationFunction,
           name: this.name,
-          label: this.label,
-          validationRules: rules
+          label: getLabelName(this.label),
+          title: getLabelTooltip(this.label),
+          validationRules: rules,
+          avoidRegisterIfExists: true
         }
       );
     });
   }
 }
 
-var __defProp$5 = Object.defineProperty;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => {
-  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$a = Object.defineProperty;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$a = (obj, key, value) => {
+  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$1 = (obj, member, msg) => {
@@ -1914,13 +1957,13 @@ class CollectorSelect extends ValidatedCollectorField {
     super(_name, label, config);
     this._name = _name;
     this.label = label;
-    __publicField$5(this, "type", "select");
+    __publicField$a(this, "type", "select");
     __privateAdd$1(this, _options, []);
-    __publicField$5(this, "addOption", (newOption) => {
+    __publicField$a(this, "addOption", (newOption) => {
       __privateSet(this, _options, [...__privateGet$1(this, _options), newOption]);
       this.emit("optionsUpdate", __privateGet$1(this, _options));
     });
-    __publicField$5(this, "setOptions", (newOptions) => {
+    __publicField$a(this, "setOptions", (newOptions) => {
       __privateSet(this, _options, [...newOptions]);
       this.emit("optionsUpdate", __privateGet$1(this, _options));
     });
@@ -1931,7 +1974,7 @@ class CollectorSelect extends ValidatedCollectorField {
       });
       return options;
     });
-    __publicField$5(this, "Component", () => {
+    __publicField$a(this, "Component", () => {
       const rules = this.useValidationRules();
       const validationFunction = this.useValidationFunction();
       const options = __privateGet$1(this, _useOptions).call(this);
@@ -1943,9 +1986,12 @@ class CollectorSelect extends ValidatedCollectorField {
           initialValue: this.config.initialValue,
           validationFunction,
           name: this.name,
-          label: this.label,
+          label: getLabelName(this.label),
+          title: getLabelTooltip(this.label),
           validationRules: rules,
-          options
+          options,
+          removeOnUnmount: false,
+          avoidRegisterIfExists: true
         }
       );
     });
@@ -1957,17 +2003,17 @@ class CollectorSelect extends ValidatedCollectorField {
 _options = new WeakMap();
 _useOptions = new WeakMap();
 
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => {
+  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class CollectorTextarea extends ValidatedCollectorField {
   constructor() {
     super(...arguments);
-    __publicField$4(this, "type", "textarea");
-    __publicField$4(this, "Component", () => {
+    __publicField$9(this, "type", "textarea");
+    __publicField$9(this, "Component", () => {
       const rules = this.useValidationRules();
       const validationFunction = this.useValidationFunction();
       const props = this.useProperties();
@@ -1979,38 +2025,39 @@ class CollectorTextarea extends ValidatedCollectorField {
           name: this.name,
           validationFunction,
           validationRules: rules,
-          label: this.label
+          label: getLabelName(this.label),
+          title: getLabelTooltip(this.label),
+          removeOnUnmount: false,
+          avoidRegisterIfExists: true
         }
       );
     });
   }
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => {
+  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const _CollectorLabel = class _CollectorLabel extends CollectorField {
   constructor(label, kind = "label") {
     super(`label${_CollectorLabel.maxId++}`, label);
     this.kind = kind;
-    __publicField$3(this, "type", "label");
-    __publicField$3(this, "Component", () => {
-      if (this.kind === "label")
-        return /* @__PURE__ */ jsx(Box, { as: this.kind, children: this.label });
-      return /* @__PURE__ */ jsx(Box, { as: this.kind, children: this.label });
+    __publicField$8(this, "type", "label");
+    __publicField$8(this, "Component", () => {
+      return /* @__PURE__ */ jsx(Box, { as: this.kind, children: getLabelName(this.label) });
     });
   }
 };
-__publicField$3(_CollectorLabel, "maxId", 0);
+__publicField$8(_CollectorLabel, "maxId", 0);
 let CollectorLabel = _CollectorLabel;
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 let i = 0;
@@ -2018,18 +2065,250 @@ class CollectorButton extends CollectorField {
   constructor(label, properties) {
     super(`Button${i++}`, label, properties);
     this.label = label;
-    __publicField$2(this, "type", "button");
-    __publicField$2(this, "Component", () => {
+    __publicField$7(this, "type", "button");
+    __publicField$7(this, "Component", () => {
       const props = this.useProperties();
-      return /* @__PURE__ */ jsx(SimpleButton, { ...props, children: this.label });
+      return /* @__PURE__ */ jsx(SimpleButton, { ...props, children: getLabelName(this.label) });
     });
   }
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class CollectorSwitch extends ValidatedCollectorField {
+  constructor() {
+    super(...arguments);
+    __publicField$6(this, "type", "switch");
+    __publicField$6(this, "Component", () => {
+      const rules = this.useValidationRules();
+      const validationFunction = this.useValidationFunction();
+      const props = this.useProperties();
+      return /* @__PURE__ */ jsx(
+        Switchbox,
+        {
+          ...props,
+          initialValue: this.config.initialValue,
+          validationFunction,
+          name: this.name,
+          label: getLabelName(this.label),
+          title: getLabelTooltip(this.label),
+          validationRules: rules,
+          avoidSemicolon: true,
+          removeOnUnmount: false,
+          avoidRegisterIfExists: true
+        }
+      );
+    });
+  }
+}
+
+class CollectorTitle extends CollectorLabel {
+  constructor(label, level) {
+    if (level < 1 || level > 6) {
+      throw new Error("Only 1-6 leves allowed");
+    }
+    super(label, `h${level}`);
+  }
+}
+
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const _CollectorSeparator = class _CollectorSeparator extends CollectorField {
+  constructor() {
+    super(`separator${_CollectorSeparator.maxId++}`, "");
+    __publicField$5(this, "type", "label");
+    __publicField$5(this, "Component", () => {
+      return /* @__PURE__ */ jsx(Box, { className: "separator" });
+    });
+  }
+};
+__publicField$5(_CollectorSeparator, "maxId", 0);
+let CollectorSeparator = _CollectorSeparator;
+
+const AutogrowTextarea = React.forwardRef(
+  ({
+    avoidSemicolon,
+    className,
+    formName,
+    label,
+    onChange: outerOnChange,
+    /**
+     * useField
+     */
+    avoidRegisterIfExists,
+    initialValue,
+    name,
+    removeOnUnmount,
+    submitValueParser,
+    validationClass,
+    validationFunction,
+    validationRules,
+    value,
+    ...props
+  }, ref) => {
+    const { actualValidationFunction, actualValidationRules } = useValidationClass({
+      formName,
+      name,
+      validationClass,
+      validationFunction,
+      validationRules
+    });
+    const { updateValidations, onChange, isTouched, ...inputProps } = useField({
+      avoidRegisterIfExists,
+      formName,
+      initialValue: initialValue ?? value,
+      name,
+      removeOnUnmount,
+      submitValueParser,
+      validationRules: actualValidationRules,
+      validationFunction: actualValidationFunction
+    });
+    const handleOnChange = React.useCallback(
+      (ev) => {
+        onChange(ev);
+        if (outerOnChange) {
+          outerOnChange(ev);
+        }
+      },
+      [onChange, outerOnChange]
+    );
+    return /* @__PURE__ */ jsx(
+      FieldWrapper,
+      {
+        name,
+        label,
+        className: `textarea ${className ?? ""}`,
+        avoidSemicolon,
+        title: props.title,
+        children: /* @__PURE__ */ jsx(
+          AutogrowTextarea$1,
+          {
+            ...props,
+            ...inputProps,
+            error: void 0,
+            "aria-label": props["aria-label"] ?? label,
+            ref,
+            value: inputProps.value ?? "",
+            onChange: handleOnChange
+          }
+        )
+      }
+    );
+  }
+);
+AutogrowTextarea.displayName = "Textarea";
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class CollectorAutogrowTextarea extends ValidatedCollectorField {
+  constructor() {
+    super(...arguments);
+    __publicField$4(this, "type", "autogrowtextarea");
+    __publicField$4(this, "Component", () => {
+      const rules = this.useValidationRules();
+      const validationFunction = this.useValidationFunction();
+      const props = this.useProperties();
+      return /* @__PURE__ */ jsx(
+        AutogrowTextarea,
+        {
+          ...props,
+          initialValue: this.config.initialValue,
+          name: this.name,
+          validationFunction,
+          validationRules: rules,
+          label: getLabelName(this.label),
+          title: getLabelTooltip(this.label),
+          removeOnUnmount: false,
+          avoidRegisterIfExists: true
+        }
+      );
+    });
+  }
+}
+
+const Component = observer(
+  ({
+    name,
+    label,
+    title,
+    options,
+    formName,
+    initialValue,
+    removeOnUnmount,
+    validationFunction,
+    validationRules,
+    onChange: outerOnChange
+  }) => {
+    const { value, onChange } = useField({
+      formName,
+      name,
+      initialValue,
+      removeOnUnmount,
+      validationFunction,
+      validationRules
+    });
+    return /* @__PURE__ */ jsx(FieldWrapper, { name, label, title, children: /* @__PURE__ */ jsx(
+      SwitchMultiple,
+      {
+        defaultValue: initialValue,
+        value,
+        options,
+        onChange: (ev) => {
+          onChange(ev);
+          outerOnChange && outerOnChange(ev);
+        }
+      }
+    ) });
+  }
+);
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class CollectorSwitchMultiple extends ValidatedCollectorField {
+  constructor() {
+    super(...arguments);
+    __publicField$3(this, "type", "switchInput");
+    __publicField$3(this, "Component", () => {
+      const rules = this.useValidationRules();
+      const validationFunction = this.useValidationFunction();
+      const props = this.useProperties();
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...props,
+          name: this.name,
+          label: getLabelName(this.label),
+          title: getLabelTooltip(this.label),
+          initialValue: props.initialValue,
+          validationRules: rules,
+          validationFunction,
+          options: props.options
+        }
+      );
+    });
+  }
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck = (obj, member, msg) => {
@@ -2038,14 +2317,14 @@ var __accessCheck = (obj, member, msg) => {
 };
 var __privateGet = (obj, member, getter) => {
   __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
+  return member.get(obj);
 };
 var __privateAdd = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
-var _fields, _Component;
+var _Component;
 try {
   void initValidations().catch(() => {
   });
@@ -2055,7 +2334,8 @@ try {
 let maxId = 0;
 class Collector {
   constructor() {
-    __publicField$1(this, "fields", {
+    __publicField$2(this, "fields", {
+      autogrowTextarea: CollectorAutogrowTextarea,
       button: CollectorButton,
       checkbox: CollectorCheckbox,
       input: CollectorInput,
@@ -2065,21 +2345,15 @@ class Collector {
        */
       label: CollectorLabel,
       select: CollectorSelect,
-      textarea: CollectorTextarea
-    });
-    __publicField$1(this, "private__id", `Collector${maxId++}`);
-    __publicField$1(this, "modal", null);
-    __privateAdd(this, _fields, {});
-    __publicField$1(this, "add", (...fields) => {
-      fields.forEach((field) => {
-        __privateGet(this, _fields)[field.name] = field;
-        field.collector = this;
-      });
-      return this;
-    });
-    __publicField$1(this, "forEach", (cb) => {
-      Object.values(__privateGet(this, _fields)).forEach(cb);
+      separator: CollectorSeparator,
+      switch: CollectorSwitch,
+      textarea: CollectorTextarea,
+      title: CollectorTitle,
+      switchMultiple: CollectorSwitchMultiple
     });
+    __publicField$2(this, "private__id", `Collector${maxId++}`);
+    __publicField$2(this, "modal", null);
+    __publicField$2(this, "fieldsStore", {});
     __privateAdd(this, _Component, ({
       hideConfirm,
       resolve
@@ -2087,7 +2361,7 @@ class Collector {
       const modal = useModalContext();
       return /* @__PURE__ */ jsx(this.Render, { resolve, hideConfirm, modal });
     });
-    __publicField$1(this, "Render", ({
+    __publicField$2(this, "Render", ({
       hideConfirm,
       modal,
       resolve,
@@ -2102,6 +2376,7 @@ class Collector {
           children: /* @__PURE__ */ jsxs(
             Form,
             {
+              unregisterOnUnmount: true,
               name: this.private__id,
               onValidate: (result) => {
                 if (hasSucceedFormValidation(result)) {
@@ -2112,7 +2387,7 @@ class Collector {
                 }
               },
               children: [
-                /* @__PURE__ */ jsx(Box, { className: "collector__fields", children: Object.values(__privateGet(this, _fields)).map((current) => {
+                /* @__PURE__ */ jsx(Box, { className: "collector__fields", children: Object.values(this.fieldsStore).map((current) => {
                   if (current instanceof ValidatedCollectorField)
                     hasValidated = true;
                   return /* @__PURE__ */ jsx(current.SuperComponent, {}, current.name);
@@ -2124,52 +2399,114 @@ class Collector {
         }
       );
     });
-    __publicField$1(this, "show", (modalProps) => {
-      const { onConfirm, ...actualModalProps } = modalProps ?? {};
-      return new Promise((resolve) => {
-        const C = __privateGet(this, _Component);
-        const modal = ApiaUtil.instance.modals.open({
-          onExited: () => {
-            {
-              this.modal = null;
-              resolve(null);
-            }
-          },
-          children: /* @__PURE__ */ jsx(
-            C,
-            {
-              hideConfirm: modalProps?.hideConfirm,
-              resolve: (values) => {
-                if (onConfirm) {
-                  const confirmResult = onConfirm(values);
-                  if (!confirmResult) {
-                    return false;
-                  }
+  }
+  get id() {
+    return this.private__id;
+  }
+  add(...fields) {
+    fields.forEach((field) => {
+      this.fieldsStore[field.name] = field;
+      field.collector = this;
+      if (field instanceof ValidatedCollectorField) {
+        validationsStore.setFieldValue(this.id, field.name, field.initialValue);
+      }
+    });
+    return this;
+  }
+  forEach(cb) {
+    Object.values(this.fieldsStore).forEach(cb);
+  }
+  getByName(name) {
+    return this.fieldsStore[name];
+  }
+  show(modalProps) {
+    const { onConfirm, ...actualModalProps } = modalProps ?? {};
+    return new Promise((resolve) => {
+      const C = __privateGet(this, _Component);
+      const modal = ApiaUtil.instance.modals.open({
+        onExited: () => {
+          {
+            this.modal = null;
+            resolve(null);
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          C,
+          {
+            hideConfirm: modalProps?.hideConfirm,
+            resolve: (values) => {
+              if (onConfirm) {
+                const confirmResult = onConfirm(values);
+                if (!confirmResult) {
+                  return false;
                 }
-                resolve(values);
-                return true;
               }
+              resolve(values);
+              return true;
             }
-          ),
-          variant: "layout.util.collector.modal",
-          initialFocusGetter(modalInnerRef) {
-            return modalInnerRef.querySelector(
-              "input,textarea,select,button:not(.modal__closeButton)"
-            );
-          },
-          ...actualModalProps
-        });
-        this.modal = modal;
+          }
+        ),
+        variant: "layout.util.collector.modal",
+        initialFocusGetter(modalInnerRef) {
+          return modalInnerRef.querySelector(
+            "input,textarea,select,button:not(.modal__closeButton)"
+          );
+        },
+        ...actualModalProps
       });
+      this.modal = modal;
     });
   }
-  get id() {
-    return this.private__id;
-  }
 }
-_fields = new WeakMap();
 _Component = new WeakMap();
 
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, key + "" , value);
+  return value;
+};
+class WithMemoryCollector extends Collector {
+  constructor(prefix) {
+    super();
+    this.prefix = prefix;
+    __publicField$1(this, "memoized", /* @__PURE__ */ new Set());
+  }
+  getKey(name) {
+    return `[WithMemoryCollector]${this.prefix}__${name}`;
+  }
+  addMemoized(...fields) {
+    for (const f of fields) {
+      let initialValue = void 0;
+      if (f instanceof ValidatedCollectorField) {
+        this.memoized.add(f.name);
+        const stored = localStorage.getItem(this.getKey(f.name));
+        if (stored) {
+          initialValue = JSON.parse(stored);
+        }
+      }
+      super.add(f);
+      if (initialValue !== void 0) {
+        validationsStore.setFieldValue(this.id, f.name, initialValue);
+      }
+    }
+    return this;
+  }
+  async show(modalProps) {
+    const res = await super.show(modalProps);
+    if (res) {
+      for (const f of Object.values(this.fieldsStore)) {
+        if (f instanceof ValidatedCollectorField && this.memoized.has(f.name)) {
+          if (f.value !== void 0) {
+            localStorage.setItem(this.getKey(f.name), JSON.stringify(f.value));
+          }
+        }
+      }
+    }
+    return res;
+  }
+}
+
 const ValidableContext = createContext(
   void 0
 );
@@ -2423,5 +2760,5 @@ class Validable {
   }
 }
 
-export { InnerCaptcha as Captcha, Checkbox, Collector, CollectorField, DeletableInput, FieldWrapper, FileInput, Form, FormContext, Input, NumberInputf, Radio, Select, Switchbox, Textarea, Validable, ValidableCheck, ValidableContext, ValidableField, ValidableInput, ValidableSelect, ValidableTextarea, ValidatedCollectorField, ValidationError, classToValidate, classToValidationFunction, hasSucceedFieldValidation, hasSucceedFormValidation, initValidations, lang, useField, useFieldSelector, useFieldStatesClassNames, useFieldValue, useFormContext, useFormSelector, useValidableContext, useValidationClass, validate, validationsStore };
+export { InnerCaptcha as Captcha, Checkbox, Collector, CollectorAutogrowTextarea, CollectorButton, CollectorCheckbox, CollectorField, CollectorInput, CollectorLabel, CollectorSelect, CollectorSeparator, CollectorSwitch, CollectorSwitchMultiple, CollectorTextarea, CollectorTitle, DeletableInput, FieldWrapper, FileInput, Form, FormContext, Input, NumberInputf, Radio, Select, Switchbox, Textarea, Validable, ValidableCheck, ValidableContext, ValidableField, ValidableInput, ValidableSelect, ValidableTextarea, ValidatedCollectorField, ValidationError, WithMemoryCollector, classToValidate, classToValidationFunction, hasSucceedFieldValidation, hasSucceedFormValidation, initValidations, lang, useField, useFieldSelector, useFieldStatesClassNames, useFieldValue, useFormContext, useFormSelector, useValidableContext, useValidationClass, validate, validationsStore };
 //# sourceMappingURL=index.js.map