contentoh-components-library 21.6.59 → 21.6.61

package/dist/components/organisms/ServicesNavigation/ServicesRail.js

@@ -0,0 +1,705 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ServicesRail = exports.RAIL_WIDTH = exports.RAIL_COLLAPSED_WIDTH = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+
+var _MenuOpen = _interopRequireDefault(require("@mui/icons-material/MenuOpen"));
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _ui = require("./ui");
+
+var _model = require("./model");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Lista lateral de servicios: reemplaza a la barra de pestañas.
+
+  - Solo muestra los servicios que el producto tiene contratados.
+  - «Resumen» va primero: el panorama de todos los servicios.
+  - Los servicios van en bloques fijos (Textos, Imágenes...). No se reordenan
+    por estatus: cada uno queda siempre en el mismo lugar.
+  - «Míos / Todos»: por omisión, solo lo que la persona trabaja. Aparece solo
+    cuando sirve (trabaja algunos servicios del producto, no todos).
+  - El buscador aparece cuando hay más de 8 servicios a la vista.
+  - Se contrae a una columna de íconos para dejarle el ancho al editor.
+  - `side`: de qué lado de la pantalla va («left» o «right»). Del lado derecho
+    es el espejo del izquierdo: borde, marca del servicio abierto, flechas de
+    contraer y globos de ayuda cambian de lado.
+*/
+var RAIL_WIDTH = 256;
+exports.RAIL_WIDTH = RAIL_WIDTH;
+var RAIL_COLLAPSED_WIDTH = 64;
+exports.RAIL_COLLAPSED_WIDTH = RAIL_COLLAPSED_WIDTH;
+var SEARCH_THRESHOLD = 8;
+var EXPAND_ALL_THRESHOLD = 12;
+
+var CountBadge = function CountBadge(_ref) {
+  var children = _ref.children,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    component: "span",
+    sx: {
+      minWidth: 20,
+      height: 18,
+      px: 0.75,
+      borderRadius: "9px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: _ui.FONT_STACK,
+      fontSize: 11,
+      fontWeight: 700,
+      bgcolor: active ? _ui.COLORS.s5 : _ui.COLORS.s2,
+      color: active ? _ui.COLORS.white : _ui.COLORS.s4
+    },
+    children: children
+  });
+};
+
+var FilterToggle = function FilterToggle(_ref2) {
+  var value = _ref2.value,
+      onChange = _ref2.onChange,
+      mineCount = _ref2.mineCount,
+      allCount = _ref2.allCount;
+  var options = [{
+    key: "mine",
+    label: "Míos",
+    count: mineCount
+  }, {
+    key: "all",
+    label: "Todos",
+    count: allCount
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    role: "group",
+    "aria-label": "Qu\xE9 servicios ver",
+    sx: {
+      display: "flex",
+      p: "3px",
+      mx: 2,
+      mb: 1.5,
+      bgcolor: _ui.COLORS.s2,
+      borderRadius: "18px"
+    },
+    children: options.map(function (option) {
+      var active = option.key === value;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+        "aria-pressed": active,
+        onClick: function onClick() {
+          return onChange(option.key);
+        },
+        sx: {
+          flex: 1,
+          height: 28,
+          gap: 0.75,
+          borderRadius: "15px",
+          fontFamily: _ui.FONT_STACK,
+          fontSize: 13,
+          fontWeight: active ? 700 : 400,
+          color: active ? _ui.COLORS.s5 : _ui.COLORS.s4,
+          bgcolor: active ? _ui.COLORS.white : "transparent",
+          boxShadow: active ? "0 1px 3px rgba(80, 61, 102, 0.18)" : "none",
+          transition: "background-color 120ms, box-shadow 120ms"
+        },
+        children: [option.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
+          active: active,
+          children: option.count
+        })]
+      }, option.key);
+    })
+  });
+};
+
+var itemSx = function itemSx(active) {
+  var _before;
+
+  var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "left";
+  return {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    gap: 1.25,
+    height: 36,
+    pl: 1.5,
+    pr: 1,
+    borderRadius: "8px",
+    position: "relative",
+    textAlign: "left",
+    bgcolor: active ? _ui.COLORS.s2 : "transparent",
+    "&:hover": {
+      bgcolor: _ui.COLORS.s2
+    },
+    "&::before": (_before = {
+      content: '""',
+      position: "absolute"
+    }, (0, _defineProperty2.default)(_before, side, 0), (0, _defineProperty2.default)(_before, "top", 8), (0, _defineProperty2.default)(_before, "bottom", 8), (0, _defineProperty2.default)(_before, "width", 3), (0, _defineProperty2.default)(_before, "borderRadius", "2px"), (0, _defineProperty2.default)(_before, "bgcolor", active ? _ui.COLORS.magenta_s2 : "transparent"), _before)
+  };
+};
+
+var ItemLabel = function ItemLabel(_ref3) {
+  var active = _ref3.active,
+      children = _ref3.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+    sx: {
+      flex: 1,
+      minWidth: 0,
+      fontFamily: _ui.FONT_STACK,
+      fontSize: 14,
+      fontWeight: active ? 700 : 400,
+      color: active ? _ui.COLORS.s5 : _ui.COLORS.color_gray,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    children: children
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Lista completa                                                           */
+
+/* ------------------------------------------------------------------------ */
+
+
+var ExpandedRail = function ExpandedRail(_ref4) {
+  var _services$find;
+
+  var services = _ref4.services,
+      visible = _ref4.visible,
+      selected = _ref4.selected,
+      onSelect = _ref4.onSelect,
+      userId = _ref4.userId,
+      filter = _ref4.filter,
+      onFilterChange = _ref4.onFilterChange,
+      showFilter = _ref4.showFilter,
+      onCollapse = _ref4.onCollapse,
+      onClose = _ref4.onClose,
+      side = _ref4.side;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      query = _useState2[0],
+      setQuery = _useState2[1];
+
+  var text = query.trim().toLowerCase();
+  var matches = text ? visible.filter(function (service) {
+    return service.display_name.toLowerCase().includes(text);
+  }) : visible;
+  var groups = (0, _model.groupServices)(matches);
+  var pendingCount = services.filter(function (service) {
+    return (0, _model.isPendingFor)(service, userId);
+  }).length;
+  /*
+    Bloques abiertos: todos si caben; si no, el del servicio abierto y los que
+    tienen algo que le toca a la persona. Al buscar se abren todos.
+  */
+  // `visible` es un arreglo nuevo en cada render: se compara por sus nombres.
+
+  var visibleKey = visible.map(function (service) {
+    return service.service_name;
+  }).join(",");
+  var defaultOpen = (0, _react.useMemo)(function () {
+    var all = (0, _model.groupServices)(visible);
+    if (visible.length <= EXPAND_ALL_THRESHOLD) return all.map(function (group) {
+      return group.key;
+    });
+    return all.filter(function (group) {
+      return group.services.some(function (service) {
+        return service.service_name === selected || (0, _model.isPendingFor)(service, userId);
+      });
+    }).map(function (group) {
+      return group.key;
+    }); // Solo al cambiar lo que se ve: abrir un servicio no vuelve a cerrar bloques.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibleKey, userId]);
+
+  var _useState3 = (0, _react.useState)(defaultOpen),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    return setOpen(defaultOpen);
+  }, [defaultOpen]); // Si se abre un servicio de un bloque cerrado (desde el Resumen), se abre.
+
+  var selectedGroup = (_services$find = services.find(function (service) {
+    return service.service_name === selected;
+  })) === null || _services$find === void 0 ? void 0 : _services$find.group;
+  (0, _react.useEffect)(function () {
+    if (selectedGroup) setOpen(function (prev) {
+      return prev.includes(selectedGroup) ? prev : [].concat((0, _toConsumableArray2.default)(prev), [selectedGroup]);
+    });
+  }, [selectedGroup]);
+
+  var toggle = function toggle(key) {
+    return setOpen(function (prev) {
+      return prev.includes(key) ? prev.filter(function (item) {
+        return item !== key;
+      }) : [].concat((0, _toConsumableArray2.default)(prev), [key]);
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 2,
+        pt: 2,
+        pb: 1.5
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          flex: 1,
+          fontFamily: _ui.TITLE_STACK,
+          fontWeight: 600,
+          fontSize: 16,
+          color: _ui.COLORS.s5
+        },
+        children: "Servicios"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
+        children: services.length
+      }), onCollapse && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Contraer la lista",
+        arrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Contraer la lista de servicios",
+          size: "small",
+          onClick: onCollapse,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOpen.default, {
+            sx: {
+              fontSize: 20,
+              color: _ui.COLORS.s4,
+              transform: side === "right" ? "scaleX(-1)" : "none"
+            }
+          })
+        })
+      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        "aria-label": "Cerrar la lista de servicios",
+        size: "small",
+        onClick: onClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+          sx: {
+            fontSize: 20,
+            color: _ui.COLORS.s4
+          }
+        })
+      })]
+    }), showFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterToggle, {
+      value: filter,
+      onChange: onFilterChange,
+      mineCount: services.filter(function (service) {
+        return (0, _model.isMine)(service, userId);
+      }).length,
+      allCount: services.length
+    }), visible.length > SEARCH_THRESHOLD && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        px: 2,
+        mb: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+        size: "small",
+        fullWidth: true,
+        placeholder: "Buscar servicio\u2026",
+        value: query,
+        onChange: function onChange(event) {
+          return setQuery(event.target.value);
+        },
+        sx: _ui.fieldSx,
+        InputProps: {
+          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+            position: "start",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
+              sx: {
+                fontSize: 18,
+                color: _ui.COLORS.s4
+              }
+            })
+          })
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        px: 1,
+        pb: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+        onClick: function onClick() {
+          return onSelect(_model.SUMMARY);
+        },
+        "aria-current": selected === _model.SUMMARY ? "true" : undefined,
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemSx(selected === _model.SUMMARY, side)), {}, {
+          mb: 0.5
+        }),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
+          icon: "summary",
+          sx: {
+            color: selected === _model.SUMMARY ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemLabel, {
+          active: selected === _model.SUMMARY,
+          children: "Resumen"
+        }), pendingCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CountBadge, {
+          children: pendingCount
+        })]
+      }), groups.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          py: 3,
+          textAlign: "center",
+          fontFamily: _ui.FONT_STACK,
+          fontSize: 13,
+          color: _ui.COLORS.s4
+        },
+        children: "Sin coincidencias"
+      }), groups.map(function (group) {
+        var isOpen = Boolean(text) || open.includes(group.key);
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            mt: 0.5
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+            onClick: function onClick() {
+              return toggle(group.key);
+            },
+            "aria-expanded": isOpen,
+            sx: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              px: 1.5,
+              py: 0.75,
+              borderRadius: "6px",
+              "&:hover": {
+                bgcolor: _ui.COLORS.s1
+              }
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                flex: 1,
+                textAlign: "left",
+                fontFamily: _ui.FONT_STACK,
+                fontSize: 11,
+                fontWeight: 700,
+                letterSpacing: "0.06em",
+                textTransform: "uppercase",
+                color: _ui.COLORS.s4
+              },
+              children: group.label
+            }), group.services.some(function (service) {
+              return (0, _model.isPendingFor)(service, userId);
+            }) && !isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {
+              size: 6,
+              withTooltip: false
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontFamily: _ui.FONT_STACK,
+                fontSize: 11,
+                fontWeight: 700,
+                color: _ui.COLORS.s4
+              },
+              children: group.services.length
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
+              sx: {
+                fontSize: 18,
+                color: _ui.COLORS.s4,
+                transition: "transform 150ms",
+                transform: isOpen ? "rotate(180deg)" : "none"
+              }
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
+            in: isOpen,
+            children: group.services.map(function (service) {
+              var active = service.service_name === selected;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+                onClick: function onClick() {
+                  return onSelect(service.service_name);
+                },
+                "aria-current": active ? "true" : undefined,
+                sx: itemSx(active, side),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
+                  icon: service.icon,
+                  sx: {
+                    color: active ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemLabel, {
+                  active: active,
+                  children: service.display_name
+                }), (0, _model.isPendingFor)(service, userId) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.StatusChip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _ui.serviceStatusProps)(service)), {}, {
+                  oval: true
+                }))]
+              }, service.service_name);
+            })
+          })]
+        }, group.key);
+      })]
+    }), pendingCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 2,
+        py: 1.25,
+        borderTop: "1px solid ".concat(_ui.COLORS.s2)
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.PendingDot, {
+        withTooltip: false
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        sx: {
+          fontFamily: _ui.FONT_STACK,
+          fontSize: 12,
+          color: _ui.COLORS.s4
+        },
+        children: ["Te toca a ti \xB7 ", pendingCount, " ", pendingCount === 1 ? "servicio" : "servicios"]
+      })]
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+/* Lista contraída: solo íconos                                             */
+
+/* ------------------------------------------------------------------------ */
+
+
+var CollapsedRail = function CollapsedRail(_ref5) {
+  var visible = _ref5.visible,
+      selected = _ref5.selected,
+      onSelect = _ref5.onSelect,
+      userId = _ref5.userId,
+      onExpand = _ref5.onExpand,
+      side = _ref5.side;
+  var groups = (0, _model.groupServices)(visible); // Los globos de ayuda salen hacia el editor, no hacia el borde de la pantalla.
+
+  var tooltipPlacement = side === "right" ? "left" : "right";
+
+  var iconButtonSx = function iconButtonSx(active) {
+    var _before2;
+
+    return {
+      width: 44,
+      height: 40,
+      borderRadius: "8px",
+      position: "relative",
+      bgcolor: active ? _ui.COLORS.s2 : "transparent",
+      "&:hover": {
+        bgcolor: _ui.COLORS.s2
+      },
+      "&::before": (_before2 = {
+        content: '""',
+        position: "absolute"
+      }, (0, _defineProperty2.default)(_before2, side, -10), (0, _defineProperty2.default)(_before2, "top", 8), (0, _defineProperty2.default)(_before2, "bottom", 8), (0, _defineProperty2.default)(_before2, "width", 3), (0, _defineProperty2.default)(_before2, "borderRadius", "2px"), (0, _defineProperty2.default)(_before2, "bgcolor", active ? _ui.COLORS.magenta_s2 : "transparent"), _before2)
+    };
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        pt: 1.5,
+        pb: 1
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Mostrar la lista de servicios",
+        arrow: true,
+        placement: tooltipPlacement,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          "aria-label": "Mostrar la lista de servicios",
+          onClick: onExpand,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOpen.default, {
+            sx: {
+              fontSize: 22,
+              color: _ui.COLORS.s4,
+              transform: side === "right" ? "none" : "scaleX(-1)"
+            }
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 0.5,
+        pb: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Resumen",
+        arrow: true,
+        placement: tooltipPlacement,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ButtonBase, {
+          "aria-label": "Resumen",
+          "aria-current": selected === _model.SUMMARY ? "true" : undefined,
+          onClick: function onClick() {
+            return onSelect(_model.SUMMARY);
+          },
+          sx: iconButtonSx(selected === _model.SUMMARY),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
+            icon: "summary",
+            sx: {
+              fontSize: 22,
+              color: selected === _model.SUMMARY ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
+            }
+          })
+        })
+      }), groups.map(function (group) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 0.5,
+            pt: 0.75,
+            mt: 0.25,
+            borderTop: "1px solid ".concat(_ui.COLORS.s2),
+            width: 40
+          },
+          children: group.services.map(function (service) {
+            var _statusName;
+
+            var active = service.service_name === selected;
+            var pending = (0, _model.isPendingFor)(service, userId);
+            var label = [service.display_name, (_statusName = (0, _ui.statusName)(service.status)) !== null && _statusName !== void 0 ? _statusName : service.status, pending ? "Te toca a ti" : null].filter(Boolean).join(" · ");
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: label,
+              arrow: true,
+              placement: tooltipPlacement,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
+                "aria-label": label,
+                "aria-current": active ? "true" : undefined,
+                onClick: function onClick() {
+                  return onSelect(service.service_name);
+                },
+                sx: iconButtonSx(active),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.ServiceIcon, {
+                  icon: service.icon,
+                  sx: {
+                    fontSize: 22,
+                    color: active ? _ui.COLORS.magenta_s2 : _ui.COLORS.s4
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  component: "span",
+                  sx: {
+                    position: "absolute",
+                    top: 5,
+                    right: 6,
+                    width: 9,
+                    height: 9,
+                    borderRadius: "50%",
+                    bgcolor: (0, _ui.serviceStatusColor)(service),
+                    border: "2px solid ".concat(active ? _ui.COLORS.s2 : _ui.COLORS.white)
+                  }
+                }), pending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  component: "span",
+                  sx: {
+                    position: "absolute",
+                    bottom: 4,
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    width: 14,
+                    height: 3,
+                    borderRadius: "2px",
+                    bgcolor: _ui.COLORS.magenta_s2
+                  }
+                })]
+              })
+            }, service.service_name);
+          })
+        }, group.key);
+      })]
+    })]
+  });
+};
+/* ------------------------------------------------------------------------ */
+
+
+var ServicesRail = function ServicesRail(_ref6) {
+  var _ref7;
+
+  var services = _ref6.services,
+      selected = _ref6.selected,
+      onSelect = _ref6.onSelect,
+      userId = _ref6.userId,
+      filter = _ref6.filter,
+      onFilterChange = _ref6.onFilterChange,
+      showFilter = _ref6.showFilter,
+      _ref6$collapsed = _ref6.collapsed,
+      collapsed = _ref6$collapsed === void 0 ? false : _ref6$collapsed,
+      onToggleCollapsed = _ref6.onToggleCollapsed,
+      onClose = _ref6.onClose,
+      _ref6$variant = _ref6.variant,
+      variant = _ref6$variant === void 0 ? "rail" : _ref6$variant,
+      _ref6$side = _ref6.side,
+      side = _ref6$side === void 0 ? "left" : _ref6$side;
+  var visible = showFilter && filter === "mine" ? services.filter(function (service) {
+    return (0, _model.isMine)(service, userId) || service.service_name === selected;
+  }) : services;
+  var isRail = variant === "rail";
+  var width = isRail ? collapsed ? RAIL_COLLAPSED_WIDTH : RAIL_WIDTH : "100%";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    component: "nav",
+    "aria-label": "Servicios del producto",
+    sx: (_ref7 = {
+      width: width,
+      flexShrink: 0,
+      height: "100%",
+      minHeight: 0,
+      display: "flex",
+      flexDirection: "column",
+      bgcolor: _ui.COLORS.white
+    }, (0, _defineProperty2.default)(_ref7, side === "right" ? "borderLeft" : "borderRight", isRail ? "1px solid ".concat(_ui.COLORS.s2) : "none"), (0, _defineProperty2.default)(_ref7, "transition", "width 160ms ease"), (0, _defineProperty2.default)(_ref7, "overflow", "hidden"), (0, _defineProperty2.default)(_ref7, "fontFamily", _ui.FONT_STACK), _ref7),
+    children: isRail && collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CollapsedRail, {
+      visible: visible,
+      selected: selected,
+      onSelect: onSelect,
+      userId: userId,
+      onExpand: onToggleCollapsed,
+      side: side
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandedRail, {
+      services: services,
+      visible: visible,
+      selected: selected,
+      onSelect: onSelect,
+      userId: userId,
+      filter: filter,
+      onFilterChange: onFilterChange,
+      showFilter: showFilter,
+      onCollapse: isRail ? onToggleCollapsed : undefined,
+      onClose: onClose,
+      side: side
+    })
+  });
+};
+
+exports.ServicesRail = ServicesRail;