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

package/dist/scripts/48.chunk.js

@@ -0,0 +1,217 @@
+(window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[48],{
+
+/***/ "./src/apps/settings/components/SettingsGroup.tsx":
+/*!********************************************************!*\
+  !*** ./src/apps/settings/components/SettingsGroup.tsx ***!
+  \********************************************************/
+/*! exports provided: SettingsGroup */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SettingsGroup", function() { return SettingsGroup; });
+/* 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_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+/* harmony import */ var _libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
+/* harmony import */ var _settings_group_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./settings-group.scss */ "./src/apps/settings/components/settings-group.scss");
+/* harmony import */ var _settings_group_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_settings_group_scss__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+function SettingsGroup(props) {
+  var _a;
+
+  var hasModules = !!((_a = props.modules) === null || _a === void 0 ? void 0 : _a.length);
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__["AppLink"], {
+    appLink: props.appLink
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "row p-3 border border-dark m-0 w-100 ".concat(_settings_group_scss__WEBPACK_IMPORTED_MODULE_3___default.a.group)
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'col-3 px-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'd-flex justify-content-center align-items-center h-100'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_2__["SvgContainer"], {
+    svgName: props.svg,
+    className: _settings_group_scss__WEBPACK_IMPORTED_MODULE_3___default.a.tempSvg
+  }))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: "col-9 ".concat(!hasModules ? 'd-flex align-items-center' : '')
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", {
+    className: 'h3'
+  }, props.name), hasModules && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: 'list-unstyled mb-0'
+  }, props.modules.map(function (m) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      key: m.name,
+      className: 'mb-1'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__["AppLink"], {
+      appLink: m.appLink
+    }, m.name));
+  })))));
+}
+
+/***/ }),
+
+/***/ "./src/apps/settings/components/settings-group.scss":
+/*!**********************************************************!*\
+  !*** ./src/apps/settings/components/settings-group.scss ***!
+  \**********************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"group":"cv--group--IT422","tempSvg":"cv--tempSvg--2CLu3"};
+
+/***/ }),
+
+/***/ "./src/apps/settings/utils/getSettingsGroups.ts":
+/*!******************************************************!*\
+  !*** ./src/apps/settings/utils/getSettingsGroups.ts ***!
+  \******************************************************/
+/*! exports provided: getSettingsGroups */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getSettingsGroups", function() { return getSettingsGroups; });
+/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
+/* harmony import */ var _libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/shared/src/enums/PermissionName */ "../../libs/shared/src/enums/PermissionName.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+
+
+
+
+function getSettingsGroups(hasPermissions) {
+  var groups = [{
+    // Account Management
+    svg: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_0__["cvSvgLibrary"].HeartOutline,
+    name: 'My Account',
+    modules: [{
+      name: 'Profile Details',
+      appLink: {
+        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_2__["AppChannels"].SETTINGS,
+        action: 'profile:details' // Not putting any unimplemented action's in constants yet
+
+      },
+      permissions: [_libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_1__["PermissionName"].EditProfile]
+    }, {
+      name: 'Email & Password',
+      appLink: {
+        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_2__["AppChannels"].SETTINGS,
+        action: 'email:password'
+      },
+      permissions: [_libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_1__["PermissionName"].EditProfile]
+    }, {
+      name: 'Year Group & Subject Preferences',
+      appLink: {
+        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_2__["AppChannels"].SUBJECT,
+        action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_3__["Actions"].Subjects.PREFERENCES
+      },
+      permissions: [_libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_1__["PermissionName"].ManageSubjectPreferences]
+    }]
+  }, {
+    // School Management
+    svg: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_0__["cvSvgLibrary"].HeartOutline,
+    name: 'School Management',
+    modules: [{
+      name: 'Student Manager',
+      appLink: {
+        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_2__["AppChannels"].USER_MANAGER,
+        action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_3__["Actions"].UserManager.STUDENTS
+      },
+      permissions: [_libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_1__["PermissionName"].ManageUsers]
+    }, {
+      name: 'Staff Manager',
+      appLink: {
+        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_2__["AppChannels"].USER_MANAGER,
+        action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_3__["Actions"].UserManager.STAFF
+      },
+      permissions: [_libs_shared_src_enums_PermissionName__WEBPACK_IMPORTED_MODULE_1__["PermissionName"].ManageUsers]
+    }]
+  }];
+  return groups.map(function (group) {
+    return Object.assign(Object.assign({}, group), {
+      modules: group.modules.filter(function (m) {
+        if (!m.permissions || !m.permissions.length) return true;
+        return hasPermissions(m.permissions);
+      })
+    });
+  }).filter(function (group) {
+    return !!group.modules.length;
+  });
+}
+
+/***/ }),
+
+/***/ "./src/apps/settings/views/settings/SettingsView.tsx":
+/*!***********************************************************!*\
+  !*** ./src/apps/settings/views/settings/SettingsView.tsx ***!
+  \***********************************************************/
+/*! exports provided: SettingsView */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SettingsView", function() { return SettingsView; });
+/* 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_hooks_UseSetPageTitle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../libs/common/src/react/hooks/UseSetPageTitle */ "../../libs/common/src/react/hooks/UseSetPageTitle.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_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_hooks_usePermissions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../../libs/shared/src/hooks/usePermissions */ "../../libs/shared/src/hooks/usePermissions.ts");
+/* harmony import */ var apps_settings_components_SettingsGroup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! apps/settings/components/SettingsGroup */ "./src/apps/settings/components/SettingsGroup.tsx");
+/* harmony import */ var apps_settings_utils_getSettingsGroups__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! apps/settings/utils/getSettingsGroups */ "./src/apps/settings/utils/getSettingsGroups.ts");
+/* harmony import */ var _settings_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./settings.scss */ "./src/apps/settings/views/settings/settings.scss");
+/* harmony import */ var _settings_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_settings_scss__WEBPACK_IMPORTED_MODULE_7__);
+
+
+
+
+
+
+
+
+var namespace = 'settings.settings';
+function SettingsView() {
+  var _usePermissions = Object(_libs_shared_src_hooks_usePermissions__WEBPACK_IMPORTED_MODULE_4__["usePermissions"])(),
+      permissions = _usePermissions.permissions,
+      hasPermissions = _usePermissions.hasPermissions;
+
+  Object(_libs_common_src_react_hooks_UseSetPageTitle__WEBPACK_IMPORTED_MODULE_1__["useSetPageTitle"])(_libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__["LanguageService"].getPhrase(namespace, 'pageTitle'));
+  var groups = permissions ? Object(apps_settings_utils_getSettingsGroups__WEBPACK_IMPORTED_MODULE_6__["getSettingsGroups"])(hasPermissions) : [];
+  if (!groups.length) return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, "Empty State");
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'px-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
+    namespace: namespace,
+    phrase: 'heading'
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("main", {
+    className: 'row'
+  }, groups.map(function (group) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      key: group.name,
+      className: 'col-md-6 p-0'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: _settings_scss__WEBPACK_IMPORTED_MODULE_7___default.a.groupContainer
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(apps_settings_components_SettingsGroup__WEBPACK_IMPORTED_MODULE_5__["SettingsGroup"], Object.assign({}, group))));
+  })));
+}
+
+/***/ }),
+
+/***/ "./src/apps/settings/views/settings/settings.scss":
+/*!********************************************************!*\
+  !*** ./src/apps/settings/views/settings/settings.scss ***!
+  \********************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"settingsContainer":"cv--settingsContainer--3VOac","groupContainer":"cv--groupContainer--mlors"};
+
+/***/ })
+
+}]);
+//# sourceMappingURL=48.chunk.js.map

package/dist/scripts/48.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["file://C:/ClickView/front-end/clickview/packages/projects/lite/src/apps/settings/components/SettingsGroup.tsx","webpack://@clickview/lite/./src/apps/settings/components/settings-group.scss?4923","file://C:/ClickView/front-end/clickview/packages/projects/lite/src/apps/settings/utils/getSettingsGroups.ts","file://C:/ClickView/front-end/clickview/packages/projects/lite/src/apps/settings/views/settings/SettingsView.tsx","webpack://@clickview/lite/./src/apps/settings/views/settings/settings.scss?5baa"],"names":[],"mappings":"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","file":"scripts/48.chunk.js","sourcesContent":["import React from 'react';\r\n\r\nimport { AppLink } from 'libs/shared/components/app-link/AppLink';\r\nimport { SvgContainer } from 'libs/shared/components/svg-container/SvgContainer';\r\n\r\nimport { SettingsGroup as SettingsGroupProps } from 'apps/settings/interfaces/SettingsGroup';\r\n\r\nimport styles from './settings-group.scss';\r\n\r\nexport function SettingsGroup(props: SettingsGroupProps): JSX.Element {\r\n  const hasModules = !!props.modules?.length;\r\n\r\n  return (\r\n    <AppLink appLink={props.appLink}>\r\n      <div className={`row p-3 border border-dark m-0 w-100 ${styles.group}`}>\r\n        <div className='col-3 px-3'>\r\n          <div className='d-flex justify-content-center align-items-center h-100'>\r\n            <SvgContainer svgName={props.svg} className={styles.tempSvg} />\r\n          </div>\r\n        </div>\r\n\r\n        <div className={`col-9 ${!hasModules ? 'd-flex align-items-center' : ''}`}>\r\n          <h2 className='h3'>{props.name}</h2>\r\n\r\n          {hasModules && (\r\n            <ul className='list-unstyled mb-0'>\r\n              {props.modules.map(m => (\r\n                <li key={m.name} className='mb-1'>\r\n                  <AppLink appLink={m.appLink}>\r\n                    {m.name}\r\n                  </AppLink>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </AppLink>\r\n  );\r\n}","// extracted by mini-css-extract-plugin\nmodule.exports = {\"group\":\"cv--group--IT422\",\"tempSvg\":\"cv--tempSvg--2CLu3\"};","import { cvSvgLibrary } from 'libs/shared/utils/SvgHelper';\r\nimport { PermissionName } from 'libs/shared/enums/PermissionName';\r\n\r\nimport { AppChannels } from 'shared/constants/LiteRadioChannels';\r\nimport { Actions } from 'shared/constants/LiteActions';\r\n\r\nimport { SettingsGroup } from 'apps/settings/interfaces/SettingsGroup';\r\n\r\nexport function getSettingsGroups(hasPermissions: (perms: PermissionName[]) => void): SettingsGroup[] {\r\n  const groups = [\r\n    {\r\n      // Account Management\r\n      svg: cvSvgLibrary.HeartOutline, // TODO: Use actual unique icons\r\n      name: 'My Account',\r\n      modules: [\r\n        {\r\n          name: 'Profile Details',\r\n          appLink: {\r\n            application: AppChannels.SETTINGS,\r\n            action: 'profile:details' // Not putting any unimplemented action's in constants yet\r\n          },\r\n          permissions: [PermissionName.EditProfile]\r\n        },\r\n        {\r\n          name: 'Email & Password',\r\n          appLink: {\r\n            application: AppChannels.SETTINGS,\r\n            action: 'email:password'\r\n          },\r\n          permissions: [PermissionName.EditProfile]\r\n        },\r\n        {\r\n          name: 'Year Group & Subject Preferences',\r\n          appLink: {\r\n            application: AppChannels.SUBJECT,\r\n            action: Actions.Subjects.PREFERENCES\r\n          },\r\n          permissions: [PermissionName.ManageSubjectPreferences]\r\n        }\r\n      ]\r\n    },\r\n    {\r\n      // School Management\r\n      svg: cvSvgLibrary.HeartOutline,\r\n      name: 'School Management',\r\n      modules: [\r\n        {\r\n          name: 'Student Manager',\r\n          appLink: {\r\n            application: AppChannels.USER_MANAGER,\r\n            action: Actions.UserManager.STUDENTS\r\n          },\r\n          permissions: [PermissionName.ManageUsers]\r\n        },\r\n        {\r\n          name: 'Staff Manager',\r\n          appLink: {\r\n            application: AppChannels.USER_MANAGER,\r\n            action: Actions.UserManager.STAFF\r\n          },\r\n          permissions: [PermissionName.ManageUsers]\r\n        }\r\n      ]\r\n    }\r\n  ];\r\n\r\n  return groups.map(group => {\r\n    return {\r\n      ...group,\r\n      modules: group.modules.filter(m => {\r\n        if (!m.permissions || !m.permissions.length)\r\n          return true;\r\n\r\n        return hasPermissions(m.permissions);\r\n      })\r\n    };\r\n  }).filter(group => !!group.modules.length);\r\n}","import React from 'react';\r\n\r\nimport { useSetPageTitle } from 'libs/common/react/hooks/UseSetPageTitle';\r\nimport { LanguageService } from 'libs/common/backbone/services/LanguageService';\r\n\r\nimport { Text } from 'libs/shared/components/text/Text';\r\nimport { usePermissions } from 'libs/shared/hooks/usePermissions';\r\n\r\nimport { SettingsGroup as SettingsGroupComponent } from 'apps/settings/components/SettingsGroup';\r\nimport { getSettingsGroups } from 'apps/settings/utils/getSettingsGroups';\r\n\r\nimport styles from './settings.scss';\r\n\r\nconst namespace = 'settings.settings';\r\n\r\nexport function SettingsView(): JSX.Element {\r\n  const { permissions, hasPermissions } = usePermissions();\r\n\r\n  useSetPageTitle(LanguageService.getPhrase(namespace, 'pageTitle'));\r\n\r\n  const groups = permissions ? getSettingsGroups(hasPermissions) : [];\r\n\r\n  if (!groups.length)\r\n    return <>Empty State</>;\r\n\r\n  return (\r\n    <div className='px-3'>\r\n      <h1><Text namespace={namespace} phrase='heading' /></h1>\r\n\r\n      <main className='row'>\r\n        {groups.map(group => (\r\n          <div key={group.name} className='col-md-6 p-0'>\r\n            <div className={styles.groupContainer}>\r\n              <SettingsGroupComponent {...group} />\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </main>\r\n    </div>\r\n  );\r\n}","// extracted by mini-css-extract-plugin\nmodule.exports = {\"settingsContainer\":\"cv--settingsContainer--3VOac\",\"groupContainer\":\"cv--groupContainer--mlors\"};"],"sourceRoot":""}

package/dist/scripts/49-8226f8d1ba.chunk.js

@@ -0,0 +1 @@
+(window.webpackJsonp_clickview_lite=window.webpackJsonp_clickview_lite||[]).push([[49],{1097:function(t,e,r){"use strict";var n;r.d(e,"a",(function(){return n})),function(t){t[t.Disabled=0]="Disabled",t[t.Active=1]="Active",t[t.Inactive=2]="Inactive"}(n||(n={}))},1469:function(t,e,r){"use strict";r.r(e),r.d(e,"ToggleUserStatusView",(function(){return S}));var n=r(0),a=r.n(n),o=r(76),c=r(9),u=r(19),i=r(70),s=r(305),l=r(1097),f=r(91),d=r(307),y=r(958),p=r(48),m=r(3),v=r(970);function g(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var r=[],n=!0,a=!1,o=void 0;try{for(var c,u=t[Symbol.iterator]();!(n=(c=u.next()).done)&&(r.push(c.value),!e||r.length!==e);n=!0);}catch(t){a=!0,o=t}finally{try{n||null==u.return||u.return()}finally{if(a)throw o}}return r}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return h(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return h(t,e)}(t,e)||function(){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 h(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}var b="userManager.toggleUserStatus",w=c.a.encloseNamespace(b);function S(t){var e,r=g(a.a.useState(!1),2),n=r[0],c=r[1],h=u.a.useBasicFetch(v.a.getUser(t.id)),S=u.a.useBasicFetch(i.a.currentUser()),A=Object(o.useDispatch)(),k=Object(y.a)(),T=(null===(e=h.data)||void 0===e?void 0:e.status)===l.a.Active?l.a.Disabled:l.a.Active;var I=!!S.data&&!!h.data,j=I?T===l.a.Active?w("activateTitle",{name:"".concat(h.data.name," ").concat(h.data.surname)}):w("deactivateTitle",{name:"".concat(h.data.name," ").concat(h.data.surname)}):"";return a.a.createElement(s.a,{title:j,closePopup:t.closePopup,showLoadingSpinner:!I},I&&a.a.createElement(a.a.Fragment,null,a.a.createElement("p",{className:"p-0"},a.a.createElement(f.b,{namespace:b,phrase:T===l.a.Active?"activateCheck":"deactivateCheck",options:{name:h.data.username}})),a.a.createElement(d.a,{buttons:[{variant:"link",onClick:t.closePopup,buttonText:w("cancel")},{variant:"dark",onClick:function(){c(!0);var e={customerId:S.data.customerId,users:[{userId:h.data.id,status:T}]};u.a.fetch(A,v.a.bulkToggleActivation(e,t.userType,(function(){p.a.logUserAction({customerId:S.data.customerId,userId:h.data.id},{actionType:m.n.Activate,entity:m.d.User,descriptor:T===l.a.Active?m.m.On:m.m.Off,workflowPhase:m.o.Complete,location:m.j.Popup}),k.success(w("success"))}),(function(){k.error(w("error"))}),(function(){c(!1),t.closePopup()})))},buttonText:w("update"),isSpinnerButton:!0,showSpinner:n}]})))}},958:function(t,e,r){"use strict";r.d(e,"a",(function(){return c}));var n=r(208),a=r(61),o=r(71),c=function(){var t=Object(n.a)(o.a.ALERT);return{success:function(e){t.success(e)()},error:function(e){t.error(e)()},warning:function(e){t.createAlert({type:a.a.Warning,heading:a.c.Warning,message:e})}}}},965:function(t,e,r){"use strict";function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}r.d(e,"a",(function(){return a}));var a={isNumber:function(t){return a.isType(t,"number")},isString:function(t){return a.isType(t,"string")},isType:function(t,e){return n(t)===e}}},968:function(t,e,r){"use strict";r.d(e,"a",(function(){return i}));var n=r(965),a=r(69);function o(t){return function(t){if(Array.isArray(t))return c(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return c(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(t,e)}(t)||function(){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 c(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function u(t){var e=t.page,r=t.totalPages,o=n.a.isNumber(e)&&e>0&&e<r&&e+1,c=n.a.isNumber(e)&&e>1&&e-1,u={};if(o&&o<=r&&(u.next=o.toString()),c&&(u.previous=c.toString()),!a.a.isEmpty(u))return u}var i={isEmpty:function(t){return t&&!(t.data&&t.data.length)},length:function(t){return t&&t.data&&t.data.length},at:function(t,e){if(t&&t.data&&t.data.length&&!(e>t.data.length))return t.data[e]},get:function(t,e){if(t&&t.data&&t.data.length)return t.data.find((function(t){return t.id&&t.id.toString()===e}))},flattenCollections:function(t){if(t&&t.length){var e=[];return t.forEach((function(t){e=[].concat(o(e),o(t.data))})),e}},getNextCursor:function(t){return t.pagination&&t.pagination.cursors&&t.pagination.cursors.next},convertLegacyPaginatedCollection:function(t){if(t)return{data:t.data,pagination:{cursors:u(t.pagination),limit:t.pagination.pageSize}}}}},970:function(t,e,r){"use strict";r.d(e,"a",(function(){return i}));var n=r(102),a=r(27),o=r(968);function c(t){return function(t){if(Array.isArray(t))return u(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return u(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(t,e)}(t)||function(){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 u(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}var i={getUsers:function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",o=arguments.length>4?arguments[4]:void 0,c=arguments.length>5?arguments[5]:void 0,u=r.sortName,i=void 0===u?"":u,s=r.yearGroup,l=void 0===s?"":s,f=function(){var t=["usertype:".concat(e)];if(l&&t.push("yeargroups.value:".concat(l)),i)switch(i){case"first-name-atoz":t.push("orderby:name");break;case"first-name-ztoa":t.push("orderbydesc:name");break;case"surname-atoz":t.push("orderby:surname");break;case"surname-ztoa":t.push("orderbydesc:surname")}return"{".concat(t.join(","),"}")},d={query:f()};return a&&(d.cursor=a),{url:n.a.urlBuilder("{gateway}/v1/customers/".concat(t,"/users"),d),key:"school:users:".concat(t,":").concat(e).concat(a?":".concat(a):"").concat(l?":".concat(l):"").concat(i?":".concat(i):""),expiryTime:1/0,success:o,error:c}},getUser:function(t){return{url:"{gateway}/v1/users/".concat(t),key:"school:users:".concat(t),expiryTime:1/0}},bulkRemoveUsers:function(t,e,r,n){return{url:"{gateway}/v1/users/delete",key:"remove:school:users",invalidationKeys:["school:users"].concat(c(t.users.map((function(t){return"school:users:".concat(t.userId)})))),type:a.a.POST,data:t,success:e,error:r,always:n}},createUsers:function(t,e,r,n){return{url:"{gateway}/v1/users",key:"create:users",data:t,type:a.a.POST,invalidationKeys:["school:users"],success:e,error:r,always:n}},updateUser:function(t,e,r,n,o){return{url:"{gateway}/v1/users",key:"edit:user",type:a.a.PUT,data:t,invalidationKeys:["school:users:".concat(e,":").concat(t.userType),"school:users:".concat(t.userId)],success:r,error:n,always:o}},searchUsers:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",r=arguments.length>2?arguments[2]:void 0,n=arguments.length>3?arguments[3]:void 0,a=arguments.length>4?arguments[4]:void 0,c=t.query,u=function(){var t=["usertype:".concat(r)];return e&&t.push("page:".concat(e)),"{".concat(t.join(","),"}")};t.query,u();return{url:"{gateway}/v1/search/users?query=".concat(t.query),key:"search:users:".concat(c,":").concat(e),formatData:o.a.convertLegacyPaginatedCollection,expiryTime:1/0,success:n,error:a}},bulkToggleActivation:function(t,e,r,n,o){return{url:"{gateway}/v1/users/update-status",key:"update:users:status",type:a.a.PUT,data:t,success:r,error:n,always:o,invalidationKeys:["school:users:".concat(t.customerId,":").concat(e)].concat(c(t.users.map((function(t){return"school:users:".concat(t.userId)}))))}},bulkValidate:function(t,e,r,n){return{url:"{gateway}/v1/users/validate",type:a.a.POST,key:"validate:users",data:t,success:e,error:r,always:n,normalize:!1,formatData:function(t){return t.failedResults.map((function(t){return{errorCodes:t.errorCodes,users:[t.user]}}))}}},yearGroups:function(t){return{url:"{gateway}/v1/customers/".concat(t,"/yeargroups"),key:"yeargroups:".concat(t)}}}}}]);

package/dist/scripts/49.chunk.js

@@ -0,0 +1,282 @@
+(window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[49],{
+
+/***/ "./src/shared/components/interactive-questions/InteractiveQuestions.tsx":
+/*!******************************************************************************!*\
+  !*** ./src/shared/components/interactive-questions/InteractiveQuestions.tsx ***!
+  \******************************************************************************/
+/*! exports provided: InteractiveQuestions */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InteractiveQuestions", function() { return InteractiveQuestions; });
+/* 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_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-custom-scrollbars */ "react-custom-scrollbars");
+/* harmony import */ var react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/shared/src/interfaces */ "../../libs/shared/src/interfaces/index.ts");
+/* harmony import */ var _libs_shared_src_utils_DurationHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/shared/src/utils/DurationHelper */ "../../libs/shared/src/utils/DurationHelper.ts");
+/* harmony import */ var _libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
+/* harmony import */ var shared_constants_MinimumGlanceHeight__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared/constants/MinimumGlanceHeight */ "./src/shared/constants/MinimumGlanceHeight.ts");
+/* harmony import */ var _formatAnnotationText__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./formatAnnotationText */ "./src/shared/components/interactive-questions/formatAnnotationText.ts");
+/* harmony import */ var _interactive_questions_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./interactive-questions.scss */ "./src/shared/components/interactive-questions/interactive-questions.scss");
+/* harmony import */ var _interactive_questions_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_interactive_questions_scss__WEBPACK_IMPORTED_MODULE_7__);
+
+
+
+
+
+
+
+
+
+function InteractionComponent(props) {
+  var interaction = props.interaction,
+      visibleAt = props.visibleAt,
+      goToTimepoint = props.goToTimepoint,
+      selected = props.selected;
+
+  function onClick() {
+    goToTimepoint && goToTimepoint(visibleAt);
+  }
+  /**
+   * Don't have a cursor if there is no callback function.
+   * i.e. when rendered in a popup
+   */
+
+
+  var cursor = goToTimepoint ? 'cursor-pointer' : 'cursor-default';
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_4__["DivButton"], {
+    className: "py-2 outline-none ".concat(cursor),
+    onClick: onClick
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+    className: "".concat(_interactive_questions_scss__WEBPACK_IMPORTED_MODULE_7___default.a.time, " ").concat(selected ? 'font-weight-bold' : '')
+  }, _libs_shared_src_utils_DurationHelper__WEBPACK_IMPORTED_MODULE_3__["DurationHelper"].ToDisplayDuration(visibleAt)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+    className: _interactive_questions_scss__WEBPACK_IMPORTED_MODULE_7___default.a.typeIcon,
+    style: {
+      backgroundImage: "url(".concat(interaction.type.icon, ")"),
+      backgroundColor: "#".concat(interaction.type.colour)
+    }
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+    className: _interactive_questions_scss__WEBPACK_IMPORTED_MODULE_7___default.a.type
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("strong", null, interaction.type.name)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
+    className: "".concat(_interactive_questions_scss__WEBPACK_IMPORTED_MODULE_7___default.a.question, " ").concat(selected ? 'font-weight-bold' : '')
+  }, interaction.typeId === _libs_shared_src_interfaces__WEBPACK_IMPORTED_MODULE_2__["InteractionTypeId"].Annotation ? Object(_formatAnnotationText__WEBPACK_IMPORTED_MODULE_6__["formatAnnotationText"])(interaction.data.annotation) : interaction.name));
+}
+
+function TimepointComponent(props) {
+  var timepoint = props.timepoint,
+      selectedTimepointId = props.selectedTimepointId,
+      goToTimepoint = props.goToTimepoint,
+      scrollTo = props.scrollTo;
+  var ref = react__WEBPACK_IMPORTED_MODULE_0___default.a.useRef();
+  var selected = selectedTimepointId && selectedTimepointId.toString() === timepoint.id.toString();
+  react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {
+    if (!selected) return;
+    if (!ref.current) return;
+    var el = ref.current;
+    var rect = el.getBoundingClientRect();
+    var offset = rect.top - el.offsetParent.getBoundingClientRect().top;
+    scrollTo(offset, rect.height);
+  }, [selected]);
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    ref: ref
+  }, timepoint.interactions.map(function (interaction, i) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(InteractionComponent, {
+      interaction: interaction,
+      visibleAt: timepoint.visibleAt,
+      goToTimepoint: goToTimepoint,
+      selected: selected,
+      key: i
+    });
+  }));
+}
+
+function InteractiveQuestions(props) {
+  var interactive = props.interactive,
+      goToTimepoint = props.goToTimepoint,
+      selectedTimepointId = props.selectedTimepointId;
+  var ref = react__WEBPACK_IMPORTED_MODULE_0___default.a.useRef();
+
+  function scrollTo(offset, elHeight) {
+    if (!ref.current) return;
+    var height = ref.current.getClientHeight();
+    var scroll = ref.current.getScrollTop();
+    var elementFromTop = offset + scroll;
+    /**
+     * Element is above scroll window if it's distance from the top
+     * is less than the scroll
+     */
+
+    var isAboveScrollWindow = elementFromTop < scroll;
+    /**
+     * Element is beneath scroll window if it's distance from the top
+     * plus it's height is greater than the scroll plus the window height
+     */
+
+    var isBelowScrollWindow = elementFromTop + elHeight > scroll + height;
+    /**
+     * So we don't scroll if our element is visible
+     */
+
+    if (!isAboveScrollWindow && !isBelowScrollWindow) return;
+    /**
+     * If our element isn't visible, we want to try scroll so the element is
+     * centered in our viewport
+     */
+
+    ref.current.scrollTop(elementFromTop - height / 2 + elHeight / 2);
+  }
+
+  var borderClass = goToTimepoint ? 'border rounded' : '';
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1__["Scrollbars"], {
+    autoHeight: true,
+    autoHeightMax: shared_constants_MinimumGlanceHeight__WEBPACK_IMPORTED_MODULE_5__["MINIMUM_GLANCE_HEIGHT"],
+    className: borderClass,
+    hideTracksWhenNotNeeded: true,
+    ref: ref
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'px-3 py-1'
+  }, interactive.timepoints.map(function (t, i) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(TimepointComponent, {
+      key: i,
+      timepoint: t,
+      goToTimepoint: goToTimepoint,
+      selectedTimepointId: selectedTimepointId,
+      scrollTo: scrollTo
+    });
+  })));
+}
+
+/***/ }),
+
+/***/ "./src/shared/components/interactive-questions/formatAnnotationText.ts":
+/*!*****************************************************************************!*\
+  !*** ./src/shared/components/interactive-questions/formatAnnotationText.ts ***!
+  \*****************************************************************************/
+/*! exports provided: formatAnnotationText */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "formatAnnotationText", function() { return formatAnnotationText; });
+function replacePTags(text) {
+  if (!text) return;
+  return text.replace(/<p>/g, '').replace(/<\/p>/g, '<br>');
+}
+
+function stripTags(text, items) {
+  if (!text || !items) return;
+  items.forEach(function (item) {
+    text = text.replace('<' + item + '>', '').replace('</' + item + '>', '');
+  });
+  return text;
+}
+
+function formatAnnotationText(text) {
+  if (!text) return;
+  text = stripTags(text, ['b', 'i', 'u', 'ul', 'li', 'old']);
+  text = replacePTags(text);
+  return text.split('<br>')[0] || 'Annotation';
+}
+
+/***/ }),
+
+/***/ "./src/shared/components/interactive-questions/interactive-questions.scss":
+/*!********************************************************************************!*\
+  !*** ./src/shared/components/interactive-questions/interactive-questions.scss ***!
+  \********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"time":"cv--time--30ibe","typeIcon":"cv--typeIcon--UMnFt","type":"cv--type--3uwxz","question":"cv--question--1FwXi"};
+
+/***/ }),
+
+/***/ "./src/shared/constants/MinimumGlanceHeight.ts":
+/*!*****************************************************!*\
+  !*** ./src/shared/constants/MinimumGlanceHeight.ts ***!
+  \*****************************************************/
+/*! exports provided: MINIMUM_GLANCE_HEIGHT */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MINIMUM_GLANCE_HEIGHT", function() { return MINIMUM_GLANCE_HEIGHT; });
+// 368 is the min height of Video at a glance which is defined as $glanceHeight in synopsis.scss
+var MINIMUM_GLANCE_HEIGHT = 368; // px
+
+/***/ }),
+
+/***/ "./src/shared/flight-requests/InteractiveRequests.ts":
+/*!***********************************************************!*\
+  !*** ./src/shared/flight-requests/InteractiveRequests.ts ***!
+  \***********************************************************/
+/*! exports provided: InteractiveRequests */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InteractiveRequests", function() { return InteractiveRequests; });
+var InteractiveRequests = {
+  interactiveMetadata: function interactiveMetadata(id) {
+    return {
+      url: "/api/domain/v2/objects/".concat(id, "?query=video"),
+      key: "interactivemetadata:".concat(id)
+    };
+  },
+  interactive: function interactive(id) {
+    return {
+      url: "/api/domain/v1/interactives/".concat(id),
+      key: "interactive:".concat(id)
+    };
+  }
+};
+
+/***/ }),
+
+/***/ "./src/shared/views/preview-questions/PreviewQuestionsView.tsx":
+/*!*********************************************************************!*\
+  !*** ./src/shared/views/preview-questions/PreviewQuestionsView.tsx ***!
+  \*********************************************************************/
+/*! exports provided: PreviewQuestionsView */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PreviewQuestionsView", function() { return PreviewQuestionsView; });
+/* 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_shared_src_components_popup_Popup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/popup/Popup */ "../../libs/shared/src/components/popup/Popup.tsx");
+/* harmony import */ var shared_flight_requests_InteractiveRequests__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared/flight-requests/InteractiveRequests */ "./src/shared/flight-requests/InteractiveRequests.ts");
+/* harmony import */ var shared_components_interactive_questions_InteractiveQuestions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared/components/interactive-questions/InteractiveQuestions */ "./src/shared/components/interactive-questions/InteractiveQuestions.tsx");
+
+
+
+
+
+
+var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__["LanguageService"].encloseNamespace('shared.previewQuestions');
+function PreviewQuestionsView(props) {
+  var interactiveMetadata = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(shared_flight_requests_InteractiveRequests__WEBPACK_IMPORTED_MODULE_4__["InteractiveRequests"].interactiveMetadata(props.id));
+  var interactive = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(interactiveMetadata.data ? shared_flight_requests_InteractiveRequests__WEBPACK_IMPORTED_MODULE_4__["InteractiveRequests"].interactive(interactiveMetadata.data.interactiveId) : null);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_popup_Popup__WEBPACK_IMPORTED_MODULE_3__["Popup"], {
+    title: getPhrase('mainTitle'),
+    closePopup: props.closePopup,
+    showLoadingSpinner: !interactive.data,
+    size: 'lg'
+  }, function () {
+    if (!interactive.data) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](shared_components_interactive_questions_InteractiveQuestions__WEBPACK_IMPORTED_MODULE_5__["InteractiveQuestions"], {
+      interactive: interactive.data
+    });
+  }());
+}
+
+/***/ })
+
+}]);
+//# sourceMappingURL=49.chunk.js.map

package/dist/scripts/49.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["file://C:/ClickView/front-end/clickview/packages/projects/lite/src/shared/components/interactive-questions/InteractiveQuestions.tsx","file://C:/ClickView/front-end/clickview/packages/projects/lite/src/shared/components/interactive-questions/formatAnnotationText.ts","webpack://@clickview/lite/./src/shared/components/interactive-questions/interactive-questions.scss?610b","file://C:/ClickView/front-end/clickview/packages/projects/lite/src/shared/constants/MinimumGlanceHeight.ts","file://C:/ClickView/front-end/clickview/packages/projects/lite/src/shared/flight-requests/InteractiveRequests.ts","file://C:/ClickView/front-end/clickview/packages/projects/lite/src/shared/views/preview-questions/PreviewQuestionsView.tsx"],"names":[],"mappings":"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","file":"scripts/49.chunk.js","sourcesContent":["import React from 'react';\r\nimport { Scrollbars } from 'react-custom-scrollbars';\r\n\r\nimport { Interactive, Timepoint, Interaction, InteractionTypeId } from 'libs/shared/interfaces';\r\nimport { DurationHelper } from 'libs/shared/utils/DurationHelper';\r\nimport { DivButton } from 'libs/shared/components/div-button/DivButton';\r\n\r\nimport { MINIMUM_GLANCE_HEIGHT } from 'shared/constants/MinimumGlanceHeight';\r\n\r\nimport { formatAnnotationText } from './formatAnnotationText';\r\nimport styles from './interactive-questions.scss';\r\n\r\ninterface InteractionComponentProps {\r\n  interaction: Interaction;\r\n  visibleAt: number;\r\n  goToTimepoint: (visibleAt: number) => void;\r\n  selected: boolean;\r\n}\r\n\r\nfunction InteractionComponent(props: InteractionComponentProps): React.ReactElement {\r\n  const { interaction, visibleAt, goToTimepoint, selected } = props;\r\n\r\n  function onClick(): void {\r\n    goToTimepoint && goToTimepoint(visibleAt);\r\n  }\r\n\r\n  /**\r\n   * Don't have a cursor if there is no callback function.\r\n   * i.e. when rendered in a popup\r\n   */\r\n  const cursor = goToTimepoint ? 'cursor-pointer' : 'cursor-default';\r\n\r\n  return (\r\n    <DivButton className={`py-2 outline-none ${cursor}`} onClick={onClick}>\r\n      <span className={`${styles.time} ${selected ? 'font-weight-bold' : ''}`}>{DurationHelper.ToDisplayDuration(visibleAt)}</span>\r\n      <span\r\n        className={styles.typeIcon}\r\n        style={{\r\n          backgroundImage: `url(${interaction.type.icon})`,\r\n          backgroundColor: `#${interaction.type.colour}`\r\n        }}\r\n      ></span>\r\n      <span className={styles.type}><strong>{interaction.type.name}</strong></span>\r\n      <span className={`${styles.question} ${selected ? 'font-weight-bold' : ''}`}>\r\n        {interaction.typeId === InteractionTypeId.Annotation\r\n          ? formatAnnotationText(interaction.data.annotation)\r\n          : interaction.name}\r\n      </span>\r\n    </DivButton>\r\n  );\r\n}\r\n\r\ninterface TimepointComponentProps {\r\n  timepoint: Timepoint;\r\n  goToTimepoint: (visibleAt: number) => void;\r\n  selectedTimepointId: string;\r\n  scrollTo: (offset: number, height: number) => void;\r\n}\r\n\r\nfunction TimepointComponent(props: TimepointComponentProps): React.ReactElement {\r\n  const {\r\n    timepoint,\r\n    selectedTimepointId,\r\n    goToTimepoint,\r\n    scrollTo\r\n  } = props;\r\n\r\n  const ref = React.useRef<HTMLDivElement>();\r\n\r\n  const selected = selectedTimepointId && selectedTimepointId.toString() === timepoint.id.toString();\r\n\r\n  React.useEffect(() => {\r\n    if(!selected)\r\n      return;\r\n\r\n    if (!ref.current)\r\n      return;\r\n\r\n    const el = ref.current;\r\n    const rect = el.getBoundingClientRect();\r\n    const offset = rect.top - el.offsetParent.getBoundingClientRect().top;\r\n\r\n    scrollTo(offset, rect.height);\r\n  }, [selected]);\r\n\r\n  return (\r\n    <div ref={ref}>\r\n      {timepoint.interactions.map((interaction, i) =>\r\n        <InteractionComponent\r\n          interaction={interaction}\r\n          visibleAt={timepoint.visibleAt}\r\n          goToTimepoint={goToTimepoint}\r\n          selected={selected}\r\n          key={i}\r\n        />)\r\n      }\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface InteractiveQuestionProps {\r\n  interactive: Interactive;\r\n  goToTimepoint?: (visibleAt: number) => void;\r\n  selectedTimepointId?: string;\r\n}\r\n\r\nexport function InteractiveQuestions(props: InteractiveQuestionProps): React.ReactElement {\r\n  const { interactive, goToTimepoint, selectedTimepointId } = props;\r\n\r\n  const ref = React.useRef<Scrollbars>();\r\n\r\n  function scrollTo(offset: number, elHeight: number): void {\r\n    if (!ref.current)\r\n      return;\r\n\r\n    const height = ref.current.getClientHeight();\r\n    const scroll = ref.current.getScrollTop();\r\n    const elementFromTop = offset + scroll;\r\n\r\n    /**\r\n     * Element is above scroll window if it's distance from the top\r\n     * is less than the scroll\r\n     */\r\n    const isAboveScrollWindow = elementFromTop < scroll;\r\n\r\n    /**\r\n     * Element is beneath scroll window if it's distance from the top\r\n     * plus it's height is greater than the scroll plus the window height\r\n     */\r\n    const isBelowScrollWindow = (elementFromTop + elHeight) > (scroll + height);\r\n\r\n    /**\r\n     * So we don't scroll if our element is visible\r\n     */\r\n    if (!isAboveScrollWindow && !isBelowScrollWindow)\r\n      return;\r\n\r\n    /**\r\n     * If our element isn't visible, we want to try scroll so the element is\r\n     * centered in our viewport\r\n     */\r\n    ref.current.scrollTop(elementFromTop - (height/2) + (elHeight/2));\r\n  }\r\n\r\n  const borderClass = goToTimepoint ? 'border rounded' : '';\r\n\r\n  return (\r\n    <Scrollbars\r\n      autoHeight\r\n      autoHeightMax={MINIMUM_GLANCE_HEIGHT}\r\n      className={borderClass}\r\n      hideTracksWhenNotNeeded={true}\r\n      ref={ref}\r\n    >\r\n      <div className='px-3 py-1'>\r\n        {interactive.timepoints.map((t, i) =>\r\n          <TimepointComponent\r\n            key={i}\r\n            timepoint={t}\r\n            goToTimepoint={goToTimepoint}\r\n            selectedTimepointId={selectedTimepointId}\r\n            scrollTo={scrollTo}\r\n          />)\r\n        }\r\n      </div>\r\n    </Scrollbars>\r\n  );\r\n}\r\n","function replacePTags(text: string): string {\r\n  if (!text) return;\r\n  return text.replace(/<p>/g, '').replace(/<\\/p>/g, '<br>');\r\n}\r\n\r\nfunction stripTags(text: string, items: string[]): string {\r\n  if (!text || !items) return;\r\n  items.forEach(item => {\r\n    text = text.replace('<' + item + '>', '').replace('</' + item + '>', '');\r\n  });\r\n  return text;\r\n}\r\n\r\nexport function formatAnnotationText(text: string): string {\r\n  if(!text) return;\r\n  text = stripTags(text, [ 'b', 'i', 'u', 'ul', 'li', 'old' ]);\r\n  text = replacePTags(text);\r\n  return text.split('<br>')[0] || 'Annotation';\r\n}\r\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"time\":\"cv--time--30ibe\",\"typeIcon\":\"cv--typeIcon--UMnFt\",\"type\":\"cv--type--3uwxz\",\"question\":\"cv--question--1FwXi\"};","// 368 is the min height of Video at a glance which is defined as $glanceHeight in synopsis.scss\r\nexport const MINIMUM_GLANCE_HEIGHT = 368; // px","import { Flight } from 'libs/common/flight';\r\n\r\nexport const InteractiveRequests = {\r\n  interactiveMetadata(id: string): Flight.Request {\r\n    return {\r\n      url: `/api/domain/v2/objects/${id}?query=video`,\r\n      key: `interactivemetadata:${id}`\r\n    };\r\n  },\r\n  interactive(id: string): Flight.Request {\r\n    return {\r\n      url: `/api/domain/v1/interactives/${id}`,\r\n      key: `interactive:${id}`\r\n    };\r\n  }\r\n};\r\n","import * as React from 'react';\r\nimport { Flight } from 'libs/common/flight';\r\nimport { LanguageService } from 'libs/common/backbone/services/LanguageService';\r\nimport { Interactive, InteractiveMetadata, PopupViewProps } from 'libs/shared/interfaces';\r\nimport { Popup } from 'libs/shared/components/popup/Popup';\r\nimport { InteractiveRequests } from 'shared/flight-requests/InteractiveRequests';\r\nimport { InteractiveQuestions } from 'shared/components/interactive-questions/InteractiveQuestions';\r\n\r\nconst getPhrase = LanguageService.encloseNamespace('shared.previewQuestions');\r\n\r\ninterface PreviewQuestionsViewProps extends PopupViewProps {\r\n  id: string;\r\n}\r\n\r\nexport function PreviewQuestionsView(props: PreviewQuestionsViewProps): React.ReactElement {\r\n  const interactiveMetadata = Flight.useBasicFetch<InteractiveMetadata>(\r\n    InteractiveRequests.interactiveMetadata(props.id));\r\n\r\n  const interactive = Flight.useBasicFetch<Interactive>(interactiveMetadata.data ?\r\n    InteractiveRequests.interactive(interactiveMetadata.data.interactiveId) : null);\r\n\r\n  return (\r\n    <Popup\r\n      title={getPhrase('mainTitle')}\r\n      closePopup={props.closePopup}\r\n      showLoadingSpinner={!interactive.data}\r\n      size='lg'\r\n    >\r\n      {(() => {\r\n        if(!interactive.data)\r\n          return <></>;\r\n\r\n        return <InteractiveQuestions interactive={interactive.data} />;\r\n      })()}\r\n    </Popup>\r\n  );\r\n}\r\n"],"sourceRoot":""}