@bigbinary/neeto-team-members-frontend 2.5.3 → 2.5.4

package/README.md

@@ -12,13 +12,13 @@ functioning of the package. Install all the peer dependencies using the below
 command:
 
     ```zsh
-    yarn add @bigbinary/neeto-commons-frontend@2.0.24 @bigbinary/neeto-icons@1.9.1 @bigbinary/neetoui@4.1.43 @honeybadger-io/js@4.8.2 @honeybadger-io/react@4.8.2 axios@1.2.2 classnames@2.3.2 formik@2.2.9 ramda@0.28.0 react-helmet@6.1.0 react-query@3.39.2 react-router-dom@5.3.3 react-toastify@8.2.0 yup@0.32.11
+    yarn add @bigbinary/neeto-commons-frontend@2.0.25 @bigbinary/neeto-icons@1.9.1 @bigbinary/neetoui@4.1.43 @honeybadger-io/js@4.8.2 @honeybadger-io/react@4.8.2 axios@1.2.2 classnames@2.3.2 formik@2.2.9 ramda@0.28.0 react-helmet@6.1.0 react-query@3.39.2 react-router-dom@5.3.3 react-toastify@8.2.0 yup@0.32.11
     ```
 
 2. Now install the latest **neetoTeamMembers** package using the below command:
 
     ```zsh
-    yarn add @bigbinary/neeto-team-members-frontend@2.5.3
+    yarn add @bigbinary/neeto-team-members-frontend@2.5.4
     ```
 
 ## Usage

package/dist/index.cjs.js

@@ -3715,6 +3715,7 @@ var buttons$1 = {
 	cancel: "Cancel",
 	changeRole: "Change role",
 	proceed: "Proceed",
+	reset: "Reset",
 	saveChanges: "Save changes"
 };
 var columns$1 = {
@@ -3813,6 +3814,7 @@ var buttons = {
 	cancel: "Annuler",
 	changeRole: "Changer de rôle",
 	proceed: "Procéder",
+	reset: "Réinitialiser",
 	saveChanges: "Sauvegarder les modifications"
 };
 var columns = {
@@ -4006,16 +4008,19 @@ const update$1 = (id, payload) => axios__default["default"].patch(`${BASE_URL}/o
 const destroy = (id, payload) => axios__default["default"].delete(`${BASE_URL}/organization_roles/${id}`, {
   data: payload
 });
+const bulkUpdate$1 = payload => axios__default["default"].patch(`${BASE_URL}/organization_roles/bulk_update`, payload);
 const organizationRolesApi = {
-  fetch: fetch$1,
+  bulkUpdate: bulkUpdate$1,
   create: create$1,
-  update: update$1,
-  destroy
+  destroy,
+  fetch: fetch$1,
+  update: update$1
 };
 
 const _excluded$2 = ["onSuccess"],
   _excluded2$2 = ["onSuccess"],
-  _excluded3$1 = ["onSuccess"];
+  _excluded3$1 = ["onSuccess"],
+  _excluded4 = ["onSuccess"];
 function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchRoles = function () {
@@ -4087,6 +4092,19 @@ const useDestroyRole = _ref4 => {
     }
   }, options));
 };
+const useBulkUpdateRoles = _ref6 => {
+  let onSuccess = _ref6.onSuccess,
+    options = _objectWithoutProperties(_ref6, _excluded4);
+  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$7({
+    onSuccess: response => {
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
+      queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
+      queryClient.invalidateQueries(QUERY_KEYS.ROLES);
+      neetoui.Toastr.success(response.ntmNotice || response.data.ntmNotice);
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+    }
+  }, options));
+};
 
 var distExports = {};
 var dist = {
@@ -5466,22 +5484,6 @@ var dist = {
 	
 } (dist));
 
-const renderSearchProps = (searchString, setSearchString) => ({
-  "data-cy": "ntm-search-roles-input",
-  onChange: _ref => {
-    let value = _ref.target.value;
-    return setSearchString(value);
-  },
-  placeholder: instance.t("common.search_", {
-    what: instance.t("common.role", PLURAL).toLocaleLowerCase()
-  }),
-  value: searchString
-});
-const renderBreadcrumbs = breadcrumbs => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
-  text: instance.t("metaNames.member", PLURAL),
-  link: "/members"
-}];
-
 const AddRoleButton = _ref => {
   var _permissions$create, _permissions$create2;
   let onClick = _ref.onClick,
@@ -5502,9 +5504,28 @@ const AddRoleButton = _ref => {
   })));
 };
 
+const renderSearchProps = (searchString, setSearchString) => ({
+  "data-cy": "ntm-search-roles-input",
+  onChange: _ref => {
+    let value = _ref.target.value;
+    return setSearchString(value);
+  },
+  placeholder: instance.t("common.search_", {
+    what: instance.t("common.role", PLURAL).toLocaleLowerCase()
+  }),
+  value: searchString
+});
+const renderBreadcrumbs = breadcrumbs => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
+  text: instance.t("metaNames.member", PLURAL),
+  link: "/members"
+}];
+
 const Header$1 = _ref => {
   var _config$header;
   let config = _ref.config,
+    handleReset = _ref.handleReset,
+    handleSubmit = _ref.handleSubmit,
+    isDirty = _ref.isDirty,
     searchString = _ref.searchString,
     setSearchString = _ref.setSearchString,
     setIsNewRolePaneOpen = _ref.setIsNewRolePaneOpen;
@@ -5524,7 +5545,18 @@ const Header$1 = _ref => {
     })),
     breadcrumbs: renderBreadcrumbs(config === null || config === void 0 ? void 0 : (_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.breadcrumbs),
     searchProps: renderSearchProps(searchString, setSearchString),
-    actionBlock: /*#__PURE__*/e__default["default"].createElement(AddRoleButton, {
+    actionBlock: isDirty ? /*#__PURE__*/e__default["default"].createElement(e__default["default"].Fragment, null, /*#__PURE__*/e__default["default"].createElement(neetoui.Button, {
+      "data-cy": "ntm-role-submission-button",
+      onClick: handleSubmit,
+      label: t("buttons.saveChanges"),
+      type: "submit"
+    }), /*#__PURE__*/e__default["default"].createElement(neetoui.Button, {
+      "data-cy": "ntm-role-reset-button",
+      label: t("buttons.reset"),
+      onClick: handleReset,
+      style: "text",
+      type: "reset"
+    })) : /*#__PURE__*/e__default["default"].createElement(AddRoleButton, {
       onClick: () => setIsNewRolePaneOpen(true),
       permissions: config === null || config === void 0 ? void 0 : config.permissions
     }),
@@ -5532,17 +5564,6 @@ const Header$1 = _ref => {
   });
 };
 
-const getPermissionGroups = function () {
-  let permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  const groupedPermissions = ramda.groupBy(permission => permission === null || permission === void 0 ? void 0 : permission.category, permissions);
-  const categories = Object.keys(groupedPermissions);
-  categories.forEach(category => {
-    groupedPermissions[category].permissions = groupedPermissions[category];
-    groupedPermissions[category].isPermissionsVisible = true;
-  });
-  return groupedPermissions;
-};
-
 const transformObjectToDotNotation = function (object) {
   let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
   let result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
@@ -5758,19 +5779,13 @@ const Row = _ref => {
     config = _ref.config,
     _ref$permission = _ref.permission,
     permission = _ref$permission === void 0 ? null : _ref$permission,
-    roles = _ref.roles;
-  const _useUpdateRole = useUpdateRole({}),
-    updateRole = _useUpdateRole.mutate;
+    roles = _ref.roles,
+    setModifiedRoles = _ref.setModifiedRoles;
   const allPermissionIdsOfCategory = ramda.map(ramda.prop("id"), (allPermissionsOfCategory === null || allPermissionsOfCategory === void 0 ? void 0 : allPermissionsOfCategory.permissions) || []);
   const handleSubmit = (role, checked) => {
     const permissionIds = allPermissionIdsOfCategory.length > 0 ? allPermissionIdsOfCategory : [permission.id];
     const modifiedRole = ramda.modify("permissionIds", () => checked ? removeDuplicates([...role.permissionIds, ...permissionIds]) : role.permissionIds.filter(id => !permissionIds.includes(id)), role);
-    updateRole({
-      id: role.id,
-      payload: {
-        organizationRole: modifiedRole
-      }
-    });
+    setModifiedRoles(pure.replaceById(role.id, modifiedRole));
   };
   const isCheckboxChecked = role => !allPermissionsOfCategory ? ramda.includes(permission.id, role.permissionIds) : allPermissionIdsOfCategory.every(id => ramda.includes(id, role.permissionIds));
   return /*#__PURE__*/e__default["default"].createElement("div", {
@@ -6004,6 +6019,7 @@ const Columns$1 = _ref => {
     filteredGroupPermissions = _ref.filteredGroupPermissions,
     filteredRoles = _ref.filteredRoles,
     roles = _ref.roles,
+    setModifiedRoles = _ref.setModifiedRoles,
     setIsScrollPresent = _ref.setIsScrollPresent;
   const _useState = e$1.useState(DEFAULT_MANAGE_ROLE_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
@@ -6030,11 +6046,13 @@ const Columns$1 = _ref => {
     }, /*#__PURE__*/e__default["default"].createElement(Row, {
       allPermissionsOfCategory: groupedPermissions,
       config: config,
+      setModifiedRoles: setModifiedRoles,
       roles: filteredRoles
     }), isPermissionsVisible && groupedPermissions.permissions.map((permission, permissionIndex) => /*#__PURE__*/e__default["default"].createElement(Row, {
       config: config,
       key: permissionIndex,
       permission: permission,
+      setModifiedRoles: setModifiedRoles,
       roles: filteredRoles
     })));
   }))), /*#__PURE__*/e__default["default"].createElement(Edit, {
@@ -6158,6 +6176,7 @@ const Table = _ref => {
     filteredRoles = _ref.filteredRoles,
     permissionGroups = _ref.permissionGroups,
     roles = _ref.roles,
+    setModifiedRoles = _ref.setModifiedRoles,
     setIsNewRolePaneOpen = _ref.setIsNewRolePaneOpen;
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -6215,12 +6234,36 @@ const Table = _ref => {
     filteredGroupPermissions: filteredGroupPermissions,
     filteredRoles: filteredRoles,
     roles: roles,
+    setModifiedRoles: setModifiedRoles,
     setIsScrollPresent: setIsScrollPresent
   }));
 };
 
+const getPermissionGroups = function () {
+  let permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const groupedPermissions = ramda.groupBy(permission => permission === null || permission === void 0 ? void 0 : permission.category, permissions);
+  const categories = Object.keys(groupedPermissions);
+  categories.forEach(category => {
+    groupedPermissions[category].permissions = groupedPermissions[category];
+    groupedPermissions[category].isPermissionsVisible = true;
+  });
+  return groupedPermissions;
+};
+const getModifiedPermissions = function () {
+  let roles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let modifiedRoles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return modifiedRoles.map(role => {
+    const oldPermissions = pure.findById(role.id, roles).permissionIds;
+    if (ramda.equals(oldPermissions, role.permissionIds)) return false;
+    return {
+      id: role.id,
+      permissionIds: role.permissionIds
+    };
+  }).filter(Boolean);
+};
+
 const Roles = _ref => {
-  var _config$permissions$v, _config$permissions, _config$permissions$v2, _config$permissions2;
+  var _config$permissions$v, _config$permissions, _config$permissions$v2, _config$permissions2, _config$permissions$u, _config$permissions3;
   let config = _ref.config;
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -6237,7 +6280,7 @@ const Roles = _ref => {
     isNewRolePaneOpen = _useState6[0],
     setIsNewRolePaneOpen = _useState6[1];
   const _useFetchRoles = useFetchRoles({
-      onSuccess: roles => setFilteredRoles(roles),
+      onSuccess: roles => setModifiedRoles(roles),
       enabled: (_config$permissions$v = config === null || config === void 0 ? void 0 : (_config$permissions = config.permissions) === null || _config$permissions === void 0 ? void 0 : _config$permissions.view) !== null && _config$permissions$v !== void 0 ? _config$permissions$v : DEFAULT_PERMISSION
     }),
     roles = _useFetchRoles.data,
@@ -6247,13 +6290,31 @@ const Roles = _ref => {
     }),
     permissions = _useFetchPermissions.data,
     isPermissionsLoading = _useFetchPermissions.isLoading;
+  const _useBulkUpdateRoles = useBulkUpdateRoles({
+      enabled: (_config$permissions$u = config === null || config === void 0 ? void 0 : (_config$permissions3 = config.permissions) === null || _config$permissions3 === void 0 ? void 0 : _config$permissions3.update) !== null && _config$permissions$u !== void 0 ? _config$permissions$u : DEFAULT_PERMISSION
+    }),
+    bulkUpdate = _useBulkUpdateRoles.mutate;
+  const _useState7 = e$1.useState(roles),
+    _useState8 = _slicedToArray(_useState7, 2),
+    modifiedRoles = _useState8[0],
+    setModifiedRoles = _useState8[1];
+  const isDirty = pure.isPresent(getModifiedPermissions(roles, modifiedRoles));
   const permissionGroups = getPermissionGroups(permissions);
   e$1.useEffect(() => {
     setFilteredRoles(ramda.filter(_ref2 => {
       let name = _ref2.name;
       return ramda.includes(searchString.toLowerCase().trim(), name.toLowerCase().trim());
-    }, roles || []));
-  }, [roles, searchString]);
+    }, modifiedRoles || []));
+  }, [modifiedRoles, searchString]);
+  const handleSubmit = () => {
+    const updatedRoles = getModifiedPermissions(roles, modifiedRoles);
+    bulkUpdate({
+      organizationRoles: {
+        updatedRoles
+      }
+    });
+  };
+  const handleReset = () => setModifiedRoles(roles);
   if (isRolesLoading || isPermissionsLoading) {
     return /*#__PURE__*/e__default["default"].createElement("div", {
       className: "ntm-members-page-loader"
@@ -6263,6 +6324,9 @@ const Roles = _ref => {
     isHeaderFixed: true
   }, /*#__PURE__*/e__default["default"].createElement(Header$1, {
     config: config,
+    handleReset: handleReset,
+    handleSubmit: handleSubmit,
+    isDirty: isDirty,
     searchString: searchString,
     setSearchString: setSearchString,
     setIsNewRolePaneOpen: setIsNewRolePaneOpen
@@ -6271,6 +6335,7 @@ const Roles = _ref => {
     filteredRoles: filteredRoles,
     permissionGroups: permissionGroups,
     roles: roles,
+    setModifiedRoles: setModifiedRoles,
     setIsNewRolePaneOpen: setIsNewRolePaneOpen
   }), (config === null || config === void 0 ? void 0 : config.helpUrl) && /*#__PURE__*/e__default["default"].createElement("div", {
     className: "ntm-roles-help-url-wrapper"
@@ -7024,16 +7089,20 @@ var objectInspect = function inspect_(obj, options, depth, seen) {
     }
     if (isMap(obj)) {
         var mapParts = [];
-        mapForEach.call(obj, function (value, key) {
-            mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj));
-        });
+        if (mapForEach) {
+            mapForEach.call(obj, function (value, key) {
+                mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj));
+            });
+        }
         return collectionOf('Map', mapSize.call(obj), mapParts, indent);
     }
     if (isSet(obj)) {
         var setParts = [];
-        setForEach.call(obj, function (value) {
-            setParts.push(inspect(value, obj));
-        });
+        if (setForEach) {
+            setForEach.call(obj, function (value) {
+                setParts.push(inspect(value, obj));
+            });
+        }
         return collectionOf('Set', setSize.call(obj), setParts, indent);
     }
     if (isWeakMap(obj)) {
@@ -10016,7 +10085,11 @@ const TeamMembers = _ref => {
     roles = _useFetchRoles.data,
     isRolesLoading = _useFetchRoles.isLoading;
   const _useUpdateMember = useUpdateMember({
-      onSuccess: () => handleAlertClose()
+      onSuccess: () => {
+        var _config$updateMember, _config$updateMember$;
+        handleAlertClose();
+        config === null || config === void 0 ? void 0 : (_config$updateMember = config.updateMember) === null || _config$updateMember === void 0 ? void 0 : (_config$updateMember$ = _config$updateMember.onSuccess) === null || _config$updateMember$ === void 0 ? void 0 : _config$updateMember$.callback();
+      }
     }),
     updateMember = _useUpdateMember.mutate,
     isUpdatingMember = _useUpdateMember.isLoading;
@@ -10225,7 +10298,7 @@ const VALIDATION_SCHEMA = {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n  --ntm-roles-table-cell-height: 68px;\n}\n\n.ntm-dropdown__button {\n  border-radius: 0 !important;\n  font-weight: var(--neeto-ui-font-normal);\n  min-height: 34px;\n  min-width: 150px;\n  text-align: left;\n  width: 100%;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\n.ntm-empty-state {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n}\n.ntm-empty-state__image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n.ntm-empty-state__title--with-action-block {\n  margin-bottom: 1rem;\n}\n.ntm-empty-state__action-block {\n  display: flex;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-form__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-form__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-form__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-form__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-members-radio-group {\n  width: 100%;\n}\n.ntm-members-radio-group .neeto-ui-radio__container--stacked {\n  width: 100%;\n}\n.ntm-members-radio-group__label {\n  padding-right: 4px;\n}\n.ntm-members-radio-group__icon {\n  cursor: pointer;\n}\n\n.ntm-members-form-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 8px 0px !important;\n}\n.ntm-members-form-radio-item__wrapper:first-child {\n  padding-top: 0px !important;\n}\n.ntm-members-form-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-form-radio-item__description {\n  color: rgb(var(--neeto-ui-gray-700));\n}\n\n.ntm-roles-header {\n  border-bottom: 1px solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height));\n  display: flex;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar {\n  width: 396px;\n  min-width: 396px;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__search {\n  padding: 24px 24px 16px;\n  height: 72px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list {\n  height: calc(\n        100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 8px;\n  min-height: var(--ntm-roles-table-cell-height);\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 8px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns {\n  width: calc(\n      100vw - var(--neeto-ui-sidebar-width) - 396px - 24px\n    );\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  height: var(--ntm-roles-table-cell-height);\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table__cell {\n  height: 72px;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__dropdown {\n  margin: 3px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n        100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  align-items: center;\n  border-radius: var(--neeto-ui-rounded);\n  border-width: 1px;\n  border-color: rgb(var(--neeto-ui-gray-300));\n  cursor: pointer;\n  display: flex;\n  gap: 0.75rem;\n  padding: 1rem 0.75rem;\n}\n.ntm-roles-permission__card--description {\n  flex-grow: 1;\n}\n.ntm-roles-permission__card--checkbox {\n  padding: 0 0.5rem;\n}\n\n.ntm-roles-help-url-wrapper {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 0;\n}\n\n.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left {\n  max-width: none;\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}";
+var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n  --ntm-roles-table-cell-height: 68px;\n}\n\n.ntm-dropdown__button {\n  border-radius: 0 !important;\n  font-weight: var(--neeto-ui-font-normal);\n  min-height: 34px;\n  min-width: 150px;\n  text-align: left;\n  width: 100%;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\n.ntm-empty-state {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n}\n.ntm-empty-state__image {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n.ntm-empty-state__title--with-action-block {\n  margin-bottom: 1rem;\n}\n.ntm-empty-state__action-block {\n  display: flex;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-form__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-form__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-form__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-form__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-members-radio-group {\n  width: 100%;\n}\n.ntm-members-radio-group .neeto-ui-radio__container--stacked {\n  width: 100%;\n}\n.ntm-members-radio-group__label {\n  padding-right: 4px;\n}\n.ntm-members-radio-group__icon {\n  cursor: pointer;\n}\n\n.ntm-members-form-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 8px 0px !important;\n}\n.ntm-members-form-radio-item__wrapper:first-child {\n  padding-top: 0px !important;\n}\n.ntm-members-form-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-form-radio-item__description {\n  color: rgb(var(--neeto-ui-gray-700));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height));\n  display: flex;\n  padding: 0 1.5rem;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar {\n  width: 396px;\n  min-width: 396px;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n  border-left: thin solid rgb(var(--neeto-ui-gray-300));\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__search {\n  padding: 20px 24px;\n  height: 72px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list {\n  height: calc(\n        100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 24px;\n  min-height: var(--ntm-roles-table-cell-height);\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__sidebar .ntm-roles-table-sidebar__list .ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns {\n  width: calc(\n      100vw - var(--neeto-ui-sidebar-width) - 396px - 24px\n    );\n  overflow: hidden;\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  height: var(--ntm-roles-table-cell-height);\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table__cell {\n  height: 72px;\n  padding-left: 24px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__dropdown {\n  margin: 3px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__header .ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n        100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - 72px -\n          var(--ntm-roles-table-default-scroll)\n      );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__wrapper .ntm-roles-table__columns .ntm-roles-table__rows .ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem 0;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  align-items: center;\n  border-radius: var(--neeto-ui-rounded);\n  border-width: 1px;\n  border-color: rgb(var(--neeto-ui-gray-300));\n  cursor: pointer;\n  display: flex;\n  gap: 0.75rem;\n  padding: 1rem 0.75rem;\n}\n.ntm-roles-permission__card--description {\n  flex-grow: 1;\n}\n.ntm-roles-permission__card--checkbox {\n  padding: 0 0.5rem;\n}\n\n.ntm-roles-help-url-wrapper {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 0;\n}\n\n.neeto-ui-subheader .neeto-ui-subheader__left-wrapper .neeto-ui-subheader__left {\n  max-width: none;\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}";
 n(css,{});
 
 exports.ManageMember = ManageMember;