@hmcts/ccd-case-ui-toolkit 4.3.2-EUI-4424-date-pickers-working-as-expected-r4 → 4.3.4

package/RELEASE-NOTES.md

@@ -1,10 +1,7 @@
 ## RELEASE NOTES
 
-### Version 4.0.0-value-disappearing
-**EUI-4364** Values disappearing after mid event callback when modifying case data
-
-### Version 4.1.6-EUI-4343-case-field-validation-red-bar-missing
-**EUI-4343** CCD case field validation indicator missing in WA2 release 2 part2 branch
+### Version 4.3.4
+**EUI-4210** Automated Test Failures
 
 ### Version 4.1.6-EUI-3528-4205-RHF-enhancements
 **EUI-3528** "Retain Hidden Value" support for DynamicList fields, _only_ for `retain_hidden_value` flag set to `false` or unspecified
@@ -117,9 +114,6 @@ fixed an issue with the rendering of complex collections on the Case Details tab
 **EUI-3581** Field interpolation does not work for the field type MultiSelectList
 **EUI-4244** SSCS - Midevent callbacks sending empty fields for optional empty document
 
-### Version 4.0.0-prepended-tabs-v3
-**EUI-3777** Create prepended tabs on case view
-
 ### Version 4.0.0
 **EUI-4227** Fixed an error with show/hide not working quite right in some configurations.
 **EUI-2022** ExUI - Error Messages (Complex Type)

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 /**
  * @hmcts/ccd-case-ui-toolkit - Case UI Toolkit
- * @version v4.3.2-EUI-4424-date-pickers-working-as-expected-r4
+ * @version v4.3.4
  * @link undefined
  * @license MIT
  */
@@ -5194,468 +5194,6 @@ var NgxMatNativeDateModule = /** @class */ (function () {
 
 //# sourceMappingURL=angular-material-components-datetime-picker.js.map
 
-/***/ }),
-
-/***/ 16153:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS": () => /* binding */ NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS,
-/* harmony export */   "NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY": () => /* binding */ NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY,
-/* harmony export */   "NGX_MAT_MOMENT_FORMATS": () => /* binding */ NGX_MAT_MOMENT_FORMATS,
-/* harmony export */   "NgxMatMomentAdapter": () => /* binding */ NgxMatMomentAdapter,
-/* harmony export */   "NgxMatMomentModule": () => /* binding */ NgxMatMomentModule,
-/* harmony export */   "NgxMomentDateModule": () => /* binding */ NgxMomentDateModule
-/* harmony export */ });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(57208);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _angular_material_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(36080);
-/* harmony import */ var _angular_material_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_angular_material_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(30381);
-/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _angular_material_components_datetime_picker__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(99101);
-
-
-
-
-
-
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/moment-adapter.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const moment = (moment__WEBPACK_IMPORTED_MODULE_2___default()) || moment__WEBPACK_IMPORTED_MODULE_2__;
-/**
- * Configurable options for {\@see MomentDateAdapter}.
- * @record
- */
-function NgxMatMomentDateAdapterOptions() { }
-if (false) {}
-/**
- * InjectionToken for moment date adapter to configure options.
- * @type {?}
- */
-const NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS = new _angular_core__WEBPACK_IMPORTED_MODULE_0__.InjectionToken('NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS', {
-    providedIn: 'root',
-    factory: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY
-});
-/**
- * \@docs-private
- * @return {?}
- */
-function NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY() {
-    return {
-        useUtc: false
-    };
-}
-/**
- * Creates an array and fills it with values.
- * @template T
- * @param {?} length
- * @param {?} valueFunction
- * @return {?}
- */
-function range(length, valueFunction) {
-    /** @type {?} */
-    const valuesArray = Array(length);
-    for (let i = 0; i < length; i++) {
-        valuesArray[i] = valueFunction(i);
-    }
-    return valuesArray;
-}
-/**
- * Adapts Moment.js Dates for use with Angular Material.
- */
-class NgxMatMomentAdapter extends _angular_material_components_datetime_picker__WEBPACK_IMPORTED_MODULE_3__.NgxMatDateAdapter {
-    /**
-     * @param {?} dateLocale
-     * @param {?=} _options
-     */
-    constructor(dateLocale, _options) {
-        super();
-        this._options = _options;
-        this.setLocale(dateLocale || moment.locale());
-    }
-    /**
-     * @param {?} locale
-     * @return {?}
-     */
-    setLocale(locale) {
-        super.setLocale(locale);
-        /** @type {?} */
-        let momentLocaleData = moment.localeData(locale);
-        this._localeData = {
-            firstDayOfWeek: momentLocaleData.firstDayOfWeek(),
-            longMonths: momentLocaleData.months(),
-            shortMonths: momentLocaleData.monthsShort(),
-            dates: range(31, (/**
-             * @param {?} i
-             * @return {?}
-             */
-            (i) => this.createDate(2017, 0, i + 1).format('D'))),
-            longDaysOfWeek: momentLocaleData.weekdays(),
-            shortDaysOfWeek: momentLocaleData.weekdaysShort(),
-            narrowDaysOfWeek: momentLocaleData.weekdaysMin(),
-        };
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getYear(date) {
-        return this.clone(date).year();
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getMonth(date) {
-        return this.clone(date).month();
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getDate(date) {
-        return this.clone(date).date();
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getDayOfWeek(date) {
-        return this.clone(date).day();
-    }
-    /**
-     * @param {?} style
-     * @return {?}
-     */
-    getMonthNames(style) {
-        // Moment.js doesn't support narrow month names, so we just use short if narrow is requested.
-        return style == 'long' ? this._localeData.longMonths : this._localeData.shortMonths;
-    }
-    /**
-     * @return {?}
-     */
-    getDateNames() {
-        return this._localeData.dates;
-    }
-    /**
-     * @param {?} style
-     * @return {?}
-     */
-    getDayOfWeekNames(style) {
-        if (style == 'long') {
-            return this._localeData.longDaysOfWeek;
-        }
-        if (style == 'short') {
-            return this._localeData.shortDaysOfWeek;
-        }
-        return this._localeData.narrowDaysOfWeek;
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getYearName(date) {
-        return this.clone(date).format('YYYY');
-    }
-    /**
-     * @return {?}
-     */
-    getFirstDayOfWeek() {
-        return this._localeData.firstDayOfWeek;
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getNumDaysInMonth(date) {
-        return this.clone(date).daysInMonth();
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    clone(date) {
-        return date.clone().locale(this.locale);
-    }
-    /**
-     * @param {?} year
-     * @param {?} month
-     * @param {?} date
-     * @return {?}
-     */
-    createDate(year, month, date) {
-        // Moment.js will create an invalid date if any of the components are out of bounds, but we
-        // explicitly check each case so we can throw more descriptive errors.
-        if (month < 0 || month > 11) {
-            throw Error(`Invalid month index "${month}". Month index has to be between 0 and 11.`);
-        }
-        if (date < 1) {
-            throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
-        }
-        /** @type {?} */
-        const result = this._createMoment({ year, month, date }).locale(this.locale);
-        // If the result isn't valid, the date must have been out of bounds for this month.
-        if (!result.isValid()) {
-            throw Error(`Invalid date "${date}" for month with index "${month}".`);
-        }
-        return result;
-    }
-    /**
-     * @return {?}
-     */
-    today() {
-        return this._createMoment().locale(this.locale);
-    }
-    /**
-     * @param {?} value
-     * @param {?} parseFormat
-     * @return {?}
-     */
-    parse(value, parseFormat) {
-        if (value && typeof value == 'string') {
-            return this._createMoment(value, parseFormat, this.locale);
-        }
-        return value ? this._createMoment(value).locale(this.locale) : null;
-    }
-    /**
-     * @param {?} date
-     * @param {?} displayFormat
-     * @return {?}
-     */
-    format(date, displayFormat) {
-        date = this.clone(date);
-        if (!this.isValid(date)) {
-            throw Error('MomentDateAdapter: Cannot format invalid date.');
-        }
-        return date.format(displayFormat);
-    }
-    /**
-     * @param {?} date
-     * @param {?} years
-     * @return {?}
-     */
-    addCalendarYears(date, years) {
-        return this.clone(date).add({ years });
-    }
-    /**
-     * @param {?} date
-     * @param {?} months
-     * @return {?}
-     */
-    addCalendarMonths(date, months) {
-        return this.clone(date).add({ months });
-    }
-    /**
-     * @param {?} date
-     * @param {?} days
-     * @return {?}
-     */
-    addCalendarDays(date, days) {
-        return this.clone(date).add({ days });
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    toIso8601(date) {
-        return this.clone(date).format();
-    }
-    /**
-     * Returns the given value if given a valid Moment or null. Deserializes valid ISO 8601 strings
-     * (https://www.ietf.org/rfc/rfc3339.txt) and valid Date objects into valid Moments and empty
-     * string into null. Returns an invalid date for all other values.
-     * @param {?} value
-     * @return {?}
-     */
-    deserialize(value) {
-        /** @type {?} */
-        let date;
-        if (value instanceof Date) {
-            date = this._createMoment(value).locale(this.locale);
-        }
-        else if (this.isDateInstance(value)) {
-            // Note: assumes that cloning also sets the correct locale.
-            return this.clone(value);
-        }
-        if (typeof value === 'string') {
-            if (!value) {
-                return null;
-            }
-            date = this._createMoment(value, moment.ISO_8601).locale(this.locale);
-        }
-        if (date && this.isValid(date)) {
-            return this._createMoment(date).locale(this.locale);
-        }
-        return super.deserialize(value);
-    }
-    /**
-     * @param {?} obj
-     * @return {?}
-     */
-    isDateInstance(obj) {
-        return moment.isMoment(obj);
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    isValid(date) {
-        return this.clone(date).isValid();
-    }
-    /**
-     * @return {?}
-     */
-    invalid() {
-        return moment.invalid();
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getHour(date) {
-        return date.hours();
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getMinute(date) {
-        return date.minutes();
-    }
-    /**
-     * @param {?} date
-     * @return {?}
-     */
-    getSecond(date) {
-        return date.seconds();
-    }
-    /**
-     * @param {?} date
-     * @param {?} value
-     * @return {?}
-     */
-    setHour(date, value) {
-        date.hours(value);
-    }
-    /**
-     * @param {?} date
-     * @param {?} value
-     * @return {?}
-     */
-    setMinute(date, value) {
-        date.minutes(value);
-    }
-    /**
-     * @param {?} date
-     * @param {?} value
-     * @return {?}
-     */
-    setSecond(date, value) {
-        date.seconds(value);
-    }
-    /**
-     * Creates a Moment instance while respecting the current UTC settings.
-     * @private
-     * @param {?} date
-     * @param {?=} format
-     * @param {?=} locale
-     * @return {?}
-     */
-    _createMoment(date, format, locale) {
-        const { strict, useUtc } = this._options || {};
-        return useUtc
-            ? moment.utc(date, format, locale, strict)
-            : moment(date, format, locale, strict);
-    }
-}
-NgxMatMomentAdapter.decorators = [
-    { type: _angular_core__WEBPACK_IMPORTED_MODULE_0__.Injectable }
-];
-/** @nocollapse */
-NgxMatMomentAdapter.ctorParameters = () => [
-    { type: String, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__.Optional }, { type: _angular_core__WEBPACK_IMPORTED_MODULE_0__.Inject, args: [_angular_material_core__WEBPACK_IMPORTED_MODULE_1__.MAT_DATE_LOCALE,] }] },
-    { type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__.Optional }, { type: _angular_core__WEBPACK_IMPORTED_MODULE_0__.Inject, args: [NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS,] }] }
-];
-if (false) {}
-
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/moment-formats.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-/** @type {?} */
-const DEFAULT_DATE_INPUT = 'l, LTS';
-/** @type {?} */
-const NGX_MAT_MOMENT_FORMATS = {
-    parse: {
-        dateInput: DEFAULT_DATE_INPUT,
-    },
-    display: {
-        dateInput: DEFAULT_DATE_INPUT,
-        monthYearLabel: 'MMM YYYY',
-        dateA11yLabel: 'LL',
-        monthYearA11yLabel: 'MMMM YYYY',
-    },
-};
-
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/moment-adapter.module.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NgxMomentDateModule {
-}
-NgxMomentDateModule.decorators = [
-    { type: _angular_core__WEBPACK_IMPORTED_MODULE_0__.NgModule, args: [{
-                providers: [
-                    {
-                        provide: _angular_material_components_datetime_picker__WEBPACK_IMPORTED_MODULE_3__.NgxMatDateAdapter,
-                        useClass: NgxMatMomentAdapter,
-                        deps: [_angular_material_core__WEBPACK_IMPORTED_MODULE_1__.MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
-                    }
-                ],
-            },] }
-];
-const ɵ0 = NGX_MAT_MOMENT_FORMATS;
-class NgxMatMomentModule {
-}
-NgxMatMomentModule.decorators = [
-    { type: _angular_core__WEBPACK_IMPORTED_MODULE_0__.NgModule, args: [{
-                imports: [NgxMomentDateModule],
-                providers: [{ provide: _angular_material_components_datetime_picker__WEBPACK_IMPORTED_MODULE_3__.NGX_MAT_DATE_FORMATS, useValue: ɵ0 }],
-            },] }
-];
-
-/**
- * @fileoverview added by tsickle
- * Generated from: public-api.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * Generated from: angular-material-components-moment-adapter.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-
-//# sourceMappingURL=angular-material-components-moment-adapter.js.map
-
-
 /***/ }),
 
 /***/ 86220:
@@ -12232,8 +11770,10 @@ var ActivityComponent = /** @class */ (function () {
         return (this.activity.editors.length > 0 || this.activity.unknownEditors > 0);
     };
     ActivityComponent.prototype.ngOnDestroy = function () {
-        this.subscription.complete();
-        this.subscription.unsubscribe();
+        if (this.subscription) {
+            this.subscription.complete();
+            this.subscription.unsubscribe();
+        }
         this.activityPollingService.stopPolling();
     };
     ActivityComponent.prototype.generateDescription = function (prefix, suffix, namesArray, unknownCount) {
@@ -12580,8 +12120,12 @@ var CaseEditFormComponent = /** @class */ (function () {
         this.valuesChanged = new core_1.EventEmitter();
     }
     CaseEditFormComponent.prototype.ngOnDestroy = function () {
-        this.pageChangeSubscription.unsubscribe();
-        this.formGroupChangeSubscription.unsubscribe();
+        if (this.pageChangeSubscription) {
+            this.pageChangeSubscription.unsubscribe();
+        }
+        if (this.formGroupChangeSubscription) {
+            this.formGroupChangeSubscription.unsubscribe();
+        }
     };
     // We need the below un/subscribe complexity as we do not have proper page component per page with its AfterViewInit hook
     // being called on each page load. This is done for "Cancel and return" modal from RDM-2302.
@@ -12589,7 +12133,9 @@ var CaseEditFormComponent = /** @class */ (function () {
         var _this = this;
         this.retrieveInitialFormValues();
         this.pageChangeSubscription = this.pageChangeSubject.subscribe(function () {
-            _this.formGroupChangeSubscription.unsubscribe();
+            if (_this.formGroupChangeSubscription) {
+                _this.formGroupChangeSubscription.unsubscribe();
+            }
             // Timeout is required for the form to be rendered before subscription to form changes and initial form values retrieval.
             setTimeout(function () {
                 _this.subscribeToFormChanges();
@@ -12853,15 +12399,15 @@ var CaseEditPageComponent = /** @class */ (function () {
     CaseEditPageComponent.prototype.updateFormData = function (jsonData) {
         for (var _i = 0, _a = Object.keys(jsonData.data); _i < _a.length; _i++) {
             var caseFieldId = _a[_i];
-            if (this.pageWithFieldExists(caseFieldId, this.currentPage.id)) {
+            if (this.pageWithFieldExists(caseFieldId)) {
                 this.updateEventTriggerCaseFields(caseFieldId, jsonData, this.caseEdit.eventTrigger);
                 this.updateFormControlsValue(this.editForm, caseFieldId, jsonData.data[caseFieldId]);
             }
         }
     };
     // we do the check, becasue the data comes from the external source
-    CaseEditPageComponent.prototype.pageWithFieldExists = function (caseFieldId, pageId) {
-        return this.wizard.findWizardPage(caseFieldId, pageId);
+    CaseEditPageComponent.prototype.pageWithFieldExists = function (caseFieldId) {
+        return this.wizard.findWizardPage(caseFieldId);
     };
     CaseEditPageComponent.prototype.updateEventTriggerCaseFields = function (caseFieldId, jsonData, eventTrigger) {
         if (eventTrigger.case_fields) {
@@ -13154,7 +12700,9 @@ var CaseEditSubmitComponent = /** @class */ (function () {
         this.contextFields = this.getCaseFields();
     };
     CaseEditSubmitComponent.prototype.ngOnDestroy = function () {
-        this.profileSubscription.unsubscribe();
+        if (this.profileSubscription) {
+            this.profileSubscription.unsubscribe();
+        }
     };
     CaseEditSubmitComponent.prototype.submit = function () {
         var _this = this;
@@ -14013,8 +13561,8 @@ var Wizard = /** @class */ (function () {
         }
         return canShow(foundPage) ? foundPage : undefined;
     };
-    Wizard.prototype.findWizardPage = function (caseFieldId, pageId) {
-        return this.pages.find(function (wizardPage) { return wizardPage.id === pageId && wizardPage.case_fields &&
+    Wizard.prototype.findWizardPage = function (caseFieldId) {
+        return this.pages.find(function (wizardPage) { return wizardPage.case_fields &&
             wizardPage.case_fields.filter(function (caseField) { return caseField.id === caseFieldId; }).length > 0; });
     };
     Wizard.prototype.nextPage = function (pageId, canShow) {
@@ -15172,7 +14720,9 @@ var CaseHistoryComponent = /** @class */ (function () {
         });
     };
     CaseHistoryComponent.prototype.ngOnDestroy = function () {
-        this.caseSubscription.unsubscribe();
+        if (this.caseSubscription) {
+            this.caseSubscription.unsubscribe();
+        }
     };
     CaseHistoryComponent.prototype.isDataLoaded = function () {
         return !!(this.caseDetails && this.caseHistory);
@@ -15973,10 +15523,10 @@ var CaseEventTriggerComponent = /** @class */ (function () {
         });
     };
     CaseEventTriggerComponent.prototype.ngOnDestroy = function () {
-        if (this.activityPollingService.isEnabled) {
+        if (this.activitySubscription && this.activityPollingService.isEnabled) {
             this.activitySubscription.unsubscribe();
         }
-        if (!this.route.snapshot.data.case) {
+        if (!this.route.snapshot.data.case && this.caseSubscription) {
             this.caseSubscription.unsubscribe();
         }
     };
@@ -16066,18 +15616,18 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
-var services_1 = __webpack_require__(65010);
+var alert_1 = __webpack_require__(68164);
 var domain_1 = __webpack_require__(59346);
 var case_editor_1 = __webpack_require__(27070);
-var services_2 = __webpack_require__(65010);
+var services_1 = __webpack_require__(65010);
 var rxjs_1 = __webpack_require__(87318);
 var operators_1 = __webpack_require__(19443);
-var services_3 = __webpack_require__(65010);
+var navigation_notifier_service_1 = __webpack_require__(75005);
 var class_transformer_1 = __webpack_require__(86631);
 var CaseViewComponent = /** @class */ (function () {
-    function CaseViewComponent(navigationNotifierService, caseNotifier, casesService, draftService, alertService) {
+    function CaseViewComponent(navigationNotifierService, caseNofitier, casesService, draftService, alertService) {
         this.navigationNotifierService = navigationNotifierService;
-        this.caseNotifier = caseNotifier;
+        this.caseNofitier = caseNofitier;
         this.casesService = casesService;
         this.draftService = draftService;
         this.alertService = alertService;
@@ -16090,7 +15640,7 @@ var CaseViewComponent = /** @class */ (function () {
         this.getCaseView(this.case)
             .pipe(operators_1.map(function (caseView) {
             _this.caseDetails = class_transformer_1.plainToClassFromExist(new domain_1.CaseView(), caseView);
-            _this.caseNotifier.announceCase(_this.caseDetails);
+            _this.caseNofitier.announceCase(_this.caseDetails);
         }))
             .toPromise()
             .catch(function (error) { return _this.checkAuthorizationError(error); });
@@ -16099,10 +15649,12 @@ var CaseViewComponent = /** @class */ (function () {
         });
     };
     CaseViewComponent.prototype.ngOnDestroy = function () {
-        this.navigationSubscription.unsubscribe();
+        if (this.navigationSubscription) {
+            this.navigationSubscription.unsubscribe();
+        }
     };
     CaseViewComponent.prototype.isDataLoaded = function () {
-        return !!this.caseDetails;
+        return this.caseDetails ? true : false;
     };
     CaseViewComponent.prototype.getCaseView = function (cid) {
         if (domain_1.Draft.isDraft(cid)) {
@@ -16146,11 +15698,11 @@ var CaseViewComponent = /** @class */ (function () {
             selector: 'ccd-case-view',
             template: __webpack_require__(24288)
         }),
-        __metadata("design:paramtypes", [services_3.NavigationNotifierService,
+        __metadata("design:paramtypes", [navigation_notifier_service_1.NavigationNotifierService,
             case_editor_1.CaseNotifier,
             case_editor_1.CasesService,
-            services_2.DraftService,
-            services_1.AlertService])
+            services_1.DraftService,
+            alert_1.AlertService])
     ], CaseViewComponent);
     return CaseViewComponent;
 }());
@@ -16207,15 +15759,14 @@ var router_1 = __webpack_require__(92302);
 var class_transformer_1 = __webpack_require__(86631);
 var Subject_1 = __webpack_require__(66284);
 var dialogs_1 = __webpack_require__(84573);
-var directives_1 = __webpack_require__(66395);
-var domain_1 = __webpack_require__(59346);
+var domain_1 = __webpack_require__(32225);
+var domain_2 = __webpack_require__(59346);
 var services_1 = __webpack_require__(65010);
 var case_editor_1 = __webpack_require__(27070);
 var CaseViewerComponent = /** @class */ (function () {
-    function CaseViewerComponent(ngZone, route, router, navigationNotifierService, orderService, activityPollingService, dialog, alertService, draftService, caseNotifier, errorNotifierService, location) {
+    function CaseViewerComponent(ngZone, route, navigationNotifierService, orderService, activityPollingService, dialog, alertService, draftService, caseNotifier, errorNotifierService, location) {
         this.ngZone = ngZone;
         this.route = route;
-        this.router = router;
         this.navigationNotifierService = navigationNotifierService;
         this.orderService = orderService;
         this.activityPollingService = activityPollingService;
@@ -16227,8 +15778,7 @@ var CaseViewerComponent = /** @class */ (function () {
         this.location = location;
         this.hasPrint = true;
         this.hasEventSelector = true;
-        this.prependedTabs = [];
-        this.BANNER = domain_1.DisplayMode.BANNER;
+        this.BANNER = domain_2.DisplayMode.BANNER;
         this.triggerTextStart = CaseViewerComponent_1.TRIGGER_TEXT_START;
         this.triggerTextIgnoreWarnings = CaseViewerComponent_1.TRIGGER_TEXT_CONTINUE;
         this.triggerText = CaseViewerComponent_1.TRIGGER_TEXT_START;
@@ -16239,13 +15789,14 @@ var CaseViewerComponent = /** @class */ (function () {
     CaseViewerComponent.prototype.ngOnInit = function () {
         var _this = this;
         this.initDialog();
-        if (!this.caseDetails) {
+        if (!this.route.snapshot.data.case) {
             this.caseSubscription = this.caseNotifier.caseView.subscribe(function (caseDetails) {
                 _this.caseDetails = caseDetails;
                 _this.init();
             });
         }
         else {
+            this.caseDetails = this.route.snapshot.data.case;
             this.init();
         }
         this.callbackErrorsSubject.subscribe(function (errorEvent) {
@@ -16262,11 +15813,13 @@ var CaseViewerComponent = /** @class */ (function () {
         return this.caseDetails.case_type.printEnabled;
     };
     CaseViewerComponent.prototype.ngOnDestroy = function () {
-        if (this.activityPollingService.isEnabled) {
+        if (this.activitySubscription && this.activityPollingService.isEnabled) {
             this.activitySubscription.unsubscribe();
         }
-        this.callbackErrorsSubject.unsubscribe();
-        if (!this.route.snapshot.data.case) {
+        if (this.callbackErrorsSubject) {
+            this.callbackErrorsSubject.unsubscribe();
+        }
+        if (!this.route.snapshot.data.case && this.caseSubscription) {
             this.caseSubscription.unsubscribe();
         }
         if (!!this.errorSubscription) {
@@ -16289,7 +15842,7 @@ var CaseViewerComponent = /** @class */ (function () {
             theQueryParams['ignoreWarning'] = this.ignoreWarning;
         }
         // we may need to take care of different triggers in the future
-        if (trigger.id === domain_1.CaseViewTrigger.DELETE) {
+        if (trigger.id === domain_2.CaseViewTrigger.DELETE) {
             var dialogRef = this.dialog.open(dialogs_1.DeleteOrCancelDialogComponent, this.dialogConfig);
             dialogRef.afterClosed().subscribe(function (result) {
                 if (result === 'Delete') {
@@ -16302,8 +15855,8 @@ var CaseViewerComponent = /** @class */ (function () {
                 }
             });
         }
-        else if (this.isDraft() && trigger.id !== domain_1.CaseViewTrigger.DELETE) {
-            theQueryParams[domain_1.DRAFT_QUERY_PARAM] = this.caseDetails.case_id;
+        else if (this.isDraft() && trigger.id !== domain_2.CaseViewTrigger.DELETE) {
+            theQueryParams[domain_2.DRAFT_QUERY_PARAM] = this.caseDetails.case_id;
             theQueryParams[CaseViewerComponent_1.ORIGIN_QUERY_PARAM] = 'viewDraft';
             this.navigationNotifierService.announceNavigation({
                 action: services_1.NavigationOrigin.DRAFT_RESUMED,
@@ -16326,14 +15879,14 @@ var CaseViewerComponent = /** @class */ (function () {
         return !!this.caseDetails;
     };
     CaseViewerComponent.prototype.hasTabsPresent = function () {
-        return this.sortedTabs.length > 0 || this.prependedTabs.length > 0;
+        return this.sortedTabs.length > 0;
     };
     CaseViewerComponent.prototype.callbackErrorsNotify = function (callbackErrorsContext) {
         this.ignoreWarning = callbackErrorsContext.ignore_warning;
         this.triggerText = callbackErrorsContext.trigger_text;
     };
     CaseViewerComponent.prototype.isDraft = function () {
-        return domain_1.Draft.isDraft(this.caseDetails.case_id);
+        return domain_2.Draft.isDraft(this.caseDetails.case_id);
     };
     CaseViewerComponent.prototype.isTriggerButtonDisabled = function () {
         return (this.error
@@ -16345,40 +15898,17 @@ var CaseViewerComponent = /** @class */ (function () {
                 && this.error.details.field_errors.length);
     };
     CaseViewerComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        var matTab;
         var url = this.location.path(true);
         var hashValue = url.substring(url.indexOf('#') + 1);
-        // if we have prepended tabs route to one of the prepended tabs
-        if (!url.includes('#') && this.prependedTabs && this.prependedTabs.length) {
-            var paths = url.split('/');
-            var tabName_1 = decodeURIComponent(paths[paths.length - 1]);
-            var selectedTab_1 = this.prependedTabs.find(function (caseTab) { return caseTab.id.toLowerCase() === tabName_1.toLowerCase(); });
-            var tab = selectedTab_1 ? selectedTab_1.id : 'tasks';
-            this.router.navigate(['cases', 'case-details', this.caseDetails.case_id, tab]).then(function () {
-                matTab = _this.tabGroup._tabs.find(function (x) { return x.textLabel === selectedTab_1.label; });
-                _this.tabGroup.selectedIndex = matTab.position;
-            });
-            return;
-        }
-        var regExp = new RegExp(CaseViewerComponent_1.space, 'g');
-        hashValue = hashValue.replace(regExp, ' ');
-        matTab = this.tabGroup._tabs.find(function (x) { return x.textLabel === hashValue; });
+        var reguarExp = new RegExp(CaseViewerComponent_1.space, 'g');
+        hashValue = hashValue.replace(reguarExp, ' ');
+        var matTab = this.tabGroup._tabs.find(function (x) { return x.textLabel === hashValue; });
         if (matTab && matTab.position) {
             this.tabGroup.selectedIndex = matTab.position;
         }
     };
     CaseViewerComponent.prototype.tabChanged = function (tabChangeEvent) {
-        var tab = tabChangeEvent.tab['_viewContainerRef'];
-        var id = tab.element.nativeElement.id;
-        if (tabChangeEvent.index <= 1 && this.prependedTabs.length) {
-            this.router.navigate([id], { relativeTo: this.route });
-        }
-        else {
-            this.router.navigate(['cases', 'case-details', this.caseDetails.case_id]).then(function () {
-                window.location.hash = id;
-            });
-        }
+        window.location.hash = tabChangeEvent.tab.textLabel;
     };
     CaseViewerComponent.prototype.init = function () {
         var _this = this;
@@ -16402,11 +15932,11 @@ var CaseViewerComponent = /** @class */ (function () {
         var _this = this;
         return tabs
             .map(function (tab) { return Object.assign({}, tab, { fields: _this.orderService.sort(tab.fields) }); })
-            .filter(function (tab) { return directives_1.ShowCondition.getInstance(tab.show_condition).matchByContextFields(_this.caseFields); });
+            .filter(function (tab) { return domain_1.ShowCondition.getInstance(tab.show_condition).matchByContextFields(_this.caseFields); });
     };
     CaseViewerComponent.prototype.getTabFields = function () {
         var caseDataFields = this.sortedTabs.reduce(function (acc, tab) {
-            return acc.concat(class_transformer_1.plainToClass(domain_1.CaseField, tab.fields));
+            return acc.concat(class_transformer_1.plainToClass(domain_2.CaseField, tab.fields));
         }, []);
         return caseDataFields.concat(this.caseDetails.metadataFields);
     };
@@ -16457,14 +15987,6 @@ var CaseViewerComponent = /** @class */ (function () {
         core_1.Input(),
         __metadata("design:type", Object)
     ], CaseViewerComponent.prototype, "hasEventSelector", void 0);
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", domain_1.CaseView)
-    ], CaseViewerComponent.prototype, "caseDetails", void 0);
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", Array)
-    ], CaseViewerComponent.prototype, "prependedTabs", void 0);
     __decorate([
         core_1.ViewChild('tabGroup'),
         __metadata("design:type", material_1.MatTabGroup)
@@ -16477,7 +15999,6 @@ var CaseViewerComponent = /** @class */ (function () {
         }),
         __metadata("design:paramtypes", [core_1.NgZone,
             router_1.ActivatedRoute,
-            router_1.Router,
             services_1.NavigationNotifierService,
             services_1.OrderService,
             services_1.ActivityPollingService,
@@ -16514,10 +16035,10 @@ var case_viewer_component_1 = __webpack_require__(89554);
 var material_1 = __webpack_require__(69451);
 var services_1 = __webpack_require__(65010);
 var errors_module_1 = __webpack_require__(61386);
-var activity_1 = __webpack_require__(52703);
+var activity_module_1 = __webpack_require__(4765);
 var case_header_1 = __webpack_require__(75150);
 var case_history_1 = __webpack_require__(30542);
-var event_trigger_1 = __webpack_require__(7108);
+var event_trigger_module_1 = __webpack_require__(23741);
 var tabs_1 = __webpack_require__(80624);
 var palette_1 = __webpack_require__(22212);
 var directives_1 = __webpack_require__(66395);
@@ -16525,7 +16046,7 @@ var printer_1 = __webpack_require__(65773);
 var case_event_trigger_1 = __webpack_require__(92100);
 var services_2 = __webpack_require__(50137);
 var case_editor_1 = __webpack_require__(27070);
-var case_view_1 = __webpack_require__(65389);
+var case_view_component_1 = __webpack_require__(76979);
 var pipes_1 = __webpack_require__(32741);
 var CaseViewerModule = /** @class */ (function () {
     function CaseViewerModule() {
@@ -16536,9 +16057,9 @@ var CaseViewerModule = /** @class */ (function () {
                 common_1.CommonModule,
                 router_1.RouterModule,
                 errors_module_1.ErrorsModule,
-                activity_1.ActivityModule,
+                activity_module_1.ActivityModule,
                 case_header_1.CaseHeaderModule,
-                event_trigger_1.EventTriggerModule,
+                event_trigger_module_1.EventTriggerModule,
                 tabs_1.TabsModule,
                 palette_1.PaletteModule,
                 directives_1.LabelSubstitutorModule,
@@ -16550,17 +16071,16 @@ var CaseViewerModule = /** @class */ (function () {
                 material_1.MatTabsModule,
                 palette_1.ComplexModule
             ],
-            schemas: [core_1.NO_ERRORS_SCHEMA],
             declarations: [
                 case_event_trigger_1.CaseEventTriggerComponent,
                 printer_1.CasePrinterComponent,
                 case_viewer_component_1.CaseViewerComponent,
-                case_view_1.CaseViewComponent,
+                case_view_component_1.CaseViewComponent,
                 printer_1.PrintUrlPipe,
             ],
             exports: [
                 case_viewer_component_1.CaseViewerComponent,
-                case_view_1.CaseViewComponent,
+                case_view_component_1.CaseViewComponent,
             ],
             providers: [
                 case_editor_1.CaseNotifier,
@@ -16652,7 +16172,9 @@ var CasePrinterComponent = /** @class */ (function () {
         });
     };
     CasePrinterComponent.prototype.ngOnDestroy = function () {
-        this.caseSubscription.unsubscribe();
+        if (this.caseSubscription) {
+            this.caseSubscription.unsubscribe();
+        }
     };
     CasePrinterComponent.prototype.isDataLoaded = function () {
         return this.caseDetails && this.documents ? true : false;
@@ -16995,6 +16517,7 @@ __export(__webpack_require__(69115));
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
+var case_viewer_component_1 = __webpack_require__(89554);
 var printer_1 = __webpack_require__(65773);
 var services_1 = __webpack_require__(50137);
 var case_event_trigger_component_1 = __webpack_require__(83645);
@@ -17002,6 +16525,10 @@ var case_editor_1 = __webpack_require__(27070);
 var case_history_1 = __webpack_require__(30542);
 var file_upload_progress_guard_1 = __webpack_require__(27667);
 exports.viewerRouting = [
+    {
+        path: '',
+        component: case_viewer_component_1.CaseViewerComponent,
+    },
     {
         path: 'print',
         component: printer_1.CasePrinterComponent,
@@ -17642,7 +17169,9 @@ var CallbackErrorsComponent = /** @class */ (function () {
         });
     };
     CallbackErrorsComponent.prototype.ngOnDestroy = function () {
-        this.callbackErrorsSubject.unsubscribe();
+        if (this.callbackErrorsSubject) {
+            this.callbackErrorsSubject.unsubscribe();
+        }
     };
     CallbackErrorsComponent.prototype.buildCallbackErrorsContext = function () {
         var errorContext = new error_context_1.CallbackErrorsContext();
@@ -19507,7 +19036,7 @@ var WriteCollectionFieldComponent = /** @class */ (function (_super) {
         });
     };
     WriteCollectionFieldComponent.prototype.ngOnDestroy = function () {
-        if (typeof this.profileSubscription !== 'undefined') {
+        if (this.profileSubscription) {
             this.profileSubscription.unsubscribe();
         }
     };
@@ -20679,9 +20208,7 @@ var ReadComplexFieldComponent = /** @class */ (function (_super) {
                     field.list_items = _this.caseField.value[field.id].list_items;
                     field.value = {
                         list_items: field.list_items,
-                        value: _this.caseField.value[field.id].value && _this.caseField.value[field.id].value.code ?
-                            _this.caseField.value[field.id].value.code :
-                            _this.caseField.value[field.id].value
+                        value: _this.caseField.value[field.id].value
                     };
                 }
             });
@@ -21099,7 +20626,6 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
 var forms_1 = __webpack_require__(92985);
 var datetime_picker_1 = __webpack_require__(99101);
-var moment_adapter_1 = __webpack_require__(16153);
 var abstract_form_field_component_1 = __webpack_require__(19785);
 var datetime_picker_utils_1 = __webpack_require__(16907);
 var format_translator_service_1 = __webpack_require__(82646);
@@ -21138,15 +20664,12 @@ var DatetimePickerComponent = /** @class */ (function (_super) {
         this.dateTimeEntryFormat = this.formatTranslationService.showOnlyDates(this.caseField.dateTimeEntryFormat);
         this.configureDatePicker(this.dateTimeEntryFormat);
         this.setDateTimeFormat();
-        // set date control based on mandatory field
-        this.dateControl = (this.caseField.isMandatory ?
-            this.registerControl(new forms_1.FormControl(this.caseField.value || '', [forms_1.Validators.required]))
-            : this.registerControl(new forms_1.FormControl(this.caseField.value)));
+        this.dateControl = this.registerControl(new forms_1.FormControl(this.caseField.value));
         // in resetting the format just after the page initialises, the input can be reformatted
         // otherwise the last format given will be how the text shown will be displayed
         setTimeout(function () {
             _this.setDateTimeFormat();
-            _this.formatValueAndSetErrors();
+            _this.formatValue();
         }, 1);
         // when the status changes check that the maximum/minimum date has not been exceeded
         this.dateControl.statusChanges.subscribe(function () {
@@ -21162,35 +20685,20 @@ var DatetimePickerComponent = /** @class */ (function (_super) {
     When the value changes, update the form control
     */
     DatetimePickerComponent.prototype.valueChanged = function () {
-        this.formatValueAndSetErrors();
+        this.formatValue();
     };
-    DatetimePickerComponent.prototype.formatValueAndSetErrors = function () {
+    DatetimePickerComponent.prototype.formatValue = function () {
         if (this.inputElement.nativeElement.value) {
             var formValue = this.inputElement.nativeElement.value;
             formValue = moment(formValue, this.dateTimeEntryFormat).format(this.momentFormat);
             if (formValue !== 'Invalid date') {
-                // if not invalid set the value as the formatted value
                 this.dateControl.setValue(formValue);
             }
-            else {
-                // ensure that the datepicker picks up the invalid error
-                var keepErrorText = this.inputElement.nativeElement.value;
-                this.dateControl.setValue(keepErrorText);
-                this.inputElement.nativeElement.value = keepErrorText;
-            }
-        }
-        else {
-            // ensure required errors are picked up if relevant
-            this.dateControl.setValue('');
         }
     };
     DatetimePickerComponent.prototype.focusIn = function () {
         this.setDateTimeFormat();
     };
-    DatetimePickerComponent.prototype.focusOut = function () {
-        // focus out needed to obtain errors (relevant to formatting)
-        this.formatValueAndSetErrors();
-    };
     DatetimePickerComponent.prototype.toggleClick = function () {
         this.setDateTimeFormat();
     };
@@ -21287,9 +20795,7 @@ var DatetimePickerComponent = /** @class */ (function (_super) {
             styles: [__webpack_require__(36263)],
             encapsulation: core_1.ViewEncapsulation.None,
             providers: [
-                { provide: datetime_picker_1.NGX_MAT_DATE_FORMATS, useValue: datetime_picker_utils_1.CUSTOM_MOMENT_FORMATS },
-                { provide: datetime_picker_1.NgxMatDateAdapter, useClass: moment_adapter_1.NgxMatMomentAdapter },
-                { provide: moment_adapter_1.NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+                { provide: datetime_picker_1.NGX_MAT_DATE_FORMATS, useValue: datetime_picker_utils_1.CUSTOM_MOMENT_FORMATS }
             ]
         }),
         __param(1, core_1.Inject(datetime_picker_1.NGX_MAT_DATE_FORMATS)),
@@ -22227,13 +21733,6 @@ var DynamicRadioListPipe = /** @class */ (function () {
     }
     DynamicRadioListPipe_1 = DynamicRadioListPipe;
     DynamicRadioListPipe.prototype.transform = function (value, items) {
-        /**
-         *
-         * If value is object with element `value.code`, use code instead.
-         */
-        if (value && value.value && value.value.code) {
-            value = value.value.code;
-        }
         var item = items.find(function (i) { return i.code === value; });
         return item ? item.label : DynamicRadioListPipe_1.EMPTY;
     };
@@ -22308,13 +21807,6 @@ var ReadDynamicRadioListFieldComponent = /** @class */ (function (_super) {
         if (!this.caseField.list_items && this.caseField.formatted_value && this.caseField.formatted_value.list_items) {
             this.caseField.list_items = this.caseField.formatted_value.list_items;
         }
-        /**
-         *
-         * Seems formatted_value can also be empty for DynamicRadioList's. Reassigning list_items from value.list_items in that case
-         */
-        if (!this.caseField.list_items && this.caseField.value && this.caseField.value.list_items) {
-            this.caseField.list_items = this.caseField.value.list_items;
-        }
     };
     ReadDynamicRadioListFieldComponent = __decorate([
         core_1.Component({
@@ -25035,7 +24527,6 @@ var PaletteModule = /** @class */ (function () {
             ],
             exports: [
                 base_field_module_1.BaseFieldModule,
-                substitutor_1.LabelSubstitutorModule,
                 utils_module_1.PaletteUtilsModule,
                 unsupported_field_component_1.UnsupportedFieldComponent,
                 label_1.LabelFieldComponent,
@@ -31048,9 +30539,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
 var common_1 = __webpack_require__(91216);
-var case_reference_1 = __webpack_require__(63823);
+var case_reference_pipe_1 = __webpack_require__(95188);
 var sort_search_result_pipe_1 = __webpack_require__(75239);
-var case_title_1 = __webpack_require__(94461);
+var ccd_case_title_pipe_1 = __webpack_require__(29462);
 var PipesModule = /** @class */ (function () {
     function PipesModule() {
     }
@@ -31060,14 +30551,14 @@ var PipesModule = /** @class */ (function () {
                 common_1.CommonModule,
             ],
             declarations: [
-                case_reference_1.CaseReferencePipe,
+                case_reference_pipe_1.CaseReferencePipe,
                 sort_search_result_pipe_1.SortSearchResultPipe,
-                case_title_1.CcdCaseTitlePipe
+                ccd_case_title_pipe_1.CcdCaseTitlePipe
             ],
             exports: [
-                case_reference_1.CaseReferencePipe,
+                case_reference_pipe_1.CaseReferencePipe,
                 sort_search_result_pipe_1.SortSearchResultPipe,
-                case_title_1.CcdCaseTitlePipe
+                ccd_case_title_pipe_1.CcdCaseTitlePipe
             ]
         })
     ], PipesModule);
@@ -31336,22 +30827,35 @@ var ActivityService = /** @class */ (function () {
         for (var _i = 0; _i < arguments.length; _i++) {
             caseId[_i] = arguments[_i];
         }
-        var options = this.getOptions();
-        var url = this.activityUrl() + ("/cases/" + caseId.join(',') + "/activity");
-        return this.http
-            .get(url, options, false, ActivityService_1.handleHttpError)
-            .map(function (response) { return response; });
+        try {
+            var options = this.getOptions();
+            var url = this.activityUrl() + ("/cases/" + caseId.join(',') + "/activity");
+            return this.http
+                .get(url, options, false, ActivityService_1.handleHttpError)
+                .map(function (response) { return response; });
+        }
+        catch (error) {
+            console.log('user may not be authenticated.' + error);
+        }
     };
     ActivityService.prototype.postActivity = function (caseId, activity) {
-        var options = this.getOptions();
-        var url = this.activityUrl() + ("/cases/" + caseId + "/activity");
-        var body = { activity: activity };
-        return this.http
-            .post(url, body, options, false)
-            .map(function (response) { return response; });
+        try {
+            var options = this.getOptions();
+            var url = this.activityUrl() + ("/cases/" + caseId + "/activity");
+            var body = { activity: activity };
+            return this.http
+                .post(url, body, options, false)
+                .map(function (response) { return response; });
+        }
+        catch (error) {
+            console.log('user may not be authenticated.' + error);
+        }
     };
     ActivityService.prototype.verifyUserIsAuthorized = function () {
         var _this = this;
+        if (this.sessionStorageService.getItem('userDetails') === undefined) {
+            return;
+        }
         if (this.activityUrl() && this.userAuthorised === undefined) {
             this.getActivities(ActivityService_1.DUMMY_CASE_REFERENCE).subscribe(function () { return _this.userAuthorised = true; }, function (error) {
                 if ([401, 403].indexOf(error.status) > -1) {
@@ -32108,10 +31612,6 @@ var FormatTranslatorService = /** @class */ (function () {
                 case 'd':
                     maybePush(result, 'D', inQuote);
                     break;
-                // moment library defines year as capital y
-                case 'y':
-                    maybePush(result, 'Y', inQuote);
-                    break;
                 case 'e':
                 case 'c':
                     maybePush(result, 'E', inQuote); // no lower case E
@@ -32155,9 +31655,6 @@ var FormatTranslatorService = /** @class */ (function () {
         while (dateFormat.includes('d')) {
             dateFormat = dateFormat.replace('d', 'D');
         }
-        while (dateFormat.includes('y')) {
-            dateFormat = dateFormat.replace('y', 'Y');
-        }
         return dateFormat;
     };
     FormatTranslatorService.prototype.removeTime = function (dateFormat) {
@@ -62801,14 +62298,14 @@ module.exports = "<div *ngIf=\"isDataLoaded()\" class=\"screen-990\">\n  <ccd-ac
 /***/ 24288:
 /***/ ((module) => {
 
-module.exports = "<div *ngIf=\"isDataLoaded()\">\n    <ccd-case-viewer [hasPrint]=\"hasPrint\"\n                     [hasEventSelector]=\"hasEventSelector\"></ccd-case-viewer>\n</div>\n"
+module.exports = "<div *ngIf=\"isDataLoaded()\">\n    <ccd-case-viewer [hasPrint]=\"hasPrint\"\n                     [hasEventSelector]=\"hasEventSelector\"></ccd-case-viewer>\n</div>"
 
 /***/ }),
 
 /***/ 67025:
 /***/ ((module) => {
 
-module.exports = "<div *ngIf=\"isDataLoaded()\">\n  <!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n  <div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n       role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      Something went wrong\n    </h1>\n    <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n      <p>We're working to fix the problem. Try again shortly.</p>\n      <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n    </div>\n  </div>\n  <!-- Callback error heading and error message to be displayed if there are specific error details -->\n  <div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n       aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      The callback data failed validation\n    </h2>\n    <p>{{error.message}}</p>\n    <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n      <li *ngFor=\"let fieldError of error.details.field_errors\">\n        {{fieldError.message}}\n      </li>\n    </ul>\n  </div>\n  <ccd-callback-errors\n    [triggerTextContinue]=\"triggerTextStart\"\n    [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n    [callbackErrorsSubject]=\"callbackErrorsSubject\"\n    (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n  </ccd-callback-errors>\n  <ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n  <div class=\"grid-row\">\n    <div class=\"column-one-half\">\n      <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n      <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n        <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">Print</a>\n      </div>\n    </div>\n    <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n      <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                         [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                         (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n    </div>\n  </div>\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <ng-container *ngIf=\"hasTabsPresent()\">\n        <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedTabChange)=\"tabChanged($event)\" [disableRipple]=\"true\">\n          <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label\">\n          </mat-tab>\n          <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label\">\n            <ng-template matTabContent>\n              <table [class]=\"tab.id\">\n                <tbody>\n                <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                  <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                    <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                      <tr *ngSwitchCase=\"true\">\n                        <th>\n                          <div class=\"case-viewer-label text-16\">{{field.label}}</div>\n                        </th>\n                        <td>\n                          <span class=\"text-16\">\n                            <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                              [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\">\n                            </ccd-field-read>\n                          </span>\n                        </td>\n                      </tr>\n                      <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                        <th>\n                          <span class=\"text-16\">\n                            <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                              [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\">\n                            </ccd-field-read>\n                          </span>\n                        </th>\n                      </tr>\n                    </ng-container>\n                  </div>\n                </ng-container>\n                </tbody>\n              </table>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n        <router-outlet *ngIf=\"prependedTabs && prependedTabs.length\"></router-outlet>\n      </ng-container>\n    </div>\n  </div>\n</div>\n"
+module.exports = "<div *ngIf=\"isDataLoaded()\">\n  <!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n  <div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n       role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      Something went wrong\n    </h1>\n    <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n      <p>We're working to fix the problem. Try again shortly.</p>\n      <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n    </div>\n  </div>\n  <!-- Callback error heading and error message to be displayed if there are specific error details -->\n  <div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n       aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      The callback data failed validation\n    </h2>\n    <p>{{error.message}}</p>\n    <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n      <li *ngFor=\"let fieldError of error.details.field_errors\">\n        {{fieldError.message}}\n      </li>\n    </ul>\n  </div>\n  <ccd-callback-errors\n    [triggerTextContinue]=\"triggerTextStart\"\n    [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n    [callbackErrorsSubject]=\"callbackErrorsSubject\"\n    (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n  </ccd-callback-errors>\n  <ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n  <div class=\"grid-row\">\n    <div class=\"column-one-half\">\n      <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n      <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n        <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">Print</a>\n      </div>\n    </div>\n    <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n      <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                         [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                         (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n    </div>\n  </div>\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <ng-container *ngIf=\"hasTabsPresent()\">\n        <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedTabChange)=\"tabChanged($event)\"\n                       [disableRipple]=\"true\">\n          <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label\">\n            <ng-template matTabContent>\n              <table [class]=\"tab.id\">\n                <tbody>\n                <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true :formGroup.controls['data']\">\n                  <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                    <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                      <tr *ngSwitchCase=\"true\">\n                        <th>\n                          <div class=\"case-viewer-label text-16\">{{field.label}}</div>\n                        </th>\n                        <td>\n                          <span class=\"text-16\">\n                            <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                              [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\">\n                            </ccd-field-read>\n                          </span>\n                        </td>\n                      </tr>\n                      <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                        <th>\n                          <span class=\"text-16\">\n                            <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                              [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\">\n                            </ccd-field-read>\n                          </span>\n                        </th>\n                      </tr>\n                    </ng-container>\n                  </div>\n                </ng-container>\n                </tbody>\n              </table>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </ng-container>\n    </div>\n  </div>\n</div>\n"
 
 /***/ }),
 
@@ -62920,7 +62417,7 @@ module.exports = "<a *ngIf=\"hasReference()\" href=\"/v2/case/{{caseField.value.
 /***/ 38682:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !caseReferenceControl.valid && (caseReferenceControl.dirty || caseReferenceControl.touched)}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"caseReferenceControl.errors && (caseReferenceControl.dirty || caseReferenceControl.touched)\">{{caseReferenceControl.errors | ccdFirstError:caseField.label}}</span>\n  <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"text\" [formControl]=\"caseReferenceControl\">\n</div>\n"
+module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !caseReferenceControl.valid && caseReferenceControl.dirty}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"caseReferenceControl.errors && caseReferenceControl.dirty\">{{caseReferenceControl.errors | ccdFirstError:caseField.label}}</span>\n  <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"text\" [formControl]=\"caseReferenceControl\">\n</div>\n"
 
 /***/ }),
 
@@ -62983,14 +62480,14 @@ module.exports = "<ng-container *ngIf=\"caseField.dateTimeEntryFormat; else nati
 /***/ 94946:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group bottom-30\" [id]=\"id()\" [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && (dateControl.dirty || dateControl.touched)}\">\n\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel }}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n    <span class=\"error-message\" *ngIf=\"dateControl && dateControl.errors && (dateControl.dirty || dateControl.touched)\">{{dateControl.errors | ccdFirstError:caseField.label}}</span>\n    <cut-date-input [id]=\"id()\"\n                    [isDateTime]=\"isDateTime()\"\n                    [mandatory]=\"caseField | ccdIsMandatory\"\n                    [isInvalid]=\"dateControl.errors && (dateControl.dirty || dateControl.touched)\"\n                    [formControl]=\"dateControl\"></cut-date-input>\n\n  </fieldset>\n</div>\n"
+module.exports = "<div class=\"form-group bottom-30\" [id]=\"id()\" [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}\">\n\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel }}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n    <span class=\"error-message\" *ngIf=\"dateControl && dateControl.errors && dateControl.dirty\">{{dateControl.errors | ccdFirstError:caseField.label}}</span>\n    <cut-date-input [id]=\"id()\"\n                    [isDateTime]=\"isDateTime()\"\n                    [mandatory]=\"caseField | ccdIsMandatory\"\n                    [isInvalid]=\"dateControl.errors && dateControl.dirty\"\n                    [formControl]=\"dateControl\"></cut-date-input>\n\n  </fieldset>\n</div>\n"
 
 /***/ }),
 
 /***/ 67330:
 /***/ ((module) => {
 
-module.exports = "<div class=\"govuk-form-group  bottom-30\" [id]=\"caseField.id\"\n     [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}\">\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel }}</span>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n      <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.errors && dateControl.dirty && !(minError || maxError)\">{{dateControl.errors | ccdFirstError:caseField.label}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && minError\">This date is older than the minimum date allowed</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && maxError\">This date is later than the maximum date allowed</span>\n    </legend>\n    <div class=\"datepicker-container\">\n      <input class=\"govuk-input\"\n             #input\n             attr.aria-label=\"Please enter a date and time in the format {{dateTimeEntryFormat}}\"\n             [min]=\"minDate(caseField)\"\n             [max]=\"maxDate(caseField)\"\n             [formControl]=\"dateControl\"\n             [ngxMatDatetimePicker]=\"picker\"\n             (focusin)=\"focusIn()\"\n             (focusout)=\"focusOut()\"\n             (dateChange)=\"valueChanged()\"\n             ng-model-options=\"{timezone:'utc'}\"\n      >\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #picker\n                               [color]=\"color\"\n                               [touchUi]=\"touchUi\"\n                               [hideTime]=\"hideTime\"\n                               [startView]=\"startView\"\n                               [stepHour]=\"stepHour\"\n                               [stepSecond]=\"stepSecond\"\n                               [stepMinute]=\"stepMinute\"\n                               [showSeconds]=\"showSeconds\"\n                               [showSpinners]=\"showSpinners\"\n                               [disableMinute]=\"disableMinute\"\n                               [enableMeridian]=\"enableMeridian\"\n\n                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n"
+module.exports = "<div class=\"govuk-form-group  bottom-30\" [id]=\"caseField.id\"\n     [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}\">\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel }}</span>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n      <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.errors && dateControl.dirty && !(minError || maxError)\">{{dateControl.errors | ccdFirstError:caseField.label}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && minError\">This date is older than the minimum date allowed</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && maxError\">This date is later than the maximum date allowed</span>\n    </legend>\n    <div class=\"datepicker-container\">\n      <input class=\"govuk-input\"\n             #input\n             aria-label=\"Please enter a date and time in the format DD/MM/YYYY HH:MM\"\n             [min]=\"minDate(caseField)\"\n             [max]=\"maxDate(caseField)\"\n             [formControl]=\"dateControl\"\n             [ngxMatDatetimePicker]=\"picker\"\n             (focusin)=\"focusIn()\"\n             (dateChange)=\"valueChanged()\"\n             ng-model-options=\"{timezone:'utc'}\"\n      >\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #picker\n                               [color]=\"color\"\n                               [touchUi]=\"touchUi\"\n                               [hideTime]=\"hideTime\"\n                               [startView]=\"startView\"\n                               [stepHour]=\"stepHour\"\n                               [stepSecond]=\"stepSecond\"\n                               [stepMinute]=\"stepMinute\"\n                               [showSeconds]=\"showSeconds\"\n                               [showSpinners]=\"showSpinners\"\n                               [disableMinute]=\"disableMinute\"\n                               [enableMeridian]=\"enableMeridian\"\n\n                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n"
 
 /***/ }),
 
@@ -63011,7 +62508,7 @@ module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error botto
 /***/ 12270:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group\"\n  [ngClass]=\"{'form-group-error': !dynamicListFormControl.valid && (dynamicListFormControl.dirty || dynamicListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">Select an option from the\n      dropdown</span>\n  <span class=\"error-message\"\n    *ngIf=\"dynamicListFormControl.errors && dynamicListFormControl.dirty\">{{dynamicListFormControl.errors |\n    ccdFirstError:caseField.label}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\"\n    [formControl]=\"dynamicListFormControl\">\n    <option [ngValue]=null>--Select a value--</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of caseField.list_items\" role=\"option\">{{type.label}}</option>\n  </select>\n\n</div>\n"
+module.exports = "<div class=\"form-group\"\n  [ngClass]=\"{'form-group-error': !dynamicListFormControl.valid && dynamicListFormControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">Select an option from the\n      dropdown</span>\n  <span class=\"error-message\"\n    *ngIf=\"dynamicListFormControl.errors && dynamicListFormControl.dirty\">{{dynamicListFormControl.errors |\n    ccdFirstError:caseField.label}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\"\n    [formControl]=\"dynamicListFormControl\">\n    <option [ngValue]=null>--Select a value--</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of caseField.list_items\" role=\"option\">{{type.label}}</option>\n  </select>\n\n</div>"
 
 /***/ }),
 
@@ -63025,21 +62522,21 @@ module.exports = "<div class=\"form-group bottom-30\"\n    [ngClass]=\"{'form-gr
 /***/ 36974:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !emailControl.valid && (emailControl.dirty || emailControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"emailControl.errors && (emailControl.dirty || emailControl.touched)\">{{emailControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <input class=\"form-control\" [ngClass]=\"{'govuk-input--error': emailControl.errors && (emailControl.dirty || emailControl.touched)}\"\n    [id]=\"id()\" type=\"email\" [formControl]=\"emailControl\">\n\n</div>\n"
+module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !emailControl.valid && emailControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"emailControl.errors && emailControl.dirty\">{{emailControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <input class=\"form-control\" [ngClass]=\"{'govuk-input--error': emailControl.errors && emailControl.dirty}\"\n    [id]=\"id()\" type=\"email\" [formControl]=\"emailControl\">\n\n</div>\n"
 
 /***/ }),
 
 /***/ 70428:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !fixedListFormControl.valid && (fixedListFormControl.dirty || fixedListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"fixedListFormControl.errors && (fixedListFormControl.dirty || fixedListFormControl.touched)\">{{fixedListFormControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\" [formControl]=\"fixedListFormControl\">\n    <option [ngValue]=null>--Select a value--</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of listItems\">{{type.label}}</option>\n  </select>\n\n</div>\n"
+module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !fixedListFormControl.valid && fixedListFormControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"fixedListFormControl.errors && fixedListFormControl.dirty\">{{fixedListFormControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\" [formControl]=\"fixedListFormControl\">\n    <option [ngValue]=null>--Select a value--</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of listItems\">{{type.label}}</option>\n  </select>\n\n</div>\n"
 
 /***/ }),
 
 /***/ 83332:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !fixedRadioListControl.valid && (fixedRadioListControl.dirty || fixedRadioListControl.touched)}\" [id]=\"id()\">\n  <fieldset>\n    <legend>\n      <label [for]=\"id()\">\n        <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n      </label>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n      <span class=\"error-message\" *ngIf=\"fixedRadioListControl.errors && (fixedRadioListControl.dirty || fixedRadioListControl.touched)\">{{fixedRadioListControl.errors | ccdFirstError:caseField.label}}</span>\n    </legend>\n    <ng-container>\n      <div class=\"multiple-choice\" *ngFor=\"let radioButton of caseField.field_type.fixed_list_items\" [ngClass]=\"{selected: fixedRadioListControl.value === radioButton.code}\">\n        <input class=\"form-control\" [id]=\"id()+'-'+radioButton.code\" [name]=\"id()\" type=\"radio\" [formControl]=\"fixedRadioListControl\" [value]=\"radioButton.code\">\n        <label class=\"form-label\" [for]=\"id()+'-'+radioButton.code\">{{radioButton.label}}</label>\n      </div>\n    </ng-container>\n  </fieldset>\n</div>\n"
+module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !fixedRadioListControl.valid && fixedRadioListControl.dirty}\" [id]=\"id()\">\n  <fieldset>\n    <legend>\n      <label [for]=\"id()\">\n        <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n      </label>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n      <span class=\"error-message\" *ngIf=\"fixedRadioListControl.errors && fixedRadioListControl.dirty\">{{fixedRadioListControl.errors | ccdFirstError:caseField.label}}</span>\n    </legend>\n    <ng-container>\n      <div class=\"multiple-choice\" *ngFor=\"let radioButton of caseField.field_type.fixed_list_items\" [ngClass]=\"{selected: fixedRadioListControl.value === radioButton.code}\">\n        <input class=\"form-control\" [id]=\"id()+'-'+radioButton.code\" [name]=\"id()\" type=\"radio\" [formControl]=\"fixedRadioListControl\" [value]=\"radioButton.code\">\n        <label class=\"form-label\" [for]=\"id()+'-'+radioButton.code\">{{radioButton.label}}</label>\n      </div>\n    </ng-container>\n  </fieldset>\n</div>\n"
 
 /***/ }),
 
@@ -63081,7 +62578,7 @@ module.exports = "<dl [hidden]=\"caseField.hidden\" class=\"case-field\" ccdLabe
 /***/ 86017:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !moneyGbpControl.valid && (moneyGbpControl.dirty || moneyGbpControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"moneyGbpControl.errors && (moneyGbpControl.dirty || moneyGbpControl.touched)\">{{moneyGbpControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <div class=\"form-money\">\n    <span class=\"form-currency\">&#163;</span>\n    <ccd-money-gbp-input [id]=\"id()\"\n                         [name]=\"id()\"\n                         [mandatory]=\"caseField | ccdIsMandatory\"\n                         [formControl]=\"moneyGbpControl\"></ccd-money-gbp-input>\n  </div>\n\n</div>\n"
+module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !moneyGbpControl.valid && moneyGbpControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"moneyGbpControl.errors && moneyGbpControl.dirty\">{{moneyGbpControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <div class=\"form-money\">\n    <span class=\"form-currency\">&#163;</span>\n    <ccd-money-gbp-input [id]=\"id()\"\n                         [name]=\"id()\"\n                         [mandatory]=\"caseField | ccdIsMandatory\"\n                         [formControl]=\"moneyGbpControl\"></ccd-money-gbp-input>\n  </div>\n\n</div>\n"
 
 /***/ }),
 
@@ -63095,7 +62592,7 @@ module.exports = "<table *ngIf=\"caseField.value && caseField.value.length\" cla
 /***/ 56159:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'error': !checkboxes.valid && (checkboxes.dirty || checkboxes.touched)}\" [id]=\"id()\">\n\n  <fieldset>\n\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text}}</span>\n    <span *ngIf=\"checkboxes.errors && (checkboxes.dirty || checkboxes.touched)\" class=\"error-message\">{{checkboxes.errors | ccdFirstError:caseField.label}}</span>\n\n    <ng-container *ngFor=\"let checkbox of caseField.field_type.fixed_list_items\">\n\n      <div class=\"multiple-choice\">\n        <input class=\"form-control\" [id]=\"id()+'-'+checkbox.code\" [name]=\"id()\" type=\"checkbox\" [value]=\"checkbox.code\" [checked]=\"isSelected(checkbox.code)\" (change)=\"onCheckChange($event)\">\n        <label class=\"form-label\" [for]=\"id()+'-'+checkbox.code\">{{checkbox.label}}</label>\n      </div>\n\n    </ng-container>\n\n  </fieldset>\n\n</div>\n"
+module.exports = "<div class=\"form-group bottom-30\" [ngClass]=\"{'error': !checkboxes.valid && checkboxes.dirty}\" [id]=\"id()\">\n\n  <fieldset>\n\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text}}</span>\n    <span *ngIf=\"checkboxes.errors && checkboxes.dirty\" class=\"error-message\">{{checkboxes.errors | ccdFirstError:caseField.label}}</span>\n\n    <ng-container *ngFor=\"let checkbox of caseField.field_type.fixed_list_items\">\n\n      <div class=\"multiple-choice\">\n        <input class=\"form-control\" [id]=\"id()+'-'+checkbox.code\" [name]=\"id()\" type=\"checkbox\" [value]=\"checkbox.code\" [checked]=\"isSelected(checkbox.code)\" (change)=\"onCheckChange($event)\">\n        <label class=\"form-label\" [for]=\"id()+'-'+checkbox.code\">{{checkbox.label}}</label>\n      </div>\n\n    </ng-container>\n\n  </fieldset>\n\n</div>\n"
 
 /***/ }),
 
@@ -63172,28 +62669,28 @@ module.exports = "<ccpay-payment-lib [API_ROOT]=\"getBaseURL()\" [CCD_CASE_NUMBE
 /***/ 95250:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !phoneUkControl.valid && (phoneUkControl.dirty || phoneUkControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"phoneUkControl.errors && (phoneUkControl.dirty || phoneUkControl.touched)\">{{phoneUkControl.errors | ccdFirstError:caseField.label}}</span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': phoneUkControl.errors && phoneUkControl.dirty}\"\n   [id]=\"id()\" type=\"tel\" [formControl]=\"phoneUkControl\">\n\n</div>\n"
+module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !phoneUkControl.valid && phoneUkControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"phoneUkControl.errors && phoneUkControl.dirty\">{{phoneUkControl.errors | ccdFirstError:caseField.label}}</span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': phoneUkControl.errors && phoneUkControl.dirty}\"\n   [id]=\"id()\" type=\"tel\" [formControl]=\"phoneUkControl\">\n\n</div>\n"
 
 /***/ }),
 
 /***/ 70945:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !textareaControl.valid && textareaControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"textareaControl.errors && (textareaControl.dirty || textareaControl.touched)\">{{textareaControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <textarea (input)=\"autoGrow($event)\" class=\"form-control bottom-30\" [ngClass]=\"{'govuk-textarea--error': textareaControl.errors && (textareaControl.dirty || textareaControl.touched)}\"\n   [id]=\"id()\" rows=\"3\" [formControl]=\"textareaControl\"></textarea>\n\n</div>\n"
+module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !textareaControl.valid && textareaControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"textareaControl.errors && textareaControl.dirty\">{{textareaControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <textarea (input)=\"autoGrow($event)\" class=\"form-control bottom-30\" [ngClass]=\"{'govuk-textarea--error': textareaControl.errors && textareaControl.dirty}\" \n   [id]=\"id()\" rows=\"3\" [formControl]=\"textareaControl\"></textarea>\n\n</div>\n"
 
 /***/ }),
 
 /***/ 36157:
 /***/ ((module) => {
 
-module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !textControl.valid && (textControl.dirty || textControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"textControl.errors && (textControl.dirty || textControl.touched)\">{{textControl.errors | ccdFirstError:caseField.label}}</span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': textControl.errors && (textControl.dirty || textControl.touched)}\"\n  [id]=\"id()\" type=\"text\" [formControl]=\"textControl\">\n\n</div>\n"
+module.exports = "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !textControl.valid && textControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n  <span class=\"error-message\" *ngIf=\"textControl.errors && textControl.dirty\">{{textControl.errors | ccdFirstError:caseField.label}}</span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': textControl.errors && textControl.dirty}\"\n  [id]=\"id()\" type=\"text\" [formControl]=\"textControl\">\n  \n</div>\n"
 
 /***/ }),
 
 /***/ 77724:
 /***/ ((module) => {
 
-module.exports = "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && (yesNoControl.dirty || yesNoControl.touched)}\">\n\n\t<fieldset class=\"inline\">\n\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && (yesNoControl.dirty || yesNoControl.touched)\">{{yesNoControl.errors | ccdFirstError:caseField.label}}</span>\n\n    <div [id]=\"createElementId('radio')\">\n\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n  \t    <label class=\"form-label\" [for]=\"createElementId(value)\">{{value}}</label>\n  \t  </div>\n\n    </div>\n\n\t</fieldset>\n\n</div>\n"
+module.exports = "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && yesNoControl.dirty}\">\n\n\t<fieldset class=\"inline\">\n\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && yesNoControl.dirty\">{{yesNoControl.errors | ccdFirstError:caseField.label}}</span>\n\n    <div [id]=\"createElementId('radio')\">\n\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n  \t    <label class=\"form-label\" [for]=\"createElementId(value)\">{{value}}</label>\n  \t  </div>\n\n    </div>\n\n\t</fieldset>\n\n</div>\n"
 
 /***/ }),