@rolster/react-components 1.5.7 → 18.10.0

package/dist/es/index.js

@@ -0,0 +1,2051 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, createContext } from 'react';
+import { currencyFormat, PartialSealed } from '@rolster/helpers-advanced';
+import { daysFromMonth, weight, refactorDay, DAY_LABELS, normalizeMinTime, isBefore, formatDate, isAfter, timeDifference, isBetween, Month, MONTH_NAMES, refactorYear, refactorMonth } from '@rolster/helpers-date';
+import { hasPattern } from '@rolster/helpers-string';
+import { i18n } from '@rolster/i18n';
+import ReactDOM from 'react-dom';
+import 'uuid';
+import { BehaviorSubject } from 'rxjs';
+
+const baseCls = 'rls-tabular-text';
+const pointers = ['.', ','];
+function charClass(char) {
+    return pointers.includes(char) ? `${baseCls}__pointer` : `${baseCls}__char`;
+}
+function RlsTabularText({ value }) {
+    return (jsx("div", { className: "rls-tabular-text", children: value?.split('').map((char, index) => (jsx("span", { className: charClass(char), children: char }, index))) }));
+}
+
+function RlsAmount({ value, decimals, rlsTheme, symbol }) {
+    return (jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsx("span", { children: symbol }), jsx(RlsTabularText, { value: currencyFormat({ value, decimals }) })] }));
+}
+
+function renderClassStatus(base, status = {}, aditionals) {
+    const resultClass = [base];
+    Object.entries(status).forEach(([name, value]) => {
+        if (value) {
+            typeof value === 'string'
+                ? resultClass.push(`${base}--${value}`)
+                : resultClass.push(`${base}--${name}`);
+        }
+    });
+    if (aditionals) {
+        resultClass.push(aditionals);
+    }
+    return resultClass.join(' ');
+}
+
+function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsBreadcrumb({ labels }) {
+    return (jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsx("a", { className: "rls-breadcrumb__label__a", children: label }) }, index))) }));
+}
+
+function RlsIcon({ value, skeleton }) {
+    return (jsx("div", { className: renderClassStatus('rls-icon', { skeleton }), children: jsx("i", { className: `rls-icon-${value}` }) }));
+}
+
+function RlsButton({ type, children, disabled, prefixIcon, suffixIcon, rlsTheme, onClick }) {
+    return (jsx("button", { className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxs("div", { className: renderClassStatus('rls-button__content', { type }), children: [prefixIcon && jsx(RlsIcon, { value: prefixIcon }), children && (jsx("div", { className: "rls-button__label", children: children })), suffixIcon && jsx(RlsIcon, { value: suffixIcon })] }) }));
+}
+
+function RlsButtonAction({ icon, disabled, tooltip, onClick }) {
+    return (jsxs("button", { className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsx("div", { className: "rls-button-action__content", children: jsx(RlsIcon, { value: icon }) }), tooltip && (jsx("div", { className: "rls-button-action__tooltip caption-semibold", children: jsx("span", { children: tooltip }) }))] }));
+}
+
+function RlsCheckBox({ checked, disabled, onClick, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-checkbox', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsx("div", { className: "rls-checkbox__component" }) }));
+}
+function RlsCheckBoxControl({ formControl, disabled, rlsTheme }) {
+    return (jsx(RlsCheckBox, { checked: formControl.state || false, disabled: disabled, onClick: () => {
+            formControl.setState(!formControl.state);
+        }, rlsTheme: rlsTheme }));
+}
+
+function RlsInput({ children, disabled, formControl, onValue, placeholder, type, value }) {
+    const [focused, setFocused] = useState(false);
+    function onChange(event) {
+        switch (type) {
+            case 'number':
+                setState(+event.target.value);
+                break;
+            default:
+                setState(event.target.value);
+                break;
+        }
+    }
+    function setState(value) {
+        formControl?.setState(value);
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    function onFocus() {
+        formControl?.focus();
+        setFocused(true);
+    }
+    function onBlur() {
+        if (formControl && !formControl.touched) {
+            formControl.touch();
+        }
+        formControl?.blur();
+        setFocused(false);
+    }
+    return (jsxs("div", { className: renderClassStatus('rls-input', {
+            focused: formControl?.focused || focused,
+            disabled: formControl?.disabled || disabled
+        }), children: [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 || '' }), jsx("span", { className: "rls-input__value", children: children })] }));
+}
+
+function RlsInputMoney({ decimals, disabled, formControl, onValue, placeholder, symbol, value }) {
+    const [valueInput, setValueInput] = useState(value || 0);
+    function onMoney(value) {
+        if (!formControl) {
+            setValueInput(value);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return (jsx("div", { className: "rls-input-money", children: jsx(RlsInput, { formControl: formControl, type: "number", value: value, disabled: disabled, placeholder: placeholder, onValue: onMoney, children: jsx(RlsAmount, { value: formControl?.state || value || valueInput, symbol: symbol, decimals: decimals }) }) }));
+}
+
+function RlsInputNumber({ disabled, formControl, onValue, placeholder, value }) {
+    const [valueInput, setValueInput] = useState(value || 0);
+    function onNumber(value) {
+        if (!formControl) {
+            setValueInput(value);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return (jsx("div", { className: "rls-input-number", children: 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 }) {
+    const [focused, setFocused] = useState(false);
+    function onChange(event) {
+        formControl?.setState(event.target.value);
+        if (onValue) {
+            onValue(event.target.value);
+        }
+    }
+    function onFocus() {
+        formControl?.focus();
+        setFocused(true);
+    }
+    function onBlur() {
+        if (formControl && !formControl.touched) {
+            formControl.touch();
+        }
+        formControl?.blur();
+        setFocused(false);
+    }
+    return (jsx("div", { className: renderClassStatus('rls-input-password', {
+            focused: formControl?.focused || focused,
+            disabled
+        }), children: 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 }) {
+    const [valueInput, setValueInput] = useState(value || '');
+    function onText(value) {
+        if (!formControl) {
+            setValueInput(value);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return (jsx("div", { className: "rls-input-text", children: jsx(RlsInput, { formControl: formControl, type: "text", value: value, disabled: disabled, placeholder: placeholder, onValue: onText, children: formControl?.state || value || valueInput }) }));
+}
+
+function RlsLabel({ children, rlsTheme }) {
+    return (jsx("label", { className: "rls-label", "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsMessageIcon({ icon, children, rlsTheme }) {
+    return (jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsx(RlsIcon, { value: icon }), jsx("span", { className: "caption-regular truncate", children: children })] }));
+}
+
+function RlsPoster({ children, rlsTheme }) {
+    return (jsx("div", { className: "rls-poster", "rls-theme": rlsTheme, children: children }));
+}
+
+function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-progress-bar', { indeterminate }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
+}
+
+function RlsRadioButton({ checked, disabled, onClick, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsx("div", { className: "rls-radiobutton__component" }) }));
+}
+
+function RlsSearchInput({ formControl, placeholder, onSearch }) {
+    return (jsxs("div", { className: "rls-search-input", children: [jsx(RlsInput, { formControl: formControl, placeholder: placeholder }), onSearch && jsx(RlsButtonAction, { icon: "search", onClick: onSearch })] }));
+}
+
+function RlsSkeleton({ rlsTheme }) {
+    return jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+}
+
+function RlsSkeletonText({ active, children, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-skeleton-text', { active }), "rls-theme": rlsTheme, children: jsx("span", { className: "rls-skeleton-text__value", children: children }) }));
+}
+
+function RlsSwitch({ checked, disabled, onClick, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-switch', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxs("div", { className: "rls-switch__component", children: [jsx("div", { className: "rls-switch__component__element" }), jsx("div", { className: "rls-switch__component__bar" })] }) }));
+}
+function RlsSwitchControl({ formControl, disabled, rlsTheme }) {
+    return (jsx(RlsSwitch, { checked: formControl.state || false, disabled: disabled, onClick: () => {
+            formControl.setState(!formControl.state);
+        }, rlsTheme: rlsTheme }));
+}
+
+function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
+    return (jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsx("img", { src: img }), initials && jsx("span", { children: initials })] })), jsxs("div", { className: "rls-ballot__component", children: [jsx("label", { className: "rls-ballot__title", children: jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsx("label", { className: "rls-ballot__subtitle", children: jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
+}
+
+function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }) {
+    const contentRef = useRef(null);
+    const [firstAction] = options;
+    const [action, setAction] = useState(firstAction);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        function onCloseMenu({ target }) {
+            if (!contentRef?.current?.contains(target)) {
+                setVisible(false);
+            }
+        }
+        document.addEventListener('click', onCloseMenu);
+        return () => {
+            document.removeEventListener('click', onCloseMenu);
+        };
+    }, []);
+    function onClickMenu() {
+        setVisible((prevValue) => !prevValue);
+    }
+    function onSelectAction(action) {
+        setAction(action);
+        setVisible(false);
+    }
+    return (jsxs("div", { className: "rls-button-toggle", ref: contentRef, "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsx("div", { className: "rls-button-toggle__action", children: jsx(RlsButton, { disabled: disabled, type: type, onClick: () => {
+                                if (onAction) {
+                                    onAction(action.value);
+                                }
+                            }, children: action.label }) })), jsx("div", { className: "rls-button-toggle__icon", children: jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
+                    visible,
+                    hide: !visible
+                }), children: jsx("ul", { children: options.map((action, index) => (jsx("li", { className: "truncate", onClick: () => {
+                            onSelectAction(action);
+                        }, children: action.label }, index))) }) })] }));
+}
+
+function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme }) {
+    const [checked, setChecked] = useState(formControl?.value || false);
+    useEffect(() => {
+        setChecked(formControl?.state || false);
+    }, [formControl?.state]);
+    function onToggle() {
+        if (formControl) {
+            formControl?.setState(!formControl.state);
+        }
+        else {
+            setChecked(!checked);
+        }
+    }
+    return (jsxs("div", { className: renderClassStatus('rls-checkbox-label', {
+            disabled,
+            extended
+        }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-checkbox-label__component", onClick: onToggle, children: jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-checkbox-label__text", children: children })] }));
+}
+
+let Factory$2 = class Factory {
+    constructor(props) {
+        const { date, value, maxDate, minDate } = props;
+        this.value = value;
+        this.date = new Date(date.getTime());
+        this.maxDate = maxDate;
+        this.minDate = minDate;
+        this.date.setDate(1);
+    }
+    static execute(props) {
+        const factory = new Factory(props);
+        const firstWeek = factory.createFirstWeek();
+        const rightWeeks = factory.createRightWeeks();
+        return [firstWeek, ...rightWeeks];
+    }
+    createFirstWeek() {
+        const dayStart = this.date.getDay();
+        const days = [];
+        let day = 1;
+        for (let start = 0; start < dayStart; start++) {
+            days.push(this.createDayState());
+        }
+        for (let end = dayStart; end < 7; end++) {
+            days.push(this.createDayState(day));
+            day++;
+        }
+        return { days };
+    }
+    createRightWeeks() {
+        const dayStart = this.date.getDay();
+        const rightWeeks = [];
+        const dayCount = daysFromMonth(this.date.getFullYear(), this.date.getMonth());
+        let days = [];
+        let countDaysWeek = 1;
+        let day = 8 - dayStart;
+        do {
+            days.push(this.createDayState(day));
+            day++;
+            countDaysWeek++;
+            if (countDaysWeek > 7) {
+                rightWeeks.push({ days });
+                days = [];
+                countDaysWeek = 1;
+            }
+        } while (day <= dayCount);
+        const daysPending = this.createDaysPending(days.length);
+        rightWeeks.push({ days: [...days, ...daysPending] });
+        return rightWeeks;
+    }
+    createDaysPending(daysWeek) {
+        const daysPending = [];
+        const length = 7 - daysWeek;
+        for (let index = 0; index < length; index++) {
+            daysPending.push(this.createDayState());
+        }
+        return daysPending;
+    }
+    createDayState(value) {
+        return {
+            disabled: this.overflowDay(value || 0),
+            forbidden: !value,
+            selected: value === this.value,
+            value
+        };
+    }
+    overflowDay(day) {
+        return this.minOverflowDay(day) || this.maxOverflowDay(day);
+    }
+    minOverflowDay(day) {
+        return this.minDate
+            ? weight(refactorDay(this.date, day)) < weight(this.minDate)
+            : false;
+    }
+    maxOverflowDay(day) {
+        return this.maxDate
+            ? weight(refactorDay(this.date, day)) > weight(this.maxDate)
+            : false;
+    }
+};
+function createDayPicker(props) {
+    return Factory$2.execute(props);
+}
+
+function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
+    const initialDate = date || new Date();
+    const initialDay = formControl?.state || initialDate.getDate();
+    const [weeks, setWeeks] = useState([]);
+    const [value, setValue] = useState(initialDay);
+    useEffect(() => {
+        setWeeks(createDayPicker({
+            date: initialDate,
+            value: formControl?.state || value,
+            minDate,
+            maxDate
+        }));
+    }, [value, date, minDate, maxDate]);
+    useEffect(() => {
+        if (date && date.getDate() !== value) {
+            onChange(date.getDate());
+        }
+    }, [date]);
+    function onChange(value) {
+        setValue(value);
+        formControl?.setState(value);
+    }
+    return (jsxs("div", { className: "rls-day-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-picker__week", children: days.map(({ value, disabled, forbidden, selected }, index) => (jsx("div", { className: renderClassStatus('rls-day-picker__day', {
+                            disabled: disabled || disabledPicker,
+                            forbidden,
+                            selected
+                        }), onClick: () => {
+                            if (value && !disabled) {
+                                onChange(value);
+                            }
+                        }, children: jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
+}
+
+const DATE_FORMAT = '{dd}/{mm}/{aa}';
+class ListCollection {
+    constructor(value) {
+        this.value = value;
+    }
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
+    }
+}
+class DateRange {
+    constructor(minDate, maxDate) {
+        this.minDate = normalizeMinTime(minDate);
+        if (maxDate && isBefore(maxDate, minDate)) {
+            this.maxDate = normalizeMinTime(maxDate);
+        }
+        else {
+            this.maxDate = normalizeMinTime(minDate);
+        }
+        const minFormat = formatDate(this.minDate, DATE_FORMAT);
+        const maxFormat = formatDate(this.maxDate, DATE_FORMAT);
+        this.description = `${minFormat} - ${maxFormat}`;
+    }
+    recalculate(date) {
+        if (isBefore(this.minDate, date)) {
+            return new DateRange(date, this.maxDate);
+        }
+        if (isAfter(this.maxDate, date)) {
+            return new DateRange(this.minDate, date);
+        }
+        const minDifference = timeDifference(date, this.minDate);
+        const maxDifference = timeDifference(this.maxDate, date);
+        return minDifference > maxDifference
+            ? new DateRange(this.minDate, date)
+            : new DateRange(date, this.maxDate);
+    }
+    static now() {
+        return new DateRange(new Date());
+    }
+}
+
+let Factory$1 = class Factory {
+    constructor(props) {
+        const { date, range, maxDate, minDate } = props;
+        this.date = new Date(date.getTime());
+        this.range = range;
+        this.maxDate = maxDate;
+        this.minDate = minDate;
+        this.date.setDate(1);
+    }
+    static execute(props) {
+        const factory = new Factory(props);
+        const firstWeek = factory.createFirstWeek();
+        const rightWeeks = factory.createRightWeeks();
+        return [firstWeek, ...rightWeeks];
+    }
+    createFirstWeek() {
+        const dayStart = this.date.getDay();
+        const days = [];
+        let day = 1;
+        for (let start = 0; start < dayStart; start++) {
+            days.push(this.createDayRangeState());
+        }
+        for (let end = dayStart; end < 7; end++) {
+            days.push(this.createDayRangeState(day));
+            day++;
+        }
+        return { days };
+    }
+    createRightWeeks() {
+        const rightWeeks = [];
+        const dayStart = this.date.getDay();
+        const dayCount = daysFromMonth(this.date.getFullYear(), this.date.getMonth());
+        let days = [];
+        let countDaysWeek = 1;
+        let day = 8 - dayStart;
+        do {
+            days.push(this.createDayRangeState(day));
+            day++;
+            countDaysWeek++;
+            if (countDaysWeek > 7) {
+                rightWeeks.push({ days });
+                days = [];
+                countDaysWeek = 1;
+            }
+        } while (day <= dayCount);
+        const daysPending = this.createDaysPending(days.length);
+        rightWeeks.push({ days: [...days, ...daysPending] });
+        return rightWeeks;
+    }
+    createDaysPending(daysWeek) {
+        const daysPending = [];
+        const length = 7 - daysWeek;
+        for (let index = 0; index < length; index++) {
+            daysPending.push(this.createDayRangeState());
+        }
+        return daysPending;
+    }
+    createDayRangeState(day) {
+        return {
+            value: day,
+            disabled: this.overflowDay(day || 0),
+            forbidden: !day,
+            ranged: day ? this.isRangedFromDate(day) : false,
+            selected: day ? this.isSelected(day) : false
+        };
+    }
+    isSelected(day) {
+        return (this.isSelectedForDate(this.range.minDate, day) ||
+            this.isSelectedForDate(this.range.maxDate, day));
+    }
+    isSelectedForDate(date, day) {
+        return (date.getFullYear() === this.date.getFullYear() &&
+            date.getMonth() === this.date.getMonth() &&
+            day === date.getDate());
+    }
+    isRangedFromDate(day) {
+        return isBetween(this.range.minDate, this.range.maxDate, refactorDay(this.date, day));
+    }
+    overflowDay(day) {
+        return this.minOverflowDay(day) || this.maxOverflowDay(day);
+    }
+    minOverflowDay(day) {
+        return this.minDate
+            ? weight(refactorDay(this.date, day)) < weight(this.minDate)
+            : false;
+    }
+    maxOverflowDay(day) {
+        return this.maxDate
+            ? weight(refactorDay(this.date, day)) > weight(this.maxDate)
+            : false;
+    }
+};
+function createRangePicker(props) {
+    return Factory$1.execute(props);
+}
+
+function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
+    const initialRange = formControl?.state || DateRange.now();
+    const initialDate = normalizeMinTime(date || initialRange.minDate);
+    const [weeks, setWeeks] = useState([]);
+    const [range, setRange] = useState(initialRange);
+    useEffect(() => {
+        setWeeks(createRangePicker({
+            date: initialDate,
+            range,
+            minDate,
+            maxDate
+        }));
+    }, [range, date, minDate, maxDate]);
+    function onChange(value) {
+        const newRange = range.recalculate(refactorDay(initialDate, value));
+        setRange(newRange);
+        formControl?.setState(newRange);
+    }
+    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ value, disabled, forbidden, ranged, selected }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
+                            disabled: disabled || disabledPicker,
+                            forbidden,
+                            selected,
+                            ranged
+                        }), onClick: () => {
+                            if (value && !disabled) {
+                                onChange(value);
+                            }
+                        }, children: jsx("span", { className: "rls-day-range-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
+}
+
+function RlsMoneyField({ children, decimals, disabled, formControl, onValue, placeholder, symbol, rlsTheme, value }) {
+    return (jsxs("div", { className: renderClassStatus('rls-box-field', {
+            focused: formControl?.focused,
+            error: formControl?.touched && !formControl?.valid,
+            disabled: formControl?.disabled || disabled
+        }, 'rls-money-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+}
+
+const MONTH_MAX_VALUE = Month.January;
+const MONTH_MIN_VALUE = Month.December;
+class Factory {
+    constructor(props) {
+        const { date, value, maxDate, minDate } = props;
+        this.value = value;
+        this.date = new Date(date.getTime());
+        this.maxDate = maxDate;
+        this.minDate = minDate;
+    }
+    static execute(props) {
+        const factory = new Factory(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)
+        ];
+    }
+    createMonth(value) {
+        return {
+            value,
+            label: MONTH_NAMES()[value],
+            disabled: this.overflowMonth(value),
+            selected: value === this.value
+        };
+    }
+    get minYear() {
+        return this.minDate?.getFullYear() || 0;
+    }
+    get maxYear() {
+        return this.maxDate?.getFullYear() || 10000;
+    }
+    get minMonth() {
+        return this.minDate?.getMonth() || MONTH_MIN_VALUE;
+    }
+    get maxMonth() {
+        return this.maxDate?.getMonth() || MONTH_MAX_VALUE;
+    }
+    overflowMonth(month) {
+        return this.minOverflowMonth(month) || this.maxOverflowMonth(month);
+    }
+    minOverflowMonth(month) {
+        return this.date.getFullYear() === this.minYear && month < this.minMonth;
+    }
+    maxOverflowMonth(month) {
+        return this.date.getFullYear() === this.maxYear && month > this.maxMonth;
+    }
+}
+function isMinLimitMonth(month, date, maxDate) {
+    const minYear = maxDate?.getFullYear() || 0;
+    const minMonth = maxDate?.getMonth() || 0;
+    return date.getFullYear() === minYear && month <= minMonth;
+}
+function isMaxLimitMonth(month, date, maxDate) {
+    const maxYear = maxDate?.getFullYear() || 10000;
+    const maxMonth = maxDate?.getMonth() || 11;
+    return date.getFullYear() === maxYear && month >= maxMonth;
+}
+function createMonthPicker(props) {
+    return Factory.execute(props);
+}
+
+function RlsMonthPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme }) {
+    const initialDate = date || new Date();
+    const initialMonth = formControl?.state || initialDate.getMonth();
+    const [months, setMonths] = useState([]);
+    const [value, setValue] = useState(initialMonth);
+    useEffect(() => {
+        setMonths(createMonthPicker({
+            date: initialDate,
+            value: formControl?.state || value,
+            minDate,
+            maxDate
+        }));
+    }, [value, date, minDate, maxDate]);
+    return (jsx("div", { className: "rls-month-picker", "rls-theme": rlsTheme, children: months.map(({ label, value, disabled, selected }, index) => (jsx("div", { className: renderClassStatus('rls-month-picker__component', {
+                disabled: disabled || disabledPicker || false,
+                selected
+            }), onClick: () => {
+                formControl?.setState(value);
+                setValue(value);
+            }, children: jsx("span", { className: "rls-month-picker__span", children: label }) }, index))) }));
+}
+
+function RlsMonthTitlePicker({ monthControl, yearControl, date, maxDate, minDate, onClick }) {
+    const { state: month } = monthControl;
+    const { state: year } = yearControl;
+    const [limitMinMonth, setLimitMinMonth] = useState(false);
+    const [limitMaxMonth, setLimitMaxMonth] = useState(false);
+    const monthName = MONTH_NAMES()[month || 0];
+    useEffect(() => {
+        if (typeof month === 'number' && date) {
+            setLimitMinMonth(isMinLimitMonth(month, date, minDate));
+            setLimitMaxMonth(isMaxLimitMonth(month, date, maxDate));
+        }
+    }, [date]);
+    function onPreviousMonth() {
+        if (typeof month === 'number' && typeof year === 'number') {
+            if (month > MONTH_MIN_VALUE) {
+                monthControl.setState(month - 1);
+            }
+            else {
+                monthControl.setState(MONTH_MAX_VALUE);
+                yearControl.setState(year - 1);
+            }
+        }
+    }
+    function onNextMonth() {
+        if (typeof month === 'number' && typeof year === 'number') {
+            if (month < MONTH_MAX_VALUE) {
+                monthControl.setState(month + 1);
+            }
+            else {
+                monthControl.setState(MONTH_MIN_VALUE);
+                yearControl.setState(year + 1);
+            }
+        }
+    }
+    return (jsxs("div", { className: "rls-month-title-picker", children: [jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPreviousMonth, disabled: limitMinMonth }), jsx("span", { onClick: onClick, children: monthName }), jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNextMonth, disabled: limitMaxMonth })] }));
+}
+
+function RlsNumberField({ children, disabled, formControl, onValue, placeholder, rlsTheme, value }) {
+    return (jsxs("div", { className: renderClassStatus('rls-box-field', {
+            focused: formControl?.focused,
+            error: formControl?.touched && !formControl?.valid,
+            disabled: formControl?.disabled || disabled
+        }, 'rls-number-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+}
+
+const DEFAULT_COUNT_ELEMENT = 20;
+const MIN_NUMBER_PAGE = 1;
+const FIRST_PAGE = 0;
+const DEFAULT_MAX_VISIBLE = 4;
+function RlsPagination({ elements, count: defaultCount, filter, onElements, onPagination }) {
+    const count = defaultCount || DEFAULT_COUNT_ELEMENT;
+    const [collection, setCollection] = useState([]);
+    const [index, setIndex] = useState(0);
+    const [maxPage, setMaxPage] = useState(calculateMaxPage(elements, count));
+    const [paginations, setPaginations] = useState([]);
+    const [currentPagination, setCurrentPagination] = useState();
+    const [description, setDescription] = useState('');
+    const [firstPage, setFirstPage] = useState(true);
+    const [lastPage, setLastPage] = useState(false);
+    useEffect(() => {
+        refreshFromElements(elements);
+    }, [elements]);
+    useEffect(() => {
+        const isFirstPage = currentPagination?.value === FIRST_PAGE;
+        const isLastPage = currentPagination?.value === maxPage - 1;
+        setFirstPage(isFirstPage);
+        setLastPage(isLastPage);
+        if (onPagination) {
+            onPagination({ firstPage: isFirstPage, lastPage: isLastPage });
+        }
+    }, [currentPagination]);
+    useEffect(() => {
+        refreshFromFilter(filter);
+    }, [filter]);
+    function onChangeElements(elements) {
+        if (onElements) {
+            onElements(elements);
+        }
+    }
+    function calculateMaxPage(collection, count) {
+        return collection.length ? Math.ceil(collection.length / count) : 0;
+    }
+    function onSelectPagination(pagination) {
+        const { value } = pagination;
+        pagination.active = true;
+        setIndex(value);
+        setCurrentPagination(pagination);
+        refreshFromChanged(createPageProps({ index: value }));
+    }
+    function goPagination(pagination) {
+        if (currentPagination) {
+            currentPagination.active = false;
+        }
+        onSelectPagination(pagination);
+    }
+    function goPreviousPagination() {
+        if (currentPagination) {
+            const { prev, value } = currentPagination;
+            if (prev) {
+                onSelectPagination(prev);
+                currentPagination.active = false;
+            }
+            else {
+                const prevIndex = value - MIN_NUMBER_PAGE;
+                if (prevIndex >= FIRST_PAGE) {
+                    refreshFromChanged(createPagePropsFromIndex(prevIndex));
+                }
+            }
+        }
+    }
+    function goFirstPagination() {
+        if (collection.length) {
+            refreshFromChanged(createPagePropsFromIndex(FIRST_PAGE));
+        }
+    }
+    function goNextPagination() {
+        if (currentPagination) {
+            const { next, value } = currentPagination;
+            if (next) {
+                onSelectPagination(next);
+                currentPagination.active = false;
+            }
+            else {
+                const nextIndex = value + 1;
+                if (nextIndex <= maxPage) {
+                    refreshFromChanged(createPagePropsFromIndex(nextIndex));
+                }
+            }
+        }
+    }
+    function goLastPagination() {
+        if (collection.length) {
+            refreshFromChanged(createPagePropsFromIndex(maxPage - MIN_NUMBER_PAGE));
+        }
+    }
+    function createPageCollection(props) {
+        const { collection, count, index } = props;
+        if (collection.length) {
+            const finish = (index + MIN_NUMBER_PAGE) * count;
+            const start = index * count;
+            return collection.slice(start, finish);
+        }
+        return [];
+    }
+    function refreshFromElements(elements) {
+        elements.length
+            ? refreshFromChanged(createRefreshProps(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 });
+    }
+    function refreshFromChanged(page) {
+        refreshPaginations(page);
+        refreshDescription(page);
+        onChangeElements(createPageCollection(page));
+    }
+    function refreshCollection(elements, filter) {
+        const collection = filter
+            ? elements.filter((element) => hasPattern(JSON.stringify(element), filter))
+            : elements;
+        setCollection(collection);
+        return collection;
+    }
+    function refreshMaxPage(collection, count) {
+        const maxPage = calculateMaxPage(collection, count);
+        setMaxPage(maxPage);
+        return maxPage;
+    }
+    function refreshIndex(collection, currentMaxPage) {
+        const maxPage = currentMaxPage || refreshMaxPage(collection, count);
+        if (index < maxPage || index === FIRST_PAGE) {
+            return index;
+        }
+        const newIndex = maxPage - 1;
+        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;
+        const start = index * count + MIN_NUMBER_PAGE;
+        let end = (index + MIN_NUMBER_PAGE) * count;
+        if (end > collection.length) {
+            end = collection.length;
+        }
+        setDescription(`${start} - ${end} de ${totalCount}`);
+    }
+    function refreshPaginations({ index, maxPage }) {
+        let maxPageVisible = index + DEFAULT_MAX_VISIBLE;
+        if (maxPageVisible > maxPage) {
+            maxPageVisible = maxPage;
+        }
+        let minIndexPage = maxPageVisible - DEFAULT_MAX_VISIBLE;
+        if (minIndexPage < 0) {
+            minIndexPage = 0;
+        }
+        if (minIndexPage > index) {
+            minIndexPage = index;
+        }
+        let prevPagination = undefined;
+        const paginations = [];
+        for (let i = minIndexPage; i < maxPageVisible; i++) {
+            const pagination = createPagination(i, index);
+            paginations.push(pagination);
+            pagination.prev = prevPagination;
+            if (prevPagination) {
+                prevPagination.next = pagination;
+            }
+            prevPagination = pagination;
+        }
+        setPaginations(paginations);
+    }
+    function createPagination(value, index) {
+        const active = value === index;
+        const pagination = {
+            label: (value + 1).toString(),
+            value,
+            active
+        };
+        if (active) {
+            setCurrentPagination(pagination);
+        }
+        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
+        };
+    }
+    return (jsxs("div", { className: "rls-pagination", children: [jsxs("div", { className: "rls-pagination__actions", children: [jsx("button", { className: "rls-pagination__action", onClick: goFirstPagination, disabled: firstPage, children: jsx(RlsIcon, { value: "arrowhead-left" }) }), jsx("button", { className: "rls-pagination__action", onClick: goPreviousPagination, disabled: firstPage, children: jsx(RlsIcon, { value: "arrow-ios-left" }) })] }), jsx("div", { className: "rls-pagination__pages", children: paginations.map((page, index) => {
+                    return (jsx("div", { className: renderClassStatus('rls-pagination__page', {
+                            active: page.active
+                        }), onClick: () => {
+                            goPagination(page);
+                        }, children: page.label }, index));
+                }) }), jsx("div", { className: "rls-pagination__description", children: description }), jsxs("div", { className: "rls-pagination__actions", children: [jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: lastPage, children: jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
+}
+
+function RlsPasswordField({ children, disabled, formControl, placeholder, rlsTheme }) {
+    const [password, setPassword] = useState(true);
+    function onToggleInput() {
+        setPassword(!password);
+    }
+    return (jsxs("div", { className: renderClassStatus(' rls-box-field', {
+            focused: formControl?.focused,
+            error: formControl?.touched && !formControl?.valid,
+            disabled: formControl?.disabled || disabled
+        }, 'rls-password-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+}
+
+function RlsRadioButtonLabel({ children, disabled, extended, formControl, rlsTheme, value }) {
+    const [checked, setChecked] = useState(formControl?.state || false);
+    useEffect(() => {
+        setChecked(formControl?.state === value);
+    }, [formControl?.state]);
+    function onSelect() {
+        if (formControl) {
+            formControl?.setState(value);
+        }
+    }
+    return (jsxs("div", { className: renderClassStatus('rls-radiobutton-label', {
+            disabled,
+            extended
+        }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-radiobutton-label__component", onClick: onSelect, children: jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-radiobutton-label__text", children: children })] }));
+}
+
+function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme }) {
+    const [checked, setChecked] = useState(formControl?.value || false);
+    useEffect(() => {
+        setChecked(formControl?.state || false);
+    }, [formControl?.state]);
+    function onToggle() {
+        if (formControl) {
+            formControl?.setState(!formControl.state);
+        }
+        else {
+            setChecked(!checked);
+        }
+    }
+    return (jsxs("div", { className: renderClassStatus('rls-switch-label', { disabled, extended }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-switch-label__component", onClick: onToggle, children: jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsx("label", { className: "rls-switch-label__text", children: children })] }));
+}
+
+function RlsTextField({ children, disabled, formControl, onValue, placeholder, rlsTheme, value }) {
+    return (jsxs("div", { className: renderClassStatus('rls-box-field', {
+            focused: formControl?.focused,
+            error: formControl?.touched && !formControl?.valid,
+            disabled: formControl?.disabled || disabled
+        }, 'rls-text-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsx("div", { className: "rls-box-field__body", children: jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+}
+
+function RlsToolbar({ actions, children, subtitle }) {
+    return (jsxs("div", { className: "rls-toolbar", children: [jsxs("div", { className: "rls-toolbar__description", children: [children && jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsx("label", { className: "rls-toolbar__subtitle caption-semibold", children: subtitle }))] }), actions && (jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsx("div", { children: action }, index))) }))] }));
+}
+
+const COUNT_YEAR_RANGE = 4;
+class FactoryYearPicker {
+    constructor(props) {
+        const { value, maxDate, minDate } = props;
+        this.value = value;
+        this.maxDate = maxDate;
+        this.minDate = minDate;
+    }
+    static execute(props) {
+        const factory = new FactoryYearPicker(props);
+        let year = props.year;
+        if (factory.minOverflowYear(year)) {
+            year = factory.minYear;
+        }
+        else if (factory.maxOverflowYear(year)) {
+            year = factory.maxYear;
+        }
+        const years = factory.createYears(year);
+        return {
+            hasNext: factory.hasNext,
+            hasPrevious: factory.hasPrevious,
+            maxRange: factory.maxYearRange,
+            minRange: factory.minYearRange,
+            years
+        };
+    }
+    createYears(year) {
+        const prevYears = [];
+        const nextYears = [];
+        this.minYearRange = year;
+        this.maxYearRange = year;
+        for (let index = 0; index < COUNT_YEAR_RANGE; index++) {
+            const yearPrev = year - COUNT_YEAR_RANGE + index;
+            const yearNext = year + index + 1;
+            const valuePrev = yearPrev >= this.minYear ? yearPrev : undefined;
+            const valueNext = yearNext <= this.maxYear ? yearNext : undefined;
+            const prevState = this.createYear(valuePrev);
+            const nextState = this.createYear(valueNext);
+            prevYears.push(prevState);
+            nextYears.push(nextState);
+            this.recalculateRange(prevState, nextState);
+        }
+        const yearCenter = this.createYear(year);
+        return [...prevYears, yearCenter, ...nextYears];
+    }
+    minOverflowYear(year) {
+        return year < this.minYear;
+    }
+    maxOverflowYear(year) {
+        return year > this.maxYear;
+    }
+    get minYear() {
+        return this.minDate?.getFullYear() || 0;
+    }
+    get maxYear() {
+        return this.maxDate?.getFullYear() || 10000;
+    }
+    get hasPrevious() {
+        return this.minYear < this.minYearRange;
+    }
+    get hasNext() {
+        return this.maxYear > this.maxYearRange;
+    }
+    createYear(value) {
+        return {
+            value,
+            disabled: !value,
+            selected: value === this.value
+        };
+    }
+    recalculateRange(prev, next) {
+        if (!!prev.value && this.minYearRange > prev.value) {
+            this.minYearRange = prev.value;
+        }
+        if (!!next.value && this.maxYearRange < next.value) {
+            this.maxYearRange = next.value;
+        }
+    }
+}
+function createYearPicker(props) {
+    return FactoryYearPicker.execute(props);
+}
+
+function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxDate, minDate, rlsTheme }) {
+    const initialDate = date || new Date();
+    const initialYear = formControl?.state || initialDate.getFullYear();
+    const [value, setValue] = useState(initialYear);
+    const [year, setYear] = useState(initialYear);
+    const [template, setTemplate] = useState(createYearPicker({
+        value: formControl?.state || value,
+        year: initialYear,
+        minDate,
+        maxDate
+    }));
+    useEffect(() => {
+        setTemplate(createYearPicker({
+            value: formControl?.state || value,
+            year,
+            minDate,
+            maxDate
+        }));
+    }, [value, year, date, minDate, maxDate]);
+    function onClickPrev() {
+        setYear(year - 8);
+    }
+    function onClickNext() {
+        setYear(year + 8);
+    }
+    function onChange(value) {
+        formControl?.setState(value);
+        setYear(value);
+        setValue(value);
+    }
+    return (jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-year-picker__header", children: [jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: jsx("button", { disabled: !template.hasPrevious || disabledPicker, onClick: onClickPrev, children: jsx(RlsIcon, { value: "arrow-ios-left" }) }) }), jsx("div", { className: "rls-year-picker__title", children: jsxs("label", { className: "title1-bold", children: [template.minRange, " - ", template.maxRange] }) }), jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: jsx("button", { disabled: !template.hasNext || disabledPicker, onClick: onClickNext, children: jsx(RlsIcon, { value: "arrow-ios-right" }) }) })] }), jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, selected }, index) => (jsx("div", { className: renderClassStatus('rls-year-picker__year', {
+                        disabled: disabled || disabledPicker,
+                        selected
+                    }), onClick: () => {
+                        if (value) {
+                            onChange(value);
+                        }
+                    }, children: jsx("span", { className: "rls-year-picker__year__span body1-medium", children: value || '????' }) }, index))) })] }));
+}
+
+const reactI18n = 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;
+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, withHigher = false }) {
+    const boxContentRef = useRef(null);
+    const listRef = useRef(null);
+    const inputRef = useRef(null);
+    const [collection, setCollection] = useState(new ListCollection([]));
+    const [value, setValue] = useState('');
+    const [opened, setOpened] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [higher, setHigher] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [positionElement, setPositionElement] = useState(0);
+    const [listElements, setListElements] = useState(undefined);
+    useEffect(() => {
+        function onCloseSuggestions(event) {
+            if (!boxContentRef?.current?.contains(event.target)) {
+                setVisible(false);
+            }
+        }
+        document.addEventListener('click', onCloseSuggestions);
+        return () => {
+            document.removeEventListener('click', onCloseSuggestions);
+        };
+    }, []);
+    useEffect(() => {
+        if (visible && !opened) {
+            setOpened(true);
+        }
+        if (!visible && opened && formControl && !formControl.touched) {
+            formControl.touch();
+        }
+        setLocationList();
+    }, [visible]);
+    useEffect(() => {
+        setCollection(new ListCollection(suggestions));
+    }, [suggestions]);
+    function setLocationList() {
+        if (boxContentRef?.current) {
+            const { top, height } = boxContentRef.current.getBoundingClientRect();
+            const overflow = BASE_SIZE_PX / 2;
+            const positionEnd = top + height + MAZ_LIST_SIZE_PX + overflow;
+            setHigher(positionEnd > window.innerHeight);
+        }
+    }
+    function navigationInput(event) {
+        switch (event.code) {
+            case 'ArrowUp':
+                if (visible && higher) {
+                    navigationInputUp();
+                }
+                break;
+            case 'ArrowDown':
+                if (visible && (withHigher || !higher)) {
+                    navigationInputDown();
+                }
+                break;
+        }
+    }
+    function navigationElement(event) {
+        switch (event.code) {
+            case 'ArrowUp':
+                navigationElementUp();
+                break;
+            case 'ArrowDown':
+                navigationElementDown();
+                break;
+        }
+    }
+    function navigationInputUp() {
+        const elements = listRef?.current?.querySelectorAll(classElement);
+        if (elements?.length) {
+            const newPosition = elements.length - 1;
+            setListElements(elements);
+            setPositionElement(newPosition);
+            elements.item(newPosition).focus();
+            if (positionElement > MAX_POSITION_VISIBLE) {
+                const elementPosition = elements.length - MAX_POSITION_VISIBLE;
+                setTimeout(() => {
+                    listRef?.current?.scroll({
+                        top: ELEMENT_SIZE_PX * elementPosition,
+                        behavior: 'smooth'
+                    });
+                }, 100);
+            }
+        }
+    }
+    function navigationInputDown() {
+        const elements = listRef?.current?.querySelectorAll(classElement);
+        if (elements?.length) {
+            setListElements(elements);
+            setPositionElement(0);
+            elements.item(0).focus();
+            setTimeout(() => {
+                listRef?.current?.scroll({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            }, 100);
+        }
+    }
+    function navigationElementUp() {
+        if (positionElement > 0) {
+            const newPosition = positionElement - 1;
+            setPositionElement(newPosition);
+            listElements?.item(newPosition).focus();
+        }
+        else if (withHigher || !higher) {
+            inputRef?.current?.focus();
+        }
+    }
+    function navigationElementDown() {
+        const newPosition = positionElement + 1;
+        const length = listElements?.length || 0;
+        if (newPosition < length) {
+            setPositionElement(newPosition);
+            listElements?.item(newPosition).focus();
+        }
+        else if (higher && !withHigher) {
+            inputRef?.current?.focus();
+        }
+    }
+    return {
+        boxContentRef,
+        collection,
+        focused,
+        higher,
+        inputRef,
+        listRef,
+        value,
+        visible,
+        navigationElement,
+        navigationInput,
+        setFocused,
+        setValue,
+        setVisible
+    };
+}
+
+const DURATION_ANIMATION$1 = 240;
+const MAX_ELEMENTS = 6;
+function useAutocompleteField({ suggestions, disabled, formControl, onSelect, onValue }) {
+    const [pattern, setPattern] = useState('');
+    const [coincidences, setCoincidences] = useState([]);
+    const [store, setStore] = useState({
+        pattern: '',
+        coincidences: [],
+        previous: null
+    });
+    const listControl = useListControl({
+        suggestions,
+        formControl,
+        withHigher: true
+    });
+    const { collection, inputRef, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
+    const [changeInternal, setChangeInternal] = useState(false);
+    useEffect(() => {
+        filterSuggestions(pattern, true);
+    }, [suggestions]);
+    useEffect(() => {
+        filterSuggestions(pattern);
+    }, [pattern]);
+    useEffect(() => {
+        if (!changeInternal) {
+            redefineDescription();
+        }
+        setChangeInternal(false);
+    }, [formControl?.state]);
+    useEffect(() => {
+        redefineDescription();
+    }, [collection]);
+    function redefineDescription() {
+        const element = formControl?.state && collection.find(formControl?.state);
+        setValue(element?.description || '');
+    }
+    function onClickControl() {
+        if (!disabled) {
+            setVisible(true);
+            setTimeout(() => inputRef?.current?.focus(), DURATION_ANIMATION$1);
+        }
+    }
+    function onFocusInput() {
+        setFocused(true);
+    }
+    function onBlurInput() {
+        setFocused(false);
+    }
+    function onKeydownInput(event) {
+        switch (event.code) {
+            case 'Escape':
+                setVisible(false);
+                break;
+            case 'Tab':
+                setVisible(false);
+                break;
+            default:
+                navigationInput(event);
+                break;
+        }
+    }
+    function onClickAction() {
+        setVisible(false);
+        setValue('');
+        if (formControl) {
+            setChangeInternal(true);
+            formControl.setState(undefined);
+        }
+        if (onValue) {
+            onValue(undefined);
+        }
+    }
+    function onClickBackdrop() {
+        setVisible(false);
+    }
+    function onClickElement(element) {
+        return () => {
+            onChange(element);
+        };
+    }
+    function onKeydownElement(element) {
+        return (event) => {
+            switch (event.code) {
+                case 'Enter':
+                    onChange(element);
+                    break;
+                default:
+                    navigationElement(event);
+                    break;
+            }
+        };
+    }
+    function onChange({ description, value }) {
+        setVisible(false);
+        if (onSelect) {
+            onSelect(value);
+        }
+        else {
+            if (formControl) {
+                setChangeInternal(true);
+                formControl.setState(value);
+            }
+            setValue(description);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    function filterSuggestions(pattern, reboot = false) {
+        if (pattern) {
+            const store = reboot ? createStoreEmpty() : searchForPattern(pattern);
+            const elements = store?.coincidences || suggestions;
+            const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
+            setCoincidences(coincidences.slice(0, MAX_ELEMENTS));
+            setStore({
+                coincidences,
+                pattern,
+                previous: store
+            });
+        }
+        else {
+            setCoincidences(suggestions.slice(0, MAX_ELEMENTS));
+            rebootStore();
+        }
+    }
+    function searchForPattern(value) {
+        if (!store.pattern) {
+            return null;
+        }
+        let newStore = store;
+        let search = false;
+        while (!search && newStore) {
+            search = hasPattern(value, newStore.pattern, true);
+            if (!search) {
+                newStore = newStore.previous;
+            }
+        }
+        return newStore || rebootStore();
+    }
+    function rebootStore() {
+        const store = createStoreEmpty();
+        setStore(store);
+        return store;
+    }
+    function createStoreEmpty() {
+        return {
+            coincidences: undefined,
+            pattern: '',
+            previous: null
+        };
+    }
+    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 (jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-box-field', {
+            disabled,
+            focused: listControl.focused,
+            selected: !!listControl.value
+        }, 'rls-autocomplete-field rls-list-field'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("label", { className: "rls-list-field__control", onClick: onClickControl, children: listControl.value ? (jsx("span", { className: "rls-list-field__control__description", children: listControl.value })) : (jsx("span", { className: "rls-list-field__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsx("button", { className: "rls-list-field__action", disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                    visible: listControl.visible,
+                    hide: !listControl.visible,
+                    higher: listControl.higher
+                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [jsxs("div", { className: "rls-list-field__ul__search", children: [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 && (jsx("button", { disabled: disabled || searching, onClick: () => {
+                                                onSearch(pattern);
+                                            }, children: jsx(RlsIcon, { value: "search" }) }))] }), searching && jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+}
+function RlsAutocompleteField(props) {
+    return (jsx(RlsAutocompleteFieldTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+}
+
+function RlsCard({ children, outline, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-card', { outline }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-card__content", children: children }) }));
+}
+
+class ConfirmationResult extends PartialSealed {
+    static approved() {
+        return new ConfirmationResult('approved');
+    }
+    static reject() {
+        return new ConfirmationResult('reject');
+    }
+}
+function RlsConfirmation({ approved, content, reject, rlsTheme, subtitle, title, visible }) {
+    return (jsxs("div", { className: renderClassStatus('rls-confirmation', { visible }), "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-confirmation__component", children: [jsxs("div", { className: "rls-confirmation__header", children: [title && (jsx("div", { className: "rls-confirmation__header__title", children: title })), subtitle && (jsx("div", { className: "rls-confirmation__header__subtitle", children: subtitle }))] }), jsx("div", { className: "rls-confirmation__body", children: content && (jsx("div", { className: "rls-confirmation__body__content", children: content })) }), (approved || reject) && (jsx("div", { className: "rls-confirmation__footer", children: jsxs("div", { className: "rls-confirmation__footer__actions", children: [approved && (jsx(RlsButton, { type: "raised", onClick: () => {
+                                        if (approved.onClick) {
+                                            approved.onClick();
+                                        }
+                                    }, children: approved.label })), reject && (jsx(RlsButton, { type: "outline", onClick: () => {
+                                        if (reject.onClick) {
+                                            reject.onClick();
+                                        }
+                                    }, children: reject.label }))] }) }))] }), jsx("div", { className: "rls-confirmation__backdrop" })] }));
+}
+function useConfirmationService() {
+    const [config, setConfig] = useState({});
+    const [visible, setVisible] = useState(false);
+    const rlsConfirmation = ReactDOM.createPortal(jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
+    function confirmation(config) {
+        return new Promise((resolve) => {
+            const { content, rlsTheme, subtitle, title, approved, reject } = config;
+            setConfig({
+                content,
+                rlsTheme,
+                subtitle,
+                title,
+                approved: {
+                    label: approved || reactI18n('confirmationActionApproved'),
+                    onClick: () => {
+                        setVisible(false);
+                        resolve(ConfirmationResult.approved());
+                    }
+                },
+                reject: reject
+                    ? {
+                        label: reject,
+                        onClick: () => {
+                            setVisible(false);
+                            resolve(ConfirmationResult.reject());
+                        }
+                    }
+                    : undefined
+            });
+            setVisible(true);
+        });
+    }
+    return {
+        RlsConfirmation: rlsConfirmation,
+        confirmation
+    };
+}
+
+function RlsDatatableHeader({ children }) {
+    return jsx("tr", { className: "rls-datatable__header", children: children });
+}
+function RlsDatatableTitle({ children, className, control }) {
+    return (jsx("th", { className: `${className} ` + renderClassStatus('rls-datatable__title', { control }), children: children }));
+}
+function RlsDatatableData({ children, className }) {
+    return jsx("tr", { className: `rls-datatable__data ${className}`, children: children });
+}
+function RlsDatatableCell({ children, className, control, overflow }) {
+    return (jsx("th", { className: `${className} ` +
+            renderClassStatus('rls-datatable__cell', { control, overflow }), children: children }));
+}
+function RlsDatatable({ children, footer, header, rlsTheme }) {
+    return (jsxs("div", { className: "rls-datatable", "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { className: "rls-datatable__tbody", children: children })] }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+}
+
+const controlIsValid = (props) => {
+    const { state, validators } = props;
+    return validators.reduce((errors, validator) => {
+        const error = validator(state);
+        if (error) {
+            errors.push(error);
+        }
+        return errors;
+    }, []);
+};
+
+function useReactControl(props = {}) {
+    const [state, setCurrentState] = useState(props.state);
+    const [value, setValue] = useState(props.state);
+    const [touched, setTouched] = useState(false);
+    const [dirty, setDirty] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [disabled, setDisabled] = useState(false);
+    const [initialValue] = useState(props.state);
+    const [validators, setValidators] = useState(props.validators);
+    const [subscribers] = useState(new BehaviorSubject(props.state));
+    const elementRef = useRef(null);
+    const errors = (() => validators ? controlIsValid({ state, validators }) : [])();
+    const error = (() => errors[0])();
+    const valid = (() => errors.length === 0)();
+    useEffect(() => {
+        if (state !== null && state !== undefined) {
+            setValue(state);
+        }
+        subscribers.next(state);
+    }, [state]);
+    function focus() {
+        setFocused(true);
+    }
+    function blur() {
+        setFocused(false);
+    }
+    function disable() {
+        setDisabled(true);
+    }
+    function enable() {
+        setDisabled(false);
+    }
+    function touch() {
+        setTouched(true);
+    }
+    function untouch() {
+        setTouched(false);
+    }
+    function setState(state) {
+        setDirty(true);
+        setCurrentState(state);
+    }
+    function reset() {
+        setTouched(false);
+        setDirty(false);
+        setCurrentState(initialValue);
+    }
+    function subscribe(subscriber) {
+        return subscribers.subscribe(subscriber);
+    }
+    return {
+        elementRef,
+        error,
+        errors,
+        focused,
+        unfocused: !focused,
+        dirty,
+        pristine: !dirty,
+        disabled,
+        enabled: !disabled,
+        valid,
+        invalid: !valid,
+        touched,
+        untouched: !touched,
+        reset,
+        focus,
+        blur,
+        disable,
+        enable,
+        touch,
+        untouch,
+        setState,
+        setValidators,
+        state,
+        subscribe,
+        value
+    };
+}
+
+var PickerListenerType;
+(function (PickerListenerType) {
+    PickerListenerType["Select"] = "PickerSelect";
+    PickerListenerType["Now"] = "PickerNow";
+    PickerListenerType["Cancel"] = "PickerCancel";
+})(PickerListenerType || (PickerListenerType = {}));
+
+function verifyDateRange(date, min, max) {
+    return min && isBefore(min, date)
+        ? min
+        : max && isAfter(max, date)
+            ? max
+            : date;
+}
+
+const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
+const VISIBILITY_STATE$1 = {
+    month: false,
+    day: false,
+    year: false
+};
+const VISIBILITY$1 = {
+    DAY: {
+        ...VISIBILITY_STATE$1,
+        day: true
+    },
+    MONTH: {
+        ...VISIBILITY_STATE$1,
+        month: true
+    },
+    YEAR: {
+        ...VISIBILITY_STATE$1,
+        year: true
+    }
+};
+function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, onListener, rlsTheme }) {
+    const dateInitial = formControl?.state || date || new Date();
+    const yearControl = useReactControl({ state: dateInitial.getFullYear() });
+    const dayControl = useReactControl({ state: dateInitial.getDate() });
+    const monthControl = useReactControl({ state: dateInitial.getMonth() });
+    const [value, setValue] = useState(dateInitial);
+    const [{ day, month, year }, setVisibility] = useState(VISIBILITY$1.DAY);
+    const title = formatDate(value, FORMAT_DESCRIPTION);
+    useEffect(() => {
+        setValue((prevValue) => {
+            return typeof yearControl.state === 'number'
+                ? verifyDateRange(refactorYear(prevValue, yearControl.state), minDate, maxDate)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY$1.DAY);
+    }, [yearControl.state]);
+    useEffect(() => {
+        setValue((prevValue) => {
+            return typeof monthControl.state === 'number'
+                ? verifyDateRange(refactorMonth(prevValue, monthControl.state), minDate, maxDate)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY$1.DAY);
+    }, [monthControl.state]);
+    useEffect(() => {
+        setValue((prevValue) => {
+            return typeof dayControl.state === 'number'
+                ? verifyDateRange(refactorDay(prevValue, dayControl.state), minDate, maxDate)
+                : prevValue;
+        });
+    }, [dayControl.state]);
+    function onVisibilityDay() {
+        setVisibility(VISIBILITY$1.DAY);
+    }
+    function onVisibilityMonth() {
+        setVisibility(VISIBILITY$1.MONTH);
+    }
+    function onVisibilityYear() {
+        setVisibility(VISIBILITY$1.YEAR);
+    }
+    function onCancel() {
+        if (onListener) {
+            onListener({ type: PickerListenerType.Cancel });
+        }
+    }
+    function onToday() {
+        const value = new Date(); // Today date
+        formControl?.setState(value);
+        setValue(value);
+        yearControl.setState(value.getFullYear());
+        dayControl.setState(value.getDate());
+        monthControl.setState(value.getMonth());
+        if (onListener) {
+            onListener({ type: PickerListenerType.Now, value });
+        }
+    }
+    function onSelect() {
+        formControl?.setState(value);
+        if (onListener) {
+            onListener({ type: PickerListenerType.Select, value });
+        }
+    }
+    return (jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-picker__header", children: [jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: title }) }), jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-picker__component', {
+                    year,
+                    day,
+                    month
+                }), children: [jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: jsxs("div", { className: "rls-date-picker__actions", children: [jsx("div", { className: "rls-date-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-date-picker__actions--today", children: jsx(RlsButton, { type: "ghost", onClick: onToday, children: reactI18n('dateActionToday') }) }), jsx("div", { className: "rls-date-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
+}
+
+function RlsModal({ children, visible, rlsTheme }) {
+    return ReactDOM.createPortal(jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-modal__component", children: children }), jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+}
+
+function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
+    const dateInitial = formControl?.state || date || new Date();
+    const [value, setValue] = useState(dateInitial);
+    const [show, setShow] = useState(false);
+    const [description, setDescription] = useState('');
+    useEffect(() => {
+        setDescription(value ? formatDate(value, '{dd}/{mx}/{aa}') : '');
+    }, [value]);
+    function onClickInput() {
+        setShow(true);
+    }
+    function onClean() {
+        if (value) {
+            formControl?.setState(undefined);
+            setValue(undefined);
+            if (formControl && !formControl.touched) {
+                formControl.touch();
+            }
+        }
+        else {
+            setShow(true);
+        }
+    }
+    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsx(RlsModal, { visible: show, children: jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+                        if (value) {
+                            setValue(value);
+                        }
+                        setShow(false);
+                        if (formControl && !formControl.touched) {
+                            formControl.touch();
+                        }
+                    } }) })] }));
+}
+
+const VISIBILITY_STATE = {
+    month: false,
+    day: false,
+    year: false
+};
+const VISIBILITY = {
+    DAY: {
+        ...VISIBILITY_STATE,
+        day: true
+    },
+    MONTH: {
+        ...VISIBILITY_STATE,
+        month: true
+    },
+    YEAR: {
+        ...VISIBILITY_STATE,
+        year: true
+    }
+};
+function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, rlsTheme, onListener }) {
+    const dateInitial = normalizeMinTime(datePicker || new Date());
+    const rangeInitial = formControl?.state || DateRange.now();
+    const yearControl = useReactControl({ state: dateInitial.getFullYear() });
+    const monthControl = useReactControl({ state: dateInitial.getMonth() });
+    const dayControl = useReactControl({ state: rangeInitial });
+    const [value, setValue] = useState(rangeInitial);
+    const [date, setDate] = useState(dateInitial);
+    const [{ day, month, year }, setVisibility] = useState(VISIBILITY.DAY);
+    useEffect(() => {
+        setDate((prevValue) => {
+            return typeof yearControl.state === 'number'
+                ? refactorYear(prevValue, yearControl.state)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY.DAY);
+    }, [yearControl.state]);
+    useEffect(() => {
+        setDate((prevValue) => {
+            return typeof monthControl.state === 'number'
+                ? refactorMonth(prevValue, monthControl.state)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY.DAY);
+    }, [monthControl.state]);
+    useEffect(() => {
+        if (dayControl.state) {
+            setValue(dayControl.state);
+        }
+        setVisibility(VISIBILITY.DAY);
+    }, [dayControl.state]);
+    function onVisibilityDay() {
+        setVisibility(VISIBILITY.DAY);
+    }
+    function onVisibilityMonth() {
+        setVisibility(VISIBILITY.MONTH);
+    }
+    function onVisibilityYear() {
+        setVisibility(VISIBILITY.YEAR);
+    }
+    function onCancel() {
+        if (onListener) {
+            onListener({ type: PickerListenerType.Cancel });
+        }
+    }
+    function onSelect() {
+        formControl?.setState(value);
+        if (onListener) {
+            onListener({ type: PickerListenerType.Select, value });
+        }
+    }
+    return (jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-range-picker__header", children: [jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: value.description }) }), jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+                    year,
+                    day,
+                    month
+                }), children: [jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsMonthPicker, { formControl: monthControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsYearPicker, { formControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
+                    automatic
+                }), children: jsxs("div", { className: "rls-date-range-picker__actions", children: [jsx("div", { className: "rls-date-range-picker__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-date-range-picker__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
+}
+
+function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
+    const rangeInitial = formControl?.state || DateRange.now();
+    const dateInitial = datePicker || new Date();
+    const [value, setValue] = useState(rangeInitial);
+    const [date] = useState(dateInitial);
+    const [show, setShow] = useState(false);
+    const [description, setDescription] = useState('');
+    useEffect(() => {
+        setDescription(value?.description || '');
+    }, [value]);
+    function onClickInput() {
+        setShow(true);
+    }
+    function onClickAction() {
+        if (value) {
+            formControl?.setState(undefined);
+            setValue(undefined);
+        }
+        else {
+            setShow(true);
+        }
+    }
+    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-box-field", children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput }), jsx("button", { className: "rls-date-field__action", onClick: onClickAction, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: show, children: jsx(RlsDateRangePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+                        if (value) {
+                            setValue(value);
+                        }
+                        setShow(false);
+                    } }) })] }));
+}
+
+function RlsFormNavigation({ children, visible, rlsTheme }) {
+    return (jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsx("div", { className: "rls-form-navigation__body", children: children }) }));
+}
+
+function useSelectField({ suggestions, formControl, onSelect, onValue }) {
+    const listControl = useListControl({ suggestions, formControl });
+    const { collection, inputRef, visible, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
+    const [changeInternal, setChangeInternal] = useState(false);
+    useEffect(() => {
+        if (!changeInternal) {
+            redefineDescription();
+        }
+        setChangeInternal(false);
+    }, [formControl?.state]);
+    useEffect(() => {
+        redefineDescription();
+    }, [collection]);
+    function redefineDescription() {
+        const element = formControl?.state && collection.find(formControl?.state);
+        setValue(element?.description || '');
+    }
+    function onFocusInput() {
+        setFocused(true);
+    }
+    function onBlurInput() {
+        setFocused(false);
+    }
+    function onClickControl() {
+        setVisible(true);
+    }
+    function onKeydownInput(event) {
+        switch (event.code) {
+            case 'Space':
+                setVisible(true);
+                break;
+            case 'Enter':
+                setVisible(true);
+                break;
+            case 'Escape':
+                setVisible(false);
+                break;
+            case 'Tab':
+                setVisible(false);
+                break;
+            default:
+                navigationInput(event);
+                break;
+        }
+    }
+    function onClickAction() {
+        const newVisible = !visible;
+        setVisible(newVisible);
+        if (newVisible) {
+            inputRef?.current?.focus();
+        }
+    }
+    function onClickBackdrop() {
+        setVisible(false);
+    }
+    function onClickElement(element) {
+        return () => {
+            onChange(element);
+        };
+    }
+    function onKeydownElement(element) {
+        return (event) => {
+            switch (event.code) {
+                case 'Enter':
+                    onChange(element);
+                    break;
+                default:
+                    navigationElement(event);
+                    break;
+            }
+        };
+    }
+    function onChange({ description, value }) {
+        inputRef?.current?.focus();
+        setVisible(false);
+        if (onSelect) {
+            onSelect(value);
+        }
+        else {
+            if (formControl) {
+                setChangeInternal(true);
+                formControl.setState(value);
+            }
+            setValue(description);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    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 (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 && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [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 }), jsx("button", { className: renderClassStatus('rls-list-field__action', {
+                                visible: listControl.visible
+                            }), disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
+                    visible: listControl.visible,
+                    hide: !listControl.visible,
+                    higher: listControl.higher
+                }), children: [jsx("div", { className: "rls-list-field__suggestions__body", children: jsxs("ul", { ref: listControl.listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsx("li", { className: "rls-list-field__empty", children: jsxs("div", { className: "rls-list-field__empty__description", children: [jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+}
+function RlsSelectField(props) {
+    return (jsx(RlsSelectFieldTemplate, { ...props, render: (element) => (jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+}
+
+const DURATION_ANIMATION = 240;
+const DURATION_CHAR = 75;
+const DURATION_MAX = 9000;
+const DURATION_MIN = 3000;
+const DURATION_RESET = 480;
+function calculateDuration({ length }) {
+    let duration = length * DURATION_CHAR;
+    if (duration < DURATION_MIN) {
+        duration = DURATION_MIN;
+    }
+    else if (duration > DURATION_MAX) {
+        duration = DURATION_MAX;
+    }
+    return duration + DURATION_RESET;
+}
+function RlsSnackbar({ content, icon, title, visible, rlsTheme }) {
+    return (jsxs("div", { className: renderClassStatus('rls-snackbar', { visible }), "rls-theme": rlsTheme, children: [icon && (jsx("div", { className: "rls-snackbar__avatar", children: jsx(RlsIcon, { value: icon }) })), jsxs("div", { className: "rls-snackbar__component", children: [title && jsx("div", { className: "rls-snackbar__title", children: title }), jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
+}
+function useSnackbarService() {
+    const [config, setConfig] = useState({});
+    const [duration, setDuration] = useState(4000);
+    const [timeoutId, setTimeoutId] = useState();
+    const [visible, setVisible] = useState(false);
+    const rlsSnackbar = jsx(RlsSnackbar, { ...config, visible: visible });
+    useEffect(() => {
+        if (visible) {
+            const timeoutId = setTimeout(() => {
+                setVisible(false);
+                setTimeoutId(undefined);
+            }, duration);
+            setTimeoutId(timeoutId);
+        }
+        else if (timeoutId) {
+            clearTimeout(timeoutId);
+            setTimeout(() => snackbar(config), DURATION_ANIMATION);
+        }
+    }, [visible]);
+    function snackbar(config) {
+        const { content } = config;
+        setConfig(config);
+        setDuration(calculateDuration(String(content)));
+        setVisible(!visible);
+    }
+    return {
+        RlsSnackbar: rlsSnackbar,
+        snackbar
+    };
+}
+
+const RlsContext = createContext({
+    confirmation: () => {
+        return Promise.resolve(ConfirmationResult.approved());
+    },
+    snackbar: () => { }
+});
+function RlsApplication({ children }) {
+    const { RlsConfirmation, confirmation } = useConfirmationService();
+    const { RlsSnackbar, snackbar } = useSnackbarService();
+    return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
+}
+
+export { ConfirmationResult, DateRange, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableTitle, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useListControl, useSnackbarService };
+//# sourceMappingURL=index.js.map