@hmcts/ccd-case-ui-toolkit 4.4.0-rc.3 → 4.5.0-basic-access-view-2

package/dist/index.umd.js

@@ -1,19 +1,19 @@
 /**
  * @hmcts/ccd-case-ui-toolkit - Case UI Toolkit
- * @version v4.4.0-rc.3
+ * @version v4.5.0-basic-access-view-2
  * @link undefined
  * @license MIT
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("rxjs"), require("@angular/common/http"), require("rxjs/operators"), require("@angular/platform-browser"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/cdk/portal"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"));
+		module.exports = factory(require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("rxjs"), require("@angular/common/http"), require("rxjs/operators"), require("@angular/platform-browser"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/cdk/portal"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"), require("@angular/compiler/src/util"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@angular/core", "@angular/common", "@angular/router", "@angular/forms", "rxjs", "@angular/common/http", "rxjs/operators", "@angular/platform-browser", "rxjs/operator/publish", "rxjs/Rx", "rxjs/internal/operators", "rxjs/Subject", "rxjs/add/operator/map", "@angular/material", "@angular/cdk/coercion", "@angular/cdk/overlay", "@angular/cdk/bidi", "@angular/cdk/keycodes", "@angular/material/form-field", "@angular/cdk/portal", "@angular/material/datepicker", "@angular/material/dialog", "@angular/material/button", "@angular/material/icon", "@angular/material/input", "@angular/material/core", "@angular/cdk/platform", "rxjs/index", "rxjs/observable/throw", "rxjs/add/operator/do"], factory);
+		define(["@angular/core", "@angular/common", "@angular/router", "@angular/forms", "rxjs", "@angular/common/http", "rxjs/operators", "@angular/platform-browser", "rxjs/operator/publish", "rxjs/Rx", "rxjs/internal/operators", "rxjs/Subject", "rxjs/add/operator/map", "@angular/material", "@angular/cdk/coercion", "@angular/cdk/overlay", "@angular/cdk/bidi", "@angular/cdk/keycodes", "@angular/material/form-field", "@angular/cdk/portal", "@angular/material/datepicker", "@angular/material/dialog", "@angular/material/button", "@angular/material/icon", "@angular/material/input", "@angular/material/core", "@angular/cdk/platform", "rxjs/index", "rxjs/observable/throw", "rxjs/add/operator/do", "@angular/compiler/src/util"], factory);
 	else if(typeof exports === 'object')
-		exports["case-ui-toolkit"] = factory(require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("rxjs"), require("@angular/common/http"), require("rxjs/operators"), require("@angular/platform-browser"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/cdk/portal"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"));
+		exports["case-ui-toolkit"] = factory(require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("rxjs"), require("@angular/common/http"), require("rxjs/operators"), require("@angular/platform-browser"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/cdk/portal"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"), require("@angular/compiler/src/util"));
 	else
-		root["case-ui-toolkit"] = factory(root["ng"]["core"], root["ng"]["common"], root["ng"]["router"], root["ng"]["forms"], root["rxjs"], root["ng"]["commonHttp"], root["rxjs"]["operators"], root["ng"]["platformBrowser"], root["rxjs"]["operator"]["publish"], root["rxjs"]["Rx"], root["rxjs"]["internal"]["operators"], root["rxjs"]["Subject"], root["rxjs"]["add"]["operator"]["map"], root["ng"]["material"], root["ng"]["cdkCoercion"], root["ng"]["cdkOverlay"], root["ng"]["cdkBidi"], root["ng"]["cdkKeycodes"], root["ng"]["materialFormField"], root["ng"]["cdkPortal"], root["ng"]["materialDatepicker"], root["ng"]["materialDialog"], root["ng"]["materialButton"], root["ng"]["materialIcon"], root["ng"]["materialInput"], root["ng"]["materialCore"], root["ng"]["cdkPlatform"], root["rxjs"]["index"], root["rxjs"]["observable"]["throw"], root["rxjs"]["add"]["operator"]["do"]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE__57208__, __WEBPACK_EXTERNAL_MODULE__91216__, __WEBPACK_EXTERNAL_MODULE__92302__, __WEBPACK_EXTERNAL_MODULE__92985__, __WEBPACK_EXTERNAL_MODULE__87318__, __WEBPACK_EXTERNAL_MODULE__17103__, __WEBPACK_EXTERNAL_MODULE__19443__, __WEBPACK_EXTERNAL_MODULE__3125__, __WEBPACK_EXTERNAL_MODULE__49570__, __WEBPACK_EXTERNAL_MODULE__22016__, __WEBPACK_EXTERNAL_MODULE__41163__, __WEBPACK_EXTERNAL_MODULE__66284__, __WEBPACK_EXTERNAL_MODULE__88091__, __WEBPACK_EXTERNAL_MODULE__69451__, __WEBPACK_EXTERNAL_MODULE__26482__, __WEBPACK_EXTERNAL_MODULE__22083__, __WEBPACK_EXTERNAL_MODULE__99183__, __WEBPACK_EXTERNAL_MODULE__39739__, __WEBPACK_EXTERNAL_MODULE__27959__, __WEBPACK_EXTERNAL_MODULE__13571__, __WEBPACK_EXTERNAL_MODULE__93560__, __WEBPACK_EXTERNAL_MODULE__44999__, __WEBPACK_EXTERNAL_MODULE__31106__, __WEBPACK_EXTERNAL_MODULE__21495__, __WEBPACK_EXTERNAL_MODULE__22839__, __WEBPACK_EXTERNAL_MODULE__36080__, __WEBPACK_EXTERNAL_MODULE__31250__, __WEBPACK_EXTERNAL_MODULE__91996__, __WEBPACK_EXTERNAL_MODULE__8215__, __WEBPACK_EXTERNAL_MODULE__36964__) {
+		root["case-ui-toolkit"] = factory(root["ng"]["core"], root["ng"]["common"], root["ng"]["router"], root["ng"]["forms"], root["rxjs"], root["ng"]["commonHttp"], root["rxjs"]["operators"], root["ng"]["platformBrowser"], root["rxjs"]["operator"]["publish"], root["rxjs"]["Rx"], root["rxjs"]["internal"]["operators"], root["rxjs"]["Subject"], root["rxjs"]["add"]["operator"]["map"], root["ng"]["material"], root["ng"]["cdkCoercion"], root["ng"]["cdkOverlay"], root["ng"]["cdkBidi"], root["ng"]["cdkKeycodes"], root["ng"]["materialFormField"], root["ng"]["cdkPortal"], root["ng"]["materialDatepicker"], root["ng"]["materialDialog"], root["ng"]["materialButton"], root["ng"]["materialIcon"], root["ng"]["materialInput"], root["ng"]["materialCore"], root["ng"]["cdkPlatform"], root["rxjs"]["index"], root["rxjs"]["observable"]["throw"], root["rxjs"]["add"]["operator"]["do"], root["ng"]["compilerSrcUtil"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__57208__, __WEBPACK_EXTERNAL_MODULE__91216__, __WEBPACK_EXTERNAL_MODULE__92302__, __WEBPACK_EXTERNAL_MODULE__92985__, __WEBPACK_EXTERNAL_MODULE__87318__, __WEBPACK_EXTERNAL_MODULE__17103__, __WEBPACK_EXTERNAL_MODULE__19443__, __WEBPACK_EXTERNAL_MODULE__3125__, __WEBPACK_EXTERNAL_MODULE__49570__, __WEBPACK_EXTERNAL_MODULE__22016__, __WEBPACK_EXTERNAL_MODULE__41163__, __WEBPACK_EXTERNAL_MODULE__66284__, __WEBPACK_EXTERNAL_MODULE__88091__, __WEBPACK_EXTERNAL_MODULE__69451__, __WEBPACK_EXTERNAL_MODULE__26482__, __WEBPACK_EXTERNAL_MODULE__22083__, __WEBPACK_EXTERNAL_MODULE__99183__, __WEBPACK_EXTERNAL_MODULE__39739__, __WEBPACK_EXTERNAL_MODULE__27959__, __WEBPACK_EXTERNAL_MODULE__13571__, __WEBPACK_EXTERNAL_MODULE__93560__, __WEBPACK_EXTERNAL_MODULE__44999__, __WEBPACK_EXTERNAL_MODULE__31106__, __WEBPACK_EXTERNAL_MODULE__21495__, __WEBPACK_EXTERNAL_MODULE__22839__, __WEBPACK_EXTERNAL_MODULE__36080__, __WEBPACK_EXTERNAL_MODULE__31250__, __WEBPACK_EXTERNAL_MODULE__91996__, __WEBPACK_EXTERNAL_MODULE__8215__, __WEBPACK_EXTERNAL_MODULE__36964__, __WEBPACK_EXTERNAL_MODULE__18427__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -5194,6 +5194,468 @@ 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:
@@ -10283,6 +10745,15 @@ var AbstractAppConfig = /** @class */ (function () {
     AbstractAppConfig.prototype.getUserInfoApiUrl = function () {
         return undefined;
     };
+    AbstractAppConfig.prototype.getAccessManagementMode = function () {
+        return undefined;
+    };
+    AbstractAppConfig.prototype.getAccessManagementBasicViewMock = function () {
+        return undefined;
+    };
+    AbstractAppConfig.prototype.getLocationRefApiUrl = function () {
+        return undefined;
+    };
     return AbstractAppConfig;
 }());
 exports.AbstractAppConfig = AbstractAppConfig;
@@ -10487,6 +10958,7 @@ var AlertMessageType;
     AlertMessageType["WARNING"] = "warning";
     AlertMessageType["SUCCESS"] = "success";
     AlertMessageType["ERROR"] = "error";
+    AlertMessageType["INFORMATION"] = "information";
 })(AlertMessageType || (AlertMessageType = {}));
 var AlertComponent = /** @class */ (function () {
     function AlertComponent() {
@@ -10497,6 +10969,7 @@ var AlertComponent = /** @class */ (function () {
     AlertComponent.TYPE_WARNING = 'warning';
     AlertComponent.TYPE_SUCCESS = 'success';
     AlertComponent.TYPE_ERROR = 'error';
+    AlertComponent.TYPE_INFORMATION = 'information';
     __decorate([
         core_1.Input(),
         __metadata("design:type", String)
@@ -10557,6 +11030,22 @@ var AlertModule = /** @class */ (function () {
 exports.AlertModule = AlertModule;
 
 
+/***/ }),
+
+/***/ 44944:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(11733));
+__export(__webpack_require__(69349));
+__export(__webpack_require__(62467));
+
+
 /***/ }),
 
 /***/ 56933:
@@ -10593,6 +11082,20 @@ var BannersModule = /** @class */ (function () {
 exports.BannersModule = BannersModule;
 
 
+/***/ }),
+
+/***/ 36980:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(44944));
+
+
 /***/ }),
 
 /***/ 4079:
@@ -10657,6 +11160,20 @@ var BodyModule = /** @class */ (function () {
 exports.BodyModule = BodyModule;
 
 
+/***/ }),
+
+/***/ 13227:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(4079));
+
+
 /***/ }),
 
 /***/ 4560:
@@ -10738,6 +11255,20 @@ var FootersModule = /** @class */ (function () {
 exports.FootersModule = FootersModule;
 
 
+/***/ }),
+
+/***/ 99782:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(4560));
+
+
 /***/ }),
 
 /***/ 13424:
@@ -10983,6 +11514,20 @@ var DateInputComponent = /** @class */ (function () {
 exports.DateInputComponent = DateInputComponent;
 
 
+/***/ }),
+
+/***/ 69232:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(13424));
+
+
 /***/ }),
 
 /***/ 43153:
@@ -11021,6 +11566,20 @@ var FormModule = /** @class */ (function () {
 exports.FormModule = FormModule;
 
 
+/***/ }),
+
+/***/ 70548:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(69232));
+
+
 /***/ }),
 
 /***/ 80886:
@@ -11075,6 +11634,20 @@ var HeaderBarComponent = /** @class */ (function () {
 exports.HeaderBarComponent = HeaderBarComponent;
 
 
+/***/ }),
+
+/***/ 76100:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(80886));
+
+
 /***/ }),
 
 /***/ 79322:
@@ -11111,6 +11684,38 @@ var HeadersModule = /** @class */ (function () {
 exports.HeadersModule = HeadersModule;
 
 
+/***/ }),
+
+/***/ 38253:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(76100));
+__export(__webpack_require__(13574));
+__export(__webpack_require__(85693));
+__export(__webpack_require__(79322));
+
+
+/***/ }),
+
+/***/ 13574:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(77773));
+__export(__webpack_require__(37587));
+
+
 /***/ }),
 
 /***/ 37587:
@@ -11193,6 +11798,20 @@ var NavigationComponent = /** @class */ (function () {
 exports.NavigationComponent = NavigationComponent;
 
 
+/***/ }),
+
+/***/ 85693:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(79577));
+
+
 /***/ }),
 
 /***/ 79577:
@@ -11238,6 +11857,24 @@ var PhaseComponent = /** @class */ (function () {
 exports.PhaseComponent = PhaseComponent;
 
 
+/***/ }),
+
+/***/ 34975:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(99782));
+__export(__webpack_require__(38253));
+__export(__webpack_require__(13227));
+__export(__webpack_require__(70548));
+__export(__webpack_require__(36980));
+
+
 /***/ }),
 
 /***/ 80624:
@@ -12224,6 +12861,7 @@ var form_error_service_1 = __webpack_require__(34790);
 var draft_model_1 = __webpack_require__(98072);
 var fields_1 = __webpack_require__(64906);
 var case_field_service_1 = __webpack_require__(72141);
+var helpers_1 = __webpack_require__(23495);
 var CaseEditPageComponent = /** @class */ (function () {
     function CaseEditPageComponent(caseEdit, route, formValueService, formErrorService, cdRef, pageValidationService, dialog, caseFieldService) {
         this.caseEdit = caseEdit;
@@ -12256,7 +12894,7 @@ var CaseEditPageComponent = /** @class */ (function () {
     };
     CaseEditPageComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.initDialog();
+        helpers_1.initDialog(this.dialogConfig);
         this.eventTrigger = this.caseEdit.eventTrigger;
         this.editForm = this.caseEdit.form;
         this.wizard = this.caseEdit.wizard;
@@ -12391,15 +13029,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)) {
+            if (this.pageWithFieldExists(caseFieldId, this.currentPage.id)) {
                 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) {
-        return this.wizard.findWizardPage(caseFieldId);
+    CaseEditPageComponent.prototype.pageWithFieldExists = function (caseFieldId, pageId) {
+        return this.wizard.findWizardPage(caseFieldId, pageId);
     };
     CaseEditPageComponent.prototype.updateEventTriggerCaseFields = function (caseFieldId, jsonData, eventTrigger) {
         if (eventTrigger.case_fields) {
@@ -12481,19 +13119,6 @@ var CaseEditPageComponent = /** @class */ (function () {
             ? CaseEditPageComponent_1.TRIGGER_TEXT_SAVE
             : CaseEditPageComponent_1.TRIGGER_TEXT_START;
     };
-    CaseEditPageComponent.prototype.initDialog = function () {
-        this.dialogConfig = new material_1.MatDialogConfig();
-        this.dialogConfig.disableClose = true;
-        this.dialogConfig.autoFocus = true;
-        this.dialogConfig.ariaLabel = 'Label';
-        this.dialogConfig.height = '245px';
-        this.dialogConfig.width = '550px';
-        this.dialogConfig.panelClass = 'dialog';
-        this.dialogConfig.closeOnNavigation = false;
-        this.dialogConfig.position = {
-            top: window.innerHeight / 2 - 120 + 'px', left: window.innerWidth / 2 - 275 + 'px'
-        };
-    };
     CaseEditPageComponent.prototype.discard = function () {
         if (this.route.snapshot.queryParamMap.get(case_edit_component_1.CaseEditComponent.ORIGIN_QUERY_PARAM) === 'viewDraft') {
             this.caseEdit.cancelled.emit({ status: CaseEditPageComponent_1.RESUMED_FORM_DISCARD });
@@ -13551,8 +14176,8 @@ var Wizard = /** @class */ (function () {
         }
         return canShow(foundPage) ? foundPage : undefined;
     };
-    Wizard.prototype.findWizardPage = function (caseFieldId) {
-        return this.pages.find(function (wizardPage) { return wizardPage.case_fields &&
+    Wizard.prototype.findWizardPage = function (caseFieldId, pageId) {
+        return this.pages.find(function (wizardPage) { return wizardPage.id === pageId && wizardPage.case_fields &&
             wizardPage.case_fields.filter(function (caseField) { return caseField.id === caseFieldId; }).length > 0; });
     };
     Wizard.prototype.nextPage = function (pageId, canShow) {
@@ -14091,6 +14716,9 @@ var CasesService = /** @class */ (function () {
         }
         return false;
     };
+    CasesService.prototype.getCourtOrHearingCentreName = function (locationId) {
+        return this.http.get(this.appConfig.getLocationRefApiUrl() + "/building-locations?epimms_id=" + locationId);
+    };
     var CasesService_1;
     // Internal (UI) API
     CasesService.V2_MEDIATYPE_CASE_VIEW = 'application/vnd.uk.gov.hmcts.ccd-data-store-api.ui-case-view.v2+json';
@@ -15453,6 +16081,262 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 __export(__webpack_require__(58710));
 
 
+/***/ }),
+
+/***/ 42906:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var __1 = __webpack_require__(2401);
+var domain_1 = __webpack_require__(59346);
+var CaseBasicAccessViewComponent = /** @class */ (function () {
+    function CaseBasicAccessViewComponent(casesService) {
+        this.casesService = casesService;
+        this.caseDetails = null;
+        this.accessType = null;
+        this.courtOrHearingCentre = null;
+    }
+    CaseBasicAccessViewComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        var locationId = this.caseDetails &&
+            this.caseDetails.basicFields &&
+            this.caseDetails.basicFields.caseManagementLocation &&
+            this.caseDetails.basicFields.caseManagementLocation.baseLocation ?
+            this.caseDetails.basicFields.caseManagementLocation.baseLocation : null;
+        if (locationId) {
+            this.courtOrHearingCentreSubscription = this.casesService.getCourtOrHearingCentreName(locationId).subscribe(function (courtOrHearingCentre) {
+                return _this.courtOrHearingCentre = courtOrHearingCentre[0] && courtOrHearingCentre[0].building_location_name ?
+                    courtOrHearingCentre[0].building_location_name :
+                    null;
+            });
+        }
+    };
+    CaseBasicAccessViewComponent.prototype.ngOnDestroy = function () {
+        if (this.courtOrHearingCentreSubscription) {
+            this.courtOrHearingCentreSubscription.unsubscribe();
+        }
+    };
+    CaseBasicAccessViewComponent.prototype.onCancel = function () {
+        // Navigate to the previous page
+        window.history.go(-1);
+    };
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", domain_1.CaseView)
+    ], CaseBasicAccessViewComponent.prototype, "caseDetails", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], CaseBasicAccessViewComponent.prototype, "accessType", void 0);
+    CaseBasicAccessViewComponent = __decorate([
+        core_1.Component({
+            selector: 'ccd-case-basic-access-view',
+            template: __webpack_require__(80734)
+        }),
+        __metadata("design:paramtypes", [__1.CasesService])
+    ], CaseBasicAccessViewComponent);
+    return CaseBasicAccessViewComponent;
+}());
+exports.CaseBasicAccessViewComponent = CaseBasicAccessViewComponent;
+
+
+/***/ }),
+
+/***/ 74891:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(42906));
+
+
+/***/ }),
+
+/***/ 70776:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var forms_1 = __webpack_require__(92985);
+var models_1 = __webpack_require__(55682);
+var CaseChallengedAccessRequestComponent = /** @class */ (function () {
+    function CaseChallengedAccessRequestComponent(fb) {
+        this.fb = fb;
+        this.submitted = false;
+        this.genericError = 'There is a problem';
+        this.radioSelectedControlName = 'radioSelected';
+        this.caseReferenceControlName = 'caseReference';
+        this.otherReasonControlName = 'otherReason';
+        this.accessReasons = [
+            { reason: models_1.AccessReason.LINKED_TO_CURRENT_CASE, checked: false },
+            { reason: models_1.AccessReason.CONSOLIDATE_CASE, checked: false },
+            { reason: models_1.AccessReason.ORDER_FOR_TRANSFER, checked: false },
+            { reason: models_1.AccessReason.OTHER, checked: false }
+        ];
+    }
+    CaseChallengedAccessRequestComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.title = models_1.ChallengedAccessRequestPageText.TITLE;
+        this.hint = models_1.ChallengedAccessRequestPageText.HINT;
+        this.caseRefLabel = models_1.ChallengedAccessRequestPageText.CASE_REF;
+        this.formGroup = this.fb.group({
+            radioSelected: new forms_1.FormControl(null, forms_1.Validators.required)
+        });
+        this.formGroup.addControl(this.caseReferenceControlName, new forms_1.FormControl('', {
+            validators: [function (control) {
+                    if (_this.formGroup.get(_this.radioSelectedControlName).value === models_1.AccessReason.LINKED_TO_CURRENT_CASE && _this.inputEmpty(control)) {
+                        return { 'invalid': true };
+                    }
+                    return null;
+                }],
+            updateOn: 'submit'
+        }));
+        this.formGroup.addControl(this.otherReasonControlName, new forms_1.FormControl('', {
+            validators: [function (control) {
+                    if (_this.formGroup.get(_this.radioSelectedControlName).value === models_1.AccessReason.OTHER && _this.inputEmpty(control)) {
+                        return { 'invalid': true };
+                    }
+                    return null;
+                }],
+            updateOn: 'submit'
+        }));
+    };
+    CaseChallengedAccessRequestComponent.prototype.inputEmpty = function (input) {
+        return input.value == null || input.value.trim().length === 0;
+    };
+    CaseChallengedAccessRequestComponent.prototype.onChange = function () {
+        this.submitted = false;
+        // Clear the "Case reference" and "Other reason" fields manually. This prevents any previous value being retained by
+        // the field's FormControl when the field itself is removed from the DOM by *ngIf. (If it is subsequently added back
+        // to the DOM by *ngIf, it will appear empty but the associated FormControl still has the previous value.)
+        this.formGroup.get(this.caseReferenceControlName).setValue('');
+        this.formGroup.get(this.otherReasonControlName).setValue('');
+    };
+    CaseChallengedAccessRequestComponent.prototype.onSubmit = function () {
+        this.submitted = true;
+        if (this.formGroup.get(this.radioSelectedControlName).invalid) {
+            this.errorMessage = {
+                title: this.genericError,
+                description: models_1.ChallengedAccessRequestErrors.NO_SELECTION
+            };
+        }
+        else {
+            if (this.formGroup.get(this.caseReferenceControlName).invalid) {
+                this.errorMessage = {
+                    title: this.genericError,
+                    description: models_1.ChallengedAccessRequestErrors.NO_CASE_REFERENCE,
+                    fieldId: 'case-reference'
+                };
+            }
+            if (this.formGroup.get(this.otherReasonControlName).invalid) {
+                this.errorMessage = {
+                    title: this.genericError,
+                    description: models_1.ChallengedAccessRequestErrors.NO_REASON,
+                    fieldId: 'other-reason'
+                };
+            }
+        }
+    };
+    CaseChallengedAccessRequestComponent.prototype.onCancel = function () {
+        // Navigate to the previous page
+        window.history.go(-1);
+    };
+    CaseChallengedAccessRequestComponent = __decorate([
+        core_1.Component({
+            selector: 'ccd-case-challenged-access-request',
+            template: __webpack_require__(17607)
+        }),
+        __metadata("design:paramtypes", [forms_1.FormBuilder])
+    ], CaseChallengedAccessRequestComponent);
+    return CaseChallengedAccessRequestComponent;
+}());
+exports.CaseChallengedAccessRequestComponent = CaseChallengedAccessRequestComponent;
+
+
+/***/ }),
+
+/***/ 38403:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(70776));
+
+
+/***/ }),
+
+/***/ 27153:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var AccessReason;
+(function (AccessReason) {
+    AccessReason["LINKED_TO_CURRENT_CASE"] = "The cases or parties are linked to the case I am working on";
+    AccessReason["CONSOLIDATE_CASE"] = "To determine if the case needs to be consolidated";
+    AccessReason["ORDER_FOR_TRANSFER"] = "To consider an order for transfer";
+    AccessReason["OTHER"] = "Other reason";
+})(AccessReason = exports.AccessReason || (exports.AccessReason = {}));
+var ChallengedAccessRequestPageText;
+(function (ChallengedAccessRequestPageText) {
+    ChallengedAccessRequestPageText["TITLE"] = "Why do you need to access this case?";
+    ChallengedAccessRequestPageText["HINT"] = "Select a reason.";
+    ChallengedAccessRequestPageText["CASE_REF"] = "Case reference";
+})(ChallengedAccessRequestPageText = exports.ChallengedAccessRequestPageText || (exports.ChallengedAccessRequestPageText = {}));
+var ChallengedAccessRequestErrors;
+(function (ChallengedAccessRequestErrors) {
+    ChallengedAccessRequestErrors["NO_SELECTION"] = "Select a reason";
+    ChallengedAccessRequestErrors["NO_CASE_REFERENCE"] = "Enter a case reference";
+    ChallengedAccessRequestErrors["NO_REASON"] = "Enter a reason";
+})(ChallengedAccessRequestErrors = exports.ChallengedAccessRequestErrors || (exports.ChallengedAccessRequestErrors = {}));
+
+
+/***/ }),
+
+/***/ 55682:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(27153));
+
+
 /***/ }),
 
 /***/ 83645:
@@ -15588,130 +16472,7 @@ __export(__webpack_require__(83645));
 
 /***/ }),
 
-/***/ 76979:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-var core_1 = __webpack_require__(57208);
-var services_1 = __webpack_require__(65010);
-var domain_1 = __webpack_require__(59346);
-var case_editor_1 = __webpack_require__(27070);
-var services_2 = __webpack_require__(65010);
-var rxjs_1 = __webpack_require__(87318);
-var operators_1 = __webpack_require__(19443);
-var services_3 = __webpack_require__(65010);
-var class_transformer_1 = __webpack_require__(86631);
-var CaseViewComponent = /** @class */ (function () {
-    function CaseViewComponent(navigationNotifierService, caseNotifier, casesService, draftService, alertService) {
-        this.navigationNotifierService = navigationNotifierService;
-        this.caseNotifier = caseNotifier;
-        this.casesService = casesService;
-        this.draftService = draftService;
-        this.alertService = alertService;
-        this.hasPrint = true;
-        this.hasEventSelector = true;
-        this.navigationTriggered = new core_1.EventEmitter();
-    }
-    CaseViewComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        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);
-        }))
-            .toPromise()
-            .catch(function (error) { return _this.checkAuthorizationError(error); });
-        this.navigationSubscription = this.navigationNotifierService.navigation.subscribe(function (navigation) {
-            _this.navigationTriggered.emit(navigation);
-        });
-    };
-    CaseViewComponent.prototype.ngOnDestroy = function () {
-        this.navigationSubscription.unsubscribe();
-    };
-    CaseViewComponent.prototype.isDataLoaded = function () {
-        return !!this.caseDetails;
-    };
-    CaseViewComponent.prototype.getCaseView = function (cid) {
-        if (domain_1.Draft.isDraft(cid)) {
-            return this.getDraft(cid);
-        }
-        else {
-            return this.casesService
-                .getCaseViewV2(cid);
-        }
-    };
-    CaseViewComponent.prototype.getDraft = function (cid) {
-        return this.draftService
-            .getDraft(cid);
-    };
-    CaseViewComponent.prototype.checkAuthorizationError = function (error) {
-        // TODO Should be logged to remote logging infrastructure
-        console.error(error);
-        if (error.status !== 401 && error.status !== 403) {
-            this.alertService.error(error.message);
-        }
-        return rxjs_1.throwError(error);
-    };
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", String)
-    ], CaseViewComponent.prototype, "case", void 0);
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", Object)
-    ], CaseViewComponent.prototype, "hasPrint", void 0);
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", Object)
-    ], CaseViewComponent.prototype, "hasEventSelector", void 0);
-    __decorate([
-        core_1.Output(),
-        __metadata("design:type", core_1.EventEmitter)
-    ], CaseViewComponent.prototype, "navigationTriggered", void 0);
-    CaseViewComponent = __decorate([
-        core_1.Component({
-            selector: 'ccd-case-view',
-            template: __webpack_require__(24288)
-        }),
-        __metadata("design:paramtypes", [services_3.NavigationNotifierService,
-            case_editor_1.CaseNotifier,
-            case_editor_1.CasesService,
-            services_2.DraftService,
-            services_1.AlertService])
-    ], CaseViewComponent);
-    return CaseViewComponent;
-}());
-exports.CaseViewComponent = CaseViewComponent;
-
-
-/***/ }),
-
-/***/ 65389:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-__export(__webpack_require__(76979));
-
-
-/***/ }),
-
-/***/ 89554:
+/***/ 76764:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
@@ -15748,9 +16509,9 @@ var dialogs_1 = __webpack_require__(84573);
 var directives_1 = __webpack_require__(66395);
 var domain_1 = __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) {
+var helpers_1 = __webpack_require__(23495);
+var CaseFullAccessViewComponent = /** @class */ (function () {
+    function CaseFullAccessViewComponent(ngZone, route, router, navigationNotifierService, orderService, activityPollingService, dialog, alertService, draftService, errorNotifierService, location) {
         this.ngZone = ngZone;
         this.route = route;
         this.router = router;
@@ -15760,32 +16521,23 @@ var CaseViewerComponent = /** @class */ (function () {
         this.dialog = dialog;
         this.alertService = alertService;
         this.draftService = draftService;
-        this.caseNotifier = caseNotifier;
         this.errorNotifierService = errorNotifierService;
         this.location = location;
         this.hasPrint = true;
         this.hasEventSelector = true;
         this.prependedTabs = [];
         this.BANNER = domain_1.DisplayMode.BANNER;
-        this.triggerTextStart = CaseViewerComponent_1.TRIGGER_TEXT_START;
-        this.triggerTextIgnoreWarnings = CaseViewerComponent_1.TRIGGER_TEXT_CONTINUE;
-        this.triggerText = CaseViewerComponent_1.TRIGGER_TEXT_START;
+        this.triggerTextStart = CaseFullAccessViewComponent_1.TRIGGER_TEXT_START;
+        this.triggerTextIgnoreWarnings = CaseFullAccessViewComponent_1.TRIGGER_TEXT_CONTINUE;
+        this.triggerText = CaseFullAccessViewComponent_1.TRIGGER_TEXT_START;
         this.ignoreWarning = false;
         this.callbackErrorsSubject = new Subject_1.Subject();
     }
-    CaseViewerComponent_1 = CaseViewerComponent;
-    CaseViewerComponent.prototype.ngOnInit = function () {
+    CaseFullAccessViewComponent_1 = CaseFullAccessViewComponent;
+    CaseFullAccessViewComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.initDialog();
-        if (!this.caseDetails) {
-            this.caseSubscription = this.caseNotifier.caseView.subscribe(function (caseDetails) {
-                _this.caseDetails = caseDetails;
-                _this.init();
-            });
-        }
-        else {
-            this.init();
-        }
+        helpers_1.initDialog(this.dialogConfig);
+        this.init();
         this.callbackErrorsSubject.subscribe(function (errorEvent) {
             _this.error = errorEvent;
         });
@@ -15796,10 +16548,10 @@ var CaseViewerComponent = /** @class */ (function () {
             }
         });
     };
-    CaseViewerComponent.prototype.isPrintEnabled = function () {
+    CaseFullAccessViewComponent.prototype.isPrintEnabled = function () {
         return this.caseDetails.case_type.printEnabled;
     };
-    CaseViewerComponent.prototype.ngOnDestroy = function () {
+    CaseFullAccessViewComponent.prototype.ngOnDestroy = function () {
         if (this.activityPollingService.isEnabled) {
             this.activitySubscription.unsubscribe();
         }
@@ -15811,15 +16563,15 @@ var CaseViewerComponent = /** @class */ (function () {
             this.errorSubscription.unsubscribe();
         }
     };
-    CaseViewerComponent.prototype.postViewActivity = function () {
+    CaseFullAccessViewComponent.prototype.postViewActivity = function () {
         return this.activityPollingService.postViewActivity(this.caseDetails.case_id);
     };
-    CaseViewerComponent.prototype.clearErrorsAndWarnings = function () {
+    CaseFullAccessViewComponent.prototype.clearErrorsAndWarnings = function () {
         this.resetErrors();
         this.ignoreWarning = false;
-        this.triggerText = CaseViewerComponent_1.TRIGGER_TEXT_START;
+        this.triggerText = CaseFullAccessViewComponent_1.TRIGGER_TEXT_START;
     };
-    CaseViewerComponent.prototype.applyTrigger = function (trigger) {
+    CaseFullAccessViewComponent.prototype.applyTrigger = function (trigger) {
         var _this = this;
         this.error = null;
         var theQueryParams = {};
@@ -15842,7 +16594,7 @@ var CaseViewerComponent = /** @class */ (function () {
         }
         else if (this.isDraft() && trigger.id !== domain_1.CaseViewTrigger.DELETE) {
             theQueryParams[domain_1.DRAFT_QUERY_PARAM] = this.caseDetails.case_id;
-            theQueryParams[CaseViewerComponent_1.ORIGIN_QUERY_PARAM] = 'viewDraft';
+            theQueryParams[CaseFullAccessViewComponent_1.ORIGIN_QUERY_PARAM] = 'viewDraft';
             this.navigationNotifierService.announceNavigation({
                 action: services_1.NavigationOrigin.DRAFT_RESUMED,
                 jid: this.caseDetails.case_type.jurisdiction.id,
@@ -15860,20 +16612,17 @@ var CaseViewerComponent = /** @class */ (function () {
             });
         }
     };
-    CaseViewerComponent.prototype.isDataLoaded = function () {
-        return !!this.caseDetails;
-    };
-    CaseViewerComponent.prototype.hasTabsPresent = function () {
+    CaseFullAccessViewComponent.prototype.hasTabsPresent = function () {
         return this.sortedTabs.length > 0 || this.prependedTabs.length > 0;
     };
-    CaseViewerComponent.prototype.callbackErrorsNotify = function (callbackErrorsContext) {
+    CaseFullAccessViewComponent.prototype.callbackErrorsNotify = function (callbackErrorsContext) {
         this.ignoreWarning = callbackErrorsContext.ignore_warning;
         this.triggerText = callbackErrorsContext.trigger_text;
     };
-    CaseViewerComponent.prototype.isDraft = function () {
+    CaseFullAccessViewComponent.prototype.isDraft = function () {
         return domain_1.Draft.isDraft(this.caseDetails.case_id);
     };
-    CaseViewerComponent.prototype.isTriggerButtonDisabled = function () {
+    CaseFullAccessViewComponent.prototype.isTriggerButtonDisabled = function () {
         return (this.error
             && this.error.callbackErrors
             && this.error.callbackErrors.length)
@@ -15882,7 +16631,7 @@ var CaseViewerComponent = /** @class */ (function () {
                 && this.error.details.field_errors
                 && this.error.details.field_errors.length);
     };
-    CaseViewerComponent.prototype.ngAfterViewInit = function () {
+    CaseFullAccessViewComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
         var matTab;
         var url = this.location.path(true);
@@ -15897,16 +16646,19 @@ var CaseViewerComponent = /** @class */ (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; });
-        if (matTab && matTab.position) {
-            this.tabGroup.selectedIndex = matTab.position;
+        else {
+            var regExp = new RegExp(CaseFullAccessViewComponent_1.UNICODE_SPACE, 'g');
+            hashValue = hashValue.replace(regExp, CaseFullAccessViewComponent_1.EMPTY_SPACE);
+            matTab = this.tabGroup._tabs.find(function (x) {
+                return x.textLabel.replace(CaseFullAccessViewComponent_1.EMPTY_SPACE, '').toLowerCase() === hashValue.toLowerCase();
+            });
+            if (matTab && matTab.position) {
+                this.tabGroup.selectedIndex = matTab.position;
+            }
         }
     };
-    CaseViewerComponent.prototype.tabChanged = function (tabChangeEvent) {
+    CaseFullAccessViewComponent.prototype.tabChanged = function (tabChangeEvent) {
         var tab = tabChangeEvent.tab['_viewContainerRef'];
         var id = tab.element.nativeElement.id;
         if (tabChangeEvent.index <= 1 && this.prependedTabs.length) {
@@ -15918,7 +16670,7 @@ var CaseViewerComponent = /** @class */ (function () {
             });
         }
     };
-    CaseViewerComponent.prototype.init = function () {
+    CaseFullAccessViewComponent.prototype.init = function () {
         var _this = this;
         // Clone and sort tabs array
         this.sortedTabs = this.orderService.sort(this.caseDetails.tabs);
@@ -15936,13 +16688,13 @@ var CaseViewerComponent = /** @class */ (function () {
             this.resetErrors();
         }
     };
-    CaseViewerComponent.prototype.sortTabFieldsAndFilterTabs = function (tabs) {
+    CaseFullAccessViewComponent.prototype.sortTabFieldsAndFilterTabs = function (tabs) {
         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); });
     };
-    CaseViewerComponent.prototype.getTabFields = function () {
+    CaseFullAccessViewComponent.prototype.getTabFields = function () {
         var caseDataFields = this.sortedTabs.reduce(function (acc, tab) {
             return acc.concat(class_transformer_1.plainToClass(domain_1.CaseField, tab.fields));
         }, []);
@@ -15954,7 +16706,7 @@ var CaseViewerComponent = /** @class */ (function () {
      * This FormGroup is necessary for evaluation the show/hide conditions of
      * fields that are dependent on a field only available on a DIFFERENT tab.
      */
-    CaseViewerComponent.prototype.buildFormGroup = function (caseFields) {
+    CaseFullAccessViewComponent.prototype.buildFormGroup = function (caseFields) {
         var value = {};
         if (caseFields) {
             caseFields.forEach(function (caseField) {
@@ -15964,54 +16716,42 @@ var CaseViewerComponent = /** @class */ (function () {
         }
         return new forms_1.FormGroup({ data: new forms_1.FormControl(value) });
     };
-    CaseViewerComponent.prototype.initDialog = function () {
-        this.dialogConfig = new material_1.MatDialogConfig();
-        this.dialogConfig.disableClose = true;
-        this.dialogConfig.autoFocus = true;
-        this.dialogConfig.ariaLabel = 'Label';
-        this.dialogConfig.height = '245px';
-        this.dialogConfig.width = '550px';
-        this.dialogConfig.panelClass = 'dialog';
-        this.dialogConfig.closeOnNavigation = false;
-        this.dialogConfig.position = {
-            top: window.innerHeight / 2 - 120 + 'px', left: window.innerWidth / 2 - 275 + 'px'
-        };
-    };
-    CaseViewerComponent.prototype.resetErrors = function () {
+    CaseFullAccessViewComponent.prototype.resetErrors = function () {
         this.error = null;
         this.callbackErrorsSubject.next(null);
         this.alertService.clear();
     };
-    var CaseViewerComponent_1;
-    CaseViewerComponent.ORIGIN_QUERY_PARAM = 'origin';
-    CaseViewerComponent.TRIGGER_TEXT_START = 'Go';
-    CaseViewerComponent.TRIGGER_TEXT_CONTINUE = 'Ignore Warning and Go';
-    CaseViewerComponent.space = '%20';
+    var CaseFullAccessViewComponent_1;
+    CaseFullAccessViewComponent.ORIGIN_QUERY_PARAM = 'origin';
+    CaseFullAccessViewComponent.TRIGGER_TEXT_START = 'Go';
+    CaseFullAccessViewComponent.TRIGGER_TEXT_CONTINUE = 'Ignore Warning and Go';
+    CaseFullAccessViewComponent.UNICODE_SPACE = '%20';
+    CaseFullAccessViewComponent.EMPTY_SPACE = ' ';
     __decorate([
         core_1.Input(),
         __metadata("design:type", Object)
-    ], CaseViewerComponent.prototype, "hasPrint", void 0);
+    ], CaseFullAccessViewComponent.prototype, "hasPrint", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Object)
-    ], CaseViewerComponent.prototype, "hasEventSelector", void 0);
+    ], CaseFullAccessViewComponent.prototype, "hasEventSelector", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", domain_1.CaseView)
-    ], CaseViewerComponent.prototype, "caseDetails", void 0);
+    ], CaseFullAccessViewComponent.prototype, "caseDetails", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Array)
-    ], CaseViewerComponent.prototype, "prependedTabs", void 0);
+    ], CaseFullAccessViewComponent.prototype, "prependedTabs", void 0);
     __decorate([
         core_1.ViewChild('tabGroup'),
         __metadata("design:type", material_1.MatTabGroup)
-    ], CaseViewerComponent.prototype, "tabGroup", void 0);
-    CaseViewerComponent = CaseViewerComponent_1 = __decorate([
+    ], CaseFullAccessViewComponent.prototype, "tabGroup", void 0);
+    CaseFullAccessViewComponent = CaseFullAccessViewComponent_1 = __decorate([
         core_1.Component({
-            selector: 'ccd-case-viewer',
-            template: __webpack_require__(67025),
-            styles: [__webpack_require__(15472)]
+            selector: 'ccd-case-full-access-view',
+            template: __webpack_require__(99839),
+            styles: [__webpack_require__(73262)]
         }),
         __metadata("design:paramtypes", [core_1.NgZone,
             router_1.ActivatedRoute,
@@ -16022,9 +16762,271 @@ var CaseViewerComponent = /** @class */ (function () {
             material_1.MatDialog,
             services_1.AlertService,
             services_1.DraftService,
-            case_editor_1.CaseNotifier,
             services_1.ErrorNotifierService,
             common_1.Location])
+    ], CaseFullAccessViewComponent);
+    return CaseFullAccessViewComponent;
+}());
+exports.CaseFullAccessViewComponent = CaseFullAccessViewComponent;
+
+
+/***/ }),
+
+/***/ 65341:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(76764));
+
+
+/***/ }),
+
+/***/ 76979:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var services_1 = __webpack_require__(65010);
+var domain_1 = __webpack_require__(59346);
+var case_editor_1 = __webpack_require__(27070);
+var services_2 = __webpack_require__(65010);
+var rxjs_1 = __webpack_require__(87318);
+var operators_1 = __webpack_require__(19443);
+var services_3 = __webpack_require__(65010);
+var class_transformer_1 = __webpack_require__(86631);
+var CaseViewComponent = /** @class */ (function () {
+    function CaseViewComponent(navigationNotifierService, caseNotifier, casesService, draftService, alertService) {
+        this.navigationNotifierService = navigationNotifierService;
+        this.caseNotifier = caseNotifier;
+        this.casesService = casesService;
+        this.draftService = draftService;
+        this.alertService = alertService;
+        this.hasPrint = true;
+        this.hasEventSelector = true;
+        this.navigationTriggered = new core_1.EventEmitter();
+    }
+    CaseViewComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        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);
+        }))
+            .toPromise()
+            .catch(function (error) { return _this.checkAuthorizationError(error); });
+        this.navigationSubscription = this.navigationNotifierService.navigation.subscribe(function (navigation) {
+            _this.navigationTriggered.emit(navigation);
+        });
+    };
+    CaseViewComponent.prototype.ngOnDestroy = function () {
+        this.navigationSubscription.unsubscribe();
+    };
+    CaseViewComponent.prototype.isDataLoaded = function () {
+        return !!this.caseDetails;
+    };
+    CaseViewComponent.prototype.getCaseView = function (cid) {
+        if (domain_1.Draft.isDraft(cid)) {
+            return this.getDraft(cid);
+        }
+        else {
+            return this.casesService
+                .getCaseViewV2(cid);
+        }
+    };
+    CaseViewComponent.prototype.getDraft = function (cid) {
+        return this.draftService
+            .getDraft(cid);
+    };
+    CaseViewComponent.prototype.checkAuthorizationError = function (error) {
+        // TODO Should be logged to remote logging infrastructure
+        console.error(error);
+        if (error.status !== 401 && error.status !== 403) {
+            this.alertService.error(error.message);
+        }
+        return rxjs_1.throwError(error);
+    };
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], CaseViewComponent.prototype, "case", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], CaseViewComponent.prototype, "hasPrint", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], CaseViewComponent.prototype, "hasEventSelector", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], CaseViewComponent.prototype, "navigationTriggered", void 0);
+    CaseViewComponent = __decorate([
+        core_1.Component({
+            selector: 'ccd-case-view',
+            template: __webpack_require__(24288)
+        }),
+        __metadata("design:paramtypes", [services_3.NavigationNotifierService,
+            case_editor_1.CaseNotifier,
+            case_editor_1.CasesService,
+            services_2.DraftService,
+            services_1.AlertService])
+    ], CaseViewComponent);
+    return CaseViewComponent;
+}());
+exports.CaseViewComponent = CaseViewComponent;
+
+
+/***/ }),
+
+/***/ 65389:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(76979));
+
+
+/***/ }),
+
+/***/ 89554:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var router_1 = __webpack_require__(92302);
+var app_config_1 = __webpack_require__(35185);
+var domain_1 = __webpack_require__(59346);
+var case_editor_1 = __webpack_require__(27070);
+var CaseViewerComponent = /** @class */ (function () {
+    function CaseViewerComponent(route, caseNotifier, appConfig) {
+        this.route = route;
+        this.caseNotifier = caseNotifier;
+        this.appConfig = appConfig;
+        this.hasPrint = true;
+        this.hasEventSelector = true;
+        this.prependedTabs = [];
+    }
+    CaseViewerComponent_1 = CaseViewerComponent;
+    CaseViewerComponent.prototype.ngOnInit = function () {
+        this.loadCaseDetails();
+    };
+    CaseViewerComponent.prototype.ngOnDestroy = function () {
+        if (!!this.caseSubscription) {
+            this.caseSubscription.unsubscribe();
+        }
+    };
+    CaseViewerComponent.prototype.loadCaseDetails = function () {
+        var _this = this;
+        if (!this.route.snapshot.data.case) {
+            this.caseSubscription = this.caseNotifier.caseView.subscribe(function (caseDetails) {
+                _this.caseDetails = caseDetails;
+                _this.setUserAccessType(_this.caseDetails);
+            });
+        }
+        else {
+            this.caseDetails = this.route.snapshot.data.case;
+            this.setUserAccessType(this.caseDetails);
+        }
+    };
+    CaseViewerComponent.prototype.setUserAccessType = function (caseDetails) {
+        // remove once CCD starts sending CAM data or Access management goes live
+        this.setMockData(caseDetails);
+        if (caseDetails && Array.isArray(caseDetails.metadataFields)) {
+            var access_process = caseDetails.metadataFields.find(function (metadataField) {
+                return metadataField.id === CaseViewerComponent_1.METADATA_FIELD_ACCESS_PROCEES_ID;
+            });
+            this.userAccessType = access_process ? access_process.value : null;
+        }
+    };
+    CaseViewerComponent.prototype.isDataLoaded = function () {
+        return !!this.caseDetails;
+    };
+    CaseViewerComponent.prototype.hasStandardAccess = function () {
+        var featureToggleOn = this.appConfig.getAccessManagementMode();
+        return featureToggleOn ? CaseViewerComponent_1.NON_STANDARD_USER_ACCESS_TYPES.indexOf(this.userAccessType) === -1 : true;
+    };
+    // remove once Access management goes live
+    CaseViewerComponent.prototype.setMockData = function (caseDetails) {
+        var accessManagementBasicViewMock = this.appConfig.getAccessManagementBasicViewMock();
+        if (accessManagementBasicViewMock.active && !caseDetails.basicFields) {
+            var access_process_index = caseDetails.metadataFields.findIndex(function (metadataField) {
+                return metadataField.id === CaseViewerComponent_1.METADATA_FIELD_ACCESS_PROCEES_ID;
+            });
+            if (access_process_index > -1) {
+                caseDetails.metadataFields[access_process_index].value = accessManagementBasicViewMock.accessProcess;
+            }
+            else {
+                var access_process = new domain_1.CaseField();
+                access_process.id = CaseViewerComponent_1.METADATA_FIELD_ACCESS_PROCEES_ID;
+                access_process.value = accessManagementBasicViewMock.accessProcess;
+                access_process.field_type = {
+                    id: '',
+                    type: 'Text'
+                };
+                caseDetails.metadataFields.push(access_process);
+            }
+            caseDetails.basicFields = accessManagementBasicViewMock.basicFields;
+        }
+    };
+    var CaseViewerComponent_1;
+    CaseViewerComponent.METADATA_FIELD_ACCESS_PROCEES_ID = '[ACCESS_PROCESS]';
+    CaseViewerComponent.NON_STANDARD_USER_ACCESS_TYPES = ['CHALLENGED', 'SPECIFIC'];
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], CaseViewerComponent.prototype, "hasPrint", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], CaseViewerComponent.prototype, "hasEventSelector", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Array)
+    ], CaseViewerComponent.prototype, "prependedTabs", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", domain_1.CaseView)
+    ], CaseViewerComponent.prototype, "caseDetails", void 0);
+    CaseViewerComponent = CaseViewerComponent_1 = __decorate([
+        core_1.Component({
+            selector: 'ccd-case-viewer',
+            template: __webpack_require__(67025)
+        }),
+        __metadata("design:paramtypes", [router_1.ActivatedRoute,
+            case_editor_1.CaseNotifier,
+            app_config_1.AbstractAppConfig])
     ], CaseViewerComponent);
     return CaseViewerComponent;
 }());
@@ -16065,6 +17067,12 @@ var services_2 = __webpack_require__(50137);
 var case_editor_1 = __webpack_require__(27070);
 var case_view_1 = __webpack_require__(65389);
 var pipes_1 = __webpack_require__(32741);
+var case_basic_access_view_1 = __webpack_require__(74891);
+var case_full_access_view_1 = __webpack_require__(65341);
+var components_1 = __webpack_require__(34975);
+var case_challenged_access_request_component_1 = __webpack_require__(70776);
+var error_message_component_1 = __webpack_require__(67679);
+var forms_1 = __webpack_require__(92985);
 var CaseViewerModule = /** @class */ (function () {
     function CaseViewerModule() {
     }
@@ -16086,15 +17094,21 @@ var CaseViewerModule = /** @class */ (function () {
                 case_history_1.CaseHistoryModule,
                 palette_1.EventLogModule,
                 material_1.MatTabsModule,
-                palette_1.ComplexModule
+                palette_1.ComplexModule,
+                forms_1.FormsModule,
+                forms_1.ReactiveFormsModule,
+                components_1.AlertModule
             ],
-            schemas: [core_1.NO_ERRORS_SCHEMA],
             declarations: [
                 case_event_trigger_1.CaseEventTriggerComponent,
                 printer_1.CasePrinterComponent,
                 case_viewer_component_1.CaseViewerComponent,
+                case_basic_access_view_1.CaseBasicAccessViewComponent,
+                case_full_access_view_1.CaseFullAccessViewComponent,
                 case_view_1.CaseViewComponent,
                 printer_1.PrintUrlPipe,
+                case_challenged_access_request_component_1.CaseChallengedAccessRequestComponent,
+                error_message_component_1.ErrorMessageComponent
             ],
             exports: [
                 case_viewer_component_1.CaseViewerComponent,
@@ -16134,10 +17148,13 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 __export(__webpack_require__(50137));
 __export(__webpack_require__(92100));
 __export(__webpack_require__(65389));
+__export(__webpack_require__(74891));
+__export(__webpack_require__(65341));
 __export(__webpack_require__(65773));
 __export(__webpack_require__(89554));
 __export(__webpack_require__(45296));
 __export(__webpack_require__(37355));
+__export(__webpack_require__(38403));
 
 
 /***/ }),
@@ -16539,6 +17556,7 @@ var case_event_trigger_component_1 = __webpack_require__(83645);
 var case_editor_1 = __webpack_require__(27070);
 var case_history_1 = __webpack_require__(30542);
 var file_upload_progress_guard_1 = __webpack_require__(27667);
+var case_challenged_access_request_1 = __webpack_require__(38403);
 exports.viewerRouting = [
     {
         path: 'print',
@@ -16556,6 +17574,10 @@ exports.viewerRouting = [
     {
         path: 'event/:eid/history',
         component: case_history_1.CaseHistoryComponent,
+    },
+    {
+        path: 'access-request',
+        component: case_challenged_access_request_1.CaseChallengedAccessRequestComponent
     }
 ];
 
@@ -17141,6 +18163,59 @@ var SaveOrDiscardDialogComponent = /** @class */ (function () {
 exports.SaveOrDiscardDialogComponent = SaveOrDiscardDialogComponent;
 
 
+/***/ }),
+
+/***/ 67679:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+/**
+ * Cloned from rpx-xui-webapp src/app/components/error-message/error-message.component.ts
+ */
+var core_1 = __webpack_require__(57208);
+var ErrorMessageComponent = /** @class */ (function () {
+    function ErrorMessageComponent() {
+    }
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], ErrorMessageComponent.prototype, "error", void 0);
+    ErrorMessageComponent = __decorate([
+        core_1.Component({
+            selector: 'exui-error-message',
+            template: __webpack_require__(9350)
+        })
+    ], ErrorMessageComponent);
+    return ErrorMessageComponent;
+}());
+exports.ErrorMessageComponent = ErrorMessageComponent;
+
+
+/***/ }),
+
+/***/ 21470:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(67679));
+
+
 /***/ }),
 
 /***/ 27468:
@@ -17465,6 +18540,45 @@ __export(__webpack_require__(53641));
 __export(__webpack_require__(23741));
 
 
+/***/ }),
+
+/***/ 23495:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(90479));
+
+
+/***/ }),
+
+/***/ 90479:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var material_1 = __webpack_require__(69451);
+function initDialog(dialogConfig) {
+    this.dialogConfig = new material_1.MatDialogConfig();
+    this.dialogConfig.disableClose = true;
+    this.dialogConfig.autoFocus = true;
+    this.dialogConfig.ariaLabel = 'Label';
+    this.dialogConfig.height = '245px';
+    this.dialogConfig.width = '550px';
+    this.dialogConfig.panelClass = 'dialog';
+    this.dialogConfig.closeOnNavigation = false;
+    this.dialogConfig.position = {
+        top: window.innerHeight / 2 - 120 + 'px', left: window.innerWidth / 2 - 275 + 'px'
+    };
+}
+exports.initDialog = initDialog;
+
+
 /***/ }),
 
 /***/ 2401:
@@ -17485,6 +18599,7 @@ __export(__webpack_require__(34679));
 __export(__webpack_require__(64633));
 __export(__webpack_require__(84573));
 __export(__webpack_require__(51585));
+__export(__webpack_require__(21470));
 __export(__webpack_require__(7108));
 __export(__webpack_require__(47174));
 __export(__webpack_require__(22212));
@@ -18253,12 +19368,7 @@ var AbstractFormFieldComponent = /** @class */ (function () {
     };
     AbstractFormFieldComponent.prototype.addControlToFormGroup = function (control, parent, replace) {
         if (replace) {
-            if (control['controls'] && control['controls']['Id'] && control['controls']['Id'].value === 'LinkedCase') {
-                parent.setControl('CaseReference', control['controls']['CaseReference']);
-            }
-            else {
-                parent.setControl(this.caseField.id, control);
-            }
+            parent.setControl(this.caseField.id, control);
         }
         else {
             parent.addControl(this.caseField.id, control);
@@ -18793,13 +19903,11 @@ var WriteCaseLinkFieldComponent = /** @class */ (function (_super) {
     WriteCaseLinkFieldComponent.prototype.ngOnInit = function () {
         if (this.caseField.value) {
             this.caseLinkGroup = this.registerControl(new forms_1.FormGroup({
-                'Id': new forms_1.FormControl('LinkedCase'),
                 'CaseReference': new forms_1.FormControl(this.caseField.value.CaseReference),
             }), true);
         }
         else {
             this.caseLinkGroup = this.registerControl(new forms_1.FormGroup({
-                'Id': new forms_1.FormControl('LinkedCase'),
                 'CaseReference': new forms_1.FormControl(),
             }), true);
         }
@@ -20644,6 +21752,7 @@ 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);
@@ -20681,14 +21790,16 @@ var DatetimePickerComponent = /** @class */ (function (_super) {
         var _this = this;
         this.dateTimeEntryFormat = this.formatTranslationService.showOnlyDates(this.caseField.dateTimeEntryFormat);
         this.configureDatePicker(this.dateTimeEntryFormat);
-        this.setDateTimeFormat();
-        this.dateControl = this.registerControl(new forms_1.FormControl(this.caseField.value));
+        // 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)));
         // 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.formatValue();
-        }, 1);
+            _this.formatValueAndSetErrors();
+        }, 1000);
         // when the status changes check that the maximum/minimum date has not been exceeded
         this.dateControl.statusChanges.subscribe(function () {
             _this.minError = _this.dateControl.hasError('matDatetimePickerMin');
@@ -20703,20 +21814,35 @@ var DatetimePickerComponent = /** @class */ (function (_super) {
     When the value changes, update the form control
     */
     DatetimePickerComponent.prototype.valueChanged = function () {
-        this.formatValue();
+        this.formatValueAndSetErrors();
     };
-    DatetimePickerComponent.prototype.formatValue = function () {
+    DatetimePickerComponent.prototype.formatValueAndSetErrors = 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();
     };
@@ -20813,7 +21939,9 @@ 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.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 } }
             ]
         }),
         __param(1, core_1.Inject(datetime_picker_1.NGX_MAT_DATE_FORMATS)),
@@ -21168,6 +22296,7 @@ var constants_1 = __webpack_require__(49071);
 var document_management_service_1 = __webpack_require__(53265);
 var case_notifier_1 = __webpack_require__(21190);
 var document_dialog_component_1 = __webpack_require__(46139);
+var helpers_1 = __webpack_require__(23495);
 var abstract_field_write_component_1 = __webpack_require__(47325);
 var file_upload_state_service_1 = __webpack_require__(41139);
 var WriteDocumentFieldComponent = /** @class */ (function (_super) {
@@ -21194,7 +22323,7 @@ var WriteDocumentFieldComponent = /** @class */ (function (_super) {
     };
     WriteDocumentFieldComponent.prototype.ngOnInit = function () {
         this.secureModeOn = this.appConfig.getDocumentSecureMode();
-        this.initDialog();
+        helpers_1.initDialog(this.dialogConfig);
         // EUI-3403. The field was not being registered when there was no value and the field
         // itself was not mandatory, which meant that show_conditions would not be evaluated.
         // I've cleaned up the logic and it's now always registered.
@@ -21308,19 +22437,6 @@ var WriteDocumentFieldComponent = /** @class */ (function (_super) {
             return undefined;
         }
     };
-    WriteDocumentFieldComponent.prototype.initDialog = function () {
-        this.dialogConfig = new material_1.MatDialogConfig();
-        this.dialogConfig.disableClose = true;
-        this.dialogConfig.autoFocus = true;
-        this.dialogConfig.ariaLabel = 'Label';
-        this.dialogConfig.height = '245px';
-        this.dialogConfig.width = '550px';
-        this.dialogConfig.panelClass = 'dialog';
-        this.dialogConfig.closeOnNavigation = false;
-        this.dialogConfig.position = {
-            top: window.innerHeight / 2 - 120 + 'px', left: window.innerWidth / 2 - 275 + 'px'
-        };
-    };
     WriteDocumentFieldComponent.prototype.subscribeToCaseDetails = function () {
         var _this = this;
         this.caseEventSubscription = this.caseNotifier.caseView.subscribe({
@@ -26944,8 +28060,10 @@ var router_1 = __webpack_require__(92302);
 var forms_1 = __webpack_require__(92985);
 __webpack_require__(36964);
 var services_1 = __webpack_require__(65010);
+var util_1 = __webpack_require__(18427);
 var FORM_GROUP_VAL_LOC_STORAGE = 'workbasket-filter-form-group-value';
 var SAVED_QUERY_PARAM_LOC_STORAGE = 'savedQueryParams';
+var REGION_LIST_AND_FRC_FILTER = 'regionList';
 var WorkbasketFiltersComponent = /** @class */ (function () {
     function WorkbasketFiltersComponent(route, workbasketInputFilterService, orderService, jurisdictionService, alertService, windowService) {
         this.route = route;
@@ -26992,6 +28110,8 @@ var WorkbasketFiltersComponent = /** @class */ (function () {
             this.selected.formGroup = JSON.parse(localStorage.getItem(FORM_GROUP_VAL_LOC_STORAGE));
         }
         else {
+            // Update form group filters
+            this.updateFormGroupFilters();
             this.selected.formGroup = this.formGroup;
         }
         this.selected.init = init;
@@ -27179,6 +28299,38 @@ var WorkbasketFiltersComponent = /** @class */ (function () {
             this.caseFields = this.workbasketInputs.map(function (item) { return services_1.FieldsUtils.convertToCaseField(item.field); });
         }
     };
+    /**
+     * This method is used to clear the previously used
+     * form group control filter values to make sure only the
+     * currently selected form group control filter values are present.
+     *
+     * Has been implemented for 'Region and FRC filters' and can be extended
+     * in future to incorporate other dynamic filters.
+     *
+     * @private
+     * @memberof WorkbasketFiltersComponent
+     */
+    WorkbasketFiltersComponent.prototype.updateFormGroupFilters = function () {
+        // Read the form group local storage
+        var formGroupLS = JSON.parse(this.windowService.getLocalStorage(FORM_GROUP_VAL_LOC_STORAGE));
+        // Form group local storage is available and contains regionList property
+        if (util_1.isDefined(formGroupLS) && formGroupLS.hasOwnProperty(REGION_LIST_AND_FRC_FILTER)) {
+            // If regionList value does not match between local storage and form group
+            // then the filter value has been changed and we need to clear the old filter values
+            if (formGroupLS[REGION_LIST_AND_FRC_FILTER] !== this.formGroup.get(REGION_LIST_AND_FRC_FILTER).value) {
+                for (var key in formGroupLS) {
+                    if (formGroupLS.hasOwnProperty(key)) {
+                        var value = formGroupLS[key];
+                        // Clear the filter form group control values if it has a value in local storage
+                        // The regionList form group control value should be ignored as it always contain the latest value
+                        if (key !== REGION_LIST_AND_FRC_FILTER && value != null) {
+                            this.formGroup.get(key).setValue(null);
+                        }
+                    }
+                }
+            }
+        }
+    };
     var WorkbasketFiltersComponent_1;
     WorkbasketFiltersComponent.PARAM_JURISDICTION = 'jurisdiction';
     WorkbasketFiltersComponent.PARAM_CASE_TYPE = 'case-type';
@@ -30509,7 +31661,7 @@ var CcdCaseTitlePipe = /** @class */ (function () {
     CcdCaseTitlePipe.prototype.transform = function (caseTitle, caseFields, values) {
         var caseFieldValues = this.getReadOnlyAndFormFields(values, caseFields);
         var result = this.placeholderService.resolvePlaceholders(caseFieldValues, caseTitle);
-        return result.replace(/\n/g, '<br>').replace(/#/g, '');
+        return result;
     };
     CcdCaseTitlePipe.prototype.getReadOnlyAndFormFields = function (formGroup, caseFields) {
         return this.fieldsUtils.mergeLabelCaseFieldsAndFormFields(caseFields, formGroup.getRawValue());
@@ -31632,6 +32784,10 @@ 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
@@ -31675,6 +32831,9 @@ 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) {
@@ -34379,7 +35538,7 @@ var RequestOptionsBuilder = /** @class */ (function () {
                 if (RequestOptionsBuilder_1.includeParam(caseCriteria[criterion])) {
                     var key = RequestOptionsBuilder_1.FIELD_PREFIX + criterion;
                     var value = caseCriteria[criterion].trim ? caseCriteria[criterion].trim() : caseCriteria[criterion];
-                    params = params.set(key, value);
+                    params = params.set(key, value.replace(/’/i, "'"));
                 }
             }
         }
@@ -36118,7 +37277,7 @@ exports.push([module.id, "", ""]);
 
 /***/ }),
 
-/***/ 72402:
+/***/ 50378:
 /***/ ((module, exports, __webpack_require__) => {
 
 exports = module.exports = __webpack_require__(9252)(false);
@@ -62136,7 +63295,7 @@ Prism.languages.js = Prism.languages.javascript;
 /***/ 36749:
 /***/ ((module) => {
 
-module.exports = "<div [ngClass]=\"{'hmcts-banner hmcts-banner--warning':type === alertMessageType.WARNING || type === alertMessageType.ERROR}\">\n  <div [ngClass]=\"{'hmcts-banner hmcts-banner--success':type === alertMessageType.SUCCESS}\">\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"alertMessageType.WARNING\">\n        <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n          <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"></path>\n        </svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"alertMessageType.ERROR\">\n        <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n          <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"></path>\n        </svg>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"alertMessageType.SUCCESS\">\n        <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n          xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n          <path d=\"M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z\"></path>\n        </svg>\n      </ng-container>\n    </ng-container>\n    <div class=\"hmcts-banner__message\">\n      <span class=\"hmcts-banner__assistive\">{{type}}</span>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n"
+module.exports = "<div\n  class=\"hmcts-banner\"\n  [class.hmcts-banner--warning]=\"type === alertMessageType.WARNING || type === alertMessageType.ERROR\"\n  [class.hmcts-banner--success]=\"type === alertMessageType.SUCCESS\"\n>\n  <ng-container [ngSwitch]=\"type\">\n    <ng-container *ngSwitchCase=\"alertMessageType.WARNING\">\n      <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n        <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"></path>\n      </svg>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"alertMessageType.ERROR\">\n      <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n        <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"></path>\n      </svg>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"alertMessageType.SUCCESS\">\n      <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n        <path d=\"M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z\"></path>\n      </svg>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"alertMessageType.INFORMATION\">\n      <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n        <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n      C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\"></path>\n      </svg>\n    </ng-container>\n  </ng-container>\n  <div class=\"hmcts-banner__message\">\n    <span class=\"hmcts-banner__assistive\">{{type}}</span>\n    <ng-content></ng-content>\n  </div>\n</div>\n"
 
 /***/ }),
 
@@ -62234,7 +63393,7 @@ module.exports = "<div *ngIf=\"isDataLoaded()\">\n    <ccd-case-edit [submit]=\"
 /***/ 36604:
 /***/ ((module) => {
 
-module.exports = "<!-- Current Page && Event trigger name -->\n<h1 class=\"heading-h1\">{{ eventTrigger.name}}</h1>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <h2 class=\"heading-h2\" [innerHTML]=\"getCaseTitle() | ccdCaseTitle: caseFields : editForm.controls['data']\"></h2>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<form [formGroup]=\"formGroup\" (submit)=\"submit()\">\n  <div id=\"confirmation-header\" *ngIf=\"confirmation.getHeader()\">\n    <ccd-markdown [content]=\"confirmation.getHeader()\"></ccd-markdown>\n  </div>\n  <div id=\"confirmation-body\" *ngIf=\"confirmation.getBody()\">\n    <ccd-markdown [content]=\"confirmation.getBody()\"></ccd-markdown>\n  </div>\n  <button type=\"submit\" class=\"button\" data-ng-click=\"submit()\">{{this.triggerText}}</button>\n</form>\n"
+module.exports = "<!-- Current Page && Event trigger name -->\n<h1 class=\"heading-h1\">{{ eventTrigger.name}}</h1>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: caseFields : editForm.controls['data']\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<form [formGroup]=\"formGroup\" (submit)=\"submit()\">\n  <div id=\"confirmation-header\" *ngIf=\"confirmation.getHeader()\">\n    <ccd-markdown [content]=\"confirmation.getHeader()\"></ccd-markdown>\n  </div>\n  <div id=\"confirmation-body\" *ngIf=\"confirmation.getBody()\">\n    <ccd-markdown [content]=\"confirmation.getBody()\"></ccd-markdown>\n  </div>\n  <button type=\"submit\" class=\"button\" data-ng-click=\"submit()\">{{this.triggerText}}</button>\n</form>\n"
 
 /***/ }),
 
@@ -62248,14 +63407,14 @@ module.exports = "<ng-container ccdConditionalShowForm [formGroup]=\"formGroup\"
 /***/ 61865:
 /***/ ((module) => {
 
-module.exports = "<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label}}</h1>\n  </ng-container>\n</ng-container>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <h2 class=\"heading-h2\" [innerHTML]=\"getCaseTitle() | ccdCaseTitle: caseFields : editForm.controls['data']\"></h2>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<!-- Error message summary -->\n<div *ngIf=\"validationErrors.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div *ngFor=\"let validationError of validationErrors\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(validationError.id)\" class=\"validation-error\">{{validationError.message}}</a>\n      </li>\n    </ul>\n  </div>\n</div>\n\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=\"status\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n\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<!-- Event error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"status\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading-3\">\n    The event could not be created\n  </h3>\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\" class=\"ccd-error-summary-li\">{{fieldError.message}}</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<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <fieldset id=\"fieldset-case-data\">\n      <!-- single column -->\n      <ccd-case-edit-form id='caseEditForm' *ngIf=\"!currentPage.isMultiColumn()\" [fields]=\"currentPage.getCol1Fields()\"\n                          [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"\n                          [pageChangeSubject]=\"pageChangeSubject\"\n                          (valuesChanged)=\"applyValuesChanged($event)\"></ccd-case-edit-form>\n      <!-- two columns -->\n      <div *ngIf=\"currentPage.isMultiColumn()\" class=\"grid-row\">\n        <div class=\"column-two-thirds rightBorderSeparator\">\n          <ccd-case-edit-form id='caseEditForm1' [fields]=\"currentPage.getCol1Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n        <div class=\"column-one-third\">\n          <ccd-case-edit-form id='caseEditForm2' [fields]=\"currentPage.getCol2Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n      </div>\n    </fieldset>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!(hasPreviousPage$ | async)\" (click)=\"toPreviousPage()\">\n        Previous\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText}}</button>\n    </div>\n\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\">{{getCancelText()}}</a></p>\n\n  </form>\n</div>\n"
+module.exports = "<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label}}</h1>\n  </ng-container>\n</ng-container>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: caseFields : editForm.controls['data']\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<!-- Error message summary -->\n<div *ngIf=\"validationErrors.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div *ngFor=\"let validationError of validationErrors\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(validationError.id)\" class=\"validation-error\">{{validationError.message}}</a>\n      </li>\n    </ul>\n  </div>\n</div>\n\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=\"status\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n\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<!-- Event error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"status\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading-3\">\n    The event could not be created\n  </h3>\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\" class=\"ccd-error-summary-li\">{{fieldError.message}}</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<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <fieldset id=\"fieldset-case-data\">\n      <!-- single column -->\n      <ccd-case-edit-form id='caseEditForm' *ngIf=\"!currentPage.isMultiColumn()\" [fields]=\"currentPage.getCol1Fields()\"\n                          [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"\n                          [pageChangeSubject]=\"pageChangeSubject\"\n                          (valuesChanged)=\"applyValuesChanged($event)\"></ccd-case-edit-form>\n      <!-- two columns -->\n      <div *ngIf=\"currentPage.isMultiColumn()\" class=\"grid-row\">\n        <div class=\"column-two-thirds rightBorderSeparator\">\n          <ccd-case-edit-form id='caseEditForm1' [fields]=\"currentPage.getCol1Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n        <div class=\"column-one-third\">\n          <ccd-case-edit-form id='caseEditForm2' [fields]=\"currentPage.getCol2Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n      </div>\n    </fieldset>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!(hasPreviousPage$ | async)\" (click)=\"toPreviousPage()\">\n        Previous\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText}}</button>\n    </div>\n\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\">{{getCancelText()}}</a></p>\n\n  </form>\n</div>\n"
 
 /***/ }),
 
 /***/ 81278:
 /***/ ((module) => {
 
-module.exports = "<!-- Event trigger name -->\n<h1 class=\"govuk-heading-l\">{{ eventTrigger.name}}</h1>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <h2 class=\"heading-h2\" [innerHTML]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></h2>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\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) && !error.message)\" class=\"error-summary\" 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<!-- Event error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && (error.details || error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    The event could not be created\n  </h3>\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\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n  </ul>\n</div>\n<ccd-callback-errors [callbackErrorsSubject]=\"callbackErrorsSubject\"\n                     (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n<form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n  <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n    <h2 class=\"heading-h2\">Check your answers</h2>\n    <span class=\"text-16\">Check the information below carefully.</span>\n\n    <table class=\"form-table\">\n      <tbody>\n      <ng-container *ngFor=\"let page of this.wizard.pages\">\n        <ng-container *ngIf=\"isShown(page)\">\n          <ng-container *ngFor=\"let field of page\n          | ccdPageFields: editForm.controls['data']\n          | ccdReadFieldsFilter: false :undefined :true : editForm.controls['data']\n          | ccdCYAPageLabelFilter\">\n            <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n              <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                  [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <th *ngIf=\"!isLabel(field)\" class=\"valign-top case-field-label\"><span class=\"text-16\">{{field.label}}</span></th>\n                <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                  <ccd-field-read\n                    [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                    [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                </td>\n                <td class=\"valign-top check-your-answers__change case-field-change\">\n                  <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                     href=\"javascript:void(0)\"><span class=\"text-16\">Change</span></a>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n    <table class=\"summary-fields\">\n      <tbody>\n        <ng-container *ngFor=\"let field of this.showSummaryFields\">\n            <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n              <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <th>{{field.label}}</th>\n                <td class=\"form-cell\">\n                  <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                </td>\n              </tr>\n              <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <td colspan=\"2\">\n                  <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-container>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngIf=\"showEventNotes()\">\n    <fieldset id=\"fieldset-event\" formGroupName=\"event\" *ngIf=\"profile && !isSolicitor()\">\n      <div class=\"form-group\">\n        <label for=\"field-trigger-summary\" class=\"form-label\">\n          Event summary (optional)\n          <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n        </label>\n        <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n      </div>\n      <div class=\"form-group\">\n        <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n        <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                  maxlength=\"65536\"></textarea>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"form-group form-group-related\">\n    <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || isSubmitting\" (click)=\"previous()\">Previous</button>\n    <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">{{triggerText}}</button>\n  </div>\n  <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"isSubmitting\">{{getCancelText()}}</a></p>\n</form>\n"
+module.exports = "<!-- Event trigger name -->\n<h1 class=\"govuk-heading-l\">{{ eventTrigger.name}}</h1>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\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) && !error.message)\" class=\"error-summary\" 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<!-- Event error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && (error.details || error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    The event could not be created\n  </h3>\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\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n  </ul>\n</div>\n<ccd-callback-errors [callbackErrorsSubject]=\"callbackErrorsSubject\"\n                     (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n<form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n  <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n    <h2 class=\"heading-h2\">Check your answers</h2>\n    <span class=\"text-16\">Check the information below carefully.</span>\n\n    <table class=\"form-table\">\n      <tbody>\n      <ng-container *ngFor=\"let page of this.wizard.pages\">\n        <ng-container *ngIf=\"isShown(page)\">\n          <ng-container *ngFor=\"let field of page\n          | ccdPageFields: editForm.controls['data']\n          | ccdReadFieldsFilter: false :undefined :true : editForm.controls['data']\n          | ccdCYAPageLabelFilter\">\n            <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n              <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                  [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <th *ngIf=\"!isLabel(field)\" class=\"valign-top case-field-label\"><span class=\"text-16\">{{field.label}}</span></th>\n                <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                  <ccd-field-read\n                    [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                    [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                </td>\n                <td class=\"valign-top check-your-answers__change case-field-change\">\n                  <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                     href=\"javascript:void(0)\"><span class=\"text-16\">Change</span></a>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n    <table class=\"summary-fields\">\n      <tbody>\n        <ng-container *ngFor=\"let field of this.showSummaryFields\">\n            <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n              <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <th>{{field.label}}</th>\n                <td class=\"form-cell\">\n                  <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                </td>\n              </tr>\n              <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <td colspan=\"2\">\n                  <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-container>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngIf=\"showEventNotes()\">\n    <fieldset id=\"fieldset-event\" formGroupName=\"event\" *ngIf=\"profile && !isSolicitor()\">\n      <div class=\"form-group\">\n        <label for=\"field-trigger-summary\" class=\"form-label\">\n          Event summary (optional)\n          <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n        </label>\n        <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n      </div>\n      <div class=\"form-group\">\n        <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n        <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                  maxlength=\"65536\"></textarea>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"form-group form-group-related\">\n    <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || isSubmitting\" (click)=\"previous()\">Previous</button>\n    <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">{{triggerText}}</button>\n  </div>\n  <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"isSubmitting\">{{getCancelText()}}</a></p>\n</form>\n"
 
 /***/ }),
 
@@ -62308,6 +63467,20 @@ module.exports = "<div *ngIf=\"isDataLoaded()\">\n    <ng-container [ngSwitch]=\
 
 /***/ }),
 
+/***/ 80734:
+/***/ ((module) => {
+
+module.exports = "<form>\n  <div>\n    <cut-alert type=\"information\">This case requires {{accessType | lowercase}} access.<br />\n      <ng-container *ngIf=\"accessType === 'CHALLENGED'\">This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes.</ng-container>\n      <ng-container *ngIf=\"accessType === 'SPECIFIC'\">This is means it's outside your jurisdiction and requires authorisation. If you request access to the case, it will be logged for auditing purposes.</ng-container>\n    </cut-alert>\n    <h1 class=\"heading-h1\">#{{ caseDetails.case_id | ccdCaseReference}}</h1>\n    <h2 class=\"govuk-heading-m\">Case details</h2>\n    <dl class=\"govuk-summary-list\">\n      <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.basicFields?.caseNameHmctsInternal\">\n        <dt class=\"govuk-summary-list__key summary-key\">Case name</dt>\n        <dd class=\"govuk-summary-list__value\">{{caseDetails.basicFields.caseNameHmctsInternal}}</dd>\n      </div>\n      <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.case_type?.jurisdiction?.name\">\n        <dt class=\"govuk-summary-list__key summary-key\">Service</dt>\n        <dd class=\"govuk-summary-list__value\">{{caseDetails.case_type.jurisdiction.name}}</dd>\n      </div>\n      <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.state?.description\">\n        <dt class=\"govuk-summary-list__key summary-key\">State</dt>\n        <dd class=\"govuk-summary-list__value\">{{caseDetails.state.description}}</dd>\n      </div>\n      <div class=\"govuk-summary-list__row\" *ngIf=\"courtOrHearingCentre\">\n        <dt class=\"govuk-summary-list__key summary-key\">Court or hearing centre</dt>\n        <dd class=\"govuk-summary-list__value\">{{courtOrHearingCentre | titlecase}}</dd>\n      </div>\n\n      <div class=\"govuk-summary-list__row\" *ngIf=\"accessType\">\n        <dt class=\"govuk-summary-list__key summary-key\">Access</dt>\n        <dd class=\"govuk-summary-list__value\">{{accessType | titlecase}}</dd>\n      </div>\n    </dl>\n  </div>\n\n  <button class=\"govuk-button govuk-!-margin-right-3\">Request access</button>\n</form>\n<a class=\"govuk-body\" (click)=\"onCancel()\" href=\"javascript:void(0)\">Cancel</a>\n"
+
+/***/ }),
+
+/***/ 17607:
+/***/ ((module) => {
+
+module.exports = "<exui-error-message *ngIf=\"formGroup.invalid && submitted\" [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\">This case requires challenged access.<br/>This is because the case is\n  outside your work area. If you request access to the case, it will be\n  logged for auditing purposes.</cut-alert>\n<form [formGroup]=\"formGroup\" (submit)=\"onSubmit()\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': formGroup.invalid && submitted}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"reason-hint\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{title}}\n        </h1>\n      </legend>\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{hint}}\n      </div>\n      <div id=\"error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('radioSelected').invalid && submitted\">\n        {{errorMessage.description}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-0\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[0].reason\"\n          data-aria-controls=\"conditional-reason-0\" formControlName=\"radioSelected\" [checked]=\"accessReasons[0].checked\"\n          (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-0\">\n            {{accessReasons[0].reason}}\n          </label>\n        </div>\n        <div id=\"conditional-reason-0\" *ngIf=\"formGroup.get('radioSelected').value === accessReasons[0].reason\"\n        class=\"govuk-radios__conditional\">\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label\" for=\"case-reference\">\n              {{caseRefLabel}}\n            </label>\n            <div id=\"case-reference-error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('caseReference').invalid && submitted\">\n              {{errorMessage.description}}\n            </div>\n            <input class=\"govuk-input govuk-!-width-one-third\"\n            [ngClass]=\"{'govuk-input--error': formGroup.get('caseReference').invalid && submitted}\" id=\"case-reference\"\n            name=\"case-reference\" type=\"text\" formControlName=\"caseReference\">\n          </div>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-1\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[1].reason\"\n          formControlName=\"radioSelected\" [checked]=\"accessReasons[1].checked\" (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-1\">\n            {{accessReasons[1].reason}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-2\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[2].reason\"\n          formControlName=\"radioSelected\" [checked]=\"accessReasons[2].checked\" (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-2\">\n            {{accessReasons[2].reason}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-3\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[3].reason\"\n          data-aria-controls=\"conditional-reason-3\" formControlName=\"radioSelected\" [checked]=\"accessReasons[3].checked\"\n          (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-3\" id=\"reason-3-label\">\n            {{accessReasons[3].reason}}\n          </label>\n        </div>\n        <div id=\"conditional-reason-3\" *ngIf=\"formGroup.get('radioSelected').value === accessReasons[3].reason\"\n        class=\"govuk-radios__conditional\">\n          <div class=\"govuk-form-group\">\n            <div id=\"other-reason-error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('otherReason').invalid && submitted\">\n              {{errorMessage.description}}\n            </div>\n            <textarea class=\"govuk-textarea\" [ngClass]=\"{'govuk-textarea--error': formGroup.get('otherReason').invalid && submitted}\"\n            id=\"other-reason\" name=\"other-reason\" rows=\"5\" aria-describedby=\"reason-3-label\" formControlName=\"otherReason\"></textarea>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n  <div class=\"govuk-button-group\">\n    <button class=\"govuk-button govuk-!-margin-right-3\" type=\"submit\">\n      Submit\n    </button>\n    <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n      <p>\n        <a class='govuk-body' (click)=\"onCancel()\" href=\"javascript:void(0)\">\n          Cancel\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n"
+
+/***/ }),
+
 /***/ 13949:
 /***/ ((module) => {
 
@@ -62315,6 +63488,13 @@ module.exports = "<div *ngIf=\"isDataLoaded()\" class=\"screen-990\">\n  <ccd-ac
 
 /***/ }),
 
+/***/ 99839:
+/***/ ((module) => {
+
+module.exports = "<!-- 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>"
+
+/***/ }),
+
 /***/ 24288:
 /***/ ((module) => {
 
@@ -62325,7 +63505,7 @@ module.exports = "<div *ngIf=\"isDataLoaded()\">\n    <ccd-case-viewer [hasPrint
 /***/ 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  <ccd-case-basic-access-view *ngIf=\"!hasStandardAccess()\" [accessType]=\"userAccessType\" [caseDetails]=\"caseDetails\"></ccd-case-basic-access-view>\n  <ccd-case-full-access-view *ngIf=\"hasStandardAccess()\" [caseDetails]=\"caseDetails\" [hasPrint]=\"hasPrint\" [hasEventSelector]=\"hasEventSelector\" [prependedTabs]=\"prependedTabs\"></ccd-case-full-access-view>\n</div>\n"
 
 /***/ }),
 
@@ -62371,6 +63551,13 @@ module.exports = "\n<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"ca
 
 /***/ }),
 
+/***/ 9350:
+/***/ ((module) => {
+
+module.exports = "<!-- Cloned from rpx-xui-webapp src/app/components/error-message/error-message.component.html -->\n<ng-container *ngIf=\"error\">\n  <div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n    <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">{{error.title}}</h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          <a routerLink=\".\" [fragment]=\"error.fieldId\">{{error.description}}</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</ng-container>\n"
+
+/***/ }),
+
 /***/ 60206:
 /***/ ((module) => {
 
@@ -62437,7 +63624,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}\">\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"
+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"
 
 /***/ }),
 
@@ -62500,14 +63687,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}\">\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"
+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"
 
 /***/ }),
 
 /***/ 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             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"
+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                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n"
 
 /***/ }),
 
@@ -62528,7 +63715,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}\">\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>"
+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"
 
 /***/ }),
 
@@ -62542,21 +63729,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}\">\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"
+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"
 
 /***/ }),
 
 /***/ 70428:
 /***/ ((module) => {
 
-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"
+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"
 
 /***/ }),
 
 /***/ 83332:
 /***/ ((module) => {
 
-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"
+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"
 
 /***/ }),
 
@@ -62598,7 +63785,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}\">\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"
+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"
 
 /***/ }),
 
@@ -62612,7 +63799,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}\" [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"
+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"
 
 /***/ }),
 
@@ -62689,28 +63876,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}\">\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"
+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"
 
 /***/ }),
 
 /***/ 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.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"
+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"
 
 /***/ }),
 
 /***/ 36157:
 /***/ ((module) => {
 
-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"
+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"
 
 /***/ }),
 
 /***/ 77724:
 /***/ ((module) => {
 
-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"
+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"
 
 /***/ }),
 
@@ -63017,11 +64204,11 @@ function getStrategyDelay(consecutiveErrorsCount, options) {
 
 /***/ }),
 
-/***/ 15472:
+/***/ 73262:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 
-        var result = __webpack_require__(72402);
+        var result = __webpack_require__(50378);
 
         if (typeof result === "string") {
             module.exports = result;
@@ -96190,6 +97377,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__17103__;
 
 /***/ }),
 
+/***/ 18427:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__18427__;
+
+/***/ }),
+
 /***/ 57208:
 /***/ ((module) => {