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

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

@@ -1186,6 +1186,31 @@
                     }
                 }
             };
+        /**
+         * @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
@@ -1645,7 +1670,7 @@
         GenericFilterComponent.decorators = [
             { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.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}"]
@@ -5131,6 +5156,304 @@
         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: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        TaskNameService.ctorParameters = function () {
+            return [
+                { type: i1.HttpClient }
+            ];
+        };
+        /** @nocollapse */ TaskNameService.ngInjectableDef = i0.defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(i0.inject(i1.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 i0.EventEmitter();
+            this.taskNameFieldChanged = new i0.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 forms.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 forms.FormControl(this.selectedTaskName);
+                this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
+                this.sub = this.findTaskNameControl.valueChanges
+                    .pipe(operators.tap(( /**
+             * @return {?}
+             */function () { return _this.showAutocomplete = false; })), operators.tap(( /**
+                 * @return {?}
+                 */function () { return _this.filteredOptions = []; })), operators.tap(( /**
+                 * @param {?} term
+                 * @return {?}
+                 */function (term) { return _this.searchTerm = term; })), operators.debounceTime(300), 
+                // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit(null) : void 0),
+                operators.filter(( /**
+                 * @param {?} searchTerm
+                 * @return {?}
+                 */function (searchTerm) { return searchTerm && searchTerm.length >= _this.minSearchCharacters; })), operators.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: i0.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: i0.ChangeDetectorRef },
+                { type: TaskNameService }
+            ];
+        };
+        FindTaskNameComponent.propDecorators = {
+            taskNameSelected: [{ type: i0.Output }],
+            taskNameFieldChanged: [{ type: i0.Output }],
+            title: [{ type: i0.Input }],
+            boldTitle: [{ type: i0.Input }],
+            subTitle: [{ type: i0.Input }],
+            domain: [{ type: i0.Input }],
+            findTaskNameGroup: [{ type: i0.Input }],
+            selectedTaskName: [{ type: i0.Input }],
+            submitted: [{ type: i0.Input }],
+            userIncluded: [{ type: i0.Input }],
+            assignedUser: [{ type: i0.Input }],
+            placeholderContent: [{ type: i0.Input }],
+            isNoResultsShown: [{ type: i0.Input }],
+            showUpdatedColor: [{ type: i0.Input }],
+            selectedTaskNames: [{ type: i0.Input }],
+            errorMessage: [{ type: i0.Input }],
+            idValue: [{ type: i0.Input }],
+            services: [{ type: i0.Input }],
+            disabled: [{ type: i0.Input }]
+        };
+        return FindTaskNameComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/search-judicials/search-judicials.component.ts
@@ -6587,7 +6910,8 @@
         HmctsSubNavigationComponent.decorators = [
             { type: i0.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 = {
@@ -6680,6 +7004,7 @@
         FindPersonComponent,
         SearchJudicialsComponent,
         FindLocationComponent,
+        FindTaskNameComponent,
         SearchLocationComponent,
         SearchVenueComponent,
         PaginationComponent
@@ -7805,15 +8130,16 @@
     exports.ɵa = ExuiPageWrapperComponent;
     exports.ɵbl = FindLocationComponent;
     exports.ɵbh = FindPersonComponent;
+    exports.ɵbo = FindTaskNameComponent;
     exports.ɵbd = GenericFilterComponent;
     exports.ɵk = HmctsSessionDialogComponent;
     exports.ɵo = InviteUserFormComponent;
     exports.ɵn = InviteUserPermissionComponent;
     exports.ɵbc = LoadingSpinnerComponent;
-    exports.ɵbp = PaginationComponent;
+    exports.ɵbr = PaginationComponent;
     exports.ɵbk = SearchJudicialsComponent;
     exports.ɵbm = SearchLocationComponent;
-    exports.ɵbo = SearchVenueComponent;
+    exports.ɵbq = SearchVenueComponent;
     exports.ɵv = SelectedCaseConfirmComponent;
     exports.ɵt = SelectedCaseListComponent;
     exports.ɵu = SelectedCaseComponent;
@@ -7832,28 +8158,28 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    exports.ɵbz = GovUkCheckboxComponent;
-    exports.ɵcf = GovUkCheckboxesComponent;
-    exports.ɵce = GovUkDateComponent;
-    exports.ɵcc = GovUkErrorMessageComponent;
-    exports.ɵcd = GovUkFieldsetComponent;
-    exports.ɵck = GovUkFileUploadComponent;
-    exports.ɵca = GovUkFormGroupWrapperComponent;
-    exports.ɵby = GovUkInputComponent;
-    exports.ɵcb = GovUkLabelComponent;
-    exports.ɵcg = GovUkRadioComponent;
-    exports.ɵch = GovUkRadiosComponent;
-    exports.ɵci = GovUkSelectComponent;
-    exports.ɵbx = GovukTableComponent;
-    exports.ɵcj = GovUkTextareaComponent;
-    exports.ɵbw = HmctsBannerComponent;
-    exports.ɵbu = HmctsErrorSummaryComponent;
-    exports.ɵbq = HmctsIdentityBarComponent;
-    exports.ɵbv = HmctsMainWrapperComponent;
-    exports.ɵbr = HmctsPaginationComponent;
-    exports.ɵbt = HmctsPrimaryNavigationComponent;
-    exports.ɵbs = HmctsSubNavigationComponent;
-    exports.ɵcl = RemoveHostDirective;
+    exports.ɵcb = GovUkCheckboxComponent;
+    exports.ɵch = GovUkCheckboxesComponent;
+    exports.ɵcg = GovUkDateComponent;
+    exports.ɵce = GovUkErrorMessageComponent;
+    exports.ɵcf = GovUkFieldsetComponent;
+    exports.ɵcm = GovUkFileUploadComponent;
+    exports.ɵcc = GovUkFormGroupWrapperComponent;
+    exports.ɵca = GovUkInputComponent;
+    exports.ɵcd = GovUkLabelComponent;
+    exports.ɵci = GovUkRadioComponent;
+    exports.ɵcj = GovUkRadiosComponent;
+    exports.ɵck = GovUkSelectComponent;
+    exports.ɵbz = GovukTableComponent;
+    exports.ɵcl = GovUkTextareaComponent;
+    exports.ɵby = HmctsBannerComponent;
+    exports.ɵbw = HmctsErrorSummaryComponent;
+    exports.ɵbs = HmctsIdentityBarComponent;
+    exports.ɵbx = HmctsMainWrapperComponent;
+    exports.ɵbt = HmctsPaginationComponent;
+    exports.ɵbv = HmctsPrimaryNavigationComponent;
+    exports.ɵbu = HmctsSubNavigationComponent;
+    exports.ɵcn = RemoveHostDirective;
     exports.ɵr = CaseSharingStateService;
     exports.ɵbg = CookieService;
     exports.ɵh = FeatureToggleService;
@@ -7861,6 +8187,7 @@
     exports.ɵbi = FindAPersonService;
     exports.ɵbn = LocationService;
     exports.ɵbj = SessionStorageService;
+    exports.ɵbp = TaskNameService;
 
     Object.defineProperty(exports, '__esModule', { value: true });