@hmcts/rpx-xui-common-lib 1.7.28 → 1.7.38

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 (51) hide show
  1. package/bundles/hmcts-rpx-xui-common-lib.umd.js +169 -69
  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/components/share-case/share-case.component.js +10 -3
  11. package/esm2015/lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.js +80 -6
  12. package/esm2015/lib/gov-ui/components/gov-uk-input/gov-uk-input.component.js +3 -3
  13. package/esm2015/lib/gov-ui/components/gov-uk-label/gov-uk-label.component.js +3 -2
  14. package/esm2015/lib/gov-ui/components/gov-uk-radios/gov-uk-radios.component.js +1 -1
  15. package/esm2015/lib/gov-ui/components/gov-uk-select/gov-uk-select.component.js +2 -2
  16. package/esm2015/lib/gov-ui/models/checkboxes-model.js +6 -8
  17. package/esm2015/lib/gov-ui/models/gov-ui-config-model.js +5 -1
  18. package/esm2015/lib/gov-ui/models/radio-buttons.model.js +22 -0
  19. package/esm2015/lib/models/person.model.js +3 -1
  20. package/esm5/lib/components/find-location/find-location.component.js +3 -3
  21. package/esm5/lib/components/find-service/find-service.component.js +18 -5
  22. package/esm5/lib/components/generic-filter/generic-filter.component.js +1 -1
  23. package/esm5/lib/components/search-location/search-location.component.js +1 -1
  24. package/esm5/lib/components/search-service/search-service.component.js +3 -3
  25. package/esm5/lib/components/share-case/share-case.component.js +10 -3
  26. package/esm5/lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.js +100 -6
  27. package/esm5/lib/gov-ui/components/gov-uk-input/gov-uk-input.component.js +3 -3
  28. package/esm5/lib/gov-ui/components/gov-uk-label/gov-uk-label.component.js +3 -2
  29. package/esm5/lib/gov-ui/components/gov-uk-radios/gov-uk-radios.component.js +1 -1
  30. package/esm5/lib/gov-ui/components/gov-uk-select/gov-uk-select.component.js +2 -2
  31. package/esm5/lib/gov-ui/models/checkboxes-model.js +6 -8
  32. package/esm5/lib/gov-ui/models/gov-ui-config-model.js +5 -1
  33. package/esm5/lib/gov-ui/models/radio-buttons.model.js +22 -0
  34. package/esm5/lib/models/person.model.js +3 -1
  35. package/fesm2015/hmcts-rpx-xui-common-lib.js +133 -50
  36. package/fesm2015/hmcts-rpx-xui-common-lib.js.map +1 -1
  37. package/fesm5/hmcts-rpx-xui-common-lib.js +170 -71
  38. package/fesm5/hmcts-rpx-xui-common-lib.js.map +1 -1
  39. package/hmcts-rpx-xui-common-lib.metadata.json +1 -1
  40. package/lib/components/find-service/find-service.component.d.ts +3 -1
  41. package/lib/components/share-case/share-case.component.d.ts +2 -0
  42. package/lib/exui-common-lib.module.d.ts +4 -3
  43. package/lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.d.ts +14 -5
  44. package/lib/gov-ui/components/gov-uk-input/gov-uk-input.component.d.ts +1 -2
  45. package/lib/gov-ui/components/gov-uk-label/gov-uk-label.component.d.ts +1 -0
  46. package/lib/gov-ui/components/gov-uk-radios/gov-uk-radios.component.d.ts +2 -2
  47. package/lib/gov-ui/models/checkboxes-model.d.ts +4 -7
  48. package/lib/gov-ui/models/gov-ui-config-model.d.ts +2 -0
  49. package/lib/gov-ui/models/radio-buttons.model.d.ts +9 -0
  50. package/lib/models/person.model.d.ts +2 -0
  51. package/package.json +1 -1
@@ -10,7 +10,7 @@ import { Title } from '@angular/platform-browser';
10
10
  import { DocumentInterruptSource, Idle } from '@ng-idle/core';
11
11
  import { Keepalive } from '@ng-idle/keepalive';
12
12
  import { RouterModule, Router, NavigationEnd } from '@angular/router';
13
- import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, defineInjectable, inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
13
+ import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, defineInjectable, inject, NgModule, ChangeDetectionStrategy } from '@angular/core';
14
14
  import { BehaviorSubject, of, zip, Subject, combineLatest } from 'rxjs';
15
15
  import { distinctUntilChanged, map, debounceTime, filter, mergeMap, tap, catchError, switchMap, delay, skipWhile } from 'rxjs/operators';
16
16
 
@@ -1601,7 +1601,7 @@ var GenericFilterComponent = /** @class */ (function () {
1601
1601
  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",
1602
1602
  changeDetection: ChangeDetectionStrategy.OnPush,
1603
1603
  encapsulation: ViewEncapsulation.None,
1604
- 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}"]
1604
+ 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%}"]
1605
1605
  }] }
1606
1606
  ];
1607
1607
  /** @nocollapse */
@@ -2972,6 +2972,7 @@ var ShareCaseComponent = /** @class */ (function () {
2972
2972
  this.users = []; // users of this organisation the cases can be shared with
2973
2973
  // users of this organisation the cases can be shared with
2974
2974
  this.confirmLink = '';
2975
+ this.showRemoveUsers = false;
2975
2976
  this.unselect = new EventEmitter();
2976
2977
  this.synchronizeStore = new EventEmitter();
2977
2978
  }
@@ -3124,8 +3125,8 @@ var ShareCaseComponent = /** @class */ (function () {
3124
3125
  ShareCaseComponent.decorators = [
3125
3126
  { type: Component, args: [{
3126
3127
  selector: 'xuilib-share-case',
3127
- template: "<div id=\"add-user\">\n <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">Enter email address</label>\n <span id=\"add-user-hint\" class=\"govuk-hint\">\n Search by name or email address. You can only add people from your organisation individually - but you can add as many as you like.\n </span>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <xuilib-user-select\n id=\"add-user-input\"\n aria-describedby=\"add-user-hint\"\n [users]=\"users\"\n (selected)=\"onSelectedUser($event)\">\n </xuilib-user-select>\n </div>\n <div class=\"govuk-grid-column-one-thirds\">\n <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button\" [disabled]=\"isDisabledAdd()\" title=\"Add user to the case\">Add</button>\n </div>\n </div>\n <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n Can\u2019t find an email address?\n </span>\n </summary>\n <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n If you can\u2019t find your colleague\u2019s email address, they will need to complete their registration. Contact your\n administrator for help.\n </div>\n </details>\n</div>\n\n<div id=\"cases\">\n <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n <div *ngIf=\"shareCases && shareCases.length > 0\" class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n <xuilib-selected-case-list\n [shareCases$]=\"shareCases$\"\n [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n (unselect)=\"onUnselect($event)\"\n (synchronizeStore)=\"onSynchronizeStore($event)\"\n >\n </xuilib-selected-case-list>\n </div>\n\n <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\">\n No cases to display.\n </div>\n\n</div>\n\n<div id=\"share-case-nav\">\n <button class=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n</div>\n",
3128
- styles: [""]
3128
+ template: "<div id=\"add-user\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel}}</label>\n <span id=\"add-user-hint\" class=\"govuk-hint\">\n Search by name or email address. You can share access with as many people as you need.\n </span>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <xuilib-user-select\n id=\"add-user-input\"\n aria-describedby=\"add-user-hint\"\n [users]=\"users\"\n (selected)=\"onSelectedUser($event)\">\n </xuilib-user-select>\n </div>\n <div class=\"govuk-grid-column-one-thirds\">\n <button id=\"btn-add-user\" (click)=\"addUser()\" class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\" title=\"Add user to selected cases\">Add</button>\n </div>\n </div>\n <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n <summary class=\"govuk-details__summary\">\n <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n Can't find an email address?\n </span>\n </summary>\n <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n If you can't find your colleague's email address, they will need to complete their registration. Contact your\n administrator for help.\n </div>\n </details>\n </div>\n <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">Remove a person from all cases</label>\n <span id=\"remove-user-hint\" class=\"govuk-hint\">\n Select a person to remove them from all selected cases.\n </span>\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n <select class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n <option value=\"{{user}}\" *ngFor=\"let user of users\">{{user.email}}</option>\n </select>\n </div>\n <div class=\"govuk-grid-column-one-thirds\">\n <button id=\"btn-remove-user\" class=\"govuk-button govuk-button--secondary\" title=\"Remove user from selected cases\">Remove</button>\n </div>\n </div>\n </div>\n</div>\n\n<div id=\"cases\">\n <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\n <div *ngIf=\"shareCases && shareCases.length > 0\" class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n <xuilib-selected-case-list\n [shareCases$]=\"shareCases$\"\n [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n (unselect)=\"onUnselect($event)\"\n (synchronizeStore)=\"onSynchronizeStore($event)\"\n >\n </xuilib-selected-case-list>\n </div>\n\n <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\">\n No cases to display.\n </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n <button class=\"govuk-button\" data-module=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"Cancel\">Cancel</button>\n</div>\n",
3129
+ styles: ["select{width:100%}"]
3129
3130
  }] }
3130
3131
  ];
3131
3132
  /** @nocollapse */
@@ -3137,6 +3138,8 @@ var ShareCaseComponent = /** @class */ (function () {
3137
3138
  shareCases$: [{ type: Input }],
3138
3139
  users: [{ type: Input }],
3139
3140
  confirmLink: [{ type: Input }],
3141
+ addUserLabel: [{ type: Input }],
3142
+ showRemoveUsers: [{ type: Input }],
3140
3143
  unselect: [{ type: Output }],
3141
3144
  synchronizeStore: [{ type: Output }],
3142
3145
  userSelect: [{ type: ViewChild, args: [UserSelectComponent,] }]
@@ -3738,6 +3741,7 @@ var PersonRole = {
3738
3741
  JUDICIAL: "Judicial",
3739
3742
  CASEWORKER: "Legal Ops",
3740
3743
  ADMIN: "Admin",
3744
+ CTSC: "CTSC User",
3741
3745
  ALL: "All",
3742
3746
  };
3743
3747
  /** @enum {string} */
@@ -3745,6 +3749,7 @@ var RoleCategory = {
3745
3749
  JUDICIAL: "JUDICIAL",
3746
3750
  CASEWORKER: "LEGAL_OPERATIONS",
3747
3751
  ADMIN: "ADMIN",
3752
+ CTSC: "CTSC",
3748
3753
  ALL: "ALL",
3749
3754
  };
3750
3755
 
@@ -4196,7 +4201,7 @@ var SearchLocationComponent = /** @class */ (function () {
4196
4201
  { type: Component, args: [{
4197
4202
  selector: 'exui-search-location',
4198
4203
  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",
4199
- 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}"]
4204
+ 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}"]
4200
4205
  }] }
4201
4206
  ];
4202
4207
  /** @nocollapse */
@@ -4455,8 +4460,8 @@ var FindLocationComponent = /** @class */ (function () {
4455
4460
  FindLocationComponent.decorators = [
4456
4461
  { type: Component, args: [{
4457
4462
  selector: 'xuilib-find-location',
4458
- 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",
4459
- styles: [""]
4463
+ 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",
4464
+ 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}"]
4460
4465
  }] }
4461
4466
  ];
4462
4467
  FindLocationComponent.propDecorators = {
@@ -5183,10 +5188,14 @@ var FindPersonComponent = /** @class */ (function () {
5183
5188
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
5184
5189
  */
5185
5190
  var FindServiceComponent = /** @class */ (function () {
5186
- function FindServiceComponent() {
5191
+ function FindServiceComponent(fb) {
5192
+ this.fb = fb;
5187
5193
  this.serviceTitle = 'Search for a service by name';
5188
5194
  this.enableAddServiceButton = true;
5189
5195
  this.disableInputField = false;
5196
+ this.form = this.fb.group({
5197
+ searchTerm: ['']
5198
+ });
5190
5199
  }
5191
5200
  /**
5192
5201
  * @return {?}
@@ -5200,10 +5209,14 @@ var FindServiceComponent = /** @class */ (function () {
5200
5209
  FindServiceComponent.decorators = [
5201
5210
  { type: Component, args: [{
5202
5211
  selector: 'xuilib-find-service',
5203
- 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>",
5204
- styles: ["#add-service{background-color:#ddd}"]
5212
+ 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",
5213
+ styles: ["#add-service{background-color:#ddd}.search-service__input-container{display:flex}.search-service__input{flex:1 0 auto}"]
5205
5214
  }] }
5206
5215
  ];
5216
+ /** @nocollapse */
5217
+ FindServiceComponent.ctorParameters = function () { return [
5218
+ { type: FormBuilder }
5219
+ ]; };
5207
5220
  FindServiceComponent.propDecorators = {
5208
5221
  field: [{ type: Input }],
5209
5222
  fields: [{ type: Input }],
@@ -5491,8 +5504,8 @@ var SearchServiceComponent = /** @class */ (function () {
5491
5504
  SearchServiceComponent.decorators = [
5492
5505
  { type: Component, args: [{
5493
5506
  selector: 'exui-search-service',
5494
- 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",
5495
- 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}"]
5507
+ 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",
5508
+ 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}"]
5496
5509
  }] }
5497
5510
  ];
5498
5511
  SearchServiceComponent.propDecorators = {
@@ -5791,6 +5804,58 @@ var GovUkCheckboxComponent = /** @class */ (function () {
5791
5804
  return GovUkCheckboxComponent;
5792
5805
  }());
5793
5806
 
5807
+ /**
5808
+ * @fileoverview added by tsickle
5809
+ * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
5810
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
5811
+ */
5812
+ /*
5813
+ * Helper Class
5814
+ * Used for dynamic templates manipulation
5815
+ * */
5816
+ var /*
5817
+ * Helper Class
5818
+ * Used for dynamic templates manipulation
5819
+ * */
5820
+ HtmlTemplatesHelper = /** @class */ (function () {
5821
+ function HtmlTemplatesHelper() {
5822
+ }
5823
+ /*
5824
+ * Sets described by string depending if
5825
+ * there is an error, error and hit or nothing
5826
+ * */
5827
+ /*
5828
+ * Sets described by string depending if
5829
+ * there is an error, error and hit or nothing
5830
+ * */
5831
+ /**
5832
+ * @param {?} errorMessage
5833
+ * @param {?} config
5834
+ * @return {?}
5835
+ */
5836
+ HtmlTemplatesHelper.setDescribedBy = /*
5837
+ * Sets described by string depending if
5838
+ * there is an error, error and hit or nothing
5839
+ * */
5840
+ /**
5841
+ * @param {?} errorMessage
5842
+ * @param {?} config
5843
+ * @return {?}
5844
+ */
5845
+ function (errorMessage, config) {
5846
+ if (!errorMessage) {
5847
+ return config.hint ? config.id + "-hint" : null;
5848
+ }
5849
+ else if (errorMessage && errorMessage.isInvalid) {
5850
+ return config.hint ? config.id + "-hint " + config.id + "-error" : config.id + "-error";
5851
+ }
5852
+ else {
5853
+ return config.hint ? config.id + "-hint" : null;
5854
+ }
5855
+ };
5856
+ return HtmlTemplatesHelper;
5857
+ }());
5858
+
5794
5859
  /**
5795
5860
  * @fileoverview added by tsickle
5796
5861
  * Generated from: lib/gov-ui/components/gov-uk-checkboxes/gov-uk-checkboxes.component.ts
@@ -5806,15 +5871,100 @@ var GovUkCheckboxComponent = /** @class */ (function () {
5806
5871
  var GovUkCheckboxesComponent = /** @class */ (function () {
5807
5872
  function GovUkCheckboxesComponent() {
5808
5873
  }
5874
+ /**
5875
+ * @return {?}
5876
+ */
5877
+ GovUkCheckboxesComponent.prototype.ngOnInit = /**
5878
+ * @return {?}
5879
+ */
5880
+ function () {
5881
+ this.columns = this.setColumns();
5882
+ };
5883
+ /**
5884
+ * @return {?}
5885
+ */
5886
+ GovUkCheckboxesComponent.prototype.setDescribedBy = /**
5887
+ * @return {?}
5888
+ */
5889
+ function () {
5890
+ return HtmlTemplatesHelper.setDescribedBy(this.errorMessage, this.config);
5891
+ };
5892
+ /**
5893
+ * @param {?} checked
5894
+ * @param {?} value
5895
+ * @return {?}
5896
+ */
5897
+ GovUkCheckboxesComponent.prototype.onChecked = /**
5898
+ * @param {?} checked
5899
+ * @param {?} value
5900
+ * @return {?}
5901
+ */
5902
+ function (checked, value) {
5903
+ /** @type {?} */
5904
+ var formControl = this.group.get(this.config.name);
5905
+ /** @type {?} */
5906
+ var array = formControl.value ? formControl.value : [];
5907
+ if (!checked) {
5908
+ /** @type {?} */
5909
+ var modifiedArray = array.filter((/**
5910
+ * @param {?} item
5911
+ * @return {?}
5912
+ */
5913
+ function (item) { return item !== value; }));
5914
+ formControl.setValue(modifiedArray);
5915
+ }
5916
+ else {
5917
+ formControl.setValue(__spread(array, [value]));
5918
+ }
5919
+ };
5920
+ /**
5921
+ * @param {?} value
5922
+ * @return {?}
5923
+ */
5924
+ GovUkCheckboxesComponent.prototype.isChecked = /**
5925
+ * @param {?} value
5926
+ * @return {?}
5927
+ */
5928
+ function (value) {
5929
+ /** @type {?} */
5930
+ var formControl = this.group.get(this.config.name);
5931
+ return formControl.value && formControl.value.includes(value);
5932
+ };
5933
+ /**
5934
+ * @private
5935
+ * @return {?}
5936
+ */
5937
+ GovUkCheckboxesComponent.prototype.setColumns = /**
5938
+ * @private
5939
+ * @return {?}
5940
+ */
5941
+ function () {
5942
+ if (this.config.rows && this.config.rows > 1) {
5943
+ /** @type {?} */
5944
+ var array = [];
5945
+ for (var i = 0; i < this.items.length; i += this.config.rows) {
5946
+ /** @type {?} */
5947
+ var arrayChunk = this.items.slice(i, i + this.config.rows);
5948
+ array.push(arrayChunk);
5949
+ }
5950
+ return array;
5951
+ }
5952
+ else {
5953
+ return [this.items];
5954
+ }
5955
+ };
5809
5956
  GovUkCheckboxesComponent.decorators = [
5810
5957
  { type: Component, args: [{
5811
5958
  selector: 'xuilib-gov-uk-checkboxes',
5812
- template: "<xuilib-gov-uk-form-group-wrapper\n[error]=\"errors\"\n[config]=\"options.config\"\n[group]=\"options.key\">\n<div class=\"govuk-checkboxes\">\n <xuilib-gov-checkbox *ngFor=\"let item of options.items\"\n [group]=\"item.group\"\n [config]=\"item.config\">\n </xuilib-gov-checkbox>\n</div>\n</xuilib-gov-uk-form-group-wrapper>"
5959
+ template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n [ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n <xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n <span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n </span>\n\n <xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes-multi-column\" data-module=\"govuk-checkboxes\">\n <div class=\"govuk-checkboxes-multi-column__single\" *ngFor=\"let columnItems of columns\">\n <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of columnItems\">\n <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n [id]=\"item.id\" [name]=\"item.id\" [checked]=\"isChecked(item.value)\" [value]=\"item.value\"\n [attr.aria-describedby]=\"setDescribedBy()\"\n (change)=\"onChecked($event.target.checked, item.value)\"\n >\n <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.id\">\n {{ item.label }}\n </label>\n <div *ngIf=\"item.hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n {{ item.hint }}\n </div>\n </div>\n </div>\n </div>\n</div>\n",
5960
+ styles: [".govuk-checkboxes-multi-column{display:flex;flex-wrap:wrap;margin-left:-20px;margin-right:-20px}.govuk-checkboxes-multi-column__single{padding-left:20px;padding-right:20px}"]
5813
5961
  }] }
5814
5962
  ];
5815
5963
  GovUkCheckboxesComponent.propDecorators = {
5816
- options: [{ type: Input }],
5817
- errors: [{ type: Input }]
5964
+ group: [{ type: Input }],
5965
+ config: [{ type: Input }],
5966
+ items: [{ type: Input }],
5967
+ errorMessage: [{ type: Input }]
5818
5968
  };
5819
5969
  return GovUkCheckboxesComponent;
5820
5970
  }());
@@ -5965,58 +6115,6 @@ var GovUkErrorMessageComponent = /** @class */ (function () {
5965
6115
  return GovUkErrorMessageComponent;
5966
6116
  }());
5967
6117
 
5968
- /**
5969
- * @fileoverview added by tsickle
5970
- * Generated from: lib/gov-ui/util/helpers/html-templates.helper.ts
5971
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
5972
- */
5973
- /*
5974
- * Helper Class
5975
- * Used for dynamic templates manipulation
5976
- * */
5977
- var /*
5978
- * Helper Class
5979
- * Used for dynamic templates manipulation
5980
- * */
5981
- HtmlTemplatesHelper = /** @class */ (function () {
5982
- function HtmlTemplatesHelper() {
5983
- }
5984
- /*
5985
- * Sets described by string depending if
5986
- * there is an error, error and hit or nothing
5987
- * */
5988
- /*
5989
- * Sets described by string depending if
5990
- * there is an error, error and hit or nothing
5991
- * */
5992
- /**
5993
- * @param {?} errorMessage
5994
- * @param {?} config
5995
- * @return {?}
5996
- */
5997
- HtmlTemplatesHelper.setDescribedBy = /*
5998
- * Sets described by string depending if
5999
- * there is an error, error and hit or nothing
6000
- * */
6001
- /**
6002
- * @param {?} errorMessage
6003
- * @param {?} config
6004
- * @return {?}
6005
- */
6006
- function (errorMessage, config) {
6007
- if (!errorMessage) {
6008
- return config.hint ? config.id + "-hint" : null;
6009
- }
6010
- else if (errorMessage && errorMessage.isInvalid) {
6011
- return config.hint ? config.id + "-hint " + config.id + "-error" : config.id + "-error";
6012
- }
6013
- else {
6014
- return config.hint ? config.id + "-hint" : null;
6015
- }
6016
- };
6017
- return HtmlTemplatesHelper;
6018
- }());
6019
-
6020
6118
  /**
6021
6119
  * @fileoverview added by tsickle
6022
6120
  * Generated from: lib/gov-ui/components/gov-uk-fieldset/gov-uk-fieldset.component.ts
@@ -6164,7 +6262,7 @@ var GovUkInputComponent = /** @class */ (function () {
6164
6262
  * @return {?}
6165
6263
  */
6166
6264
  function () {
6167
- this.config.classes = 'govuk-label--m';
6265
+ this.config.classes = typeof (this.config.classes) === 'string' ? this.config.classes : 'govuk-label govuk-label--m';
6168
6266
  };
6169
6267
  /**
6170
6268
  * @return {?}
@@ -6178,7 +6276,7 @@ var GovUkInputComponent = /** @class */ (function () {
6178
6276
  GovUkInputComponent.decorators = [
6179
6277
  { type: Component, args: [{
6180
6278
  selector: 'xuilib-gov-uk-input',
6181
- template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id\"\n [name]=\"config.name\"\n [type]=\"config.type\"\n [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n [formControlName]=\"config.name\"\n [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
6279
+ template: "<div class=\"govuk-form-group gov-uk-input\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<input class=\"govuk-input\"\n [class.govuk-!-width-full]=\"config.fullWidth\"\n [ngClass]=\"{'govuk-input--error': errorMessage?.isInvalid}\"\n [id]=\"config.id\"\n [name]=\"config.name\"\n [type]=\"config.type\"\n [attr.aria-invalid]=\"errorMessage?.isInvalid\"\n [formControlName]=\"config.name\"\n [attr.aria-describedby]='setDescribedBy()'>\n</div>\n",
6182
6280
  styles: [".gov-uk-input input:disabled{background:#b1b4b6}"]
6183
6281
  }] }
6184
6282
  ];
@@ -6209,7 +6307,8 @@ var GovUkLabelComponent = /** @class */ (function () {
6209
6307
  GovUkLabelComponent.decorators = [
6210
6308
  { type: Component, args: [{
6211
6309
  selector: 'xuilib-gov-label',
6212
- template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n [for]=\"config.id\" [innerHTML]=\"config.label\">\n </label>\n</h1>\n<ng-template #noHeading>\n <label *ngIf=\"config.label\" [class]=\"config.classes + ' govuk-label'\"\n [for]=\"config.id\" [innerHTML]=\"config.label\">\n </label>\n</ng-template>"
6310
+ template: "<h1 *ngIf=\"config.isPageHeading else noHeading\">\n <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n <span>{{ config.label }}</span>\n <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n </label>\n</h1>\n<ng-template #noHeading>\n <label *ngIf=\"config.label\" [for]=\"config.id\" [class]=\"config.classes + ' govuk-label'\">\n <span>{{ config.label }}</span>\n <span class=\"govuk-label__optional\" *ngIf=\"config.optional\">(optional)</span>\n </label>\n</ng-template>\n",
6311
+ styles: [".govuk-label{display:flex;align-items:center;flex-wrap:wrap}.govuk-label__optional{font-weight:400;font-size:16px;display:inline-block;margin-left:.75rem}"]
6213
6312
  }] }
6214
6313
  ];
6215
6314
  /** @nocollapse */
@@ -6328,7 +6427,7 @@ var GovUkSelectComponent = /** @class */ (function () {
6328
6427
  GovUkSelectComponent.decorators = [
6329
6428
  { type: Component, args: [{
6330
6429
  selector: 'xuilib-gov-select',
6331
- template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\" [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n<option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>"
6430
+ template: "<div class=\"govuk-form-group\" [formGroup]=\"group\"\n[ngClass]=\"{'govuk-form-group--error': errorMessage?.isInvalid}\">\n<xuilib-gov-label [config]=\"config\"></xuilib-gov-label>\n<span *ngIf=\"config.hint\" [id]=\"config.id +'-hint'\" class=\"govuk-hint\">\n {{config.hint}}\n</span>\n<xuilib-gov-uk-error-message [config]=\"config\" [errorMessage]=\"errorMessage\"></xuilib-gov-uk-error-message>\n\n<select class=\"govuk-select\"\n [class.govuk-!-width-full]=\"config.fullWidth\"\n [id]=\"config.id\" [name]=\"config.id\" [formControlName]=\"config.id\" [attr.aria-describedby]='setDescribedBy()'>\n <option value=\"{{item.value}}\" *ngFor=\"let item of items\">{{item.label}}</option>\n</select>\n</div>\n"
6332
6431
  }] }
6333
6432
  ];
6334
6433
  /** @nocollapse */