contentoh-components-library 21.6.24 → 21.6.26

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 (13) hide show
  1. package/dist/components/molecules/SingleSelect/index.js +198 -0
  2. package/dist/components/molecules/SingleSelect/styles.js +74 -0
  3. package/dist/components/organisms/LinkVariantsModal/index.js +193 -154
  4. package/dist/components/organisms/LinkVariantsModal/styles.js +26 -16
  5. package/dist/components/pages/ProviderProductEdition/styles.js +4 -1
  6. package/dist/index.js +43 -30
  7. package/package.json +1 -1
  8. package/src/components/molecules/SingleSelect/index.js +183 -0
  9. package/src/components/molecules/SingleSelect/styles.js +132 -0
  10. package/src/components/organisms/LinkVariantsModal/index.js +224 -143
  11. package/src/components/organisms/LinkVariantsModal/styles.js +71 -67
  12. package/src/components/pages/ProviderProductEdition/styles.js +6 -3
  13. package/src/index.js +1 -0
package/dist/components/organisms/LinkVariantsModal/styles.js CHANGED
@@ -17,68 +17,78 @@ var _variables = require("../../../global-files/variables");
17
17
 
18
18
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
19
19
 
20
+ // Rosa ContentOh. Va aquí y no en variables.js porque cambiar la constante
21
+ // global tocaría todos los componentes que ya la usan; este modal es lo que hay
22
+ // que alinear con la marca.
23
+ var PINK = "#E13AA8";
24
+ var PINK_RGB = "225, 58, 168"; // accent-color pinta el relleno de checkboxes y radios con el color de marca en
25
+ // vez del azul del sistema, sin reemplazarlos por divs: siguen siendo controles
26
+ // nativos, con su foco y su navegación por teclado intactos.
27
+
28
+ var controls = "\n input[type=\"checkbox\"],\n input[type=\"radio\"] {\n accent-color: ".concat(PINK, ";\n width: 15px;\n height: 15px;\n cursor: pointer;\n }\n");
29
+
20
30
  var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: fixed;\n inset: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(40, 31, 51, 0.45);\n"])));
21
31
 
22
32
  exports.Overlay = Overlay;
23
33
 
24
- var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: min(680px, 92vw);\n max-height: 86vh;\n border-radius: 10px;\n background-color: ", ";\n font-family: ", ";\n overflow: hidden;\n"])), _variables.GlobalColors.white, _variables.FontFamily.Raleway);
34
+ var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n display: flex;\n flex-direction: column;\n width: min(680px, 92vw);\n max-height: 86vh;\n border-radius: 10px;\n background-color: ", ";\n font-family: ", ";\n overflow: hidden;\n"])), controls, _variables.GlobalColors.white, _variables.FontFamily.Raleway);
25
35
 
26
36
  exports.Panel = Panel;
27
37
 
28
- var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 24px 12px;\n\n h2 {\n margin: 0;\n font-family: ", ";\n font-size: 16px;\n color: ", ";\n }\n\n p {\n margin: 4px 0 0;\n font-size: 12px;\n color: ", ";\n }\n\n .close {\n border: none;\n background: none;\n cursor: pointer;\n font-size: 20px;\n line-height: 1;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
38
+ var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 24px 12px;\n\n h2 {\n margin: 0;\n font-family: ", ";\n font-size: 17px;\n color: ", ";\n }\n\n p {\n margin: 4px 0 0;\n font-size: 13px;\n color: ", ";\n }\n\n .close {\n border: none;\n background: none;\n cursor: pointer;\n font-size: 21px;\n line-height: 1;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
29
39
 
30
40
  exports.Header = Header;
31
41
 
32
- var ModeSwitch = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n padding: 0 24px 16px;\n\n button {\n flex: 1;\n padding: 10px 12px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n cursor: pointer;\n text-align: left;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600, _variables.GlobalColors.gray, _variables.GlobalColors.original_magenta, _variables.GlobalColors.original_magenta, _variables.GlobalColors.rgb_color_pink);
42
+ var ModeSwitch = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n padding: 0 24px 16px;\n\n button {\n flex: 1;\n padding: 10px 12px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n text-align: left;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600, _variables.GlobalColors.gray, PINK, PINK, PINK_RGB);
33
43
 
34
44
  exports.ModeSwitch = ModeSwitch;
35
45
 
36
- var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n overflow-y: auto;\n padding: 0 24px;\n\n .apply-all {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n margin-bottom: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background-color: ", ";\n font-size: 12px;\n color: ", ";\n cursor: pointer;\n }\n\n .apply-all .hint {\n display: block;\n font-size: 11px;\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
46
+ var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n overflow-y: auto;\n padding: 0 24px;\n\n .apply-all {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n margin-bottom: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background-color: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n .apply-all .hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
37
47
 
38
48
  exports.Body = Body;
39
49
 
40
- var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n height: 36px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border: none;\n border-radius: 6px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: 12px;\n cursor: pointer;\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, _variables.GlobalColors.original_magenta, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600);
50
+ var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n height: 36px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border: none;\n border-radius: 6px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: 13px;\n cursor: pointer;\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600);
41
51
 
42
52
  exports.SearchRow = SearchRow;
43
53
 
44
- var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size: 12px;\n color: ", ";\n }\n\n .meta {\n display: block;\n font-size: 11px;\n color: ", ";\n }\n\n .logo {\n width: 24px;\n height: 24px;\n object-fit: contain;\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .count {\n margin-left: auto;\n font-size: 11px;\n color: ", ";\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.original_magenta);
54
+ var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size: 13px;\n color: ", ";\n }\n\n .meta {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n\n .logo {\n width: 24px;\n height: 24px;\n object-fit: contain;\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .count {\n margin-left: auto;\n font-size: 12px;\n color: ", ";\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, PINK);
45
55
 
46
56
  exports.List = List;
47
- var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 220px;\n overflow-y: auto;\n\n .note {\n display: block;\n font-size: 10px;\n font-style: italic;\n color: ", ";\n }\n\n .value {\n margin-left: auto;\n max-width: 45%;\n font-size: 11px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.gray, _variables.GlobalColors.gray);
57
+ var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 220px;\n overflow-y: auto;\n\n .note {\n display: block;\n font-size: 11px;\n font-style: italic;\n color: ", ";\n }\n\n .value {\n margin-left: auto;\n max-width: 45%;\n font-size: 12px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.gray, _variables.GlobalColors.gray);
48
58
  exports.AttributeList = AttributeList;
49
59
 
50
- var Section = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 16px;\n\n h3 {\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n }\n\n label.choice {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 0;\n font-size: 12px;\n color: ", ";\n cursor: pointer;\n }\n\n label.choice span.hint {\n display: block;\n font-size: 11px;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
60
+ var Section = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 16px;\n\n h3 {\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 14px;\n color: ", ";\n }\n\n label.choice {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 0;\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n label.choice span.hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
51
61
 
52
62
  exports.Section = Section;
53
63
 
54
- var Message = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 12px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 12px;\n line-height: 1.4;\n background-color: ", ";\n color: ", ";\n\n &.error {\n background-color: rgba(", ", 0.1);\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.original_magenta);
64
+ var Message = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 12px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 13px;\n line-height: 1.4;\n background-color: ", ";\n color: ", ";\n\n &.error {\n background-color: rgba(", ", 0.1);\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK_RGB, PINK);
55
65
 
56
66
  exports.Message = Message;
57
67
 
58
- var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ", ";\n\n .summary {\n font-size: 12px;\n color: ", ";\n }\n\n .actions {\n display: flex;\n gap: 8px;\n margin-left: auto;\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border-radius: 6px;\n font-family: ", ";\n font-size: 12px;\n cursor: pointer;\n }\n\n button.secondary {\n border: 1px solid ", ";\n background-color: ", ";\n color: ", ";\n }\n\n button.primary {\n border: none;\n background-color: ", ";\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.GlobalColors.gray, _variables.GlobalColors.original_magenta, _variables.GlobalColors.white);
68
+ var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ", ";\n\n .summary {\n font-size: 13px;\n color: ", ";\n }\n\n .actions {\n display: flex;\n gap: 8px;\n margin-left: auto;\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n cursor: pointer;\n }\n\n button.secondary {\n border: 1px solid ", ";\n background-color: ", ";\n color: ", ";\n }\n\n button.primary {\n border: none;\n background-color: ", ";\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.GlobalColors.gray, PINK, _variables.GlobalColors.white);
59
69
 
60
70
  exports.Footer = Footer;
61
71
 
62
- var ImageGrid = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));\n gap: 8px;\n margin-bottom: 16px;\n\n label {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 6px;\n border: 1px solid ", ";\n border-radius: 6px;\n cursor: pointer;\n }\n\n label.picked {\n border-color: ", ";\n background-color: rgba(", ", 0.06);\n }\n\n label.locked {\n cursor: default;\n }\n\n label input {\n position: absolute;\n top: 8px;\n left: 8px;\n }\n\n label img {\n width: 100%;\n height: 72px;\n object-fit: contain;\n background-color: ", ";\n border-radius: 4px;\n }\n\n label span {\n font-size: 10px;\n color: ", ";\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.original_magenta, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.s2, _variables.GlobalColors.gray);
72
+ var ImageGrid = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));\n gap: 8px;\n margin-bottom: 16px;\n\n label {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 6px;\n border: 1px solid ", ";\n border-radius: 6px;\n cursor: pointer;\n }\n\n label.picked {\n border-color: ", ";\n background-color: rgba(", ", 0.06);\n }\n\n label.locked {\n cursor: default;\n }\n\n label input {\n position: absolute;\n top: 8px;\n left: 8px;\n }\n\n label img {\n width: 100%;\n height: 72px;\n object-fit: contain;\n background-color: ", ";\n border-radius: 4px;\n }\n\n label span {\n font-size: 11px;\n color: ", ";\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, PINK, PINK_RGB, _variables.GlobalColors.s2, _variables.GlobalColors.gray);
63
73
 
64
74
  exports.ImageGrid = ImageGrid;
65
75
 
66
- var AddRetailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 16px;\n\n select {\n flex: 1 1 140px;\n min-width: 0;\n height: 32px;\n padding: 0 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n background-color: ", ";\n }\n\n button {\n height: 32px;\n padding: 0 14px;\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n cursor: pointer;\n }\n\n select:disabled {\n opacity: 0.5;\n cursor: default;\n }\n\n button:disabled {\n opacity: 0.4;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, _variables.GlobalColors.white, _variables.GlobalColors.original_magenta, _variables.FontFamily.Raleway_600, _variables.GlobalColors.original_magenta);
76
+ var AddRetailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 8px;\n margin-bottom: 16px;\n\n button {\n height: 38px;\n padding: 0 14px;\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n flex-shrink: 0;\n }\n\n button:disabled {\n opacity: 0.4;\n cursor: default;\n }\n"])), PINK, _variables.FontFamily.Raleway_600, PINK);
67
77
 
68
78
  exports.AddRetailer = AddRetailer;
69
79
 
70
- var Block = _styledComponents.default.section(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid ", ";\n\n &:last-of-type {\n border-bottom: none;\n }\n\n h3 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n }\n\n h3 .paso {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background-color: ", ";\n color: ", ";\n font-size: 10px;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.original_magenta, _variables.GlobalColors.white);
80
+ var Block = _styledComponents.default.section(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid ", ";\n\n &:last-of-type {\n border-bottom: none;\n }\n\n h3 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 14px;\n color: ", ";\n }\n\n h3 .paso {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background-color: ", ";\n color: ", ";\n font-size: 11px;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.white);
71
81
 
72
82
  exports.Block = Block;
73
83
 
74
- var Choices = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-bottom: 10px;\n\n label {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 4px 0;\n font-size: 12px;\n color: ", ";\n cursor: pointer;\n }\n\n label .hint {\n display: block;\n font-size: 11px;\n color: ", ";\n }\n"])), _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
84
+ var Choices = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-bottom: 10px;\n\n label {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 4px 0;\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n label .hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
75
85
 
76
86
  exports.Choices = Choices;
77
87
 
78
- var Paging = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: -8px 0 16px;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n\n button {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 5px 12px;\n cursor: pointer;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, _variables.GlobalColors.original_magenta);
88
+ var Paging = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: -8px 0 16px;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n\n button {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 5px 12px;\n cursor: pointer;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, PINK);
79
89
 
80
90
  exports.Paging = Paging;
81
91
 
82
- var Tabs = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 16px;\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n\n button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 200px;\n padding: 6px 10px;\n border: 1px solid ", ";\n border-radius: 6px;\n background-color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n\n button .orden {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background-color: ", ";\n font-size: 9px;\n flex-shrink: 0;\n }\n\n button.active .orden {\n background-color: ", ";\n color: ", ";\n }\n\n button .listo {\n color: ", ";\n flex-shrink: 0;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.original_magenta, _variables.GlobalColors.original_magenta, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.s2, _variables.GlobalColors.original_magenta, _variables.GlobalColors.white, _variables.GlobalColors.original_magenta);
92
+ var Tabs = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 16px;\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n\n button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 200px;\n padding: 6px 10px;\n border: 1px solid ", ";\n border-radius: 6px;\n background-color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n\n button .orden {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background-color: ", ";\n font-size: 10px;\n flex-shrink: 0;\n }\n\n button.active .orden {\n background-color: ", ";\n color: ", ";\n }\n\n button .listo {\n color: ", ";\n flex-shrink: 0;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, PINK, PINK, PINK_RGB, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.white, PINK);
83
93
 
84
94
  exports.Tabs = Tabs;
package/dist/components/pages/ProviderProductEdition/styles.js CHANGED
@@ -15,9 +15,12 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
+ // Rosa ContentOh, el mismo del modal de ligar productos.
19
+ var PINK = "#E13AA8";
20
+
18
21
  var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n height: 100%;\n flex: 1;\n overflow: auto;\n\n .data-container {\n display: flex;\n flex: 0%;\n height: calc(100% - ", "px);\n .image-data-panel {\n width: 340px;\n\n & + * {\n margin-left: 10px;\n }\n }\n\n .product-information {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n\n .services-information-container {\n height: 100%;\n overflow: auto;\n }\n\n .image-services {\n aside {\n display: grid;\n grid-template-columns: repeat(auto-fill, 179px);\n column-gap: 15px;\n row-gap: 15px;\n padding: 20px;\n }\n }\n\n .commentary-box {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n padding: 10px;\n padding-left: 0;\n\n .commentary {\n display: flex;\n align-items: flex-end;\n\n .input-container {\n width: 500px;\n\n .quill {\n height: 100px;\n }\n\n & + * {\n margin-left: 5px;\n }\n }\n\n .buttons-box {\n display: flex;\n width: 210px;\n flex-wrap: wrap;\n\n .general-transparent-button {\n & + * {\n margin-top: 5px;\n }\n }\n\n .general-transparent-button,\n .general-green-button,\n .general-button-disabled {\n width: fit-content;\n min-width: 201px;\n height: 40px;\n }\n }\n }\n }\n\n .feedback-box {\n display: flex;\n }\n\n .required-inputs-message {\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n padding: 10px;\n display: flex;\n align-items: center;\n\n p + * {\n margin-top: 10px;\n }\n\n button {\n min-width: fit-content;\n }\n }\n }\n }\n #modal-message-box {\n width: 400px;\n height: 100px;\n }\n .container {\n width: 100%;\n height: 90%;\n .dropzone {\n height: 100%;\n width: 100%;\n position: relative;\n transition: all 0.5s ease;\n\n &.drag-active {\n background-color: rgba(", ", 0.05);\n border: 2px dashed ", ";\n border-radius: 8px;\n\n aside {\n opacity: 0.3;\n pointer-events: none;\n }\n }\n\n .drag-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(", ", 0.1);\n border-radius: 8px;\n pointer-events: none;\n z-index: 10;\n\n p {\n font-family: ", ";\n font-size: 24px;\n font-weight: 600;\n color: ", ";\n text-align: center;\n padding: 20px;\n background-color: ", ";\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n }\n }\n }\n .variants-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n\n .link-variants {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 6px 12px;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n cursor: pointer;\n }\n\n .variants-count {\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .variants-family {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-bottom: 10px;\n padding: 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n\n .loading {\n margin: 0;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n }\n\n .family-row {\n display: flex;\n align-items: baseline;\n gap: 8px;\n padding: 6px 8px;\n border: none;\n border-radius: 4px;\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n .family-row:hover:not(:disabled) {\n background-color: ", ";\n }\n\n .family-row:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .family-row .role {\n min-width: 96px;\n font-size: 10px;\n color: ", ";\n }\n\n .family-row.current .role {\n color: ", ";\n }\n\n .family-row .name {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .family-row .upc {\n font-size: 11px;\n color: ", ";\n }\n }\n"])), function (_ref) {
19
22
  var headerTop = _ref.headerTop;
20
23
  return headerTop;
21
- }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, _variables.GlobalColors.original_magenta, _variables.FontFamily.Raleway_600, _variables.GlobalColors.original_magenta, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.original_magenta, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
24
+ }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
22
25
 
23
26
  exports.Container = Container;
package/dist/index.js CHANGED
@@ -862,7 +862,7 @@ Object.keys(_index65).forEach(function (key) {
862
862
  });
863
863
  });
864
864
 
865
- var _index66 = require("./components/molecules/ButtonDownloadFile/index");
865
+ var _index66 = require("./components/molecules/SingleSelect/index");
866
866
 
867
867
  Object.keys(_index66).forEach(function (key) {
868
868
  if (key === "default" || key === "__esModule") return;
@@ -875,7 +875,7 @@ Object.keys(_index66).forEach(function (key) {
875
875
  });
876
876
  });
877
877
 
878
- var _index67 = require("./components/molecules/ImageTooltip/index");
878
+ var _index67 = require("./components/molecules/ButtonDownloadFile/index");
879
879
 
880
880
  Object.keys(_index67).forEach(function (key) {
881
881
  if (key === "default" || key === "__esModule") return;
@@ -888,7 +888,7 @@ Object.keys(_index67).forEach(function (key) {
888
888
  });
889
889
  });
890
890
 
891
- var _index68 = require("./components/molecules/SelectV2/index");
891
+ var _index68 = require("./components/molecules/ImageTooltip/index");
892
892
 
893
893
  Object.keys(_index68).forEach(function (key) {
894
894
  if (key === "default" || key === "__esModule") return;
@@ -901,7 +901,7 @@ Object.keys(_index68).forEach(function (key) {
901
901
  });
902
902
  });
903
903
 
904
- var _index69 = require("./components/molecules/Dropdown/index");
904
+ var _index69 = require("./components/molecules/SelectV2/index");
905
905
 
906
906
  Object.keys(_index69).forEach(function (key) {
907
907
  if (key === "default" || key === "__esModule") return;
@@ -914,7 +914,7 @@ Object.keys(_index69).forEach(function (key) {
914
914
  });
915
915
  });
916
916
 
917
- var _index70 = require("./components/molecules/StripeCardForm/index");
917
+ var _index70 = require("./components/molecules/Dropdown/index");
918
918
 
919
919
  Object.keys(_index70).forEach(function (key) {
920
920
  if (key === "default" || key === "__esModule") return;
@@ -927,7 +927,7 @@ Object.keys(_index70).forEach(function (key) {
927
927
  });
928
928
  });
929
929
 
930
- var _index71 = require("./components/molecules/StripeCardSelector/index");
930
+ var _index71 = require("./components/molecules/StripeCardForm/index");
931
931
 
932
932
  Object.keys(_index71).forEach(function (key) {
933
933
  if (key === "default" || key === "__esModule") return;
@@ -940,7 +940,7 @@ Object.keys(_index71).forEach(function (key) {
940
940
  });
941
941
  });
942
942
 
943
- var _index72 = require("./components/molecules/GridItem/index");
943
+ var _index72 = require("./components/molecules/StripeCardSelector/index");
944
944
 
945
945
  Object.keys(_index72).forEach(function (key) {
946
946
  if (key === "default" || key === "__esModule") return;
@@ -953,7 +953,7 @@ Object.keys(_index72).forEach(function (key) {
953
953
  });
954
954
  });
955
955
 
956
- var _index73 = require("./components/molecules/HeaderItem/index");
956
+ var _index73 = require("./components/molecules/GridItem/index");
957
957
 
958
958
  Object.keys(_index73).forEach(function (key) {
959
959
  if (key === "default" || key === "__esModule") return;
@@ -966,7 +966,7 @@ Object.keys(_index73).forEach(function (key) {
966
966
  });
967
967
  });
968
968
 
969
- var _index74 = require("./components/molecules/RowItem/index");
969
+ var _index74 = require("./components/molecules/HeaderItem/index");
970
970
 
971
971
  Object.keys(_index74).forEach(function (key) {
972
972
  if (key === "default" || key === "__esModule") return;
@@ -979,7 +979,7 @@ Object.keys(_index74).forEach(function (key) {
979
979
  });
980
980
  });
981
981
 
982
- var _index75 = require("./components/organisms/ChangePassword/index");
982
+ var _index75 = require("./components/molecules/RowItem/index");
983
983
 
984
984
  Object.keys(_index75).forEach(function (key) {
985
985
  if (key === "default" || key === "__esModule") return;
@@ -992,7 +992,7 @@ Object.keys(_index75).forEach(function (key) {
992
992
  });
993
993
  });
994
994
 
995
- var _index76 = require("./components/organisms/Fullplan/index");
995
+ var _index76 = require("./components/organisms/ChangePassword/index");
996
996
 
997
997
  Object.keys(_index76).forEach(function (key) {
998
998
  if (key === "default" || key === "__esModule") return;
@@ -1005,7 +1005,7 @@ Object.keys(_index76).forEach(function (key) {
1005
1005
  });
1006
1006
  });
1007
1007
 
1008
- var _index77 = require("./components/organisms/FullProductNameHeader/index");
1008
+ var _index77 = require("./components/organisms/Fullplan/index");
1009
1009
 
1010
1010
  Object.keys(_index77).forEach(function (key) {
1011
1011
  if (key === "default" || key === "__esModule") return;
@@ -1018,7 +1018,7 @@ Object.keys(_index77).forEach(function (key) {
1018
1018
  });
1019
1019
  });
1020
1020
 
1021
- var _index78 = require("./components/organisms/FullTabsMenu/index");
1021
+ var _index78 = require("./components/organisms/FullProductNameHeader/index");
1022
1022
 
1023
1023
  Object.keys(_index78).forEach(function (key) {
1024
1024
  if (key === "default" || key === "__esModule") return;
@@ -1031,7 +1031,7 @@ Object.keys(_index78).forEach(function (key) {
1031
1031
  });
1032
1032
  });
1033
1033
 
1034
- var _index79 = require("./components/organisms/ImageDataTable/index");
1034
+ var _index79 = require("./components/organisms/FullTabsMenu/index");
1035
1035
 
1036
1036
  Object.keys(_index79).forEach(function (key) {
1037
1037
  if (key === "default" || key === "__esModule") return;
@@ -1044,7 +1044,7 @@ Object.keys(_index79).forEach(function (key) {
1044
1044
  });
1045
1045
  });
1046
1046
 
1047
- var _index80 = require("./components/organisms/ImagePreviewer/index");
1047
+ var _index80 = require("./components/organisms/ImageDataTable/index");
1048
1048
 
1049
1049
  Object.keys(_index80).forEach(function (key) {
1050
1050
  if (key === "default" || key === "__esModule") return;
@@ -1057,7 +1057,7 @@ Object.keys(_index80).forEach(function (key) {
1057
1057
  });
1058
1058
  });
1059
1059
 
1060
- var _index81 = require("./components/organisms/ImagesGroup/index");
1060
+ var _index81 = require("./components/organisms/ImagePreviewer/index");
1061
1061
 
1062
1062
  Object.keys(_index81).forEach(function (key) {
1063
1063
  if (key === "default" || key === "__esModule") return;
@@ -1070,7 +1070,7 @@ Object.keys(_index81).forEach(function (key) {
1070
1070
  });
1071
1071
  });
1072
1072
 
1073
- var _index82 = require("./components/organisms/InputGroup/index");
1073
+ var _index82 = require("./components/organisms/ImagesGroup/index");
1074
1074
 
1075
1075
  Object.keys(_index82).forEach(function (key) {
1076
1076
  if (key === "default" || key === "__esModule") return;
@@ -1083,7 +1083,7 @@ Object.keys(_index82).forEach(function (key) {
1083
1083
  });
1084
1084
  });
1085
1085
 
1086
- var _index83 = require("./components/organisms/LinkVariantsModal/index");
1086
+ var _index83 = require("./components/organisms/InputGroup/index");
1087
1087
 
1088
1088
  Object.keys(_index83).forEach(function (key) {
1089
1089
  if (key === "default" || key === "__esModule") return;
@@ -1096,7 +1096,7 @@ Object.keys(_index83).forEach(function (key) {
1096
1096
  });
1097
1097
  });
1098
1098
 
1099
- var _index84 = require("./components/organisms/ProductImageModal/index");
1099
+ var _index84 = require("./components/organisms/LinkVariantsModal/index");
1100
1100
 
1101
1101
  Object.keys(_index84).forEach(function (key) {
1102
1102
  if (key === "default" || key === "__esModule") return;
@@ -1109,7 +1109,7 @@ Object.keys(_index84).forEach(function (key) {
1109
1109
  });
1110
1110
  });
1111
1111
 
1112
- var _index85 = require("./components/organisms/Chat/index");
1112
+ var _index85 = require("./components/organisms/ProductImageModal/index");
1113
1113
 
1114
1114
  Object.keys(_index85).forEach(function (key) {
1115
1115
  if (key === "default" || key === "__esModule") return;
@@ -1122,7 +1122,7 @@ Object.keys(_index85).forEach(function (key) {
1122
1122
  });
1123
1123
  });
1124
1124
 
1125
- var _index86 = require("./components/organisms/Modal/index");
1125
+ var _index86 = require("./components/organisms/Chat/index");
1126
1126
 
1127
1127
  Object.keys(_index86).forEach(function (key) {
1128
1128
  if (key === "default" || key === "__esModule") return;
@@ -1135,7 +1135,7 @@ Object.keys(_index86).forEach(function (key) {
1135
1135
  });
1136
1136
  });
1137
1137
 
1138
- var _index87 = require("./components/organisms/OrderDetail/index");
1138
+ var _index87 = require("./components/organisms/Modal/index");
1139
1139
 
1140
1140
  Object.keys(_index87).forEach(function (key) {
1141
1141
  if (key === "default" || key === "__esModule") return;
@@ -1148,6 +1148,19 @@ Object.keys(_index87).forEach(function (key) {
1148
1148
  });
1149
1149
  });
1150
1150
 
1151
+ var _index88 = require("./components/organisms/OrderDetail/index");
1152
+
1153
+ Object.keys(_index88).forEach(function (key) {
1154
+ if (key === "default" || key === "__esModule") return;
1155
+ if (key in exports && exports[key] === _index88[key]) return;
1156
+ Object.defineProperty(exports, key, {
1157
+ enumerable: true,
1158
+ get: function get() {
1159
+ return _index88[key];
1160
+ }
1161
+ });
1162
+ });
1163
+
1151
1164
  var _RangeCalendar = require("./components/organisms/RangeCalendar");
1152
1165
 
1153
1166
  Object.keys(_RangeCalendar).forEach(function (key) {
@@ -1174,28 +1187,28 @@ Object.keys(_TableResizable).forEach(function (key) {
1174
1187
  });
1175
1188
  });
1176
1189
 
1177
- var _index88 = require("./components/organisms/SideModal/index");
1190
+ var _index89 = require("./components/organisms/SideModal/index");
1178
1191
 
1179
- Object.keys(_index88).forEach(function (key) {
1192
+ Object.keys(_index89).forEach(function (key) {
1180
1193
  if (key === "default" || key === "__esModule") return;
1181
- if (key in exports && exports[key] === _index88[key]) return;
1194
+ if (key in exports && exports[key] === _index89[key]) return;
1182
1195
  Object.defineProperty(exports, key, {
1183
1196
  enumerable: true,
1184
1197
  get: function get() {
1185
- return _index88[key];
1198
+ return _index89[key];
1186
1199
  }
1187
1200
  });
1188
1201
  });
1189
1202
 
1190
- var _index89 = require("./components/organisms/GridProducts/index");
1203
+ var _index90 = require("./components/organisms/GridProducts/index");
1191
1204
 
1192
- Object.keys(_index89).forEach(function (key) {
1205
+ Object.keys(_index90).forEach(function (key) {
1193
1206
  if (key === "default" || key === "__esModule") return;
1194
- if (key in exports && exports[key] === _index89[key]) return;
1207
+ if (key in exports && exports[key] === _index90[key]) return;
1195
1208
  Object.defineProperty(exports, key, {
1196
1209
  enumerable: true,
1197
1210
  get: function get() {
1198
- return _index89[key];
1211
+ return _index90[key];
1199
1212
  }
1200
1213
  });
1201
1214
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.6.24",
3
+ "version": "21.6.26",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/molecules/SingleSelect/index.js ADDED
@@ -0,0 +1,183 @@
1
+ import { useRef, useState, useEffect } from "react";
2
+ import {
3
+ SelectWrapper,
4
+ SelectBase,
5
+ Arrow,
6
+ Options,
7
+ OptionItem,
8
+ SelectedOptionItem,
9
+ } from "./styles";
10
+
11
+ /*
12
+ Select de opción única con búsqueda escribiendo.
13
+
14
+ Es el CustomSelect que la aplicación usa en el alta de productos, traído a la
15
+ librería para que las pantallas que viven aquí no tengan que caer en el <select>
16
+ del sistema, que se ve ajeno al resto de la plataforma.
17
+
18
+ Se llama distinto porque la librería ya exporta un `CustomSelect`: aquel es un
19
+ filtro de selección múltiple con calendario, otra cosa. Compartir nombre habría
20
+ roto el export global.
21
+
22
+ Tres cambios respecto al original, todos porque aquí el entorno es otro:
23
+ el ancho es flexible en vez de 210px fijos —en el modal van tres en fila—, los
24
+ colores salen de las variables de la librería en lugar de `var(--gray)`, y la
25
+ flecha va dibujada porque la fuente de iconos de Material la carga la
26
+ aplicación, no esta librería.
27
+
28
+ props:
29
+ - options: [{ label, value }]
30
+ - value: el value seleccionado
31
+ - onChange: recibe el value elegido, o null al limpiar
32
+ - placeholder, disabled, loading
33
+ */
34
+ export const SingleSelect = ({
35
+ id,
36
+ className,
37
+ placeholder = "Selecciona una opción",
38
+ options = [],
39
+ onChange,
40
+ loading = false,
41
+ value = "",
42
+ disabled = false,
43
+ }) => {
44
+ const [isOpen, setIsOpen] = useState(false);
45
+ const [selectedValue, setSelectedValue] = useState(value);
46
+ const [inputValue, setInputValue] = useState("");
47
+
48
+ const wrapperRef = useRef(null);
49
+ const inputRef = useRef(null);
50
+
51
+ const selectedOption = options.find(
52
+ (option) => `${option?.value}` === `${selectedValue}`
53
+ );
54
+
55
+ const filteredOptions = loading
56
+ ? []
57
+ : options.filter((option) =>
58
+ (option?.label ?? "").toLowerCase().includes(inputValue.toLowerCase())
59
+ );
60
+
61
+ const handleSelect = (option) => {
62
+ setSelectedValue(option?.value);
63
+ setInputValue("");
64
+ onChange?.(option?.value);
65
+ setIsOpen(false);
66
+ };
67
+
68
+ const clearSelected = () => {
69
+ setSelectedValue("");
70
+ setInputValue("");
71
+ onChange?.(null);
72
+ };
73
+
74
+ useEffect(() => {
75
+ const handleClickOutside = (event) => {
76
+ if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
77
+ setIsOpen(false);
78
+ }
79
+ };
80
+
81
+ document.addEventListener("mousedown", handleClickOutside);
82
+ return () => document.removeEventListener("mousedown", handleClickOutside);
83
+ }, []);
84
+
85
+ // Al deshabilitarse se limpia: un nivel de cascada que se apaga no puede
86
+ // quedarse mostrando la elección anterior, que ya no significa nada.
87
+ useEffect(() => {
88
+ if (disabled) {
89
+ setSelectedValue("");
90
+ setInputValue("");
91
+ }
92
+ }, [disabled]);
93
+
94
+ useEffect(() => {
95
+ setSelectedValue(value);
96
+ }, [value]);
97
+
98
+ return (
99
+ <SelectWrapper id={id} className={className} ref={wrapperRef}>
100
+ <SelectBase
101
+ disabled={disabled}
102
+ className="selectBase"
103
+ onClick={() => {
104
+ if (!disabled && !isOpen) setIsOpen(true);
105
+ }}
106
+ >
107
+ <div>
108
+ {selectedOption ? (
109
+ <SelectedOptionItem title={selectedOption?.label}>
110
+ <p>{selectedOption?.label}</p>
111
+ </SelectedOptionItem>
112
+ ) : null}
113
+
114
+ <input
115
+ type="text"
116
+ placeholder={selectedOption ? "" : placeholder}
117
+ value={inputValue}
118
+ disabled={disabled}
119
+ ref={inputRef}
120
+ onChange={(event) => setInputValue(event.target.value)}
121
+ onFocus={() => {
122
+ if (!isOpen) setIsOpen(true);
123
+ }}
124
+ onKeyDown={(event) => {
125
+ const esBorrar = event.key === "Backspace";
126
+ const vacio = (inputRef.current?.value || "") === "";
127
+
128
+ if (!isOpen) setIsOpen(true);
129
+
130
+ // Borrar con el campo vacío deshace la elección, que es lo que
131
+ // espera quien escribe para cambiarla.
132
+ if (esBorrar && vacio && selectedValue !== "") clearSelected();
133
+
134
+ if (event.key === "Enter" && filteredOptions.length > 0) {
135
+ event.preventDefault();
136
+ handleSelect(filteredOptions[0]);
137
+ }
138
+ }}
139
+ onBlur={() => {
140
+ setTimeout(() => {
141
+ if (
142
+ wrapperRef.current &&
143
+ !wrapperRef.current.contains(document.activeElement)
144
+ ) {
145
+ setIsOpen(false);
146
+ }
147
+ }, 0);
148
+ }}
149
+ />
150
+ </div>
151
+
152
+ <Arrow aria-hidden="true">▼</Arrow>
153
+ </SelectBase>
154
+
155
+ <Options open={isOpen} data-testid="options">
156
+ {filteredOptions.length > 0 ? (
157
+ filteredOptions.map((option) => (
158
+ <OptionItem
159
+ key={option?.value}
160
+ selected={`${option?.value}` === `${selectedValue}`}
161
+ onClick={() => handleSelect(option)}
162
+ className={
163
+ inputValue.trim() !== "" && option === filteredOptions[0]
164
+ ? "first"
165
+ : ""
166
+ }
167
+ tabIndex={-1}
168
+ >
169
+ {option?.label}
170
+ </OptionItem>
171
+ ))
172
+ ) : (
173
+ <OptionItem
174
+ disabled
175
+ style={{ pointerEvents: "none", opacity: 0.5 }}
176
+ >
177
+ {loading ? "Cargando…" : "No se encontraron elementos"}
178
+ </OptionItem>
179
+ )}
180
+ </Options>
181
+ </SelectWrapper>
182
+ );
183
+ };