@rolster/react-components 18.20.4 → 18.20.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -124,9 +124,11 @@
124
124
  }
125
125
  .rls-breadcrumb__label__a {
126
126
  display: inline-block;
127
- cursor: pointer;
128
127
  color: var(--pvt-link-font-color);
129
128
  }
129
+ .rls-breadcrumb__label__a--actionable {
130
+ cursor: pointer;
131
+ }
130
132
  .rls-breadcrumb__label__a--actionable:hover {
131
133
  color: var(--rls-theme-color-500);
132
134
  text-decoration: underline;
@@ -906,6 +908,36 @@
906
908
  border-radius: var(--rlc-switch-bar-radius);
907
909
  }
908
910
 
911
+ .rls-alert {
912
+ position: relative;
913
+ display: flex;
914
+ align-items: center;
915
+ column-gap: var(--rls-sizing-x6);
916
+ border-radius: var(--rls-sizing-x6);
917
+ box-sizing: border-box;
918
+ background: var(--rls-theme-color-100);
919
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
920
+ }
921
+ .rls-alert--bordered {
922
+ border: var(--rls-theme-border-1-500);
923
+ }
924
+ .rls-alert__icon {
925
+ --rlc-icon-color: var(--rls-theme-color-100);
926
+ display: flex;
927
+ align-items: center;
928
+ justify-content: center;
929
+ width: var(--rls-sizing-x16);
930
+ height: var(--rls-sizing-x16);
931
+ border-radius: 50%;
932
+ background: var(--rls-theme-color-500);
933
+ }
934
+ .rls-alert__icon + .rls-alert__content {
935
+ max-width: calc(100% - 22rem);
936
+ }
937
+ .rls-alert__content {
938
+ width: auto;
939
+ }
940
+
909
941
  .rls-ballot {
910
942
  --rlc-avatar-width: var(--rls-sizing-x20);
911
943
  --rlc-avatar-height: var(--rls-sizing-x20);
package/dist/cjs/index.js CHANGED
@@ -1678,6 +1678,10 @@ function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
1678
1678
  }, rlsTheme: rlsTheme }));
1679
1679
  }
1680
1680
 
1681
+ function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
1682
+ return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-alert', { bordered }), "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
1683
+ }
1684
+
1681
1685
  function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
1682
1686
  return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('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 }) }) }))] })] }));
1683
1687
  }
@@ -2172,6 +2176,9 @@ function RlsDatatableHeader({ children, identifier }) {
2172
2176
  function RlsDatatableTitle({ children, className, control, identifier }) {
2173
2177
  return (jsxRuntimeExports.jsx("th", { id: identifier, className: useRenderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
2174
2178
  }
2179
+ function RlsDatatableSubheader({ children, className, identifier }) {
2180
+ return (jsxRuntimeExports.jsx("tr", { id: identifier, className: useRenderClassStatus('rls-datatable__subheader', {}, className).trim(), children: children }));
2181
+ }
2175
2182
  function RlsDatatableRecord({ children, className, error, identifier, info, successs, warning }) {
2176
2183
  return (jsxRuntimeExports.jsx("tr", { id: identifier, className: useRenderClassStatus('rls-datatable__record', { error, info, successs, warning }, className).trim(), children: children }));
2177
2184
  }
@@ -2184,10 +2191,10 @@ function RlsDatatableCell({ children, className, control, identifier, overflow }
2184
2191
  function RlsDatatableData({ children, className, control, identifier, overflow }) {
2185
2192
  return (jsxRuntimeExports.jsx("div", { id: identifier, className: useRenderClassStatus('rls-datatable__data', { control, overflow }, className).trim(), children: children }));
2186
2193
  }
2187
- function RlsDatatable({ children, datatable, footer, header, identifier, rlsTheme, summary }) {
2194
+ function RlsDatatable({ children, datatable, footer, header, identifier, rlsTheme, summary, toolbar }) {
2188
2195
  return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-datatable', {
2189
2196
  scrolleable: datatable?.scrolleable
2190
- }), "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
2197
+ }), "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.tableRef, className: "rls-datatable__body", children: children })] }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
2191
2198
  }
2192
2199
 
2193
2200
  const DURATION_ANIMATION$1 = 240;
@@ -2673,6 +2680,7 @@ function RlsApplication({ children }) {
2673
2680
  }
2674
2681
 
2675
2682
  exports.ConfirmationResult = ConfirmationResult;
2683
+ exports.RlsAlert = RlsAlert;
2676
2684
  exports.RlsAmount = RlsAmount;
2677
2685
  exports.RlsApplication = RlsApplication;
2678
2686
  exports.RlsAvatar = RlsAvatar;
@@ -2693,6 +2701,7 @@ exports.RlsDatatableCell = RlsDatatableCell;
2693
2701
  exports.RlsDatatableData = RlsDatatableData;
2694
2702
  exports.RlsDatatableHeader = RlsDatatableHeader;
2695
2703
  exports.RlsDatatableRecord = RlsDatatableRecord;
2704
+ exports.RlsDatatableSubheader = RlsDatatableSubheader;
2696
2705
  exports.RlsDatatableTitle = RlsDatatableTitle;
2697
2706
  exports.RlsDatatableTotals = RlsDatatableTotals;
2698
2707
  exports.RlsFieldAutocomplete = RlsFieldAutocomplete;