@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
@@ -1,5 +1,5 @@
1
- import { hasPattern } from '@rolster/helpers-string';
2
- import { useEffect, useState } from 'react';
1
+ import { createStoreAutocomplete } from '@rolster/helpers-components';
2
+ import { useEffect, useRef, useState } from 'react';
3
3
  import { useListControl } from '../../../hooks';
4
4
  const DURATION_ANIMATION = 240;
5
5
  const MAX_ELEMENTS = 6;
@@ -11,39 +11,31 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
11
11
  coincidences: [],
12
12
  previous: null
13
13
  });
14
- const listControl = useListControl({
15
- suggestions,
16
- formControl,
17
- higher: true
18
- });
14
+ const listControl = useListControl({ suggestions, formControl });
19
15
  const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
20
- const [changeInternal, setChangeInternal] = useState(false);
16
+ const changeInternal = useRef(false);
21
17
  useEffect(() => filterSuggestions(pattern, true), [suggestions]);
22
18
  useEffect(() => filterSuggestions(pattern), [pattern]);
23
19
  useEffect(() => {
24
- changeInternal ? setChangeInternal(false) : resetState(formControl?.state);
20
+ if (changeInternal.current) {
21
+ changeInternal.current = false;
22
+ }
23
+ else {
24
+ resetState(formControl?.state);
25
+ }
25
26
  }, [formControl?.state]);
26
27
  useEffect(() => resetCollection(collection, formControl?.state), [collection]);
27
28
  function setFormState(value) {
28
- setChangeInternal(true);
29
- formControl?.setState(value);
29
+ if (formControl) {
30
+ changeInternal.current = true;
31
+ formControl.setState(value);
32
+ }
30
33
  }
31
34
  function resetCollection(collection, state) {
32
- if (state) {
33
- const element = collection.find(state);
34
- if (element) {
35
- setValue(element.description);
36
- }
37
- else {
38
- setValue('');
39
- }
40
- }
41
- else {
42
- setValue('');
43
- }
35
+ setValue(state ? collection.find(state)?.description || '' : '');
44
36
  }
45
37
  function resetState(state) {
46
- setValue(state ? collection.find(state)?.description || '' : '');
38
+ resetCollection(collection, state);
47
39
  }
48
40
  function onClickControl() {
49
41
  if (!disabled) {
@@ -60,8 +52,6 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
60
52
  function onKeydownInput(event) {
61
53
  switch (event.code) {
62
54
  case 'Escape':
63
- setVisible(false);
64
- break;
65
55
  case 'Tab':
66
56
  setVisible(false);
67
57
  break;
@@ -73,9 +63,7 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
73
63
  function onClickAction() {
74
64
  setVisible(false);
75
65
  setValue('');
76
- if (formControl) {
77
- setFormState(undefined);
78
- }
66
+ setFormState(undefined);
79
67
  if (onValue) {
80
68
  onValue(undefined);
81
69
  }
@@ -90,14 +78,7 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
90
78
  }
91
79
  function onKeydownElement(element) {
92
80
  return (event) => {
93
- switch (event.code) {
94
- case 'Enter':
95
- onChange(element);
96
- break;
97
- default:
98
- navigationElement(event);
99
- break;
100
- }
81
+ event.code === 'Enter' ? onChange(element) : navigationElement(event);
101
82
  };
102
83
  }
103
84
  function onChange({ description, value }) {
@@ -106,9 +87,7 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
106
87
  onSelect(value);
107
88
  }
108
89
  else {
109
- if (formControl) {
110
- setFormState(value);
111
- }
90
+ setFormState(value);
112
91
  setValue(description);
113
92
  }
114
93
  if (onValue) {
@@ -116,47 +95,14 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
116
95
  }
117
96
  }
118
97
  function filterSuggestions(pattern, reboot = false) {
119
- if (pattern) {
120
- const store = reboot ? createStoreEmpty() : searchForPattern(pattern);
121
- const elements = store?.coincidences || suggestions;
122
- const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
123
- setCoincidences(coincidences.slice(0, MAX_ELEMENTS));
124
- setStore({
125
- coincidences,
126
- pattern,
127
- previous: store
128
- });
129
- }
130
- else {
131
- setCoincidences(suggestions.slice(0, MAX_ELEMENTS));
132
- rebootStore();
133
- }
134
- }
135
- function searchForPattern(value) {
136
- if (!store.pattern) {
137
- return null;
138
- }
139
- let newStore = store;
140
- let search = false;
141
- while (!search && newStore) {
142
- search = hasPattern(value, newStore.pattern, true);
143
- if (!search) {
144
- newStore = newStore.previous;
145
- }
146
- }
147
- return newStore || rebootStore();
148
- }
149
- function rebootStore() {
150
- const store = createStoreEmpty();
151
- setStore(store);
152
- return store;
153
- }
154
- function createStoreEmpty() {
155
- return {
156
- coincidences: undefined,
157
- pattern: '',
158
- previous: null
159
- };
98
+ const result = createStoreAutocomplete({
99
+ pattern,
100
+ suggestions,
101
+ reboot,
102
+ store
103
+ });
104
+ setCoincidences(result.collection.slice(0, MAX_ELEMENTS));
105
+ setStore(result.store);
160
106
  }
161
107
  return {
162
108
  coincidences,
@@ -1 +1 @@
1
- {"version":3,"file":"AutocompleteFieldHook.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteFieldHook.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AutocompleteFieldHook.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteFieldHook.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,uBAAuB,EACxB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAIL,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAe,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAE7D,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,YAAY,GAAG,CAAC,CAAC;AA4BvB,MAAM,UAAU,oBAAoB,CAGlC,EACA,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,EACa;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAM,EAAE,CAAC,CAAC;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA0B;QAC1D,OAAO,EAAE,EAAE;QACX,YAAY,EAAE,EAAE;QAChB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,cAAc,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,CAAC;IAEjE,MAAM,EACJ,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,QAAQ,EACR,UAAU,EACX,GAAG,WAAW,CAAC;IAEhB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YAC3B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,SAAS,CACP,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,KAAK,CAAC,EACrD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,SAAS,YAAY,CAAC,KAAmB;QACvC,IAAI,WAAW,EAAE,CAAC;YAChB,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,SAAS,eAAe,CACtB,UAA6B,EAC7B,KAAmB;QAEnB,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,SAAS,UAAU,CAAC,KAAmB;QACrC,eAAe,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,cAAc;QACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,UAAU,CAAC,IAAI,CAAC,CAAC;YAEjB,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,kBAAkB,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,SAAS,YAAY;QACnB,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,SAAS,WAAW;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,SAAS,cAAc,CAAC,KAAoB;QAC1C,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,QAAQ,CAAC;YACd,KAAK,KAAK;gBACR,UAAU,CAAC,KAAK,CAAC,CAAC;gBAClB,MAAM;YAER;gBACE,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvB,MAAM;QACV,CAAC;IACH,CAAC;IAED,SAAS,aAAa;QACpB,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,YAAY,CAAC,SAAS,CAAC,CAAC;QAExB,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IAED,SAAS,eAAe;QACtB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,SAAS,cAAc,CAAC,OAAmB;QACzC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,OAAO,CAAC,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC;IAED,SAAS,gBAAgB,CAAC,OAAmB;QAC3C,OAAO,CAAC,KAAK,EAAE,EAAE;YACf,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACxE,CAAC,CAAC;IACJ,CAAC;IAED,SAAS,QAAQ,CAAC,EAAE,WAAW,EAAE,KAAK,EAAc;QAClD,UAAU,CAAC,KAAK,CAAC,CAAC;QAElB,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,QAAQ,CAAC,WAAW,CAAC,CAAC;QACxB,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,SAAS,iBAAiB,CAAC,OAAsB,EAAE,MAAM,GAAG,KAAK;QAC/D,MAAM,MAAM,GAAG,uBAAuB,CAAC;YACrC,OAAO;YACP,WAAW;YACX,MAAM;YACN,KAAK;SACN,CAAC,CAAC;QAEH,eAAe,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;QAC1D,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED,OAAO;QACL,YAAY;QACZ,WAAW;QACX,WAAW;QACX,aAAa;QACb,eAAe;QACf,cAAc;QACd,cAAc;QACd,YAAY;QACZ,gBAAgB;QAChB,cAAc;QACd,OAAO;QACP,UAAU;KACX,CAAC;AACJ,CAAC"}
@@ -1,15 +1,15 @@
1
1
  .rls-card {
2
- background: var(--background-theme-500);
3
- border-radius: var(--sizing-x4);
4
- box-shadow: var(--shadow-center-light-8);
2
+ background: var(--rls-app-background-500);
3
+ border-radius: var(--rls-sizing-x4);
4
+ box-shadow: var(--rls-light-shadow-center-8);
5
5
  }
6
6
  .rls-card--outline {
7
- border: var(--border-1-theme-100);
7
+ border: var(--rls-app-border-1-100);
8
8
  box-shadow: none;
9
9
  }
10
10
  .rls-card__content {
11
11
  display: flex;
12
12
  flex-direction: column;
13
- padding: var(--rls-card-content-padding);
13
+ padding: var(--rlc-card-content-padding);
14
14
  box-sizing: border-box;
15
15
  }
@@ -3,13 +3,13 @@
3
3
  --pvt-component-height: 0rem;
4
4
  --pvt-component-opacity: 0;
5
5
  --pvt-component-visibility: hidden;
6
- --pvt-title-font-size: var(--heading5-font-size);
7
- --pvt-title-letter-spacing: var(--heading5-letter-spacing);
8
- --pvt-title-line-height: var(--heading5-line-height);
6
+ --pvt-title-font-size: var(--rls-heading5-font-size);
7
+ --pvt-title-letter-spacing: var(--rls-heading5-letter-spacing);
8
+ --pvt-title-line-height: var(--rls-heading5-line-height);
9
9
  --pvt-title-text-transform: initial;
10
- --pvt-subtitle-font-size: var(--body-font-size);
11
- --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
12
- --pvt-subtitle-line-height: var(--body-line-height);
10
+ --pvt-subtitle-font-size: var(--rls-body-font-size);
11
+ --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
12
+ --pvt-subtitle-line-height: var(--rls-body-line-height);
13
13
  --pvt-subtitle-text-transform: initial;
14
14
  --pvt-content-font-size: 7.4rem;
15
15
  --pvt-content-letter-spacing: 0.05em;
@@ -24,7 +24,7 @@
24
24
  left: 0rem;
25
25
  width: 100vw;
26
26
  height: 100vh;
27
- z-index: var(--z-index-24);
27
+ z-index: var(--rls-z-index-24);
28
28
  visibility: hidden;
29
29
  }
30
30
  .rls-confirmation--visible {
@@ -40,37 +40,37 @@
40
40
  position: absolute;
41
41
  display: flex;
42
42
  flex-direction: column;
43
- row-gap: var(--sizing-x8);
44
- width: calc(100% - var(--sizing-x16));
43
+ row-gap: var(--rls-sizing-x8);
44
+ width: calc(100% - var(--rls-sizing-x16));
45
45
  max-width: 280rem;
46
46
  height: var(--pvt-component-height);
47
47
  opacity: var(--pvt-component-opacity);
48
48
  visibility: var(--pvt-component-visibility);
49
- padding: var(--sizing-x8) 0rem;
49
+ padding: var(--rls-sizing-x8) 0rem;
50
50
  box-sizing: border-box;
51
- z-index: var(--z-index-2);
52
- border-radius: var(--sizing-x4);
53
- background: var(--background-theme-500);
54
- box-shadow: var(--shadow-4);
51
+ z-index: var(--rls-z-index-2);
52
+ border-radius: var(--rls-sizing-x4);
53
+ background: var(--rls-app-background-500);
54
+ box-shadow: var(--rls-app-shadow-4);
55
55
  will-change: transform;
56
56
  transform: var(--pvt-component-transform);
57
- transition: opacity 125ms 0ms var(--deceleration-curve),
58
- transform 125ms 0ms var(--deceleration-curve),
59
- visibility 125ms 0ms var(--deceleration-curve);
57
+ transition: opacity 125ms 0ms var(--rls-deceleration-curve),
58
+ transform 125ms 0ms var(--rls-deceleration-curve),
59
+ visibility 125ms 0ms var(--rls-deceleration-curve);
60
60
  }
61
61
  .rls-confirmation__header {
62
62
  position: relative;
63
63
  display: flex;
64
64
  flex-direction: column;
65
- row-gap: var(--sizing-x2);
65
+ row-gap: var(--rls-sizing-x2);
66
66
  width: 100%;
67
- padding: 0rem var(--sizing-x8);
67
+ padding: 0rem var(--rls-sizing-x8);
68
68
  box-sizing: border-box;
69
69
  }
70
70
  .rls-confirmation__header__title {
71
71
  text-align: center;
72
- color: var(--color-theme-500);
73
- font-weight: var(--font-weight-bold);
72
+ color: var(--rls-app-color-500);
73
+ font-weight: var(--rls-font-weight-bold);
74
74
  font-size: var(--pvt-title-font-size);
75
75
  line-height: var(--pvt-title-line-height);
76
76
  letter-spacing: var(--pvt-title-letter-spacing);
@@ -78,8 +78,8 @@
78
78
  }
79
79
  .rls-confirmation__header__subtitle {
80
80
  text-align: center;
81
- color: var(--color-rolster-300);
82
- font-weight: var(--font-weight-bold);
81
+ color: var(--rls-theme-color-300);
82
+ font-weight: var(--rls-font-weight-bold);
83
83
  font-size: var(--pvt-subtitle-font-size);
84
84
  line-height: var(--pvt-subtitle-line-height);
85
85
  letter-spacing: var(--pvt-subtitle-letter-spacing);
@@ -88,15 +88,15 @@
88
88
  .rls-confirmation__body {
89
89
  position: relative;
90
90
  width: 100%;
91
- padding: 0rem var(--sizing-x8);
91
+ padding: 0rem var(--rls-sizing-x8);
92
92
  box-sizing: border-box;
93
93
  }
94
94
  .rls-confirmation__body__content {
95
- color: var(--color-theme-300);
95
+ color: var(--rls-app-color-300);
96
96
  text-align: center;
97
97
  }
98
98
  .rls-confirmation__body__content p {
99
- font-weight: var(--font-weight-medium);
99
+ font-weight: var(--rls-font-weight-medium);
100
100
  font-size: var(--pvt-content-font-size);
101
101
  line-height: var(--pvt-content-line-height);
102
102
  letter-spacing: var(--pvt-content-letter-spacing);
@@ -104,7 +104,7 @@
104
104
  .rls-confirmation__footer {
105
105
  position: relative;
106
106
  width: 100%;
107
- padding: var(--sizing-x4) var(--sizing-x8) 0rem var(--sizing-x8);
107
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
108
108
  box-sizing: border-box;
109
109
  }
110
110
  .rls-confirmation__footer__actions {
@@ -113,7 +113,7 @@
113
113
  display: flex;
114
114
  flex-direction: row-reverse;
115
115
  justify-content: center;
116
- column-gap: var(--sizing-x8);
116
+ column-gap: var(--rls-sizing-x8);
117
117
  }
118
118
  .rls-confirmation__backdrop {
119
119
  position: absolute;
@@ -125,25 +125,25 @@
125
125
  opacity: var(--pvt-backdrop-opacity);
126
126
  z-index: 1;
127
127
  will-change: opacity;
128
- background: var(--backdrop-rolster-500);
128
+ background: var(--rls-theme-backdrop-900);
129
129
  backdrop-filter: blur(2px);
130
- transition: opacity 120ms 0ms var(--deceleration-curve),
131
- bottom 120ms 0ms var(--deceleration-curve);
130
+ transition: opacity 120ms 0ms var(--rls-deceleration-curve),
131
+ bottom 120ms 0ms var(--rls-deceleration-curve);
132
132
  }
133
133
 
134
134
  @media screen and (max-width: 480px) {
135
135
  .rls-confirmation {
136
- --pvt-title-font-size: var(--title-font-size);
137
- --pvt-title-letter-spacing: var(--title-letter-spacing);
138
- --pvt-title-line-height: var(--title-line-height);
139
- --pvt-subtitle-font-size: var(--smalltext-font-size);
140
- --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
141
- --pvt-subtitle-line-height: var(--smalltext-line-height);
136
+ --pvt-title-font-size: var(--rls-title-font-size);
137
+ --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
138
+ --pvt-title-line-height: var(--rls-title-line-height);
139
+ --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
140
+ --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
141
+ --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
142
142
  --pvt-content-font-size: 7.325rem;
143
143
  }
144
144
  .rls-confirmation__footer__actions {
145
145
  flex-direction: column-reverse;
146
146
  column-gap: 0rem;
147
- row-gap: var(--sizing-x8);
147
+ row-gap: var(--rls-sizing-x8);
148
148
  }
149
149
  }
@@ -1,38 +1,38 @@
1
1
  .rls-date-field {
2
- --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
2
+ --rlc-boxfield-body-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
  }
7
+ .rls-date-field .rls-box-field__body {
8
+ column-gap: var(--rls-sizing-x2);
9
+ }
8
10
  .rls-date-field__control {
9
11
  position: relative;
10
- float: left;
11
- width: calc(100% - var(--sizing-x14));
12
- height: var(--sizing-x12);
13
- line-height: var(--sizing-x12);
12
+ width: calc(100% - var(--rls-sizing-x14));
13
+ height: var(--rls-sizing-x12);
14
+ line-height: var(--rls-sizing-x12);
14
15
  padding: 0rem;
15
16
  cursor: default;
16
17
  border: none;
17
18
  outline: none;
18
- color: var(--color-theme-input);
19
19
  background: transparent;
20
- font-size: var(--input-font-size);
21
- font-weight: var(--font-weight-medium);
22
- letter-spacing: var(--input-letter-spacing);
20
+ color: var(--rls-app-color-500);
21
+ font-size: var(--rls-input-font-size);
22
+ font-weight: var(--rls-font-weight-medium);
23
+ letter-spacing: var(--rls-input-letter-spacing);
23
24
  }
24
25
  .rls-date-field__control::placeholder {
25
- color: var(--color-theme-100);
26
+ color: var(--rls-app-color-100);
26
27
  }
27
28
  .rls-date-field__control:disabled {
28
29
  opacity: 0.5;
29
30
  }
30
31
  .rls-date-field__action {
31
- color: var(--color-theme-300);
32
- width: var(--sizing-x12);
33
- height: var(--sizing-x12);
32
+ color: var(--rls-app-color-300);
33
+ width: var(--rls-sizing-x12);
34
+ height: var(--rls-sizing-x12);
34
35
  padding: 0rem;
35
- margin-left: var(--sizing-x2);
36
36
  background: transparent;
37
37
  }
38
38
  .rls-date-field__action:disabled {
@@ -7,8 +7,8 @@ interface DateFieldProps extends RlsComponent {
7
7
  formControl?: ReactControl<HTMLElement, Date>;
8
8
  maxDate?: Date;
9
9
  minDate?: Date;
10
- placeholder?: string;
11
10
  onValue?: (value?: Date) => void;
11
+ placeholder?: string;
12
12
  }
13
- export declare function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme, onValue }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
14
14
  export {};
@@ -1,23 +1,34 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { PickerListenerType, checkDateRange } from '@rolster/helpers-components';
2
3
  import { dateFormatTemplate } from '@rolster/helpers-date';
3
- import { useEffect, useState } from 'react';
4
- import { renderClassStatus } from '../../../helpers/css';
5
- import { DATE_RANGE_FORMAT } from '../../../helpers/date-range-picker';
6
- import { PickerListenerType } from '../../../types';
4
+ import { useEffect, useRef, useState } from 'react';
5
+ import { DATE_RANGE_FORMAT } from '../../../constants';
6
+ import { renderClassStatus } from '../../../helpers';
7
7
  import { RlsMessageIcon, RlsIcon } from '../../atoms';
8
8
  import { RlsDatePicker } from '../DatePicker/DatePicker';
9
9
  import { RlsModal } from '../Modal/Modal';
10
10
  import './DateField.css';
11
- export function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme, onValue }) {
12
- const dateInitial = formControl?.state || date || new Date();
13
- const [value, setValue] = useState(dateInitial);
14
- const [show, setShow] = useState(false);
15
- const [description, setDescription] = useState('');
11
+ export function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
12
+ const today = new Date(); // Initial current date in component
13
+ const [value, setValue] = useState();
14
+ const [modalIsVisible, setModalIsVisible] = useState(false);
15
+ const description = useRef('');
16
16
  useEffect(() => {
17
- setDescription(value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '');
17
+ const dateCheck = checkDateRange({
18
+ date: formControl?.state || date || today,
19
+ minDate,
20
+ maxDate
21
+ });
22
+ setValue(dateCheck);
23
+ formControl?.setState(dateCheck);
24
+ }, []);
25
+ useEffect(() => {
26
+ description.current = value
27
+ ? dateFormatTemplate(value, DATE_RANGE_FORMAT)
28
+ : '';
18
29
  }, [value]);
19
30
  function onClickInput() {
20
- setShow(true);
31
+ setModalIsVisible(true);
21
32
  }
22
33
  function onChange(value, ignoreControl = false) {
23
34
  if (!ignoreControl) {
@@ -36,16 +47,16 @@ export function RlsDateField({ children, date, disabled, formControl, maxDate, m
36
47
  }
37
48
  }
38
49
  else {
39
- setShow(true);
50
+ setModalIsVisible(true);
40
51
  }
41
52
  }
42
- return (_jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && _jsx("label", { className: "rls-box-field__label", children: children }), _jsx("div", { className: "rls-box-field__component", children: _jsxs("div", { className: "rls-box-field__body", children: [_jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (_jsx("div", { className: "rls-box-field__error", children: _jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), _jsx(RlsModal, { visible: show, rlsTheme: rlsTheme, children: _jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
53
+ return (_jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && _jsx("label", { className: "rls-box-field__label", children: children }), _jsx("div", { className: "rls-box-field__component", children: _jsxs("div", { className: "rls-box-field__body", children: [_jsx("input", { className: "rls-date-field__control", type: "text", value: description.current, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (_jsx("div", { className: "rls-box-field__error", children: _jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), _jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
43
54
  if (type !== PickerListenerType.Cancel) {
44
55
  onChange(value, true);
45
56
  }
46
- setShow(false);
47
- if (formControl && !formControl.touched) {
48
- formControl.touch();
57
+ setModalIsVisible(false);
58
+ if (!formControl?.touched) {
59
+ formControl?.touch();
49
60
  }
50
61
  } }) })] }));
51
62
  }
@@ -1 +1 @@
1
- {"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateField/DateField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,iBAAiB,CAAC;AAYzB,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACQ;IACf,MAAM,WAAW,GAAG,WAAW,EAAE,KAAK,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;IAE7D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAmB,WAAW,CAAC,CAAC;IAClE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,YAAY;QACnB,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,SAAS,QAAQ,CAAC,KAAY,EAAE,aAAa,GAAG,KAAK;QACnD,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;QAED,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEhB,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC;IAED,SAAS,OAAO;QACd,IAAI,KAAK,EAAE,CAAC;YACV,QAAQ,CAAC,SAAS,CAAC,CAAC;YAEpB,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxC,WAAW,CAAC,KAAK,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;IACH,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,eAAY,QAAQ,aACjD,eAAK,SAAS,EAAE,iBAAiB,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,CAAC,aAC7D,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EAEvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,QAAQ,GAClB,EAEF,iBACE,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,YAElB,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,GAAI,GAC3C,IACL,GACF,EAEL,WAAW,EAAE,OAAO,IAAI,WAAW,EAAE,KAAK,IAAI,CAC7C,cAAK,SAAS,EAAC,sBAAsB,YACnC,KAAC,cAAc,IAAC,IAAI,EAAC,gBAAgB,EAAC,QAAQ,EAAC,QAAQ,YACpD,WAAW,CAAC,KAAK,CAAC,OAAO,GACX,GACb,CACP,IACG,EAEN,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,YACzC,KAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;wBAC9B,IAAI,IAAI,KAAK,kBAAkB,CAAC,MAAM,EAAE,CAAC;4BACvC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;wBACxB,CAAC;wBAED,OAAO,CAAC,KAAK,CAAC,CAAC;wBAEf,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;4BACxC,WAAW,CAAC,KAAK,EAAE,CAAC;wBACtB,CAAC;oBACH,CAAC,GACD,GACO,IACP,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateField/DateField.tsx"],"names":[],"mappings":"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"}
@@ -2,45 +2,50 @@
2
2
  position: relative;
3
3
  display: flex;
4
4
  flex-direction: column;
5
- overflow: hidden;
6
5
  max-width: 150rem;
6
+ overflow: hidden;
7
+ row-gap: var(--rls-sizing-x4);
7
8
  }
8
9
  .rls-date-picker__header {
9
- background: var(--color-rolster-100);
10
- padding: var(--sizing-x4);
10
+ display: flex;
11
+ flex-direction: column;
12
+ row-gap: var(--rls-sizing-x4);
13
+ padding: var(--rls-sizing-x4);
14
+ box-sizing: border-box;
15
+ background: var(--rls-theme-color-100);
16
+ }
17
+ .rls-date-picker__header .rls-month-title-picker {
18
+ padding: 0rem var(--rls-sizing-x6);
11
19
  box-sizing: border-box;
12
- margin-bottom: var(--sizing-x8);
13
20
  }
14
21
  .rls-date-picker__title {
15
- color: var(--color-theme-500);
22
+ color: var(--rls-app-color-500);
16
23
  text-align: center;
17
24
  cursor: default;
18
- font-weight: var(--font-weight-bold);
25
+ font-weight: var(--rls-font-weight-bold);
19
26
  }
20
27
  .rls-date-picker__title:hover {
21
- color: var(--color-rolster-500);
28
+ color: var(--rls-theme-color-500);
22
29
  }
23
30
  .rls-date-picker__title--description {
24
- height: var(--sizing-x16);
25
- line-height: var(--sizing-x16);
31
+ height: var(--rls-sizing-x16);
32
+ line-height: var(--rls-sizing-x16);
26
33
  font-size: 9.25rem;
27
34
  }
28
35
  .rls-date-picker__title--year {
29
- margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
30
- height: var(--sizing-x16);
31
- line-height: var(--sizing-x16);
32
- font-size: var(--sizing-x12);
33
- color: var(--color-theme-300);
36
+ height: var(--rls-sizing-x16);
37
+ line-height: var(--rls-sizing-x16);
38
+ font-size: var(--rls-sizing-x12);
39
+ color: var(--rls-app-color-300);
34
40
  }
35
41
  .rls-date-picker__component {
36
42
  display: flex;
43
+ justify-content: center;
37
44
  width: 150rem;
38
- padding: 0rem var(--sizing-x2);
45
+ padding: 0rem var(--rls-sizing-x2);
39
46
  box-sizing: border-box;
40
- margin-bottom: var(--sizing-x4);
41
47
  }
42
48
  .rls-date-picker__component > * {
43
- margin: 0rem auto;
44
49
  display: none;
45
50
  }
46
51
  .rls-date-picker__component--day .rls-day-picker {
@@ -52,22 +57,20 @@
52
57
  .rls-date-picker__component--year .rls-year-picker {
53
58
  display: block;
54
59
  }
55
- .rls-date-picker__footer--hidden {
56
- display: none;
57
- }
58
60
  .rls-date-picker__actions {
59
61
  display: flex;
60
62
  flex-wrap: wrap;
61
- gap: var(--sizing-x4);
62
- padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
63
+ gap: var(--rls-sizing-x4);
64
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
65
+ var(--rls-sizing-x8);
63
66
  overflow: hidden;
64
67
  box-sizing: border-box;
65
68
  }
66
69
  .rls-date-picker__actions--cancel {
67
- width: calc(50% - var(--sizing-x2));
70
+ width: calc(50% - var(--rls-sizing-x2));
68
71
  }
69
72
  .rls-date-picker__actions--today {
70
- width: calc(50% - var(--sizing-x2));
73
+ width: calc(50% - var(--rls-sizing-x2));
71
74
  }
72
75
  .rls-date-picker__actions--ok {
73
76
  width: 100%;
@@ -1,5 +1,5 @@
1
+ import { PickerListener } from '@rolster/helpers-components';
1
2
  import { ReactControl } from '@rolster/react-forms';
2
- import { PickerListener } from '../../../types';
3
3
  import { RlsComponent } from '../../definitions';
4
4
  import './DatePicker.css';
5
5
  interface DatePickerProps extends RlsComponent {
@@ -11,5 +11,5 @@ interface DatePickerProps extends RlsComponent {
11
11
  minDate?: Date;
12
12
  onListener?: (listener: PickerListener<Date>) => void;
13
13
  }
14
- export declare function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, rlsTheme, onListener }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function RlsDatePicker({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
15
15
  export {};