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

package/fesm2015/mtna-web-form-angular.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Optional, Inject, Component, Input, HostBinding, EventEmitter, Output, Pipe, NgModule, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Directive } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, Component, Input, HostBinding, EventEmitter, Output, Pipe, NgModule, ChangeDetectionStrategy, ViewEncapsulation, ViewChild } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -7,29 +7,29 @@ import { isForm, I18N_SHORT_ANSWER_ITEM_ID, I18N_PARAGRAPH_ANSWER_ITEM_ID, SHORT
 import { BehaviorSubject, Subject, Subscription, merge } from 'rxjs';
 import * as i6 from '@angular/forms';
 import { FormGroup, Validators, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { isKey, isNullOrUndefined, isPresent, isType, isObject, toLetters } from '@mtna/core-ts';
+import { isType, isKey, isNullOrUndefined, isPresent, isObject, toLetters } from '@mtna/core-ts';
 import * as i3$3 from '@angular/material/core';
 import { ErrorStateMatcher, mixinColor, MatRippleModule } from '@angular/material/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i2 from '@mtna/pojo-social-angular';
 import { MtnaAnnotationsIndicatorModule } from '@mtna/pojo-social-angular';
-import * as i1$1 from '@mtna/core-angular';
+import * as i4 from '@mtna/core-angular';
 import { mixinDestroyNotifier, MtnaComponentInjector, INJECTION_SERVICE, MtnaStatusCircleModule, MtnaHighlightModule, COMPLEX_STANDARD as COMPLEX_STANDARD$1, MtnaTrackByPropertyPipeModule, InjectedComponentProvider } from '@mtna/core-angular';
-import * as i1$7 from '@angular/material/radio';
+import * as i1$6 from '@angular/material/radio';
 import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
 import * as i2$4 from '@angular/material/select';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$2 from '@angular/platform-browser';
+import * as i1$1 from '@angular/platform-browser';
 import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { skipWhile, take, takeUntil, distinctUntilChanged } from 'rxjs/operators';
-import * as i1$3 from '@angular/common/http';
-import * as i1$8 from '@mtna/search-manager-angular';
+import * as i1$2 from '@angular/common/http';
+import * as i1$7 from '@mtna/search-manager-angular';
 import { MtnaSearchSelectionService, MtnaSearchDialogComponent, MtnaSearchDialogData } from '@mtna/search-manager-angular';
-import * as i4 from '@angular/cdk/a11y';
+import * as i4$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i2$1 from '@angular/material/divider';
@@ -39,29 +39,104 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i6$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$2 from '@angular/flex-layout/flex';
-import * as i1$4 from '@angular/material/card';
+import * as i7 from '@angular/flex-layout/extended';
+import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$5 from '@angular/material/form-field';
+import * as i1$4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$4 from '@angular/material/datepicker';
 import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
 import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$1 from '@angular/material/list';
+import * as i4$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i1$6 from '@mtna/file-manager-angular';
+import * as i1$5 from '@mtna/file-manager-angular';
 import { MtnaFileDownloadModule, MtnaFileUploadModule } from '@mtna/file-manager-angular';
 import * as i5$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i6$2 from '@angular/flex-layout/extended';
 import { MtnaLocaleIds, mtnaToLanguageId, mtnaLanguageIdToDisplay } from '@mtna/core-i18n-angular';
-import * as i1$9 from '@angular/material/table';
+import * as i1$8 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 
+class BaseFormStep {
+    constructor(instanceId) {
+        this.instanceId = instanceId;
+    }
+}
+
+class FormStepGroup extends BaseFormStep {
+    constructor(steps, instanceId, collapsed = false, label, num) {
+        super(instanceId);
+        this.steps = steps;
+        this.collapsed = collapsed;
+        this.label = label;
+        this.num = num;
+        this.className = 'FormStepGroup';
+    }
+}
+function isFormStepGroup(something) {
+    return isType(something, 'steps') && Array.isArray(something.steps);
+}
+function instanceOfFormStepGroup(something) {
+    return isType(something, 'className') && something.className === 'FormStepGroup';
+}
+
+class FormStep extends BaseFormStep {
+    constructor(num, label, instanceId, optional = false) {
+        super(instanceId);
+        this.num = num;
+        this.label = label;
+        this.optional = optional;
+        this.className = 'FormStep';
+        this.active = false;
+        this.status = 'INVALID';
+        this.disabled = false;
+    }
+}
+function instanceOfFormStep(something) {
+    return isType(something, 'className') && something.className === 'FormStep';
+}
+
+const PROGRESSIVE_FORM_ID = 'us.mtna.web.form.impl.ProgressiveFormImpl';
+function isProgressiveForm(something) {
+    return isType(something, 'itemId') && something.itemId === PROGRESSIVE_FORM_ID;
+}
+
+const PROGRESSIVE_FORM_SECTION_ID = 'us.mtna.web.form.impl.ProgressiveFormSectionImpl';
+function isProgressiveFormSection(something) {
+    return isType(something, 'itemId') && something.itemId === PROGRESSIVE_FORM_SECTION_ID;
+}
+
+const MTNA_WF_API_TOKEN = new InjectionToken('mtnaWfApiConfig');
+
+/**
+ * Dialog data for a {@link MtnaWfFormItemDialogComponent}
+ */
+class MtnaWfFormItemDialogData {
+    /**
+     * @param formItems The form items to render in the dialog
+     * @param title optional dialog title
+     */
+    constructor(formItems, title) {
+        this.formItems = formItems;
+        this.title = title;
+    }
+}
+
+const MTNA_WF_ITEM_WHITELIST = new InjectionToken('mtna-wf-item-whitelist', {
+    providedIn: 'root',
+    factory: MTNA_WF_ITEM_WHITELIST_FACTORY,
+});
+function MTNA_WF_ITEM_WHITELIST_FACTORY() {
+    return {
+        itemTypes: [],
+    };
+}
+
 const MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME = 'formItemValidationResult';
 /**
  * Valitator function that will check the root level {@link FormValidationResult} on
@@ -249,7 +324,12 @@ function serializeTableItem(item, managerService, customFormItemConditional = ()
  * @param customControlGenerator Serializer for a custom FormItem
  */
 function determineSerializeFunctionToUse(formItem, managerService, customFormItemConditional = () => false, customControlGenerator) {
-    if (isForm(formItem) || isRepeatableItem(formItem) || isSection(formItem) || isFormItemGroupImpl(formItem)) {
+    if (isForm(formItem) ||
+        isProgressiveForm(formItem) ||
+        isRepeatableItem(formItem) ||
+        isSection(formItem) ||
+        isProgressiveFormSection(formItem) ||
+        isFormItemGroupImpl(formItem)) {
         return serializeFormItems(formItem, managerService, customFormItemConditional, customControlGenerator);
     }
     else if (isTableItem(formItem)) {
@@ -337,7 +417,7 @@ function insertTableItemValues(item, ngFormValue, disabledState, customFormItemC
  * @param parent Parent of the FormItem, used to pass to the customFormItemBuilder
  */
 function determineInsertFunctionToUse(formItem, ngFormValue, disabledState, customFormItemConditional = () => false, customFormItemBuilder, parent) {
-    if (isSection(formItem) || isFormItemGroupImpl(formItem) || isRepeatableItem(formItem)) {
+    if (isSection(formItem) || isProgressiveFormSection(formItem) || isFormItemGroupImpl(formItem) || isRepeatableItem(formItem)) {
         const items = insertFormItemValues(formItem, ngFormValue, disabledState, customFormItemConditional, customFormItemBuilder);
         return Object.assign(Object.assign({}, formItem), { items, disabled: _isDisabled(formItem, disabledState) });
     }
@@ -428,9 +508,9 @@ function numCheckboxesValidator(typeCheck, limit = 1) {
         }
         switch (typeCheck) {
             case 'MIN':
-                return totalSelected >= limit ? null : { minSelected: `Select at least ${limit}` };
+                return totalSelected >= limit ? null : { minSelected: $localize `Select at least ${limit}` };
             case 'MAX':
-                return totalSelected <= limit ? null : { maxSelected: `Select no more than ${limit}` };
+                return totalSelected <= limit ? null : { maxSelected: $localize `Select no more than ${limit}` };
         }
     };
 }
@@ -568,60 +648,6 @@ function findFormItem(instanceId, group) {
     return null;
 }
 
-class BaseFormStep {
-    constructor(instanceId) {
-        this.instanceId = instanceId;
-    }
-}
-
-class FormStepGroup extends BaseFormStep {
-    constructor(steps, instanceId, collapsed = false) {
-        super(instanceId);
-        this.steps = steps;
-        this.collapsed = collapsed;
-    }
-}
-function isFormStepGroup(something) {
-    return isType(something, 'steps') && Array.isArray(something.steps);
-}
-
-class FormStep extends BaseFormStep {
-    constructor(num, label, instanceId, optional = false) {
-        super(instanceId);
-        this.num = num;
-        this.label = label;
-        this.optional = optional;
-        this.active = false;
-        this.status = 'INVALID';
-    }
-}
-
-const MTNA_WF_API_TOKEN = new InjectionToken('mtnaWfApiConfig');
-
-/**
- * Dialog data for a {@link MtnaWfFormItemDialogComponent}
- */
-class MtnaWfFormItemDialogData {
-    /**
-     * @param formItems The form items to render in the dialog
-     * @param title optional dialog title
-     */
-    constructor(formItems, title) {
-        this.formItems = formItems;
-        this.title = title;
-    }
-}
-
-const MTNA_WF_ITEM_WHITELIST = new InjectionToken('mtna-wf-item-whitelist', {
-    providedIn: 'root',
-    factory: MTNA_WF_ITEM_WHITELIST_FACTORY,
-});
-function MTNA_WF_ITEM_WHITELIST_FACTORY() {
-    return {
-        itemTypes: [],
-    };
-}
-
 /**
  * Flattens formStepGroup.steps and combines all steps into single array
  * @param steps Array<FormStep | FormStepGroup>
@@ -678,7 +704,7 @@ function generateFormSteps(items, allSteps = false) {
         if (allSteps) {
             newArray.push(new FormStep(count + 1, item.name || 'No Title', item.instanceId, !item.required));
         }
-        else if (isSection(item)) {
+        else if (isSection(item) || isProgressiveFormSection(item)) {
             // If the item is a Section, add a step
             newArray.push(new FormStep(count + 1, item.title.value || 'No Title', item.instanceId, !item.required));
         }
@@ -686,9 +712,24 @@ function generateFormSteps(items, allSteps = false) {
             // If the item is a DataCubeItem, add a step and add a group step for the sub-sections
             newArray.push(new FormStep(count + 1, item.title.value || '', item.instanceId, !item.required));
             const subSectionSteps = item.items
-                .filter(isSection)
+                .filter(isSection || isProgressiveFormSection)
                 .map((item, index) => new FormStep(`${count + 1}${toLetters(index + 1)}`, item.title.value || '', item.instanceId, !item.required));
-            newArray.push(new FormStepGroup(subSectionSteps, item.instanceId, false));
+            newArray.push(new FormStepGroup(subSectionSteps, item.instanceId, false, item.name, count + 1));
+        }
+        return newArray;
+    }, []);
+}
+function generateFormStepsFromOutline(outline) {
+    return outline.reduce((newArray, step) => {
+        // The number of non-group steps, used to number the top level steps
+        const count = newArray.filter((step) => !isFormStepGroup(step)).length;
+        if (step.childSteps && step.childSteps.length > 0) {
+            newArray.push(new FormStep(count + 1, step.label, step.instanceId || step.templateId, step.optional));
+            const subSectionSteps = step.childSteps.map((item, index) => new FormStep(`${count + 1}${toLetters(index + 1)}`, item.label, item.instanceId || item.templateId, item.optional));
+            newArray.push(new FormStepGroup(subSectionSteps, step.instanceId || step.templateId, false, step.label, count + 1));
+        }
+        else {
+            newArray.push(new FormStep(count + 1, step.label, step.instanceId || step.templateId, step.optional));
         }
         return newArray;
     }, []);
@@ -752,24 +793,24 @@ function updateStepStatus(instanceId, step, status, form) {
 
 /** List of default error messages to display */
 const DEFAULT_ERROR_MESSAGES = {
-    email: 'This field must include a valid email format.',
+    email: $localize `This field must include a valid email format.`,
     max: (item) => !isPresent(item) || !isPresent(item === null || item === void 0 ? void 0 : item.maxValue)
-        ? `This field's value must be less.`
-        : `${isPresent(item === null || item === void 0 ? void 0 : item.minValue) ? `Min value: ${item === null || item === void 0 ? void 0 : item.minValue} - ` : ''}Max value: ${item === null || item === void 0 ? void 0 : item.minValue}`,
-    maxlength: 'This field has exceeded the allowed maximum.',
+        ? $localize `This field's value must be less.`
+        : isPresent(item === null || item === void 0 ? void 0 : item.minValue) ? $localize `Min value: ${item.minValue} - ` : '' + $localize `Max value: ${item.maxValue}`,
+    maxlength: $localize `This field has exceeded the allowed maximum.`,
     maxSelected: null,
     min: (item) => !isPresent(item) || !isPresent(item === null || item === void 0 ? void 0 : item.minValue)
-        ? `This field's value must be greater.`
-        : `Min value: ${item === null || item === void 0 ? void 0 : item.minValue}${!isPresent(item === null || item === void 0 ? void 0 : item.maxValue) ? '' : ` - Max value: ${item === null || item === void 0 ? void 0 : item.maxValue}`}`,
-    minlength: 'This field has not met the required minimum.',
+        ? $localize `This field's value must be greater.`
+        : $localize `Min Value: ${item.minValue}` + isPresent(item === null || item === void 0 ? void 0 : item.maxValue) ? $localize ` - Max Value: ${item.maxValue}` : '',
+    minlength: $localize `This field has not met the required minimum.`,
     minSelected: null,
-    nonDigit: `This field's value must be numeric.`,
-    pattern: `This field's input does not meet the accepted pattern.`,
-    positive: `This field's value cannot be negative.`,
-    required: 'This field is required.',
-    requiredTrue: `This field's value must be 'true'.`,
-    wholeNumber: `This field cannot contain a decimal.`,
-    matDatepickerParse: `This field's value is not an accepted format.`,
+    nonDigit: $localize `This field's value must be numeric.`,
+    pattern: $localize `This field's input does not meet the accepted pattern.`,
+    positive: $localize `This field's value cannot be negative.`,
+    required: $localize `This field is required.`,
+    requiredTrue: `$localizeThis field's value must be 'true'.`,
+    wholeNumber: $localize `This field cannot contain a decimal.`,
+    matDatepickerParse: $localize `This field's value is not an accepted format.`,
 };
 const WEB_FORM_CUSTOM_ERRORS = new InjectionToken('mtnaWebFormCustomFormErrors');
 class MtnaWfUIService {
@@ -1166,8 +1207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 
 /* eslint-disable-next-line @angular-eslint/component-class-suffix */
 class MtnaWfBaseGroupItem extends MtnaWfBaseFormItemControl {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super(cdr);
         this._parentIds = new Array();
     }
     get parentIds() {
@@ -1180,14 +1221,14 @@ class MtnaWfBaseGroupItem extends MtnaWfBaseFormItemControl {
         return item.instanceId;
     }
 }
-MtnaWfBaseGroupItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseGroupItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MtnaWfBaseGroupItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseGroupItem, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 MtnaWfBaseGroupItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseGroupItem, selector: "ng-component", inputs: { parentIds: "parentIds" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseGroupItem, decorators: [{
             type: Component,
             args: [{
                     template: ``,
                 }]
-        }], propDecorators: { parentIds: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { parentIds: [{
                 type: Input
             }] } });
 
@@ -1246,7 +1287,8 @@ class MtnaWfBaseParentValueItem extends MtnaWfBaseValueItem {
         return super.control;
     }
     set control(control) {
-        if (control instanceof FormGroup) {
+        // Checks for a wrapping form group around this item.
+        if (control instanceof FormGroup && control.get(this.item.instanceId)) {
             super.control = control.get(this.item.instanceId);
             this.controlWrapper = control;
         }
@@ -1270,8 +1312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 
 /* eslint-disable-next-line @angular-eslint/component-class-suffix */
 class MtnaWfBaseSectionItem extends MtnaWfBaseGroupItem {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super(cdr);
         this.focused = new EventEmitter();
     }
     get step() {
@@ -1279,16 +1321,17 @@ class MtnaWfBaseSectionItem extends MtnaWfBaseGroupItem {
     }
     set step(value) {
         this._step = value;
+        console.warn({ value });
     }
 }
-MtnaWfBaseSectionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseSectionItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MtnaWfBaseSectionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseSectionItem, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 MtnaWfBaseSectionItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseSectionItem, selector: "ng-component", inputs: { step: "step" }, outputs: { focused: "focused" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseSectionItem, decorators: [{
             type: Component,
             args: [{
                     template: ``,
                 }]
-        }], propDecorators: { step: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { step: [{
                 type: Input
             }], focused: [{
                 type: Output
@@ -1474,7 +1517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     selector: 'mtna-wf-item-injector',
                     template: ``,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i1$1.InjectionService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i4.InjectionService, decorators: [{
                     type: Inject,
                     args: [INJECTION_SERVICE]
                 }] }]; }, propDecorators: { color: [{
@@ -1512,14 +1555,14 @@ class MtnaWfSanitizeHtmlPipe {
         return this._sanitizer.bypassSecurityTrustHtml(v);
     }
 }
-MtnaWfSanitizeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfSanitizeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+MtnaWfSanitizeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfSanitizeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 MtnaWfSanitizeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfSanitizeHtmlPipe, name: "mtnaWfSanitizeHtml" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfSanitizeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mtnaWfSanitizeHtml',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
 class MtnaWfSanitizeHtmlPipeModule {
 }
 MtnaWfSanitizeHtmlPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfSanitizeHtmlPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1679,7 +1722,7 @@ class MtnaWfFormItemComponent {
     }
 }
 MtnaWfFormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemComponent, deps: [{ token: i0.ElementRef }, { token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: { color: "color", control: "control", header: "header", inList: "inList", item: "item", parentIds: "parentIds", readonly: "readonly", step: "step" }, outputs: { focusedSection: "focusedSection" }, host: { properties: { "@mtnaWfExpandCollapse": "this.visible", "attr.id": "this.elementId" } }, ngImport: i0, template: "<mtna-annotations-indicator\n  *ngIf=\"item.annotationEnabled\"\n  [annotatableId]=\"item.annotatableId\"\n  color=\"primary\"\n  [count]=\"annotations$ | async\"\n  (status)=\"updateIndicatorStatus($event)\"\n></mtna-annotations-indicator>\n\n<mtna-wf-item-injector\n  [color]=\"color\"\n  [control]=\"control\"\n  [header]=\"header\"\n  [indicatorStatus]=\"indicatorStatus$.value\"\n  [inList]=\"inList\"\n  [item]=\"item\"\n  [parentIds]=\"parentIds\"\n  [readonly]=\"readonly\"\n  [step]=\"step\"\n  (focusedSection)=\"focusedSection.emit($event)\"\n  (toggleFormItems)=\"toggleFormItems($event)\"\n></mtna-wf-item-injector>\n\n<ng-template #header let-hideRequiredMarker=\"hideRequiredMarker\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control?.disabled\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [invalid]=\"control?.invalid && (control?.dirty || control?.touched)\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n</ng-template>\n\n<!-- <ng-container [ngSwitch]=\"item.itemId | mtnaWfGetObjectType\">\n  <mtna-wf-section\n    *ngSwitchCase=\"'sectionimpl'\"\n    [control]=\"$any(control)\"\n    [item]=\"$any(item)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n    [step]=\"step\"\n    (focused)=\"focusedSection.emit($event)\"\n  ></mtna-wf-section>\n\n  <mtna-wf-group\n    *ngSwitchCase=\"'formitemgroupimpl'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-group>\n\n  <mtna-wf-repeatable-item-container\n    *ngSwitchCase=\"'repeatableitem'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-repeatable-item-container>\n\n  <mtna-wf-value-item\n    *ngSwitchDefault\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"control\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-value-item>\n</ng-container> -->\n", styles: ["mtna-wf-item{display:block;position:relative}mtna-wf-item mtna-annotations-indicator{position:absolute;top:0;right:0;z-index:2}mtna-wf-item .mat-list-base{padding-top:0}\n"], components: [{ type: i2.MtnaAnnotationsIndicatorComponent, selector: "mtna-annotations-indicator", inputs: ["color", "annotatableId", "annotatableItemName", "count"], outputs: ["status"] }, { type: MtnaWfItemInjector, selector: "mtna-wf-item-injector", inputs: ["color", "control", "header", "indicatorStatus", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection", "toggleFormItems"] }, { type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, animations: [MTNA_WF_EXPAND_COLLAPSE], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfFormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: { color: "color", control: "control", header: "header", inList: "inList", item: "item", parentIds: "parentIds", readonly: "readonly", step: "step" }, outputs: { focusedSection: "focusedSection" }, host: { properties: { "@mtnaWfExpandCollapse": "this.visible", "attr.id": "this.elementId" } }, ngImport: i0, template: "<mtna-annotations-indicator\n  *ngIf=\"item.annotationEnabled\"\n  [annotatableId]=\"item.annotatableId\"\n  color=\"primary\"\n  [count]=\"annotations$ | async\"\n  (status)=\"updateIndicatorStatus($event)\"\n></mtna-annotations-indicator>\n\n<mtna-wf-item-injector\n  [color]=\"color\"\n  [control]=\"control\"\n  [header]=\"header\"\n  [indicatorStatus]=\"indicatorStatus$.value\"\n  [inList]=\"inList\"\n  [item]=\"item\"\n  [parentIds]=\"parentIds\"\n  [readonly]=\"readonly\"\n  [step]=\"step\"\n  (focusedSection)=\"focusedSection.emit($event)\"\n  (toggleFormItems)=\"toggleFormItems($event)\"\n></mtna-wf-item-injector>\n\n<ng-template #header let-hideRequiredMarker=\"hideRequiredMarker\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control?.disabled\"\n    [hideRequiredMarker]=\"hideRequiredMarker\"\n    [invalid]=\"control?.invalid && (control?.dirty || control?.touched)\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n</ng-template>\n", styles: ["mtna-wf-item{display:block;position:relative}mtna-wf-item mtna-annotations-indicator{position:absolute;top:0;right:0;z-index:2}mtna-wf-item .mat-list-base{padding-top:0}\n"], components: [{ type: i2.MtnaAnnotationsIndicatorComponent, selector: "mtna-annotations-indicator", inputs: ["color", "annotatableId", "annotatableItemName", "count"], outputs: ["status"] }, { type: MtnaWfItemInjector, selector: "mtna-wf-item-injector", inputs: ["color", "control", "header", "indicatorStatus", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection", "toggleFormItems"] }, { type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, animations: [MTNA_WF_EXPAND_COLLAPSE], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1726,7 +1769,7 @@ class MtnaWfAcknowledgeDialogComponent {
     }
 }
 MtnaWfAcknowledgeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfAcknowledgeDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfAcknowledgeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfAcknowledgeDialogComponent, selector: "mtna-wf-acknowledge-dialog", ngImport: i0, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button [mat-dialog-close]=\"false\" mat-button>CANCEL</button>\n  <button [mat-dialog-close]=\"true\" color=\"accent\" mat-raised-button>ACKNOWLEDGE</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+MtnaWfAcknowledgeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfAcknowledgeDialogComponent, selector: "mtna-wf-acknowledge-dialog", ngImport: i0, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button [mat-dialog-close]=\"false\" mat-button i18n>CANCEL</button>\n  <button [mat-dialog-close]=\"true\" color=\"accent\" mat-raised-button i18n>ACKNOWLEDGE</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfAcknowledgeDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -1752,6 +1795,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class ChildStepActivePipe {
+    transform(steps) {
+        return steps.some((step) => step.active);
+    }
+}
+ChildStepActivePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStepActivePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ChildStepActivePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStepActivePipe, name: "childStepActive" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStepActivePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'childStepActive'
+                }]
+        }] });
+class ChildStepActivePipeModule {
+}
+ChildStepActivePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStepActivePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChildStepActivePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStepActivePipeModule, declarations: [ChildStepActivePipe], exports: [ChildStepActivePipe] });
+ChildStepActivePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStepActivePipeModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ChildStepActivePipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ChildStepActivePipe],
+                    exports: [ChildStepActivePipe]
+                }]
+        }] });
+
 class MtnaWfGetObjectTypePipe {
     transform(id) {
         const newId = id.toLowerCase().split('.');
@@ -1922,25 +1991,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class CoerceFormStepGroupPipe {
+    transform(value) {
+        return instanceOfFormStepGroup(value) ? value : null;
+    }
+}
+CoerceFormStepGroupPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CoerceFormStepGroupPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepGroupPipe, name: "coerceFormStepGroup" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepGroupPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'coerceFormStepGroup',
+                }]
+        }] });
+class CoerceFormStepGroupPipeModule {
+}
+CoerceFormStepGroupPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepGroupPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CoerceFormStepGroupPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepGroupPipeModule, declarations: [CoerceFormStepGroupPipe], exports: [CoerceFormStepGroupPipe] });
+CoerceFormStepGroupPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepGroupPipeModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepGroupPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CoerceFormStepGroupPipe],
+                    exports: [CoerceFormStepGroupPipe],
+                }]
+        }] });
+
+class CoerceFormStepPipe {
+    transform(value) {
+        return instanceOfFormStep(value) ? value : null;
+    }
+}
+CoerceFormStepPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CoerceFormStepPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepPipe, name: "coerceFormStep" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'coerceFormStep'
+                }]
+        }] });
+class CoerceFormStepPipeModule {
+}
+CoerceFormStepPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CoerceFormStepPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepPipeModule, declarations: [CoerceFormStepPipe], exports: [CoerceFormStepPipe] });
+CoerceFormStepPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepPipeModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceFormStepPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CoerceFormStepPipe],
+                    exports: [CoerceFormStepPipe],
+                }]
+        }] });
+
 class MtnaWfDateQuarterPipe {
     transform(quarter, format = 'short') {
         const short = {
-            0: 'Q1',
-            1: 'Q2',
-            2: 'Q3',
-            3: 'Q4',
+            0: $localize `Q1`,
+            1: $localize `Q2`,
+            2: $localize `Q3`,
+            3: $localize `Q4`,
         };
         const medium = {
-            0: '1st Quarter',
-            1: '2nd Quarter',
-            2: '3rd Quarter',
-            3: '4th Quarter',
+            0: $localize `1st Quarter`,
+            1: $localize `2nd Quarter`,
+            2: $localize `3rd Quarter`,
+            3: $localize `4th Quarter`,
         };
         const long = {
-            0: 'First Quarter',
-            1: 'Second Quarter',
-            2: 'Third Quarter',
-            3: 'Fourth Quarter',
+            0: $localize `First Quarter`,
+            1: $localize `Second Quarter`,
+            2: $localize `Third Quarter`,
+            3: $localize `Fourth Quarter`,
         };
         switch (format) {
             case 'short':
@@ -2004,6 +2125,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class GetActiveFormStepItemPipe {
+    transform(items, activeStepId) {
+        if (!items || !activeStepId) {
+            return undefined;
+        }
+        else {
+            return items.find((item) => item.instanceId === activeStepId);
+        }
+    }
+}
+GetActiveFormStepItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetActiveFormStepItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetActiveFormStepItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetActiveFormStepItemPipe, name: "getActiveFormStepItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetActiveFormStepItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getActiveFormStepItem',
+                }]
+        }] });
+class GetActiveFormStepItemPipeModule {
+}
+GetActiveFormStepItemPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetActiveFormStepItemPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GetActiveFormStepItemPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetActiveFormStepItemPipeModule, declarations: [GetActiveFormStepItemPipe], exports: [GetActiveFormStepItemPipe] });
+GetActiveFormStepItemPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetActiveFormStepItemPipeModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetActiveFormStepItemPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GetActiveFormStepItemPipe],
+                    exports: [GetActiveFormStepItemPipe],
+                }]
+        }] });
+
 class MtnaWfGetAutoCompletePipe {
     transform(label) {
         if (label) {
@@ -2187,13 +2339,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class GetProgressiveFormItemPipe {
+    transform(step, items) {
+        if (items) {
+            const item = items.find((item) => item.instanceId || item.templateId === step.instanceId);
+            console.warn({ itemFromPipe: item });
+            if (item) {
+                return item;
+            }
+            else {
+                return undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    }
+}
+GetProgressiveFormItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetProgressiveFormItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetProgressiveFormItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetProgressiveFormItemPipe, name: "getProgressiveFormItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetProgressiveFormItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getProgressiveFormItem',
+                }]
+        }] });
+class GetProgressiveFormItemPipeModule {
+}
+GetProgressiveFormItemPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetProgressiveFormItemPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GetProgressiveFormItemPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetProgressiveFormItemPipeModule, declarations: [GetProgressiveFormItemPipe], exports: [GetProgressiveFormItemPipe] });
+GetProgressiveFormItemPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetProgressiveFormItemPipeModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetProgressiveFormItemPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GetProgressiveFormItemPipe],
+                    exports: [GetProgressiveFormItemPipe],
+                }]
+        }] });
+
 class MtnaWfGetSelectedOptionNamePipe {
     transform(id, options) {
+        const _notApplicableText = $localize `N/A`;
         if (!options || !id) {
-            return 'N/A';
+            return _notApplicableText;
         }
         const foundOption = options.find((o) => o.option.id === id);
-        return foundOption ? foundOption.option.name : 'N/A';
+        return foundOption ? foundOption.option.name : _notApplicableText;
     }
 }
 MtnaWfGetSelectedOptionNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfGetSelectedOptionNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -2217,21 +2408,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class GetStepAriaLabel {
+    constructor() {
+        this.stepStatusTextMap = {
+            ['INVALID']: $localize `Invalid`,
+            ['VALID']: $localize `Valid`,
+            ['DISABLED']: $localize `Disabled`,
+            ['ERROR']: $localize `Error`,
+            ['PENDING']: $localize `Pending`,
+            ['EMPTY']: $localize `Empty`,
+            ['INCOMPLETE']: $localize `Incomplete`,
+            ['PLACEHOLDER']: $localize `Placeholder`,
+        };
+    }
+    transform(step, collapsed) {
+        const stepText = $localize `Step`;
+        if (instanceOfFormStepGroup(step)) {
+            const collapsedText = collapsed ? $localize `collapsed step` : $localize `expanded step`;
+            const childStepsActiveText = step.steps.some((childStep) => childStep.active) ? $localize `Child step active.` : '';
+            return `${stepText} ${step.num}: ${step.label} - ${collapsedText}. ${childStepsActiveText}`;
+        }
+        else if (instanceOfFormStep(step)) {
+            const status = step.status === 'EMPTY' || step.status === 'PLACEHOLDER' ? undefined : this.stepStatusTextMap[step.status];
+            const activeText = step.active ? $localize `Active step` : undefined;
+            return `${stepText} ${step.num}: ${step.label} ${status ? ' - ' + status : ''}${activeText ? ' - ' + activeText : ''}.`;
+        }
+        else {
+            // Handle for unexpected types. Should never reach this point because the step should always be a FormStep or a FormStepGroup.
+            return '';
+        }
+    }
+}
+GetStepAriaLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetStepAriaLabel, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetStepAriaLabel.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetStepAriaLabel, name: "getStepAriaLabel" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetStepAriaLabel, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getStepAriaLabel',
+                }]
+        }] });
+class GetStepAriaLabelModule {
+}
+GetStepAriaLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetStepAriaLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GetStepAriaLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetStepAriaLabelModule, declarations: [GetStepAriaLabel], exports: [GetStepAriaLabel] });
+GetStepAriaLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetStepAriaLabelModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetStepAriaLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GetStepAriaLabel],
+                    exports: [GetStepAriaLabel],
+                }]
+        }] });
+
 /**
  * Returns an array of FormItems that contain a value.
  * Use only for readonly forms
  */
 class MtnaWfItemsWithValuePipe {
-    constructor() {
-        this.itemsCache = [];
-    }
     transform(items) {
-        var _a;
-        if ((_a = this.itemsCache) === null || _a === void 0 ? void 0 : _a.length) {
-            return this.itemsCache;
-        }
-        this.itemsCache = !items ? [] : items.filter(isValueItem);
-        return this.itemsCache;
+        const list = items ? items.filter(isValueItem) : [];
+        console.error({ items });
+        console.error({ list });
+        return list;
     }
 }
 MtnaWfItemsWithValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfItemsWithValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -2370,7 +2608,7 @@ class MtnaWfApiService {
         return this.http.get(this.TEMPLATE_DELETE_URL);
     }
 }
-MtnaWfApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfApiService, deps: [{ token: MTNA_WF_API_TOKEN }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+MtnaWfApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfApiService, deps: [{ token: MTNA_WF_API_TOKEN }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
 MtnaWfApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfApiService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfApiService, decorators: [{
             type: Injectable,
@@ -2378,7 +2616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MTNA_WF_API_TOKEN]
-                }] }, { type: i1$3.HttpClient }]; } });
+                }] }, { type: i1$2.HttpClient }]; } });
 
 /**
  * A dialog that renders a form item.
@@ -2390,7 +2628,7 @@ class MtnaWfFormItemDialogComponent {
     }
 }
 MtnaWfFormItemDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormItemDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemDialogComponent, selector: "mtna-wf-form-item-dialog", ngImport: i0, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button mat-dialog-close>Close</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+MtnaWfFormItemDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemDialogComponent, selector: "mtna-wf-form-item-dialog", ngImport: i0, template: "<h2 *ngIf=\"data.title as title\" mat-dialog-title>{{ title }}</h2>\n<mat-dialog-content>\n  <mtna-wf-item *ngFor=\"let item of data.formItems\" [item]=\"item\" [readonly]=\"true\"></mtna-wf-item>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-raised-button mat-dialog-close color=\"primary\" i18n>Close</button>\n</mat-dialog-actions>\n", components: [{ type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -2405,6 +2643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfDialogService {
     constructor(dialog) {
         this.dialog = dialog;
+        this._acknowledgementText = $localize `Acknowledgement`;
     }
     /**
      * Display the acknowledgement the user agreed to for a given option.
@@ -2413,7 +2652,7 @@ class MtnaWfDialogService {
     showAcknowledgement(acknowledgementItem) {
         this.dialog.open(MtnaWfFormItemDialogComponent, {
             closeOnNavigation: true,
-            data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || 'Acknowledgement'),
+            data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || this._acknowledgementText),
             disableClose: false,
             hasBackdrop: true,
             maxWidth: '500px',
@@ -2428,7 +2667,7 @@ class MtnaWfDialogService {
         return this.dialog
             .open(MtnaWfAcknowledgeDialogComponent, {
             closeOnNavigation: true,
-            data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || 'Acknowledgement'),
+            data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || this._acknowledgementText),
             disableClose: true,
             hasBackdrop: true,
             maxWidth: '500px',
@@ -2443,6 +2682,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
 
+/**
+ * This service manages and interacts with an Angular FormGroup. It provides functionality
+ * to add or remove form controls dynamically, track the form's state, and notify other
+ * components about unsaved changes. This service is used to centralize form handling and
+ * state management, providing a reliableway to monitor and respond to form changes.
+ */
 class MtnaWfNgFormService {
     constructor() {
         this.unsavedChanges$ = new BehaviorSubject(false);
@@ -2596,12 +2841,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * @export
  */
 class MtnaWfManagerService {
-    constructor(apiService, ngFormManager, uiService) {
+    constructor(apiService, ngFormService, uiService) {
         this.apiService = apiService;
-        this.ngFormManager = ngFormManager;
+        this.ngFormService = ngFormService;
         this.uiService = uiService;
         this.components = new Map();
         this.formChange$ = new Subject();
+        this.progressiveFormChange$ = new Subject();
         /** A map of all {@link FormItemValidationResult} keyed on id */
         this._formItemValidationResults = {};
         /**
@@ -2635,7 +2881,7 @@ class MtnaWfManagerService {
             let newForm = this._modifyFormItem(this._mtnaForm, change);
             // modify the conditions of all effected form items
             newForm = this._modifyFormItemConditions(newForm, change);
-            this.ngFormManager.removeControl(change.id, change.parentIds);
+            this.ngFormService.removeControl(change.id, change.parentIds);
             this.formChange$.next(newForm);
         }
         else {
@@ -2645,7 +2891,7 @@ class MtnaWfManagerService {
                 .subscribe((newItem) => {
                 const newFormControl = this.serializeMtnaFormItem(newItem);
                 if (newFormControl && this._mtnaForm) {
-                    this.ngFormManager.addControl(newItem.instanceId, change.parentIds, newFormControl);
+                    this.ngFormService.addControl(newItem.instanceId, change.parentIds, newFormControl);
                     // Add the new repeatable item into the mtnaform
                     let newForm = this._modifyFormItem(this._mtnaForm, Object.assign(Object.assign({}, change), { id: newItem.instanceId }), newItem);
                     // Generate a list of all formitem conditions needing change & modify those items in the form
@@ -2675,6 +2921,16 @@ class MtnaWfManagerService {
     getFormItemValidationResults() {
         return this._formItemValidationResults;
     }
+    /**
+     * Returns a new MtnaForm using the MtnaForm & reacive form values from the MtnaWfNgFormService's internal form.
+     *
+     * @param ngFormValues JSON object of ngFormValues
+     * @returns
+     */
+    updateForm(ngFormValues) {
+        const currentForm = this.ngFormService.getFormValue();
+        return Object.assign(Object.assign({}, currentForm), { items: insertFormItemValues(currentForm, ngFormValues, this.uiService.getDisabledStates(), this.dynamicFormConditional, this.dynamicWebFormItemBuilder) });
+    }
     /**
      * Returns a new MtnaForm using the previous MtnaForm & reactive form values.
      *
@@ -2793,7 +3049,7 @@ class MtnaWfManagerService {
                 return item;
             }
         }
-        if (isForm(item) || isSection(item) || isFormItemGroupImpl(item) || isRepeatableItem(item)) {
+        if (isForm(item) || isSection(item) || isProgressiveFormSection(item) || isFormItemGroupImpl(item) || isRepeatableItem(item)) {
             const items = [...item.items];
             const indexToModify = item.items.findIndex((i) => i.instanceId === change.parentIds[0]);
             const itemToModify = item.items[indexToModify];
@@ -3027,7 +3283,7 @@ class MtnaWfManagerService {
             }
         }
         // Only revalidate controls actually changes
-        const form = this.ngFormManager.getForm();
+        const form = this.ngFormService.getForm();
         if (form) {
             for (const id of controlIdsToRevalidate) {
                 const control = findFormControl(id, form);
@@ -3065,44 +3321,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }] });
 
-/* eslint-disable @angular-eslint/component-selector */
-class MtnaWfFormDisablerComponent {
-    constructor() {
-        this.formDisabled = false;
-    }
-}
-MtnaWfFormDisablerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormDisablerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormDisablerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: { formDisabled: "formDisabled" }, ngImport: i0, template: `
-    <fieldset [disabled]="formDisabled">
-      <ng-content></ng-content>
-    </fieldset>
-  `, isInline: true, styles: ["\n      fieldset {\n        display: block;\n        margin: unset;\n        padding: unset;\n        border: unset;\n      }\n    "] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormDisablerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[formDisabled]',
-                    template: `
-    <fieldset [disabled]="formDisabled">
-      <ng-content></ng-content>
-    </fieldset>
-  `,
-                    styles: [
-                        `
-      fieldset {
-        display: block;
-        margin: unset;
-        padding: unset;
-        border: unset;
-      }
-    `,
-                    ],
-                }]
-        }], propDecorators: { formDisabled: [{
-                type: Input
-            }] } });
-
-class MtnaWfFormComponent extends mixinDestroyNotifier(class {
-}) {
+const _BaseFormComponent = mixinDestroyNotifier(class {
+});
+class MtnaWfBaseFormComponent extends _BaseFormComponent {
     constructor(mtnaFormManager, ngFormService, uiService) {
         super();
         this.mtnaFormManager = mtnaFormManager;
@@ -3214,7 +3435,7 @@ class MtnaWfFormComponent extends mixinDestroyNotifier(class {
     /**
      * Find a form control with the given name, then emit it's status.
      *
-     * @param name — The unique name of the form cotrol to find and emit the status for.
+     * @param name — The unique name of the form control to find and emit the status for.
      */
     _emitFormControlStatus(name) {
         if (this.ngForm) {
@@ -3247,9 +3468,9 @@ class MtnaWfFormComponent extends mixinDestroyNotifier(class {
                             });
                         }
                         // Subscribe to status changes of each step & emit on change
-                        this._ngFormStatusChangeSub.add(control.statusChanges
-                            .pipe(takeUntil(this.destroyed$), distinctUntilChanged())
-                            .subscribe((status) => this.status.emit({ id: key, status })));
+                        this._ngFormStatusChangeSub.add(control.statusChanges.pipe(takeUntil(this.destroyed$), distinctUntilChanged()).subscribe((status) => {
+                            this.status.emit({ id: key, status });
+                        }));
                     }
                 }
             }
@@ -3310,16 +3531,12 @@ class MtnaWfFormComponent extends mixinDestroyNotifier(class {
         }
     }
 }
-MtnaWfFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormComponent, deps: [{ token: MtnaWfManagerService }, { token: MtnaWfNgFormService }, { token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormComponent, selector: "mtna-form", inputs: { annotations: "annotations", emitStatusOnMtnaFormChange: "emitStatusOnMtnaFormChange", mtnaForm: "mtnaForm", steps: "steps", readonly: "readonly" }, outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange" }, usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"ngForm\" [formGroup]=\"ngForm\" [formDisabled]=\"readonly\">\n  <mtna-wf-item\n    *ngFor=\"let item of mtnaForm?.items; let index = index; trackBy: _trackByInstanceId\"\n    [item]=\"item\"\n    [control]=\"ngForm.controls[item.instanceId]\"\n    [readonly]=\"readonly\"\n    [parentIds]=\"componentIds\"\n    [step]=\"_steps?.[item.instanceId]\"\n    (focusedSection)=\"focusedSection.emit($event)\"\n  ></mtna-wf-item>\n</form>\n", styles: ["mtna-form form{display:block}mtna-form form .mtna-wf-section{display:block;margin:32px 0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline{opacity:0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick{opacity:1}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-end,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-gap,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-start{border-width:1px}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix .mat-datepicker-toggle .mat-icon-button{cursor:default}mtna-form .mtna-wf-item,mtna-form .mtna-wf-title{margin-top:1rem}mtna-form .mtna-wf-text{margin:.5rem 0;font-size:.9rem}mtna-form .mtna-wf-title-item,mtna-form .mtna-wf-text-item{margin:0}\n"], components: [{ type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: ["formDisabled"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormComponent, decorators: [{
+MtnaWfBaseFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseFormComponent, deps: [{ token: MtnaWfManagerService }, { token: MtnaWfNgFormService }, { token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBaseFormComponent, selector: "ng-component", inputs: { annotations: "annotations", emitStatusOnMtnaFormChange: "emitStatusOnMtnaFormChange", mtnaForm: "mtnaForm", steps: "steps", readonly: "readonly" }, outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBaseFormComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'mtna-form',
-                    templateUrl: './form.component.html',
-                    styleUrls: ['./form.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
+                    template: ``,
                 }]
         }], ctorParameters: function () { return [{ type: MtnaWfManagerService }, { type: MtnaWfNgFormService }, { type: MtnaWfUIService }]; }, propDecorators: { annotations: [{
                 type: Input
@@ -3339,6 +3556,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Output
             }] } });
 
+/* eslint-disable @angular-eslint/component-selector */
+class MtnaWfFormDisablerComponent {
+    constructor() {
+        this.formDisabled = false;
+    }
+}
+MtnaWfFormDisablerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormDisablerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfFormDisablerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: { formDisabled: "formDisabled" }, ngImport: i0, template: `
+    <fieldset [disabled]="formDisabled">
+      <ng-content></ng-content>
+    </fieldset>
+  `, isInline: true, styles: ["\n      fieldset {\n        display: block;\n        margin: unset;\n        padding: unset;\n        border: unset;\n      }\n    "] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormDisablerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[formDisabled]',
+                    template: `
+    <fieldset [disabled]="formDisabled">
+      <ng-content></ng-content>
+    </fieldset>
+  `,
+                    styles: [
+                        `
+      fieldset {
+        display: block;
+        margin: unset;
+        padding: unset;
+        border: unset;
+      }
+    `,
+                    ],
+                }]
+        }], propDecorators: { formDisabled: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @angular-eslint/no-outputs-metadata-property */
+class MtnaWfFormComponent extends MtnaWfBaseFormComponent {
+}
+MtnaWfFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MtnaWfFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormComponent, selector: "mtna-form", outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange" }, usesInheritance: true, ngImport: i0, template: "<form *ngIf=\"ngForm\" [formGroup]=\"ngForm\" [formDisabled]=\"readonly\">\n  <mtna-wf-item\n    *ngFor=\"let item of mtnaForm?.items; let index = index; trackBy: _trackByInstanceId\"\n    [item]=\"item\"\n    [control]=\"ngForm.controls[item.instanceId]\"\n    [readonly]=\"readonly\"\n    [parentIds]=\"componentIds\"\n    [step]=\"_steps?.[item.instanceId]\"\n    (focusedSection)=\"focusedSection.emit($event)\"\n  ></mtna-wf-item>\n</form>\n", styles: ["mtna-form form{display:block}mtna-form form .mtna-wf-section{display:block;margin:32px 0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline{opacity:0}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick{opacity:1}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-end,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-gap,mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-thick .mat-form-field-outline-start{border-width:1px}mtna-form form fieldset[disabled] .mtna-wf-item .mtna-wf-date-item .mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix .mat-datepicker-toggle .mat-icon-button{cursor:default}mtna-form .mtna-wf-item,mtna-form .mtna-wf-title{margin-top:1rem}mtna-form .mtna-wf-text{margin:.5rem 0;font-size:.9rem}mtna-form .mtna-wf-title-item,mtna-form .mtna-wf-text-item{margin:0}\n"], components: [{ type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: ["formDisabled"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-form',
+                    templateUrl: './form.component.html',
+                    styleUrls: ['./form.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    outputs: ['status', 'focusedSection', 'mtnaFormChange'],
+                }]
+        }] });
+
 class MtnaWfFormDisablerModule {
 }
 MtnaWfFormDisablerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormDisablerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3359,18 +3629,25 @@ const _FormStepMixinBase$1 = mixinColor(class {
         this._elementRef = _elementRef;
     }
 }, 'primary');
+/**
+ * A component that represents a single step in a form stepper.
+ * NOTE:
+ *  - disabled: property on the FormStep used to determine if the step is disabled. This will affect the disabled property and the clickable property.
+ *  - clickable: property on the FormStep used to determine if the step is clickable. This does not affect the disabled property.
+ */
 class MtnaWfFormStepComponent extends _FormStepMixinBase$1 {
     constructor(elementRef) {
         super(elementRef);
         this.disabled = false;
         this._clickable = true;
+        this.notApplicableText = $localize `Not Applicable`;
     }
     get step() {
         return this._step;
     }
     set step(step) {
         this._step = step;
-        this.disabled = step.status === 'DISABLED';
+        this.disabled = step.status === 'DISABLED' || step.disabled;
     }
     get clickable() {
         return !this.disabled && this._clickable;
@@ -3389,7 +3666,7 @@ class MtnaWfFormStepComponent extends _FormStepMixinBase$1 {
     }
 }
 MtnaWfFormStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: { color: "color", step: "step", clickable: "clickable", incompleteIcon: "incompleteIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.clickable": "this.clickable" } }, usesInheritance: true, ngImport: i0, template: "<li\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  matRipple\n  [matRippleDisabled]=\"!clickable\"\n  [class.active-step]=\"step.active\"\n  (click)=\"_haltClickEvent($event)\"\n>\n  <mtna-status-circle\n    [color]=\"color\"\n    [circleNumber]=\"step.num\"\n    [incompleteIcon]=\"incompleteIcon\"\n    [optional]=\"step.optional\"\n    [status]=\"step.status\"\n  ></mtna-status-circle>\n  <div fxLayout=\"column\" fxFlex=\"100\">\n    <p class=\"step-title\">{{ step.label }}</p>\n    <p *ngIf=\"step.optional || disabled\" class=\"step-status\">{{ disabled ? step.disabledText || 'Not Applicable' : 'Optional' }}</p>\n  </div>\n</li>\n", styles: ["mtna-wf-step li{padding:8px 16px;position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;line-height:24px;font-size:14px;transition:background-color .15s cubic-bezier(0,0,.2,1)}mtna-wf-step li:after{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1}mtna-wf-step li .step-title,mtna-wf-step li .step-status{margin:0}mtna-wf-step.disabled{font-style:italic}\n"], components: [{ type: i1$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }], directives: [{ type: i3$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$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$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfFormStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: { color: "color", step: "step", clickable: "clickable", incompleteIcon: "incompleteIcon" }, host: { properties: { "class.disabled": "this.disabled", "class.clickable": "this.clickable" } }, usesInheritance: true, ngImport: i0, template: "<li\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  matRipple\n  [matRippleDisabled]=\"!clickable\"\n  [class.active-step]=\"step.active\"\n  (click)=\"_haltClickEvent($event)\"\n>\n  <mtna-status-circle\n    [color]=\"color\"\n    [circleNumber]=\"step.num\"\n    [incompleteIcon]=\"incompleteIcon\"\n    [optional]=\"step.optional\"\n    [status]=\"step.status\"\n  ></mtna-status-circle>\n  <div fxLayout=\"column\" fxFlex=\"100\">\n    <p class=\"step-title\">{{ step.label }}</p>\n    <p *ngIf=\"step.optional && !disabled\" class=\"step-status\" i18n>Optional</p>\n    <p *ngIf=\"disabled\" class=\"step-status\">{{ step.disabledText || notApplicableText }}</p>\n  </div>\n</li>\n", styles: ["mtna-wf-step li{padding:8px 16px;position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;line-height:24px;font-size:14px;transition:background-color .15s cubic-bezier(0,0,.2,1)}mtna-wf-step li:after{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1}mtna-wf-step li .step-title,mtna-wf-step li .step-status{margin:0}mtna-wf-step.disabled{font-style:italic}\n"], components: [{ type: i4.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }], directives: [{ type: i3$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$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$3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepComponent, decorators: [{
             type: Component,
             args: [{
@@ -3427,6 +3704,8 @@ class MtnaWfFormStepGroupComponent extends _FormStepMixinBase {
         this.collapsed = false;
         this._steps = [];
         this.selected = new EventEmitter();
+        this._collapsedText = $localize `View All`;
+        this._hideText = $localize `Hide`;
     }
     /** Steps to be displayed */
     get steps() {
@@ -3437,7 +3716,7 @@ class MtnaWfFormStepGroupComponent extends _FormStepMixinBase {
     }
 }
 MtnaWfFormStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormStepGroupComponent.ɵcmp = i0.ɵɵ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, template: "<ng-container *ngFor=\"let step of steps | slice : 0 : (collapsed ? 1 : steps.length); let last = last\">\n  <mtna-wf-step\n    [clickable]=\"step.status !== 'DISABLED'\"\n    [color]=\"color\"\n    [incompleteIcon]=\"incompleteIcon\"\n    [step]=\"step\"\n    (click)=\"selected.emit(step)\"\n  ></mtna-wf-step>\n  <mat-divider *ngIf=\"!last\" [vertical]=\"true\"></mat-divider>\n  <p *ngIf=\"collapsed\" class=\"show-more mat-caption\">and {{ steps.length - 1 }} more...</p>\n</ng-container>\n<button\n  mat-icon-button\n  class=\"collapse-button\"\n  [color]=\"color\"\n  (click)=\"collapsed = !collapsed\"\n  [matTooltip]=\"collapsed ? 'View All' : 'Hide'\"\n>\n  <mat-icon>{{ collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n</button>\n", styles: ["mtna-wf-step-group{border-style:solid;border-radius:4px;border-width:1px;display:block;margin:4px 4px 16px 8px;padding-bottom:16px;position:relative}mtna-wf-step-group .collapse-button{bottom:-19px;left:calc(50% - 20px);position:absolute;z-index:10}mtna-wf-step-group .collapse-button:after{bottom:8px;content:\"\";height:12px;left:calc(50% - 16px);position:absolute;width:32px;z-index:-1}mtna-wf-step-group mtna-wf-step li{padding-left:8px}mtna-wf-step-group mat-divider.mat-divider{margin-left:20px}mtna-wf-step-group .show-more{margin:0;text-align:center}\n"], components: [{ type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: ["color", "step", "clickable", "incompleteIcon"] }, { type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "slice": i3.SlicePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfFormStepGroupComponent.ɵcmp = i0.ɵɵ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, 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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "slice": i3.SlicePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -3473,10 +3752,21 @@ const _FormStepperMixinBase = mixinColor(class {
 class MtnaWfFormStepperComponent extends _FormStepperMixinBase {
     constructor(elementRef) {
         super(elementRef);
-        /** Form steps */
-        this.steps = [];
+        this._steps = [];
         /** When a step is selected */
         this.selected = new EventEmitter();
+        this.groupStepCollapsedMap = {};
+        this.notApplicableText = $localize `Not Applicable`;
+        this._collapsedText = $localize `View All`;
+        this._hideText = $localize `Hide`;
+    }
+    /** Form steps */
+    get steps() {
+        return this._steps;
+    }
+    set steps(steps) {
+        this._steps = steps;
+        this.createGroupStepCollapsedMap(steps);
     }
     /**
      * Improves effeciency of the *ngFor loop that creates the steps.
@@ -3488,14 +3778,37 @@ class MtnaWfFormStepperComponent extends _FormStepperMixinBase {
     _trackStep(index, step) {
         return step.instanceId || index;
     }
+    /**
+     * Prevents click event if this step is not clickable
+     */
+    _haltClickEvent(event, step) {
+        const clickable = step.status !== 'DISABLED' && step.status !== 'PLACEHOLDER';
+        if (!clickable) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    createGroupStepCollapsedMap(steps) {
+        steps.forEach((step) => {
+            if (isFormStepGroup(step)) {
+                this.groupStepCollapsedMap[step.instanceId] = step.collapsed;
+            }
+        });
+        console.warn('groupStepCollapsedMap', this.groupStepCollapsedMap);
+    }
+    toggleGroupStep(step) {
+        this.groupStepCollapsedMap[step.instanceId] = !this.groupStepCollapsedMap[step.instanceId];
+        console.warn('groupStepCollapsedMap', this.groupStepCollapsedMap);
+    }
 }
 MtnaWfFormStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormStepperComponent.ɵcmp = i0.ɵɵ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, template: "<ol>\n  <ng-container *ngFor=\"let step of steps; let last = last; trackBy: _trackStep\">\n    <ng-container\n      [ngTemplateOutlet]=\"(step | mtnaWfStepGroupPipe) ? groupStep : singleStep\"\n      [ngTemplateOutletContext]=\"{ $implicit: step }\"\n    ></ng-container>\n    <mat-divider *ngIf=\"!last\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n  <ng-template #singleStep let-step>\n    <mtna-wf-step\n      [clickable]=\"step.status !== 'DISABLED'\"\n      [color]=\"color\"\n      [step]=\"step\"\n      [incompleteIcon]=\"incompleteIcon\"\n      (click)=\"selected.emit(step)\"\n    ></mtna-wf-step>\n  </ng-template>\n  <ng-template #groupStep let-step>\n    <mtna-wf-step-group\n      [collapsed]=\"step.collapsed\"\n      [color]=\"color\"\n      [incompleteIcon]=\"incompleteIcon\"\n      [steps]=\"step.steps\"\n      (selected)=\"selected.emit($event)\"\n    ></mtna-wf-step-group>\n  </ng-template>\n</ol>\n", styles: ["mtna-wf-stepper{border-right-width:1px;border-right-style:solid;overflow-y:auto}mtna-wf-stepper mtna-wf-step li.active-step:after{transform-origin:top;transform:scaleY(1)}mtna-wf-stepper mtna-wf-step.clickable{cursor:pointer}mtna-wf-stepper mat-divider.mat-divider{height:24px;width:1px;margin-left:28px}mtna-wf-stepper ol{padding:0}\n"], components: [{ type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormStepComponent, selector: "mtna-wf-step", inputs: ["color", "step", "clickable", "incompleteIcon"] }, { type: MtnaWfFormStepGroupComponent, selector: "mtna-wf-step-group", inputs: ["color", "collapsed", "incompleteIcon", "steps"], outputs: ["selected"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfStepGroupPipe": MtnaWfFormStepGroupPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfFormStepperComponent.ɵcmp = i0.ɵɵ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, template: "<ol>\n  <ng-container *ngFor=\"let step of steps; let last = last; trackBy: _trackStep\">\n    <ng-container\n      [ngTemplateOutlet]=\"(step | mtnaWfStepGroupPipe) ? groupStep : singleStep\"\n      [ngTemplateOutletContext]=\"{ $implicit: step }\"\n    ></ng-container>\n  </ng-container>\n</ol>\n\n<ng-template #singleStep let-step>\n  <ng-container *ngIf=\"step | coerceFormStep as singleStep\">\n    <li\n      fxLayout=\"row\"\n      fxLayouAlign=\"start center\"\n      [ngClass]=\"{\n        'disabled-step': singleStep.status === 'DISABLED',\n        'active-step': singleStep.active,\n        'clickable': singleStep.status !== 'DISABLED' && singleStep.status !== 'PLACEHOLDER'\n      }\"\n    >\n      <ng-container [ngTemplateOutlet]=\"stepContent\" [ngTemplateOutletContext]=\"{ $implicit: singleStep }\"></ng-container>\n    </li>\n  </ng-container>\n</ng-template>\n\n<ng-template #groupStep let-step>\n  <ng-container *ngIf=\"step | coerceFormStepGroup as groupStepParent\">\n    <li fxLayout=\"column\" fxLayoutAlign=\"start start\" [class.child-step-active]=\"(groupStepParent.steps | childStepActive) && groupStepCollapsedMap[groupStepParent.instanceId]\">\n      <div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"mtna-wf-step-item-content\">\n        <button fxFlex mat-button class=\"step-button\" [attr.aria-label]=\"groupStepParent | getStepAriaLabel : groupStepCollapsedMap[groupStepParent.instanceId]\" (click)=\"toggleGroupStep(step)\">\n          <mtna-status-circle [color]=\"color\" [circleNumber]=\"groupStepParent.num\" [incompleteIcon]=\"incompleteIcon\"></mtna-status-circle>\n          <div fxLayout=\"row\" class=\"step-button-label-wrapper\" fxFlex=\"100\">\n            <p class=\"step-title\">{{ groupStepParent.label }}</p>\n          </div>\n          <mat-icon>{{ groupStepCollapsedMap[step.instanceId] ? 'expand_more' : 'expand_less' }}</mat-icon>\n        </button>\n      </div>\n      <ol class=\"group-step-list\">\n        <ng-container\n          *ngFor=\"let groupStep of step.steps | slice : 0 : (groupStepCollapsedMap[step.instanceId] ? 0 : step.steps.length); let last = last\"\n        >\n          <!-- All children in the steps property of FormStepGroup are FormStep(s). Only using coercion here to assist in defining properties we can use. -->\n          <li\n            *ngIf=\"groupStep | coerceFormStep as groupStepChild\"\n            fxLayout=\"row\"\n            fxLayouAlign=\"start center\"\n            [ngClass]=\"{\n              'disabled-step': groupStepChild.status === 'DISABLED',\n              'active-step': groupStepChild.active,\n              'clickable': groupStepChild.status !== 'DISABLED' && groupStepChild.status !== 'PLACEHOLDER',\n              'group-step': true\n            }\"\n          >\n            <ng-container [ngTemplateOutlet]=\"stepContent\" [ngTemplateOutletContext]=\"{ $implicit: groupStepChild, isChildStep: true }\"></ng-container>\n          </li>\n        </ng-container>\n      </ol>\n    </li>\n  </ng-container>\n</ng-template>\n\n<!-- The individual, stand-alone step template -->\n<ng-template #stepContent let-step let-isChildStep=\"isChildStep\">\n  <div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"mtna-wf-step-item-content\">\n    <mat-divider *ngIf=\"isChildStep\" [vertical]=\"true\"></mat-divider>\n    <button fxFlex mat-button class=\"step-button\" [attr.aria-label]=\"step | getStepAriaLabel\" [disabled]=\"step.status === 'DISABLED' || step.status === 'PLACEHOLDER'\" (click)=\"_haltClickEvent($event, step)\">\n      <mtna-status-circle\n        [color]=\"color\"\n        [circleNumber]=\"step.num\"\n        [incompleteIcon]=\"incompleteIcon\"\n        [optional]=\"step.optional\"\n        [status]=\"step.status\"\n      ></mtna-status-circle>\n      <div fxLayout=\"column\" class=\"step-button-label-wrapper\">\n        <p class=\"step-title\">{{ step.label }}</p>\n        <p *ngIf=\"step.optional && step.status !== 'DISABLED'\" class=\"step-status\" i18n>Optional</p>\n        <p *ngIf=\"step.status === 'DISABLED'\" class=\"step-status\">{{ step.disabledText || notApplicableText }}</p>\n      </div>\n    </button>\n  </div>\n</ng-template>\n", styles: ["mtna-wf-stepper{border-right-width:1px;border-right-style:solid;overflow-y:auto}mtna-wf-stepper li{padding:0 0 0 16px;position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;line-height:24px;font-size:14px;transition:background-color .15s cubic-bezier(0,0,.2,1)}mtna-wf-stepper li:after{content:\"\";display:block;position:absolute;top:0;right:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1}mtna-wf-stepper li.disabled-step{font-style:italic}mtna-wf-stepper li.clickable{cursor:pointer}mtna-wf-stepper li.active-step:after,mtna-wf-stepper li.child-step-active:after{transform-origin:top;transform:scaleY(1)}mtna-wf-stepper li:not(.group-step){padding-left:0}mtna-wf-stepper li .mtna-wf-step-item-content{width:100%}mtna-wf-stepper li .mtna-wf-step-item-content mat-divider.mat-divider.mat-divider-vertical{height:100%}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button{text-align:left;height:-moz-fit-content;height:fit-content;min-height:36px;line-height:20px;border:none;padding:4px 13px 4px 8px;font-weight:400;border-radius:0}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper{align-items:center;display:flex;flex-direction:row}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper .step-button-label-wrapper{width:calc(100% - 48px - 8px)}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper .step-button-label-wrapper .step-title{margin:0;overflow:hidden;white-space:wrap}mtna-wf-stepper li .mtna-wf-step-item-content .mat-button.step-button .mat-button-wrapper .step-button-label-wrapper .step-status{margin:0}mtna-wf-stepper li.active-step .mtna-wf-step-item-content .mat-button.step-button{font-weight:500}mtna-wf-stepper li .step-title,mtna-wf-stepper li .step-status{margin:0}mtna-wf-stepper ol:not(.group-step-list){padding:0}mtna-wf-stepper ol.group-step-list{padding-left:16px;width:calc(100% - 16px)}mtna-wf-stepper ol li.group-step{padding-left:0;padding-right:0}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.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$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$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.SlicePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mtna-wf-stepper',
-                    templateUrl: './form-stepper.component.html',
+                    // templateUrl: './form-stepper.component.html',
+                    templateUrl: './form-stepper-new.component.html',
                     styleUrls: ['./form-stepper.component.scss'],
                     inputs: ['color'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3520,7 +3833,11 @@ MtnaWfFormStepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MatButtonModule,
         MatTooltipModule,
         MatIconModule,
-        MtnaWfFormStepGroupPipeModule], exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent] });
+        MtnaWfFormStepGroupPipeModule,
+        CoerceFormStepGroupPipeModule,
+        CoerceFormStepPipeModule,
+        ChildStepActivePipeModule,
+        GetStepAriaLabelModule], exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent] });
 MtnaWfFormStepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperModule, imports: [[
             CommonModule,
             FlexLayoutModule,
@@ -3531,6 +3848,10 @@ MtnaWfFormStepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             MatTooltipModule,
             MatIconModule,
             MtnaWfFormStepGroupPipeModule,
+            CoerceFormStepGroupPipeModule,
+            CoerceFormStepPipeModule,
+            ChildStepActivePipeModule,
+            GetStepAriaLabelModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperModule, decorators: [{
             type: NgModule,
@@ -3545,9 +3866,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MatTooltipModule,
                         MatIconModule,
                         MtnaWfFormStepGroupPipeModule,
+                        CoerceFormStepGroupPipeModule,
+                        CoerceFormStepPipeModule,
+                        ChildStepActivePipeModule,
+                        GetStepAriaLabelModule
                     ],
-                    exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent],
                     declarations: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent],
+                    exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepperComponent],
                 }]
         }] });
 
@@ -3566,6 +3891,14 @@ class MtnaWfStepCardComponent extends _StepCardMixinBase {
         var _a;
         return !!((_a = this.step) === null || _a === void 0 ? void 0 : _a.active);
     }
+    // @Input() step: FormStep | null | undefined;
+    get step() {
+        return this._step;
+    }
+    set step(step) {
+        this._step = step;
+        console.warn({ stepInsideStepCard: step });
+    }
     handleFocusChange(event) {
         if (!!this.step && !!event && !this.step.active) {
             this.focused.emit(this.step);
@@ -3573,7 +3906,7 @@ class MtnaWfStepCardComponent extends _StepCardMixinBase {
     }
 }
 MtnaWfStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfStepCardComponent.ɵcmp = i0.ɵɵ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, template: "<mat-card cdkMonitorSubtreeFocus (cdkFocusChange)=\"handleFocusChange($event)\">\n  <mat-card-header>\n    <mtna-status-circle mat-card-avatar [circleNumber]=\"step?.num\" [optional]=\"step?.optional\" [status]=\"step?.status\"></mtna-status-circle>\n    <mat-card-title>{{ step?.label }}</mat-card-title>\n    <mat-card-subtitle [innerHTML]=\"subtitle | mtnaWfSanitizeHtml\"></mat-card-subtitle>\n    <p *ngIf=\"step?.optional\" class=\"optional mat-caption\">Optional</p>\n  </mat-card-header>\n\n  <mat-divider [inset]=\"true\"></mat-divider>\n\n  <mat-card-content>\n    <ng-content select=\"[cardContent]\"></ng-content>\n  </mat-card-content>\n\n  <mat-card-actions>\n    <ng-content select=\"[cardActions]\"></ng-content>\n  </mat-card-actions>\n</mat-card>\n", styles: ["mtna-wf-step-card{display:block;position:relative}mtna-wf-step-card.active:before{transform-origin:top;transform:scaleY(1)}mtna-wf-step-card:before{content:\"\";display:block;position:absolute;top:0;left:0;bottom:0;width:5px;transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:bottom;transform:scaleY(0);z-index:1;border-top-left-radius:2px;border-bottom-left-radius:2px}mtna-wf-step-card mat-card-header{position:relative}mtna-wf-step-card mat-card-header mat-card-title{line-height:24px;margin-right:100px}mtna-wf-step-card mat-card-header mtna-status-circle[mat-card-avatar]{width:24px;height:24px}mtna-wf-step-card mat-card-header>.optional:not(.mtna-status-circle){position:absolute;right:16px;top:0;margin:0;line-height:24px}mtna-wf-step-card mat-card-actions{padding:0;margin:0}mtna-wf-step-card mat-card-content{margin-top:16px}mtna-wf-step-card mat-card-content [cardcontent]>:first-child{margin-top:0}\n"], components: [{ type: i1$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$4.MatCardHeader, selector: "mat-card-header" }, { type: i1$1.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1$4.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfStepCardComponent.ɵcmp = i0.ɵɵ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, 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$3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$3.MatCardHeader, selector: "mat-card-header" }, { type: i4.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1$3.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardComponent, decorators: [{
             type: Component,
             args: [{
@@ -3598,12 +3931,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfStepCardModule {
 }
 MtnaWfStepCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MtnaWfStepCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardModule, declarations: [MtnaWfStepCardComponent], imports: [A11yModule, CommonModule, MatCardModule, MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, MatDividerModule], exports: [MtnaWfStepCardComponent] });
-MtnaWfStepCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardModule, imports: [[A11yModule, CommonModule, MatCardModule, MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, MatDividerModule]] });
+MtnaWfStepCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardModule, declarations: [MtnaWfStepCardComponent], imports: [A11yModule,
+        CommonModule,
+        MatCardModule,
+        MtnaStatusCircleModule,
+        MtnaWfSanitizeHtmlPipeModule,
+        MatDividerModule,
+        MtnaWfFormItemModule], exports: [MtnaWfStepCardComponent] });
+MtnaWfStepCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardModule, imports: [[
+            A11yModule,
+            CommonModule,
+            MatCardModule,
+            MtnaStatusCircleModule,
+            MtnaWfSanitizeHtmlPipeModule,
+            MatDividerModule,
+            MtnaWfFormItemModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [A11yModule, CommonModule, MatCardModule, MtnaStatusCircleModule, MtnaWfSanitizeHtmlPipeModule, MatDividerModule],
+                    imports: [
+                        A11yModule,
+                        CommonModule,
+                        MatCardModule,
+                        MtnaStatusCircleModule,
+                        MtnaWfSanitizeHtmlPipeModule,
+                        MatDividerModule,
+                        MtnaWfFormItemModule,
+                    ],
                     declarations: [MtnaWfStepCardComponent],
                     exports: [MtnaWfStepCardComponent],
                 }]
@@ -3668,7 +4023,7 @@ class MtnaWfBooleanComponent extends MtnaWfBaseParentValueItem {
     }
 }
 MtnaWfBooleanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBooleanComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfBooleanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBooleanComponent, selector: "mtna-wf-boolean-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-slide-toggle\n  *ngIf=\"control\"\n  [formControl]=\"control\"\n  [disabled]=\"readonly\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n  (change)=\"toggleChange($event)\"\n  >{{ item.option.option.name }}</mat-slide-toggle\n>\n<ng-container *ngIf=\"!!item.optionItemMap\">\n  <mtna-wf-item\n    *ngFor=\"let f of item.optionItemMap | keyvalue; trackBy: _trackByInstanceId\"\n    [item]=\"f.value\"\n    [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[f.value.instanceId] : undefined\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-item>\n  <ng-container> </ng-container>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-boolean-item{padding-right:24px}mtna-wf-boolean-item{display:block}mtna-wf-boolean-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-boolean-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-boolean-item .mat-slide-toggle{margin:4px 0}mtna-wf-boolean-item .mat-slide-toggle+mtna-wf-item{margin-top:0}mtna-wf-boolean-item .mat-slide-toggle~mtna-wf-item{padding-left:18px}mtna-wf-boolean-item.read-only .mat-slide-toggle.mat-disabled{opacity:.8}mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label,mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{cursor:default}mtna-wf-boolean-item .mat-slide-toggle{height:auto;min-height:24px;width:100%}mtna-wf-boolean-item .mat-slide-toggle>.mat-slide-toggle-label>.mat-slide-toggle-content{white-space:normal}\n"], components: [{ type: i2$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i3.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfBooleanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfBooleanComponent, selector: "mtna-wf-boolean-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-slide-toggle\n  *ngIf=\"control\"\n  [aria-label]=\"item.option.option.name\"\n  [formControl]=\"control\"\n  [disabled]=\"readonly\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n  (change)=\"toggleChange($event)\"\n  >{{ item.option.option.name }}</mat-slide-toggle\n>\n<ng-container *ngIf=\"!!item.optionItemMap\">\n  <mtna-wf-item\n    *ngFor=\"let f of item.optionItemMap | keyvalue; trackBy: _trackByInstanceId\"\n    [item]=\"f.value\"\n    [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[f.value.instanceId] : undefined\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-item>\n  <ng-container> </ng-container>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-boolean-item{padding-right:24px}mtna-wf-boolean-item{display:block}mtna-wf-boolean-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-boolean-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-boolean-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-boolean-item .mat-slide-toggle{margin:4px 0}mtna-wf-boolean-item .mat-slide-toggle+mtna-wf-item{margin-top:0}mtna-wf-boolean-item .mat-slide-toggle~mtna-wf-item{padding-left:18px}mtna-wf-boolean-item.read-only .mat-slide-toggle.mat-disabled{opacity:.8}mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label,mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{cursor:default}mtna-wf-boolean-item .mat-slide-toggle{height:auto;min-height:24px;width:100%}mtna-wf-boolean-item .mat-slide-toggle>.mat-slide-toggle-label>.mat-slide-toggle-content{white-space:normal}\n"], components: [{ type: i2$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "required", "checked", "aria-describedby"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i3.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBooleanComponent, decorators: [{
             type: Component,
             args: [{
@@ -3721,6 +4076,7 @@ class MtnaWfCheckboxComponent extends MtnaWfBaseParentValueItem {
         super(cdr);
         this.dialogService = dialogService;
         this.destroyed$ = new Subject();
+        this._acknowledgementText = $localize `Acknowledged. Click to view the agreement.`;
     }
     handleChange(change, index) {
         var _a;
@@ -3779,7 +4135,7 @@ class MtnaWfCheckboxComponent extends MtnaWfBaseParentValueItem {
     }
 }
 MtnaWfCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MtnaWfDialogService }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfCheckboxComponent, selector: "mtna-wf-checkbox-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div *ngIf=\"hasItemHeader\" class=\"mtna-wf-error-container\">\n  <ng-container *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <mat-error *ngFor=\"let error of control?.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </ng-container>\n</div>\n<fieldset\n  class=\"control-item-content\"\n  [class.single-option]=\"item.options.length === 1\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <ng-container *ngFor=\"let opt of item.options; let i = index; trackBy: _trackByOptionId\">\n    <mat-checkbox\n      *ngIf=\"!!control && !!control.controls && !!control.controls[i]\"\n      [disableRipple]=\"readonly\"\n      [formControl]=\"$any(control.controls[i])\"\n      [color]=\"color\"\n      [disabled]=\"readonly\"\n      (change)=\"handleChange($event, i)\"\n      >{{ opt.option.name }}\n      <button\n        *ngIf=\"opt.acknowledgement && control.controls[i].value\"\n        aria-label=\"Acknowledged. Click to view the agreement.\"\n        class=\"acknowledge-verification-button\"\n        mat-icon-button\n        matTooltip=\"Acknowledged. Click to view the agreement.\"\n        matTooltipShowDelay=\"800\"\n        (click)=\"showAcknowledgement($event, opt.acknowledgement)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (touchstart)=\"stopEventPropagation($event)\"\n      >\n        <mat-icon>verified</mat-icon>\n      </button>\n    </mat-checkbox>\n    <ng-container *ngIf=\"item.optionItemMap[opt.option.id]\">\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </ng-container>\n</fieldset>\n", styles: ["mtna-wf-checkbox-item{display:flex;flex-direction:column;position:relative}mtna-wf-checkbox-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-checkbox-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-checkbox-item .mat-checkbox{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout>.mat-checkbox-label{white-space:normal}mtna-wf-checkbox-item .mat-checkbox .acknowledge-verification-button{vertical-align:top;width:18px;height:18px;line-height:18px;margin-left:4px}mtna-wf-checkbox-item .mat-checkbox .acknowledge-verification-button .mat-icon{width:18px;height:18px;line-height:18px;font-size:18px}mtna-wf-checkbox-item fieldset{border:none;margin:0}mtna-wf-checkbox-item fieldset.control-item-content.single-option{padding:0}mtna-wf-checkbox-item .mat-checkbox+mtna-wf-item{margin-top:0;padding-left:24px}mtna-wf-checkbox-item.read-only .mat-checkbox{cursor:default}\n"], components: [{ type: i2$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$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfCheckboxComponent, selector: "mtna-wf-checkbox-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div *ngIf=\"hasItemHeader\" class=\"mtna-wf-error-container\">\n  <ng-container *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <mat-error *ngFor=\"let error of control?.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </ng-container>\n</div>\n<fieldset\n  class=\"control-item-content\"\n  [class.single-option]=\"item.options.length === 1\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <ng-container *ngFor=\"let opt of item.options; let i = index; trackBy: _trackByOptionId\">\n    <div *ngIf=\"!!control && !!control.controls && !!control.controls[i]\" fxLayout=\"row\">\n      <mat-checkbox\n        [disableRipple]=\"readonly\"\n        [formControl]=\"$any(control.controls[i])\"\n        [color]=\"color\"\n        [disabled]=\"readonly\"\n        (change)=\"handleChange($event, i)\"\n        >{{ opt.option.name }}\n      </mat-checkbox>\n      <button\n        *ngIf=\"opt.acknowledgement && control.controls[i].value\"\n        mat-icon-button\n        class=\"acknowledge-verification-button\"\n        [attr.aria-label]=\"_acknowledgementText\"\n        [matTooltip]=\"_acknowledgementText\"\n        matTooltipShowDelay=\"800\"\n        (click)=\"showAcknowledgement($event, opt.acknowledgement)\"\n        (mousedown)=\"stopEventPropagation($event)\"\n        (touchstart)=\"stopEventPropagation($event)\"\n      >\n        <mat-icon>verified</mat-icon>\n      </button>\n    </div>\n    <ng-container *ngIf=\"item.optionItemMap[opt.option.id]\">\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </ng-container>\n</fieldset>\n", styles: ["mtna-wf-checkbox-item{display:flex;flex-direction:column;position:relative}mtna-wf-checkbox-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-checkbox-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-checkbox-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-checkbox-item .mat-checkbox{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout{display:block}mtna-wf-checkbox-item .mat-checkbox>.mat-checkbox-layout>.mat-checkbox-label{white-space:normal}mtna-wf-checkbox-item .mat-checkbox .mat-checkbox-inner-container{bottom:1px}mtna-wf-checkbox-item .acknowledge-verification-button{vertical-align:top;width:18px;height:18px;line-height:18px;margin-left:4px}mtna-wf-checkbox-item .acknowledge-verification-button .mat-icon{width:18px;height:18px;line-height:18px;font-size:18px}mtna-wf-checkbox-item fieldset{border:none;margin:0}mtna-wf-checkbox-item fieldset.control-item-content.single-option{padding:0}mtna-wf-checkbox-item .mat-checkbox+mtna-wf-item{margin-top:0;padding-left:24px}mtna-wf-checkbox-item.read-only .mat-checkbox{cursor:default}\n"], components: [{ type: i2$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$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -3794,12 +4150,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfFormItemDialogModule {
 }
 MtnaWfFormItemDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MtnaWfFormItemDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogModule, declarations: [MtnaWfFormItemDialogComponent], imports: [CommonModule, MatDialogModule, MtnaWfFormItemModule], exports: [MtnaWfFormItemDialogComponent] });
-MtnaWfFormItemDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogModule, imports: [[CommonModule, MatDialogModule, MtnaWfFormItemModule]] });
+MtnaWfFormItemDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogModule, declarations: [MtnaWfFormItemDialogComponent], imports: [CommonModule, MatDialogModule, MtnaWfFormItemModule, MatButtonModule], exports: [MtnaWfFormItemDialogComponent] });
+MtnaWfFormItemDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogModule, imports: [[CommonModule, MatDialogModule, MtnaWfFormItemModule, MatButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, MatDialogModule, MtnaWfFormItemModule],
+                    imports: [CommonModule, MatDialogModule, MtnaWfFormItemModule, MatButtonModule],
                     declarations: [MtnaWfFormItemDialogComponent],
                     exports: [MtnaWfFormItemDialogComponent],
                 }]
@@ -3810,6 +4166,7 @@ class MtnaWfCheckboxModule {
 MtnaWfCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MtnaWfCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCheckboxModule, declarations: [MtnaWfCheckboxComponent], imports: [CommonModule,
         MtnaWfGetFormControlErrorPipeModule,
+        FlexLayoutModule,
         FormsModule,
         MatFormFieldModule,
         MatCheckboxModule,
@@ -3823,6 +4180,7 @@ MtnaWfCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
 MtnaWfCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCheckboxModule, imports: [[
             CommonModule,
             MtnaWfGetFormControlErrorPipeModule,
+            FlexLayoutModule,
             FormsModule,
             MatFormFieldModule,
             MatCheckboxModule,
@@ -3840,6 +4198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     imports: [
                         CommonModule,
                         MtnaWfGetFormControlErrorPipeModule,
+                        FlexLayoutModule,
                         FormsModule,
                         MatFormFieldModule,
                         MatCheckboxModule,
@@ -3863,6 +4222,7 @@ class MtnaWfDateComponent extends MtnaWfBaseValueItem {
         // TODO: This is not currenlty used, the back end needs to add range limits on the DateItem in order for this to work
         // Remove once accomplished and replace usage with item.rangeLimits in the html
         this.rangeLimits = { end: null, start: null };
+        this._dateText = $localize `Date`;
         // We need to check to ensure 'moment' & 'moment-jdateformatparser' scripts have been added to angular.json so that
         // the DateFormItemComponent doesn't break when attempting to format SimpleDateFormat string to Moment format string
         MtnaWfDateComponent.dateFormItemComponentInstances++;
@@ -3916,8 +4276,8 @@ class MtnaWfDateComponent extends MtnaWfBaseValueItem {
     }
 }
 MtnaWfDateComponent.dateFormItemComponentInstances = 0;
-MtnaWfDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.MtnaLogger }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: { rangeLimits: "rangeLimits" }, host: { properties: { "class.mtna-wf-date-item": "this.dateItemClass" } }, viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-form-field *ngIf=\"control\" appearance=\"outline\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\">\n  <mat-label>{{ item.label || 'Date' }}</mat-label>\n  <input\n    matInput\n    [matDatepicker]=\"picker\"\n    [formControl]=\"control\"\n    [max]=\"rangeLimits?.end\"\n    [min]=\"rangeLimits?.start\"\n    placeholder=\"Choose a date\"\n    [required]=\"item.required\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disabled]=\"readonly || control.disabled\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n  <mat-hint>{{ item.format }}</mat-hint>\n</mat-form-field>\n", styles: ["mtna-wf-date-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-date-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$5.MatSuffix, selector: "[matSuffix]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i4.MtnaLogger }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: { rangeLimits: "rangeLimits" }, host: { properties: { "class.mtna-wf-date-item": "this.dateItemClass" } }, viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<mat-form-field *ngIf=\"control\" appearance=\"outline\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\">\n  <mat-label>{{ item.label || _dateText }}</mat-label>\n  <input\n    matInput\n    [formControl]=\"control\"\n    [matDatepicker]=\"picker\"\n    [max]=\"rangeLimits?.end\"\n    [min]=\"rangeLimits?.start\"\n    placeholder=\"Choose a date\"\n    i18n-placeholder\n    [required]=\"item.required\"\n    [disabled]=\"readonly || control.disabled\"\n  />\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" [disabled]=\"readonly || control.disabled\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n  <mat-hint>{{ item.format }}</mat-hint>\n</mat-form-field>\n", styles: ["mtna-wf-date-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-date-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-date-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$4.MatLabel, selector: "mat-label" }, { type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$4.MatSuffix, selector: "[matSuffix]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateComponent, decorators: [{
             type: Component,
             args: [{
@@ -3927,7 +4287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.MtnaLogger }]; }, propDecorators: { dateItemClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i4.MtnaLogger }]; }, propDecorators: { dateItemClass: [{
                 type: HostBinding,
                 args: ['class.mtna-wf-date-item']
             }], rangeLimits: [{
@@ -3980,6 +4340,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 
 class MtnaWfDateRangeComponent extends MtnaWfBaseValueItem {
+    constructor() {
+        super(...arguments);
+        this.toText = $localize `to`;
+    }
     get item() {
         return this._item;
     }
@@ -3991,7 +4355,7 @@ class MtnaWfDateRangeComponent extends MtnaWfBaseValueItem {
     }
 }
 MtnaWfDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateRangeComponent, selector: "mtna-wf-date-range", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-date-item\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [item]=\"_startItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n  <span fxFlex=\"14px\"> to </span>\n  <mtna-wf-date-item\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [item]=\"_endItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n</div>\n", components: [{ type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: ["rangeLimits"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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$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$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDateRangeComponent, selector: "mtna-wf-date-range", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-date-item\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [item]=\"_startItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n  <span fxFlex=\"14px\"> {{toText}} </span>\n  <mtna-wf-date-item\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [item]=\"_endItem\"\n    [rangeLimits]=\"item.rangeLimits\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-item>\n</div>\n", components: [{ type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: ["rangeLimits"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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$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$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -4041,7 +4405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfDropdownComponent extends MtnaWfBaseSingleSelectionParentValueItem {
 }
 MtnaWfDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDropdownComponent, selector: "mtna-wf-dropdown-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <mat-select [formControl]=\"control\" (selectionChange)=\"selectionChange($event)\" [required]=\"item.required\">\n    <mat-option *ngIf=\"!item.required\">-- None --</mat-option>\n    <mat-option *ngFor=\"let opt of item.options\" [value]=\"opt.option.id\" [disabled]=\"control.value === opt.option.id\">{{\n      opt.option.name\n    }}</mat-option>\n  </mat-select>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<ng-template #readOnly>\n  <ng-container *ngIf=\"inList; else fullList\">\n    <mat-list-item *ngIf=\"item.required || !!item.value\">\n      <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n      <h4 matLine>{{ item.label }}</h4>\n      <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n    </mat-list-item>\n  </ng-container>\n\n  <ng-template #fullList>\n    <mat-list>\n      <mat-list-item *ngIf=\"item.required || !!item.value\">\n        <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n        <h4 matLine>{{ item.label }}</h4>\n        <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</ng-template>\n", styles: ["mtna-wf-dropdown-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-dropdown-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$1.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetListIcon": MtnaWfGetListIconPipe, "mtnaWfGetSelectedOptionName": MtnaWfGetSelectedOptionNamePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDropdownComponent, selector: "mtna-wf-dropdown-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <mat-select [formControl]=\"control\" [panelClass]=\"'mtna-wf-dropdown-item__select-panel'\" [required]=\"item.required\" (selectionChange)=\"selectionChange($event)\">\n    <mat-option *ngIf=\"!item.required\" i18n>-- None --</mat-option>\n    <mat-option *ngFor=\"let opt of item.options\" [value]=\"opt.option.id\" [disabled]=\"control.value === opt.option.id\">{{\n      opt.option.name\n    }}</mat-option>\n  </mat-select>\n  <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<ng-template #readOnly>\n  <ng-container *ngIf=\"inList; else fullList\">\n    <mat-list-item *ngIf=\"item.required || !!item.value\">\n      <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n      <h4 matLine>{{ item.label }}</h4>\n      <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n    </mat-list-item>\n  </ng-container>\n\n  <ng-template #fullList>\n    <mat-list>\n      <mat-list-item *ngIf=\"item.required || !!item.value\">\n        <mat-icon *ngIf=\"item.label | mtnaWfGetListIcon as icon\" matListIcon>{{ icon }}</mat-icon>\n        <h4 matLine>{{ item.label }}</h4>\n        <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>\n      </mat-list-item>\n    </mat-list>\n  </ng-template>\n</ng-template>\n", styles: ["mtna-wf-dropdown-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-dropdown-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-dropdown-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$4.MatLabel, selector: "mat-label" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetListIcon": MtnaWfGetListIconPipe, "mtnaWfGetSelectedOptionName": MtnaWfGetSelectedOptionNamePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -4106,6 +4470,7 @@ class MtnaWfFileUploadComponent extends MtnaWfBaseFormItemControl {
         super(cdr);
         this.fileService = fileService;
         this.loading = false;
+        this._fileUploadButtonText = $localize `CHOOSE A FILE`;
     }
     fileToUpload(file) {
         this.loading = true;
@@ -4135,8 +4500,8 @@ class MtnaWfFileUploadComponent extends MtnaWfBaseFormItemControl {
         }
     }
 }
-MtnaWfFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$6.FileService }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFileUploadComponent, selector: "mtna-wf-file-upload-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div class=\"content\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item?.descriptiveText\">\n  <ng-container *ngIf=\"!readonly; else readOnly\">\n    <ng-container *ngIf=\"!loading; else loader\">\n      <mtna-file-download\n        *ngIf=\"!!fileInfo; else fileUpload\"\n        [fileInfo]=\"fileInfo\"\n        [canRemove]=\"true\"\n        color=\"primary\"\n        [canDownload]=\"true\"\n        (download)=\"handleDownload($event)\"\n        (remove)=\"removeFile()\"\n      ></mtna-file-download>\n\n      <ng-template #fileUpload>\n        <mtna-file-upload\n          [automaticUpload]=\"false\"\n          color=\"primary\"\n          [buttonText]=\"'CHOOSE A FILE'\"\n          (fileToUpload)=\"fileToUpload($event)\"\n        ></mtna-file-upload>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- READONLY -->\n  <ng-template #readOnly>\n    <!-- anchor being used, due to <fieldset disabled> blocking a <button>'s click event -->\n    <a\n      *ngIf=\"!!item && !!item.value; else unpopulated\"\n      class=\"single-icon-button\"\n      color=\"primary\"\n      mat-stroked-button\n      role=\"button\"\n      (click)=\"handleDownload(item.value)\"\n    >\n      <mat-icon color=\"primary\">file_download</mat-icon>\n      {{ (item!.value!.fileName ? item!.value!.fileName : '') | uppercase }}\n    </a>\n    <ng-template #unpopulated>\n      <mat-list>\n        <mat-list-item class=\"wrappable-list-item\">\n          <p mat-line class=\"wrap-line\">No File Provided</p>\n        </mat-list-item>\n      </mat-list>\n    </ng-template>\n  </ng-template>\n</div>\n\n<!-- PROGRESS SPINNER -->\n<ng-template #loader>\n  <mat-spinner diameter=\"125\" strokeWidth=\"10\" mode=\"indeterminate\"></mat-spinner>\n</ng-template>\n", styles: [":host{display:block;margin:1rem 0}mtna-file-download{margin:37px 0}mat-spinner{margin:0 87.5px}\n"], components: [{ type: i1$6.MtnaFileDownloadComponent, selector: "mtna-file-download", inputs: ["color", "canDownload", "canRemove", "fileInfo", "loading"], outputs: ["download", "remove"] }, { type: i1$6.MtnaFileUploadComponent, selector: "mtna-file-upload", inputs: ["automaticUpload", "buttonText", "buttonColor", "disabled", "fileUploadUrl", "isProd", "maxUploadSize", "uploading"], outputs: ["uploaded", "fileToUpload", "uploadStatus"] }, { type: i3$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5$2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "uppercase": i3.UpperCasePipe } });
+MtnaWfFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.FileService }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFileUploadComponent, selector: "mtna-wf-file-upload-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div class=\"content\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <ng-container *ngIf=\"!readonly; else readOnly\">\n    <ng-container *ngIf=\"!loading; else loader\">\n      <mtna-file-download\n        *ngIf=\"!!fileInfo; else fileUpload\"\n        [fileInfo]=\"fileInfo\"\n        [canRemove]=\"true\"\n        color=\"primary\"\n        [canDownload]=\"true\"\n        (download)=\"handleDownload($event)\"\n        (remove)=\"removeFile()\"\n      ></mtna-file-download>\n\n      <ng-template #fileUpload>\n        <mtna-file-upload\n          [automaticUpload]=\"false\"\n          color=\"primary\"\n          [buttonText]=\"_fileUploadButtonText\"\n          (fileToUpload)=\"fileToUpload($event)\"\n        ></mtna-file-upload>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- READONLY -->\n  <ng-template #readOnly>\n    <!-- anchor being used, due to <fieldset disabled> blocking a <button>'s click event -->\n    <a\n      *ngIf=\"!!item && !!item.value; else unpopulated\"\n      class=\"single-icon-button\"\n      color=\"primary\"\n      mat-stroked-button\n      role=\"button\"\n      (click)=\"handleDownload(item.value)\"\n    >\n      <mat-icon color=\"primary\">file_download</mat-icon>\n      {{ (item!.value!.fileName ? item!.value!.fileName : '') | uppercase }}\n    </a>\n    <ng-template #unpopulated>\n      <mat-list>\n        <mat-list-item class=\"wrappable-list-item\">\n          <p mat-line class=\"wrap-line\" i18n>No File Provided</p>\n        </mat-list-item>\n      </mat-list>\n    </ng-template>\n  </ng-template>\n</div>\n\n<!-- PROGRESS SPINNER -->\n<ng-template #loader>\n  <mat-spinner diameter=\"125\" strokeWidth=\"10\" mode=\"indeterminate\"></mat-spinner>\n</ng-template>\n", styles: [":host{display:block;margin:1rem 0}mtna-file-download{margin:37px 0}mat-spinner{margin:0 87.5px}\n"], components: [{ type: i1$5.MtnaFileDownloadComponent, selector: "mtna-file-download", inputs: ["color", "canDownload", "canRemove", "fileInfo", "loading"], outputs: ["download", "remove"] }, { type: i1$5.MtnaFileUploadComponent, selector: "mtna-file-upload", inputs: ["automaticUpload", "buttonText", "buttonColor", "disabled", "fileUploadUrl", "isProd", "maxUploadSize", "uploading"], outputs: ["uploaded", "fileToUpload", "uploadStatus"] }, { type: i3$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5$2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "uppercase": i3.UpperCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFileUploadComponent, decorators: [{
             type: Component,
             args: [{
@@ -4144,7 +4509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './file-upload.component.html',
                     styleUrls: ['./file-upload.component.scss'],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$6.FileService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.FileService }]; } });
 
 class MtnaWfFileUploadModule {
 }
@@ -4212,7 +4577,7 @@ class MtnaWfFormGroupComponent extends MtnaWfBaseGroupItem {
     }
 }
 MtnaWfFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormGroupComponent, selector: "mtna-wf-group", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"item && control\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control.disabled\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n  <ng-template #fullLayout>\n    <div\n      class=\"item-group-container\"\n      [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\"\n      [formGroup]=\"control\"\n      [ngClass]=\"item.layout\"\n    >\n      <mtna-wf-item\n        *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\"\n        [class.row-item]=\"item.layout === 'ROW' && !fullWidth[subItem.itemId]\"\n        [ngClass.lt-md]=\"'width-100'\"\n        [item]=\"subItem\"\n        [control]=\"control.controls[subItem.instanceId]\"\n        [parentIds]=\"parentIds\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </div>\n  </ng-template>\n\n  <!-- When readonly, && all child items should be displayed in a mat-list-->\n  <mat-list *ngIf=\"readonly && inList; else fullLayout\" [ngClass]=\"item.layout\">\n    <mtna-wf-item\n      *ngFor=\"let subItem of item.items | mtnaWfItemsWithValue; trackby: _trackByInstanceId\"\n      [class.row-item]=\"item.layout === 'ROW'\"\n      [ngClass.lt-md]=\"'width-100'\"\n      [item]=\"subItem\"\n      [inList]=\"true\"\n      [parentIds]=\"parentIds\"\n      [readonly]=\"true\"\n    ></mtna-wf-item>\n  </mat-list>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-group .item-group-container{padding-top:24px}mtna-wf-group .mtna-wf-group-header{margin-top:1rem}mtna-wf-group .mtna-wf-group-description{margin-bottom:1rem}mtna-wf-group mat-list mat-list-item [mat-line]{letter-spacing:.5px}mtna-wf-group mtna-wf-multiple-choice-item{display:block}mtna-wf-group .item-group-container>.mtna-wf-group{margin-top:1rem}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item){padding-left:16px}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item).width-100{width:calc(100% - 16px)}mtna-wf-group .item-group-container>mtna-wf-item:first-of-type{margin-top:0}mtna-wf-group .item-group-container.ROW>mtna-wf-item{margin-top:0}mtna-wf-group .item-group-container.ROW>*{display:block}mtna-wf-group .item-group-container .row-item{width:calc(50% - 16px);display:inline-block;margin:0 8px}mtna-wf-group .item-group-container .width-100{width:100%}mtna-wf-group .item-group-container .width-100.row-item{width:calc(100% - 16px)}mtna-wf-group mtna-wf-item-header+.item-group-container{padding:.35em .75em .625em}mtna-wf-group mtna-wf-item-header+.item-group-container>mtna-wf-item{margin-top:0}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfItemsWithValue": MtnaWfItemsWithValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormGroupComponent, selector: "mtna-wf-group", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"item && control\">\n  <mtna-wf-item-header\n    *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n    [descriptiveText]=\"item.descriptiveText\"\n    [disabled]=\"control.disabled\"\n    [questionText]=\"item.questionText\"\n    [required]=\"item.required\"\n  ></mtna-wf-item-header>\n  <ng-template #fullLayout>\n    <div\n      class=\"item-group-container\"\n      [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\"\n      [formGroup]=\"control\"\n      [ngClass]=\"item.layout\"\n    >\n      <mtna-wf-item\n        *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\"\n        [class.row-item]=\"item.layout === 'ROW' && !fullWidth[subItem.itemId]\"\n        [ngClass.lt-md]=\"'width-100'\"\n        [item]=\"subItem\"\n        [control]=\"control.controls[subItem.instanceId]\"\n        [parentIds]=\"parentIds\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </div>\n  </ng-template>\n\n  <!-- When readonly, && all child items should be displayed in a mat-list-->\n  <mat-list *ngIf=\"readonly && inList; else fullLayout\" [ngClass]=\"item.layout\">\n    <mtna-wf-item\n      *ngFor=\"let subItem of item.items | mtnaWfItemsWithValue; let index = index; trackBy: _trackByInstanceId\"\n      [class.row-item]=\"item.layout === 'ROW'\"\n      [ngClass.lt-md]=\"'width-100'\"\n      [item]=\"subItem\"\n      [inList]=\"true\"\n      [parentIds]=\"parentIds\"\n      [readonly]=\"true\"\n    ></mtna-wf-item>\n  </mat-list>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-group .item-group-container{padding-top:24px}mtna-wf-group .mtna-wf-group-header{margin-top:1rem}mtna-wf-group .mtna-wf-group-description{margin-bottom:1rem}mtna-wf-group mat-list mat-list-item [mat-line]{letter-spacing:.5px}mtna-wf-group mtna-wf-multiple-choice-item{display:block}mtna-wf-group .item-group-container>.mtna-wf-group{margin-top:1rem}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item){padding-left:16px}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item).width-100{width:calc(100% - 16px)}mtna-wf-group .item-group-container>mtna-wf-item:first-of-type{margin-top:0}mtna-wf-group .item-group-container.ROW>mtna-wf-item{margin-top:0}mtna-wf-group .item-group-container.ROW>*{display:block}mtna-wf-group .item-group-container .row-item{width:calc(50% - 16px);display:inline-block;margin:0 8px}mtna-wf-group .item-group-container .width-100{width:100%}mtna-wf-group .item-group-container .width-100.row-item{width:calc(100% - 16px)}mtna-wf-group mtna-wf-item-header+.item-group-container{padding:.35em .75em .625em}mtna-wf-group mtna-wf-item-header+.item-group-container>mtna-wf-item{margin-top:0}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfItemsWithValue": MtnaWfItemsWithValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -4266,7 +4631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfFormSectionComponent extends MtnaWfBaseSectionItem {
 }
 MtnaWfFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormSectionComponent, selector: "mtna-wf-section", usesInheritance: true, ngImport: i0, template: "<mtna-wf-step-card\n  [step]=\"step\"\n  [subtitle]=\"item.descriptiveText\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n  (focused)=\"focused.emit($event)\"\n>\n  <div cardContent>\n    <ng-container *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\">\n      <mat-divider\n        *ngIf=\"(subItem.itemId | mtnaWfGetObjectType) === 'formitemgroupimpl' && item.items.indexOf(subItem) !== 0\"\n        class=\"section-item-divider\"\n        [inset]=\"true\"\n      ></mat-divider>\n\n      <mtna-wf-item\n        [item]=\"subItem\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n        [control]=\"!!control && !!control.controls ? control.controls[subItem.instanceId] : undefined\"\n        (focusedSection)=\"focused.emit($event)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </div>\n</mtna-wf-step-card>\n", styles: [":host{display:block}mat-divider.mat-divider-horizontal.mat-divider-inset.section-item-divider{margin-top:8px;margin-bottom:8px}mtna-wf-section mtna-wf-title-item .mtna-wf-title-item{font-size:.875rem;line-height:28px;font-weight:500}\n"], components: [{ type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: ["color", "step", "subtitle"], outputs: ["focused"] }, { type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfGetObjectType": MtnaWfGetObjectTypePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MtnaWfFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormSectionComponent, selector: "mtna-wf-section", usesInheritance: true, ngImport: i0, template: "<mtna-wf-step-card\n  [step]=\"step\"\n  [subtitle]=\"item.descriptiveText\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n  (focused)=\"focused.emit($event)\"\n>\n  <div cardContent>\n    <ng-container *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\">\n      <mat-divider\n        *ngIf=\"(subItem.itemId | mtnaWfGetObjectType) === 'formitemgroupimpl' && item.items.indexOf(subItem) !== 0\"\n        class=\"section-item-divider\"\n        [inset]=\"true\"\n      ></mat-divider>\n\n      <mtna-wf-item\n        [item]=\"subItem\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n        [control]=\"!!control && !!control.controls ? control.controls[subItem.instanceId] : undefined\"\n        (focusedSection)=\"focused.emit($event)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </div>\n</mtna-wf-step-card>\n", styles: [":host{display:block}mat-divider.mat-divider-horizontal.mat-divider-inset.section-item-divider{margin-top:8px;margin-bottom:8px}mtna-wf-section mtna-wf-title-item .mtna-wf-title-item{font-size:.875rem;line-height:28px;font-weight:500}\n"], components: [{ type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: ["color", "step", "subtitle"], outputs: ["focused"] }, { type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfGetObjectType": MtnaWfGetObjectTypePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -4295,6 +4660,7 @@ class MtnaWfI18nInputComponent extends MtnaWfBaseValueItem {
     constructor() {
         super(...arguments);
         this.isParagraph = false;
+        this._notInformationText = $localize `No Information Provided`;
     }
     get item() {
         return super.item;
@@ -4320,7 +4686,7 @@ class MtnaWfI18nInputComponent extends MtnaWfBaseValueItem {
     }
 }
 MtnaWfI18nInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfI18nInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfI18nInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfI18nInputComponent, selector: "mtna-wf-i18n-input-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<ng-container *ngIf=\"!readonly && !!control; else readOnly\">\n  <mat-form-field\n    *ngFor=\"let language of item.languageTags\"\n    appearance=\"outline\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n  >\n    <mat-label>{{ item.label + ' - ' + getLanguageDisplay(language) }}</mat-label>\n    <ng-container *ngIf=\"isParagraph; else shortInput\">\n      <textarea\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [required]=\"item.required\"\n        [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        cdkTextareaAutoSize\n        cdkAutosizeMinRows=\"3\"\n        cdkAutosizeMaxRows=\"5\"\n      ></textarea>\n    </ng-container>\n    <ng-template #shortInput>\n      <input\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        [required]=\"item.required\"\n      />\n    </ng-template>\n\n    <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</ng-container>\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item *ngFor=\"let language of item.languageTags\" class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || 'No Information Provided - ' + language }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-i18n-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-i18n-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-i18n-input-item .mat-list-base .mat-list-item,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i3.SlicePipe, "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfI18nInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfI18nInputComponent, selector: "mtna-wf-i18n-input-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<ng-container *ngIf=\"!readonly && !!control; else readOnly\">\n  <mat-form-field\n    *ngFor=\"let language of item.languageTags\"\n    appearance=\"outline\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n  >\n    <mat-label>{{ item.label + ' - ' + getLanguageDisplay(language) }}</mat-label>\n    <ng-container *ngIf=\"isParagraph; else shortInput\">\n      <textarea\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [required]=\"item.required\"\n        [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        cdkTextareaAutoSize\n        cdkAutosizeMinRows=\"3\"\n        cdkAutosizeMaxRows=\"5\"\n      ></textarea>\n    </ng-container>\n    <ng-template #shortInput>\n      <input\n        matInput\n        [formControl]=\"getFormControl(language)\"\n        [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n        [required]=\"item.required\"\n      />\n    </ng-template>\n\n    <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</ng-container>\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item *ngFor=\"let language of item.languageTags\" class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || _notInformationText + ' - ' + language }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-i18n-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-i18n-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-i18n-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-i18n-input-item .mat-list-base .mat-list-item,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-i18n-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-i18n-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$4.MatLabel, selector: "mat-label" }, { type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i3.SlicePipe, "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfI18nInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -4379,6 +4745,7 @@ class MtnaWfInputComponent extends MtnaWfBaseValueItem {
         super(...arguments);
         this.isParagraph = false;
         this.isNumberInput = false;
+        this._noInformationText = $localize `No Information Provided`;
     }
     get item() {
         return super.item;
@@ -4394,7 +4761,7 @@ class MtnaWfInputComponent extends MtnaWfBaseValueItem {
     }
 }
 MtnaWfInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfInputComponent, selector: "mtna-wf-input-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <textarea\n    *ngIf=\"isParagraph; else shortInput\"\n    matInput\n    [formControl]=\"control\"\n    [required]=\"item.required\"\n    [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n    cdkTextareaAutoSize\n    cdkAutosizeMinRows=\"3\"\n    cdkAutosizeMaxRows=\"5\"\n  ></textarea>\n\n  <ng-template #shortInput>\n    <input matInput [formControl]=\"control!\" [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\" [required]=\"item.required\" />\n  </ng-template>\n\n  <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || 'No Information Provided' }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-input-item .mat-list-base .mat-list-item,mtna-wf-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i3.SlicePipe, "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfInputComponent, selector: "mtna-wf-input-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header; context: { $implicit: true }\"></ng-container>\n<mat-form-field\n  *ngIf=\"!readonly && !!control; else readOnly\"\n  appearance=\"outline\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-label>{{ item.label }}</mat-label>\n  <textarea\n    *ngIf=\"isParagraph; else shortInput\"\n    matInput\n    [formControl]=\"control\"\n    [required]=\"item.required\"\n    [attr.autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\"\n    cdkTextareaAutoSize\n    cdkAutosizeMinRows=\"3\"\n    cdkAutosizeMaxRows=\"5\"\n  ></textarea>\n\n  <ng-template #shortInput>\n    <input matInput [formControl]=\"control!\" [autocomplete]=\"item.label || item.name | mtnaWfGetAutoComplete\" [required]=\"item.required\" />\n  </ng-template>\n\n  <mat-error *ngFor=\"let error of control.errors | keyvalue | slice : 0 : 1\">\n    {{ error | mtnaWfGetControlError : item }}\n  </mat-error>\n</mat-form-field>\n\n<!-- READONLY -->\n<ng-template #readOnly>\n  <ng-container *ngTemplateOutlet=\"inList ? listItem : fullList\"></ng-container>\n</ng-template>\n\n<ng-template #fullList>\n  <mat-list>\n    <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n  </mat-list>\n</ng-template>\n\n<ng-template #listItem>\n  <mat-list-item class=\"wrappable-list-item\">\n    <!-- <mat-icon *ngIf=\"item.label || item.header as label\" matListIcon>{{ label | mtnaWfGetListIcon }}</mat-icon> -->\n    <h4 *ngIf=\"!item.questionText && (item.label || item.name) as label\" mat-line>{{ label }}</h4>\n    <p mat-line class=\"wrap-line\">{{ item.value || _noInformationText }}</p>\n  </mat-list-item>\n</ng-template>\n", styles: ["mtna-wf-input-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-input-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-input-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-input-item .mat-list-base .mat-list-item,mtna-wf-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line,mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-input-item .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i1$4.MatLabel, selector: "mat-label" }, { type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "slice": i3.SlicePipe, "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -4451,7 +4818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfMultipleChoiceComponent extends MtnaWfBaseSingleSelectionParentValueItem {
 }
 MtnaWfMultipleChoiceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfMultipleChoiceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfMultipleChoiceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfMultipleChoiceComponent, selector: "mtna-wf-multiple-choice-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div *ngIf=\"control\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">\n  <div class=\"mtna-wf-error-container\">\n    <ng-container *ngIf=\"control.invalid && (control.dirty || control.touched)\">\n      <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n        {{ error | mtnaWfGetControlError : item }}\n      </mat-error>\n    </ng-container>\n  </div>\n  <mat-radio-group class=\"control-item-content\" [formControl]=\"control\" (change)=\"selectionChange($event)\">\n    <ng-container *ngFor=\"let opt of item.options; trackBy: _trackByOptionId\">\n      <mat-radio-button [disableRipple]=\"readonly\" [value]=\"opt.option.id\">{{ opt.option.name }}</mat-radio-button>\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && !!controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mat-radio-group>\n</div>\n", styles: ["mtna-wf-multiple-choice-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-multiple-choice-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-multiple-choice-item .mat-radio-group{display:inline-block;max-width:100%;width:100%}mtna-wf-multiple-choice-item .mat-radio-button{display:block;max-width:100%}mtna-wf-multiple-choice-item .mat-radio-button:not(:last-of-type){margin-bottom:4px}mtna-wf-multiple-choice-item .mat-radio-button .mat-radio-label{white-space:normal}mtna-wf-multiple-choice-item .mat-radio-button+mtna-wf-item{padding-left:28px;margin-top:0}mtna-wf-multiple-choice-item.read-only .mat-radio-button .mat-radio-label{cursor:default}\n"], components: [{ type: i1$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfMultipleChoiceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfMultipleChoiceComponent, selector: "mtna-wf-multiple-choice-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div *ngIf=\"control\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">\n  <div class=\"mtna-wf-error-container\">\n    <ng-container *ngIf=\"control.invalid && (control.dirty || control.touched)\">\n      <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n        {{ error | mtnaWfGetControlError : item }}\n      </mat-error>\n    </ng-container>\n  </div>\n  <mat-radio-group class=\"control-item-content\" [formControl]=\"control\" (change)=\"selectionChange($event)\">\n    <ng-container *ngFor=\"let opt of item.options; trackBy: _trackByOptionId\">\n      <mat-radio-button [disableRipple]=\"readonly\" [disabled]=\"readonly || control.disabled\" [value]=\"opt.option.id\">{{ opt.option.name }}</mat-radio-button>\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && !!controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mat-radio-group>\n</div>\n", styles: ["mtna-wf-multiple-choice-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-multiple-choice-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-multiple-choice-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-multiple-choice-item .mat-radio-group{display:inline-block;max-width:100%;width:100%}mtna-wf-multiple-choice-item .mat-radio-button{display:block;max-width:100%}mtna-wf-multiple-choice-item .mat-radio-button:not(:last-of-type){margin-bottom:4px}mtna-wf-multiple-choice-item .mat-radio-button .mat-radio-label{white-space:normal}mtna-wf-multiple-choice-item .mat-radio-button+mtna-wf-item{padding-left:28px;margin-top:0}mtna-wf-multiple-choice-item.read-only .mat-radio-button .mat-radio-label{cursor:default}\n"], components: [{ type: i1$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfMultipleChoiceComponent, decorators: [{
             type: Component,
             args: [{
@@ -4505,7 +4872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfOrderedListItemComponent extends MtnaWfBaseFormItem {
 }
 MtnaWfOrderedListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfOrderedListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfOrderedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfOrderedListItemComponent, selector: "mtna-wf-ordered-list-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ol [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ol>\n", styles: ["mtna-wf-ordered-list-item>ol{list-style:decimal outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-ordered-list-item>ol{padding-right:24px}\n"], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfOrderedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfOrderedListItemComponent, selector: "mtna-wf-ordered-list-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ol [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ol>\n", styles: ["mtna-wf-ordered-list-item>ol{list-style:decimal outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-ordered-list-item>ol{padding-right:24px}\n"], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfOrderedListItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -4570,6 +4937,7 @@ class MtnaWfRepeatableItemContainerComponent extends MtnaWfBaseParentValueItem {
     constructor(cdr, manager) {
         super(cdr);
         this.manager = manager;
+        this._addText = $localize `ADD`;
     }
     addItem() {
         this.manager.changeMtnaFormItem(new MtnaWfFormItemChange(this.item.repeatableTemplateId, this.parentIds, 'ADD'));
@@ -4580,7 +4948,7 @@ class MtnaWfRepeatableItemContainerComponent extends MtnaWfBaseParentValueItem {
     }
 }
 MtnaWfRepeatableItemContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfRepeatableItemContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MtnaWfManagerService }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfRepeatableItemContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfRepeatableItemContainerComponent, selector: "mtna-wf-repeatable-item-container", usesInheritance: true, ngImport: i0, template: "<mtna-wf-item-header\n  *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n  [descriptiveText]=\"item.descriptiveText\"\n  [disabled]=\"control?.disabled || false\"\n  [questionText]=\"item.questionText\"\n  [required]=\"item.required\"\n></mtna-wf-item-header>\n<section [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <mtna-wf-repeatable-item\n    @repeatItemExpandCollapse\n    *ngFor=\"let subitem of item.items; let first = first; trackBy: 'instanceId' | mtnaTrackByProperty\"\n  >\n    <ng-container *ngIf=\"subitem | coerceFormItem as coercedSubItem\">\n      <button\n        *ngIf=\"!readonly && item.items.length > item.minOccurrences\"\n        mat-icon-button\n        class=\"item-remove-button\"\n        color=\"warn\"\n        (click)=\"removeItem(coercedSubItem)\"\n        matTooltip=\"Remove Item\"\n      >\n        <mat-icon>remove_circle</mat-icon>\n      </button>\n      <mtna-wf-item\n        [item]=\"coercedSubItem\"\n        [control]=\"!!control && !!control.controls ? control.controls[coercedSubItem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mtna-wf-repeatable-item>\n</section>\n<button *ngIf=\"!readonly\" mat-raised-button (click)=\"addItem()\" class=\"new-item-button\" color=\"primary\">\n  {{ item.additionalText || 'ADD' | uppercase }}\n</button>\n", styles: ["mtna-wf-repeatable-item-container{display:block}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item{position:relative;padding:16px;border-style:dashed;border-width:4px;border-radius:4px;display:inline-block;margin:8px;max-width:100%}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item .item-remove-button{position:absolute;top:-22px;left:-22px}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item>mtna-wf-item:first-child{margin-top:0}mtna-wf-repeatable-item-container .new-item-button{margin-left:.75em}mtna-wf-repeatable-item-container>section{padding-left:.75em}mtna-wf-repeatable-item-container>section,mtna-wf-repeatable-item-container .new-item-button{margin-top:16px}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfRepeatableItemComponent, selector: "mtna-wf-repeatable-item" }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "mtnaTrackByProperty": i1$1.MtnaTrackByPropertyPipe, "coerceFormItem": MtnaWfCoerceFormItemPipe, "uppercase": i3.UpperCasePipe }, animations: [
+MtnaWfRepeatableItemContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfRepeatableItemContainerComponent, selector: "mtna-wf-repeatable-item-container", usesInheritance: true, ngImport: i0, template: "<mtna-wf-item-header\n  *ngIf=\"!!item.questionText || !!item.descriptiveText\"\n  [descriptiveText]=\"item.descriptiveText\"\n  [disabled]=\"control?.disabled || false\"\n  [questionText]=\"item.questionText\"\n  [required]=\"item.required\"\n></mtna-wf-item-header>\n<section [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <mtna-wf-repeatable-item\n    @repeatItemExpandCollapse\n    *ngFor=\"let subitem of item.items; let first = first; trackBy: 'instanceId' | mtnaTrackByProperty\"\n  >\n    <ng-container *ngIf=\"subitem | coerceFormItem as coercedSubItem\">\n      <button\n        *ngIf=\"!readonly && item.items.length > item.minOccurrences\"\n        mat-icon-button\n        class=\"item-remove-button\"\n        color=\"warn\"\n        (click)=\"removeItem(coercedSubItem)\"\n        matTooltip=\"Remove Item\"\n        i18n-matTooltip\n      >\n        <mat-icon>remove_circle</mat-icon>\n      </button>\n      <mtna-wf-item\n        [item]=\"coercedSubItem\"\n        [control]=\"!!control && !!control.controls ? control.controls[coercedSubItem.instanceId] : undefined\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mtna-wf-repeatable-item>\n</section>\n<button *ngIf=\"!readonly\" mat-raised-button (click)=\"addItem()\" class=\"new-item-button\" color=\"primary\">\n  {{ item.additionalText || _addText | uppercase }}\n</button>\n", styles: ["mtna-wf-repeatable-item-container{display:block}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item{position:relative;padding:16px;border-style:dashed;border-width:4px;border-radius:4px;display:inline-block;margin:8px;max-width:100%}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item .item-remove-button{position:absolute;top:-22px;left:-22px}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item>mtna-wf-item:first-child{margin-top:0}mtna-wf-repeatable-item-container .new-item-button{margin-left:.75em}mtna-wf-repeatable-item-container>section{padding-left:.75em}mtna-wf-repeatable-item-container>section,mtna-wf-repeatable-item-container .new-item-button{margin-top:16px}\n"], components: [{ type: MtnaWfItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: MtnaWfRepeatableItemComponent, selector: "mtna-wf-repeatable-item" }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "mtnaTrackByProperty": i4.MtnaTrackByPropertyPipe, "coerceFormItem": MtnaWfCoerceFormItemPipe, "uppercase": i3.UpperCasePipe }, animations: [
         trigger('repeatItemExpandCollapse', [
             state('in', style({ height: '*', margin: '*', opacity: 1 })),
             state('void', style({ height: 0, margin: 0, opacity: 0, visibility: 'hidden' })),
@@ -4683,8 +5051,8 @@ class MtnaWfResourceSearchComponent extends MtnaWfBaseValueItem {
         });
     }
 }
-MtnaWfResourceSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfResourceSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$8.MtnaInMemorySearchFacade }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfResourceSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfResourceSearchComponent, selector: "mtna-wf-resource-search-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div class=\"label-container\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n  <div class=\"label-text\" role=\"heading\">\n    {{ item.label }}\n  </div>\n  <mat-divider fxFlex></mat-divider>\n</div>\n<div class=\"values-container\">\n  <!--  <aria-ui-reference-list-table\n            [path]=\"path\"\n            [referenceConfiguration]=\"referenceConfiguration\"\n            [references]=\"references\"\n            [termReference]=\"termReference\"\n            (openDetails)=\"openDetails.emit($event)\"\n            (referenceSelected)=\"addButtonDisabled = !!$event\"\n            (updateValues)=\"updateValues.emit($event)\"\n    >\n    </aria-ui-reference-list-table>\n    -->\n  <button mat-flat-button class=\"add-button\" color=\"primary\" [disabled]=\"readonly\" i18n (click)=\"openDialog()\">\n    Add Resource<mat-icon>add_circle_outline</mat-icon>\n  </button>\n</div>\n", styles: ["mtna-wf-resource-search-item .label-container .label-text{margin:0 8px 0 0}mtna-wf-resource-search-item .label-container .mat-divider.mat-divider-horizontal{position:unset;width:unset}mtna-wf-resource-search-item .values-container{margin-left:1em;border-width:1px;border-style:solid;border-radius:4px;border-color:#0000001f;padding:8px}mtna-wf-resource-search-item .values-container .paginator-and-order-controls{margin-bottom:8px}mtna-wf-resource-search-item .values-container .add-button .mat-icon{margin-left:4px}\n"], components: [{ type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$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$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$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfResourceSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfResourceSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$7.MtnaInMemorySearchFacade }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfResourceSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfResourceSearchComponent, selector: "mtna-wf-resource-search-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div class=\"label-container\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n  <div class=\"label-text\">\n    {{ item.label }}\n  </div>\n  <mat-divider fxFlex></mat-divider>\n</div>\n<div class=\"values-container\">\n  <!--  <aria-ui-reference-list-table\n            [path]=\"path\"\n            [referenceConfiguration]=\"referenceConfiguration\"\n            [references]=\"references\"\n            [termReference]=\"termReference\"\n            (openDetails)=\"openDetails.emit($event)\"\n            (referenceSelected)=\"addButtonDisabled = !!$event\"\n            (updateValues)=\"updateValues.emit($event)\"\n    >\n    </aria-ui-reference-list-table>\n    -->\n  <button mat-flat-button class=\"add-button\" color=\"primary\" [disabled]=\"readonly\" (click)=\"openDialog()\" i18n>\n    Add Resource<mat-icon>add_circle_outline</mat-icon>\n  </button>\n</div>\n", styles: ["mtna-wf-resource-search-item .label-container .label-text{margin:0 8px 0 0}mtna-wf-resource-search-item .label-container .mat-divider.mat-divider-horizontal{position:unset;width:unset}mtna-wf-resource-search-item .values-container{margin-left:1em;border-width:1px;border-style:solid;border-radius:4px;border-color:#0000001f;padding:8px}mtna-wf-resource-search-item .values-container .paginator-and-order-controls{margin-bottom:8px}mtna-wf-resource-search-item .values-container .add-button .mat-icon{margin-left:4px}\n"], components: [{ type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$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$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$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfResourceSearchComponent, decorators: [{
             type: Component,
             args: [{
@@ -4694,7 +5062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$8.MtnaInMemorySearchFacade }, { type: i1.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$7.MtnaInMemorySearchFacade }, { type: i1.MatDialog }]; } });
 
 class MtnaWfResourceSearchModule {
 }
@@ -4719,7 +5087,7 @@ class MtnaWfTableFormItemComponent extends MtnaWfBaseParentValueItem {
     }
 }
 MtnaWfTableFormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTableFormItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfTableFormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTableFormItemComponent, selector: "mtna-wf-table-item", usesInheritance: true, ngImport: i0, template: "<table mat-table [dataSource]=\"item.tableRows\" [trackBy]=\"_trackByTableRow\">\n  <ng-container *ngFor=\"let header of item.headers; let index = index\" [matColumnDef]=\"header\">\n    <th mat-header-cell *matHeaderCellDef>{{ header }}</th>\n\n    <td mat-cell *matCellDef=\"let rowItem\">\n      <mtna-wf-item\n        *ngIf=\"!!rowItem.items[index]\"\n        [control]=\"!!control && !!control.controls ? control.controls[rowItem.items[index].instanceId] : undefined\"\n        [item]=\"rowItem.items[index]\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"item.headers\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: item.headers\"></tr>\n</table>\n", styles: ["mtna-wf-table-item .mat-table{width:100%}mtna-wf-table-item .mat-table tbody tr td.mat-cell{padding:8px;vertical-align:top}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group{flex-direction:column;place-content:start start;align-items:start;justify-content:start}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group *{margin-top:0;margin-bottom:0}mtna-wf-table-item .mat-table tbody tr td mtna-wf-boolean-item>.mat-slide-toggle{margin-bottom:8px;margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .repeat-item-container:not(:first-of-type){margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .new-item-button{margin:8px 0}\n"], components: [{ type: i1$9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i1$9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$9.MatCellDef, selector: "[matCellDef]" }, { type: i1$9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfTableFormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTableFormItemComponent, selector: "mtna-wf-table-item", usesInheritance: true, ngImport: i0, template: "<table mat-table [dataSource]=\"item.tableRows\" [trackBy]=\"_trackByTableRow\">\n  <ng-container *ngFor=\"let header of item.headers; let index = index\" [matColumnDef]=\"header\">\n    <th mat-header-cell *matHeaderCellDef>{{ header }}</th>\n\n    <td mat-cell *matCellDef=\"let rowItem\">\n      <mtna-wf-item\n        *ngIf=\"!!rowItem.items[index]\"\n        [control]=\"!!control && !!control.controls ? control.controls[rowItem.items[index].instanceId] : undefined\"\n        [item]=\"rowItem.items[index]\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n      ></mtna-wf-item>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"item.headers\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: item.headers\"></tr>\n</table>\n", styles: ["mtna-wf-table-item .mat-table{width:100%}mtna-wf-table-item .mat-table tbody tr td.mat-cell{padding:8px;vertical-align:top}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group{flex-direction:column;place-content:start start;align-items:start;justify-content:start}mtna-wf-table-item .mat-table tbody tr td mtna-wf-group>.group *{margin-top:0;margin-bottom:0}mtna-wf-table-item .mat-table tbody tr td mtna-wf-boolean-item>.mat-slide-toggle{margin-bottom:8px;margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .repeat-item-container:not(:first-of-type){margin-top:8px}mtna-wf-table-item .mat-table tbody tr td mtna-wf-repeatable-item-container .new-item-button{margin:8px 0}\n"], components: [{ type: i1$8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i1$8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$8.MatCellDef, selector: "[matCellDef]" }, { type: i1$8.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTableFormItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -4748,7 +5116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfTextItemComponent extends MtnaWfBaseFormItem {
 }
 MtnaWfTextItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTextItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfTextItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTextItemComponent, selector: "mtna-wf-text-item", usesInheritance: true, ngImport: i0, template: "<p [innerHTML]=\"$any(item.value) | mtnaWfSanitizeHtml\" class=\"mtna-wf-text-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"></p>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-text-item .mtna-wf-text-item{padding-right:24px}\n"], directives: [{ type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfTextItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTextItemComponent, selector: "mtna-wf-text-item", usesInheritance: true, ngImport: i0, template: "<p [innerHTML]=\"$any(item.value) | mtnaWfSanitizeHtml\" class=\"mtna-wf-text-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"></p>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-text-item .mtna-wf-text-item{padding-right:24px}\n"], directives: [{ type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTextItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -4777,7 +5145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfTitleItemComponent extends MtnaWfBaseFormItem {
 }
 MtnaWfTitleItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTitleItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfTitleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTitleItemComponent, selector: "mtna-wf-title-item", usesInheritance: true, ngImport: i0, template: "<h3 class=\"mtna-wf-title-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">{{ item.value }}</h3>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-title-item .mtna-wf-title-item{padding-right:24px}mtna-wf-title-item .mtna-wf-title-item{font-size:1rem;font-weight:400;letter-spacing:1px;line-height:32px;text-transform:uppercase}\n"], directives: [{ type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfTitleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTitleItemComponent, selector: "mtna-wf-title-item", usesInheritance: true, ngImport: i0, template: "<h3 class=\"mtna-wf-title-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">{{ item.value }}</h3>\n", styles: ["mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-title-item .mtna-wf-title-item{padding-right:24px}mtna-wf-title-item .mtna-wf-title-item{font-size:1rem;font-weight:400;letter-spacing:1px;line-height:32px;text-transform:uppercase}\n"], directives: [{ type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTitleItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -4806,7 +5174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class MtnaWfUnorderedListItemComponent extends MtnaWfBaseFormItem {
 }
 MtnaWfUnorderedListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfUnorderedListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfUnorderedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfUnorderedListItemComponent, selector: "mtna-wf-unordered-list-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ul [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ul>\n", styles: ["mtna-wf-unordered-list-item>ul{list-style:disc outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-unordered-list-item>ul{padding-right:24px}\n"], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfUnorderedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfUnorderedListItemComponent, selector: "mtna-wf-unordered-list-item", usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<ul [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText\">\n  <li *ngFor=\"let item of item.value\" [innerHTML]=\"item | mtnaWfSanitizeHtml\"></li>\n</ul>\n", styles: ["mtna-wf-unordered-list-item>ul{list-style:disc outside;padding-left:1rem}mtna-annotations-indicator+mtna-wf-item-injector+mtna-wf-unordered-list-item>ul{padding-right:24px}\n"], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfUnorderedListItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -4931,7 +5299,6 @@ class MtnaWfYearQuarterComponent extends MtnaWfBaseValueItem {
     }
     ngOnInit() {
         var _a, _b, _c;
-        console.warn('YearQuarterItem ngOnInit', this.control);
         // Set any initial value onto the Year & Quarter controls
         this._yearControl.setValue(((_a = this.control) === null || _a === void 0 ? void 0 : _a.value) ? this.control.value.year : null);
         this._quarterControl.setValue(((_b = this.control) === null || _b === void 0 ? void 0 : _b.value) ? this.control.value.quarter : null);
@@ -4961,7 +5328,7 @@ class MtnaWfYearQuarterComponent extends MtnaWfBaseValueItem {
     }
 }
 MtnaWfYearQuarterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MTNA_WF_DEFAULT_YEAR_RANGE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfYearQuarterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item", host: { properties: { "class.mtna-wf-year-quarter-item": "this.yearQuarterItemClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div\n  *ngIf=\"control\"\n  class=\"year-quarter-container\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"year selection\">\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"quarter selection\">\n      <mat-option>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfYearQuarterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item", host: { properties: { "class.mtna-wf-year-quarter-item": "this.yearQuarterItemClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div\n  *ngIf=\"control\"\n  class=\"year-quarter-container\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"Year Selection\" i18n-aria-label>\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"Quarter Selection\" i18n-aria-label>\n      <mat-option i18n>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}\n"], components: [{ type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterComponent, decorators: [{
             type: Component,
             args: [{
@@ -5042,7 +5409,7 @@ class MtnaWfYearQuarterRangeComponent extends MtnaWfBaseValueItem {
     }
 }
 MtnaWfYearQuarterRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfYearQuarterRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterRangeComponent, selector: "mtna-wf-year-quarter-range-item", host: { properties: { "class.mtna-wf-year-quarter-range-item": "this.yearQuarterRangeClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-year-quarter-item\n    [item]=\"_startItem\"\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n  <span fxFlex=\"14px\">to</span>\n  <mtna-wf-year-quarter-item\n    [item]=\"_endItem\"\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n</div>\n", styles: ["mtna-wf-year-quarter-range-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-range-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item" }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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$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$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfYearQuarterRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterRangeComponent, selector: "mtna-wf-year-quarter-range-item", host: { properties: { "class.mtna-wf-year-quarter-range-item": "this.yearQuarterRangeClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n\n<div\n  *ngIf=\"control\"\n  class=\"range-item-container\"\n  fxLayout=\"row\"\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mtna-wf-year-quarter-item\n    [item]=\"_startItem\"\n    [control]=\"control.controls['start'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n  <span fxFlex=\"14px\">to</span>\n  <mtna-wf-year-quarter-item\n    [item]=\"_endItem\"\n    [control]=\"control.controls['end'] | mtnaWfCoerceFormControl\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-item>\n</div>\n", styles: ["mtna-wf-year-quarter-range-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-range-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-range-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item" }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$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$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$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "mtnaWfCoerceFormControl": MtnaWfCoerceFormControlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -5071,6 +5438,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+class MtnaWfProgressiveFormSectionComponent extends MtnaWfBaseSectionItem {
+    constructor(cdr) {
+        super(cdr);
+    }
+}
+MtnaWfProgressiveFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormSectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfProgressiveFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfProgressiveFormSectionComponent, selector: "mtna-wf-progressive-form-section", usesInheritance: true, ngImport: i0, template: "<mtna-wf-step-card [step]=\"step\" [subtitle]=\"item.descriptiveText\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">\n  <div cardContent>\n    <ng-container *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\">\n      <mat-divider\n        *ngIf=\"(subItem.itemId | mtnaWfGetObjectType) === 'formitemgroupimpl' && item.items.indexOf(subItem) !== 0\"\n        class=\"section-item-divider\"\n        [inset]=\"true\"\n      ></mat-divider>\n\n      <mtna-wf-item\n        [item]=\"subItem\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n        [control]=\"!!control && !!control.controls ? control.controls[subItem.instanceId] : undefined\"\n        (focusedSection)=\"focused.emit($event)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </div>\n</mtna-wf-step-card>\n", styles: ["mtna-wf-progressive-form-section mat-divider.mat-divider-horizontal.progressive-form-section-actions-divider{position:relative;left:unset;padding-bottom:8px}mtna-wf-progressive-form-section .progressive-form-section-actions-wrapper .mat-raised-button{margin:0}\n"], components: [{ type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: ["color", "step", "subtitle"], outputs: ["focused"] }, { type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }], directives: [{ type: i4.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfGetObjectType": MtnaWfGetObjectTypePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-progressive-form-section',
+                    templateUrl: './progressive-form-section.component.html',
+                    styleUrls: ['./progressive-form-section.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
 const MTNA_WF_ITEM_INJECTED_COMPONENTS = [
     // Boolean Item Component
     {
@@ -5112,6 +5497,11 @@ const MTNA_WF_ITEM_INJECTED_COMPONENTS = [
         key: 'us.mtna.web.form.impl.SectionImpl',
         component: MtnaWfFormSectionComponent,
     },
+    // Progressive Form Section Component
+    {
+        key: 'us.mtna.web.form.impl.ProgressiveFormSectionImpl',
+        component: MtnaWfProgressiveFormSectionComponent,
+    },
     // I18n Input Item Components
     {
         key: 'us.mtna.web.form.item.impl.InternationalizedParagraphAnswerItem',
@@ -5196,169 +5586,377 @@ class MtnaWfItemComponentProvider extends InjectedComponentProvider {
     }
 }
 
-/**
- * Base control class for a ValueItem.
- * If a FormItem can have value, its component class should extend this class.
- */
-class BaseFormItemControl {
-    constructor() {
-        this.formControlClass = true;
-        this.header = null;
-        this.inList = false;
-        this.indicatorStatus = 'INACTIVE';
-        this.readonly = false;
-    }
-    get control() {
-        return this._control;
-    }
-    set control(control) {
-        this._control = control;
-    }
-    get item() {
-        return this._item;
+/* eslint-disable @angular-eslint/no-outputs-metadata-property */
+class MtnaWfProgressiveFormComponent extends MtnaWfBaseFormComponent {
+    constructor(mtnaFormManager, ngFormService, uiService, cdr, scrollService) {
+        super(mtnaFormManager, ngFormService, uiService);
+        this.cdr = cdr;
+        this.scrollService = scrollService;
+        this._loading = false;
+        /** Emits the updated ProgressiveForm value */
+        this.nextStepSelected = new EventEmitter();
+        /**
+         * Emits the previous steps instanceId.
+         * Since this component is always on the last step and the last item, we can always count on having the instanceId of the previous step.
+         */
+        this.previousStepSelected = new EventEmitter();
+        /**
+         * Emits the instanceId of the selected step.
+         * If the currently active step is the step that is selected, this will not emit.
+         */
+        this.showSelectedStepId = new EventEmitter();
+        this.activeStepId$ = new BehaviorSubject(undefined);
+        this.formItems = [];
+        this.formStatusValid$ = new BehaviorSubject(false);
+        this.lastStepActive = false;
+        this.scrollDirection$ = this.scrollService.getScrollDirection();
+        this.showPreviousButton = false;
+        this.stepArray$ = new BehaviorSubject([]);
+        /**
+         * Checks if the last step in the form is active.
+         * @returns true if the last step in the form is active, otherwise false
+         */
+        this.checkLastStepActive = () => {
+            if (this.stepArray$.value.length > 0) {
+                return this.stepArray$.value[this.stepArray$.value.length - 1].active;
+            }
+            else if (this.stepArray$.value.length === 0) {
+                return this.stepArray$.value[0].active;
+            }
+            else {
+                return false;
+            }
+        };
     }
-    set item(item) {
-        this._item = item;
+    get mtnaForm() {
+        return super.mtnaForm;
     }
-    // Whether the item has a header component above the content
-    get hasItemHeader() {
-        return !!this.item && (!!this.item.questionText || !!this.item.descriptiveText);
+    set mtnaForm(form) {
+        if (form) {
+            this.formItems = form.items;
+            this.resetValues();
+            this.generateFormSteps(form.outline);
+            this.checkAllStepsIds(form.items);
+            super.steps = this.determineStepsToPassToSuper(form.items);
+            super.mtnaForm = form;
+            this.setStepStatus();
+            this.setFormStatusSubscription();
+            this.showPreviousButton = this.showPreviousButtonFn();
+            this.lastStepActive = this.checkLastStepActive();
+            this.cdr.markForCheck();
+        }
     }
-    _trackByOptionId(index, option) {
-        return option.option.id;
+    get loading() {
+        return this._loading;
     }
-}
-BaseFormItemControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseFormItemControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-BaseFormItemControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseFormItemControl, inputs: { control: "control", header: "header", inList: "inList", indicatorStatus: "indicatorStatus", item: "item", readonly: "readonly" }, host: { properties: { "class.mtna-wf-control-item": "this.formControlClass", "class.read-only": "this.readonly" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseFormItemControl, decorators: [{
-            type: Directive
-        }], propDecorators: { formControlClass: [{
-                type: HostBinding,
-                args: ['class.mtna-wf-control-item']
-            }], control: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], inList: [{
-                type: Input
-            }], indicatorStatus: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], readonly: [{
-                type: HostBinding,
-                args: ['class.read-only']
-            }, {
-                type: Input
-            }] } });
-
-/**
- * Base control class for a FormItem with nested FormItems.
- * If a FormItem contains an 'optionItemMap', its component class should extend this class.
- */
-class BaseParentItemControl extends BaseFormItemControl {
-    constructor() {
-        super(...arguments);
-        this.parentIds = new Array();
+    set loading(value) {
+        this._loading = coerceBooleanProperty(value);
     }
-    /** FormControl representing this item's value.
-     * If this item has items in its 'optionItemMap', this control is nested inside a FormGroup wrapper */
-    get control() {
-        return this._control;
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.formStatusSubscriber) {
+            this.formStatusSubscriber.unsubscribe();
+        }
     }
-    set control(control) {
-        if (control instanceof FormGroup) {
-            this._control = control.get(this.item.instanceId);
-            this.controlWrapper = control;
+    /**
+     * Checks if the previous button should be shown.
+     * @returns true if the previous button should be shown, otherwise false
+     */
+    showPreviousButtonFn() {
+        if (this.activeStepId$.value) {
+            const indexOfActiveStep = this.stepArray$.value.findIndex((step) => step.instanceId === this.activeStepId$.value);
+            return indexOfActiveStep > 0;
         }
         else {
-            super.control = control;
+            return false;
         }
-        // FIXME sometimes this gets set with undefined which was a problem
-        // Why is it undefined sometimes? something to do with readonly?
-        // Do we need to split the read-only components and edit-components
-        // I think the read-only components are carrying a bunch of extra unecessary weight
     }
-}
-BaseParentItemControl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseParentItemControl, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-BaseParentItemControl.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseParentItemControl, inputs: { control: "control", parentIds: "parentIds" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseParentItemControl, decorators: [{
-            type: Directive
-        }], propDecorators: { control: [{
-                type: Input
-            }], parentIds: [{
-                type: Input
-            }] } });
-
-class BaseSingleSelectionParent extends BaseParentItemControl {
-    constructor(uiService) {
-        super();
-        this.uiService = uiService;
+    /**
+     * Subscribes to the form status changes and updates the formStatusValid$ BehaviorSubject with the validity of the active step.
+     */
+    setFormStatusSubscription() {
+        var _a;
+        if (this.ngForm) {
+            // Used to set the initial validity of the active step, otherwise it will always default to false
+            if (this.activeStepId$.value) {
+                const initialValidity = (_a = this.ngForm.controls[this.activeStepId$.value]) === null || _a === void 0 ? void 0 : _a.valid;
+                this.formStatusValid$.next(initialValidity);
+            }
+            if (!this.formStatusSubscriber) {
+                this.formStatusSubscriber = this.ngForm.statusChanges.subscribe(() => {
+                    if (this.activeStepId$.value) {
+                        if (this.ngForm) {
+                            const activeControlExists = Object.keys(this.ngForm.controls).includes(this.activeStepId$.value);
+                            if (activeControlExists) {
+                                const activeControl = this.ngForm.controls[this.activeStepId$.value];
+                                if (activeControl) {
+                                    this.formStatusValid$.next(activeControl.valid);
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
     }
-    ngOnInit() {
+    /**
+     * Resets all necessary values to build to form each iteration.
+     */
+    resetValues() {
         var _a;
-        if (isPresent((_a = this.control) === null || _a === void 0 ? void 0 : _a.value)) {
-            this.selectedOption = this.item.options.find((o) => { var _a; return ((_a = this.control) === null || _a === void 0 ? void 0 : _a.value) === o.option.id; });
+        (_a = this.formStatusSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.ngForm = undefined;
+        this._steps = undefined;
+        this.ngFormService.disposeForm();
+        this.stepArray$.next([]);
+        this.activeStepId$.next(undefined);
+    }
+    /**
+     * Generates the steps for the form based on the outline property of the form.
+     * @param outline the outline of the form that is the basis for the steps
+     */
+    generateFormSteps(outline) {
+        if (this.stepArray$.value.length === 0) {
+            const generatedFormSteps = generateFormStepsFromOutline(outline);
+            const flattenedFormSteps = flattenSteps(generatedFormSteps);
+            this.stepArray$.next(flattenedFormSteps);
+            // Set the active step to the first step in the array for the first load
+            const lastItemIndex = this.formItems.length - 1;
+            const updatedSteps = [];
+            this.stepArray$.value.forEach((step) => {
+                if (step.instanceId === this.formItems[lastItemIndex].instanceId || step.instanceId === this.formItems[lastItemIndex].templateId) {
+                    updatedSteps.push(Object.assign(Object.assign({}, step), { active: true, status: 'INVALID' }));
+                }
+                else {
+                    updatedSteps.push(step);
+                }
+            });
+            this.stepArray$.next(updatedSteps);
         }
     }
     /**
-     * Toggles the 'selected' value of the previous & newly selected options,
-     * then calls toggleFormItems to change their enabled/disabled items
-     * @param change MatRadioChange from the radio group
+     * Checks all of the steps to ensure that each steps instanceId property matches the instanceId of the FormItem and updates the property if needed.
+     * This finds the step based on the templateId. When the stepArray is first built, the templateId of the FormItem gets set as the steps instanceId.
+     * Here, we just need to find the steps that match the templateId and update the instanceId.
+     * Matching is based off of templateId reduces the number of steps that need to be checked/manipulated.
+     *
+     * @param formItems the FormItems to check against the steps
      */
-    selectionChange(change) {
-        // event fires when an option's nested item, e.g. FileUploadItem, changes value.
-        // This event is not a MatRadioChange, so we need to ignore it.
-        if (change instanceof MatRadioChange || change instanceof MatSelectChange) {
-            // Newly selected option
-            const option = this.item.options.find((o) => o.option.id === change.value);
-            if (!!this.selectedOption && this.selectedOption.option.id !== change.value) {
-                // New option does not match the previous option
-                // Previous option's enabled/disabled items need toggling
-                // toggle visibility and enable/disable, should be rendered already
-                this.uiService.toggleFormItems(this.selectedOption.enabledItems, this.selectedOption.disabledItems, false, this.item.instanceId);
+    checkAllStepsIds(formItems) {
+        formItems.forEach((item) => {
+            const stepMatchedOnTemplateId = this.stepArray$.value.find((s) => s.instanceId === item.templateId);
+            if (stepMatchedOnTemplateId) {
+                stepMatchedOnTemplateId.instanceId = item.instanceId;
+                if (stepMatchedOnTemplateId.active) {
+                    this.activeStepId$.next(item.instanceId);
+                    this.cdr.markForCheck();
+                }
             }
-            // toggle visibility and enable/disable, should be rendered already
-            if (option) {
-                this.uiService.toggleFormItems(option.enabledItems, option.disabledItems, true, this.item.instanceId);
+        });
+    }
+    /**
+     * Because the super class has no knowledge of the stepArray that have been generated for the form,
+     * this function determines which steps need to be passed to the super class and the inherited _steps
+     * property. The super class "should" obtain each step as it is passed in. This means that when the
+     * call to either grab the form again or to get the next FormItem, should also continue to pass the
+     * steps that have been generated.
+     * @returns
+     */
+    determineStepsToPassToSuper(items) {
+        const availableItemInstanceIds = [];
+        items.forEach((item) => {
+            availableItemInstanceIds.push(item.instanceId);
+        });
+        const stepsToPass = [];
+        this.stepArray$.value.forEach((step) => {
+            if (availableItemInstanceIds.includes(step.instanceId)) {
+                stepsToPass.push(step);
+            }
+        });
+        return stepsToPass;
+    }
+    /**
+     * Sets the status of each step in the form based on the validity of the form control.
+     * If the form control key is not found in the controls of the form, the status is set to 'PLACEHOLDER'.
+     */
+    setStepStatus() {
+        const updatedSteps = [];
+        this.stepArray$.value.forEach((step) => {
+            if (this.ngForm) {
+                const controlKeyExists = Object.keys(this.ngForm.controls).includes(step.instanceId);
+                if (controlKeyExists) {
+                    updatedSteps.push(Object.assign(Object.assign({}, step), { status: this.ngForm.controls[step.instanceId].valid ? 'VALID' : 'INVALID' }));
+                }
+                else {
+                    updatedSteps.push(Object.assign(Object.assign({}, step), { status: 'PLACEHOLDER' }));
+                }
+            }
+        });
+        this.stepArray$.next(updatedSteps);
+    }
+    /**
+     * Emits the next or previous step templateId based on the direction provided.
+     * @param stepDirection the direction of the step to emit
+     */
+    showDirectionalStep(stepDirection) {
+        // const stepTemplateId = this.getDirectionalStepTemplateId(stepDirection);
+        // if (stepTemplateId) {
+        if (this.mtnaForm) {
+            const formValue = this.ngFormService.getFormValue();
+            const updatedForm = this.mtnaFormManager.insertNewValues(this.mtnaForm, formValue);
+            if (stepDirection === 'next') {
+                this.nextStepSelected.emit(updatedForm);
+                this.scrollService.scrollTop();
+            }
+            else {
+                const previousStepIndex = this.stepArray$.value.findIndex((step) => step.instanceId === this.activeStepId$.value) - 1;
+                if (previousStepIndex >= 0) {
+                    const previousStep = this.stepArray$.value[previousStepIndex];
+                    if (previousStep) {
+                        this.previousStepSelected.emit(previousStep.instanceId);
+                        this.scrollService.scrollTop();
+                    }
+                }
             }
-            // Set the selected option as the previous
-            this.selectedOption = option;
         }
-        else {
-            console.warn('[BaseSingleSelectionParent] selectionChange - not a MatRadioChange | MatSelectChange', change);
+    }
+    /**
+     * Shows the selected step as the active step in the form.
+     * To be used on the mtna-wf-form-stepper components "selected" output.
+     * @param step the step to show as the active step
+     */
+    showSelectedStep(step) {
+        if (this.activeStepId$.value !== step.instanceId) {
+            this.showSelectedStepId.emit(step.instanceId);
+            this.activeStepId$.next(step.instanceId);
+            this.scrollService.scrollTop();
         }
     }
+    _trackByStepInstanceId(index, formStep) {
+        return formStep.instanceId;
+    }
 }
-BaseSingleSelectionParent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseSingleSelectionParent, deps: [{ token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Directive });
-BaseSingleSelectionParent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseSingleSelectionParent, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseSingleSelectionParent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: MtnaWfUIService }]; } });
+MtnaWfProgressiveFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormComponent, deps: [{ token: MtnaWfManagerService }, { token: MtnaWfNgFormService }, { token: MtnaWfUIService }, { token: i0.ChangeDetectorRef }, { token: i4.MtnaScrollService }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfProgressiveFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfProgressiveFormComponent, selector: "mtna-wf-progressive-form", inputs: { loading: "loading" }, outputs: { status: "status", focusedSection: "focusedSection", mtnaFormChange: "mtnaFormChange", nextStepSelected: "nextStepSelected", previousStepSelected: "previousStepSelected", showSelectedStepId: "showSelectedStepId" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" class=\"mtna-wf-progressive-form__container\">\n  <mtna-wf-stepper\n    *ngIf=\"stepArray$ | async as steps\"\n    fxFlex=\"200px\"\n    [steps]=\"steps\"\n    (selected)=\"showSelectedStep($event)\"\n  ></mtna-wf-stepper>\n  <div fxFlex class=\"mtna-wf-progressive-form__form-container\">\n    <form *ngIf=\"ngForm\" [formGroup]=\"ngForm\" [formDisabled]=\"readonly\">\n      <ng-container *ngFor=\"let item of mtnaForm?.items\">\n        <ng-container *ngIf=\"activeStepId$ | async as activeStepId\">\n          <mtna-wf-item\n            *ngIf=\"item.instanceId === activeStepId\"\n            [item]=\"item\"\n            [control]=\"ngForm.controls[item.instanceId]\"\n            [readonly]=\"readonly\"\n            [parentIds]=\"componentIds\"\n            [step]=\"_steps?.[item.instanceId]\"\n            (focusedSection)=\"focusedSection.emit($event)\"\n          ></mtna-wf-item>\n        </ng-container>\n      </ng-container>\n    </form>\n    <div *ngIf=\"!loading\" class=\"mtna-wf-progressive-form__stepper-actions\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"26px\">\n      <button *ngIf=\"showPreviousButton\" mat-stroked-button color=\"primary\" (click)=\"showDirectionalStep('previous')\" i18n>\n        Previous Step\n      </button>\n      <ng-container *ngIf=\"!lastStepActive; else parentActions\">\n        <button mat-raised-button color=\"primary\" (click)=\"showDirectionalStep('next')\" i18n>Next Step</button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #parentActions>\n  <ng-content></ng-content>\n</ng-template>\n", styles: ["mtna-wf-progressive-form{display:flex;flex:1}mtna-wf-progressive-form .mtna-wf-progressive-form__container{width:100%}mtna-wf-progressive-form mtna-wf-progressive-form-section mtna-wf-step-card{margin:24px}mtna-wf-progressive-form .mtna-wf-progressive-form__stepper-actions{margin:0 24px 24px}mtna-wf-progressive-form .mtna-wf-progressive-form__stepper-actions .mtna-wf-progressive-form__next-button{margin-left:auto}\n"], components: [{ type: MtnaWfFormStepperComponent, selector: "mtna-wf-stepper", inputs: ["color", "incompleteIcon", "steps"], outputs: ["selected"] }, { type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: ["formDisabled"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["color", "control", "header", "inList", "item", "parentIds", "readonly", "step"], outputs: ["focusedSection"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$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$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-progressive-form',
+                    templateUrl: './progressive-form.component.html',
+                    styleUrls: ['./progressive-form.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    outputs: ['status', 'focusedSection', 'mtnaFormChange'],
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfManagerService }, { type: MtnaWfNgFormService }, { type: MtnaWfUIService }, { type: i0.ChangeDetectorRef }, { type: i4.MtnaScrollService }]; }, propDecorators: { loading: [{
+                type: Input
+            }], nextStepSelected: [{
+                type: Output
+            }], previousStepSelected: [{
+                type: Output
+            }], showSelectedStepId: [{
+                type: Output
+            }] } });
 
-/* eslint-disable @angular-eslint/directive-selector */
-/**
- * Used to retrieve the host container for a dynamically rendered component.
- *
- * @export
- */
-class MtnaWfFormItemDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
+class MtnaWfProgressiveFormSectionModule {
+}
+MtnaWfProgressiveFormSectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormSectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MtnaWfProgressiveFormSectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormSectionModule, declarations: [MtnaWfProgressiveFormSectionComponent], imports: [CommonModule,
+        FlexLayoutModule,
+        MtnaWfStepCardModule,
+        MtnaHighlightModule,
+        MatDividerModule,
+        MtnaWfGetObjectTypePipeModule,
+        MtnaWfFormItemModule,
+        MatButtonModule,
+        MatIconModule], exports: [MtnaWfProgressiveFormSectionComponent] });
+MtnaWfProgressiveFormSectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormSectionModule, imports: [[
+            CommonModule,
+            FlexLayoutModule,
+            MtnaWfStepCardModule,
+            MtnaHighlightModule,
+            MatDividerModule,
+            MtnaWfGetObjectTypePipeModule,
+            MtnaWfFormItemModule,
+            MatButtonModule,
+            MatIconModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormSectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FlexLayoutModule,
+                        MtnaWfStepCardModule,
+                        MtnaHighlightModule,
+                        MatDividerModule,
+                        MtnaWfGetObjectTypePipeModule,
+                        MtnaWfFormItemModule,
+                        MatButtonModule,
+                        MatIconModule,
+                    ],
+                    declarations: [MtnaWfProgressiveFormSectionComponent],
+                    exports: [MtnaWfProgressiveFormSectionComponent],
+                }]
+        }] });
+
+class MtnaWfProgressiveFormModule {
 }
-MtnaWfFormItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-MtnaWfFormItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormItemDirective, selector: "[formItemHost]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormItemDirective, decorators: [{
-            type: Directive,
+MtnaWfProgressiveFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MtnaWfProgressiveFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormModule, declarations: [MtnaWfProgressiveFormComponent], imports: [A11yModule,
+        CommonModule,
+        FlexLayoutModule,
+        FormsModule,
+        MatButtonModule,
+        MatIconModule,
+        MtnaWfFormDisablerModule,
+        MtnaWfFormItemModule,
+        MtnaWfProgressiveFormSectionModule,
+        ReactiveFormsModule,
+        MtnaWfFormStepperModule,
+        GetProgressiveFormItemPipeModule,
+        GetActiveFormStepItemPipeModule], exports: [MtnaWfProgressiveFormComponent] });
+MtnaWfProgressiveFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormModule, imports: [[
+            A11yModule,
+            CommonModule,
+            FlexLayoutModule,
+            FormsModule,
+            MatButtonModule,
+            MatIconModule,
+            MtnaWfFormDisablerModule,
+            MtnaWfFormItemModule,
+            MtnaWfProgressiveFormSectionModule,
+            ReactiveFormsModule,
+            MtnaWfFormStepperModule,
+            GetProgressiveFormItemPipeModule,
+            GetActiveFormStepItemPipeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfProgressiveFormModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: '[formItemHost]',
+                    imports: [
+                        A11yModule,
+                        CommonModule,
+                        FlexLayoutModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MtnaWfFormDisablerModule,
+                        MtnaWfFormItemModule,
+                        MtnaWfProgressiveFormSectionModule,
+                        ReactiveFormsModule,
+                        MtnaWfFormStepperModule,
+                        GetProgressiveFormItemPipeModule,
+                        GetActiveFormStepItemPipeModule,
+                    ],
+                    declarations: [MtnaWfProgressiveFormComponent],
+                    exports: [MtnaWfProgressiveFormComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFormItemControl, BaseFormStep, BaseParentItemControl, BaseSingleSelectionParent, COMPLEX_STANDARD, DEFAULT_ERROR_MESSAGES, FormStep, FormStepGroup, MTNA_WF_API_TOKEN, MTNA_WF_DEFAULT_YEAR_RANGE, MTNA_WF_EXPAND_COLLAPSE, MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME, MTNA_WF_ITEM_INJECTED_COMPONENTS, MTNA_WF_ITEM_WHITELIST, MTNA_WF_ITEM_WHITELIST_FACTORY, MtnaFormModule, MtnaWfAcknowledgeDialogComponent, MtnaWfAcknowledgeDialogModule, MtnaWfApiService, MtnaWfBaseFormItemControl, MtnaWfBaseGroupItem, MtnaWfBaseParentValueItem, MtnaWfBaseSectionItem, MtnaWfBaseSingleSelectionParentValueItem, MtnaWfBaseValueItem, MtnaWfBooleanComponent, MtnaWfBooleanModule, MtnaWfCheckboxComponent, MtnaWfCheckboxModule, MtnaWfCoerceDateItemPipe, MtnaWfCoerceDateItemPipeModule, MtnaWfCoerceFormControlPipe, MtnaWfCoerceFormControlPipeModule, MtnaWfCoerceFormGroupPipe, MtnaWfCoerceFormGroupPipeModule, MtnaWfCoerceFormItemPipe, MtnaWfCoerceFormItemPipeModule, MtnaWfDateComponent, MtnaWfDateModule, MtnaWfDateQuarterPipe, MtnaWfDateQuarterPipeModule, MtnaWfDateRangeComponent, MtnaWfDateRangeModule, MtnaWfDialogService, MtnaWfDropdownComponent, MtnaWfDropdownModule, MtnaWfFileUploadComponent, MtnaWfFileUploadModule, MtnaWfFormComponent, MtnaWfFormDisablerComponent, MtnaWfFormDisablerModule, MtnaWfFormGroupComponent, MtnaWfFormGroupModule, MtnaWfFormItemComponent, MtnaWfFormItemDialogComponent, MtnaWfFormItemDialogData, MtnaWfFormItemDialogModule, MtnaWfFormItemDirective, MtnaWfFormItemModule, MtnaWfFormSectionComponent, MtnaWfFormSectionModule, MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepGroupPipeModule, MtnaWfFormStepperComponent, MtnaWfFormStepperModule, MtnaWfGetAutoCompletePipe, MtnaWfGetAutoCompletePipeModule, MtnaWfGetAvailableQuartersPipe, MtnaWfGetAvailableQuartersPipeModule, MtnaWfGetFormControlErrorPipe, MtnaWfGetFormControlErrorPipeModule, MtnaWfGetListIconPipe, MtnaWfGetListIconPipeModule, MtnaWfGetObjectTypePipe, MtnaWfGetObjectTypePipeModule, MtnaWfGetSelectedOptionNamePipe, MtnaWfGetSelectedOptionNamePipeModule, MtnaWfI18nInputComponent, MtnaWfI18nInputModule, MtnaWfInputComponent, MtnaWfInputModule, MtnaWfInstantValidationResultErrorStateMatcher, MtnaWfItemComponentProvider, MtnaWfItemHeaderComponent, MtnaWfItemHeaderModule, MtnaWfItemInjector, MtnaWfItemInjectorModule, MtnaWfItemsWithValuePipe, MtnaWfItemsWithValuePipeModule, MtnaWfManagerService, MtnaWfMultipleChoiceComponent, MtnaWfMultipleChoiceModule, MtnaWfNgFormService, MtnaWfOrderedListItemComponent, MtnaWfOrderedListItemModule, MtnaWfRepeatableItemComponent, MtnaWfRepeatableItemContainerComponent, MtnaWfRepeatableItemContainerModule, MtnaWfRepeatableItemModule, MtnaWfResourceSearchComponent, MtnaWfResourceSearchModule, MtnaWfResourceSearchSelectionService, MtnaWfSanitizeHtmlPipe, MtnaWfSanitizeHtmlPipeModule, serializerUtil as MtnaWfSerializer, MtnaWfStepCardComponent, MtnaWfStepCardModule, MtnaWfTableFormItemComponent, MtnaWfTableFormItemModule, MtnaWfTextItemComponent, MtnaWfTextItemModule, MtnaWfTitleItemComponent, MtnaWfTitleItemModule, MtnaWfUIService, MtnaWfUnorderedListItemComponent, MtnaWfUnorderedListItemModule, MtnaWfYearQuarterComponent, MtnaWfYearQuarterModule, MtnaWfYearQuarterRangeComponent, MtnaWfYearQuarterRangeModule, WEB_FORM_CUSTOM_ERRORS, everyStepStatus, findFormControl, findFormItem, flattenSteps, generateFormSteps, getItemClassSuffix, isFormControl, isFormGroup, isFormStepGroup, updateStepStatus, validationResultValidator };
+export { BaseFormStep, COMPLEX_STANDARD, ChildStepActivePipe, ChildStepActivePipeModule, CoerceFormStepGroupPipe, CoerceFormStepGroupPipeModule, CoerceFormStepPipe, CoerceFormStepPipeModule, DEFAULT_ERROR_MESSAGES, FormStep, FormStepGroup, GetActiveFormStepItemPipe, GetActiveFormStepItemPipeModule, GetProgressiveFormItemPipe, GetProgressiveFormItemPipeModule, GetStepAriaLabel, GetStepAriaLabelModule, MTNA_WF_API_TOKEN, MTNA_WF_DEFAULT_YEAR_RANGE, MTNA_WF_EXPAND_COLLAPSE, MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME, MTNA_WF_ITEM_INJECTED_COMPONENTS, MTNA_WF_ITEM_WHITELIST, MTNA_WF_ITEM_WHITELIST_FACTORY, MtnaFormModule, MtnaWfAcknowledgeDialogComponent, MtnaWfAcknowledgeDialogModule, MtnaWfApiService, MtnaWfBaseFormItemControl, MtnaWfBaseGroupItem, MtnaWfBaseParentValueItem, MtnaWfBaseSectionItem, MtnaWfBaseSingleSelectionParentValueItem, MtnaWfBaseValueItem, MtnaWfBooleanComponent, MtnaWfBooleanModule, MtnaWfCheckboxComponent, MtnaWfCheckboxModule, MtnaWfCoerceDateItemPipe, MtnaWfCoerceDateItemPipeModule, MtnaWfCoerceFormControlPipe, MtnaWfCoerceFormControlPipeModule, MtnaWfCoerceFormGroupPipe, MtnaWfCoerceFormGroupPipeModule, MtnaWfCoerceFormItemPipe, MtnaWfCoerceFormItemPipeModule, MtnaWfDateComponent, MtnaWfDateModule, MtnaWfDateQuarterPipe, MtnaWfDateQuarterPipeModule, MtnaWfDateRangeComponent, MtnaWfDateRangeModule, MtnaWfDialogService, MtnaWfDropdownComponent, MtnaWfDropdownModule, MtnaWfFileUploadComponent, MtnaWfFileUploadModule, MtnaWfFormComponent, MtnaWfFormDisablerComponent, MtnaWfFormDisablerModule, MtnaWfFormGroupComponent, MtnaWfFormGroupModule, MtnaWfFormItemComponent, MtnaWfFormItemDialogComponent, MtnaWfFormItemDialogData, MtnaWfFormItemDialogModule, MtnaWfFormItemModule, MtnaWfFormSectionComponent, MtnaWfFormSectionModule, MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepGroupPipeModule, MtnaWfFormStepperComponent, MtnaWfFormStepperModule, MtnaWfGetAutoCompletePipe, MtnaWfGetAutoCompletePipeModule, MtnaWfGetAvailableQuartersPipe, MtnaWfGetAvailableQuartersPipeModule, MtnaWfGetFormControlErrorPipe, MtnaWfGetFormControlErrorPipeModule, MtnaWfGetListIconPipe, MtnaWfGetListIconPipeModule, MtnaWfGetObjectTypePipe, MtnaWfGetObjectTypePipeModule, MtnaWfGetSelectedOptionNamePipe, MtnaWfGetSelectedOptionNamePipeModule, MtnaWfI18nInputComponent, MtnaWfI18nInputModule, MtnaWfInputComponent, MtnaWfInputModule, MtnaWfInstantValidationResultErrorStateMatcher, MtnaWfItemComponentProvider, MtnaWfItemHeaderComponent, MtnaWfItemHeaderModule, MtnaWfItemInjector, MtnaWfItemInjectorModule, MtnaWfItemsWithValuePipe, MtnaWfItemsWithValuePipeModule, MtnaWfManagerService, MtnaWfMultipleChoiceComponent, MtnaWfMultipleChoiceModule, MtnaWfNgFormService, MtnaWfOrderedListItemComponent, MtnaWfOrderedListItemModule, MtnaWfProgressiveFormComponent, MtnaWfProgressiveFormModule, MtnaWfProgressiveFormSectionComponent, MtnaWfProgressiveFormSectionModule, MtnaWfRepeatableItemComponent, MtnaWfRepeatableItemContainerComponent, MtnaWfRepeatableItemContainerModule, MtnaWfRepeatableItemModule, MtnaWfResourceSearchComponent, MtnaWfResourceSearchModule, MtnaWfResourceSearchSelectionService, MtnaWfSanitizeHtmlPipe, MtnaWfSanitizeHtmlPipeModule, serializerUtil as MtnaWfSerializer, MtnaWfStepCardComponent, MtnaWfStepCardModule, MtnaWfTableFormItemComponent, MtnaWfTableFormItemModule, MtnaWfTextItemComponent, MtnaWfTextItemModule, MtnaWfTitleItemComponent, MtnaWfTitleItemModule, MtnaWfUIService, MtnaWfUnorderedListItemComponent, MtnaWfUnorderedListItemModule, MtnaWfYearQuarterComponent, MtnaWfYearQuarterModule, MtnaWfYearQuarterRangeComponent, MtnaWfYearQuarterRangeModule, PROGRESSIVE_FORM_ID, PROGRESSIVE_FORM_SECTION_ID, WEB_FORM_CUSTOM_ERRORS, everyStepStatus, findFormControl, findFormItem, flattenSteps, generateFormSteps, generateFormStepsFromOutline, getItemClassSuffix, instanceOfFormStep, instanceOfFormStepGroup, isFormControl, isFormGroup, isFormStepGroup, isProgressiveForm, isProgressiveFormSection, updateStepStatus, validationResultValidator };
 //# sourceMappingURL=mtna-web-form-angular.js.map