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

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

@@ -869,6 +869,26 @@ class GenericFilterComponent {
             }
         }
     }
+    /**
+     * @param {?} values
+     * @param {?} field
+     * @return {?}
+     */
+    updateTaskNameControls(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
@@ -1199,7 +1219,7 @@ class GenericFilterComponent {
 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}"]
@@ -4060,94 +4080,203 @@ FindPersonComponent.propDecorators = {
 
 /**
  * @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
  */
+class TaskNameService {
+    /**
+     * @param {?} http
+     * @param {?} sessionStorageService
+     */
+    constructor(http, sessionStorageService) {
+        this.http = http;
+        this.sessionStorageService = sessionStorageService;
+    }
+    /**
+     * @return {?} Observable<any[]>: Array of taskName in Observable
+     */
+    getTaskName() {
+        if (this.sessionStorageService.getItem(TaskNameService.taskNamesKey)) {
+            /** @type {?} */
+            const taskNames = JSON.parse(this.sessionStorageService.getItem(TaskNameService.taskNamesKey));
+            return of((/** @type {?} */ (taskNames)));
+        }
+        return this.http.get(`/workallocation2/taskNames`).pipe(tap((/**
+         * @param {?} taskNames
+         * @return {?}
+         */
+        taskNames => this.sessionStorageService.setItem(TaskNameService.taskNamesKey, JSON.stringify(taskNames)))));
+    }
+}
+TaskNameService.taskNamesKey = 'taskNames';
+TaskNameService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+TaskNameService.ctorParameters = () => [
+    { type: HttpClient },
+    { type: SessionStorageService }
+];
+/** @nocollapse */ TaskNameService.ngInjectableDef = defineInjectable({ factory: function TaskNameService_Factory() { return new TaskNameService(inject(HttpClient), inject(SessionStorageService)); }, token: TaskNameService, providedIn: "root" });
+
 /**
- * @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';
-}
-class PaginationV1Component {
-    constructor() {
-        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;
-    }
+class FindTaskNameComponent {
     /**
-     * @return {?}
+     * @param {?} cd
+     * @param {?} taskService
      */
-    get directionLinks() {
-        return this._directionLinks;
+    constructor(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 = '';
     }
     /**
-     * @param {?} value
      * @return {?}
      */
-    set directionLinks(value) {
-        this._directionLinks = coerceToBoolean(value);
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
     }
     /**
      * @return {?}
      */
-    get autoHide() {
-        return this._autoHide;
+    ngOnChanges() {
+        this.findTaskNameControl = new FormControl(this.selectedTaskName);
+        this.findTaskNameGroup.addControl('findTaskNameControl', this.findTaskNameControl);
+        this.sub = this.findTaskNameControl.valueChanges
+            .pipe(tap((/**
+         * @return {?}
+         */
+        () => this.showAutocomplete = false)), tap((/**
+         * @return {?}
+         */
+        () => this.filteredOptions = [])), tap((/**
+         * @param {?} term
+         * @return {?}
+         */
+        (term) => this.searchTerm = term)), debounceTime(300), tap((/**
+         * @param {?} searchTerm
+         * @return {?}
+         */
+        (searchTerm) => {
+            if (!searchTerm) {
+                this.taskNameSelected.emit('');
+            }
+            return searchTerm;
+        })), 
+        // tap((searchTerm) => typeof searchTerm === 'string' ? this.taskNameSelected.emit('null') : void 0),
+        filter((/**
+         * @param {?} searchTerm
+         * @return {?}
+         */
+        (searchTerm) => searchTerm && searchTerm.length >= this.minSearchCharacters)), mergeMap((/**
+         * @return {?}
+         */
+        () => this.getTaskName()))).subscribe((/**
+         * @param {?} taskNameModel
+         * @return {?}
+         */
+        (taskNameModel) => {
+            this.filteredOptions = taskNameModel.map((/**
+             * @param {?} task
+             * @return {?}
+             */
+            task => task.taskName));
+            if (this.searchTerm) {
+                this.filteredOptions = this.filteredOptions.filter((/**
+                 * @param {?} taskName
+                 * @return {?}
+                 */
+                (taskName) => taskName.toLocaleLowerCase().includes(this.searchTerm.toLocaleLowerCase()))).map((/**
+                 * @param {?} taskName
+                 * @return {?}
+                 */
+                taskName => taskName));
+            }
+            this.cd.detectChanges();
+        }));
     }
     /**
-     * @param {?} value
      * @return {?}
      */
-    set autoHide(value) {
-        this._autoHide = coerceToBoolean(value);
+    getTaskName() {
+        return this.taskService.getTaskName();
     }
     /**
+     * @param {?} selectedTaskName
      * @return {?}
      */
-    get responsive() {
-        return this._responsive;
+    onSelectionChange(selectedTaskName) {
+        if (selectedTaskName) {
+            this.taskNameSelected.emit(selectedTaskName);
+            this.findTaskNameControl.setValue(selectedTaskName);
+        }
     }
     /**
-     * @param {?} value
      * @return {?}
      */
-    set responsive(value) {
-        this._responsive = coerceToBoolean(value);
+    onInput() {
+        this.taskNameFieldChanged.emit();
     }
 }
-PaginationV1Component.decorators = [
+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 = () => [
+    { 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 }]
 };
 
 /**
@@ -5377,7 +5506,8 @@ class HmctsSubNavigationComponent {
 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 = {
@@ -5465,10 +5595,10 @@ const COMMON_COMPONENTS = [
     FindPersonComponent,
     SearchJudicialsComponent,
     FindLocationComponent,
+    FindTaskNameComponent,
     SearchLocationComponent,
     SearchVenueComponent,
-    PaginationComponent,
-    PaginationV1Component
+    PaginationComponent
 ];
 /** @type {?} */
 const GOV_UI_COMPONENTS = [
@@ -6397,6 +6527,6 @@ LoadingService.decorators = [
  * @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