@rolster/react-components 18.12.8 → 18.12.10

package/dist/es/assets/{index-7UzJ6VgT.css → index-VcI5p9dK.css}

@@ -423,7 +423,6 @@
   --pvt-value-opacity: 1;
   --pvt-component-font-color: transparent;
   position: relative;
-  float: left;
   width: 100%;
 }
 .rls-input--focused {
@@ -435,7 +434,6 @@
 }
 .rls-input__component {
   position: relative;
-  float: left;
   width: 100%;
   height: var(--rls-input-height);
   line-height: var(--rls-input-height);
@@ -640,6 +638,51 @@
   }
 }
 
+.rls-progress-circular {
+  position: relative;
+  width: var(--rls-progress-circular-dimension);
+  height: var(--rls-progress-circular-dimension);
+  padding: var(--sizing-x2);
+  box-sizing: border-box;
+  stroke: var(--color-rolster-500);
+}
+.rls-progress-circular__svg {
+  height: 100%;
+  width: 100%;
+  transform: rotate(990deg);
+  animation: progress-circular-svg 3500ms linear infinite;
+}
+.rls-progress-circular__circle {
+  fill: none;
+  stroke-width: 4px;
+  stroke: inherit;
+  stroke-dasharray: 65;
+  stroke-dashoffset: 65;
+  opacity: 1;
+  animation: progress-circular-circle 1750ms var(--standard-curve) infinite;
+}
+
+@keyframes progress-circular-svg {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes progress-circular-circle {
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -65;
+  }
+}
+
 .rls-radiobutton {
   --pvt-component-transform: scale(0);
   position: relative;
@@ -897,6 +940,14 @@
   white-space: var(--rls-ballot-subtitle-white-space);
 }
 
+.rls-button-progress {
+  --rls-progress-circular-dimension: var(--sizing-x16);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .rls-button-toggle {
   width: auto;
 }
@@ -2040,7 +2091,7 @@
   cursor: default;
   border: none;
   outline: none;
-  color: var(--color-theme-input);
+  color: var(--rls-input-font-color);
   background: transparent;
   font-size: var(--input-font-size);
   font-weight: var(--font-weight-medium);

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, PartialSealed } from '@rolster/helpers-advanced';
-import { daysFromMonth, weight, assignDay, DAY_LABELS, formatDate, between, DateRange, normalizeMinTime, before, Month, MONTH_NAMES, after, assignYear, assignMonth } from '@rolster/helpers-date';
+import { getDaysOfMonth, getDateWeight, assignDayInDate, DAY_LABELS, dateFormatTemplate, dateIsBetween, DateRange, normalizeMinTime, dateIsBefore, Month, MONTH_NAMES, dateIsAfter, assignYearInDate, assignMonthInDate } from '@rolster/helpers-date';
 import { hasPattern } from '@rolster/helpers-string';
 import { i18n } from '@rolster/i18n';
 import ReactDOM from 'react-dom';
@@ -185,6 +185,10 @@ 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 RlsProgressCircular({ rlsTheme }) {
+    return (jsx("div", { className: "rls-progress-circular", "rls-theme": rlsTheme, children: jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "12" }) }) }));
+}
+
 function RlsRadioButton({ checked, disabled, rlsTheme, onClick }) {
     return (jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsx("div", { className: "rls-radiobutton__component" }) }));
 }
@@ -214,6 +218,10 @@ function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsT
     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 RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
+    return (jsxs("div", { className: renderClassStatus('rls-button-progress', { progressing }), "rls-theme": rlsTheme, children: [!progressing && (jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsx(RlsProgressCircular, {})] }));
+}
+
 function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
     const componentRef = useRef(null);
     const [firstAction] = options;
@@ -296,7 +304,7 @@ class DayPickerFactory {
     createRightWeeks() {
         const dayStart = this.date.getDay();
         const rightWeeks = [];
-        const dayCount = daysFromMonth(this.date.getFullYear(), this.date.getMonth());
+        const dayCount = getDaysOfMonth(this.date.getFullYear(), this.date.getMonth());
         let days = [];
         let countDaysWeek = 1;
         let day = 8 - dayStart;
@@ -335,12 +343,14 @@ class DayPickerFactory {
     }
     minOverflowDay(day) {
         return this.minDate
-            ? weight(assignDay(this.date, day)) < weight(this.minDate)
+            ? getDateWeight(assignDayInDate(this.date, day)) <
+                getDateWeight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? weight(assignDay(this.date, day)) > weight(this.maxDate)
+            ? getDateWeight(assignDayInDate(this.date, day)) >
+                getDateWeight(this.maxDate)
             : false;
     }
 }
@@ -417,7 +427,7 @@ class DateRangePickerFactory {
     createRightWeeks() {
         const rightWeeks = [];
         const dayStart = this.date.getDay();
-        const dayCount = daysFromMonth(this.date.getFullYear(), this.date.getMonth());
+        const dayCount = getDaysOfMonth(this.date.getFullYear(), this.date.getMonth());
         let days = [];
         let countDaysWeek = 1;
         let day = 8 - dayStart;
@@ -456,19 +466,21 @@ class DateRangePickerFactory {
             day === date.getDate());
     }
     isRangedFromDate(day) {
-        return between(this.range.minDate, this.range.maxDate, assignDay(this.date, day));
+        return dateIsBetween(this.range.minDate, this.range.maxDate, assignDayInDate(this.date, day));
     }
     overflowDay(day) {
         return this.minOverflowDay(day) || this.maxOverflowDay(day);
     }
     minOverflowDay(day) {
         return this.minDate
-            ? weight(assignDay(this.date, day)) < weight(this.minDate)
+            ? getDateWeight(assignDayInDate(this.date, day)) <
+                getDateWeight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? weight(assignDay(this.date, day)) > weight(this.maxDate)
+            ? getDateWeight(assignDayInDate(this.date, day)) >
+                getDateWeight(this.maxDate)
             : false;
     }
     createDayRangeState(day) {
@@ -482,9 +494,9 @@ class DateRangePickerFactory {
         };
     }
 }
-function formatRange(range) {
-    const minFormat = formatDate(range.minDate, DATE_RANGE_FORMAT);
-    const maxFormat = formatDate(range.maxDate, DATE_RANGE_FORMAT);
+function rangeFormatTemplate(range) {
+    const minFormat = dateFormatTemplate(range.minDate, DATE_RANGE_FORMAT);
+    const maxFormat = dateFormatTemplate(range.maxDate, DATE_RANGE_FORMAT);
     return `${minFormat} - ${maxFormat}`;
 }
 function createRangePicker(props) {
@@ -507,15 +519,15 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
         }));
     }, [range, date, minDate, maxDate]);
     function onChange(value) {
-        const newDate = assignDay(initialDate, value);
-        const newRange = before(newDate, sourceDate.current)
+        const newDate = assignDayInDate(initialDate, value);
+        const newRange = dateIsBefore(newDate, sourceDate.current)
             ? new DateRange(sourceDate.current, newDate)
             : new DateRange(newDate, sourceDate.current);
         sourceDate.current = newDate;
         setRange(newRange);
         formControl?.setState(newRange);
     }
-    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__title", children: formatDate(sourceDate.current, DATE_RANGE_FORMAT) }), 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(({ disabled, end, forbidden, source, ranged, value }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
+    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__title", children: dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), 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(({ disabled, end, forbidden, source, ranged, value }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
                             disabled: disabled || disabledPicker,
                             end,
                             forbidden,
@@ -1116,10 +1128,17 @@ function useDatatable() {
     const [scrolleable, setScrolleable] = useState(false);
     const bodyRef = useRef(null);
     useEffect(() => {
-        const scrollHeight = bodyRef?.current?.scrollHeight || 0;
-        const clientHeight = bodyRef?.current?.clientHeight || 0;
-        setScrolleable(scrollHeight > clientHeight);
-    }, [bodyRef]);
+        let observer;
+        if (bodyRef?.current) {
+            observer = new ResizeObserver(() => {
+                const scrollHeight = bodyRef?.current?.scrollHeight || 0;
+                const clientHeight = bodyRef?.current?.clientHeight || 0;
+                setScrolleable(scrollHeight > clientHeight);
+            });
+            observer.observe(bodyRef?.current);
+        }
+        return () => observer?.disconnect();
+    }, []);
     return { bodyRef, scrolleable };
 }
 
@@ -1545,12 +1564,25 @@ function RlsDatatableData({ children, className, error }) {
 function RlsDatatableCell({ children, className, control, overflow }) {
     return (jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
 }
-function RlsDatatable({ children, datatable, footer, header, rlsTheme }) {
+function RlsDatatableTotals({ children, className, error }) {
+    return (jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
+}
+function RlsDatatableInfo({ children, className, control, overflow }) {
+    return (jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
     return (jsxs("div", { className: renderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+        }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
+var PickerListenerType;
+(function (PickerListenerType) {
+    PickerListenerType["Select"] = "PickerSelect";
+    PickerListenerType["Now"] = "PickerNow";
+    PickerListenerType["Cancel"] = "PickerCancel";
+})(PickerListenerType || (PickerListenerType = {}));
+
 const controlIsValid = (props) => {
     const { state, validators } = props;
     return validators.reduce((errors, validator) => {
@@ -1647,15 +1679,12 @@ function useReactControl(controlProps, controlValidators) {
     return useControl(controlProps, controlValidators);
 }
 
-var PickerListenerType;
-(function (PickerListenerType) {
-    PickerListenerType["Select"] = "PickerSelect";
-    PickerListenerType["Now"] = "PickerNow";
-    PickerListenerType["Cancel"] = "PickerCancel";
-})(PickerListenerType || (PickerListenerType = {}));
-
-function verifyDateRange(date, min, max) {
-    return min && before(min, date) ? min : max && after(max, date) ? max : date;
+function dateIsRange(date, min, max) {
+    return min && dateIsBefore(min, date)
+        ? min
+        : max && dateIsAfter(max, date)
+            ? max
+            : date;
 }
 
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
@@ -1685,25 +1714,25 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
     const monthControl = useReactControl(dateInitial.getMonth());
     const [value, setValue] = useState(dateInitial);
     const [{ day, month, year }, setVisibility] = useState(VISIBILITY$1.DAY);
-    const title = formatDate(value, FORMAT_DESCRIPTION);
+    const title = dateFormatTemplate(value, FORMAT_DESCRIPTION);
     useEffect(() => {
         setValue((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? verifyDateRange(assignYear(prevValue, yearControl.state), minDate, maxDate)
+                ? dateIsRange(assignYearInDate(prevValue, yearControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [yearControl.state]);
     useEffect(() => {
         setValue((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? verifyDateRange(assignMonth(prevValue, monthControl.state), minDate, maxDate)
+                ? dateIsRange(assignMonthInDate(prevValue, monthControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [monthControl.state]);
     useEffect(() => {
         setValue((prevValue) => {
             return typeof dayControl.state === 'number'
-                ? verifyDateRange(assignDay(prevValue, dayControl.state), minDate, maxDate)
+                ? dateIsRange(assignDayInDate(prevValue, dayControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [dayControl.state]);
@@ -1755,7 +1784,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
     const [show, setShow] = useState(false);
     const [description, setDescription] = useState('');
     useEffect(() => {
-        setDescription(value ? formatDate(value, '{dd}/{mx}/{aa}') : '');
+        setDescription(value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '');
     }, [value]);
     function onClickInput() {
         setShow(true);
@@ -1822,14 +1851,14 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
     useEffect(() => {
         setDate((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? assignYear(prevValue, yearControl.state)
+                ? assignYearInDate(prevValue, yearControl.state)
                 : prevValue;
         });
     }, [yearControl.state]);
     useEffect(() => {
         setDate((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? assignMonth(prevValue, monthControl.state)
+                ? assignMonthInDate(prevValue, monthControl.state)
                 : prevValue;
         });
     }, [monthControl.state]);
@@ -1859,7 +1888,7 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             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: formatRange(value) }) }), 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, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+    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: rangeFormatTemplate(value) }) }), 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, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
                     year,
                     day,
                     month
@@ -1876,7 +1905,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
     const [show, setShow] = useState(false);
     const [description, setDescription] = useState('');
     useEffect(() => {
-        setDescription(value ? formatRange(value) : '');
+        setDescription(value ? rangeFormatTemplate(value) : '');
     }, [value]);
     function onClickInput() {
         setShow(true);
@@ -2096,5 +2125,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, 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, useDatatable, useListControl, useSnackbarService };
+export { ConfirmationResult, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map