@clickview/lite 0.0.26-dev.0 → 0.0.26-dev.1

package/dist/scripts/25.chunk.js

@@ -0,0 +1,2110 @@
+(window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[25],{
+
+/***/ "../../libs/shared/src/components/actions/Actions.tsx":
+/*!************************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/components/actions/Actions.tsx ***!
+  \************************************************************************************************/
+/*! exports provided: Actions */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Actions", function() { return Actions; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _icon_button_IconButton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../icon-button/IconButton */ "../../libs/shared/src/components/icon-button/IconButton.tsx");
+/* harmony import */ var _ActionsDropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ActionsDropdown */ "../../libs/shared/src/components/actions/ActionsDropdown.tsx");
+/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ActionButton */ "../../libs/shared/src/components/actions/ActionButton.tsx");
+/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions.scss */ "../../libs/shared/src/components/actions/actions.scss");
+/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_actions_scss__WEBPACK_IMPORTED_MODULE_4__);
+
+
+
+
+
+function Actions(props) {
+  var buttonActions = [];
+  var moreActions = [];
+  props.actions.forEach(function (a) {
+    if (a.button) buttonActions.push(a);else moreActions.push(a);
+  });
+  var className = 'd-flex';
+  if (props.className) className += " ".concat(props.className);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: className
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, !!buttonActions.length && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+    className: _actions_scss__WEBPACK_IMPORTED_MODULE_4___default.a.buttonList
+  }, buttonActions.map(function (a, idx) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], {
+      key: idx
+    }, a.label ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_ActionButton__WEBPACK_IMPORTED_MODULE_3__["ActionButton"], {
+      appLink: a.appLink,
+      onClick: a.onClick,
+      svgName: a.svgName,
+      className: a.className,
+      tooltip: a.tooltip,
+      showSpinner: a.showSpinner,
+      analyticsData: a.analyticsData,
+      analyticsOptions: a.analyticsOptions
+    }, a.label) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_1__["IconButton"], {
+      appLink: a.appLink,
+      onClick: a.onClick,
+      svgName: a.svgName,
+      className: a.className,
+      analyticsData: a.analyticsData,
+      analyticsOptions: a.analyticsOptions
+    }));
+  })), props.sortComponent ? props.sortComponent : '', !!moreActions.length && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_ActionsDropdown__WEBPACK_IMPORTED_MODULE_2__["ActionsDropdown"], {
+    actions: moreActions,
+    className: !!buttonActions.length && 'ml-2',
+    dropdownToggleClassName: props.actionsDropdownClassName
+  })));
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/actions/ActionsDropdown.tsx":
+/*!********************************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/components/actions/ActionsDropdown.tsx ***!
+  \********************************************************************************************************/
+/*! exports provided: ActionsDropdown */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ActionsDropdown", function() { return ActionsDropdown; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _common_src_react_utils_RandomHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../common/src/react/utils/RandomHelper */ "../../libs/common/src/react/utils/RandomHelper.ts");
+/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
+/* harmony import */ var _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
+/* harmony import */ var _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+/* harmony import */ var _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./actions.scss */ "../../libs/shared/src/components/actions/actions.scss");
+/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_actions_scss__WEBPACK_IMPORTED_MODULE_7__);
+
+
+
+
+
+
+
+
+
+function getDropdownItemClassName(actionClassName) {
+  var className = 'dropdown-item';
+  if (actionClassName) className += " ".concat(actionClassName);
+  return className;
+}
+
+function ActionsDropdownItem(props) {
+  if (props.action.appLink) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_5__["AppLink"], {
+    appLink: props.action.appLink,
+    onClick: props.action.onClick,
+    className: getDropdownItemClassName(props.action.className),
+    analyticsData: props.action.analyticsData,
+    analyticsOptions: props.action.analyticsOptions
+  }, props.action.label);
+
+  function onClick(e) {
+    if (props.action.analyticsData && props.action.analyticsOptions) _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_3__["AnalyticsHelper"].logUserAction(props.action.analyticsData, props.action.analyticsOptions);
+    if (_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__["FunctionHelper"].isFunction(props.action.onClick)) props.action.onClick(e);
+  }
+
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+    className: "cursor-pointer ".concat(getDropdownItemClassName(props.action.className)),
+    onClick: onClick
+  }, props.action.label);
+}
+
+ActionsDropdown.defaultProps = {
+  dropdownToggleClassName: 'btn btn-light'
+};
+function ActionsDropdown(props) {
+  if (!props.actions || !props.actions.length) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  var className = 'dropdown';
+  if (props.className) className += " ".concat(props.className); // Generate unique id to avoid collisions.
+
+  var dropdownToggleId = "actions-dropdown-".concat(_common_src_react_utils_RandomHelper__WEBPACK_IMPORTED_MODULE_1__["RandomHelper"].getRandomInt());
+  var dropdownToggleClassName = "dropdown-toggle px-0 ".concat(_actions_scss__WEBPACK_IMPORTED_MODULE_7___default.a.dropdownToggle);
+  if (props.dropdownToggleClassName) dropdownToggleClassName += " ".concat(props.dropdownToggleClassName);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: className
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", {
+    className: dropdownToggleClassName,
+    type: 'button',
+    id: dropdownToggleId,
+    "data-toggle": 'dropdown',
+    "aria-haspopup": 'true',
+    "aria-expanded": 'false'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__["SvgContainer"], {
+    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__["cvSvgLibrary"].More,
+    size: _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__["SvgContainerSize"].Small
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'dropdown-menu dropdown-menu-right',
+    "aria-labelledby": dropdownToggleId
+  }, props.actions.map(function (a, idx) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ActionsDropdownItem, {
+      key: idx,
+      action: a
+    });
+  })));
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/actions/actions.scss":
+/*!*************************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/components/actions/actions.scss ***!
+  \*************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"buttonList":"cv--buttonList--2v9CT","dropdownToggle":"cv--dropdownToggle--AYBvQ"};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/breadcrumbs/BreadcrumbList.tsx":
+/*!***********************************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/components/breadcrumbs/BreadcrumbList.tsx ***!
+  \***********************************************************************************************************/
+/*! exports provided: BreadcrumbItem, BreadcrumbList */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BreadcrumbItem", function() { return BreadcrumbItem; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BreadcrumbList", function() { return BreadcrumbList; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+
+
+var BreadcrumbItem = function BreadcrumbItem(_ref) {
+  var _ref$breadcrumb = _ref.breadcrumb,
+      label = _ref$breadcrumb.label,
+      appLink = _ref$breadcrumb.appLink,
+      active = _ref$breadcrumb.active;
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", {
+    className: "breadcrumb-item".concat(active ? ' active' : '')
+  }, active ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("strong", null, label) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__["AppLink"], {
+    appLink: appLink
+  }, label));
+};
+var BreadcrumbList = function BreadcrumbList(_ref2) {
+  var breadcrumbs = _ref2.breadcrumbs;
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("ol", {
+    className: 'breadcrumb m-0 p-0'
+  }, breadcrumbs.map(function (b, idx) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](BreadcrumbItem, {
+      key: idx,
+      breadcrumb: b
+    });
+  }));
+};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/breadcrumbs/Breadcrumbs.tsx":
+/*!********************************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/components/breadcrumbs/Breadcrumbs.tsx ***!
+  \********************************************************************************************************/
+/*! exports provided: BreadcrumbType, Breadcrumbs, PartialBreadcrumbs */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BreadcrumbType", function() { return BreadcrumbType; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Breadcrumbs", function() { return Breadcrumbs; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PartialBreadcrumbs", function() { return PartialBreadcrumbs; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
+/* harmony import */ var _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../common/src/react/utils/ObjectHelper */ "../../libs/common/src/react/utils/ObjectHelper.ts");
+/* harmony import */ var _common_src_react_utils_ArrayHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../common/src/react/utils/ArrayHelper */ "../../libs/common/src/react/utils/ArrayHelper.ts");
+/* harmony import */ var _utils_PartialLoadingHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/PartialLoadingHelper */ "../../libs/shared/src/utils/PartialLoadingHelper.ts");
+/* harmony import */ var _BreadcrumbList__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./BreadcrumbList */ "../../libs/shared/src/components/breadcrumbs/BreadcrumbList.tsx");
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
+
+
+
+
+var BreadcrumbType;
+
+(function (BreadcrumbType) {
+  BreadcrumbType[BreadcrumbType["Static"] = 0] = "Static";
+  BreadcrumbType[BreadcrumbType["Dynamic"] = 1] = "Dynamic";
+})(BreadcrumbType || (BreadcrumbType = {}));
+
+function buildBreadcrumb(item, getItemAppLink, active) {
+  return {
+    label: item.name,
+    appLink: getItemAppLink(item),
+    active: active
+  };
+}
+
+function useGetBreadcrumbs(props, isDynamic) {
+  var _a;
+
+  var currentItem = props.currentItem;
+  var getItemAppLink = props.getItemAppLink,
+      getParent = props.getParent,
+      rootItem = props.rootItem,
+      data = props.data,
+      subview = props.subview;
+
+  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      breadcrumbs = _useState2[0],
+      setBreadcrumbs = _useState2[1];
+
+  var key = (_a = data) === null || _a === void 0 ? void 0 : _a.map(function (o) {
+    var _a;
+
+    return (_a = o) === null || _a === void 0 ? void 0 : _a.name;
+  }).join('-'); // Uss static/pre-defined array of data to build the breadcrumb structure
+
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    if (isDynamic || _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_2__["ObjectHelper"].isEmpty(data)) return;
+
+    var _breadcrumbs = data.map(function (d, index) {
+      return buildBreadcrumb(d, getItemAppLink, index + 1 === data.length);
+    });
+
+    if (rootItem) _breadcrumbs.unshift(rootItem);
+    setBreadcrumbs(_breadcrumbs);
+  }, [key]); // Dynamically build the breadcrumb structure
+
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    if (!isDynamic || !_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__["FunctionHelper"].isFunction(getParent)) return;
+    var _breadcrumbs = [buildBreadcrumb(currentItem, getItemAppLink, true)];
+    currentItem = getParent(currentItem);
+
+    while (currentItem) {
+      _breadcrumbs.unshift(buildBreadcrumb(currentItem, getItemAppLink));
+
+      currentItem = getParent(currentItem);
+    }
+
+    if (rootItem) _breadcrumbs.unshift(rootItem);
+    return setBreadcrumbs(_breadcrumbs);
+  }, [currentItem, getParent, getItemAppLink, rootItem]);
+
+  var _React$useRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]({
+    label: subview,
+    appLink: null,
+    active: true
+  }),
+      subviewBreadcrumb = _React$useRef.current; // Replace "active" item with the subview
+
+
+  if (subview) {
+    if (!breadcrumbs.includes(subviewBreadcrumb)) setBreadcrumbs([].concat(_toConsumableArray(breadcrumbs), [subviewBreadcrumb]));
+    var selectedBreadcrumb = breadcrumbs.filter(function (crumb) {
+      return crumb.active && crumb !== subviewBreadcrumb;
+    });
+    if (selectedBreadcrumb.length) _common_src_react_utils_ArrayHelper__WEBPACK_IMPORTED_MODULE_3__["ArrayHelper"].first(selectedBreadcrumb).active = false;
+  }
+
+  return breadcrumbs;
+}
+
+function Breadcrumbs(props) {
+  var type = props.type;
+  var isDynamic = type === BreadcrumbType.Dynamic;
+  var breadcrumbs = useGetBreadcrumbs(props, isDynamic);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("nav", {
+    "aria-label": 'breadcrumb'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_BreadcrumbList__WEBPACK_IMPORTED_MODULE_5__["BreadcrumbList"], {
+    breadcrumbs: breadcrumbs
+  }));
+}
+var PartialBreadcrumbs = function PartialBreadcrumbs(_ref) {
+  var _ref$numItems = _ref.numItems,
+      numItems = _ref$numItems === void 0 ? 3 : _ref$numItems;
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("nav", {
+    "aria-label": 'breadcrumb'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("ol", {
+    className: 'breadcrumb m-0 p-0'
+  }, _utils_PartialLoadingHelper__WEBPACK_IMPORTED_MODULE_4__["PartialLoadingHelper"].getPartialLoadingItems({
+    numItems: numItems
+  }).map(function (_ref2, idx) {
+    var width = _ref2.width;
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", {
+      key: idx,
+      className: 'breadcrumb-item'
+    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+      className: 'd-inline-block partial-loading-background',
+      style: {
+        width: width
+      },
+      dangerouslySetInnerHTML: {
+        __html: '&nbsp'
+      }
+    }));
+  })));
+};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/forms/form-checkbox/Checkbox.tsx":
+/*!*************************************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/components/forms/form-checkbox/Checkbox.tsx ***!
+  \*************************************************************************************************************/
+/*! exports provided: Checkbox */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return Checkbox; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+Checkbox.defaultProps = {
+  checked: false,
+  label: '',
+  className: ''
+};
+/**
+ * Use this checkbox outside of Formik contexts
+ */
+
+function Checkbox(props) {
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "custom-control custom-checkbox ".concat(props.className)
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", {
+    type: 'checkbox',
+    className: 'custom-control-input',
+    id: props.id,
+    name: props.name,
+    checked: props.checked,
+    onChange: props.onChange
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("label", {
+    className: 'custom-control-label cursor-pointer',
+    htmlFor: props.id
+  }, props.label));
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/hooks/UseAlerts.ts":
+/*!************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/hooks/UseAlerts.ts ***!
+  \************************************************************************************/
+/*! exports provided: useAlerts */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useAlerts", function() { return useAlerts; });
+/* harmony import */ var _common_src_react_hooks_UseService__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../common/src/react/hooks/UseService */ "../../libs/common/src/react/hooks/UseService.ts");
+/* harmony import */ var _common_src_backbone_services_BaseAlertService__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../common/src/backbone/services/BaseAlertService */ "../../libs/common/src/backbone/services/BaseAlertService.ts");
+/* harmony import */ var _common_src_backbone_constants_CommonServices__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../common/src/backbone/constants/CommonServices */ "../../libs/common/src/backbone/constants/CommonServices.ts");
+
+
+
+var useAlerts = function useAlerts() {
+  var alertService = Object(_common_src_react_hooks_UseService__WEBPACK_IMPORTED_MODULE_0__["useService"])(_common_src_backbone_constants_CommonServices__WEBPACK_IMPORTED_MODULE_2__["CommonServices"].ALERT);
+  return {
+    success: function success(alertContent) {
+      alertService.success(alertContent)();
+    },
+    error: function error(alertContent) {
+      alertService.error(alertContent)();
+    },
+    warning: function warning(alertContent) {
+      alertService.createAlert({
+        type: _common_src_backbone_services_BaseAlertService__WEBPACK_IMPORTED_MODULE_1__["AlertType"].Warning,
+        heading: _common_src_backbone_services_BaseAlertService__WEBPACK_IMPORTED_MODULE_1__["DefaultAlertHeading"].Warning,
+        message: alertContent
+      });
+    }
+  };
+};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/utils/PartialLoadingHelper.ts":
+/*!***********************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/utils/PartialLoadingHelper.ts ***!
+  \***********************************************************************************************/
+/*! exports provided: PartialLoadingHelper */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PartialLoadingHelper", function() { return PartialLoadingHelper; });
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var DEFAULT_NUM_ITEMS = 5;
+var DEFAULT_MIN_WIDTH = 50; // px
+
+var DEFAULT_MAX_WIDTH = 100; // px
+
+var PartialLoadingHelper = {
+  getPartialLoadingItems: function getPartialLoadingItems() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var _options$numItems = options.numItems,
+        numItems = _options$numItems === void 0 ? DEFAULT_NUM_ITEMS : _options$numItems,
+        _options$minWidth = options.minWidth,
+        minWidth = _options$minWidth === void 0 ? DEFAULT_MIN_WIDTH : _options$minWidth,
+        _options$maxWidth = options.maxWidth,
+        maxWidth = _options$maxWidth === void 0 ? DEFAULT_MAX_WIDTH : _options$maxWidth;
+
+    var getRandomFilterWidth = function getRandomFilterWidth() {
+      return Math.max(Math.floor(Math.random() * maxWidth), minWidth);
+    };
+
+    return _toConsumableArray(Array(numItems)).map(function () {
+      return {
+        width: "".concat(getRandomFilterWidth(), "px")
+      };
+    });
+  }
+};
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/classroom-group-dropdown/ClassroomGroupDropdown.tsx":
+/*!********************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/classroom-group-dropdown/ClassroomGroupDropdown.tsx ***!
+  \********************************************************************************************/
+/*! exports provided: ClassroomGroupDropdown */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClassroomGroupDropdown", function() { return ClassroomGroupDropdown; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _libs_shared_src_components_app_link_AppLink__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _libs_shared_src_components_forms_form_checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/forms/form-checkbox/Checkbox */ "../../libs/shared/src/components/forms/form-checkbox/Checkbox.tsx");
+/* harmony import */ var _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
+/* harmony import */ var _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
+/* harmony import */ var shared_hooks_useBulkCheckboxManager__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared/hooks/useBulkCheckboxManager */ "./src/shared/hooks/useBulkCheckboxManager.tsx");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var apps_classrooms_components_classroom_group_pill_ClassroomGroupPill__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! apps/classrooms/components/classroom-group-pill/ClassroomGroupPill */ "./src/apps/classrooms/components/classroom-group-pill/ClassroomGroupPill.tsx");
+
+
+
+
+
+
+
+
+
+
+
+
+
+var namespace = 'classrooms.classroomGroupDropdown';
+
+var getNewGroupAppLink = function getNewGroupAppLink(id, studentIds) {
+  return {
+    application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_11__["AppChannels"].CLASSROOMS,
+    action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_10__["Actions"].Classrooms.NEW_GROUP,
+    args: [id],
+    params: {
+      addStudents: studentIds
+    }
+  };
+};
+
+ClassroomGroupDropdown.defaultProps = {
+  preselections: []
+};
+function ClassroomGroupDropdown(props) {
+  var _a;
+
+  var _useBulkCheckboxManag = Object(shared_hooks_useBulkCheckboxManager__WEBPACK_IMPORTED_MODULE_9__["useBulkCheckboxManager"])(props.groups, {
+    preselectedIds: props.preselections.map(function (s) {
+      return s.id;
+    })
+  }),
+      onToggleItem = _useBulkCheckboxManag.onToggleItem,
+      isChecked = _useBulkCheckboxManag.isChecked;
+
+  function _onChange(group) {
+    props.onToggle(group, !isChecked(group.id));
+    onToggleItem(group.id);
+  }
+
+  function onClickCreateNewGroup() {
+    _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_7__["AnalyticsHelper"].logUserAction({}, _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_7__["AnalyticsHelper"].mergeOptions(props.analyticsOptions, {
+      actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__["UserAction"].Create,
+      workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__["WorkflowPhase"].Start,
+      entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__["EntityType"].ClassroomGroup
+    }));
+  }
+
+  var buttonClasses = 'mr-2 d-inline-block svg-container sm';
+  var dropdownProps = {
+    alignRight: !!props.alignRight
+  };
+  /**
+   * This prop is applied like this so that when `props.disabled` it false, the prop is omitted altogether.
+   * This is because we want `react-bootstrap` to control the open state, and if we used the `show` prop
+   * at all times we'd be preventing that.
+   */
+
+  if (props.disabled) dropdownProps.show = false;
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"], Object.assign({}, dropdownProps), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"].Toggle, {
+    as: 'div',
+    id: props.id,
+    className: "".concat(props.disabled ? 'text-light' : 'cursor-pointer', " ").concat(buttonClasses, " no-caret")
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__["SvgContainer"], {
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_5__["cvSvgLibrary"].Tag
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"].Menu, null, !!((_a = props.groups) === null || _a === void 0 ? void 0 : _a.length) && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'px-2 border-bottom pb-1 mb-1'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
+    className: 'mb-0'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
+    namespace: namespace,
+    phrase: 'groupAs'
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: 'list-unstyled pr-3'
+  }, props.groups.map(function (group) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      key: group.id,
+      className: 'd-flex align-items-center bg-white my-1'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_forms_form_checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_6__["Checkbox"], {
+      id: "".concat(props.id, ":").concat(group.id),
+      checked: isChecked(group.id),
+      onChange: function onChange() {
+        return _onChange(group);
+      }
+    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_classroom_group_pill_ClassroomGroupPill__WEBPACK_IMPORTED_MODULE_12__["ClassroomGroupPill"], {
+      group: group
+    }));
+  }))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_app_link_AppLink__WEBPACK_IMPORTED_MODULE_2__["AppLink"], {
+    onClick: onClickCreateNewGroup,
+    appLink: getNewGroupAppLink(props.classroom.id, props.studentIds),
+    className: 'text-nowrap d-flex align-items-center px-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__["SvgContainer"], {
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_5__["cvSvgLibrary"].Plus
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
+    namespace: namespace,
+    phrase: 'createNew'
+  }))));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/classroom-group-pill/ClassroomGroupPill.tsx":
+/*!************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/classroom-group-pill/ClassroomGroupPill.tsx ***!
+  \************************************************************************************/
+/*! exports provided: ClassroomGroupPill */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClassroomGroupPill", function() { return ClassroomGroupPill; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/interfaces */ "../../libs/shared/src/interfaces/index.ts");
+/* harmony import */ var apps_classrooms_utils_GroupHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! apps/classrooms/utils/GroupHelper */ "./src/apps/classrooms/utils/GroupHelper.ts");
+
+
+
+function ClassroomGroupPill(props) {
+  var _a, _b;
+
+  if (!props.group) return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null);
+  var classes = 'font-weight-normal text-nowrap rounded-pill py-1 px-2';
+  if (((_a = props.group.metadata) === null || _a === void 0 ? void 0 : _a.colour) && props.group.metadata.colour !== _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_1__["ClassroomGroupColour"].White) classes += ' text-white';else classes += ' border border-dark';
+  classes += " ".concat(Object(apps_classrooms_utils_GroupHelper__WEBPACK_IMPORTED_MODULE_2__["mapColourToClassName"])((_b = props.group.metadata) === null || _b === void 0 ? void 0 : _b.colour));
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: classes
+  }, props.group.name);
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/colour-picker/ColourPicker.tsx":
+/*!***********************************************************************!*\
+  !*** ./src/apps/classrooms/components/colour-picker/ColourPicker.tsx ***!
+  \***********************************************************************/
+/*! exports provided: ColourPicker */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColourPicker", function() { return ColourPicker; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
+/* harmony import */ var _libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/interfaces */ "../../libs/shared/src/interfaces/index.ts");
+/* harmony import */ var apps_classrooms_utils_GroupHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! apps/classrooms/utils/GroupHelper */ "./src/apps/classrooms/utils/GroupHelper.ts");
+/* harmony import */ var _colour_picker_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./colour-picker.scss */ "./src/apps/classrooms/components/colour-picker/colour-picker.scss");
+/* harmony import */ var _colour_picker_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_colour_picker_scss__WEBPACK_IMPORTED_MODULE_7__);
+
+
+
+
+
+
+
+
+ColourPicker.defaultProps = {
+  selection: _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_5__["ClassroomGroupColour"].White,
+  onSelect: function onSelect() {}
+};
+function ColourPicker(props) {
+  function getToggleButtonClass() {
+    var baseClass = "".concat(_colour_picker_scss__WEBPACK_IMPORTED_MODULE_7___default.a.dropdownToggle, " outline-none p-0 d-flex align-items-center text-decoration-none");
+    var disabledClass = props.disabled ? 'cursor-default' : '';
+    return "".concat(baseClass, " ").concat(disabledClass);
+  }
+
+  function getOptionClass(colour) {
+    var baseClass = "".concat(_colour_picker_scss__WEBPACK_IMPORTED_MODULE_7___default.a.colourOption, " position-relative");
+    var borderClass = colour === 'colour:0' ? 'border border-dark' : '';
+    var disabledClass = props.disabled ? 'cursor-default' : '';
+    var colorClass = Object(apps_classrooms_utils_GroupHelper__WEBPACK_IMPORTED_MODULE_6__["mapColourToClassName"])(colour);
+    return "".concat(baseClass, " ").concat(borderClass, " ").concat(disabledClass, " ").concat(colorClass);
+  }
+
+  var dropdownProps = {};
+  if (props.disabled) dropdownProps.show = false;
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"], Object.assign({}, dropdownProps), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"].Toggle, {
+    id: props.id,
+    variant: 'link',
+    className: getToggleButtonClass()
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "border border-secondary rounded bg-white ".concat(_colour_picker_scss__WEBPACK_IMPORTED_MODULE_7___default.a.colourButton)
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "px-0 py-1 rounded ".concat(Object(apps_classrooms_utils_GroupHelper__WEBPACK_IMPORTED_MODULE_6__["mapColourToClassName"])(props.selection))
+  }, "\xA0")), !props.disabled && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_3__["SvgContainer"], {
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_4__["cvSvgLibrary"].Caret
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"].Menu, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: "".concat(_colour_picker_scss__WEBPACK_IMPORTED_MODULE_7___default.a.colourList, " list-unstyled d-flex flex-wrap px-2 m-0")
+  }, Object.keys(_libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_5__["ClassroomGroupColour"]).map(function (colourKey) {
+    var colour = _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_5__["ClassroomGroupColour"][colourKey];
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      key: "".concat(props.id, ":").concat(colour),
+      className: 'm-1'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_2__["DivButton"], {
+      onClick: function onClick() {
+        return props.onSelect(colour);
+      },
+      className: getOptionClass(colour)
+    }, colour === _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_5__["ClassroomGroupColour"].White ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: _colour_picker_scss__WEBPACK_IMPORTED_MODULE_7___default.a.lineThrough
+    }) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, "\xA0")));
+  }))));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/colour-picker/colour-picker.scss":
+/*!*************************************************************************!*\
+  !*** ./src/apps/classrooms/components/colour-picker/colour-picker.scss ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"dropdownToggle":"cv--dropdownToggle--347DY","colourButton":"cv--colourButton--1rKvE","colourList":"cv--colourList--328-w","colourOption":"cv--colourOption--1Tw7u","lineThrough":"cv--lineThrough--18oZq"};
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-group-item/ManageClassroomGroupItem.tsx":
+/*!*************************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-group-item/ManageClassroomGroupItem.tsx ***!
+  \*************************************************************************************************/
+/*! exports provided: ManageClassroomGroupItem */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ManageClassroomGroupItem", function() { return ManageClassroomGroupItem; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../libs/common/src/backbone */ "../../libs/common/src/backbone/index.ts");
+/* harmony import */ var _libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
+/* harmony import */ var _libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var apps_classrooms_components_colour_picker_ColourPicker__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! apps/classrooms/components/colour-picker/ColourPicker */ "./src/apps/classrooms/components/colour-picker/ColourPicker.tsx");
+/* harmony import */ var _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
+/* harmony import */ var _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
+
+
+
+
+
+
+
+
+
+
+function ManageClassroomGroupItem(props) {
+  var _a;
+
+  function onClickEdit() {
+    _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_8__["AnalyticsHelper"].logUserAction({
+      id: props.group.id
+    }, {
+      entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["EntityType"].ClassroomGroup,
+      workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["WorkflowPhase"].Start,
+      actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["UserAction"].Edit,
+      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["LocationContext"].ManageClassroomGroupListItem
+    });
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_1__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_5__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_6__["Actions"].Classrooms.EDIT_GROUP,
+      args: [props.classroom.id, props.group.id]
+    });
+  }
+
+  function onClickDelete() {
+    _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_8__["AnalyticsHelper"].logUserAction({
+      id: props.group.id
+    }, {
+      entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["EntityType"].ClassroomGroup,
+      workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["WorkflowPhase"].Start,
+      actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["UserAction"].Delete,
+      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_9__["LocationContext"].ManageClassroomGroupListItem
+    });
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_1__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_5__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_6__["Actions"].Classrooms.DELETE_GROUP,
+      args: [props.classroom.id, props.group.id]
+    });
+  }
+
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'd-flex align-items-center'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
+    className: 'w-33 m-0'
+  }, props.group.name), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'd-inline-block mr-4'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_colour_picker_ColourPicker__WEBPACK_IMPORTED_MODULE_7__["ColourPicker"], {
+    selection: (_a = props.group.metadata) === null || _a === void 0 ? void 0 : _a.colour,
+    id: "".concat(props.group.id, "-classroom-group-list-item"),
+    disabled: true
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_2__["DivButton"], {
+    className: 'mr-2',
+    onClick: onClickEdit
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_3__["SvgContainer"], {
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_4__["cvSvgLibrary"].Edit
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_2__["DivButton"], {
+    onClick: onClickDelete
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_3__["SvgContainer"], {
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_4__["cvSvgLibrary"].Delete
+  }))));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-groups/ManageClassroomGroups.tsx":
+/*!******************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-groups/ManageClassroomGroups.tsx ***!
+  \******************************************************************************************/
+/*! exports provided: ManageClassroomGroups */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ManageClassroomGroups", function() { return ManageClassroomGroups; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _libs_shared_src_components_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/icon-button/IconButton */ "../../libs/shared/src/components/icon-button/IconButton.tsx");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var apps_classrooms_components_manage_classroom_group_item_ManageClassroomGroupItem__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! apps/classrooms/components/manage-classroom-group-item/ManageClassroomGroupItem */ "./src/apps/classrooms/components/manage-classroom-group-item/ManageClassroomGroupItem.tsx");
+/* harmony import */ var _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
+/* harmony import */ var _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
+
+
+
+
+
+
+
+
+
+var namespace = 'classrooms.manageClassroomGroups';
+
+var getCreateGroupAppLink = function getCreateGroupAppLink(id) {
+  return {
+    application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_5__["AppChannels"].CLASSROOMS,
+    action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_4__["Actions"].Classrooms.NEW_GROUP,
+    args: [id]
+  };
+};
+
+function ManageClassroomGroups(props) {
+  var _a;
+
+  function onClickCreateGroup() {
+    _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_7__["AnalyticsHelper"].logUserAction({
+      classroomId: props.classroom.id
+    }, {
+      workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__["WorkflowPhase"].Start,
+      entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__["EntityType"].ClassroomGroup,
+      actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__["UserAction"].Create,
+      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_8__["LocationContext"].ManageClassroomGroups
+    });
+  }
+
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_1__["LanguageNamespaceContext"].Provider, {
+    value: namespace
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'py-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'd-flex align-items-center'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
+    className: 'h6 w-33'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_1__["Text"], {
+    phrase: 'groupName'
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
+    className: 'h6 w-25'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_1__["Text"], {
+    phrase: 'colour'
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_3__["IconButton"], {
+    appLink: getCreateGroupAppLink(props.classroom.id),
+    onClick: onClickCreateGroup,
+    className: 'btn btn-secondary ml-auto',
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__["cvSvgLibrary"].Plus
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_1__["Text"], {
+    phrase: 'createNew'
+  }))), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("ul", {
+    className: 'list-unstyled'
+  }, !!((_a = props.groups) === null || _a === void 0 ? void 0 : _a.length) && props.groups.map(function (group) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", {
+      key: group.id,
+      className: 'mb-2'
+    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](apps_classrooms_components_manage_classroom_group_item_ManageClassroomGroupItem__WEBPACK_IMPORTED_MODULE_6__["ManageClassroomGroupItem"], {
+      classroom: props.classroom,
+      group: group
+    }));
+  }))));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-groups/partial-loading/PartialManageClassroomGroups.tsx":
+/*!*****************************************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-groups/partial-loading/PartialManageClassroomGroups.tsx ***!
+  \*****************************************************************************************************************/
+/*! exports provided: PartialManageClassroomGroups */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PartialManageClassroomGroups", function() { return PartialManageClassroomGroups; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var shared_components_pill_tab_selector_partial_loading_PartialPillTabSelector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! shared/components/pill-tab-selector/partial-loading/PartialPillTabSelector */ "./src/shared/components/pill-tab-selector/partial-loading/PartialPillTabSelector.tsx");
+/* harmony import */ var _partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./partial-manage-classrooms-groups.scss */ "./src/apps/classrooms/components/manage-classroom-groups/partial-loading/partial-manage-classrooms-groups.scss");
+/* harmony import */ var _partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _libs_shared_src_components_breadcrumbs_Breadcrumbs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../../libs/shared/src/components/breadcrumbs/Breadcrumbs */ "../../libs/shared/src/components/breadcrumbs/Breadcrumbs.tsx");
+
+
+
+
+function PartialManageClassroomGroups() {
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'px-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "mb-1 partial-loading-background ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.heading)
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'pb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_breadcrumbs_Breadcrumbs__WEBPACK_IMPORTED_MODULE_3__["PartialBreadcrumbs"], {
+    numItems: 2
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'pb-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_pill_tab_selector_partial_loading_PartialPillTabSelector__WEBPACK_IMPORTED_MODULE_1__["PartialPillTabSelector"], null)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'py-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'd-flex align-items-center'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'w-25 mb-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "partial-loading-background ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.nameHeading)
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'w-25 mb-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "partial-loading-background ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.colourHeading)
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "partial-loading-background ml-auto ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.newGroup)
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: 'list-unstyled'
+  }, Array(8).fill(null).map(function (group, i) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      key: i,
+      className: 'mb-2'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: 'd-flex align-items-center'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: 'w-25'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.group)
+    })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: 'd-inline-block mr-4'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.colourPicker)
+    })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background mr-2 ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.actionIcon)
+    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background ".concat(_partial_manage_classrooms_groups_scss__WEBPACK_IMPORTED_MODULE_2___default.a.actionIcon)
+    })));
+  }))));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-groups/partial-loading/partial-manage-classrooms-groups.scss":
+/*!**********************************************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-groups/partial-loading/partial-manage-classrooms-groups.scss ***!
+  \**********************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"heading":"cv--heading--2TMwg","nameHeading":"cv--nameHeading--1TlYf","colourHeading":"cv--colourHeading--3_Tfc","newGroup":"cv--newGroup--3oBoz","group":"cv--group--3aWN8","colourPicker":"cv--colourPicker--2NcjR","actionIcon":"cv--actionIcon--3bhju"};
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-student-item/ManageClassroomStudentItem.tsx":
+/*!*****************************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-student-item/ManageClassroomStudentItem.tsx ***!
+  \*****************************************************************************************************/
+/*! exports provided: ManageClassroomStudentItem */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ManageClassroomStudentItem", function() { return ManageClassroomStudentItem; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "react-redux");
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
+/* harmony import */ var _libs_common_src_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../libs/common/src/react */ "../../libs/common/src/react/index.ts");
+/* harmony import */ var _libs_shared_src_components_forms_form_checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/forms/form-checkbox/Checkbox */ "../../libs/shared/src/components/forms/form-checkbox/Checkbox.tsx");
+/* harmony import */ var _libs_shared_src_components_actions_Actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/actions/Actions */ "../../libs/shared/src/components/actions/Actions.tsx");
+/* harmony import */ var _libs_shared_src_hooks_UseAlerts__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/hooks/UseAlerts */ "../../libs/shared/src/hooks/UseAlerts.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var apps_classrooms_components_classroom_group_dropdown_ClassroomGroupDropdown__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! apps/classrooms/components/classroom-group-dropdown/ClassroomGroupDropdown */ "./src/apps/classrooms/components/classroom-group-dropdown/ClassroomGroupDropdown.tsx");
+/* harmony import */ var apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! apps/classrooms/flight-requests/ClassroomRequests */ "./src/apps/classrooms/flight-requests/ClassroomRequests.ts");
+/* harmony import */ var apps_classrooms_components_classroom_group_pill_ClassroomGroupPill__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! apps/classrooms/components/classroom-group-pill/ClassroomGroupPill */ "./src/apps/classrooms/components/classroom-group-pill/ClassroomGroupPill.tsx");
+/* harmony import */ var _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
+/* harmony import */ var _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
+/* harmony import */ var _libs_shared_src_enums_UserGroup__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/enums/UserGroup */ "../../libs/shared/src/enums/UserGroup.ts");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var namespace = 'classrooms.manageClassroomStudentItem';
+var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__["LanguageService"].encloseNamespace(namespace);
+
+var getEditStudentAppLink = function getEditStudentAppLink(id) {
+  return {
+    application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_7__["AppChannels"].USER_MANAGER,
+    action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_8__["Actions"].UserManager.EDIT_USER,
+    args: [id],
+    params: {
+      userType: _libs_shared_src_enums_UserGroup__WEBPACK_IMPORTED_MODULE_14__["UserGroup"].Learner
+    }
+  };
+};
+
+var getRemoveStudentsAppLink = function getRemoveStudentsAppLink(studentId, classroomId) {
+  return {
+    application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_7__["AppChannels"].CLASSROOMS,
+    action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_8__["Actions"].Classrooms.REMOVE_STUDENTS,
+    args: [classroomId],
+    params: {
+      studentIds: [studentId]
+    }
+  };
+};
+
+function ManageClassroomStudentItem(props) {
+  var dispatch = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useDispatch"])();
+  var alerts = Object(_libs_shared_src_hooks_UseAlerts__WEBPACK_IMPORTED_MODULE_6__["useAlerts"])();
+  var selectedGroups = props.groups.filter(function (group) {
+    var _a, _b;
+
+    if (!((_b = (_a = group.users) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) return;
+    return !!group.users.data.find(function (u) {
+      return u.id === props.student.id;
+    });
+  });
+
+  function onToggleGroup(student, group, toggleOn) {
+    if (toggleOn) {
+      _libs_common_src_react__WEBPACK_IMPORTED_MODULE_3__["Flight"].fetch(dispatch, apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_10__["ClassroomRequests"].addStudentsToGroup([student.id], group.id, props.classroom.id, function () {
+        _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_12__["AnalyticsHelper"].logUserAction({
+          id: group.id,
+          studentCount: 1
+        }, {
+          actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["UserAction"].Associate,
+          entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["EntityType"].ClassroomGroup,
+          descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["AssocDescriptor"].User,
+          workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["WorkflowPhase"].Complete,
+          location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["LocationContext"].ManageClassroomStudentListItem
+        });
+        alerts.success(getPhrase('addSuccess', {
+          studentName: student.name,
+          groupName: group.name
+        }));
+      }, function () {
+        alerts.error(getPhrase('addError', {
+          studentName: student.name,
+          groupName: group.name
+        }));
+      }));
+      return;
+    }
+
+    _libs_common_src_react__WEBPACK_IMPORTED_MODULE_3__["Flight"].fetch(dispatch, apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_10__["ClassroomRequests"].removeStudentsFromGroup([student.id], group.id, props.classroom.id, function () {
+      _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_12__["AnalyticsHelper"].logUserAction({
+        id: group.id,
+        studentCount: 1
+      }, {
+        actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["UserAction"].Dissociate,
+        entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["EntityType"].ClassroomGroup,
+        descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["AssocDescriptor"].User,
+        workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["WorkflowPhase"].Complete,
+        location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["LocationContext"].ManageClassroomStudentListItem
+      });
+      alerts.success(getPhrase('removeSuccess', {
+        studentName: student.name,
+        groupName: group.name
+      }));
+    }, function () {
+      alerts.error(getPhrase('removeError', {
+        studentName: student.name,
+        groupName: group.name
+      }));
+    }));
+  }
+
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'd-flex align-items-center py-1 px-4'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_forms_form_checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_4__["Checkbox"], {
+    id: props.student.id,
+    checked: props.checked,
+    onChange: props.onToggleCheckbox,
+    className: 'mr-2'
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
+    className: 'mb-0 w-25 text-truncate text-nowrap'
+  }, props.student.name, " ", props.student.surname), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'mr-auto d-flex flex-wrap mt-n1'
+  }, !!selectedGroups.length && selectedGroups.map(function (group) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      key: group.id,
+      className: 'mr-1 mt-1'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_classroom_group_pill_ClassroomGroupPill__WEBPACK_IMPORTED_MODULE_11__["ClassroomGroupPill"], {
+      group: group
+    }));
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_classroom_group_dropdown_ClassroomGroupDropdown__WEBPACK_IMPORTED_MODULE_9__["ClassroomGroupDropdown"], {
+    id: "add-group-".concat(props.student.id),
+    classroom: props.classroom,
+    groups: props.groups,
+    studentIds: [props.student.id],
+    preselections: selectedGroups,
+    onToggle: function onToggle(group, toggleOn) {
+      return onToggleGroup(props.student, group, toggleOn);
+    },
+    analyticsOptions: {
+      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["LocationContext"].ManageClassroomStudentListItem
+    },
+    alignRight: true
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_actions_Actions__WEBPACK_IMPORTED_MODULE_5__["Actions"], {
+    actions: [{
+      label: getPhrase('editStudent'),
+      appLink: getEditStudentAppLink(props.student.id),
+      onClick: function onClick() {
+        _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_12__["AnalyticsHelper"].logUserAction({
+          id: props.student.id
+        }, {
+          actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["UserAction"].Edit,
+          entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["EntityType"].User,
+          workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["WorkflowPhase"].Start,
+          location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["LocationContext"].ManageClassroomStudentListItem
+        });
+      }
+    }, {
+      label: getPhrase('removeStudent'),
+      appLink: getRemoveStudentsAppLink(props.student.id, props.classroom.id),
+      className: 'text-danger',
+      onClick: function onClick() {
+        _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_12__["AnalyticsHelper"].logUserAction({
+          id: props.classroom.id,
+          userId: props.student.id
+        }, {
+          actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["UserAction"].Dissociate,
+          entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["EntityType"].Classroom,
+          descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["AssocDescriptor"].User,
+          workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["WorkflowPhase"].Start,
+          location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_13__["LocationContext"].ManageClassroomStudentListItem
+        });
+      }
+    }],
+    actionsDropdownClassName: 'btn'
+  }));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-students/ManageClassroomStudents.tsx":
+/*!**********************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-students/ManageClassroomStudents.tsx ***!
+  \**********************************************************************************************/
+/*! exports provided: ManageClassroomStudents */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ManageClassroomStudents", function() { return ManageClassroomStudents; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "react-redux");
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_redux__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../libs/common/src/backbone */ "../../libs/common/src/backbone/index.ts");
+/* harmony import */ var _libs_common_src_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../libs/common/src/react */ "../../libs/common/src/react/index.ts");
+/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
+/* harmony import */ var _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
+/* harmony import */ var _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../../libs/analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
+/* harmony import */ var _libs_shared_src_hooks_UseAlerts__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/hooks/UseAlerts */ "../../libs/shared/src/hooks/UseAlerts.ts");
+/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
+/* harmony import */ var _libs_shared_src_components_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/icon-button/IconButton */ "../../libs/shared/src/components/icon-button/IconButton.tsx");
+/* harmony import */ var _libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _libs_shared_src_components_forms_form_checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/forms/form-checkbox/Checkbox */ "../../libs/shared/src/components/forms/form-checkbox/Checkbox.tsx");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_hooks_useBulkCheckboxManager__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! shared/hooks/useBulkCheckboxManager */ "./src/shared/hooks/useBulkCheckboxManager.tsx");
+/* harmony import */ var apps_classrooms_components_manage_classroom_student_item_ManageClassroomStudentItem__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! apps/classrooms/components/manage-classroom-student-item/ManageClassroomStudentItem */ "./src/apps/classrooms/components/manage-classroom-student-item/ManageClassroomStudentItem.tsx");
+/* harmony import */ var apps_classrooms_components_classroom_group_dropdown_ClassroomGroupDropdown__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! apps/classrooms/components/classroom-group-dropdown/ClassroomGroupDropdown */ "./src/apps/classrooms/components/classroom-group-dropdown/ClassroomGroupDropdown.tsx");
+/* harmony import */ var apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! apps/classrooms/flight-requests/ClassroomRequests */ "./src/apps/classrooms/flight-requests/ClassroomRequests.ts");
+/* harmony import */ var _libs_shared_src_hooks_UseMediaQuery__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/hooks/UseMediaQuery */ "../../libs/shared/src/hooks/UseMediaQuery.tsx");
+/* harmony import */ var _libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var namespace = 'classrooms.manageClassroomStudents';
+var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_4__["LanguageService"].encloseNamespace(namespace);
+function ManageClassroomStudents(props) {
+  var classroom = props.classroom,
+      students = props.students,
+      groups = props.groups;
+  var dispatch = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useDispatch"])();
+  var alerts = Object(_libs_shared_src_hooks_UseAlerts__WEBPACK_IMPORTED_MODULE_7__["useAlerts"])();
+
+  var _useBulkCheckboxManag = Object(shared_hooks_useBulkCheckboxManager__WEBPACK_IMPORTED_MODULE_16__["useBulkCheckboxManager"])(students.data),
+      onToggleBulk = _useBulkCheckboxManag.onToggleBulk,
+      onToggleItem = _useBulkCheckboxManag.onToggleItem,
+      getSelected = _useBulkCheckboxManag.getSelected,
+      isChecked = _useBulkCheckboxManag.isChecked,
+      bulkChecked = _useBulkCheckboxManag.bulkChecked;
+
+  var selectionCount = getSelected().length;
+  var bulkPreselections = groups.filter(function (group) {
+    var _a, _b;
+
+    if (!((_b = (_a = group.users) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) return false;
+    var allStudentsFound = true;
+    var index = 0;
+    var studentIds = getSelected();
+    if (!studentIds.length) return;
+
+    var _loop = function _loop() {
+      var id = studentIds[index];
+      if (!group.users.data.find(function (stu) {
+        return stu.id.toString() === id.toString();
+      })) allStudentsFound = false;
+      index++;
+    };
+
+    do {
+      _loop();
+    } while (index < studentIds.length);
+
+    return allStudentsFound;
+  });
+
+  function onClickAddStudents() {
+    _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_5__["AnalyticsHelper"].logUserAction({
+      id: classroom.id
+    }, {
+      entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["EntityType"].Classroom,
+      descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["AssocDescriptor"].User,
+      workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["WorkflowPhase"].Start,
+      actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["UserAction"].Associate,
+      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["LocationContext"].ManageClassroomStudents
+    });
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_2__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_14__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_15__["Actions"].Classrooms.ADD_STUDENTS,
+      args: [classroom.id]
+    });
+  }
+
+  function onClickBulkRemoveStudents() {
+    if (!selectionCount) return;
+    _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_5__["AnalyticsHelper"].logUserAction({
+      id: classroom.id
+    }, {
+      entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["EntityType"].Classroom,
+      descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["AssocDescriptor"].User,
+      workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["WorkflowPhase"].Start,
+      actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["UserAction"].Dissociate,
+      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["LocationContext"].ManageClassroomStudents
+    });
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_2__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_14__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_15__["Actions"].Classrooms.REMOVE_STUDENTS,
+      args: [classroom.id],
+      params: {
+        studentIds: getSelected()
+      }
+    });
+  }
+
+  function onBulkToggleGroup(group, toggleOn) {
+    var selectedStudentIds = getSelected();
+
+    if (toggleOn) {
+      _libs_common_src_react__WEBPACK_IMPORTED_MODULE_3__["Flight"].fetch(dispatch, apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_19__["ClassroomRequests"].addStudentsToGroup(selectedStudentIds, group.id, classroom.id, function () {
+        _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_5__["AnalyticsHelper"].logUserAction({
+          id: group.id,
+          studentCount: selectedStudentIds.length
+        }, {
+          actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["UserAction"].Associate,
+          entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["EntityType"].ClassroomGroup,
+          descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["AssocDescriptor"].User,
+          workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["WorkflowPhase"].Complete,
+          location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["LocationContext"].ManageClassroomStudents
+        });
+        alerts.success(getPhrase('addSuccess', {
+          groupName: group.name
+        }));
+      }, function () {
+        alerts.error(getPhrase('addError', {
+          groupName: group.name
+        }));
+      }));
+    } else {
+      _libs_common_src_react__WEBPACK_IMPORTED_MODULE_3__["Flight"].fetch(dispatch, apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_19__["ClassroomRequests"].removeStudentsFromGroup(selectedStudentIds, group.id, classroom.id, function () {
+        _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_5__["AnalyticsHelper"].logUserAction({
+          id: group.id,
+          studentCount: selectedStudentIds.length
+        }, {
+          actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["UserAction"].Dissociate,
+          entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["EntityType"].ClassroomGroup,
+          descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["AssocDescriptor"].User,
+          workflowPhase: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["WorkflowPhase"].Complete,
+          location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["LocationContext"].ManageClassroomStudents
+        });
+        alerts.success(getPhrase('removeSuccess', {
+          groupName: group.name
+        }));
+      }, function () {
+        alerts.error(getPhrase('removeError', {
+          groupName: group.name
+        }));
+      }));
+    }
+  }
+
+  var edgeToEdge = Object(_libs_shared_src_hooks_UseMediaQuery__WEBPACK_IMPORTED_MODULE_20__["useMediaQuery"])(_libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_21__["MediaQueryStrings"].XLDown);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "d-flex align-items-center py-2 ".concat(edgeToEdge ? 'pl-2' : 'pl-4')
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_forms_form_checkbox_Checkbox__WEBPACK_IMPORTED_MODULE_13__["Checkbox"], {
+    id: 'manage-classroom-students-bulk',
+    onChange: onToggleBulk,
+    checked: bulkChecked,
+    className: 'mr-4'
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](apps_classrooms_components_classroom_group_dropdown_ClassroomGroupDropdown__WEBPACK_IMPORTED_MODULE_18__["ClassroomGroupDropdown"], {
+    id: 'bulk-add-group',
+    classroom: classroom,
+    studentIds: getSelected(),
+    groups: groups,
+    onToggle: onBulkToggleGroup,
+    disabled: !selectionCount,
+    preselections: bulkPreselections,
+    analyticsOptions: {
+      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_6__["LocationContext"].ManageClassroomStudents
+    }
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_9__["DivButton"], {
+    className: "mr-auto ".concat(!selectionCount ? 'text-light cursor-default' : ''),
+    onClick: onClickBulkRemoveStudents
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__["SvgContainer"], {
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__["cvSvgLibrary"].Delete
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_10__["IconButton"], {
+    onClick: onClickAddStudents,
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__["cvSvgLibrary"].Plus,
+    className: 'btn btn-secondary'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_8__["Text"], {
+    namespace: namespace,
+    phrase: 'addStudent'
+  }))), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("ul", {
+    className: 'striped-list list-unstyled'
+  }, students.data.map(function (student) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", {
+      key: student.id
+    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](apps_classrooms_components_manage_classroom_student_item_ManageClassroomStudentItem__WEBPACK_IMPORTED_MODULE_17__["ManageClassroomStudentItem"], {
+      classroom: classroom,
+      student: student,
+      groups: props.groups,
+      checked: isChecked(student.id),
+      onToggleCheckbox: function onToggleCheckbox() {
+        return onToggleItem(student.id);
+      }
+    }));
+  })));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-students/empty-state/ManageClassroomStudentsEmptyState.tsx":
+/*!********************************************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-students/empty-state/ManageClassroomStudentsEmptyState.tsx ***!
+  \********************************************************************************************************************/
+/*! exports provided: ManageClassroomStudentsEmptyState */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ManageClassroomStudentsEmptyState", function() { return ManageClassroomStudentsEmptyState; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../../libs/common/src/backbone */ "../../libs/common/src/backbone/index.ts");
+/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _libs_shared_src_components_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../../libs/shared/src/components/icon-button/IconButton */ "../../libs/shared/src/components/icon-button/IconButton.tsx");
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_constants_ImageUrls__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! shared/constants/ImageUrls */ "./src/shared/constants/ImageUrls.ts");
+/* harmony import */ var shared_components_empty_state_image_EmptyStateImage__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared/components/empty-state-image/EmptyStateImage */ "./src/shared/components/empty-state-image/EmptyStateImage.tsx");
+
+
+
+
+
+
+
+
+
+var namespace = 'classrooms.manageClassroomStudentsEmptyState';
+function ManageClassroomStudentsEmptyState(props) {
+  function onClickAddStudents() {
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_1__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_5__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_6__["Actions"].Classrooms.ADD_STUDENTS,
+      args: [props.classroom.id]
+    });
+  }
+
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_2__["LanguageNamespaceContext"].Provider, {
+    value: namespace
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'text-center pt-5'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_empty_state_image_EmptyStateImage__WEBPACK_IMPORTED_MODULE_8__["EmptyStateImage"], {
+    src: shared_constants_ImageUrls__WEBPACK_IMPORTED_MODULE_7__["ImageUrls"].EmptyStates.CLASSROOMS
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", {
+    className: 'h6'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_2__["Text"], {
+    phrase: 'emptyStateHeading'
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
+    className: 'mb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_2__["Text"], {
+    phrase: 'emptyStateInfo'
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_3__["IconButton"], {
+    className: 'btn btn-primary',
+    onClick: onClickAddStudents,
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_4__["cvSvgLibrary"].Plus
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_2__["Text"], {
+    phrase: 'addStudents'
+  }))));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-students/partial-loading/PartialManageClassroomStudents.tsx":
+/*!*********************************************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-students/partial-loading/PartialManageClassroomStudents.tsx ***!
+  \*********************************************************************************************************************/
+/*! exports provided: PartialManageClassroomStudents */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PartialManageClassroomStudents", function() { return PartialManageClassroomStudents; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var shared_components_pill_tab_selector_partial_loading_PartialPillTabSelector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! shared/components/pill-tab-selector/partial-loading/PartialPillTabSelector */ "./src/shared/components/pill-tab-selector/partial-loading/PartialPillTabSelector.tsx");
+/* harmony import */ var _partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./partial-manage-classroom-students.scss */ "./src/apps/classrooms/components/manage-classroom-students/partial-loading/partial-manage-classroom-students.scss");
+/* harmony import */ var _partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _libs_shared_src_components_breadcrumbs_Breadcrumbs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../../libs/shared/src/components/breadcrumbs/Breadcrumbs */ "../../libs/shared/src/components/breadcrumbs/Breadcrumbs.tsx");
+
+
+
+
+function PartialManageClassroomStudents() {
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'px-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "mb-1 partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.heading)
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'pb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_breadcrumbs_Breadcrumbs__WEBPACK_IMPORTED_MODULE_3__["PartialBreadcrumbs"], {
+    numItems: 2
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'pb-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_pill_tab_selector_partial_loading_PartialPillTabSelector__WEBPACK_IMPORTED_MODULE_1__["PartialPillTabSelector"], null)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'd-flex align-items-center py-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "mx-4 partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.checkbox)
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "mr-2 partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.actionIcon)
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "mr-auto partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.actionIcon)
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.addStudents)
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: 'striped-list list-unstyled'
+  }, Array(20).fill(null).map(function (student, i) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      key: i
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: 'd-flex align-items-center py-1 px-4'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "mr-2 partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.checkbox)
+    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: 'w-25'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.studentName)
+    })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: 'mr-auto d-flex'
+    }, Math.random() > 0.5 ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background rounded-pill mr-1 ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.group, " ").concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.lg)
+    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background rounded-pill ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.group, " ").concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.sm)
+    })) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background rounded-pill ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.group, " ").concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.sm)
+    })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "mr-2 partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.actionIcon)
+    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: "partial-loading-background ".concat(_partial_manage_classroom_students_scss__WEBPACK_IMPORTED_MODULE_2___default.a.moreActions)
+    })));
+  })));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/components/manage-classroom-students/partial-loading/partial-manage-classroom-students.scss":
+/*!*************************************************************************************************************************!*\
+  !*** ./src/apps/classrooms/components/manage-classroom-students/partial-loading/partial-manage-classroom-students.scss ***!
+  \*************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"heading":"cv--heading--3W4zl","checkbox":"cv--checkbox--11WXC","actionIcon":"cv--actionIcon--1K3UF","addStudents":"cv--addStudents--1sqTe","studentName":"cv--studentName--3cfGe","group":"cv--group--2HHY1","sm":"cv--sm--3_EMi","lg":"cv--lg--3L-SN","moreActions":"cv--moreActions--9PVrB"};
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/utils/GroupHelper.ts":
+/*!**************************************************!*\
+  !*** ./src/apps/classrooms/utils/GroupHelper.ts ***!
+  \**************************************************/
+/*! exports provided: mapColourToClassName */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mapColourToClassName", function() { return mapColourToClassName; });
+/* harmony import */ var _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../libs/shared/src/interfaces */ "../../libs/shared/src/interfaces/index.ts");
+
+function mapColourToClassName(groupColour) {
+  switch (groupColour) {
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].White:
+    default:
+      return 'bg-white';
+
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].Pink:
+      return 'bg-pink';
+
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].YellowOrange:
+      return 'bg-yellow-orange';
+
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].Emerald:
+      return 'bg-emerald';
+
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].PuertoRico:
+      return 'bg-puerto-rico';
+
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].PictonBlue:
+      return 'bg-picton-blue';
+
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].EastSide:
+      return 'bg-east-side';
+
+    case _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClassroomGroupColour"].Portage:
+      return 'bg-portage';
+  }
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/views/manage-classroom/ManageClassroomView.tsx":
+/*!****************************************************************************!*\
+  !*** ./src/apps/classrooms/views/manage-classroom/ManageClassroomView.tsx ***!
+  \****************************************************************************/
+/*! exports provided: ManageClassroomView */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ManageClassroomView", function() { return ManageClassroomView; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../libs/common/src/react */ "../../libs/common/src/react/index.ts");
+/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
+/* harmony import */ var _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../../libs/common/src/backbone */ "../../libs/common/src/backbone/index.ts");
+/* harmony import */ var _libs_common_src_react_hooks_UseSetPageTitle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../libs/common/src/react/hooks/UseSetPageTitle */ "../../libs/common/src/react/hooks/UseSetPageTitle.ts");
+/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/enums/PermissionName */ "../../libs/shared/src/enums/PermissionName.ts");
+/* harmony import */ var _libs_shared_src_hooks_usePermissions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/hooks/usePermissions */ "../../libs/shared/src/hooks/usePermissions.ts");
+/* harmony import */ var _libs_shared_src_components_breadcrumbs_Breadcrumbs__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/breadcrumbs/Breadcrumbs */ "../../libs/shared/src/components/breadcrumbs/Breadcrumbs.tsx");
+/* harmony import */ var _libs_shared_src_components_actions_Actions__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/components/actions/Actions */ "../../libs/shared/src/components/actions/Actions.tsx");
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _libs_shared_src_hooks_UseMediaQuery__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/hooks/UseMediaQuery */ "../../libs/shared/src/hooks/UseMediaQuery.tsx");
+/* harmony import */ var _libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_components_pill_tab_selector_PillTabSelector__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! shared/components/pill-tab-selector/PillTabSelector */ "./src/shared/components/pill-tab-selector/PillTabSelector.tsx");
+/* harmony import */ var shared_errors_general_not_found_LiteNotFoundError__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! shared/errors/general/not-found/LiteNotFoundError */ "./src/shared/errors/general/not-found/LiteNotFoundError.ts");
+/* harmony import */ var apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! apps/classrooms/flight-requests/ClassroomRequests */ "./src/apps/classrooms/flight-requests/ClassroomRequests.ts");
+/* harmony import */ var apps_classrooms_components_manage_classroom_students_ManageClassroomStudents__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! apps/classrooms/components/manage-classroom-students/ManageClassroomStudents */ "./src/apps/classrooms/components/manage-classroom-students/ManageClassroomStudents.tsx");
+/* harmony import */ var apps_classrooms_components_manage_classroom_groups_ManageClassroomGroups__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! apps/classrooms/components/manage-classroom-groups/ManageClassroomGroups */ "./src/apps/classrooms/components/manage-classroom-groups/ManageClassroomGroups.tsx");
+/* harmony import */ var apps_classrooms_components_manage_classroom_students_empty_state_ManageClassroomStudentsEmptyState__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! apps/classrooms/components/manage-classroom-students/empty-state/ManageClassroomStudentsEmptyState */ "./src/apps/classrooms/components/manage-classroom-students/empty-state/ManageClassroomStudentsEmptyState.tsx");
+/* harmony import */ var apps_classrooms_components_manage_classroom_students_partial_loading_PartialManageClassroomStudents__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! apps/classrooms/components/manage-classroom-students/partial-loading/PartialManageClassroomStudents */ "./src/apps/classrooms/components/manage-classroom-students/partial-loading/PartialManageClassroomStudents.tsx");
+/* harmony import */ var apps_classrooms_components_manage_classroom_groups_partial_loading_PartialManageClassroomGroups__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! apps/classrooms/components/manage-classroom-groups/partial-loading/PartialManageClassroomGroups */ "./src/apps/classrooms/components/manage-classroom-groups/partial-loading/PartialManageClassroomGroups.tsx");
+/* harmony import */ var _manage_classroom_scss__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./manage-classroom.scss */ "./src/apps/classrooms/views/manage-classroom/manage-classroom.scss");
+/* harmony import */ var _manage_classroom_scss__WEBPACK_IMPORTED_MODULE_23___default = /*#__PURE__*/__webpack_require__.n(_manage_classroom_scss__WEBPACK_IMPORTED_MODULE_23__);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var namespace = 'classrooms.manageClassroom';
+var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__["LanguageService"].encloseNamespace(namespace);
+ManageClassroomView.defaultProps = {
+  activeTab: 'students'
+};
+function ManageClassroomView(props) {
+  var _a, _b;
+
+  var classroom = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_17__["ClassroomRequests"].getClassroom(props.id));
+  var students = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_17__["ClassroomRequests"].getClassroomStudents(props.id));
+  var groups = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(apps_classrooms_flight_requests_ClassroomRequests__WEBPACK_IMPORTED_MODULE_17__["ClassroomRequests"].getClassroomGroups(props.id));
+  Object(_libs_common_src_react_hooks_UseSetPageTitle__WEBPACK_IMPORTED_MODULE_4__["useSetPageTitle"])(getPhrase(props.activeTab === 'students' ? 'pageTitleStudents' : 'pageTitleGroups'));
+
+  var _usePermissions = Object(_libs_shared_src_hooks_usePermissions__WEBPACK_IMPORTED_MODULE_7__["usePermissions"])(),
+      hasPermissions = _usePermissions.hasPermissions;
+
+  var isMobile = Object(_libs_shared_src_hooks_UseMediaQuery__WEBPACK_IMPORTED_MODULE_11__["useMediaQuery"])(_libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_12__["MediaQueryStrings"].SMDown);
+  var actions = [{
+    label: getPhrase(isMobile ? 'editClassroom' : 'edit'),
+    appLink: {
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_13__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_14__["Actions"].Classrooms.EDIT_CLASSROOM,
+      args: [props.id]
+    },
+    className: 'btn btn-secondary',
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_10__["cvSvgLibrary"].Edit,
+    button: !isMobile
+  }, {
+    label: getPhrase('delete'),
+    className: 'text-danger',
+    appLink: {
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_13__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_14__["Actions"].Classrooms.DELETE_CLASSROOM,
+      args: [props.id]
+    }
+  }];
+
+  function onSelectStudentsTab() {
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_3__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_13__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_14__["Actions"].Classrooms.MANAGE_CLASSROOM,
+      args: [props.id],
+      params: {
+        tab: 'students'
+      }
+    });
+  }
+
+  function onSelectGroupsTab() {
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_3__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_13__["AppChannels"].CLASSROOMS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_14__["Actions"].Classrooms.MANAGE_CLASSROOM,
+      args: [props.id],
+      params: {
+        tab: 'groups'
+      }
+    });
+  }
+
+  var tabs = [{
+    name: getPhrase('students'),
+    onSelect: onSelectStudentsTab,
+    active: props.activeTab === 'students'
+  }, {
+    name: getPhrase('groups'),
+    onSelect: onSelectGroupsTab,
+    active: props.activeTab === 'groups'
+  }];
+
+  if (!hasPermissions(_libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_6__["PermissionName"].CreateClassrooms)) {
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_3__["Core"].ErrorHelper["throw"](new shared_errors_general_not_found_LiteNotFoundError__WEBPACK_IMPORTED_MODULE_16__["NotFoundError"]());
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null);
+  }
+
+  if (!classroom.data || !((_a = students.data) === null || _a === void 0 ? void 0 : _a.data) || !((_b = groups.data) === null || _b === void 0 ? void 0 : _b.data)) {
+    return props.activeTab === 'students' ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_manage_classroom_students_partial_loading_PartialManageClassroomStudents__WEBPACK_IMPORTED_MODULE_21__["PartialManageClassroomStudents"], null) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_manage_classroom_groups_partial_loading_PartialManageClassroomGroups__WEBPACK_IMPORTED_MODULE_22__["PartialManageClassroomGroups"], null);
+  }
+
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_5__["LanguageNamespaceContext"].Provider, {
+    value: namespace
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'px-3 position-relative'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
+    className: 'mb-1'
+  }, classroom.data.name), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: _manage_classroom_scss__WEBPACK_IMPORTED_MODULE_23___default.a.actionsContainer
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_actions_Actions__WEBPACK_IMPORTED_MODULE_9__["Actions"], {
+    actions: actions,
+    actionsDropdownClassName: 'btn btn-secondary'
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'pb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_breadcrumbs_Breadcrumbs__WEBPACK_IMPORTED_MODULE_8__["Breadcrumbs"], {
+    type: _libs_shared_src_components_breadcrumbs_Breadcrumbs__WEBPACK_IMPORTED_MODULE_8__["BreadcrumbType"].Static,
+    data: [{
+      name: getPhrase('classroomsBreadcrumb')
+    }, classroom.data, {
+      name: getPhrase('manageBreadcrumb')
+    }],
+    currentItem: {
+      name: getPhrase('manageBreadcrumb')
+    },
+    getItemAppLink: function getItemAppLink(item) {
+      var _a, _b;
+
+      if (!('id' in item)) {
+        return {
+          application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_13__["AppChannels"].CLASSROOMS,
+          action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_14__["Actions"].Classrooms.HOME
+        };
+      }
+
+      if (!((_b = (_a = students.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) return null;
+      return {
+        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_13__["AppChannels"].CLASSROOMS,
+        action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_14__["Actions"].Classrooms.CLASSROOM,
+        args: [item.id]
+      };
+    }
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'pb-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_pill_tab_selector_PillTabSelector__WEBPACK_IMPORTED_MODULE_15__["PillTabSelector"], {
+    tabs: tabs
+  })), function () {
+    var _a, _b;
+
+    if (props.activeTab === 'students') {
+      if (!((_b = (_a = students.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length)) return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_manage_classroom_students_empty_state_ManageClassroomStudentsEmptyState__WEBPACK_IMPORTED_MODULE_20__["ManageClassroomStudentsEmptyState"], {
+        classroom: classroom.data
+      });
+      return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_manage_classroom_students_ManageClassroomStudents__WEBPACK_IMPORTED_MODULE_18__["ManageClassroomStudents"], {
+        classroom: classroom.data,
+        students: students.data,
+        groups: groups.data.data
+      });
+    }
+
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_classrooms_components_manage_classroom_groups_ManageClassroomGroups__WEBPACK_IMPORTED_MODULE_19__["ManageClassroomGroups"], {
+      classroom: classroom.data,
+      groups: groups.data.data
+    });
+  }()));
+}
+
+/***/ }),
+
+/***/ "./src/apps/classrooms/views/manage-classroom/manage-classroom.scss":
+/*!**************************************************************************!*\
+  !*** ./src/apps/classrooms/views/manage-classroom/manage-classroom.scss ***!
+  \**************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"actionsContainer":"cv--actionsContainer--3wYTF"};
+
+/***/ }),
+
+/***/ "./src/shared/components/empty-state-image/EmptyStateImage.tsx":
+/*!*********************************************************************!*\
+  !*** ./src/shared/components/empty-state-image/EmptyStateImage.tsx ***!
+  \*********************************************************************/
+/*! exports provided: EmptyStateImage */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "EmptyStateImage", function() { return EmptyStateImage; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _empty_state_image_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./empty-state-image.scss */ "./src/shared/components/empty-state-image/empty-state-image.scss");
+/* harmony import */ var _empty_state_image_scss__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_empty_state_image_scss__WEBPACK_IMPORTED_MODULE_1__);
+
+
+EmptyStateImage.defaultProps = {
+  className: "".concat(_empty_state_image_scss__WEBPACK_IMPORTED_MODULE_1___default.a.image, " pb-3")
+};
+function EmptyStateImage(props) {
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", {
+    alt: '',
+    role: 'presentation',
+    src: props.src,
+    className: props.className
+  });
+}
+
+/***/ }),
+
+/***/ "./src/shared/components/empty-state-image/empty-state-image.scss":
+/*!************************************************************************!*\
+  !*** ./src/shared/components/empty-state-image/empty-state-image.scss ***!
+  \************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"image":"cv--image--23Yda"};
+
+/***/ }),
+
+/***/ "./src/shared/components/pill-tab-selector/PillTabSelector.tsx":
+/*!*********************************************************************!*\
+  !*** ./src/shared/components/pill-tab-selector/PillTabSelector.tsx ***!
+  \*********************************************************************/
+/*! exports provided: PillTabSelector */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PillTabSelector", function() { return PillTabSelector; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
+/* harmony import */ var _pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./pill-tab-selector.scss */ "./src/shared/components/pill-tab-selector/pill-tab-selector.scss");
+/* harmony import */ var _pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+function PillTabSelector(props) {
+  function onSelectTab(tab) {
+    if (tab.active) return;
+    tab.onSelect();
+  }
+
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("nav", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: "list-unstyled d-inline-block border border-dark m-0 ".concat(_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2___default.a.pillTabSelector)
+  }, props.tabs.map(function (tab) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      className: "p-0 ".concat(tab.active ? 'btn btn-primary' : 'btn btn-secondary'),
+      key: tab.name
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_1__["DivButton"], {
+      className: 'cursor-pointer outline-none py-1',
+      onClick: function onClick() {
+        return onSelectTab(tab);
+      }
+    }, tab.name));
+  })));
+}
+
+/***/ }),
+
+/***/ "./src/shared/components/pill-tab-selector/partial-loading/PartialPillTabSelector.tsx":
+/*!********************************************************************************************!*\
+  !*** ./src/shared/components/pill-tab-selector/partial-loading/PartialPillTabSelector.tsx ***!
+  \********************************************************************************************/
+/*! exports provided: PartialPillTabSelector */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PartialPillTabSelector", function() { return PartialPillTabSelector; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../pill-tab-selector.scss */ "./src/shared/components/pill-tab-selector/pill-tab-selector.scss");
+/* harmony import */ var _pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _partial_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./partial-pill-tab-selector.scss */ "./src/shared/components/pill-tab-selector/partial-loading/partial-pill-tab-selector.scss");
+/* harmony import */ var _partial_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_partial_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+function PartialPillTabSelector() {
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "partial-loading-background ".concat(_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_1___default.a.pillTabSelector, " ").concat(_partial_pill_tab_selector_scss__WEBPACK_IMPORTED_MODULE_2___default.a.partialSize)
+  });
+}
+
+/***/ }),
+
+/***/ "./src/shared/components/pill-tab-selector/partial-loading/partial-pill-tab-selector.scss":
+/*!************************************************************************************************!*\
+  !*** ./src/shared/components/pill-tab-selector/partial-loading/partial-pill-tab-selector.scss ***!
+  \************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"partialSize":"cv--partialSize--1HB_G"};
+
+/***/ }),
+
+/***/ "./src/shared/components/pill-tab-selector/pill-tab-selector.scss":
+/*!************************************************************************!*\
+  !*** ./src/shared/components/pill-tab-selector/pill-tab-selector.scss ***!
+  \************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"pillTabSelector":"cv--pillTabSelector--33p-_"};
+
+/***/ }),
+
+/***/ "./src/shared/hooks/useBulkCheckboxManager.tsx":
+/*!*****************************************************!*\
+  !*** ./src/shared/hooks/useBulkCheckboxManager.tsx ***!
+  \*****************************************************/
+/*! exports provided: useBulkCheckboxManager */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useBulkCheckboxManager", function() { return useBulkCheckboxManager; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+/**
+ * @param collection - The collection you are keeping track of with checkboxes
+ * @param options - See interface above
+ */
+
+var useBulkCheckboxManager = function useBulkCheckboxManager(collection) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  var _a, _b;
+
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      bulkChecked = _React$useState2[0],
+      setBulkChecked = _React$useState2[1];
+
+  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState({}),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      items = _React$useState4[0],
+      setItems = _React$useState4[1];
+
+  var _options$idField = options.idField,
+      idField = _options$idField === void 0 ? 'id' : _options$idField;
+  react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {
+    var _a;
+
+    if (!((_a = collection) === null || _a === void 0 ? void 0 : _a.length)) return;
+    var newItemState = collection.reduce(function (stateObj, item) {
+      var _a, _b;
+
+      var checkboxState = false;
+      if ((_b = (_a = options) === null || _a === void 0 ? void 0 : _a.preselectedIds) === null || _b === void 0 ? void 0 : _b.includes(item[idField])) checkboxState = true;
+      var id = item[idField].toString();
+      stateObj[id] = checkboxState;
+      return stateObj;
+    }, {});
+    setItems(newItemState);
+  }, [collection, (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.preselectedIds) === null || _b === void 0 ? void 0 : _b.length]); // When toggled on, all checkbox items will be enabled. Vice versa if toggled off
+
+  function onToggleBulk() {
+    var nextState = !bulkChecked;
+    setBulkChecked(nextState);
+    var newItemsState = collection.reduce(function (stateObj, item) {
+      stateObj[item[idField]] = nextState;
+      return stateObj;
+    }, {});
+    setItems(newItemsState);
+  } // Toggles a single item
+
+
+  function onToggleItem(id) {
+    var nextItemState = !items[id.toString()];
+    var nextState = Object.assign(Object.assign({}, items), _defineProperty({}, id.toString(), nextItemState));
+    setItems(nextState);
+    /**
+     * Keep the bulk checkbox in sync with all of the other checkboxes
+     */
+
+    var totalItemsSelected = Object.keys(nextState).filter(function (i) {
+      return nextState[i];
+    }).length;
+
+    if (totalItemsSelected === collection.length) {
+      setBulkChecked(true);
+      return;
+    }
+
+    if (!nextItemState && bulkChecked) setBulkChecked(false);
+  } // Returns the state of the item passed in
+
+
+  function isChecked(item) {
+    if (bulkChecked) return true;
+    if (typeof item !== 'string' && typeof item !== 'number') item = item[idField];
+    return items[item];
+  }
+
+  function getSelected() {
+    if (bulkChecked) return Object.keys(items);
+    return Object.keys(items).filter(function (item) {
+      return items[item];
+    });
+  }
+
+  return {
+    onToggleBulk: onToggleBulk,
+    onToggleItem: onToggleItem,
+    getSelected: getSelected,
+    isChecked: isChecked,
+    bulkChecked: bulkChecked
+  };
+};
+
+/***/ })
+
+}]);
+//# sourceMappingURL=25.chunk.js.map