sag_components 1.0.634 → 1.0.636

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 (6) hide show
  1. package/dist/stories/components/FilterPanel.js +8 -5
  2. package/dist/stories/components/MonthPicker.js +24 -5
  3. package/dist/stories/components/MonthPicker.style.js +2 -2
  4. package/dist/stories/components/QuarterPicker.js +23 -4
  5. package/dist/stories/components/QuarterPicker.style.js +2 -2
  6. package/package.json +1 -1
package/dist/stories/components/FilterPanel.js CHANGED
@@ -125,8 +125,9 @@ const FilterPanel = props => {
125
125
  content = /*#__PURE__*/_react.default.createElement(_MonthPicker.default, {
126
126
  availableMonths: availableMonths,
127
127
  name: ''.concat(item.name, '_Month'),
128
- borderColor: "#a9a9a9",
129
- borderColorFoucs: borderColor,
128
+ borderColor: "#E7E7E7",
129
+ borderColorFocus: borderColor,
130
+ textColor: "#212121",
130
131
  borderRadius: "12px",
131
132
  label: "Month",
132
133
  required: item.required,
@@ -158,8 +159,9 @@ const FilterPanel = props => {
158
159
  availableQuarters: availableQuarters,
159
160
  className: "QuarterPicker",
160
161
  name: ''.concat(item.name, '_Quarter'),
161
- borderColor: "#a9a9a9",
162
- borderColorFoucs: borderColor,
162
+ borderColor: "#E7E7E7",
163
+ borderColorFocus: borderColor,
164
+ textColor: "#212121",
163
165
  borderRadius: "12px",
164
166
  label: "Quarter",
165
167
  required: item.required,
@@ -224,6 +226,7 @@ const FilterPanel = props => {
224
226
  });
225
227
  },
226
228
  options: getYearsArray(),
229
+ defaultValue: item.defaultValueYears || undefined,
227
230
  width: "100%",
228
231
  height: "55px"
229
232
  });
@@ -468,7 +471,7 @@ FilterPanel.defaultProps = {
468
471
  width: '800px',
469
472
  height: '600px',
470
473
  okButtonBackgroundColor: '#229E38',
471
- borderColor: '#066768',
474
+ borderColor: '#757575',
472
475
  onOkClick: () => {},
473
476
  onResetClick: () => {},
474
477
  onItemValueChanged: () => {},
package/dist/stories/components/MonthPicker.js CHANGED
@@ -29,13 +29,29 @@ const MonthPicker = _ref => {
29
29
  placeholder,
30
30
  disabled,
31
31
  borderColor,
32
- borderColorFoucs,
32
+ borderColorFocus,
33
33
  textColor
34
34
  } = _ref;
35
35
  const [isFocused, setIsFocused] = (0, _react.useState)(false);
36
36
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
37
37
  const [value, setValue] = (0, _react.useState)('');
38
38
  const [startDateValue, setStartDateValue] = (0, _react.useState)(null);
39
+ const inputRef = (0, _react.useRef)(null);
40
+ (0, _react.useEffect)(() => {
41
+ const handleClickOutside = event => {
42
+ if (inputRef.current && !inputRef.current.contains(event.target)) {
43
+ setIsFocused(false);
44
+ }
45
+ };
46
+
47
+ // Add event listener for clicks on the document
48
+ document.addEventListener('mousedown', handleClickOutside);
49
+
50
+ // Cleanup event listener on component unmount
51
+ return () => {
52
+ document.removeEventListener('mousedown', handleClickOutside);
53
+ };
54
+ }, []);
39
55
  const onChangeDate = startDate => {
40
56
  if (startDate) {
41
57
  setIsOpen(!isOpen);
@@ -73,15 +89,18 @@ const MonthPicker = _ref => {
73
89
  isFocused: isFocused,
74
90
  hasValue: value,
75
91
  disabled: disabled,
76
- textColor: textColor
92
+ textColor: textColor,
93
+ borderColor: borderColor,
94
+ borderColorFocus: borderColorFocus
77
95
  }, label, required && /*#__PURE__*/_react.default.createElement(_MonthPicker.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_MonthPicker.StyledInput, {
78
96
  className: "StyledInput",
97
+ ref: inputRef,
79
98
  value: value,
80
99
  onChange: onChangeEvent,
81
100
  onFocus: handleFocus,
82
101
  onBlur: handleBlur,
83
102
  isFocused: isFocused,
84
- borderColorFoucs: borderColorFoucs,
103
+ borderColorFocus: borderColorFocus,
85
104
  borderRadius: borderRadius,
86
105
  width: width,
87
106
  height: height,
@@ -111,8 +130,8 @@ MonthPicker.defaultProps = {
111
130
  placeholder: 'Enter here..',
112
131
  borderColor: '#000000',
113
132
  // Default borderColor prop value
114
- borderColorFoucs: '#000000',
115
- // Default borderColorFoucs prop value
133
+ borderColorFocus: '#000000',
134
+ // Default borderColorFocus prop value
116
135
  textColor: '#000000' // Default textColor prop value
117
136
  };
118
137
  var _default = exports.default = MonthPicker;
package/dist/stories/components/MonthPicker.style.js CHANGED
@@ -11,8 +11,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  /* eslint-disable no-nested-ternary */
12
12
  const MonthPickerContainer = exports.MonthPickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin-bottom: 20px;\n width: ", ";\n height: ", ";\n"])), props => props.width || '100%', props => props.height || '60px');
13
13
  const CalendarDiv = exports.CalendarDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 11px;\n top: ", ";\n right: 25px;\n"])), props => parseInt(props.height, 10) / 2 || '20px');
14
- const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n font-size: 14px;\n border: 1px solid\n ", ";\n border-radius: ", ";\n outline: none;\n width: ", ";\n height: ", ";\n transition: border-color 0.3s ease;\n color: var(--General-Grey, #B1B1B1);\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n color: ", ";\n cursor: ", ";\n\n &:focus {\n border-color: ", ";\n }\n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.isFocused ? props.borderColorFoucs : props.borderColor || '#bdbdbd', props => props.borderRadius || '4px', props => props.width || '90%', props => props.height || '60px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
15
- const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 20px;\n width: ", ";\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: 15px;\n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease;\n display: flex;\n font-family: Poppins;\n font-weight: 400;\n align-items: center;\n box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '12px' : '14px', props => props.isFocused || props.hasValue ? 'auto' : '150px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
14
+ const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n font-size: 14px;\n border:\n ", ";\n border-radius: ", ";\n outline: none;\n width: ", ";\n height: ", ";\n transition: border-color 0.3s ease;\n color: var(--General-Grey, #B1B1B1);\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n color: ", ";\n cursor: ", ";\n\n &:focus {\n border-color: ", ";\n }\n"])), props => props.disabled ? '1px solid \'#bdbdbd\'' : props.error ? '1px solid \'#red\'' : props.isFocused ? "2px solid ".concat(props.borderColorFocus) : "1px solid ".concat(props.borderColor) || '1px solid \'#bdbdbd\'', props => props.borderRadius || '4px', props => props.width || '90%', props => props.height || '60px', props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
15
+ const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 20px;\n width: ", ";\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: 15px;\n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease;\n display: flex;\n font-family: Poppins;\n font-weight: 400;\n align-items: center;\n box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.isFocused || props.hasValue ? 'auto' : '150px', props => props.disabled ? '#888' : (props.isFocused || props.hasValue ? props.borderColorFocus : '#757575') || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
16
16
  const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: red;\n margin-left: 5px;\n"])));
17
17
  const EyeIcon = exports.EyeIcon = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 50%;\n right: 10px;\n transform: translateY(-50%);\n cursor: pointer;\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"])), props => props.textColor || '#888', props => props.textColor || '#333');
18
18
  const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n color: red;\n margin-top: 5px;\n"])));
package/dist/stories/components/QuarterPicker.js CHANGED
@@ -30,13 +30,29 @@ const QuarterPicker = _ref => {
30
30
  placeholder,
31
31
  disabled,
32
32
  borderColor,
33
- borderColorFoucs,
33
+ borderColorFocus,
34
34
  textColor
35
35
  } = _ref;
36
36
  const [isFocused, setIsFocused] = (0, _react.useState)(false);
37
37
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
38
38
  const [value, setValue] = (0, _react.useState)('');
39
39
  const [startDateValue, setStartDateValue] = (0, _react.useState)(null);
40
+ const inputRef = (0, _react.useRef)(null);
41
+ (0, _react.useEffect)(() => {
42
+ const handleClickOutside = event => {
43
+ if (inputRef.current && !inputRef.current.contains(event.target)) {
44
+ setIsFocused(false);
45
+ }
46
+ };
47
+
48
+ // Add event listener for clicks on the document
49
+ document.addEventListener('mousedown', handleClickOutside);
50
+
51
+ // Cleanup event listener on component unmount
52
+ return () => {
53
+ document.removeEventListener('mousedown', handleClickOutside);
54
+ };
55
+ }, []);
40
56
  const onChangeDate = startDate => {
41
57
  if (startDate) {
42
58
  setIsOpen(!isOpen);
@@ -74,15 +90,18 @@ const QuarterPicker = _ref => {
74
90
  isFocused: isFocused,
75
91
  hasValue: value,
76
92
  disabled: disabled,
77
- textColor: textColor
93
+ textColor: textColor,
94
+ borderColor: borderColor,
95
+ borderColorFocus: borderColorFocus
78
96
  }, label, required && /*#__PURE__*/_react.default.createElement(_QuarterPicker.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_QuarterPicker.StyledInput, {
79
97
  className: "StyledInput",
98
+ ref: inputRef,
80
99
  value: value,
81
100
  onChange: onChangeEvent,
82
101
  onFocus: handleFocus,
83
102
  onBlur: handleBlur,
84
103
  isFocused: isFocused,
85
- borderColorFoucs: borderColorFoucs,
104
+ borderColorFocus: borderColorFocus,
86
105
  borderRadius: borderRadius,
87
106
  width: width,
88
107
  height: height,
@@ -111,7 +130,7 @@ QuarterPicker.defaultProps = {
111
130
  disabled: false,
112
131
  placeholder: 'Enter here..',
113
132
  borderColor: '#000000',
114
- borderColorFoucs: '#000000',
133
+ borderColorFocus: '#000000',
115
134
  textColor: '#000000'
116
135
  };
117
136
  var _default = exports.default = QuarterPicker;
package/dist/stories/components/QuarterPicker.style.js CHANGED
@@ -11,8 +11,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  /* eslint-disable no-nested-ternary */
12
12
  const QuarterPickerContainer = exports.QuarterPickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin-bottom: 20px;\n width: ", ";\n height: ", ";\n"])), props => props.width || '100%', props => props.height || '60px');
13
13
  const CalendarDiv = exports.CalendarDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: 11px;\n height: 11px;\n top: ", ";\n right: 25px;\n"])), props => parseInt(props.height, 10) / 2 || '20px');
14
- const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n font-size: 14px;\n border: 1px solid\n ", ";\n border-radius: ", ";\n outline: none;\n width: ", ";\n height: ", ";\n transition: border-color 0.3s ease;\n color: var(--General-Grey, #B1B1B1);\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n color: ", ";\n cursor: ", ";\n\n &:focus {\n border-color: ", ";\n }\n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.isFocused ? props.borderColorFoucs : props.borderColor || '#bdbdbd', props => props.borderRadius || '4px', props => props.width || '90%', props => props.height || '60px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
15
- const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 20px;\n width: ", ";\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: 15px;\n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease;\n display: flex;\n font-family: Poppins;\n font-weight: 400;\n align-items: center;\n box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '12px' : '14px', props => props.isFocused || props.hasValue ? 'auto' : '150px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
14
+ const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 20px;\n font-size: 14px;\n border:\n ", ";\n border-radius: ", ";\n outline: none;\n width: ", ";\n height: ", ";\n transition: border-color 0.3s ease; \n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n box-sizing: border-box;\n color: ", ";\n cursor: ", ";\n\n &:focus {\n border-color: ", ";\n }\n"])), props => props.disabled ? '1px solid \'#bdbdbd\'' : props.error ? '1px solid \'#red\'' : props.isFocused ? "2px solid ".concat(props.borderColorFocus) : "1px solid ".concat(props.borderColor) || '1px solid \'#bdbdbd\'', props => props.borderRadius || '4px', props => props.width || '90%', props => props.height || '60px', props => props.disabled ? '#888' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
15
+ const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 20px;\n width: ", ";\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: 15px;\n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease;\n display: flex;\n font-family: Poppins;\n font-weight: 400;\n align-items: center;\n box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.isFocused || props.hasValue ? 'auto' : '150px', props => props.disabled ? '#888' : (props.isFocused || props.hasValue ? props.borderColorFocus : '#757575') || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
16
16
  const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: red;\n margin-left: 5px;\n"])));
17
17
  const EyeIcon = exports.EyeIcon = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 50%;\n right: 10px;\n transform: translateY(-50%);\n cursor: pointer;\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n"])), props => props.textColor || '#888', props => props.textColor || '#333');
18
18
  const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n color: red;\n margin-top: 5px;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.634",
3
+ "version": "1.0.636",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {