@hmcts/rpx-xui-common-lib 1.7.28 → 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.
- package/bundles/hmcts-rpx-xui-common-lib.umd.js +19 -9
- package/bundles/hmcts-rpx-xui-common-lib.umd.js.map +1 -1
- package/bundles/hmcts-rpx-xui-common-lib.umd.min.js +1 -1
- package/bundles/hmcts-rpx-xui-common-lib.umd.min.js.map +1 -1
- package/esm2015/lib/components/find-location/find-location.component.js +3 -3
- package/esm2015/lib/components/find-service/find-service.component.js +21 -5
- package/esm2015/lib/components/generic-filter/generic-filter.component.js +1 -1
- package/esm2015/lib/components/search-location/search-location.component.js +1 -1
- package/esm2015/lib/components/search-service/search-service.component.js +3 -3
- package/esm5/lib/components/find-location/find-location.component.js +3 -3
- package/esm5/lib/components/find-service/find-service.component.js +18 -5
- package/esm5/lib/components/generic-filter/generic-filter.component.js +1 -1
- package/esm5/lib/components/search-location/search-location.component.js +1 -1
- package/esm5/lib/components/search-service/search-service.component.js +3 -3
- package/fesm2015/hmcts-rpx-xui-common-lib.js +20 -9
- package/fesm2015/hmcts-rpx-xui-common-lib.js.map +1 -1
- package/fesm5/hmcts-rpx-xui-common-lib.js +17 -9
- package/fesm5/hmcts-rpx-xui-common-lib.js.map +1 -1
- package/hmcts-rpx-xui-common-lib.metadata.json +1 -1
- package/lib/components/find-service/find-service.component.d.ts +3 -1
- package/lib/exui-common-lib.module.d.ts +2 -1
- 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{
|
|
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:
|
|
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-
|
|
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
|
|
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
|
|
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:
|
|
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 = {
|