@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDSidePanel.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import { useState, useEffect } from "react";
import { Fade } from "react-awesome-reveal";
import HUDTyper from "./HUDTyper.js";
import HUDIcon from "./HUDIcon.js";
function HUDSidePanel(sidePanelConfigurationSettings) {
  var _sidePanelConfigurati = sidePanelConfigurationSettings.sidePanelAttachmentContainerConfigurationSettings,
    sidePanelAttachmentContainerConfigurationSettings = _sidePanelConfigurati === void 0 ? {} : _sidePanelConfigurati,
    _sidePanelConfigurati2 = sidePanelConfigurationSettings.sidePanelOuterContainerConfigurationSettings,
    sidePanelOuterContainerConfigurationSettings = _sidePanelConfigurati2 === void 0 ? {} : _sidePanelConfigurati2,
    _sidePanelConfigurati3 = sidePanelConfigurationSettings.sidePanelContainerConfigurationSettings,
    sidePanelContainerConfigurationSettings = _sidePanelConfigurati3 === void 0 ? {} : _sidePanelConfigurati3,
    _sidePanelConfigurati4 = sidePanelConfigurationSettings.sidePanelHeaderDividerConfigurationSettings,
    sidePanelHeaderDividerConfigurationSettings = _sidePanelConfigurati4 === void 0 ? {} : _sidePanelConfigurati4,
    _sidePanelConfigurati5 = sidePanelConfigurationSettings.sidePanelFooterDividerConfigurationSettings,
    sidePanelFooterDividerConfigurationSettings = _sidePanelConfigurati5 === void 0 ? {} : _sidePanelConfigurati5,
    _sidePanelConfigurati6 = sidePanelConfigurationSettings.sidePanelTopHeaderConfigurationSettings,
    sidePanelTopHeaderConfigurationSettings = _sidePanelConfigurati6 === void 0 ? {} : _sidePanelConfigurati6,
    _sidePanelConfigurati7 = sidePanelConfigurationSettings.sidePanelHeaderConfigurationSettings,
    sidePanelHeaderConfigurationSettings = _sidePanelConfigurati7 === void 0 ? {} : _sidePanelConfigurati7,
    _sidePanelConfigurati8 = sidePanelConfigurationSettings.sidePanelFooterConfigurationSettings,
    sidePanelFooterConfigurationSettings = _sidePanelConfigurati8 === void 0 ? {} : _sidePanelConfigurati8,
    _sidePanelConfigurati9 = sidePanelConfigurationSettings.sidePanelBodyConfigurationSettings,
    sidePanelBodyConfigurationSettings = _sidePanelConfigurati9 === void 0 ? {} : _sidePanelConfigurati9,
    _sidePanelConfigurati10 = sidePanelConfigurationSettings.sidePanelHeaderTitleLabelConfigurationSettings,
    sidePanelHeaderTitleLabelConfigurationSettings = _sidePanelConfigurati10 === void 0 ? {} : _sidePanelConfigurati10,
    _sidePanelConfigurati11 = sidePanelConfigurationSettings.sidePanelHeaderLogoConfigurationSettings,
    sidePanelHeaderLogoConfigurationSettings = _sidePanelConfigurati11 === void 0 ? {} : _sidePanelConfigurati11,
    _sidePanelConfigurati12 = sidePanelConfigurationSettings.sidePanelFooterButtonUnderlineConfigurationSettings,
    sidePanelFooterButtonUnderlineConfigurationSettings = _sidePanelConfigurati12 === void 0 ? {} : _sidePanelConfigurati12,
    _sidePanelConfigurati13 = sidePanelConfigurationSettings.sidePanelFooterButtonLabelConfigurationSettings,
    sidePanelFooterButtonLabelConfigurationSettings = _sidePanelConfigurati13 === void 0 ? {} : _sidePanelConfigurati13,
    _sidePanelConfigurati14 = sidePanelConfigurationSettings.sidePanelMinimizeTabButtonConfigurationSettings,
    sidePanelMinimizeTabButtonConfigurationSettings = _sidePanelConfigurati14 === void 0 ? {} : _sidePanelConfigurati14,
    _sidePanelConfigurati15 = sidePanelConfigurationSettings.sidePanelFooterButtonIconConfigurationSettings,
    sidePanelFooterButtonIconConfigurationSettings = _sidePanelConfigurati15 === void 0 ? {} : _sidePanelConfigurati15,
    _sidePanelConfigurati16 = sidePanelConfigurationSettings.sidePanelButtonUnderlineConfigurationSettings,
    sidePanelButtonUnderlineConfigurationSettings = _sidePanelConfigurati16 === void 0 ? {} : _sidePanelConfigurati16,
    _sidePanelConfigurati17 = sidePanelConfigurationSettings.sidePanelButtonIndicatorConfigurationSettings,
    sidePanelButtonIndicatorConfigurationSettings = _sidePanelConfigurati17 === void 0 ? {} : _sidePanelConfigurati17,
    _sidePanelConfigurati18 = sidePanelConfigurationSettings.sidePanelFooterButtonConfigurationSettings,
    sidePanelFooterButtonConfigurationSettings = _sidePanelConfigurati18 === void 0 ? {} : _sidePanelConfigurati18,
    _sidePanelConfigurati19 = sidePanelConfigurationSettings.sidePanelButtonLabelConfigurationSettings,
    sidePanelButtonLabelConfigurationSettings = _sidePanelConfigurati19 === void 0 ? {} : _sidePanelConfigurati19,
    _sidePanelConfigurati20 = sidePanelConfigurationSettings.sidePanelButtonIconConfigurationSettings,
    sidePanelButtonIconConfigurationSettings = _sidePanelConfigurati20 === void 0 ? {} : _sidePanelConfigurati20,
    _sidePanelConfigurati21 = sidePanelConfigurationSettings.sidePanelButtonConfigurationSettings,
    sidePanelButtonConfigurationSettings = _sidePanelConfigurati21 === void 0 ? {} : _sidePanelConfigurati21,
    _sidePanelConfigurati22 = sidePanelConfigurationSettings.sidePanelButtonBackgroundHoverColor,
    sidePanelButtonBackgroundHoverColor = _sidePanelConfigurati22 === void 0 ? "rgba(227, 37, 37, 0.769)" : _sidePanelConfigurati22,
    _sidePanelConfigurati23 = sidePanelConfigurationSettings.sidePanelButtonBackgroundColor,
    sidePanelButtonBackgroundColor = _sidePanelConfigurati23 === void 0 ? "rgba(37, 37, 37, 0.69)" : _sidePanelConfigurati23,
    _sidePanelConfigurati24 = sidePanelConfigurationSettings.sidePanelButtonLabelHoverColor,
    sidePanelButtonLabelHoverColor = _sidePanelConfigurati24 === void 0 ? "white" : _sidePanelConfigurati24,
    _sidePanelConfigurati25 = sidePanelConfigurationSettings.sidePanelButtonLabelColor,
    sidePanelButtonLabelColor = _sidePanelConfigurati25 === void 0 ? "#e3e3e3" : _sidePanelConfigurati25,
    _sidePanelConfigurati26 = sidePanelConfigurationSettings.sidePanelFooterButtonBackgroundHoverColor,
    sidePanelFooterButtonBackgroundHoverColor = _sidePanelConfigurati26 === void 0 ? "transparent" : _sidePanelConfigurati26,
    _sidePanelConfigurati27 = sidePanelConfigurationSettings.sidePanelFooterButtonBackgroundColor,
    sidePanelFooterButtonBackgroundColor = _sidePanelConfigurati27 === void 0 ? "transparent" : _sidePanelConfigurati27,
    _sidePanelConfigurati28 = sidePanelConfigurationSettings.sidePanelFooterButtonLabelHoverColor,
    sidePanelFooterButtonLabelHoverColor = _sidePanelConfigurati28 === void 0 ? "white" : _sidePanelConfigurati28,
    _sidePanelConfigurati29 = sidePanelConfigurationSettings.sidePanelFooterButtonLabelColor,
    sidePanelFooterButtonLabelColor = _sidePanelConfigurati29 === void 0 ? "#e3e3e3" : _sidePanelConfigurati29,
    _sidePanelConfigurati30 = sidePanelConfigurationSettings.sidePanelCurrentButtonIndicatorHoverColor,
    sidePanelCurrentButtonIndicatorHoverColor = _sidePanelConfigurati30 === void 0 ? "rgba(227, 0, 0, 0.869)" : _sidePanelConfigurati30,
    _sidePanelConfigurati31 = sidePanelConfigurationSettings.sidePanelCurrentButtonIndicatorColor,
    sidePanelCurrentButtonIndicatorColor = _sidePanelConfigurati31 === void 0 ? "transparent" : _sidePanelConfigurati31,
    _sidePanelConfigurati32 = sidePanelConfigurationSettings.sidePanelCurrentFooterButtonUnderlineIndicatorColor,
    sidePanelCurrentFooterButtonUnderlineIndicatorColor = _sidePanelConfigurati32 === void 0 ? "linear-gradient(to right, rgba(169, 169, 169, 0.769), white)" : _sidePanelConfigurati32,
    _sidePanelConfigurati33 = sidePanelConfigurationSettings.sidePanelCurrentButtonUnderlineIndicatorColor,
    sidePanelCurrentButtonUnderlineIndicatorColor = _sidePanelConfigurati33 === void 0 ? "linear-gradient(to right, rgba(169, 0, 0, 0.769), red)" : _sidePanelConfigurati33,
    sidePanelLogoHoverEnterAction = sidePanelConfigurationSettings.sidePanelLogoHoverEnterAction,
    sidePanelLogoHoverExitAction = sidePanelConfigurationSettings.sidePanelLogoHoverExitAction,
    sidePanelFooterButtonAction = sidePanelConfigurationSettings.sidePanelFooterButtonAction,
    sidePanelButtonAction = sidePanelConfigurationSettings.sidePanelButtonAction,
    sidePanelLogoAction = sidePanelConfigurationSettings.sidePanelLogoAction,
    _sidePanelConfigurati34 = sidePanelConfigurationSettings.sidePanelTopHeaderContents,
    sidePanelTopHeaderContents = _sidePanelConfigurati34 === void 0 ? [] : _sidePanelConfigurati34,
    _sidePanelConfigurati35 = sidePanelConfigurationSettings.sidePanelFooterButtons,
    sidePanelFooterButtons = _sidePanelConfigurati35 === void 0 ? [] : _sidePanelConfigurati35,
    sidePanelUpperFooterContent = sidePanelConfigurationSettings.sidePanelUpperFooterContent,
    sidePanelLowerFooterContent = sidePanelConfigurationSettings.sidePanelLowerFooterContent,
    sidePanelUpperBodyContent = sidePanelConfigurationSettings.sidePanelUpperBodyContent,
    sidePanelLowerBodyContent = sidePanelConfigurationSettings.sidePanelLowerBodyContent,
    _sidePanelConfigurati36 = sidePanelConfigurationSettings.sidePanelButtons,
    sidePanelButtons = _sidePanelConfigurati36 === void 0 ? [] : _sidePanelConfigurati36,
    _sidePanelConfigurati37 = sidePanelConfigurationSettings.sidePanelStyle,
    sidePanelStyle = _sidePanelConfigurati37 === void 0 ? "HUD" : _sidePanelConfigurati37,
    _sidePanelConfigurati38 = sidePanelConfigurationSettings.sidePanelHeaderTitle,
    sidePanelHeaderTitle = _sidePanelConfigurati38 === void 0 ? "" : _sidePanelConfigurati38,
    _sidePanelConfigurati39 = sidePanelConfigurationSettings.headerTitleType,
    headerTitleType = _sidePanelConfigurati39 === void 0 ? "HUD" : _sidePanelConfigurati39,
    _sidePanelConfigurati40 = sidePanelConfigurationSettings.displayCurrentFooterButtonUnderlineIndicator,
    displayCurrentFooterButtonUnderlineIndicator = _sidePanelConfigurati40 === void 0 ? true : _sidePanelConfigurati40,
    _sidePanelConfigurati41 = sidePanelConfigurationSettings.displayCurrentButtonUnderlineIndicator,
    displayCurrentButtonUnderlineIndicator = _sidePanelConfigurati41 === void 0 ? true : _sidePanelConfigurati41,
    _sidePanelConfigurati42 = sidePanelConfigurationSettings.displayCurrentButtonIndicator,
    displayCurrentButtonIndicator = _sidePanelConfigurati42 === void 0 ? true : _sidePanelConfigurati42,
    _sidePanelConfigurati43 = sidePanelConfigurationSettings.minimizeTabPosition,
    minimizeTabPosition = _sidePanelConfigurati43 === void 0 ? "bottom-right" : _sidePanelConfigurati43,
    _sidePanelConfigurati44 = sidePanelConfigurationSettings.minimizeTabPadding,
    minimizeTabPadding = _sidePanelConfigurati44 === void 0 ? "0px" : _sidePanelConfigurati44,
    _sidePanelConfigurati45 = sidePanelConfigurationSettings.revealAnimations,
    revealAnimations = _sidePanelConfigurati45 === void 0 ? true : _sidePanelConfigurati45,
    _sidePanelConfigurati46 = sidePanelConfigurationSettings.hideType,
    hideType = _sidePanelConfigurati46 === void 0 ? "Full" : _sidePanelConfigurati46,
    setVisible = sidePanelConfigurationSettings.setVisible,
    _sidePanelConfigurati47 = sidePanelConfigurationSettings.visible,
    visible = _sidePanelConfigurati47 === void 0 ? true : _sidePanelConfigurati47,
    sidePanelRef = sidePanelConfigurationSettings.sidePanelRef,
    children = sidePanelConfigurationSettings.children,
    logo = sidePanelConfigurationSettings.logo,
    signedUser = sidePanelConfigurationSettings.signedUser,
    signedIn = sidePanelConfigurationSettings.signedIn;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    sidePanelFooterButtonHoverIndex = _useState2[0],
    setSidePanelFooterButtonHoverIndex = _useState2[1];
  var _useState3 = useState(null),
    _useState4 = _slicedToArray(_useState3, 2),
    sidePanelButtonHoverIndex = _useState4[0],
    setSidePanelButtonHoverIndex = _useState4[1];
  var sidePanelStyles = {
    sidePanelContainer: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      transition: "width 0.69s ease",
      background: "linear-gradient(to bottom, #1e1e1f, #1a1313)",
      boxShadow: "3px 1px 3px 0px rgba(0, 0, 0, 0.369)",
      borderRadius: "0rem 0.169rem 0.169rem 0rem",
      height: "100vh",
      width: hideType === "Full" && visible === false ? "0rem" : hideType !== "Full" && visible === false ? "0.569rem" : "12.69rem",
      zIndex: "6999",
      paddingRight: hideType === "Full" && visible === false ? "0rem" : hideType !== "Full" && visible === false ? "0rem" : "0.869rem",
      left: 0
    }, sidePanelContainerConfigurationSettings),
    sidePanelHeaderDivider: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      background: "rgba(127, 127, 127, 0.469)",
      height: "0.0969rem",
      width: hideType === "Full" && visible === false ? "0.00069rem" : hideType !== "Full" && visible === false ? "0rem" : "calc(100%)",
      marginRight: hideType === "Full" && visible === false ? "0.00069rem" : hideType !== "Full" && visible === false ? "0rem" : "0.69rem"
    }, sidePanelHeaderDividerConfigurationSettings),
    sidePanelFooterDivider: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      background: "rgba(127, 127, 127, 0.469)",
      height: "0.0969rem",
      width: hideType === "Full" && visible === false ? "0.00069rem" : hideType !== "Full" && visible === false ? "0rem" : "calc(100%)",
      marginRight: hideType === "Full" && visible === false ? "0.00069rem" : hideType !== "Full" && visible === false ? "0rem" : "0.69rem"
    }, sidePanelFooterDividerConfigurationSettings),
    sidePanelTopHeader: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "row",
      transition: "visibility 0.469s ease, opacity 0.569s ease",
      visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
      opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
      alignItems: "center",
      overflowX: "auto",
      background: "transparent",
      height: "auto",
      width: "calc(100%)",
      marginRight: "0.69rem",
      marginLeft: "0.69rem",
      marginTop: "0.269rem"
    }, sidePanelTopHeaderConfigurationSettings),
    sidePanelHeader: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "row",
      transition: "visibility 0.469s ease, opacity 0.569s ease",
      visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
      opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
      alignItems: "center",
      overflowY: "auto",
      background: "transparent",
      height: "5.69rem",
      width: "calc(100%)",
      marginRight: "0.69rem",
      marginLeft: "0.69rem"
    }, sidePanelHeaderConfigurationSettings),
    sidePanelFooter: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      transition: "visibility 0.469s ease, opacity 0.569s ease",
      visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
      opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
      overflowY: "auto",
      background: "transparent",
      height: "9.69rem",
      width: "calc(100%)",
      marginRight: "0.69rem",
      marginLeft: "0.69rem"
    }, sidePanelFooterConfigurationSettings),
    sidePanel: _objectSpread({
      position: "relative",
      display: "flex",
      flexDirection: "column",
      transition: "visibility 0.469s ease, opacity 0.569s ease",
      visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
      opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
      overflowY: "auto",
      background: "transparent",
      height: "calc(71.69%)",
      width: "calc(100%)",
      marginRight: "0.69rem",
      marginTop: "0.69rem"
    }, sidePanelBodyConfigurationSettings),
    sidePanelHeaderTitleLabel: _objectSpread({
      position: "relative",
      display: "flex",
      flexShrink: 0,
      transition: "visibility 0.469s ease, opacity 0.569s ease",
      visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
      opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
      background: "transparent",
      color: "#e3e3e3",
      userSelect: "none",
      wordWrap: "break-word",
      fontWeight: "569",
      fontSize: "0.8169rem",
      height: "auto",
      width: "calc(87.69%)",
      marginRight: "0.69rem",
      marginLeft: "0.69rem"
    }, sidePanelHeaderTitleLabelConfigurationSettings),
    sidePanelLogo: _objectSpread({
      position: "relative",
      display: "flex",
      transition: "visibility 0.469s ease, opacity 0.569s ease",
      visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
      opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
      background: "transparent",
      borderRadius: 0,
      border: "none",
      objectFit: "scale-down",
      height: "2.169rem",
      width: "2.69rem"
    }, sidePanelHeaderLogoConfigurationSettings)
  };
  var toggleVisibility = function toggleVisibility() {
    if (typeof setVisible !== "function") {
      return;
    }
    setVisible(!visible);
    return;
  };
  var getMinimizeButtonAlignmentStyles = function getMinimizeButtonAlignmentStyles() {
    switch (minimizeTabPosition) {
      case "bottom-right":
        return {
          marginLeft: minimizeTabPadding,
          marginTop: "53.69rem"
        };
      case "top-right":
        return {
          marginLeft: minimizeTabPadding,
          marginTop: "0rem"
        };
      case "bottom-left":
        return {
          marginRight: minimizeTabPadding,
          marginTop: "53.69rem"
        };
      case "top-left":
        return {
          marginRight: minimizeTabPadding,
          marginTop: "0rem"
        };
      case "center-right":
        return {
          marginRight: minimizeTabPadding,
          marginTop: "".concat(53.69 / 2, "rem")
        };
      case "center-left":
        return {
          marginLeft: minimizeTabPadding,
          marginTop: "".concat(53.69 / 2, "rem")
        };
      case "right":
        return {
          marginLeft: minimizeTabPadding
        };
      case "left":
        return {
          marginRight: minimizeTabPadding
        };
      default:
        return {
          marginLeft: minimizeTabPadding
        };
    }
  };
  var minimizeButtonAlignmentStyles = getMinimizeButtonAlignmentStyles();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "fixed",
      display: "flex",
      alignItems: "flex-start",
      height: "100vh",
      zIndex: 12699,
      left: 0,
      top: 0
    }, sidePanelOuterContainerConfigurationSettings)
  }, /*#__PURE__*/React.createElement("div", {
    ref: sidePanelRef,
    style: sidePanelStyles.sidePanelContainer
  }, sidePanelTopHeaderContents.length > 0 ? /*#__PURE__*/React.createElement("div", {
    className: "invisa-scroller",
    style: sidePanelStyles.sidePanelTopHeader
  }, sidePanelTopHeaderContents.map(function (sidePanelTopHeaderContent, index) {
    return sidePanelTopHeaderContent;
  })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("div", {
    className: "invisa-scroller",
    style: sidePanelStyles.sidePanelHeader
  }, logo !== undefined ? /*#__PURE__*/React.createElement(HUDIcon, {
    iconConfigurationSettings: sidePanelStyles.sidePanelLogo,
    svg: logo,
    onMouseEnter: sidePanelLogoHoverEnterAction,
    onMouseLeave: sidePanelLogoHoverExitAction,
    onClick: sidePanelLogoAction
  }) : /*#__PURE__*/React.createElement(React.Fragment, null), headerTitleType === "HUD" ? /*#__PURE__*/React.createElement("label", {
    style: sidePanelStyles.sidePanelHeaderTitleLabel
  }, /*#__PURE__*/React.createElement(HUDTyper, {
    speed: 3
  }, sidePanelHeaderTitle)) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement("div", {
    style: sidePanelStyles.sidePanelHeaderDivider
  }), /*#__PURE__*/React.createElement("div", {
    className: "invisa-scroller",
    style: sidePanelStyles.sidePanel
  }, sidePanelUpperBodyContent ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelUpperBodyContent) : /*#__PURE__*/React.createElement(React.Fragment, null), sidePanelButtons.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelButtons.map(function (sidePanelButton, index) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      key: index,
      style: {
        position: "relative",
        display: "flex",
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "center",
        height: "auto",
        width: "calc(100%)"
      }
    }, displayCurrentButtonIndicator ? /*#__PURE__*/React.createElement("div", {
      key: index + 1,
      style: _objectSpread({
        position: "relative",
        display: "flex",
        flexDirection: "row",
        transition: "background 0.569s ease, width 0.69s ease",
        borderRadius: "0.69rem",
        background: sidePanelButtonHoverIndex === index ? sidePanelCurrentButtonIndicatorHoverColor : sidePanelCurrentButtonIndicatorColor,
        height: "2rem",
        width: sidePanelButtonHoverIndex === index ? "0.69rem" : "0rem",
        marginBottom: "0.269rem",
        left: -3
      }, sidePanelButtonIndicatorConfigurationSettings)
    }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("div", {
      key: index + 2,
      style: _objectSpread({
        position: "relative",
        display: "flex",
        flexDirection: "row",
        transition: "background 0.69s ease-in, scale 4.69s ease",
        scale: sidePanelButtonHoverIndex === index ? "1.069" : "1",
        background: sidePanelButtonHoverIndex === index ? sidePanelButtonBackgroundHoverColor : sidePanelButtonBackgroundColor,
        borderRadius: "0.869rem",
        width: "calc(100%)",
        cursor: "pointer",
        padding: "0.69rem",
        marginBottom: "0.269rem",
        marginRight: "0.69rem",
        marginLeft: "0.69rem"
      }, sidePanelButtonConfigurationSettings),
      onMouseLeave: function onMouseLeave() {
        setSidePanelButtonHoverIndex(null);
        return;
      },
      onMouseEnter: function onMouseEnter() {
        setSidePanelButtonHoverIndex(index);
        return;
      },
      onClick: function onClick() {
        if (sidePanelButtonAction !== undefined) {
          sidePanelButtonAction(sidePanelButton, index);
        }
        if (sidePanelButton.hudAction !== undefined) {
          sidePanelButton.hudAction(sidePanelButton, index);
        }
        return;
      }
    }, sidePanelButton.iconContent ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelButton.iconContent) : /*#__PURE__*/React.createElement(React.Fragment, null), sidePanelButton.icon !== undefined ? /*#__PURE__*/React.createElement(HUDIcon, {
      iconConfigurationSettings: _objectSpread({
        position: "relative",
        display: "flex",
        transition: "visibility 0.469s ease, opacity 0.569s ease",
        visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
        opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
        background: "transparent",
        borderRadius: 0,
        border: "none",
        objectFit: "scale-down",
        height: "1.169rem",
        width: "1.369rem"
      }, sidePanelButtonIconConfigurationSettings),
      color: sidePanelButtonHoverIndex === index && sidePanelButton.iconHoverColor ? sidePanelButton.iconHoverColor : sidePanelButton.iconColor,
      name: sidePanelButtonHoverIndex === index && sidePanelButton.iconHoverName ? sidePanelButton.iconHoverName : sidePanelButton.iconName,
      svg: sidePanelButtonHoverIndex === index && sidePanelButton.iconHover ? sidePanelButton.iconHover : sidePanelButton.icon
    }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("label", {
      style: _objectSpread({
        position: "relative",
        display: "flex",
        flexShrink: 0,
        background: "transparent",
        transition: "color 0.269s ease",
        color: sidePanelButtonHoverIndex === index ? sidePanelButtonLabelHoverColor : sidePanelButtonLabelColor,
        userSelect: "none",
        cursor: "pointer",
        wordWrap: "break-word",
        fontWeight: "569",
        fontSize: "0.8169rem",
        height: "auto",
        width: "calc(87.69%)",
        marginRight: "0.69rem",
        marginLeft: "0.69rem"
      }, sidePanelButtonLabelConfigurationSettings)
    }, /*#__PURE__*/React.createElement(HUDTyper, {
      speed: 3
    }, sidePanelButton.label)))), displayCurrentButtonUnderlineIndicator ? /*#__PURE__*/React.createElement("div", {
      key: index + 3,
      style: _objectSpread({
        position: "relative",
        display: "flex",
        transition: "width 0.869s ease, scale 4.69s ease",
        scale: sidePanelButtonHoverIndex === index ? "1.069" : "1",
        background: sidePanelCurrentButtonUnderlineIndicatorColor,
        height: "0.169rem",
        width: sidePanelButtonHoverIndex === index ? "calc(87.69%)" : "0rem",
        marginBottom: "0.69rem",
        marginLeft: "0.869rem"
      }, sidePanelButtonUnderlineConfigurationSettings)
    }) : /*#__PURE__*/React.createElement(React.Fragment, null));
  })) : /*#__PURE__*/React.createElement(React.Fragment, null), sidePanelLowerBodyContent ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelLowerBodyContent) : /*#__PURE__*/React.createElement(React.Fragment, null)), /*#__PURE__*/React.createElement("div", {
    style: sidePanelStyles.sidePanelFooterDivider
  }), /*#__PURE__*/React.createElement("div", {
    className: "invisa-scroller",
    style: sidePanelStyles.sidePanelFooter
  }, sidePanelUpperFooterContent ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelUpperFooterContent) : /*#__PURE__*/React.createElement(React.Fragment, null), sidePanelFooterButtons.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelFooterButtons.map(function (sidePanelFooterButton, index) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      key: index + 4,
      style: _objectSpread({
        position: "relative",
        display: "flex",
        flexDirection: "row",
        transition: "background 0.869s ease, scale 4.69s ease",
        scale: sidePanelFooterButtonHoverIndex === index ? "1.069" : "1",
        background: sidePanelFooterButtonHoverIndex === index ? sidePanelFooterButtonBackgroundHoverColor : sidePanelFooterButtonBackgroundColor,
        borderRadius: "0.869rem",
        width: "calc(100%)",
        cursor: "pointer",
        padding: "0.169rem",
        marginBottom: "0.269rem",
        marginRight: "0.69rem",
        marginLeft: "0.69rem",
        marginTop: "0.69rem"
      }, sidePanelFooterButtonConfigurationSettings),
      onMouseLeave: function onMouseLeave() {
        setSidePanelFooterButtonHoverIndex(null);
        return;
      },
      onMouseEnter: function onMouseEnter() {
        setSidePanelFooterButtonHoverIndex(index);
        return;
      },
      onClick: function onClick() {
        if (sidePanelFooterButtonAction !== undefined) {
          sidePanelFooterButtonAction(sidePanelFooterButton, index);
        }
        if (sidePanelFooterButton.hudAction !== undefined) {
          sidePanelFooterButton.hudAction(sidePanelFooterButton, index);
        }
        return;
      }
    }, sidePanelFooterButton.iconContent ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelFooterButton.iconContent) : /*#__PURE__*/React.createElement(React.Fragment, null), sidePanelFooterButton.icon !== undefined ? /*#__PURE__*/React.createElement(HUDIcon, {
      iconConfigurationSettings: _objectSpread({
        position: "relative",
        display: "flex",
        transition: "visibility 0.469s ease, opacity 0.569s ease",
        visibility: hideType === "Full" && visible === false ? "hidden" : hideType !== "Full" && visible === false ? "hidden" : null,
        opacity: hideType === "Full" && visible === false ? "0" : hideType !== "Full" && visible === false ? "0" : "1",
        background: "transparent",
        borderRadius: 0,
        border: "none",
        objectFit: "scale-down",
        height: "1.169rem",
        width: "1.369rem"
      }, sidePanelFooterButtonIconConfigurationSettings),
      color: sidePanelFooterButtonHoverIndex === index && sidePanelFooterButton.iconHoverColor ? sidePanelFooterButton.iconHoverColor : sidePanelFooterButton.iconColor,
      name: sidePanelFooterButtonHoverIndex === index && sidePanelFooterButton.iconHoverName ? sidePanelFooterButton.iconHoverName : sidePanelFooterButton.iconName,
      svg: sidePanelFooterButtonHoverIndex === index && sidePanelFooterButton.iconHover ? sidePanelFooterButton.iconHover : sidePanelFooterButton.icon
    }) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("label", {
      style: _objectSpread({
        position: "relative",
        display: "flex",
        flexShrink: 0,
        background: "transparent",
        transition: "color 0.269s ease",
        color: sidePanelFooterButtonHoverIndex === index ? sidePanelFooterButtonLabelHoverColor : sidePanelFooterButtonLabelColor,
        userSelect: "none",
        cursor: "pointer",
        wordWrap: "break-word",
        fontWeight: "569",
        fontSize: "0.8169rem",
        height: "auto",
        width: "calc(87.69%)",
        marginRight: "0.69rem",
        marginLeft: "0.69rem"
      }, sidePanelFooterButtonLabelConfigurationSettings)
    }, /*#__PURE__*/React.createElement(HUDTyper, {
      speed: 3
    }, sidePanelFooterButton.label))), displayCurrentFooterButtonUnderlineIndicator ? /*#__PURE__*/React.createElement("div", {
      key: index + 5,
      style: _objectSpread({
        position: "relative",
        display: "flex",
        transition: "width 0.869s ease, scale 4.69s ease",
        scale: sidePanelFooterButtonHoverIndex === index ? "1.069" : "1",
        background: sidePanelCurrentFooterButtonUnderlineIndicatorColor,
        height: "0.169rem",
        width: sidePanelFooterButtonHoverIndex === index ? "calc(87.69%)" : "0rem",
        marginBottom: "0.269rem",
        marginLeft: "0.869rem"
      }, sidePanelFooterButtonUnderlineConfigurationSettings)
    }) : /*#__PURE__*/React.createElement(React.Fragment, null));
  })) : /*#__PURE__*/React.createElement(React.Fragment, null), sidePanelLowerFooterContent ? /*#__PURE__*/React.createElement(React.Fragment, null, sidePanelLowerFooterContent) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(Fade, {
    direction: minimizeTabPosition.includes("-") ? "left" : minimizeTabPosition,
    duration: revealAnimations ? 469 : 0
  }, /*#__PURE__*/React.createElement("button", {
    style: _objectSpread(_objectSpread({
      position: "relative",
      cursor: "pointer",
      borderRadius: "0px 5px 5px 0px",
      border: "none",
      backgroundColor: "#A1A1A1",
      color: "#1a1010",
      height: "1.69rem",
      zIndex: 769,
      paddingBottom: "3.69px",
      paddingRight: "7.69px",
      paddingLeft: "7.69px",
      paddingTop: "3.69px"
    }, minimizeButtonAlignmentStyles), sidePanelMinimizeTabButtonConfigurationSettings),
    onClick: toggleVisibility
  }, /*#__PURE__*/React.createElement(HUDIcon, {
    name: visible ? "fa-chevron-left" : "fa-chevron-right",
    iconConfigurationSettings: {
      height: "1.269rem",
      width: "auto"
    }
  }))), /*#__PURE__*/React.createElement("div", {
    style: _objectSpread({
      position: "fixed",
      display: "flex",
      flexDirection: "row",
      marginLeft: hideType === "Full" && visible === false ? "0.69rem" : hideType !== "Full" && visible === false ? "1.069rem" : "14.69rem",
      height: "auto",
      width: "auto",
      zIndex: "6999"
    }, sidePanelAttachmentContainerConfigurationSettings)
  }, children)));
}
export default HUDSidePanel;