@mtna/web-form-angular 1.0.2-SNAPSHOT.1 → 1.0.2-SNAPSHOT.2

package/bundles/mtna-web-form-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/cdk/coercion'), require('@mtna/web-form-ts'), require('@angular/forms'), require('@mtna/core-ts'), require('@angular/material/core'), require('@angular/animations'), require('rxjs'), require('@mtna/pojo-social-angular'), require('@mtna/core-angular'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/button'), require('@angular/material-moment-adapter'), require('rxjs/operators'), require('@angular/common/http'), require('@mtna/search-manager-angular'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/flex-layout/flex'), require('@angular/material/card'), require('@angular/material/slide-toggle'), require('@angular/material/checkbox'), require('@angular/material/form-field'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/list'), require('@mtna/file-manager-angular'), require('@angular/material/progress-spinner'), require('@angular/flex-layout/extended'), require('@mtna/core-i18n-angular'), require('@angular/material/table')) :
-  typeof define === 'function' && define.amd ? define('@mtna/web-form-angular', ['exports', '@angular/core', '@angular/material/dialog', '@angular/cdk/coercion', '@mtna/web-form-ts', '@angular/forms', '@mtna/core-ts', '@angular/material/core', '@angular/animations', 'rxjs', '@mtna/pojo-social-angular', '@mtna/core-angular', '@angular/material/radio', '@angular/material/select', '@angular/common', '@angular/platform-browser', '@angular/material/button', '@angular/material-moment-adapter', 'rxjs/operators', '@angular/common/http', '@mtna/search-manager-angular', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/divider', '@angular/material/icon', '@angular/material/tooltip', '@angular/flex-layout/flex', '@angular/material/card', '@angular/material/slide-toggle', '@angular/material/checkbox', '@angular/material/form-field', '@angular/material/datepicker', '@angular/material/input', '@angular/material/list', '@mtna/file-manager-angular', '@angular/material/progress-spinner', '@angular/flex-layout/extended', '@mtna/core-i18n-angular', '@angular/material/table'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.mtna = global.mtna || {}, global.mtna["web-form-angular"] = {}), global.ng.core, global.ng.material.dialog, global.ng.cdk.coercion, global.webFormTs, global.ng.forms, global.coreTs, global.ng.material.core, global.ng.animations, global.rxjs, global.i2$1, global.i1$1, global.ng.material.radio, global.ng.material.select, global.ng.common, global.ng.platformBrowser, global.ng.material.button, global.ng.materialMomentAdapter, global.rxjs.operators, global.ng.common.http, global.i1$5, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.divider, global.ng.material.icon, global.ng.material.tooltip, global.ng.flexLayout.flex, global.ng.material.card, global.ng.material.slideToggle, global.ng.material.checkbox, global.ng.material.formField, global.ng.material.datepicker, global.ng.material.input, global.ng.material.list, global.i1$8, global.ng.material.progressSpinner, global.ng.flexLayout.extended, global.coreI18nAngular, global.ng.material.table));
-})(this, (function (exports, i0, i1, coercion, webFormTs, i6, coreTs, i3, animations, rxjs, i2$1, i1$1, i1$2, i2, i4, i1$3, i3$1, materialMomentAdapter, operators, i1$4, i1$5, i4$1, flexLayout, i2$2, i5, i6$1, i3$2, i1$6, i2$3, i2$4, i1$7, i3$3, i5$1, i4$2, i1$8, i5$2, i6$2, coreI18nAngular, i1$9) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/cdk/coercion'), require('@mtna/web-form-ts'), require('rxjs'), require('@angular/forms'), require('@mtna/core-ts'), require('@angular/material/core'), require('@angular/animations'), require('@mtna/pojo-social-angular'), require('@mtna/core-angular'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/button'), require('@angular/material-moment-adapter'), require('rxjs/operators'), require('@angular/common/http'), require('@mtna/search-manager-angular'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/flex-layout/flex'), require('@angular/material/card'), require('@angular/material/slide-toggle'), require('@angular/material/checkbox'), require('@angular/material/form-field'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/list'), require('@mtna/file-manager-angular'), require('@angular/material/progress-spinner'), require('@angular/flex-layout/extended'), require('@mtna/core-i18n-angular'), require('@angular/material/table')) :
+  typeof define === 'function' && define.amd ? define('@mtna/web-form-angular', ['exports', '@angular/core', '@angular/material/dialog', '@angular/cdk/coercion', '@mtna/web-form-ts', 'rxjs', '@angular/forms', '@mtna/core-ts', '@angular/material/core', '@angular/animations', '@mtna/pojo-social-angular', '@mtna/core-angular', '@angular/material/radio', '@angular/material/select', '@angular/common', '@angular/platform-browser', '@angular/material/button', '@angular/material-moment-adapter', 'rxjs/operators', '@angular/common/http', '@mtna/search-manager-angular', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/divider', '@angular/material/icon', '@angular/material/tooltip', '@angular/flex-layout/flex', '@angular/material/card', '@angular/material/slide-toggle', '@angular/material/checkbox', '@angular/material/form-field', '@angular/material/datepicker', '@angular/material/input', '@angular/material/list', '@mtna/file-manager-angular', '@angular/material/progress-spinner', '@angular/flex-layout/extended', '@mtna/core-i18n-angular', '@angular/material/table'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.mtna = global.mtna || {}, global.mtna["web-form-angular"] = {}), global.ng.core, global.ng.material.dialog, global.ng.cdk.coercion, global.webFormTs, global.rxjs, global.ng.forms, global.coreTs, global.ng.material.core, global.ng.animations, global.i2$1, global.i1$1, global.ng.material.radio, global.ng.material.select, global.ng.common, global.ng.platformBrowser, global.ng.material.button, global.ng.materialMomentAdapter, global.rxjs.operators, global.ng.common.http, global.i1$5, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.divider, global.ng.material.icon, global.ng.material.tooltip, global.ng.flexLayout.flex, global.ng.material.card, global.ng.material.slideToggle, global.ng.material.checkbox, global.ng.material.formField, global.ng.material.datepicker, global.ng.material.input, global.ng.material.list, global.i1$8, global.ng.material.progressSpinner, global.ng.flexLayout.extended, global.coreI18nAngular, global.ng.material.table));
+})(this, (function (exports, i0, i1, coercion, webFormTs, rxjs, i6, coreTs, i3, animations, i2$1, i1$1, i1$2, i2, i3$1, i1$3, i3$2, materialMomentAdapter, operators, i1$4, i1$5, i4, flexLayout, i2$2, i5, i6$1, i3$3, i1$6, i2$3, i2$4, i1$7, i3$4, i5$1, i4$1, i1$8, i5$2, i6$2, coreI18nAngular, i1$9) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -25,28 +25,28 @@
   var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
   var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
   var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-  var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3);
+  var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3);
   var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
   var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
   var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$2);
   var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2);
-  var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-  var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
   var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
+  var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
+  var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$2);
   var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$4);
   var i1__namespace$8 = /*#__PURE__*/_interopNamespace(i1$5);
-  var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
+  var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
   var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$2);
   var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
   var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
-  var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$2);
+  var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$3);
   var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$6);
   var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$3);
   var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$4);
   var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$7);
-  var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$3);
+  var i3__namespace$4 = /*#__PURE__*/_interopNamespace(i3$4);
   var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
-  var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
+  var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
   var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$8);
   var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
   var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
@@ -627,7 +627,7 @@
           validators.push(i6.Validators.required);
       }
       switch (formItem.itemId) {
-          case webFormTs.CHECKBOX_ITEM_ID:
+          case webFormTs.CHECKBOX_ITEM_ID: {
               var checkboxItem_1 = formItem;
               var value_1 = checkboxItem_1.value || [];
               validators.push(numCheckboxesValidator('MIN', checkboxItem_1.minSelections), numCheckboxesValidator('MAX', checkboxItem_1.maxSelections));
@@ -636,8 +636,9 @@
                   disabled: checkboxItem_1.disabled,
               }); }), i6.Validators.compose(validators));
               return arr;
+          }
           case webFormTs.DECIMAL_ANSWER_ITEM_ID:
-          case webFormTs.WHOLE_NUMBER_ANSWER_ITEM_ID:
+          case webFormTs.WHOLE_NUMBER_ANSWER_ITEM_ID: {
               var item = formItem;
               validators.push(numericalValueCheck());
               if (webFormTs.isWholeNumberItem(item)) {
@@ -653,14 +654,16 @@
                   validators.push(numValueLimit('max', item.maxValue));
               }
               break;
+          }
           case webFormTs.PARAGRAPH_ANSWER_ITEM_ID:
-          case webFormTs.SHORT_ANSWER_ITEM_ID:
+          case webFormTs.SHORT_ANSWER_ITEM_ID: {
               var shortAnswerItem = formItem;
               validators.push.apply(validators, __spreadArray([], __read(getNumericValidator('minLength', shortAnswerItem.minCharCount))));
               validators.push.apply(validators, __spreadArray([], __read(getNumericValidator('maxLength', shortAnswerItem.maxCharCount))));
               break;
+          }
           case webFormTs.I18N_PARAGRAPH_ANSWER_ITEM_ID:
-          case webFormTs.I18N_SHORT_ANSWER_ITEM_ID:
+          case webFormTs.I18N_SHORT_ANSWER_ITEM_ID: {
               var i18nItem = formItem;
               var group = new i6.FormGroup({}, i6.Validators.compose(validators));
               try {
@@ -681,6 +684,7 @@
                   group.disable({ onlySelf: true, emitEvent: false });
               }
               return group;
+          }
           default:
               break;
       }
@@ -896,7 +900,7 @@
               }
               return [];
           case 'INTERNATIONALIZEDPARAGRAPHANSWERITEM':
-          case 'INTERNATIONALIZEDSHORTANSWERITEM':
+          case 'INTERNATIONALIZEDSHORTANSWERITEM': {
               var languages = (itemId === null || itemId === void 0 ? void 0 : itemId.toUpperCase()) === 'INTERNATIONALIZEDPARAGRAPHANSWERITEM'
                   ? formItem.languageTags
                   : formItem.languageTags;
@@ -910,6 +914,7 @@
                   return value;
               }, []);
               return value;
+          }
           default:
               return ngFormValue;
       }
@@ -1671,10 +1676,12 @@
       }
       return class_1;
   }()));
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseFormItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseFormItem, _super);
-      function MtnaWfBaseFormItem() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+      function MtnaWfBaseFormItem(cdr) {
+          var _this = _super.call(this) || this;
+          _this.cdr = cdr;
           _this._header = null;
           _this._indicatorStatus = 'INACTIVE';
           return _this;
@@ -1695,6 +1702,7 @@
           },
           set: function (value) {
               this._indicatorStatus = value;
+              this.cdr.markForCheck();
           },
           enumerable: false,
           configurable: true
@@ -1718,14 +1726,14 @@
       });
       return MtnaWfBaseFormItem;
   }(_BaseFormItemComponent));
-  MtnaWfBaseFormItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormItem, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfBaseFormItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormItem, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
   MtnaWfBaseFormItem.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseFormItem, selector: "ng-component", inputs: { color: "color", header: "header", indicatorStatus: "indicatorStatus", item: "item" }, usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormItem, decorators: [{
               type: i0.Component,
               args: [{
                       template: "",
                   }]
-          }], propDecorators: { color: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { color: [{
                   type: i0.Input
               }], header: [{
                   type: i0.Input
@@ -1735,10 +1743,11 @@
                   type: i0.Input
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseFormItemControl = /** @class */ (function (_super) {
       __extends(MtnaWfBaseFormItemControl, _super);
-      function MtnaWfBaseFormItemControl() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+      function MtnaWfBaseFormItemControl(cdr) {
+          var _this = _super.call(this, cdr) || this;
           _this._readonly = false;
           return _this;
       }
@@ -1758,6 +1767,7 @@
           },
           set: function (value) {
               this._readonly = coercion.coerceBooleanProperty(value);
+              this.cdr.markForCheck();
           },
           enumerable: false,
           configurable: true
@@ -1769,19 +1779,20 @@
       };
       return MtnaWfBaseFormItemControl;
   }(MtnaWfBaseFormItem));
-  MtnaWfBaseFormItemControl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormItemControl, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfBaseFormItemControl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormItemControl, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
   MtnaWfBaseFormItemControl.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseFormItemControl, selector: "ng-component", inputs: { control: "control", readonly: "readonly" }, usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormItemControl, decorators: [{
               type: i0.Component,
               args: [{
                       template: "",
                   }]
-          }], propDecorators: { control: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { control: [{
                   type: i0.Input
               }], readonly: [{
                   type: i0.Input
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseGroupItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseGroupItem, _super);
       function MtnaWfBaseGroupItem() {
@@ -1815,6 +1826,7 @@
                   type: i0.Input
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseValueItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseValueItem, _super);
       function MtnaWfBaseValueItem() {
@@ -1863,6 +1875,7 @@
                   args: ['class.read-only']
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseParentValueItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseParentValueItem, _super);
       function MtnaWfBaseParentValueItem() {
@@ -1912,6 +1925,7 @@
                   type: i0.Output
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseSectionItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseSectionItem, _super);
       function MtnaWfBaseSectionItem() {
@@ -1944,10 +1958,11 @@
                   type: i0.Output
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseSingleSelectionParentValueItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseSingleSelectionParentValueItem, _super);
       function MtnaWfBaseSingleSelectionParentValueItem() {
-          return _super.call(this) || this;
+          return _super !== null && _super.apply(this, arguments) || this;
       }
       MtnaWfBaseSingleSelectionParentValueItem.prototype.ngOnInit = function () {
           var _this = this;
@@ -1996,16 +2011,16 @@
       };
       return MtnaWfBaseSingleSelectionParentValueItem;
   }(MtnaWfBaseParentValueItem));
-  MtnaWfBaseSingleSelectionParentValueItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseSingleSelectionParentValueItem, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfBaseSingleSelectionParentValueItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseSingleSelectionParentValueItem, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
   MtnaWfBaseSingleSelectionParentValueItem.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseSingleSelectionParentValueItem, selector: "ng-component", usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseSingleSelectionParentValueItem, decorators: [{
               type: i0.Component,
               args: [{
                       template: "",
                   }]
-          }], ctorParameters: function () { return []; } });
+          }] });
 
-  // import { MtnaWfFormSectionComponent } from '../form-item-impl/form-section/form-section.component';
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfItemInjector = /** @class */ (function (_super) {
       __extends(MtnaWfItemInjector, _super);
       function MtnaWfItemInjector(injector, cfr, vcr, injectionService) {
@@ -2015,10 +2030,10 @@
           _this.vcr = vcr;
           _this.injectionService = injectionService;
           _this._header = null;
-          _this._indicatorStatus = 'INACTIVE';
+          _this._indicatorStatus = new rxjs.BehaviorSubject('INACTIVE');
           _this._inList = false;
           _this._parentIds = new Array();
-          _this._readonly = false;
+          _this._readonly = new rxjs.BehaviorSubject(false);
           _this.focusedSection = new i0.EventEmitter();
           _this.toggleFormItems = new i0.EventEmitter();
           return _this;
@@ -2045,10 +2060,10 @@
       });
       Object.defineProperty(MtnaWfItemInjector.prototype, "indicatorStatus", {
           get: function () {
-              return this._indicatorStatus;
+              return this._indicatorStatus.value;
           },
           set: function (value) {
-              this._indicatorStatus = value;
+              this._indicatorStatus.next(value);
           },
           enumerable: false,
           configurable: true
@@ -2085,10 +2100,10 @@
       });
       Object.defineProperty(MtnaWfItemInjector.prototype, "readonly", {
           get: function () {
-              return this._readonly;
+              return this._readonly.value;
           },
           set: function (value) {
-              this._readonly = coercion.coerceBooleanProperty(value);
+              this._readonly.next(coercion.coerceBooleanProperty(value));
           },
           enumerable: false,
           configurable: true
@@ -2112,7 +2127,11 @@
           var _this = this;
           this.wfItemComponent = componentRef.instance;
           this.wfItemComponent.header = this.header;
-          this.wfItemComponent.indicatorStatus = this.indicatorStatus;
+          this._indicatorStatus.subscribe(function (status) {
+              if (_this.wfItemComponent) {
+                  _this.wfItemComponent.indicatorStatus = status;
+              }
+          });
           this.wfItemComponent.item = this.item;
           this.wfItemComponent.color = this.color;
           if (this.wfItemComponent instanceof MtnaWfBaseFormItemControl) {
@@ -2278,7 +2297,7 @@
       return MtnaWfItemHeaderComponent;
   }());
   MtnaWfItemHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfItemHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: { descriptiveText: "descriptiveText", disabled: "disabled", hideRequiredMarker: "hideRequiredMarker", invalid: "invalid", questionText: "questionText", required: "required" }, host: { properties: { "class.mtna-wf-item-header": "this.itemHeaderClass" } }, ngImport: i0__namespace, template: "<h3\n  *ngIf=\"!!questionText\"\n  class=\"mtna-wf-item-question\"\n  [class.invalid]=\"invalid\"\n  [innerHTML]=\"questionText + (required && !disabled && !hideRequiredMarker ? _requiredHtml : '') | mtnaWfSanitizeHtml\"\n></h3>\n<p *ngIf=\"!!descriptiveText\" class=\"mtna-wf-item-description\" [innerHTML]=\"descriptiveText | mtnaWfSanitizeHtml\"></p>\n", styles: [".mtna-wf-item-header{display:block;margin-bottom:.5rem}.mtna-wf-item-header .mtna-wf-item-question,.mtna-wf-item-description{margin:0;font-size:.9rem;line-height:1.6}.mtna-wf-item-header .mtna-wf-item-description{opacity:.56}mtna-annotations-indicator+mtna-wf-repeatable-item-container>mtna-wf-item-header,mtna-annotations-indicator+mtna-wf-value-item>mtna-wf-input-item>mtna-wf-item-header{padding-right:24px}\n"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfItemHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: { descriptiveText: "descriptiveText", disabled: "disabled", hideRequiredMarker: "hideRequiredMarker", invalid: "invalid", questionText: "questionText", required: "required" }, host: { properties: { "class.mtna-wf-item-header": "this.itemHeaderClass" } }, ngImport: i0__namespace, template: "<h3\n  *ngIf=\"!!questionText\"\n  class=\"mtna-wf-item-question\"\n  [class.invalid]=\"invalid\"\n  [innerHTML]=\"questionText + (required && !disabled && !hideRequiredMarker ? _requiredHtml : '') | mtnaWfSanitizeHtml\"\n></h3>\n<p *ngIf=\"!!descriptiveText\" class=\"mtna-wf-item-description\" [innerHTML]=\"descriptiveText | mtnaWfSanitizeHtml\"></p>\n", styles: [".mtna-wf-item-header{display:block;margin-bottom:.5rem}.mtna-wf-item-header .mtna-wf-item-question,.mtna-wf-item-description{margin:0;font-size:.9rem;line-height:1.6}.mtna-wf-item-header .mtna-wf-item-description{opacity:.56}mtna-annotations-indicator+mtna-wf-repeatable-item-container>mtna-wf-item-header,mtna-annotations-indicator+mtna-wf-value-item>mtna-wf-input-item>mtna-wf-item-header{padding-right:24px}\n"], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2323,7 +2342,7 @@
           this._parentIds = new Array();
           this._readonly = false;
           this.focusedSection = new i0.EventEmitter();
-          this.indicatorStatus = 'INACTIVE';
+          this.indicatorStatus$ = new rxjs.BehaviorSubject('INACTIVE');
       }
       Object.defineProperty(MtnaWfFormItemComponent.prototype, "elementId", {
           get: function () {
@@ -2412,10 +2431,13 @@
       MtnaWfFormItemComponent.prototype.toggleFormItems = function (data) {
           this.uiService.toggleFormItems(data.enabledItemIds, data.disabledItemIds, data.enabled, data.callerId, data.reset);
       };
+      MtnaWfFormItemComponent.prototype.updateIndicatorStatus = function (status) {
+          this.indicatorStatus$.next(status);
+      };
       return MtnaWfFormItemComponent;
   }());
   MtnaWfFormItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: MtnaWfUIService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: { color: "color", control: "control", header: "header", inList: "inList", item: "item", parentIds: "parentIds", readonly: "readonly", step: "step" }, outputs: { focusedSection: "focusedSection" }, host: { properties: { "@mtnaWfExpandCollapse": "this.visible", "attr.id": "this.elementId" } }, ngImport: i0__namespace, template: "<mtna-annotations-indicator\n  *ngIf=\"item.annotationEnabled\"\n  [annotatableId]=\"item.annotatableId\"\n  color=\"primary\"\n  [count]=\"annotations$ | async\"\n  (status)=\"indicatorStatus = $event\"\n></mtna-annotations-indicator>\n\n<mtna-wf-item-injector\n  [color]=\"color\"\n  [control]=\"control\"\n  [header]=\"header\"\n  [indicatorStatus]=\"indicatorStatus\"\n  [inList]=\"inList\"\n  [item]=\"item\"\n  [parentIds]=\"parentIds\"\n  [readonly]=\"readonly\"\n  [step]=\"step\"\n  (focusedSection)=\"focusedSection.emit($event)\"\n  (toggleFormItems)=\"toggleFormItems($event)\"\n></mtna-wf-item-injector>\n\n<ng-template #header let-hideRequiredMarker=\"hideRequiredMarker\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control?.disabled\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [invalid]=\"control?.invalid && (control?.dirty || control?.touched)\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n</ng-template>\n\n<!-- <ng-container [ngSwitch]=\"item.itemId | mtnaWfGetObjectType\">\n  <mtna-wf-section\n    *ngSwitchCase=\"'sectionimpl'\"\n    [control]=\"$any(control)\"\n    [item]=\"$any(item)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n    [step]=\"step\"\n    (focused)=\"focusedSection.emit($event)\"\n  ></mtna-wf-section>\n\n  <mtna-wf-group\n    *ngSwitchCase=\"'formitemgroupimpl'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-group>\n\n  <mtna-wf-repeatable-item-container\n    *ngSwitchCase=\"'repeatableitem'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-repeatable-item-container>\n\n  <mtna-wf-value-item\n    *ngSwitchDefault\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"control\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-value-item>\n</ng-container> -->\n", styles: ["mtna-wf-item{display:block;position:relative}mtna-wf-item mtna-annotations-indicator{position:absolute;top:0;right:0;z-index:2}\n"], components: [{ type: i2__namespace.MtnaAnnotationsIndicatorComponent, selector: "mtna-annotations-indicator", inputs: ["color", "annotatableId", "annotatableItemName", "count"], outputs: ["status"] }, { type: MtnaWfItemInjector, selector: "mtna-wf-item-injector", inputs: ["color", "control", "header", "indicatorStatus", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection", "toggleFormItems"] }, { type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4__namespace.AsyncPipe }, animations: [MTNA_WF_EXPAND_COLLAPSE], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfFormItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: { color: "color", control: "control", header: "header", inList: "inList", item: "item", parentIds: "parentIds", readonly: "readonly", step: "step" }, outputs: { focusedSection: "focusedSection" }, host: { properties: { "@mtnaWfExpandCollapse": "this.visible", "attr.id": "this.elementId" } }, ngImport: i0__namespace, template: "<mtna-annotations-indicator\n  *ngIf=\"item.annotationEnabled\"\n  [annotatableId]=\"item.annotatableId\"\n  color=\"primary\"\n  [count]=\"annotations$ | async\"\n  (status)=\"updateIndicatorStatus($event)\"\n></mtna-annotations-indicator>\n\n<mtna-wf-item-injector\n  [color]=\"color\"\n  [control]=\"control\"\n  [header]=\"header\"\n  [indicatorStatus]=\"indicatorStatus$.value\"\n  [inList]=\"inList\"\n  [item]=\"item\"\n  [parentIds]=\"parentIds\"\n  [readonly]=\"readonly\"\n  [step]=\"step\"\n  (focusedSection)=\"focusedSection.emit($event)\"\n  (toggleFormItems)=\"toggleFormItems($event)\"\n></mtna-wf-item-injector>\n\n<ng-template #header let-hideRequiredMarker=\"hideRequiredMarker\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control?.disabled\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [invalid]=\"control?.invalid && (control?.dirty || control?.touched)\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n</ng-template>\n\n<!-- <ng-container [ngSwitch]=\"item.itemId | mtnaWfGetObjectType\">\n  <mtna-wf-section\n    *ngSwitchCase=\"'sectionimpl'\"\n    [control]=\"$any(control)\"\n    [item]=\"$any(item)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n    [step]=\"step\"\n    (focused)=\"focusedSection.emit($event)\"\n  ></mtna-wf-section>\n\n  <mtna-wf-group\n    *ngSwitchCase=\"'formitemgroupimpl'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-group>\n\n  <mtna-wf-repeatable-item-container\n    *ngSwitchCase=\"'repeatableitem'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-repeatable-item-container>\n\n  <mtna-wf-value-item\n    *ngSwitchDefault\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"control\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-value-item>\n</ng-container> -->\n", styles: ["mtna-wf-item{display:block;position:relative}mtna-wf-item mtna-annotations-indicator{position:absolute;top:0;right:0;z-index:2}mtna-wf-item .mat-list-base{padding-top:0}\n"], components: [{ type: i2__namespace.MtnaAnnotationsIndicatorComponent, selector: "mtna-annotations-indicator", inputs: ["color", "annotatableId", "annotatableItemName", "count"], outputs: ["status"] }, { type: MtnaWfItemInjector, selector: "mtna-wf-item-injector", inputs: ["color", "control", "header", "indicatorStatus", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection", "toggleFormItems"] }, { type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, animations: [MTNA_WF_EXPAND_COLLAPSE], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2463,7 +2485,7 @@
       return MtnaWfAcknowledgeDialogComponent;
   }());
   MtnaWfAcknowledgeDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfAcknowledgeDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfAcknowledgeDialogComponent, selector: "mtna-wf-acknowledge-dialog", ngImport: i0__namespace, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button [mat-dialog-close]=\"false\" mat-button>CANCEL</button>\n  <button [mat-dialog-close]=\"true\" color=\"accent\" mat-raised-button>ACKNOWLEDGE</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+  MtnaWfAcknowledgeDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfAcknowledgeDialogComponent, selector: "mtna-wf-acknowledge-dialog", ngImport: i0__namespace, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button [mat-dialog-close]=\"false\" mat-button>CANCEL</button>\n  <button [mat-dialog-close]=\"true\" color=\"accent\" mat-raised-button>ACKNOWLEDGE</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -2483,12 +2505,12 @@
       return MtnaWfItemInjectorModule;
   }());
   MtnaWfItemInjectorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjectorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfItemInjectorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjectorModule, declarations: [MtnaWfItemInjector], imports: [i4.CommonModule], exports: [MtnaWfItemInjector] });
-  MtnaWfItemInjectorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjectorModule, imports: [[i4.CommonModule]] });
+  MtnaWfItemInjectorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjectorModule, declarations: [MtnaWfItemInjector], imports: [i3$1.CommonModule], exports: [MtnaWfItemInjector] });
+  MtnaWfItemInjectorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjectorModule, imports: [[i3$1.CommonModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjectorModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule],
+                      imports: [i3$1.CommonModule],
                       declarations: [MtnaWfItemInjector],
                       exports: [MtnaWfItemInjector],
                   }]
@@ -2568,13 +2590,11 @@
       function MtnaWfCoerceFormControlPipe() {
       }
       MtnaWfCoerceFormControlPipe.prototype.transform = function (control) {
-          var isFormControl = control instanceof i6.FormControl;
           if (control) {
               var value = control.value;
               var validators = control.validator;
               var asyncValidators = control.asyncValidator;
               var newFormControl = new i6.FormControl(value, validators, asyncValidators);
-              console.error('CREATED NEW FORM CONTROL');
               return newFormControl;
           }
           return null;
@@ -2655,6 +2675,45 @@
                   }]
           }] });
 
+  var MtnaWfCoerceFormItemPipe = /** @class */ (function () {
+      function MtnaWfCoerceFormItemPipe() {
+      }
+      MtnaWfCoerceFormItemPipe.prototype.transform = function (item) {
+          var formItem = undefined;
+          if (this.instanceOfFormItem(item)) {
+              formItem = item;
+          }
+          return formItem;
+      };
+      MtnaWfCoerceFormItemPipe.prototype.instanceOfFormItem = function (something) {
+          return coreTs.isType(something, 'instanceId', 'itemId', 'name', 'required', 'templateId');
+      };
+      return MtnaWfCoerceFormItemPipe;
+  }());
+  MtnaWfCoerceFormItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCoerceFormItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  MtnaWfCoerceFormItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCoerceFormItemPipe, name: "coerceFormItem" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCoerceFormItemPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'coerceFormItem',
+                  }]
+          }] });
+  var MtnaWfCoerceFormItemPipeModule = /** @class */ (function () {
+      function MtnaWfCoerceFormItemPipeModule() {
+      }
+      return MtnaWfCoerceFormItemPipeModule;
+  }());
+  MtnaWfCoerceFormItemPipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCoerceFormItemPipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  MtnaWfCoerceFormItemPipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCoerceFormItemPipeModule, declarations: [MtnaWfCoerceFormItemPipe], exports: [MtnaWfCoerceFormItemPipe] });
+  MtnaWfCoerceFormItemPipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCoerceFormItemPipeModule });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCoerceFormItemPipeModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [MtnaWfCoerceFormItemPipe],
+                      exports: [MtnaWfCoerceFormItemPipe],
+                  }]
+          }] });
+
   var MtnaWfDateQuarterPipe = /** @class */ (function () {
       function MtnaWfDateQuarterPipe() {
       }
@@ -3040,12 +3099,12 @@
       return MtnaWfItemHeaderModule;
   }());
   MtnaWfItemHeaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfItemHeaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderModule, declarations: [MtnaWfItemHeaderComponent], imports: [i4.CommonModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfItemHeaderComponent] });
-  MtnaWfItemHeaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderModule, imports: [[i4.CommonModule, MtnaWfSanitizeHtmlPipeModule]] });
+  MtnaWfItemHeaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderModule, declarations: [MtnaWfItemHeaderComponent], imports: [i3$1.CommonModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfItemHeaderComponent] });
+  MtnaWfItemHeaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderModule, imports: [[i3$1.CommonModule, MtnaWfSanitizeHtmlPipeModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemHeaderModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, MtnaWfSanitizeHtmlPipeModule],
+                      imports: [i3$1.CommonModule, MtnaWfSanitizeHtmlPipeModule],
                       declarations: [MtnaWfItemHeaderComponent],
                       exports: [MtnaWfItemHeaderComponent],
                   }]
@@ -3057,12 +3116,31 @@
       return MtnaWfFormItemModule;
   }());
   MtnaWfFormItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfFormItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemModule, declarations: [MtnaWfFormItemComponent], imports: [i4.CommonModule, i2$1.MtnaAnnotationsIndicatorModule, MtnaWfItemInjectorModule, MtnaWfItemHeaderModule, materialMomentAdapter.MatMomentDateModule], exports: [MtnaWfFormItemComponent] });
-  MtnaWfFormItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemModule, imports: [[i4.CommonModule, i2$1.MtnaAnnotationsIndicatorModule, MtnaWfItemInjectorModule, MtnaWfItemHeaderModule, materialMomentAdapter.MatMomentDateModule]] });
+  MtnaWfFormItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemModule, declarations: [MtnaWfFormItemComponent], imports: [i3$1.CommonModule,
+          i2$1.MtnaAnnotationsIndicatorModule,
+          MtnaWfItemInjectorModule,
+          MtnaWfItemHeaderModule,
+          materialMomentAdapter.MatMomentDateModule,
+          i3$2.MatButtonModule], exports: [MtnaWfFormItemComponent] });
+  MtnaWfFormItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.MtnaAnnotationsIndicatorModule,
+              MtnaWfItemInjectorModule,
+              MtnaWfItemHeaderModule,
+              materialMomentAdapter.MatMomentDateModule,
+              i3$2.MatButtonModule,
+          ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i2$1.MtnaAnnotationsIndicatorModule, MtnaWfItemInjectorModule, MtnaWfItemHeaderModule, materialMomentAdapter.MatMomentDateModule],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.MtnaAnnotationsIndicatorModule,
+                          MtnaWfItemInjectorModule,
+                          MtnaWfItemHeaderModule,
+                          materialMomentAdapter.MatMomentDateModule,
+                          i3$2.MatButtonModule,
+                      ],
                       declarations: [MtnaWfFormItemComponent],
                       exports: [MtnaWfFormItemComponent],
                   }]
@@ -3074,12 +3152,12 @@
       return MtnaWfAcknowledgeDialogModule;
   }());
   MtnaWfAcknowledgeDialogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfAcknowledgeDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogModule, declarations: [MtnaWfAcknowledgeDialogComponent], imports: [i4.CommonModule, i1.MatDialogModule, i3$1.MatButtonModule, MtnaWfFormItemModule], exports: [MtnaWfAcknowledgeDialogComponent] });
-  MtnaWfAcknowledgeDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogModule, imports: [[i4.CommonModule, i1.MatDialogModule, i3$1.MatButtonModule, MtnaWfFormItemModule]] });
+  MtnaWfAcknowledgeDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogModule, declarations: [MtnaWfAcknowledgeDialogComponent], imports: [i3$1.CommonModule, i1.MatDialogModule, i3$2.MatButtonModule, MtnaWfFormItemModule], exports: [MtnaWfAcknowledgeDialogComponent] });
+  MtnaWfAcknowledgeDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogModule, imports: [[i3$1.CommonModule, i1.MatDialogModule, i3$2.MatButtonModule, MtnaWfFormItemModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfAcknowledgeDialogModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i1.MatDialogModule, i3$1.MatButtonModule, MtnaWfFormItemModule],
+                      imports: [i3$1.CommonModule, i1.MatDialogModule, i3$2.MatButtonModule, MtnaWfFormItemModule],
                       declarations: [MtnaWfAcknowledgeDialogComponent],
                       exports: [MtnaWfAcknowledgeDialogComponent],
                   }]
@@ -3162,7 +3240,7 @@
       return MtnaWfFormItemDialogComponent;
   }());
   MtnaWfFormItemDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormItemDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemDialogComponent, selector: "mtna-wf-form-item-dialog", ngImport: i0__namespace, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close>Close</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+  MtnaWfFormItemDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemDialogComponent, selector: "mtna-wf-form-item-dialog", ngImport: i0__namespace, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close>Close</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3185,7 +3263,6 @@
        * @param acknowledgementItem The {@link Section} that represents the acknowledgement text to display to the user.
        */
       MtnaWfDialogService.prototype.showAcknowledgement = function (acknowledgementItem) {
-          console.warn('showAcknowledgement in dialog service');
           this.dialog.open(MtnaWfFormItemDialogComponent, {
               closeOnNavigation: true,
               data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || 'Acknowledgement'),
@@ -4230,7 +4307,7 @@
       return class_1;
   }()))));
   MtnaWfFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormComponent, deps: [{ token: MtnaWfManagerService }, { token: MtnaWfNgFormService }, { token: MtnaWfUIService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormComponent, selector: "mtna-form", inputs: { annotations: "annotations", emitStatusOnMtnaFormChange: "emitStatusOnMtnaFormChange", mtnaForm: "mtnaForm", steps: "steps", readonly: "readonly" }, outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange" }, usesInheritance: true, ngImport: i0__namespace, template: "<form *ngIf=\"ngForm\" [formGroup]=\"ngForm\" [formDisabled]=\"readonly\">\n  <mtna-wf-item\n    *ngFor=\"let item of mtnaForm?.items; let index = index; trackBy: _trackByInstanceId\"\n    [item]=\"item\"\n    [control]=\"ngForm.controls[item.instanceId]\"\n    [readonly]=\"readonly\"\n    [parentIds]=\"componentIds\"\n    [step]=\"_steps?.[item.instanceId]\"\n    (focusedSection)=\"focusedSection.emit($event)\"\n  ></mtna-wf-item>\n</form>\n", styles: ["mtna-form form{display:block}mtna-form form .mtna-wf-section{display:block;margin:32px 0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline{opacity:0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick{opacity:1}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-end,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-gap,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-start{border-width:1px}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix .mat-datepicker-toggle .mat-icon-button{cursor:default}mtna-form .mtna-wf-item,mtna-form .mtna-wf-title{margin-top:1rem}mtna-form .mtna-wf-text{margin:.5rem 0;font-size:.9rem}mtna-form .mtna-wf-title-item,mtna-form .mtna-wf-text-item{margin:0}mtna-form mtna-annotations-indicator+mtna-wf-value-item .mtna-wf-title-item,mtna-form mtna-annotations-indicator+mtna-wf-value-item .mtna-wf-text-item{padding-right:24px}\n"], components: [{ type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: ["formDisabled"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormComponent, selector: "mtna-form", inputs: { annotations: "annotations", emitStatusOnMtnaFormChange: "emitStatusOnMtnaFormChange", mtnaForm: "mtnaForm", steps: "steps", readonly: "readonly" }, outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange" }, usesInheritance: true, ngImport: i0__namespace, template: "<form *ngIf=\"ngForm\" [formGroup]=\"ngForm\" [formDisabled]=\"readonly\">\n  <mtna-wf-item\n    *ngFor=\"let item of mtnaForm?.items; let index = index; trackBy: _trackByInstanceId\"\n    [item]=\"item\"\n    [control]=\"ngForm.controls[item.instanceId]\"\n    [readonly]=\"readonly\"\n    [parentIds]=\"componentIds\"\n    [step]=\"_steps?.[item.instanceId]\"\n    (focusedSection)=\"focusedSection.emit($event)\"\n  ></mtna-wf-item>\n</form>\n", styles: ["mtna-form form{display:block}mtna-form form .mtna-wf-section{display:block;margin:32px 0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline{opacity:0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick{opacity:1}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-end,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-gap,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-start{border-width:1px}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix .mat-datepicker-toggle .mat-icon-button{cursor:default}mtna-form .mtna-wf-item,mtna-form .mtna-wf-title{margin-top:1rem}mtna-form .mtna-wf-text{margin:.5rem 0;font-size:.9rem}mtna-form .mtna-wf-title-item,mtna-form .mtna-wf-text-item{margin:0}\n"], components: [{ type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: ["formDisabled"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4264,12 +4341,12 @@
       return MtnaWfFormDisablerModule;
   }());
   MtnaWfFormDisablerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfFormDisablerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerModule, declarations: [MtnaWfFormDisablerComponent], imports: [i4.CommonModule], exports: [MtnaWfFormDisablerComponent] });
-  MtnaWfFormDisablerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerModule, imports: [[i4.CommonModule]] });
+  MtnaWfFormDisablerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerModule, declarations: [MtnaWfFormDisablerComponent], imports: [i3$1.CommonModule], exports: [MtnaWfFormDisablerComponent] });
+  MtnaWfFormDisablerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerModule, imports: [[i3$1.CommonModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule],
+                      imports: [i3$1.CommonModule],
                       exports: [MtnaWfFormDisablerComponent],
                       declarations: [MtnaWfFormDisablerComponent],
                   }]
@@ -4323,7 +4400,7 @@
       return MtnaWfFormStepComponent;
   }(_FormStepMixinBase$1));
   MtnaWfFormStepComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormStepComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: { color: "color", step: "step", clickable: "clickable", incompleteIcon: "incompleteIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.clickable": "this.clickable" } }, usesInheritance: true, ngImport: i0__namespace, template: "<li\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  matRipple\n  [matRippleDisabled]=\"!clickable\"\n  [class.active-step]=\"step.active\"\n  (click)=\"_haltClickEvent($event)\"\n>\n  <mtna-status-circle\n    [color]=\"color\"\n    [circleNumber]=\"step.num\"\n    [incompleteIcon]=\"incompleteIcon\"\n    [optional]=\"step.optional\"\n    [status]=\"step.status\"\n  ></mtna-status-circle>\n  <div fxLayout=\"column\" fxFlex=\"100\">\n    <p class=\"step-title\">{{ step.label }}</p>\n    <p *ngIf=\"step.optional || disabled\" class=\"step-status\">{{ disabled ? step.disabledText || 'Not Applicable' : 'Optional' }}</p>\n  </div>\n</li>\n", styles: ["mtna-wf-step li{padding:8px 16px;position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;line-height:24px;font-size:14px;transition:background-color .15s cubic-bezier(0,0,.2,1)}mtna-wf-step li:after{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1}mtna-wf-step li .step-title,mtna-wf-step li .step-status{margin:0}mtna-wf-step.disabled{font-style:italic}\n"], components: [{ type: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }], directives: [{ type: i3__namespace$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i3__namespace$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfFormStepComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: { color: "color", step: "step", clickable: "clickable", incompleteIcon: "incompleteIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.clickable": "this.clickable" } }, usesInheritance: true, ngImport: i0__namespace, template: "<li\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  matRipple\n  [matRippleDisabled]=\"!clickable\"\n  [class.active-step]=\"step.active\"\n  (click)=\"_haltClickEvent($event)\"\n>\n  <mtna-status-circle\n    [color]=\"color\"\n    [circleNumber]=\"step.num\"\n    [incompleteIcon]=\"incompleteIcon\"\n    [optional]=\"step.optional\"\n    [status]=\"step.status\"\n  ></mtna-status-circle>\n  <div fxLayout=\"column\" fxFlex=\"100\">\n    <p class=\"step-title\">{{ step.label }}</p>\n    <p *ngIf=\"step.optional || disabled\" class=\"step-status\">{{ disabled ? step.disabledText || 'Not Applicable' : 'Optional' }}</p>\n  </div>\n</li>\n", styles: ["mtna-wf-step li{padding:8px 16px;position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;line-height:24px;font-size:14px;transition:background-color .15s cubic-bezier(0,0,.2,1)}mtna-wf-step li:after{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1}mtna-wf-step li .step-title,mtna-wf-step li .step-status{margin:0}mtna-wf-step.disabled{font-style:italic}\n"], components: [{ type: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }], directives: [{ type: i3__namespace$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i3__namespace$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4379,7 +4456,7 @@
       return MtnaWfFormStepGroupComponent;
   }(_FormStepMixinBase));
   MtnaWfFormStepGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepGroupComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormStepGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepGroupComponent, selector: "mtna-wf-step-group", inputs: { color: "color", collapsed: "collapsed", incompleteIcon: "incompleteIcon", steps: "steps" }, outputs: { selected: "selected" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let step of steps | slice : 0 : (collapsed ? 1 : steps.length); let last = last\">\n  <mtna-wf-step\n    [clickable]=\"step.status !== 'DISABLED'\"\n    [color]=\"color\"\n    [incompleteIcon]=\"incompleteIcon\"\n    [step]=\"step\"\n    (click)=\"selected.emit(step)\"\n  ></mtna-wf-step>\n  <mat-divider *ngIf=\"!last\" [vertical]=\"true\"></mat-divider>\n  <p *ngIf=\"collapsed\" class=\"show-more mat-caption\">and {{ steps.length - 1 }} more...</p>\n</ng-container>\n<button\n  mat-icon-button\n  class=\"collapse-button\"\n  [color]=\"color\"\n  (click)=\"collapsed = !collapsed\"\n  [matTooltip]=\"collapsed ? 'View All' : 'Hide'\"\n>\n  <mat-icon>{{ collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n</button>\n", styles: ["mtna-wf-step-group{border-style:solid;border-radius:4px;border-width:1px;display:block;margin:4px 4px 16px 8px;padding-bottom:16px;position:relative}mtna-wf-step-group .collapse-button{bottom:-19px;left:calc(50% - 20px);position:absolute;z-index:10}mtna-wf-step-group .collapse-button:after{bottom:8px;content:\"\";height:12px;left:calc(50% - 16px);position:absolute;width:32px;z-index:-1}mtna-wf-step-group mtna-wf-step li{padding-left:8px}mtna-wf-step-group mat-divider.mat-divider{margin-left:20px}mtna-wf-step-group .show-more{margin:0;text-align:center}\n"], components: [{ type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: ["color", "step", "clickable", "incompleteIcon"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "slice": i4__namespace.SlicePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfFormStepGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepGroupComponent, selector: "mtna-wf-step-group", inputs: { color: "color", collapsed: "collapsed", incompleteIcon: "incompleteIcon", steps: "steps" }, outputs: { selected: "selected" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngFor=\"let step of steps | slice : 0 : (collapsed ? 1 : steps.length); let last = last\">\n  <mtna-wf-step\n    [clickable]=\"step.status !== 'DISABLED'\"\n    [color]=\"color\"\n    [incompleteIcon]=\"incompleteIcon\"\n    [step]=\"step\"\n    (click)=\"selected.emit(step)\"\n  ></mtna-wf-step>\n  <mat-divider *ngIf=\"!last\" [vertical]=\"true\"></mat-divider>\n  <p *ngIf=\"collapsed\" class=\"show-more mat-caption\">and {{ steps.length - 1 }} more...</p>\n</ng-container>\n<button\n  mat-icon-button\n  class=\"collapse-button\"\n  [color]=\"color\"\n  (click)=\"collapsed = !collapsed\"\n  [matTooltip]=\"collapsed ? 'View All' : 'Hide'\"\n>\n  <mat-icon>{{ collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n</button>\n", styles: ["mtna-wf-step-group{border-style:solid;border-radius:4px;border-width:1px;display:block;margin:4px 4px 16px 8px;padding-bottom:16px;position:relative}mtna-wf-step-group .collapse-button{bottom:-19px;left:calc(50% - 20px);position:absolute;z-index:10}mtna-wf-step-group .collapse-button:after{bottom:8px;content:\"\";height:12px;left:calc(50% - 16px);position:absolute;width:32px;z-index:-1}mtna-wf-step-group mtna-wf-step li{padding-left:8px}mtna-wf-step-group mat-divider.mat-divider{margin-left:20px}mtna-wf-step-group .show-more{margin:0;text-align:center}\n"], components: [{ type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: ["color", "step", "clickable", "incompleteIcon"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "slice": i3__namespace.SlicePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepGroupComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4436,7 +4513,7 @@
       return MtnaWfFormStepperComponent;
   }(_FormStepperMixinBase));
   MtnaWfFormStepperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormStepperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepperComponent, selector: "mtna-wf-stepper", inputs: { color: "color", incompleteIcon: "incompleteIcon", steps: "steps" }, outputs: { selected: "selected" }, usesInheritance: true, ngImport: i0__namespace, template: "<ol>\n  <ng-container *ngFor=\"let step of steps; let last = last; trackBy: _trackStep\">\n    <ng-container\n      [ngTemplateOutlet]=\"(step | mtnaWfStepGroupPipe) ? groupStep : singleStep\"\n      [ngTemplateOutletContext]=\"{ $implicit: step }\"\n    ></ng-container>\n    <mat-divider *ngIf=\"!last\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n  <ng-template #singleStep let-step>\n    <mtna-wf-step\n      [clickable]=\"step.status !== 'DISABLED'\"\n      [color]=\"color\"\n      [step]=\"step\"\n      [incompleteIcon]=\"incompleteIcon\"\n      (click)=\"selected.emit(step)\"\n    ></mtna-wf-step>\n  </ng-template>\n  <ng-template #groupStep let-step>\n    <mtna-wf-step-group\n      [collapsed]=\"step.collapsed\"\n      [color]=\"color\"\n      [incompleteIcon]=\"incompleteIcon\"\n      [steps]=\"step.steps\"\n      (selected)=\"selected.emit($event)\"\n    ></mtna-wf-step-group>\n  </ng-template>\n</ol>\n", styles: ["mtna-wf-stepper{border-right-width:1px;border-right-style:solid;overflow-y:auto}mtna-wf-stepper mtna-wf-step li.active-step:after{transform-origin:top;transform:scaleY(1)}mtna-wf-stepper mtna-wf-step.clickable{cursor:pointer}mtna-wf-stepper mat-divider.mat-divider{height:24px;width:1px;margin-left:28px}mtna-wf-stepper ol{padding:0}\n"], components: [{ type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: ["color", "step", "clickable", "incompleteIcon"] }, { type: MtnaWfFormStepGroupComponent, selector: "mtna-wf-step-group", inputs: ["color", "collapsed", "incompleteIcon", "steps"], outputs: ["selected"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfStepGroupPipe": MtnaWfFormStepGroupPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfFormStepperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepperComponent, selector: "mtna-wf-stepper", inputs: { color: "color", incompleteIcon: "incompleteIcon", steps: "steps" }, outputs: { selected: "selected" }, usesInheritance: true, ngImport: i0__namespace, template: "<ol>\n  <ng-container *ngFor=\"let step of steps; let last = last; trackBy: _trackStep\">\n    <ng-container\n      [ngTemplateOutlet]=\"(step | mtnaWfStepGroupPipe) ? groupStep : singleStep\"\n      [ngTemplateOutletContext]=\"{ $implicit: step }\"\n    ></ng-container>\n    <mat-divider *ngIf=\"!last\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n  <ng-template #singleStep let-step>\n    <mtna-wf-step\n      [clickable]=\"step.status !== 'DISABLED'\"\n      [color]=\"color\"\n      [step]=\"step\"\n      [incompleteIcon]=\"incompleteIcon\"\n      (click)=\"selected.emit(step)\"\n    ></mtna-wf-step>\n  </ng-template>\n  <ng-template #groupStep let-step>\n    <mtna-wf-step-group\n      [collapsed]=\"step.collapsed\"\n      [color]=\"color\"\n      [incompleteIcon]=\"incompleteIcon\"\n      [steps]=\"step.steps\"\n      (selected)=\"selected.emit($event)\"\n    ></mtna-wf-step-group>\n  </ng-template>\n</ol>\n", styles: ["mtna-wf-stepper{border-right-width:1px;border-right-style:solid;overflow-y:auto}mtna-wf-stepper mtna-wf-step li.active-step:after{transform-origin:top;transform:scaleY(1)}mtna-wf-stepper mtna-wf-step.clickable{cursor:pointer}mtna-wf-stepper mat-divider.mat-divider{height:24px;width:1px;margin-left:28px}mtna-wf-stepper ol{padding:0}\n"], components: [{ type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: ["color", "step", "clickable", "incompleteIcon"] }, { type: MtnaWfFormStepGroupComponent, selector: "mtna-wf-step-group", inputs: ["color", "collapsed", "incompleteIcon", "steps"], outputs: ["selected"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfStepGroupPipe": MtnaWfFormStepGroupPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4461,22 +4538,22 @@
       return MtnaWfFormStepperModule;
   }());
   MtnaWfFormStepperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfFormStepperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperModule, declarations: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent], imports: [i4.CommonModule,
+  MtnaWfFormStepperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperModule, declarations: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent], imports: [i3$1.CommonModule,
           flexLayout.FlexLayoutModule,
           i2$2.MatDividerModule,
           i1$1.MtnaStatusCircleModule,
           i3.MatRippleModule,
-          i3$1.MatButtonModule,
+          i3$2.MatButtonModule,
           i6$1.MatTooltipModule,
           i5.MatIconModule,
           MtnaWfFormStepGroupPipeModule], exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent] });
   MtnaWfFormStepperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               flexLayout.FlexLayoutModule,
               i2$2.MatDividerModule,
               i1$1.MtnaStatusCircleModule,
               i3.MatRippleModule,
-              i3$1.MatButtonModule,
+              i3$2.MatButtonModule,
               i6$1.MatTooltipModule,
               i5.MatIconModule,
               MtnaWfFormStepGroupPipeModule,
@@ -4485,12 +4562,12 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           flexLayout.FlexLayoutModule,
                           i2$2.MatDividerModule,
                           i1$1.MtnaStatusCircleModule,
                           i3.MatRippleModule,
-                          i3$1.MatButtonModule,
+                          i3$2.MatButtonModule,
                           i6$1.MatTooltipModule,
                           i5.MatIconModule,
                           MtnaWfFormStepGroupPipeModule,
@@ -4530,7 +4607,7 @@
       return MtnaWfStepCardComponent;
   }(_StepCardMixinBase));
   MtnaWfStepCardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfStepCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: { color: "color", step: "step", subtitle: "subtitle" }, outputs: { focused: "focused" }, host: { properties: { "class.active": "this.active" } }, usesInheritance: true, ngImport: i0__namespace, template: "<mat-card cdkMonitorSubtreeFocus (cdkFocusChange)=\"handleFocusChange($event)\">\n  <mat-card-header>\n    <mtna-status-circle mat-card-avatar [circleNumber]=\"step?.num\" [optional]=\"step?.optional\" [status]=\"step?.status\"></mtna-status-circle>\n    <mat-card-title>{{ step?.label }}</mat-card-title>\n    <mat-card-subtitle [innerHTML]=\"subtitle | mtnaWfSanitizeHtml\"></mat-card-subtitle>\n    <p *ngIf=\"step?.optional\" class=\"optional mat-caption\">Optional</p>\n  </mat-card-header>\n\n  <mat-divider [inset]=\"true\"></mat-divider>\n\n  <mat-card-content>\n    <ng-content select=\"[cardContent]\"></ng-content>\n  </mat-card-content>\n\n  <mat-card-actions>\n    <ng-content select=\"[cardActions]\"></ng-content>\n  </mat-card-actions>\n</mat-card>\n", styles: ["mtna-wf-step-card{display:block;position:relative}mtna-wf-step-card.active:before{transform-origin:top;transform:scaleY(1)}mtna-wf-step-card:before{content:\"\";display:block;position:absolute;top:0;left:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1;border-top-left-radius:2px;border-bottom-left-radius:2px}mtna-wf-step-card mat-card-header{position:relative}mtna-wf-step-card mat-card-header mat-card-title{line-height:24px;margin-right:100px}mtna-wf-step-card mat-card-header mtna-status-circle[mat-card-avatar]{width:24px;height:24px}mtna-wf-step-card mat-card-header>.optional:not(.mtna-status-circle){position:absolute;right:16px;top:0;margin:0;line-height:24px}mtna-wf-step-card mat-card-actions{padding:0;margin:0}mtna-wf-step-card mat-card-content{margin-top:16px}mtna-wf-step-card mat-card-content [cardcontent]>:first-child{margin-top:0}\n"], components: [{ type: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1__namespace$4.MatCardHeader, selector: "mat-card-header" }, { type: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4__namespace$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace$4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1__namespace$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1__namespace$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1__namespace$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfStepCardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: { color: "color", step: "step", subtitle: "subtitle" }, outputs: { focused: "focused" }, host: { properties: { "class.active": "this.active" } }, usesInheritance: true, ngImport: i0__namespace, template: "<mat-card cdkMonitorSubtreeFocus (cdkFocusChange)=\"handleFocusChange($event)\">\n  <mat-card-header>\n    <mtna-status-circle mat-card-avatar [circleNumber]=\"step?.num\" [optional]=\"step?.optional\" [status]=\"step?.status\"></mtna-status-circle>\n    <mat-card-title>{{ step?.label }}</mat-card-title>\n    <mat-card-subtitle [innerHTML]=\"subtitle | mtnaWfSanitizeHtml\"></mat-card-subtitle>\n    <p *ngIf=\"step?.optional\" class=\"optional mat-caption\">Optional</p>\n  </mat-card-header>\n\n  <mat-divider [inset]=\"true\"></mat-divider>\n\n  <mat-card-content>\n    <ng-content select=\"[cardContent]\"></ng-content>\n  </mat-card-content>\n\n  <mat-card-actions>\n    <ng-content select=\"[cardActions]\"></ng-content>\n  </mat-card-actions>\n</mat-card>\n", styles: ["mtna-wf-step-card{display:block;position:relative}mtna-wf-step-card.active:before{transform-origin:top;transform:scaleY(1)}mtna-wf-step-card:before{content:\"\";display:block;position:absolute;top:0;left:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1;border-top-left-radius:2px;border-bottom-left-radius:2px}mtna-wf-step-card mat-card-header{position:relative}mtna-wf-step-card mat-card-header mat-card-title{line-height:24px;margin-right:100px}mtna-wf-step-card mat-card-header mtna-status-circle[mat-card-avatar]{width:24px;height:24px}mtna-wf-step-card mat-card-header>.optional:not(.mtna-status-circle){position:absolute;right:16px;top:0;margin:0;line-height:24px}mtna-wf-step-card mat-card-actions{padding:0;margin:0}mtna-wf-step-card mat-card-content{margin-top:16px}mtna-wf-step-card mat-card-content [cardcontent]>:first-child{margin-top:0}\n"], components: [{ type: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1__namespace$4.MatCardHeader, selector: "mat-card-header" }, { type: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4__namespace.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace$4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1__namespace$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1__namespace$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1__namespace$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4558,12 +4635,12 @@
       return MtnaWfStepCardModule;
   }());
   MtnaWfStepCardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfStepCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardModule, declarations: [MtnaWfStepCardComponent], imports: [i4$1.A11yModule, i4.CommonModule, i1$6.MatCardModule, i1$1.MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, i2$2.MatDividerModule], exports: [MtnaWfStepCardComponent] });
-  MtnaWfStepCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardModule, imports: [[i4$1.A11yModule, i4.CommonModule, i1$6.MatCardModule, i1$1.MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, i2$2.MatDividerModule]] });
+  MtnaWfStepCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardModule, declarations: [MtnaWfStepCardComponent], imports: [i4.A11yModule, i3$1.CommonModule, i1$6.MatCardModule, i1$1.MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, i2$2.MatDividerModule], exports: [MtnaWfStepCardComponent] });
+  MtnaWfStepCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardModule, imports: [[i4.A11yModule, i3$1.CommonModule, i1$6.MatCardModule, i1$1.MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, i2$2.MatDividerModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4$1.A11yModule, i4.CommonModule, i1$6.MatCardModule, i1$1.MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, i2$2.MatDividerModule],
+                      imports: [i4.A11yModule, i3$1.CommonModule, i1$6.MatCardModule, i1$1.MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, i2$2.MatDividerModule],
                       declarations: [MtnaWfStepCardComponent],
                       exports: [MtnaWfStepCardComponent],
                   }]
@@ -4575,8 +4652,8 @@
       return MtnaFormModule;
   }());
   MtnaFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaFormModule, declarations: [MtnaWfFormComponent], imports: [i4$1.A11yModule,
-          i4.CommonModule,
+  MtnaFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaFormModule, declarations: [MtnaWfFormComponent], imports: [i4.A11yModule,
+          i3$1.CommonModule,
           flexLayout.FlexLayoutModule,
           i6.FormsModule,
           MtnaWfFormItemModule,
@@ -4586,8 +4663,8 @@
           MtnaWfFormStepperModule,
           MtnaWfStepCardModule], exports: [MtnaWfFormComponent] });
   MtnaFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaFormModule, providers: [{ provide: i3.ErrorStateMatcher, useClass: MtnaWfInstantValidationResultErrorStateMatcher }], imports: [[
-              i4$1.A11yModule,
-              i4.CommonModule,
+              i4.A11yModule,
+              i3$1.CommonModule,
               flexLayout.FlexLayoutModule,
               i6.FormsModule,
               MtnaWfFormItemModule,
@@ -4601,8 +4678,8 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4$1.A11yModule,
-                          i4.CommonModule,
+                          i4.A11yModule,
+                          i3$1.CommonModule,
                           flexLayout.FlexLayoutModule,
                           i6.FormsModule,
                           MtnaWfFormItemModule,
@@ -4620,8 +4697,8 @@
 
   var MtnaWfBooleanComponent = /** @class */ (function (_super) {
       __extends(MtnaWfBooleanComponent, _super);
-      function MtnaWfBooleanComponent(uiService) {
-          var _this = _super.call(this) || this;
+      function MtnaWfBooleanComponent(cdr, uiService) {
+          var _this = _super.call(this, cdr) || this;
           _this.uiService = uiService;
           return _this;
       }
@@ -4633,8 +4710,8 @@
       };
       return MtnaWfBooleanComponent;
   }(MtnaWfBaseParentValueItem));
-  MtnaWfBooleanComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanComponent, deps: [{ token: MtnaWfUIService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfBooleanComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBooleanComponent, selector: "mtna-wf-boolean-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-slide-toggle *ngIf=\"control\" [formControl]=\"control\" (change)=\"toggleChange($event)\">{{ item.option.option.name }}</mat-slide-toggle>\n<ng-container *ngIf=\"!!item.optionItemMap\">\n  <mtna-wf-item\n    *ngFor=\"let f of item.optionItemMap | keyvalue; trackBy: _trackByInstanceId\"\n    [item]=\"f.value\"\n    [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[f.value.instanceId] : undefined\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-item>\n  <ng-container> </ng-container\n></ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-value-item>mtna-wf-boolean-item{padding-right:24px}mtna-wf-boolean-item{display:block}mtna-wf-boolean-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-boolean-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-boolean-item .mat-slide-toggle{margin:4px 0}mtna-wf-boolean-item .mat-slide-toggle+mtna-wf-item{margin-top:0}mtna-wf-boolean-item .mat-slide-toggle~mtna-wf-item{padding-left:18px}mtna-wf-boolean-item.read-only .mat-slide-toggle.mat-disabled{opacity:.8}mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label,mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{cursor:default}mtna-wf-boolean-item .mat-slide-toggle{height:auto;min-height:24px}mtna-wf-boolean-item .mat-slide-toggle>.mat-slide-toggle-label>.mat-slide-toggle-content{white-space:normal}\n"], components: [{ type: i2__namespace$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i4__namespace.KeyValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfBooleanComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: MtnaWfUIService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfBooleanComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBooleanComponent, selector: "mtna-wf-boolean-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-slide-toggle\n  *ngIf=\"control\"\n  [formControl]=\"control\"\n  [disabled]=\"readonly\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n  (change)=\"toggleChange($event)\"\n  >{{ item.option.option.name }}</mat-slide-toggle\n>\n<ng-container *ngIf=\"!!item.optionItemMap\">\n  <mtna-wf-item\n    *ngFor=\"let f of item.optionItemMap | keyvalue; trackBy: _trackByInstanceId\"\n    [item]=\"f.value\"\n    [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[f.value.instanceId] : undefined\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-item>\n  <ng-container> </ng-container>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-boolean-item{padding-right:24px}mtna-wf-boolean-item{display:block}mtna-wf-boolean-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-boolean-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-boolean-item .mat-slide-toggle{margin:4px 0}mtna-wf-boolean-item .mat-slide-toggle+mtna-wf-item{margin-top:0}mtna-wf-boolean-item .mat-slide-toggle~mtna-wf-item{padding-left:18px}mtna-wf-boolean-item.read-only .mat-slide-toggle.mat-disabled{opacity:.8}mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label,mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{cursor:default}mtna-wf-boolean-item .mat-slide-toggle{height:auto;min-height:24px;width:100%}mtna-wf-boolean-item .mat-slide-toggle>.mat-slide-toggle-label>.mat-slide-toggle-content{white-space:normal}\n"], components: [{ type: i2__namespace$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i3__namespace.KeyValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4644,7 +4721,7 @@
                       encapsulation: i0.ViewEncapsulation.None,
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
-          }], ctorParameters: function () { return [{ type: MtnaWfUIService }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: MtnaWfUIService }]; } });
 
   var MtnaWfBooleanModule = /** @class */ (function () {
       function MtnaWfBooleanModule() {
@@ -4652,12 +4729,34 @@
       return MtnaWfBooleanModule;
   }());
   MtnaWfBooleanModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfBooleanModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanModule, declarations: [MtnaWfBooleanComponent], imports: [i4.CommonModule, i2$3.MatSlideToggleModule, MtnaWfFormItemModule, i6.FormsModule, i6.ReactiveFormsModule, MtnaWfAcknowledgeDialogModule], exports: [MtnaWfBooleanComponent] });
-  MtnaWfBooleanModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanModule, imports: [[i4.CommonModule, i2$3.MatSlideToggleModule, MtnaWfFormItemModule, i6.FormsModule, i6.ReactiveFormsModule, MtnaWfAcknowledgeDialogModule]] });
+  MtnaWfBooleanModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanModule, declarations: [MtnaWfBooleanComponent], imports: [i3$1.CommonModule,
+          i2$3.MatSlideToggleModule,
+          MtnaWfFormItemModule,
+          i6.FormsModule,
+          i6.ReactiveFormsModule,
+          MtnaWfAcknowledgeDialogModule,
+          i1$1.MtnaHighlightModule], exports: [MtnaWfBooleanComponent] });
+  MtnaWfBooleanModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanModule, imports: [[
+              i3$1.CommonModule,
+              i2$3.MatSlideToggleModule,
+              MtnaWfFormItemModule,
+              i6.FormsModule,
+              i6.ReactiveFormsModule,
+              MtnaWfAcknowledgeDialogModule,
+              i1$1.MtnaHighlightModule,
+          ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBooleanModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i2$3.MatSlideToggleModule, MtnaWfFormItemModule, i6.FormsModule, i6.ReactiveFormsModule, MtnaWfAcknowledgeDialogModule],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$3.MatSlideToggleModule,
+                          MtnaWfFormItemModule,
+                          i6.FormsModule,
+                          i6.ReactiveFormsModule,
+                          MtnaWfAcknowledgeDialogModule,
+                          i1$1.MtnaHighlightModule,
+                      ],
                       declarations: [MtnaWfBooleanComponent],
                       exports: [MtnaWfBooleanComponent],
                   }]
@@ -4665,8 +4764,8 @@
 
   var MtnaWfCheckboxComponent = /** @class */ (function (_super) {
       __extends(MtnaWfCheckboxComponent, _super);
-      function MtnaWfCheckboxComponent(dialogService) {
-          var _this = _super.call(this) || this;
+      function MtnaWfCheckboxComponent(cdr, dialogService) {
+          var _this = _super.call(this, cdr) || this;
           _this.dialogService = dialogService;
           _this.destroyed$ = new rxjs.Subject();
           return _this;
@@ -4716,7 +4815,6 @@
        * @param acknowledgementItem The form item that represents the acknowledgement text to display to the user.
        * */
       MtnaWfCheckboxComponent.prototype.showAcknowledgement = function (event, acknowledgementItem) {
-          console.warn('showAcknowledgement in checkbox component');
           event.stopPropagation();
           event.preventDefault();
           this.dialogService.showAcknowledgement(acknowledgementItem);
@@ -4730,8 +4828,8 @@
       };
       return MtnaWfCheckboxComponent;
   }(MtnaWfBaseParentValueItem));
-  MtnaWfCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxComponent, deps: [{ token: MtnaWfDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfCheckboxComponent, selector: "mtna-wf-checkbox-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div *ngIf=\"hasItemHeader\" class=\"mtna-wf-error-container\">\n  <ng-container *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <mat-error *ngFor=\"let error of control?.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </ng-container>\n</div>\n<fieldset\n  class=\"control-item-content\"\n  [class.single-option]=\"item.options.length === 1\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <ng-container *ngFor=\"let opt of item.options; let i = index; trackBy: _trackByOptionId\">\n    <mat-checkbox\n      *ngIf=\"!!control && !!control.controls && !!control.controls[i]\"\n      [disableRipple]=\"readonly\"\n      [formControl]=\"$any(control.controls[i])\"\n      [color]=\"color\"\n      (change)=\"handleChange($event, i)\"\n      >{{ opt.option.name }}\n      <button\n        *ngIf=\"opt.acknowledgement && control.controls[i].value\"\n        aria-label=\"Acknowledged. Click to view the agreement.\"\n        class=\"acknowledge-verification-button\"\n        mat-icon-button\n        matTooltip=\"Acknowledged. Click to view the agreement.\"\n        matTooltipShowDelay=\"800\"\n        (click)=\"showAcknowledgement($event, opt.acknowledgement)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (touchstart)=\"stopEventPropagation($event)\"\n      >\n        <mat-icon>verified</mat-icon>\n      </button>\n    </mat-checkbox>\n    <ng-container *ngIf=\"item.optionItemMap[opt.option.id]\">\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </ng-container>\n</fieldset>\n", styles: ["mtna-wf-checkbox-item{display:flex;flex-direction:column;position:relative}mtna-wf-checkbox-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-checkbox-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-checkbox-item .mat-checkbox{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout>.mat-checkbox-label{white-space:normal}mtna-wf-checkbox-item .mat-checkbox .acknowledge-verification-button{vertical-align:top;width:18px;height:18px;line-height:18px;margin-left:4px}mtna-wf-checkbox-item .mat-checkbox .acknowledge-verification-button .mat-icon{width:18px;height:18px;line-height:18px;font-size:18px}mtna-wf-checkbox-item fieldset{border:none;margin:0}mtna-wf-checkbox-item fieldset.control-item-content.single-option{padding:0}mtna-wf-checkbox-item .mat-checkbox+mtna-wf-item{margin-top:0;padding-left:24px}mtna-wf-checkbox-item.read-only .mat-checkbox{cursor:default}\n"], components: [{ type: i2__namespace$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "keyvalue": i4__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfCheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: MtnaWfDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfCheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfCheckboxComponent, selector: "mtna-wf-checkbox-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div *ngIf=\"hasItemHeader\" class=\"mtna-wf-error-container\">\n  <ng-container *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <mat-error *ngFor=\"let error of control?.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </ng-container>\n</div>\n<fieldset\n  class=\"control-item-content\"\n  [class.single-option]=\"item.options.length === 1\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <ng-container *ngFor=\"let opt of item.options; let i = index; trackBy: _trackByOptionId\">\n    <mat-checkbox\n      *ngIf=\"!!control && !!control.controls && !!control.controls[i]\"\n      [disableRipple]=\"readonly\"\n      [formControl]=\"$any(control.controls[i])\"\n      [color]=\"color\"\n      [disabled]=\"readonly\"\n      (change)=\"handleChange($event, i)\"\n      >{{ opt.option.name }}\n      <button\n        *ngIf=\"opt.acknowledgement && control.controls[i].value\"\n        aria-label=\"Acknowledged. Click to view the agreement.\"\n        class=\"acknowledge-verification-button\"\n        mat-icon-button\n        matTooltip=\"Acknowledged. Click to view the agreement.\"\n        matTooltipShowDelay=\"800\"\n        (click)=\"showAcknowledgement($event, opt.acknowledgement)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (touchstart)=\"stopEventPropagation($event)\"\n      >\n        <mat-icon>verified</mat-icon>\n      </button>\n    </mat-checkbox>\n    <ng-container *ngIf=\"item.optionItemMap[opt.option.id]\">\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </ng-container>\n</fieldset>\n", styles: ["mtna-wf-checkbox-item{display:flex;flex-direction:column;position:relative}mtna-wf-checkbox-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-checkbox-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-checkbox-item .mat-checkbox{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout>.mat-checkbox-label{white-space:normal}mtna-wf-checkbox-item .mat-checkbox .acknowledge-verification-button{vertical-align:top;width:18px;height:18px;line-height:18px;margin-left:4px}mtna-wf-checkbox-item .mat-checkbox .acknowledge-verification-button .mat-icon{width:18px;height:18px;line-height:18px;font-size:18px}mtna-wf-checkbox-item fieldset{border:none;margin:0}mtna-wf-checkbox-item fieldset.control-item-content.single-option{padding:0}mtna-wf-checkbox-item .mat-checkbox+mtna-wf-item{margin-top:0;padding-left:24px}mtna-wf-checkbox-item.read-only .mat-checkbox{cursor:default}\n"], components: [{ type: i2__namespace$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "keyvalue": i3__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4741,7 +4839,24 @@
                       encapsulation: i0.ViewEncapsulation.None,
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
-          }], ctorParameters: function () { return [{ type: MtnaWfDialogService }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: MtnaWfDialogService }]; } });
+
+  var MtnaWfFormItemDialogModule = /** @class */ (function () {
+      function MtnaWfFormItemDialogModule() {
+      }
+      return MtnaWfFormItemDialogModule;
+  }());
+  MtnaWfFormItemDialogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  MtnaWfFormItemDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, declarations: [MtnaWfFormItemDialogComponent], imports: [i3$1.CommonModule, i1.MatDialogModule, MtnaWfFormItemModule], exports: [MtnaWfFormItemDialogComponent] });
+  MtnaWfFormItemDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, imports: [[i3$1.CommonModule, i1.MatDialogModule, MtnaWfFormItemModule]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      imports: [i3$1.CommonModule, i1.MatDialogModule, MtnaWfFormItemModule],
+                      declarations: [MtnaWfFormItemDialogComponent],
+                      exports: [MtnaWfFormItemDialogComponent],
+                  }]
+          }] });
 
   var MtnaWfCheckboxModule = /** @class */ (function () {
       function MtnaWfCheckboxModule() {
@@ -4749,45 +4864,48 @@
       return MtnaWfCheckboxModule;
   }());
   MtnaWfCheckboxModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfCheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxModule, declarations: [MtnaWfCheckboxComponent], imports: [i4.CommonModule,
+  MtnaWfCheckboxModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxModule, declarations: [MtnaWfCheckboxComponent], imports: [i3$1.CommonModule,
           MtnaWfGetFormControlErrorPipeModule,
           i6.FormsModule,
           i1$7.MatFormFieldModule,
           i2$4.MatCheckboxModule,
-          i3$1.MatButtonModule,
+          i3$2.MatButtonModule,
           i5.MatIconModule,
           i6$1.MatTooltipModule,
           MtnaWfFormItemModule,
           i1$1.MtnaHighlightModule,
-          i6.ReactiveFormsModule], exports: [MtnaWfCheckboxComponent] });
+          i6.ReactiveFormsModule,
+          MtnaWfFormItemDialogModule], exports: [MtnaWfCheckboxComponent] });
   MtnaWfCheckboxModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               MtnaWfGetFormControlErrorPipeModule,
               i6.FormsModule,
               i1$7.MatFormFieldModule,
               i2$4.MatCheckboxModule,
-              i3$1.MatButtonModule,
+              i3$2.MatButtonModule,
               i5.MatIconModule,
               i6$1.MatTooltipModule,
               MtnaWfFormItemModule,
               i1$1.MtnaHighlightModule,
               i6.ReactiveFormsModule,
+              MtnaWfFormItemDialogModule,
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxModule, decorators: [{
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           MtnaWfGetFormControlErrorPipeModule,
                           i6.FormsModule,
                           i1$7.MatFormFieldModule,
                           i2$4.MatCheckboxModule,
-                          i3$1.MatButtonModule,
+                          i3$2.MatButtonModule,
                           i5.MatIconModule,
                           i6$1.MatTooltipModule,
                           MtnaWfFormItemModule,
                           i1$1.MtnaHighlightModule,
                           i6.ReactiveFormsModule,
+                          MtnaWfFormItemDialogModule,
                       ],
                       declarations: [MtnaWfCheckboxComponent],
                       exports: [MtnaWfCheckboxComponent],
@@ -4796,8 +4914,8 @@
 
   var MtnaWfDateComponent = /** @class */ (function (_super) {
       __extends(MtnaWfDateComponent, _super);
-      function MtnaWfDateComponent(logger) {
-          var _this = _super.call(this) || this;
+      function MtnaWfDateComponent(cdr, logger) {
+          var _this = _super.call(this, cdr) || this;
           _this.dateItemClass = true;
           // TODO: This is not currenlty used, the back end needs to add range limits on the DateItem in order for this to work
           // Remove once accomplished and replace usage with item.rangeLimits in the html
@@ -4857,8 +4975,8 @@
       return MtnaWfDateComponent;
   }(MtnaWfBaseValueItem));
   MtnaWfDateComponent.dateFormItemComponentInstances = 0;
-  MtnaWfDateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateComponent, deps: [{ token: i1__namespace$1.MtnaLogger }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfDateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: { rangeLimits: "rangeLimits" }, host: { properties: { "class.mtna-wf-date-item": "this.dateItemClass" } }, viewQueries: [{ propertyName: "picker", first: true, predicate: i3$3.MatDatepicker, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-form-field *ngIf=\"control\" appearance=\"outline\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\">\n  <mat-label>{{ item.label || 'Date' }}</mat-label>\n  <input\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"control\"\n    [max]=\"rangeLimits?.end\"\n    [min]=\"rangeLimits?.start\"\n    placeholder=\"Choose a date\"\n    [required]=\"item.required\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disabled]=\"readonly || control.disabled\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n  <mat-hint>{{ item.format }}</mat-hint>\n</mat-form-field>\n", styles: ["mtna-wf-date-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-date-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3__namespace$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i5__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3__namespace$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$5.MatSuffix, selector: "[matSuffix]" }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "keyvalue": i4__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfDateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.MtnaLogger }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfDateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: { rangeLimits: "rangeLimits" }, host: { properties: { "class.mtna-wf-date-item": "this.dateItemClass" } }, viewQueries: [{ propertyName: "picker", first: true, predicate: i3$4.MatDatepicker, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-form-field *ngIf=\"control\" appearance=\"outline\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\">\n  <mat-label>{{ item.label || 'Date' }}</mat-label>\n  <input\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"control\"\n    [max]=\"rangeLimits?.end\"\n    [min]=\"rangeLimits?.start\"\n    placeholder=\"Choose a date\"\n    [required]=\"item.required\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disabled]=\"readonly || control.disabled\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n  <mat-hint>{{ item.format }}</mat-hint>\n</mat-form-field>\n", styles: ["mtna-wf-date-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-date-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3__namespace$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i5__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3__namespace$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$5.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "keyvalue": i3__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4868,14 +4986,14 @@
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                       encapsulation: i0.ViewEncapsulation.None,
                   }]
-          }], ctorParameters: function () { return [{ type: i1__namespace$1.MtnaLogger }]; }, propDecorators: { dateItemClass: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.MtnaLogger }]; }, propDecorators: { dateItemClass: [{
                   type: i0.HostBinding,
                   args: ['class.mtna-wf-date-item']
               }], rangeLimits: [{
                   type: i0.Input
               }], picker: [{
                   type: i0.ViewChild,
-                  args: [i3$3.MatDatepicker, { static: false }]
+                  args: [i3$4.MatDatepicker, { static: false }]
               }] } });
 
   var MtnaWfDateModule = /** @class */ (function () {
@@ -4884,21 +5002,21 @@
       return MtnaWfDateModule;
   }());
   MtnaWfDateModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfDateModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateModule, declarations: [MtnaWfDateComponent], imports: [i4.CommonModule,
+  MtnaWfDateModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateModule, declarations: [MtnaWfDateComponent], imports: [i3$1.CommonModule,
           i6.FormsModule,
           i1$7.MatFormFieldModule,
           i5$1.MatInputModule,
-          i3$3.MatDatepickerModule,
+          i3$4.MatDatepickerModule,
           materialMomentAdapter.MatMomentDateModule,
           i1$1.MtnaHighlightModule,
           i6.ReactiveFormsModule,
           MtnaWfGetFormControlErrorPipeModule], exports: [MtnaWfDateComponent] });
   MtnaWfDateModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               i6.FormsModule,
               i1$7.MatFormFieldModule,
               i5$1.MatInputModule,
-              i3$3.MatDatepickerModule,
+              i3$4.MatDatepickerModule,
               materialMomentAdapter.MatMomentDateModule,
               i1$1.MtnaHighlightModule,
               i6.ReactiveFormsModule,
@@ -4908,11 +5026,11 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i6.FormsModule,
                           i1$7.MatFormFieldModule,
                           i5$1.MatInputModule,
-                          i3$3.MatDatepickerModule,
+                          i3$4.MatDatepickerModule,
                           materialMomentAdapter.MatMomentDateModule,
                           i1$1.MtnaHighlightModule,
                           i6.ReactiveFormsModule,
@@ -4944,7 +5062,7 @@
       return MtnaWfDateRangeComponent;
   }(MtnaWfBaseValueItem));
   MtnaWfDateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateRangeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfDateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateRangeComponent, selector: "mtna-wf-date-range", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-date-item\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [item]=\"_startItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n  <span fxFlex=\"14px\"> to </span>\n  <mtna-wf-date-item\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [item]=\"_endItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n</div>\n", components: [{ type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: ["rangeLimits"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfDateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateRangeComponent, selector: "mtna-wf-date-range", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-date-item\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [item]=\"_startItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n  <span fxFlex=\"14px\"> to </span>\n  <mtna-wf-date-item\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [item]=\"_endItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n</div>\n", components: [{ type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: ["rangeLimits"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateRangeComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -4961,7 +5079,7 @@
       return MtnaWfDateRangeModule;
   }());
   MtnaWfDateRangeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateRangeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfDateRangeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateRangeModule, declarations: [MtnaWfDateRangeComponent], imports: [i4.CommonModule,
+  MtnaWfDateRangeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateRangeModule, declarations: [MtnaWfDateRangeComponent], imports: [i3$1.CommonModule,
           i1$1.MtnaHighlightModule,
           MtnaWfDateModule,
           flexLayout.FlexLayoutModule,
@@ -4969,7 +5087,7 @@
           i6.ReactiveFormsModule,
           MtnaWfCoerceFormControlPipeModule], exports: [MtnaWfDateRangeComponent] });
   MtnaWfDateRangeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateRangeModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               i1$1.MtnaHighlightModule,
               MtnaWfDateModule,
               flexLayout.FlexLayoutModule,
@@ -4981,7 +5099,7 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i1$1.MtnaHighlightModule,
                           MtnaWfDateModule,
                           flexLayout.FlexLayoutModule,
@@ -5002,7 +5120,7 @@
       return MtnaWfDropdownComponent;
   }(MtnaWfBaseSingleSelectionParentValueItem));
   MtnaWfDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDropdownComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDropdownComponent, selector: "mtna-wf-dropdown-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <mat-select [formControl]=\"control\" (selectionChange)=\"selectionChange($event)\" [required]=\"item.required\">\n    <mat-option *ngIf=\"!item.required\">-- None --</mat-option>\n    <mat-option *ngFor=\"let opt of item.options\" [value]=\"opt.option.id\" [disabled]=\"control.value === opt.option.id\">{{\n      opt.option.name\n    }}</mat-option>\n  </mat-select>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<ng-template #readOnly>\n  <ng-container *ngIf=\"inList; else fullList\">\n    <mat-list-item *ngIf=\"item.required || !!item.value\">\n      <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n      <h4 matLine>{{ item.label }}</h4>\n      <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n    </mat-list-item>\n  </ng-container>\n\n  <ng-template #fullList>\n    <mat-list>\n      <mat-list-item *ngIf=\"item.required || !!item.value\">\n        <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n        <h4 matLine>{{ item.label }}</h4>\n        <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</ng-template>\n", styles: ["mtna-wf-dropdown-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-dropdown-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4__namespace$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i3__namespace$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "keyvalue": i4__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetListIcon": MtnaWfGetListIconPipe, "mtnaWfGetSelectedOptionName": MtnaWfGetSelectedOptionNamePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDropdownComponent, selector: "mtna-wf-dropdown-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <mat-select [formControl]=\"control\" (selectionChange)=\"selectionChange($event)\" [required]=\"item.required\">\n    <mat-option *ngIf=\"!item.required\">-- None --</mat-option>\n    <mat-option *ngFor=\"let opt of item.options\" [value]=\"opt.option.id\" [disabled]=\"control.value === opt.option.id\">{{\n      opt.option.name\n    }}</mat-option>\n  </mat-select>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<ng-template #readOnly>\n  <ng-container *ngIf=\"inList; else fullList\">\n    <mat-list-item *ngIf=\"item.required || !!item.value\">\n      <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n      <h4 matLine>{{ item.label }}</h4>\n      <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n    </mat-list-item>\n  </ng-container>\n\n  <ng-template #fullList>\n    <mat-list>\n      <mat-list-item *ngIf=\"item.required || !!item.value\">\n        <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n        <h4 matLine>{{ item.label }}</h4>\n        <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</ng-template>\n", styles: ["mtna-wf-dropdown-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-dropdown-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4__namespace$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4__namespace$1.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i3__namespace$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "keyvalue": i3__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetListIcon": MtnaWfGetListIconPipe, "mtnaWfGetSelectedOptionName": MtnaWfGetSelectedOptionNamePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDropdownComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5020,24 +5138,24 @@
       return MtnaWfDropdownModule;
   }());
   MtnaWfDropdownModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDropdownModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDropdownModule, declarations: [MtnaWfDropdownComponent], imports: [i4.CommonModule,
+  MtnaWfDropdownModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDropdownModule, declarations: [MtnaWfDropdownComponent], imports: [i3$1.CommonModule,
           i6.FormsModule,
           i1$7.MatFormFieldModule,
           i2.MatSelectModule,
           i1$1.MtnaHighlightModule,
-          i4$2.MatListModule,
+          i4$1.MatListModule,
           i5.MatIconModule,
           MtnaWfGetFormControlErrorPipeModule,
           MtnaWfGetSelectedOptionNamePipeModule,
           MtnaWfGetListIconPipeModule,
           i6.ReactiveFormsModule], exports: [MtnaWfDropdownComponent] });
   MtnaWfDropdownModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDropdownModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               i6.FormsModule,
               i1$7.MatFormFieldModule,
               i2.MatSelectModule,
               i1$1.MtnaHighlightModule,
-              i4$2.MatListModule,
+              i4$1.MatListModule,
               i5.MatIconModule,
               MtnaWfGetFormControlErrorPipeModule,
               MtnaWfGetSelectedOptionNamePipeModule,
@@ -5048,12 +5166,12 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i6.FormsModule,
                           i1$7.MatFormFieldModule,
                           i2.MatSelectModule,
                           i1$1.MtnaHighlightModule,
-                          i4$2.MatListModule,
+                          i4$1.MatListModule,
                           i5.MatIconModule,
                           MtnaWfGetFormControlErrorPipeModule,
                           MtnaWfGetSelectedOptionNamePipeModule,
@@ -5067,8 +5185,8 @@
 
   var MtnaWfFileUploadComponent = /** @class */ (function (_super) {
       __extends(MtnaWfFileUploadComponent, _super);
-      function MtnaWfFileUploadComponent(fileService) {
-          var _this = _super.call(this) || this;
+      function MtnaWfFileUploadComponent(cdr, fileService) {
+          var _this = _super.call(this, cdr) || this;
           _this.fileService = fileService;
           _this.loading = false;
           return _this;
@@ -5104,8 +5222,8 @@
       };
       return MtnaWfFileUploadComponent;
   }(MtnaWfBaseFormItemControl));
-  MtnaWfFileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadComponent, deps: [{ token: i1__namespace$6.FileService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFileUploadComponent, selector: "mtna-wf-file-upload-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div class=\"content\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item?.questionText && !item?.descriptiveText\">\n  <ng-container *ngIf=\"!readonly; else readOnly\">\n    <ng-container *ngIf=\"!loading; else loader\">\n      <mtna-file-download\n        *ngIf=\"!!fileInfo; else fileUpload\"\n        [fileInfo]=\"fileInfo\"\n        [canRemove]=\"true\"\n        color=\"primary\"\n        [canDownload]=\"true\"\n        (download)=\"handleDownload($event)\"\n        (remove)=\"removeFile()\"\n      ></mtna-file-download>\n\n      <ng-template #fileUpload>\n        <mtna-file-upload\n          [automaticUpload]=\"false\"\n          color=\"primary\"\n          [buttonText]=\"'CHOOSE A FILE'\"\n          (fileToUpload)=\"fileToUpload($event)\"\n        ></mtna-file-upload>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- READONLY -->\n  <ng-template #readOnly>\n    <!-- anchor being used, due to <fieldset disabled> blocking a <button>'s click event -->\n    <a\n      *ngIf=\"!!item && !!item.value; else unpopulated\"\n      class=\"single-icon-button\"\n      color=\"primary\"\n      mat-stroked-button\n      role=\"button\"\n      (click)=\"handleDownload(item.value)\"\n    >\n      <mat-icon color=\"primary\">file_download</mat-icon>\n      {{ (item!.value!.fileName ? item!.value!.fileName : '') | uppercase }}\n    </a>\n    <ng-template #unpopulated>\n      <mat-list>\n        <mat-list-item class=\"wrappable-list-item\">\n          <p mat-line class=\"wrap-line\">No File Provided</p>\n        </mat-list-item>\n      </mat-list>\n    </ng-template>\n  </ng-template>\n</div>\n\n<!-- PROGRESS SPINNER -->\n<ng-template #loader>\n  <mat-spinner diameter=\"125\" strokeWidth=\"10\" mode=\"indeterminate\"></mat-spinner>\n</ng-template>\n", styles: [":host{display:block;margin:1rem 0}mtna-file-download{margin:37px 0}mat-spinner{margin:0 87.5px}\n"], components: [{ type: i1__namespace$6.MtnaFileDownloadComponent, selector: "mtna-file-download", inputs: ["color", "canDownload", "canRemove", "fileInfo", "loading"], outputs: ["download", "remove"] }, { type: i1__namespace$6.MtnaFileUploadComponent, selector: "mtna-file-upload", inputs: ["automaticUpload", "buttonText", "buttonColor", "disabled", "fileUploadUrl", "isProd", "maxUploadSize", "uploading"], outputs: ["uploaded", "fileToUpload", "uploadStatus"] }, { type: i3__namespace.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5__namespace$2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "uppercase": i4__namespace.UpperCasePipe } });
+  MtnaWfFileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$6.FileService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfFileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFileUploadComponent, selector: "mtna-wf-file-upload-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div class=\"content\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item?.descriptiveText\">\n  <ng-container *ngIf=\"!readonly; else readOnly\">\n    <ng-container *ngIf=\"!loading; else loader\">\n      <mtna-file-download\n        *ngIf=\"!!fileInfo; else fileUpload\"\n        [fileInfo]=\"fileInfo\"\n        [canRemove]=\"true\"\n        color=\"primary\"\n        [canDownload]=\"true\"\n        (download)=\"handleDownload($event)\"\n        (remove)=\"removeFile()\"\n      ></mtna-file-download>\n\n      <ng-template #fileUpload>\n        <mtna-file-upload\n          [automaticUpload]=\"false\"\n          color=\"primary\"\n          [buttonText]=\"'CHOOSE A FILE'\"\n          (fileToUpload)=\"fileToUpload($event)\"\n        ></mtna-file-upload>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- READONLY -->\n  <ng-template #readOnly>\n    <!-- anchor being used, due to <fieldset disabled> blocking a <button>'s click event -->\n    <a\n      *ngIf=\"!!item && !!item.value; else unpopulated\"\n      class=\"single-icon-button\"\n      color=\"primary\"\n      mat-stroked-button\n      role=\"button\"\n      (click)=\"handleDownload(item.value)\"\n    >\n      <mat-icon color=\"primary\">file_download</mat-icon>\n      {{ (item!.value!.fileName ? item!.value!.fileName : '') | uppercase }}\n    </a>\n    <ng-template #unpopulated>\n      <mat-list>\n        <mat-list-item class=\"wrappable-list-item\">\n          <p mat-line class=\"wrap-line\">No File Provided</p>\n        </mat-list-item>\n      </mat-list>\n    </ng-template>\n  </ng-template>\n</div>\n\n<!-- PROGRESS SPINNER -->\n<ng-template #loader>\n  <mat-spinner diameter=\"125\" strokeWidth=\"10\" mode=\"indeterminate\"></mat-spinner>\n</ng-template>\n", styles: [":host{display:block;margin:1rem 0}mtna-file-download{margin:37px 0}mat-spinner{margin:0 87.5px}\n"], components: [{ type: i1__namespace$6.MtnaFileDownloadComponent, selector: "mtna-file-download", inputs: ["color", "canDownload", "canRemove", "fileInfo", "loading"], outputs: ["download", "remove"] }, { type: i1__namespace$6.MtnaFileUploadComponent, selector: "mtna-file-upload", inputs: ["automaticUpload", "buttonText", "buttonColor", "disabled", "fileUploadUrl", "isProd", "maxUploadSize", "uploading"], outputs: ["uploaded", "fileToUpload", "uploadStatus"] }, { type: i3__namespace$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4__namespace$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5__namespace$2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "uppercase": i3__namespace.UpperCasePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5113,7 +5231,7 @@
                       templateUrl: './file-upload.component.html',
                       styleUrls: ['./file-upload.component.scss'],
                   }]
-          }], ctorParameters: function () { return [{ type: i1__namespace$6.FileService }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$6.FileService }]; } });
 
   var MtnaWfFileUploadModule = /** @class */ (function () {
       function MtnaWfFileUploadModule() {
@@ -5121,35 +5239,35 @@
       return MtnaWfFileUploadModule;
   }());
   MtnaWfFileUploadModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadModule, declarations: [MtnaWfFileUploadComponent], imports: [i4.CommonModule,
+  MtnaWfFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadModule, declarations: [MtnaWfFileUploadComponent], imports: [i3$1.CommonModule,
           i1$1.MtnaHighlightModule,
-          i3$1.MatButtonModule,
+          i3$2.MatButtonModule,
           i5.MatIconModule,
           i1$8.MtnaFileDownloadModule,
           i1$8.MtnaFileUploadModule,
-          i4$2.MatListModule,
+          i4$1.MatListModule,
           i5$2.MatProgressSpinnerModule], exports: [MtnaWfFileUploadComponent] });
   MtnaWfFileUploadModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               i1$1.MtnaHighlightModule,
-              i3$1.MatButtonModule,
+              i3$2.MatButtonModule,
               i5.MatIconModule,
               i1$8.MtnaFileDownloadModule,
               i1$8.MtnaFileUploadModule,
-              i4$2.MatListModule,
+              i4$1.MatListModule,
               i5$2.MatProgressSpinnerModule,
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadModule, decorators: [{
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i1$1.MtnaHighlightModule,
-                          i3$1.MatButtonModule,
+                          i3$2.MatButtonModule,
                           i5.MatIconModule,
                           i1$8.MtnaFileDownloadModule,
                           i1$8.MtnaFileUploadModule,
-                          i4$2.MatListModule,
+                          i4$1.MatListModule,
                           i5$2.MatProgressSpinnerModule,
                       ],
                       declarations: [MtnaWfFileUploadComponent],
@@ -5192,7 +5310,7 @@
       return MtnaWfFormGroupComponent;
   }(MtnaWfBaseGroupItem));
   MtnaWfFormGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormGroupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormGroupComponent, selector: "mtna-wf-group", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"item && control\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control.disabled\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n  <ng-template #fullLayout>\n    <div\n      class=\"item-group-container\"\n      [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\"\n      [formGroup]=\"control\"\n      [ngClass]=\"item.layout\"\n    >\n      <mtna-wf-item\n        *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\"\n        [class.row-item]=\"item.layout === 'ROW' && !fullWidth[subItem.itemId]\"\n        [ngClass.lt-md]=\"'width-100'\"\n        [item]=\"subItem\"\n        [control]=\"control.controls[subItem.instanceId]\"\n        [parentIds]=\"parentIds\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </div>\n  </ng-template>\n\n  <!-- When readonly, && all child items should be displayed in a mat-list-->\n  <mat-list *ngIf=\"readonly && inList; else fullLayout\" [ngClass]=\"item.layout\">\n    <mtna-wf-item\n      *ngFor=\"let subItem of item.items | mtnaWfItemsWithValue; trackby: _trackByInstanceId\"\n      [class.row-item]=\"item.layout === 'ROW'\"\n      [ngClass.lt-md]=\"'width-100'\"\n      [item]=\"subItem\"\n      [inList]=\"true\"\n      [parentIds]=\"parentIds\"\n      [readonly]=\"true\"\n    ></mtna-wf-item>\n  </mat-list>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-group .item-group-container{padding-top:24px}mtna-wf-group .mtna-wf-group-header{margin-top:1rem}mtna-wf-group .mtna-wf-group-description{margin-bottom:1rem}mtna-wf-group mat-list mat-list-item [mat-line]{letter-spacing:.5px}mtna-wf-group mtna-wf-multiple-choice-item{display:block}mtna-wf-group .item-group-container>.mtna-wf-group{margin-top:1rem}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item){padding-left:16px}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item).width-100{width:calc(100% - 16px)}mtna-wf-group .item-group-container>mtna-wf-item:first-of-type{margin-top:0}mtna-wf-group .item-group-container.ROW>mtna-wf-item{margin-top:0}mtna-wf-group .item-group-container.ROW>*{display:block}mtna-wf-group .item-group-container .row-item{width:calc(50% - 16px);display:inline-block;margin:0 8px}mtna-wf-group .item-group-container .width-100{width:100%}mtna-wf-group .item-group-container .width-100.row-item{width:calc(100% - 16px)}mtna-wf-group mtna-wf-item-header+.item-group-container{padding:.35em .75em .625em}mtna-wf-group mtna-wf-item-header+.item-group-container>mtna-wf-item{margin-top:0}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfItemsWithValue": MtnaWfItemsWithValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfFormGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormGroupComponent, selector: "mtna-wf-group", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"item && control\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control.disabled\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n  <ng-template #fullLayout>\n    <div\n      class=\"item-group-container\"\n      [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\"\n      [formGroup]=\"control\"\n      [ngClass]=\"item.layout\"\n    >\n      <mtna-wf-item\n        *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\"\n        [class.row-item]=\"item.layout === 'ROW' && !fullWidth[subItem.itemId]\"\n        [ngClass.lt-md]=\"'width-100'\"\n        [item]=\"subItem\"\n        [control]=\"control.controls[subItem.instanceId]\"\n        [parentIds]=\"parentIds\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </div>\n  </ng-template>\n\n  <!-- When readonly, && all child items should be displayed in a mat-list-->\n  <mat-list *ngIf=\"readonly && inList; else fullLayout\" [ngClass]=\"item.layout\">\n    <mtna-wf-item\n      *ngFor=\"let subItem of item.items | mtnaWfItemsWithValue; trackby: _trackByInstanceId\"\n      [class.row-item]=\"item.layout === 'ROW'\"\n      [ngClass.lt-md]=\"'width-100'\"\n      [item]=\"subItem\"\n      [inList]=\"true\"\n      [parentIds]=\"parentIds\"\n      [readonly]=\"true\"\n    ></mtna-wf-item>\n  </mat-list>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-group .item-group-container{padding-top:24px}mtna-wf-group .mtna-wf-group-header{margin-top:1rem}mtna-wf-group .mtna-wf-group-description{margin-bottom:1rem}mtna-wf-group mat-list mat-list-item [mat-line]{letter-spacing:.5px}mtna-wf-group mtna-wf-multiple-choice-item{display:block}mtna-wf-group .item-group-container>.mtna-wf-group{margin-top:1rem}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item){padding-left:16px}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item).width-100{width:calc(100% - 16px)}mtna-wf-group .item-group-container>mtna-wf-item:first-of-type{margin-top:0}mtna-wf-group .item-group-container.ROW>mtna-wf-item{margin-top:0}mtna-wf-group .item-group-container.ROW>*{display:block}mtna-wf-group .item-group-container .row-item{width:calc(50% - 16px);display:inline-block;margin:0 8px}mtna-wf-group .item-group-container .width-100{width:100%}mtna-wf-group .item-group-container .width-100.row-item{width:calc(100% - 16px)}mtna-wf-group mtna-wf-item-header+.item-group-container{padding:.35em .75em .625em}mtna-wf-group mtna-wf-item-header+.item-group-container>mtna-wf-item{margin-top:0}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfItemsWithValue": MtnaWfItemsWithValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormGroupComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5210,7 +5328,7 @@
       return MtnaWfFormGroupModule;
   }());
   MtnaWfFormGroupModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormGroupModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfFormGroupModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormGroupModule, declarations: [MtnaWfFormGroupComponent], imports: [i4.CommonModule,
+  MtnaWfFormGroupModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormGroupModule, declarations: [MtnaWfFormGroupComponent], imports: [i3$1.CommonModule,
           MtnaWfItemHeaderModule,
           i1$1.MtnaHighlightModule,
           MtnaWfFormItemModule,
@@ -5219,7 +5337,7 @@
           flexLayout.FlexLayoutModule,
           MtnaWfItemsWithValuePipeModule], exports: [MtnaWfFormGroupComponent] });
   MtnaWfFormGroupModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormGroupModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               MtnaWfItemHeaderModule,
               i1$1.MtnaHighlightModule,
               MtnaWfFormItemModule,
@@ -5232,7 +5350,7 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           MtnaWfItemHeaderModule,
                           i1$1.MtnaHighlightModule,
                           MtnaWfFormItemModule,
@@ -5254,7 +5372,7 @@
       return MtnaWfFormSectionComponent;
   }(MtnaWfBaseSectionItem));
   MtnaWfFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormSectionComponent, selector: "mtna-wf-section", usesInheritance: true, ngImport: i0__namespace, template: "<mtna-wf-step-card [step]=\"step\" [subtitle]=\"item.descriptiveText\" (focused)=\"focused.emit($event)\">\n  <div cardContent>\n    <ng-container *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\">\n      <mat-divider\n        *ngIf=\"(subItem.itemId | mtnaWfGetObjectType) === 'formitemgroupimpl' && item.items.indexOf(subItem) !== 0\"\n        class=\"section-item-divider\"\n        [inset]=\"true\"\n      ></mat-divider>\n\n      <mtna-wf-item\n        [item]=\"subItem\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n        [control]=\"!!control && !!control.controls ? control.controls[subItem.instanceId] : undefined\"\n        (focusedSection)=\"focused.emit($event)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </div>\n</mtna-wf-step-card>\n", styles: [":host{display:block}mat-divider.mat-divider-horizontal.mat-divider-inset.section-item-divider{margin-top:8px;margin-bottom:8px}\n"], components: [{ type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: ["color", "step", "subtitle"], outputs: ["focused"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfGetObjectType": MtnaWfGetObjectTypePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  MtnaWfFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormSectionComponent, selector: "mtna-wf-section", usesInheritance: true, ngImport: i0__namespace, template: "<mtna-wf-step-card\n  [step]=\"step\"\n  [subtitle]=\"item.descriptiveText\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n  (focused)=\"focused.emit($event)\"\n>\n  <div cardContent>\n    <ng-container *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\">\n      <mat-divider\n        *ngIf=\"(subItem.itemId | mtnaWfGetObjectType) === 'formitemgroupimpl' && item.items.indexOf(subItem) !== 0\"\n        class=\"section-item-divider\"\n        [inset]=\"true\"\n      ></mat-divider>\n\n      <mtna-wf-item\n        [item]=\"subItem\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n        [control]=\"!!control && !!control.controls ? control.controls[subItem.instanceId] : undefined\"\n        (focusedSection)=\"focused.emit($event)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </div>\n</mtna-wf-step-card>\n", styles: [":host{display:block}mat-divider.mat-divider-horizontal.mat-divider-inset.section-item-divider{margin-top:8px;margin-bottom:8px}mtna-wf-section mtna-wf-title-item .mtna-wf-title-item{font-size:.875rem;line-height:28px;font-weight:500}\n"], components: [{ type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: ["color", "step", "subtitle"], outputs: ["focused"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfGetObjectType": MtnaWfGetObjectTypePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5271,12 +5389,12 @@
       return MtnaWfFormSectionModule;
   }());
   MtnaWfFormSectionModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfFormSectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionModule, declarations: [MtnaWfFormSectionComponent], imports: [i4.CommonModule, MtnaWfStepCardModule, i2$2.MatDividerModule, MtnaWfFormItemModule, MtnaWfGetObjectTypePipeModule], exports: [MtnaWfFormSectionComponent] });
-  MtnaWfFormSectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionModule, imports: [[i4.CommonModule, MtnaWfStepCardModule, i2$2.MatDividerModule, MtnaWfFormItemModule, MtnaWfGetObjectTypePipeModule]] });
+  MtnaWfFormSectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionModule, declarations: [MtnaWfFormSectionComponent], imports: [i3$1.CommonModule, MtnaWfStepCardModule, i2$2.MatDividerModule, MtnaWfFormItemModule, MtnaWfGetObjectTypePipeModule, i1$1.MtnaHighlightModule], exports: [MtnaWfFormSectionComponent] });
+  MtnaWfFormSectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionModule, imports: [[i3$1.CommonModule, MtnaWfStepCardModule, i2$2.MatDividerModule, MtnaWfFormItemModule, MtnaWfGetObjectTypePipeModule, i1$1.MtnaHighlightModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, MtnaWfStepCardModule, i2$2.MatDividerModule, MtnaWfFormItemModule, MtnaWfGetObjectTypePipeModule],
+                      imports: [i3$1.CommonModule, MtnaWfStepCardModule, i2$2.MatDividerModule, MtnaWfFormItemModule, MtnaWfGetObjectTypePipeModule, i1$1.MtnaHighlightModule],
                       declarations: [MtnaWfFormSectionComponent],
                       exports: [MtnaWfFormSectionComponent],
                   }]
@@ -5284,20 +5402,24 @@
 
   var MtnaWfI18nInputComponent = /** @class */ (function (_super) {
       __extends(MtnaWfI18nInputComponent, _super);
-      function MtnaWfI18nInputComponent(elementRef) {
-          var _this = _super.call(this) || this;
-          _this.elementRef = elementRef;
-          _this.isParagraph = _this._hasHostAttributes('mtnaWfI18nParagraphItem');
+      function MtnaWfI18nInputComponent() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.isParagraph = false;
           return _this;
       }
-      MtnaWfI18nInputComponent.prototype._hasHostAttributes = function () {
-          var _this = this;
-          var attributes = [];
-          for (var _i = 0; _i < arguments.length; _i++) {
-              attributes[_i] = arguments[_i];
-          }
-          return attributes.some(function (attr) { return _this.elementRef.nativeElement.hasAttribute(attr); });
-      };
+      Object.defineProperty(MtnaWfI18nInputComponent.prototype, "item", {
+          get: function () {
+              return _super.prototype.item;
+          },
+          set: function (value) {
+              _super.prototype.item = value;
+              if (webFormTs.isInternationalizedParagraphAnswerItem(value)) {
+                  this.isParagraph = true;
+              }
+          },
+          enumerable: false,
+          configurable: true
+      });
       MtnaWfI18nInputComponent.prototype.getFormControl = function (language) {
           var _a, _b;
           var control = (_a = this.control) === null || _a === void 0 ? void 0 : _a.controls[language];
@@ -5313,18 +5435,18 @@
       };
       return MtnaWfI18nInputComponent;
   }(MtnaWfBaseValueItem));
-  MtnaWfI18nInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfI18nInputComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfI18nInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfI18nInputComponent, selector: "mtna-wf-i18n-input-item[mtnaWfI18nParagraphItem],\n             mtna-wf-i18n-input-item[mtnaWfI18nShortAnswerItem],", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<ng-container *ngIf=\"!readonly && !!control; else readOnly\">\n  <mat-form-field\n    *ngFor=\"let language of item.languageTags\"\n    appearance=\"outline\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n  >\n    <mat-label>{{ item.label + ' - ' + getLanguageDisplay(language) }}</mat-label>\n    <ng-container *ngIf=\"isParagraph; else shortInput\">\n      <textarea\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [required]=\"item.required\"\n        [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        cdkTextareaAutoSize\n        cdkAutosizeMinRows=\"3\"\n        cdkAutosizeMaxRows=\"5\"\n      ></textarea>\n    </ng-container>\n    <ng-template #shortInput>\n      <input\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        [required]=\"item.required\"\n      />\n    </ng-template>\n\n    <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</ng-container>\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item *ngFor=\"let language of item.languageTags\" class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || 'No Information Provided - ' + language }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-i18n-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-i18n-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-i18n-input-item .mat-list-base .mat-list-item,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i5__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3__namespace$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i4__namespace.SlicePipe, "keyvalue": i4__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfI18nInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfI18nInputComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfI18nInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfI18nInputComponent, selector: "mtna-wf-i18n-input-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<ng-container *ngIf=\"!readonly && !!control; else readOnly\">\n  <mat-form-field\n    *ngFor=\"let language of item.languageTags\"\n    appearance=\"outline\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n  >\n    <mat-label>{{ item.label + ' - ' + getLanguageDisplay(language) }}</mat-label>\n    <ng-container *ngIf=\"isParagraph; else shortInput\">\n      <textarea\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [required]=\"item.required\"\n        [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        cdkTextareaAutoSize\n        cdkAutosizeMinRows=\"3\"\n        cdkAutosizeMaxRows=\"5\"\n      ></textarea>\n    </ng-container>\n    <ng-template #shortInput>\n      <input\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        [required]=\"item.required\"\n      />\n    </ng-template>\n\n    <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</ng-container>\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item *ngFor=\"let language of item.languageTags\" class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || 'No Information Provided - ' + language }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-i18n-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-i18n-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-i18n-input-item .mat-list-base .mat-list-item,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4__namespace$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4__namespace$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i5__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3__namespace$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i3__namespace.SlicePipe, "keyvalue": i3__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfI18nInputComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: "mtna-wf-i18n-input-item[mtnaWfI18nParagraphItem],\n             mtna-wf-i18n-input-item[mtnaWfI18nShortAnswerItem],",
+                      selector: 'mtna-wf-i18n-input-item',
                       templateUrl: './i18n-input.component.html',
                       styleUrls: ['./i18n-input.component.scss'],
                       encapsulation: i0.ViewEncapsulation.None,
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+          }] });
 
   var MtnaWfI18nInputModule = /** @class */ (function () {
       function MtnaWfI18nInputModule() {
@@ -5332,23 +5454,23 @@
       return MtnaWfI18nInputModule;
   }());
   MtnaWfI18nInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfI18nInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfI18nInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfI18nInputModule, declarations: [MtnaWfI18nInputComponent], imports: [i4.CommonModule,
+  MtnaWfI18nInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfI18nInputModule, declarations: [MtnaWfI18nInputComponent], imports: [i3$1.CommonModule,
           i6.FormsModule,
           i1$7.MatFormFieldModule,
           i5$1.MatInputModule,
           i1$1.MtnaHighlightModule,
           MtnaWfGetAutoCompletePipeModule,
-          i4$2.MatListModule,
+          i4$1.MatListModule,
           i6.ReactiveFormsModule,
           MtnaWfGetFormControlErrorPipeModule], exports: [MtnaWfI18nInputComponent] });
   MtnaWfI18nInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfI18nInputModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               i6.FormsModule,
               i1$7.MatFormFieldModule,
               i5$1.MatInputModule,
               i1$1.MtnaHighlightModule,
               MtnaWfGetAutoCompletePipeModule,
-              i4$2.MatListModule,
+              i4$1.MatListModule,
               i6.ReactiveFormsModule,
               MtnaWfGetFormControlErrorPipeModule,
           ]] });
@@ -5356,13 +5478,13 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i6.FormsModule,
                           i1$7.MatFormFieldModule,
                           i5$1.MatInputModule,
                           i1$1.MtnaHighlightModule,
                           MtnaWfGetAutoCompletePipeModule,
-                          i4$2.MatListModule,
+                          i4$1.MatListModule,
                           i6.ReactiveFormsModule,
                           MtnaWfGetFormControlErrorPipeModule,
                       ],
@@ -5373,35 +5495,42 @@
 
   var MtnaWfInputComponent = /** @class */ (function (_super) {
       __extends(MtnaWfInputComponent, _super);
-      function MtnaWfInputComponent(elementRef) {
-          var _this = _super.call(this) || this;
-          _this.elementRef = elementRef;
-          _this.isParagraph = _this._hasHostAttributes('mtnaWfParagraphItem');
-          _this.isNumberInput = _this._hasHostAttributes('mtnaWfDecimalItem', 'mtnaWfWholeNumberItem');
+      function MtnaWfInputComponent() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.isParagraph = false;
+          _this.isNumberInput = false;
           return _this;
       }
-      MtnaWfInputComponent.prototype._hasHostAttributes = function () {
-          var _this = this;
-          var attributes = [];
-          for (var _i = 0; _i < arguments.length; _i++) {
-              attributes[_i] = arguments[_i];
-          }
-          return attributes.some(function (attr) { return _this.elementRef.nativeElement.hasAttribute(attr); });
-      };
+      Object.defineProperty(MtnaWfInputComponent.prototype, "item", {
+          get: function () {
+              return _super.prototype.item;
+          },
+          set: function (value) {
+              _super.prototype.item = value;
+              if (webFormTs.isDecimalAnswerItem(value) || webFormTs.isWholeNumberItem(value)) {
+                  this.isNumberInput = true;
+              }
+              else if (webFormTs.isParagraphAnswerItem(value)) {
+                  this.isParagraph = true;
+              }
+          },
+          enumerable: false,
+          configurable: true
+      });
       return MtnaWfInputComponent;
   }(MtnaWfBaseValueItem));
-  MtnaWfInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfInputComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfInputComponent, selector: "mtna-wf-input-item[mtnaWfDecimalItem],\n             mtna-wf-input-item[mtnaWfParagraphItem],\n             mtna-wf-input-item[mtnaWfShortAnswerItem],\n             mtna-wf-input-item[mtnaWfWholeNumberItem],", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <textarea\n    *ngIf=\"isParagraph; else shortInput\"\n    matInput\n    [formControl]=\"control\"\n    [required]=\"item.required\"\n    [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n    cdkTextareaAutoSize\n    cdkAutosizeMinRows=\"3\"\n    cdkAutosizeMaxRows=\"5\"\n  ></textarea>\n\n  <ng-template #shortInput>\n    <input matInput [formControl]=\"control!\" [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\" [required]=\"item.required\" />\n  </ng-template>\n\n  <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || 'No Information Provided' }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-input-item .mat-list-base .mat-list-item,mtna-wf-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4__namespace$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4__namespace$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i5__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3__namespace$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i4__namespace.SlicePipe, "keyvalue": i4__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfInputComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfInputComponent, selector: "mtna-wf-input-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <textarea\n    *ngIf=\"isParagraph; else shortInput\"\n    matInput\n    [formControl]=\"control\"\n    [required]=\"item.required\"\n    [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n    cdkTextareaAutoSize\n    cdkAutosizeMinRows=\"3\"\n    cdkAutosizeMaxRows=\"5\"\n  ></textarea>\n\n  <ng-template #shortInput>\n    <input matInput [formControl]=\"control!\" [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\" [required]=\"item.required\" />\n  </ng-template>\n\n  <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || 'No Information Provided' }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-input-item .mat-list-base .mat-list-item,mtna-wf-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4__namespace$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4__namespace$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$5.MatLabel, selector: "mat-label" }, { type: i5__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3__namespace$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i3__namespace.SlicePipe, "keyvalue": i3__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfInputComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: "mtna-wf-input-item[mtnaWfDecimalItem],\n             mtna-wf-input-item[mtnaWfParagraphItem],\n             mtna-wf-input-item[mtnaWfShortAnswerItem],\n             mtna-wf-input-item[mtnaWfWholeNumberItem],",
+                      selector: 'mtna-wf-input-item',
                       templateUrl: './input.component.html',
                       styleUrls: ['./input.component.scss'],
                       encapsulation: i0.ViewEncapsulation.None,
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; } });
+          }] });
 
   var MtnaWfInputModule = /** @class */ (function () {
       function MtnaWfInputModule() {
@@ -5409,20 +5538,20 @@
       return MtnaWfInputModule;
   }());
   MtnaWfInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfInputModule, declarations: [MtnaWfInputComponent], imports: [i4.CommonModule,
+  MtnaWfInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfInputModule, declarations: [MtnaWfInputComponent], imports: [i3$1.CommonModule,
           i1$7.MatFormFieldModule,
           i6.FormsModule,
-          i4$2.MatListModule,
+          i4$1.MatListModule,
           MtnaWfGetAutoCompletePipeModule,
           MtnaWfGetFormControlErrorPipeModule,
           i1$1.MtnaHighlightModule,
           i6.ReactiveFormsModule,
           i5$1.MatInputModule], exports: [MtnaWfInputComponent] });
   MtnaWfInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfInputModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               i1$7.MatFormFieldModule,
               i6.FormsModule,
-              i4$2.MatListModule,
+              i4$1.MatListModule,
               MtnaWfGetAutoCompletePipeModule,
               MtnaWfGetFormControlErrorPipeModule,
               i1$1.MtnaHighlightModule,
@@ -5433,10 +5562,10 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i1$7.MatFormFieldModule,
                           i6.FormsModule,
-                          i4$2.MatListModule,
+                          i4$1.MatListModule,
                           MtnaWfGetAutoCompletePipeModule,
                           MtnaWfGetFormControlErrorPipeModule,
                           i1$1.MtnaHighlightModule,
@@ -5456,7 +5585,7 @@
       return MtnaWfMultipleChoiceComponent;
   }(MtnaWfBaseSingleSelectionParentValueItem));
   MtnaWfMultipleChoiceComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfMultipleChoiceComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfMultipleChoiceComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfMultipleChoiceComponent, selector: "mtna-wf-multiple-choice-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ng-container *ngIf=\"control\">\n  <div class=\"mtna-wf-error-container\">\n    <ng-container *ngIf=\"control.invalid && (control.dirty || control.touched)\">\n      <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n        {{ error | mtnaWfGetControlError : item }}\n      </mat-error>\n    </ng-container>\n  </div>\n  <mat-radio-group class=\"control-item-content\" [formControl]=\"control\" (change)=\"selectionChange($event)\">\n    <ng-container *ngFor=\"let opt of item.options; trackBy: _trackByOptionId\">\n      <mat-radio-button [disableRipple]=\"readonly\" [value]=\"opt.option.id\">{{ opt.option.name }}</mat-radio-button>\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && !!controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mat-radio-group>\n</ng-container>\n", styles: ["mtna-wf-multiple-choice-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-multiple-choice-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-multiple-choice-item .mat-radio-group{display:inline-block;max-width:100%;width:100%}mtna-wf-multiple-choice-item .mat-radio-button{display:block;max-width:100%}mtna-wf-multiple-choice-item .mat-radio-button:not(:last-of-type){margin-bottom:4px}mtna-wf-multiple-choice-item .mat-radio-button .mat-radio-label{white-space:normal}mtna-wf-multiple-choice-item .mat-radio-button+mtna-wf-item{padding-left:28px;margin-top:0}mtna-wf-multiple-choice-item.read-only .mat-radio-button .mat-radio-label{cursor:default}\n"], components: [{ type: i1__namespace$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "keyvalue": i4__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfMultipleChoiceComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfMultipleChoiceComponent, selector: "mtna-wf-multiple-choice-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div *ngIf=\"control\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">\n  <div class=\"mtna-wf-error-container\">\n    <ng-container *ngIf=\"control.invalid && (control.dirty || control.touched)\">\n      <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n        {{ error | mtnaWfGetControlError : item }}\n      </mat-error>\n    </ng-container>\n  </div>\n  <mat-radio-group class=\"control-item-content\" [formControl]=\"control\" (change)=\"selectionChange($event)\">\n    <ng-container *ngFor=\"let opt of item.options; trackBy: _trackByOptionId\">\n      <mat-radio-button [disableRipple]=\"readonly\" [value]=\"opt.option.id\">{{ opt.option.name }}</mat-radio-button>\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && !!controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mat-radio-group>\n</div>\n", styles: ["mtna-wf-multiple-choice-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-multiple-choice-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-multiple-choice-item .mat-radio-group{display:inline-block;max-width:100%;width:100%}mtna-wf-multiple-choice-item .mat-radio-button{display:block;max-width:100%}mtna-wf-multiple-choice-item .mat-radio-button:not(:last-of-type){margin-bottom:4px}mtna-wf-multiple-choice-item .mat-radio-button .mat-radio-label{white-space:normal}mtna-wf-multiple-choice-item .mat-radio-button+mtna-wf-item{padding-left:28px;margin-top:0}mtna-wf-multiple-choice-item.read-only .mat-radio-button .mat-radio-label{cursor:default}\n"], components: [{ type: i1__namespace$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "keyvalue": i3__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfMultipleChoiceComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5474,33 +5603,36 @@
       return MtnaWfMultipleChoiceModule;
   }());
   MtnaWfMultipleChoiceModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfMultipleChoiceModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfMultipleChoiceModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfMultipleChoiceModule, declarations: [MtnaWfMultipleChoiceComponent], imports: [i4.CommonModule,
+  MtnaWfMultipleChoiceModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfMultipleChoiceModule, declarations: [MtnaWfMultipleChoiceComponent], imports: [i3$1.CommonModule,
           i6.FormsModule,
           i1$2.MatRadioModule,
           MtnaWfFormItemModule,
           MtnaWfGetFormControlErrorPipeModule,
           i6.ReactiveFormsModule,
-          i1$7.MatFormFieldModule], exports: [MtnaWfMultipleChoiceComponent] });
+          i1$7.MatFormFieldModule,
+          i1$1.MtnaHighlightModule], exports: [MtnaWfMultipleChoiceComponent] });
   MtnaWfMultipleChoiceModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfMultipleChoiceModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               i6.FormsModule,
               i1$2.MatRadioModule,
               MtnaWfFormItemModule,
               MtnaWfGetFormControlErrorPipeModule,
               i6.ReactiveFormsModule,
               i1$7.MatFormFieldModule,
+              i1$1.MtnaHighlightModule,
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfMultipleChoiceModule, decorators: [{
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i6.FormsModule,
                           i1$2.MatRadioModule,
                           MtnaWfFormItemModule,
                           MtnaWfGetFormControlErrorPipeModule,
                           i6.ReactiveFormsModule,
                           i1$7.MatFormFieldModule,
+                          i1$1.MtnaHighlightModule,
                       ],
                       declarations: [MtnaWfMultipleChoiceComponent],
                       exports: [MtnaWfMultipleChoiceComponent],
@@ -5515,7 +5647,7 @@
       return MtnaWfOrderedListItemComponent;
   }(MtnaWfBaseFormItem));
   MtnaWfOrderedListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfOrderedListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfOrderedListItemComponent, selector: "mtna-wf-ordered-list-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ol [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ol>\n", styles: ["mtna-wf-ordered-list-item>ol{list-style:decimal outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-value-item mtna-wf-ordered-list-item>ol{padding-right:24px}\n"], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfOrderedListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfOrderedListItemComponent, selector: "mtna-wf-ordered-list-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ol [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ol>\n", styles: ["mtna-wf-ordered-list-item>ol{list-style:decimal outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-ordered-list-item>ol{padding-right:24px}\n"], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5533,12 +5665,12 @@
       return MtnaWfOrderedListItemModule;
   }());
   MtnaWfOrderedListItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfOrderedListItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemModule, declarations: [MtnaWfOrderedListItemComponent], imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfOrderedListItemComponent] });
-  MtnaWfOrderedListItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemModule, imports: [[i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule]] });
+  MtnaWfOrderedListItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemModule, declarations: [MtnaWfOrderedListItemComponent], imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfOrderedListItemComponent] });
+  MtnaWfOrderedListItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemModule, imports: [[i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfOrderedListItemModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
+                      imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
                       declarations: [MtnaWfOrderedListItemComponent],
                       exports: [MtnaWfOrderedListItemComponent],
                   }]
@@ -5570,12 +5702,12 @@
       return MtnaWfRepeatableItemModule;
   }());
   MtnaWfRepeatableItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfRepeatableItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemModule, declarations: [MtnaWfRepeatableItemComponent], imports: [i4.CommonModule], exports: [MtnaWfRepeatableItemComponent] });
-  MtnaWfRepeatableItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemModule, imports: [[i4.CommonModule]] });
+  MtnaWfRepeatableItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemModule, declarations: [MtnaWfRepeatableItemComponent], imports: [i3$1.CommonModule], exports: [MtnaWfRepeatableItemComponent] });
+  MtnaWfRepeatableItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemModule, imports: [[i3$1.CommonModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule],
+                      imports: [i3$1.CommonModule],
                       declarations: [MtnaWfRepeatableItemComponent],
                       exports: [MtnaWfRepeatableItemComponent],
                   }]
@@ -5583,8 +5715,8 @@
 
   var MtnaWfRepeatableItemContainerComponent = /** @class */ (function (_super) {
       __extends(MtnaWfRepeatableItemContainerComponent, _super);
-      function MtnaWfRepeatableItemContainerComponent(manager) {
-          var _this = _super.call(this) || this;
+      function MtnaWfRepeatableItemContainerComponent(cdr, manager) {
+          var _this = _super.call(this, cdr) || this;
           _this.manager = manager;
           return _this;
       }
@@ -5597,8 +5729,8 @@
       };
       return MtnaWfRepeatableItemContainerComponent;
   }(MtnaWfBaseParentValueItem));
-  MtnaWfRepeatableItemContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerComponent, deps: [{ token: MtnaWfManagerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfRepeatableItemContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfRepeatableItemContainerComponent, selector: "mtna-wf-repeatable-item-container", usesInheritance: true, ngImport: i0__namespace, template: "<mtna-wf-item-header\n  *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n  [descriptiveText]=\"item.descriptiveText\"\n  [disabled]=\"control?.disabled || false\"\n  [questionText]=\"item.questionText\"\n  [required]=\"item.required\"\n></mtna-wf-item-header>\n<section [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <mtna-wf-repeatable-item\n    @repeatItemExpandCollapse\n    *ngFor=\"let subitem of item.items; let first = first; trackBy: 'instanceId' | mtnaTrackByProperty\"\n  >\n    <button\n      *ngIf=\"!readonly && item.items.length > item.minOccurrences\"\n      mat-icon-button\n      class=\"item-remove-button\"\n      color=\"warn\"\n      (click)=\"removeItem(subitem)\"\n      matTooltip=\"Remove Item\"\n    >\n      <mat-icon>remove_circle</mat-icon>\n    </button>\n    <mtna-wf-item\n      [item]=\"subitem\"\n      [control]=\"!!control && !!control.controls ? control.controls[subitem.instanceId] : undefined\"\n      [readonly]=\"readonly\"\n      [parentIds]=\"parentIds\"\n    ></mtna-wf-item>\n  </mtna-wf-repeatable-item>\n</section>\n<button *ngIf=\"!readonly\" mat-raised-button (click)=\"addItem()\" class=\"new-item-button\" color=\"primary\">\n  {{ item.additionalText || 'ADD' | uppercase }}\n</button>\n", styles: ["mtna-wf-repeatable-item-container{display:block}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item{position:relative;padding:16px;border-style:dashed;border-width:4px;border-radius:4px;display:inline-block;margin:8px;max-width:100%}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item .item-remove-button{position:absolute;top:-22px;left:-22px}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item>mtna-wf-item:first-child{margin-top:0}mtna-wf-repeatable-item-container .new-item-button{margin-left:.75em}mtna-wf-repeatable-item-container>section{padding-left:.75em}mtna-wf-repeatable-item-container>section,mtna-wf-repeatable-item-container .new-item-button{margin-top:16px}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfRepeatableItemComponent, selector: "mtna-wf-repeatable-item" }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "mtnaTrackByProperty": i1__namespace$1.MtnaTrackByPropertyPipe, "uppercase": i4__namespace.UpperCasePipe }, animations: [
+  MtnaWfRepeatableItemContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: MtnaWfManagerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfRepeatableItemContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfRepeatableItemContainerComponent, selector: "mtna-wf-repeatable-item-container", usesInheritance: true, ngImport: i0__namespace, template: "<mtna-wf-item-header\n  *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n  [descriptiveText]=\"item.descriptiveText\"\n  [disabled]=\"control?.disabled || false\"\n  [questionText]=\"item.questionText\"\n  [required]=\"item.required\"\n></mtna-wf-item-header>\n<section [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <mtna-wf-repeatable-item\n    @repeatItemExpandCollapse\n    *ngFor=\"let subitem of item.items; let first = first; trackBy: 'instanceId' | mtnaTrackByProperty\"\n  >\n    <ng-container *ngIf=\"subitem | coerceFormItem as coercedSubItem\">\n      <button\n        *ngIf=\"!readonly && item.items.length > item.minOccurrences\"\n        mat-icon-button\n        class=\"item-remove-button\"\n        color=\"warn\"\n        (click)=\"removeItem(coercedSubItem)\"\n        matTooltip=\"Remove Item\"\n      >\n        <mat-icon>remove_circle</mat-icon>\n      </button>\n      <mtna-wf-item\n        [item]=\"coercedSubItem\"\n        [control]=\"!!control && !!control.controls ? control.controls[coercedSubItem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mtna-wf-repeatable-item>\n</section>\n<button *ngIf=\"!readonly\" mat-raised-button (click)=\"addItem()\" class=\"new-item-button\" color=\"primary\">\n  {{ item.additionalText || 'ADD' | uppercase }}\n</button>\n", styles: ["mtna-wf-repeatable-item-container{display:block}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item{position:relative;padding:16px;border-style:dashed;border-width:4px;border-radius:4px;display:inline-block;margin:8px;max-width:100%}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item .item-remove-button{position:absolute;top:-22px;left:-22px}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item>mtna-wf-item:first-child{margin-top:0}mtna-wf-repeatable-item-container .new-item-button{margin-left:.75em}mtna-wf-repeatable-item-container>section{padding-left:.75em}mtna-wf-repeatable-item-container>section,mtna-wf-repeatable-item-container .new-item-button{margin-top:16px}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfRepeatableItemComponent, selector: "mtna-wf-repeatable-item" }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "mtnaTrackByProperty": i1__namespace$1.MtnaTrackByPropertyPipe, "coerceFormItem": MtnaWfCoerceFormItemPipe, "uppercase": i3__namespace.UpperCasePipe }, animations: [
           animations.trigger('repeatItemExpandCollapse', [
               animations.state('in', animations.style({ height: '*', margin: '*', opacity: 1 })),
               animations.state('void', animations.style({ height: 0, margin: 0, opacity: 0, visibility: 'hidden' })),
@@ -5623,7 +5755,7 @@
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                       encapsulation: i0.ViewEncapsulation.None,
                   }]
-          }], ctorParameters: function () { return [{ type: MtnaWfManagerService }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: MtnaWfManagerService }]; } });
 
   var MtnaWfRepeatableItemContainerModule = /** @class */ (function () {
       function MtnaWfRepeatableItemContainerModule() {
@@ -5631,39 +5763,42 @@
       return MtnaWfRepeatableItemContainerModule;
   }());
   MtnaWfRepeatableItemContainerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfRepeatableItemContainerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerModule, declarations: [MtnaWfRepeatableItemContainerComponent], imports: [i4.CommonModule,
+  MtnaWfRepeatableItemContainerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerModule, declarations: [MtnaWfRepeatableItemContainerComponent], imports: [i3$1.CommonModule,
           MtnaWfItemHeaderModule,
           MtnaWfRepeatableItemModule,
           MtnaWfFormItemModule,
           i1$1.MtnaHighlightModule,
-          i3$1.MatButtonModule,
+          i3$2.MatButtonModule,
           i5.MatIconModule,
           i6$1.MatTooltipModule,
-          i1$1.MtnaTrackByPropertyPipeModule], exports: [MtnaWfRepeatableItemContainerComponent] });
+          i1$1.MtnaTrackByPropertyPipeModule,
+          MtnaWfCoerceFormItemPipeModule], exports: [MtnaWfRepeatableItemContainerComponent] });
   MtnaWfRepeatableItemContainerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               MtnaWfItemHeaderModule,
               MtnaWfRepeatableItemModule,
               MtnaWfFormItemModule,
               i1$1.MtnaHighlightModule,
-              i3$1.MatButtonModule,
+              i3$2.MatButtonModule,
               i5.MatIconModule,
               i6$1.MatTooltipModule,
               i1$1.MtnaTrackByPropertyPipeModule,
+              MtnaWfCoerceFormItemPipeModule,
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerModule, decorators: [{
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           MtnaWfItemHeaderModule,
                           MtnaWfRepeatableItemModule,
                           MtnaWfFormItemModule,
                           i1$1.MtnaHighlightModule,
-                          i3$1.MatButtonModule,
+                          i3$2.MatButtonModule,
                           i5.MatIconModule,
                           i6$1.MatTooltipModule,
                           i1$1.MtnaTrackByPropertyPipeModule,
+                          MtnaWfCoerceFormItemPipeModule,
                       ],
                       declarations: [MtnaWfRepeatableItemContainerComponent],
                       exports: [MtnaWfRepeatableItemContainerComponent],
@@ -5672,10 +5807,10 @@
 
   var MtnaWfResourceSearchComponent = /** @class */ (function (_super) {
       __extends(MtnaWfResourceSearchComponent, _super);
-      function MtnaWfResourceSearchComponent(searchFacade, dialog) {
+      function MtnaWfResourceSearchComponent(cdr, searchFacade, dialog) {
           var _this = this;
           var _a, _b;
-          _this = _super.call(this) || this;
+          _this = _super.call(this, cdr) || this;
           _this.searchFacade = searchFacade;
           _this.dialog = dialog;
           _this.references = new rxjs.BehaviorSubject((_b = (_a = _this.item) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : []);
@@ -5685,7 +5820,7 @@
           var _this = this;
           this.dialog
               .open(i1$5.MtnaSearchDialogComponent, {
-              data: new i1$5.MtnaSearchDialogData(this.searchFacade, $localize(templateObject_1 || (templateObject_1 = __makeTemplateObject(["Select a Reference"], ["Select a Reference"]))), true, Object.assign(Object.assign({}, this.item.baseQuery), { target: this.item.searchTargetId }), undefined, true, {
+              data: new i1$5.MtnaSearchDialogData(this.searchFacade, $localize(templateObject_1 || (templateObject_1 = __makeTemplateObject(["Select a Reference"], ["Select a Reference"]))), true, Object.assign(Object.assign({}, this.item.initialQuery), { target: this.item.searchTargetId }), undefined, true, {
                   color: 'primary',
                   disableSubResults: true,
                   resizableColumns: true,
@@ -5717,8 +5852,8 @@
       };
       return MtnaWfResourceSearchComponent;
   }(MtnaWfBaseValueItem));
-  MtnaWfResourceSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchComponent, deps: [{ token: i1__namespace$8.MtnaInMemorySearchFacade }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfResourceSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfResourceSearchComponent, selector: "mtna-wf-resource-search-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div class=\"label-container\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n  <div class=\"label-text\" role=\"heading\">\n    {{ item.label }}\n  </div>\n  <mat-divider fxFlex></mat-divider>\n</div>\n<div class=\"values-container\">\n  <!--  <aria-ui-reference-list-table\n            [path]=\"path\"\n            [referenceConfiguration]=\"referenceConfiguration\"\n            [references]=\"references\"\n            [termReference]=\"termReference\"\n            (openDetails)=\"openDetails.emit($event)\"\n            (referenceSelected)=\"addButtonDisabled = !!$event\"\n            (updateValues)=\"updateValues.emit($event)\"\n    >\n    </aria-ui-reference-list-table>\n    -->\n  <button mat-flat-button class=\"add-button\" color=\"primary\" [disabled]=\"readonly\" i18n (click)=\"openDialog()\">\n    Add Resource<mat-icon>add_circle_outline</mat-icon>\n  </button>\n</div>\n", styles: ["mtna-wf-resource-search-item .label-container .label-text{margin:0 8px 0 0}mtna-wf-resource-search-item .label-container .mat-divider.mat-divider-horizontal{position:unset;width:unset}mtna-wf-resource-search-item .values-container{margin-left:1em;border-width:1px;border-style:solid;border-radius:4px;border-color:#0000001f;padding:8px}mtna-wf-resource-search-item .values-container .paginator-and-order-controls{margin-bottom:8px}mtna-wf-resource-search-item .values-container .add-button .mat-icon{margin-left:4px}\n"], components: [{ type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfResourceSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$8.MtnaInMemorySearchFacade }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfResourceSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfResourceSearchComponent, selector: "mtna-wf-resource-search-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div class=\"label-container\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n  <div class=\"label-text\" role=\"heading\">\n    {{ item.label }}\n  </div>\n  <mat-divider fxFlex></mat-divider>\n</div>\n<div class=\"values-container\">\n  <!--  <aria-ui-reference-list-table\n            [path]=\"path\"\n            [referenceConfiguration]=\"referenceConfiguration\"\n            [references]=\"references\"\n            [termReference]=\"termReference\"\n            (openDetails)=\"openDetails.emit($event)\"\n            (referenceSelected)=\"addButtonDisabled = !!$event\"\n            (updateValues)=\"updateValues.emit($event)\"\n    >\n    </aria-ui-reference-list-table>\n    -->\n  <button mat-flat-button class=\"add-button\" color=\"primary\" [disabled]=\"readonly\" i18n (click)=\"openDialog()\">\n    Add Resource<mat-icon>add_circle_outline</mat-icon>\n  </button>\n</div>\n", styles: ["mtna-wf-resource-search-item .label-container .label-text{margin:0 8px 0 0}mtna-wf-resource-search-item .label-container .mat-divider.mat-divider-horizontal{position:unset;width:unset}mtna-wf-resource-search-item .values-container{margin-left:1em;border-width:1px;border-style:solid;border-radius:4px;border-color:#0000001f;padding:8px}mtna-wf-resource-search-item .values-container .paginator-and-order-controls{margin-bottom:8px}mtna-wf-resource-search-item .values-container .add-button .mat-icon{margin-left:4px}\n"], components: [{ type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5728,7 +5863,7 @@
                       encapsulation: i0.ViewEncapsulation.None,
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
-          }], ctorParameters: function () { return [{ type: i1__namespace$8.MtnaInMemorySearchFacade }, { type: i1__namespace.MatDialog }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$8.MtnaInMemorySearchFacade }, { type: i1__namespace.MatDialog }]; } });
   var templateObject_1;
 
   var MtnaWfResourceSearchModule = /** @class */ (function () {
@@ -5737,12 +5872,12 @@
       return MtnaWfResourceSearchModule;
   }());
   MtnaWfResourceSearchModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfResourceSearchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchModule, declarations: [MtnaWfResourceSearchComponent], imports: [i4.CommonModule, i3$1.MatButtonModule, i2$2.MatDividerModule, i5.MatIconModule, flexLayout.FlexLayoutModule], exports: [MtnaWfResourceSearchComponent] });
-  MtnaWfResourceSearchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchModule, imports: [[i4.CommonModule, i3$1.MatButtonModule, i2$2.MatDividerModule, i5.MatIconModule, flexLayout.FlexLayoutModule]] });
+  MtnaWfResourceSearchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchModule, declarations: [MtnaWfResourceSearchComponent], imports: [i3$1.CommonModule, i3$2.MatButtonModule, i2$2.MatDividerModule, i5.MatIconModule, flexLayout.FlexLayoutModule], exports: [MtnaWfResourceSearchComponent] });
+  MtnaWfResourceSearchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchModule, imports: [[i3$1.CommonModule, i3$2.MatButtonModule, i2$2.MatDividerModule, i5.MatIconModule, flexLayout.FlexLayoutModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i3$1.MatButtonModule, i2$2.MatDividerModule, i5.MatIconModule, flexLayout.FlexLayoutModule],
+                      imports: [i3$1.CommonModule, i3$2.MatButtonModule, i2$2.MatDividerModule, i5.MatIconModule, flexLayout.FlexLayoutModule],
                       declarations: [MtnaWfResourceSearchComponent],
                       exports: [MtnaWfResourceSearchComponent],
                   }]
@@ -5762,7 +5897,7 @@
       return MtnaWfTableFormItemComponent;
   }(MtnaWfBaseParentValueItem));
   MtnaWfTableFormItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfTableFormItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTableFormItemComponent, selector: "mtna-wf-table-item", usesInheritance: true, ngImport: i0__namespace, template: "<table mat-table [dataSource]=\"item.tableRows\" [trackBy]=\"_trackByTableRow\">\n  <ng-container *ngFor=\"let header of item.headers; let index = index\" [matColumnDef]=\"header\">\n    <th mat-header-cell *matHeaderCellDef>{{ header }}</th>\n\n    <td mat-cell *matCellDef=\"let rowItem\">\n      <mtna-wf-item\n        *ngIf=\"!!rowItem.items[index]\"\n        [control]=\"!!control && !!control.controls ? control.controls[rowItem.items[index].instanceId] : undefined\"\n        [item]=\"rowItem.items[index]\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"item.headers\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: item.headers\"></tr>\n</table>\n", styles: ["mtna-wf-table-item .mat-table{width:100%}mtna-wf-table-item .mat-table tbody tr td.mat-cell{padding:8px;vertical-align:top}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group{flex-direction:column;place-content:start start;align-items:start;justify-content:start}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group *{margin-top:0;margin-bottom:0}mtna-wf-table-item .mat-table tbody tr td mtna-wf-boolean-item>.mat-slide-toggle{margin-bottom:8px;margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .repeat-item-container:not(:first-of-type){margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .new-item-button{margin:8px 0}\n"], components: [{ type: i1__namespace$9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i1__namespace$9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1__namespace$9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1__namespace$9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1__namespace$9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1__namespace$9.MatCellDef, selector: "[matCellDef]" }, { type: i1__namespace$9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1__namespace$9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfTableFormItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTableFormItemComponent, selector: "mtna-wf-table-item", usesInheritance: true, ngImport: i0__namespace, template: "<table mat-table [dataSource]=\"item.tableRows\" [trackBy]=\"_trackByTableRow\">\n  <ng-container *ngFor=\"let header of item.headers; let index = index\" [matColumnDef]=\"header\">\n    <th mat-header-cell *matHeaderCellDef>{{ header }}</th>\n\n    <td mat-cell *matCellDef=\"let rowItem\">\n      <mtna-wf-item\n        *ngIf=\"!!rowItem.items[index]\"\n        [control]=\"!!control && !!control.controls ? control.controls[rowItem.items[index].instanceId] : undefined\"\n        [item]=\"rowItem.items[index]\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"item.headers\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: item.headers\"></tr>\n</table>\n", styles: ["mtna-wf-table-item .mat-table{width:100%}mtna-wf-table-item .mat-table tbody tr td.mat-cell{padding:8px;vertical-align:top}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group{flex-direction:column;place-content:start start;align-items:start;justify-content:start}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group *{margin-top:0;margin-bottom:0}mtna-wf-table-item .mat-table tbody tr td mtna-wf-boolean-item>.mat-slide-toggle{margin-bottom:8px;margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .repeat-item-container:not(:first-of-type){margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .new-item-button{margin:8px 0}\n"], components: [{ type: i1__namespace$9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i1__namespace$9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1__namespace$9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1__namespace$9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1__namespace$9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1__namespace$9.MatCellDef, selector: "[matCellDef]" }, { type: i1__namespace$9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1__namespace$9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5780,12 +5915,12 @@
       return MtnaWfTableFormItemModule;
   }());
   MtnaWfTableFormItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfTableFormItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemModule, declarations: [MtnaWfTableFormItemComponent], imports: [i4.CommonModule, i1$9.MatTableModule, MtnaWfFormItemModule], exports: [MtnaWfTableFormItemComponent] });
-  MtnaWfTableFormItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemModule, imports: [[i4.CommonModule, i1$9.MatTableModule, MtnaWfFormItemModule]] });
+  MtnaWfTableFormItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemModule, declarations: [MtnaWfTableFormItemComponent], imports: [i3$1.CommonModule, i1$9.MatTableModule, MtnaWfFormItemModule], exports: [MtnaWfTableFormItemComponent] });
+  MtnaWfTableFormItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemModule, imports: [[i3$1.CommonModule, i1$9.MatTableModule, MtnaWfFormItemModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTableFormItemModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i1$9.MatTableModule, MtnaWfFormItemModule],
+                      imports: [i3$1.CommonModule, i1$9.MatTableModule, MtnaWfFormItemModule],
                       declarations: [MtnaWfTableFormItemComponent],
                       exports: [MtnaWfTableFormItemComponent],
                   }]
@@ -5799,12 +5934,13 @@
       return MtnaWfTextItemComponent;
   }(MtnaWfBaseFormItem));
   MtnaWfTextItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfTextItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTextItemComponent, selector: "mtna-wf-text-item", usesInheritance: true, ngImport: i0__namespace, template: "<p [innerHTML]=\"$any(item.value) | mtnaWfSanitizeHtml\" class=\"mtna-wf-text-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"></p>\n", directives: [{ type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfTextItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTextItemComponent, selector: "mtna-wf-text-item", usesInheritance: true, ngImport: i0__namespace, template: "<p [innerHTML]=\"$any(item.value) | mtnaWfSanitizeHtml\" class=\"mtna-wf-text-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"></p>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-text-item .mtna-wf-text-item{padding-right:24px}\n"], directives: [{ type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'mtna-wf-text-item',
                       templateUrl: './text.component.html',
+                      styleUrls: ['./text.component.scss'],
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                       encapsulation: i0.ViewEncapsulation.None,
                   }]
@@ -5816,12 +5952,12 @@
       return MtnaWfTextItemModule;
   }());
   MtnaWfTextItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfTextItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemModule, declarations: [MtnaWfTextItemComponent], imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfTextItemComponent] });
-  MtnaWfTextItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemModule, imports: [[i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule]] });
+  MtnaWfTextItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemModule, declarations: [MtnaWfTextItemComponent], imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfTextItemComponent] });
+  MtnaWfTextItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemModule, imports: [[i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTextItemModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
+                      imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
                       declarations: [MtnaWfTextItemComponent],
                       exports: [MtnaWfTextItemComponent],
                   }]
@@ -5835,12 +5971,13 @@
       return MtnaWfTitleItemComponent;
   }(MtnaWfBaseFormItem));
   MtnaWfTitleItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfTitleItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTitleItemComponent, selector: "mtna-wf-title-item", usesInheritance: true, ngImport: i0__namespace, template: "<h3 class=\"mtna-wf-title-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">{{ item.value }}</h3>\n", directives: [{ type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfTitleItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTitleItemComponent, selector: "mtna-wf-title-item", usesInheritance: true, ngImport: i0__namespace, template: "<h3 class=\"mtna-wf-title-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">{{ item.value }}</h3>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-title-item .mtna-wf-title-item{padding-right:24px}mtna-wf-title-item .mtna-wf-title-item{font-size:1rem;font-weight:400;letter-spacing:1px;line-height:32px;text-transform:uppercase}\n"], directives: [{ type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'mtna-wf-title-item',
                       templateUrl: './title.component.html',
+                      styleUrls: ['./title.component.scss'],
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                       encapsulation: i0.ViewEncapsulation.None,
                   }]
@@ -5852,12 +5989,12 @@
       return MtnaWfTitleItemModule;
   }());
   MtnaWfTitleItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfTitleItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemModule, declarations: [MtnaWfTitleItemComponent], imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfGetObjectTypePipeModule], exports: [MtnaWfTitleItemComponent] });
-  MtnaWfTitleItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemModule, imports: [[i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfGetObjectTypePipeModule]] });
+  MtnaWfTitleItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemModule, declarations: [MtnaWfTitleItemComponent], imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfGetObjectTypePipeModule], exports: [MtnaWfTitleItemComponent] });
+  MtnaWfTitleItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemModule, imports: [[i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfGetObjectTypePipeModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTitleItemModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfGetObjectTypePipeModule],
+                      imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfGetObjectTypePipeModule],
                       declarations: [MtnaWfTitleItemComponent],
                       exports: [MtnaWfTitleItemComponent],
                   }]
@@ -5871,7 +6008,7 @@
       return MtnaWfUnorderedListItemComponent;
   }(MtnaWfBaseFormItem));
   MtnaWfUnorderedListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfUnorderedListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfUnorderedListItemComponent, selector: "mtna-wf-unordered-list-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ul [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ul>\n", styles: ["mtna-wf-unordered-list-item>ul{list-style:disc outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-value-item mtna-wf-unordered-list-item>ul{padding-right:24px}\n"], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfUnorderedListItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfUnorderedListItemComponent, selector: "mtna-wf-unordered-list-item", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ul [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ul>\n", styles: ["mtna-wf-unordered-list-item>ul{list-style:disc outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-unordered-list-item>ul{padding-right:24px}\n"], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -5889,12 +6026,12 @@
       return MtnaWfUnorderedListItemModule;
   }());
   MtnaWfUnorderedListItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfUnorderedListItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemModule, declarations: [MtnaWfUnorderedListItemComponent], imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfUnorderedListItemComponent] });
-  MtnaWfUnorderedListItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemModule, imports: [[i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule]] });
+  MtnaWfUnorderedListItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemModule, declarations: [MtnaWfUnorderedListItemComponent], imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule], exports: [MtnaWfUnorderedListItemComponent] });
+  MtnaWfUnorderedListItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemModule, imports: [[i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
+                      imports: [i3$1.CommonModule, i1$1.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
                       declarations: [MtnaWfUnorderedListItemComponent],
                       exports: [MtnaWfUnorderedListItemComponent],
                   }]
@@ -5903,8 +6040,8 @@
   var MTNA_WF_DEFAULT_YEAR_RANGE = new i0.InjectionToken('mtna.wf.default.year.range');
   var MtnaWfYearQuarterComponent = /** @class */ (function (_super) {
       __extends(MtnaWfYearQuarterComponent, _super);
-      function MtnaWfYearQuarterComponent(defaultYearRange) {
-          var _this = _super.call(this) || this;
+      function MtnaWfYearQuarterComponent(cdr, defaultYearRange) {
+          var _this = _super.call(this, cdr) || this;
           _this.yearQuarterItemClass = true;
           _this._quarterControl = new i6.FormControl();
           _this._yearControl = new i6.FormControl();
@@ -6037,8 +6174,8 @@
       };
       return MtnaWfYearQuarterComponent;
   }(MtnaWfBaseValueItem));
-  MtnaWfYearQuarterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterComponent, deps: [{ token: MTNA_WF_DEFAULT_YEAR_RANGE, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfYearQuarterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item", host: { properties: { "class.mtna-wf-year-quarter-item": "this.yearQuarterItemClass" } }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div\n  *ngIf=\"control\"\n  class=\"year-quarter-container\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"year selection\">\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"quarter selection\">\n      <mat-option>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "keyvalue": i4__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfYearQuarterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: MTNA_WF_DEFAULT_YEAR_RANGE, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfYearQuarterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item", host: { properties: { "class.mtna-wf-year-quarter-item": "this.yearQuarterItemClass" } }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div\n  *ngIf=\"control\"\n  class=\"year-quarter-container\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"year selection\">\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"quarter selection\">\n      <mat-option>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}\n"], components: [{ type: i1__namespace$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "keyvalue": i3__namespace.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -6049,7 +6186,7 @@
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
           }], ctorParameters: function () {
-          return [{ type: undefined, decorators: [{
+          return [{ type: i0__namespace.ChangeDetectorRef }, { type: undefined, decorators: [{
                           type: i0.Optional
                       }, {
                           type: i0.Inject,
@@ -6066,7 +6203,7 @@
       return MtnaWfYearQuarterModule;
   }());
   MtnaWfYearQuarterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfYearQuarterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterModule, declarations: [MtnaWfYearQuarterComponent], imports: [i4.CommonModule,
+  MtnaWfYearQuarterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterModule, declarations: [MtnaWfYearQuarterComponent], imports: [i3$1.CommonModule,
           flexLayout.FlexLayoutModule,
           i1$7.MatFormFieldModule,
           i2.MatSelectModule,
@@ -6077,7 +6214,7 @@
           i1$1.MtnaHighlightModule,
           i6.ReactiveFormsModule], exports: [MtnaWfYearQuarterComponent] });
   MtnaWfYearQuarterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterModule, imports: [[
-              i4.CommonModule,
+              i3$1.CommonModule,
               flexLayout.FlexLayoutModule,
               i1$7.MatFormFieldModule,
               i2.MatSelectModule,
@@ -6092,7 +6229,7 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           flexLayout.FlexLayoutModule,
                           i1$7.MatFormFieldModule,
                           i2.MatSelectModule,
@@ -6117,10 +6254,10 @@
       }
       Object.defineProperty(MtnaWfYearQuarterRangeComponent.prototype, "item", {
           get: function () {
-              return this._item;
+              return _super.prototype.item;
           },
           set: function (item) {
-              this._item = item;
+              _super.prototype.item = item;
               // Create fake items for the underlying date-item component
               this._startItem = Object.assign(Object.assign({}, item), { value: undefined });
               this._endItem = Object.assign(Object.assign({}, item), { value: undefined });
@@ -6131,7 +6268,7 @@
       return MtnaWfYearQuarterRangeComponent;
   }(MtnaWfBaseValueItem));
   MtnaWfYearQuarterRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfYearQuarterRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterRangeComponent, selector: "mtna-wf-year-quarter-range-item", host: { properties: { "class.mtna-wf-year-quarter-range-item": "this.yearQuarterRangeClass" } }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-year-quarter-item\n    [item]=\"_startItem\"\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n  <span fxFlex=\"14px\">to</span>\n  <mtna-wf-year-quarter-item\n    [item]=\"_endItem\"\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n</div>\n", styles: ["mtna-wf-year-quarter-range-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-range-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item" }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfYearQuarterRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterRangeComponent, selector: "mtna-wf-year-quarter-range-item", host: { properties: { "class.mtna-wf-year-quarter-range-item": "this.yearQuarterRangeClass" } }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-year-quarter-item\n    [item]=\"_startItem\"\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n  <span fxFlex=\"14px\">to</span>\n  <mtna-wf-year-quarter-item\n    [item]=\"_endItem\"\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n</div>\n", styles: ["mtna-wf-year-quarter-range-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-range-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item" }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -6152,12 +6289,12 @@
       return MtnaWfYearQuarterRangeModule;
   }());
   MtnaWfYearQuarterRangeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfYearQuarterRangeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeModule, declarations: [MtnaWfYearQuarterRangeComponent], imports: [i4.CommonModule, MtnaWfYearQuarterModule, i1$1.MtnaHighlightModule, flexLayout.FlexLayoutModule, MtnaWfCoerceFormControlPipeModule], exports: [MtnaWfYearQuarterRangeComponent] });
-  MtnaWfYearQuarterRangeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeModule, imports: [[i4.CommonModule, MtnaWfYearQuarterModule, i1$1.MtnaHighlightModule, flexLayout.FlexLayoutModule, MtnaWfCoerceFormControlPipeModule]] });
+  MtnaWfYearQuarterRangeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeModule, declarations: [MtnaWfYearQuarterRangeComponent], imports: [i3$1.CommonModule, MtnaWfYearQuarterModule, i1$1.MtnaHighlightModule, flexLayout.FlexLayoutModule, MtnaWfCoerceFormControlPipeModule], exports: [MtnaWfYearQuarterRangeComponent] });
+  MtnaWfYearQuarterRangeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeModule, imports: [[i3$1.CommonModule, MtnaWfYearQuarterModule, i1$1.MtnaHighlightModule, flexLayout.FlexLayoutModule, MtnaWfCoerceFormControlPipeModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterRangeModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i4.CommonModule, MtnaWfYearQuarterModule, i1$1.MtnaHighlightModule, flexLayout.FlexLayoutModule, MtnaWfCoerceFormControlPipeModule],
+                      imports: [i3$1.CommonModule, MtnaWfYearQuarterModule, i1$1.MtnaHighlightModule, flexLayout.FlexLayoutModule, MtnaWfCoerceFormControlPipeModule],
                       declarations: [MtnaWfYearQuarterRangeComponent],
                       exports: [MtnaWfYearQuarterRangeComponent],
                   }]
@@ -6293,23 +6430,6 @@
       return MtnaWfItemComponentProvider;
   }(i1$1.InjectedComponentProvider));
 
-  var MtnaWfFormItemDialogModule = /** @class */ (function () {
-      function MtnaWfFormItemDialogModule() {
-      }
-      return MtnaWfFormItemDialogModule;
-  }());
-  MtnaWfFormItemDialogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfFormItemDialogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, declarations: [MtnaWfFormItemDialogComponent], imports: [i4.CommonModule, i1.MatDialogModule, MtnaWfFormItemModule], exports: [MtnaWfFormItemDialogComponent] });
-  MtnaWfFormItemDialogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, imports: [[i4.CommonModule, i1.MatDialogModule, MtnaWfFormItemModule]] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDialogModule, decorators: [{
-              type: i0.NgModule,
-              args: [{
-                      imports: [i4.CommonModule, i1.MatDialogModule, MtnaWfFormItemModule],
-                      declarations: [MtnaWfFormItemDialogComponent],
-                      exports: [MtnaWfFormItemDialogComponent],
-                  }]
-          }] });
-
   /**
    * Base control class for a ValueItem.
    * If a FormItem can have value, its component class should extend this class.
@@ -6327,7 +6447,6 @@
               return this._control;
           },
           set: function (control) {
-              console.log(control);
               this._control = control;
           },
           enumerable: false,
@@ -6535,6 +6654,8 @@
   exports.MtnaWfCoerceFormControlPipeModule = MtnaWfCoerceFormControlPipeModule;
   exports.MtnaWfCoerceFormGroupPipe = MtnaWfCoerceFormGroupPipe;
   exports.MtnaWfCoerceFormGroupPipeModule = MtnaWfCoerceFormGroupPipeModule;
+  exports.MtnaWfCoerceFormItemPipe = MtnaWfCoerceFormItemPipe;
+  exports.MtnaWfCoerceFormItemPipeModule = MtnaWfCoerceFormItemPipeModule;
   exports.MtnaWfDateComponent = MtnaWfDateComponent;
   exports.MtnaWfDateModule = MtnaWfDateModule;
   exports.MtnaWfDateQuarterPipe = MtnaWfDateQuarterPipe;