@rolster/react-components 18.12.10 → 18.13.1

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.
Files changed (136) hide show
  1. package/dist/cjs/assets/{index-VcI5p9dK.css → index-fykwrWLx.css} +700 -652
  2. package/dist/cjs/index.js +745 -779
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/es/assets/{index-VcI5p9dK.css → index-fykwrWLx.css} +700 -652
  5. package/dist/es/index.js +747 -781
  6. package/dist/es/index.js.map +1 -1
  7. package/dist/esm/components/atoms/Amount/Amount.css +3 -3
  8. package/dist/esm/components/atoms/Avatar/Avatar.css +7 -7
  9. package/dist/esm/components/atoms/Badge/Badge.css +7 -7
  10. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +12 -12
  11. package/dist/esm/components/atoms/Button/Button.css +74 -53
  12. package/dist/esm/components/atoms/Button/Button.d.ts +1 -1
  13. package/dist/esm/components/atoms/Button/Button.js +1 -1
  14. package/dist/esm/components/atoms/Button/Button.js.map +1 -1
  15. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +22 -22
  16. package/dist/esm/components/atoms/CheckBox/CheckBox.css +8 -8
  17. package/dist/esm/components/atoms/Icon/Icon.css +7 -8
  18. package/dist/esm/components/atoms/Input/Input.css +13 -13
  19. package/dist/esm/components/atoms/InputMoney/InputMoney.css +1 -1
  20. package/dist/esm/components/atoms/InputNumber/InputNumber.css +1 -1
  21. package/dist/esm/components/atoms/InputPassword/InputPassword.css +8 -8
  22. package/dist/esm/components/atoms/InputText/InputText.css +1 -1
  23. package/dist/esm/components/atoms/Label/Label.css +1 -1
  24. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +6 -6
  25. package/dist/esm/components/atoms/Poster/Poster.css +6 -6
  26. package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +7 -7
  27. package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.css +5 -5
  28. package/dist/esm/components/atoms/RadioButton/RadioButton.css +6 -6
  29. package/dist/esm/components/atoms/SearchInput/SearchInput.css +4 -4
  30. package/dist/esm/components/atoms/Skeleton/Skeleton.css +6 -6
  31. package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +6 -8
  32. package/dist/esm/components/atoms/Switch/Switch.css +16 -16
  33. package/dist/esm/components/atoms/TabularText/TabularText.css +2 -2
  34. package/dist/esm/components/definitions.d.ts +1 -1
  35. package/dist/esm/components/molecules/Ballot/Ballot.css +27 -34
  36. package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.css +1 -1
  37. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +32 -30
  38. package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css +8 -8
  39. package/dist/esm/components/molecules/DayPicker/DayPicker.css +39 -27
  40. package/dist/esm/components/molecules/DayPicker/DayPicker.d.ts +3 -1
  41. package/dist/esm/components/molecules/DayPicker/DayPicker.js +32 -24
  42. package/dist/esm/components/molecules/DayPicker/DayPicker.js.map +1 -1
  43. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +28 -28
  44. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js +16 -19
  45. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js.map +1 -1
  46. package/dist/esm/components/molecules/MoneyField/MoneyField.css +1 -2
  47. package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +34 -19
  48. package/dist/esm/components/molecules/MonthPicker/MonthPicker.d.ts +2 -1
  49. package/dist/esm/components/molecules/MonthPicker/MonthPicker.js +30 -19
  50. package/dist/esm/components/molecules/MonthPicker/MonthPicker.js.map +1 -1
  51. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css +6 -6
  52. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.d.ts +1 -1
  53. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js +26 -21
  54. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js.map +1 -1
  55. package/dist/esm/components/molecules/NumberField/NumberField.css +1 -2
  56. package/dist/esm/components/molecules/Pagination/Pagination.css +29 -30
  57. package/dist/esm/components/molecules/PasswordField/PasswordField.css +4 -5
  58. package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css +8 -10
  59. package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css +8 -9
  60. package/dist/esm/components/molecules/TextField/TextField.css +1 -2
  61. package/dist/esm/components/molecules/Toolbar/Toolbar.css +10 -10
  62. package/dist/esm/components/molecules/YearPicker/YearPicker.css +42 -28
  63. package/dist/esm/components/molecules/YearPicker/YearPicker.d.ts +1 -1
  64. package/dist/esm/components/molecules/YearPicker/YearPicker.js +33 -26
  65. package/dist/esm/components/molecules/YearPicker/YearPicker.js.map +1 -1
  66. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css +22 -22
  67. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.d.ts +1 -1
  68. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js +1 -1
  69. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js.map +1 -1
  70. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.d.ts +1 -1
  71. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js +27 -81
  72. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js.map +1 -1
  73. package/dist/esm/components/organisms/Card/Card.css +5 -5
  74. package/dist/esm/components/organisms/Confirmation/Confirmation.css +38 -38
  75. package/dist/esm/components/organisms/DateField/DateField.css +15 -15
  76. package/dist/esm/components/organisms/DateField/DateField.d.ts +2 -2
  77. package/dist/esm/components/organisms/DateField/DateField.js +27 -16
  78. package/dist/esm/components/organisms/DateField/DateField.js.map +1 -1
  79. package/dist/esm/components/organisms/DatePicker/DatePicker.css +27 -24
  80. package/dist/esm/components/organisms/DatePicker/DatePicker.d.ts +2 -2
  81. package/dist/esm/components/organisms/DatePicker/DatePicker.js +37 -55
  82. package/dist/esm/components/organisms/DatePicker/DatePicker.js.map +1 -1
  83. package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +13 -15
  84. package/dist/esm/components/organisms/DateRangeField/DateRangeField.js +5 -5
  85. package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map +1 -1
  86. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +20 -20
  87. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.d.ts +2 -2
  88. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js +13 -33
  89. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js.map +1 -1
  90. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +15 -14
  91. package/dist/esm/components/organisms/Modal/Modal.css +11 -11
  92. package/dist/esm/components/organisms/SelectField/SelectField.css +1 -1
  93. package/dist/esm/components/organisms/SelectField/SelectField.d.ts +1 -1
  94. package/dist/esm/components/organisms/SelectField/SelectField.js +1 -1
  95. package/dist/esm/components/organisms/SelectField/SelectField.js.map +1 -1
  96. package/dist/esm/components/organisms/SelectField/SelectFieldHook.d.ts +1 -1
  97. package/dist/esm/components/organisms/SelectField/SelectFieldHook.js +18 -35
  98. package/dist/esm/components/organisms/SelectField/SelectFieldHook.js.map +1 -1
  99. package/dist/esm/components/organisms/Snackbar/Snackbar.css +26 -26
  100. package/dist/esm/constants/index.d.ts +1 -0
  101. package/dist/esm/constants/index.js +2 -0
  102. package/dist/esm/constants/index.js.map +1 -0
  103. package/dist/esm/constants/picker.constant.d.ts +1 -0
  104. package/dist/esm/constants/picker.constant.js +2 -0
  105. package/dist/esm/constants/picker.constant.js.map +1 -0
  106. package/dist/esm/helpers/date-range-picker.d.ts +1 -12
  107. package/dist/esm/helpers/date-range-picker.js +5 -107
  108. package/dist/esm/helpers/date-range-picker.js.map +1 -1
  109. package/dist/esm/helpers/index.d.ts +2 -0
  110. package/dist/esm/helpers/index.js +3 -0
  111. package/dist/esm/helpers/index.js.map +1 -0
  112. package/dist/esm/hooks/ListControlHook.d.ts +2 -3
  113. package/dist/esm/hooks/ListControlHook.js +22 -92
  114. package/dist/esm/hooks/ListControlHook.js.map +1 -1
  115. package/dist/esm/index.d.ts +1 -2
  116. package/dist/esm/index.js +1 -2
  117. package/dist/esm/index.js.map +1 -1
  118. package/package.json +6 -5
  119. package/dist/esm/helpers/date-picker.d.ts +0 -1
  120. package/dist/esm/helpers/date-picker.js +0 -9
  121. package/dist/esm/helpers/date-picker.js.map +0 -1
  122. package/dist/esm/helpers/day-picker.d.ts +0 -9
  123. package/dist/esm/helpers/day-picker.js +0 -86
  124. package/dist/esm/helpers/day-picker.js.map +0 -1
  125. package/dist/esm/helpers/month-picker.d.ts +0 -14
  126. package/dist/esm/helpers/month-picker.js +0 -78
  127. package/dist/esm/helpers/month-picker.js.map +0 -1
  128. package/dist/esm/helpers/year-picker.d.ts +0 -17
  129. package/dist/esm/helpers/year-picker.js +0 -83
  130. package/dist/esm/helpers/year-picker.js.map +0 -1
  131. package/dist/esm/models.d.ts +0 -58
  132. package/dist/esm/models.js +0 -9
  133. package/dist/esm/models.js.map +0 -1
  134. package/dist/esm/types.d.ts +0 -12
  135. package/dist/esm/types.js +0 -7
  136. package/dist/esm/types.js.map +0 -1
@@ -2,49 +2,48 @@
2
2
  position: relative;
3
3
  display: flex;
4
4
  justify-content: center;
5
- float: left;
6
5
  width: 100%;
7
6
  overflow: hidden;
8
- height: var(--sizing-x20);
9
- padding: 0rem var(--sizing-x6);
7
+ height: var(--rls-sizing-x20);
8
+ padding: 0rem var(--rls-sizing-x6);
10
9
  box-sizing: border-box;
11
10
  }
12
11
  .rls-pagination__pages {
13
12
  display: flex;
14
- gap: var(--sizing-x4);
13
+ gap: var(--rls-sizing-x4);
15
14
  width: auto;
16
- margin: 0rem var(--sizing-x4);
15
+ margin: 0rem var(--rls-sizing-x4);
17
16
  }
18
17
  .rls-pagination__page {
19
- background: var(--background-theme-100);
20
- color: var(--color-theme-500);
18
+ background: var(--rls-app-background-100);
19
+ color: var(--rls-app-color-500);
21
20
  cursor: default;
22
21
  margin: auto 0rem;
23
22
  text-align: center;
24
- width: var(--sizing-x16);
25
- height: var(--sizing-x16);
26
- line-height: var(--sizing-x16);
27
- border-radius: var(--sizing-x2);
28
- font-size: var(--body-font-size);
29
- letter-spacing: var(--body-letter-spacing);
23
+ width: var(--rls-sizing-x16);
24
+ height: var(--rls-sizing-x16);
25
+ line-height: var(--rls-sizing-x16);
26
+ border-radius: var(--rls-sizing-x2);
27
+ font-size: var(--rls-body-font-size);
28
+ letter-spacing: var(--rls-body-letter-spacing);
30
29
  }
31
30
  .rls-pagination__page:hover {
32
- background: var(--color-rolster-300);
33
- color: var(--color-rolster-900);
31
+ background: var(--rls-theme-color-300);
32
+ color: var(--rls-theme-color-900);
34
33
  }
35
34
  .rls-pagination__page--active {
36
- background: var(--gradient-rolster-500);
37
- color: var(--color-light-500);
35
+ background: var(--rls-theme-gradient-500);
36
+ color: var(--rls-light-color-500);
38
37
  }
39
38
  .rls-pagination__description {
40
- color: var(--color-theme-500);
41
- margin: 0rem var(--sizing-x4);
39
+ color: var(--rls-app-color-500);
40
+ margin: 0rem var(--rls-sizing-x4);
42
41
  width: auto;
43
- height: var(--sizing-x20);
44
- line-height: var(--sizing-x20);
45
- font-size: var(--body-font-size);
46
- font-weight: var(--font-weight-bold);
47
- letter-spacing: var(--body-letter-spacing);
42
+ height: var(--rls-sizing-x20);
43
+ line-height: var(--rls-sizing-x20);
44
+ font-size: var(--rls-body-font-size);
45
+ font-weight: var(--rls-font-weight-bold);
46
+ letter-spacing: var(--rls-body-letter-spacing);
48
47
  }
49
48
  .rls-pagination__actions {
50
49
  width: auto;
@@ -52,14 +51,14 @@
52
51
  .rls-pagination__action {
53
52
  background: none;
54
53
  outline: none;
55
- color: var(--color-theme-300);
56
- height: var(--sizing-x18);
57
- width: var(--sizing-x18);
58
- padding: var(--sizing-x3);
59
- margin: var(--sizing-x1) 0rem;
54
+ color: var(--rls-app-color-300);
55
+ height: var(--rls-sizing-x18);
56
+ width: var(--rls-sizing-x18);
57
+ padding: var(--rls-sizing-x3);
58
+ margin: var(--rls-sizing-x1) 0rem;
60
59
  }
61
60
  .rls-pagination__action:hover {
62
- color: var(--color-rolster-300);
61
+ color: var(--rls-theme-color-300);
63
62
  cursor: pointer;
64
63
  }
65
64
  .rls-pagination__action:disabled {
@@ -1,12 +1,11 @@
1
1
  .rls-password-field {
2
- --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
3
- --rls-action-ripple-dimension: var(--sizing-x16);
4
- --rls-action-ripple-position: -8rem;
2
+ --rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
3
+ --rlc-action-ripple-dimension: var(--rls-sizing-x16);
4
+ --rlc-action-ripple-position: -8rem;
5
5
  position: relative;
6
- float: left;
7
6
  width: 100%;
8
7
  box-sizing: border-box;
9
8
  }
10
9
  .rls-password-field .rls-button-action {
11
- margin: auto var(--sizing-x2) auto 0rem;
10
+ margin: auto var(--rls-sizing-x2) auto 0rem;
12
11
  }
@@ -1,11 +1,10 @@
1
1
  .rls-radiobutton-label {
2
2
  --pvt-text-opacity: 1;
3
- --pvt-text-height: var(--sizing-x12);
3
+ --pvt-text-height: var(--rls-sizing-x12);
4
4
  --pvt-text-overflow: hidden;
5
5
  --pvt-text-white-space: nowrap;
6
6
  --pvt-text-text-overflow: ellipsis;
7
7
  position: relative;
8
- float: left;
9
8
  width: 100%;
10
9
  display: flex;
11
10
  }
@@ -20,18 +19,17 @@
20
19
  --pvt-text-height: auto;
21
20
  }
22
21
  .rls-radiobutton-label__component {
23
- margin-right: var(--sizing-x4);
22
+ margin-right: var(--rls-sizing-x4);
24
23
  width: auto;
25
24
  }
26
25
  .rls-radiobutton-label__text {
27
- float: left;
28
- max-width: calc(100% - var(--sizing-x16));
26
+ max-width: calc(100% - var(--rls-sizing-x16));
29
27
  height: var(--pvt-text-height);
30
- line-height: var(--sizing-x12);
31
- color: var(--color-theme-300);
32
- font-size: var(--label-font-size);
33
- font-weight: var(--font-weight-medium);
34
- letter-spacing: var(--label-letter-spacing);
28
+ line-height: var(--rls-sizing-x12);
29
+ color: var(--rls-app-color-300);
30
+ font-size: var(--rls-label-font-size);
31
+ font-weight: var(--rls-font-weight-medium);
32
+ letter-spacing: var(--rls-label-letter-spacing);
35
33
  user-select: none;
36
34
  opacity: var(--pvt-text-opacity);
37
35
  overflow: var(--pvt-text-overflow);
@@ -1,11 +1,11 @@
1
1
  .rls-switch-label {
2
2
  --pvt-text-opacity: 1;
3
- --pvt-text-height: var(--sizing-x12);
3
+ --pvt-text-height: var(--rls-sizing-x12);
4
4
  --pvt-text-overflow: hidden;
5
5
  --pvt-text-white-space: nowrap;
6
6
  --pvt-text-text-overflow: ellipsis;
7
7
  display: flex;
8
- column-gap: var(--sizing-x4);
8
+ column-gap: var(--rls-sizing-x4);
9
9
  }
10
10
  .rls-switch-label--disabled {
11
11
  --pvt-text-opacity: 0.5;
@@ -21,14 +21,13 @@
21
21
  max-width: 20rem;
22
22
  }
23
23
  .rls-switch-label__text {
24
- float: left;
25
- max-width: calc(100% - var(--sizing-x28));
24
+ max-width: calc(100% - var(--rls-sizing-x28));
26
25
  height: var(--pvt-text-height);
27
- line-height: var(--sizing-x12);
28
- color: var(--color-theme-300);
29
- font-size: var(--label-font-size);
30
- font-weight: var(--font-weight-medium);
31
- letter-spacing: var(--label-letter-spacing);
26
+ line-height: var(--rls-sizing-x12);
27
+ color: var(--rls-app-color-300);
28
+ font-size: var(--rls-label-font-size);
29
+ font-weight: var(--rls-font-weight-medium);
30
+ letter-spacing: var(--rls-label-letter-spacing);
32
31
  user-select: none;
33
32
  opacity: var(--pvt-text-opacity);
34
33
  overflow: var(--pvt-text-overflow);
@@ -1,7 +1,6 @@
1
1
  .rls-text-field {
2
- --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
2
+ --rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
3
3
  position: relative;
4
- float: left;
5
4
  width: 100%;
6
5
  box-sizing: border-box;
7
6
  }
@@ -2,8 +2,8 @@
2
2
  display: flex;
3
3
  justify-content: space-between;
4
4
  align-items: center;
5
- column-gap: var(--sizing-x6);
6
- height: var(--rls-toolbar-height);
5
+ column-gap: var(--rls-sizing-x6);
6
+ height: var(--rlc-toolbar-height);
7
7
  }
8
8
  .rls-toolbar > * {
9
9
  width: auto;
@@ -11,7 +11,7 @@
11
11
  .rls-toolbar__description {
12
12
  display: flex;
13
13
  flex-direction: column;
14
- row-gap: var(--sizing-x2);
14
+ row-gap: var(--rls-sizing-x2);
15
15
  overflow: hidden;
16
16
  }
17
17
  .rls-toolbar__description > label {
@@ -22,19 +22,19 @@
22
22
  white-space: nowrap;
23
23
  }
24
24
  .rls-toolbar__title {
25
- color: var(--color-theme-500);
26
- height: var(--sizing-x12);
27
- line-height: var(--sizing-x12);
25
+ color: var(--rls-app-color-500);
26
+ height: var(--rls-sizing-x12);
27
+ line-height: var(--rls-sizing-x12);
28
28
  font-size: 8.125rem;
29
- letter-spacing: var(--label-letter-spacing);
30
- font-weight: var(--font-weight-bold);
29
+ letter-spacing: var(--rls-label-letter-spacing);
30
+ font-weight: var(--rls-font-weight-bold);
31
31
  }
32
32
  .rls-toolbar__subtitle {
33
- color: var(--color-theme-300);
33
+ color: var(--rls-app-color-300);
34
34
  }
35
35
  .rls-toolbar__actions {
36
36
  display: flex;
37
37
  box-sizing: border-box;
38
- column-gap: var(--sizing-x8);
38
+ column-gap: var(--rls-sizing-x8);
39
39
  align-items: center;
40
40
  }
@@ -1,6 +1,8 @@
1
1
  .rls-year-picker {
2
+ --pvt-component-background: transparent;
3
+ --pvt-component-font-color: var(--rls-app-color-500);
4
+ --pvt-component-border: var(--rls-border-1) solid transparent;
2
5
  position: relative;
3
- float: left;
4
6
  width: 100%;
5
7
  max-width: 140rem;
6
8
  box-sizing: border-box;
@@ -12,24 +14,25 @@
12
14
  justify-content: space-between;
13
15
  align-items: center;
14
16
  box-sizing: border-box;
15
- padding: var(--sizing-x4) var(--sizing-x6);
16
- color: var(--color-theme-500);
17
- background: var(--background-theme-100);
17
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
18
+ color: var(--rls-app-color-500);
19
+ background: var(--rls-app-background-100);
20
+ border-radius: var(--rls-sizing-x4);
18
21
  }
19
22
  .rls-year-picker__action {
20
- width: var(--sizing-x16);
21
- height: var(--sizing-x16);
22
- line-height: var(--sizing-x16);
23
+ width: var(--rls-sizing-x16);
24
+ height: var(--rls-sizing-x16);
25
+ line-height: var(--rls-sizing-x16);
23
26
  }
24
27
  .rls-year-picker__action button {
25
- color: var(--color-theme-500);
28
+ color: var(--rls-app-color-500);
26
29
  background: transparent;
27
30
  outline: none;
28
31
  width: inherit;
29
32
  height: inherit;
30
33
  }
31
- .rls-year-picker__action button:hover {
32
- color: var(--color-rolster-500);
34
+ .rls-year-picker__action button:not(:disabled):hover {
35
+ color: var(--rls-theme-color-500);
33
36
  }
34
37
  .rls-year-picker__action button:disabled {
35
38
  opacity: 0.5;
@@ -37,40 +40,51 @@
37
40
  .rls-year-picker__component {
38
41
  position: relative;
39
42
  display: grid;
40
- grid-template-columns: repeat(3, 1fr);
41
- gap: var(--sizing-x4);
42
43
  width: 100%;
43
- float: left;
44
- padding: var(--sizing-x4);
44
+ grid-template-columns: repeat(3, 1fr);
45
+ padding: var(--rls-sizing-x4);
45
46
  box-sizing: border-box;
47
+ row-gap: var(--rls-sizing-x6);
48
+ column-gap: var(--rls-sizing-x8);
46
49
  }
47
50
  .rls-year-picker__year {
48
51
  position: relative;
49
- float: left;
50
52
  display: flex;
53
+ align-items: center;
54
+ justify-content: center;
51
55
  box-sizing: border-box;
52
56
  text-align: center;
53
- height: var(--sizing-x18);
54
- border-radius: var(--sizing-x4);
55
- color: var(--color-theme-300);
57
+ height: var(--rls-sizing-x20);
58
+ border-radius: var(--rls-sizing-x4);
59
+ }
60
+ .rls-year-picker__year:not(:hover) {
61
+ color: var(--pvt-component-font-color);
62
+ border: var(--pvt-component-border);
63
+ background: var(--pvt-component-background);
56
64
  }
57
65
  .rls-year-picker__year:hover {
58
- background: var(--color-rolster-900);
59
- color: var(--color-light-500);
66
+ background: var(--rls-theme-color-900);
67
+ color: var(--rls-theme-font-900);
68
+ border: var(--rls-theme-border-1-900);
69
+ }
70
+ .rls-year-picker__year--selected {
71
+ --pvt-component-border: var(--rls-app-border-1-300);
60
72
  }
61
- .rls-year-picker__year--selected:not(:hover) {
62
- background: var(--color-rolster-500);
63
- color: var(--color-light-500);
73
+ .rls-year-picker__year--focused {
74
+ --pvt-component-background: var(--rls-theme-color-500);
75
+ --pvt-component-font-color: var(--rls-theme-font-500);
76
+ --pvt-component-border: var(--rls-theme-border-1-500);
64
77
  }
65
78
  .rls-year-picker__year--disabled {
79
+ --pvt-span-background: var(--rls-app-background-300);
80
+ --pvt-component-font-color: var(--rls-app-color-100);
81
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
66
82
  pointer-events: none;
67
- border: none;
68
- opacity: 0.5;
69
83
  }
70
84
  .rls-year-picker__year__span {
71
- font-size: var(--sizing-x8);
72
- margin: auto;
85
+ font-weight: var(--rls-font-weight-semibold);
86
+ font-size: var(--rls-sizing-x8);
73
87
  cursor: default;
74
88
  pointer-events: none;
75
- font-weight: var(--font-weight-medium);
89
+ letter-spacing: 0.325rem;
76
90
  }
@@ -9,5 +9,5 @@ interface YearPickerProps extends RlsComponent {
9
9
  minDate?: Date;
10
10
  onValue?: (value: number) => void;
11
11
  }
12
- export declare function RlsYearPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }: YearPickerProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }: YearPickerProps): import("react/jsx-runtime").JSX.Element;
13
13
  export {};
@@ -1,28 +1,40 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { itIsDefined } from '@rolster/helpers-advanced';
3
+ import { checkYearPicker, createYearPicker } from '@rolster/helpers-components';
2
4
  import { useEffect, useState } from 'react';
3
5
  import { renderClassStatus } from '../../../helpers/css';
4
- import { createYearPicker } from '../../../helpers/year-picker';
5
- import { RlsIcon } from '../../atoms';
6
+ import { RlsButtonAction } from '../../atoms';
6
7
  import './YearPicker.css';
7
- export function RlsYearPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
8
- const initialDate = date || new Date();
9
- const initialYear = formControl?.state || initialDate.getFullYear();
10
- const [value, setValue] = useState(initialYear);
11
- const [year, setYear] = useState(initialYear);
12
- const [template, setTemplate] = useState(createYearPicker({
13
- value: formControl?.state || value,
14
- year: initialYear,
15
- minDate,
16
- maxDate
17
- }));
8
+ export function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }) {
9
+ const currentDate = date || new Date();
10
+ const [value, setValue] = useState(formControl?.state || currentDate.getFullYear());
11
+ const [year, setYear] = useState(formControl?.state || currentDate.getFullYear());
12
+ const [template, setTemplate] = useState(createYearPicker(createPickerProps()));
18
13
  useEffect(() => {
19
- setTemplate(createYearPicker({
20
- value: formControl?.state || value,
14
+ const props = createPickerProps(); // YearPickerProps
15
+ const year = checkYearPicker(props);
16
+ year
17
+ ? setYearValue(year)
18
+ : setTemplate(createYearPicker(createPickerProps()));
19
+ }, [date, year, value, minDate, maxDate]);
20
+ useEffect(() => {
21
+ const year = checkYearPicker(createPickerProps());
22
+ itIsDefined(year)
23
+ ? formControl?.setState(year)
24
+ : setValue(formControl?.state || currentDate.getFullYear());
25
+ }, [formControl?.state]);
26
+ function createPickerProps() {
27
+ return {
28
+ date: currentDate,
21
29
  year,
22
30
  minDate,
23
31
  maxDate
24
- }));
25
- }, [value, year, minDate, maxDate]);
32
+ };
33
+ }
34
+ function setYearValue(value) {
35
+ formControl ? formControl.setState(value) : setValue(value);
36
+ setYear(value);
37
+ }
26
38
  function onClickPrev() {
27
39
  setYear(year - 8);
28
40
  }
@@ -30,20 +42,15 @@ export function RlsYearPicker({ formControl, date, disabled: disabledPicker, max
30
42
  setYear(year + 8);
31
43
  }
32
44
  function onChange(value) {
33
- formControl?.setState(value);
34
- setYear(value);
35
- setValue(value);
45
+ setYearValue(value);
36
46
  if (onValue) {
37
47
  onValue(value);
38
48
  }
39
49
  }
40
- return (_jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-year-picker__header", children: [_jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: _jsx("button", { disabled: !template.hasPrevious || disabledPicker, onClick: onClickPrev, children: _jsx(RlsIcon, { value: "arrow-ios-left" }) }) }), _jsxs("label", { className: "title-bold", children: [template.minRange, " - ", template.maxRange] }), _jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: _jsx("button", { disabled: !template.hasNext || disabledPicker, onClick: onClickNext, children: _jsx(RlsIcon, { value: "arrow-ios-right" }) }) })] }), _jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, selected }, index) => (_jsx("div", { className: renderClassStatus('rls-year-picker__year', {
50
+ return (_jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-year-picker__header", children: [_jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: _jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), _jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), _jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: _jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), _jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (_jsx("div", { className: renderClassStatus('rls-year-picker__year', {
41
51
  disabled: disabled || disabledPicker,
52
+ focused,
42
53
  selected
43
- }), onClick: () => {
44
- if (value && !disabled) {
45
- onChange(value);
46
- }
47
- }, children: _jsx("span", { className: "rls-year-picker__year__span body1-medium", children: value || '????' }) }, index))) })] }));
54
+ }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: _jsx("span", { className: "rls-year-picker__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
48
55
  }
49
56
  //# sourceMappingURL=YearPicker.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"YearPicker.js","sourceRoot":"","sources":["../../../../../src/components/molecules/YearPicker/YearPicker.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"YearPicker.js","sourceRoot":"","sources":["../../../../../src/components/molecules/YearPicker/YearPicker.tsx"],"names":[],"mappings":"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"}
@@ -3,7 +3,7 @@
3
3
  --pvt-control-opacity: 1;
4
4
  }
5
5
  .rls-autocomplete-field.rls-box-field--selected {
6
- --pvt-control-width: calc(100% - var(--sizing-x14));
6
+ --pvt-control-width: calc(100% - var(--rls-sizing-x14));
7
7
  }
8
8
  .rls-autocomplete-field.rls-box-field--disabled {
9
9
  --pvt-control-opacity: 0.5;
@@ -19,55 +19,55 @@
19
19
  display: flex;
20
20
  align-items: center;
21
21
  width: 100%;
22
- margin-top: var(--sizing-x2);
23
- margin-bottom: var(--sizing-x6);
24
- background: var(--background-theme-300);
25
- border-radius: var(--sizing-x4);
26
- padding: var(--sizing-x4);
22
+ margin-top: var(--rls-sizing-x2);
23
+ margin-bottom: var(--rls-sizing-x6);
24
+ background: var(--rls-app-background-300);
25
+ border-radius: var(--rls-sizing-x4);
26
+ padding: var(--rls-sizing-x4);
27
27
  box-sizing: border-box;
28
28
  }
29
29
  .rls-autocomplete-field .rls-list-field__ul__search button {
30
- color: var(--color-theme-300);
30
+ color: var(--rls-app-color-300);
31
31
  background: transparent;
32
32
  }
33
33
  .rls-autocomplete-field
34
34
  .rls-list-field__ul__search
35
35
  button:not(:disabled):hover {
36
- color: var(--color-rolster-300);
36
+ color: var(--rls-theme-color-300);
37
37
  }
38
38
  .rls-autocomplete-field .rls-list-field__ul__search button:disabled {
39
39
  opacity: 0.5;
40
40
  }
41
41
  .rls-autocomplete-field .rls-list-field__ul__control {
42
42
  width: 100%;
43
- height: var(--sizing-x12);
44
- line-height: var(--sizing-x12);
43
+ height: var(--rls-sizing-x12);
44
+ line-height: var(--rls-sizing-x12);
45
45
  padding: 0rem;
46
46
  cursor: text;
47
47
  border: none;
48
48
  outline: none;
49
49
  background: transparent;
50
- color: var(--color-theme-500);
51
- font-size: var(--input-font-size);
52
- font-weight: var(--font-weight-medium);
53
- letter-spacing: var(--input-letter-spacing);
50
+ color: var(--rls-app-color-500);
51
+ font-size: var(--rls-input-font-size);
52
+ font-weight: var(--rls-font-weight-medium);
53
+ letter-spacing: var(--rls-input-letter-spacing);
54
54
  }
55
55
  .rls-autocomplete-field .rls-list-field__ul__control::placeholder {
56
- color: var(--color-theme-100);
56
+ color: var(--rls-app-color-100);
57
57
  }
58
58
  .rls-autocomplete-field .rls-list-field__ul__control::selection {
59
- background: var(--color-rolster-700);
60
- color: var(--color-light-500);
59
+ background: var(--rls-theme-color-700);
60
+ color: var(--rls-light-color-500);
61
61
  }
62
62
  .rls-autocomplete-field .rls-list-field__ul__control:disabled {
63
63
  opacity: 0.5;
64
64
  }
65
65
  .rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
66
- margin-bottom: var(--sizing-x8);
66
+ margin-bottom: var(--rls-sizing-x8);
67
67
  }
68
68
  .rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
69
- background: var(--color-rolster-100);
70
- color: var(--color-rolster-500);
71
- padding: 0rem var(--sizing-x2);
72
- border-radius: var(--sizing-x2);
69
+ background: var(--rls-theme-color-100);
70
+ color: var(--rls-theme-color-500);
71
+ padding: 0rem var(--rls-sizing-x2);
72
+ border-radius: var(--rls-sizing-x2);
73
73
  }
@@ -1,6 +1,6 @@
1
+ import { AbstractAutocompleteElement as Element, AutocompleteElement } from '@rolster/helpers-components';
1
2
  import { ReactControl } from '@rolster/react-forms';
2
3
  import { ReactNode } from 'react';
3
- import { AbstractAutocompleteElement as Element, AutocompleteElement } from '../../../models';
4
4
  import { RlsComponent } from '../../definitions';
5
5
  import './AutocompleteField.css';
6
6
  interface AutocompleteFieldProps<T = unknown, E extends Element<T> = Element<T>> extends RlsComponent {
@@ -25,7 +25,7 @@ export function RlsAutocompleteFieldTemplate({ suggestions, children, disabled,
25
25
  setPattern(value);
26
26
  }, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (_jsx("button", { disabled: disabled || searching, onClick: () => {
27
27
  onSearch(pattern);
28
- }, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (_jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (_jsx("li", { className: "rls-list-field__empty", children: _jsxs("div", { className: "rls-list-field__empty__description", children: [_jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), _jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
28
+ }, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (_jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (_jsx("li", { className: "rls-list-field__empty", children: _jsxs("div", { className: "rls-list-field__empty__description", children: [_jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), _jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
29
29
  }
30
30
  export function RlsAutocompleteField(props) {
31
31
  return (_jsx(RlsAutocompleteFieldTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
@@ -1 +1 @@
1
- {"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteField.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteField.tsx"],"names":[],"mappings":"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"}
@@ -1,7 +1,7 @@
1
+ import { AbstractAutocompleteElement as Element } from '@rolster/helpers-components';
1
2
  import { ReactControl } from '@rolster/react-forms';
2
3
  import { KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
3
4
  import { ListControl } from '../../../hooks';
4
- import { AbstractAutocompleteElement as Element } from '../../../models';
5
5
  export interface AutocompleteControl<T = unknown, E extends Element<T> = Element<T>> {
6
6
  coincidences: E[];
7
7
  listControl: ListControl<T>;