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

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/flex-layout/extended'), 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('@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/flex-layout/extended', '@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', '@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.i4, 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$4, 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.flexLayout.extended, 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$7, global.ng.material.progressSpinner, global.coreI18nAngular, global.ng.material.table));
+})(this, (function (exports, i0, i1, coercion, webFormTs, rxjs, i6, coreTs, i3, animations, i2$1, i4, i1$1, i2, i3$1, i1$2, i3$2, materialMomentAdapter, operators, i1$3, i1$4, i4$1, flexLayout, i2$2, i5, i6$1, i3$3, i7, i1$5, i2$3, i2$4, i1$6, i3$4, i5$1, i4$2, i1$7, i5$2, coreI18nAngular, i1$8) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -25,32 +25,32 @@
   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 i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$1);
+  var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2);
   var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
-  var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$4);
-  var i1__namespace$8 = /*#__PURE__*/_interopNamespace(i1$5);
+  var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
+  var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$2);
+  var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
+  var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$4);
   var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
   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 i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$6);
+  var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$3);
+  var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+  var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$5);
   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 i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$6);
+  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 i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$8);
+  var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$7);
   var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
-  var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
-  var i1__namespace$9 = /*#__PURE__*/_interopNamespace(i1$9);
+  var i1__namespace$8 = /*#__PURE__*/_interopNamespace(i1$8);
 
   /******************************************************************************
   Copyright (c) Microsoft Corporation.
@@ -529,6 +529,91 @@
       __disposeResources: __disposeResources,
   };
 
+  var BaseFormStep = /** @class */ (function () {
+      function BaseFormStep(instanceId) {
+          this.instanceId = instanceId;
+      }
+      return BaseFormStep;
+  }());
+
+  var FormStepGroup = /** @class */ (function (_super) {
+      __extends(FormStepGroup, _super);
+      function FormStepGroup(steps, instanceId, collapsed, label, num) {
+          if (collapsed === void 0) { collapsed = false; }
+          var _this = _super.call(this, instanceId) || this;
+          _this.steps = steps;
+          _this.collapsed = collapsed;
+          _this.label = label;
+          _this.num = num;
+          _this.className = 'FormStepGroup';
+          return _this;
+      }
+      return FormStepGroup;
+  }(BaseFormStep));
+  function isFormStepGroup(something) {
+      return coreTs.isType(something, 'steps') && Array.isArray(something.steps);
+  }
+  function instanceOfFormStepGroup(something) {
+      return coreTs.isType(something, 'className') && something.className === 'FormStepGroup';
+  }
+
+  var FormStep = /** @class */ (function (_super) {
+      __extends(FormStep, _super);
+      function FormStep(num, label, instanceId, optional) {
+          if (optional === void 0) { optional = false; }
+          var _this = _super.call(this, instanceId) || this;
+          _this.num = num;
+          _this.label = label;
+          _this.optional = optional;
+          _this.className = 'FormStep';
+          _this.active = false;
+          _this.status = 'INVALID';
+          _this.disabled = false;
+          return _this;
+      }
+      return FormStep;
+  }(BaseFormStep));
+  function instanceOfFormStep(something) {
+      return coreTs.isType(something, 'className') && something.className === 'FormStep';
+  }
+
+  var PROGRESSIVE_FORM_ID = 'us.mtna.web.form.impl.ProgressiveFormImpl';
+  function isProgressiveForm(something) {
+      return coreTs.isType(something, 'itemId') && something.itemId === PROGRESSIVE_FORM_ID;
+  }
+
+  var PROGRESSIVE_FORM_SECTION_ID = 'us.mtna.web.form.impl.ProgressiveFormSectionImpl';
+  function isProgressiveFormSection(something) {
+      return coreTs.isType(something, 'itemId') && something.itemId === PROGRESSIVE_FORM_SECTION_ID;
+  }
+
+  var MTNA_WF_API_TOKEN = new i0.InjectionToken('mtnaWfApiConfig');
+
+  /**
+   * Dialog data for a {@link MtnaWfFormItemDialogComponent}
+   */
+  var MtnaWfFormItemDialogData = /** @class */ (function () {
+      /**
+       * @param formItems The form items to render in the dialog
+       * @param title optional dialog title
+       */
+      function MtnaWfFormItemDialogData(formItems, title) {
+          this.formItems = formItems;
+          this.title = title;
+      }
+      return MtnaWfFormItemDialogData;
+  }());
+
+  var MTNA_WF_ITEM_WHITELIST = new i0.InjectionToken('mtna-wf-item-whitelist', {
+      providedIn: 'root',
+      factory: MTNA_WF_ITEM_WHITELIST_FACTORY,
+  });
+  function MTNA_WF_ITEM_WHITELIST_FACTORY() {
+      return {
+          itemTypes: [],
+      };
+  }
+
   var MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME = 'formItemValidationResult';
   /**
    * Valitator function that will check the root level {@link FormValidationResult} on
@@ -627,7 +712,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 +721,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 +739,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 +769,7 @@
                   group.disable({ onlySelf: true, emitEvent: false });
               }
               return group;
+          }
           default:
               break;
       }
@@ -764,7 +853,12 @@
    */
   function determineSerializeFunctionToUse(formItem, managerService, customFormItemConditional, customControlGenerator) {
       if (customFormItemConditional === void 0) { customFormItemConditional = function () { return false; }; }
-      if (webFormTs.isForm(formItem) || webFormTs.isRepeatableItem(formItem) || webFormTs.isSection(formItem) || webFormTs.isFormItemGroupImpl(formItem)) {
+      if (webFormTs.isForm(formItem) ||
+          isProgressiveForm(formItem) ||
+          webFormTs.isRepeatableItem(formItem) ||
+          webFormTs.isSection(formItem) ||
+          isProgressiveFormSection(formItem) ||
+          webFormTs.isFormItemGroupImpl(formItem)) {
           return serializeFormItems(formItem, managerService, customFormItemConditional, customControlGenerator);
       }
       else if (webFormTs.isTableItem(formItem)) {
@@ -855,7 +949,7 @@
    */
   function determineInsertFunctionToUse(formItem, ngFormValue, disabledState, customFormItemConditional, customFormItemBuilder, parent) {
       if (customFormItemConditional === void 0) { customFormItemConditional = function () { return false; }; }
-      if (webFormTs.isSection(formItem) || webFormTs.isFormItemGroupImpl(formItem) || webFormTs.isRepeatableItem(formItem)) {
+      if (webFormTs.isSection(formItem) || isProgressiveFormSection(formItem) || webFormTs.isFormItemGroupImpl(formItem) || webFormTs.isRepeatableItem(formItem)) {
           var items = insertFormItemValues(formItem, ngFormValue, disabledState, customFormItemConditional, customFormItemBuilder);
           return Object.assign(Object.assign({}, formItem), { items: items, disabled: _isDisabled(formItem, disabledState) });
       }
@@ -896,7 +990,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 +1004,7 @@
                   return value;
               }, []);
               return value;
+          }
           default:
               return ngFormValue;
       }
@@ -947,9 +1042,9 @@
           }
           switch (typeCheck) {
               case 'MIN':
-                  return totalSelected >= limit ? null : { minSelected: "Select at least " + limit };
+                  return totalSelected >= limit ? null : { minSelected: $localize(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["Select at least ", ""], ["Select at least ", ""])), limit) };
               case 'MAX':
-                  return totalSelected <= limit ? null : { maxSelected: "Select no more than " + limit };
+                  return totalSelected <= limit ? null : { maxSelected: $localize(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["Select no more than ", ""], ["Select no more than ", ""])), limit) };
           }
       };
   }
@@ -1009,6 +1104,7 @@
   function isEmptyString(value) {
       return typeof value === 'string' && !value.length;
   }
+  var templateObject_1$g, templateObject_2$5;
 
   var serializerUtil = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1098,70 +1194,6 @@
       return null;
   }
 
-  var BaseFormStep = /** @class */ (function () {
-      function BaseFormStep(instanceId) {
-          this.instanceId = instanceId;
-      }
-      return BaseFormStep;
-  }());
-
-  var FormStepGroup = /** @class */ (function (_super) {
-      __extends(FormStepGroup, _super);
-      function FormStepGroup(steps, instanceId, collapsed) {
-          if (collapsed === void 0) { collapsed = false; }
-          var _this = _super.call(this, instanceId) || this;
-          _this.steps = steps;
-          _this.collapsed = collapsed;
-          return _this;
-      }
-      return FormStepGroup;
-  }(BaseFormStep));
-  function isFormStepGroup(something) {
-      return coreTs.isType(something, 'steps') && Array.isArray(something.steps);
-  }
-
-  var FormStep = /** @class */ (function (_super) {
-      __extends(FormStep, _super);
-      function FormStep(num, label, instanceId, optional) {
-          if (optional === void 0) { optional = false; }
-          var _this = _super.call(this, instanceId) || this;
-          _this.num = num;
-          _this.label = label;
-          _this.optional = optional;
-          _this.active = false;
-          _this.status = 'INVALID';
-          return _this;
-      }
-      return FormStep;
-  }(BaseFormStep));
-
-  var MTNA_WF_API_TOKEN = new i0.InjectionToken('mtnaWfApiConfig');
-
-  /**
-   * Dialog data for a {@link MtnaWfFormItemDialogComponent}
-   */
-  var MtnaWfFormItemDialogData = /** @class */ (function () {
-      /**
-       * @param formItems The form items to render in the dialog
-       * @param title optional dialog title
-       */
-      function MtnaWfFormItemDialogData(formItems, title) {
-          this.formItems = formItems;
-          this.title = title;
-      }
-      return MtnaWfFormItemDialogData;
-  }());
-
-  var MTNA_WF_ITEM_WHITELIST = new i0.InjectionToken('mtna-wf-item-whitelist', {
-      providedIn: 'root',
-      factory: MTNA_WF_ITEM_WHITELIST_FACTORY,
-  });
-  function MTNA_WF_ITEM_WHITELIST_FACTORY() {
-      return {
-          itemTypes: [],
-      };
-  }
-
   /**
    * Flattens formStepGroup.steps and combines all steps into single array
    * @param steps Array<FormStep | FormStepGroup>
@@ -1220,7 +1252,7 @@
           if (allSteps) {
               newArray.push(new FormStep(count + 1, item.name || 'No Title', item.instanceId, !item.required));
           }
-          else if (webFormTs.isSection(item)) {
+          else if (webFormTs.isSection(item) || isProgressiveFormSection(item)) {
               // If the item is a Section, add a step
               newArray.push(new FormStep(count + 1, item.title.value || 'No Title', item.instanceId, !item.required));
           }
@@ -1228,9 +1260,24 @@
               // If the item is a DataCubeItem, add a step and add a group step for the sub-sections
               newArray.push(new FormStep(count + 1, item.title.value || '', item.instanceId, !item.required));
               var subSectionSteps = item.items
-                  .filter(webFormTs.isSection)
+                  .filter(webFormTs.isSection || isProgressiveFormSection)
                   .map(function (item, index) { return new FormStep("" + (count + 1) + coreTs.toLetters(index + 1), item.title.value || '', item.instanceId, !item.required); });
-              newArray.push(new FormStepGroup(subSectionSteps, item.instanceId, false));
+              newArray.push(new FormStepGroup(subSectionSteps, item.instanceId, false, item.name, count + 1));
+          }
+          return newArray;
+      }, []);
+  }
+  function generateFormStepsFromOutline(outline) {
+      return outline.reduce(function (newArray, step) {
+          // The number of non-group steps, used to number the top level steps
+          var count = newArray.filter(function (step) { return !isFormStepGroup(step); }).length;
+          if (step.childSteps && step.childSteps.length > 0) {
+              newArray.push(new FormStep(count + 1, step.label, step.instanceId || step.templateId, step.optional));
+              var subSectionSteps = step.childSteps.map(function (item, index) { return new FormStep("" + (count + 1) + coreTs.toLetters(index + 1), item.label, item.instanceId || item.templateId, item.optional); });
+              newArray.push(new FormStepGroup(subSectionSteps, step.instanceId || step.templateId, false, step.label, count + 1));
+          }
+          else {
+              newArray.push(new FormStep(count + 1, step.label, step.instanceId || step.templateId, step.optional));
           }
           return newArray;
       }, []);
@@ -1305,24 +1352,22 @@
 
   /** List of default error messages to display */
   var DEFAULT_ERROR_MESSAGES = {
-      email: 'This field must include a valid email format.',
+      email: $localize(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["This field must include a valid email format."], ["This field must include a valid email format."]))),
       max: function (item) { return !coreTs.isPresent(item) || !coreTs.isPresent(item === null || item === void 0 ? void 0 : item.maxValue)
-          ? "This field's value must be less."
-          : (coreTs.isPresent(item === null || item === void 0 ? void 0 : item.minValue) ? "Min value: " + (item === null || item === void 0 ? void 0 : item.minValue) + " - " : '') + "Max value: " + (item === null || item === void 0 ? void 0 : item.minValue); },
-      maxlength: 'This field has exceeded the allowed maximum.',
+          ? $localize(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["This field's value must be less."], ["This field's value must be less."]))) : coreTs.isPresent(item === null || item === void 0 ? void 0 : item.minValue) ? $localize(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["Min value: ", " - "], ["Min value: ", " - "])), item.minValue) : '' + $localize(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["Max value: ", ""], ["Max value: ", ""])), item.maxValue); },
+      maxlength: $localize(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["This field has exceeded the allowed maximum."], ["This field has exceeded the allowed maximum."]))),
       maxSelected: null,
       min: function (item) { return !coreTs.isPresent(item) || !coreTs.isPresent(item === null || item === void 0 ? void 0 : item.minValue)
-          ? "This field's value must be greater."
-          : "Min value: " + (item === null || item === void 0 ? void 0 : item.minValue) + (!coreTs.isPresent(item === null || item === void 0 ? void 0 : item.maxValue) ? '' : " - Max value: " + (item === null || item === void 0 ? void 0 : item.maxValue)); },
-      minlength: 'This field has not met the required minimum.',
+          ? $localize(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["This field's value must be greater."], ["This field's value must be greater."]))) : $localize(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["Min Value: ", ""], ["Min Value: ", ""])), item.minValue) + coreTs.isPresent(item === null || item === void 0 ? void 0 : item.maxValue) ? $localize(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([" - Max Value: ", ""], [" - Max Value: ", ""])), item.maxValue) : ''; },
+      minlength: $localize(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["This field has not met the required minimum."], ["This field has not met the required minimum."]))),
       minSelected: null,
-      nonDigit: "This field's value must be numeric.",
-      pattern: "This field's input does not meet the accepted pattern.",
-      positive: "This field's value cannot be negative.",
-      required: 'This field is required.',
-      requiredTrue: "This field's value must be 'true'.",
-      wholeNumber: "This field cannot contain a decimal.",
-      matDatepickerParse: "This field's value is not an accepted format.",
+      nonDigit: $localize(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["This field's value must be numeric."], ["This field's value must be numeric."]))),
+      pattern: $localize(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["This field's input does not meet the accepted pattern."], ["This field's input does not meet the accepted pattern."]))),
+      positive: $localize(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["This field's value cannot be negative."], ["This field's value cannot be negative."]))),
+      required: $localize(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["This field is required."], ["This field is required."]))),
+      requiredTrue: "$localizeThis field's value must be 'true'.",
+      wholeNumber: $localize(templateObject_14 || (templateObject_14 = __makeTemplateObject(["This field cannot contain a decimal."], ["This field cannot contain a decimal."]))),
+      matDatepickerParse: $localize(templateObject_15 || (templateObject_15 = __makeTemplateObject(["This field's value is not an accepted format."], ["This field's value is not an accepted format."]))),
   };
   var WEB_FORM_CUSTOM_ERRORS = new i0.InjectionToken('mtnaWebFormCustomFormErrors');
   var MtnaWfUIService = /** @class */ (function () {
@@ -1665,16 +1710,19 @@
                           args: [WEB_FORM_CUSTOM_ERRORS]
                       }] }];
       } });
+  var templateObject_1$f, templateObject_2$4, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$1, templateObject_14, templateObject_15;
 
-  var _BaseFormItemComponent = i1$1.mixinDestroyNotifier(/** @class */ (function () {
+  var _BaseFormItemComponent = i4.mixinDestroyNotifier(/** @class */ (function () {
       function class_1() {
       }
       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 +1743,7 @@
           },
           set: function (value) {
               this._indicatorStatus = value;
+              this.cdr.markForCheck();
           },
           enumerable: false,
           configurable: true
@@ -1718,14 +1767,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 +1784,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 +1808,7 @@
           },
           set: function (value) {
               this._readonly = coercion.coerceBooleanProperty(value);
+              this.cdr.markForCheck();
           },
           enumerable: false,
           configurable: true
@@ -1769,23 +1820,24 @@
       };
       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() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+      function MtnaWfBaseGroupItem(cdr) {
+          var _this = _super.call(this, cdr) || this;
           _this._parentIds = new Array();
           return _this;
       }
@@ -1804,17 +1856,18 @@
       };
       return MtnaWfBaseGroupItem;
   }(MtnaWfBaseFormItemControl));
-  MtnaWfBaseGroupItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseGroupItem, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfBaseGroupItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseGroupItem, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
   MtnaWfBaseGroupItem.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseGroupItem, selector: "ng-component", inputs: { parentIds: "parentIds" }, usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseGroupItem, decorators: [{
               type: i0.Component,
               args: [{
                       template: "",
                   }]
-          }], propDecorators: { parentIds: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { parentIds: [{
                   type: i0.Input
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseValueItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseValueItem, _super);
       function MtnaWfBaseValueItem() {
@@ -1863,6 +1916,7 @@
                   args: ['class.read-only']
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseParentValueItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseParentValueItem, _super);
       function MtnaWfBaseParentValueItem() {
@@ -1886,7 +1940,8 @@
               return _super.prototype.control;
           },
           set: function (control) {
-              if (control instanceof i6.FormGroup) {
+              // Checks for a wrapping form group around this item.
+              if (control instanceof i6.FormGroup && control.get(this.item.instanceId)) {
                   _super.prototype.control = control.get(this.item.instanceId);
                   this.controlWrapper = control;
               }
@@ -1912,10 +1967,11 @@
                   type: i0.Output
               }] } });
 
+  /* eslint-disable-next-line @angular-eslint/component-class-suffix */
   var MtnaWfBaseSectionItem = /** @class */ (function (_super) {
       __extends(MtnaWfBaseSectionItem, _super);
-      function MtnaWfBaseSectionItem() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+      function MtnaWfBaseSectionItem(cdr) {
+          var _this = _super.call(this, cdr) || this;
           _this.focused = new i0.EventEmitter();
           return _this;
       }
@@ -1925,29 +1981,31 @@
           },
           set: function (value) {
               this._step = value;
+              console.warn({ value: value });
           },
           enumerable: false,
           configurable: true
       });
       return MtnaWfBaseSectionItem;
   }(MtnaWfBaseGroupItem));
-  MtnaWfBaseSectionItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseSectionItem, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfBaseSectionItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseSectionItem, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
   MtnaWfBaseSectionItem.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseSectionItem, selector: "ng-component", inputs: { step: "step" }, outputs: { focused: "focused" }, usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseSectionItem, decorators: [{
               type: i0.Component,
               args: [{
                       template: "",
                   }]
-          }], propDecorators: { step: [{
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { step: [{
                   type: i0.Input
               }], focused: [{
                   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;
@@ -1964,7 +2022,7 @@
       MtnaWfBaseSingleSelectionParentValueItem.prototype.selectionChange = function (change) {
           // event fires when an option's nested item, e.g. FileUploadItem, changes value.
           // This event is not a MatRadioChange, so we need to ignore it.
-          if (change instanceof i1$2.MatRadioChange || change instanceof i2.MatSelectChange) {
+          if (change instanceof i1$1.MatRadioChange || change instanceof i2.MatSelectChange) {
               // Newly selected option
               var option = this.item.options.find(function (o) { return o.option.id === change.value; });
               if (!!this.selectedOption && this.selectedOption.option.id !== change.value) {
@@ -1996,16 +2054,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 +2073,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 +2103,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 +2143,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 +2170,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) {
@@ -2152,8 +2214,8 @@
           }
       };
       return MtnaWfItemInjector;
-  }(i1$1.MtnaComponentInjector));
-  MtnaWfItemInjector.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjector, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ViewContainerRef }, { token: i1$1.INJECTION_SERVICE }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  }(i4.MtnaComponentInjector));
+  MtnaWfItemInjector.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjector, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ViewContainerRef }, { token: i4.INJECTION_SERVICE }], target: i0__namespace.ɵɵFactoryTarget.Component });
   MtnaWfItemInjector.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfItemInjector, selector: "mtna-wf-item-injector", inputs: { color: "color", control: "control", header: "header", indicatorStatus: "indicatorStatus", inList: "inList", item: "item", parentIds: "parentIds", readonly: "readonly", step: "step" }, outputs: { focusedSection: "focusedSection", toggleFormItems: "toggleFormItems" }, usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfItemInjector, decorators: [{
               type: i0.Component,
@@ -2162,9 +2224,9 @@
                       template: "",
                   }]
           }], ctorParameters: function () {
-          return [{ type: i0__namespace.Injector }, { type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace$1.InjectionService, decorators: [{
+          return [{ type: i0__namespace.Injector }, { type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ViewContainerRef }, { type: i4__namespace.InjectionService, decorators: [{
                           type: i0.Inject,
-                          args: [i1$1.INJECTION_SERVICE]
+                          args: [i4.INJECTION_SERVICE]
                       }] }];
       }, propDecorators: { color: [{
                   type: i0.Input
@@ -2202,14 +2264,14 @@
       };
       return MtnaWfSanitizeHtmlPipe;
   }());
-  MtnaWfSanitizeHtmlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfSanitizeHtmlPipe, deps: [{ token: i1__namespace$2.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  MtnaWfSanitizeHtmlPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfSanitizeHtmlPipe, deps: [{ token: i1__namespace$1.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
   MtnaWfSanitizeHtmlPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfSanitizeHtmlPipe, name: "mtnaWfSanitizeHtml" });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfSanitizeHtmlPipe, decorators: [{
               type: i0.Pipe,
               args: [{
                       name: 'mtnaWfSanitizeHtml',
                   }]
-          }], ctorParameters: function () { return [{ type: i1__namespace$2.DomSanitizer }]; } });
+          }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }]; } });
   var MtnaWfSanitizeHtmlPipeModule = /** @class */ (function () {
       function MtnaWfSanitizeHtmlPipeModule() {
       }
@@ -2278,7 +2340,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 +2385,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 +2474,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", 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 +2528,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 i18n>CANCEL</button>\n  <button [mat-dialog-close]=\"true\" color=\"accent\" mat-raised-button i18n>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,17 +2548,49 @@
       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],
                   }]
           }] });
 
+  var ChildStepActivePipe = /** @class */ (function () {
+      function ChildStepActivePipe() {
+      }
+      ChildStepActivePipe.prototype.transform = function (steps) {
+          return steps.some(function (step) { return step.active; });
+      };
+      return ChildStepActivePipe;
+  }());
+  ChildStepActivePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStepActivePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  ChildStepActivePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStepActivePipe, name: "childStepActive" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStepActivePipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'childStepActive'
+                  }]
+          }] });
+  var ChildStepActivePipeModule = /** @class */ (function () {
+      function ChildStepActivePipeModule() {
+      }
+      return ChildStepActivePipeModule;
+  }());
+  ChildStepActivePipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStepActivePipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  ChildStepActivePipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStepActivePipeModule, declarations: [ChildStepActivePipe], exports: [ChildStepActivePipe] });
+  ChildStepActivePipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStepActivePipeModule });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChildStepActivePipeModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [ChildStepActivePipe],
+                      exports: [ChildStepActivePipe]
+                  }]
+          }] });
+
   var MtnaWfGetObjectTypePipe = /** @class */ (function () {
       function MtnaWfGetObjectTypePipe() {
       }
@@ -2568,13 +2665,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,28 +2750,131 @@
                   }]
           }] });
 
+  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 CoerceFormStepGroupPipe = /** @class */ (function () {
+      function CoerceFormStepGroupPipe() {
+      }
+      CoerceFormStepGroupPipe.prototype.transform = function (value) {
+          return instanceOfFormStepGroup(value) ? value : null;
+      };
+      return CoerceFormStepGroupPipe;
+  }());
+  CoerceFormStepGroupPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepGroupPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  CoerceFormStepGroupPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepGroupPipe, name: "coerceFormStepGroup" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepGroupPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'coerceFormStepGroup',
+                  }]
+          }] });
+  var CoerceFormStepGroupPipeModule = /** @class */ (function () {
+      function CoerceFormStepGroupPipeModule() {
+      }
+      return CoerceFormStepGroupPipeModule;
+  }());
+  CoerceFormStepGroupPipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepGroupPipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  CoerceFormStepGroupPipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepGroupPipeModule, declarations: [CoerceFormStepGroupPipe], exports: [CoerceFormStepGroupPipe] });
+  CoerceFormStepGroupPipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepGroupPipeModule });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepGroupPipeModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [CoerceFormStepGroupPipe],
+                      exports: [CoerceFormStepGroupPipe],
+                  }]
+          }] });
+
+  var CoerceFormStepPipe = /** @class */ (function () {
+      function CoerceFormStepPipe() {
+      }
+      CoerceFormStepPipe.prototype.transform = function (value) {
+          return instanceOfFormStep(value) ? value : null;
+      };
+      return CoerceFormStepPipe;
+  }());
+  CoerceFormStepPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  CoerceFormStepPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepPipe, name: "coerceFormStep" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'coerceFormStep'
+                  }]
+          }] });
+  var CoerceFormStepPipeModule = /** @class */ (function () {
+      function CoerceFormStepPipeModule() {
+      }
+      return CoerceFormStepPipeModule;
+  }());
+  CoerceFormStepPipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepPipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  CoerceFormStepPipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepPipeModule, declarations: [CoerceFormStepPipe], exports: [CoerceFormStepPipe] });
+  CoerceFormStepPipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepPipeModule });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CoerceFormStepPipeModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [CoerceFormStepPipe],
+                      exports: [CoerceFormStepPipe],
+                  }]
+          }] });
+
   var MtnaWfDateQuarterPipe = /** @class */ (function () {
       function MtnaWfDateQuarterPipe() {
       }
       MtnaWfDateQuarterPipe.prototype.transform = function (quarter, format) {
           if (format === void 0) { format = 'short'; }
           var short = {
-              0: 'Q1',
-              1: 'Q2',
-              2: 'Q3',
-              3: 'Q4',
+              0: $localize(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["Q1"], ["Q1"]))),
+              1: $localize(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["Q2"], ["Q2"]))),
+              2: $localize(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["Q3"], ["Q3"]))),
+              3: $localize(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["Q4"], ["Q4"]))),
           };
           var medium = {
-              0: '1st Quarter',
-              1: '2nd Quarter',
-              2: '3rd Quarter',
-              3: '4th Quarter',
+              0: $localize(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["1st Quarter"], ["1st Quarter"]))),
+              1: $localize(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["2nd Quarter"], ["2nd Quarter"]))),
+              2: $localize(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["3rd Quarter"], ["3rd Quarter"]))),
+              3: $localize(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["4th Quarter"], ["4th Quarter"]))),
           };
           var long = {
-              0: 'First Quarter',
-              1: 'Second Quarter',
-              2: 'Third Quarter',
-              3: 'Fourth Quarter',
+              0: $localize(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["First Quarter"], ["First Quarter"]))),
+              1: $localize(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["Second Quarter"], ["Second Quarter"]))),
+              2: $localize(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["Third Quarter"], ["Third Quarter"]))),
+              3: $localize(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["Fourth Quarter"], ["Fourth Quarter"]))),
           };
           switch (format) {
               case 'short':
@@ -2714,6 +2912,7 @@
                       exports: [MtnaWfDateQuarterPipe],
                   }]
           }] });
+  var templateObject_1$e, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1;
 
   /**
    * Pipe to determine if a FormStep is a FormStepGroup or a single step.
@@ -2750,6 +2949,43 @@
                   }]
           }] });
 
+  var GetActiveFormStepItemPipe = /** @class */ (function () {
+      function GetActiveFormStepItemPipe() {
+      }
+      GetActiveFormStepItemPipe.prototype.transform = function (items, activeStepId) {
+          if (!items || !activeStepId) {
+              return undefined;
+          }
+          else {
+              return items.find(function (item) { return item.instanceId === activeStepId; });
+          }
+      };
+      return GetActiveFormStepItemPipe;
+  }());
+  GetActiveFormStepItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetActiveFormStepItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  GetActiveFormStepItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetActiveFormStepItemPipe, name: "getActiveFormStepItem" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetActiveFormStepItemPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'getActiveFormStepItem',
+                  }]
+          }] });
+  var GetActiveFormStepItemPipeModule = /** @class */ (function () {
+      function GetActiveFormStepItemPipeModule() {
+      }
+      return GetActiveFormStepItemPipeModule;
+  }());
+  GetActiveFormStepItemPipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetActiveFormStepItemPipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  GetActiveFormStepItemPipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetActiveFormStepItemPipeModule, declarations: [GetActiveFormStepItemPipe], exports: [GetActiveFormStepItemPipe] });
+  GetActiveFormStepItemPipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetActiveFormStepItemPipeModule });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetActiveFormStepItemPipeModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [GetActiveFormStepItemPipe],
+                      exports: [GetActiveFormStepItemPipe],
+                  }]
+          }] });
+
   var MtnaWfGetAutoCompletePipe = /** @class */ (function () {
       function MtnaWfGetAutoCompletePipe() {
       }
@@ -2955,15 +3191,60 @@
                   }]
           }] });
 
-  var MtnaWfGetSelectedOptionNamePipe = /** @class */ (function () {
-      function MtnaWfGetSelectedOptionNamePipe() {
-      }
-      MtnaWfGetSelectedOptionNamePipe.prototype.transform = function (id, options) {
-          if (!options || !id) {
-              return 'N/A';
-          }
+  var GetProgressiveFormItemPipe = /** @class */ (function () {
+      function GetProgressiveFormItemPipe() {
+      }
+      GetProgressiveFormItemPipe.prototype.transform = function (step, items) {
+          if (items) {
+              var item = items.find(function (item) { return item.instanceId || item.templateId === step.instanceId; });
+              console.warn({ itemFromPipe: item });
+              if (item) {
+                  return item;
+              }
+              else {
+                  return undefined;
+              }
+          }
+          else {
+              return undefined;
+          }
+      };
+      return GetProgressiveFormItemPipe;
+  }());
+  GetProgressiveFormItemPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetProgressiveFormItemPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  GetProgressiveFormItemPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetProgressiveFormItemPipe, name: "getProgressiveFormItem" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetProgressiveFormItemPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'getProgressiveFormItem',
+                  }]
+          }] });
+  var GetProgressiveFormItemPipeModule = /** @class */ (function () {
+      function GetProgressiveFormItemPipeModule() {
+      }
+      return GetProgressiveFormItemPipeModule;
+  }());
+  GetProgressiveFormItemPipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetProgressiveFormItemPipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  GetProgressiveFormItemPipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetProgressiveFormItemPipeModule, declarations: [GetProgressiveFormItemPipe], exports: [GetProgressiveFormItemPipe] });
+  GetProgressiveFormItemPipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetProgressiveFormItemPipeModule });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetProgressiveFormItemPipeModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [GetProgressiveFormItemPipe],
+                      exports: [GetProgressiveFormItemPipe],
+                  }]
+          }] });
+
+  var MtnaWfGetSelectedOptionNamePipe = /** @class */ (function () {
+      function MtnaWfGetSelectedOptionNamePipe() {
+      }
+      MtnaWfGetSelectedOptionNamePipe.prototype.transform = function (id, options) {
+          var _notApplicableText = $localize(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["N/A"], ["N/A"])));
+          if (!options || !id) {
+              return _notApplicableText;
+          }
           var foundOption = options.find(function (o) { return o.option.id === id; });
-          return foundOption ? foundOption.option.name : 'N/A';
+          return foundOption ? foundOption.option.name : _notApplicableText;
       };
       return MtnaWfGetSelectedOptionNamePipe;
   }());
@@ -2990,6 +3271,65 @@
                       exports: [MtnaWfGetSelectedOptionNamePipe],
                   }]
           }] });
+  var templateObject_1$d;
+
+  var GetStepAriaLabel = /** @class */ (function () {
+      function GetStepAriaLabel() {
+          var _a;
+          this.stepStatusTextMap = (_a = {},
+              _a['INVALID'] = $localize(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["Invalid"], ["Invalid"]))),
+              _a['VALID'] = $localize(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["Valid"], ["Valid"]))),
+              _a['DISABLED'] = $localize(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["Disabled"], ["Disabled"]))),
+              _a['ERROR'] = $localize(templateObject_4 || (templateObject_4 = __makeTemplateObject(["Error"], ["Error"]))),
+              _a['PENDING'] = $localize(templateObject_5 || (templateObject_5 = __makeTemplateObject(["Pending"], ["Pending"]))),
+              _a['EMPTY'] = $localize(templateObject_6 || (templateObject_6 = __makeTemplateObject(["Empty"], ["Empty"]))),
+              _a['INCOMPLETE'] = $localize(templateObject_7 || (templateObject_7 = __makeTemplateObject(["Incomplete"], ["Incomplete"]))),
+              _a['PLACEHOLDER'] = $localize(templateObject_8 || (templateObject_8 = __makeTemplateObject(["Placeholder"], ["Placeholder"]))),
+              _a);
+      }
+      GetStepAriaLabel.prototype.transform = function (step, collapsed) {
+          var stepText = $localize(templateObject_9 || (templateObject_9 = __makeTemplateObject(["Step"], ["Step"])));
+          if (instanceOfFormStepGroup(step)) {
+              var collapsedText = collapsed ? $localize(templateObject_10 || (templateObject_10 = __makeTemplateObject(["collapsed step"], ["collapsed step"]))) : $localize(templateObject_11 || (templateObject_11 = __makeTemplateObject(["expanded step"], ["expanded step"])));
+              var childStepsActiveText = step.steps.some(function (childStep) { return childStep.active; }) ? $localize(templateObject_12 || (templateObject_12 = __makeTemplateObject(["Child step active."], ["Child step active."]))) : '';
+              return stepText + " " + step.num + ": " + step.label + " - " + collapsedText + ". " + childStepsActiveText;
+          }
+          else if (instanceOfFormStep(step)) {
+              var status = step.status === 'EMPTY' || step.status === 'PLACEHOLDER' ? undefined : this.stepStatusTextMap[step.status];
+              var activeText = step.active ? $localize(templateObject_13 || (templateObject_13 = __makeTemplateObject(["Active step"], ["Active step"]))) : undefined;
+              return stepText + " " + step.num + ": " + step.label + " " + (status ? ' - ' + status : '') + (activeText ? ' - ' + activeText : '') + ".";
+          }
+          else {
+              // Handle for unexpected types. Should never reach this point because the step should always be a FormStep or a FormStepGroup.
+              return '';
+          }
+      };
+      return GetStepAriaLabel;
+  }());
+  GetStepAriaLabel.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetStepAriaLabel, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  GetStepAriaLabel.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetStepAriaLabel, name: "getStepAriaLabel" });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetStepAriaLabel, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'getStepAriaLabel',
+                  }]
+          }] });
+  var GetStepAriaLabelModule = /** @class */ (function () {
+      function GetStepAriaLabelModule() {
+      }
+      return GetStepAriaLabelModule;
+  }());
+  GetStepAriaLabelModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetStepAriaLabelModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  GetStepAriaLabelModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetStepAriaLabelModule, declarations: [GetStepAriaLabel], exports: [GetStepAriaLabel] });
+  GetStepAriaLabelModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetStepAriaLabelModule });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GetStepAriaLabelModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [GetStepAriaLabel],
+                      exports: [GetStepAriaLabel],
+                  }]
+          }] });
+  var templateObject_1$c, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 
   /**
    * Returns an array of FormItems that contain a value.
@@ -2997,15 +3337,12 @@
    */
   var MtnaWfItemsWithValuePipe = /** @class */ (function () {
       function MtnaWfItemsWithValuePipe() {
-          this.itemsCache = [];
       }
       MtnaWfItemsWithValuePipe.prototype.transform = function (items) {
-          var _a;
-          if ((_a = this.itemsCache) === null || _a === void 0 ? void 0 : _a.length) {
-              return this.itemsCache;
-          }
-          this.itemsCache = !items ? [] : items.filter(webFormTs.isValueItem);
-          return this.itemsCache;
+          var list = items ? items.filter(webFormTs.isValueItem) : [];
+          console.error({ items: items });
+          console.error({ list: list });
+          return list;
       };
       return MtnaWfItemsWithValuePipe;
   }());
@@ -3040,12 +3377,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 +3394,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 +3430,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],
                   }]
@@ -3139,7 +3495,7 @@
       };
       return MtnaWfApiService;
   }());
-  MtnaWfApiService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfApiService, deps: [{ token: MTNA_WF_API_TOKEN }, { token: i1__namespace$3.HttpClient }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  MtnaWfApiService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfApiService, deps: [{ token: MTNA_WF_API_TOKEN }, { token: i1__namespace$2.HttpClient }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   MtnaWfApiService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfApiService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfApiService, decorators: [{
               type: i0.Injectable,
@@ -3148,7 +3504,7 @@
           return [{ type: undefined, decorators: [{
                           type: i0.Inject,
                           args: [MTNA_WF_API_TOKEN]
-                      }] }, { type: i1__namespace$3.HttpClient }];
+                      }] }, { type: i1__namespace$2.HttpClient }];
       } });
 
   /**
@@ -3162,7 +3518,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-raised-button mat-dialog-close color=\"primary\" i18n>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"] }, { 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: MtnaWfFormItemDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -3179,16 +3535,16 @@
   var MtnaWfDialogService = /** @class */ (function () {
       function MtnaWfDialogService(dialog) {
           this.dialog = dialog;
+          this._acknowledgementText = $localize(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["Acknowledgement"], ["Acknowledgement"])));
       }
       /**
        * Display the acknowledgement the user agreed to for a given option.
        * @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'),
+              data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || this._acknowledgementText),
               disableClose: false,
               hasBackdrop: true,
               maxWidth: '500px',
@@ -3203,7 +3559,7 @@
           return this.dialog
               .open(MtnaWfAcknowledgeDialogComponent, {
               closeOnNavigation: true,
-              data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || 'Acknowledgement'),
+              data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || this._acknowledgementText),
               disableClose: true,
               hasBackdrop: true,
               maxWidth: '500px',
@@ -3218,7 +3574,14 @@
               type: i0.Injectable,
               args: [{ providedIn: 'root' }]
           }], ctorParameters: function () { return [{ type: i1__namespace.MatDialog }]; } });
+  var templateObject_1$b;
 
+  /**
+   * This service manages and interacts with an Angular FormGroup. It provides functionality
+   * to add or remove form controls dynamically, track the form's state, and notify other
+   * components about unsaved changes. This service is used to centralize form handling and
+   * state management, providing a reliableway to monitor and respond to form changes.
+   */
   var MtnaWfNgFormService = /** @class */ (function () {
       function MtnaWfNgFormService() {
           this.unsavedChanges$ = new rxjs.BehaviorSubject(false);
@@ -3378,12 +3741,13 @@
    * @export
    */
   var MtnaWfManagerService = /** @class */ (function () {
-      function MtnaWfManagerService(apiService, ngFormManager, uiService) {
+      function MtnaWfManagerService(apiService, ngFormService, uiService) {
           this.apiService = apiService;
-          this.ngFormManager = ngFormManager;
+          this.ngFormService = ngFormService;
           this.uiService = uiService;
           this.components = new Map();
           this.formChange$ = new rxjs.Subject();
+          this.progressiveFormChange$ = new rxjs.Subject();
           /** A map of all {@link FormItemValidationResult} keyed on id */
           this._formItemValidationResults = {};
           /**
@@ -3422,7 +3786,7 @@
               var newForm = this._modifyFormItem(this._mtnaForm, change);
               // modify the conditions of all effected form items
               newForm = this._modifyFormItemConditions(newForm, change);
-              this.ngFormManager.removeControl(change.id, change.parentIds);
+              this.ngFormService.removeControl(change.id, change.parentIds);
               this.formChange$.next(newForm);
           }
           else {
@@ -3432,7 +3796,7 @@
                   .subscribe(function (newItem) {
                   var newFormControl = _this.serializeMtnaFormItem(newItem);
                   if (newFormControl && _this._mtnaForm) {
-                      _this.ngFormManager.addControl(newItem.instanceId, change.parentIds, newFormControl);
+                      _this.ngFormService.addControl(newItem.instanceId, change.parentIds, newFormControl);
                       // Add the new repeatable item into the mtnaform
                       var newForm = _this._modifyFormItem(_this._mtnaForm, Object.assign(Object.assign({}, change), { id: newItem.instanceId }), newItem);
                       // Generate a list of all formitem conditions needing change & modify those items in the form
@@ -3462,6 +3826,16 @@
       MtnaWfManagerService.prototype.getFormItemValidationResults = function () {
           return this._formItemValidationResults;
       };
+      /**
+       * Returns a new MtnaForm using the MtnaForm & reacive form values from the MtnaWfNgFormService's internal form.
+       *
+       * @param ngFormValues JSON object of ngFormValues
+       * @returns
+       */
+      MtnaWfManagerService.prototype.updateForm = function (ngFormValues) {
+          var currentForm = this.ngFormService.getFormValue();
+          return Object.assign(Object.assign({}, currentForm), { items: insertFormItemValues(currentForm, ngFormValues, this.uiService.getDisabledStates(), this.dynamicFormConditional, this.dynamicWebFormItemBuilder) });
+      };
       /**
        * Returns a new MtnaForm using the previous MtnaForm & reactive form values.
        *
@@ -3592,7 +3966,7 @@
                   return item;
               }
           }
-          if (webFormTs.isForm(item) || webFormTs.isSection(item) || webFormTs.isFormItemGroupImpl(item) || webFormTs.isRepeatableItem(item)) {
+          if (webFormTs.isForm(item) || webFormTs.isSection(item) || isProgressiveFormSection(item) || webFormTs.isFormItemGroupImpl(item) || webFormTs.isRepeatableItem(item)) {
               var items = __spreadArray([], __read(item.items));
               var indexToModify = item.items.findIndex(function (i) { return i.instanceId === change.parentIds[0]; });
               var itemToModify = item.items[indexToModify];
@@ -3899,7 +4273,7 @@
               }
           }
           // Only revalidate controls actually changes
-          var form = this.ngFormManager.getForm();
+          var form = this.ngFormService.getForm();
           if (form) {
               try {
                   for (var controlIdsToRevalidate_1 = __values(controlIdsToRevalidate), controlIdsToRevalidate_1_1 = controlIdsToRevalidate_1.next(); !controlIdsToRevalidate_1_1.done; controlIdsToRevalidate_1_1 = controlIdsToRevalidate_1.next()) {
@@ -3946,38 +4320,21 @@
           return model.uri === ((_a = result.getFieldByName('uri')) === null || _a === void 0 ? void 0 : _a.value);
       };
       return MtnaWfResourceSearchSelectionService;
-  }(i1$5.MtnaSearchSelectionService));
+  }(i1$4.MtnaSearchSelectionService));
   MtnaWfResourceSearchSelectionService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchSelectionService, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
   MtnaWfResourceSearchSelectionService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchSelectionService });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfResourceSearchSelectionService, decorators: [{
               type: i0.Injectable
           }] });
 
-  /* eslint-disable @angular-eslint/component-selector */
-  var MtnaWfFormDisablerComponent = /** @class */ (function () {
-      function MtnaWfFormDisablerComponent() {
-          this.formDisabled = false;
+  var _BaseFormComponent = i4.mixinDestroyNotifier(/** @class */ (function () {
+      function class_1() {
       }
-      return MtnaWfFormDisablerComponent;
-  }());
-  MtnaWfFormDisablerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormDisablerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: { formDisabled: "formDisabled" }, ngImport: i0__namespace, template: "\n    <fieldset [disabled]=\"formDisabled\">\n      <ng-content></ng-content>\n    </fieldset>\n  ", isInline: true, styles: ["\n      fieldset {\n        display: block;\n        margin: unset;\n        padding: unset;\n        border: unset;\n      }\n    "] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: '[formDisabled]',
-                      template: "\n    <fieldset [disabled]=\"formDisabled\">\n      <ng-content></ng-content>\n    </fieldset>\n  ",
-                      styles: [
-                          "\n      fieldset {\n        display: block;\n        margin: unset;\n        padding: unset;\n        border: unset;\n      }\n    ",
-                      ],
-                  }]
-          }], propDecorators: { formDisabled: [{
-                  type: i0.Input
-              }] } });
-
-  var MtnaWfFormComponent = /** @class */ (function (_super) {
-      __extends(MtnaWfFormComponent, _super);
-      function MtnaWfFormComponent(mtnaFormManager, ngFormService, uiService) {
+      return class_1;
+  }()));
+  var MtnaWfBaseFormComponent = /** @class */ (function (_super) {
+      __extends(MtnaWfBaseFormComponent, _super);
+      function MtnaWfBaseFormComponent(mtnaFormManager, ngFormService, uiService) {
           var _this = _super.call(this) || this;
           _this.mtnaFormManager = mtnaFormManager;
           _this.ngFormService = ngFormService;
@@ -3999,14 +4356,14 @@
           _this._subscribeAndEmitMtnaFormChanges();
           return _this;
       }
-      Object.defineProperty(MtnaWfFormComponent.prototype, "annotations", {
+      Object.defineProperty(MtnaWfBaseFormComponent.prototype, "annotations", {
           set: function (map) {
               this.uiService.registerAnnotations(map);
           },
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(MtnaWfFormComponent.prototype, "emitStatusOnMtnaFormChange", {
+      Object.defineProperty(MtnaWfBaseFormComponent.prototype, "emitStatusOnMtnaFormChange", {
           /** Whether to emit the status of each step each time the {@link mtnaForm} is set to a new value. Defaults to false.*/
           get: function () {
               return this._emitStatusOnMtnaFormChange;
@@ -4017,7 +4374,7 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(MtnaWfFormComponent.prototype, "mtnaForm", {
+      Object.defineProperty(MtnaWfBaseFormComponent.prototype, "mtnaForm", {
           get: function () {
               return this._mtnaForm;
           },
@@ -4043,7 +4400,7 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(MtnaWfFormComponent.prototype, "steps", {
+      Object.defineProperty(MtnaWfBaseFormComponent.prototype, "steps", {
           /**
            * The form can contain sections not included in the steps.
            * To avoid misalignment of steps-to-sections, we map each step to
@@ -4074,7 +4431,7 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(MtnaWfFormComponent.prototype, "readonly", {
+      Object.defineProperty(MtnaWfBaseFormComponent.prototype, "readonly", {
           get: function () {
               return this.readonly$.value;
           },
@@ -4087,20 +4444,20 @@
           enumerable: false,
           configurable: true
       });
-      MtnaWfFormComponent.prototype.ngAfterViewInit = function () {
+      MtnaWfBaseFormComponent.prototype.ngAfterViewInit = function () {
           var afterViewInitDate = new Date();
           var secondsToRender = (afterViewInitDate.getTime() - this._constructionDate.getTime()) / 1000;
           console.warn('[MtnaFormComponent] afterViewInit - took ', secondsToRender, ' to render');
       };
-      MtnaWfFormComponent.prototype.ngOnDestroy = function () {
+      MtnaWfBaseFormComponent.prototype.ngOnDestroy = function () {
           _super.prototype.ngOnDestroy.call(this);
           this.uiService.resetComponentMap();
       };
-      MtnaWfFormComponent.prototype._trackByInstanceId = function (index, formItem) {
+      MtnaWfBaseFormComponent.prototype._trackByInstanceId = function (index, formItem) {
           return formItem.instanceId;
       };
       /** Subscribe and emit form status changes for the steps. */
-      MtnaWfFormComponent.prototype._checkAndSubscribeToFormStatus = function () {
+      MtnaWfBaseFormComponent.prototype._checkAndSubscribeToFormStatus = function () {
           var _this = this;
           // Only subscribe once both the steps and the angular have been initialized
           if (this.ngForm && this._steps) {
@@ -4121,9 +4478,9 @@
       /**
        * Find a form control with the given name, then emit it's status.
        *
-       * @param name — The unique name of the form cotrol to find and emit the status for.
+       * @param name — The unique name of the form control to find and emit the status for.
        */
-      MtnaWfFormComponent.prototype._emitFormControlStatus = function (name) {
+      MtnaWfBaseFormComponent.prototype._emitFormControlStatus = function (name) {
           if (this.ngForm) {
               var control = findFormControl(name, this.ngForm);
               if (control) {
@@ -4137,7 +4494,7 @@
       /**
        * @param emitInitialValues Whether to emit initial step values or just listen for future changes
        */
-      MtnaWfFormComponent.prototype._emitInitialStepsStatusAndSubscribeToChanges = function (emitInitialValues) {
+      MtnaWfBaseFormComponent.prototype._emitInitialStepsStatusAndSubscribeToChanges = function (emitInitialValues) {
           var _this = this;
           if (this._steps && this.ngForm) {
               this._unsubscribeFromNgFormChanges();
@@ -4154,9 +4511,9 @@
                               });
                           }
                           // Subscribe to status changes of each step & emit on change
-                          this_1._ngFormStatusChangeSub.add(control.statusChanges
-                              .pipe(operators.takeUntil(this_1.destroyed$), operators.distinctUntilChanged())
-                              .subscribe(function (status) { return _this.status.emit({ id: key, status: status }); }));
+                          this_1._ngFormStatusChangeSub.add(control.statusChanges.pipe(operators.takeUntil(this_1.destroyed$), operators.distinctUntilChanged()).subscribe(function (status) {
+                              _this.status.emit({ id: key, status: status });
+                          }));
                       }
                   }
               };
@@ -4172,7 +4529,7 @@
        * When the form is not readonly, we subscribe to form status & form item changes, so we can emit them.
        * When the form is readonly, we do not want to emit any changes, so we unsubscribe.
        */
-      MtnaWfFormComponent.prototype._subscribeAndEmitMtnaFormChanges = function () {
+      MtnaWfBaseFormComponent.prototype._subscribeAndEmitMtnaFormChanges = function () {
           var _this = this;
           this.readonly$
               .pipe(operators.takeUntil(this.destroyed$), 
@@ -4188,7 +4545,7 @@
               }
           });
       };
-      MtnaWfFormComponent.prototype._handleFormSerialization = function (form) {
+      MtnaWfBaseFormComponent.prototype._handleFormSerialization = function (form) {
           // Get the registered form from the service if it exists
           this._hasPreviousForm = this.ngFormService.hasForm();
           if (this._hasPreviousForm) {
@@ -4206,39 +4563,31 @@
        * Adds or removes a FormItem whenever a new MtnaWfFormItemChange occurs,
        * and emits a new MtnaForm.
        */
-      MtnaWfFormComponent.prototype._subscribeToMtnaFormItemChanges = function () {
+      MtnaWfBaseFormComponent.prototype._subscribeToMtnaFormItemChanges = function () {
           var _this = this;
           this._unsubscribeFromMtnaFormChanges();
           this._mtnaFormItemChangeSub = this.mtnaFormManager.formChanges
               .pipe(operators.takeUntil(this.destroyed$), operators.skipWhile(function (change) { return !change; }))
               .subscribe(function (newForm) { return _this.mtnaFormChange.emit(newForm); });
       };
-      MtnaWfFormComponent.prototype._unsubscribeFromNgFormChanges = function () {
+      MtnaWfBaseFormComponent.prototype._unsubscribeFromNgFormChanges = function () {
           if (!!this._ngFormStatusChangeSub && !this._ngFormStatusChangeSub.closed) {
               this._ngFormStatusChangeSub.unsubscribe();
           }
       };
-      MtnaWfFormComponent.prototype._unsubscribeFromMtnaFormChanges = function () {
+      MtnaWfBaseFormComponent.prototype._unsubscribeFromMtnaFormChanges = function () {
           if (!!this._mtnaFormItemChangeSub && !this._mtnaFormItemChangeSub.closed) {
               this._mtnaFormItemChangeSub.unsubscribe();
           }
       };
-      return MtnaWfFormComponent;
-  }(i1$1.mixinDestroyNotifier(/** @class */ (function () {
-      function class_1() {
-      }
-      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 });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormComponent, decorators: [{
+      return MtnaWfBaseFormComponent;
+  }(_BaseFormComponent));
+  MtnaWfBaseFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormComponent, deps: [{ token: MtnaWfManagerService }, { token: MtnaWfNgFormService }, { token: MtnaWfUIService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfBaseFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseFormComponent, selector: "ng-component", inputs: { annotations: "annotations", emitStatusOnMtnaFormChange: "emitStatusOnMtnaFormChange", mtnaForm: "mtnaForm", steps: "steps", readonly: "readonly" }, outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange" }, usesInheritance: true, ngImport: i0__namespace, template: "", isInline: true });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfBaseFormComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'mtna-form',
-                      templateUrl: './form.component.html',
-                      styleUrls: ['./form.component.scss'],
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                      encapsulation: i0.ViewEncapsulation.None,
+                      template: "",
                   }]
           }], ctorParameters: function () { return [{ type: MtnaWfManagerService }, { type: MtnaWfNgFormService }, { type: MtnaWfUIService }]; }, propDecorators: { annotations: [{
                   type: i0.Input
@@ -4258,18 +4607,62 @@
                   type: i0.Output
               }] } });
 
+  /* eslint-disable @angular-eslint/component-selector */
+  var MtnaWfFormDisablerComponent = /** @class */ (function () {
+      function MtnaWfFormDisablerComponent() {
+          this.formDisabled = false;
+      }
+      return MtnaWfFormDisablerComponent;
+  }());
+  MtnaWfFormDisablerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfFormDisablerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: { formDisabled: "formDisabled" }, ngImport: i0__namespace, template: "\n    <fieldset [disabled]=\"formDisabled\">\n      <ng-content></ng-content>\n    </fieldset>\n  ", isInline: true, styles: ["\n      fieldset {\n        display: block;\n        margin: unset;\n        padding: unset;\n        border: unset;\n      }\n    "] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormDisablerComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: '[formDisabled]',
+                      template: "\n    <fieldset [disabled]=\"formDisabled\">\n      <ng-content></ng-content>\n    </fieldset>\n  ",
+                      styles: [
+                          "\n      fieldset {\n        display: block;\n        margin: unset;\n        padding: unset;\n        border: unset;\n      }\n    ",
+                      ],
+                  }]
+          }], propDecorators: { formDisabled: [{
+                  type: i0.Input
+              }] } });
+
+  /* eslint-disable @angular-eslint/no-outputs-metadata-property */
+  var MtnaWfFormComponent = /** @class */ (function (_super) {
+      __extends(MtnaWfFormComponent, _super);
+      function MtnaWfFormComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return MtnaWfFormComponent;
+  }(MtnaWfBaseFormComponent));
+  MtnaWfFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormComponent, selector: "mtna-form", 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: [{
+                      selector: 'mtna-form',
+                      templateUrl: './form.component.html',
+                      styleUrls: ['./form.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                      encapsulation: i0.ViewEncapsulation.None,
+                      outputs: ['status', 'focusedSection', 'mtnaFormChange'],
+                  }]
+          }] });
+
   var MtnaWfFormDisablerModule = /** @class */ (function () {
       function MtnaWfFormDisablerModule() {
       }
       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],
                   }]
@@ -4282,12 +4675,19 @@
       }
       return class_1;
   }()), 'primary');
+  /**
+   * A component that represents a single step in a form stepper.
+   * NOTE:
+   *  - disabled: property on the FormStep used to determine if the step is disabled. This will affect the disabled property and the clickable property.
+   *  - clickable: property on the FormStep used to determine if the step is clickable. This does not affect the disabled property.
+   */
   var MtnaWfFormStepComponent = /** @class */ (function (_super) {
       __extends(MtnaWfFormStepComponent, _super);
       function MtnaWfFormStepComponent(elementRef) {
           var _this = _super.call(this, elementRef) || this;
           _this.disabled = false;
           _this._clickable = true;
+          _this.notApplicableText = $localize(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["Not Applicable"], ["Not Applicable"])));
           return _this;
       }
       Object.defineProperty(MtnaWfFormStepComponent.prototype, "step", {
@@ -4296,7 +4696,7 @@
           },
           set: function (step) {
               this._step = step;
-              this.disabled = step.status === 'DISABLED';
+              this.disabled = step.status === 'DISABLED' || step.disabled;
           },
           enumerable: false,
           configurable: true
@@ -4323,7 +4723,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\" i18n>Optional</p>\n    <p *ngIf=\"disabled\" class=\"step-status\">{{ step.disabledText || notApplicableText }}</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: i4__namespace.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: [{
@@ -4347,6 +4747,7 @@
               }], incompleteIcon: [{
                   type: i0.Input
               }] } });
+  var templateObject_1$a;
 
   /* eslint-disable @angular-eslint/no-inputs-metadata-property */
   var _FormStepMixinBase = i3.mixinColor(/** @class */ (function () {
@@ -4363,6 +4764,8 @@
           _this.collapsed = false;
           _this._steps = [];
           _this.selected = new i0.EventEmitter();
+          _this._collapsedText = $localize(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["View All"], ["View All"])));
+          _this._hideText = $localize(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["Hide"], ["Hide"])));
           return _this;
       }
       Object.defineProperty(MtnaWfFormStepGroupComponent.prototype, "steps", {
@@ -4379,7 +4782,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' && step.status !== 'PLACEHOLDER'\"\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\" i18n>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 ? _collapsedText : _hideText\"\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: [{
@@ -4399,6 +4802,7 @@
               }], selected: [{
                   type: i0.Output
               }] } });
+  var templateObject_1$9, templateObject_2$1;
 
   /* eslint-disable @angular-eslint/no-inputs-metadata-property */
   var _FormStepperMixinBase = i3.mixinColor(/** @class */ (function () {
@@ -4417,12 +4821,27 @@
       __extends(MtnaWfFormStepperComponent, _super);
       function MtnaWfFormStepperComponent(elementRef) {
           var _this = _super.call(this, elementRef) || this;
-          /** Form steps */
-          _this.steps = [];
+          _this._steps = [];
           /** When a step is selected */
           _this.selected = new i0.EventEmitter();
+          _this.groupStepCollapsedMap = {};
+          _this.notApplicableText = $localize(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["Not Applicable"], ["Not Applicable"])));
+          _this._collapsedText = $localize(templateObject_2 || (templateObject_2 = __makeTemplateObject(["View All"], ["View All"])));
+          _this._hideText = $localize(templateObject_3 || (templateObject_3 = __makeTemplateObject(["Hide"], ["Hide"])));
           return _this;
       }
+      Object.defineProperty(MtnaWfFormStepperComponent.prototype, "steps", {
+          /** Form steps */
+          get: function () {
+              return this._steps;
+          },
+          set: function (steps) {
+              this._steps = steps;
+              this.createGroupStepCollapsedMap(steps);
+          },
+          enumerable: false,
+          configurable: true
+      });
       /**
        * Improves effeciency of the *ngFor loop that creates the steps.
        *
@@ -4433,15 +4852,39 @@
       MtnaWfFormStepperComponent.prototype._trackStep = function (index, step) {
           return step.instanceId || index;
       };
+      /**
+       * Prevents click event if this step is not clickable
+       */
+      MtnaWfFormStepperComponent.prototype._haltClickEvent = function (event, step) {
+          var clickable = step.status !== 'DISABLED' && step.status !== 'PLACEHOLDER';
+          if (!clickable) {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+          }
+      };
+      MtnaWfFormStepperComponent.prototype.createGroupStepCollapsedMap = function (steps) {
+          var _this = this;
+          steps.forEach(function (step) {
+              if (isFormStepGroup(step)) {
+                  _this.groupStepCollapsedMap[step.instanceId] = step.collapsed;
+              }
+          });
+          console.warn('groupStepCollapsedMap', this.groupStepCollapsedMap);
+      };
+      MtnaWfFormStepperComponent.prototype.toggleGroupStep = function (step) {
+          this.groupStepCollapsedMap[step.instanceId] = !this.groupStepCollapsedMap[step.instanceId];
+          console.warn('groupStepCollapsedMap', this.groupStepCollapsedMap);
+      };
       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  </ng-container>\n</ol>\n\n<ng-template #singleStep let-step>\n  <ng-container *ngIf=\"step | coerceFormStep as singleStep\">\n    <li\n      fxLayout=\"row\"\n      fxLayouAlign=\"start center\"\n      [ngClass]=\"{\n        'disabled-step': singleStep.status === 'DISABLED',\n        'active-step': singleStep.active,\n        'clickable': singleStep.status !== 'DISABLED' && singleStep.status !== 'PLACEHOLDER'\n      }\"\n    >\n      <ng-container [ngTemplateOutlet]=\"stepContent\" [ngTemplateOutletContext]=\"{ $implicit: singleStep }\"></ng-container>\n    </li>\n  </ng-container>\n</ng-template>\n\n<ng-template #groupStep let-step>\n  <ng-container *ngIf=\"step | coerceFormStepGroup as groupStepParent\">\n    <li fxLayout=\"column\" fxLayoutAlign=\"start start\" [class.child-step-active]=\"(groupStepParent.steps | childStepActive) && groupStepCollapsedMap[groupStepParent.instanceId]\">\n      <div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"mtna-wf-step-item-content\">\n        <button fxFlex mat-button class=\"step-button\" [attr.aria-label]=\"groupStepParent | getStepAriaLabel : groupStepCollapsedMap[groupStepParent.instanceId]\" (click)=\"toggleGroupStep(step)\">\n          <mtna-status-circle [color]=\"color\" [circleNumber]=\"groupStepParent.num\" [incompleteIcon]=\"incompleteIcon\"></mtna-status-circle>\n          <div fxLayout=\"row\" class=\"step-button-label-wrapper\" fxFlex=\"100\">\n            <p class=\"step-title\">{{ groupStepParent.label }}</p>\n          </div>\n          <mat-icon>{{ groupStepCollapsedMap[step.instanceId] ? 'expand_more' : 'expand_less' }}</mat-icon>\n        </button>\n      </div>\n      <ol class=\"group-step-list\">\n        <ng-container\n          *ngFor=\"let groupStep of step.steps | slice : 0 : (groupStepCollapsedMap[step.instanceId] ? 0 : step.steps.length); let last = last\"\n        >\n          <!-- All children in the steps property of FormStepGroup are FormStep(s). Only using coercion here to assist in defining properties we can use. -->\n          <li\n            *ngIf=\"groupStep | coerceFormStep as groupStepChild\"\n            fxLayout=\"row\"\n            fxLayouAlign=\"start center\"\n            [ngClass]=\"{\n              'disabled-step': groupStepChild.status === 'DISABLED',\n              'active-step': groupStepChild.active,\n              'clickable': groupStepChild.status !== 'DISABLED' && groupStepChild.status !== 'PLACEHOLDER',\n              'group-step': true\n            }\"\n          >\n            <ng-container [ngTemplateOutlet]=\"stepContent\" [ngTemplateOutletContext]=\"{ $implicit: groupStepChild, isChildStep: true }\"></ng-container>\n          </li>\n        </ng-container>\n      </ol>\n    </li>\n  </ng-container>\n</ng-template>\n\n<!-- The individual, stand-alone step template -->\n<ng-template #stepContent let-step let-isChildStep=\"isChildStep\">\n  <div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"mtna-wf-step-item-content\">\n    <mat-divider *ngIf=\"isChildStep\" [vertical]=\"true\"></mat-divider>\n    <button fxFlex mat-button class=\"step-button\" [attr.aria-label]=\"step | getStepAriaLabel\" [disabled]=\"step.status === 'DISABLED' || step.status === 'PLACEHOLDER'\" (click)=\"_haltClickEvent($event, step)\">\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\" class=\"step-button-label-wrapper\">\n        <p class=\"step-title\">{{ step.label }}</p>\n        <p *ngIf=\"step.optional && step.status !== 'DISABLED'\" class=\"step-status\" i18n>Optional</p>\n        <p *ngIf=\"step.status === 'DISABLED'\" class=\"step-status\">{{ step.disabledText || notApplicableText }}</p>\n      </div>\n    </button>\n  </div>\n</ng-template>\n", styles: ["mtna-wf-stepper{border-right-width:1px;border-right-style:solid;overflow-y:auto}mtna-wf-stepper li{padding:0 0 0 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-stepper 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-stepper li.disabled-step{font-style:italic}mtna-wf-stepper li.clickable{cursor:pointer}mtna-wf-stepper li.active-step:after,mtna-wf-stepper li.child-step-active:after{transform-origin:top;transform:scaleY(1)}mtna-wf-stepper li:not(.group-step){padding-left:0}mtna-wf-stepper li .mtna-wf-step-item-content{width:100%}mtna-wf-stepper li .mtna-wf-step-item-content mat-divider.mat-divider.mat-divider-vertical{height:100%}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button{text-align:left;height:-moz-fit-content;height:fit-content;min-height:36px;line-height:20px;border:none;padding:4px 13px 4px 8px;font-weight:400;border-radius:0}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper{align-items:center;display:flex;flex-direction:row}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper .step-button-label-wrapper{width:calc(100% - 48px - 8px)}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper .step-button-label-wrapper .step-title{margin:0;overflow:hidden;white-space:wrap}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper .step-button-label-wrapper .step-status{margin:0}mtna-wf-stepper li.active-step .mtna-wf-step-item-content .mat-button.step-button{font-weight:500}mtna-wf-stepper li .step-title,mtna-wf-stepper li .step-status{margin:0}mtna-wf-stepper ol:not(.group-step-list){padding:0}mtna-wf-stepper ol.group-step-list{padding-left:16px;width:calc(100% - 16px)}mtna-wf-stepper ol li.group-step{padding-left:0;padding-right:0}\n"], components: [{ 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: i4__namespace.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], 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"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.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$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"] }], pipes: { "mtnaWfStepGroupPipe": MtnaWfFormStepGroupPipe, "coerceFormStep": CoerceFormStepPipe, "coerceFormStepGroup": CoerceFormStepGroupPipe, "childStepActive": ChildStepActivePipe, "getStepAriaLabel": GetStepAriaLabel, "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: MtnaWfFormStepperComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'mtna-wf-stepper',
-                      templateUrl: './form-stepper.component.html',
+                      // templateUrl: './form-stepper.component.html',
+                      templateUrl: './form-stepper-new.component.html',
                       styleUrls: ['./form-stepper.component.scss'],
                       inputs: ['color'],
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -4454,6 +4897,7 @@
               }], selected: [{
                   type: i0.Output
               }] } });
+  var templateObject_1$8, templateObject_2, templateObject_3;
 
   var MtnaWfFormStepperModule = /** @class */ (function () {
       function MtnaWfFormStepperModule() {
@@ -4461,42 +4905,54 @@
       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,
+          i4.MtnaStatusCircleModule,
           i3.MatRippleModule,
-          i3$1.MatButtonModule,
+          i3$2.MatButtonModule,
           i6$1.MatTooltipModule,
           i5.MatIconModule,
-          MtnaWfFormStepGroupPipeModule], exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent] });
+          MtnaWfFormStepGroupPipeModule,
+          CoerceFormStepGroupPipeModule,
+          CoerceFormStepPipeModule,
+          ChildStepActivePipeModule,
+          GetStepAriaLabelModule], 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,
+              i4.MtnaStatusCircleModule,
               i3.MatRippleModule,
-              i3$1.MatButtonModule,
+              i3$2.MatButtonModule,
               i6$1.MatTooltipModule,
               i5.MatIconModule,
               MtnaWfFormStepGroupPipeModule,
+              CoerceFormStepGroupPipeModule,
+              CoerceFormStepPipeModule,
+              ChildStepActivePipeModule,
+              GetStepAriaLabelModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperModule, decorators: [{
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           flexLayout.FlexLayoutModule,
                           i2$2.MatDividerModule,
-                          i1$1.MtnaStatusCircleModule,
+                          i4.MtnaStatusCircleModule,
                           i3.MatRippleModule,
-                          i3$1.MatButtonModule,
+                          i3$2.MatButtonModule,
                           i6$1.MatTooltipModule,
                           i5.MatIconModule,
                           MtnaWfFormStepGroupPipeModule,
+                          CoerceFormStepGroupPipeModule,
+                          CoerceFormStepPipeModule,
+                          ChildStepActivePipeModule,
+                          GetStepAriaLabelModule
                       ],
-                      exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent],
                       declarations: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent],
+                      exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent],
                   }]
           }] });
 
@@ -4522,6 +4978,18 @@
           enumerable: false,
           configurable: true
       });
+      Object.defineProperty(MtnaWfStepCardComponent.prototype, "step", {
+          // @Input() step: FormStep | null | undefined;
+          get: function () {
+              return this._step;
+          },
+          set: function (step) {
+              this._step = step;
+              console.warn({ stepInsideStepCard: step });
+          },
+          enumerable: false,
+          configurable: true
+      });
       MtnaWfStepCardComponent.prototype.handleFocusChange = function (event) {
           if (!!this.step && !!event && !this.step.active) {
               this.focused.emit(this.step);
@@ -4530,7 +4998,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\" i18n>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$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1__namespace$3.MatCardHeader, selector: "mat-card-header" }, { type: i4__namespace.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$3.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1__namespace$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1__namespace$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1__namespace$3.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 +5026,34 @@
       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$1.A11yModule,
+          i3$1.CommonModule,
+          i1$5.MatCardModule,
+          i4.MtnaStatusCircleModule,
+          MtnaWfSanitizeHtmlPipeModule,
+          i2$2.MatDividerModule,
+          MtnaWfFormItemModule], exports: [MtnaWfStepCardComponent] });
+  MtnaWfStepCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardModule, imports: [[
+              i4$1.A11yModule,
+              i3$1.CommonModule,
+              i1$5.MatCardModule,
+              i4.MtnaStatusCircleModule,
+              MtnaWfSanitizeHtmlPipeModule,
+              i2$2.MatDividerModule,
+              MtnaWfFormItemModule,
+          ]] });
   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$1.A11yModule,
+                          i3$1.CommonModule,
+                          i1$5.MatCardModule,
+                          i4.MtnaStatusCircleModule,
+                          MtnaWfSanitizeHtmlPipeModule,
+                          i2$2.MatDividerModule,
+                          MtnaWfFormItemModule,
+                      ],
                       declarations: [MtnaWfStepCardComponent],
                       exports: [MtnaWfStepCardComponent],
                   }]
@@ -4576,7 +5066,7 @@
   }());
   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,
+          i3$1.CommonModule,
           flexLayout.FlexLayoutModule,
           i6.FormsModule,
           MtnaWfFormItemModule,
@@ -4587,7 +5077,7 @@
           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,
+              i3$1.CommonModule,
               flexLayout.FlexLayoutModule,
               i6.FormsModule,
               MtnaWfFormItemModule,
@@ -4602,7 +5092,7 @@
               args: [{
                       imports: [
                           i4$1.A11yModule,
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           flexLayout.FlexLayoutModule,
                           i6.FormsModule,
                           MtnaWfFormItemModule,
@@ -4620,8 +5110,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 +5123,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  [aria-label]=\"item.option.option.name\"\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: i4__namespace.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 +5134,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 +5142,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,
+          i4.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,
+              i4.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,
+                          i4.MtnaHighlightModule,
+                      ],
                       declarations: [MtnaWfBooleanComponent],
                       exports: [MtnaWfBooleanComponent],
                   }]
@@ -4665,10 +5177,11 @@
 
   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();
+          _this._acknowledgementText = $localize(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["Acknowledged. Click to view the agreement."], ["Acknowledged. Click to view the agreement."])));
           return _this;
       }
       MtnaWfCheckboxComponent.prototype.handleChange = function (change, index) {
@@ -4716,7 +5229,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 +5242,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    <div *ngIf=\"!!control && !!control.controls && !!control.controls[i]\" fxLayout=\"row\">\n      <mat-checkbox\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      </mat-checkbox>\n      <button\n        *ngIf=\"opt.acknowledgement && control.controls[i].value\"\n        mat-icon-button\n        class=\"acknowledge-verification-button\"\n        [attr.aria-label]=\"_acknowledgementText\"\n        [matTooltip]=\"_acknowledgementText\"\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    </div>\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 .mat-checkbox-inner-container{bottom:1px}mtna-wf-checkbox-item .acknowledge-verification-button{vertical-align:top;width:18px;height:18px;line-height:18px;margin-left:4px}mtna-wf-checkbox-item .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$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4__namespace.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { 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: 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 +5253,25 @@
                       encapsulation: i0.ViewEncapsulation.None,
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
-          }], ctorParameters: function () { return [{ type: MtnaWfDialogService }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: MtnaWfDialogService }]; } });
+  var templateObject_1$7;
+
+  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, i3$2.MatButtonModule], 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, i3$2.MatButtonModule]] });
+  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, i3$2.MatButtonModule],
+                      declarations: [MtnaWfFormItemDialogComponent],
+                      exports: [MtnaWfFormItemDialogComponent],
+                  }]
+          }] });
 
   var MtnaWfCheckboxModule = /** @class */ (function () {
       function MtnaWfCheckboxModule() {
@@ -4749,45 +5279,51 @@
       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,
+          flexLayout.FlexLayoutModule,
           i6.FormsModule,
-          i1$7.MatFormFieldModule,
+          i1$6.MatFormFieldModule,
           i2$4.MatCheckboxModule,
-          i3$1.MatButtonModule,
+          i3$2.MatButtonModule,
           i5.MatIconModule,
           i6$1.MatTooltipModule,
           MtnaWfFormItemModule,
-          i1$1.MtnaHighlightModule,
-          i6.ReactiveFormsModule], exports: [MtnaWfCheckboxComponent] });
+          i4.MtnaHighlightModule,
+          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,
+              flexLayout.FlexLayoutModule,
               i6.FormsModule,
-              i1$7.MatFormFieldModule,
+              i1$6.MatFormFieldModule,
               i2$4.MatCheckboxModule,
-              i3$1.MatButtonModule,
+              i3$2.MatButtonModule,
               i5.MatIconModule,
               i6$1.MatTooltipModule,
               MtnaWfFormItemModule,
-              i1$1.MtnaHighlightModule,
+              i4.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,
+                          flexLayout.FlexLayoutModule,
                           i6.FormsModule,
-                          i1$7.MatFormFieldModule,
+                          i1$6.MatFormFieldModule,
                           i2$4.MatCheckboxModule,
-                          i3$1.MatButtonModule,
+                          i3$2.MatButtonModule,
                           i5.MatIconModule,
                           i6$1.MatTooltipModule,
                           MtnaWfFormItemModule,
-                          i1$1.MtnaHighlightModule,
+                          i4.MtnaHighlightModule,
                           i6.ReactiveFormsModule,
+                          MtnaWfFormItemDialogModule,
                       ],
                       declarations: [MtnaWfCheckboxComponent],
                       exports: [MtnaWfCheckboxComponent],
@@ -4796,12 +5332,13 @@
 
   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
           _this.rangeLimits = { end: null, start: null };
+          _this._dateText = $localize(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["Date"], ["Date"])));
           // We need to check to ensure 'moment' & 'moment-jdateformatparser' scripts have been added to angular.json so that
           // the DateFormItemComponent doesn't break when attempting to format SimpleDateFormat string to Moment format string
           MtnaWfDateComponent.dateFormItemComponentInstances++;
@@ -4857,8 +5394,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: i4__namespace.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 || _dateText }}</mat-label>\n  <input\n    matInput\n    [formControl]=\"control\"\n    [matDatepicker]=\"picker\"\n    [max]=\"rangeLimits?.end\"\n    [min]=\"rangeLimits?.start\"\n    placeholder=\"Choose a date\"\n    i18n-placeholder\n    [required]=\"item.required\"\n    [disabled]=\"readonly || control.disabled\"\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$4.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: i4__namespace.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$4.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: i3__namespace$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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$4.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$4.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,15 +5405,16 @@
                       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: i4__namespace.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 templateObject_1$6;
 
   var MtnaWfDateModule = /** @class */ (function () {
       function MtnaWfDateModule() {
@@ -4884,23 +5422,23 @@
       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,
+          i1$6.MatFormFieldModule,
           i5$1.MatInputModule,
-          i3$3.MatDatepickerModule,
+          i3$4.MatDatepickerModule,
           materialMomentAdapter.MatMomentDateModule,
-          i1$1.MtnaHighlightModule,
+          i4.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,
+              i1$6.MatFormFieldModule,
               i5$1.MatInputModule,
-              i3$3.MatDatepickerModule,
+              i3$4.MatDatepickerModule,
               materialMomentAdapter.MatMomentDateModule,
-              i1$1.MtnaHighlightModule,
+              i4.MtnaHighlightModule,
               i6.ReactiveFormsModule,
               MtnaWfGetFormControlErrorPipeModule,
           ]] });
@@ -4908,13 +5446,13 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i6.FormsModule,
-                          i1$7.MatFormFieldModule,
+                          i1$6.MatFormFieldModule,
                           i5$1.MatInputModule,
-                          i3$3.MatDatepickerModule,
+                          i3$4.MatDatepickerModule,
                           materialMomentAdapter.MatMomentDateModule,
-                          i1$1.MtnaHighlightModule,
+                          i4.MtnaHighlightModule,
                           i6.ReactiveFormsModule,
                           MtnaWfGetFormControlErrorPipeModule,
                       ],
@@ -4926,7 +5464,9 @@
   var MtnaWfDateRangeComponent = /** @class */ (function (_super) {
       __extends(MtnaWfDateRangeComponent, _super);
       function MtnaWfDateRangeComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.toText = $localize(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["to"], ["to"])));
+          return _this;
       }
       Object.defineProperty(MtnaWfDateRangeComponent.prototype, "item", {
           get: function () {
@@ -4944,7 +5484,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\"> {{toText}} </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: i4__namespace.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: [{
@@ -4954,6 +5494,7 @@
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
           }] });
+  var templateObject_1$5;
 
   var MtnaWfDateRangeModule = /** @class */ (function () {
       function MtnaWfDateRangeModule() {
@@ -4961,16 +5502,16 @@
       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,
-          i1$1.MtnaHighlightModule,
+  MtnaWfDateRangeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfDateRangeModule, declarations: [MtnaWfDateRangeComponent], imports: [i3$1.CommonModule,
+          i4.MtnaHighlightModule,
           MtnaWfDateModule,
           flexLayout.FlexLayoutModule,
           i6.FormsModule,
           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,
-              i1$1.MtnaHighlightModule,
+              i3$1.CommonModule,
+              i4.MtnaHighlightModule,
               MtnaWfDateModule,
               flexLayout.FlexLayoutModule,
               i6.FormsModule,
@@ -4981,8 +5522,8 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
-                          i1$1.MtnaHighlightModule,
+                          i3$1.CommonModule,
+                          i4.MtnaHighlightModule,
                           MtnaWfDateModule,
                           flexLayout.FlexLayoutModule,
                           i6.FormsModule,
@@ -5002,7 +5543,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\" [panelClass]=\"'mtna-wf-dropdown-item__select-panel'\" [required]=\"item.required\" (selectionChange)=\"selectionChange($event)\">\n    <mat-option *ngIf=\"!item.required\" i18n>-- 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$4.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$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: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$4.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$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4__namespace$2.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,11 +5561,11 @@
       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,
+          i1$6.MatFormFieldModule,
           i2.MatSelectModule,
-          i1$1.MtnaHighlightModule,
+          i4.MtnaHighlightModule,
           i4$2.MatListModule,
           i5.MatIconModule,
           MtnaWfGetFormControlErrorPipeModule,
@@ -5032,11 +5573,11 @@
           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,
+              i1$6.MatFormFieldModule,
               i2.MatSelectModule,
-              i1$1.MtnaHighlightModule,
+              i4.MtnaHighlightModule,
               i4$2.MatListModule,
               i5.MatIconModule,
               MtnaWfGetFormControlErrorPipeModule,
@@ -5048,11 +5589,11 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i6.FormsModule,
-                          i1$7.MatFormFieldModule,
+                          i1$6.MatFormFieldModule,
                           i2.MatSelectModule,
-                          i1$1.MtnaHighlightModule,
+                          i4.MtnaHighlightModule,
                           i4$2.MatListModule,
                           i5.MatIconModule,
                           MtnaWfGetFormControlErrorPipeModule,
@@ -5067,10 +5608,11 @@
 
   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;
+          _this._fileUploadButtonText = $localize(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["CHOOSE A FILE"], ["CHOOSE A FILE"])));
           return _this;
       }
       MtnaWfFileUploadComponent.prototype.fileToUpload = function (file) {
@@ -5104,8 +5646,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$5.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]=\"_fileUploadButtonText\"\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\" i18n>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$5.MtnaFileDownloadComponent, selector: "mtna-file-download", inputs: ["color", "canDownload", "canRemove", "fileInfo", "loading"], outputs: ["download", "remove"] }, { type: i1__namespace$5.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$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: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.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 +5655,8 @@
                       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$5.FileService }]; } });
+  var templateObject_1$4;
 
   var MtnaWfFileUploadModule = /** @class */ (function () {
       function MtnaWfFileUploadModule() {
@@ -5121,21 +5664,21 @@
       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,
-          i1$1.MtnaHighlightModule,
-          i3$1.MatButtonModule,
+  MtnaWfFileUploadModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFileUploadModule, declarations: [MtnaWfFileUploadComponent], imports: [i3$1.CommonModule,
+          i4.MtnaHighlightModule,
+          i3$2.MatButtonModule,
           i5.MatIconModule,
-          i1$8.MtnaFileDownloadModule,
-          i1$8.MtnaFileUploadModule,
+          i1$7.MtnaFileDownloadModule,
+          i1$7.MtnaFileUploadModule,
           i4$2.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,
-              i1$1.MtnaHighlightModule,
-              i3$1.MatButtonModule,
+              i3$1.CommonModule,
+              i4.MtnaHighlightModule,
+              i3$2.MatButtonModule,
               i5.MatIconModule,
-              i1$8.MtnaFileDownloadModule,
-              i1$8.MtnaFileUploadModule,
+              i1$7.MtnaFileDownloadModule,
+              i1$7.MtnaFileUploadModule,
               i4$2.MatListModule,
               i5$2.MatProgressSpinnerModule,
           ]] });
@@ -5143,12 +5686,12 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
-                          i1$1.MtnaHighlightModule,
-                          i3$1.MatButtonModule,
+                          i3$1.CommonModule,
+                          i4.MtnaHighlightModule,
+                          i3$2.MatButtonModule,
                           i5.MatIconModule,
-                          i1$8.MtnaFileDownloadModule,
-                          i1$8.MtnaFileUploadModule,
+                          i1$7.MtnaFileDownloadModule,
+                          i1$7.MtnaFileUploadModule,
                           i4$2.MatListModule,
                           i5$2.MatProgressSpinnerModule,
                       ],
@@ -5192,7 +5735,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; let index = index; 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: i4__namespace.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: i7__namespace.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,18 +5753,18 @@
       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,
+          i4.MtnaHighlightModule,
           MtnaWfFormItemModule,
           i6.FormsModule,
           i6.ReactiveFormsModule,
           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,
+              i4.MtnaHighlightModule,
               MtnaWfFormItemModule,
               i6.FormsModule,
               i6.ReactiveFormsModule,
@@ -5232,9 +5775,9 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           MtnaWfItemHeaderModule,
-                          i1$1.MtnaHighlightModule,
+                          i4.MtnaHighlightModule,
                           MtnaWfFormItemModule,
                           i6.FormsModule,
                           i6.ReactiveFormsModule,
@@ -5254,7 +5797,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: i4__namespace.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 +5814,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, i4.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, i4.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, i4.MtnaHighlightModule],
                       declarations: [MtnaWfFormSectionComponent],
                       exports: [MtnaWfFormSectionComponent],
                   }]
@@ -5284,20 +5827,25 @@
 
   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;
+          _this._notInformationText = $localize(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["No Information Provided"], ["No Information Provided"])));
           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 +5861,19 @@
       };
       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 || _notInformationText + ' - ' + 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$4.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: 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: i4__namespace.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$4.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$4.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 templateObject_1$3;
 
   var MtnaWfI18nInputModule = /** @class */ (function () {
       function MtnaWfI18nInputModule() {
@@ -5332,21 +5881,21 @@
       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,
+          i1$6.MatFormFieldModule,
           i5$1.MatInputModule,
-          i1$1.MtnaHighlightModule,
+          i4.MtnaHighlightModule,
           MtnaWfGetAutoCompletePipeModule,
           i4$2.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,
+              i1$6.MatFormFieldModule,
               i5$1.MatInputModule,
-              i1$1.MtnaHighlightModule,
+              i4.MtnaHighlightModule,
               MtnaWfGetAutoCompletePipeModule,
               i4$2.MatListModule,
               i6.ReactiveFormsModule,
@@ -5356,11 +5905,11 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           i6.FormsModule,
-                          i1$7.MatFormFieldModule,
+                          i1$6.MatFormFieldModule,
                           i5$1.MatInputModule,
-                          i1$1.MtnaHighlightModule,
+                          i4.MtnaHighlightModule,
                           MtnaWfGetAutoCompletePipeModule,
                           i4$2.MatListModule,
                           i6.ReactiveFormsModule,
@@ -5373,35 +5922,44 @@
 
   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;
+          _this._noInformationText = $localize(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["No Information Provided"], ["No Information Provided"])));
           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 || _noInformationText }}</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$4.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: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1__namespace$4.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$4.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 templateObject_1$2;
 
   var MtnaWfInputModule = /** @class */ (function () {
       function MtnaWfInputModule() {
@@ -5409,23 +5967,23 @@
       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,
-          i1$7.MatFormFieldModule,
+  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$6.MatFormFieldModule,
           i6.FormsModule,
           i4$2.MatListModule,
           MtnaWfGetAutoCompletePipeModule,
           MtnaWfGetFormControlErrorPipeModule,
-          i1$1.MtnaHighlightModule,
+          i4.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,
-              i1$7.MatFormFieldModule,
+              i3$1.CommonModule,
+              i1$6.MatFormFieldModule,
               i6.FormsModule,
               i4$2.MatListModule,
               MtnaWfGetAutoCompletePipeModule,
               MtnaWfGetFormControlErrorPipeModule,
-              i1$1.MtnaHighlightModule,
+              i4.MtnaHighlightModule,
               i6.ReactiveFormsModule,
               i5$1.MatInputModule,
           ]] });
@@ -5433,13 +5991,13 @@
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
-                          i1$7.MatFormFieldModule,
+                          i3$1.CommonModule,
+                          i1$6.MatFormFieldModule,
                           i6.FormsModule,
                           i4$2.MatListModule,
                           MtnaWfGetAutoCompletePipeModule,
                           MtnaWfGetFormControlErrorPipeModule,
-                          i1$1.MtnaHighlightModule,
+                          i4.MtnaHighlightModule,
                           i6.ReactiveFormsModule,
                           i5$1.MatInputModule,
                       ],
@@ -5456,7 +6014,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\" [disabled]=\"readonly || control.disabled\" [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$6.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: i4__namespace.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$6.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 +6032,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,
+          i1$1.MatRadioModule,
           MtnaWfFormItemModule,
           MtnaWfGetFormControlErrorPipeModule,
           i6.ReactiveFormsModule,
-          i1$7.MatFormFieldModule], exports: [MtnaWfMultipleChoiceComponent] });
+          i1$6.MatFormFieldModule,
+          i4.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,
+              i1$1.MatRadioModule,
               MtnaWfFormItemModule,
               MtnaWfGetFormControlErrorPipeModule,
               i6.ReactiveFormsModule,
-              i1$7.MatFormFieldModule,
+              i1$6.MatFormFieldModule,
+              i4.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,
+                          i1$1.MatRadioModule,
                           MtnaWfFormItemModule,
                           MtnaWfGetFormControlErrorPipeModule,
                           i6.ReactiveFormsModule,
-                          i1$7.MatFormFieldModule,
+                          i1$6.MatFormFieldModule,
+                          i4.MtnaHighlightModule,
                       ],
                       declarations: [MtnaWfMultipleChoiceComponent],
                       exports: [MtnaWfMultipleChoiceComponent],
@@ -5515,7 +6076,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: i4__namespace.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 +6094,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, i4.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, i4.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, i4.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
                       declarations: [MtnaWfOrderedListItemComponent],
                       exports: [MtnaWfOrderedListItemComponent],
                   }]
@@ -5570,12 +6131,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,9 +6144,10 @@
 
   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;
+          _this._addText = $localize(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["ADD"], ["ADD"])));
           return _this;
       }
       MtnaWfRepeatableItemContainerComponent.prototype.addItem = function () {
@@ -5597,13 +6159,13 @@
       };
       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        i18n-matTooltip\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 || _addText | 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: i4__namespace.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": i4__namespace.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' })),
-              animations.transition(':enter', [animations.animate(i1$1.COMPLEX_STANDARD, animations.style({ height: '*', margin: '*', opacity: 1 }))]),
-              animations.transition(':leave', animations.animate(i1$1.COMPLEX_STANDARD)),
+              animations.transition(':enter', [animations.animate(i4.COMPLEX_STANDARD, animations.style({ height: '*', margin: '*', opacity: 1 }))]),
+              animations.transition(':leave', animations.animate(i4.COMPLEX_STANDARD)),
           ]),
       ], 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: MtnaWfRepeatableItemContainerComponent, decorators: [{
@@ -5616,14 +6178,15 @@
                           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' })),
-                              animations.transition(':enter', [animations.animate(i1$1.COMPLEX_STANDARD, animations.style({ height: '*', margin: '*', opacity: 1 }))]),
-                              animations.transition(':leave', animations.animate(i1$1.COMPLEX_STANDARD)),
+                              animations.transition(':enter', [animations.animate(i4.COMPLEX_STANDARD, animations.style({ height: '*', margin: '*', opacity: 1 }))]),
+                              animations.transition(':leave', animations.animate(i4.COMPLEX_STANDARD)),
                           ]),
                       ],
                       changeDetection: i0.ChangeDetectionStrategy.OnPush,
                       encapsulation: i0.ViewEncapsulation.None,
                   }]
-          }], ctorParameters: function () { return [{ type: MtnaWfManagerService }]; } });
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: MtnaWfManagerService }]; } });
+  var templateObject_1$1;
 
   var MtnaWfRepeatableItemContainerModule = /** @class */ (function () {
       function MtnaWfRepeatableItemContainerModule() {
@@ -5631,39 +6194,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,
+          i4.MtnaHighlightModule,
+          i3$2.MatButtonModule,
           i5.MatIconModule,
           i6$1.MatTooltipModule,
-          i1$1.MtnaTrackByPropertyPipeModule], exports: [MtnaWfRepeatableItemContainerComponent] });
+          i4.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,
+              i4.MtnaHighlightModule,
+              i3$2.MatButtonModule,
               i5.MatIconModule,
               i6$1.MatTooltipModule,
-              i1$1.MtnaTrackByPropertyPipeModule,
+              i4.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,
+                          i4.MtnaHighlightModule,
+                          i3$2.MatButtonModule,
                           i5.MatIconModule,
                           i6$1.MatTooltipModule,
-                          i1$1.MtnaTrackByPropertyPipeModule,
+                          i4.MtnaTrackByPropertyPipeModule,
+                          MtnaWfCoerceFormItemPipeModule,
                       ],
                       declarations: [MtnaWfRepeatableItemContainerComponent],
                       exports: [MtnaWfRepeatableItemContainerComponent],
@@ -5672,10 +6238,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 : []);
@@ -5684,8 +6250,8 @@
       MtnaWfResourceSearchComponent.prototype.openDialog = function () {
           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, {
+              .open(i1$4.MtnaSearchDialogComponent, {
+              data: new i1$4.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 +6283,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$7.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\">\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\" (click)=\"openDialog()\" i18n>\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 +6294,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$7.MtnaInMemorySearchFacade }, { type: i1__namespace.MatDialog }]; } });
   var templateObject_1;
 
   var MtnaWfResourceSearchModule = /** @class */ (function () {
@@ -5737,12 +6303,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 +6328,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$8.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$8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1__namespace$8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1__namespace$8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1__namespace$8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1__namespace$8.MatCellDef, selector: "[matCellDef]" }, { type: i1__namespace$8.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1__namespace$8.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 +6346,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$8.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$8.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$8.MatTableModule, MtnaWfFormItemModule],
                       declarations: [MtnaWfTableFormItemComponent],
                       exports: [MtnaWfTableFormItemComponent],
                   }]
@@ -5799,12 +6365,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: i4__namespace.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 +6383,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, i4.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, i4.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, i4.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
                       declarations: [MtnaWfTextItemComponent],
                       exports: [MtnaWfTextItemComponent],
                   }]
@@ -5835,12 +6402,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: i4__namespace.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 +6420,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, i4.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, i4.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, i4.MtnaHighlightModule, MtnaWfGetObjectTypePipeModule],
                       declarations: [MtnaWfTitleItemComponent],
                       exports: [MtnaWfTitleItemComponent],
                   }]
@@ -5871,7 +6439,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: i4__namespace.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 +6457,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, i4.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, i4.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, i4.MtnaHighlightModule, MtnaWfSanitizeHtmlPipeModule],
                       declarations: [MtnaWfUnorderedListItemComponent],
                       exports: [MtnaWfUnorderedListItemComponent],
                   }]
@@ -5903,8 +6471,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();
@@ -6007,7 +6575,6 @@
       };
       MtnaWfYearQuarterComponent.prototype.ngOnInit = function () {
           var _a, _b, _c;
-          console.warn('YearQuarterItem ngOnInit', this.control);
           // Set any initial value onto the Year & Quarter controls
           this._yearControl.setValue(((_a = this.control) === null || _a === void 0 ? void 0 : _a.value) ? this.control.value.year : null);
           this._quarterControl.setValue(((_b = this.control) === null || _b === void 0 ? void 0 : _b.value) ? this.control.value.quarter : null);
@@ -6037,8 +6604,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\" i18n-aria-label>\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\" i18n-aria-label>\n      <mat-option i18n>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$4.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: i4__namespace.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$4.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 +6616,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,41 +6633,41 @@
       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,
+          i1$6.MatFormFieldModule,
           i2.MatSelectModule,
           i6.FormsModule,
           MtnaWfGetFormControlErrorPipeModule,
           MtnaWfGetAvailableQuartersPipeModule,
           MtnaWfDateQuarterPipeModule,
-          i1$1.MtnaHighlightModule,
+          i4.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,
+              i1$6.MatFormFieldModule,
               i2.MatSelectModule,
               i6.FormsModule,
               MtnaWfGetFormControlErrorPipeModule,
               MtnaWfGetAvailableQuartersPipeModule,
               MtnaWfDateQuarterPipeModule,
-              i1$1.MtnaHighlightModule,
+              i4.MtnaHighlightModule,
               i6.ReactiveFormsModule,
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfYearQuarterModule, decorators: [{
               type: i0.NgModule,
               args: [{
                       imports: [
-                          i4.CommonModule,
+                          i3$1.CommonModule,
                           flexLayout.FlexLayoutModule,
-                          i1$7.MatFormFieldModule,
+                          i1$6.MatFormFieldModule,
                           i2.MatSelectModule,
                           i6.FormsModule,
                           MtnaWfGetFormControlErrorPipeModule,
                           MtnaWfGetAvailableQuartersPipeModule,
                           MtnaWfDateQuarterPipeModule,
-                          i1$1.MtnaHighlightModule,
+                          i4.MtnaHighlightModule,
                           i6.ReactiveFormsModule,
                       ],
                       declarations: [MtnaWfYearQuarterComponent],
@@ -6117,10 +6684,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 +6698,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: i4__namespace.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,17 +6719,37 @@
       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, i4.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, i4.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, i4.MtnaHighlightModule, flexLayout.FlexLayoutModule, MtnaWfCoerceFormControlPipeModule],
                       declarations: [MtnaWfYearQuarterRangeComponent],
                       exports: [MtnaWfYearQuarterRangeComponent],
                   }]
           }] });
 
+  var MtnaWfProgressiveFormSectionComponent = /** @class */ (function (_super) {
+      __extends(MtnaWfProgressiveFormSectionComponent, _super);
+      function MtnaWfProgressiveFormSectionComponent(cdr) {
+          return _super.call(this, cdr) || this;
+      }
+      return MtnaWfProgressiveFormSectionComponent;
+  }(MtnaWfBaseSectionItem));
+  MtnaWfProgressiveFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormSectionComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfProgressiveFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfProgressiveFormSectionComponent, selector: "mtna-wf-progressive-form-section", usesInheritance: true, ngImport: i0__namespace, template: "<mtna-wf-step-card [step]=\"step\" [subtitle]=\"item.descriptiveText\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">\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: ["mtna-wf-progressive-form-section mat-divider.mat-divider-horizontal.progressive-form-section-actions-divider{position:relative;left:unset;padding-bottom:8px}mtna-wf-progressive-form-section .progressive-form-section-actions-wrapper .mat-raised-button{margin:0}\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.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, encapsulation: i0__namespace.ViewEncapsulation.None });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormSectionComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'mtna-wf-progressive-form-section',
+                      templateUrl: './progressive-form-section.component.html',
+                      styleUrls: ['./progressive-form-section.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                      encapsulation: i0.ViewEncapsulation.None,
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; } });
+
   var MTNA_WF_ITEM_INJECTED_COMPONENTS = [
       // Boolean Item Component
       {
@@ -6204,6 +6791,11 @@
           key: 'us.mtna.web.form.impl.SectionImpl',
           component: MtnaWfFormSectionComponent,
       },
+      // Progressive Form Section Component
+      {
+          key: 'us.mtna.web.form.impl.ProgressiveFormSectionImpl',
+          component: MtnaWfProgressiveFormSectionComponent,
+      },
       // I18n Input Item Components
       {
           key: 'us.mtna.web.form.item.impl.InternationalizedParagraphAnswerItem',
@@ -6291,223 +6883,420 @@
           return MTNA_WF_ITEM_INJECTED_COMPONENTS;
       };
       return MtnaWfItemComponentProvider;
-  }(i1$1.InjectedComponentProvider));
+  }(i4.InjectedComponentProvider));
 
-  var MtnaWfFormItemDialogModule = /** @class */ (function () {
-      function MtnaWfFormItemDialogModule() {
+  /* eslint-disable @angular-eslint/no-outputs-metadata-property */
+  var MtnaWfProgressiveFormComponent = /** @class */ (function (_super) {
+      __extends(MtnaWfProgressiveFormComponent, _super);
+      function MtnaWfProgressiveFormComponent(mtnaFormManager, ngFormService, uiService, cdr, scrollService) {
+          var _this = _super.call(this, mtnaFormManager, ngFormService, uiService) || this;
+          _this.cdr = cdr;
+          _this.scrollService = scrollService;
+          _this._loading = false;
+          /** Emits the updated ProgressiveForm value */
+          _this.nextStepSelected = new i0.EventEmitter();
+          /**
+           * Emits the previous steps instanceId.
+           * Since this component is always on the last step and the last item, we can always count on having the instanceId of the previous step.
+           */
+          _this.previousStepSelected = new i0.EventEmitter();
+          /**
+           * Emits the instanceId of the selected step.
+           * If the currently active step is the step that is selected, this will not emit.
+           */
+          _this.showSelectedStepId = new i0.EventEmitter();
+          _this.activeStepId$ = new rxjs.BehaviorSubject(undefined);
+          _this.formItems = [];
+          _this.formStatusValid$ = new rxjs.BehaviorSubject(false);
+          _this.lastStepActive = false;
+          _this.scrollDirection$ = _this.scrollService.getScrollDirection();
+          _this.showPreviousButton = false;
+          _this.stepArray$ = new rxjs.BehaviorSubject([]);
+          /**
+           * Checks if the last step in the form is active.
+           * @returns true if the last step in the form is active, otherwise false
+           */
+          _this.checkLastStepActive = function () {
+              if (_this.stepArray$.value.length > 0) {
+                  return _this.stepArray$.value[_this.stepArray$.value.length - 1].active;
+              }
+              else if (_this.stepArray$.value.length === 0) {
+                  return _this.stepArray$.value[0].active;
+              }
+              else {
+                  return false;
+              }
+          };
+          return _this;
       }
-      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.
-   */
-  var BaseFormItemControl = /** @class */ (function () {
-      function BaseFormItemControl() {
-          this.formControlClass = true;
-          this.header = null;
-          this.inList = false;
-          this.indicatorStatus = 'INACTIVE';
-          this.readonly = false;
-      }
-      Object.defineProperty(BaseFormItemControl.prototype, "control", {
+      Object.defineProperty(MtnaWfProgressiveFormComponent.prototype, "mtnaForm", {
           get: function () {
-              return this._control;
+              return _super.prototype.mtnaForm;
           },
-          set: function (control) {
-              console.log(control);
-              this._control = control;
+          set: function (form) {
+              if (form) {
+                  this.formItems = form.items;
+                  this.resetValues();
+                  this.generateFormSteps(form.outline);
+                  this.checkAllStepsIds(form.items);
+                  _super.prototype.steps = this.determineStepsToPassToSuper(form.items);
+                  _super.prototype.mtnaForm = form;
+                  this.setStepStatus();
+                  this.setFormStatusSubscription();
+                  this.showPreviousButton = this.showPreviousButtonFn();
+                  this.lastStepActive = this.checkLastStepActive();
+                  this.cdr.markForCheck();
+              }
           },
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(BaseFormItemControl.prototype, "item", {
+      Object.defineProperty(MtnaWfProgressiveFormComponent.prototype, "loading", {
           get: function () {
-              return this._item;
+              return this._loading;
           },
-          set: function (item) {
-              this._item = item;
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(BaseFormItemControl.prototype, "hasItemHeader", {
-          // Whether the item has a header component above the content
-          get: function () {
-              return !!this.item && (!!this.item.questionText || !!this.item.descriptiveText);
+          set: function (value) {
+              this._loading = coercion.coerceBooleanProperty(value);
           },
           enumerable: false,
           configurable: true
       });
-      BaseFormItemControl.prototype._trackByOptionId = function (index, option) {
-          return option.option.id;
+      MtnaWfProgressiveFormComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          if (this.formStatusSubscriber) {
+              this.formStatusSubscriber.unsubscribe();
+          }
       };
-      return BaseFormItemControl;
-  }());
-  BaseFormItemControl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseFormItemControl, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-  BaseFormItemControl.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseFormItemControl, inputs: { control: "control", header: "header", inList: "inList", indicatorStatus: "indicatorStatus", item: "item", readonly: "readonly" }, host: { properties: { "class.mtna-wf-control-item": "this.formControlClass", "class.read-only": "this.readonly" } }, ngImport: i0__namespace });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseFormItemControl, decorators: [{
-              type: i0.Directive
-          }], propDecorators: { formControlClass: [{
-                  type: i0.HostBinding,
-                  args: ['class.mtna-wf-control-item']
-              }], control: [{
-                  type: i0.Input
-              }], header: [{
-                  type: i0.Input
-              }], inList: [{
-                  type: i0.Input
-              }], indicatorStatus: [{
-                  type: i0.Input
-              }], item: [{
-                  type: i0.Input
-              }], readonly: [{
-                  type: i0.HostBinding,
-                  args: ['class.read-only']
-              }, {
-                  type: i0.Input
-              }] } });
-
-  /**
-   * Base control class for a FormItem with nested FormItems.
-   * If a FormItem contains an 'optionItemMap', its component class should extend this class.
-   */
-  var BaseParentItemControl = /** @class */ (function (_super) {
-      __extends(BaseParentItemControl, _super);
-      function BaseParentItemControl() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.parentIds = new Array();
-          return _this;
-      }
-      Object.defineProperty(BaseParentItemControl.prototype, "control", {
-          /** FormControl representing this item's value.
-           * If this item has items in its 'optionItemMap', this control is nested inside a FormGroup wrapper */
-          get: function () {
-              return this._control;
-          },
-          set: function (control) {
-              if (control instanceof i6.FormGroup) {
-                  this._control = control.get(this.item.instanceId);
-                  this.controlWrapper = control;
+      /**
+       * Checks if the previous button should be shown.
+       * @returns true if the previous button should be shown, otherwise false
+       */
+      MtnaWfProgressiveFormComponent.prototype.showPreviousButtonFn = function () {
+          var _this = this;
+          if (this.activeStepId$.value) {
+              var indexOfActiveStep = this.stepArray$.value.findIndex(function (step) { return step.instanceId === _this.activeStepId$.value; });
+              return indexOfActiveStep > 0;
+          }
+          else {
+              return false;
+          }
+      };
+      /**
+       * Subscribes to the form status changes and updates the formStatusValid$ BehaviorSubject with the validity of the active step.
+       */
+      MtnaWfProgressiveFormComponent.prototype.setFormStatusSubscription = function () {
+          var _this = this;
+          var _a;
+          if (this.ngForm) {
+              // Used to set the initial validity of the active step, otherwise it will always default to false
+              if (this.activeStepId$.value) {
+                  var initialValidity = (_a = this.ngForm.controls[this.activeStepId$.value]) === null || _a === void 0 ? void 0 : _a.valid;
+                  this.formStatusValid$.next(initialValidity);
               }
-              else {
-                  _super.prototype.control = control;
+              if (!this.formStatusSubscriber) {
+                  this.formStatusSubscriber = this.ngForm.statusChanges.subscribe(function () {
+                      if (_this.activeStepId$.value) {
+                          if (_this.ngForm) {
+                              var activeControlExists = Object.keys(_this.ngForm.controls).includes(_this.activeStepId$.value);
+                              if (activeControlExists) {
+                                  var activeControl = _this.ngForm.controls[_this.activeStepId$.value];
+                                  if (activeControl) {
+                                      _this.formStatusValid$.next(activeControl.valid);
+                                  }
+                              }
+                          }
+                      }
+                  });
               }
-              // FIXME sometimes this gets set with undefined which was a problem
-              // Why is it undefined sometimes? something to do with readonly?
-              // Do we need to split the read-only components and edit-components
-              // I think the read-only components are carrying a bunch of extra unecessary weight
-          },
-          enumerable: false,
-          configurable: true
-      });
-      return BaseParentItemControl;
-  }(BaseFormItemControl));
-  BaseParentItemControl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseParentItemControl, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-  BaseParentItemControl.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseParentItemControl, inputs: { control: "control", parentIds: "parentIds" }, usesInheritance: true, ngImport: i0__namespace });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseParentItemControl, decorators: [{
-              type: i0.Directive
-          }], propDecorators: { control: [{
-                  type: i0.Input
-              }], parentIds: [{
-                  type: i0.Input
-              }] } });
-
-  var BaseSingleSelectionParent = /** @class */ (function (_super) {
-      __extends(BaseSingleSelectionParent, _super);
-      function BaseSingleSelectionParent(uiService) {
-          var _this = _super.call(this) || this;
-          _this.uiService = uiService;
-          return _this;
-      }
-      BaseSingleSelectionParent.prototype.ngOnInit = function () {
-          var _this = this;
+          }
+      };
+      /**
+       * Resets all necessary values to build to form each iteration.
+       */
+      MtnaWfProgressiveFormComponent.prototype.resetValues = function () {
           var _a;
-          if (coreTs.isPresent((_a = this.control) === null || _a === void 0 ? void 0 : _a.value)) {
-              this.selectedOption = this.item.options.find(function (o) { var _a; return ((_a = _this.control) === null || _a === void 0 ? void 0 : _a.value) === o.option.id; });
+          (_a = this.formStatusSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+          this.ngForm = undefined;
+          this._steps = undefined;
+          this.ngFormService.disposeForm();
+          this.stepArray$.next([]);
+          this.activeStepId$.next(undefined);
+      };
+      /**
+       * Generates the steps for the form based on the outline property of the form.
+       * @param outline the outline of the form that is the basis for the steps
+       */
+      MtnaWfProgressiveFormComponent.prototype.generateFormSteps = function (outline) {
+          var _this = this;
+          if (this.stepArray$.value.length === 0) {
+              var generatedFormSteps = generateFormStepsFromOutline(outline);
+              var flattenedFormSteps = flattenSteps(generatedFormSteps);
+              this.stepArray$.next(flattenedFormSteps);
+              // Set the active step to the first step in the array for the first load
+              var lastItemIndex_1 = this.formItems.length - 1;
+              var updatedSteps_1 = [];
+              this.stepArray$.value.forEach(function (step) {
+                  if (step.instanceId === _this.formItems[lastItemIndex_1].instanceId || step.instanceId === _this.formItems[lastItemIndex_1].templateId) {
+                      updatedSteps_1.push(Object.assign(Object.assign({}, step), { active: true, status: 'INVALID' }));
+                  }
+                  else {
+                      updatedSteps_1.push(step);
+                  }
+              });
+              this.stepArray$.next(updatedSteps_1);
           }
       };
       /**
-       * Toggles the 'selected' value of the previous & newly selected options,
-       * then calls toggleFormItems to change their enabled/disabled items
-       * @param change MatRadioChange from the radio group
+       * Checks all of the steps to ensure that each steps instanceId property matches the instanceId of the FormItem and updates the property if needed.
+       * This finds the step based on the templateId. When the stepArray is first built, the templateId of the FormItem gets set as the steps instanceId.
+       * Here, we just need to find the steps that match the templateId and update the instanceId.
+       * Matching is based off of templateId reduces the number of steps that need to be checked/manipulated.
+       *
+       * @param formItems the FormItems to check against the steps
        */
-      BaseSingleSelectionParent.prototype.selectionChange = function (change) {
-          // event fires when an option's nested item, e.g. FileUploadItem, changes value.
-          // This event is not a MatRadioChange, so we need to ignore it.
-          if (change instanceof i1$2.MatRadioChange || change instanceof i2.MatSelectChange) {
-              // Newly selected option
-              var option = this.item.options.find(function (o) { return o.option.id === change.value; });
-              if (!!this.selectedOption && this.selectedOption.option.id !== change.value) {
-                  // New option does not match the previous option
-                  // Previous option's enabled/disabled items need toggling
-                  // toggle visibility and enable/disable, should be rendered already
-                  this.uiService.toggleFormItems(this.selectedOption.enabledItems, this.selectedOption.disabledItems, false, this.item.instanceId);
+      MtnaWfProgressiveFormComponent.prototype.checkAllStepsIds = function (formItems) {
+          var _this = this;
+          formItems.forEach(function (item) {
+              var stepMatchedOnTemplateId = _this.stepArray$.value.find(function (s) { return s.instanceId === item.templateId; });
+              if (stepMatchedOnTemplateId) {
+                  stepMatchedOnTemplateId.instanceId = item.instanceId;
+                  if (stepMatchedOnTemplateId.active) {
+                      _this.activeStepId$.next(item.instanceId);
+                      _this.cdr.markForCheck();
+                  }
               }
-              // toggle visibility and enable/disable, should be rendered already
-              if (option) {
-                  this.uiService.toggleFormItems(option.enabledItems, option.disabledItems, true, this.item.instanceId);
+          });
+      };
+      /**
+       * Because the super class has no knowledge of the stepArray that have been generated for the form,
+       * this function determines which steps need to be passed to the super class and the inherited _steps
+       * property. The super class "should" obtain each step as it is passed in. This means that when the
+       * call to either grab the form again or to get the next FormItem, should also continue to pass the
+       * steps that have been generated.
+       * @returns
+       */
+      MtnaWfProgressiveFormComponent.prototype.determineStepsToPassToSuper = function (items) {
+          var availableItemInstanceIds = [];
+          items.forEach(function (item) {
+              availableItemInstanceIds.push(item.instanceId);
+          });
+          var stepsToPass = [];
+          this.stepArray$.value.forEach(function (step) {
+              if (availableItemInstanceIds.includes(step.instanceId)) {
+                  stepsToPass.push(step);
+              }
+          });
+          return stepsToPass;
+      };
+      /**
+       * Sets the status of each step in the form based on the validity of the form control.
+       * If the form control key is not found in the controls of the form, the status is set to 'PLACEHOLDER'.
+       */
+      MtnaWfProgressiveFormComponent.prototype.setStepStatus = function () {
+          var _this = this;
+          var updatedSteps = [];
+          this.stepArray$.value.forEach(function (step) {
+              if (_this.ngForm) {
+                  var controlKeyExists = Object.keys(_this.ngForm.controls).includes(step.instanceId);
+                  if (controlKeyExists) {
+                      updatedSteps.push(Object.assign(Object.assign({}, step), { status: _this.ngForm.controls[step.instanceId].valid ? 'VALID' : 'INVALID' }));
+                  }
+                  else {
+                      updatedSteps.push(Object.assign(Object.assign({}, step), { status: 'PLACEHOLDER' }));
+                  }
+              }
+          });
+          this.stepArray$.next(updatedSteps);
+      };
+      /**
+       * Emits the next or previous step templateId based on the direction provided.
+       * @param stepDirection the direction of the step to emit
+       */
+      MtnaWfProgressiveFormComponent.prototype.showDirectionalStep = function (stepDirection) {
+          var _this = this;
+          // const stepTemplateId = this.getDirectionalStepTemplateId(stepDirection);
+          // if (stepTemplateId) {
+          if (this.mtnaForm) {
+              var formValue = this.ngFormService.getFormValue();
+              var updatedForm = this.mtnaFormManager.insertNewValues(this.mtnaForm, formValue);
+              if (stepDirection === 'next') {
+                  this.nextStepSelected.emit(updatedForm);
+                  this.scrollService.scrollTop();
+              }
+              else {
+                  var previousStepIndex = this.stepArray$.value.findIndex(function (step) { return step.instanceId === _this.activeStepId$.value; }) - 1;
+                  if (previousStepIndex >= 0) {
+                      var previousStep = this.stepArray$.value[previousStepIndex];
+                      if (previousStep) {
+                          this.previousStepSelected.emit(previousStep.instanceId);
+                          this.scrollService.scrollTop();
+                      }
+                  }
               }
-              // Set the selected option as the previous
-              this.selectedOption = option;
           }
-          else {
-              console.warn('[BaseSingleSelectionParent] selectionChange - not a MatRadioChange | MatSelectChange', change);
+      };
+      /**
+       * Shows the selected step as the active step in the form.
+       * To be used on the mtna-wf-form-stepper components "selected" output.
+       * @param step the step to show as the active step
+       */
+      MtnaWfProgressiveFormComponent.prototype.showSelectedStep = function (step) {
+          if (this.activeStepId$.value !== step.instanceId) {
+              this.showSelectedStepId.emit(step.instanceId);
+              this.activeStepId$.next(step.instanceId);
+              this.scrollService.scrollTop();
           }
       };
-      return BaseSingleSelectionParent;
-  }(BaseParentItemControl));
-  BaseSingleSelectionParent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseSingleSelectionParent, deps: [{ token: MtnaWfUIService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-  BaseSingleSelectionParent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseSingleSelectionParent, usesInheritance: true, ngImport: i0__namespace });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseSingleSelectionParent, decorators: [{
-              type: i0.Directive
-          }], ctorParameters: function () { return [{ type: MtnaWfUIService }]; } });
+      MtnaWfProgressiveFormComponent.prototype._trackByStepInstanceId = function (index, formStep) {
+          return formStep.instanceId;
+      };
+      return MtnaWfProgressiveFormComponent;
+  }(MtnaWfBaseFormComponent));
+  MtnaWfProgressiveFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormComponent, deps: [{ token: MtnaWfManagerService }, { token: MtnaWfNgFormService }, { token: MtnaWfUIService }, { token: i0__namespace.ChangeDetectorRef }, { token: i4__namespace.MtnaScrollService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfProgressiveFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfProgressiveFormComponent, selector: "mtna-wf-progressive-form", inputs: { loading: "loading" }, outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange", nextStepSelected: "nextStepSelected", previousStepSelected: "previousStepSelected", showSelectedStepId: "showSelectedStepId" }, usesInheritance: true, ngImport: i0__namespace, template: "<div fxLayout=\"row\" class=\"mtna-wf-progressive-form__container\">\n  <mtna-wf-stepper\n    *ngIf=\"stepArray$ | async as steps\"\n    fxFlex=\"200px\"\n    [steps]=\"steps\"\n    (selected)=\"showSelectedStep($event)\"\n  ></mtna-wf-stepper>\n  <div fxFlex class=\"mtna-wf-progressive-form__form-container\">\n    <form *ngIf=\"ngForm\" [formGroup]=\"ngForm\" [formDisabled]=\"readonly\">\n      <ng-container *ngFor=\"let item of mtnaForm?.items\">\n        <ng-container *ngIf=\"activeStepId$ | async as activeStepId\">\n          <mtna-wf-item\n            *ngIf=\"item.instanceId === activeStepId\"\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        </ng-container>\n      </ng-container>\n    </form>\n    <div *ngIf=\"!loading\" class=\"mtna-wf-progressive-form__stepper-actions\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"26px\">\n      <button *ngIf=\"showPreviousButton\" mat-stroked-button color=\"primary\" (click)=\"showDirectionalStep('previous')\" i18n>\n        Previous Step\n      </button>\n      <ng-container *ngIf=\"!lastStepActive; else parentActions\">\n        <button mat-raised-button color=\"primary\" (click)=\"showDirectionalStep('next')\" i18n>Next Step</button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #parentActions>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["mtna-wf-progressive-form{display:flex;flex:1}mtna-wf-progressive-form .mtna-wf-progressive-form__container{width:100%}mtna-wf-progressive-form mtna-wf-progressive-form-section mtna-wf-step-card{margin:24px}mtna-wf-progressive-form .mtna-wf-progressive-form__stepper-actions{margin:0 24px 24px}mtna-wf-progressive-form .mtna-wf-progressive-form__stepper-actions .mtna-wf-progressive-form__next-button{margin-left:auto}\n"], components: [{ type: MtnaWfFormStepperComponent, selector: "mtna-wf-stepper", inputs: ["color", "incompleteIcon", "steps"], outputs: ["selected"] }, { type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: ["formDisabled"] }, { 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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: 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"] }, { 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"] }], pipes: { "async": i3__namespace.AsyncPipe }, 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: MtnaWfProgressiveFormComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'mtna-wf-progressive-form',
+                      templateUrl: './progressive-form.component.html',
+                      styleUrls: ['./progressive-form.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                      encapsulation: i0.ViewEncapsulation.None,
+                      outputs: ['status', 'focusedSection', 'mtnaFormChange'],
+                  }]
+          }], ctorParameters: function () { return [{ type: MtnaWfManagerService }, { type: MtnaWfNgFormService }, { type: MtnaWfUIService }, { type: i0__namespace.ChangeDetectorRef }, { type: i4__namespace.MtnaScrollService }]; }, propDecorators: { loading: [{
+                  type: i0.Input
+              }], nextStepSelected: [{
+                  type: i0.Output
+              }], previousStepSelected: [{
+                  type: i0.Output
+              }], showSelectedStepId: [{
+                  type: i0.Output
+              }] } });
 
-  /* eslint-disable @angular-eslint/directive-selector */
-  /**
-   * Used to retrieve the host container for a dynamically rendered component.
-   *
-   * @export
-   */
-  var MtnaWfFormItemDirective = /** @class */ (function () {
-      function MtnaWfFormItemDirective(viewContainerRef) {
-          this.viewContainerRef = viewContainerRef;
+  var MtnaWfProgressiveFormSectionModule = /** @class */ (function () {
+      function MtnaWfProgressiveFormSectionModule() {
       }
-      return MtnaWfFormItemDirective;
+      return MtnaWfProgressiveFormSectionModule;
   }());
-  MtnaWfFormItemDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDirective, deps: [{ token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-  MtnaWfFormItemDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemDirective, selector: "[formItemHost]", ngImport: i0__namespace });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormItemDirective, decorators: [{
-              type: i0.Directive,
+  MtnaWfProgressiveFormSectionModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormSectionModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  MtnaWfProgressiveFormSectionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormSectionModule, declarations: [MtnaWfProgressiveFormSectionComponent], imports: [i3$1.CommonModule,
+          flexLayout.FlexLayoutModule,
+          MtnaWfStepCardModule,
+          i4.MtnaHighlightModule,
+          i2$2.MatDividerModule,
+          MtnaWfGetObjectTypePipeModule,
+          MtnaWfFormItemModule,
+          i3$2.MatButtonModule,
+          i5.MatIconModule], exports: [MtnaWfProgressiveFormSectionComponent] });
+  MtnaWfProgressiveFormSectionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormSectionModule, imports: [[
+              i3$1.CommonModule,
+              flexLayout.FlexLayoutModule,
+              MtnaWfStepCardModule,
+              i4.MtnaHighlightModule,
+              i2$2.MatDividerModule,
+              MtnaWfGetObjectTypePipeModule,
+              MtnaWfFormItemModule,
+              i3$2.MatButtonModule,
+              i5.MatIconModule,
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormSectionModule, decorators: [{
+              type: i0.NgModule,
               args: [{
-                      selector: '[formItemHost]',
+                      imports: [
+                          i3$1.CommonModule,
+                          flexLayout.FlexLayoutModule,
+                          MtnaWfStepCardModule,
+                          i4.MtnaHighlightModule,
+                          i2$2.MatDividerModule,
+                          MtnaWfGetObjectTypePipeModule,
+                          MtnaWfFormItemModule,
+                          i3$2.MatButtonModule,
+                          i5.MatIconModule,
+                      ],
+                      declarations: [MtnaWfProgressiveFormSectionComponent],
+                      exports: [MtnaWfProgressiveFormSectionComponent],
                   }]
-          }], ctorParameters: function () { return [{ type: i0__namespace.ViewContainerRef }]; } });
+          }] });
+
+  var MtnaWfProgressiveFormModule = /** @class */ (function () {
+      function MtnaWfProgressiveFormModule() {
+      }
+      return MtnaWfProgressiveFormModule;
+  }());
+  MtnaWfProgressiveFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  MtnaWfProgressiveFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormModule, declarations: [MtnaWfProgressiveFormComponent], imports: [i4$1.A11yModule,
+          i3$1.CommonModule,
+          flexLayout.FlexLayoutModule,
+          i6.FormsModule,
+          i3$2.MatButtonModule,
+          i5.MatIconModule,
+          MtnaWfFormDisablerModule,
+          MtnaWfFormItemModule,
+          MtnaWfProgressiveFormSectionModule,
+          i6.ReactiveFormsModule,
+          MtnaWfFormStepperModule,
+          GetProgressiveFormItemPipeModule,
+          GetActiveFormStepItemPipeModule], exports: [MtnaWfProgressiveFormComponent] });
+  MtnaWfProgressiveFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormModule, imports: [[
+              i4$1.A11yModule,
+              i3$1.CommonModule,
+              flexLayout.FlexLayoutModule,
+              i6.FormsModule,
+              i3$2.MatButtonModule,
+              i5.MatIconModule,
+              MtnaWfFormDisablerModule,
+              MtnaWfFormItemModule,
+              MtnaWfProgressiveFormSectionModule,
+              i6.ReactiveFormsModule,
+              MtnaWfFormStepperModule,
+              GetProgressiveFormItemPipeModule,
+              GetActiveFormStepItemPipeModule,
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfProgressiveFormModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      imports: [
+                          i4$1.A11yModule,
+                          i3$1.CommonModule,
+                          flexLayout.FlexLayoutModule,
+                          i6.FormsModule,
+                          i3$2.MatButtonModule,
+                          i5.MatIconModule,
+                          MtnaWfFormDisablerModule,
+                          MtnaWfFormItemModule,
+                          MtnaWfProgressiveFormSectionModule,
+                          i6.ReactiveFormsModule,
+                          MtnaWfFormStepperModule,
+                          GetProgressiveFormItemPipeModule,
+                          GetActiveFormStepItemPipeModule,
+                      ],
+                      declarations: [MtnaWfProgressiveFormComponent],
+                      exports: [MtnaWfProgressiveFormComponent],
+                  }]
+          }] });
 
   /**
    * Generated bundle index. Do not edit.
    */
 
-  exports.BaseFormItemControl = BaseFormItemControl;
   exports.BaseFormStep = BaseFormStep;
-  exports.BaseParentItemControl = BaseParentItemControl;
-  exports.BaseSingleSelectionParent = BaseSingleSelectionParent;
   exports.COMPLEX_STANDARD = COMPLEX_STANDARD;
+  exports.ChildStepActivePipe = ChildStepActivePipe;
+  exports.ChildStepActivePipeModule = ChildStepActivePipeModule;
+  exports.CoerceFormStepGroupPipe = CoerceFormStepGroupPipe;
+  exports.CoerceFormStepGroupPipeModule = CoerceFormStepGroupPipeModule;
+  exports.CoerceFormStepPipe = CoerceFormStepPipe;
+  exports.CoerceFormStepPipeModule = CoerceFormStepPipeModule;
   exports.DEFAULT_ERROR_MESSAGES = DEFAULT_ERROR_MESSAGES;
   exports.FormStep = FormStep;
   exports.FormStepGroup = FormStepGroup;
+  exports.GetActiveFormStepItemPipe = GetActiveFormStepItemPipe;
+  exports.GetActiveFormStepItemPipeModule = GetActiveFormStepItemPipeModule;
+  exports.GetProgressiveFormItemPipe = GetProgressiveFormItemPipe;
+  exports.GetProgressiveFormItemPipeModule = GetProgressiveFormItemPipeModule;
+  exports.GetStepAriaLabel = GetStepAriaLabel;
+  exports.GetStepAriaLabelModule = GetStepAriaLabelModule;
   exports.MTNA_WF_API_TOKEN = MTNA_WF_API_TOKEN;
   exports.MTNA_WF_DEFAULT_YEAR_RANGE = MTNA_WF_DEFAULT_YEAR_RANGE;
   exports.MTNA_WF_EXPAND_COLLAPSE = MTNA_WF_EXPAND_COLLAPSE;
@@ -6535,6 +7324,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;
@@ -6555,7 +7346,6 @@
   exports.MtnaWfFormItemDialogComponent = MtnaWfFormItemDialogComponent;
   exports.MtnaWfFormItemDialogData = MtnaWfFormItemDialogData;
   exports.MtnaWfFormItemDialogModule = MtnaWfFormItemDialogModule;
-  exports.MtnaWfFormItemDirective = MtnaWfFormItemDirective;
   exports.MtnaWfFormItemModule = MtnaWfFormItemModule;
   exports.MtnaWfFormSectionComponent = MtnaWfFormSectionComponent;
   exports.MtnaWfFormSectionModule = MtnaWfFormSectionModule;
@@ -6595,6 +7385,10 @@
   exports.MtnaWfNgFormService = MtnaWfNgFormService;
   exports.MtnaWfOrderedListItemComponent = MtnaWfOrderedListItemComponent;
   exports.MtnaWfOrderedListItemModule = MtnaWfOrderedListItemModule;
+  exports.MtnaWfProgressiveFormComponent = MtnaWfProgressiveFormComponent;
+  exports.MtnaWfProgressiveFormModule = MtnaWfProgressiveFormModule;
+  exports.MtnaWfProgressiveFormSectionComponent = MtnaWfProgressiveFormSectionComponent;
+  exports.MtnaWfProgressiveFormSectionModule = MtnaWfProgressiveFormSectionModule;
   exports.MtnaWfRepeatableItemComponent = MtnaWfRepeatableItemComponent;
   exports.MtnaWfRepeatableItemContainerComponent = MtnaWfRepeatableItemContainerComponent;
   exports.MtnaWfRepeatableItemContainerModule = MtnaWfRepeatableItemContainerModule;
@@ -6620,16 +7414,23 @@
   exports.MtnaWfYearQuarterModule = MtnaWfYearQuarterModule;
   exports.MtnaWfYearQuarterRangeComponent = MtnaWfYearQuarterRangeComponent;
   exports.MtnaWfYearQuarterRangeModule = MtnaWfYearQuarterRangeModule;
+  exports.PROGRESSIVE_FORM_ID = PROGRESSIVE_FORM_ID;
+  exports.PROGRESSIVE_FORM_SECTION_ID = PROGRESSIVE_FORM_SECTION_ID;
   exports.WEB_FORM_CUSTOM_ERRORS = WEB_FORM_CUSTOM_ERRORS;
   exports.everyStepStatus = everyStepStatus;
   exports.findFormControl = findFormControl;
   exports.findFormItem = findFormItem;
   exports.flattenSteps = flattenSteps;
   exports.generateFormSteps = generateFormSteps;
+  exports.generateFormStepsFromOutline = generateFormStepsFromOutline;
   exports.getItemClassSuffix = getItemClassSuffix;
+  exports.instanceOfFormStep = instanceOfFormStep;
+  exports.instanceOfFormStepGroup = instanceOfFormStepGroup;
   exports.isFormControl = isFormControl;
   exports.isFormGroup = isFormGroup;
   exports.isFormStepGroup = isFormStepGroup;
+  exports.isProgressiveForm = isProgressiveForm;
+  exports.isProgressiveFormSection = isProgressiveFormSection;
   exports.updateStepStatus = updateStepStatus;
   exports.validationResultValidator = validationResultValidator;