@rolster/react-components 18.9.0 → 18.10.2

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ var react = require('react');
 var helpersAdvanced = require('@rolster/helpers-advanced');
 var helpersDate = require('@rolster/helpers-date');
 var helpersString = require('@rolster/helpers-string');
+var i18n = require('@rolster/i18n');
 var ReactDOM = require('react-dom');
 require('uuid');
 var rxjs = require('rxjs');
@@ -66,7 +67,7 @@ function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
         }, rlsTheme: rlsTheme }));
 }
 
-function RlsInput({ children, disabled, formControl, onValue, placeholder, type, value }) {
+function RlsInput({ children, disabled, formControl, placeholder, type, value, onValue }) {
     const [focused, setFocused] = react.useState(false);
     function onChange(event) {
         switch (type) {
@@ -101,7 +102,7 @@ function RlsInput({ children, disabled, formControl, onValue, placeholder, type,
         }), children: [jsxRuntime.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type || 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.state || value || '' }), jsxRuntime.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
-function RlsInputMoney({ decimals, disabled, formControl, onValue, placeholder, symbol, value }) {
+function RlsInputMoney({ decimals, disabled, formControl, placeholder, symbol, value, onValue }) {
     const [valueInput, setValueInput] = react.useState(value || 0);
     function onMoney(value) {
         if (!formControl) {
@@ -114,7 +115,7 @@ function RlsInputMoney({ decimals, disabled, formControl, onValue, placeholder,
     return (jsxRuntime.jsx("div", { className: "rls-input-money", children: jsxRuntime.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onMoney, children: jsxRuntime.jsx(RlsAmount, { value: formControl?.state || value || valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
 
-function RlsInputNumber({ disabled, formControl, onValue, placeholder, value }) {
+function RlsInputNumber({ disabled, formControl, placeholder, value, onValue }) {
     const [valueInput, setValueInput] = react.useState(value || 0);
     function onNumber(value) {
         if (!formControl) {
@@ -127,7 +128,7 @@ function RlsInputNumber({ disabled, formControl, onValue, placeholder, value })
     return (jsxRuntime.jsx("div", { className: "rls-input-number", children: jsxRuntime.jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onNumber, children: formControl?.state || value || valueInput }) }));
 }
 
-function RlsInputPassword({ disabled, formControl, onValue, placeholder, type }) {
+function RlsInputPassword({ disabled, formControl, placeholder, type, onValue }) {
     const [focused, setFocused] = react.useState(false);
     function onChange(event) {
         formControl?.setState(event.target.value);
@@ -152,7 +153,7 @@ function RlsInputPassword({ disabled, formControl, onValue, placeholder, type })
         }), children: jsxRuntime.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type || 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }
 
-function RlsInputText({ disabled, formControl, onValue, placeholder, value }) {
+function RlsInputText({ disabled, formControl, placeholder, value, onValue }) {
     const [valueInput, setValueInput] = react.useState(value || '');
     function onText(value) {
         if (!formControl) {
@@ -181,7 +182,7 @@ function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-progress-bar', { indeterminate }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
 }
 
-function RlsRadioButton({ checked, disabled, onClick, rlsTheme }) {
+function RlsRadioButton({ checked, disabled, rlsTheme, onClick }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 
@@ -197,7 +198,7 @@ function RlsSkeletonText({ active, children, rlsTheme }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-skeleton-text', { active }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("span", { className: "rls-skeleton-text__value", children: children }) }));
 }
 
-function RlsSwitch({ checked, disabled, onClick, rlsTheme }) {
+function RlsSwitch({ checked, disabled, rlsTheme, onClick }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntime.jsxs("div", { className: "rls-switch__component", children: [jsxRuntime.jsx("div", { className: "rls-switch__component__element" }), jsxRuntime.jsx("div", { className: "rls-switch__component__bar" })] }) }));
 }
 function RlsSwitchControl({ formControl, disabled, rlsTheme }) {
@@ -264,7 +265,7 @@ function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme
         }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-checkbox-label__component", onClick: onToggle, children: jsxRuntime.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-checkbox-label__text", children: children })] }));
 }
 
-let Factory$2 = class Factory {
+class DayPickerFactory {
     constructor(props) {
         const { date, value, maxDate, minDate } = props;
         this.value = value;
@@ -274,7 +275,7 @@ let Factory$2 = class Factory {
         this.date.setDate(1);
     }
     static execute(props) {
-        const factory = new Factory(props);
+        const factory = new DayPickerFactory(props);
         const firstWeek = factory.createFirstWeek();
         const rightWeeks = factory.createRightWeeks();
         return [firstWeek, ...rightWeeks];
@@ -342,12 +343,12 @@ let Factory$2 = class Factory {
             ? helpersDate.weight(helpersDate.refactorDay(this.date, day)) > helpersDate.weight(this.maxDate)
             : false;
     }
-};
+}
 function createDayPicker(props) {
-    return Factory$2.execute(props);
+    return DayPickerFactory.execute(props);
 }
 
-function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
+function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme, onValue }) {
     const initialDate = date || new Date();
     const initialDay = formControl?.state || initialDate.getDate();
     const [weeks, setWeeks] = react.useState([]);
@@ -368,6 +369,9 @@ function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, mi
     function onChange(value) {
         setValue(value);
         formControl?.setState(value);
+        if (onValue) {
+            onValue(value);
+        }
     }
     return (jsxRuntime.jsxs("div", { className: "rls-day-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-day-picker__header", children: helpersDate.DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-day-picker__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-day-picker__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-day-picker__week", children: days.map(({ value, disabled, forbidden, selected }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-day-picker__day', {
                             disabled: disabled || disabledPicker,
@@ -380,13 +384,13 @@ function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, mi
                         }, children: jsxRuntime.jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-const FORMAT_DESCRIPTION$1 = '{dd}/{mm}/{aa}';
-class ListFieldCollection {
+const DATE_FORMAT = '{dd}/{mm}/{aa}';
+class ListCollection {
     constructor(value) {
         this.value = value;
     }
-    findElement(value) {
-        return this.value.find((element) => element.compareTo(value));
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
     }
 }
 class DateRange {
@@ -398,8 +402,8 @@ class DateRange {
         else {
             this.maxDate = helpersDate.normalizeMinTime(minDate);
         }
-        const minFormat = helpersDate.formatDate(this.minDate, FORMAT_DESCRIPTION$1);
-        const maxFormat = helpersDate.formatDate(this.maxDate, FORMAT_DESCRIPTION$1);
+        const minFormat = helpersDate.formatDate(this.minDate, DATE_FORMAT);
+        const maxFormat = helpersDate.formatDate(this.maxDate, DATE_FORMAT);
         this.description = `${minFormat} - ${maxFormat}`;
     }
     recalculate(date) {
@@ -420,7 +424,7 @@ class DateRange {
     }
 }
 
-let Factory$1 = class Factory {
+class DateRangePickerFactory {
     constructor(props) {
         const { date, range, maxDate, minDate } = props;
         this.date = new Date(date.getTime());
@@ -430,7 +434,7 @@ let Factory$1 = class Factory {
         this.date.setDate(1);
     }
     static execute(props) {
-        const factory = new Factory(props);
+        const factory = new DateRangePickerFactory(props);
         const firstWeek = factory.createFirstWeek();
         const rightWeeks = factory.createRightWeeks();
         return [firstWeek, ...rightWeeks];
@@ -511,9 +515,9 @@ let Factory$1 = class Factory {
             ? helpersDate.weight(helpersDate.refactorDay(this.date, day)) > helpersDate.weight(this.maxDate)
             : false;
     }
-};
+}
 function createRangePicker(props) {
-    return Factory$1.execute(props);
+    return DateRangePickerFactory.execute(props);
 }
 
 function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
@@ -546,7 +550,7 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
                         }, children: jsxRuntime.jsx("span", { className: "rls-day-range-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-function RlsMoneyField({ children, decimals, disabled, formControl, onValue, placeholder, symbol, rlsTheme, value }) {
+function RlsMoneyField({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
             focused: formControl?.focused,
             error: formControl?.touched && !formControl?.valid,
@@ -556,7 +560,7 @@ function RlsMoneyField({ children, decimals, disabled, formControl, onValue, pla
 
 const MONTH_MAX_VALUE = helpersDate.Month.January;
 const MONTH_MIN_VALUE = helpersDate.Month.December;
-class Factory {
+class MonthPickerFactory {
     constructor(props) {
         const { date, value, maxDate, minDate } = props;
         this.value = value;
@@ -565,20 +569,20 @@ class Factory {
         this.minDate = minDate;
     }
     static execute(props) {
-        const factory = new Factory(props);
+        const factory = new MonthPickerFactory(props);
         return [
-            factory.createMonth(0),
-            factory.createMonth(1),
-            factory.createMonth(2),
-            factory.createMonth(3),
-            factory.createMonth(4),
-            factory.createMonth(5),
-            factory.createMonth(6),
-            factory.createMonth(7),
-            factory.createMonth(8),
-            factory.createMonth(9),
-            factory.createMonth(10),
-            factory.createMonth(11)
+            factory.createMonth(helpersDate.Month.January),
+            factory.createMonth(helpersDate.Month.February),
+            factory.createMonth(helpersDate.Month.March),
+            factory.createMonth(helpersDate.Month.April),
+            factory.createMonth(helpersDate.Month.May),
+            factory.createMonth(helpersDate.Month.June),
+            factory.createMonth(helpersDate.Month.July),
+            factory.createMonth(helpersDate.Month.August),
+            factory.createMonth(helpersDate.Month.September),
+            factory.createMonth(helpersDate.Month.October),
+            factory.createMonth(helpersDate.Month.November),
+            factory.createMonth(helpersDate.Month.December)
         ];
     }
     createMonth(value) {
@@ -622,10 +626,10 @@ function isMaxLimitMonth(month, date, maxDate) {
     return date.getFullYear() === maxYear && month >= maxMonth;
 }
 function createMonthPicker(props) {
-    return Factory.execute(props);
+    return MonthPickerFactory.execute(props);
 }
 
-function RlsMonthPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme }) {
+function RlsMonthPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
     const initialDate = date || new Date();
     const initialMonth = formControl?.state || initialDate.getMonth();
     const [months, setMonths] = react.useState([]);
@@ -638,12 +642,20 @@ function RlsMonthPicker({ formControl, date, disabled: disabledPicker, maxDate,
             maxDate
         }));
     }, [value, date, minDate, maxDate]);
+    function onChange(value) {
+        formControl?.setState(value);
+        setValue(value);
+        if (onValue) {
+            onValue(value);
+        }
+    }
     return (jsxRuntime.jsx("div", { className: "rls-month-picker", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, selected }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-month-picker__component', {
                 disabled: disabled || disabledPicker || false,
                 selected
             }), onClick: () => {
-                formControl?.setState(value);
-                setValue(value);
+                if (!disabled) {
+                    onChange(value);
+                }
             }, children: jsxRuntime.jsx("span", { className: "rls-month-picker__span", children: label }) }, index))) }));
 }
 
@@ -684,7 +696,7 @@ function RlsMonthTitlePicker({ monthControl, yearControl, date, maxDate, minDate
     return (jsxRuntime.jsxs("div", { className: "rls-month-title-picker", children: [jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPreviousMonth, disabled: limitMinMonth }), jsxRuntime.jsx("span", { onClick: onClick, children: monthName }), jsxRuntime.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNextMonth, disabled: limitMaxMonth })] }));
 }
 
-function RlsNumberField({ children, disabled, formControl, onValue, placeholder, rlsTheme, value }) {
+function RlsNumberField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
             focused: formControl?.focused,
             error: formControl?.touched && !formControl?.valid,
@@ -734,7 +746,7 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
         pagination.active = true;
         setIndex(value);
         setCurrentPagination(pagination);
-        refreshFromChanged(createPageProps({ index: value }));
+        refreshFromChanged(clonePage({ index: value }));
     }
     function goPagination(pagination) {
         if (currentPagination) {
@@ -752,14 +764,14 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
             else {
                 const prevIndex = value - MIN_NUMBER_PAGE;
                 if (prevIndex >= FIRST_PAGE) {
-                    refreshFromChanged(createPagePropsFromIndex(prevIndex));
+                    refreshFromChanged(clonePageFromIndex(prevIndex));
                 }
             }
         }
     }
     function goFirstPagination() {
         if (collection.length) {
-            refreshFromChanged(createPagePropsFromIndex(FIRST_PAGE));
+            refreshFromChanged(clonePageFromIndex(FIRST_PAGE));
         }
     }
     function goNextPagination() {
@@ -772,14 +784,14 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
             else {
                 const nextIndex = value + 1;
                 if (nextIndex <= maxPage) {
-                    refreshFromChanged(createPagePropsFromIndex(nextIndex));
+                    refreshFromChanged(clonePageFromIndex(nextIndex));
                 }
             }
         }
     }
     function goLastPagination() {
         if (collection.length) {
-            refreshFromChanged(createPagePropsFromIndex(maxPage - MIN_NUMBER_PAGE));
+            refreshFromChanged(clonePageFromIndex(maxPage - MIN_NUMBER_PAGE));
         }
     }
     function createPageCollection(props) {
@@ -793,17 +805,11 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
     }
     function refreshFromElements(elements) {
         elements.length
-            ? refreshFromChanged(createRefreshProps(elements, filter))
+            ? refreshFromChanged(refreshPage(elements, filter))
             : rebootPagination();
     }
     function refreshFromFilter(filter) {
-        refreshFromChanged(createRefreshProps(elements, filter));
-    }
-    function createRefreshProps(elements, filter) {
-        const collection = refreshCollection(elements, filter);
-        const maxPage = refreshMaxPage(collection, count);
-        const index = refreshIndex(collection, maxPage);
-        return createPageProps({ collection, index, maxPage });
+        refreshFromChanged(refreshPage(elements, filter));
     }
     function refreshFromChanged(page) {
         refreshPaginations(page);
@@ -831,13 +837,6 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
         setIndex(newIndex);
         return newIndex;
     }
-    function rebootPagination() {
-        setCollection([]);
-        setMaxPage(0);
-        setIndex(0);
-        setPaginations([]);
-        onChangeElements([]);
-    }
     function refreshDescription(page) {
         const { collection, count, index } = page;
         const totalCount = elements.length;
@@ -873,6 +872,23 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
         }
         setPaginations(paginations);
     }
+    function clonePage(pagePartial) {
+        return {
+            collection: pagePartial.collection || collection,
+            index: typeof pagePartial.index === 'number' ? pagePartial.index : index,
+            count: pagePartial.count || count,
+            maxPage: typeof pagePartial.maxPage === 'number' ? pagePartial.maxPage : maxPage
+        };
+    }
+    function clonePageFromIndex(index) {
+        return clonePage({ index });
+    }
+    function refreshPage(elements, filter) {
+        const collection = refreshCollection(elements, filter);
+        const maxPage = refreshMaxPage(collection, count);
+        const index = refreshIndex(collection, maxPage);
+        return clonePage({ collection, index, maxPage });
+    }
     function createPagination(value, index) {
         const active = value === index;
         const pagination = {
@@ -885,16 +901,12 @@ function RlsPagination({ elements, count: defaultCount, filter, onElements, onPa
         }
         return pagination;
     }
-    function createPagePropsFromIndex(index) {
-        return createPageProps({ index });
-    }
-    function createPageProps(props) {
-        return {
-            collection: props.collection || collection,
-            index: typeof props.index === 'number' ? props.index : index,
-            count: props.count || count,
-            maxPage: typeof props.maxPage === 'number' ? props.maxPage : maxPage
-        };
+    function rebootPagination() {
+        setCollection([]);
+        setMaxPage(0);
+        setIndex(0);
+        setPaginations([]);
+        onChangeElements([]);
     }
     return (jsxRuntime.jsxs("div", { className: "rls-pagination", children: [jsxRuntime.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: firstPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrowhead-left" }) }), jsxRuntime.jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: firstPage, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsxRuntime.jsx("div", { className: "rls-pagination__pages", children: paginations.map((page, index) => {
                     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-pagination__page', {
@@ -949,7 +961,7 @@ function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme })
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-switch-label', { disabled, extended }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-switch-label__component", onClick: onToggle, children: jsxRuntime.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntime.jsx("label", { className: "rls-switch-label__text", children: children })] }));
 }
 
-function RlsTextField({ children, disabled, formControl, onValue, placeholder, rlsTheme, value }) {
+function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', {
             focused: formControl?.focused,
             error: formControl?.touched && !formControl?.valid,
@@ -962,7 +974,7 @@ function RlsToolbar({ actions, children, subtitle }) {
 }
 
 const COUNT_YEAR_RANGE = 4;
-class FactoryYearPicker {
+class YearPickerFactory {
     constructor(props) {
         const { value, maxDate, minDate } = props;
         this.value = value;
@@ -970,7 +982,7 @@ class FactoryYearPicker {
         this.minDate = minDate;
     }
     static execute(props) {
-        const factory = new FactoryYearPicker(props);
+        const factory = new YearPickerFactory(props);
         let year = props.year;
         if (factory.minOverflowYear(year)) {
             year = factory.minYear;
@@ -1041,10 +1053,10 @@ class FactoryYearPicker {
     }
 }
 function createYearPicker(props) {
-    return FactoryYearPicker.execute(props);
+    return YearPickerFactory.execute(props);
 }
 
-function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxDate, minDate, rlsTheme }) {
+function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
     const initialDate = date || new Date();
     const initialYear = formControl?.state || initialDate.getFullYear();
     const [value, setValue] = react.useState(initialYear);
@@ -1073,17 +1085,41 @@ function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxD
         formControl?.setState(value);
         setYear(value);
         setValue(value);
+        if (onValue) {
+            onValue(value);
+        }
     }
     return (jsxRuntime.jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-year-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: jsxRuntime.jsx("button", { disabled: !template.hasPrevious || disabledPicker, onClick: onClickPrev, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-left" }) }) }), jsxRuntime.jsx("div", { className: "rls-year-picker__title", children: jsxRuntime.jsxs("label", { className: "title1-bold", children: [template.minRange, " - ", template.maxRange] }) }), jsxRuntime.jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: jsxRuntime.jsx("button", { disabled: !template.hasNext || disabledPicker, onClick: onClickNext, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-right" }) }) })] }), jsxRuntime.jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, selected }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-year-picker__year', {
                         disabled: disabled || disabledPicker,
                         selected
                     }), onClick: () => {
-                        if (value) {
+                        if (value && !disabled) {
                             onChange(value);
                         }
                     }, children: jsxRuntime.jsx("span", { className: "rls-year-picker__year__span body1-medium", children: value || '????' }) }, index))) })] }));
 }
 
+const reactI18n = i18n.i18n({
+    es: {
+        confirmationActionApproved: 'Aceptar',
+        dateActionCancel: 'Cancelar',
+        dateActionSelect: 'Establecer',
+        dateActionToday: 'Hoy',
+        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
+        listEmptyTitle: 'Selección no disponible',
+        listInputPlaceholder: 'Buscar...'
+    },
+    en: {
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Search...'
+    }
+});
+
 const classElement = '.rls-list-field__element';
 const MAX_POSITION_VISIBLE = 4;
 const LIST_SIZE_REM = 16;
@@ -1091,16 +1127,16 @@ const ELEMENT_SIZE_REM = 4;
 const BASE_SIZE_PX = 16;
 const ELEMENT_SIZE_PX = BASE_SIZE_PX * ELEMENT_SIZE_REM;
 const MAZ_LIST_SIZE_PX = BASE_SIZE_PX * LIST_SIZE_REM;
-function useListControl({ suggestions, formControl, ignoreHigher = false }) {
+function useListControl({ suggestions, formControl, withHigher = false }) {
     const boxContentRef = react.useRef(null);
     const listRef = react.useRef(null);
     const inputRef = react.useRef(null);
-    const [collection, setCollection] = react.useState(new ListFieldCollection([]));
-    const [active, setActive] = react.useState(false);
-    const [visible, setVisible] = react.useState(false);
-    const [opened, setOpened] = react.useState(false);
+    const [collection, setCollection] = react.useState(new ListCollection([]));
     const [value, setValue] = react.useState('');
+    const [opened, setOpened] = react.useState(false);
+    const [visible, setVisible] = react.useState(false);
     const [higher, setHigher] = react.useState(false);
+    const [focused, setFocused] = react.useState(false);
     const [positionElement, setPositionElement] = react.useState(0);
     const [listElements, setListElements] = react.useState(undefined);
     react.useEffect(() => {
@@ -1124,7 +1160,7 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
         setLocationList();
     }, [visible]);
     react.useEffect(() => {
-        setCollection(new ListFieldCollection(suggestions));
+        setCollection(new ListCollection(suggestions));
     }, [suggestions]);
     function setLocationList() {
         if (boxContentRef?.current) {
@@ -1142,7 +1178,7 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
                 }
                 break;
             case 'ArrowDown':
-                if (visible && (ignoreHigher || !higher)) {
+                if (visible && (withHigher || !higher)) {
                     navigationInputDown();
                 }
                 break;
@@ -1196,7 +1232,7 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
             setPositionElement(newPosition);
             listElements?.item(newPosition).focus();
         }
-        else if (ignoreHigher || !higher) {
+        else if (withHigher || !higher) {
             inputRef?.current?.focus();
         }
     }
@@ -1207,30 +1243,30 @@ function useListControl({ suggestions, formControl, ignoreHigher = false }) {
             setPositionElement(newPosition);
             listElements?.item(newPosition).focus();
         }
-        else if (higher && !ignoreHigher) {
+        else if (higher && !withHigher) {
             inputRef?.current?.focus();
         }
     }
     return {
-        active,
         boxContentRef,
         collection,
+        focused,
         higher,
         inputRef,
         listRef,
+        value,
+        visible,
         navigationElement,
         navigationInput,
-        setActive,
+        setFocused,
         setValue,
-        setVisible,
-        value,
-        visible
+        setVisible
     };
 }
 
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
-function RlsAutocompleteField({ suggestions, children, disabled, formControl, hiddenIcon, onSearch, onSelect, onValue, placeholder, searching, rlsTheme }) {
+function useAutocompleteField({ suggestions, disabled, formControl, onSelect, onValue }) {
     const [pattern, setPattern] = react.useState('');
     const [coincidences, setCoincidences] = react.useState([]);
     const [store, setStore] = react.useState({
@@ -1238,7 +1274,12 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         coincidences: [],
         previous: null
     });
-    const { active, boxContentRef, higher, inputRef, listRef, collection, value, visible, setActive, setValue, setVisible, navigationElement, navigationInput } = useListControl({ suggestions, formControl, ignoreHigher: true });
+    const listControl = useListControl({
+        suggestions,
+        formControl,
+        withHigher: true
+    });
+    const { collection, inputRef, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
     const [changeInternal, setChangeInternal] = react.useState(false);
     react.useEffect(() => {
         filterSuggestions(pattern, true);
@@ -1256,7 +1297,7 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         redefineDescription();
     }, [collection]);
     function redefineDescription() {
-        const element = formControl?.state && collection.findElement(formControl?.state);
+        const element = formControl?.state && collection.find(formControl?.state);
         setValue(element?.description || '');
     }
     function onClickControl() {
@@ -1266,10 +1307,10 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         }
     }
     function onFocusInput() {
-        setActive(true);
+        setFocused(true);
     }
     function onBlurInput() {
-        setActive(false);
+        setFocused(false);
     }
     function onKeydownInput(event) {
         switch (event.code) {
@@ -1298,12 +1339,12 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
     function onClickBackdrop() {
         setVisible(false);
     }
-    function onClickItem(element) {
+    function onClickElement(element) {
         return () => {
             onChange(element);
         };
     }
-    function onKeydownItem(element) {
+    function onKeydownElement(element) {
         return (event) => {
             switch (event.code) {
                 case 'Enter':
@@ -1334,8 +1375,8 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
     function filterSuggestions(pattern, reboot = false) {
         if (pattern) {
             const store = reboot ? createStoreEmpty() : searchForPattern(pattern);
-            const filters = store?.coincidences || suggestions;
-            const coincidences = filters.filter((element) => element.hasCoincidence(pattern));
+            const elements = store?.coincidences || suggestions;
+            const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
             setCoincidences(coincidences.slice(0, MAX_ELEMENTS));
             setStore({
                 coincidences,
@@ -1363,9 +1404,9 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
         return newStore || rebootStore();
     }
     function rebootStore() {
-        const newStore = createStoreEmpty();
-        setStore(newStore);
-        return newStore;
+        const store = createStoreEmpty();
+        setStore(store);
+        return store;
     }
     function createStoreEmpty() {
         return {
@@ -1374,19 +1415,46 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, hi
             previous: null
         };
     }
-    return (jsxRuntime.jsxs("div", { ref: boxContentRef, className: renderClassStatus('rls-box-field', {
+    return {
+        coincidences,
+        listControl,
+        pattern,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput,
+        setPattern
+    };
+}
+
+function RlsAutocompleteFieldTemplate({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }) {
+    const { coincidences, listControl, pattern, onBlurInput, onClickAction, onClickBackdrop, onClickControl, onClickElement, onFocusInput, onKeydownElement, onKeydownInput, setPattern } = useAutocompleteField({
+        suggestions,
+        disabled,
+        formControl,
+        onSelect,
+        onValue
+    });
+    return (jsxRuntime.jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', {
             disabled,
-            active,
-            selected: !!value
-        }, 'rls-autocomplete-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("label", { className: "rls-list-field__control", onClick: onClickControl, children: value ? (jsxRuntime.jsx("span", { className: "rls-list-field__control__description", children: value })) : (jsxRuntime.jsx("span", { className: "rls-list-field__control__placeholder", children: placeholder })) }), !hiddenIcon && value && (jsxRuntime.jsx("button", { className: "rls-list-field__action", disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
-                    visible,
-                    hide: !visible,
-                    higher
-                }), children: [jsxRuntime.jsx("div", { className: "rls-list-field__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [jsxRuntime.jsxs("div", { className: "rls-list-field__ul__search", children: [jsxRuntime.jsx("input", { ref: inputRef, className: "rls-list-field__ul__control", type: "text", value: pattern, onChange: ({ target: { value } }) => {
+            focused: listControl.focused,
+            selected: !!listControl.value
+        }, 'rls-autocomplete-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("label", { className: "rls-list-field__control", onClick: onClickControl, children: listControl.value ? (jsxRuntime.jsx("span", { className: "rls-list-field__control__description", children: listControl.value })) : (jsxRuntime.jsx("span", { className: "rls-list-field__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsxRuntime.jsx("button", { className: "rls-list-field__action", disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                    visible: listControl.visible,
+                    hide: !listControl.visible,
+                    higher: listControl.higher
+                }), children: [jsxRuntime.jsx("div", { className: "rls-list-field__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [jsxRuntime.jsxs("div", { className: "rls-list-field__ul__search", children: [jsxRuntime.jsx("input", { ref: listControl.inputRef, className: "rls-list-field__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: pattern, onChange: ({ target: { value } }) => {
                                                 setPattern(value);
                                             }, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (jsxRuntime.jsx("button", { disabled: disabled || searching, onClick: () => {
                                                 onSearch(pattern);
-                                            }, children: jsxRuntime.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntime.jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickItem(element), onKeyDown: onKeydownItem(element), children: jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !coincidences.length && (jsxRuntime.jsx("li", { className: "rls-list-field__empty", children: jsxRuntime.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntime.jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsxRuntime.jsx("p", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+                                            }, children: jsxRuntime.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntime.jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (jsxRuntime.jsx("li", { className: "rls-list-field__empty", children: jsxRuntime.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntime.jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntime.jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+}
+function RlsAutocompleteField(props) {
+    return (jsxRuntime.jsx(RlsAutocompleteFieldTemplate, { ...props, render: (element) => (jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
 }
 
 function RlsCard({ children, outline, rlsTheme }) {
@@ -1425,7 +1493,7 @@ function useConfirmationService() {
                 subtitle,
                 title,
                 approved: {
-                    label: approved || 'Aceptar',
+                    label: approved || reactI18n('confirmationActionApproved'),
                     onClick: () => {
                         setVisible(false);
                         resolve(ConfirmationResult.approved());
@@ -1592,7 +1660,7 @@ const VISIBILITY$1 = {
         year: true
     }
 };
-function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, onListener, rlsTheme }) {
+function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, rlsTheme, onListener }) {
     const dateInitial = formControl?.state || date || new Date();
     const yearControl = useReactControl({ state: dateInitial.getFullYear() });
     const dayControl = useReactControl({ state: dateInitial.getDate() });
@@ -1658,14 +1726,14 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
                     year,
                     day,
                     month
-                }), children: [jsxRuntime.jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxRuntime.jsxs("div", { className: "rls-date-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: "Cancelar" }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--today", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onToday, children: "Hoy" }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: "Establecer" }) })] }) })] }));
+                }), children: [jsxRuntime.jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxRuntime.jsxs("div", { className: "rls-date-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--today", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onToday, children: reactI18n('dateActionToday') }) }), jsxRuntime.jsx("div", { className: "rls-date-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
 function RlsModal({ children, visible, rlsTheme }) {
     return ReactDOM.createPortal(jsxRuntime.jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntime.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
-function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
+function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme, onValue }) {
     const dateInitial = formControl?.state || date || new Date();
     const [value, setValue] = react.useState(dateInitial);
     const [show, setShow] = react.useState(false);
@@ -1676,10 +1744,18 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
     function onClickInput() {
         setShow(true);
     }
+    function onChange(value, ignoreControl = false) {
+        if (!ignoreControl) {
+            formControl?.setState(undefined);
+        }
+        setValue(undefined);
+        if (onValue) {
+            onValue(value);
+        }
+    }
     function onClean() {
         if (value) {
-            formControl?.setState(undefined);
-            setValue(undefined);
+            onChange(undefined);
             if (formControl && !formControl.touched) {
                 formControl.touch();
             }
@@ -1688,9 +1764,9 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             setShow(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsxRuntime.jsx(RlsModal, { visible: show, children: jsxRuntime.jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
-                        if (value) {
-                            setValue(value);
+    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsxRuntime.jsx(RlsModal, { visible: show, children: jsxRuntime.jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+                        if (type !== PickerListenerType.Cancel) {
+                            onChange(value, true);
                         }
                         setShow(false);
                         if (formControl && !formControl.touched) {
@@ -1775,7 +1851,7 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
                     month
                 }), children: [jsxRuntime.jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsMonthPicker, { formControl: monthControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntime.jsx(RlsYearPicker, { formControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
                     automatic
-                }), children: jsxRuntime.jsxs("div", { className: "rls-date-range-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: "Cancelar" }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: "Establecer" }) })] }) })] }));
+                }), children: jsxRuntime.jsxs("div", { className: "rls-date-range-picker__actions", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsxRuntime.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsxRuntime.jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
 function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
@@ -1812,8 +1888,9 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
-function RlsSelectField({ suggestions, children, disabled, formControl, onSelect, onValue, placeholder, rlsTheme }) {
-    const { active, boxContentRef, higher, inputRef, listRef, collection, value, visible, setActive, setValue, setVisible, navigationElement, navigationInput } = useListControl({ suggestions, formControl });
+function useSelectField({ suggestions, formControl, onSelect, onValue }) {
+    const listControl = useListControl({ suggestions, formControl });
+    const { collection, inputRef, visible, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
     const [changeInternal, setChangeInternal] = react.useState(false);
     react.useEffect(() => {
         if (!changeInternal) {
@@ -1825,16 +1902,16 @@ function RlsSelectField({ suggestions, children, disabled, formControl, onSelect
         redefineDescription();
     }, [collection]);
     function redefineDescription() {
-        const element = formControl?.state && collection.findElement(formControl?.state);
+        const element = formControl?.state && collection.find(formControl?.state);
         setValue(element?.description || '');
     }
     function onFocusInput() {
-        setActive(true);
+        setFocused(true);
     }
     function onBlurInput() {
-        setActive(false);
+        setFocused(false);
     }
-    function onClickInput() {
+    function onClickControl() {
         setVisible(true);
     }
     function onKeydownInput(event) {
@@ -1866,12 +1943,12 @@ function RlsSelectField({ suggestions, children, disabled, formControl, onSelect
     function onClickBackdrop() {
         setVisible(false);
     }
-    function onClickItem(element) {
+    function onClickElement(element) {
         return () => {
             onChange(element);
         };
     }
-    function onKeydownItem(element) {
+    function onKeydownElement(element) {
         return (event) => {
             switch (event.code) {
                 case 'Enter':
@@ -1900,11 +1977,37 @@ function RlsSelectField({ suggestions, children, disabled, formControl, onSelect
             onValue(value);
         }
     }
-    return (jsxRuntime.jsxs("div", { ref: boxContentRef, className: renderClassStatus('rls-box-field', { active, disabled }, 'rls-select-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { ref: inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsxRuntime.jsx("button", { className: renderClassStatus('rls-list-field__action', { visible }), disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
-                    visible,
-                    hide: !visible,
-                    higher
-                }), children: [jsxRuntime.jsx("div", { className: "rls-list-field__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickItem(element), onKeyDown: onKeydownItem(element), children: jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !suggestions.length && (jsxRuntime.jsx("li", { className: "rls-list-field__empty", children: jsxRuntime.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntime.jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsxRuntime.jsx("p", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+    return {
+        listControl,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput: onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    };
+}
+
+function RlsSelectFieldTemplate({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }) {
+    const { listControl, onBlurInput, onClickAction, onClickBackdrop, onClickElement, onClickInput, onFocusInput, onKeydownElement, onKeydownInput } = useSelectField({
+        suggestions,
+        disabled,
+        formControl,
+        onSelect,
+        onValue
+    });
+    return (jsxRuntime.jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', { focused: listControl.focused, disabled }, 'rls-select-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { ref: listControl.inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsxRuntime.jsx("button", { className: renderClassStatus('rls-list-field__action', {
+                                visible: listControl.visible
+                            }), disabled: disabled, onClick: onClickAction, children: jsxRuntime.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                    visible: listControl.visible,
+                    hide: !listControl.visible,
+                    higher: listControl.higher
+                }), children: [jsxRuntime.jsx("div", { className: "rls-list-field__suggestions__body", children: jsxRuntime.jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsxRuntime.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntime.jsx("li", { className: "rls-list-field__empty", children: jsxRuntime.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntime.jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntime.jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntime.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+}
+function RlsSelectField(props) {
+    return (jsxRuntime.jsx(RlsSelectFieldTemplate, { ...props, render: (element) => (jsxRuntime.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
 }
 
 const DURATION_ANIMATION = 240;
@@ -1970,10 +2073,11 @@ function RlsApplication({ children }) {
 
 exports.ConfirmationResult = ConfirmationResult;
 exports.DateRange = DateRange;
-exports.ListFieldCollection = ListFieldCollection;
+exports.ListCollection = ListCollection;
 exports.RlsAmount = RlsAmount;
 exports.RlsApplication = RlsApplication;
 exports.RlsAutocompleteField = RlsAutocompleteField;
+exports.RlsAutocompleteFieldTemplate = RlsAutocompleteFieldTemplate;
 exports.RlsAvatar = RlsAvatar;
 exports.RlsBallot = RlsBallot;
 exports.RlsBreadcrumb = RlsBreadcrumb;
@@ -2019,6 +2123,7 @@ exports.RlsRadioButton = RlsRadioButton;
 exports.RlsRadioButtonLabel = RlsRadioButtonLabel;
 exports.RlsSearchInput = RlsSearchInput;
 exports.RlsSelectField = RlsSelectField;
+exports.RlsSelectFieldTemplate = RlsSelectFieldTemplate;
 exports.RlsSkeleton = RlsSkeleton;
 exports.RlsSkeletonText = RlsSkeletonText;
 exports.RlsSnackbar = RlsSnackbar;