@hmcts/rpx-xui-common-lib 3.2.14-govuk2 → 3.2.14-govuk5
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.
|
@@ -3580,7 +3580,7 @@ class FindServiceComponent {
|
|
|
3580
3580
|
} if (rf & 2) {
|
|
3581
3581
|
let _t;
|
|
3582
3582
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchServiceComponent = _t.first);
|
|
3583
|
-
} }, inputs: { field: "field", serviceTitle: "serviceTitle", form: "form", disabled: "disabled", formSubmissionEvent$: "formSubmissionEvent$" }, outputs: { serviceFieldChanged: "serviceFieldChanged" }, standalone: false, decls: 8, vars: 6, consts: [[1, "service-picker-custom"], [1, "search-service"], [1, "govuk-body"], ["id", "selectServiceSearch-label", "for", "
|
|
3583
|
+
} }, inputs: { field: "field", serviceTitle: "serviceTitle", form: "form", disabled: "disabled", formSubmissionEvent$: "formSubmissionEvent$" }, outputs: { serviceFieldChanged: "serviceFieldChanged" }, standalone: false, decls: 8, vars: 6, consts: [[1, "service-picker-custom"], [1, "search-service"], [1, "govuk-body"], ["id", "selectServiceSearch-label", "for", "inputServiceSearch"], [1, "search-service__input-container"], [1, "search-service__input", 3, "optionChanged", "options", "selectedOptions", "disabled"], ["href", "#", "data-module", "govuk-button", "id", "add-service", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-bottom-0"], [1, "hmcts-filter-tags", "selection-container"], ["href", "#", "data-module", "govuk-button", "id", "add-service", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-bottom-0", 3, "click"], [1, "govuk-visually-hidden"], [1, "location-selection"], ["href", "#", 1, "hmcts-filter__tag", 3, "click"]], template: function FindServiceComponent_Template(rf, ctx) { if (rf & 1) {
|
|
3584
3584
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
|
|
3585
3585
|
i0.ɵɵconditionalCreate(3, FindServiceComponent_Conditional_3_Template, 3, 3, "label", 3);
|
|
3586
3586
|
i0.ɵɵelementEnd();
|
|
@@ -3604,7 +3604,7 @@ class FindServiceComponent {
|
|
|
3604
3604
|
}
|
|
3605
3605
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FindServiceComponent, [{
|
|
3606
3606
|
type: Component,
|
|
3607
|
-
args: [{ selector: 'xuilib-find-service', standalone: false, template: "<div class=\"service-picker-custom\">\n <div class=\"search-service\">\n <div class=\"govuk-body\">\n @if (serviceTitle) {\n <label id=\"selectServiceSearch-label\" for=\"
|
|
3607
|
+
args: [{ selector: 'xuilib-find-service', standalone: false, template: "<div class=\"service-picker-custom\">\n <div class=\"search-service\">\n <div class=\"govuk-body\">\n @if (serviceTitle) {\n <label id=\"selectServiceSearch-label\" for=\"inputServiceSearch\">\n {{ serviceTitle | rpxTranslate}}\n </label>\n }\n </div>\n <div class=\"search-service__input-container\">\n <exui-search-service class=\"search-service__input\"\n [options]=\"field.options\"\n [selectedOptions]=\"selectedServices\"\n [disabled]=\"disabled\"\n (optionChanged)=\"onOptionSelected($event)\">\n </exui-search-service>\n @if (field?.enableAddButton) {\n <a href=\"#\" (click)=\"addOption(tempSelectedService); $event.preventDefault()\"\n class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n id=\"add-service\">\n {{ 'Add' | rpxTranslate}}\n <span class=\"govuk-visually-hidden\">{{'service' | rpxTranslate}}</span>\n </a>\n }\n </div>\n </div>\n @if (field.maxSelected != 1) {\n <ul class=\"hmcts-filter-tags selection-container\">\n @for (selection of selectedServices; track selection) {\n <li class=\"location-selection\">\n <a class=\"hmcts-filter__tag\" href=\"#\" (click)=\"removeOption(selection); $event.preventDefault()\">\n {{ selection.label | rpxTranslate }}\n </a>\n </li>\n }\n </ul>\n }\n</div>\n", styles: ["#add-service{background-color:#ddd}\n"] }]
|
|
3608
3608
|
}], null, { field: [{
|
|
3609
3609
|
type: Input
|
|
3610
3610
|
}], serviceTitle: [{
|
|
@@ -4449,7 +4449,7 @@ function GenericFilterComponent_For_2_Case_3_Case_19_Template(rf, ctx) { if (rf
|
|
|
4449
4449
|
const field_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
4450
4450
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
4451
4451
|
i0.ɵɵproperty("formControlName", field_r1.name)("id", field_r1.name)("readonly", field_r1.readonly);
|
|
4452
|
-
i0.ɵɵattribute("disabled", ctx_r2.disabled(field_r1, ctx_r2.form))("maxlength", field_r1.maxlength ? field_r1.maxlength : null);
|
|
4452
|
+
i0.ɵɵattribute("aria-labelledby", field_r1.name + "-label")("disabled", ctx_r2.disabled(field_r1, ctx_r2.form))("maxlength", field_r1.maxlength ? field_r1.maxlength : null);
|
|
4453
4453
|
} }
|
|
4454
4454
|
function GenericFilterComponent_For_2_Case_3_Case_20_Template(rf, ctx) { if (rf & 1) {
|
|
4455
4455
|
const _r25 = i0.ɵɵgetCurrentView();
|
|
@@ -4460,7 +4460,7 @@ function GenericFilterComponent_For_2_Case_3_Case_20_Template(rf, ctx) { if (rf
|
|
|
4460
4460
|
const field_r1 = i0.ɵɵnextContext(2).$implicit;
|
|
4461
4461
|
const ctx_r2 = i0.ɵɵnextContext();
|
|
4462
4462
|
i0.ɵɵproperty("formControlName", field_r1.name)("id", field_r1.name)("readonly", field_r1.readonly);
|
|
4463
|
-
i0.ɵɵattribute("disabled", ctx_r2.disabled(field_r1, ctx_r2.form));
|
|
4463
|
+
i0.ɵɵattribute("aria-labelledby", field_r1.name + "-label")("disabled", ctx_r2.disabled(field_r1, ctx_r2.form));
|
|
4464
4464
|
} }
|
|
4465
4465
|
function GenericFilterComponent_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
|
|
4466
4466
|
i0.ɵɵelementStart(0, "div", 9);
|
|
@@ -4471,7 +4471,7 @@ function GenericFilterComponent_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
4471
4471
|
i0.ɵɵconditionalCreate(5, GenericFilterComponent_For_2_Case_3_Conditional_5_Template, 6, 7, "span", 13);
|
|
4472
4472
|
i0.ɵɵconditionalCreate(6, GenericFilterComponent_For_2_Case_3_Conditional_6_Template, 6, 7, "span", 13);
|
|
4473
4473
|
i0.ɵɵelementStart(7, "div", 11);
|
|
4474
|
-
i0.ɵɵconditionalCreate(8, GenericFilterComponent_For_2_Case_3_Case_8_Template, 6, 7, "select", 14)(9, GenericFilterComponent_For_2_Case_3_Case_9_Template, 6, 7, "select", 14)(10, GenericFilterComponent_For_2_Case_3_Case_10_Template, 3, 4, "div", 15)(11, GenericFilterComponent_For_2_Case_3_Case_11_Template, 3, 4, "div", 15)(12, GenericFilterComponent_For_2_Case_3_Case_12_Template, 3, 4, "div", 16)(13, GenericFilterComponent_For_2_Case_3_Case_13_Template, 3, 1, "div", 17)(14, GenericFilterComponent_For_2_Case_3_Case_14_Template, 1, 8, "xuilib-find-person", 18)(15, GenericFilterComponent_For_2_Case_3_Case_15_Template, 1, 10, "xuilib-find-location", 19)(16, GenericFilterComponent_For_2_Case_3_Case_16_Template, 1, 7, "xuilib-find-task-name", 20)(17, GenericFilterComponent_For_2_Case_3_Case_17_Template, 2, 5)(18, GenericFilterComponent_For_2_Case_3_Case_18_Template, 1, 10, "xuilib-find-work-type", 21)(19, GenericFilterComponent_For_2_Case_3_Case_19_Template, 1,
|
|
4474
|
+
i0.ɵɵconditionalCreate(8, GenericFilterComponent_For_2_Case_3_Case_8_Template, 6, 7, "select", 14)(9, GenericFilterComponent_For_2_Case_3_Case_9_Template, 6, 7, "select", 14)(10, GenericFilterComponent_For_2_Case_3_Case_10_Template, 3, 4, "div", 15)(11, GenericFilterComponent_For_2_Case_3_Case_11_Template, 3, 4, "div", 15)(12, GenericFilterComponent_For_2_Case_3_Case_12_Template, 3, 4, "div", 16)(13, GenericFilterComponent_For_2_Case_3_Case_13_Template, 3, 1, "div", 17)(14, GenericFilterComponent_For_2_Case_3_Case_14_Template, 1, 8, "xuilib-find-person", 18)(15, GenericFilterComponent_For_2_Case_3_Case_15_Template, 1, 10, "xuilib-find-location", 19)(16, GenericFilterComponent_For_2_Case_3_Case_16_Template, 1, 7, "xuilib-find-task-name", 20)(17, GenericFilterComponent_For_2_Case_3_Case_17_Template, 2, 5)(18, GenericFilterComponent_For_2_Case_3_Case_18_Template, 1, 10, "xuilib-find-work-type", 21)(19, GenericFilterComponent_For_2_Case_3_Case_19_Template, 1, 6, "input", 22)(20, GenericFilterComponent_For_2_Case_3_Case_20_Template, 1, 5, "input", 23);
|
|
4475
4475
|
i0.ɵɵelementEnd()();
|
|
4476
4476
|
} if (rf & 2) {
|
|
4477
4477
|
let tmp_13_0;
|
|
@@ -5192,7 +5192,7 @@ class GenericFilterComponent {
|
|
|
5192
5192
|
}
|
|
5193
5193
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericFilterComponent, [{
|
|
5194
5194
|
type: Component,
|
|
5195
|
-
args: [{ selector: 'xuilib-generic-filter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n @for (field of config.fields; track field) {\n <div class=\"contain-classes\">\n @if (field.lineBreakBefore) {\n <hr class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n }\n @switch (field.type) {\n @case ('group-title') {\n <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n {{ field.name | capitalize }}\n </div>\n }\n @default {\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?.required || form.get(field.name).errors?.minlength || form.get(field.name).errors?.maxLength)}\">\n @if (field.title) {\n <div class=\"xui-generic-filter__field-title\">\n <h3 [id]=\"field.name + '-label'\" [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n {{field.title | capitalize}}\n </h3>\n @if (field?.titleHint) {\n <div class=\"govuk-!-margin-left-2\">\n {{ field.titleHint }}\n </div>\n }\n </div>\n }\n @if (field.subTitle) {\n <p class=\"govuk-body\">{{field.subTitle}}</p>\n }\n @if (field.hintText) {\n <div\n [id]=\"field.hintText + '-hint'\" class=\"govuk-hint\">\n {{ field.hintText | rpxTranslate }}\n </div>\n }\n @if (field.displayMinSelectedError && submitted && (form.get(field.name).errors?.required || form.get(field.name).errors?.minlength)) {\n <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate}}</span> {{field.minSelectedError | rpxTranslate }}\n </span>\n }\n @if (field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength) {\n <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate}}</span> {{field.maxSelectedError | rpxTranslate }}\n </span>\n }\n @if (field.emailError && submitted && form.get(field.name).errors?.email) {\n <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n >\n <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }}</span> {{field.emailError | rpxTranslate }}\n </span>\n }\n <div class=\"govuk-body\" [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\">\n @switch (field.type) {\n @case ('select') {\n <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [attr.aria-labelledby]=\"field.name + '-label'\" [formControlName]=\"field.name\">\n <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n @if (field.defaultOption) {\n <option [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n }\n @for (item of field.options; track item) {\n <option class=\"govuk-radios__item\" [value]=\"item.key\">{{item.label}}</option>\n }\n </select>\n }\n @case ('group-select') {\n <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [attr.aria-labelledby]=\"field.name + '-label'\" [formControlName]=\"field.name\">\n <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n @if (field.defaultOption) {\n <option selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n }\n @for (grp of filteredSkillsByServices; track grp) {\n <optgroup label=\"{{grp.group | titlecase}}\">\n @for (item of grp.options; track item) {\n <option [value]=\"item.key\">{{item.label}}</option>\n }\n </optgroup>\n }\n </select>\n }\n @case ('checkbox') {\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n @for (item of field.options; track item; let i = $index) {\n <div 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_' + field.name + item.key\"\n [name]=\"'checkbox_' + field.name + item.key\"\n />\n <label\n [for]=\"'checkbox_' + field.name + item.key\"\n class=\"govuk-label govuk-checkboxes__label\"\n [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n >{{item.label}}</label>\n </div>\n }\n </div>\n }\n @case ('nested-checkbox') {\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n @for (item of filteredSkillsByServicesCheckbox; track item; let i = $index) {\n <div 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_' + field.name + item.key\"\n [name]=\"'checkbox_' + field.name + item.key\"\n />\n <label\n [for]=\"'checkbox_' + field.name + item.key\"\n class=\"govuk-label govuk-checkboxes__label\"\n [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n >{{item.label | rpxTranslate}}</label>\n </div>\n }\n </div>\n }\n @case ('checkbox-large') {\n <div class=\"govuk-checkboxes\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n @for (item of field.options; track item; let i = $index) {\n <div 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_' + field.name + item.key\"\n [name]=\"'checkbox_' + field.name + item.key\"\n />\n <label\n [for]=\"'checkbox_' + field.name + item.key\"\n class=\"govuk-label govuk-checkboxes__label\"\n [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n >{{item.label | rpxTranslate}}</label>\n </div>\n }\n </div>\n }\n @case ('radio') {\n <div class=\"govuk-radios\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\">\n @for (item of field.options; track item) {\n <div 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 | rpxTranslate}}</label>\n </div>\n }\n </div>\n }\n @case ('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 [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n [services]=\"form.get(field.servicesField)?.value\"\n ></xuilib-find-person>\n }\n @case ('find-location') {\n <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n [form]=\"form\"\n [fields]=\"config.fields\"\n [locationTitle]=\"field.locationTitle || 'Search for a location by name'\"\n [enableAddLocationButton]=\"field.enableAddButton\"\n [disabled]=\"disabled(field, form)\"\n [disableInputField]=\"field.disable\"\n [submitted]=\"submitted\"\n [field]=\"field\"\n [services]=\"form.get(field.findLocationField)?.value\"\n [formSubmissionEvent$]=\"formSubmissionEvent$\"\n ></xuilib-find-location>\n }\n @case ('find-task-name') {\n <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n (taskNameFieldChanged)=\"inputChanged(field)\"\n [submitted]=\"submitted\"\n [disabled]=\"disabled(field, form)\"\n [domain]=\"form.get(field.domainField)?.value\"\n [findTaskNameGroup]=\"form\"\n [selectedTaskName]=\"form.get(field.name)?.value?.task_type_name\"\n [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n [services]=\"form.get(field.servicesField)?.value\"\n ></xuilib-find-task-name>\n }\n @case ('find-service') {\n @if (isServiceSelected) {\n <span class=\"govuk-error-message\">{{serviceErrorMsg | rpxTranslate}}</span>\n }\n <xuilib-find-service (serviceFieldChanged)=\"inputServiceChanged(field)\"\n [field]=\"field\"\n [form]=\"form\"\n [formSubmissionEvent$]=\"formSubmissionEvent$\"\n [disabled]=\"disabled(field, form)\">\n </xuilib-find-service>\n }\n @case ('find-work-type') {\n <xuilib-find-work-type (workTypeFieldChanged)=\"inputChanged(field)\"\n [form]=\"form\"\n [fields]=\"config.fields\"\n [workTypeTitle]=\"field.workTypeTitle || 'Search for a work type by name'\"\n [enableAddWorkTypeButton]=\"field.enableAddButton\"\n [disabled]=\"disabled(field, form)\"\n [disableInputField]=\"field.disable\"\n [submitted]=\"submitted\"\n [field]=\"field\"\n [services]=\"form.get(field.findWorkTypeField)?.value\"\n [formSubmissionEvent$]=\"formSubmissionEvent$\"\n ></xuilib-find-work-type>\n }\n @case ('text-input') {\n <input class=\"govuk-input\" type=\"text\"\n [formControlName]=\"field.name\"\n [id]=\"field.name\"\n [attr.disabled]=\"disabled(field, form)\"\n (change)=\"fieldChanged(field, form)\"\n [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n [readonly]=\"field.readonly\"\n />\n }\n @case ('email-input') {\n <input class=\"govuk-input\" type=\"email\"\n [formControlName]=\"field.name\"\n [id]=\"field.name\"\n [attr.disabled]=\"disabled(field, form)\"\n (change)=\"fieldChanged(field, form)\"\n [readonly]=\"field.readonly\"\n />\n }\n }\n </div>\n </div>\n }\n }\n </div>\n }\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') | rpxTranslate}}</button>\n @if (config.showCancelFilterButton) {\n <button\n class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n type=\"button\"\n id=\"cancelFilter\"\n (click)=\"cancelFilter()\">{{ (config.cancelButtonText || 'Cancel') | rpxTranslate}}</button>\n }\n </div>\n </div>\n</form>\n", styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width: 40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .govuk-body--maxWidth480px{max-width:480px}.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 .xui-generic-filter__field-title{display:flex;align-items:center;margin-bottom:10px}.contain-classes .govuk-select{width:100%}\n"] }]
|
|
5195
|
+
args: [{ selector: 'xuilib-generic-filter', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n @for (field of config.fields; track field) {\n <div class=\"contain-classes\">\n @if (field.lineBreakBefore) {\n <hr class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n }\n @switch (field.type) {\n @case ('group-title') {\n <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n {{ field.name | capitalize }}\n </div>\n }\n @default {\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?.required || form.get(field.name).errors?.minlength || form.get(field.name).errors?.maxLength)}\">\n @if (field.title) {\n <div class=\"xui-generic-filter__field-title\">\n <h3 [id]=\"field.name + '-label'\" [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n {{field.title | capitalize}}\n </h3>\n @if (field?.titleHint) {\n <div class=\"govuk-!-margin-left-2\">\n {{ field.titleHint }}\n </div>\n }\n </div>\n }\n @if (field.subTitle) {\n <p class=\"govuk-body\">{{field.subTitle}}</p>\n }\n @if (field.hintText) {\n <div\n [id]=\"field.hintText + '-hint'\" class=\"govuk-hint\">\n {{ field.hintText | rpxTranslate }}\n </div>\n }\n @if (field.displayMinSelectedError && submitted && (form.get(field.name).errors?.required || form.get(field.name).errors?.minlength)) {\n <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate}}</span> {{field.minSelectedError | rpxTranslate }}\n </span>\n }\n @if (field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength) {\n <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate}}</span> {{field.maxSelectedError | rpxTranslate }}\n </span>\n }\n @if (field.emailError && submitted && form.get(field.name).errors?.email) {\n <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n >\n <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }}</span> {{field.emailError | rpxTranslate }}\n </span>\n }\n <div class=\"govuk-body\" [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\">\n @switch (field.type) {\n @case ('select') {\n <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [attr.aria-labelledby]=\"field.name + '-label'\" [formControlName]=\"field.name\">\n <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n @if (field.defaultOption) {\n <option [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n }\n @for (item of field.options; track item) {\n <option class=\"govuk-radios__item\" [value]=\"item.key\">{{item.label}}</option>\n }\n </select>\n }\n @case ('group-select') {\n <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [attr.aria-labelledby]=\"field.name + '-label'\" [formControlName]=\"field.name\">\n <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n @if (field.defaultOption) {\n <option selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n }\n @for (grp of filteredSkillsByServices; track grp) {\n <optgroup label=\"{{grp.group | titlecase}}\">\n @for (item of grp.options; track item) {\n <option [value]=\"item.key\">{{item.label}}</option>\n }\n </optgroup>\n }\n </select>\n }\n @case ('checkbox') {\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n @for (item of field.options; track item; let i = $index) {\n <div 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_' + field.name + item.key\"\n [name]=\"'checkbox_' + field.name + item.key\"\n />\n <label\n [for]=\"'checkbox_' + field.name + item.key\"\n class=\"govuk-label govuk-checkboxes__label\"\n [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n >{{item.label}}</label>\n </div>\n }\n </div>\n }\n @case ('nested-checkbox') {\n <div class=\"govuk-checkboxes govuk-checkboxes--small\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n @for (item of filteredSkillsByServicesCheckbox; track item; let i = $index) {\n <div 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_' + field.name + item.key\"\n [name]=\"'checkbox_' + field.name + item.key\"\n />\n <label\n [for]=\"'checkbox_' + field.name + item.key\"\n class=\"govuk-label govuk-checkboxes__label\"\n [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n >{{item.label | rpxTranslate}}</label>\n </div>\n }\n </div>\n }\n @case ('checkbox-large') {\n <div class=\"govuk-checkboxes\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n @for (item of field.options; track item; let i = $index) {\n <div 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_' + field.name + item.key\"\n [name]=\"'checkbox_' + field.name + item.key\"\n />\n <label\n [for]=\"'checkbox_' + field.name + item.key\"\n class=\"govuk-label govuk-checkboxes__label\"\n [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n >{{item.label | rpxTranslate}}</label>\n </div>\n }\n </div>\n }\n @case ('radio') {\n <div class=\"govuk-radios\" role=\"group\" [attr.aria-labelledby]=\"field.name + '-label'\">\n @for (item of field.options; track item) {\n <div 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 | rpxTranslate}}</label>\n </div>\n }\n </div>\n }\n @case ('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 [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n [services]=\"form.get(field.servicesField)?.value\"\n ></xuilib-find-person>\n }\n @case ('find-location') {\n <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n [form]=\"form\"\n [fields]=\"config.fields\"\n [locationTitle]=\"field.locationTitle || 'Search for a location by name'\"\n [enableAddLocationButton]=\"field.enableAddButton\"\n [disabled]=\"disabled(field, form)\"\n [disableInputField]=\"field.disable\"\n [submitted]=\"submitted\"\n [field]=\"field\"\n [services]=\"form.get(field.findLocationField)?.value\"\n [formSubmissionEvent$]=\"formSubmissionEvent$\"\n ></xuilib-find-location>\n }\n @case ('find-task-name') {\n <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n (taskNameFieldChanged)=\"inputChanged(field)\"\n [submitted]=\"submitted\"\n [disabled]=\"disabled(field, form)\"\n [domain]=\"form.get(field.domainField)?.value\"\n [findTaskNameGroup]=\"form\"\n [selectedTaskName]=\"form.get(field.name)?.value?.task_type_name\"\n [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n [services]=\"form.get(field.servicesField)?.value\"\n ></xuilib-find-task-name>\n }\n @case ('find-service') {\n @if (isServiceSelected) {\n <span class=\"govuk-error-message\">{{serviceErrorMsg | rpxTranslate}}</span>\n }\n <xuilib-find-service (serviceFieldChanged)=\"inputServiceChanged(field)\"\n [field]=\"field\"\n [form]=\"form\"\n [formSubmissionEvent$]=\"formSubmissionEvent$\"\n [disabled]=\"disabled(field, form)\">\n </xuilib-find-service>\n }\n @case ('find-work-type') {\n <xuilib-find-work-type (workTypeFieldChanged)=\"inputChanged(field)\"\n [form]=\"form\"\n [fields]=\"config.fields\"\n [workTypeTitle]=\"field.workTypeTitle || 'Search for a work type by name'\"\n [enableAddWorkTypeButton]=\"field.enableAddButton\"\n [disabled]=\"disabled(field, form)\"\n [disableInputField]=\"field.disable\"\n [submitted]=\"submitted\"\n [field]=\"field\"\n [services]=\"form.get(field.findWorkTypeField)?.value\"\n [formSubmissionEvent$]=\"formSubmissionEvent$\"\n ></xuilib-find-work-type>\n }\n @case ('text-input') {\n <input class=\"govuk-input\" type=\"text\"\n [formControlName]=\"field.name\"\n [id]=\"field.name\"\n [attr.aria-labelledby]=\"field.name + '-label'\"\n [attr.disabled]=\"disabled(field, form)\"\n (change)=\"fieldChanged(field, form)\"\n [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n [readonly]=\"field.readonly\"\n />\n }\n @case ('email-input') {\n <input class=\"govuk-input\" type=\"email\"\n [formControlName]=\"field.name\"\n [id]=\"field.name\"\n [attr.aria-labelledby]=\"field.name + '-label'\"\n [attr.disabled]=\"disabled(field, form)\"\n (change)=\"fieldChanged(field, form)\"\n [readonly]=\"field.readonly\"\n />\n }\n }\n </div>\n </div>\n }\n }\n </div>\n }\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') | rpxTranslate}}</button>\n @if (config.showCancelFilterButton) {\n <button\n class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n type=\"button\"\n id=\"cancelFilter\"\n (click)=\"cancelFilter()\">{{ (config.cancelButtonText || 'Cancel') | rpxTranslate}}</button>\n }\n </div>\n </div>\n</form>\n", styles: [".contain-classes .elevated-break{margin-bottom:20px}@media (min-width: 40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .govuk-body--maxWidth480px{max-width:480px}.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 .xui-generic-filter__field-title{display:flex;align-items:center;margin-bottom:10px}.contain-classes .govuk-select{width:100%}\n"] }]
|
|
5196
5196
|
}], () => [{ type: FilterService }, { type: i2$3.FormBuilder }, { type: i0.ChangeDetectorRef }], { config: [{
|
|
5197
5197
|
type: Input
|
|
5198
5198
|
}], settings: [{
|