@rolster/react-components 18.12.8 → 18.12.10

package/dist/cjs/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/cjs/index.js

@@ -187,6 +187,10 @@ function RlsProgressBar({ indeterminate, percentage, rlsTheme }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-progress-bar', { indeterminate }), "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-progress-bar__component", style: { width: `${percentage || 0}%` } }) }));
 }
 
+function RlsProgressCircular({ rlsTheme }) {
+    return (jsxRuntime.jsx("div", { className: "rls-progress-circular", "rls-theme": rlsTheme, children: jsxRuntime.jsx("svg", { className: "rls-progress-circular__svg", viewBox: "0 0 36 36", children: jsxRuntime.jsx("circle", { className: "rls-progress-circular__circle", cx: "18", cy: "18", r: "12" }) }) }));
+}
+
 function RlsRadioButton({ checked, disabled, rlsTheme, onClick }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-radiobutton', { checked, disabled }), onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntime.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
@@ -216,6 +220,10 @@ function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsT
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntime.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntime.jsx("img", { src: img }), initials && jsxRuntime.jsx("span", { children: initials })] })), jsxRuntime.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntime.jsx("label", { className: "rls-ballot__title", children: jsxRuntime.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntime.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntime.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 
+function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-button-progress', { progressing }), "rls-theme": rlsTheme, children: [!progressing && (jsxRuntime.jsx(RlsButtonAction, { icon: icon, onClick: onClick, disabled: disabled })), progressing && jsxRuntime.jsx(RlsProgressCircular, {})] }));
+}
+
 function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
     const componentRef = react.useRef(null);
     const [firstAction] = options;
@@ -298,7 +306,7 @@ class DayPickerFactory {
     createRightWeeks() {
         const dayStart = this.date.getDay();
         const rightWeeks = [];
-        const dayCount = helpersDate.daysFromMonth(this.date.getFullYear(), this.date.getMonth());
+        const dayCount = helpersDate.getDaysOfMonth(this.date.getFullYear(), this.date.getMonth());
         let days = [];
         let countDaysWeek = 1;
         let day = 8 - dayStart;
@@ -337,12 +345,14 @@ class DayPickerFactory {
     }
     minOverflowDay(day) {
         return this.minDate
-            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) < helpersDate.weight(this.minDate)
+            ? helpersDate.getDateWeight(helpersDate.assignDayInDate(this.date, day)) <
+                helpersDate.getDateWeight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) > helpersDate.weight(this.maxDate)
+            ? helpersDate.getDateWeight(helpersDate.assignDayInDate(this.date, day)) >
+                helpersDate.getDateWeight(this.maxDate)
             : false;
     }
 }
@@ -419,7 +429,7 @@ class DateRangePickerFactory {
     createRightWeeks() {
         const rightWeeks = [];
         const dayStart = this.date.getDay();
-        const dayCount = helpersDate.daysFromMonth(this.date.getFullYear(), this.date.getMonth());
+        const dayCount = helpersDate.getDaysOfMonth(this.date.getFullYear(), this.date.getMonth());
         let days = [];
         let countDaysWeek = 1;
         let day = 8 - dayStart;
@@ -458,19 +468,21 @@ class DateRangePickerFactory {
             day === date.getDate());
     }
     isRangedFromDate(day) {
-        return helpersDate.between(this.range.minDate, this.range.maxDate, helpersDate.assignDay(this.date, day));
+        return helpersDate.dateIsBetween(this.range.minDate, this.range.maxDate, helpersDate.assignDayInDate(this.date, day));
     }
     overflowDay(day) {
         return this.minOverflowDay(day) || this.maxOverflowDay(day);
     }
     minOverflowDay(day) {
         return this.minDate
-            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) < helpersDate.weight(this.minDate)
+            ? helpersDate.getDateWeight(helpersDate.assignDayInDate(this.date, day)) <
+                helpersDate.getDateWeight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? helpersDate.weight(helpersDate.assignDay(this.date, day)) > helpersDate.weight(this.maxDate)
+            ? helpersDate.getDateWeight(helpersDate.assignDayInDate(this.date, day)) >
+                helpersDate.getDateWeight(this.maxDate)
             : false;
     }
     createDayRangeState(day) {
@@ -484,9 +496,9 @@ class DateRangePickerFactory {
         };
     }
 }
-function formatRange(range) {
-    const minFormat = helpersDate.formatDate(range.minDate, DATE_RANGE_FORMAT);
-    const maxFormat = helpersDate.formatDate(range.maxDate, DATE_RANGE_FORMAT);
+function rangeFormatTemplate(range) {
+    const minFormat = helpersDate.dateFormatTemplate(range.minDate, DATE_RANGE_FORMAT);
+    const maxFormat = helpersDate.dateFormatTemplate(range.maxDate, DATE_RANGE_FORMAT);
     return `${minFormat} - ${maxFormat}`;
 }
 function createRangePicker(props) {
@@ -509,15 +521,15 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
         }));
     }, [range, date, minDate, maxDate]);
     function onChange(value) {
-        const newDate = helpersDate.assignDay(initialDate, value);
-        const newRange = helpersDate.before(newDate, sourceDate.current)
+        const newDate = helpersDate.assignDayInDate(initialDate, value);
+        const newRange = helpersDate.dateIsBefore(newDate, sourceDate.current)
             ? new helpersDate.DateRange(sourceDate.current, newDate)
             : new helpersDate.DateRange(newDate, sourceDate.current);
         sourceDate.current = newDate;
         setRange(newRange);
         formControl?.setState(newRange);
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-day-range-picker__title", children: helpersDate.formatDate(sourceDate.current, DATE_RANGE_FORMAT) }), jsxRuntime.jsx("div", { className: "rls-day-range-picker__header", children: helpersDate.DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
+    return (jsxRuntime.jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsx("div", { className: "rls-day-range-picker__title", children: helpersDate.dateFormatTemplate(sourceDate.current, DATE_RANGE_FORMAT) }), jsxRuntime.jsx("div", { className: "rls-day-range-picker__header", children: helpersDate.DAY_LABELS().map((title, index) => (jsxRuntime.jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsxRuntime.jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsxRuntime.jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsxRuntime.jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
                             disabled: disabled || disabledPicker,
                             end,
                             forbidden,
@@ -1118,10 +1130,17 @@ function useDatatable() {
     const [scrolleable, setScrolleable] = react.useState(false);
     const bodyRef = react.useRef(null);
     react.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 };
 }
 
@@ -1547,12 +1566,25 @@ function RlsDatatableData({ children, className, error }) {
 function RlsDatatableCell({ children, className, control, overflow }) {
     return (jsxRuntime.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 (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
+}
+function RlsDatatableInfo({ children, className, control, overflow }) {
+    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntime.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntime.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) => {
@@ -1649,15 +1681,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 && helpersDate.before(min, date) ? min : max && helpersDate.after(max, date) ? max : date;
+function dateIsRange(date, min, max) {
+    return min && helpersDate.dateIsBefore(min, date)
+        ? min
+        : max && helpersDate.dateIsAfter(max, date)
+            ? max
+            : date;
 }
 
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
@@ -1687,25 +1716,25 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
     const monthControl = useReactControl(dateInitial.getMonth());
     const [value, setValue] = react.useState(dateInitial);
     const [{ day, month, year }, setVisibility] = react.useState(VISIBILITY$1.DAY);
-    const title = helpersDate.formatDate(value, FORMAT_DESCRIPTION);
+    const title = helpersDate.dateFormatTemplate(value, FORMAT_DESCRIPTION);
     react.useEffect(() => {
         setValue((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? verifyDateRange(helpersDate.assignYear(prevValue, yearControl.state), minDate, maxDate)
+                ? dateIsRange(helpersDate.assignYearInDate(prevValue, yearControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [yearControl.state]);
     react.useEffect(() => {
         setValue((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? verifyDateRange(helpersDate.assignMonth(prevValue, monthControl.state), minDate, maxDate)
+                ? dateIsRange(helpersDate.assignMonthInDate(prevValue, monthControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [monthControl.state]);
     react.useEffect(() => {
         setValue((prevValue) => {
             return typeof dayControl.state === 'number'
-                ? verifyDateRange(helpersDate.assignDay(prevValue, dayControl.state), minDate, maxDate)
+                ? dateIsRange(helpersDate.assignDayInDate(prevValue, dayControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [dayControl.state]);
@@ -1757,7 +1786,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
     const [show, setShow] = react.useState(false);
     const [description, setDescription] = react.useState('');
     react.useEffect(() => {
-        setDescription(value ? helpersDate.formatDate(value, '{dd}/{mx}/{aa}') : '');
+        setDescription(value ? helpersDate.dateFormatTemplate(value, DATE_RANGE_FORMAT) : '');
     }, [value]);
     function onClickInput() {
         setShow(true);
@@ -1824,14 +1853,14 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
     react.useEffect(() => {
         setDate((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? helpersDate.assignYear(prevValue, yearControl.state)
+                ? helpersDate.assignYearInDate(prevValue, yearControl.state)
                 : prevValue;
         });
     }, [yearControl.state]);
     react.useEffect(() => {
         setDate((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? helpersDate.assignMonth(prevValue, monthControl.state)
+                ? helpersDate.assignMonthInDate(prevValue, monthControl.state)
                 : prevValue;
         });
     }, [monthControl.state]);
@@ -1861,7 +1890,7 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-range-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: formatRange(value) }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-date-range-picker__header", children: [jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsxRuntime.jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), jsxRuntime.jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsxRuntime.jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsxRuntime.jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntime.jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
                     year,
                     day,
                     month
@@ -1878,7 +1907,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
     const [show, setShow] = react.useState(false);
     const [description, setDescription] = react.useState('');
     react.useEffect(() => {
-        setDescription(value ? formatRange(value) : '');
+        setDescription(value ? rangeFormatTemplate(value) : '');
     }, [value]);
     function onClickInput() {
         setShow(true);
@@ -2110,6 +2139,7 @@ exports.RlsBallot = RlsBallot;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
 exports.RlsButtonAction = RlsButtonAction;
+exports.RlsButtonProgress = RlsButtonProgress;
 exports.RlsButtonToggle = RlsButtonToggle;
 exports.RlsCard = RlsCard;
 exports.RlsCheckBox = RlsCheckBox;
@@ -2121,7 +2151,9 @@ exports.RlsDatatable = RlsDatatable;
 exports.RlsDatatableCell = RlsDatatableCell;
 exports.RlsDatatableData = RlsDatatableData;
 exports.RlsDatatableHeader = RlsDatatableHeader;
+exports.RlsDatatableInfo = RlsDatatableInfo;
 exports.RlsDatatableTitle = RlsDatatableTitle;
+exports.RlsDatatableTotals = RlsDatatableTotals;
 exports.RlsDateField = RlsDateField;
 exports.RlsDatePicker = RlsDatePicker;
 exports.RlsDateRangeField = RlsDateRangeField;
@@ -2146,6 +2178,7 @@ exports.RlsPagination = RlsPagination;
 exports.RlsPasswordField = RlsPasswordField;
 exports.RlsPoster = RlsPoster;
 exports.RlsProgressBar = RlsProgressBar;
+exports.RlsProgressCircular = RlsProgressCircular;
 exports.RlsRadioButton = RlsRadioButton;
 exports.RlsRadioButtonLabel = RlsRadioButtonLabel;
 exports.RlsSearchInput = RlsSearchInput;