@hmcts/rpx-xui-common-lib 1.7.12 → 1.7.13-task-name-filter

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

@@ -10,7 +10,7 @@ import { Title } from '@angular/platform-browser';
 import { DocumentInterruptSource, Idle } from '@ng-idle/core';
 import { Keepalive } from '@ng-idle/keepalive';
 import { RouterModule, Router, NavigationEnd } from '@angular/router';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, defineInjectable, inject, NgModule, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ChangeDetectorRef, ViewChild, InjectionToken, defineInjectable, inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { BehaviorSubject, of, zip, Subject, combineLatest } from 'rxjs';
 import { distinctUntilChanged, map, debounceTime, filter, mergeMap, tap, catchError, switchMap, delay } from 'rxjs/operators';
 
@@ -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.taskName\"\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}"]
@@ -5113,107 +5138,221 @@ var FindPersonComponent = /** @class */ (function () {
 
 /**
  * @fileoverview added by tsickle
- * Generated from: lib/components/pagination-v1/pagination.component.ts
+ * 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, sessionStorageService) {
+        this.http = http;
+        this.sessionStorageService = sessionStorageService;
+    }
+    /**
+     * @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 () {
+        var _this = this;
+        if (this.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
+            /** @type {?} */
+            var taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
+            return of((/** @type {?} */ (taskNames)));
+        }
+        return this.http.get("/workallocation2/taskNames").pipe(tap((/**
+         * @param {?} taskNames
+         * @return {?}
+         */
+        function (taskNames) { return _this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)); })));
+    };
+    TaskNameService.taskNamesKey = 'taskNames';
+    TaskNameService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    TaskNameService.ctorParameters = function () { return [
+        { type: HttpClient },
+        { type: SessionStorageService }
+    ]; };
+    /** @nocollapse */ TaskNameService.ngInjectableDef = defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(inject(HttpClient), inject(SessionStorageService)); }, token: TaskNameService, providedIn: "root" });
+    return TaskNameService;
+}());
+
 /**
- * @param {?} input
- * @return {?}
+ * @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
  */
-function coerceToBoolean(input) {
-    return !!input && input !== 'false';
-}
-var PaginationV1Component = /** @class */ (function () {
-    function PaginationV1Component() {
-        this.maxSize = 7;
-        this.previousLabel = 'Previous';
-        this.nextLabel = 'Next';
-        this.screenReaderPaginationLabel = 'Pagination';
-        this.screenReaderPageLabel = 'page';
-        this.screenReaderCurrentLabel = "You're on page";
-        this.pageChange = new EventEmitter();
-        this.pageBoundsCorrection = new EventEmitter();
-        // tslint:disable-next-line:variable-name
-        this._directionLinks = true;
-        // tslint:disable-next-line:variable-name
-        this._autoHide = false;
-        // tslint:disable-next-line:variable-name
-        this._responsive = false;
+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 = '';
     }
-    Object.defineProperty(PaginationV1Component.prototype, "directionLinks", {
-        get: /**
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+    };
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.ngOnChanges = /**
+     * @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._directionLinks;
-        },
-        set: /**
-         * @param {?} value
+        function () { return _this.showAutocomplete = false; })), tap((/**
          * @return {?}
          */
-        function (value) {
-            this._directionLinks = coerceToBoolean(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PaginationV1Component.prototype, "autoHide", {
-        get: /**
+        function () { return _this.filteredOptions = []; })), tap((/**
+         * @param {?} term
          * @return {?}
          */
-        function () {
-            return this._autoHide;
-        },
-        set: /**
-         * @param {?} value
+        function (term) { return _this.searchTerm = term; })), debounceTime(300), tap((/**
+         * @param {?} searchTerm
          * @return {?}
          */
-        function (value) {
-            this._autoHide = coerceToBoolean(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PaginationV1Component.prototype, "responsive", {
-        get: /**
+        function (searchTerm) {
+            if (!searchTerm) {
+                _this.taskNameSelected.emit('');
+            }
+            return searchTerm;
+        })), 
+        // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit('null') : void 0),
+        filter((/**
+         * @param {?} searchTerm
          * @return {?}
          */
-        function () {
-            return this._responsive;
-        },
-        set: /**
-         * @param {?} value
+        function (searchTerm) { return searchTerm && searchTerm.length >= _this.minSearchCharacters; })), mergeMap((/**
          * @return {?}
          */
-        function (value) {
-            this._responsive = coerceToBoolean(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    PaginationV1Component.decorators = [
+        function () { return _this.getTaskName(); }))).subscribe((/**
+         * @param {?} taskNameModel
+         * @return {?}
+         */
+        function (taskNameModel) {
+            _this.filteredOptions = taskNameModel.map((/**
+             * @param {?} task
+             * @return {?}
+             */
+            function (task) { return task.taskName; }));
+            if (_this.searchTerm) {
+                _this.filteredOptions = _this.filteredOptions.filter((/**
+                 * @param {?} taskName
+                 * @return {?}
+                 */
+                function (taskName) { return taskName.toLocaleLowerCase().includes(_this.searchTerm.toLocaleLowerCase()); })).map((/**
+                 * @param {?} taskName
+                 * @return {?}
+                 */
+                function (taskName) { return taskName; }));
+            }
+            _this.cd.detectChanges();
+        }));
+    };
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.getTaskName = /**
+     * @return {?}
+     */
+    function () {
+        return this.taskService.getTaskName();
+    };
+    /**
+     * @param {?} selectedTaskName
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.onSelectionChange = /**
+     * @param {?} selectedTaskName
+     * @return {?}
+     */
+    function (selectedTaskName) {
+        if (selectedTaskName) {
+            this.taskNameSelected.emit(selectedTaskName);
+            this.findTaskNameControl.setValue(selectedTaskName);
+        }
+    };
+    /**
+     * @return {?}
+     */
+    FindTaskNameComponent.prototype.onInput = /**
+     * @return {?}
+     */
+    function () {
+        this.taskNameFieldChanged.emit();
+    };
+    FindTaskNameComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'xuilib-pagination-v1',
-                    template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"maxSize\" (pageChange)=\"pageChange.emit($event)\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\">\n  <nav role=\"navigation\" aria-label=\"Pagination\">\n    <ul class=\"ngx-pagination\" role=\"navigation\" [attr.aria-label]=\"screenReaderPaginationLabel\"\n      [class.responsive]=\"responsive\" *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n      <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"1 < p.getCurrent()\" (keyup.enter)=\"p.previous()\" (click)=\"p.previous()\"\n          [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n          {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </a>\n        <span *ngIf=\"p.isFirstPage()\">\n          {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </span>\n      </li>\n      <li class=\"small-screen\">\n        {{ p.getCurrent() }} / {{ p.getLastPage() }}\n      </li>\n      <li [class.current]=\"p.getCurrent() === page.value\" [class.ellipsis]=\"page.label === '...'\"\n        *ngFor=\"let page of p.pages\">\n        <a tabindex=\"0\" (keyup.enter)=\"p.setCurrent(page.value)\" (click)=\"p.setCurrent(page.value)\"\n          *ngIf=\"p.getCurrent() !== page.value\">\n          <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </a>\n        <ng-container *ngIf=\"p.getCurrent() === page.value\">\n          <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </ng-container>\n      </li>\n      <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"!p.isLastPage()\" (keyup.enter)=\"p.next()\" (click)=\"p.next()\"\n          [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n          {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </a>\n        <span *ngIf=\"p.isLastPage()\">\n          {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n        </span>\n      </li>\n    </ul>\n  </nav>\n</pagination-template>\n",
-                    styles: [".ngx-pagination{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination::after,.ngx-pagination::before{content:\" \";display:table}.ngx-pagination::after{clear:both}.ngx-pagination li{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0;display:inline-block}.ngx-pagination a,.ngx-pagination button{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6;cursor:pointer}.ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6}.ngx-pagination .current{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination .disabled{display:none}.ngx-pagination .disabled:hover{background:0 0}.ngx-pagination .pagination-previous a::before,.ngx-pagination .pagination-previous.disabled::before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:0 0;transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination .pagination-next a::after,.ngx-pagination .pagination-next.disabled::after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:0 0;transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination .show-for-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination .small-screen{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive .small-screen{display:inline-block}.ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"]
+                    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 }}\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: [""]
                 }] }
     ];
-    PaginationV1Component.propDecorators = {
-        visibilityLabel: [{ type: Input }],
-        id: [{ type: Input }],
-        maxSize: [{ type: Input }],
-        directionLinks: [{ type: Input }],
-        autoHide: [{ type: Input }],
-        responsive: [{ type: Input }],
-        previousLabel: [{ type: Input }],
-        nextLabel: [{ type: Input }],
-        screenReaderPaginationLabel: [{ type: Input }],
-        screenReaderPageLabel: [{ type: Input }],
-        screenReaderCurrentLabel: [{ type: Input }],
-        pageChange: [{ type: Output }],
-        pageBoundsCorrection: [{ type: Output }]
+    /** @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 PaginationV1Component;
+    return FindTaskNameComponent;
 }());
 
 /**
@@ -6680,7 +6819,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 = {
@@ -6771,10 +6911,10 @@ var COMMON_COMPONENTS = [
     FindPersonComponent,
     SearchJudicialsComponent,
     FindLocationComponent,
+    FindTaskNameComponent,
     SearchLocationComponent,
     SearchVenueComponent,
-    PaginationComponent,
-    PaginationV1Component
+    PaginationComponent
 ];
 /** @type {?} */
 var GOV_UI_COMPONENTS = [
@@ -7844,6 +7984,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, PaginationV1Component as ɵbq, 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 ɵca, GovUkCheckboxesComponent as ɵcg, GovUkDateComponent as ɵcf, GovUkErrorMessageComponent as ɵcd, GovUkFieldsetComponent as ɵce, GovUkFileUploadComponent as ɵcl, GovUkFormGroupWrapperComponent as ɵcb, GovUkInputComponent as ɵbz, GovUkLabelComponent as ɵcc, GovUkRadioComponent as ɵch, GovUkRadiosComponent as ɵci, GovUkSelectComponent as ɵcj, GovukTableComponent as ɵby, GovUkTextareaComponent as ɵck, HmctsBannerComponent as ɵbx, HmctsErrorSummaryComponent as ɵbv, HmctsIdentityBarComponent as ɵbr, HmctsMainWrapperComponent as ɵbw, HmctsPaginationComponent as ɵbs, HmctsPrimaryNavigationComponent as ɵbu, HmctsSubNavigationComponent as ɵbt, RemoveHostDirective as ɵcm, 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