@hmcts/ccd-case-ui-toolkit 6.15.0-c → 6.15.0-e

package/fesm2015/hmcts-ccd-case-ui-toolkit.js

@@ -9359,6 +9359,7 @@ class CaseEditPageComponent {
                             id,
                             message: `Please select Next to complete the ${action} of the ${action === 'update' ? 'selected ' : ''}case flag`
                         });
+                        this.caseEditDataService.setFormValidationErrors(this.validationErrors);
                     }
                     else {
                         this.validationErrors.push({ id, message: `Select or fill the required ${casefield.label} field` });
@@ -11037,6 +11038,13 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
                 });
             }
         }
+        this.caseValidationErrorsSubscription$ = this.caseEditDataService.caseFormValidationErrors$.subscribe({
+            next: (validationErrors) => {
+                if (validationErrors.length) {
+                    this.errorMessages = [];
+                }
+            }
+        });
     }
     setDisplayContextParameterUpdate(caseFields) {
         return caseFields.some(caseField => FieldsUtils.isFlagLauncherCaseField(caseField) && caseField.display_context_parameter === this.updateMode);
@@ -11266,6 +11274,10 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
         this.formGroup.updateValueAndValidity();
         this.caseEditDataService.setTriggerSubmitEvent(true);
     }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.caseValidationErrorsSubscription$) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
 }
 WriteCaseFlagFieldComponent.ɵfac = function WriteCaseFlagFieldComponent_Factory(t) { return new (t || WriteCaseFlagFieldComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseEditDataService)); };
 WriteCaseFlagFieldComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WriteCaseFlagFieldComponent, selectors: [["ccd-write-case-flag-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 3, consts: [["class", "govuk-error-summary", "aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 4, "ngIf"], ["class", "form-group", 3, "formGroup", 4, "ngIf"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], ["class", "govuk-error-summary__body", 4, "ngFor", "ngForOf"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [1, "validation-error", 3, "click"], [1, "form-group", 3, "formGroup"], [1, "govuk-form-group", 3, "ngSwitch"], ["id", "create-flag-caption", 1, "govuk-caption-l", 3, "ngClass"], [4, "ngSwitchCase"], [3, "formGroup", "flagsData", "caseFlagStateEmitter"], [3, "formGroup", "jurisdiction", "caseTypeId", "hmctsServiceId", "caseFlagStateEmitter", "flagCommentsOptionalEmitter"], [3, "formGroup", "languages", "flagCode", "caseFlagStateEmitter"], [3, "formGroup", "optional", "caseFlagStateEmitter"], [3, "formGroup", "flagsData", "caseTitle", "caseFlagStateEmitter"], [3, "formGroup", "selectedFlag", "caseFlagStateEmitter"]], template: function WriteCaseFlagFieldComponent_Template(rf, ctx) { if (rf & 1) {
@@ -19020,8 +19032,9 @@ function SelectFlagTypeComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } }
 class SelectFlagTypeComponent {
-    constructor(caseFlagRefdataService) {
+    constructor(caseFlagRefdataService, caseEditDataService) {
         this.caseFlagRefdataService = caseFlagRefdataService;
+        this.caseEditDataService = caseEditDataService;
         this.caseFlagStateEmitter = new EventEmitter();
         this.flagCommentsOptionalEmitter = new EventEmitter();
         this.flagTypeNotSelectedErrorMessage = '';
@@ -19071,11 +19084,21 @@ class SelectFlagTypeComponent {
                 error: error => this.onRefdataError(error)
             });
         }
+        this.caseValidationErrorsSubscription$ = this.caseEditDataService.caseFormValidationErrors$.subscribe({
+            next: (validationErrors) => {
+                if (validationErrors.length) {
+                    this.errorMessages = [];
+                    this.flagTypeNotSelectedErrorMessage = '';
+                    this.flagTypeErrorMessage = '';
+                }
+            }
+        });
     }
     ngOnDestroy() {
         if (this.flagRefdata$) {
             this.flagRefdata$.unsubscribe();
         }
+        this.caseValidationErrorsSubscription$.unsubscribe();
     }
     onFlagTypeChanged(flagType) {
         this.selectedFlagType = flagType;
@@ -19140,7 +19163,7 @@ class SelectFlagTypeComponent {
         this.caseFlagStateEmitter.emit({ currentCaseFlagFieldState: CaseFlagFieldState.FLAG_TYPE, errorMessages: this.errorMessages });
     }
 }
-SelectFlagTypeComponent.ɵfac = function SelectFlagTypeComponent_Factory(t) { return new (t || SelectFlagTypeComponent)(i0.ɵɵdirectiveInject(CaseFlagRefdataService)); };
+SelectFlagTypeComponent.ɵfac = function SelectFlagTypeComponent_Factory(t) { return new (t || SelectFlagTypeComponent)(i0.ɵɵdirectiveInject(CaseFlagRefdataService), i0.ɵɵdirectiveInject(CaseEditDataService)); };
 SelectFlagTypeComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SelectFlagTypeComponent, selectors: [["ccd-select-flag-type"]], inputs: { formGroup: "formGroup", jurisdiction: "jurisdiction", caseTypeId: "caseTypeId", hmctsServiceId: "hmctsServiceId" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter", flagCommentsOptionalEmitter: "flagCommentsOptionalEmitter" }, decls: 11, vars: 9, consts: [[1, "form-group", 3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "flag-type-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], ["id", "flag-type-heading", 1, "govuk-fieldset__heading"], ["id", "flag-type-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["class", "govuk-radios__conditional", "id", "conditional-flagType", 4, "ngIf"], ["class", "govuk-button-group", 4, "ngIf"], ["id", "flag-type-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName", "change"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["id", "conditional-flagType", 1, "govuk-radios__conditional"], ["for", "other-flag-type-description", 1, "govuk-label"], ["id", "flag-type-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "other-flag-type-description", "type", "text", 1, "govuk-input", "govuk-!-width-one-half", 3, "ngClass", "name", "formControlName"], ["id", "flag-type-error-message", 1, "govuk-error-message"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"]], template: function SelectFlagTypeComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵelementStart(1, "div", 1);
@@ -19181,7 +19204,7 @@ SelectFlagTypeComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SelectFlagTypeCom
                 templateUrl: './select-flag-type.component.html',
                 styleUrls: ['./select-flag-type.component.scss']
             }]
-    }], function () { return [{ type: CaseFlagRefdataService }]; }, { formGroup: [{
+    }], function () { return [{ type: CaseFlagRefdataService }, { type: CaseEditDataService }]; }, { formGroup: [{
             type: Input
         }], jurisdiction: [{
             type: Input
@@ -19555,7 +19578,8 @@ function SelectFlagLocationComponent_div_9_Template(rf, ctx) { if (rf & 1) {
 } }
 const _c0$o = function (a0) { return { "form-group-error": a0 }; };
 class SelectFlagLocationComponent {
-    constructor() {
+    constructor(caseEditDataService) {
+        this.caseEditDataService = caseEditDataService;
         this.caseFlagStateEmitter = new EventEmitter();
         this.errorMessages = [];
         this.flagLocationNotSelectedErrorMessage = null;
@@ -19582,6 +19606,14 @@ class SelectFlagLocationComponent {
             // flags in future)
             this.onCaseFlagsConfigError();
         }
+        this.caseValidationErrorsSubscription$ = this.caseEditDataService.caseFormValidationErrors$.subscribe({
+            next: (validationErrors) => {
+                if (validationErrors.length) {
+                    this.errorMessages = [];
+                    this.flagLocationNotSelectedErrorMessage = null;
+                }
+            }
+        });
     }
     onNext() {
         // Validate flag location selection
@@ -19616,8 +19648,11 @@ class SelectFlagLocationComponent {
         // Return case flag field state and error messages to the parent
         this.caseFlagStateEmitter.emit({ currentCaseFlagFieldState: CaseFlagFieldState.FLAG_TYPE, errorMessages: this.errorMessages });
     }
+    ngOnDestroy() {
+        this.caseValidationErrorsSubscription$.unsubscribe();
+    }
 }
-SelectFlagLocationComponent.ɵfac = function SelectFlagLocationComponent_Factory(t) { return new (t || SelectFlagLocationComponent)(); };
+SelectFlagLocationComponent.ɵfac = function SelectFlagLocationComponent_Factory(t) { return new (t || SelectFlagLocationComponent)(i0.ɵɵdirectiveInject(CaseEditDataService)); };
 SelectFlagLocationComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SelectFlagLocationComponent, selectors: [["ccd-select-flag-location"]], inputs: { formGroup: "formGroup", flagsData: "flagsData" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 10, vars: 8, consts: [[1, "form-group", 3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "flag-location-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], ["id", "flag-location-heading", 1, "govuk-fieldset__heading"], ["id", "flag-location-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["class", "govuk-button-group", 4, "ngIf"], ["id", "flag-location-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for"], [4, "ngIf"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"]], template: function SelectFlagLocationComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵelementStart(1, "div", 1);
@@ -19654,7 +19689,7 @@ SelectFlagLocationComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SelectFlagLoc
                 selector: 'ccd-select-flag-location',
                 templateUrl: './select-flag-location.component.html'
             }]
-    }], null, { formGroup: [{
+    }], function () { return [{ type: CaseEditDataService }]; }, { formGroup: [{
             type: Input
         }], flagsData: [{
             type: Input
@@ -26946,7 +26981,7 @@ function CaseFullAccessViewComponent_ng_container_12_Template(rf, ctx) { if (rf
     const _r34 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "mat-tab-group", 23, 24);
-    i0.ɵɵlistener("selectedTabChange", function CaseFullAccessViewComponent_ng_container_12_Template_mat_tab_group_selectedTabChange_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(); return ctx_r33.tabChanged($event); });
+    i0.ɵɵlistener("selectedIndexChange", function CaseFullAccessViewComponent_ng_container_12_Template_mat_tab_group_selectedIndexChange_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(); return ctx_r33.tabChanged($event); });
     i0.ɵɵtemplate(3, CaseFullAccessViewComponent_ng_container_12_mat_tab_3_Template, 1, 2, "mat-tab", 25);
     i0.ɵɵtemplate(4, CaseFullAccessViewComponent_ng_container_12_mat_tab_4_Template, 2, 2, "mat-tab", 25);
     i0.ɵɵtemplate(5, CaseFullAccessViewComponent_ng_container_12_mat_tab_5_Template, 1, 2, "mat-tab", 25);
@@ -26982,6 +27017,7 @@ class CaseFullAccessViewComponent {
         this.location = location;
         this.crf = crf;
         this.sessionStorageService = sessionStorageService;
+        this.HEARINGS_TAB_LABEL = 'Hearings';
         this.hasPrint = true;
         this.hasEventSelector = true;
         this.prependedTabs = [];
@@ -26993,6 +27029,7 @@ class CaseFullAccessViewComponent {
         this.ignoreWarning = false;
         this.selectedTabIndex = 0;
         this.activeCaseFlags = false;
+        this.subs = [];
         this.callbackErrorsSubject = new Subject();
     }
     ngOnInit() {
@@ -27044,6 +27081,7 @@ class CaseFullAccessViewComponent {
         this.unsubscribe(this.callbackErrorsSubject);
         this.unsubscribe(this.errorSubscription);
         this.unsubscribe(this.subscription);
+        this.subs.forEach(s => s.unsubscribe());
     }
     unsubscribe(subscription) {
         if (subscription) {
@@ -27051,7 +27089,7 @@ class CaseFullAccessViewComponent {
         }
     }
     checkRouteAndSetCaseViewTab() {
-        this.router.events
+        this.subs.push(this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd))
             .subscribe((event) => {
             const url = event && event.url;
@@ -27063,8 +27101,9 @@ class CaseFullAccessViewComponent {
                     this.tabGroup.selectedIndex = matTab.position;
                 }
             }
-        });
+        }));
     }
+    ;
     postViewActivity() {
         return this.activityPollingService.postViewActivity(this.caseDetails.case_id);
     }
@@ -27185,22 +27224,25 @@ class CaseFullAccessViewComponent {
             }
         }
     }
-    tabChanged(tabChangeEvent) {
-        // Update selected tab index
-        this.selectedTabIndex = tabChangeEvent.index;
-        const tab = tabChangeEvent.tab['_viewContainerRef'];
-        const id = tab.element.nativeElement.id;
-        // due to some edge case like hidden tab we can't calculate the last index of existing tabs,
-        // so have to hard code the hearings id here
-        if ((tabChangeEvent.index <= 1 && this.prependedTabs && this.prependedTabs.length) ||
-            (this.appendedTabs && this.appendedTabs.length && id === 'hearings')) {
+    // Refactored under EXUI-110 to address infinite tab loop to use tabIndexChanged instead
+    tabChanged(tabIndexChanged) {
+        const matTab = this.tabGroup._tabs.find(tab => tab.isActive);
+        const tabLabel = matTab.textLabel;
+        // sortedTabs are fragments
+        // appended/prepepended tabs use router navigation
+        if ((tabIndexChanged <= 1 && this.prependedTabs && this.prependedTabs.length) ||
+            (this.appendedTabs && this.appendedTabs.length && tabLabel === this.HEARINGS_TAB_LABEL)) {
+            // Hack to get ID from tab as it's not easily achieved through Angular Material Tabs
+            const tab = matTab['_viewContainerRef'];
+            const id = tab.element.nativeElement.id;
+            // cases/case-details/:caseId/hearings
+            // cases/case-details/:caseId/roles-and-access
             this.router.navigate([id], { relativeTo: this.route });
         }
         else {
-            const label = tabChangeEvent.tab.textLabel;
-            this.router.navigate(['cases', 'case-details', this.caseDetails.case_id]).then(() => {
-                window.location.hash = label;
-            });
+            // Routing here is based on tab label, not ideal
+            // cases/case-details/:caseId#tabLabel
+            this.router.navigate(['cases', 'case-details', this.caseDetails.case_id], { fragment: tabLabel });
         }
     }
     onLinkClicked(triggerOutputEventText) {
@@ -27296,6 +27338,12 @@ class CaseFullAccessViewComponent {
         this.callbackErrorsSubject.next(null);
         this.alertService.clear();
     }
+    getUrlFragment(url) {
+        return url.split('#')[url.split('#').length - 1];
+    }
+    getTabIndexByTabLabel(tabGroup, tabLabel) {
+        return tabGroup._tabs.toArray().findIndex((t) => t.textLabel.toLowerCase() === tabLabel.toLowerCase());
+    }
 }
 CaseFullAccessViewComponent.ORIGIN_QUERY_PARAM = 'origin';
 CaseFullAccessViewComponent.TRIGGER_TEXT_START = 'Go';
@@ -27308,7 +27356,7 @@ CaseFullAccessViewComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CaseFullAcces
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabGroup = _t.first);
-    } }, inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", caseDetails: "caseDetails", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 12, consts: [["class", "error-summary", "role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 4, "ngIf"], [3, "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject", "callbackErrorsContext"], [3, "caseId", "displayMode"], [1, "grid-row"], [1, "column-one-half"], [3, "caseDetails"], ["class", "case-viewer-controls", 4, "ngIf"], ["class", "column-one-half", 4, "ngIf"], ["class", "grid-row", 4, "ngIf"], [1, "column-full"], [4, "ngIf"], ["role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 1, "error-summary"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h1", "error-summary-heading"], ["id", "edit-case-event_error-summary-body", 1, "govuk-error-summary__body"], ["href", "get-help", "target", "_blank"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h2", "error-summary-heading"], ["class", "error-summary-list", 4, "ngIf"], [1, "error-summary-list"], [4, "ngFor", "ngForOf"], [1, "case-viewer-controls"], ["id", "case-viewer-control-print", "routerLink", "print", 1, "button", "button-secondary"], [3, "isDisabled", "triggers", "triggerText", "onTriggerChange", "onTriggerSubmit"], [3, "notificationBannerConfig", "linkClicked"], ["animationDuration", "0ms", 3, "disableRipple", "selectedIndex", "selectedTabChange"], ["tabGroup", ""], [3, "id", "label", 4, "ngFor", "ngForOf"], [3, "id", "label"], ["matTabContent", ""], ["aria-describedby", "case viewer table"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], ["id", "case-viewer-field-label", 4, "ngIf"], ["scope", "col", 3, "id"], [1, "text-16"], [3, "topLevelFormGroup", "caseField", "caseReference", "markdownUseHrefAsRouterLink"], ["id", "case-viewer-field-label"], [1, "case-viewer-label", "text-16"], [1, "compound-field"]], template: function CaseFullAccessViewComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", caseDetails: "caseDetails", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 12, consts: [["class", "error-summary", "role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 4, "ngIf"], [3, "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject", "callbackErrorsContext"], [3, "caseId", "displayMode"], [1, "grid-row"], [1, "column-one-half"], [3, "caseDetails"], ["class", "case-viewer-controls", 4, "ngIf"], ["class", "column-one-half", 4, "ngIf"], ["class", "grid-row", 4, "ngIf"], [1, "column-full"], [4, "ngIf"], ["role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 1, "error-summary"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h1", "error-summary-heading"], ["id", "edit-case-event_error-summary-body", 1, "govuk-error-summary__body"], ["href", "get-help", "target", "_blank"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h2", "error-summary-heading"], ["class", "error-summary-list", 4, "ngIf"], [1, "error-summary-list"], [4, "ngFor", "ngForOf"], [1, "case-viewer-controls"], ["id", "case-viewer-control-print", "routerLink", "print", 1, "button", "button-secondary"], [3, "isDisabled", "triggers", "triggerText", "onTriggerChange", "onTriggerSubmit"], [3, "notificationBannerConfig", "linkClicked"], ["animationDuration", "0ms", 3, "disableRipple", "selectedIndex", "selectedIndexChange"], ["tabGroup", ""], [3, "id", "label", 4, "ngFor", "ngForOf"], [3, "id", "label"], ["matTabContent", ""], ["aria-describedby", "case viewer table"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], ["id", "case-viewer-field-label", 4, "ngIf"], ["scope", "col", 3, "id"], [1, "text-16"], [3, "topLevelFormGroup", "caseField", "caseReference", "markdownUseHrefAsRouterLink"], ["id", "case-viewer-field-label"], [1, "case-viewer-label", "text-16"], [1, "compound-field"]], template: function CaseFullAccessViewComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, CaseFullAccessViewComponent_div_0_Template, 10, 0, "div", 0);
         i0.ɵɵtemplate(1, CaseFullAccessViewComponent_div_1_Template, 6, 2, "div", 0);
         i0.ɵɵelementStart(2, "ccd-callback-errors", 1);