sag_components 1.0.649 → 1.0.652

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 (11) hide show
  1. package/dist/stories/components/BarChart.js +220 -0
  2. package/dist/stories/components/BarChart.style.js +19 -0
  3. package/dist/stories/components/DropdownMultiNew.style.js +1 -1
  4. package/dist/stories/components/DropdownSingleNew.style.js +1 -1
  5. package/dist/stories/components/Input.js +117 -45
  6. package/dist/stories/components/Input.style.js +9 -8
  7. package/dist/stories/components/InputOld.js +93 -0
  8. package/dist/stories/components/InputOld.style.js +17 -0
  9. package/dist/stories/utils/IconsHandler.js +130 -0
  10. package/dist/stories/utils/IconsHandler.style.js +12 -0
  11. package/package.json +1 -1
package/dist/stories/components/BarChart.js ADDED
@@ -0,0 +1,220 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.BarChart = void 0;
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _recharts = require("recharts");
11
+ var _CommonFunctions = require("./CommonFunctions");
12
+ var _BarChart = require("./BarChart.style");
13
+ var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
14
+ /* eslint-disable react/prop-types */
15
+ /* eslint-disable no-shadow */
16
+ /* eslint-disable react/no-unstable-nested-components */
17
+ /* eslint-disable no-nested-ternary */
18
+
19
+ const ICON_TYPE_SQUARE = 'Square';
20
+ /* BarChartsByWeeks */
21
+ const BarChart = props => {
22
+ const {
23
+ title,
24
+ barChartData,
25
+ barSize,
26
+ isDollar,
27
+ width,
28
+ height,
29
+ barChartColor,
30
+ showLegend,
31
+ legendData
32
+ } = props;
33
+ const [BarChartContainerWidth, setBarChartContainerWidth] = (0, _react.useState)(0);
34
+ const [BarChartContainerHeight, setBarChartContainerHeight] = (0, _react.useState)(0);
35
+ const controlsContainerRef = (0, _react.useRef)();
36
+ (0, _react.useEffect)(() => {
37
+ const {
38
+ offsetWidth
39
+ } = controlsContainerRef.current;
40
+ setBarChartContainerWidth(offsetWidth - 20);
41
+ }, [width]);
42
+ (0, _react.useEffect)(() => {
43
+ const {
44
+ offsetHeight
45
+ } = controlsContainerRef.current;
46
+ setBarChartContainerHeight(offsetHeight - 40);
47
+ }, [height]);
48
+ const displayFormattedValue = value => {
49
+ if (!value) return '';
50
+ let formattedValue = '';
51
+ formattedValue = !isDollar ? ''.concat('', value.toFixed(1), '%') : ''.concat('$', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
52
+ return formattedValue;
53
+ };
54
+
55
+ // eslint-disable-next-line react/no-unstable-nested-components
56
+ const CustomTooltip = tooltipData => {
57
+ var _payload$0$payload, _payload$0$payload2;
58
+ const {
59
+ active,
60
+ payload,
61
+ label
62
+ } = tooltipData;
63
+ if (!active || !payload || (payload === null || payload === void 0 ? void 0 : payload.length) === 0) return null;
64
+ let currentTooltipValue = 0;
65
+ if ((_payload$0$payload = payload[0].payload) !== null && _payload$0$payload !== void 0 && _payload$0$payload.value) currentTooltipValue = (_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.value;
66
+ return /*#__PURE__*/_react.default.createElement(_BarChart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChart.TooltipTitle, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_BarChart.TooltipLabel, null, "".concat(displayFormattedValue(currentTooltipValue))));
67
+ };
68
+ const CustomizedTickBarChart = props => {
69
+ const {
70
+ x,
71
+ y,
72
+ stroke,
73
+ payload
74
+ } = props;
75
+
76
+ // const handleMouseEnter = (content) => {
77
+ // setTooltipCouponText((prevState) => ({
78
+ // ...prevState,
79
+ // content: content !== prevState.content ? content : prevState.content,
80
+ // clientX: x,
81
+ // clientY: y,
82
+ // }));
83
+ // setShowLegendTooltip(true);
84
+ // };
85
+
86
+ // const handleMouseLeave = () => {
87
+ // setShowLegendTooltip(false);
88
+ // };
89
+
90
+ if (barChartData && barChartData.length > 0 && payload) {
91
+ const retailerData = barChartData.filter(item => item.title === payload.value);
92
+ if (retailerData && retailerData.length > 0) {
93
+ const {
94
+ offerType
95
+ } = retailerData[0];
96
+ return /*#__PURE__*/_react.default.createElement("g", {
97
+ transform: "translate(".concat(x, ",").concat(y, ")")
98
+ // onMouseEnter={() => handleMouseEnter(offerType)}
99
+ // onMouseLeave={handleMouseLeave}
100
+ }, /*#__PURE__*/_react.default.createElement("text", {
101
+ x: 0,
102
+ y: 0,
103
+ dy: 16,
104
+ fill: "#212121"
105
+ }, /*#__PURE__*/_react.default.createElement(_BarChart.LabelBoldText, {
106
+ textAnchor: "middle",
107
+ x: "0",
108
+ dy: "50",
109
+ fontSize: 16,
110
+ fontWeight: 600
111
+ }, payload.value), /*#__PURE__*/_react.default.createElement(_BarChart.LabelText, {
112
+ textAnchor: "middle",
113
+ x: "0",
114
+ dy: "30",
115
+ fontSize: 14,
116
+ fontWeight: 400
117
+ }, retailerData[0].period)));
118
+ }
119
+ return null;
120
+ }
121
+ return null;
122
+ };
123
+ const CustomizedLabel = props => {
124
+ const {
125
+ x,
126
+ y,
127
+ stroke,
128
+ value
129
+ } = props;
130
+ return /*#__PURE__*/_react.default.createElement("text", {
131
+ x: x,
132
+ y: y,
133
+ dy: -8,
134
+ fill: stroke,
135
+ fontSize: 14
136
+ }, displayFormattedValue(value));
137
+ };
138
+ return /*#__PURE__*/_react.default.createElement(_BarChart.ControlsContainer, {
139
+ id: "ControlsContainer",
140
+ height: height,
141
+ width: width,
142
+ ref: controlsContainerRef
143
+ }, /*#__PURE__*/_react.default.createElement(_BarChart.Controls, {
144
+ id: "Controls"
145
+ }, /*#__PURE__*/_react.default.createElement(_BarChart.TitleAndValueContainer, {
146
+ id: "TitleAndValueContainer"
147
+ }, /*#__PURE__*/_react.default.createElement(_BarChart.Title, {
148
+ id: "Title"
149
+ }, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
150
+ id: "ResponsiveContainer",
151
+ width: "100%",
152
+ height: showLegend ? '80%' : '86%'
153
+ }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
154
+ width: BarChartContainerWidth,
155
+ height: BarChartContainerHeight,
156
+ data: barChartData,
157
+ margin: {
158
+ top: 20,
159
+ right: 0,
160
+ bottom: -25,
161
+ left: -5
162
+ }
163
+ }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
164
+ dataKey: "title",
165
+ tick: CustomizedTickBarChart,
166
+ tickLine: false,
167
+ height: 120,
168
+ stroke: "#D0D0D0"
169
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
170
+ content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
171
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
172
+ dataKey: "value",
173
+ fill: barChartColor,
174
+ minPointSize: 5,
175
+ barSize: barSize !== null && barSize !== void 0 ? barSize : 60,
176
+ radius: [5, 5, 0, 0]
177
+ }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
178
+ dataKey: "value",
179
+ content: CustomizedLabel
180
+ })))), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
181
+ legendData: legendData
182
+ })));
183
+ };
184
+ exports.BarChart = BarChart;
185
+ var _default = exports.default = BarChart;
186
+ BarChart.defaultProps = {
187
+ title: 'String',
188
+ barChartData: [{
189
+ title: 'Food Lion',
190
+ date: '15.01.24-31.01.24',
191
+ value: 542366
192
+ }, {
193
+ title: 'Hannaford',
194
+ date: '15.01.24-31.01.24',
195
+ value: 699511
196
+ }, {
197
+ title: 'The Giant Company',
198
+ date: '15.01.24-31.01.24',
199
+ value: 403092
200
+ }, {
201
+ title: 'Giant Food',
202
+ date: '15.01.24-31.01.24',
203
+ value: 396184
204
+ }, {
205
+ title: 'Stop&Shop',
206
+ date: '15.01.24-31.01.24',
207
+ value: 415317
208
+ }],
209
+ width: '100%',
210
+ height: '100%',
211
+ barSize: 60,
212
+ barChartColor: '#BD9EFF',
213
+ isDollar: true,
214
+ showLegend: true,
215
+ legendData: [{
216
+ title: 'Incremental Sales',
217
+ iconType: ICON_TYPE_SQUARE,
218
+ iconColor: '#BD9EFF'
219
+ }]
220
+ };
package/dist/stories/components/BarChart.style.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
11
+ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n min-width: 250px;\n"])), props => props.width, props => props.height);
12
+ const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n background: #ffffff;\n"])));
13
+ const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
14
+ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
15
+ const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
16
+ const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
17
+ const Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n\n"])));
18
+ const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
19
+ const LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 10px;\n }\n @media (max-width: 1366px) {\n font-size: 8px;\n }\n"])));
package/dist/stories/components/DropdownMultiNew.style.js CHANGED
@@ -11,7 +11,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  /* eslint-disable no-nested-ternary */
12
12
  const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:focus {\n border-radius: 12px 12px 0 0 ;\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '27px', props => props.isFocused || props.hasValue ? '23px' : '10px');
14
- const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: ", " solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 2px solid ", ";\n }\n\n &:focus { \n border: 2px solid ", "; \n }\n \n"])), props => props.isFocused ? '2px' : '1px', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor, props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
14
+ const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n // border: ", " solid ", ";\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.isFocused ? '2px' : '1px', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor, props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
15
15
  const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
16
16
  const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 20px);\n height: 25px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none; \n"])), props => props.disabled ? '#888' : '#212121');
17
17
  const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n"])), props => {
package/dist/stories/components/DropdownSingleNew.style.js CHANGED
@@ -11,7 +11,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  /* eslint-disable no-nested-ternary */
12
12
  const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:focus {\n border-radius: 12px 12px 0 0 ;\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px');
14
- const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: ", " solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 2px solid ", ";\n }\n\n &:focus { \n border: 2px solid ", "; \n }\n \n"])), props => props.isFocused ? '2px' : '1px', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor, props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
14
+ const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
15
15
  const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
16
16
  const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 10px);\n height: 20px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none;\n"])), props => props.disabled ? '#888' : '#212121');
17
17
  const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n"])), props => {
package/dist/stories/components/Input.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _fa = require("react-icons/fa");
10
+ var _IconsHandler = require("../utils/IconsHandler");
10
11
  var _Input = require("./Input.style");
11
12
  /* eslint-disable import/no-extraneous-dependencies */
12
13
  /* eslint-disable react/require-default-props */
@@ -16,78 +17,149 @@ var _Input = require("./Input.style");
16
17
  const Input = _ref => {
17
18
  let {
18
19
  label,
19
- value,
20
+ labelEmptyValue,
21
+ size,
22
+ selectedValue,
23
+ placeHolder,
20
24
  onChange,
21
- borderRadius,
22
25
  required,
23
- width,
24
- height,
25
- placeholder,
26
26
  disabled,
27
- password,
28
- defaultValue,
27
+ width,
29
28
  error,
30
29
  errorMessage,
31
- type,
32
- borderColor,
33
- // Added borderColor prop
34
- textColor // Added textColor prop
30
+ labelColor,
31
+ leftIcon,
32
+ rightIcon,
33
+ password,
34
+ ...props
35
35
  } = _ref;
36
36
  const [isFocused, setIsFocused] = (0, _react.useState)(false);
37
+ const [inputValue, setInputValue] = (0, _react.useState)('');
37
38
  const [showPassword, setShowPassword] = (0, _react.useState)(false);
39
+ const inputRef = (0, _react.useRef)(null);
40
+ const containerRef = (0, _react.useRef)(null);
41
+ (0, _react.useEffect)(() => {
42
+ setInputValue(selectedValue);
43
+ }, [selectedValue]);
44
+ const handleLabelClick = () => {
45
+ if (disabled) return;
46
+ setIsFocused(true);
47
+ if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
48
+ var _inputRef$current;
49
+ inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
50
+ }
51
+ };
52
+ const handleInputChange = e => {
53
+ setIsFocused(true);
54
+ setInputValue(e.target.value);
55
+ if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
56
+ var _inputRef$current2;
57
+ inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
58
+ }
59
+ onChange({
60
+ newValue: e.target.value || ''
61
+ });
62
+ };
38
63
  const handleFocus = () => {
39
64
  setIsFocused(true);
65
+ if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
66
+ var _inputRef$current3;
67
+ inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
68
+ }
40
69
  };
41
70
  const handleBlur = () => {
42
71
  setIsFocused(false);
43
72
  };
73
+ const getLeftIcon = () => {
74
+ if (!leftIcon || leftIcon === 'none') return '';
75
+ return (0, _IconsHandler.getIcon)(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer');
76
+ };
77
+ const getRightIcon = () => {
78
+ if (!rightIcon || rightIcon === 'none') return '';
79
+ return (0, _IconsHandler.getIcon)(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer');
80
+ };
44
81
  const toggleShowPassword = () => {
45
82
  setShowPassword(!showPassword);
46
83
  };
47
- return /*#__PURE__*/_react.default.createElement(_Input.Container, {
48
- onClick: handleFocus,
49
- width: width,
50
- height: height
51
- }, /*#__PURE__*/_react.default.createElement(_Input.StyledLabel, {
52
- onClick: handleFocus,
84
+ const getPasswordIcon = () => {
85
+ if (!password) return '';
86
+ if (showPassword) {
87
+ return /*#__PURE__*/_react.default.createElement(_Input.IconWrapper, {
88
+ className: "passwordEyeSlash",
89
+ pointer: "cursor",
90
+ onClick: toggleShowPassword
91
+ }, /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, {
92
+ onClick: toggleShowPassword,
93
+ color: error ? 'red' : labelColor
94
+ }));
95
+ }
96
+ return (0, _IconsHandler.getIcon)('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
97
+ };
98
+ return /*#__PURE__*/_react.default.createElement(_Input.MainContainer, {
99
+ className: "MainContainer",
100
+ width: width
101
+ }, /*#__PURE__*/_react.default.createElement(_Input.InputContainer, {
102
+ className: "InputContainer",
103
+ labelColor: labelColor,
104
+ disabled: disabled,
105
+ error: error,
106
+ isFocused: isFocused
107
+ }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_Input.InputSubContainer, {
108
+ className: "InputSubContainer",
109
+ ref: containerRef,
110
+ labelColor: labelColor,
111
+ disabled: disabled,
112
+ error: error,
113
+ onClick: handleLabelClick,
114
+ size: size
115
+ }, /*#__PURE__*/_react.default.createElement(_Input.Label, {
116
+ className: "Label",
53
117
  isFocused: isFocused,
54
- hasValue: value || defaultValue,
118
+ labelColor: labelColor,
119
+ hasValue: inputValue,
120
+ leftIcon: leftIcon,
55
121
  disabled: disabled,
56
- textColor: textColor
57
- }, label, required && /*#__PURE__*/_react.default.createElement(_Input.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
58
- type: password && !showPassword ? 'password' : type,
59
- value: value,
60
- onChange: onChange,
122
+ error: error,
123
+ errorMessage: errorMessage,
124
+ onClick: handleLabelClick,
125
+ size: size
126
+ }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/_react.default.createElement("span", {
127
+ style: {
128
+ color: disabled ? '#D0D0D0' : 'red',
129
+ height: '16px'
130
+ }
131
+ }, "*")), /*#__PURE__*/_react.default.createElement(_Input.StyledInput, Object.assign({}, props, {
132
+ className: "StyledInput",
133
+ ref: inputRef,
134
+ type: password && !showPassword ? 'password' : 'text',
135
+ value: inputValue,
136
+ onChange: handleInputChange,
137
+ onClick: handleLabelClick,
61
138
  onFocus: handleFocus,
62
139
  onBlur: handleBlur,
63
- borderRadius: borderRadius,
64
- width: width,
65
- height: height,
66
- placeholder: isFocused ? placeholder : '',
67
140
  disabled: disabled,
68
- defaultValue: defaultValue,
141
+ placeholder: isFocused ? placeHolder : '',
69
142
  error: error,
70
- borderColor: borderColor,
71
- textColor: textColor
72
- }), error && /*#__PURE__*/_react.default.createElement(_Input.ErrorLabel, null, errorMessage), password && /*#__PURE__*/_react.default.createElement(_Input.EyeIcon, {
73
- onClick: toggleShowPassword,
74
- textColor: textColor
75
- }, showPassword ? /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, null) : /*#__PURE__*/_react.default.createElement(_fa.FaEye, null)));
143
+ isFocused: isFocused
144
+ }))), password ? getPasswordIcon() : getRightIcon()), error && (errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.length) > 0 && /*#__PURE__*/_react.default.createElement(_Input.ErrorMessage, {
145
+ className: "ErrorMessage",
146
+ width: width
147
+ }, errorMessage));
76
148
  };
77
- // Adding defaultProps
78
149
  Input.defaultProps = {
150
+ placeHolder: 'Type...',
151
+ label: '',
152
+ labelEmptyValue: '',
153
+ size: 'medium',
154
+ labelColor: '#066768',
79
155
  required: true,
80
- width: '200%',
81
- height: '50px',
156
+ width: '300px',
82
157
  disabled: false,
83
- password: false,
84
- defaultValue: '',
85
- placeholder: 'Enter here..',
86
158
  error: false,
87
- errorMessage: 'Input is invalid',
88
- type: 'text',
89
- borderColor: '#000000',
90
- // Default borderColor prop value
91
- textColor: '#000000' // Default textColor prop value
159
+ errorMessage: '',
160
+ selectedValue: '',
161
+ leftIcon: 'none',
162
+ rightIcon: 'none',
163
+ password: false
92
164
  };
93
165
  var _default = exports.default = Input;
package/dist/stories/components/Input.style.js CHANGED
@@ -4,14 +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 = void 0;
7
+ exports.StyledInput = exports.MainContainer = exports.Label = exports.InputSubContainer = exports.InputContainer = exports.IconWrapper = exports.ErrorMessage = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
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 || '40px');
13
- const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 10px;\n font-size: 16px;\n border: 2px solid\n ", ";\n border-radius: ", ";\n outline: none;\n width: ", ";\n height: ", ";\n transition: border-color 0.3s ease;\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 || '100%', props => props.height || '40px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
14
- const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\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 align-items: center;\n box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '12px' : '16px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
15
- const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: red;\n margin-left: 5px;\n"])));
16
- const EyeIcon = exports.EyeIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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');
17
- const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n color: red;\n margin-top: 5px;\n"])));
12
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n padding: 0;\n"])), props => props.width || '300px');
13
+ const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n max-height: 16px;\n gap: 4px;\n &:focus {\n border-radius: 12px 12px 0 0 ;\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px', props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px');
14
+ const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 16px;\n gap: 14px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#D0D0D0' : '#212121', props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121');
15
+ const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 5px 0;\n width: 100%;\n height: 100%;\n min-height: ", ";\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.size === 'medium' ? '52px' : '32px', props => props.disabled ? '#D0D0D0' : '#212121');
16
+ const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 10px);\n height: 20px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n background-color: #fff; \n border: none;\n"])), props => props.disabled ? '#D0D0D0' : '#212121');
17
+ const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n color: red;\n margin-top: 5px;\n max-width: ", ";\n"])), props => props.width || '300px');
18
+ const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center; \n padding: 2px; \n &:hover{\n cursor: pointer;\n }\n"])));
package/dist/stories/components/InputOld.js ADDED
@@ -0,0 +1,93 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _fa = require("react-icons/fa");
10
+ var _InputOld = require("./InputOld.style");
11
+ /* eslint-disable import/no-extraneous-dependencies */
12
+ /* eslint-disable react/require-default-props */
13
+ /* eslint-disable no-nested-ternary */
14
+ // CustomInput.js
15
+
16
+ const InputOld = _ref => {
17
+ let {
18
+ label,
19
+ value,
20
+ onChange,
21
+ borderRadius,
22
+ required,
23
+ width,
24
+ height,
25
+ placeholder,
26
+ disabled,
27
+ password,
28
+ defaultValue,
29
+ error,
30
+ errorMessage,
31
+ type,
32
+ borderColor,
33
+ // Added borderColor prop
34
+ textColor // Added textColor prop
35
+ } = _ref;
36
+ const [isFocused, setIsFocused] = (0, _react.useState)(false);
37
+ const [showPassword, setShowPassword] = (0, _react.useState)(false);
38
+ const handleFocus = () => {
39
+ setIsFocused(true);
40
+ };
41
+ const handleBlur = () => {
42
+ setIsFocused(false);
43
+ };
44
+ const toggleShowPassword = () => {
45
+ setShowPassword(!showPassword);
46
+ };
47
+ return /*#__PURE__*/_react.default.createElement(_InputOld.Container, {
48
+ onClick: handleFocus,
49
+ width: width,
50
+ height: height
51
+ }, /*#__PURE__*/_react.default.createElement(_InputOld.StyledLabel, {
52
+ onClick: handleFocus,
53
+ isFocused: isFocused,
54
+ hasValue: value || defaultValue,
55
+ disabled: disabled,
56
+ textColor: textColor
57
+ }, label, required && /*#__PURE__*/_react.default.createElement(_InputOld.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_InputOld.StyledInput, {
58
+ type: password && !showPassword ? 'password' : type,
59
+ value: value,
60
+ onChange: onChange,
61
+ onFocus: handleFocus,
62
+ onBlur: handleBlur,
63
+ borderRadius: borderRadius,
64
+ width: width,
65
+ height: height,
66
+ placeholder: isFocused ? placeholder : '',
67
+ disabled: disabled,
68
+ defaultValue: defaultValue,
69
+ error: error,
70
+ borderColor: borderColor,
71
+ textColor: textColor
72
+ }), error && /*#__PURE__*/_react.default.createElement(_InputOld.ErrorLabel, null, errorMessage), password && /*#__PURE__*/_react.default.createElement(_InputOld.EyeIcon, {
73
+ onClick: toggleShowPassword,
74
+ textColor: textColor
75
+ }, showPassword ? /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, null) : /*#__PURE__*/_react.default.createElement(_fa.FaEye, null)));
76
+ };
77
+ var _default = exports.default = InputOld;
78
+ // Adding defaultProps
79
+ InputOld.defaultProps = {
80
+ required: true,
81
+ width: '200%',
82
+ height: '50px',
83
+ disabled: false,
84
+ password: false,
85
+ defaultValue: '',
86
+ placeholder: 'Enter here..',
87
+ error: false,
88
+ errorMessage: 'Input is invalid',
89
+ type: 'text',
90
+ borderColor: '#000000',
91
+ // Default borderColor prop value
92
+ textColor: '#000000' // Default textColor prop value
93
+ };
package/dist/stories/components/InputOld.style.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
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 || '40px');
13
+ const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 10px;\n font-size: 16px;\n border: 2px solid\n ", ";\n border-radius: ", ";\n outline: none;\n width: ", ";\n height: ", ";\n transition: border-color 0.3s ease;\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 || '100%', props => props.height || '40px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
14
+ const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\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 align-items: center;\n box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '12px' : '16px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
15
+ const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: red;\n margin-left: 5px;\n"])));
16
+ const EyeIcon = exports.EyeIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (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');
17
+ const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n color: red;\n margin-top: 5px;\n"])));
package/dist/stories/utils/IconsHandler.js ADDED
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.getIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _IconsHandler = require("./IconsHandler.style");
10
+ var _FilterIcon = require("../components/icons/FilterIcon");
11
+ var _OptionsIcon = require("../components/icons/OptionsIcon");
12
+ var _DownloadIcon = require("../components/icons/DownloadIcon");
13
+ var _DocumentIcon = require("../components/icons/DocumentIcon");
14
+ var _FlyIcon = require("../components/icons/FlyIcon");
15
+ var _BellIcon = require("../components/icons/BellIcon");
16
+ var _MaintenanceIcon = require("../components/icons/MaintenanceIcon");
17
+ var _ExitIcon = require("../components/icons/ExitIcon");
18
+ var _EyeIcon = require("../components/icons/EyeIcon");
19
+ var _SearchIcon = require("../components/icons/SearchIcon");
20
+ // eslint-disable-next-line import/prefer-default-export
21
+ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBackOnClick) => {
22
+ const newIconHeight = iconHeight || '12px';
23
+ const newIconWidth = iconWidth || '12px';
24
+ const newColor = disabled ? '#D0D0D0' : color || '#212121';
25
+ switch (icon.toLowerCase()) {
26
+ case 'filter':
27
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
28
+ className: "FilterIcon",
29
+ pointer: pointer,
30
+ onClick: callBackOnClick
31
+ }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
32
+ height: newIconHeight,
33
+ width: newIconWidth,
34
+ color: newColor
35
+ }));
36
+ case 'options':
37
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
38
+ className: "OptionsIcon",
39
+ pointer: pointer,
40
+ onClick: callBackOnClick
41
+ }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
42
+ height: newIconHeight,
43
+ width: newIconWidth,
44
+ color: newColor
45
+ }));
46
+ case 'download':
47
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
48
+ className: "DownloadIcon",
49
+ pointer: pointer,
50
+ onClick: callBackOnClick
51
+ }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
52
+ height: newIconHeight,
53
+ width: newIconWidth,
54
+ color: newColor
55
+ }));
56
+ case 'document':
57
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
58
+ className: "DocumentIcon",
59
+ pointer: pointer,
60
+ onClick: callBackOnClick
61
+ }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
62
+ height: newIconHeight,
63
+ width: newIconWidth,
64
+ color: newColor
65
+ }));
66
+ case 'fly':
67
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
68
+ className: "FlyIcon",
69
+ pointer: pointer,
70
+ onClick: callBackOnClick
71
+ }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
72
+ height: newIconHeight,
73
+ width: newIconWidth,
74
+ color: newColor
75
+ }));
76
+ case 'bell':
77
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
78
+ className: "BellIcon",
79
+ pointer: pointer,
80
+ onClick: callBackOnClick
81
+ }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
82
+ height: newIconHeight,
83
+ width: newIconWidth,
84
+ color: newColor
85
+ }));
86
+ case 'maintenance':
87
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
88
+ className: "MaintenanceIcon",
89
+ pointer: pointer,
90
+ onClick: callBackOnClick
91
+ }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
92
+ height: newIconHeight,
93
+ width: newIconWidth,
94
+ color: newColor
95
+ }));
96
+ case 'exit':
97
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
98
+ className: "ExitIcon",
99
+ pointer: pointer,
100
+ onClick: callBackOnClick
101
+ }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
102
+ height: newIconHeight,
103
+ width: newIconWidth,
104
+ color: newColor
105
+ }));
106
+ case 'eye':
107
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
108
+ className: "EyeIcon",
109
+ pointer: pointer,
110
+ onClick: callBackOnClick
111
+ }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
112
+ height: newIconHeight,
113
+ width: newIconWidth,
114
+ color: newColor
115
+ }));
116
+ case 'search':
117
+ return /*#__PURE__*/_react.default.createElement(_IconsHandler.IconWrapper, {
118
+ className: "SearchIcon",
119
+ pointer: pointer,
120
+ onClick: callBackOnClick
121
+ }, /*#__PURE__*/_react.default.createElement(_SearchIcon.SearchIcon, {
122
+ height: newIconHeight,
123
+ width: newIconWidth,
124
+ color: newColor
125
+ }));
126
+ default:
127
+ return '';
128
+ }
129
+ };
130
+ exports.getIcon = getIcon;
package/dist/stories/utils/IconsHandler.style.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.IconWrapper = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject;
11
+ // eslint-disable-next-line import/prefer-default-export
12
+ const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center; \n padding: 2px;\n cursor: ", ";\n"])), props => props.pointer || 'default');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.649",
3
+ "version": "1.0.652",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {