@rolster/react-components 18.15.5 → 18.15.6

package/dist/cjs/assets/{index-B1zPyiMP.css → index-Bi1j_H-P.css}

@@ -18,9 +18,12 @@
 }
 
 .rls-amount {
+  --rlc-tabulartext-font-size: var(--rlc-amount-font-size);
   display: flex;
+  width: var(--rlc-amount-width);
   justify-content: var(--rlc-amount-text-align);
   column-gap: var(--rls-sizing-x2);
+  font-size: var(--rlc-amount-font-size);
 }
 .rls-amount[rls-theme] {
   color: var(--rls-theme-color-500);
@@ -134,10 +137,10 @@
 .rls-icon {
   --pvt-icon-display: block;
   position: relative;
-  font-size: var(--rlc-icon-font-size);
-  width: var(--rlc-icon-width);
-  height: var(--rlc-icon-height);
-  line-height: var(--rlc-icon-height);
+  font-size: var(--rlc-icon-dimesion);
+  width: var(--rlc-icon-dimesion);
+  height: var(--rlc-icon-dimesion);
+  line-height: var(--rlc-icon-dimesion);
 }
 .rls-icon--skeleton {
   --pvt-icon-display: none;
@@ -147,7 +150,6 @@
 .rls-icon > i {
   display: var(--pvt-icon-display);
   color: var(--rlc-icon-color);
-  float: left;
   width: 100%;
   height: 100%;
   line-height: inherit;
@@ -575,9 +577,7 @@
 
 .rls-message-icon {
   --rlc-icon-color: var(--rls-theme-color-500);
-  --rlc-icon-width: var(--rls-sizing-x8);
-  --rlc-icon-height: var(--rls-sizing-x8);
-  --rlc-icon-font-size: var(--rls-sizing-x8);
+  --rlc-icon-dimesion: var(--rls-sizing-x8);
   display: flex;
   align-items: center;
   column-gap: var(--rls-sizing-x2);
@@ -590,16 +590,18 @@
 
 .rls-poster {
   position: relative;
+  display: block;
   width: auto;
   font-weight: inherit;
   font-size: var(--rlc-poster-font-size);
   letter-spacing: var(--rlc-poster-letter-spacing);
+  height: var(--rlc-poster-height);
   line-height: var(--rlc-poster-height);
   padding: var(--rlc-poster-padding);
   text-align: var(--rlc-poster-text-align);
   border-radius: var(--rls-sizing-x2);
-  color: var(--rls-light-color-500);
-  background: var(--rls-theme-gradient-500);
+  color: var(--rls-theme-color-100);
+  background: var(--rls-theme-color-500);
 }
 
 .rls-progress-bar {
@@ -786,13 +788,11 @@
   --rlc-skeleton-height: var(--rlc-skeleton-text-height);
   position: relative;
   display: block;
+  overflow: inherit;
+  font-weight: inherit;
   font-size: var(--rlc-skeleton-text-font-size);
   letter-spacing: var(--rlc-skeleton-text-letter-spacing);
   line-height: var(--rlc-skeleton-text-height);
-  font-weight: inherit;
-  overflow: inherit;
-  white-space: inherit;
-  text-overflow: inherit;
 }
 .rls-skeleton-text__value {
   display: flex;
@@ -802,9 +802,12 @@
   font-size: inherit;
   line-height: inherit;
   letter-spacing: inherit;
-  overflow: inherit;
-  white-space: inherit;
-  text-overflow: inherit;
+}
+.rls-skeleton-text__value > span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .rls-switch {
@@ -868,7 +871,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  align-content: center;
+  align-items: center;
   column-gap: var(--rls-sizing-x4);
   padding: var(--rlc-ballot-padding);
   box-sizing: border-box;
@@ -888,7 +891,7 @@
   row-gap: var(--rlc-ballot-component-row-gap);
 }
 .rls-ballot__title {
-  --rlc-skeleton-text-height: var(--rls-ballot-title-height);
+  --rlc-skeleton-text-height: var(--rlc-ballot-title-height);
   --rlc-skeleton-text-letter-spacing: var(--rlc-ballot-title-letter-spacing);
   --rlc-skeleton-text-font-size: var(--rlc-ballot-title-font-size);
   position: relative;
@@ -1772,17 +1775,13 @@
   --pvt-control-opacity: 1;
 }
 .rls-field-autocomplete.rls-field-box--selected {
-  --pvt-control-width: calc(100% - var(--rls-sizing-x14));
+  --pvt-control-width: calc(100% - var(--rlc-fieldlist-action-dimension));
 }
 .rls-field-autocomplete.rls-field-box--disabled {
   --pvt-control-opacity: 0.5;
 }
 .rls-field-autocomplete .rls-field-list__control {
   width: var(--pvt-control-width);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  opacity: var(--pvt-control-opacity);
 }
 .rls-field-autocomplete .rls-field-list__ul__search {
   display: flex;
@@ -1834,12 +1833,6 @@
 .rls-field-autocomplete .rls-field-list__ul .rls-progress-bar {
   margin-bottom: var(--rls-sizing-x8);
 }
-.rls-field-autocomplete .rls-field-list__element .rls-ballot__title label {
-  background: var(--rls-theme-color-100);
-  color: var(--rls-theme-color-500);
-  padding: 0rem var(--rls-sizing-x2);
-  border-radius: var(--rls-sizing-x2);
-}
 
 .rls-modal {
   --pvt-component-transform: translateY(80rem) scale(0.6);

package/dist/cjs/index.js

@@ -1537,7 +1537,7 @@ function RlsSkeleton({ rlsTheme }) {
 }
 
 function RlsSkeletonText({ active, children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("span", { className: "rls-skeleton-text__value", children: children })) }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("label", { className: "rls-skeleton-text__value", children: children })) }));
 }
 
 function RlsSwitch({ checked, disabled, rlsTheme, onClick }) {
@@ -1550,7 +1550,7 @@ function RlsSwitchControl({ formControl, disabled, rlsTheme }) {
 }
 
 function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
-    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
 }
 
 function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
@@ -2036,17 +2036,17 @@ function RlsDatatableHeader({ children }) {
 function RlsDatatableTitle({ children, className, control }) {
     return (jsxRuntimeExports.jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
 }
-function RlsDatatableData({ children, className, error }) {
-    return (jsxRuntimeExports.jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
-}
-function RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsxRuntimeExports.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
+function RlsDatatableRecord({ children, className, error }) {
+    return (jsxRuntimeExports.jsx("tr", { className: renderClassStatus('rls-datatable__record', { error }, className).trim(), children: children }));
 }
 function RlsDatatableTotals({ children, className, error }) {
     return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
 }
-function RlsDatatableInfo({ children, className, control, overflow }) {
-    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
+function RlsDatatableCell({ children, className, control, overflow }) {
+    return (jsxRuntimeExports.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatableData({ children, className, control, overflow }) {
+    return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-datatable__data', { control, overflow }, className).trim(), children: children }));
 }
 function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
     return (jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-datatable', {
@@ -2307,7 +2307,7 @@ function RlsFieldAutocompleteTemplate({ render, suggestions, children, disabled,
             disabled,
             focused: fieldAutocomplete.listControl.focused,
             selected: !!fieldAutocomplete.listControl.value
-        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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("label", { className: "rls-field-list__control", onClick: fieldAutocomplete.onClickControl, children: fieldAutocomplete.listControl.value ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__control__description", children: fieldAutocomplete.listControl.value })) : (jsxRuntimeExports.jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && fieldAutocomplete.listControl.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { 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-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldAutocomplete.listControl.value, onClick: fieldAutocomplete.onClickControl }), !hiddenIcon && fieldAutocomplete.listControl.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: fieldAutocomplete.listControl.visible,
                     hide: !fieldAutocomplete.listControl.visible,
                     higher: fieldAutocomplete.listControl.higher
@@ -2318,7 +2318,7 @@ function RlsFieldAutocompleteTemplate({ render, suggestions, children, disabled,
                                             }, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), fieldAutocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldAutocomplete.onClickElement(element), onKeyDown: fieldAutocomplete.onKeydownElement(element), children: render(element) }, index))), !fieldAutocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: fieldAutocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
-    return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+    return (jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
 }
 
 const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
@@ -2658,7 +2658,7 @@ function RlsFieldSelectTemplate({ render, suggestions, children, disabled, formC
                 }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: fieldSelect.listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldSelect.onClickElement(element), onKeyDown: fieldSelect.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: fieldSelect.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
-    return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
+    return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));
 }
 
 function RlsFormNavigation({ children, visible, rlsTheme }) {
@@ -2746,7 +2746,7 @@ exports.RlsDatatable = RlsDatatable;
 exports.RlsDatatableCell = RlsDatatableCell;
 exports.RlsDatatableData = RlsDatatableData;
 exports.RlsDatatableHeader = RlsDatatableHeader;
-exports.RlsDatatableInfo = RlsDatatableInfo;
+exports.RlsDatatableRecord = RlsDatatableRecord;
 exports.RlsDatatableTitle = RlsDatatableTitle;
 exports.RlsDatatableTotals = RlsDatatableTotals;
 exports.RlsFieldAutocomplete = RlsFieldAutocomplete;