contentoh-components-library 21.4.86 → 21.4.87

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/components/atoms/Multiselect/index.js +113 -119
  2. package/dist/components/atoms/Multiselect/styles.js +1 -1
  3. package/dist/components/organisms/EditGroup/index.js +6 -6
  4. package/dist/components/organisms/EditGroup/styles.js +2 -2
  5. package/package.json +1 -1
  6. package/src/components/atoms/Multiselect/index.js +0 -4
  7. package/src/components/atoms/Multiselect/styles.js +2 -2
  8. package/src/components/organisms/EditGroup/index.js +6 -6
  9. package/src/components/organisms/EditGroup/styles.js +8 -8
package/dist/components/atoms/Multiselect/index.js CHANGED
@@ -127,138 +127,132 @@ var Multiselect = function Multiselect(_ref) {
127
127
  };
128
128
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
129
129
  children: [arrayData.map(function (user) {
130
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
131
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
132
- children: user.idUser
133
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
134
- children: user.userName
135
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
136
- labelId: "demo-multiple-checkbox-label-".concat(user.idUser),
137
- id: "demo-multiple-checkbox-".concat(user.idUser),
138
- multiple: true,
139
- value: selectValues[user.idUser] || [],
140
- onChange: handleChange(user.idUser),
141
- input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
142
- sx: {
143
- width: "80%",
144
- height: "34px",
145
- paddingBottom: "1px solid #F0F0F0"
146
- }
147
- }),
148
- renderValue: function renderValue(selected) {
149
- return selected.join(", ");
150
- },
151
- MenuProps: MenuProps,
130
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
131
+ labelId: "demo-multiple-checkbox-label-".concat(user.idUser),
132
+ id: "demo-multiple-checkbox-".concat(user.idUser),
133
+ multiple: true,
134
+ value: selectValues[user.idUser] || [],
135
+ onChange: handleChange(user.idUser),
136
+ input: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OutlinedInput.default, {
152
137
  sx: {
153
138
  width: "80%",
154
- height: "24px"
155
- },
156
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
157
- sx: {
158
- maxHeight: "34px",
159
- paddingLeft: "10px",
160
- "& .search-bar-filter": {
161
- display: "flex",
162
- gap: "10px",
163
- input: {
164
- border: "none",
165
- background: "transparent",
166
- "::placeholder": {
167
- fontSize: "12px",
168
- color: "#CBCBCB"
169
- },
170
- ":focus-visible, :hover": {
171
- border: "none",
172
- background: "transparent",
173
- outline: "none"
174
- }
139
+ height: "34px",
140
+ paddingBottom: "1px solid #F0F0F0"
141
+ }
142
+ }),
143
+ renderValue: function renderValue(selected) {
144
+ return selected.join(", ");
145
+ },
146
+ MenuProps: MenuProps,
147
+ sx: {
148
+ width: "80%",
149
+ height: "24px"
150
+ },
151
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
152
+ sx: {
153
+ maxHeight: "34px",
154
+ paddingLeft: "10px",
155
+ "& .search-bar-filter": {
156
+ display: "flex",
157
+ gap: "10px",
158
+ input: {
159
+ border: "none",
160
+ background: "transparent",
161
+ "::placeholder": {
162
+ fontSize: "12px",
163
+ color: "#CBCBCB"
175
164
  },
176
- ":focus-visible, :hover": {
177
- background: "transparent"
178
- }
179
- }
180
- },
181
- children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
182
- className: "search-bar-filter",
183
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
184
- src: _search.default,
185
- alt: "search icon"
186
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
187
- type: "text",
188
- placeholder: placeHolder,
189
- value: text,
190
- onChange: onChange
191
- })]
192
- })
193
- }), console.log("usuario", user.idUser, "grupos", user.groups), user.groups && user.groups.filter(function (group) {
194
- return group.groupId !== "Sin id";
195
- }).map(function (group) {
196
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
197
- value: group.groupName,
198
- sx: {
199
- paddingLeft: "0px",
200
- maxHeight: "34px",
201
165
  ":focus-visible, :hover": {
202
166
  border: "none",
203
- background: "transparent"
167
+ background: "transparent",
168
+ outline: "none"
204
169
  }
205
170
  },
206
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
207
- checked: (selectValues[user.idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
208
- sx: {
209
- maxHeight: "34px",
210
- "&.Mui-checked": {
211
- color: "#85BC5B"
212
- },
213
- "input, svg": {
214
- maxWidth: "12px",
215
- maxHeight: "12px"
216
- }
217
- }
218
- }), console.log("nombre grupo", group.groupName), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
219
- primary: group.groupName,
220
- sx: {
221
- span: {
222
- fontSize: "12px",
223
- color: "#000000"
224
- },
225
- "input, svg": {
226
- maxWidth: "12px",
227
- maxHeight: "12px"
228
- }
229
- }
230
- })]
231
- }, group.groupId);
232
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
171
+ ":focus-visible, :hover": {
172
+ background: "transparent"
173
+ }
174
+ }
175
+ },
176
+ children: showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
177
+ className: "search-bar-filter",
178
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
179
+ src: _search.default,
180
+ alt: "search icon"
181
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
182
+ type: "text",
183
+ placeholder: placeHolder,
184
+ value: text,
185
+ onChange: onChange
186
+ })]
187
+ })
188
+ }), console.log("usuario", user.idUser, "grupos", user.groups), user.groups && user.groups.filter(function (group) {
189
+ return group.groupId !== "Sin id";
190
+ }).map(function (group) {
191
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
192
+ value: group.groupName,
233
193
  sx: {
234
- minHeight: "34px",
235
- paddingLeft: "10px",
236
- ".btn-edit": {
237
- color: "#E33AA9",
238
- border: "none",
239
- background: "transparent",
240
- display: "flex",
241
- gap: "10px",
242
- alignItems: "center"
243
- },
194
+ paddingLeft: "0px",
195
+ maxHeight: "34px",
244
196
  ":focus-visible, :hover": {
245
197
  border: "none",
246
198
  background: "transparent"
247
199
  }
248
200
  },
249
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
250
- className: "btn-edit",
251
- onClick: function onClick() {
252
- setIsItemListVisible(false);
253
- setIsEditGroupVisible(true);
254
- },
255
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
256
- src: _settings.default,
257
- className: "icon",
258
- alt: "search icon"
259
- }), textButton]
260
- })
261
- })]
201
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
202
+ checked: (selectValues[user.idUser] || []).indexOf(group.groupName) > -1 && group.userContentGroup === 1,
203
+ sx: {
204
+ maxHeight: "34px",
205
+ "&.Mui-checked": {
206
+ color: "#85BC5B"
207
+ },
208
+ "input, svg": {
209
+ maxWidth: "12px",
210
+ maxHeight: "12px"
211
+ }
212
+ }
213
+ }), console.log("nombre grupo", group.groupName), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
214
+ primary: group.groupName,
215
+ sx: {
216
+ span: {
217
+ fontSize: "12px",
218
+ color: "#000000"
219
+ },
220
+ "input, svg": {
221
+ maxWidth: "12px",
222
+ maxHeight: "12px"
223
+ }
224
+ }
225
+ })]
226
+ }, group.groupId);
227
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
228
+ sx: {
229
+ minHeight: "34px",
230
+ paddingLeft: "10px",
231
+ ".btn-edit": {
232
+ color: "#E33AA9",
233
+ border: "none",
234
+ background: "transparent",
235
+ display: "flex",
236
+ gap: "10px",
237
+ alignItems: "center"
238
+ },
239
+ ":focus-visible, :hover": {
240
+ border: "none",
241
+ background: "transparent"
242
+ }
243
+ },
244
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
245
+ className: "btn-edit",
246
+ onClick: function onClick() {
247
+ setIsItemListVisible(false);
248
+ setIsEditGroupVisible(true);
249
+ },
250
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
251
+ src: _settings.default,
252
+ className: "icon",
253
+ alt: "search icon"
254
+ }), textButton]
255
+ })
262
256
  })]
263
257
  });
264
258
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditGroup.EditGroup, {
package/dist/components/atoms/Multiselect/styles.js CHANGED
@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
 
14
14
  var _templateObject;
15
15
 
16
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width:100%;\n height:auto;\n .search-bar-filter {\n display: flex;\n align-items: center;\n border: 1px solid #f0f0f0;\n padding-left: 10px;\n \n img {\n width: 15px;\n height: 15px;\n }\n \n input {\n background-color: transparent;\n padding: 10px 10px;\n outline: none;\n border: none;\n }\n }\n\n img.icon{\n width: 15px;\n height: 15px;\n }\n"])));
16
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n min-width:250px;\n max-height:34px;\n .search-bar-filter {\n display: flex;\n align-items: center;\n border: 1px solid #f0f0f0;\n padding-left: 10px;\n \n img {\n width: 15px;\n height: 15px;\n }\n \n input {\n background-color: transparent;\n padding: 10px 10px;\n outline: none;\n border: none;\n }\n }\n\n img.icon{\n width: 15px;\n height: 15px;\n }\n"])));
17
17
 
18
18
  exports.Container = Container;
package/dist/components/organisms/EditGroup/index.js CHANGED
@@ -446,14 +446,14 @@ var EditGroup = function EditGroup(_ref) {
446
446
  timeout: 400,
447
447
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
448
448
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
449
- className: "contentModal",
449
+ className: "Modal-edit-group",
450
450
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
451
451
  className: "header",
452
452
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
453
453
  className: "title-edit",
454
454
  children: "Editar grupos"
455
455
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
456
- className: "circular-button close-button",
456
+ className: "circular-button close-edit-button",
457
457
  onClick: onClose,
458
458
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
459
459
  src: _close.default,
@@ -486,7 +486,7 @@ var EditGroup = function EditGroup(_ref) {
486
486
  disabled: !isEditingList[index],
487
487
  autoFocus: isEditingList[index] && editingIndex === index
488
488
  }, index), currentEditIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
489
- className: "circular-button save-button visible",
489
+ className: "circular-button save-group-button visible",
490
490
  onClick: function onClick() {
491
491
  return handleSaveChanges(index);
492
492
  },
@@ -496,7 +496,7 @@ var EditGroup = function EditGroup(_ref) {
496
496
  })
497
497
  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
498
498
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
499
- className: "circular-button edit-button ".concat(hoveredIndex === index ? "visible" : ""),
499
+ className: "circular-button edit-group-button ".concat(hoveredIndex === index ? "visible" : ""),
500
500
  onClick: function onClick() {
501
501
  return handleEditButtonClick(index);
502
502
  },
@@ -505,7 +505,7 @@ var EditGroup = function EditGroup(_ref) {
505
505
  alt: "edit icon"
506
506
  })
507
507
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
508
- className: "circular-button delete-button ".concat(hoveredIndex === index ? "visible" : ""),
508
+ className: "circular-button delete-group-button ".concat(hoveredIndex === index ? "visible" : ""),
509
509
  onClick: function onClick() {
510
510
  return handleDeleteButtonClick(group.groupId);
511
511
  },
@@ -520,7 +520,7 @@ var EditGroup = function EditGroup(_ref) {
520
520
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
521
521
  className: "container-save-add",
522
522
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
523
- className: "button-add",
523
+ className: "button-group-add",
524
524
  onClick: function onClick() {
525
525
  return handleAddButtonClick();
526
526
  },
package/dist/components/organisms/EditGroup/styles.js CHANGED
@@ -19,10 +19,10 @@ var _templateObject, _templateObject2, _templateObject3;
19
19
 
20
20
  var fadeIn = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
21
21
 
22
- var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n overflow: auto;\n display: grid;\n place-items: center;\n .header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n }\n .close-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n -webkit-filter: grayscale(100%);\n filter: grayscale(100%);\n opacity:0.4;\n img {\n width: 10px;\n height: 10px;\n }\n\n &:hover {\n background-color: ", ";\n -webkit-filter: grayscale(0);\n filter: grayscale(0);\n opacity:1;\n }\n }\n .contentModal {\n position: absolute;\n top: 10%;\n z-index: 20;\n width: fit-content;\n max-width: 80%;\n min-width: 80px;\n height: fit-content;\n max-height: 100%;\n min-height: 120px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: white;\n border-radius: 10px;\n border: 1px solid ", ";\n padding: 25px 25px 20px 25px;\n box-shadow: 0px 2px 4px 0px #00000040;\n }\n\n .title-edit {\n width: 100%;\n font-family: ", ", sans-serif;\n font-size: 17px;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n }\n\n .details-edit {\n width: 100%;\n font-family: ", ", sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n margin: 5px 0 10px;\n }\n .container-save-add {\n width: 100%;\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n }\n .button-add {\n font-family: ", ", sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n text-transform: capitalize;\n border: none;\n background: transparent;\n border-radius: 20px;\n &:hover {\n background-color: ", ";\n }\n }\n .table-groups-edit {\n width: 100%;\n min-width: 288px;\n border: 1px solid ", ";\n border-radius: 5px;\n }\n .table-groups-max {\n min-width: 288px;\n border: 1px solid ", ";\n border-radius: 5px;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n }\n .modal-save {\n .contentModal {\n width: 25%;\n }\n }\n"])), _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
22
+ var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n overflow: auto;\n display: grid;\n place-items: center;\n .header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n }\n .close-edit-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n -webkit-filter: grayscale(100%);\n filter: grayscale(100%);\n opacity:0.4;\n img {\n width: 10px;\n height: 10px;\n }\n\n &:hover {\n background-color: ", ";\n -webkit-filter: grayscale(0);\n filter: grayscale(0);\n opacity:1;\n }\n }\n .Modal-edit-group {\n position: absolute;\n top: 10%;\n z-index: 20;\n width: fit-content;\n max-width: 80%;\n min-width: 80px;\n height: fit-content;\n max-height: 100%;\n min-height: 120px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: white;\n border-radius: 10px;\n border: 1px solid ", ";\n padding: 25px 25px 20px 25px;\n box-shadow: 0px 2px 4px 0px #00000040;\n }\n\n .title-edit {\n width: 100%;\n font-family: ", ", sans-serif;\n font-size: 17px;\n font-weight: 500;\n line-height: 20px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n }\n\n .details-edit {\n width: 100%;\n font-family: ", ", sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n margin: 5px 0 10px;\n }\n .container-save-add {\n width: 100%;\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n }\n .button-group-add {\n font-family: ", ", sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n color: ", ";\n text-transform: capitalize;\n border: none;\n background: transparent;\n border-radius: 20px;\n &:hover {\n background-color: ", ";\n }\n }\n .table-groups-edit {\n width: 100%;\n min-width: 288px;\n border: 1px solid ", ";\n border-radius: 5px;\n }\n .table-groups-max {\n min-width: 288px;\n border: 1px solid ", ";\n border-radius: 5px;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n }\n .modal-save {\n .contentModal {\n width: 25%;\n }\n }\n"])), _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.black, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.blue_light, _variables.GlobalColors.gray_light, _variables.GlobalColors.gray_light);
23
23
 
24
24
  exports.Container = Container;
25
25
 
26
- var GroupRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 34px;\n margin: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: Roboto;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n text-decoration: none;\n border-bottom: 1px solid ", ";\n padding: 0 8px 0 0;\n input {\n width:100%;\n min-width: 215px;\n background: transparent;\n color: ", ";\n border: 0;\n font-size: 12px;\n font-family:", ", sans-serif;\n padding: 5px 20px;\n ::placeholder {\n color: #CBCBCB;\n }\n }\n\n input:focus {\n border: 0;\n }\n &.editing {\n background-color: ", "; \n color: black;\n input{\n color: ", ";\n }\n }\n\n .save-button,\n .edit-button,\n .delete-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n \n img {\n width: 12px;\n height: 12px;\n }\n \n &:hover {\n background-color: ", ";\n }\n }\n .edit-button,\n .delete-button {\n display: none;\n }\n\n .visible {\n display: flex;\n animation: ", " 0.3s ease-in-out forwards;\n }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.blue_light, _variables.GlobalColors.black, _variables.GlobalColors.blue_light, fadeIn);
26
+ var GroupRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 34px;\n margin: 0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-family: Roboto;\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0em;\n text-align: left;\n text-decoration: none;\n border-bottom: 1px solid ", ";\n padding: 0 8px 0 0;\n input {\n width:100%;\n min-width: 215px;\n background: transparent;\n color: ", ";\n border: 0;\n font-size: 12px;\n font-family:", ", sans-serif;\n padding: 5px 20px;\n ::placeholder {\n color: #CBCBCB;\n }\n }\n\n input:focus {\n border: 0;\n }\n &.editing {\n background-color: ", "; \n color: black;\n input{\n color: ", ";\n }\n }\n\n .save-group-button,\n .edit-group-button,\n .delete-group-button {\n min-width: 24px;\n height: 24px;\n background-color: transparent;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 0.3s ease, opacity 0.3s ease;\n display: flex;\n justify-content: center;\n align-items: center;\n \n img {\n width: 12px;\n height: 12px;\n }\n \n &:hover {\n background-color: ", ";\n }\n }\n .edit-group-button,\n .delete-group-button {\n display: none;\n }\n\n .visible {\n display: flex;\n animation: ", " 0.3s ease-in-out forwards;\n }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray, _variables.FontFamily.RobotoRegular, _variables.GlobalColors.blue_light, _variables.GlobalColors.black, _variables.GlobalColors.blue_light, fadeIn);
27
27
 
28
28
  exports.GroupRow = GroupRow;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.4.86",
3
+ "version": "21.4.87",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/atoms/Multiselect/index.js CHANGED
@@ -82,9 +82,6 @@ export const Multiselect = ({
82
82
  return (
83
83
  <Container>
84
84
  {arrayData.map((user) => (
85
- <>
86
- <p>{user.idUser}</p>
87
- <p>{user.userName}</p>
88
85
  <Select
89
86
  labelId={`demo-multiple-checkbox-label-${user.idUser}`}
90
87
  id={`demo-multiple-checkbox-${user.idUser}`}
@@ -219,7 +216,6 @@ export const Multiselect = ({
219
216
  </button>
220
217
  </MenuItem>
221
218
  </Select>
222
- </>
223
219
  ))}
224
220
  <EditGroup
225
221
  token={token}
package/src/components/atoms/Multiselect/styles.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import styled from "styled-components";
2
2
 
3
3
  export const Container = styled.div`
4
- width:100%;
5
- height:auto;
4
+ min-width:250px;
5
+ max-height:34px;
6
6
  .search-bar-filter {
7
7
  display: flex;
8
8
  align-items: center;
package/src/components/organisms/EditGroup/index.js CHANGED
@@ -237,11 +237,11 @@ export const EditGroup = ({ token, show, onClose }) => {
237
237
  >
238
238
  <Fade in={show} timeout={400}>
239
239
  <Container>
240
- <div className={`contentModal`}>
240
+ <div className="Modal-edit-group">
241
241
  <div className="header">
242
242
  <h2 className="title-edit">Editar grupos</h2>
243
243
  <Button
244
- className={`circular-button close-button`}
244
+ className={`circular-button close-edit-button`}
245
245
  onClick={onClose}
246
246
  >
247
247
  <img src={close} alt="close icon" />
@@ -277,7 +277,7 @@ export const EditGroup = ({ token, show, onClose }) => {
277
277
  />
278
278
  {currentEditIndex === index ? (
279
279
  <Button
280
- className={`circular-button save-button visible`}
280
+ className={`circular-button save-group-button visible`}
281
281
  onClick={() => handleSaveChanges(index)}
282
282
  >
283
283
  <img src={save} alt="save update icon" />
@@ -285,7 +285,7 @@ export const EditGroup = ({ token, show, onClose }) => {
285
285
  ) : (
286
286
  <>
287
287
  <Button
288
- className={`circular-button edit-button ${
288
+ className={`circular-button edit-group-button ${
289
289
  hoveredIndex === index ? "visible" : ""
290
290
  }`}
291
291
  onClick={() => handleEditButtonClick(index)}
@@ -293,7 +293,7 @@ export const EditGroup = ({ token, show, onClose }) => {
293
293
  <img src={edit} alt="edit icon" />
294
294
  </Button>
295
295
  <Button
296
- className={`circular-button delete-button ${
296
+ className={`circular-button delete-group-button ${
297
297
  hoveredIndex === index ? "visible" : ""
298
298
  }`}
299
299
  onClick={() => handleDeleteButtonClick(group.groupId)}
@@ -307,7 +307,7 @@ export const EditGroup = ({ token, show, onClose }) => {
307
307
  </div>
308
308
  <div className="container-save-add">
309
309
  <Button
310
- className="button-add"
310
+ className="button-group-add"
311
311
  onClick={() => handleAddButtonClick()}
312
312
  >
313
313
  + Agregar Grupo
package/src/components/organisms/EditGroup/styles.js CHANGED
@@ -21,7 +21,7 @@ export const Container = styled.div`
21
21
  display: flex;
22
22
  justify-content: space-between;
23
23
  }
24
- .close-button {
24
+ .close-edit-button {
25
25
  min-width: 24px;
26
26
  height: 24px;
27
27
  background-color: transparent;
@@ -47,7 +47,7 @@ export const Container = styled.div`
47
47
  opacity:1;
48
48
  }
49
49
  }
50
- .contentModal {
50
+ .Modal-edit-group {
51
51
  position: absolute;
52
52
  top: 10%;
53
53
  z-index: 20;
@@ -95,7 +95,7 @@ export const Container = styled.div`
95
95
  justify-content: space-between;
96
96
  margin-top: 20px;
97
97
  }
98
- .button-add {
98
+ .button-group-add {
99
99
  font-family: ${FontFamily.RobotoRegular}, sans-serif;
100
100
  font-size: 12px;
101
101
  font-weight: 400;
@@ -172,9 +172,9 @@ export const GroupRow = styled.div`
172
172
  }
173
173
  }
174
174
 
175
- .save-button,
176
- .edit-button,
177
- .delete-button {
175
+ .save-group-button,
176
+ .edit-group-button,
177
+ .delete-group-button {
178
178
  min-width: 24px;
179
179
  height: 24px;
180
180
  background-color: transparent;
@@ -195,8 +195,8 @@ export const GroupRow = styled.div`
195
195
  background-color: ${GlobalColors.blue_light};
196
196
  }
197
197
  }
198
- .edit-button,
199
- .delete-button {
198
+ .edit-group-button,
199
+ .delete-group-button {
200
200
  display: none;
201
201
  }
202
202