@rolster/react-components 19.0.0 → 19.0.3

package/dist/cjs/index.js

@@ -601,7 +601,7 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
             ? parseFloat((+valueInput).toFixed(decimals))
             : valueInput;
         changeIsInternal.current = true;
-        onValue && onValue(value);
+        onValue?.(value);
         setValueInput(valueInput);
         formControl?.setValue(value);
     }, [formControl, onValue, type, decimals]);
@@ -640,7 +640,7 @@ function RlsInputDecimal(props) {
     const onValueInput = require$$0.useCallback((value) => {
         const valueDecimal = commons.BigDecimal.create(value);
         formControl ? formControl.setValue(valueDecimal) : setValueInput(value);
-        onValue && onValue(valueDecimal);
+        onValue?.(valueDecimal);
     }, [formControl, onValue]);
     const decimalProps = { ...props, formControl: undefined };
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-decimal", children: jsxRuntimeExports.jsx(RlsInput, { ...decimalProps, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: amount, symbol: symbol, decimals: decimals }) }) }));
@@ -651,7 +651,7 @@ function RlsInputMoney(props) {
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
     const onValueInput = require$$0.useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.value ?? valueInput, symbol: symbol, decimals: decimals }) }) }));
 }
@@ -661,7 +661,7 @@ function RlsInputNumber(props) {
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
     const onValueInput = require$$0.useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
@@ -670,7 +670,7 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     const [focused, setFocused] = require$$0.useState(false);
     const _onChange = require$$0.useCallback((event) => {
         formControl?.setValue(event.target.value);
-        onValue && onValue(event.target.value);
+        onValue?.(event.target.value);
     }, [formControl, onValue]);
     const _onKeyDown = require$$0.useCallback((event) => {
         onKeyDown && onKeyDown(event);
@@ -701,7 +701,7 @@ function RlsInputPercentage(props) {
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? 0);
     const onValueInput = require$$0.useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
 }
@@ -722,7 +722,7 @@ function RlsInputText(props) {
     const [valueInput, setValueInput] = require$$0.useState(formControl?.value ?? value ?? '');
     const onValueInput = require$$0.useCallback((value) => {
         !formControl && setValueInput(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [formControl, onValue]);
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { ...props, type: "text", value: valueInput, onValue: onValueInput, children: formControl?.value ?? valueInput }) }));
 }
@@ -1207,7 +1207,7 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
     }, [formControl]);
     const onSelect = require$$0.useCallback((value) => {
         setDayValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setDayValue, onValue]);
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
@@ -1332,7 +1332,7 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
     }, [formControl]);
     const onSelect = require$$0.useCallback((value) => {
         setMonthValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setMonthValue, onValue]);
     require$$0.useEffect(() => {
         setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
@@ -1463,7 +1463,7 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     }, [formControl]);
     const onSelect = require$$0.useCallback((value) => {
         setYearValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [setYearValue, onValue]);
     require$$0.useEffect(() => {
         const options = createPickerOptions(); // YearPickerProps
@@ -1559,7 +1559,7 @@ function RlsTabs({ tabs, onValue, rlsTheme }) {
     const [value, setValue] = require$$0.useState();
     const onSelect = require$$0.useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     require$$0.useEffect(() => {
         const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
@@ -2060,10 +2060,6 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-const DATE_FORMAT = '{dd}/{mx}/{yy}';
-const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
-const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
-
 function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     const classNameModal = require$$0.useMemo(() => {
         return renderClassStatus('rls-modal', { visible }, className);
@@ -2074,6 +2070,266 @@ function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
+function formatTime(value) {
+    return String(value).padStart(2, '0');
+}
+const CLOCK_VALUES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const RADIUS = 48;
+const DIAL_RADIUS = 60;
+const TICK_RADIUS = 7;
+function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
+    const styleTick = require$$0.useMemo(() => {
+        const radian = (value / 6) * Math.PI;
+        const x = Math.sin(radian) * RADIUS;
+        const y = Math.cos(radian) * RADIUS;
+        return {
+            left: `${DIAL_RADIUS + x - TICK_RADIUS - 1}rem`,
+            top: `${DIAL_RADIUS - y - TICK_RADIUS - 1}rem`
+        };
+    }, []);
+    const label = require$$0.useMemo(() => {
+        if (selectionIsHours) {
+            return formatTime(value);
+        }
+        if (value === 12) {
+            return formatTime(0);
+        }
+        return formatTime(value * 5);
+    }, [selectionIsHours]);
+    const onClick = require$$0.useCallback((event) => {
+        event.preventDefault();
+        onValue(value);
+    }, [onValue]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
+}
+function RlsPickerClock({ formControl, onListener, rlsTheme, time }) {
+    const timeInitial = require$$0.useMemo(() => {
+        return formControl?.value ?? time ?? dates.Time.now();
+    }, [formControl?.value, time]);
+    const plateElement = require$$0.useRef(null);
+    const lineElement = require$$0.useRef(null);
+    const centerElement = require$$0.useRef(null);
+    const indicatorElement = require$$0.useRef(null);
+    const pointElement = require$$0.useRef(null);
+    const [labels, setLabels] = require$$0.useState({
+        timeActionCancel: reactI18n('dateActionCancel'),
+        timeActionSelect: reactI18n('dateActionSelect')
+    });
+    const [zoneIsPM, setZoneIsPM] = require$$0.useState(timeInitial.hour >= 12);
+    const [hour, setHour] = require$$0.useState(zoneIsPM ? timeInitial.hour - 12 : timeInitial.hour);
+    const [minute, setMinute] = require$$0.useState(timeInitial.minute);
+    const [selectionIsHours, setSelectionIsHours] = require$$0.useState(true);
+    const changeIsInternal = require$$0.useRef(true);
+    const selectionIsActive = require$$0.useRef(false);
+    const radianUnit = require$$0.useMemo(() => {
+        return Math.PI / (selectionIsHours ? 6 : 30);
+    }, [selectionIsHours]);
+    const hourFormat = require$$0.useMemo(() => {
+        return formatTime(hour === 0 ? 12 : hour);
+    }, [hour]);
+    const minuteFormat = require$$0.useMemo(() => {
+        return formatTime(minute);
+    }, [minute]);
+    const classNameHour = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameMinute = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__title__value', {
+            active: !selectionIsHours
+        });
+    }, [selectionIsHours]);
+    const classNameAM = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: !zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const classNamePM = require$$0.useMemo(() => {
+        return renderClassStatus('rls-picker-clock__zone__value', {
+            active: zoneIsPM
+        });
+    }, [zoneIsPM]);
+    const refreshClockHour = require$$0.useEffectEvent(() => {
+        refreshClock(hour > 12 ? hour - 12 : hour);
+    });
+    const refreshClockMinute = require$$0.useEffectEvent(() => {
+        refreshClock(minute);
+    });
+    require$$0.useEffect(() => {
+        return i18n.i18nSubscribe(() => {
+            setLabels({
+                timeActionCancel: reactI18n('dateActionCancel'),
+                timeActionSelect: reactI18n('dateActionSelect')
+            });
+        });
+    }, []);
+    require$$0.useEffect(() => {
+        selectionIsHours ? refreshClockHour() : refreshClockMinute();
+    }, [selectionIsHours]);
+    require$$0.useEffect(() => {
+        if (!changeIsInternal.current && formControl?.value) {
+            const zoneIsPM = formControl.value.hour >= 12;
+            setZoneIsPM(zoneIsPM);
+            setHour(zoneIsPM ? formControl.value.hour - 12 : formControl.value.hour);
+            setMinute(formControl.value.minute);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value]);
+    const refreshComponent = require$$0.useCallback((clientX, clientY) => {
+        const rectangle = plateElement.current.getBoundingClientRect();
+        const centerX = rectangle.left + rectangle.width / 2;
+        const centerY = rectangle.top + rectangle.height / 2;
+        const positionX = clientX - centerX;
+        const positionY = clientY - centerY;
+        const angle = Math.atan2(-positionX, positionY) + Math.PI;
+        const value = Math.round(angle / radianUnit);
+        refreshClock(value);
+        selectionIsHours ? setHour(value === 0 ? 12 : value) : setMinute(value);
+    }, [selectionIsHours, radianUnit]);
+    const refreshClock = require$$0.useCallback((value) => {
+        const angle = value * radianUnit;
+        const x2 = Math.sin(angle) * (RADIUS - TICK_RADIUS);
+        const y2 = -Math.cos(angle) * (RADIUS - TICK_RADIUS);
+        const cx = Math.sin(angle) * RADIUS;
+        const cy = -Math.cos(angle) * RADIUS;
+        lineElement.current.setAttribute('x2', `${x2 - 1}rem`);
+        lineElement.current.setAttribute('y2', `${y2 - 1}rem`);
+        indicatorElement.current.setAttribute('cx', `${cx - 1}rem`);
+        indicatorElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.setAttribute('cx', `${cx - 1}rem`);
+        pointElement.current.setAttribute('cy', `${cy - 1}rem`);
+        pointElement.current.style.visibility =
+            selectionIsHours || value % 5 === 0 ? 'hidden' : 'visible';
+    }, [selectionIsHours, radianUnit]);
+    const onClickHour = require$$0.useCallback(() => {
+        setSelectionIsHours(true);
+    }, []);
+    const onClickMinute = require$$0.useCallback(() => {
+        setSelectionIsHours(false);
+    }, []);
+    const onClickAM = require$$0.useCallback(() => {
+        setZoneIsPM(false);
+    }, []);
+    const onClickPM = require$$0.useCallback(() => {
+        setZoneIsPM(true);
+    }, []);
+    const onActiveSelection = require$$0.useCallback(() => {
+        selectionIsActive.current = true;
+    }, []);
+    const onMouseSelection = require$$0.useCallback((event) => {
+        if (selectionIsActive.current) {
+            event.preventDefault();
+            refreshComponent(event.clientX, event.clientY);
+        }
+    }, [refreshComponent]);
+    const onTouchSelection = require$$0.useCallback((event) => {
+        const touch = event.touches.item(0);
+        if (selectionIsActive.current && touch) {
+            refreshComponent(touch.clientX, touch.clientY);
+        }
+    }, [refreshComponent]);
+    const onInactiveSelection = require$$0.useCallback(() => {
+        selectionIsActive.current = false;
+    }, []);
+    const onClickValue = require$$0.useCallback((value) => {
+        if (selectionIsHours) {
+            setHour(value);
+            refreshClock(value);
+        }
+        else {
+            const minute = value === 12 ? 0 : value * 5;
+            setMinute(minute);
+            refreshClock(minute);
+        }
+    }, [selectionIsHours]);
+    const onCancel = require$$0.useCallback(() => {
+        onListener?.({ event: components.PickerListenerEvent.Cancel });
+    }, [onListener]);
+    const onCurrentTime = require$$0.useCallback(() => {
+        const currentTime = dates.Time.now();
+        changeIsInternal.current = true;
+        formControl?.setValue(currentTime);
+        setHour(currentTime.hour);
+        setMinute(currentTime.minute);
+        onListener?.({
+            event: components.PickerListenerEvent.Select,
+            value: currentTime
+        });
+    }, [formControl, onListener]);
+    const onSelect = require$$0.useCallback(() => {
+        const hourValue = zoneIsPM
+            ? hour !== 12
+                ? hour + 12
+                : 12
+            : hour === 12
+                ? 0
+                : hour;
+        const timeValue = new dates.Time(hourValue, minute);
+        changeIsInternal.current = true;
+        formControl?.setValue(timeValue);
+        onListener?.({
+            event: components.PickerListenerEvent.Select,
+            value: timeValue
+        });
+    }, [formControl, hour, minute, zoneIsPM, onListener]);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onMouseDown: onActiveSelection, onMouseMove: onMouseSelection, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onActiveSelection, onTouchMove: onTouchSelection, onTouchEnd: onInactiveSelection, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
+                                        transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
+                                    }, children: [jsxRuntimeExports.jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), jsxRuntimeExports.jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), jsxRuntimeExports.jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), jsxRuntimeExports.jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
+                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
+                            }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
+}
+
+function RlsFieldClock({ children, disabled: disabledProps, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, time, value: valueInitial }) {
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
+    const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            readonly: readOnly
+        });
+    }, [disabled, readOnly]);
+    const timeValue = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = require$$0.useMemo(() => {
+        return {
+            icon: timeValue ? 'trash-2' : 'timer',
+            valueInput: timeValue?.normalizeMeridiemFormat || ''
+        };
+    }, [timeValue]);
+    const onClickInput = require$$0.useCallback(() => {
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
+    const onChange = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue?.(value);
+    }, [onValue]);
+    const onClickAction = require$$0.useCallback(() => {
+        if (timeValue) {
+            formControl?.setValue(valueInitial);
+            formControl?.touch();
+            onChange(valueInitial);
+        }
+        else {
+            setModalIsVisible(true);
+        }
+    }, [timeValue, formControl, valueInitial, onChange]);
+    const onListener = require$$0.useCallback(({ event, value }) => {
+        event !== components.PickerListenerEvent.Cancel && onChange(value);
+        formControl?.touch();
+        setModalIsVisible(false);
+    }, [formControl, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) })] }));
+}
+
+const DATE_FORMAT = '{dd}/{mx}/{yy}';
+const DATE_FORMAT_TITLE = '{dw}, {mx} {dd} de {yy}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{yy}';
+
 function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
     const today = require$$0.useRef(new Date()); // Initial current date in component
     const _date = require$$0.useMemo(() => {
@@ -2126,81 +2382,84 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
         type === 'month' ? setVisibility('MONTH') : setVisibility('YEAR');
     }, []);
     const onCancel = require$$0.useCallback(() => {
-        onListener && onListener({ event: components.PickerListenerEvent.Cancel });
+        onListener?.({ event: components.PickerListenerEvent.Cancel });
     }, [onListener]);
     const onToday = require$$0.useCallback(() => {
         yearControl.setValue(today.current.getFullYear());
         dayControl.setValue(today.current.getDate());
         monthControl.setValue(today.current.getMonth());
         formControl?.setValue(today.current);
-        onListener &&
-            onListener({
-                event: components.PickerListenerEvent.Now,
-                value: today.current
-            });
-    }, [today.current, formControl, onListener]);
+        onListener?.({
+            event: components.PickerListenerEvent.Now,
+            value: today.current
+        });
+    }, [formControl, onListener]);
     const onSelect = require$$0.useCallback(() => {
         formControl?.setValue(value);
-        onListener &&
-            onListener({
-                event: components.PickerListenerEvent.Select,
-                value
-            });
+        onListener?.({
+            event: components.PickerListenerEvent.Select,
+            value
+        });
     }, [formControl, value, onListener]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "calendar", onClick: onToday, disabled: itIsDisabledToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
-function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
+function RlsFieldDate({ children, date, disabled: disabledProps, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
     const today = require$$0.useRef(new Date()); // Initial current date in component
-    const [value, setValue] = require$$0.useState(formControl?.value ?? _value);
+    const [value, setValue] = require$$0.useState(formControl?.value ?? valueInitial);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
-    const _disabled = require$$0.useMemo(() => {
-        return formControl?.disabled || disabled;
-    }, [formControl?.disabled, disabled]);
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled,
             readonly: readOnly
         });
-    }, [_disabled, readOnly]);
-    const { icon, valueInput } = require$$0.useMemo(() => {
+    }, [disabled, readOnly]);
+    const dateValue = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = require$$0.useMemo(() => {
         return {
-            icon: value ? 'trash-2' : 'calendar',
-            valueInput: value ? dates.dateFormatTemplate(value, format || DATE_FORMAT) : ''
+            icon: dateValue ? 'trash-2' : 'calendar',
+            label: dateValue
+                ? dates.dateFormatTemplate(dateValue, format || DATE_FORMAT)
+                : ''
         };
-    }, [value]);
+    }, [dateValue, format]);
     require$$0.useEffect(() => {
-        const _date = components.verifyDateRange({
+        const dateSecure = components.verifyDateRange({
             date: formControl?.value ?? date ?? today.current,
             minDate,
             maxDate
         });
-        setValue(_date);
-        formControl?.setValue(_date);
+        setValue(dateSecure);
+        formControl?.setValue(dateSecure);
     }, []);
     const onClickInput = require$$0.useCallback(() => {
         !readOnly && setModalIsVisible(true);
     }, [readOnly]);
     const onChange = require$$0.useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     const onClickAction = require$$0.useCallback(() => {
-        if (value) {
-            formControl?.setValue(_value);
+        if (dateValue) {
+            formControl?.setValue(valueInitial);
             formControl?.touch();
-            onChange(_value);
+            onChange(valueInitial);
         }
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, _value, onChange]);
+    }, [dateValue, formControl, valueInitial, onChange]);
     const onListener = require$$0.useCallback(({ event, value }) => {
         event !== components.PickerListenerEvent.Cancel && onChange(value);
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date__control", type: "text", value: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -2209,8 +2468,8 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
-function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
-    const _date = require$$0.useMemo(() => dates.normalizeMinTime(_picker ?? new Date()), [_picker]);
+function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
+    const _date = require$$0.useMemo(() => dates.normalizeMinTime(datePicker ?? new Date()), [datePicker]);
     const _range = require$$0.useMemo(() => formControl?.value ?? dates.DateRange.now(), [formControl?.value]);
     const yearControl = reactForms.useReactControl(_date.getFullYear());
     const monthControl = reactForms.useReactControl(_date.getMonth());
@@ -2275,48 +2534,51 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityTitle }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "gradient", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
-function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
-    const currentDate = require$$0.useMemo(() => _date ?? new Date(), [_date]);
-    const [value, setValue] = require$$0.useState(formControl?.value || _value);
+function RlsFieldDateRange({ children, date, disabled: disabledProps, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: valueInitial }) {
+    const currentDate = require$$0.useMemo(() => date ?? new Date(), [date]);
+    const [value, setValue] = require$$0.useState(formControl?.value || valueInitial);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
-    const _disabled = require$$0.useMemo(() => {
-        return formControl?.disabled || disabled;
-    }, [formControl?.disabled, disabled]);
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || disabledProps;
+    }, [formControl?.disabled, disabledProps]);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: _disabled,
+            disabled,
             readonly: readOnly
         });
-    }, [_disabled, readOnly]);
-    const { icon, valueInput } = require$$0.useMemo(() => {
+    }, [disabled, readOnly]);
+    const dateRangeValue = require$$0.useMemo(() => {
+        return formControl ? formControl.value : value;
+    }, [formControl?.value, value]);
+    const status = require$$0.useMemo(() => {
         return {
-            icon: value ? 'trash-2' : 'calendar',
-            valueInput: value ? rangeFormatTemplate(value) : ''
+            icon: dateRangeValue ? 'trash-2' : 'calendar',
+            valueInput: dateRangeValue ? rangeFormatTemplate(dateRangeValue) : ''
         };
-    }, [value]);
+    }, [dateRangeValue]);
     const onClickInput = require$$0.useCallback(() => {
         !readOnly && setModalIsVisible(true);
     }, [readOnly]);
     const onChange = require$$0.useCallback((value) => {
         setValue(value);
-        onValue && onValue(value);
+        onValue?.(value);
     }, [onValue]);
     const onClickAction = require$$0.useCallback(() => {
-        if (value) {
-            formControl?.setValue(_value);
+        if (dateRangeValue) {
+            formControl?.setValue(valueInitial);
             formControl?.touch();
-            onChange(_value);
+            onChange(valueInitial);
         }
         else {
             setModalIsVisible(true);
         }
-    }, [value, formControl, _value, onChange]);
+    }, [dateRangeValue, formControl, valueInitial, onChange]);
     const onListener = require$$0.useCallback(({ event, value }) => {
         event !== components.PickerListenerEvent.Cancel && onChange(value);
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-date-range__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function useFieldSelect(props) {
@@ -3045,6 +3307,7 @@ exports.RlsDatatableTitle = RlsDatatableTitle;
 exports.RlsDatatableTotals = RlsDatatableTotals;
 exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
 exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
+exports.RlsFieldClock = RlsFieldClock;
 exports.RlsFieldDate = RlsFieldDate;
 exports.RlsFieldDateRange = RlsFieldDateRange;
 exports.RlsFieldDecimal = RlsFieldDecimal;
@@ -3079,6 +3342,7 @@ exports.RlsModal = RlsModal;
 exports.RlsModalSheet = RlsModalSheet;
 exports.RlsNavbar = RlsNavbar;
 exports.RlsPagination = RlsPagination;
+exports.RlsPickerClock = RlsPickerClock;
 exports.RlsPickerDate = RlsPickerDate;
 exports.RlsPickerDateRange = RlsPickerDateRange;
 exports.RlsPickerDay = RlsPickerDay;