@hmcts/rpx-xui-common-lib 1.7.12 → 1.7.13-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.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: 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}"]
@@ -5133,101 +5158,214 @@
 
     /**
      * @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 rxjs.of(( /** @type {?} */(taskNames)));
+                }
+                return this.http.get("/workallocation2/taskNames").pipe(operators.tap(( /**
+                 * @param {?} taskNames
+                 * @return {?}
+                 */function (taskNames) { return _this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)); })));
+            };
+        TaskNameService.taskNamesKey = 'taskNames';
+        TaskNameService.decorators = [
+            { type: i0.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        TaskNameService.ctorParameters = function () {
+            return [
+                { type: i1.HttpClient },
+                { type: SessionStorageService }
+            ];
+        };
+        /** @nocollapse */ TaskNameService.ngInjectableDef = i0.defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(i0.inject(i1.HttpClient), i0.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 i0.EventEmitter();
-            this.pageBoundsCorrection = new i0.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 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 = '';
         }
-        Object.defineProperty(PaginationV1Component.prototype, "directionLinks", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this._directionLinks;
-            },
-            set: /**
-             * @param {?} value
-             * @return {?}
-             */ function (value) {
-                this._directionLinks = coerceToBoolean(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(PaginationV1Component.prototype, "autoHide", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this._autoHide;
-            },
-            set: /**
-             * @param {?} value
-             * @return {?}
-             */ function (value) {
-                this._autoHide = coerceToBoolean(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(PaginationV1Component.prototype, "responsive", {
-            get: /**
-             * @return {?}
-             */ function () {
-                return this._responsive;
-            },
-            set: /**
-             * @param {?} value
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+            function () {
+                if (this.sub) {
+                    this.sub.unsubscribe();
+                }
+            };
+        /**
+         * @return {?}
+         */
+        FindTaskNameComponent.prototype.ngOnChanges = /**
+         * @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 (value) {
-                this._responsive = coerceToBoolean(value);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        PaginationV1Component.decorators = [
+             */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), operators.tap(( /**
+                 * @param {?} searchTerm
+                 * @return {?}
+                 */function (searchTerm) {
+                    if (!searchTerm) {
+                        _this.taskNameSelected.emit('');
+                    }
+                    return searchTerm;
+                })), 
+                // 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 {?} 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: i0.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: i0.Input }],
-            id: [{ type: i0.Input }],
-            maxSize: [{ type: i0.Input }],
-            directionLinks: [{ type: i0.Input }],
-            autoHide: [{ type: i0.Input }],
-            responsive: [{ type: i0.Input }],
-            previousLabel: [{ type: i0.Input }],
-            nextLabel: [{ type: i0.Input }],
-            screenReaderPaginationLabel: [{ type: i0.Input }],
-            screenReaderPageLabel: [{ type: i0.Input }],
-            screenReaderCurrentLabel: [{ type: i0.Input }],
-            pageChange: [{ type: i0.Output }],
-            pageBoundsCorrection: [{ type: i0.Output }]
+        /** @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 PaginationV1Component;
+        return FindTaskNameComponent;
     }());
 
     /**
@@ -6686,7 +6824,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 = {
@@ -6779,10 +6918,10 @@
         FindPersonComponent,
         SearchJudicialsComponent,
         FindLocationComponent,
+        FindTaskNameComponent,
         SearchLocationComponent,
         SearchVenueComponent,
-        PaginationComponent,
-        PaginationV1Component
+        PaginationComponent
     ];
     /** @type {?} */
     var GOV_UI_COMPONENTS = [
@@ -7905,16 +8044,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.ɵbq = PaginationV1Component;
-    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;
@@ -7933,28 +8072,28 @@
     exports.ɵg = FeatureToggleDirective;
     exports.ɵi = LetContext;
     exports.ɵj = LetDirective;
-    exports.ɵca = GovUkCheckboxComponent;
-    exports.ɵcg = GovUkCheckboxesComponent;
-    exports.ɵcf = GovUkDateComponent;
-    exports.ɵcd = GovUkErrorMessageComponent;
-    exports.ɵce = GovUkFieldsetComponent;
-    exports.ɵcl = GovUkFileUploadComponent;
-    exports.ɵcb = GovUkFormGroupWrapperComponent;
-    exports.ɵbz = GovUkInputComponent;
-    exports.ɵcc = GovUkLabelComponent;
-    exports.ɵch = GovUkRadioComponent;
-    exports.ɵci = GovUkRadiosComponent;
-    exports.ɵcj = GovUkSelectComponent;
-    exports.ɵby = GovukTableComponent;
-    exports.ɵck = GovUkTextareaComponent;
-    exports.ɵbx = HmctsBannerComponent;
-    exports.ɵbv = HmctsErrorSummaryComponent;
-    exports.ɵbr = HmctsIdentityBarComponent;
-    exports.ɵbw = HmctsMainWrapperComponent;
-    exports.ɵbs = HmctsPaginationComponent;
-    exports.ɵbu = HmctsPrimaryNavigationComponent;
-    exports.ɵbt = HmctsSubNavigationComponent;
-    exports.ɵcm = 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;
@@ -7962,6 +8101,7 @@
     exports.ɵbi = FindAPersonService;
     exports.ɵbn = LocationService;
     exports.ɵbj = SessionStorageService;
+    exports.ɵbp = TaskNameService;
 
     Object.defineProperty(exports, '__esModule', { value: true });