@hmcts/rpx-xui-common-lib 1.7.21 → 1.7.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/bundles/hmcts-rpx-xui-common-lib.umd.js +44 -30
  2. package/bundles/hmcts-rpx-xui-common-lib.umd.js.map +1 -1
  3. package/bundles/hmcts-rpx-xui-common-lib.umd.min.js +1 -1
  4. package/bundles/hmcts-rpx-xui-common-lib.umd.min.js.map +1 -1
  5. package/esm2015/lib/components/find-location/find-location.component.js +3 -3
  6. package/esm2015/lib/components/find-service/find-service.component.js +21 -5
  7. package/esm2015/lib/components/generic-filter/generic-filter.component.js +1 -1
  8. package/esm2015/lib/components/search-location/search-location.component.js +1 -1
  9. package/esm2015/lib/components/search-service/search-service.component.js +3 -3
  10. package/esm2015/lib/services/role-guard/role.guard.js +22 -15
  11. package/esm2015/lib/services/role-guard/role.service.js +13 -13
  12. package/esm5/lib/components/find-location/find-location.component.js +3 -3
  13. package/esm5/lib/components/find-service/find-service.component.js +18 -5
  14. package/esm5/lib/components/generic-filter/generic-filter.component.js +1 -1
  15. package/esm5/lib/components/search-location/search-location.component.js +1 -1
  16. package/esm5/lib/components/search-service/search-service.component.js +3 -3
  17. package/esm5/lib/services/role-guard/role.guard.js +22 -15
  18. package/esm5/lib/services/role-guard/role.service.js +13 -13
  19. package/fesm2015/hmcts-rpx-xui-common-lib.js +48 -32
  20. package/fesm2015/hmcts-rpx-xui-common-lib.js.map +1 -1
  21. package/fesm5/hmcts-rpx-xui-common-lib.js +46 -33
  22. package/fesm5/hmcts-rpx-xui-common-lib.js.map +1 -1
  23. package/hmcts-rpx-xui-common-lib.metadata.json +1 -1
  24. package/lib/components/find-service/find-service.component.d.ts +3 -1
  25. package/lib/exui-common-lib.module.d.ts +2 -1
  26. package/lib/services/role-guard/role.guard.d.ts +2 -1
  27. package/lib/services/role-guard/role.service.d.ts +3 -1
  28. package/package.json +1 -1
@@ -1671,7 +1671,7 @@
1671
1671
  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.enableAddButton\"\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-service'\">\n <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n [form]=\"form\"\n [fields]=\"config.fields\"\n [title]=\"field.title\"\n [enableAddServiceButton]=\"field.enableAddButton\"\n [disabled]=\"disabled(field, form)\"\n [disableInputField]=\"field.disable\"\n [selectedServices]=\"form.get(field.name)?.value\" \n [field]=\"field\"\n ></xuilib-find-service>\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",
1672
1672
  changeDetection: i0.ChangeDetectionStrategy.OnPush,
1673
1673
  encapsulation: i0.ViewEncapsulation.None,
1674
- 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}"]
1674
+ styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width:40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}.contain-classes .govuk-select{width:100%}"]
1675
1675
  }] }
1676
1676
  ];
1677
1677
  /** @nocollapse */
@@ -4241,7 +4241,7 @@
4241
4241
  { type: i0.Component, args: [{
4242
4242
  selector: 'exui-search-location',
4243
4243
  template: "<div class=\"auto-complete-container\">\n <input\n id=\"inputLocationSearch\"\n (input)=\"onInput()\"\n [formControl]=\"form.controls.searchTerm\"\n [matAutocomplete]=\"autoSearchLocation\"\n class=\"govuk-input\"\n [attr.disabled]=\"disabled\">\n <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n <mat-option *ngFor=\"let location of locations\"\n (onSelectionChange)=\"onSelectionChange(location)\">\n {{ location.site_name }}\n </mat-option>\n <mat-option *ngIf=\"!locations.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n </mat-autocomplete>\n</div>\n",
4244
- styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
4244
+ styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}"]
4245
4245
  }] }
4246
4246
  ];
4247
4247
  /** @nocollapse */
@@ -4498,8 +4498,8 @@
4498
4498
  FindLocationComponent.decorators = [
4499
4499
  { type: i0.Component, args: [{
4500
4500
  selector: 'xuilib-find-location',
4501
- template: "<div class=\"location-picker-custom\">\n <div class=\"search-location\">\n <div>\n <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n </div>\n <exui-search-location class=\"search-location\"\n [locations]=\"locations\"\n [selectedLocations]=\"selectedLocations\"\n [singleMode]=\"field.maxSelected === 1\"\n [bookingCheck]=\"field.bookingCheckType\"\n [delay]=\"300\"\n [disabled]=\"disabled\"\n [serviceIds]=\"serviceIds\"\n (locationInputChanged)=\"onInputChanged($event)\"\n (locationSelected)=\"onLocationSelected($event)\"\n (searchLocationChanged)=\"onSearchInputChanged()\"\n [locationType]=\"'case-management'\"></exui-search-location>\n <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n Add location\n </a>\n </div>\n <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n <li class=\"location-selection\" *ngFor=\"let selection of selectedLocations\">\n <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n {{ selection.site_name }}\n </a>\n </li>\n </ul>\n</div>\n",
4502
- styles: [""]
4501
+ template: "<div class=\"location-picker-custom\">\n <div class=\"search-location\">\n <div>\n <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n </div>\n\n <div class=\"search-location__input-container\">\n <exui-search-location class=\"search-location__input\"\n [locations]=\"locations\"\n [selectedLocations]=\"selectedLocations\"\n [singleMode]=\"field.maxSelected === 1\"\n [bookingCheck]=\"field.bookingCheckType\"\n [delay]=\"300\"\n [disabled]=\"disabled\"\n [serviceIds]=\"serviceIds\"\n (locationInputChanged)=\"onInputChanged($event)\"\n (locationSelected)=\"onLocationSelected($event)\"\n (searchLocationChanged)=\"onSearchInputChanged()\"\n [locationType]=\"'case-management'\"></exui-search-location>\n <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n Add\n </a>\n </div>\n </div>\n <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n <li class=\"location-selection\" *ngFor=\"let selection of selectedLocations\">\n <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n {{ selection.site_name }}\n </a>\n </li>\n </ul>\n</div>\n",
4502
+ styles: [".search-location__input-container{display:flex}.search-location .auto-complete-container{min-width:unset;width:calc(100% - 4px)}.search-location__input{flex:1 0 auto}.search-location .govuk-button--secondary{background-color:#ddd}"]
4503
4503
  }] }
4504
4504
  ];
4505
4505
  FindLocationComponent.propDecorators = {
@@ -5208,10 +5208,14 @@
5208
5208
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
5209
5209
  */
5210
5210
  var FindServiceComponent = /** @class */ (function () {
5211
- function FindServiceComponent() {
5211
+ function FindServiceComponent(fb) {
5212
+ this.fb = fb;
5212
5213
  this.serviceTitle = 'Search for a service by name';
5213
5214
  this.enableAddServiceButton = true;
5214
5215
  this.disableInputField = false;
5216
+ this.form = this.fb.group({
5217
+ searchTerm: ['']
5218
+ });
5215
5219
  }
5216
5220
  /**
5217
5221
  * @return {?}
@@ -5225,10 +5229,16 @@
5225
5229
  FindServiceComponent.decorators = [
5226
5230
  { type: i0.Component, args: [{
5227
5231
  selector: 'xuilib-find-service',
5228
- template: "<div class=\"service-picker-custom\">\n <div class=\"search-service\">\n <div>\n <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n </div>\n <exui-search-service class=\"search-service\"\n [services]=\"services\"\n [selectedServices]=\"selectedServices\"\n [delay]=\"300\"\n [disabled]=\"disabled\"></exui-search-service>\n <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" \n data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n Add\n </a>\n </div>\n <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n <li class=\"service-selection\" *ngFor=\"let selection of selectedServices\">\n <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n {{ selection.name }}\n </a>\n </li>\n </ul>\n </div>",
5229
- styles: ["#add-service{background-color:#ddd}"]
5232
+ template: "<div class=\"service-picker-custom\">\n <div class=\"search-service\">\n <div class=\"govuk-body\">\n <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n </div>\n <div class=\"search-service__input-container\">\n <exui-search-service class=\"search-service__input\"\n [services]=\"services\"\n [selectedServices]=\"selectedServices\"\n [delay]=\"300\"\n [disabled]=\"disabled\"></exui-search-service>\n <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n Add\n </a>\n </div>\n </div>\n <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n <li class=\"service-selection\" *ngFor=\"let selection of selectedServices\">\n <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n {{ selection.name }}\n </a>\n </li>\n </ul>\n</div>\n",
5233
+ styles: ["#add-service{background-color:#ddd}.search-service__input-container{display:flex}.search-service__input{flex:1 0 auto}"]
5230
5234
  }] }
5231
5235
  ];
5236
+ /** @nocollapse */
5237
+ FindServiceComponent.ctorParameters = function () {
5238
+ return [
5239
+ { type: forms.FormBuilder }
5240
+ ];
5241
+ };
5232
5242
  FindServiceComponent.propDecorators = {
5233
5243
  field: [{ type: i0.Input }],
5234
5244
  fields: [{ type: i0.Input }],
@@ -5514,8 +5524,8 @@
5514
5524
  SearchServiceComponent.decorators = [
5515
5525
  { type: i0.Component, args: [{
5516
5526
  selector: 'exui-search-service',
5517
- template: "<div class=\"auto-complete-container\">\n <input\n id=\"inputServiceSearch\"\n (input)=\"onInput()\"\n [formControl]=\"form.controls.searchTerm\"\n [matAutocomplete]=\"autoSearchService\"\n class=\"govuk-input\"\n [attr.disabled]=\"disabled\">\n <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n {{ service.name }}\n </mat-option>\n <mat-option *ngIf=\"!services.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n </mat-autocomplete>\n</div>\n",
5518
- styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
5527
+ template: "<div class=\"auto-complete-container\">\n <input\n id=\"inputServiceSearch\"\n (input)=\"onInput()\"\n [formControl]=\"form?.controls?.searchTerm\"\n [matAutocomplete]=\"autoSearchService\"\n class=\"govuk-input\"\n [attr.disabled]=\"disabled\">\n <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n {{ service.name }}\n </mat-option>\n <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n </mat-autocomplete>\n</div>\n",
5528
+ styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{width:calc(100% - 4px);display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
5519
5529
  }] }
5520
5530
  ];
5521
5531
  SearchServiceComponent.propDecorators = {
@@ -7701,19 +7711,18 @@
7701
7711
  */
7702
7712
  var RoleService = /** @class */ (function () {
7703
7713
  function RoleService() {
7704
- this.pRoles = [];
7714
+ this.pRoles = new rxjs.BehaviorSubject(null);
7715
+ this.roles$ = this.pRoles.asObservable().pipe(operators.skipWhile(( /**
7716
+ * @param {?} item
7717
+ * @return {?}
7718
+ */function (item) { return item === null; })));
7705
7719
  }
7706
7720
  Object.defineProperty(RoleService.prototype, "roles", {
7707
- get: /**
7708
- * @return {?}
7709
- */ function () {
7710
- return this.pRoles;
7711
- },
7712
7721
  set: /**
7713
7722
  * @param {?} roles
7714
7723
  * @return {?}
7715
7724
  */ function (roles) {
7716
- this.pRoles = roles;
7725
+ this.pRoles.next(roles);
7717
7726
  },
7718
7727
  enumerable: true,
7719
7728
  configurable: true
@@ -7754,23 +7763,28 @@
7754
7763
  */
7755
7764
  function (route) {
7756
7765
  var _this = this;
7757
- /** @type {?} */
7758
- var roles = (( /** @type {?} */(route.data.needsRole)));
7759
- /** @type {?} */
7760
- var check = ( /**
7761
- * @param {?} roleRegEx
7766
+ return this.roleService.roles$.pipe(operators.map(( /**
7767
+ * @param {?} roles
7762
7768
  * @return {?}
7763
- */function (roleRegEx) {
7769
+ */function (roles) {
7770
+ /** @type {?} */
7771
+ var canActivateRoles = (( /** @type {?} */(route.data.needsRole)));
7764
7772
  /** @type {?} */
7765
- var regex = new RegExp(roleRegEx);
7766
- return _this.roleService.roles.some(( /**
7767
- * @param {?} role
7773
+ var check = ( /**
7774
+ * @param {?} roleRegEx
7768
7775
  * @return {?}
7769
- */function (role) { return regex.test(role); }));
7770
- });
7771
- /** @type {?} */
7772
- var match = route.data.roleMatching === RoleMatching.ALL ? roles.every(check) : roles.some(check);
7773
- return match || this.router.parseUrl(( /** @type {?} */(route.data.noRoleMatchRedirect)));
7776
+ */function (roleRegEx) {
7777
+ /** @type {?} */
7778
+ var regex = new RegExp(roleRegEx);
7779
+ return roles.some(( /**
7780
+ * @param {?} role
7781
+ * @return {?}
7782
+ */function (role) { return regex.test(role); }));
7783
+ });
7784
+ /** @type {?} */
7785
+ var match = route.data.roleMatching === RoleMatching.ALL ? canActivateRoles.every(check) : canActivateRoles.some(check);
7786
+ return match || _this.router.parseUrl(( /** @type {?} */(route.data.noRoleMatchRedirect)));
7787
+ })));
7774
7788
  };
7775
7789
  RoleGuard.decorators = [
7776
7790
  { type: i0.Injectable, args: [{