@rolster/react-components 19.1.11 → 19.1.12

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.
@@ -769,6 +769,8 @@
769
769
  --pvt-value-font-color: var(--pvt-font-color);
770
770
  --pvt-value-opacity: 1;
771
771
  --pvt-component-font-color: transparent;
772
+ --rlc-amount-height: var(--pvt-height);
773
+ --rlc-amount-align-items: center;
772
774
  position: relative;
773
775
  width: var(--rlc-input-width, 100%);
774
776
  }
@@ -833,8 +835,6 @@
833
835
  } /*# sourceMappingURL=Input.css.map */
834
836
 
835
837
  .rls-input-decimal {
836
- --rlc-amount-height: var(--rlc-input-height);
837
- --rlc-amount-align-items: center;
838
838
  --rlc-tabular-text-font-size: var(--rls-input-font-size);
839
839
  --rlc-tabular-text-char-width: 5.25rem;
840
840
  position: relative;
@@ -843,8 +843,6 @@
843
843
  } /*# sourceMappingURL=InputDecimal.css.map */
844
844
 
845
845
  .rls-input-money {
846
- --rlc-amount-height: var(--rlc-input-height);
847
- --rlc-amount-align-items: center;
848
846
  --rlc-tabular-text-font-size: var(--rls-input-font-size);
849
847
  --rlc-tabular-text-char-width: 5.25rem;
850
848
  position: relative;
@@ -1277,8 +1275,8 @@
1277
1275
  --rlc-ballot-title-letter-spacing,
1278
1276
  var(--rls-label-letter-spacing)
1279
1277
  );
1280
- --pvt-title-height: var(
1281
- --rlc-ballot-title-height,
1278
+ --pvt-title-line-height: var(
1279
+ --rlc-ballot-title-line-height,
1282
1280
  var(--rls-label-line-height)
1283
1281
  );
1284
1282
  --pvt-subtitle-font-size: var(
@@ -1289,8 +1287,8 @@
1289
1287
  --rlc-ballot-subtitle-letter-spacing,
1290
1288
  var(--rls-smalltext-letter-spacing)
1291
1289
  );
1292
- --pvt-subtitle-height: var(
1293
- --rlc-ballot-subtitle-height,
1290
+ --pvt-subtitle-line-height: var(
1291
+ --rlc-ballot-subtitle-line-height,
1294
1292
  var(--rls-smalltext-line-height)
1295
1293
  );
1296
1294
  position: relative;
@@ -1334,6 +1332,7 @@
1334
1332
  );
1335
1333
  font-size: var(--pvt-title-font-size);
1336
1334
  letter-spacing: var(--pvt-title-letter-spacing);
1335
+ line-height: var(--pvt-title-line-height);
1337
1336
  }
1338
1337
  .rls-ballot__subtitle {
1339
1338
  --rlc-skeleton-text-font-size: var(--pvt-subtitle-font-size);
@@ -1348,6 +1347,7 @@
1348
1347
  );
1349
1348
  font-size: var(--pvt-subtitle-font-size);
1350
1349
  letter-spacing: var(--pvt-subtitle-letter-spacing);
1350
+ line-height: var(--pvt-subtitle-line-height);
1351
1351
  overflow: var(--rlc-ballot-subtitle-overflow, initial);
1352
1352
  text-overflow: var(--rlc-ballot-subtitle-text-overflow, initial);
1353
1353
  white-space: var(--rlc-ballot-subtitle-white-space, initial);
package/dist/cjs/index.js CHANGED
@@ -784,11 +784,11 @@ function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
784
784
  return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "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 })] }));
785
785
  }
786
786
 
787
- function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
788
- const className = require$$0.useMemo(() => {
789
- return renderClassStatus('rls-ballot', { bordered, skeleton });
790
- }, [bordered, skeleton]);
791
- return (jsxRuntimeExports.jsxs("div", { className: className, "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("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
787
+ function RlsBallot({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
788
+ const classNameBallot = require$$0.useMemo(() => {
789
+ return renderClassStatus('rls-ballot', { bordered, skeleton }, className);
790
+ }, [bordered, skeleton, className]);
791
+ return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "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("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
792
792
  }
793
793
 
794
794
  function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
@@ -2056,7 +2056,7 @@ function RlsFieldAutocompleteTemplate(props) {
2056
2056
  return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, 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-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.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 rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
2057
2057
  }
2058
2058
  function RlsFieldAutocomplete(props) {
2059
- const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
2059
+ const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
2060
2060
  return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
2061
2061
  }
2062
2062
 
@@ -2725,7 +2725,7 @@ function RlsFieldSelectTemplate(props) {
2725
2725
  return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, 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", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.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 rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
2726
2726
  }
2727
2727
  function RlsFieldSelect(props) {
2728
- const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
2728
+ const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
2729
2729
  return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
2730
2730
  }
2731
2731