@hmcts/rpx-xui-common-lib 1.7.6 → 1.7.9-task-name-filter

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

@@ -1138,6 +1138,31 @@ var GenericFilterComponent = /** @class */ (function () {
             finally { if (e_2) throw e_2.error; }
         }
     };
+    /**
+     * @param {?} values
+     * @param {?} field
+     * @return {?}
+     */
+    GenericFilterComponent.prototype.updateTaskNameControls = /**
+     * @param {?} values
+     * @param {?} field
+     * @return {?}
+     */
+    function (values, field) {
+        // let keys;
+        // if (!values) {
+        //   keys = Object.keys(this.form.get(field.name).value);
+        // } else {
+        //   keys = Object.keys(values);
+        // }
+        // for (const key of keys) {
+        //   if (this.form.get(field.name) && this.form.get(field.name).get(key)) {
+        //     const value = values && values[key] ? values[key] : null;
+        //     this.form.get(field.name).get(key).patchValue(value);
+        //   }
+        // }
+        this.form.get(field.name).patchValue(values);
+    };
     /**
      * @param {?} event
      * @param {?} form
@@ -1581,7 +1606,7 @@ var GenericFilterComponent = /** @class */ (function () {
     GenericFilterComponent.decorators = [
         { type: Component, args: [{
                     selector: 'xuilib-generic-filter',
-                    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.enableAddLocationButton\"\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      </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",
+                    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.enableAddLocationButton\"\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-task-name'\">\n          <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n                              (taskNameFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findTaskNameGroup]=\"form\"\n                              [selectedTaskName]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-task-name>\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}"]
@@ -5111,6 +5136,307 @@ var FindPersonComponent = /** @class */ (function () {
     return FindPersonComponent;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/services/task-name/task-name.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var TaskNameService = /** @class */ (function () {
+    function TaskNameService(http) {
+        this.http = http;
+    }
+    /**
+     * @return Observable<any[]>: Array of taskName in Observable
+     */
+    /**
+     * @return {?} Observable<any[]>: Array of taskName in Observable
+     */
+    TaskNameService.prototype.getTaskName = /**
+     * @return {?} Observable<any[]>: Array of taskName in Observable
+     */
+    function () {
+        return this.http.get("/workallocation2/taskNames");
+    };
+    TaskNameService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    TaskNameService.ctorParameters = function () { return [
+        { type: HttpClient }
+    ]; };
+    /** @nocollapse */ TaskNameService.ngInjectableDef = defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(inject(HttpClient)); }, token: TaskNameService, providedIn: "root" });
+    return TaskNameService;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/components/find-task-name/find-task-name.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var FindTaskNameComponent = /** @class */ (function () {
+    function FindTaskNameComponent(cd, taskService) {
+        this.cd = cd;
+        this.taskService = taskService;
+        this.taskNameSelected = new EventEmitter();
+        this.taskNameFieldChanged = new EventEmitter();
+        this.boldTitle = 'Find the task name';
+        this.subTitle = 'Type the name of the task name and select them.';
+        this.domain = PersonRole.ALL;
+        this.findTaskNameGroup = new FormGroup({});
+        this.submitted = true;
+        this.userIncluded = false;
+        this.placeholderContent = '';
+        this.isNoResultsShown = true;
+        this.showUpdatedColor = false;
+        this.selectedTaskNames = [];
+        this.errorMessage = 'You must select a name';
+        this.idValue = '';
+        this.services = ['IA'];
+        this.disabled = null;
+        this.showAutocomplete = false;
+        this.filteredOptions = [];
+        this.minSearchCharacters = 1;
+        this.searchTerm = '';
+    }
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+    };
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.findTaskNameControl = new FormControl(this.selectedTaskName);
+        this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
+        this.sub = this.findTaskNameControl.valueChanges
+            .pipe(tap((/**
+         * @return {?}
+         */
+        function () { return _this.showAutocomplete = false; })), tap((/**
+         * @return {?}
+         */
+        function () { return _this.filteredOptions = []; })), tap((/**
+         * @param {?} term
+         * @return {?}
+         */
+        function (term) { return _this.searchTerm = term; })), debounceTime(300), 
+        // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit(null) : void 0),
+        filter((/**
+         * @param {?} searchTerm
+         * @return {?}
+         */
+        function (searchTerm) { return searchTerm && searchTerm.length >= _this.minSearchCharacters; })), mergeMap((/**
+         * @return {?}
+         */
+        function () { return _this.getTaskName(); }))).subscribe((/**
+         * @param {?} task
+         * @return {?}
+         */
+        function (task) {
+            _this.filteredOptions = task;
+            if (_this.searchTerm) {
+                _this.filteredOptions = _this.filteredOptions.filter((/**
+                 * @param {?} t
+                 * @return {?}
+                 */
+                function (t) { return t.taskName.toLocaleLowerCase().includes(_this.searchTerm.toLocaleLowerCase()); }));
+            }
+            _this.cd.detectChanges();
+        }));
+    };
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.getTaskName = /**
+     * @return {?}
+     */
+    function () {
+        return this.taskService.getTaskName();
+    };
+    // public filter(searchTerm: string): Observable<Person[]> {
+    //   console.log("**filter**");
+    //   const findJudicialPeople = this.taskService.getTaskName();
+    //   // const findJudicialPeople = this.findPersonService.find({searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser});
+    //   const findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser});
+    //   if (searchTerm && searchTerm.length > this.minSearchCharacters) {
+    //     switch (this.domain) {
+    //       case PersonRole.JUDICIAL: {
+    //         return findJudicialPeople.pipe(map(persons => {
+    //           const ids: string[] = this.selectedTaskNames.map(({id}) => id);
+    //           return persons.filter(({ id }) => !ids.includes(id));
+    //         }));
+    //       }
+    //       case PersonRole.ALL: {
+    //         return zip(findJudicialPeople, findCaseworkersOrAdmins).pipe(map(separatePeople => separatePeople[0].concat(separatePeople[1])));
+    //       }
+    //       case PersonRole.CASEWORKER:
+    //       case PersonRole.ADMIN: {
+    //         return findCaseworkersOrAdmins;
+    //       }
+    //       default: {
+    //         return of([]);
+    //       }
+    //     }
+    //   }
+    //   return of([]);
+    // }
+    // public filter(searchTerm: string): Observable<Person[]> {
+    //   console.log("**filter**");
+    //   const findJudicialPeople = this.taskService.getTaskName();
+    //   // const findJudicialPeople = this.findPersonService.find({searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser});
+    //   const findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser});
+    //   if (searchTerm && searchTerm.length > this.minSearchCharacters) {
+    //     switch (this.domain) {
+    //       case PersonRole.JUDICIAL: {
+    //         return findJudicialPeople.pipe(map(persons => {
+    //           const ids: string[] = this.selectedTaskNames.map(({id}) => id);
+    //           return persons.filter(({ id }) => !ids.includes(id));
+    //         }));
+    //       }
+    //       case PersonRole.ALL: {
+    //         return zip(findJudicialPeople, findCaseworkersOrAdmins).pipe(map(separatePeople => separatePeople[0].concat(separatePeople[1])));
+    //       }
+    //       case PersonRole.CASEWORKER:
+    //       case PersonRole.ADMIN: {
+    //         return findCaseworkersOrAdmins;
+    //       }
+    //       default: {
+    //         return of([]);
+    //       }
+    //     }
+    //   }
+    //   return of([]);
+    // }
+    /**
+     * @param {?} selectedTaskName
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.onSelectionChange = 
+    // public filter(searchTerm: string): Observable<Person[]> {
+    //   console.log("**filter**");
+    //   const findJudicialPeople = this.taskService.getTaskName();
+    //   // const findJudicialPeople = this.findPersonService.find({searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser});
+    //   const findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser});
+    //   if (searchTerm && searchTerm.length > this.minSearchCharacters) {
+    //     switch (this.domain) {
+    //       case PersonRole.JUDICIAL: {
+    //         return findJudicialPeople.pipe(map(persons => {
+    //           const ids: string[] = this.selectedTaskNames.map(({id}) => id);
+    //           return persons.filter(({ id }) => !ids.includes(id));
+    //         }));
+    //       }
+    //       case PersonRole.ALL: {
+    //         return zip(findJudicialPeople, findCaseworkersOrAdmins).pipe(map(separatePeople => separatePeople[0].concat(separatePeople[1])));
+    //       }
+    //       case PersonRole.CASEWORKER:
+    //       case PersonRole.ADMIN: {
+    //         return findCaseworkersOrAdmins;
+    //       }
+    //       default: {
+    //         return of([]);
+    //       }
+    //     }
+    //   }
+    //   return of([]);
+    // }
+    /**
+     * @param {?} selectedTaskName
+     * @return {?}
+     */
+    function (selectedTaskName) {
+        if (selectedTaskName && selectedTaskName.taskName) {
+            /** @type {?} */
+            var taskName = selectedTaskName.taskName;
+            this.taskNameSelected.emit(taskName);
+            this.findTaskNameControl.setValue(taskName);
+        }
+    };
+    // public getDisplayName(selectedPerson: Person): string {
+    //   if (!selectedPerson) {
+    //     return '';
+    //   }
+    //   if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
+    //     return `${selectedPerson.knownAs} (${selectedPerson.email})`;
+    //   }
+    //   return selectedPerson.email ? `${selectedPerson.name} (${selectedPerson.email})` : selectedPerson.name;
+    // }
+    // public getDisplayName(selectedPerson: Person): string {
+    //   if (!selectedPerson) {
+    //     return '';
+    //   }
+    //   if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
+    //     return `${selectedPerson.knownAs} (${selectedPerson.email})`;
+    //   }
+    //   return selectedPerson.email ? `${selectedPerson.name} (${selectedPerson.email})` : selectedPerson.name;
+    // }
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.onInput = 
+    // public getDisplayName(selectedPerson: Person): string {
+    //   if (!selectedPerson) {
+    //     return '';
+    //   }
+    //   if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
+    //     return `${selectedPerson.knownAs} (${selectedPerson.email})`;
+    //   }
+    //   return selectedPerson.email ? `${selectedPerson.name} (${selectedPerson.email})` : selectedPerson.name;
+    // }
+    /**
+     * @return {?}
+     */
+    function () {
+        this.taskNameFieldChanged.emit();
+    };
+    FindTaskNameComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'xuilib-find-task-name',
+                    template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findTaskNameGroup\"\n     [ngClass]=\"{'form-group-error': findTaskNameGroup.get('findTaskNameControl').invalid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findTaskNameGroup && findTaskNameGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findTaskNameGroup.errors.error ? findTaskNameGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectTaskName{{idValue}}\" type=\"text\" aria-label=\"select a task name\"\n           formControlName=\"findTaskNameControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           (input)=\"onInput()\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"onSelectionChange($event.option.value)\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"option\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n                  {{ option.taskName }}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !filteredOptions.length && showAutocomplete\">No results found</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
+                    styles: [""]
+                }] }
+    ];
+    /** @nocollapse */
+    FindTaskNameComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: TaskNameService }
+    ]; };
+    FindTaskNameComponent.propDecorators = {
+        taskNameSelected: [{ type: Output }],
+        taskNameFieldChanged: [{ type: Output }],
+        title: [{ type: Input }],
+        boldTitle: [{ type: Input }],
+        subTitle: [{ type: Input }],
+        domain: [{ type: Input }],
+        findTaskNameGroup: [{ type: Input }],
+        selectedTaskName: [{ type: Input }],
+        submitted: [{ type: Input }],
+        userIncluded: [{ type: Input }],
+        assignedUser: [{ type: Input }],
+        placeholderContent: [{ type: Input }],
+        isNoResultsShown: [{ type: Input }],
+        showUpdatedColor: [{ type: Input }],
+        selectedTaskNames: [{ type: Input }],
+        errorMessage: [{ type: Input }],
+        idValue: [{ type: Input }],
+        services: [{ type: Input }],
+        disabled: [{ type: Input }]
+    };
+    return FindTaskNameComponent;
+}());
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/components/search-judicials/search-judicials.component.ts
@@ -6575,7 +6901,8 @@ var HmctsSubNavigationComponent = /** @class */ (function () {
     HmctsSubNavigationComponent.decorators = [
         { type: Component, args: [{
                     selector: 'xuilib-hmcts-sub-navigation',
-                    template: "<nav class=\"hmcts-sub-navigation\" attr.aria-label=\"{{label}}\" role=\"navigation\" *ngIf=\"items\">\n    <ul class=\"hmcts-sub-navigation__list\">\n        <li class=\"hmcts-sub-navigation__item\" *ngFor=\"let item of items\">\n            <a data-selector=\"sub-nav-link\" class=\"hmcts-sub-navigation__link\" [routerLink]=\"item.href\"\n               [attr.aria-current]=\"item.active ? 'page' : null\">\n                {{item.text}}\n            </a>\n        </li>\n    </ul>\n</nav>\n"
+                    template: "<nav class=\"hmcts-sub-navigation\" attr.aria-label=\"{{label}}\" role=\"navigation\" *ngIf=\"items\">\n    <ul class=\"hmcts-sub-navigation__list\">\n        <li class=\"hmcts-sub-navigation__item\" *ngFor=\"let item of items\">\n            <a data-selector=\"sub-nav-link\" class=\"hmcts-sub-navigation__link\" [routerLink]=\"item.href\"\n               [attr.aria-current]=\"item.active ? 'page' : null\">\n                {{item.text}}\n\n                <span *ngIf=\"item.roundel && item.roundel > 0 \" class=\"xui-alert-link__number\"> {{item.roundel}} </span>\n            </a>\n        </li>\n    </ul>\n</nav>\n",
+                    styles: [".xui-alert-link__number{font-family:nta,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:.875rem;line-height:1.78571;border-radius:50%;background-color:#1d70b8;color:#fff;font-weight:700;width:25px;height:25px;margin-left:5px;text-align:center;display:inline-block;text-decoration:none}"]
                 }] }
     ];
     HmctsSubNavigationComponent.propDecorators = {
@@ -6666,6 +6993,7 @@ var COMMON_COMPONENTS = [
     FindPersonComponent,
     SearchJudicialsComponent,
     FindLocationComponent,
+    FindTaskNameComponent,
     SearchLocationComponent,
     SearchVenueComponent,
     PaginationComponent
@@ -7738,6 +8066,6 @@ var LoadingService = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { AccessibilityComponent, CheckboxListComponent, ContactDetailsComponent, DueDateComponent, GenericFilterComponent, HmctsSessionDialogComponent, InviteUserFormComponent, InviteUserPermissionComponent, LoadingSpinnerComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, SelectedCaseComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseConfirmComponent, ShareCaseComponent, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, UserDetailsComponent, UserListComponent, CookieBannerComponent, FindLocationComponent, SearchLocationComponent, PaginationComponent, FeatureToggleDirective, LetContext, LetDirective, COMMON_COMPONENTS, GOV_UI_COMPONENTS, ExuiCommonLibModule, GovUiService, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, HmctsSubNavigationComponent, BadgeColour, DateBadgeColour, SECONDS_IN_A_DAY, AnonymousFeatureUser, LoggedInFeatureUser, PersonRole, RoleCategory, RadioFilterFieldConfig, FeatureToggleGuard, FeatureToggleService, LaunchDarklyService, GoogleAnalyticsService, GoogleTagManagerService, ManageSessionServices, TimeoutNotificationsService, RoleMatching, RoleGuard, RoleService, CookieService, HasLoadingState, LoadingService, FilterService, windowProvider, windowToken, AccessibilityComponent as ɵx, CheckboxListComponent as ɵz, ContactDetailsComponent as ɵf, CookieBannerComponent as ɵbf, DueDateComponent as ɵy, ExuiPageWrapperComponent as ɵa, FindLocationComponent as ɵbl, FindPersonComponent as ɵbh, GenericFilterComponent as ɵbd, HmctsSessionDialogComponent as ɵk, InviteUserFormComponent as ɵo, InviteUserPermissionComponent as ɵn, LoadingSpinnerComponent as ɵbc, PaginationComponent as ɵbp, SearchJudicialsComponent as ɵbk, SearchLocationComponent as ɵbm, SearchVenueComponent as ɵbo, SelectedCaseConfirmComponent as ɵv, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, ShareCaseConfirmComponent as ɵs, ShareCaseComponent as ɵp, TabComponent as ɵw, TcConfirmComponent as ɵe, TcDisplayHtmlComponent as ɵc, TcDisplayPlainComponent as ɵd, TermsAndConditionsComponent as ɵb, UserDetailsComponent as ɵm, UserListComponent as ɵl, UserSelectComponent as ɵq, FeatureToggleDirective as ɵg, LetContext as ɵi, LetDirective as ɵj, GovUkCheckboxComponent as ɵbz, GovUkCheckboxesComponent as ɵcf, GovUkDateComponent as ɵce, GovUkErrorMessageComponent as ɵcc, GovUkFieldsetComponent as ɵcd, GovUkFileUploadComponent as ɵck, GovUkFormGroupWrapperComponent as ɵca, GovUkInputComponent as ɵby, GovUkLabelComponent as ɵcb, GovUkRadioComponent as ɵcg, GovUkRadiosComponent as ɵch, GovUkSelectComponent as ɵci, GovukTableComponent as ɵbx, GovUkTextareaComponent as ɵcj, HmctsBannerComponent as ɵbw, HmctsErrorSummaryComponent as ɵbu, HmctsIdentityBarComponent as ɵbq, HmctsMainWrapperComponent as ɵbv, HmctsPaginationComponent as ɵbr, HmctsPrimaryNavigationComponent as ɵbt, HmctsSubNavigationComponent as ɵbs, RemoveHostDirective as ɵcl, CaseSharingStateService as ɵr, CookieService as ɵbg, FeatureToggleService as ɵh, FilterService as ɵbe, FindAPersonService as ɵbi, LocationService as ɵbn, SessionStorageService as ɵbj };
+export { AccessibilityComponent, CheckboxListComponent, ContactDetailsComponent, DueDateComponent, GenericFilterComponent, HmctsSessionDialogComponent, InviteUserFormComponent, InviteUserPermissionComponent, LoadingSpinnerComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, SelectedCaseComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseConfirmComponent, ShareCaseComponent, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, UserDetailsComponent, UserListComponent, CookieBannerComponent, FindLocationComponent, SearchLocationComponent, PaginationComponent, FeatureToggleDirective, LetContext, LetDirective, COMMON_COMPONENTS, GOV_UI_COMPONENTS, ExuiCommonLibModule, GovUiService, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, HmctsSubNavigationComponent, BadgeColour, DateBadgeColour, SECONDS_IN_A_DAY, AnonymousFeatureUser, LoggedInFeatureUser, PersonRole, RoleCategory, RadioFilterFieldConfig, FeatureToggleGuard, FeatureToggleService, LaunchDarklyService, GoogleAnalyticsService, GoogleTagManagerService, ManageSessionServices, TimeoutNotificationsService, RoleMatching, RoleGuard, RoleService, CookieService, HasLoadingState, LoadingService, FilterService, windowProvider, windowToken, AccessibilityComponent as ɵx, CheckboxListComponent as ɵz, ContactDetailsComponent as ɵf, CookieBannerComponent as ɵbf, DueDateComponent as ɵy, ExuiPageWrapperComponent as ɵa, FindLocationComponent as ɵbl, FindPersonComponent as ɵbh, FindTaskNameComponent as ɵbo, GenericFilterComponent as ɵbd, HmctsSessionDialogComponent as ɵk, InviteUserFormComponent as ɵo, InviteUserPermissionComponent as ɵn, LoadingSpinnerComponent as ɵbc, PaginationComponent as ɵbr, SearchJudicialsComponent as ɵbk, SearchLocationComponent as ɵbm, SearchVenueComponent as ɵbq, SelectedCaseConfirmComponent as ɵv, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, ShareCaseConfirmComponent as ɵs, ShareCaseComponent as ɵp, TabComponent as ɵw, TcConfirmComponent as ɵe, TcDisplayHtmlComponent as ɵc, TcDisplayPlainComponent as ɵd, TermsAndConditionsComponent as ɵb, UserDetailsComponent as ɵm, UserListComponent as ɵl, UserSelectComponent as ɵq, FeatureToggleDirective as ɵg, LetContext as ɵi, LetDirective as ɵj, GovUkCheckboxComponent as ɵcb, GovUkCheckboxesComponent as ɵch, GovUkDateComponent as ɵcg, GovUkErrorMessageComponent as ɵce, GovUkFieldsetComponent as ɵcf, GovUkFileUploadComponent as ɵcm, GovUkFormGroupWrapperComponent as ɵcc, GovUkInputComponent as ɵca, GovUkLabelComponent as ɵcd, GovUkRadioComponent as ɵci, GovUkRadiosComponent as ɵcj, GovUkSelectComponent as ɵck, GovukTableComponent as ɵbz, GovUkTextareaComponent as ɵcl, HmctsBannerComponent as ɵby, HmctsErrorSummaryComponent as ɵbw, HmctsIdentityBarComponent as ɵbs, HmctsMainWrapperComponent as ɵbx, HmctsPaginationComponent as ɵbt, HmctsPrimaryNavigationComponent as ɵbv, HmctsSubNavigationComponent as ɵbu, RemoveHostDirective as ɵcn, CaseSharingStateService as ɵr, CookieService as ɵbg, FeatureToggleService as ɵh, FilterService as ɵbe, FindAPersonService as ɵbi, LocationService as ɵbn, SessionStorageService as ɵbj, TaskNameService as ɵbp };
 
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map