@hmcts/rpx-xui-common-lib 1.7.28 → 1.7.38

package/esm5/lib/gov-ui/components/gov-uk-select/gov-uk-select.component.js

@@ -25,7 +25,7 @@ var GovUkSelectComponent = /** @class */ (function () {
     GovUkSelectComponent.decorators = [
         { type: Component, args: [{
                     selector: 'xuilib-gov-select',
-                    template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\" [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n<option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>"
+                    template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\"\n        [class.govuk-!-width-full]=\"config.fullWidth\"\n        [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n  <option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>\n"
                 }] }
     ];
     /** @nocollapse */
@@ -49,4 +49,4 @@ if (false) {
     /** @type {?} */
     GovUkSelectComponent.prototype.items;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ292LXVrLXNlbGVjdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AaG1jdHMvcnB4LXh1aS1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2dvdi11aS9jb21wb25lbnRzL2dvdi11ay1zZWxlY3QvZ292LXVrLXNlbGVjdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMvQyxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFHekMsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sMENBQTBDLENBQUM7Ozs7O0FBSzdFO0lBS0U7SUFBZSxDQUFDOzs7O0lBT1QsNkNBQWM7OztJQUFyQjtRQUNFLE9BQU8sbUJBQW1CLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzVFLENBQUM7O2dCQWRGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3Qiw0cEJBQTZDO2lCQUM5Qzs7Ozs7K0JBR0UsS0FBSzt3QkFDTCxLQUFLO3lCQUNMLEtBQUs7d0JBRUwsS0FBSzs7SUFNUiwyQkFBQztDQUFBLEFBaEJELElBZ0JDO1NBWlksb0JBQW9COzs7SUFFL0IsNENBQWlEOztJQUNqRCxxQ0FBaUM7O0lBQ2pDLHNDQUF5Qzs7SUFFekMscUNBQW9FIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybUdyb3VwfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBFcnJvck1lc3NhZ2VzTW9kZWwgfSBmcm9tICcuLi8uLi9tb2RlbHMnO1xuaW1wb3J0IHsgR292VWlDb25maWdNb2RlbCB9IGZyb20gJy4uLy4uL21vZGVscy9nb3YtdWktY29uZmlnLW1vZGVsJztcbmltcG9ydCB7SHRtbFRlbXBsYXRlc0hlbHBlcn0gZnJvbSAnLi4vLi4vdXRpbC9oZWxwZXJzL2h0bWwtdGVtcGxhdGVzLmhlbHBlcic7XG4vKlxuKiBHb3YgVWsgU2VsZWN0IER1bWIgQ29tcG9uZW50IHJlc3BvbnNpYmxlIGZvclxuKiBkcm9wZG93biBpbnB1dC5cbiogKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3h1aWxpYi1nb3Ytc2VsZWN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dvdi11ay1zZWxlY3QuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEdvdlVrU2VsZWN0Q29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IoKSB7fVxuICBASW5wdXQoKSBwdWJsaWMgZXJyb3JNZXNzYWdlOiBFcnJvck1lc3NhZ2VzTW9kZWw7XG4gIEBJbnB1dCgpIHB1YmxpYyBncm91cDogRm9ybUdyb3VwO1xuICBASW5wdXQoKSBwdWJsaWMgY29uZmlnOiBHb3ZVaUNvbmZpZ01vZGVsO1xuICAvLyB7aGludDogc3RyaW5nOyBuYW1lOiBzdHJpbmc7IGlkOiBzdHJpbmcsICBpc1BhZ2VIZWFkaW5nOiBib29sZWFuLCBjbGFzc2VzOiBzdHJpbmcgfTtcbiAgQElucHV0KCkgcHVibGljIGl0ZW1zOiB7bGFiZWw6IHN0cmluZywgdmFsdWU6IHN0cmluZzsgaWQ6IHN0cmluZ31bXTtcblxuICBwdWJsaWMgc2V0RGVzY3JpYmVkQnkoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gSHRtbFRlbXBsYXRlc0hlbHBlci5zZXREZXNjcmliZWRCeSh0aGlzLmVycm9yTWVzc2FnZSwgdGhpcy5jb25maWcpO1xuICB9XG5cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ292LXVrLXNlbGVjdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AaG1jdHMvcnB4LXh1aS1jb21tb24tbGliLyIsInNvdXJjZXMiOlsibGliL2dvdi11aS9jb21wb25lbnRzL2dvdi11ay1zZWxlY3QvZ292LXVrLXNlbGVjdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMvQyxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFHekMsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sMENBQTBDLENBQUM7Ozs7O0FBSzdFO0lBS0U7SUFBZSxDQUFDOzs7O0lBT1QsNkNBQWM7OztJQUFyQjtRQUNFLE9BQU8sbUJBQW1CLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzVFLENBQUM7O2dCQWRGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3QixrdUJBQTZDO2lCQUM5Qzs7Ozs7K0JBR0UsS0FBSzt3QkFDTCxLQUFLO3lCQUNMLEtBQUs7d0JBRUwsS0FBSzs7SUFLUiwyQkFBQztDQUFBLEFBZkQsSUFlQztTQVhZLG9CQUFvQjs7O0lBRS9CLDRDQUFpRDs7SUFDakQscUNBQWlDOztJQUNqQyxzQ0FBeUM7O0lBRXpDLHFDQUF1RSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Zvcm1Hcm91cH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRXJyb3JNZXNzYWdlc01vZGVsIH0gZnJvbSAnLi4vLi4vbW9kZWxzJztcbmltcG9ydCB7IEdvdlVpQ29uZmlnTW9kZWwgfSBmcm9tICcuLi8uLi9tb2RlbHMvZ292LXVpLWNvbmZpZy1tb2RlbCc7XG5pbXBvcnQge0h0bWxUZW1wbGF0ZXNIZWxwZXJ9IGZyb20gJy4uLy4uL3V0aWwvaGVscGVycy9odG1sLXRlbXBsYXRlcy5oZWxwZXInO1xuLypcbiogR292IFVrIFNlbGVjdCBEdW1iIENvbXBvbmVudCByZXNwb25zaWJsZSBmb3JcbiogZHJvcGRvd24gaW5wdXQuXG4qICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd4dWlsaWItZ292LXNlbGVjdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9nb3YtdWstc2VsZWN0LmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBHb3ZVa1NlbGVjdENvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKCkge31cbiAgQElucHV0KCkgcHVibGljIGVycm9yTWVzc2FnZTogRXJyb3JNZXNzYWdlc01vZGVsO1xuICBASW5wdXQoKSBwdWJsaWMgZ3JvdXA6IEZvcm1Hcm91cDtcbiAgQElucHV0KCkgcHVibGljIGNvbmZpZzogR292VWlDb25maWdNb2RlbDtcbiAgLy8ge2hpbnQ6IHN0cmluZzsgbmFtZTogc3RyaW5nOyBpZDogc3RyaW5nLCAgaXNQYWdlSGVhZGluZzogYm9vbGVhbiwgY2xhc3Nlczogc3RyaW5nIH07XG4gIEBJbnB1dCgpIHB1YmxpYyBpdGVtczogeyBsYWJlbDogc3RyaW5nLCB2YWx1ZTogc3RyaW5nOyBpZDogc3RyaW5nOyB9W107XG5cbiAgcHVibGljIHNldERlc2NyaWJlZEJ5KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIEh0bWxUZW1wbGF0ZXNIZWxwZXIuc2V0RGVzY3JpYmVkQnkodGhpcy5lcnJvck1lc3NhZ2UsIHRoaXMuY29uZmlnKTtcbiAgfVxufVxuIl19

package/esm5/lib/gov-ui/models/checkboxes-model.js

@@ -9,14 +9,12 @@
 export function CheckboxesModel() { }
 if (false) {
     /** @type {?} */
-    CheckboxesModel.prototype.key;
+    CheckboxesModel.prototype.id;
     /** @type {?} */
-    CheckboxesModel.prototype.group;
+    CheckboxesModel.prototype.value;
     /** @type {?} */
-    CheckboxesModel.prototype.config;
-    /** @type {?} */
-    CheckboxesModel.prototype.errors;
-    /** @type {?} */
-    CheckboxesModel.prototype.items;
+    CheckboxesModel.prototype.label;
+    /** @type {?|undefined} */
+    CheckboxesModel.prototype.hint;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3hlcy1tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BobWN0cy9ycHgteHVpLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvZ292LXVpL21vZGVscy9jaGVja2JveGVzLW1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBR0EscUNBTUM7OztJQUxDLDhCQUFZOztJQUNaLGdDQUFpQjs7SUFDakIsaUNBQXlCOztJQUN6QixpQ0FBWTs7SUFDWixnQ0FBMEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0Zvcm1Hcm91cH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgR292VWlDb25maWdNb2RlbCB9IGZyb20gJy4vZ292LXVpLWNvbmZpZy1tb2RlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ2hlY2tib3hlc01vZGVsIHtcbiAga2V5OiBzdHJpbmc7XG4gIGdyb3VwOiBGb3JtR3JvdXA7XG4gIGNvbmZpZzogR292VWlDb25maWdNb2RlbDtcbiAgZXJyb3JzOiBhbnk7XG4gIGl0ZW1zOiBHb3ZVaUNvbmZpZ01vZGVsW107XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3hlcy1tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BobWN0cy9ycHgteHVpLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvZ292LXVpL21vZGVscy9jaGVja2JveGVzLW1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEscUNBS0M7OztJQUpDLDZCQUFXOztJQUNYLGdDQUFjOztJQUNkLGdDQUFjOztJQUNkLCtCQUFjIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBDaGVja2JveGVzTW9kZWwge1xuICBpZDogc3RyaW5nO1xuICB2YWx1ZTogc3RyaW5nO1xuICBsYWJlbDogc3RyaW5nO1xuICBoaW50Pzogc3RyaW5nO1xufVxuIl19

package/esm5/lib/gov-ui/models/gov-ui-config-model.js

@@ -32,5 +32,9 @@ if (false) {
     GovUiConfigModel.prototype.isPageHeading;
     /** @type {?|undefined} */
     GovUiConfigModel.prototype.rows;
+    /** @type {?|undefined} */
+    GovUiConfigModel.prototype.fullWidth;
+    /** @type {?|undefined} */
+    GovUiConfigModel.prototype.optional;
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ292LXVpLWNvbmZpZy1tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BobWN0cy9ycHgteHVpLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvZ292LXVpL21vZGVscy9nb3YtdWktY29uZmlnLW1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsc0NBYUM7OztJQVpDLDhCQUFXOztJQUNYLGlDQUFlOztJQUNmLGlDQUFlOztJQUNmLGdDQUFjOztJQUNkLGdDQUFjOztJQUNkLG1DQUFpQjs7SUFDakIsbUNBQWlCOztJQUNqQixrQ0FBZ0I7O0lBQ2hCLCtCQUFhOztJQUNiLGdDQUFjOztJQUNkLHlDQUF3Qjs7SUFDeEIsZ0NBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIEdvdlVpQ29uZmlnTW9kZWwge1xuICBpZDogc3RyaW5nO1xuICB2YWx1ZT86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGhpbnQ/OiBzdHJpbmc7XG4gIG5hbWU/OiBzdHJpbmc7XG4gIGZvY3VzT24/OiBzdHJpbmc7XG4gIGNsYXNzZXM/OiBzdHJpbmc7XG4gIGxlZ2VuZD86IHN0cmluZztcbiAga2V5Pzogc3RyaW5nO1xuICB0eXBlPzogc3RyaW5nO1xuICBpc1BhZ2VIZWFkaW5nPzogYm9vbGVhbjtcbiAgcm93cz86IG51bWJlcjtcbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ292LXVpLWNvbmZpZy1tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BobWN0cy9ycHgteHVpLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvZ292LXVpL21vZGVscy9nb3YtdWktY29uZmlnLW1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsc0NBZUM7OztJQWRDLDhCQUFXOztJQUNYLGlDQUFlOztJQUNmLGlDQUFlOztJQUNmLGdDQUFjOztJQUNkLGdDQUFjOztJQUNkLG1DQUFpQjs7SUFDakIsbUNBQWlCOztJQUNqQixrQ0FBZ0I7O0lBQ2hCLCtCQUFhOztJQUNiLGdDQUFjOztJQUNkLHlDQUF3Qjs7SUFDeEIsZ0NBQWM7O0lBQ2QscUNBQW9COztJQUNwQixvQ0FBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIEdvdlVpQ29uZmlnTW9kZWwge1xuICBpZDogc3RyaW5nO1xuICB2YWx1ZT86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGhpbnQ/OiBzdHJpbmc7XG4gIG5hbWU/OiBzdHJpbmc7XG4gIGZvY3VzT24/OiBzdHJpbmc7XG4gIGNsYXNzZXM/OiBzdHJpbmc7XG4gIGxlZ2VuZD86IHN0cmluZztcbiAga2V5Pzogc3RyaW5nO1xuICB0eXBlPzogc3RyaW5nO1xuICBpc1BhZ2VIZWFkaW5nPzogYm9vbGVhbjtcbiAgcm93cz86IG51bWJlcjtcbiAgZnVsbFdpZHRoPzogYm9vbGVhbjtcbiAgb3B0aW9uYWw/OiBib29sZWFuO1xufVxuIl19

package/esm5/lib/gov-ui/models/radio-buttons.model.js

@@ -0,0 +1,22 @@
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/gov-ui/models/radio-buttons.model.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ */
+export function RadioButtonsModel() { }
+if (false) {
+    /** @type {?} */
+    RadioButtonsModel.prototype.key;
+    /** @type {?} */
+    RadioButtonsModel.prototype.group;
+    /** @type {?} */
+    RadioButtonsModel.prototype.config;
+    /** @type {?} */
+    RadioButtonsModel.prototype.errors;
+    /** @type {?} */
+    RadioButtonsModel.prototype.items;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9ucy5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BobWN0cy9ycHgteHVpLWNvbW1vbi1saWIvIiwic291cmNlcyI6WyJsaWIvZ292LXVpL21vZGVscy9yYWRpby1idXR0b25zLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBR0EsdUNBTUM7OztJQUxDLGdDQUFZOztJQUNaLGtDQUFpQjs7SUFDakIsbUNBQXlCOztJQUN6QixtQ0FBWTs7SUFDWixrQ0FBMEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBHb3ZVaUNvbmZpZ01vZGVsIH0gZnJvbSAnLi9nb3YtdWktY29uZmlnLW1vZGVsJztcblxuZXhwb3J0IGludGVyZmFjZSBSYWRpb0J1dHRvbnNNb2RlbCB7XG4gIGtleTogc3RyaW5nO1xuICBncm91cDogRm9ybUdyb3VwO1xuICBjb25maWc6IEdvdlVpQ29uZmlnTW9kZWw7XG4gIGVycm9yczogYW55O1xuICBpdGVtczogR292VWlDb25maWdNb2RlbFtdO1xufVxuXG4iXX0=

package/esm5/lib/models/person.model.js

@@ -78,6 +78,7 @@ var PersonRole = {
     JUDICIAL: "Judicial",
     CASEWORKER: "Legal Ops",
     ADMIN: "Admin",
+    CTSC: "CTSC User",
     ALL: "All",
 };
 export { PersonRole };
@@ -86,7 +87,8 @@ var RoleCategory = {
     JUDICIAL: "JUDICIAL",
     CASEWORKER: "LEGAL_OPERATIONS",
     ADMIN: "ADMIN",
+    CTSC: "CTSC",
     ALL: "ALL",
 };
 export { RoleCategory };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVyc29uLm1vZGVsLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGhtY3RzL3JweC14dWktY29tbW9uLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9tb2RlbHMvcGVyc29uLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsNEJBTUM7OztJQUxDLG9CQUFXOztJQUNYLHNCQUFhOztJQUNiLHVCQUFlOztJQUNmLHdCQUFlOztJQUNmLHlCQUFpQjs7Ozs7QUFHbkIsdUNBV0M7OztJQVZDLG9DQUFnQjs7SUFDaEIscUNBQWlCOztJQUNqQixtQ0FBZTs7SUFDZixvQ0FBZ0I7O0lBQ2hCLHlDQUFxQjs7SUFDckIsMENBQXNCOztJQUN0QixvQ0FBZ0I7O0lBQ2hCLHlDQUFxQjs7SUFDckIsb0NBQWdCOztJQUNoQixrQ0FBYzs7Ozs7QUFHaEIsMENBR0M7OztJQUZDLHVDQUFnQjs7SUFDaEIsMkNBQTBCOzs7OztBQUc1QixnQ0FPQzs7O0lBTkMsNEJBQWU7O0lBQ2YsK0JBQWtCOztJQUNsQiw4QkFBaUI7O0lBQ2pCLDJCQUFjOztJQUNkLDZCQUFpQjs7SUFDakIsa0NBQXFCOzs7QUFHdkIsSUFBWSxVQUFVO0lBQ3BCLFFBQVEsWUFBYTtJQUNyQixVQUFVLGFBQWM7SUFDeEIsS0FBSyxTQUFVO0lBQ2YsR0FBRyxPQUFRO0VBQ1o7OztBQUlELElBQVksWUFBWTtJQUN0QixRQUFRLFlBQWE7SUFDckIsVUFBVSxvQkFBcUI7SUFDL0IsS0FBSyxTQUFVO0lBQ2YsR0FBRyxPQUFRO0VBQ1oiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIFBlcnNvbiB7XG4gIGlkOiBzdHJpbmc7XG4gIG5hbWU6IHN0cmluZztcbiAgZW1haWw/OiBzdHJpbmc7XG4gIGRvbWFpbjogc3RyaW5nO1xuICBrbm93bkFzPzogc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEp1ZGljaWFsVXNlck1vZGVsIHtcbiAgZW1haWxJZDogc3RyaW5nO1xuICBmdWxsTmFtZTogc3RyaW5nO1xuICBpZGFtSWQ6IHN0cmluZztcbiAgaXNKdWRnZTogc3RyaW5nO1xuICBpc01hZ2lzdHJhdGU6IHN0cmluZztcbiAgaXNQYW5lbE1lbWJlcjogc3RyaW5nO1xuICBrbm93bkFzOiBzdHJpbmc7XG4gIHBlcnNvbmFsQ29kZTogc3RyaW5nO1xuICBzdXJuYW1lOiBzdHJpbmc7XG4gIHRpdGxlOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ2FzZXdvcmtlcnNCeVNlcnZpY2Uge1xuICBzZXJ2aWNlOiBzdHJpbmc7XG4gIGNhc2V3b3JrZXJzOiBDYXNld29ya2VyW107XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ2FzZXdvcmtlciB7XG4gIGlkYW1JZDogc3RyaW5nO1xuICBmaXJzdE5hbWU6IHN0cmluZztcbiAgbGFzdE5hbWU6IHN0cmluZztcbiAgZW1haWw6IHN0cmluZztcbiAga25vd25Bcz86IHN0cmluZztcbiAgcm9sZUNhdGVnb3J5OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBlbnVtIFBlcnNvblJvbGUge1xuICBKVURJQ0lBTCA9ICdKdWRpY2lhbCcsXG4gIENBU0VXT1JLRVIgPSAnTGVnYWwgT3BzJyxcbiAgQURNSU4gPSAnQWRtaW4nLFxuICBBTEwgPSAnQWxsJyxcbn1cblxuLy8gTm90ZTogUm9sZUNhdGVnb3J5IGNvdWxkIHJlcGxhY2UgUGVyc29uUm9sZSBwb3NzaWJseVxuLy8gSG93ZXZlciBhIGxvdCBvZiB3ZWJhcHAgbG9naWMgaXMgYmFzZWQgb24gY3VycmVudCBQZXJzb25Sb2xlIHVuZGVyc3RhbmRpbmdcbmV4cG9ydCBlbnVtIFJvbGVDYXRlZ29yeSB7XG4gIEpVRElDSUFMID0gJ0pVRElDSUFMJyxcbiAgQ0FTRVdPUktFUiA9ICdMRUdBTF9PUEVSQVRJT05TJyxcbiAgQURNSU4gPSAnQURNSU4nLFxuICBBTEwgPSAnQUxMJ1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVyc29uLm1vZGVsLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGhtY3RzL3JweC14dWktY29tbW9uLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9tb2RlbHMvcGVyc29uLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsNEJBTUM7OztJQUxDLG9CQUFXOztJQUNYLHNCQUFhOztJQUNiLHVCQUFlOztJQUNmLHdCQUFlOztJQUNmLHlCQUFpQjs7Ozs7QUFHbkIsdUNBV0M7OztJQVZDLG9DQUFnQjs7SUFDaEIscUNBQWlCOztJQUNqQixtQ0FBZTs7SUFDZixvQ0FBZ0I7O0lBQ2hCLHlDQUFxQjs7SUFDckIsMENBQXNCOztJQUN0QixvQ0FBZ0I7O0lBQ2hCLHlDQUFxQjs7SUFDckIsb0NBQWdCOztJQUNoQixrQ0FBYzs7Ozs7QUFHaEIsMENBR0M7OztJQUZDLHVDQUFnQjs7SUFDaEIsMkNBQTBCOzs7OztBQUc1QixnQ0FPQzs7O0lBTkMsNEJBQWU7O0lBQ2YsK0JBQWtCOztJQUNsQiw4QkFBaUI7O0lBQ2pCLDJCQUFjOztJQUNkLDZCQUFpQjs7SUFDakIsa0NBQXFCOzs7QUFHdkIsSUFBWSxVQUFVO0lBQ3BCLFFBQVEsWUFBYTtJQUNyQixVQUFVLGFBQWM7SUFDeEIsS0FBSyxTQUFVO0lBQ2YsSUFBSSxhQUFjO0lBQ2xCLEdBQUcsT0FBUTtFQUNaOzs7QUFJRCxJQUFZLFlBQVk7SUFDdEIsUUFBUSxZQUFhO0lBQ3JCLFVBQVUsb0JBQXFCO0lBQy9CLEtBQUssU0FBVTtJQUNmLElBQUksUUFBUztJQUNiLEdBQUcsT0FBUTtFQUNaIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBQZXJzb24ge1xuICBpZDogc3RyaW5nO1xuICBuYW1lOiBzdHJpbmc7XG4gIGVtYWlsPzogc3RyaW5nO1xuICBkb21haW46IHN0cmluZztcbiAga25vd25Bcz86IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBKdWRpY2lhbFVzZXJNb2RlbCB7XG4gIGVtYWlsSWQ6IHN0cmluZztcbiAgZnVsbE5hbWU6IHN0cmluZztcbiAgaWRhbUlkOiBzdHJpbmc7XG4gIGlzSnVkZ2U6IHN0cmluZztcbiAgaXNNYWdpc3RyYXRlOiBzdHJpbmc7XG4gIGlzUGFuZWxNZW1iZXI6IHN0cmluZztcbiAga25vd25Bczogc3RyaW5nO1xuICBwZXJzb25hbENvZGU6IHN0cmluZztcbiAgc3VybmFtZTogc3RyaW5nO1xuICB0aXRsZTogc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIENhc2V3b3JrZXJzQnlTZXJ2aWNlIHtcbiAgc2VydmljZTogc3RyaW5nO1xuICBjYXNld29ya2VyczogQ2FzZXdvcmtlcltdO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIENhc2V3b3JrZXIge1xuICBpZGFtSWQ6IHN0cmluZztcbiAgZmlyc3ROYW1lOiBzdHJpbmc7XG4gIGxhc3ROYW1lOiBzdHJpbmc7XG4gIGVtYWlsOiBzdHJpbmc7XG4gIGtub3duQXM/OiBzdHJpbmc7XG4gIHJvbGVDYXRlZ29yeTogc3RyaW5nO1xufVxuXG5leHBvcnQgZW51bSBQZXJzb25Sb2xlIHtcbiAgSlVESUNJQUwgPSAnSnVkaWNpYWwnLFxuICBDQVNFV09SS0VSID0gJ0xlZ2FsIE9wcycsXG4gIEFETUlOID0gJ0FkbWluJyxcbiAgQ1RTQyA9ICdDVFNDIFVzZXInLFxuICBBTEwgPSAnQWxsJyxcbn1cblxuLy8gTm90ZTogUm9sZUNhdGVnb3J5IGNvdWxkIHJlcGxhY2UgUGVyc29uUm9sZSBwb3NzaWJseVxuLy8gSG93ZXZlciBhIGxvdCBvZiB3ZWJhcHAgbG9naWMgaXMgYmFzZWQgb24gY3VycmVudCBQZXJzb25Sb2xlIHVuZGVyc3RhbmRpbmdcbmV4cG9ydCBlbnVtIFJvbGVDYXRlZ29yeSB7XG4gIEpVRElDSUFMID0gJ0pVRElDSUFMJyxcbiAgQ0FTRVdPUktFUiA9ICdMRUdBTF9PUEVSQVRJT05TJyxcbiAgQURNSU4gPSAnQURNSU4nLFxuICBDVFNDID0gJ0NUU0MnLFxuICBBTEwgPSAnQUxMJ1xufVxuIl19

package/fesm2015/hmcts-rpx-xui-common-lib.js

@@ -1208,7 +1208,7 @@ GenericFilterComponent.decorators = [
                 template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedServices]=\"form.get(field.name)?.value\"                                \n                                [field]=\"field\"\n          ></xuilib-find-service>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                styles: [".contain-classes .elevated-break{position:relative;top:-10px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}"]
+                styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width:40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}.contain-classes .govuk-select{width:100%}"]
             }] }
 ];
 /** @nocollapse */
@@ -2279,6 +2279,7 @@ class ShareCaseComponent {
         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.showRemoveUsers = false;
         this.unselect = new EventEmitter();
         this.synchronizeStore = new EventEmitter();
     }
@@ -2381,8 +2382,8 @@ class ShareCaseComponent {
 ShareCaseComponent.decorators = [
     { type: 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: "<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 class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option value=\"{{user}}\" *ngFor=\"let user of users\">{{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" 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\">\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\" class=\"govuk-button-group\">\n  <button class=\"govuk-button\" data-module=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n  <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"Cancel\">Cancel</button>\n</div>\n",
+                styles: ["select{width:100%}"]
             }] }
 ];
 /** @nocollapse */
@@ -2394,6 +2395,8 @@ ShareCaseComponent.propDecorators = {
     shareCases$: [{ type: Input }],
     users: [{ type: Input }],
     confirmLink: [{ type: Input }],
+    addUserLabel: [{ type: Input }],
+    showRemoveUsers: [{ type: Input }],
     unselect: [{ type: Output }],
     synchronizeStore: [{ type: Output }],
     userSelect: [{ type: ViewChild, args: [UserSelectComponent,] }]
@@ -2898,6 +2901,7 @@ const PersonRole = {
     JUDICIAL: "Judicial",
     CASEWORKER: "Legal Ops",
     ADMIN: "Admin",
+    CTSC: "CTSC User",
     ALL: "All",
 };
 /** @enum {string} */
@@ -2905,6 +2909,7 @@ const RoleCategory = {
     JUDICIAL: "JUDICIAL",
     CASEWORKER: "LEGAL_OPERATIONS",
     ADMIN: "ADMIN",
+    CTSC: "CTSC",
     ALL: "ALL",
 };
 
@@ -3252,7 +3257,7 @@ SearchLocationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'exui-search-location',
                 template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <mat-option *ngFor=\"let location of locations\"\n                (onSelectionChange)=\"onSelectionChange(location)\">\n      {{ location.site_name }}\n    </mat-option>\n    <mat-option *ngIf=\"!locations.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:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+                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: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{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}"]
             }] }
 ];
 /** @nocollapse */
@@ -3460,8 +3465,8 @@ class FindLocationComponent {
 FindLocationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-find-location',
-                template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [bookingCheck]=\"field.bookingCheckType\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
-                styles: [""]
+                template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n\n    <div class=\"search-location__input-container\">\n      <exui-search-location class=\"search-location__input\"\n                            [locations]=\"locations\"\n                            [selectedLocations]=\"selectedLocations\"\n                            [singleMode]=\"field.maxSelected === 1\"\n                            [bookingCheck]=\"field.bookingCheckType\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"\n                            [serviceIds]=\"serviceIds\"\n                            (locationInputChanged)=\"onInputChanged($event)\"\n                            (locationSelected)=\"onLocationSelected($event)\"\n                            (searchLocationChanged)=\"onSearchInputChanged()\"\n                            [locationType]=\"'case-management'\"></exui-search-location>\n      <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n        Add\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                styles: [".search-location__input-container{display:flex}.search-location .auto-complete-container{min-width:unset;width:calc(100% - 4px)}.search-location__input{flex:1 0 auto}.search-location .govuk-button--secondary{background-color:#ddd}"]
             }] }
 ];
 FindLocationComponent.propDecorators = {
@@ -4115,10 +4120,17 @@ FindPersonComponent.propDecorators = {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class FindServiceComponent {
-    constructor() {
+    /**
+     * @param {?} fb
+     */
+    constructor(fb) {
+        this.fb = fb;
         this.serviceTitle = 'Search for a service by name';
         this.enableAddServiceButton = true;
         this.disableInputField = false;
+        this.form = this.fb.group({
+            searchTerm: ['']
+        });
     }
     /**
      * @return {?}
@@ -4130,10 +4142,14 @@ class FindServiceComponent {
 FindServiceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-find-service',
-                template: "<div class=\"service-picker-custom\">\n    <div class=\"search-service\">\n      <div>\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <exui-search-service class=\"search-service\"\n                            [services]=\"services\"\n                            [selectedServices]=\"selectedServices\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"></exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" \n        data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n    <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n    </ul>\n  </div>",
-                styles: ["#add-service{background-color:#ddd}"]
+                template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n      <div class=\"govuk-body\">\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <div class=\"search-service__input-container\">\n        <exui-search-service class=\"search-service__input\"\n                             [services]=\"services\"\n                             [selectedServices]=\"selectedServices\"\n                             [delay]=\"300\"\n                             [disabled]=\"disabled\"></exui-search-service>\n        <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n           data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n          Add\n        </a>\n      </div>\n    </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n  </ul>\n</div>\n",
+                styles: ["#add-service{background-color:#ddd}.search-service__input-container{display:flex}.search-service__input{flex:1 0 auto}"]
             }] }
 ];
+/** @nocollapse */
+FindServiceComponent.ctorParameters = () => [
+    { type: FormBuilder }
+];
 FindServiceComponent.propDecorators = {
     field: [{ type: Input }],
     fields: [{ type: Input }],
@@ -4373,8 +4389,8 @@ class SearchServiceComponent {
 SearchServiceComponent.decorators = [
     { type: 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",
-                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}"]
+                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: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{width:calc(100% - 4px);display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
             }] }
 ];
 SearchServiceComponent.propDecorators = {
@@ -4624,6 +4640,38 @@ GovUkCheckboxComponent.propDecorators = {
     isChecked: [{ type: Input }]
 };
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/*
+ * Helper Class
+ * Used for dynamic templates manipulation
+ * */
+class HtmlTemplatesHelper {
+    /*
+      * Sets described by string depending if
+      * there is an error, error and hit or nothing
+      * */
+    /**
+     * @param {?} errorMessage
+     * @param {?} config
+     * @return {?}
+     */
+    static setDescribedBy(errorMessage, config) {
+        if (!errorMessage) {
+            return config.hint ? `${config.id}-hint` : null;
+        }
+        else if (errorMessage && errorMessage.isInvalid) {
+            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
+        }
+        else {
+            return config.hint ? `${config.id}-hint` : null;
+        }
+    }
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.ts
@@ -4637,16 +4685,82 @@ GovUkCheckboxComponent.propDecorators = {
 * @param: errors - array of error stings
 * */
 class GovUkCheckboxesComponent {
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.columns = this.setColumns();
+    }
+    /**
+     * @return {?}
+     */
+    setDescribedBy() {
+        return HtmlTemplatesHelper.setDescribedBy(this.errorMessage, this.config);
+    }
+    /**
+     * @param {?} checked
+     * @param {?} value
+     * @return {?}
+     */
+    onChecked(checked, value) {
+        /** @type {?} */
+        const formControl = this.group.get(this.config.name);
+        /** @type {?} */
+        const array = formControl.value ? formControl.value : [];
+        if (!checked) {
+            /** @type {?} */
+            const modifiedArray = array.filter((/**
+             * @param {?} item
+             * @return {?}
+             */
+            (item) => item !== value));
+            formControl.setValue(modifiedArray);
+        }
+        else {
+            formControl.setValue([...array, value]);
+        }
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    isChecked(value) {
+        /** @type {?} */
+        const formControl = this.group.get(this.config.name);
+        return formControl.value && formControl.value.includes(value);
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    setColumns() {
+        if (this.config.rows && this.config.rows > 1) {
+            /** @type {?} */
+            const array = [];
+            for (let i = 0; i < this.items.length; i += this.config.rows) {
+                /** @type {?} */
+                const arrayChunk = this.items.slice(i, i + this.config.rows);
+                array.push(arrayChunk);
+            }
+            return array;
+        }
+        else {
+            return [this.items];
+        }
+    }
 }
 GovUkCheckboxesComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-gov-uk-checkboxes',
-                template: "<xuilib-gov-uk-form-group-wrapper\n[error]=\"errors\"\n[config]=\"options.config\"\n[group]=\"options.key\">\n<div class=\"govuk-checkboxes\">\n  <xuilib-gov-checkbox *ngFor=\"let item of options.items\"\n    [group]=\"item.group\"\n    [config]=\"item.config\">\n  </xuilib-gov-checkbox>\n</div>\n</xuilib-gov-uk-form-group-wrapper>"
+                template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n     [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n  <xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n  <span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n    {{config.hint}}\n  </span>\n\n  <xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n  <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes-multi-column\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes-multi-column__single\" *ngFor=\"let columnItems of columns\">\n      <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of columnItems\">\n        <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n               [id]=\"item.id\" [name]=\"item.id\" [checked]=\"isChecked(item.value)\" [value]=\"item.value\"\n               [attr.aria-describedby]=\"setDescribedBy()\"\n               (change)=\"onChecked($event.target.checked, item.value)\"\n        >\n        <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.id\">\n          {{ item.label }}\n        </label>\n        <div *ngIf=\"item.hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n          {{ item.hint }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                styles: [".govuk-checkboxes-multi-column{display:flex;flex-wrap:wrap;margin-left:-20px;margin-right:-20px}.govuk-checkboxes-multi-column__single{padding-left:20px;padding-right:20px}"]
             }] }
 ];
 GovUkCheckboxesComponent.propDecorators = {
-    options: [{ type: Input }],
-    errors: [{ type: Input }]
+    group: [{ type: Input }],
+    config: [{ type: Input }],
+    items: [{ type: Input }],
+    errorMessage: [{ type: Input }]
 };
 
 /**
@@ -4773,38 +4887,6 @@ GovUkErrorMessageComponent.propDecorators = {
     errorMessage: [{ type: Input }]
 };
 
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/*
- * Helper Class
- * Used for dynamic templates manipulation
- * */
-class HtmlTemplatesHelper {
-    /*
-      * Sets described by string depending if
-      * there is an error, error and hit or nothing
-      * */
-    /**
-     * @param {?} errorMessage
-     * @param {?} config
-     * @return {?}
-     */
-    static setDescribedBy(errorMessage, config) {
-        if (!errorMessage) {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-        else if (errorMessage && errorMessage.isInvalid) {
-            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
-        }
-        else {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-    }
-}
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/gov-ui/components/gov-uk-fieldset/gov-uk-fieldset.component.ts
@@ -4931,7 +5013,7 @@ class GovUkInputComponent {
      * @return {?}
      */
     ngOnInit() {
-        this.config.classes = 'govuk-label--m';
+        this.config.classes = typeof (this.config.classes) === 'string' ? this.config.classes : 'govuk-label govuk-label--m';
     }
     /**
      * @return {?}
@@ -4943,7 +5025,7 @@ class GovUkInputComponent {
 GovUkInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-gov-uk-input',
-                template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n  {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
+                template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n  {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n       [class.govuk-!-width-full]=\"config.fullWidth\"\n       [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n       [id]=\"config.id\"\n       [name]=\"config.name\"\n       [type]=\"config.type\"\n       [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n       [formControlName]=\"config.name\"\n       [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
                 styles: [".gov-uk-input input:disabled{background:#b1b4b6}"]
             }] }
 ];
@@ -4972,7 +5054,8 @@ class GovUkLabelComponent {
 GovUkLabelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-gov-label',
-                template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n         [for]=\"config.id\" [innerHTML]=\"config.label\">\n  </label>\n</ng-template>"
+                template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</h1>\n<ng-template #noHeading>\n  <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n    <span>{{ config.label }}</span>\n    <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n  </label>\n</ng-template>\n",
+                styles: [".govuk-label{display:flex;align-items:center;flex-wrap:wrap}.govuk-label__optional{font-weight:400;font-size:16px;display:inline-block;margin-left:.75rem}"]
             }] }
 ];
 /** @nocollapse */
@@ -5068,7 +5151,7 @@ class GovUkSelectComponent {
 GovUkSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-gov-select',
-                template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\" [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n<option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>"
+                template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\"\n        [class.govuk-!-width-full]=\"config.fullWidth\"\n        [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n  <option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>\n"
             }] }
 ];
 /** @nocollapse */