@mtna/web-form-angular 1.0.5 → 1.0.6-SNAPSHOT.10

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

@@ -2,7 +2,7 @@
   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('@mtna/core-i18n-angular'), require('@mtna/designer-ts'), require('@mtna/core-ts'), require('@mtna/designer-angular'), require('uuid'), require('@angular/forms'), 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('@angular/material/table'), require('@ngrx/store'), require('@ngrx/effects'), require('@angular/router')) :
   typeof define === 'function' && define.amd ? define('@mtna/web-form-angular', ['exports', '@angular/core', '@angular/material/dialog', '@angular/cdk/coercion', '@mtna/web-form-ts', 'rxjs', '@mtna/core-i18n-angular', '@mtna/designer-ts', '@mtna/core-ts', '@mtna/designer-angular', 'uuid', '@angular/forms', '@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', '@angular/material/table', '@ngrx/store', '@ngrx/effects', '@angular/router'], 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.i2, global.designerTs, global.coreTs, global.i1, global.uuid, global.ng.forms, global.ng.material.core, global.ng.animations, global.i2$2, global.i1$2, 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$6, 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$9, global.ng.material.progressSpinner, global.ng.material.table, global.i1$b, global.i1$c, global.ng.router));
-})(this, (function (exports, i0, i1$1, coercion, webFormTs, rxjs, i2, designerTs, coreTs, i1, uuid, i6, i3, animations, i2$2, i1$2, i1$3, i2$1, i3$1, i1$4, i3$2, materialMomentAdapter, operators, i1$5, i1$6, i4, flexLayout, i2$3, i3$4, i6$1, i3$3, i6$2, i1$7, i2$4, i2$5, i1$8, i3$5, i5, i2$6, i1$9, i5$1, i1$a, i1$b, i1$c, i5$2) { 'use strict';
+})(this, (function (exports, i0, i1$1, coercion, webFormTs, rxjs, i2, designerTs, coreTs, i1, uuid, i6, i3, animations, i2$2, i1$2, i1$3, i2$1, i3$1, i1$4, i3$2, materialMomentAdapter, operators, i1$5, i1$6, i4, flexLayout, i2$3, i3$4, i10, i3$3, i6$1, i1$7, i2$4, i2$5, i1$8, i3$5, i5, i2$6, i1$9, i5$1, i1$a, i1$b, i1$c, i5$2) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -40,9 +40,9 @@
   var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
   var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$3);
   var i3__namespace$4 = /*#__PURE__*/_interopNamespace(i3$4);
-  var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
+  var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
   var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$3);
-  var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
+  var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
   var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$7);
   var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$4);
   var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$5);
@@ -1278,7 +1278,7 @@
   function isTemplateItemDesign(design) {
       switch (design.type) {
           case webFormTs.BOOLEAN_ITEM_TEMPLATE_ID:
-          // case BULLETED_LIST_ITEM_TEMPLATE_ID:
+          case webFormTs.BULLETED_LIST_ITEM_TEMPLATE_ID:
           case webFormTs.CHECKBOX_GRID_TEMPLATE_ID:
           case webFormTs.CHECKBOX_ITEM_TEMPLATE_ID:
           case webFormTs.DATE_ITEM_TEMPLATE_ID:
@@ -1291,7 +1291,7 @@
           case webFormTs.LINEAR_SCALE_ITEM_TEMPLATE_ID:
           case webFormTs.MULTIPLE_CHOICE_GRID_ITEM_TEMPLATE_ID:
           case webFormTs.MULTIPLE_CHOICE_ITEM_TEMPLATE_ID:
-          // case NUMBERED_LIST_ITEM_TEMPLATE_ID:
+          case webFormTs.NUMBERED_LIST_ITEM_TEMPLATE_ID:
           case webFormTs.OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID:
           case webFormTs.PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID:
           case webFormTs.REPEATABLE_ITEM_TEMPLATE_IMPL_ID:
@@ -1311,7 +1311,7 @@
   }
   function isTemplateItem(something) {
       return (webFormTs.instanceOfBooleanItemTemplate(something) ||
-          // instanceOfBulletedListItemTemplate(something) ||
+          webFormTs.instanceOfBulletedListItemTemplate(something) ||
           webFormTs.instanceOfCheckboxGridTemplate(something) ||
           webFormTs.instanceOfCheckboxItemTemplate(something) ||
           webFormTs.instanceOfDateItemTemplate(something) ||
@@ -1324,7 +1324,7 @@
           webFormTs.instanceOfLinearScaleItemTemplate(something) ||
           webFormTs.instanceOfMultipleChoiceGridItemTemplate(something) ||
           webFormTs.instanceOfMultipleChoiceItemTemplate(something) ||
-          // instanceOfNumberedListItemTemplate(something) ||
+          webFormTs.instanceOfNumberedListItemTemplate(something) ||
           webFormTs.instanceOfOffsetDateRangeTemplate(something) ||
           webFormTs.instanceOfParagraphAnswerItemTemplate(something) ||
           webFormTs.instanceOfRepeatableItemTemplate(something) ||
@@ -1353,15 +1353,11 @@
   function getText(properties, key, i18n, languageId, fallback) {
       if (fallback === void 0) { fallback = ''; }
       var _a;
-      console.warn('getText', { properties: properties, key: key, i18n: i18n, languageId: languageId, fallback: fallback });
       if (coreTs.isPresent(properties[key]) && properties[key] !== '') {
-          console.warn('present');
           if (i18n) {
-              console.warn('i18n');
               return (_a = i2.getI18nString(properties[key], languageId, true)) !== null && _a !== void 0 ? _a : '';
           }
           else {
-              console.warn('not i18n');
               return properties[key];
           }
       }
@@ -2555,7 +2551,6 @@
       };
       BulletedListItemTemplateMapper.prototype.getSectionItemBulletedList = function (item) {
           var properties = [];
-          // TODO need to handle for repeated literals, add new type of REPEATED_STRING_I18N(?) and component to handle input
           properties.push(designerTs.getI18nListDesignProperty(i18n_values, i18n_valuesInstructions, prop_item_values, i18n_listValue, i18n_newListValue, item.values));
           return { display: i18n_bulletedListConfiguration, properties: properties };
       };
@@ -2797,7 +2792,6 @@
       };
       NumberedListItemTemplateMapper.prototype.getSectionItemNumberedList = function (item) {
           var properties = [];
-          // TODO need to handle for repeated literals, add new type of REPEATED_STRING_I18N(?) and component to handle input
           properties.push(designerTs.getI18nListDesignProperty(i18n_items, i18n_templateItemsInstructions, prop_item_items, i18n_item, i18n_newItem, item.items));
           return { display: i18n_numberedListConfiguration, properties: properties };
       };
@@ -3270,8 +3264,6 @@
       return coreTs.isType(something, 'className') && something.className === 'FormStep';
   }
 
-  var MTNA_WF_API_TOKEN = new i0.InjectionToken('mtnaWfApiConfig');
-
   var CUSTOM_MAT_DATE_FORMAT = {
       parse: {
           dateInput: 'YYYY/MM/DD',
@@ -4448,6 +4440,9 @@
           },
           set: function (value) {
               this._item = value;
+              if (this.wfItemComponent) {
+                  this.reset();
+              }
           },
           enumerable: false,
           configurable: true
@@ -4482,6 +4477,20 @@
           enumerable: false,
           configurable: true
       });
+      MtnaWfItemInjector.prototype.reset = function () {
+          var _a, _b, _c;
+          if (coreTs.isPresent(this.focusedSectionSubscription)) {
+              (_a = this.focusedSectionSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+              this.focusedSectionSubscription = undefined;
+          }
+          if (coreTs.isPresent(this.toggleFormItemsSubscription)) {
+              (_b = this.toggleFormItemsSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+              this.toggleFormItemsSubscription = undefined;
+          }
+          (_c = this.componentRef) === null || _c === void 0 ? void 0 : _c.destroy();
+          this.wfItemComponent = undefined;
+          this.ngOnInit();
+      };
       MtnaWfItemInjector.prototype.ngOnInit = function () {
           if (this.item) {
               _super.prototype.ngOnInit.call(this);
@@ -4489,6 +4498,7 @@
       };
       MtnaWfItemInjector.prototype.configureComponent = function (componentRef) {
           var _this = this;
+          this.componentRef = componentRef;
           this.wfItemComponent = componentRef.instance;
           this.wfItemComponent.header = this.header;
           this._indicatorStatus.subscribe(function (status) {
@@ -4507,7 +4517,7 @@
                   if (this.wfItemComponent instanceof MtnaWfBaseParentValueItem) {
                       this.wfItemComponent.parentIds = this.parentIds;
                       // added output to remove ui service from base components
-                      this.wfItemComponent.toggleFormItems.subscribe(function (data) {
+                      this.toggleFormItemsSubscription = this.wfItemComponent.toggleFormItems.subscribe(function (data) {
                           _this.toggleFormItems.emit(data);
                       });
                       if (this.wfItemComponent instanceof MtnaWfBaseSingleSelectionParentValueItem) {
@@ -4520,7 +4530,7 @@
               this.wfItemComponent.parentIds = this.parentIds;
               if (this.wfItemComponent instanceof MtnaWfBaseSectionItem) {
                   this.wfItemComponent.step = this.step;
-                  this.wfItemComponent.focused.subscribe(function (step) {
+                  this.focusedSectionSubscription = this.wfItemComponent.focused.subscribe(function (step) {
                       _this.focusedSection.emit(step);
                   });
               }
@@ -4576,14 +4586,24 @@
                   type: i0.Output
               }] } });
 
+  /**
+   * Sanitize the HTML string and optionally add a required field indicator.
+   * @param v The HTML string to sanitize.
+   * @param required Whether to append a required field indicator to the HTML string.
+   * @returns A SafeHtml object that can be safely rendered in the template.
+   */
   var MtnaWfSanitizeHtmlPipe = /** @class */ (function () {
       function MtnaWfSanitizeHtmlPipe(_sanitizer) {
           this._sanitizer = _sanitizer;
       }
-      MtnaWfSanitizeHtmlPipe.prototype.transform = function (v) {
+      MtnaWfSanitizeHtmlPipe.prototype.transform = function (v, required) {
+          if (required === void 0) { required = false; }
           if (!v) {
               return '';
           }
+          if (required) {
+              v = v + '<span class="sr-only">This field is required</span>';
+          }
           return this._sanitizer.bypassSecurityTrustHtml(v);
       };
       return MtnaWfSanitizeHtmlPipe;
@@ -4664,7 +4684,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: i3__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 : required\"\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: [{
@@ -5087,45 +5107,6 @@
                   }]
           }] });
 
-  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() {
       }
@@ -6016,20 +5997,24 @@
                   }]
           }] });
 
-  var MtnaWfApiService = /** @class */ (function () {
-      function MtnaWfApiService(apiConfig, http) {
-          this.apiConfig = apiConfig;
-          this.http = http;
-          this.API_URL = this.apiConfig.baseUrl + "/api";
-          this.FORM_URL = this.API_URL + "/form";
-          this.TEMPLATE_URL = this.API_URL + "/template";
-          this.NEW_TEMPLATE_URL = this.TEMPLATE_URL + "/new";
-          this.NEW_SECTION_URL = this.TEMPLATE_URL + "/section";
-          this.ITEMS_URL = this.TEMPLATE_URL + "/items";
-          this.ITEM_INSTANCE_URL = this.TEMPLATE_URL + "/item";
-          this.TEMPLATE_SAVE_URL = this.TEMPLATE_URL + "/save";
-          this.TEMPLATE_DELETE_URL = this.TEMPLATE_URL + "/delete";
-          this.ALL_TEMPLATES_URL = this.API_URL + "/templates";
+  var MtnaWfApiService = /** @class */ (function (_super) {
+      __extends(MtnaWfApiService, _super);
+      function MtnaWfApiService(apiConfig, http, logger) {
+          var _this = _super.call(this, apiConfig, http, logger) || this;
+          _this.apiConfig = apiConfig;
+          _this.http = http;
+          _this.logger = logger;
+          _this.API_URL = "" + _this.BASE_URL;
+          _this.FORM_URL = _this.API_URL + "/form";
+          _this.TEMPLATE_URL = _this.API_URL + "/template";
+          _this.NEW_TEMPLATE_URL = _this.TEMPLATE_URL + "/new";
+          _this.NEW_SECTION_URL = _this.TEMPLATE_URL + "/section";
+          _this.ITEMS_URL = _this.TEMPLATE_URL + "/items";
+          _this.ITEM_INSTANCE_URL = _this.TEMPLATE_URL + "/item";
+          _this.TEMPLATE_SAVE_URL = _this.TEMPLATE_URL + "/save";
+          _this.TEMPLATE_DELETE_URL = _this.TEMPLATE_URL + "/delete";
+          _this.ALL_TEMPLATES_URL = _this.API_URL + "/templates";
+          return _this;
       }
       /**
        * Download a web form
@@ -6044,8 +6029,8 @@
        * @param formInstanceId template ID of the mtna form
        * @param itemId repeatableTemplateId of the requesting RepeatableItem
        */
-      MtnaWfApiService.prototype.getRepeatableItem = function (formInstanceId, itemId) {
-          return this.http.get(this.FORM_URL + "/" + formInstanceId + "/new/item/" + itemId);
+      MtnaWfApiService.prototype.getRepeatableItem = function (templateId, itemTemplateId) {
+          return this.http.get(this.FORM_URL + "/" + templateId + "/item/" + itemTemplateId);
       };
       MtnaWfApiService.prototype.getNewTemplate = function () {
           return this.http.get(this.NEW_TEMPLATE_URL);
@@ -6075,8 +6060,8 @@
           return this.http.post(this.ITEM_INSTANCE_URL + "/convert", templateItem);
       };
       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 });
+  }(i1$2.BaseUrlService));
+  MtnaWfApiService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfApiService, deps: [{ token: i1$2.MTNA_API_CONFIG }, { token: i1__namespace$3.HttpClient }, { token: i1__namespace$1.MtnaLogger }], 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,
@@ -6084,8 +6069,8 @@
           }], ctorParameters: function () {
           return [{ type: undefined, decorators: [{
                           type: i0.Inject,
-                          args: [MTNA_WF_API_TOKEN]
-                      }] }, { type: i1__namespace$3.HttpClient }];
+                          args: [i1$2.MTNA_API_CONFIG]
+                      }] }, { type: i1__namespace$3.HttpClient }, { type: i1__namespace$1.MtnaLogger }];
       } });
 
   /**
@@ -6372,7 +6357,7 @@
           }
           else {
               this.apiService
-                  .getRepeatableItem(this._mtnaForm.instanceId, change.id)
+                  .getRepeatableItem(this._mtnaForm.templateId, change.templateId)
                   .pipe(operators.take(1))
                   .subscribe(function (newItem) {
                   var newFormControl = _this.serializeMtnaFormItem(newItem);
@@ -6460,18 +6445,18 @@
           if (!!this.itemToggleQue && !!this.itemToggleQue.length) {
               // The form needs time to rerender, so we push this loop to the end of the stack
               setTimeout(function () {
-                  var e_1, _b;
+                  var e_1, _c;
                   if (_this.itemToggleQue) {
                       try {
-                          for (var _c = __values(_this.itemToggleQue), _d = _c.next(); !_d.done; _d = _c.next()) {
-                              var change = _d.value;
+                          for (var _d = __values(_this.itemToggleQue), _e = _d.next(); !_e.done; _e = _d.next()) {
+                              var change = _e.value;
                               _this.uiService.toggleFormItems(change.enabledItems, change.disabledItems, !!change.enable, change.enablerId, true);
                           }
                       }
                       catch (e_1_1) { e_1 = { error: e_1_1 }; }
                       finally {
                           try {
-                              if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                              if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
                           }
                           finally { if (e_1) throw e_1.error; }
                       }
@@ -6629,15 +6614,16 @@
        * @param change The change that recently occurred in the mtnaForm
        */
       MtnaWfManagerService.prototype._modifyFormItemConditions = function (form, change) {
-          var e_2, _b;
+          var e_2, _c;
+          var _a, _b;
           var newForm = form;
           if (change.conditionChanges) {
               var formItems = {};
               var _loop_1 = function (cc) {
-                  var e_3, _e;
+                  var e_3, _f;
                   try {
-                      for (var _f = (e_3 = void 0, __values(__spreadArray(__spreadArray([], __read(cc.enabledItems)), __read(cc.disabledItems)))), _g = _f.next(); !_g.done; _g = _f.next()) {
-                          var toggledId = _g.value;
+                      for (var _g = (e_3 = void 0, __values(__spreadArray(__spreadArray([], __read(cc.enabledItems)), __read(cc.disabledItems)))), _h = _g.next(); !_h.done; _h = _g.next()) {
+                          var toggledId = _h.value;
                           var formItem = formItems[toggledId];
                           var formItemComponent = this_1.uiService.getItem(toggledId);
                           if (!formItem && (formItemComponent === null || formItemComponent === void 0 ? void 0 : formItemComponent.item)) {
@@ -6648,7 +6634,8 @@
                               var itemIds = change.actionType === 'ADD'
                                   ? __spreadArray(__spreadArray([], __read(itemConditionItemIds)), [cc.enablerId]) : itemConditionItemIds.filter(function (i) { return i !== cc.enablerId; });
                               var newItem = Object.assign(Object.assign({}, formItem), { condition: Object.assign(Object.assign({}, formItem.condition), { itemIds: itemIds }) });
-                              var newChange = new webFormTs.MtnaWfFormItemChange(newItem.instanceId, (formItemComponent === null || formItemComponent === void 0 ? void 0 : formItemComponent.parentIds) || [], 'REPLACE');
+                              var templateId = (_b = (_a = formItem) === null || _a === void 0 ? void 0 : _a.templateId) !== null && _b !== void 0 ? _b : newItem.instanceId;
+                              var newChange = new webFormTs.MtnaWfFormItemChange(newItem.instanceId, templateId, (formItemComponent === null || formItemComponent === void 0 ? void 0 : formItemComponent.parentIds) || [], 'REPLACE');
                               newForm = this_1._modifyFormItem(newForm, newChange, newItem);
                               formItems[toggledId] = newItem;
                           }
@@ -6657,7 +6644,7 @@
                   catch (e_3_1) { e_3 = { error: e_3_1 }; }
                   finally {
                       try {
-                          if (_g && !_g.done && (_e = _f.return)) _e.call(_f);
+                          if (_h && !_h.done && (_f = _g.return)) _f.call(_g);
                       }
                       finally { if (e_3) throw e_3.error; }
                   }
@@ -6667,15 +6654,15 @@
               };
               var this_1 = this;
               try {
-                  for (var _c = __values(change.conditionChanges), _d = _c.next(); !_d.done; _d = _c.next()) {
-                      var cc = _d.value;
+                  for (var _d = __values(change.conditionChanges), _e = _d.next(); !_e.done; _e = _d.next()) {
+                      var cc = _e.value;
                       _loop_1(cc);
                   }
               }
               catch (e_2_1) { e_2 = { error: e_2_1 }; }
               finally {
                   try {
-                      if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                      if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
                   }
                   finally { if (e_2) throw e_2.error; }
               }
@@ -6688,7 +6675,7 @@
        * @param idMap map of the item's internal instanceIds
        */
       MtnaWfManagerService.prototype._buildInternalIdsMap = function (item, idMap) {
-          var e_4, _b;
+          var e_4, _c;
           idMap[item.instanceId] = true;
           if (coreTs.isType(item, 'items')) {
               var items = item.items;
@@ -6701,7 +6688,7 @@
               catch (e_4_1) { e_4 = { error: e_4_1 }; }
               finally {
                   try {
-                      if (items_1_1 && !items_1_1.done && (_b = items_1.return)) _b.call(items_1);
+                      if (items_1_1 && !items_1_1.done && (_c = items_1.return)) _c.call(items_1);
                   }
                   finally { if (e_4) throw e_4.error; }
               }
@@ -6723,7 +6710,7 @@
        * @param action Whether the item was added or removed
        */
       MtnaWfManagerService.prototype._buildConditionChangeArray = function (item, changes, internalIdMap, action) {
-          var e_5, _b, e_6, _c;
+          var e_5, _c, e_6, _d;
           if (webFormTs.isOptionItemImpl(item)) {
               var enable = !!action && action === 'ADD' ? item.option.selected || item.value === item.option.option.id : false;
               this._pushConditionToArray(item.instanceId, item.option.enabledItems, item.option.disabledItems, changes, internalIdMap, enable);
@@ -6736,15 +6723,15 @@
               };
               var this_2 = this;
               try {
-                  for (var _d = __values(item.options), _e = _d.next(); !_e.done; _e = _d.next()) {
-                      var option = _e.value;
+                  for (var _e = __values(item.options), _f = _e.next(); !_f.done; _f = _e.next()) {
+                      var option = _f.value;
                       _loop_2(option);
                   }
               }
               catch (e_5_1) { e_5 = { error: e_5_1 }; }
               finally {
                   try {
-                      if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                      if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
                   }
                   finally { if (e_5) throw e_5.error; }
               }
@@ -6761,7 +6748,7 @@
               catch (e_6_1) { e_6 = { error: e_6_1 }; }
               finally {
                   try {
-                      if (items_2_1 && !items_2_1.done && (_c = items_2.return)) _c.call(items_2);
+                      if (items_2_1 && !items_2_1.done && (_d = items_2.return)) _d.call(items_2);
                   }
                   finally { if (e_6) throw e_6.error; }
               }
@@ -6819,7 +6806,7 @@
        * Revalidate form controls that previously had errors or have new errors now.
        */
       MtnaWfManagerService.prototype._updateServerSideErrors = function () {
-          var e_7, _b, e_8, _c;
+          var e_7, _c, e_8, _d;
           var _a;
           // Keep track of IDs for each control that needs to be revalidated
           var controlIdsToRevalidate = new Set();
@@ -6835,8 +6822,8 @@
           this._formItemValidationResults = {};
           if ((_a = this._mtnaForm) === null || _a === void 0 ? void 0 : _a.validationResult) {
               try {
-                  for (var _d = __values(this._mtnaForm.validationResult.formItemValidationResults), _e = _d.next(); !_e.done; _e = _d.next()) {
-                      var result = _e.value;
+                  for (var _e = __values(this._mtnaForm.validationResult.formItemValidationResults), _f = _e.next(); !_f.done; _f = _e.next()) {
+                      var result = _f.value;
                       if (result.validationStatus === 'ERRORS') {
                           // Store errors so that the validationResultValidator can validate each control
                           this._formItemValidationResults[result.id] = result;
@@ -6848,7 +6835,7 @@
               catch (e_7_1) { e_7 = { error: e_7_1 }; }
               finally {
                   try {
-                      if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                      if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
                   }
                   finally { if (e_7) throw e_7.error; }
               }
@@ -6868,7 +6855,7 @@
               catch (e_8_1) { e_8 = { error: e_8_1 }; }
               finally {
                   try {
-                      if (controlIdsToRevalidate_1_1 && !controlIdsToRevalidate_1_1.done && (_c = controlIdsToRevalidate_1.return)) _c.call(controlIdsToRevalidate_1);
+                      if (controlIdsToRevalidate_1_1 && !controlIdsToRevalidate_1_1.done && (_d = controlIdsToRevalidate_1.return)) _d.call(controlIdsToRevalidate_1);
                   }
                   finally { if (e_8) throw e_8.error; }
               }
@@ -6908,11 +6895,15 @@
               type: i0.Injectable
           }] });
 
-  var MtnaTemplateTransformationService = /** @class */ (function () {
-      function MtnaTemplateTransformationService(apiConfig, http) {
-          this.apiConfig = apiConfig;
-          this.http = http;
-          this.API_URL = this.apiConfig.baseUrl + "/api";
+  var MtnaTemplateTransformationService = /** @class */ (function (_super) {
+      __extends(MtnaTemplateTransformationService, _super);
+      function MtnaTemplateTransformationService(apiConfig, http, logger) {
+          var _this = _super.call(this, apiConfig, http, logger) || this;
+          _this.apiConfig = apiConfig;
+          _this.http = http;
+          _this.logger = logger;
+          _this.API_URL = "" + _this.BASE_URL;
+          return _this;
       }
       MtnaTemplateTransformationService.prototype.convertTemplateToForm = function (request) {
           // return this.http.post<Form>(`${this.API_URL}/template/convert`, request);
@@ -6920,8 +6911,8 @@
           return rxjs.of(undefined);
       };
       return MtnaTemplateTransformationService;
-  }());
-  MtnaTemplateTransformationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaTemplateTransformationService, deps: [{ token: MTNA_WF_API_TOKEN }, { token: i1__namespace$3.HttpClient }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  }(i1$2.BaseUrlService));
+  MtnaTemplateTransformationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaTemplateTransformationService, deps: [{ token: i1$2.MTNA_API_CONFIG }, { token: i1__namespace$3.HttpClient }, { token: i1__namespace$1.MtnaLogger }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   MtnaTemplateTransformationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaTemplateTransformationService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaTemplateTransformationService, decorators: [{
               type: i0.Injectable,
@@ -6929,8 +6920,8 @@
           }], ctorParameters: function () {
           return [{ type: undefined, decorators: [{
                           type: i0.Inject,
-                          args: [MTNA_WF_API_TOKEN]
-                      }] }, { type: i1__namespace$3.HttpClient }];
+                          args: [i1$2.MTNA_API_CONFIG]
+                      }] }, { type: i1__namespace$3.HttpClient }, { type: i1__namespace$1.MtnaLogger }];
       } });
 
   var _BaseFormComponent = i1$2.mixinDestroyNotifier(/** @class */ (function () {
@@ -7404,7 +7395,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' && 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: i3__namespace$4.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 });
+  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: i3__namespace$4.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: i10__namespace.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: [{
@@ -7501,7 +7492,7 @@
       return MtnaWfFormStepperComponent;
   }(_FormStepperMixinBase));
   MtnaWfFormStepperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormStepperComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfFormStepperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepperComponent, selector: "mtna-wf-stepper", inputs: { color: "color", incompleteIcon: "incompleteIcon", steps: "steps" }, outputs: { selected: "selected" }, usesInheritance: true, ngImport: i0__namespace, template: "<ol>\n  <ng-container *ngFor=\"let step of steps; let last = last; trackBy: _trackStep\">\n    <ng-container\n      [ngTemplateOutlet]=\"(step | mtnaWfStepGroupPipe) ? groupStep : singleStep\"\n      [ngTemplateOutletContext]=\"{ $implicit: step }\"\n    ></ng-container>\n  </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\n      fxLayout=\"column\"\n      fxLayoutAlign=\"start start\"\n      [class.child-step-active]=\"(groupStepParent.steps | childStepActive) && groupStepCollapsedMap[groupStepParent.instanceId]\"\n    >\n      <div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"mtna-wf-step-item-content\">\n        <button\n          fxFlex\n          mat-button\n          class=\"step-button\"\n          [attr.aria-label]=\"groupStepParent | getStepAriaLabel : groupStepCollapsedMap[groupStepParent.instanceId]\"\n          (click)=\"toggleGroupStep(step)\"\n        >\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=\"\n            let groupStep of step.steps | slice : 0 : (groupStepCollapsedMap[step.instanceId] ? 0 : step.steps.length);\n            let last = last\n          \"\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\n              [ngTemplateOutlet]=\"stepContent\"\n              [ngTemplateOutletContext]=\"{ $implicit: groupStepChild, isChildStep: true }\"\n            ></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\n      fxFlex\n      mat-button\n      class=\"step-button\"\n      [attr.aria-label]=\"step | getStepAriaLabel\"\n      [disabled]=\"step.status === 'DISABLED' || step.status === 'PLACEHOLDER'\"\n      (click)=\"_haltClickEvent($event, step)\"\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\" 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: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i3__namespace$4.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: i6__namespace$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3__namespace$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 });
+  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\n      fxLayout=\"column\"\n      fxLayoutAlign=\"start start\"\n      [class.child-step-active]=\"(groupStepParent.steps | childStepActive) && groupStepCollapsedMap[groupStepParent.instanceId]\"\n    >\n      <div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"mtna-wf-step-item-content\">\n        <button\n          fxFlex\n          mat-button\n          class=\"step-button\"\n          [attr.aria-label]=\"groupStepParent | getStepAriaLabel : groupStepCollapsedMap[groupStepParent.instanceId]\"\n          (click)=\"toggleGroupStep(step)\"\n        >\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=\"\n            let groupStep of step.steps | slice : 0 : (groupStepCollapsedMap[step.instanceId] ? 0 : step.steps.length);\n            let last = last\n          \"\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\n              [ngTemplateOutlet]=\"stepContent\"\n              [ngTemplateOutletContext]=\"{ $implicit: groupStepChild, isChildStep: true }\"\n            ></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\n      fxFlex\n      mat-button\n      class=\"step-button\"\n      [attr.aria-label]=\"step | getStepAriaLabel\"\n      [disabled]=\"step.status === 'DISABLED' || step.status === 'PLACEHOLDER'\"\n      (click)=\"_haltClickEvent($event, step)\"\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\" 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: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i3__namespace$4.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: i6__namespace$1.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: [{
@@ -7534,7 +7525,7 @@
           i1$2.MtnaStatusCircleModule,
           i3.MatRippleModule,
           i3$2.MatButtonModule,
-          i6$1.MatTooltipModule,
+          i10.MatTooltipModule,
           i3$4.MatIconModule,
           MtnaWfFormStepGroupPipeModule,
           CoerceFormStepGroupPipeModule,
@@ -7548,7 +7539,7 @@
               i1$2.MtnaStatusCircleModule,
               i3.MatRippleModule,
               i3$2.MatButtonModule,
-              i6$1.MatTooltipModule,
+              i10.MatTooltipModule,
               i3$4.MatIconModule,
               MtnaWfFormStepGroupPipeModule,
               CoerceFormStepGroupPipeModule,
@@ -7566,7 +7557,7 @@
                           i1$2.MtnaStatusCircleModule,
                           i3.MatRippleModule,
                           i3$2.MatButtonModule,
-                          i6$1.MatTooltipModule,
+                          i10.MatTooltipModule,
                           i3$4.MatIconModule,
                           MtnaWfFormStepGroupPipeModule,
                           CoerceFormStepGroupPipeModule,
@@ -7601,6 +7592,9 @@
           enumerable: false,
           configurable: true
       });
+      MtnaWfStepCardComponent.prototype.handleMouseEnter = function (event) {
+          this.handleFocusChange('mouse');
+      };
       Object.defineProperty(MtnaWfStepCardComponent.prototype, "step", {
           // @Input() step: FormStep | null | undefined;
           get: function () {
@@ -7620,7 +7614,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\" 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$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1__namespace$4.MatCardHeader, selector: "mat-card-header" }, { type: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4__namespace.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace$4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1__namespace$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1__namespace$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1__namespace$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  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: { listeners: { "mouseenter": "handleMouseEnter($event)" }, 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$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1__namespace$4.MatCardHeader, selector: "mat-card-header" }, { type: i1__namespace$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i2__namespace$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4__namespace.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1__namespace$4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1__namespace$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1__namespace$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1__namespace$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfStepCardComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -7634,6 +7628,9 @@
           }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }]; }, propDecorators: { active: [{
                   type: i0.HostBinding,
                   args: ['class.active']
+              }], handleMouseEnter: [{
+                  type: i0.HostListener,
+                  args: ['mouseenter', ['$event']]
               }], step: [{
                   type: i0.Input
               }], subtitle: [{
@@ -7868,7 +7865,7 @@
       return MtnaWfCheckboxComponent;
   }(MtnaWfBaseParentValueItem));
   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        [isCompact]=\"isCompact\"\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: i3__namespace$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: 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 });
+  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\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        [isCompact]=\"isCompact\"\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<div *ngIf=\"hasItemHeader\" class=\"mtna-wf-error-container checkbox-error\">\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", 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 .mtna-wf-error-container.checkbox-error{margin-top:4px;margin-left:.75em}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: i3__namespace$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1__namespace$5.MatError, selector: "mat-error", inputs: ["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: MtnaWfCheckboxComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -7912,7 +7909,7 @@
           i2$5.MatCheckboxModule,
           i3$2.MatButtonModule,
           i3$4.MatIconModule,
-          i6$1.MatTooltipModule,
+          i10.MatTooltipModule,
           MtnaWfFormItemModule,
           i1$2.MtnaHighlightModule,
           i6.ReactiveFormsModule,
@@ -7926,7 +7923,7 @@
               i2$5.MatCheckboxModule,
               i3$2.MatButtonModule,
               i3$4.MatIconModule,
-              i6$1.MatTooltipModule,
+              i10.MatTooltipModule,
               MtnaWfFormItemModule,
               i1$2.MtnaHighlightModule,
               i6.ReactiveFormsModule,
@@ -7944,7 +7941,7 @@
                           i2$5.MatCheckboxModule,
                           i3$2.MatButtonModule,
                           i3$4.MatIconModule,
-                          i6$1.MatTooltipModule,
+                          i10.MatTooltipModule,
                           MtnaWfFormItemModule,
                           i1$2.MtnaHighlightModule,
                           i6.ReactiveFormsModule,
@@ -8361,7 +8358,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        [isCompact]=\"isCompact\"\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", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfItemsWithValue": MtnaWfItemsWithValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  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        [isCompact]=\"isCompact\"\n        [item]=\"subItem\"\n        [control]=\"control.controls[subItem.instanceId]\"\n        [parentIds]=\"parentIds.concat(item.instanceId)\"\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.concat(item.instanceId)\"\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", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$1.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: [{
@@ -8423,7 +8420,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\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        [isCompact]=\"isCompact\"\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-section{display:block}mtna-wf-section 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", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfGetObjectType": MtnaWfGetObjectTypePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  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        [isCompact]=\"isCompact\"\n        [item]=\"subItem\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds.concat(item.instanceId)\"\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-section{display:block}mtna-wf-section 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", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfGetObjectType": MtnaWfGetObjectTypePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfFormSectionComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -8781,16 +8778,16 @@
           return _this;
       }
       MtnaWfRepeatableItemContainerComponent.prototype.addItem = function () {
-          this.manager.changeMtnaFormItem(new webFormTs.MtnaWfFormItemChange(this.item.repeatableTemplateId, this.parentIds, 'ADD'));
+          this.manager.changeMtnaFormItem(new webFormTs.MtnaWfFormItemChange(this.item.repeatableTemplateId, this.item.repeatableTemplateId, __spreadArray(__spreadArray([], __read(this.parentIds)), [this.item.instanceId]), 'ADD'));
       };
       MtnaWfRepeatableItemContainerComponent.prototype.removeItem = function (item) {
           var conditionChanges = this.manager.generateConditionChangeArray(item, 'REMOVE');
-          this.manager.changeMtnaFormItem(new webFormTs.MtnaWfFormItemChange(item.instanceId, this.parentIds, 'REMOVE', conditionChanges));
+          this.manager.changeMtnaFormItem(new webFormTs.MtnaWfFormItemChange(item.instanceId, item.templateId, __spreadArray(__spreadArray([], __read(this.parentIds)), [this.item.instanceId]), 'REMOVE', conditionChanges));
       };
       return MtnaWfRepeatableItemContainerComponent;
   }(MtnaWfBaseParentValueItem));
   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  <mat-card *ngIf=\"item.items.length > 0\">\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          [isCompact]=\"isCompact\"\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  </mat-card>\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;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: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { 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: i3__namespace$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "mtnaTrackByProperty": i1__namespace$1.MtnaTrackByPropertyPipe, "coerceFormItem": MtnaWfCoerceFormItemPipe, "uppercase": i3__namespace.UpperCasePipe }, animations: [
+  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    <mat-card>\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        i18n-matTooltip\n      >\n        <mat-icon>remove_circle</mat-icon>\n      </button>\n      <mtna-wf-item\n        [isCompact]=\"isCompact\"\n        [item]=\"subitem\"\n        [control]=\"!!control && !!control.controls ? control.controls[subitem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </mat-card>\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;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: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { 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: i3__namespace$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "isCompact", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "mtnaTrackByProperty": i1__namespace$1.MtnaTrackByPropertyPipe, "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' })),
@@ -8831,9 +8828,8 @@
           i1$2.MtnaHighlightModule,
           i3$2.MatButtonModule,
           i3$4.MatIconModule,
-          i6$1.MatTooltipModule,
+          i10.MatTooltipModule,
           i1$2.MtnaTrackByPropertyPipeModule,
-          MtnaWfCoerceFormItemPipeModule,
           i1$7.MatCardModule], exports: [MtnaWfRepeatableItemContainerComponent] });
   MtnaWfRepeatableItemContainerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerModule, imports: [[
               i3$1.CommonModule,
@@ -8843,9 +8839,8 @@
               i1$2.MtnaHighlightModule,
               i3$2.MatButtonModule,
               i3$4.MatIconModule,
-              i6$1.MatTooltipModule,
+              i10.MatTooltipModule,
               i1$2.MtnaTrackByPropertyPipeModule,
-              MtnaWfCoerceFormItemPipeModule,
               i1$7.MatCardModule,
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemContainerModule, decorators: [{
@@ -8859,9 +8854,8 @@
                           i1$2.MtnaHighlightModule,
                           i3$2.MatButtonModule,
                           i3$4.MatIconModule,
-                          i6$1.MatTooltipModule,
+                          i10.MatTooltipModule,
                           i1$2.MtnaTrackByPropertyPipeModule,
-                          MtnaWfCoerceFormItemPipeModule,
                           i1$7.MatCardModule,
                       ],
                       declarations: [MtnaWfRepeatableItemContainerComponent],
@@ -10427,7 +10421,7 @@
       return MtnaWfCheckboxItemTemplateComponent;
   }(MtnaWfBaseTemplateOptionGroupItemComponent));
   MtnaWfCheckboxItemTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxItemTemplateComponent, deps: [{ token: i0.LOCALE_ID }, { token: MtnaWfDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfCheckboxItemTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfCheckboxItemTemplateComponent, selector: "mtna-wf-checkbox-item-template", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset *ngIf=\"template\" [ngClass]=\"{ 'template-control-item-content': true, 'single-option': template.options.length === 1 }\">\n  <ng-container *ngFor=\"let option of template.options; let i = index; trackBy: _trackByOptionId\">\n    <div fxLayout=\"row\">\n      <mat-checkbox [color]=\"color\" [disabled]=\"template.disabled\">\n        {{ option.option.name }}\n      </mat-checkbox>\n      <button *ngIf=\"option.acknowledgement\" class=\"acknowledgement-btn\" mat-stroked-button (click)=\"handleClick(option)\">\n        [acknowledgement]\n      </button>\n    </div>\n    <ng-container *ngIf=\"template.optionTemplateMap[option.option.id] as subTemplate\">\n      <mtna-wf-template-item\n        [color]=\"color\"\n        [displayLocale]=\"displayLocale\"\n        [isCompact]=\"isCompact\"\n        [template]=\"subTemplate\"\n      ></mtna-wf-template-item>\n    </ng-container>\n  </ng-container>\n</fieldset>\n", styles: ["mtna-wf-checkbox-item-template{display:flex;flex-direction:column;position:relative}mtna-wf-checkbox-item-template .mat-checkbox{display:block;margin-right:8px}mtna-wf-checkbox-item-template .mat-checkbox>.mat-checkbox-layout{display:block}mtna-wf-checkbox-item-template .mat-checkbox>.mat-checkbox-layout>.mat-checkbox-label{white-space:normal}mtna-wf-checkbox-item-template .mat-checkbox .mat-checkbox-inner-container{bottom:1px}mtna-wf-checkbox-item-template .mat-stroked-button.acknowledgement-btn{line-height:24px;font-weight:normal;padding:0 4px;min-width:132px;height:24px}mtna-wf-checkbox-item-template fieldset{border:none;margin:0}mtna-wf-checkbox-item-template fieldset.template-control-item-content.single-option{padding:0}\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: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfCheckboxItemTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfCheckboxItemTemplateComponent, selector: "mtna-wf-checkbox-item-template", usesInheritance: true, ngImport: i0__namespace, template: "<fieldset *ngIf=\"template\" [ngClass]=\"{ 'template-control-item-content': true, 'single-option': template.options.length === 1 }\">\n  <ng-container *ngFor=\"let option of template.options; let i = index; trackBy: _trackByOptionId\">\n    <div fxLayout=\"row\">\n      <mat-checkbox [color]=\"color\" [disabled]=\"template.disabled\">\n        {{ option.option.name }}\n      </mat-checkbox>\n      <button *ngIf=\"option.acknowledgement\" class=\"acknowledgement-btn\" mat-stroked-button (click)=\"handleClick(option)\">\n        [acknowledgement]\n      </button>\n    </div>\n    <ng-container *ngIf=\"template.optionTemplateMap[option.option.id] as subTemplate\">\n      <mtna-wf-template-item\n        [color]=\"color\"\n        [displayLocale]=\"displayLocale\"\n        [isCompact]=\"isCompact\"\n        [template]=\"subTemplate\"\n      ></mtna-wf-template-item>\n    </ng-container>\n  </ng-container>\n</fieldset>\n", styles: ["mtna-wf-checkbox-item-template{display:flex;flex-direction:column;position:relative}mtna-wf-checkbox-item-template .mat-checkbox{display:block;margin-right:8px}mtna-wf-checkbox-item-template .mat-checkbox>.mat-checkbox-layout{display:block}mtna-wf-checkbox-item-template .mat-checkbox>.mat-checkbox-layout>.mat-checkbox-label{white-space:normal}mtna-wf-checkbox-item-template .mat-checkbox .mat-checkbox-inner-container{bottom:1px}mtna-wf-checkbox-item-template .mat-stroked-button.acknowledgement-btn{line-height:24px;font-weight:normal;padding:0 4px;min-width:132px;height:24px}mtna-wf-checkbox-item-template fieldset{border:none;margin:0}mtna-wf-checkbox-item-template fieldset.template-control-item-content.single-option{padding:0}\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: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$1.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"] }, { 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"] }], 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: MtnaWfCheckboxItemTemplateComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -10450,12 +10444,12 @@
       return MtnaWfCheckboxItemTemplateModule;
   }());
   MtnaWfCheckboxItemTemplateModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxItemTemplateModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  MtnaWfCheckboxItemTemplateModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxItemTemplateModule, declarations: [MtnaWfCheckboxItemTemplateComponent], imports: [i3$1.CommonModule, flexLayout.FlexLayoutModule, i2$5.MatCheckboxModule, i3$2.MatButtonModule, i3$4.MatIconModule, i6$1.MatTooltipModule, MtnaWfTemplateItemModule], exports: [MtnaWfCheckboxItemTemplateComponent] });
-  MtnaWfCheckboxItemTemplateModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxItemTemplateModule, imports: [[i3$1.CommonModule, flexLayout.FlexLayoutModule, i2$5.MatCheckboxModule, i3$2.MatButtonModule, i3$4.MatIconModule, i6$1.MatTooltipModule, MtnaWfTemplateItemModule]] });
+  MtnaWfCheckboxItemTemplateModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxItemTemplateModule, declarations: [MtnaWfCheckboxItemTemplateComponent], imports: [i3$1.CommonModule, flexLayout.FlexLayoutModule, i2$5.MatCheckboxModule, i3$2.MatButtonModule, i3$4.MatIconModule, i10.MatTooltipModule, MtnaWfTemplateItemModule], exports: [MtnaWfCheckboxItemTemplateComponent] });
+  MtnaWfCheckboxItemTemplateModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxItemTemplateModule, imports: [[i3$1.CommonModule, flexLayout.FlexLayoutModule, i2$5.MatCheckboxModule, i3$2.MatButtonModule, i3$4.MatIconModule, i10.MatTooltipModule, MtnaWfTemplateItemModule]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfCheckboxItemTemplateModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      imports: [i3$1.CommonModule, flexLayout.FlexLayoutModule, i2$5.MatCheckboxModule, i3$2.MatButtonModule, i3$4.MatIconModule, i6$1.MatTooltipModule, MtnaWfTemplateItemModule],
+                      imports: [i3$1.CommonModule, flexLayout.FlexLayoutModule, i2$5.MatCheckboxModule, i3$2.MatButtonModule, i3$4.MatIconModule, i10.MatTooltipModule, MtnaWfTemplateItemModule],
                       declarations: [MtnaWfCheckboxItemTemplateComponent],
                       exports: [MtnaWfCheckboxItemTemplateComponent],
                   }]
@@ -11304,7 +11298,7 @@
       return MtnaWfRepeatableItemTemplateContainerComponent;
   }(MtnaWfBaseTemplateItemWithListComponent));
   MtnaWfRepeatableItemTemplateContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemTemplateContainerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfRepeatableItemTemplateContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfRepeatableItemTemplateContainerComponent, selector: "mtna-wf-repeatable-item-template-container", usesInheritance: true, ngImport: i0__namespace, template: "<section>\n  <mtna-wf-repeatable-item-template @repeatItemExpandCollapse>\n    <ng-container *ngIf=\"template && template.item\">\n      <mat-card>\n        <button mat-icon-button class=\"item-remove-button\" color=\"warn\" matTooltip=\"Remove Item\" i18n-matTooltip>\n          <mat-icon>remove_circle</mat-icon>\n        </button>\n        <mtna-wf-template-item [isCompact]=\"isCompact\" [template]=\"template.item\"></mtna-wf-template-item>\n      </mat-card>\n    </ng-container>\n  </mtna-wf-repeatable-item-template>\n</section>\n<button mat-raised-button class=\"new-item-button\" color=\"primary\">\n  {{ template?.additionalText || _addText | uppercase }}\n</button>\n", styles: ["mtna-wf-repeatable-item-template-container{display:block}mtna-wf-repeatable-item-template-container>section>mtna-wf-repeatable-item-template{position:relative;padding:16px;display:inline-block;margin:8px;max-width:100%}mtna-wf-repeatable-item-template-container>section>mtna-wf-repeatable-item-template .item-remove-button{position:absolute;top:-22px;left:-22px}mtna-wf-repeatable-item-template-container>section>mtna-wf-repeatable-item-template>mtna-wf-template-item:first-child{margin-top:0}mtna-wf-repeatable-item-template-container .new-item-button{margin-left:.75em}mtna-wf-repeatable-item-template-container>section{padding-left:.75em}mtna-wf-repeatable-item-template-container>section,mtna-wf-repeatable-item-template-container .new-item-button{margin-top:16px}\n"], components: [{ type: MtnaWfRepeatableItemTemplateComponent, selector: "mtna-wf-repeatable-item-template" }, { type: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { 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: i3__namespace$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "uppercase": i3__namespace.UpperCasePipe }, animations: [
+  MtnaWfRepeatableItemTemplateContainerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfRepeatableItemTemplateContainerComponent, selector: "mtna-wf-repeatable-item-template-container", usesInheritance: true, ngImport: i0__namespace, template: "<section>\n  <mtna-wf-repeatable-item-template @repeatItemExpandCollapse>\n    <ng-container *ngIf=\"template && template.item\">\n      <mat-card>\n        <button mat-icon-button class=\"item-remove-button\" color=\"warn\" matTooltip=\"Remove Item\" i18n-matTooltip>\n          <mat-icon>remove_circle</mat-icon>\n        </button>\n        <mtna-wf-template-item [isCompact]=\"isCompact\" [template]=\"template.item\"></mtna-wf-template-item>\n      </mat-card>\n    </ng-container>\n  </mtna-wf-repeatable-item-template>\n</section>\n<button mat-raised-button class=\"new-item-button\" color=\"primary\">\n  {{ template?.additionalText || _addText | uppercase }}\n</button>\n", styles: ["mtna-wf-repeatable-item-template-container{display:block}mtna-wf-repeatable-item-template-container>section>mtna-wf-repeatable-item-template{position:relative;padding:16px;display:inline-block;margin:8px;max-width:100%}mtna-wf-repeatable-item-template-container>section>mtna-wf-repeatable-item-template .item-remove-button{position:absolute;top:-22px;left:-22px}mtna-wf-repeatable-item-template-container>section>mtna-wf-repeatable-item-template>mtna-wf-template-item:first-child{margin-top:0}mtna-wf-repeatable-item-template-container .new-item-button{margin-left:.75em}mtna-wf-repeatable-item-template-container>section{padding-left:.75em}mtna-wf-repeatable-item-template-container>section,mtna-wf-repeatable-item-template-container .new-item-button{margin-top:16px}\n"], components: [{ type: MtnaWfRepeatableItemTemplateComponent, selector: "mtna-wf-repeatable-item-template" }, { type: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { 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: i3__namespace$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "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' })),
@@ -11343,7 +11337,7 @@
           MtnaWfTemplateItemModule,
           i3$2.MatButtonModule,
           i3$4.MatIconModule,
-          i6$1.MatTooltipModule,
+          i10.MatTooltipModule,
           i1$2.MtnaTrackByPropertyPipeModule,
           i1$7.MatCardModule], exports: [MtnaWfRepeatableItemTemplateContainerComponent] });
   MtnaWfRepeatableItemTemplateContainerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfRepeatableItemTemplateContainerModule, imports: [[
@@ -11352,7 +11346,7 @@
               MtnaWfTemplateItemModule,
               i3$2.MatButtonModule,
               i3$4.MatIconModule,
-              i6$1.MatTooltipModule,
+              i10.MatTooltipModule,
               i1$2.MtnaTrackByPropertyPipeModule,
               i1$7.MatCardModule,
           ]] });
@@ -11365,7 +11359,7 @@
                           MtnaWfTemplateItemModule,
                           i3$2.MatButtonModule,
                           i3$4.MatIconModule,
-                          i6$1.MatTooltipModule,
+                          i10.MatTooltipModule,
                           i1$2.MtnaTrackByPropertyPipeModule,
                           i1$7.MatCardModule,
                       ],
@@ -11658,11 +11652,9 @@
           this.typeLoaded$ = this.store.select(templateDesignTypeLoaded);
       }
       TemplateFormFacade.prototype.getTemplateInstance = function (template) {
-          console.warn({ template: template });
           this.store.dispatch(getTemplateInstance({ template: template }));
       };
       TemplateFormFacade.prototype.getTemplateItemInstance = function (templateItem) {
-          console.warn({ templateItem: templateItem });
           this.store.dispatch(getTemplateItemInstance({ templateItem: templateItem }));
       };
       return TemplateFormFacade;
@@ -11948,7 +11940,7 @@
           this.templateFormFacade = templateFormFacade;
           this.contextSelected$ = this.designFacade.contextSelected$;
           this.focusedDesignId$ = this.designFacade.focusedDesignId$;
-          this.modifiedModel$ = this.designFacade.modifiedModel$.pipe(operators.tap(function (modifiedModel) { return console.warn('here'); }));
+          this.modifiedModel$ = this.designFacade.modifiedModel$;
           this.previewLanguage$ = this.designFacade.previewLanguage$;
           this.loading$ = this.templateFormFacade.loading$;
           this.templateForm$ = this.templateFormFacade.templateForm$;
@@ -12062,7 +12054,7 @@
       return MtnaWfTemplateItemGroupComponent;
   }(MtnaWfBaseTemplateItemComponent));
   MtnaWfTemplateItemGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfTemplateItemGroupComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfTemplateItemGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTemplateItemGroupComponent, selector: "mtna-wf-template-item-group", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"template\">\n  <mat-list *ngIf=\"inList; else fullLayout\" [ngClass]=\"template.layout\">\n    <mtna-wf-template-item\n      *ngFor=\"let subItem of template.items; let index = index; trackBy: _trackByInstanceId\"\n      [class.row-item]=\"template.layout === 'ROW'\"\n      [ngClass.lt-md]=\"'width-100'\"\n      [template]=\"subItem\"\n      [inList]=\"true\"\n    ></mtna-wf-template-item>\n  </mat-list>\n\n  <ng-template #fullLayout>\n    <div class=\"template-item-group-container\" [ngClass]=\"template.layout\">\n      <mtna-wf-template-item\n        *ngFor=\"let subItem of template.items; trackBy: _trackByInstanceId\"\n        [class.row-item]=\"template.layout === 'ROW' && !fullWidth[subItem.itemId]\"\n        [ngClass.lt-md]=\"'width-100'\"\n        [color]=\"color\"\n        [displayLocale]=\"displayLocale\"\n        [template]=\"subItem\"\n      ></mtna-wf-template-item>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: ["mtna-wf-template-item-group mat-list mat-list-item [mat-line]{letter-spacing:.5px}mtna-wf-template-item-group mtna-wf-multiple-choice-template-item{display:block}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item-group{margin-top:1rem}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item:has(mtna-wf-title-item-template)~:not(mtna-wf-template-item > mtna-wf-title-item-template){padding-left:16px}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item:has(mtna-wf-title-item-template)~:not(mtna-wf-template-item > mtna-wf-title-item-template).width-100{width:calc(100% - 16px)}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item:has(mtna-wf-title-item-template)~:not(mtna-wf-template-item > mtna-wf-title-item-template):first-of-type{margin-top:0}mtna-wf-template-item-group .template-item-group-container.ROW>mtna-wf-template-item{margin-top:0}mtna-wf-template-item-group .template-item-group-container.ROW>*{display:block}mtna-wf-template-item-group .template-item-group-container .row-item{width:calc(50% - 16px);display:inline-block;margin:0 8px}mtna-wf-template-item-group .template-item-group-container .width-100{width:100%}mtna-wf-template-item-group .template-item-group-container .width-100.row-item{width:calc(100% - 16px)}\n"], components: [{ type: i2__namespace$5.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  MtnaWfTemplateItemGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTemplateItemGroupComponent, selector: "mtna-wf-template-item-group", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"template\">\n  <mat-list *ngIf=\"inList; else fullLayout\" [ngClass]=\"template.layout\">\n    <mtna-wf-template-item\n      *ngFor=\"let subItem of template.items; let index = index; trackBy: _trackByInstanceId\"\n      [class.row-item]=\"template.layout === 'ROW'\"\n      [ngClass.lt-md]=\"'width-100'\"\n      [template]=\"subItem\"\n      [inList]=\"true\"\n    ></mtna-wf-template-item>\n  </mat-list>\n\n  <ng-template #fullLayout>\n    <div class=\"template-item-group-container\" [ngClass]=\"template.layout\">\n      <mtna-wf-template-item\n        *ngFor=\"let subItem of template.items; trackBy: _trackByInstanceId\"\n        [class.row-item]=\"template.layout === 'ROW' && !fullWidth[subItem.itemId]\"\n        [ngClass.lt-md]=\"'width-100'\"\n        [color]=\"color\"\n        [displayLocale]=\"displayLocale\"\n        [template]=\"subItem\"\n      ></mtna-wf-template-item>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: ["mtna-wf-template-item-group mat-list mat-list-item [mat-line]{letter-spacing:.5px}mtna-wf-template-item-group mtna-wf-multiple-choice-template-item{display:block}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item-group{margin-top:1rem}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item:has(mtna-wf-title-item-template)~:not(mtna-wf-template-item > mtna-wf-title-item-template){padding-left:16px}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item:has(mtna-wf-title-item-template)~:not(mtna-wf-template-item > mtna-wf-title-item-template).width-100{width:calc(100% - 16px)}mtna-wf-template-item-group .template-item-group-container>mtna-wf-template-item:has(mtna-wf-title-item-template)~:not(mtna-wf-template-item > mtna-wf-title-item-template):first-of-type{margin-top:0}mtna-wf-template-item-group .template-item-group-container.ROW>mtna-wf-template-item{margin-top:0}mtna-wf-template-item-group .template-item-group-container.ROW>*{display:block}mtna-wf-template-item-group .template-item-group-container .row-item{width:calc(50% - 16px);display:inline-block;margin:0 8px}mtna-wf-template-item-group .template-item-group-container .width-100{width:100%}mtna-wf-template-item-group .template-item-group-container .width-100.row-item{width:calc(100% - 16px)}\n"], components: [{ type: i2__namespace$5.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$1.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"] }], 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: MtnaWfTemplateItemGroupComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -12169,15 +12161,35 @@
           }] });
   var templateObject_1;
 
+  var MtnaWfUnorderedListItemTemplateComponent = /** @class */ (function (_super) {
+      __extends(MtnaWfUnorderedListItemTemplateComponent, _super);
+      function MtnaWfUnorderedListItemTemplateComponent() {
+          return _super !== null && _super.apply(this, arguments) || this;
+      }
+      return MtnaWfUnorderedListItemTemplateComponent;
+  }(MtnaWfBaseTemplateItemComponent));
+  MtnaWfUnorderedListItemTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemTemplateComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  MtnaWfUnorderedListItemTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfUnorderedListItemTemplateComponent, selector: "mtna-wf-unordered-list-item-template", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"template\">\n  <ul>\n    <ng-container *ngIf=\"displayLocale | getI18nStringsValueFromLocale : template.values as values\">\n      <li *ngFor=\"let value of values\" [innerHTML]=\"value | mtnaWfSanitizeHtml\"></li>\n    </ng-container>\n  </ul>\n</ng-container>\n", styles: ["mtna-wf-unordered-list-item-template>ul{list-style:disc outside;padding-left:1rem}\n"], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "getI18nStringsValueFromLocale": GetI18nStringsValueFromLocalePipe, "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: MtnaWfUnorderedListItemTemplateComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'mtna-wf-unordered-list-item-template',
+                      templateUrl: './unordered-list-item.component.html',
+                      styleUrls: ['./unordered-list-item.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                      encapsulation: i0.ViewEncapsulation.None,
+                  }]
+          }] });
+
   var MTNA_WF_TEMPLATE_ITEM_INJECTED_COMPONENTS = [
       {
           key: webFormTs.BOOLEAN_ITEM_TEMPLATE_ID,
           component: MtnaWfBooleanItemTemplateComponent,
       },
-      // {
-      //   key: BULLETED_LIST_ITEM_TEMPLATE_ID,
-      //   component: MtnaWfUnorderedListItemTemplateComponent,
-      // },
+      {
+          key: webFormTs.BULLETED_LIST_ITEM_TEMPLATE_ID,
+          component: MtnaWfUnorderedListItemTemplateComponent,
+      },
       {
           key: webFormTs.CHECKBOX_ITEM_TEMPLATE_ID,
           component: MtnaWfCheckboxItemTemplateComponent,
@@ -12214,10 +12226,10 @@
           key: webFormTs.OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID,
           component: MtnaWfOffsetDateRangeItemTemplateComponent,
       },
-      // {
-      //   key: NUMBERED_LIST_ITEM_TEMPLATE_ID,
-      //   component: MtnaWfOrderedListItemTemplateComponent,
-      // },
+      {
+          key: webFormTs.NUMBERED_LIST_ITEM_TEMPLATE_ID,
+          component: MtnaWfOrderedListItemTemplateComponent,
+      },
       {
           key: webFormTs.PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID,
           component: MtnaWfParagraphAnswerItemTemplateComponent,
@@ -12357,26 +12369,6 @@
                   }]
           }] });
 
-  var MtnaWfUnorderedListItemTemplateComponent = /** @class */ (function (_super) {
-      __extends(MtnaWfUnorderedListItemTemplateComponent, _super);
-      function MtnaWfUnorderedListItemTemplateComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      return MtnaWfUnorderedListItemTemplateComponent;
-  }(MtnaWfBaseTemplateItemComponent));
-  MtnaWfUnorderedListItemTemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MtnaWfUnorderedListItemTemplateComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  MtnaWfUnorderedListItemTemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfUnorderedListItemTemplateComponent, selector: "mtna-wf-unordered-list-item-template", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"template\">\n  <ul>\n    <ng-container *ngIf=\"displayLocale | getI18nStringsValueFromLocale : template.values as values\">\n      <li *ngFor=\"let value of values\" [innerHTML]=\"value | mtnaWfSanitizeHtml\"></li>\n    </ng-container>\n  </ul>\n</ng-container>\n", styles: ["mtna-wf-unordered-list-item-template>ul{list-style:disc outside;padding-left:1rem}\n"], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "getI18nStringsValueFromLocale": GetI18nStringsValueFromLocalePipe, "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: MtnaWfUnorderedListItemTemplateComponent, decorators: [{
-              type: i0.Component,
-              args: [{
-                      selector: 'mtna-wf-unordered-list-item-template',
-                      templateUrl: './unordered-list-item.component.html',
-                      styleUrls: ['./unordered-list-item.component.scss'],
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                      encapsulation: i0.ViewEncapsulation.None,
-                  }]
-          }] });
-
   var MtnaWfUnorderedListItemTemplateModule = /** @class */ (function () {
       function MtnaWfUnorderedListItemTemplateModule() {
       }
@@ -12481,7 +12473,6 @@
   exports.I18nTextResponseItemTemplateMapper = I18nTextResponseItemTemplateMapper;
   exports.ISO_8601_DATE_DISPLAY_VALUE = ISO_8601_DATE_DISPLAY_VALUE;
   exports.LONG_DATE_DISPLAY_VALUE = LONG_DATE_DISPLAY_VALUE;
-  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;
   exports.MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME = MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME;
@@ -12519,8 +12510,6 @@
   exports.MtnaWfCoerceFormControlPipeModule = MtnaWfCoerceFormControlPipeModule;
   exports.MtnaWfCoerceFormGroupPipe = MtnaWfCoerceFormGroupPipe;
   exports.MtnaWfCoerceFormGroupPipeModule = MtnaWfCoerceFormGroupPipeModule;
-  exports.MtnaWfCoerceFormItemPipe = MtnaWfCoerceFormItemPipe;
-  exports.MtnaWfCoerceFormItemPipeModule = MtnaWfCoerceFormItemPipeModule;
   exports.MtnaWfDateComponent = MtnaWfDateComponent;
   exports.MtnaWfDateItemTemplateComponent = MtnaWfDateItemTemplateComponent;
   exports.MtnaWfDateItemTemplateModule = MtnaWfDateItemTemplateModule;