@hmcts/rpx-xui-common-lib 1.7.21 → 1.7.22-selected-cases-status-column-header

package/bundles/hmcts-rpx-xui-common-lib.umd.js

@@ -1934,29 +1934,50 @@
                 return newSharedCases;
             };
         /**
-         * @param {?} caseId
          * @param {?} user
+         * @param {?=} caseId
          * @return {?}
          */
         CaseSharingStateService.prototype.requestUnshare = /**
-         * @param {?} caseId
          * @param {?} user
+         * @param {?=} caseId
          * @return {?}
          */
-            function (caseId, user) {
+            function (user, caseId) {
                 var e_2, _a;
                 /** @type {?} */
                 var newSharedCases = [];
                 try {
                     for (var _b = __values(this.caseState), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var sharedCase = _c.value;
-                        if (sharedCase.caseId === caseId) {
+                        // If no caseId, then request unshare from all shared cases
+                        if (caseId === undefined || sharedCase.caseId === caseId) {
                             if (!sharedCase.pendingUnshares) {
                                 sharedCase.pendingUnshares = [];
                             }
                             /** @type {?} */
                             var newPendingUnshares = sharedCase.pendingUnshares.slice();
-                            if (newPendingUnshares) {
+                            // If the user is pending shared access, just remove them from pendingShares
+                            /** @type {?} */
+                            var newPendingShares = void 0;
+                            /** @type {?} */
+                            var indexOfPreviouslyAddedUser = -1;
+                            if (sharedCase.pendingShares) {
+                                indexOfPreviouslyAddedUser = sharedCase.pendingShares.findIndex(( /**
+                                 * @param {?} u
+                                 * @return {?}
+                                 */function (u) { return u.idamId === user.idamId; }));
+                                if (indexOfPreviouslyAddedUser > -1) {
+                                    newPendingShares = sharedCase.pendingShares.slice();
+                                    newPendingShares.splice(indexOfPreviouslyAddedUser, 1);
+                                }
+                            }
+                            // If the user does not exist in pendingShares, and already has shared access (i.e. exists in sharedWith),
+                            // request removal of shared access
+                            if (indexOfPreviouslyAddedUser === -1 && sharedCase.sharedWith && sharedCase.sharedWith.findIndex(( /**
+                             * @param {?} u
+                             * @return {?}
+                             */function (u) { return u.idamId === user.idamId; })) > -1) {
                                 if (!newPendingUnshares.some(( /**
                                  * @param {?} u
                                  * @return {?}
@@ -1964,11 +1985,10 @@
                                     newPendingUnshares.push(user);
                                 }
                             }
-                            else {
-                                newPendingUnshares.push(user);
-                            }
                             /** @type {?} */
-                            var newSharedCase = __assign({}, sharedCase, { pendingUnshares: newPendingUnshares });
+                            var newSharedCase = __assign({}, sharedCase, { pendingUnshares: newPendingUnshares }, (newPendingShares && {
+                                pendingShares: newPendingShares
+                            }));
                             newSharedCases.push(newSharedCase);
                         }
                         else {
@@ -1990,7 +2010,7 @@
                     }
                 }
                 this.subject.next(newSharedCases);
-                return;
+                return newSharedCases;
             };
         /**
          * @param {?} caseId
@@ -2066,11 +2086,13 @@
          * @return {?}
          */
             function (caseId) {
-                for (var i = 0, l = this.caseState.length; i < l; i++) {
-                    if (this.caseState[i].caseId === caseId) {
-                        this.caseState.splice(i, 1);
-                        this.subject.next(this.caseState);
-                        return;
+                if (this.caseState.length > 1) {
+                    for (var i = 0, l = this.caseState.length; i < l; i++) {
+                        if (this.caseState[i].caseId === caseId) {
+                            this.caseState.splice(i, 1);
+                            this.subject.next(this.caseState);
+                            return;
+                        }
                     }
                 }
             };
@@ -2301,15 +2323,6 @@
                     this.combinedSortedShares = this.combineAndSortShares(sharedWith, pendingShares);
                 }
             };
-        /**
-         * @return {?}
-         */
-        SelectedCaseComponent.prototype.onUnselect = /**
-         * @return {?}
-         */
-            function () {
-                this.unselect.emit(this.sharedCase);
-            };
         /**
          * @param {?} c
          * @return {?}
@@ -2532,7 +2545,7 @@
          * @return {?}
          */
             function (user, sharedCase) {
-                this.stateService.requestUnshare(sharedCase.caseId, user);
+                this.stateService.requestUnshare(user, sharedCase.caseId);
                 this.synchronizeStore.emit(this.shareCases);
             };
         /**
@@ -2651,7 +2664,7 @@
         SelectedCaseComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-selected-case',
-                        template: "<div id=\"{{buildElementId('govuk-accordion__section')}}\" class=\"govuk-accordion__section\">\n  <div class=\"govuk-grid-row govuk-case-header\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <h3 id=\"{{buildElementId('case-title')}}\" class=\"govuk-case-title\">{{ sharedCase.caseTitle }}</h3>\n      <h1 id=\"{{buildElementId('case-id')}}\" class=\"govuk-case-sub-title\">{{ sharedCase.caseId }}</h1>\n    </div>\n    <div class=\"govuk-grid-column-twenty-percent\">\n      <button id=\"{{buildElementId('btn-deselect-case')}}\" class=\"govuk-button hmcts-button--secondary\" (click)=\"onDeselect(sharedCase)\" title=\"Deselect case\">Deselect case</button>\n    </div>\n    <div class=\"govuk-accordion__section-header govuk-grid-column-five-percent\">\n      <div class=\"govuk-accordion__section-heading\">\n        <button type=\"button\" id=\"{{buildElementId('accordion-with-summary-sections-heading')}}\"\n              aria-controls=\"accordion-with-summary-sections-content-1\" class=\"govuk-accordion__section-button\"\n              aria-describedby=\"accordion-with-summary-sections-summary-1\" aria-expanded=\"false\" title=\"Expand or Collapse\">\n        <span class=\"govuk-accordion__icon\" aria-hidden=\"true\"></span></button>\n      </div>\n    </div>\n  </div>\n  <div id=\"{{buildElementId('accordion-with-summary-sections-content')}}\" class=\"govuk-accordion__section-content\"\n       aria-labelledby=\"buildElementId('accordion-with-summary-sections-heading')\" >\n    <div class=\"govuk-grid-row\" *ngIf=\"showNoUsersAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-no-user')}}\" class=\"govuk-div-align-left\">No users from your organisation currently have access to this case.</span>\n    </div>\n    <div class=\"govuk-grid-row\" *ngIf=\"showUserHasAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-has-users')}}\" class=\"govuk-div-align-left\">Users from your organisation with access to this case.</span>\n    </div>\n    <table class=\"govuk-table\" *ngIf=\"showUserAccessTable()\">\n      <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th id=\"{{buildElementId('name-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n        <th id=\"{{buildElementId('email-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n        <th id=\"{{buildElementId('action-heading')}}\" class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n        <th id=\"{{buildElementId('label-heading')}}\" class=\"govuk-table__header govuk-table-column-label\" scope=\"col\">&nbsp;&nbsp;</th>\n      </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let user of combinedSortedShares; index as idx; trackBy: trackByUserId\">\n          <td id=\"user-full-name-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n          <td id=\"user-email-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.email }}</td>\n          <td class=\"govuk-table__cell\">\n            <a *ngIf=\"canRemove(sharedCase.caseId, user) | async\" (click)=\"onRemove(user, sharedCase)\" href=\"javascript:void(0);\">Remove <span class=\"govuk-visually-hidden\">{{ user.firstName + ' ' + user.lastName }} from case</span></a>\n            <a *ngIf=\"canCancel(sharedCase.caseId, user) | async\" (click)=\"onCancel(user, sharedCase)\" href=\"javascript:void(0);\">Cancel <span class=\"govuk-visually-hidden\">adding {{ user.firstName + ' ' + user.lastName }} to case</span></a>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngIf=\"isToBeRemoved(sharedCase.caseId, user) | async\" class=\"hmcts-badge hmcts-badge--red\">To be removed</span>\n            <span *ngIf=\"isToBeAdded(sharedCase.caseId, user) | async\" class=\"hmcts-badge\">To be added</span>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n",
+                        template: "<div id=\"{{buildElementId('govuk-accordion__section')}}\" class=\"govuk-accordion__section\">\n  <div class=\"govuk-grid-row govuk-case-header\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <h3 id=\"{{buildElementId('case-title')}}\" class=\"govuk-case-title\">{{ sharedCase.caseTitle }}</h3>\n      <h1 id=\"{{buildElementId('case-id')}}\" class=\"govuk-case-sub-title\">{{ sharedCase.caseId }}</h1>\n    </div>\n    <div class=\"govuk-grid-column-twenty-percent\">\n      <button id=\"{{buildElementId('btn-deselect-case')}}\" class=\"govuk-button hmcts-button--secondary\" (click)=\"onDeselect(sharedCase)\" title=\"Deselect case\">Deselect case</button>\n    </div>\n    <div class=\"govuk-accordion__section-header govuk-grid-column-five-percent\">\n      <div class=\"govuk-accordion__section-heading\">\n        <button type=\"button\" id=\"{{buildElementId('accordion-with-summary-sections-heading')}}\"\n              aria-controls=\"accordion-with-summary-sections-content-1\" class=\"govuk-accordion__section-button\"\n              aria-describedby=\"accordion-with-summary-sections-summary-1\" aria-expanded=\"false\" title=\"Expand or Collapse\">\n        <span class=\"govuk-accordion__icon\" aria-hidden=\"true\"></span></button>\n      </div>\n    </div>\n  </div>\n  <div id=\"{{buildElementId('accordion-with-summary-sections-content')}}\" class=\"govuk-accordion__section-content\"\n       aria-labelledby=\"buildElementId('accordion-with-summary-sections-heading')\" >\n    <div class=\"govuk-grid-row\" *ngIf=\"showNoUsersAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-no-user')}}\" class=\"govuk-div-align-left\">No users from your organisation currently have access to this case.</span>\n    </div>\n    <div class=\"govuk-grid-row\" *ngIf=\"showUserHasAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-has-users')}}\" class=\"govuk-div-align-left\">Users from your organisation with access to this case.</span>\n    </div>\n    <table class=\"govuk-table\" *ngIf=\"showUserAccessTable()\">\n      <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th id=\"{{buildElementId('name-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n        <th id=\"{{buildElementId('email-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n        <th id=\"{{buildElementId('action-heading')}}\" class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n        <th id=\"{{buildElementId('label-heading')}}\" class=\"govuk-table__header govuk-table-column-label\" scope=\"col\">Status</th>\n      </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let user of combinedSortedShares; index as idx; trackBy: trackByUserId\">\n          <td id=\"user-full-name-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n          <td id=\"user-email-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.email }}</td>\n          <td class=\"govuk-table__cell\">\n            <a *ngIf=\"canRemove(sharedCase.caseId, user) | async\" (click)=\"onRemove(user, sharedCase)\" href=\"javascript:void(0);\">Remove <span class=\"govuk-visually-hidden\">{{ user.firstName + ' ' + user.lastName }} from case</span></a>\n            <a *ngIf=\"canCancel(sharedCase.caseId, user) | async\" (click)=\"onCancel(user, sharedCase)\" href=\"javascript:void(0);\">Cancel <span class=\"govuk-visually-hidden\">adding {{ user.firstName + ' ' + user.lastName }} to case</span></a>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngIf=\"isToBeRemoved(sharedCase.caseId, user) | async\" class=\"hmcts-badge hmcts-badge--red\">To be removed</span>\n            <span *ngIf=\"isToBeAdded(sharedCase.caseId, user) | async\" class=\"hmcts-badge\">To be added</span>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n",
                         styles: [".govuk-case-header{border-top:1px solid #bfc1c3}.govuk-case-title{font-family:nta,Arial,sans-serif;font-size:24px;color:#005ea5;font-weight:700;padding-left:0}.govuk-case-sub-title{font-family:nta,Arial,sans-serif;font-size:1rem!important;color:#6f777b;font-weight:400;padding-left:0}.govuk-grid-row{margin-left:0;margin-right:0}.govuk-grid-column-three-quarters{padding-top:5px;padding-left:0}.govuk-grid-column-twenty-percent{box-sizing:border-box;padding-top:10px;width:20%;float:left}.govuk-grid-column-five-percent{box-sizing:border-box;padding-top:15px;width:5%;float:left}.govuk-table-column-header{width:40%}.govuk-table-column-actions,.govuk-table-column-label{width:10%}.govuk-div-align-left{font-family:nta,Arial,sans-serif;font-size:1.1875rem!important;line-height:1.31579!important;text-align:left;margin-bottom:20px;padding-left:0;color:#0b0c0c}.govuk-accordion__section-header{border-top:0}.govuk-accordion__section-content{padding-top:0}"]
                     }] }
         ];
@@ -2942,6 +2955,17 @@
         return ShareCaseConfirmComponent;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/case-share.model.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @enum {string} */
+    var SharedCaseErrorMessages = {
+        OneCaseMustBeSelected: "At least one case must be selected",
+        NoChangesRequested: "You have not requested any changes to case sharing",
+    };
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/user-select/user-select.component.ts
@@ -3063,16 +3087,23 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var ShareCaseComponent = /** @class */ (function () {
-        function ShareCaseComponent(stateService) {
+        function ShareCaseComponent(stateService, router) {
             this.stateService = stateService;
+            this.router = router;
             this.shareCases = []; // cases selected for sharing
-            // cases selected for sharing
+            this.continueAllowed = false;
+            this.selectedUserToRemove = null;
             this.removeUserFromCaseToggleOn = false;
             this.users = []; // users of this organisation the cases can be shared with
             // users of this organisation the cases can be shared with
             this.confirmLink = '';
+            this.cancelLink = '';
+            this.showRemoveUsers = false;
+            this.fnTitle = '';
+            this.title = '';
             this.unselect = new i0.EventEmitter();
             this.synchronizeStore = new i0.EventEmitter();
+            this.validationErrors = [];
         }
         /**
          * @return {?}
@@ -3082,14 +3113,33 @@
          */
             function () {
                 var _this = this;
-                this.shareCases$.subscribe(( /**
-                 * @param {?} shareCases
-                 * @return {?}
-                 */function (shareCases) {
+                this.shareCases$
+                    .pipe(operators.tap(( /**
+             * @param {?} sharedCases
+             * @return {?}
+             */function (sharedCases) {
+                    // Update the list of users assigned to at least one case
+                    _this.getAssignedUsers(sharedCases.filter(( /**
+                     * @param {?} sharedCase
+                     * @return {?}
+                     */function (sharedCase) { return sharedCase.sharedWith && sharedCase.sharedWith.length > 0; })));
+                })))
+                    .subscribe(( /**
+             * @param {?} shareCases
+             * @return {?}
+             */function (shareCases) {
                     _this.shareCases = shareCases;
                     _this.stateService.setCases(shareCases);
+                    // Set the config to be used by the xuilib-gov-uk-error-message component, in particular the element ID to
+                    // which the error message is associated
+                    if (shareCases) {
+                        _this.selectedCasesErrorMessageConfig = {
+                            id: shareCases.length > 0 ? 'cases' : 'noCaseDisplay'
+                        };
+                    }
                 }));
                 this.shareCases$ = this.stateService.state;
+                this.shareCaseErrorMessage = { isInvalid: false, messages: [] };
             };
         /**
          * @param {?} c
@@ -3100,8 +3150,16 @@
          * @return {?}
          */
             function (c) {
-                this.unselect.emit(c);
-                this.stateService.removeCase(c.caseId);
+                this.validationErrors = [];
+                if (this.stateService.getCases().length === 1) {
+                    this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.OneCaseMustBeSelected });
+                    this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.OneCaseMustBeSelected] };
+                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+                }
+                else {
+                    this.unselect.emit(c);
+                    this.stateService.removeCase(c.caseId);
+                }
             };
         /**
          * @param {?} event
@@ -3139,6 +3197,21 @@
                     this.userSelect.clear();
                 }
                 this.synchronizeStore.emit(newSharedCases);
+                // Update the list of assigned users (which includes pending users)
+                this.getAssignedUsers(newSharedCases);
+            };
+        /**
+         * @return {?}
+         */
+        ShareCaseComponent.prototype.removeUser = /**
+         * @return {?}
+         */
+            function () {
+                if (this.selectedUserToRemove) {
+                    /** @type {?} */
+                    var newSharedCases = this.stateService.requestUnshare(this.selectedUserToRemove);
+                    this.synchronizeStore.emit(newSharedCases);
+                }
             };
         /**
          * @return {?}
@@ -3150,14 +3223,25 @@
                 return this.selectedUser === null || this.shareCases.length === 0;
             };
         /**
+         * Function originally used to set disabled state of "Continue" button, now called by the button click handler to
+         * control whether navigation to the confirmation page is allowed. It is prevented if no changes have been made
+         */
+        /**
+         * Function originally used to set disabled state of "Continue" button, now called by the button click handler to
+         * control whether navigation to the confirmation page is allowed. It is prevented if no changes have been made
          * @return {?}
          */
-        ShareCaseComponent.prototype.isDisabledContinue = /**
+        ShareCaseComponent.prototype.setContinueAllowed = /**
+         * Function originally used to set disabled state of "Continue" button, now called by the button click handler to
+         * control whether navigation to the confirmation page is allowed. It is prevented if no changes have been made
          * @return {?}
          */
             function () {
-                /** @type {?} */
-                var isDisabled = true;
+                var _this = this;
+                // Always start with continueAllowed = false. This covers the scenario where a user might add someone for sharing
+                // a case (so, continueAllowed = true), then removes the same user before trying to continue. This would
+                // erroneously leave continueAllowed as true
+                this.continueAllowed = false;
                 this.shareCases$.subscribe(( /**
                  * @param {?} shareCases
                  * @return {?}
@@ -3167,11 +3251,11 @@
                         for (var shareCases_1 = __values(shareCases), shareCases_1_1 = shareCases_1.next(); !shareCases_1_1.done; shareCases_1_1 = shareCases_1.next()) {
                             var caseState = shareCases_1_1.value;
                             if (caseState.pendingShares && caseState.pendingShares.length > 0) {
-                                isDisabled = false;
+                                _this.continueAllowed = true;
                                 break;
                             }
                             if (caseState.pendingUnshares && caseState.pendingUnshares.length > 0) {
-                                isDisabled = false;
+                                _this.continueAllowed = true;
                                 break;
                             }
                         }
@@ -3190,7 +3274,6 @@
                         }
                     }
                 }));
-                return isDisabled;
             };
         /**
          * @param {?} sharedCase
@@ -3230,17 +3313,88 @@
                 }
                 this.stateService.setCases(this.shareCases);
             };
+        /**
+         * @return {?}
+         */
+        ShareCaseComponent.prototype.onContinue = /**
+         * @return {?}
+         */
+            function () {
+                this.setContinueAllowed();
+                // If continuation is not allowed, set an error message
+                if (!this.continueAllowed) {
+                    this.validationErrors = [];
+                    this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.NoChangesRequested });
+                    this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.NoChangesRequested] };
+                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+                }
+                // Navigate to confirmation page only if allowed to continue
+                if (this.continueAllowed) {
+                    this.router.navigate([this.confirmLink]);
+                }
+            };
+        /**
+         * Gets a unique list of all users that have been assigned, or are pending assigment to, at least one case
+         * @param sharedCases The list of shared cases from which to get users these are shared with, or are to be shared with
+         */
+        /**
+         * Gets a unique list of all users that have been assigned, or are pending assigment to, at least one case
+         * @param {?} sharedCases The list of shared cases from which to get users these are shared with, or are to be shared with
+         * @return {?}
+         */
+        ShareCaseComponent.prototype.getAssignedUsers = /**
+         * Gets a unique list of all users that have been assigned, or are pending assigment to, at least one case
+         * @param {?} sharedCases The list of shared cases from which to get users these are shared with, or are to be shared with
+         * @return {?}
+         */
+            function (sharedCases) {
+                /** @type {?} */
+                var users = [];
+                sharedCases.forEach(( /**
+                 * @param {?} sharedCase
+                 * @return {?}
+                 */function (sharedCase) {
+                    if (sharedCase.sharedWith) {
+                        sharedCase.sharedWith.forEach(( /**
+                         * @param {?} user
+                         * @return {?}
+                         */function (user) {
+                            if (!users.some(( /**
+                             * @param {?} existingUser
+                             * @return {?}
+                             */function (existingUser) { return user.idamId === existingUser.idamId; }))) {
+                                users.push(user);
+                            }
+                        }));
+                    }
+                    if (sharedCase.pendingShares) {
+                        sharedCase.pendingShares.forEach(( /**
+                         * @param {?} user
+                         * @return {?}
+                         */function (user) {
+                            if (!users.some(( /**
+                             * @param {?} existingUser
+                             * @return {?}
+                             */function (existingUser) { return user.idamId === existingUser.idamId; }))) {
+                                users.push(user);
+                            }
+                        }));
+                    }
+                }));
+                this.assignedUsers = users;
+            };
         ShareCaseComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'xuilib-share-case',
-                        template: "<div id=\"add-user\">\n  <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">Enter email address</label>\n  <span id=\"add-user-hint\" class=\"govuk-hint\">\n    Search by name or email address. You can only add people from your organisation individually - but you can add as many as you like.\n  </span>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <xuilib-user-select\n        id=\"add-user-input\"\n        aria-describedby=\"add-user-hint\"\n        [users]=\"users\"\n        (selected)=\"onSelectedUser($event)\">\n      </xuilib-user-select>\n    </div>\n    <div class=\"govuk-grid-column-one-thirds\">\n      <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button\" [disabled]=\"isDisabledAdd()\" title=\"Add user to the case\">Add</button>\n    </div>\n  </div>\n  <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n    <summary class=\"govuk-details__summary\">\n    <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n      Can\u2019t find an email address?\n    </span>\n    </summary>\n    <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n      If you can\u2019t find your colleague\u2019s email address, they will need to complete their registration. Contact your\n      administrator for help.\n    </div>\n  </details>\n</div>\n\n<div id=\"cases\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n  <div *ngIf=\"shareCases && shareCases.length > 0\"  class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\">\n    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\">\n  <button class=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n</div>\n",
-                        styles: [""]
+                        template: "<xuilib-hmcts-error-summary\n  [errorMessages]=\"validationErrors\"\n  [header]=\"'There is a problem'\"\n></xuilib-hmcts-error-summary>\n<h1 *ngIf=\"title\" class=\"govuk-heading-xl govuk-!-margin-top-2\">\n  <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle}}</span>\n  {{title}}\n</h1>\n<div id=\"add-user\">\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel}}</label>\n    <span id=\"add-user-hint\" class=\"govuk-hint\">\n      Search by name or email address. You can share access with as many people as you need.\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <xuilib-user-select\n          id=\"add-user-input\"\n          aria-describedby=\"add-user-hint\"\n          [users]=\"users\"\n          (selected)=\"onSelectedUser($event)\">\n        </xuilib-user-select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\" title=\"Add user to selected cases\">Add</button>\n      </div>\n    </div>\n    <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n      <summary class=\"govuk-details__summary\">\n      <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n        Can't find an email address?\n      </span>\n      </summary>\n      <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n        If you can't find your colleague's email address, they will need to complete their registration. Contact your\n        administrator for help.\n      </div>\n    </details>\n  </div>\n  <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">Remove a person from all cases</label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      Select a person to remove them from all selected cases.\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <select [(ngModel)]=\"selectedUserToRemove\" class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option [ngValue]=\"null\" selected>Select a person</option>\n          <option *ngFor=\"let user of assignedUsers\" [ngValue]=\"user\">{{user.firstName}} {{user.lastName}} - {{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" (click)=\"removeUser()\" class=\"govuk-button govuk-button--secondary\" title=\"Remove user from selected cases\">Remove</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"cases\" [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n  <xuilib-gov-uk-error-message [config]=\"selectedCasesErrorMessageConfig\" [errorMessage]=\"shareCaseErrorMessage\"></xuilib-gov-uk-error-message>\n  <div *ngIf=\"shareCases && shareCases.length > 0\" class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\"\n    [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button id=\"btn-continue\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"onContinue()\" title=\"Continue\">Continue</button>\n  <button id=\"btn-cancel\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"Cancel\" [routerLink]=\"cancelLink\">Cancel</button>\n</div>\n",
+                        styles: ["select{width:100%}"]
                     }] }
         ];
         /** @nocollapse */
         ShareCaseComponent.ctorParameters = function () {
             return [
-                { type: CaseSharingStateService }
+                { type: CaseSharingStateService },
+                { type: i2$2.Router }
             ];
         };
         ShareCaseComponent.propDecorators = {
@@ -3248,6 +3402,11 @@
             shareCases$: [{ type: i0.Input }],
             users: [{ type: i0.Input }],
             confirmLink: [{ type: i0.Input }],
+            cancelLink: [{ type: i0.Input }],
+            addUserLabel: [{ type: i0.Input }],
+            showRemoveUsers: [{ type: i0.Input }],
+            fnTitle: [{ type: i0.Input }],
+            title: [{ type: i0.Input }],
             unselect: [{ type: i0.Output }],
             synchronizeStore: [{ type: i0.Output }],
             userSelect: [{ type: i0.ViewChild, args: [UserSelectComponent,] }]
@@ -3833,6 +3992,7 @@
         JUDICIAL: "Judicial",
         CASEWORKER: "Legal Ops",
         ADMIN: "Admin",
+        CTSC: "CTSC User",
         ALL: "All",
     };
     /** @enum {string} */
@@ -3840,6 +4000,7 @@
         JUDICIAL: "JUDICIAL",
         CASEWORKER: "LEGAL_OPERATIONS",
         ADMIN: "ADMIN",
+        CTSC: "CTSC",
         ALL: "ALL",
     };
 
@@ -3854,6 +4015,12 @@
         return RadioFilterFieldConfig;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * Generated from: lib/models/index.ts
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/services/locations/location.service.ts
@@ -5514,7 +5681,7 @@
         SearchServiceComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'exui-search-service',
-                        template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
+                        template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
                         styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
                     }] }
         ];
@@ -7935,6 +8102,7 @@
     exports.dateValidator = dateValidator;
     exports.radioGroupValidator = radioGroupValidator;
     exports.HmctsSubNavigationComponent = HmctsSubNavigationComponent;
+    exports.SharedCaseErrorMessages = SharedCaseErrorMessages;
     exports.BadgeColour = BadgeColour;
     exports.DateBadgeColour = DateBadgeColour;
     exports.SECONDS_IN_A_DAY = SECONDS_IN_A_DAY;