sag_components 1.0.630 → 1.0.631

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 (9) hide show
  1. package/dist/stories/components/FilterPanel.js +6 -25
  2. package/dist/stories/components/MonthPicker.js +6 -1
  3. package/dist/stories/components/MonthPicker.style.js +4 -4
  4. package/dist/stories/components/QuarterPicker.js +6 -1
  5. package/dist/stories/components/QuarterPicker.style.js +4 -4
  6. package/dist/stories/components/QuarterPopupPicker.js +5 -1
  7. package/dist/stories/components/RangePicker.js +6 -1
  8. package/dist/stories/components/RangePicker.style.js +4 -4
  9. package/package.json +1 -1
package/dist/stories/components/FilterPanel.js CHANGED
@@ -16,6 +16,7 @@ var _QuarterPicker = _interopRequireDefault(require("./QuarterPicker"));
16
16
  var _MonthPicker = _interopRequireDefault(require("./MonthPicker"));
17
17
  var _Tooltip = _interopRequireDefault(require("./Tooltip"));
18
18
  var _FilterPanel = require("./FilterPanel.style");
19
+ var _sass = require("sass");
19
20
  // eslint-disable-next-line import/no-extraneous-dependencies
20
21
 
21
22
  const FilterPanel = props => {
@@ -373,7 +374,7 @@ const FilterPanel = props => {
373
374
  className: "Dropdown",
374
375
  name: item.name,
375
376
  reset: Reset,
376
- showPopupIcon: true,
377
+ showPopupIcon: false,
377
378
  allowedInput: "all",
378
379
  dropdownListfontSize: "14px",
379
380
  labelColor: borderColor,
@@ -426,20 +427,10 @@ const FilterPanel = props => {
426
427
  }, displayFields(FieldsDataState)), /*#__PURE__*/_react.default.createElement(_FilterPanel.ButtonsContainer, {
427
428
  className: "ButtonsContainer"
428
429
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
429
- type: "primry"
430
- // textColor="#ffffff"
431
- // backgroundColor={okButtonBackgroundColor || '#ffffff'}
432
- // borderColor={borderColor}
433
- // onClickColor="#B1B1B1"
434
- // radius="12px"
435
- ,
436
430
  text: "Go",
431
+ type: "primary",
437
432
  size: "medium",
438
- height: "45px",
439
- width: "74px"
440
- // fontSize="14px"
441
- // fontWeight="500"
442
- ,
433
+ width: "74px",
443
434
  disabled: disableOKButton,
444
435
  onClick: () => onOkClick({
445
436
  eventName: 'onOkClick',
@@ -453,20 +444,10 @@ const FilterPanel = props => {
453
444
  }))
454
445
  })
455
446
  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
456
- type: "secondary"
457
- // textColor="#212121"
458
- // backgroundColor="#ffffff"
459
- // borderColor={borderColor}
460
- // onClickColor="#B1B1B1"
461
- // radius="12px"
462
- ,
463
447
  text: "Reset",
464
448
  size: "medium",
465
- height: "45px",
466
- width: "74px"
467
- // fontSize="14px"
468
- // fontWeight="500"
469
- ,
449
+ type: "secondary",
450
+ width: "74px",
470
451
  disabled: false,
471
452
  onClick: e => onClickResetHandler(e)
472
453
  })));
package/dist/stories/components/MonthPicker.js CHANGED
@@ -62,17 +62,20 @@ const MonthPicker = _ref => {
62
62
  const handleBlur = () => {
63
63
  setIsFocused(false);
64
64
  };
65
- return /*#__PURE__*/_react.default.createElement(_MonthPicker.Container, {
65
+ return /*#__PURE__*/_react.default.createElement(_MonthPicker.MonthPickerContainer, {
66
+ className: "MonthPickerContainer",
66
67
  onClick: handleFocus,
67
68
  width: width,
68
69
  height: height
69
70
  }, /*#__PURE__*/_react.default.createElement(_MonthPicker.StyledLabel, {
71
+ className: "StyledLabel",
70
72
  onClick: handleFocus,
71
73
  isFocused: isFocused,
72
74
  hasValue: value,
73
75
  disabled: disabled,
74
76
  textColor: textColor
75
77
  }, label, required && /*#__PURE__*/_react.default.createElement(_MonthPicker.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_MonthPicker.StyledInput, {
78
+ className: "StyledInput",
76
79
  value: value,
77
80
  onChange: onChangeEvent,
78
81
  onFocus: handleFocus,
@@ -87,9 +90,11 @@ const MonthPicker = _ref => {
87
90
  borderColor: borderColor,
88
91
  textColor: textColor
89
92
  }), /*#__PURE__*/_react.default.createElement(_MonthPicker.CalendarDiv, {
93
+ className: "CalendarDiv",
90
94
  width: width,
91
95
  onClick: toggleDatePicker
92
96
  }, isOpen === true ? /*#__PURE__*/_react.default.createElement(_CalendarInOpen.default, null) : /*#__PURE__*/_react.default.createElement(_Calendar.default, null)), /*#__PURE__*/_react.default.createElement(_MonthPopupPicker.default, {
97
+ className: "MonthPopupPicker",
93
98
  isOpen: isOpen,
94
99
  onChangeDate: onChangeDate,
95
100
  value: value,
package/dist/stories/components/MonthPicker.style.js CHANGED
@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = exports.CalendarDiv = void 0;
7
+ exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.MonthPickerContainer = exports.EyeIcon = exports.ErrorLabel = exports.CalendarDiv = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
11
  /* eslint-disable no-nested-ternary */
12
- const Container = exports.Container = _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');
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: 10px;\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: 10px;\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' : '16px', 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: 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%');
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
@@ -63,17 +63,20 @@ const QuarterPicker = _ref => {
63
63
  const handleBlur = () => {
64
64
  setIsFocused(false);
65
65
  };
66
- return /*#__PURE__*/_react.default.createElement(_QuarterPicker.Container, {
66
+ return /*#__PURE__*/_react.default.createElement(_QuarterPicker.QuarterPickerContainer, {
67
+ className: "QuarterPickerContainer",
67
68
  onClick: handleFocus,
68
69
  width: width,
69
70
  height: height
70
71
  }, /*#__PURE__*/_react.default.createElement(_QuarterPicker.StyledLabel, {
72
+ className: "StyledLabel",
71
73
  onClick: handleFocus,
72
74
  isFocused: isFocused,
73
75
  hasValue: value,
74
76
  disabled: disabled,
75
77
  textColor: textColor
76
78
  }, label, required && /*#__PURE__*/_react.default.createElement(_QuarterPicker.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_QuarterPicker.StyledInput, {
79
+ className: "StyledInput",
77
80
  value: value,
78
81
  onChange: onChangeEvent,
79
82
  onFocus: handleFocus,
@@ -88,9 +91,11 @@ const QuarterPicker = _ref => {
88
91
  borderColor: borderColor,
89
92
  textColor: textColor
90
93
  }), /*#__PURE__*/_react.default.createElement(_QuarterPicker.CalendarDiv, {
94
+ className: "CalendarDiv",
91
95
  width: width,
92
96
  onClick: toggleDatePicker
93
97
  }, isOpen === true ? /*#__PURE__*/_react.default.createElement(_CalendarInOpen.default, null) : /*#__PURE__*/_react.default.createElement(_Calendar.default, null)), /*#__PURE__*/_react.default.createElement(_QuarterPopupPicker.default, {
98
+ className: "QuarterPopupPicker",
94
99
  isOpen: isOpen,
95
100
  onChangeDate: onChangeDate,
96
101
  value: value,
package/dist/stories/components/QuarterPicker.style.js CHANGED
@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = exports.CalendarDiv = void 0;
7
+ exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.QuarterPickerContainer = exports.EyeIcon = exports.ErrorLabel = exports.CalendarDiv = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
11
  /* eslint-disable no-nested-ternary */
12
- const Container = exports.Container = _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');
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: 10px;\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: 10px;\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' : '16px', 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: 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%');
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/QuarterPopupPicker.js CHANGED
@@ -60,7 +60,11 @@ const QuarterPopupPicker = _ref => {
60
60
  const renderDatePicker = () => {
61
61
  const currentDate = currentStartDate || new Date();
62
62
  const dates = ['Q1', 'Q2', 'Q3', 'Q4'];
63
- return /*#__PURE__*/_react.default.createElement(DatePickerPopup, null, /*#__PURE__*/_react.default.createElement(DatePickerHeader, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DatePickerSelect, {
63
+ return /*#__PURE__*/_react.default.createElement(DatePickerPopup, {
64
+ className: "DatePickerPopup"
65
+ }, /*#__PURE__*/_react.default.createElement(DatePickerHeader, {
66
+ className: "DatePickerHeader"
67
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DatePickerSelect, {
64
68
  defaultValue: currentDate.getFullYear(),
65
69
  onChange: e => {
66
70
  const newDate = new Date(currentDate);
package/dist/stories/components/RangePicker.js CHANGED
@@ -65,17 +65,20 @@ const RangePicker = _ref => {
65
65
  const handleBlur = () => {
66
66
  setIsFocused(false);
67
67
  };
68
- return /*#__PURE__*/_react.default.createElement(_RangePicker.Container, {
68
+ return /*#__PURE__*/_react.default.createElement(_RangePicker.RangePickerContainer, {
69
+ className: "RangePickerContainer",
69
70
  onClick: handleFocus,
70
71
  width: width,
71
72
  height: height
72
73
  }, /*#__PURE__*/_react.default.createElement(_RangePicker.StyledLabel, {
74
+ className: "StyledLabel",
73
75
  onClick: handleFocus,
74
76
  isFocused: isFocused,
75
77
  hasValue: value,
76
78
  disabled: disabled,
77
79
  textColor: textColor
78
80
  }, label, required && /*#__PURE__*/_react.default.createElement(_RangePicker.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_RangePicker.StyledInput, {
81
+ className: "StyledInput",
79
82
  value: value,
80
83
  onChange: onChangeEvent,
81
84
  onFocus: handleFocus,
@@ -88,8 +91,10 @@ const RangePicker = _ref => {
88
91
  borderColor: borderColor,
89
92
  textColor: textColor
90
93
  }), /*#__PURE__*/_react.default.createElement(_RangePicker.CalendarDiv, {
94
+ className: "CalendarDiv",
91
95
  onClick: toggleDatePicker
92
96
  }, isOpen === true ? /*#__PURE__*/_react.default.createElement(_CalendarInOpen.default, null) : /*#__PURE__*/_react.default.createElement(_Calendar.default, null)), /*#__PURE__*/_react.default.createElement(_RangeDatePicker.default, {
97
+ className: "DatePicker",
93
98
  isOpen: isOpen,
94
99
  onChangeDate: onChangeDate,
95
100
  value: value,
package/dist/stories/components/RangePicker.style.js CHANGED
@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = exports.CalendarDiv = void 0;
7
+ exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.RangePickerContainer = exports.EyeIcon = exports.ErrorLabel = exports.CalendarDiv = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
11
  /* eslint-disable no-nested-ternary */
12
- const Container = exports.Container = _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');
12
+ const RangePickerContainer = exports.RangePickerContainer = _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: 15px;\n"])), props => parseInt(props.height, 10) / 2 || '20px');
14
- const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 10px;\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.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: 10px;\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' : '16px', 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: 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.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%');
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.630",
3
+ "version": "1.0.631",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {