@mtna/web-form-angular 0.0.1

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

@@ -0,0 +1,4614 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { InjectionToken, Pipe, Injectable, Optional, Inject, NgModule, EventEmitter, Component, Input, Output, Directive, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, ViewChild } from '@angular/core';
+import * as i6 from '@angular/forms';
+import { FormGroup, Validators, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { isPresent, isType, isObject, isKey, isNullOrUndefined, toLetters } from '@mtna/core-ts';
+import { isConditionalItem, isOptionItemImpl, isOptionGroupItemImpl, isValueItem, isForm, SHORT_ANSWER_ITEM_ID, PARAGRAPH_ANSWER_ITEM_ID, WHOLE_NUMBER_ANSWER_ITEM_ID, isWholeNumberItem, DECIMAL_ANSWER_ITEM_ID, CHECKBOX_ITEM_ID, isRepeatableItem, isSection, isFormItemGroupImpl, isTableItem, isOffsetDateRangeItem, isYearQuarterRangeItem, isDataCubeItem, MtnaWfFormItemChange, TITLE_ITEM_ID, TEXT_ITEM_ID, SECTION_ID, FORM_ITEM_GROUP_IMPL_ID, DROPDOWN_ITEM_ID } from '@mtna/web-form-ts';
+import { BehaviorSubject, Subject, merge, Subscription } from 'rxjs';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/common/http';
+import { skipWhile, take, takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import * as i4$2 from '@angular/material/core';
+import { ErrorStateMatcher, mixinColor, MatRippleModule, MatOptionModule } from '@angular/material/core';
+import * as i1$3 from '@mtna/file-manager-angular';
+import { MtnaFileDownloadModule, MtnaFileUploadModule } from '@mtna/file-manager-angular';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i18 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i7 from '@mtna/core-angular';
+import { mixinDestroyNotifier, MtnaStatusCircleModule, MtnaHighlightModule, MtnaTrackByPropertyPipeModule } from '@mtna/core-angular';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i32 from '@angular/material/radio';
+import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
+import * as i2$2 from '@angular/material/select';
+import { MatSelectChange, MatSelectModule } from '@angular/material/select';
+import * as i6$1 from '@mtna/pojo-social-angular';
+import { MtnaAnnotationsIndicatorModule } from '@mtna/pojo-social-angular';
+import * as i1$4 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i3$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i4$1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i5$1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i14 from '@angular/flex-layout/extended';
+import * as i19 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i20 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i3$2 from '@angular/material/datepicker';
+import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$3 from '@angular/flex-layout/flex';
+import * as i35 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i36 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+
+const COMPLEX_STANDARD = '300ms cubic-bezier(0.4, 0.0, 0.2, 1)';
+const MTNA_WF_EXPAND_COLLAPSE = trigger('mtnaWfExpandCollapse', [
+    state('1', style({ height: '*', marginTop: '*', marginBottom: '*', opacity: 1 })),
+    state('0', style({ height: 0, marginTop: 0, marginBottom: 0, opacity: 0, overflow: 'hidden', visibility: 'hidden' })),
+    transition('1 <=> 0', [animate(COMPLEX_STANDARD)]),
+]);
+
+const MTNA_WF_API_TOKEN = new InjectionToken('mtnaWfApiConfig');
+
+class GetObjectTypePipe {
+    transform(id) {
+        const newId = id.toLowerCase().split('.');
+        return newId[newId.length - 1];
+    }
+}
+GetObjectTypePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetObjectTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetObjectTypePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetObjectTypePipe, name: "getObjectType" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetObjectTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getObjectType',
+                }]
+        }] });
+
+class CoerceDateItemPipe {
+    constructor(objectTypePipe) {
+        this.objectTypePipe = objectTypePipe;
+    }
+    transform(item) {
+        if (!!item && this.objectTypePipe.transform(item.itemId) === 'dateitem') {
+            return item;
+        }
+        return null;
+    }
+}
+CoerceDateItemPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceDateItemPipe, deps: [{ token: GetObjectTypePipe }], target: i0.ɵɵFactoryTarget.Pipe });
+CoerceDateItemPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceDateItemPipe, name: "coerceDateItem" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoerceDateItemPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'coerceDateItem',
+                }]
+        }], ctorParameters: function () { return [{ type: GetObjectTypePipe }]; } });
+
+class DateQuarterPipe {
+    transform(quarter, format = 'short') {
+        const short = {
+            0: 'Q1',
+            1: 'Q2',
+            2: 'Q3',
+            3: 'Q4',
+        };
+        const medium = {
+            0: '1st Quarter',
+            1: '2nd Quarter',
+            2: '3rd Quarter',
+            3: '4th Quarter',
+        };
+        const long = {
+            0: 'First Quarter',
+            1: 'Second Quarter',
+            2: 'Third Quarter',
+            3: 'Fourth Quarter',
+        };
+        switch (format) {
+            case 'short':
+                return short[quarter];
+            case 'medium':
+                return medium[quarter];
+            case 'long':
+                return long[quarter];
+            default:
+                return '';
+        }
+    }
+}
+DateQuarterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateQuarterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateQuarterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateQuarterPipe, name: "mtnaWfDateQuarter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DateQuarterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mtnaWfDateQuarter',
+                }]
+        }] });
+
+class GetAutoCompletePipe {
+    transform(label) {
+        if (label) {
+            switch (label.toLowerCase()) {
+                case 'first name':
+                    return 'given-name';
+                case 'last name':
+                    return 'family-name';
+                case 'email':
+                    return 'email';
+                case 'organization':
+                    return 'organization';
+                case 'phone':
+                    return 'tel';
+                case 'street address line 1':
+                    return 'address-line1';
+                case 'street address line 2':
+                    return 'address-line2';
+                case 'city':
+                    return 'address-level2';
+                case 'state':
+                    return 'address-level1';
+                case 'zip code':
+                    return 'postal-code';
+                default:
+                    return 'off';
+            }
+        }
+        return 'off';
+    }
+}
+GetAutoCompletePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetAutoCompletePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetAutoCompletePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetAutoCompletePipe, name: "getAutoComplete" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetAutoCompletePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getAutoComplete',
+                }]
+        }] });
+
+class MtnaWfGetAvailableQuartersPipe {
+    transform(year, limits) {
+        const quarters = [0, 1, 2, 3];
+        if (!!year && !!limits) {
+            // If the selected year matches the start year limit
+            if (!!limits.start && !!limits.start.year && year === limits.start.year) {
+                // If a start quarter limiit exists, return the limited options
+                return limits.start.quarter !== null && limits.start.quarter !== undefined ? quarters.slice(limits.start.quarter) : quarters;
+            }
+            // If the selected year matches the end year limit
+            if (!!limits.end && !!limits.end.year && year === limits.end.year) {
+                // If an end quarter limit exists, return the limited options
+                return limits.end.quarter !== null && limits.end.quarter !== undefined ? quarters.slice(0, limits.end.quarter + 1) : quarters;
+            }
+        }
+        return quarters;
+    }
+}
+MtnaWfGetAvailableQuartersPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfGetAvailableQuartersPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MtnaWfGetAvailableQuartersPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfGetAvailableQuartersPipe, name: "mtnaWfGetQuarters" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfGetAvailableQuartersPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mtnaWfGetQuarters',
+                }]
+        }] });
+
+/** List of default error messages to display */
+const DEFAULT_ERROR_MESSAGES = {
+    email: '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.',
+    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.',
+    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.`,
+};
+const WEB_FORM_CUSTOM_ERRORS = new InjectionToken('mtnaWebFormCustomFormErrors');
+class MtnaWfUIService {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(dialog, errors) {
+        this.dialog = dialog;
+        /** Map of annotation counts for each annotatable item */
+        this.annotations = {};
+        /** Map of components in the MtnaForm */
+        this.components = {};
+        /** Map of item.disabled values that have changed */
+        this.disabledState = {};
+        /** Map of toggler ID's for components that have multiple togglers */
+        this.multipleEnablers = {};
+        // Workaround for: Metadata collected contains an error that will be reported at runtime: Could not resolve type CustomErrors.
+        // see https://stackoverflow.com/questions/49513359/could-not-resolve-type-document-in-angular5/53715642#53715642
+        this.errors = errors;
+    }
+    getDisabledStates() {
+        return Object.assign({}, this.disabledState);
+    }
+    /**
+     * Returns an error message matching the error id
+     * @param errorId Id of the error, to find the associated error message
+     * @param item FormItem to pass to ValidationErrors that are functions. For instance,
+     * this is useful for 'min' & 'max' value limits to display more helpful messages
+     */
+    getError(errorId, item) {
+        // default when no custom message exists
+        let error = DEFAULT_ERROR_MESSAGES[errorId];
+        if (!!this.errors && !!item) {
+            // check for instance specific, via instanceId
+            if (isPresent(this.errors[item.instanceId]) && isPresent(this.errors[item.instanceId][errorId])) {
+                error = this.errors[item.instanceId][errorId];
+                // check for item specific, via itemId
+            }
+            else if (isPresent(this.errors[item.itemId]) && isPresent(this.errors[item.itemId][errorId])) {
+                error = this.errors[item.itemId][errorId];
+            }
+        }
+        return typeof error === 'function' ? error(item) : error;
+    }
+    /**
+     * Get a registered component by intance id.
+     * @param id the instanceId
+     * @returns the {@link FormItemComponent} that represents that ID or undefined if not registered.
+     */
+    getItem(id) {
+        return this.components[id];
+    }
+    /**
+     * Sets the initial map of annotation counts, and/or pushes the new count onto the component observable stream
+     * @param map AnnotatableNumberMap of counts mapped to their annotatableIds
+     */
+    registerAnnotations(map) {
+        for (const id in map) {
+            if (Object.prototype.hasOwnProperty.call(map, id)) {
+                if (!this.annotations[id]) {
+                    this.annotations[id] = new BehaviorSubject(map[id]);
+                }
+                else {
+                    this.annotations[id].next(map[id]);
+                }
+            }
+        }
+    }
+    /**
+     * Maps a component to its items instanceId.
+     * @param component component calling this method, i.e. 'this'
+     */
+    registerSelf(component) {
+        this.components[component.item.instanceId] = component;
+        if (!!component.item.annotatableId && component.item.annotationEnabled) {
+            if (!this.annotations[component.item.annotatableId]) {
+                this.annotations[component.item.annotatableId] = new BehaviorSubject(null);
+            }
+            component.annotations$ = this.annotations[component.item.annotatableId].asObservable();
+        }
+    }
+    /**
+     * Toggles a FormItem's visiblity and enable/disable state
+     *
+     * @param enabledItemIds array of component IDs for enabled items.
+     * @param disabledItemIds array of component IDs for disabled items.
+     * @param enabled Whether the enabledItemIds are enabled.
+     * @param callerId instanceId of the item invoking this function
+     * @param reset Whether to reset the multiple enabler map of the toggled item
+     */
+    toggleFormItems(enabledItemIds, disabledItemIds, enabled, callerId, reset = false) {
+        if ((!enabledItemIds || !enabledItemIds.length) && (!disabledItemIds || !disabledItemIds.length)) {
+            return;
+        }
+        const allIds = [enabledItemIds, disabledItemIds];
+        for (let i = 0; i < allIds.length; i++) {
+            const itemIds = allIds[i];
+            const isEnabled = i === 0 ? enabled : !enabled;
+            for (const id of itemIds) {
+                const component = this.components[id];
+                // If component is registered, toggle it
+                if (component) {
+                    const item = component.item;
+                    const hasMultipleEnablers = isConditionalItem(item) && item.condition ? item.condition.itemIds.length > 1 : false;
+                    // If item has more than 1 enabler, handle multiple enablers
+                    if (hasMultipleEnablers) {
+                        if (reset) {
+                            this.multipleEnablers[item.instanceId] = null;
+                        }
+                        // If a map has not been registered, then build up a map to register
+                        // Should only happen the first time an item is toggled.
+                        if (!this.multipleEnablers[item.instanceId] && isConditionalItem(item)) {
+                            this.multipleEnablers[item.instanceId] = this._registerCurrentEnablers(item);
+                        }
+                        // handle Multiple Enablers
+                        this._handleMultipleEnablers(component, isEnabled, callerId);
+                    }
+                    else {
+                        // Not multiple enablers
+                        this._toggleDisabledStateAndControl(component, isEnabled);
+                    }
+                }
+                else {
+                    console.error('[toggleFormItems] component has not been registerd', id, enabled, callerId);
+                }
+            }
+        }
+    }
+    /**
+     * Generates map of all IDs currently influencing an item.
+     * @param toggledItem item being toggled
+     */
+    _registerCurrentEnablers(toggledItem) {
+        var _a;
+        const enablers = {};
+        const allIds = ((_a = toggledItem.condition) === null || _a === void 0 ? void 0 : _a.itemIds) || [];
+        for (const id of allIds) {
+            const component = this.components[id];
+            if (component) {
+                if (this._isCurrentlyToggling(component, toggledItem.instanceId)) {
+                    enablers[component.item.instanceId] = component.item.instanceId;
+                }
+            }
+            else {
+                console.error('[registerCurrentEnablers] component has not been registered.', id);
+            }
+        }
+        return enablers;
+    }
+    /**
+     * Resets the map of components. This should be called by the form when
+     * it is destroyed.
+     */
+    resetComponentMap() {
+        this.annotations = {};
+        this.components = {};
+        this.disabledState = {};
+        this.multipleEnablers = {};
+    }
+    /**
+     * Determines if an influencer is currently toggling the specified toggledItemId.
+     * @param influencer Item to check whether it's currently influencing the toggledItemId
+     * @param toggledId InstanceId of the item being toggled
+     * @returns Whether the influencer is currently toggling the toggled item
+     */
+    _isCurrentlyToggling(influencer, toggledId) {
+        var _a, _b, _c;
+        const item = influencer.item;
+        // Item has single option property, so check if selected, or item.value is 'true'
+        if (isOptionItemImpl(item)) {
+            return item.option.selected || !!item.value || !!((_a = influencer.control) === null || _a === void 0 ? void 0 : _a.value);
+        }
+        else if (isOptionGroupItemImpl(item)) {
+            const value = (_c = (_b = influencer.control) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : item.value;
+            if (Array.isArray(value)) {
+                // find the index of options that contain the 'toggledId' in their enabledItems
+                // & check if at least 1 is selected, or its 'true' in the value
+                const optionIndexes = item.options.map((o, i) => (o.enabledItems.some((id) => id === toggledId) ? i : null)).filter(isPresent);
+                return optionIndexes.some((i) => !!value[i]);
+            }
+            else if (typeof value === 'string' && value.length) {
+                // if the value is a single value, get the enabling option ids and check for the value in them
+                return item.options.some((o) => o.option.id === value && o.enabledItems.some((id) => id === toggledId));
+            }
+        }
+        return false;
+    }
+    /**
+     * Handles component visibility for a FormItem with multiple enablers in its condition
+     * @param component FormItemComponent being toggled
+     * @param enabled Whether the component is being enabled
+     * @param callerId ID of the caller toggling this component
+     */
+    _handleMultipleEnablers(component, enabled, callerId) {
+        var _a;
+        const item = component.item;
+        const enablers = Object.assign({}, this.multipleEnablers[item.instanceId]);
+        let isEnabled;
+        if (enabled) {
+            enablers[callerId] = callerId;
+            isEnabled =
+                isConditionalItem(item) &&
+                    !!item.condition &&
+                    (!item.condition.allRequired || item.condition.itemIds.every((id) => !!enablers[id]));
+        }
+        else {
+            delete enablers[callerId];
+            isEnabled = !((isConditionalItem(item) && ((_a = item.condition) === null || _a === void 0 ? void 0 : _a.allRequired)) || !Object.keys(enablers).length);
+        }
+        // If enabled === disabled, then the state has changed
+        if (this._isDisabled(item) === isEnabled) {
+            this._toggleDisabledStateAndControl(component, isEnabled);
+        }
+        // set the new enabler map
+        this.multipleEnablers[item.instanceId] = enablers;
+    }
+    /**
+     * Enables or disables the control on a FormItemComponent
+     * @param component FormItemComponent to enable or disable its control
+     * @param enabled whether to enable the control
+     */
+    _toggleControlState(component, enabled) {
+        var _a, _b, _c;
+        if (enabled && !((_a = component.control) === null || _a === void 0 ? void 0 : _a.enabled)) {
+            // Enable the control if it isn't already
+            if (component.control instanceof FormGroup) {
+                this._enableIndividualControls(component);
+            }
+            else {
+                (_b = component.control) === null || _b === void 0 ? void 0 : _b.enable();
+            }
+        }
+        else if (!enabled && ((_c = component.control) === null || _c === void 0 ? void 0 : _c.enabled)) {
+            // Disable the control if it isn't already
+            component.control.disable();
+        }
+    }
+    /**
+     * Toggles both the component visiblity and the control's enable/disable status
+     * @param component FormItemComponent to show or hide and enable or disable
+     * @param enabled whether to show the component and whether to enable the component
+     */
+    _toggleDisabledStateAndControl(component, enabled) {
+        this.disabledState[component.item.instanceId] = !enabled;
+        this._toggleControlState(component, enabled);
+        if (isConditionalItem(component.item) && component.item.hideOnDisable) {
+            component.visible = enabled;
+        }
+    }
+    /**
+     * Enables controls individually using recursion.
+     * FormGroups should only exist for items with 'items' arrays, or
+     * if the component is a BaseParentItemControl
+     * @param comp FormItemComponent
+     */
+    _enableIndividualControls(comp) {
+        const group = comp.control;
+        if (isOptionItemImpl(comp.item) || isOptionGroupItemImpl(comp.item)) {
+            const map = comp.item.optionItemMap;
+            const self = group.get(comp.item.instanceId);
+            self === null || self === void 0 ? void 0 : self.enable();
+            for (const optionId in map) {
+                if (Object.prototype.hasOwnProperty.call(map, optionId)) {
+                    const childComp = this.components[map[optionId].instanceId];
+                    if (!this._isDisabled(childComp.item)) {
+                        this._toggleControlState(childComp, true);
+                    }
+                }
+            }
+        }
+        else if (isType(comp.item, 'items') && comp.item.items.length) {
+            // Item must have 'items' array
+            for (const item of comp.item.items) {
+                const childComp = this.components[item.instanceId];
+                if (!this._isDisabled(item)) {
+                    this._toggleControlState(childComp, true);
+                }
+            }
+        }
+        group.updateValueAndValidity();
+    }
+    /**
+     * Determines if a component is disabled. Prioritizes the disabledState value,
+     * if it exists, otherwise returns the item's previous disabled value
+     * @param item item to check for its disabled state
+     */
+    _isDisabled(item) {
+        const existsInDisabledStatMap = isPresent(this.disabledState[item.instanceId]);
+        if (!existsInDisabledStatMap) {
+            return isConditionalItem(item) ? item.disabled : false;
+        }
+        else {
+            return this.disabledState[item.instanceId];
+        }
+    }
+}
+MtnaWfUIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfUIService, deps: [{ token: i1.MatDialog }, { token: WEB_FORM_CUSTOM_ERRORS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+MtnaWfUIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfUIService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfUIService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [WEB_FORM_CUSTOM_ERRORS]
+                }] }]; } });
+
+class MtnaGetFormControlErrorPipe {
+    constructor(uiService) {
+        this.uiService = uiService;
+    }
+    transform(error, item) {
+        return this.uiService.getError(error.key, item) || error.value;
+    }
+}
+MtnaGetFormControlErrorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaGetFormControlErrorPipe, deps: [{ token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Pipe });
+MtnaGetFormControlErrorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaGetFormControlErrorPipe, name: "mtnaWfGetControlError" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaGetFormControlErrorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mtnaWfGetControlError',
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfUIService }]; } });
+
+class GetListIconPipe {
+    transform(header) {
+        if (!header) {
+            return null;
+        }
+        header = header.toUpperCase();
+        if (header.includes('PROJECT') ||
+            header.includes('REQUEST') ||
+            header.includes('ANALYTICAL APPROACH') ||
+            header.includes('JUSTIFICATION FOR USE')) {
+            return 'assignment';
+        }
+        if (header.includes('DESCRIPTION')) {
+            return 'subject';
+        }
+        if (header.includes('EMAIL')) {
+            return 'alternate_email';
+        }
+        if (header.includes('ZIP CODE')) {
+            return 'mail';
+        }
+        if (header.includes('ORGANIZATION')) {
+            return 'business';
+        }
+        if (header.includes('PHONE')) {
+            return 'local_phone';
+        }
+        if (header.includes('ADDRESS')) {
+            return 'place';
+        }
+        if (header.includes('NAME') || header.includes('TITLE')) {
+            return 'person';
+        }
+        if (header.includes('CITY')) {
+            return 'location_city';
+        }
+        if (header.includes('STATE')) {
+            return 'map';
+        }
+        return null;
+    }
+}
+GetListIconPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetListIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+GetListIconPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetListIconPipe, name: "getListIcon" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GetListIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getListIcon',
+                }]
+        }] });
+
+class MtnaWfGetSelectedOptionNamePipe {
+    transform(id, options) {
+        if (!options || !id) {
+            return 'N/A';
+        }
+        const foundOption = options.find((o) => o.option.id === id);
+        return foundOption ? foundOption.option.name : 'N/A';
+    }
+}
+MtnaWfGetSelectedOptionNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfGetSelectedOptionNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MtnaWfGetSelectedOptionNamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfGetSelectedOptionNamePipe, name: "mtnaWfGetSelectedOptionName" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfGetSelectedOptionNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mtnaWfGetSelectedOptionName',
+                }]
+        }] });
+
+/**
+ * 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;
+    }
+}
+MtnaWfItemsWithValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfItemsWithValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MtnaWfItemsWithValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfItemsWithValuePipe, name: "mtnaWfItemsWithValue", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfItemsWithValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mtnaWfItemsWithValue',
+                    pure: false,
+                }]
+        }] });
+
+class MtnaWfSanitizeHtmlPipe {
+    constructor(_sanitizer) {
+        this._sanitizer = _sanitizer;
+    }
+    transform(v) {
+        if (!v) {
+            return '';
+        }
+        return this._sanitizer.bypassSecurityTrustHtml(v);
+    }
+}
+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$1.DomSanitizer }]; } });
+
+/** Typeguard for {@link FormGroup}. Determines if something is a FormGroup. */
+function isFormGroup(something) {
+    return isObject(something) && isType(something, 'controls') && isObject(something.controls);
+}
+
+/**
+ * Asserts whether the given control is the narrower FormGroup type. If so, coerces the FormGroup type.
+ * Otherwise, returns null.
+ *
+ * @example
+ * <form [formGroup]="group | mtnaWfCoerceFormGroup"></form>
+ *
+ * <form *ngIf="controlContainer.control | mtnaWfCoerceFormGroup as group" [formGroup]="group"></form>
+ *
+ * @author Chase Moore <chase.moore@mtna.us>
+ */
+class MtnaWfCoerceFormGroupPipe {
+    /**
+     * @param control control to be coerced into a FormGroup
+     * @returns the control typed as FormGroup if possible; else null
+     */
+    transform(control) {
+        if (isFormGroup(control)) {
+            return control;
+        }
+        return null;
+    }
+}
+MtnaWfCoerceFormGroupPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCoerceFormGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MtnaWfCoerceFormGroupPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCoerceFormGroupPipe, name: "mtnaWfCoerceFormGroup" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCoerceFormGroupPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mtnaWfCoerceFormGroup',
+                }]
+        }] });
+
+const EXPORTED_DECLARATIONS = [
+    CoerceDateItemPipe,
+    DateQuarterPipe,
+    GetAutoCompletePipe,
+    GetListIconPipe,
+    GetObjectTypePipe,
+    MtnaGetFormControlErrorPipe,
+    MtnaWfCoerceFormGroupPipe,
+    MtnaWfGetAvailableQuartersPipe,
+    MtnaWfGetSelectedOptionNamePipe,
+    MtnaWfItemsWithValuePipe,
+    MtnaWfSanitizeHtmlPipe,
+];
+class PipesModule {
+}
+PipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, declarations: [CoerceDateItemPipe,
+        DateQuarterPipe,
+        GetAutoCompletePipe,
+        GetListIconPipe,
+        GetObjectTypePipe,
+        MtnaGetFormControlErrorPipe,
+        MtnaWfCoerceFormGroupPipe,
+        MtnaWfGetAvailableQuartersPipe,
+        MtnaWfGetSelectedOptionNamePipe,
+        MtnaWfItemsWithValuePipe,
+        MtnaWfSanitizeHtmlPipe], exports: [CoerceDateItemPipe,
+        DateQuarterPipe,
+        GetAutoCompletePipe,
+        GetListIconPipe,
+        GetObjectTypePipe,
+        MtnaGetFormControlErrorPipe,
+        MtnaWfCoerceFormGroupPipe,
+        MtnaWfGetAvailableQuartersPipe,
+        MtnaWfGetSelectedOptionNamePipe,
+        MtnaWfItemsWithValuePipe,
+        MtnaWfSanitizeHtmlPipe] });
+PipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, providers: [GetObjectTypePipe] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: EXPORTED_DECLARATIONS,
+                    providers: [GetObjectTypePipe],
+                    exports: EXPORTED_DECLARATIONS,
+                }]
+        }] });
+
+class MtnaWfApiService {
+    constructor(apiConfig, http) {
+        this.apiConfig = apiConfig;
+        this.http = http;
+        this.API_URL = `${this.apiConfig.baseUrl}/api`;
+        this.FORM_URL = `${this.API_URL}/form`;
+        this.TEMPLATE_URL = `${this.API_URL}/template`;
+        this.NEW_TEMPLATE_URL = `${this.TEMPLATE_URL}/new`;
+        this.NEW_SECTION_URL = `${this.TEMPLATE_URL}/section`;
+        this.ITEMS_URL = `${this.TEMPLATE_URL}/items`;
+        this.ITEM_INSTANCE_URL = `${this.TEMPLATE_URL}/item`;
+        this.TEMPLATE_SAVE_URL = `${this.TEMPLATE_URL}/save`;
+        this.TEMPLATE_DELETE_URL = `${this.TEMPLATE_URL}/delete`;
+        this.ALL_TEMPLATES_URL = `${this.API_URL}/templates`;
+    }
+    /**
+     * Download a web form
+     * @param form the web form pojo to download
+     * @returns Full HttlReponse with the Blob as the body
+     */
+    downloadForm(form) {
+        return this.http.post(`${this.FORM_URL}/download`, form, { observe: 'response', responseType: 'blob' });
+    }
+    /**
+     * Returns a new repeatable FormItem
+     * @param formInstanceId template ID of the mtna form
+     * @param itemId repeatableTemplateId of the requesting RepeatableItem
+     */
+    getRepeatableItem(formInstanceId, itemId) {
+        return this.http.get(`${this.FORM_URL}/${formInstanceId}/new/item/${itemId}`);
+    }
+    getNewTemplate() {
+        return this.http.get(this.NEW_TEMPLATE_URL);
+    }
+    getAllTemplate() {
+        return this.http.get(this.ALL_TEMPLATES_URL);
+    }
+    getNewSection() {
+        return this.http.get(this.NEW_SECTION_URL);
+    }
+    getItems() {
+        return this.http.get(this.ITEMS_URL);
+    }
+    getTemplateItem(id) {
+        return this.http.get(`${this.ITEM_INSTANCE_URL}?id=${id}`);
+    }
+    saveTemplate() {
+        return this.http.get(this.TEMPLATE_SAVE_URL);
+    }
+    getDeleteTemplate() {
+        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$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,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MTNA_WF_API_TOKEN]
+                }] }, { type: i1$2.HttpClient }]; } });
+
+const MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME = 'formItemValidationResult';
+/**
+ * Valitator function that will check the root level {@link FormValidationResult} on
+ * the MTNA {@link Form} and see if there are any errors for a particular control.
+ *
+ * @param instanceId The instanceId of the form item for a particular control
+ * @param managerService The manager service that holds a reference to the MTNA {@link Form} and it's {@link FormValidationResult}
+ * @returns A validator function that will throw an error if there is a matching {@link FormItemValidationResult} for the specified item.
+ */
+function validationResultValidator(instanceId, managerService) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    return (control) => {
+        const formItemValidationResult = managerService.getFormItemValidationResults()[instanceId];
+        return formItemValidationResult
+            ? { [MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME]: formItemValidationResult.validationMessage }
+            : null;
+    };
+}
+
+/**
+ * Custom {@link ErrorStateMatcher} that will immediately show {@link FormValidationResult} errors.
+ * Theses errors are calcualted on the server and need to always show.
+ * Regular form validation will use the default error matcher strategy.
+ */
+class MtnaWfInstantValidationResultErrorStateMatcher extends ErrorStateMatcher {
+    isErrorState(control, form) {
+        const hasValidationResultError = isKey(control === null || control === void 0 ? void 0 : control.errors, MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME);
+        return hasValidationResultError || super.isErrorState(control, form);
+    }
+}
+MtnaWfInstantValidationResultErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfInstantValidationResultErrorStateMatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+MtnaWfInstantValidationResultErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfInstantValidationResultErrorStateMatcher, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfInstantValidationResultErrorStateMatcher, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** RegEx to validate number items contain only negative, digits, or decimals */
+const numOnlyWithoutComma = /^-?\d+(\.\d*)?$/;
+/** RegEx to validate number items contain only negative, digits, or decimals in comma format */
+const numOnlyWithComma = /^-?\d{1,3}(,\d{3})*(\.\d*)?$/;
+/** RegEx to validate 'positive only' item conains non-negative characters */
+const posOnly = /^[^-]*$/;
+/** RegEx to validate 'whole number' item contains only negative, digits, or comma format */
+const wholeNumber = /^-?\d+(,\d{3})*$/;
+//#region FormControl Generation
+/**
+ * Generates a new FormGroup with FormControls & possible nested FormGroups
+ * @param formItem WebForm, Section, Group, or RepeatableItem used to create a FormGroup
+ * @param customFormItemConditional boolean function for any custom FormItems
+ * @param customControlGenerator FormControl generator function for any custom FormItems
+ */
+function serializeFormItems(formItem, managerService, customFormItemConditional = () => false, customControlGenerator) {
+    const form = {};
+    for (const item of formItem.items) {
+        const control = determineSerializeFunctionToUse(item, managerService, customFormItemConditional, customControlGenerator);
+        if (control) {
+            form[item.instanceId] = control;
+        }
+    }
+    const required = isForm(formItem) ? true : formItem.required;
+    const group = required ? new FormGroup(form, Validators.required) : new FormGroup(form);
+    if ('disabled' in formItem && formItem.disabled) {
+        group.disable({ onlySelf: true, emitEvent: false });
+    }
+    return group;
+}
+/**
+ * Returns a tailored FormControl with validators for a FormItem
+ * @param formItem The FormItem requesting a tailored FormControl
+ * @internal Creating the form control and then calling setValidators force a validation pass,
+ * see https://github.com/angular/angular/issues/19622#issuecomment-341547884
+ * Better to gather the validators and put them in the constructor of the form control.
+ */
+function serializeFormItem(formItem, managerService) {
+    const validators = new Array(validationResultValidator(formItem.instanceId, managerService));
+    if (formItem.required) {
+        validators.push(Validators.required);
+    }
+    switch (formItem.itemId) {
+        case CHECKBOX_ITEM_ID: {
+            const checkboxItem = formItem;
+            const value = checkboxItem.value || [];
+            validators.push(numCheckboxesValidator('MIN', checkboxItem.minSelections), numCheckboxesValidator('MAX', checkboxItem.maxSelections));
+            const arr = new FormArray(checkboxItem.options.map((o) => new FormControl({ value: o.selected || value.some((v) => v === o.option.id), disabled: checkboxItem.disabled })), Validators.compose(validators));
+            return arr;
+        }
+        case DECIMAL_ANSWER_ITEM_ID:
+        case WHOLE_NUMBER_ANSWER_ITEM_ID: {
+            const item = formItem;
+            validators.push(numericalValueCheck());
+            if (isWholeNumberItem(item)) {
+                validators.push(wholeNumberPattern());
+            }
+            if (item.positiveOnly) {
+                validators.push(positiveNumberPattern());
+            }
+            if (!isNullOrUndefined(item.minValue)) {
+                validators.push(numValueLimit('min', item.minValue));
+            }
+            if (!isNullOrUndefined(item.maxValue)) {
+                validators.push(numValueLimit('max', item.maxValue));
+            }
+            break;
+        }
+        case PARAGRAPH_ANSWER_ITEM_ID:
+        case SHORT_ANSWER_ITEM_ID: {
+            const shortAnswerItem = formItem;
+            validators.push(...getNumericValidator('minLength', shortAnswerItem.minCharCount));
+            validators.push(...getNumericValidator('maxLength', shortAnswerItem.maxCharCount));
+            break;
+        }
+        default:
+            break;
+    }
+    return new FormControl({ value: formItem.value, disabled: !!formItem.disabled }, Validators.compose(validators));
+}
+/**
+ * Builds controls for any form items nested inside a parent items options
+ * @param formItem The FormItem with an 'options' property
+ * @param customFormItemConditional conditional function from parent 'serializeFormItems' function
+ * @param customControlGenerator FormControl generator from parent 'serializeFormItems' function
+ */
+function serializeNestedOptionFormItems(formItem, managerService, customFormItemConditional = () => false, customControlGenerator) {
+    const controls = {};
+    for (const id in formItem.optionItemMap) {
+        if (Object.prototype.hasOwnProperty.call(formItem.optionItemMap, id)) {
+            const subItem = formItem.optionItemMap[id];
+            const control = determineSerializeFunctionToUse(subItem, managerService, customFormItemConditional, customControlGenerator);
+            if (control) {
+                controls[subItem.instanceId] = control;
+            }
+        }
+    }
+    controls[formItem.instanceId] = serializeFormItem(formItem, managerService);
+    const group = formItem.required ? new FormGroup(controls, Validators.required) : new FormGroup(controls);
+    if (formItem.disabled) {
+        group.disable({ onlySelf: true, emitEvent: false });
+    }
+    return group;
+}
+/**
+ * Build FormControls for a TableItem
+ * @param item TableItem requiring FormControls
+ * @param customFormItemConditional Conditional function for custom any FormItems
+ * @param customControlGenerator FormControl generator for custom any FormItems
+ */
+function serializeTableItem(item, managerService, customFormItemConditional = () => false, customControlGenerator) {
+    const tableControl = {};
+    for (const row of item.tableRows) {
+        for (const rowItem of row.items.filter((i) => !!i)) {
+            const control = determineSerializeFunctionToUse(rowItem, managerService, customFormItemConditional, customControlGenerator);
+            if (control) {
+                tableControl[rowItem.instanceId] = control;
+            }
+        }
+    }
+    const group = item.required ? new FormGroup(tableControl, Validators.required) : new FormGroup(tableControl);
+    if (item.disabled) {
+        group.disable({ onlySelf: true, emitEvent: false });
+    }
+    return group;
+}
+/**
+ * Returns the appropriate function for the caller to use.
+ *
+ * @param formItem FormItem requiring serialization
+ * @param customFormItemConditional Conditional for a custom FormItem
+ * @param customControlGenerator Serializer for a custom FormItem
+ */
+function determineSerializeFunctionToUse(formItem, managerService, customFormItemConditional = () => false, customControlGenerator) {
+    if (isForm(formItem) || isRepeatableItem(formItem) || isSection(formItem) || isFormItemGroupImpl(formItem)) {
+        return serializeFormItems(formItem, managerService, customFormItemConditional, customControlGenerator);
+    }
+    else if (isTableItem(formItem)) {
+        return serializeTableItem(formItem, managerService, customFormItemConditional, customControlGenerator);
+    }
+    else if (customFormItemConditional(formItem) && !!customControlGenerator) {
+        return customControlGenerator(formItem);
+    }
+    else if (hasNestedFormItems(formItem)) {
+        return serializeNestedOptionFormItems(formItem, managerService);
+    }
+    else if (isOffsetDateRangeItem(formItem) || isYearQuarterRangeItem(formItem)) {
+        return serializeRangeItem(formItem);
+    }
+    else {
+        return serializeFormItem(formItem, managerService);
+    }
+}
+/**
+ * Builds a FormGroup for a range item
+ * @param formItem FormItem for a DateRange of Date | YearQuarter
+ */
+function serializeRangeItem(formItem) {
+    const validators = new Array();
+    if (formItem.required) {
+        validators.push(Validators.required);
+    }
+    const group = new FormGroup({
+        start: new FormControl(formItem.value ? formItem.value.start : null),
+        end: new FormControl(formItem.value ? formItem.value.end : null),
+    }, Validators.compose(validators));
+    if (formItem.disabled) {
+        group.disable({ onlySelf: true, emitEvent: false });
+    }
+    return group;
+}
+/**
+ * Returns a Validator with a numeric value for a FormItem;
+ * Returns as an array of length 1 or 0
+ * @param param0 `type` - type of validator, e.g. 'minLength';
+ * `value` - parameter for the validator, e.g. 'minLength(value)'
+ */
+function getNumericValidator(type, value) {
+    return !isNullOrUndefined(value) ? [Validators[type](value)] : [];
+}
+//#endregion
+//#region MtnaForm value insertion
+/**
+ * Returns an array of Formitems with new values inserted.
+ *
+ * @param section The old Form or Form Section
+ * @param ngFormValue ngForm JSON values
+ * @param customFormItemConditional boolean function for any custom FormItems
+ * @param customFormItemBuilder function to handle custom FormItems
+ * @returns new FormItem array
+ */
+function insertFormItemValues(section, ngFormValue, disabledState, customFormItemConditional = () => false, customFormItemBuilder) {
+    return section.items
+        .map((item) => determineInsertFunctionToUse(item, ngFormValue[item.instanceId], disabledState, customFormItemConditional, customFormItemBuilder, section))
+        .filter(isPresent);
+}
+/**
+ * Returns a copied TableItem, with each row FormItem having new inserted values.
+ * @param item TableItem to insert values
+ * @param ngFormValue ngForm value of the TableItem
+ * @param customFormItemConditional boolean function for any custom FormItem
+ * @param customFormItemBuilder function to handle custom FormItem value insertion
+ */
+function insertTableItemValues(item, ngFormValue, disabledState, customFormItemConditional = () => false, customFormItemBuilder) {
+    const tableRows = item.tableRows.map((row) => (Object.assign(Object.assign({}, row), { items: row.items
+            .filter(isPresent)
+            .map((formItem) => {
+            return determineInsertFunctionToUse(formItem, ngFormValue[formItem.instanceId], disabledState, customFormItemConditional, customFormItemBuilder);
+        })
+            .filter(isPresent) })));
+    return Object.assign(Object.assign({}, item), { tableRows, disabled: _isDisabled(item, disabledState) });
+}
+/**
+ * Returns a new FormItem after determining the appropriate function to use.
+ * @param formItem FormItem requiring value insertion
+ * @param ngFormValue ngForm value
+ * @param customFormItemConditional Conditional for a custom FormItem
+ * @param customFormItemBuilder Value insertion function for a custom FormItem
+ * @param disabledState Map of items' disabled state
+ * @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)) {
+        const items = insertFormItemValues(formItem, ngFormValue, disabledState, customFormItemConditional, customFormItemBuilder);
+        return Object.assign(Object.assign({}, formItem), { items, disabled: _isDisabled(formItem, disabledState) });
+    }
+    else if (isTableItem(formItem)) {
+        return insertTableItemValues(formItem, ngFormValue, disabledState, customFormItemConditional, customFormItemBuilder);
+    }
+    else if (customFormItemConditional(formItem) && !!customFormItemBuilder) {
+        return customFormItemBuilder(parent, formItem, ngFormValue, disabledState);
+    }
+    else if (hasNestedFormItems(formItem)) {
+        return insertNestedFormItemValues(formItem, ngFormValue, disabledState, customFormItemConditional, customFormItemBuilder);
+    }
+    else if (isOffsetDateRangeItem(formItem) || isYearQuarterRangeItem(formItem)) {
+        const start = isType(ngFormValue, 'start') ? ngFormValue.start : undefined;
+        const end = isType(ngFormValue, 'end') ? ngFormValue.end : undefined;
+        return Object.assign(Object.assign({}, formItem), { value: { start, end }, disabled: _isDisabled(formItem, disabledState) });
+    }
+    else {
+        return Object.assign(Object.assign({}, formItem), { value: findItemValue(formItem, ngFormValue), disabled: _isDisabled(formItem, disabledState) });
+    }
+}
+/**
+ * Returns ngForm value for a FormItem.
+ *
+ * @param formItem FormItem requiring a value
+ * @param ngFormValue ngForm value
+ */
+function findItemValue(formItem, ngFormValue) {
+    const itemId = formItem.itemId.split('.').pop();
+    switch (itemId === null || itemId === void 0 ? void 0 : itemId.toUpperCase()) {
+        // FIXME: can we put these IDs in constants and refer to them instead?
+        case 'DATEITEM':
+            return !!ngFormValue && typeof ngFormValue !== 'string' ? ngFormValue.toISOString() : ngFormValue;
+        case 'CHECKBOXITEM': {
+            if (!isNullOrUndefined(ngFormValue) && Array.isArray(ngFormValue)) {
+                const arr = ngFormValue;
+                return formItem.options.filter((o, index) => !!arr[index]).map((o) => o.option.id);
+            }
+            return [];
+        }
+        default:
+            return ngFormValue;
+    }
+}
+function insertNestedFormItemValues(formItem, ngFormValue, disabledState, customFormItemConditional = () => false, customFormItemBuilder) {
+    const optionItemMap = {};
+    for (const id in formItem.optionItemMap) {
+        if (Object.prototype.hasOwnProperty.call(formItem.optionItemMap, id)) {
+            const subItem = formItem.optionItemMap[id];
+            optionItemMap[id] = determineInsertFunctionToUse(subItem, ngFormValue[subItem.instanceId], disabledState, customFormItemConditional, customFormItemBuilder);
+        }
+    }
+    return Object.assign(Object.assign({}, formItem), { optionItemMap, value: findItemValue(formItem, ngFormValue[formItem.instanceId]), disabled: _isDisabled(formItem, disabledState) });
+}
+//#endregion
+/**
+ * Determines if a FormItem has an OptionItemMap with at least 1 item, which require their own FormControl(s)
+ * @param formItem FormItem to check
+ */
+function hasNestedFormItems(formItem) {
+    return isType(formItem, 'optionItemMap') && Object.keys(formItem.optionItemMap).length > 0;
+}
+/**
+ * Function for validating min/max selections limits
+ * @param typeCheck Which limit to validate. 'MIN' | 'MAX'
+ * @param limit upper or lower limit to check against
+ */
+function numCheckboxesValidator(typeCheck, limit = 1) {
+    return (control) => {
+        let totalSelected = 0;
+        if (isFormArray(control)) {
+            totalSelected = control.controls.map((c) => c.value).reduce((total, next) => (next ? total + next : total), 0);
+        }
+        switch (typeCheck) {
+            case 'MIN':
+                return totalSelected >= limit ? null : { minSelected: `Select at least ${limit}` };
+            case 'MAX':
+                return totalSelected <= limit ? null : { maxSelected: `Select no more than ${limit}` };
+        }
+    };
+}
+function isFormArray(control) {
+    return isType(control, 'controls');
+}
+function _isDisabled(item, disabledState) {
+    const disabled = disabledState[item.instanceId];
+    return isNullOrUndefined(disabled) ? item.disabled : disabled;
+}
+function wholeNumberPattern() {
+    return (control) => {
+        if (isNullOrUndefined(control.value) || isEmptyString(control.value)) {
+            return null;
+        }
+        return wholeNumber.test(control.value) ? null : { wholeNumber: true };
+    };
+}
+function numericalValueCheck() {
+    return (control) => {
+        if (isNullOrUndefined(control.value) || isEmptyString(control.value)) {
+            return null;
+        }
+        return numOnlyWithoutComma.test(control.value) || numOnlyWithComma.test(control.value) ? null : { nonDigit: true };
+    };
+}
+function positiveNumberPattern() {
+    return (control) => {
+        if (isNullOrUndefined(control.value) || isEmptyString(control.value)) {
+            return null;
+        }
+        return posOnly.test(control.value) ? null : { positive: true };
+    };
+}
+/**
+ * This works as a combination of the angular 'min'/'max' Validators. Using the built-in validators
+ * appears to take precedence over custom validators, regardless of order in the array. Using this function
+ * ensures validators set before this one maintain priority. For instance, the input value failing numerical validation
+ * is more important than the value being within min-max range.
+ */
+function numValueLimit(type, limit) {
+    return (control) => {
+        if (isNullOrUndefined(control.value) || isEmptyString(control.value)) {
+            return null;
+        }
+        const value = parseFloat(control.value);
+        return !isNaN(value) && (type === 'min' ? value < limit : value > limit) ? { [type]: { [type]: limit, actual: control.value } } : null;
+    };
+}
+function isEmptyString(value) {
+    return typeof value === 'string' && !value.length;
+}
+
+var serializerUtil = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    serializeFormItems: serializeFormItems,
+    serializeFormItem: serializeFormItem,
+    serializeNestedOptionFormItems: serializeNestedOptionFormItems,
+    serializeTableItem: serializeTableItem,
+    determineSerializeFunctionToUse: determineSerializeFunctionToUse,
+    serializeRangeItem: serializeRangeItem,
+    insertFormItemValues: insertFormItemValues,
+    insertTableItemValues: insertTableItemValues,
+    hasNestedFormItems: hasNestedFormItems
+});
+
+/**
+ * Recursively find a form control by name in a form group.
+ * Depth first search down the tree of form groups to find a control.
+ *
+ * @note This will only work if the entire form has unique form control names.
+ * @param name The unique name of the form cotrol to find.
+ * @param group The {@link FormGroup} to search through.
+ * @returns the found control or null
+ */
+function findFormControl(name, group) {
+    for (const key in group.controls) {
+        if (Object.prototype.hasOwnProperty.call(group.controls, key)) {
+            const control = group.controls[key];
+            if (key === name) {
+                return control;
+            }
+            // Recurse down if it's a FormGroup
+            if (isFormGroup(control)) {
+                const found = findFormControl(name, control);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+    }
+    return null;
+}
+
+/**
+ * Recursively find a {@link FormItem} by instanceId in a {@link Form}.
+ * Depth first search down the tree of {@link FormItemGroup} to find an item.
+ *
+ * @param instanceId The unique ID of the {@link FormItem} to find.
+ * @param group The {@link Form} or {@link FormItemGroup} to search through.
+ * @returns the found {@link FormItem} or `null`
+ */
+function findFormItem(instanceId, group) {
+    for (const item of group.items) {
+        if (item.instanceId === instanceId) {
+            return item;
+        }
+        // If it's a FormGroup, search through it's children
+        if (isType(item, 'items')) {
+            const found = findFormItem(instanceId, item);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    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';
+    }
+}
+
+/**
+ * Flattens formStepGroup.steps and combines all steps into single array
+ * @param steps Array<FormStep | FormStepGroup>
+ * @returns FormStep[] array of the steps and children of step groups
+ */
+function flattenSteps(steps) {
+    return steps.reduce((a, b) => a.concat(isFormStepGroup(b) ? b.steps : b), new Array());
+}
+
+function generateFormSteps(items) {
+    // Build up an array of steps based on the form items
+    return items.reduce((newArray, item) => {
+        // The number of non-group steps, used to number the top level steps
+        const count = newArray.filter((step) => !isFormStepGroup(step)).length;
+        if (isSection(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));
+        }
+        else if (isDataCubeItem(item)) {
+            // 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)
+                .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));
+        }
+        return newArray;
+    }, []);
+}
+
+/**
+ * Update a {@link FormStep}'s `status`.
+ * The server side form validation errors will trump the provided `status`.
+ *
+ * @param instanceId the instanceId of the step to update, otherwise return the original step
+ * @param step  the step to check
+ * @param status the new status to apply to the step
+ * @param form the containing form
+ * @returns an updated step with the correct status
+ */
+function updateStepStatus(instanceId, step, status, form) {
+    var _a;
+    if (instanceId !== step.instanceId) {
+        // These aren't the droids you're looking for.
+        // Return unmodified step.
+        return step;
+    }
+    // A server validation error will trump the provided status
+    if ((_a = form === null || form === void 0 ? void 0 : form.validationResult) === null || _a === void 0 ? void 0 : _a.formItemValidationResults.length) {
+        // Get the FormGroup that represents the step
+        const group = findFormItem(step.instanceId, form);
+        if (isType(group, 'items')) {
+            for (const error of form.validationResult.formItemValidationResults) {
+                const itemWithError = findFormItem(error.id, group);
+                // If the invalid item is within the step group,
+                // show an error state
+                if (itemWithError) {
+                    return Object.assign(Object.assign({}, step), { status: 'ERROR' });
+                }
+            }
+        }
+    }
+    // There were no server side validation errors, just update the status
+    return Object.assign(Object.assign({}, step), { status });
+}
+
+class MtnaWfNgFormService {
+    constructor() {
+        this.unsavedChanges$ = new BehaviorSubject(false);
+    }
+    /**
+     * Informs a caller when the MtnaForm is dirty and has unsaved changes.
+     */
+    get unsavedChanges() {
+        return this.unsavedChanges$.asObservable();
+    }
+    /**
+     * Add a control from the ngForm
+     * @param controlId id of the control being added
+     * @param parentIds array of ids representing the path to the parent control
+     * @param newControl the new form control to be added
+     */
+    addControl(controlId, parentIds, newControl) {
+        if (!this.ngForm) {
+            return;
+        }
+        const parentControl = this.ngForm.get(parentIds);
+        parentControl.addControl(controlId, newControl);
+        parentControl.markAsTouched();
+        parentControl.markAsDirty();
+        this.forceUnsavedChange();
+    }
+    /**
+     * Remove a control from the ngForm.
+     *
+     * @param controlId is of the control to remove
+     * @param parentIds rray of ids representing the path to the parent control
+     */
+    removeControl(controlId, parentIds) {
+        if (!this.ngForm) {
+            return;
+        }
+        const parentControl = this.ngForm.get(parentIds);
+        parentControl.removeControl(controlId);
+        parentControl.markAsTouched();
+        parentControl.markAsDirty();
+        this.forceUnsavedChange();
+    }
+    /**
+     * Get the form if it exists
+     * @returns the angular form or null
+     */
+    getForm() {
+        return this.ngForm;
+    }
+    /**
+     * Returns a JSON representation of form values
+     */
+    getFormValue() {
+        var _a;
+        // This includes values for disabled controls.
+        // We loop through MtnaForm to insert values,
+        // so we need the disabled controls to ensure no info loss.
+        return (_a = this.ngForm) === null || _a === void 0 ? void 0 : _a.getRawValue();
+    }
+    /**
+     * @returns Whether a form has been set on this service
+     */
+    hasForm() {
+        return !!this.ngForm;
+    }
+    /**
+     * @returns Whether the form is dirty.
+     */
+    isFormDirty() {
+        return !!this.ngForm && this.ngForm.dirty;
+    }
+    /**
+     * Unsubscribes from value changes & sets the ngForm to null.
+     * Should be called when any component using an MtnaForm is destroyed.
+     */
+    disposeForm() {
+        this.unsubscribeValueChanges();
+        this.ngForm = undefined;
+    }
+    /**
+     * Forces the unsavedChanges observable to emit true.
+     * Use with care, one example is when repeatable items are added/removed from the form.
+     */
+    forceUnsavedChange() {
+        this.unsubscribeValueChanges();
+        this.unsavedChanges$.next(true);
+    }
+    /**
+     * Marks ngForm as pristine & untouched.
+     */
+    markAsPristineAndUntouched() {
+        if (this.ngForm) {
+            this.ngForm.markAsPristine();
+            this.ngForm.markAsUntouched();
+            this.unsavedChanges$.next(this.ngForm.dirty);
+            this.observeNgFormChanges();
+        }
+    }
+    /**
+     * Resets the ngForm.
+     */
+    resetForm() {
+        if (this.ngForm) {
+            this.ngForm.reset();
+            this.unsavedChanges$.next(this.ngForm.dirty);
+            this.observeNgFormChanges();
+        }
+    }
+    /**
+     * Sets a FormGroup on the service so an external source may observe changes.
+     * @param ngForm FormGroup to be registered.
+     */
+    setForm(ngForm) {
+        this.ngForm = ngForm;
+        this.unsavedChanges$.next(this.ngForm.dirty);
+        if (this.ngForm.pristine) {
+            this.observeNgFormChanges();
+        }
+    }
+    /**
+     * Subscribes to ngForm status changes & updates the unsavedChanges observable
+     */
+    observeNgFormChanges() {
+        this.unsubscribeValueChanges();
+        if (this.ngForm) {
+            this.valueChangeSubscription = this.ngForm.valueChanges
+                .pipe(skipWhile(() => (this.ngForm ? this.ngForm.pristine : true)), take(1))
+                .subscribe(() => { var _a; return this.unsavedChanges$.next((_a = this.ngForm) === null || _a === void 0 ? void 0 : _a.dirty); });
+        }
+    }
+    /**
+     * Removes the ngForm status change subscription.
+     */
+    unsubscribeValueChanges() {
+        if (!!this.valueChangeSubscription && !this.valueChangeSubscription.closed) {
+            this.valueChangeSubscription.unsubscribe();
+        }
+    }
+}
+MtnaWfNgFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfNgFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MtnaWfNgFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfNgFormService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfNgFormService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Allows a caller to (de)serializae an MtnaForm. It contains the determining logic for returning specific form controls
+ * and deserializing new MtnaForms from the reactive values, as well as registering custom Form Items & functions.
+ *
+ * @export
+ */
+class MtnaWfManagerService {
+    constructor(apiService, ngFormManager, uiService) {
+        this.apiService = apiService;
+        this.ngFormManager = ngFormManager;
+        this.uiService = uiService;
+        this.components = new Map();
+        this.formChange$ = new Subject();
+        /** A map of all {@link FormItemValidationResult} keyed on id */
+        this._formItemValidationResults = {};
+        /**
+         * Any FormService extension class should override this method in order to call the
+         * dynamicWebFormItemBuilder/dynamicReactiveFormControlBuilder methods. During web form generation, this method is checked &
+         * the current FormItem is passed in, which can be used by the overriding method.
+         *
+         * @example dynamicFormConditional = (item: FormItem) => item.itemId.includes({some itemId})
+         *
+         */
+        this.dynamicFormConditional = () => false;
+    }
+    /**
+     * Observable stream of MtnaForm changes. Used to inform a subscriber that an MtnaForm has been changed.
+     *
+     * @returns Observable<MtnaForm> to which a caller can subscribe
+     */
+    get formChanges() {
+        return this.formChange$.asObservable();
+    }
+    /**
+     * Adds or removes a FormItem from the form & modifies other affected FormItems
+     * @param change MtnaWfFormItemChange
+     */
+    changeMtnaFormItem(change) {
+        if (!this._mtnaForm) {
+            return;
+        }
+        if (change.actionType === 'REMOVE') {
+            // remove the repeatable item from the mtnaform
+            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.formChange$.next(newForm);
+        }
+        else {
+            this.apiService
+                .getRepeatableItem(this._mtnaForm.instanceId, change.id)
+                .pipe(take(1))
+                .subscribe((newItem) => {
+                const newFormControl = this.serializeMtnaFormItem(newItem);
+                if (newFormControl && this._mtnaForm) {
+                    this.ngFormManager.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
+                    const conditionChanges = this.generateConditionChangeArray(newItem, 'ADD');
+                    newForm = this._modifyFormItemConditions(newForm, Object.assign(Object.assign({}, change), { conditionChanges }));
+                    this.itemToggleQue = conditionChanges;
+                    // emit the new mtnaform
+                    this.formChange$.next(newForm);
+                }
+            });
+        }
+    }
+    /**
+     * Returns a ConditionChange array for items existing in the <item> which enable/disable FormItems outside the <item>'s scope.
+     * @param item FormItem that effects the condition of other FormItems
+     * @param action Whether this item was added (ADD), or removed (REMOVE)
+     * @returns Array<ConditionChange>
+     */
+    generateConditionChangeArray(item, action) {
+        const internalMap = {};
+        this._buildInternalIdsMap(item, internalMap);
+        const conditionChanges = new Array();
+        this._buildConditionChangeArray(item, conditionChanges, internalMap, action);
+        return conditionChanges;
+    }
+    /** @returns The top level validation results (usually the errors), keyed on ID. */
+    getFormItemValidationResults() {
+        return this._formItemValidationResults;
+    }
+    /**
+     * Returns a new MtnaForm using the previous MtnaForm & reactive form values.
+     *
+     * @param mtnaForm MtnaForm requiring value insertion
+     * @param ngFormValues JSON object of  ngForm values
+     * @returns new MtnaForm
+     */
+    insertNewValues(mtnaForm, ngFormValues) {
+        return Object.assign(Object.assign({}, mtnaForm), { items: insertFormItemValues(mtnaForm, ngFormValues, this.uiService.getDisabledStates(), this.dynamicFormConditional, this.dynamicWebFormItemBuilder) });
+    }
+    /**
+     * Serializes a Form | FormItem into FormControl(s)
+     *
+     * @param item Form | FormItem requiring serialization
+     * @returns FormGroup | FormControl
+     */
+    serializeMtnaFormItem(item) {
+        return determineSerializeFunctionToUse(item, this, this.dynamicFormConditional, this.dynamicReactiveFormControlBuilder);
+    }
+    //#region Custom Component/Function Registration
+    getDynamicComponent(id) {
+        return this.components.get(id);
+    }
+    /**
+     * Registers a map of components to be dynamically rendered inside an MtnaForm.
+     *
+     * @param components the map of components that a ValueItem will use for rendering
+     * @prop string - the type(itemId suffix) of component, used for retrieval
+     * @prop Type - the component to be rendered, an extension of BaseFormItem
+     */
+    registerDynamicComponents(components) {
+        this.components = components;
+    }
+    /**
+     * Sets an MtnaForm on the service
+     * @param form MtnaForm to be used for internal modification
+     */
+    setMtnaForm(form) {
+        this._mtnaForm = Object.assign({}, form);
+        if (!!this.itemToggleQue && !!this.itemToggleQue.length) {
+            // The form needs time to rerender, so we push this loop to the end of the stack
+            setTimeout(() => {
+                if (this.itemToggleQue) {
+                    for (const change of this.itemToggleQue) {
+                        this.uiService.toggleFormItems(change.enabledItems, change.disabledItems, !!change.enable, change.enablerId, true);
+                    }
+                }
+                this.itemToggleQue = null;
+            }, 0);
+        }
+        // Keep track of any errors coming from the server and revalidate those controls
+        this._updateServerSideErrors();
+    }
+    /**
+     * Function to be overridden by extended service in order to handle form generation for any application-specific dynamic form components.
+     * Should return a new ValueItem<any>.
+     * Step 3
+     *
+     * @example dynamicWebFormItemBuilder(section: Section | Form, item: FormItem, ngFormValue: any): ValueItem {
+     * const newValue = this.generateNewValue(item, rfValue, section);
+     * return { ...item, ...newValue }
+     * }
+     * @param section the current FormSection
+     * @param item the current FormItem
+     * @param ngFormValue the ngForm JSON value
+     * @returns a new ValueItem
+     */
+    dynamicWebFormItemBuilder(
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    section, item, ngFormValue, disabledState
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ) {
+        return null;
+    }
+    /**
+     * Function to be overridden by extended service in order to handle reactive form generation
+     * for any application-specific dynamic form components.
+     * Should return FormControl | FormGroup.
+     *
+     * @example dynamicReactiveFormControlBuilder(item: FormItem) {
+     * return this.buildFormControlForDynamicComponent(item: FormItem);
+     * }
+     * @param item FormItem used to generate form controls
+     * @returns FormControl | FormGroup
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    dynamicReactiveFormControlBuilder(item) {
+        return null;
+    }
+    //#endregion
+    //#region INTERNAL METHODS
+    /**
+     * Recursively traverses a Form to insert or remove a designated FormItem.
+     * @param item MtnaForm to search through
+     * @param change: MtnaWfFormItemChange for adding or removing a FormItem
+     * @param newItem FormItem to add to its parent
+     */
+    _modifyFormItem(item, change, newItem) {
+        if (!change.parentIds.length) {
+            // At this point, we reach the Parent FormItem
+            if (change.actionType === 'REPLACE') {
+                if ('items' in item) {
+                    const index = item.items.findIndex((i) => i.instanceId === (newItem === null || newItem === void 0 ? void 0 : newItem.instanceId));
+                    const newItems = [...item.items];
+                    if (newItem) {
+                        newItems.splice(index, 1, newItem);
+                    }
+                    return Object.assign(Object.assign({}, item), { items: newItems });
+                }
+                return item;
+            }
+            else if (isRepeatableItem(item)) {
+                return Object.assign(Object.assign({}, item), { items: change.actionType === 'ADD' ? item.items.concat(newItem || []) : item.items.filter((i) => i.instanceId !== change.id) });
+            }
+            else {
+                return item;
+            }
+        }
+        if (isForm(item) || isSection(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];
+            items.splice(indexToModify, 1, this._modifyFormItem(itemToModify, Object.assign(Object.assign({}, change), { parentIds: change.parentIds.slice(1) }), newItem));
+            return Object.assign(Object.assign({}, item), { items });
+        }
+        else if (isTableItem(item)) {
+            return this._modifyTableItem(item, change, newItem);
+        }
+        else if (isOptionItemImpl(item) || isOptionGroupItemImpl(item)) {
+            return this._modifyOptionItem(item, change, newItem)[0];
+        }
+        return item;
+    }
+    /**
+     * Traverses an OptionItemMap of a FormItem to insert or remove a designated FormItem
+     * @param optionItem FormItem with an optionItemMap, e.g. OptionItemImpl | OptionGroupItemImpl
+     * @param change MtnaWfFormItemChange for adding or removing a FormItem
+     * @param newItem FormItem to be added to its parent
+     * @returns FormItem with an optionItemMap containing FormItems
+     */
+    _modifyOptionItem(optionItem, change, newItem) {
+        let found = false;
+        const optionItemMap = {};
+        // Loop through the map and set the items to a new map
+        // Check if any FormItem in the map matches the next parent ID
+        for (const id in optionItem.optionItemMap) {
+            if (Object.prototype.hasOwnProperty.call(optionItem.optionItemMap, id)) {
+                // If one matches, modify & set it on the new map
+                if (optionItem.optionItemMap[id].instanceId === change.parentIds[0]) {
+                    found = true;
+                    optionItemMap[id] = this._modifyFormItem(optionItem.optionItemMap[id], Object.assign(Object.assign({}, change), { parentIds: change.parentIds.slice(1) }), newItem);
+                }
+                else {
+                    optionItemMap[id] = optionItem.optionItemMap[id];
+                }
+            }
+        }
+        // return the item with its new optionItemMap, & whether we found the matching item
+        return [Object.assign(Object.assign({}, optionItem), { optionItemMap }), found];
+    }
+    /**
+     * Traverses table rows to insert or remove a FormItem
+     * @param tableItem TableItem to traverse
+     * @param change MtnaWfFormItemChange for adding or removing a FormItem
+     * @param newItem FormItem to be added to its parent
+     * @returns TableItem with a FormItem added or removed
+     */
+    _modifyTableItem(tableItem, change, newItem) {
+        let found = false;
+        // Map the table rows to find the FormItem with matching instanceId
+        const tableRows = tableItem.tableRows.map((row) => {
+            // If the item was found, skip mapping further rows
+            if (!found) {
+                return Object.assign(Object.assign({}, row), { items: row.items.map((rowItem) => {
+                        // If we found the next matching FormItem, toggle 'found', and return the modified FormItem
+                        if (!!rowItem && rowItem.instanceId === change.parentIds[0]) {
+                            found = true;
+                            return this._modifyFormItem(rowItem, Object.assign(Object.assign({}, change), { parentIds: change.parentIds.slice(1) }), newItem);
+                        }
+                        // If the FormItem instanceId doesn't match, but it has FormItems in its 'optionItemMap',
+                        // We need to check if a matching FormItem exists in its map
+                        if ('optionItemMap' in rowItem) {
+                            const returned = this._modifyOptionItem(rowItem, change, newItem);
+                            found = returned[1];
+                            return returned[0];
+                        }
+                        return rowItem;
+                    }) });
+            }
+            return row;
+        });
+        return Object.assign(Object.assign({}, tableItem), { tableRows });
+    }
+    /**
+     * Adds or removes instanceIds from the 'itemIds' in a FormItem's condition
+     * @param form MtnaForm to search through & replace formitems with the new condition
+     * @param change The change that recently occurred in the mtnaForm
+     */
+    _modifyFormItemConditions(form, change) {
+        let newForm = form;
+        if (change.conditionChanges) {
+            const formItems = {};
+            for (const cc of change.conditionChanges) {
+                for (const toggledId of [...cc.enabledItems, ...cc.disabledItems]) {
+                    let formItem = formItems[toggledId];
+                    const formItemComponent = this.uiService.getItem(toggledId);
+                    if (!formItem && (formItemComponent === null || formItemComponent === void 0 ? void 0 : formItemComponent.item)) {
+                        formItem = formItemComponent === null || formItemComponent === void 0 ? void 0 : formItemComponent.item;
+                    }
+                    if (isConditionalItem(formItem) && formItem.condition) {
+                        const itemConditionItemIds = formItem.condition.itemIds || [];
+                        const itemIds = change.actionType === 'ADD'
+                            ? [...itemConditionItemIds, cc.enablerId]
+                            : itemConditionItemIds.filter((i) => i !== cc.enablerId);
+                        const newItem = Object.assign(Object.assign({}, formItem), { condition: Object.assign(Object.assign({}, formItem.condition), { itemIds }) });
+                        const newChange = new MtnaWfFormItemChange(newItem.instanceId, (formItemComponent === null || formItemComponent === void 0 ? void 0 : formItemComponent.parentIds) || [], 'REPLACE');
+                        newForm = this._modifyFormItem(newForm, newChange, newItem);
+                        formItems[toggledId] = newItem;
+                    }
+                }
+                if (change.actionType === 'REMOVE') {
+                    this.uiService.toggleFormItems(cc.enabledItems, cc.disabledItems, !!cc.enable, cc.enablerId);
+                }
+            }
+        }
+        return newForm;
+    }
+    /**
+     * Builds a map of all instanceIds inside an item. Checks 'items' & 'optionItemMap'
+     * @param item Item to recurse
+     * @param idMap map of the item's internal instanceIds
+     */
+    _buildInternalIdsMap(item, idMap) {
+        idMap[item.instanceId] = true;
+        if (isType(item, 'items')) {
+            const items = item.items;
+            for (const subItem of items) {
+                this._buildInternalIdsMap(subItem, idMap);
+            }
+        }
+        else if (isType(item, 'optionItemMap')) {
+            const map = item.optionItemMap;
+            for (const id in map) {
+                if (Object.prototype.hasOwnProperty.call(map, id)) {
+                    this._buildInternalIdsMap(map[id], idMap);
+                }
+            }
+        }
+    }
+    /**
+     * Builds an array of ConditionChanges to be implemented in an MtnaForm.
+     * @param item FormItem that was added/removed, which affects conditions of other FormItems
+     * @param changes Array to build up
+     * @param internalIdMap Map of all instanceIds located in the item; in order to exclude them from the condition changes
+     * @param action Whether the item was added or removed
+     */
+    _buildConditionChangeArray(item, changes, internalIdMap, action) {
+        if (isOptionItemImpl(item)) {
+            const enable = !!action && action === 'ADD' ? item.option.selected || item.value === item.option.option.id : false;
+            this._pushConditionToArray(item.instanceId, item.option.enabledItems, item.option.disabledItems, changes, internalIdMap, enable);
+            this._buildArrayFromOptionItemMap(item, changes, internalIdMap);
+        }
+        else if (isOptionGroupItemImpl(item)) {
+            for (const option of item.options) {
+                const enable = !!action && action === 'ADD' ? option.selected || (!!item.value && item.value.some((v) => v === option.option.id)) : false;
+                this._pushConditionToArray(item.instanceId, option.enabledItems, option.disabledItems, changes, internalIdMap, enable);
+            }
+            this._buildArrayFromOptionItemMap(item, changes, internalIdMap, action);
+        }
+        else if (isType(item, 'items')) {
+            const items = item.items;
+            for (const subItem of items) {
+                this._buildConditionChangeArray(subItem, changes, internalIdMap, action);
+            }
+        }
+    }
+    /**
+     * Builds an array of ConditionChanges from an item's optionItemMap
+     * @param item FormItem with an optionItemMap
+     * @param conditions Array of ConditionChanges to push on new changes
+     * @param itemMap map of instanceIds exisiting in an item; in order to exclude them from the changes
+     * @param action Whether an item was added or removed
+     */
+    _buildArrayFromOptionItemMap(item, conditions, itemMap, action) {
+        if (item.optionItemMap) {
+            for (const id in item.optionItemMap) {
+                if (Object.prototype.hasOwnProperty.call(item.optionItemMap, id)) {
+                    const subItem = item.optionItemMap[id];
+                    this._buildConditionChangeArray(subItem, conditions, itemMap, action);
+                }
+            }
+        }
+    }
+    /**
+     * Pushes a new ConditionChange onto the conditions array. If a ConditionChange with matching id exists,
+     * it merges the new values into it
+     * @param enablerId instanceId of the item that enables other FormItems
+     * @param enabled the item's 'enabledItems' array
+     * @param disabled the item's 'disabledItems' array
+     * @param conditions Array of ConditionChanges to build up
+     * @param itemMap map of instanceIds inside an item; to ensure no internal ids are included in a change
+     * @param enable Whether the 'enabledItems' should toggled enabled
+     */
+    _pushConditionToArray(enablerId, enabled, disabled, conditions, itemMap, enable) {
+        const enabledItems = enabled.filter((e) => !itemMap[e]);
+        const disabledItems = disabled.filter((d) => !itemMap[d]);
+        if (!!enabledItems.length || !!disabledItems.length) {
+            const index = conditions.findIndex((c) => c.enablerId === enablerId);
+            if (index < 0) {
+                conditions.push({ enablerId: enablerId, enabledItems, disabledItems, enable });
+            }
+            else {
+                const prev = conditions[index];
+                const newId = {
+                    enablerId,
+                    enabledItems: [...prev.enabledItems, ...enabledItems],
+                    disabledItems: [...prev.disabledItems, ...disabledItems],
+                    enable,
+                };
+                conditions.splice(index, 1, newId);
+            }
+        }
+    }
+    /**
+     * Store all validation errors on the service.
+     * Revalidate form controls that previously had errors or have new errors now.
+     */
+    _updateServerSideErrors() {
+        var _a;
+        // Keep track of IDs for each control that needs to be revalidated
+        const controlIdsToRevalidate = new Set();
+        // Collect controls previously in error to revalidate
+        if (this._formItemValidationResults) {
+            for (const id in this._formItemValidationResults) {
+                if (Object.prototype.hasOwnProperty.call(this._formItemValidationResults, id)) {
+                    controlIdsToRevalidate.add(id);
+                }
+            }
+        }
+        // Clear out all previous stored errors
+        this._formItemValidationResults = {};
+        if ((_a = this._mtnaForm) === null || _a === void 0 ? void 0 : _a.validationResult) {
+            for (const result of this._mtnaForm.validationResult.formItemValidationResults) {
+                if (result.validationStatus === 'ERRORS') {
+                    // Store errors so that the validationResultValidator can validate each control
+                    this._formItemValidationResults[result.id] = result;
+                    // We need to revalidate these controls that have errors
+                    controlIdsToRevalidate.add(result.id);
+                }
+            }
+        }
+        // Only revalidate controls actually changes
+        const form = this.ngFormManager.getForm();
+        if (form) {
+            for (const id of controlIdsToRevalidate) {
+                const control = findFormControl(id, form);
+                if (control) {
+                    control.updateValueAndValidity();
+                }
+            }
+        }
+    }
+}
+MtnaWfManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfManagerService, deps: [{ token: MtnaWfApiService }, { token: MtnaWfNgFormService }, { token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Injectable });
+MtnaWfManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfManagerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfManagerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MtnaWfApiService }, { type: MtnaWfNgFormService }, { type: MtnaWfUIService }]; } });
+
+class MtnaWfFileUploadComponent {
+    constructor(fileService) {
+        this.fileService = fileService;
+        this.header = null;
+        this.indicatorStatus = 'INACTIVE';
+        this.readonly = false;
+        this.file = new EventEmitter();
+        this.loading = false;
+    }
+    fileToUpload(file) {
+        this.loading = true;
+        this.fileService.uploadFile(file).subscribe((fileInfo) => {
+            this.loading = false;
+            this.fileInfo = fileInfo;
+            this.file.emit(fileInfo);
+        });
+    }
+    handleDownload(template) {
+        this.fileService.downloadFileGET(template.key, template.fileName, template.contentType);
+    }
+    ngOnInit() {
+        var _a;
+        if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.value) {
+            this.fileInfo = this.item.value;
+        }
+    }
+    removeFile() {
+        if (this.fileInfo) {
+            this.loading = true;
+            this.fileService.deleteFile(this.fileInfo).subscribe(() => {
+                this.loading = false;
+                this.fileInfo = undefined;
+                this.file.emit(undefined);
+            });
+        }
+    }
+}
+MtnaWfFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFileUploadComponent, deps: [{ token: i1$3.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", inputs: { header: "header", indicatorStatus: "indicatorStatus", item: "item", readonly: "readonly" }, outputs: { file: "file" }, 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\"\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>\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$3.MtnaFileDownloadComponent, selector: "mtna-file-download", inputs: ["color", "canDownload", "canRemove", "fileInfo", "loading"], outputs: ["download", "remove"] }, { type: i1$3.MtnaFileUploadComponent, selector: "mtna-file-upload", inputs: ["automaticUpload", "buttonText", "buttonColor", "disabled", "fileUploadUrl", "isProd", "maxUploadSize", "uploading"], outputs: ["uploaded", "fileToUpload", "uploadStatus"] }, { type: i2.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: i18.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "uppercase": i3.UpperCasePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-file-upload-item',
+                    templateUrl: './file-upload.component.html',
+                    styleUrls: ['./file-upload.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.FileService }]; }, propDecorators: { header: [{
+                type: Input
+            }], indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], file: [{
+                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
+            }] } });
+
+/**
+ * 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;
+    }
+    set item(item) {
+        this._item = item;
+    }
+    // Whether the item has a header component above the content
+    get hasItemHeader() {
+        return !!this.item && (!!this.item.questionText || !!this.item.descriptiveText);
+    }
+    _trackByOptionId(index, option) {
+        return option.option.id;
+    }
+}
+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();
+    }
+    /** 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;
+    }
+    set control(control) {
+        if (control instanceof FormGroup) {
+            this._control = control.get(this.item.instanceId);
+            this.controlWrapper = control;
+        }
+        else {
+            super.control = control;
+        }
+        // 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;
+    }
+    ngOnInit() {
+        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; });
+        }
+    }
+    /**
+     * 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
+     */
+    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);
+            }
+            // toggle visibility and enable/disable, should be rendered already
+            if (option) {
+                this.uiService.toggleFormItems(option.enabledItems, option.disabledItems, true, this.item.instanceId);
+            }
+            // Set the selected option as the previous
+            this.selectedOption = option;
+        }
+        else {
+            console.warn('[BaseSingleSelectionParent] selectionChange - not a MatRadioChange | MatSelectChange', change);
+        }
+    }
+}
+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 }]; } });
+
+/* 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;
+    }
+}
+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,
+            args: [{
+                    selector: '[formItemHost]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+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: [],
+    };
+}
+
+/**
+ * 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;
+    }
+}
+
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+const _StepCardMixinBase = mixinColor(class {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}, 'accent');
+class MtnaWfStepCardComponent extends _StepCardMixinBase {
+    constructor(elementRef) {
+        super(elementRef);
+        this.focused = new EventEmitter();
+    }
+    get active() {
+        var _a;
+        return !!((_a = this.step) === null || _a === void 0 ? void 0 : _a.active);
+    }
+    handleFocusChange(event) {
+        if (!!this.step && !!event && !this.step.active) {
+            this.focused.emit(this.step);
+        }
+    }
+}
+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: i7.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }, { type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4$1.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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfStepCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-step-card',
+                    templateUrl: './step-card.component.html',
+                    styleUrls: ['./step-card.component.scss'],
+                    inputs: ['color'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { active: [{
+                type: HostBinding,
+                args: ['class.active']
+            }], step: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], focused: [{
+                type: Output
+            }] } });
+
+/**
+ * Common header html for a form item.
+ *
+ * @author Will Davis <will.davis@mtna.us>
+ */
+class ItemHeaderComponent {
+    constructor() {
+        this.itemHeaderClass = true;
+        this._disabled = false;
+        this._hideRequiredMarker = false;
+        this._invalid = false;
+        /** Whether the form item is required */
+        this.required = false;
+        /** HTML to insert for required items */
+        this._requiredHtml = `<span aria-hidden="true">&#32;*</span>`;
+    }
+    /** Whether the form item is disabled */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(disabled) {
+        this._disabled = coerceBooleanProperty(disabled);
+    }
+    /** Whether the required marker (asterix) is hidden. Defaults to false. */
+    get hideRequiredMarker() {
+        return this._hideRequiredMarker;
+    }
+    set hideRequiredMarker(hideRequiredMarker) {
+        this._hideRequiredMarker = coerceBooleanProperty(hideRequiredMarker);
+    }
+    /** Whether the form item is invalid */
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(invalid) {
+        this._invalid = coerceBooleanProperty(invalid);
+    }
+}
+ItemHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ItemHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ItemHeaderComponent, selector: "mtna-wf-item-header", inputs: { descriptiveText: "descriptiveText", disabled: "disabled", hideRequiredMarker: "hideRequiredMarker", invalid: "invalid", questionText: "questionText", required: "required" }, host: { properties: { "class.mtna-wf-item-header": "this.itemHeaderClass" } }, ngImport: i0, template: `
+    <h3
+      *ngIf="!!questionText"
+      class="mtna-wf-item-question"
+      [class.invalid]="invalid"
+      [innerHTML]="questionText + (required && !disabled && !hideRequiredMarker ? _requiredHtml : '') | mtnaWfSanitizeHtml"
+    ></h3>
+    <p *ngIf="!!descriptiveText" class="mtna-wf-item-description" [innerHTML]="descriptiveText | mtnaWfSanitizeHtml"></p>
+  `, isInline: true, styles: ["\n      .mtna-wf-item-header {\n        display: block;\n        margin-bottom: 0.5rem;\n      }\n      .mtna-wf-item-header .mtna-wf-item-question,\n      .mtna-wf-item-description {\n        margin: 0;\n        font-size: 0.9rem;\n        line-height: 1.6;\n      }\n      .mtna-wf-item-header .mtna-wf-item-description {\n        opacity: 0.56;\n      }\n\n      mtna-annotations-indicator + mtna-wf-repeatable-item-container > mtna-wf-item-header,\n      mtna-annotations-indicator + mtna-wf-value-item > mtna-wf-input-item > mtna-wf-item-header {\n        padding-right: 24px; // provide space for annotation indicator\n      }\n    "], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "mtnaWfSanitizeHtml": MtnaWfSanitizeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-item-header',
+                    template: `
+    <h3
+      *ngIf="!!questionText"
+      class="mtna-wf-item-question"
+      [class.invalid]="invalid"
+      [innerHTML]="questionText + (required && !disabled && !hideRequiredMarker ? _requiredHtml : '') | mtnaWfSanitizeHtml"
+    ></h3>
+    <p *ngIf="!!descriptiveText" class="mtna-wf-item-description" [innerHTML]="descriptiveText | mtnaWfSanitizeHtml"></p>
+  `,
+                    styles: [
+                        `
+      .mtna-wf-item-header {
+        display: block;
+        margin-bottom: 0.5rem;
+      }
+      .mtna-wf-item-header .mtna-wf-item-question,
+      .mtna-wf-item-description {
+        margin: 0;
+        font-size: 0.9rem;
+        line-height: 1.6;
+      }
+      .mtna-wf-item-header .mtna-wf-item-description {
+        opacity: 0.56;
+      }
+
+      mtna-annotations-indicator + mtna-wf-repeatable-item-container > mtna-wf-item-header,
+      mtna-annotations-indicator + mtna-wf-value-item > mtna-wf-input-item > mtna-wf-item-header {
+        padding-right: 24px; // provide space for annotation indicator
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { itemHeaderClass: [{
+                type: HostBinding,
+                args: ['class.mtna-wf-item-header']
+            }], descriptiveText: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hideRequiredMarker: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], questionText: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }] } });
+
+class RepeatableItemComponent {
+}
+RepeatableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RepeatableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RepeatableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RepeatableItemComponent, selector: "mtna-wf-repeatable-item", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: ["\n      mtna-wf-repeatable-item {\n        display: block;\n      }\n    "], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RepeatableItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-repeatable-item',
+                    template: ` <ng-content></ng-content> `,
+                    styles: [
+                        `
+      mtna-wf-repeatable-item {
+        display: block;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+
+class MtnaWfDateComponent extends BaseFormItemControl {
+    constructor(logger) {
+        super();
+        this.dateItemClass = true;
+        this._format = 'YYYY-MM-DD';
+        this.rangeLimits = { end: null, start: null };
+        // 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++;
+        if (MtnaWfDateComponent.dateFormItemComponentInstances === 1) {
+            try {
+                if (!!moment && typeof moment().toMomentFormatString !== 'function') {
+                    logger.error(`[DateFormItemComponent] constructor
+         - Cannot find moment-jdateformatparser, make sure to install the dependency and add the script in angular.json, i.e.
+         "scripts": ["node_modules/moment-jdateformatparser/moment-jdateformatparser.min.js"]`);
+                }
+            }
+            catch (e) {
+                logger.error(`[DateFormItemComponent] constructor
+       - Cannot find moment.js, make sure to install the dependency and add the script in angular.json, i.e.
+       "scripts": ["node_modules/moment/min/moment.min.js"]`);
+            }
+        }
+    }
+    get format() {
+        return this._format;
+    }
+    set format(f) {
+        if (f) {
+            this._format = f;
+            // Update configuration anytime the formatter changes
+            this.configureDatePickerFormatter();
+        }
+    }
+    ngAfterViewInit() {
+        this.configureDatePickerFormatter();
+    }
+    /**
+     * Manually change the parse and display formats of the date picker.
+     * @see https://github.com/angular/components/issues/8355#issuecomment-376783293
+     */
+    configureDatePickerFormatter() {
+        if (this.picker) {
+            const datepickerInput = this.picker.datepickerInput;
+            // @ts-ignore: access the private date formats on the date picker
+            const d = JSON.parse(JSON.stringify(datepickerInput._dateFormats));
+            // Convert the Java SimpleDateFormat to the moment equivalents using moment-jdateformatparser
+            const momentFormatString = moment().toMomentFormatString(this.format);
+            // Use the converted format for the date picker display
+            d.display.dateInput = momentFormatString;
+            // Use the converted format for the date picker parser (user input)
+            d.parse.dateInput = momentFormatString;
+            // @ts-ignore: set the updated date formats
+            datepickerInput._dateFormats = d;
+            // @ts-ignore: manually format the current value in the date picker
+            datepickerInput._formatValue(datepickerInput.value);
+        }
+    }
+}
+MtnaWfDateComponent.dateFormItemComponentInstances = 0;
+MtnaWfDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateComponent, deps: [{ token: i7.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: { format: "format", 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>
+    <mat-form-field *ngIf="control" appearance="outline" [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader">
+      <mat-label>{{ item.label || 'Date' }}</mat-label>
+      <input
+        matInput
+        [matDatepicker]="picker"
+        [formControl]="$any(control)"
+        [max]="rangeLimits?.end"
+        [min]="rangeLimits?.start"
+        placeholder="Choose a date"
+        [required]="item.required"
+      />
+      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly || control.disabled"></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+      <mat-error *ngFor="let error of control.errors | keyvalue">
+        {{ error | mtnaWfGetControlError : item }}
+      </mat-error>
+      <mat-hint>{{ item?.format || format }}</mat-hint>
+    </mat-form-field>
+  `, isInline: true, styles: [".mtna-wf-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$2.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: i7.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i5.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$2.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: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaGetFormControlErrorPipe }, 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: [{
+                    selector: 'mtna-wf-date-item',
+                    template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+    <mat-form-field *ngIf="control" appearance="outline" [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader">
+      <mat-label>{{ item.label || 'Date' }}</mat-label>
+      <input
+        matInput
+        [matDatepicker]="picker"
+        [formControl]="$any(control)"
+        [max]="rangeLimits?.end"
+        [min]="rangeLimits?.start"
+        placeholder="Choose a date"
+        [required]="item.required"
+      />
+      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly || control.disabled"></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+      <mat-error *ngFor="let error of control.errors | keyvalue">
+        {{ error | mtnaWfGetControlError : item }}
+      </mat-error>
+      <mat-hint>{{ item?.format || format }}</mat-hint>
+    </mat-form-field>
+  `,
+                    styleUrls: [`form-control.scss`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i7.MtnaLogger }]; }, propDecorators: { dateItemClass: [{
+                type: HostBinding,
+                args: ['class.mtna-wf-date-item']
+            }], format: [{
+                type: Input
+            }], rangeLimits: [{
+                type: Input
+            }], picker: [{
+                type: ViewChild,
+                args: [MatDatepicker, { static: false }]
+            }] } });
+
+class MtnaWfDateRangeComponent extends BaseFormItemControl {
+    get item() {
+        return this._item;
+    }
+    set item(item) {
+        this._item = item;
+        // Create fake items for the underlying date-item component
+        this._startItem = Object.assign(Object.assign({}, item), { label: 'Start', value: undefined });
+        this._endItem = Object.assign(Object.assign({}, item), { label: 'End', value: undefined });
+    }
+}
+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>
+
+    <div
+      *ngIf="control"
+      class="range-item-container"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxLayoutGap="8px"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mtna-wf-date-item
+        [control]="control.controls['start']"
+        [format]="item.format"
+        [item]="_startItem"
+        [rangeLimits]="item.rangeLimits"
+        [readonly]="readonly"
+      ></mtna-wf-date-item>
+      <span fxFlex="14px"> to </span>
+      <mtna-wf-date-item
+        [control]="control.controls['end']"
+        [format]="item.format"
+        [item]="_endItem"
+        [rangeLimits]="item.rangeLimits"
+        [readonly]="readonly"
+      ></mtna-wf-date-item>
+    </div>
+  `, isInline: true, components: [{ type: MtnaWfDateComponent, selector: "mtna-wf-date-item", inputs: ["format", "rangeLimits"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.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$3.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.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: i7.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3$3.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: MtnaWfDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-date-range',
+                    template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+
+    <div
+      *ngIf="control"
+      class="range-item-container"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxLayoutGap="8px"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mtna-wf-date-item
+        [control]="control.controls['start']"
+        [format]="item.format"
+        [item]="_startItem"
+        [rangeLimits]="item.rangeLimits"
+        [readonly]="readonly"
+      ></mtna-wf-date-item>
+      <span fxFlex="14px"> to </span>
+      <mtna-wf-date-item
+        [control]="control.controls['end']"
+        [format]="item.format"
+        [item]="_endItem"
+        [rangeLimits]="item.rangeLimits"
+        [readonly]="readonly"
+      ></mtna-wf-date-item>
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+const MTNA_WF_DEFAULT_YEAR_RANGE = new InjectionToken('mtna.wf.default.year.range');
+class MtnaWfYearQuarterComponent extends BaseFormItemControl {
+    constructor(defaultYearRange) {
+        super();
+        this.yearQuarterItemClass = true;
+        this._quarterControl = new FormControl();
+        this._yearControl = new FormControl();
+        this._yearSelection = new Array();
+        this.destroyObs = new Subject();
+        /**
+         * Sets the quarter value to `null` if the year & quarter is out of bounds of the range limits.
+         * Otherwise, returns original value
+         *
+         * @param value `[number, number]` The selected [year, quarter] value
+         * @returns `[number, number]` The original [year, quarter] value OR [year, null]
+         */
+        this.withinRangeLimits = ([year, quarter]) => {
+            var _a, _b;
+            const beyondUpperLimit = 
+            // year matches end year range limit
+            year === ((_a = this.rangeLimits) === null || _a === void 0 ? void 0 : _a.end.year) &&
+                // quarter limit was provided
+                isPresent(this.rangeLimits.end.quarter) &&
+                // selected quarter is beyond quarter limit
+                quarter > this.rangeLimits.end.quarter;
+            const beyondLowerLimit = 
+            // year matches start year range limit
+            year === ((_b = this.rangeLimits) === null || _b === void 0 ? void 0 : _b.start.year) &&
+                // quarter limit was provided
+                isPresent(this.rangeLimits.start.quarter) &&
+                // selected quarter is beyond quarter limit
+                quarter < this.rangeLimits.start.quarter;
+            if (beyondLowerLimit || beyondUpperLimit) {
+                this._quarterControl.setValue(null, { emitEvent: false });
+                return [year, null];
+            }
+            return [year, quarter];
+        };
+        this.defaultYearRange = defaultYearRange || { numFutureYears: 25, numPastYears: 25 };
+    }
+    ngAfterViewInit() {
+        if (!this.readonly) {
+            // Observe Year & Quarter value changes && set them on the item's control
+            merge(this._yearControl.valueChanges, this._quarterControl.valueChanges)
+                .pipe(takeUntil(this.destroyObs))
+                .subscribe(() => {
+                var _a, _b, _c, _d;
+                if (!((_a = this.control) === null || _a === void 0 ? void 0 : _a.dirty) && (this._yearControl.dirty || this._quarterControl.dirty)) {
+                    (_b = this.control) === null || _b === void 0 ? void 0 : _b.markAsDirty();
+                    (_c = this.control) === null || _c === void 0 ? void 0 : _c.markAsTouched();
+                }
+                if (isPresent(this._yearControl.value)) {
+                    const [year, quarter] = this.withinRangeLimits([this._yearControl.value, this._quarterControl.value]);
+                    (_d = this.control) === null || _d === void 0 ? void 0 : _d.setValue({ year, quarter });
+                }
+            });
+            // FIXME not sure we need this until we starting making this control
+            // required/unrequired at the right time. Even then, this is super inneficient
+            /*
+            // Listen to this control for disabling local controls
+            this.control.statusChanges
+              .pipe(
+                startWith(this.control.status),
+                takeUntil(this.destroyObs)
+              )
+              .subscribe(status => {
+                console.warn('statusChanges', status, this.control);
+                // if this control is enabled, enable local controls if disabled
+                if (this.control.enabled) {
+                  if (this._quarterControl.disabled || this._yearControl.disabled) {
+                    console.warn('[YearQuarterItem] enable the things');
+                    // this._quarterControl.enable();
+                    // this._yearControl.enable();
+                  }
+                  // else this control is disabled, so disable local controls if enabled
+                } else if (this._quarterControl.enabled || this._yearControl.enabled) {
+                  console.warn('[YearQuarterItem] disable the things');
+                  // this._yearControl.disable();
+                  // this._quarterControl.disable();
+                }
+              });
+              */
+        }
+    }
+    ngOnDestroy() {
+        this.destroyObs.next();
+        this.destroyObs.complete();
+    }
+    ngOnInit() {
+        var _a, _b, _c;
+        // 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);
+        // Create range limits if none exist
+        if (!this.rangeLimits) {
+            const thisYear = new Date().getFullYear();
+            this.rangeLimits = {
+                start: {
+                    year: thisYear - this.defaultYearRange.numPastYears,
+                    quarter: null,
+                },
+                end: {
+                    year: thisYear + this.defaultYearRange.numFutureYears,
+                    quarter: null,
+                },
+            };
+        }
+        // Populate the year selection
+        for (let i = this.rangeLimits.start.year || 0; i <= (this.rangeLimits.end.year || 0); i++) {
+            this._yearSelection.push(i);
+        }
+        if (this.readonly) {
+            (_c = this.control) === null || _c === void 0 ? void 0 : _c.disable();
+            this._quarterControl.disable();
+            this._yearControl.disable();
+        }
+    }
+}
+MtnaWfYearQuarterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterComponent, deps: [{ 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", inputs: { rangeLimits: "rangeLimits" }, host: { properties: { "class.mtna-wf-year-quarter-item": "this.yearQuarterItemClass" } }, usesInheritance: true, ngImport: i0, template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+    <div
+      *ngIf="control"
+      class="year-quarter-container"
+      fxLayout="row"
+      fxLayoutGap="8px"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mat-form-field>
+        <mat-select [formControl]="_yearControl" aria-label="year selection">
+          <mat-option *ngFor="let year of _yearSelection" [value]="year">{{ year }}</mat-option>
+        </mat-select>
+        <mat-error *ngFor="let error of control.errors | keyvalue">
+          {{ error | mtnaWfGetControlError : item }}
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-select [formControl]="_quarterControl" aria-label="quarter selection">
+          <mat-option>None</mat-option>
+          <mat-option *ngFor="let quarter of _yearControl.value | mtnaWfGetQuarters : rangeLimits" [value]="quarter">{{
+            $any(quarter) | mtnaWfDateQuarter : 'short'
+          }}</mat-option>
+        </mat-select>
+        <mat-error *ngFor="let error of control.errors | keyvalue">
+          {{ error | mtnaWfGetControlError : item }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+  `, isInline: true, styles: [".mtna-wf-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n", "\n      .mtna-wf-year-quarter-item .year-quarter-container > .mat-form-field {\n        max-width: 75px;\n      }\n      .mtna-wf-year-quarter-item .year-quarter-container > .mat-form-field:first-of-type {\n        margin-right: 8px;\n      }\n    "], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.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$3.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$3.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: i7.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: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaGetFormControlErrorPipe, "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": DateQuarterPipe }, 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: [{
+                    selector: 'mtna-wf-year-quarter-item',
+                    template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+    <div
+      *ngIf="control"
+      class="year-quarter-container"
+      fxLayout="row"
+      fxLayoutGap="8px"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mat-form-field>
+        <mat-select [formControl]="_yearControl" aria-label="year selection">
+          <mat-option *ngFor="let year of _yearSelection" [value]="year">{{ year }}</mat-option>
+        </mat-select>
+        <mat-error *ngFor="let error of control.errors | keyvalue">
+          {{ error | mtnaWfGetControlError : item }}
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-select [formControl]="_quarterControl" aria-label="quarter selection">
+          <mat-option>None</mat-option>
+          <mat-option *ngFor="let quarter of _yearControl.value | mtnaWfGetQuarters : rangeLimits" [value]="quarter">{{
+            $any(quarter) | mtnaWfDateQuarter : 'short'
+          }}</mat-option>
+        </mat-select>
+        <mat-error *ngFor="let error of control.errors | keyvalue">
+          {{ error | mtnaWfGetControlError : item }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+  `,
+                    styleUrls: [`form-control.scss`],
+                    styles: [
+                        `
+      .mtna-wf-year-quarter-item .year-quarter-container > .mat-form-field {
+        max-width: 75px;
+      }
+      .mtna-wf-year-quarter-item .year-quarter-container > .mat-form-field:first-of-type {
+        margin-right: 8px;
+      }
+    `,
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTNA_WF_DEFAULT_YEAR_RANGE]
+                }] }]; }, propDecorators: { yearQuarterItemClass: [{
+                type: HostBinding,
+                args: ['class.mtna-wf-year-quarter-item']
+            }], rangeLimits: [{
+                type: Input
+            }] } });
+
+class MtnaWfYearQuarterRangeComponent extends BaseFormItemControl {
+    constructor() {
+        super(...arguments);
+        this.yearQuarterRangeClass = true;
+    }
+}
+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>
+
+    <div
+      *ngIf="control"
+      class="range-item-container"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxLayoutGap="8px"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mtna-wf-year-quarter-item
+        [control]="control.controls['start']"
+        [readonly]="readonly"
+        [rangeLimits]="item.rangeLimits"
+      ></mtna-wf-year-quarter-item>
+      <span fxFlex="14px">to</span>
+      <mtna-wf-year-quarter-item
+        [control]="control.controls['end']"
+        [readonly]="readonly"
+        [rangeLimits]="item.rangeLimits"
+      ></mtna-wf-year-quarter-item>
+    </div>
+  `, isInline: true, styles: [".mtna-wf-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.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", inputs: ["rangeLimits"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.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$3.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.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: i7.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3$3.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: MtnaWfYearQuarterRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-year-quarter-range-item',
+                    template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+
+    <div
+      *ngIf="control"
+      class="range-item-container"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxLayoutGap="8px"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mtna-wf-year-quarter-item
+        [control]="control.controls['start']"
+        [readonly]="readonly"
+        [rangeLimits]="item.rangeLimits"
+      ></mtna-wf-year-quarter-item>
+      <span fxFlex="14px">to</span>
+      <mtna-wf-year-quarter-item
+        [control]="control.controls['end']"
+        [readonly]="readonly"
+        [rangeLimits]="item.rangeLimits"
+      ></mtna-wf-year-quarter-item>
+    </div>
+  `,
+                    styleUrls: [`form-control.scss`],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { yearQuarterRangeClass: [{
+                type: HostBinding,
+                args: ['class.mtna-wf-year-quarter-range-item']
+            }] } });
+
+class MtnaWfDropdownComponent extends BaseSingleSelectionParent {
+    constructor(uiService) {
+        super(uiService);
+    }
+}
+MtnaWfDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDropdownComponent, deps: [{ token: MtnaWfUIService }], 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>
+    <mat-form-field
+      *ngIf="!readonly && !!control; else readOnly"
+      appearance="outline"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mat-label>{{ item.label }}</mat-label>
+      <mat-select [formControl]="control" (selectionChange)="selectionChange($event)" [required]="item.required">
+        <mat-option *ngIf="!item.required">-- None --</mat-option>
+        <mat-option *ngFor="let opt of item.options" [value]="opt.option.id" [disabled]="control.value === opt.option.id">{{
+          opt.option.name
+        }}</mat-option>
+      </mat-select>
+      <mat-error *ngFor="let error of control.errors | keyvalue">
+        {{ error | mtnaWfGetControlError : item }}
+      </mat-error>
+    </mat-form-field>
+
+    <ng-template #readOnly>
+      <ng-container *ngIf="inList; else fullList">
+        <mat-list-item *ngIf="item.required || !!item.value">
+          <mat-icon *ngIf="item.label | getListIcon as icon" matListIcon>{{ icon }}</mat-icon>
+          <h4 matLine>{{ item.label }}</h4>
+          <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>
+        </mat-list-item>
+      </ng-container>
+
+      <ng-template #fullList>
+        <mat-list>
+          <mat-list-item *ngIf="item.required || !!item.value">
+            <mat-icon *ngIf="item.label | getListIcon as icon" matListIcon>{{ icon }}</mat-icon>
+            <h4 matLine>{{ item.label }}</h4>
+            <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>
+          </mat-list-item>
+        </mat-list>
+      </ng-template>
+    </ng-template>
+  `, isInline: true, styles: [".mtna-wf-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i18.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$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: i7.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i2$1.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: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i5$1.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i4$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaGetFormControlErrorPipe, "getListIcon": GetListIconPipe, "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: [{
+                    selector: 'mtna-wf-dropdown-item',
+                    template: `
+    <ng-container *ngTemplateOutlet="header; context: { $implicit: true }"></ng-container>
+    <mat-form-field
+      *ngIf="!readonly && !!control; else readOnly"
+      appearance="outline"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mat-label>{{ item.label }}</mat-label>
+      <mat-select [formControl]="control" (selectionChange)="selectionChange($event)" [required]="item.required">
+        <mat-option *ngIf="!item.required">-- None --</mat-option>
+        <mat-option *ngFor="let opt of item.options" [value]="opt.option.id" [disabled]="control.value === opt.option.id">{{
+          opt.option.name
+        }}</mat-option>
+      </mat-select>
+      <mat-error *ngFor="let error of control.errors | keyvalue">
+        {{ error | mtnaWfGetControlError : item }}
+      </mat-error>
+    </mat-form-field>
+
+    <ng-template #readOnly>
+      <ng-container *ngIf="inList; else fullList">
+        <mat-list-item *ngIf="item.required || !!item.value">
+          <mat-icon *ngIf="item.label | getListIcon as icon" matListIcon>{{ icon }}</mat-icon>
+          <h4 matLine>{{ item.label }}</h4>
+          <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>
+        </mat-list-item>
+      </ng-container>
+
+      <ng-template #fullList>
+        <mat-list>
+          <mat-list-item *ngIf="item.required || !!item.value">
+            <mat-icon *ngIf="item.label | getListIcon as icon" matListIcon>{{ icon }}</mat-icon>
+            <h4 matLine>{{ item.label }}</h4>
+            <p matLine>{{ item.value || control?.value | mtnaWfGetSelectedOptionName : item.options }}</p>
+          </mat-list-item>
+        </mat-list>
+      </ng-template>
+    </ng-template>
+  `,
+                    styleUrls: [`form-control.scss`],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfUIService }]; } });
+
+class MtnaWfUnorderedListItemComponent {
+    constructor() {
+        this.header = null;
+        this.indicatorStatus = 'INACTIVE';
+    }
+}
+MtnaWfUnorderedListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfUnorderedListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfUnorderedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfUnorderedListItemComponent, selector: "mtna-wf-unordered-list-item", inputs: { header: "header", indicatorStatus: "indicatorStatus", item: "item" }, ngImport: i0, template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+    <ul [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText">
+      <li *ngFor="let item of item.value" [innerHTML]="item | mtnaWfSanitizeHtml"></li>
+    </ul>
+  `, isInline: true, styles: ["\n        mtna-wf-unordered-list-item > ul {\n            list-style: disc outside;\n            padding-left: 1rem;\n        }\n\n        mtna-annotations-indicator + mtna-wf-value-item mtna-wf-unordered-list-item > ul {\n            padding-right: 24px;\n        / / provide space for annotation indicator\n        }\n    "], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.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: [{
+                    selector: 'mtna-wf-unordered-list-item',
+                    template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+    <ul [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText">
+      <li *ngFor="let item of item.value" [innerHTML]="item | mtnaWfSanitizeHtml"></li>
+    </ul>
+  `,
+                    styles: [
+                        `
+        mtna-wf-unordered-list-item > ul {
+            list-style: disc outside;
+            padding-left: 1rem;
+        }
+
+        mtna-annotations-indicator + mtna-wf-value-item mtna-wf-unordered-list-item > ul {
+            padding-right: 24px;
+        / / provide space for annotation indicator
+        }
+    `,
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }] } });
+
+class MtnaWfOrderedListItemComponent {
+    constructor() {
+        this.header = null;
+        this.indicatorStatus = 'INACTIVE';
+    }
+}
+MtnaWfOrderedListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfOrderedListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfOrderedListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfOrderedListItemComponent, selector: "mtna-wf-ordered-list-item", inputs: { header: "header", indicatorStatus: "indicatorStatus", item: "item" }, ngImport: i0, template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+    <ol [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText">
+      <li *ngFor="let item of item.value" [innerHTML]="item | mtnaWfSanitizeHtml"></li>
+    </ol>
+  `, isInline: true, styles: ["\n      mtna-wf-ordered-list-item > ol {\n        list-style: decimal outside;\n        padding-left: 1rem;\n      }\n      mtna-annotations-indicator + mtna-wf-value-item mtna-wf-ordered-list-item > ol {\n        padding-right: 24px; // provide space for annotation indicator\n      }\n    "], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.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: [{
+                    selector: 'mtna-wf-ordered-list-item',
+                    template: `
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+    <ol [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !item.questionText && !item.descriptiveText">
+      <li *ngFor="let item of item.value" [innerHTML]="item | mtnaWfSanitizeHtml"></li>
+    </ol>
+  `,
+                    styles: [
+                        `
+      mtna-wf-ordered-list-item > ol {
+        list-style: decimal outside;
+        padding-left: 1rem;
+      }
+      mtna-annotations-indicator + mtna-wf-value-item mtna-wf-ordered-list-item > ol {
+        padding-right: 24px; // provide space for annotation indicator
+      }
+    `,
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }] } });
+
+class MtnaWfInputComponent extends BaseFormItemControl {
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+        this.isParagraph = this._hasHostAttributes('mtnaWfParagraphItem');
+        this.isNumberInput = this._hasHostAttributes('mtnaWfDecimalItem', 'mtnaWfWholeNumberItem');
+    }
+    _hasHostAttributes(...attributes) {
+        return attributes.some((attr) => this.elementRef.nativeElement.hasAttribute(attr));
+    }
+}
+MtnaWfInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfInputComponent, selector: "mtna-wf-input-item[mtnaWfDecimalItem],\n             mtna-wf-input-item[mtnaWfParagraphItem],\n             mtna-wf-input-item[mtnaWfShortAnswerItem],\n             mtna-wf-input-item[mtnaWfWholeNumberItem],", usesInheritance: true, ngImport: i0, template: `
+    <ng-container *ngTemplateOutlet="header; context: { $implicit: true }"></ng-container>
+    <mat-form-field
+      *ngIf="!readonly && !!control; else readOnly"
+      appearance="outline"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mat-label>{{ item.label }}</mat-label>
+      <textarea
+        *ngIf="isParagraph; else shortInput"
+        matInput
+        [formControl]="control"
+        [required]="item.required"
+        [attr.autocomplete]="item.label || item.name | getAutoComplete"
+        cdkTextareaAutoSize
+        cdkAutosizeMinRows="3"
+        cdkAutosizeMaxRows="5"
+      ></textarea>
+
+      <ng-template #shortInput>
+        <input matInput [formControl]="control!" [autocomplete]="item.label || item.name | getAutoComplete" [required]="item.required" />
+      </ng-template>
+
+      <mat-error *ngFor="let error of control.errors | keyvalue | slice : 0 : 1">
+        {{ error | mtnaWfGetControlError : item }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- READONLY -->
+    <ng-template #readOnly>
+      <ng-container *ngTemplateOutlet="inList ? listItem : fullList"></ng-container>
+    </ng-template>
+
+    <ng-template #fullList>
+      <mat-list>
+        <ng-container *ngTemplateOutlet="listItem"></ng-container>
+      </mat-list>
+    </ng-template>
+
+    <ng-template #listItem>
+      <mat-list-item class="wrappable-list-item">
+        <!-- <mat-icon *ngIf="item.label || item.header as label" matListIcon>{{ label | getListIcon }}</mat-icon> -->
+        <h4 *ngIf="!item.questionText && (item.label || item.name) as label" mat-line>{{ label }}</h4>
+        <p mat-line class="wrap-line">{{ item.value || 'No Information Provided' }}</p>
+      </mat-list-item>
+    </ng-template>
+  `, isInline: true, styles: [".mtna-wf-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n", "\n      mtna-wf-input-item .mat-list-base .mat-list-item,\n      mtna-wf-input-item .mat-list-base .mat-list-item.mat-list-item-with-avatar {\n        height: auto;\n        padding: 12px 0;\n      }\n      mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line,\n      mtna-wf-input-item .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar {\n        padding: 18.5px 0;\n      }\n      mtna-wf-input-item .mat-list-base .mat-list-item .mat-line {\n        white-space: normal;\n        overflow: unset;\n        text-overflow: unset;\n      }\n    "], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i5$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: i7.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i5.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: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "getAutoComplete": GetAutoCompletePipe, "slice": i3.SlicePipe, "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaGetFormControlErrorPipe }, 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: [{
+                    selector: `mtna-wf-input-item[mtnaWfDecimalItem],
+             mtna-wf-input-item[mtnaWfParagraphItem],
+             mtna-wf-input-item[mtnaWfShortAnswerItem],
+             mtna-wf-input-item[mtnaWfWholeNumberItem],`,
+                    template: `
+    <ng-container *ngTemplateOutlet="header; context: { $implicit: true }"></ng-container>
+    <mat-form-field
+      *ngIf="!readonly && !!control; else readOnly"
+      appearance="outline"
+      [mtnaHighlight]="indicatorStatus === 'ACTIVE' && !hasItemHeader"
+    >
+      <mat-label>{{ item.label }}</mat-label>
+      <textarea
+        *ngIf="isParagraph; else shortInput"
+        matInput
+        [formControl]="control"
+        [required]="item.required"
+        [attr.autocomplete]="item.label || item.name | getAutoComplete"
+        cdkTextareaAutoSize
+        cdkAutosizeMinRows="3"
+        cdkAutosizeMaxRows="5"
+      ></textarea>
+
+      <ng-template #shortInput>
+        <input matInput [formControl]="control!" [autocomplete]="item.label || item.name | getAutoComplete" [required]="item.required" />
+      </ng-template>
+
+      <mat-error *ngFor="let error of control.errors | keyvalue | slice : 0 : 1">
+        {{ error | mtnaWfGetControlError : item }}
+      </mat-error>
+    </mat-form-field>
+
+    <!-- READONLY -->
+    <ng-template #readOnly>
+      <ng-container *ngTemplateOutlet="inList ? listItem : fullList"></ng-container>
+    </ng-template>
+
+    <ng-template #fullList>
+      <mat-list>
+        <ng-container *ngTemplateOutlet="listItem"></ng-container>
+      </mat-list>
+    </ng-template>
+
+    <ng-template #listItem>
+      <mat-list-item class="wrappable-list-item">
+        <!-- <mat-icon *ngIf="item.label || item.header as label" matListIcon>{{ label | getListIcon }}</mat-icon> -->
+        <h4 *ngIf="!item.questionText && (item.label || item.name) as label" mat-line>{{ label }}</h4>
+        <p mat-line class="wrap-line">{{ item.value || 'No Information Provided' }}</p>
+      </mat-list-item>
+    </ng-template>
+  `,
+                    styleUrls: [`form-control.scss`],
+                    styles: [
+                        `
+      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;
+      }
+    `,
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class MtnaWfDialogService {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    /**
+     * Display the acknowledgement the user agreed to for a given option.
+     * @param acknowledgementItem The {@link Section} that represents the acknowledgement text to display to the user.
+     */
+    showAcknowledgement(acknowledgementItem) {
+        this.dialog.open(MtnaWfFormItemDialogComponent, {
+            closeOnNavigation: true,
+            data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || 'Acknowledgement'),
+            disableClose: false,
+            hasBackdrop: true,
+            maxWidth: '500px',
+        });
+    }
+    /**
+     * Show some text in a dialog that the user needs to "acknowledge" before they can make a certain selection.
+     * @param acknowledgementItem The {@link Section} that represents the text displayed to the user for acknowledgement.
+     * @returns Whether the user acknowledges (agrees).
+     */
+    verifyAcknowledgement(acknowledgementItem) {
+        return this.dialog
+            .open(MtnaWfAcknowledgeDialogComponent, {
+            closeOnNavigation: true,
+            data: new MtnaWfFormItemDialogData(acknowledgementItem.items, acknowledgementItem.title.value || 'Acknowledgement'),
+            disableClose: true,
+            hasBackdrop: true,
+            maxWidth: '500px',
+        })
+            .afterClosed();
+    }
+}
+MtnaWfDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+MtnaWfDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
+/*
+ * Due to the recursive nature of these form components, we had to combine all the TS into a single file.
+ * Perhaps when we refactor this in the future to use dynamic components, this can be avoided.
+ * Read more about the errors if they are not in the same file here: https://angular.io/errors/NG3003
+ */
+// TODO: refactor, reduce code in here. mixins
+/**
+ * A dialog that renders a form item that represents something the user needs to acknowledge.
+ */
+class MtnaWfAcknowledgeDialogComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+    }
+}
+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: i0.forwardRef(function () { return MtnaWfFormItemComponent; }), selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "step"], outputs: ["focusedSection"] }, { type: i0.forwardRef(function () { return i2.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: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i1.MatDialogTitle; }), selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i0.forwardRef(function () { return i1.MatDialogContent; }), selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i1.MatDialogActions; }), selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i0.forwardRef(function () { return 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: [{
+                    selector: 'mtna-wf-acknowledge-dialog',
+                    templateUrl: 'acknowledge-dialog.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfFormItemDialogData, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+/**
+ * Component that wraps an MtnaForm item.
+ *
+ * ChangeDetectionStrategy.OnPush was not working as of 9/19/2018.
+ * Dynamic components in the ValueItemComponent were not being initialized (ngOnInit was never called).
+ *
+ * @export
+ */
+class MtnaWfFormItemComponent {
+    constructor(_elementRef, uiService) {
+        this._elementRef = _elementRef;
+        this.uiService = uiService;
+        this.visible = true;
+        this.readonly = false;
+        this.parentIds = new Array();
+        this.focusedSection = new EventEmitter();
+        this.indicatorStatus = 'INACTIVE';
+    }
+    get elementId() {
+        return this.item ? this.item.instanceId : '';
+    }
+    ngOnInit() {
+        if (isConditionalItem(this.item)) {
+            this.visible = !this.item.hideOnDisable || !this.item.disabled;
+        }
+        this.uiService.registerSelf(this);
+        this._elementRef.nativeElement.classList.add(`mtna-wf-${getItemClassSuffix(this.item.itemId)}`);
+    }
+}
+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: { item: "item", readonly: "readonly", control: "control", parentIds: "parentIds", 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)=\"indicatorStatus = $event\"\n></mtna-annotations-indicator>\n\n<ng-container [ngSwitch]=\"item.itemId | getObjectType\">\n  <mtna-wf-section\n    *ngSwitchCase=\"'sectionimpl'\"\n    [control]=\"$any(control)\"\n    [item]=\"$any(item)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n    [step]=\"step\"\n    (focused)=\"focusedSection.emit($event)\"\n  ></mtna-wf-section>\n\n  <mtna-wf-group\n    *ngSwitchCase=\"'formitemgroupimpl'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-group>\n\n  <mtna-wf-repeatable-item-container\n    *ngSwitchCase=\"'repeatableitem'\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-repeatable-item-container>\n\n  <mtna-wf-value-item\n    *ngSwitchDefault\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"control\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && (!!item.descriptiveText || !!item.questionText)\"\n    [parentIds]=\"parentIds.concat(item.instanceId)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-value-item>\n</ng-container>\n", styles: ["mtna-wf-item{display:block;position:relative}mtna-wf-item mtna-annotations-indicator{position:absolute;top:0;right:0;z-index:2}\n"], components: [{ type: i0.forwardRef(function () { return i6$1.MtnaAnnotationsIndicatorComponent; }), selector: "mtna-annotations-indicator", inputs: ["color", "annotatableId", "annotatableItemName", "count"], outputs: ["status"] }, { type: i0.forwardRef(function () { return MtnaWfFormSectionComponent; }), selector: "mtna-wf-section", inputs: ["indicatorStatus", "item", "readonly", "step", "control", "parentIds"], outputs: ["focused"] }, { type: i0.forwardRef(function () { return MtnaWfFormGroupComponent; }), selector: "mtna-wf-group", inputs: ["control", "indicatorStatus", "item", "parentIds", "readonly"] }, { type: i0.forwardRef(function () { return RepeatableItemContainerComponent; }), selector: "mtna-wf-repeatable-item-container", inputs: ["indicatorStatus", "item", "control", "parentIds", "readonly"] }, { type: i0.forwardRef(function () { return ValueItemComponent; }), selector: "mtna-wf-value-item", inputs: ["control", "inList", "indicatorStatus", "item", "parentIds", "readonly"] }], directives: [{ type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i0.forwardRef(function () { return i7.MtnaHighlightDirective; }), selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }], pipes: { "async": i0.forwardRef(function () { return i3.AsyncPipe; }), "getObjectType": i0.forwardRef(function () { return GetObjectTypePipe; }) }, 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: [{
+                    selector: 'mtna-wf-item',
+                    templateUrl: './form-item.component.html',
+                    styleUrls: ['./form-item.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    animations: [MTNA_WF_EXPAND_COLLAPSE],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MtnaWfUIService }]; }, propDecorators: { visible: [{
+                type: HostBinding,
+                args: ['@mtnaWfExpandCollapse']
+            }], elementId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], item: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], parentIds: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], focusedSection: [{
+                type: Output
+            }] } });
+function getItemClassSuffix(itemId) {
+    // FIXME: surely there is a stronger/better way
+    switch (itemId) {
+        case FORM_ITEM_GROUP_IMPL_ID:
+            return 'group';
+        case SECTION_ID:
+            return 'section';
+        case TEXT_ITEM_ID:
+            return 'text';
+        case TITLE_ITEM_ID:
+            return 'title';
+        default:
+            return 'item';
+    }
+}
+/**
+ * A dialog that renders a form item.
+ */
+class MtnaWfFormItemDialogComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+    }
+}
+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: ["item", "readonly", "control", "parentIds", "step"], outputs: ["focusedSection"] }, { type: i2.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: [{
+                    selector: 'mtna-wf-form-item-dialog',
+                    templateUrl: 'form-item-dialog.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfFormItemDialogData, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+class MtnaWfFormSectionComponent {
+    constructor() {
+        this.indicatorStatus = 'INACTIVE';
+        this.readonly = false;
+        this.parentIds = new Array();
+        this.focused = new EventEmitter();
+    }
+    _trackByInstanceId(index, item) {
+        return item.instanceId;
+    }
+}
+MtnaWfFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormSectionComponent, selector: "mtna-wf-section", inputs: { indicatorStatus: "indicatorStatus", item: "item", readonly: "readonly", step: "step", control: "control", parentIds: "parentIds" }, outputs: { focused: "focused" }, ngImport: i0, template: "<mtna-wf-step-card [step]=\"step\" [subtitle]=\"item.descriptiveText\" (focused)=\"focused.emit($event)\">\n  <div cardContent>\n    <ng-container *ngFor=\"let subItem of item.items; trackBy: _trackByInstanceId\">\n      <mat-divider\n        *ngIf=\"(subItem.itemId | getObjectType) === 'formitemgroupimpl' && item.items.indexOf(subItem) !== 0\"\n        class=\"section-item-divider\"\n        [inset]=\"true\"\n      ></mat-divider>\n\n      <mtna-wf-item\n        [item]=\"subItem\"\n        [readonly]=\"readonly\"\n        [parentIds]=\"parentIds\"\n        [control]=\"!!control && !!control.controls ? control.controls[subItem.instanceId] : undefined\"\n        (focusedSection)=\"focused.emit($event)\"\n      ></mtna-wf-item>\n    </ng-container>\n  </div>\n</mtna-wf-step-card>\n", styles: [":host{display:block}mat-divider.mat-divider-horizontal.mat-divider-inset.section-item-divider{margin-top:8px;margin-bottom:8px}\n"], components: [{ type: MtnaWfStepCardComponent, selector: "mtna-wf-step-card", inputs: ["color", "step", "subtitle"], outputs: ["focused"] }, { type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "getObjectType": GetObjectTypePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-section',
+                    templateUrl: './form-section.component.html',
+                    styleUrls: ['./form-section.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], parentIds: [{
+                type: Input
+            }], focused: [{
+                type: Output
+            }] } });
+class MtnaWfFormGroupComponent {
+    constructor() {
+        this.indicatorStatus = 'INACTIVE';
+        this.parentIds = [];
+        this.readonly = false;
+        this.fullWidth = {
+            [PARAGRAPH_ANSWER_ITEM_ID]: true,
+            [FORM_ITEM_GROUP_IMPL_ID]: true,
+            [TEXT_ITEM_ID]: true,
+            [TITLE_ITEM_ID]: true,
+        };
+        /**
+         * If form is readonly & all child items are one of the specified types below,
+         * we want to display this group's child items in a mat-list
+         */
+        this.inList = false;
+    }
+    get item() {
+        return this._item;
+    }
+    set item(item) {
+        this._item = item;
+        if (this.item) {
+            // A list item can only display a heading line & a small text line
+            // Compatible items should be items with short labels/headers & values
+            // Items with multiple options, or potential nested items should not be included
+            this.inList = this.item.items.every((i) => i.itemId === SHORT_ANSWER_ITEM_ID || i.itemId === DROPDOWN_ITEM_ID);
+        }
+    }
+    _trackByInstanceId(index, section) {
+        return section.instanceId;
+    }
+}
+MtnaWfFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfFormGroupComponent, selector: "mtna-wf-group", inputs: { control: "control", indicatorStatus: "indicatorStatus", item: "item", parentIds: "parentIds", readonly: "readonly" }, 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-value-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-value-item>\n  </mat-list>\n</ng-container>\n", styles: ["mtna-annotations-indicator+mtna-wf-group .item-group-container{padding-top:24px}mtna-wf-group .mtna-wf-group-header{margin-top:1rem}mtna-wf-group .mtna-wf-group-description{margin-bottom:1rem}mtna-wf-group mat-list mat-list-item [mat-line]{letter-spacing:.5px}mtna-wf-group mtna-wf-multiple-choice-item{display:block}mtna-wf-group .item-group-container>.mtna-wf-group{margin-top:1rem}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item){padding-left:16px}mtna-wf-group .item-group-container>mtna-wf-item.mtna-wf-title~mtna-wf-item:not(.mtna-wf-title):not(.row-item).width-100{width:calc(100% - 16px)}mtna-wf-group .item-group-container>mtna-wf-item:first-of-type{margin-top:0}mtna-wf-group .item-group-container.ROW>mtna-wf-item{margin-top:0}mtna-wf-group .item-group-container.ROW>*{display:block}mtna-wf-group .item-group-container .row-item{width:calc(50% - 16px);display:inline-block;margin:0 8px}mtna-wf-group .item-group-container .width-100{width:100%}mtna-wf-group .item-group-container .width-100.row-item{width:calc(100% - 16px)}mtna-wf-group mtna-wf-item-header+.item-group-container{padding:.35em .75em .625em}mtna-wf-group mtna-wf-item-header+.item-group-container>mtna-wf-item{margin-top:0}\n"], components: [{ type: i0.forwardRef(function () { return ItemHeaderComponent; }), selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: i0.forwardRef(function () { return MtnaWfFormItemComponent; }), selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "step"], outputs: ["focusedSection"] }, { type: i0.forwardRef(function () { return i5$1.MatList; }), selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i0.forwardRef(function () { return ValueItemComponent; }), selector: "mtna-wf-value-item", inputs: ["control", "inList", "indicatorStatus", "item", "parentIds", "readonly"] }], directives: [{ type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i7.MtnaHighlightDirective; }), selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i0.forwardRef(function () { return i6.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i0.forwardRef(function () { return i6.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i14.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: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "mtnaWfItemsWithValue": i0.forwardRef(function () { return 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: [{
+                    selector: 'mtna-wf-group',
+                    templateUrl: './form-group.component.html',
+                    styleUrls: ['./form-group.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], parentIds: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+class RepeatableItemContainerComponent {
+    constructor(manager) {
+        this.manager = manager;
+        this.indicatorStatus = 'INACTIVE';
+        this.parentIds = new Array();
+        this.readonly = false;
+    }
+    addItem() {
+        this.manager.changeMtnaFormItem(new MtnaWfFormItemChange(this.item.repeatableTemplateId, this.parentIds, 'ADD'));
+    }
+    removeItem(item) {
+        const conditionChanges = this.manager.generateConditionChangeArray(item, 'REMOVE');
+        this.manager.changeMtnaFormItem(new MtnaWfFormItemChange(item.instanceId, this.parentIds, 'REMOVE', conditionChanges));
+    }
+}
+RepeatableItemContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RepeatableItemContainerComponent, deps: [{ token: MtnaWfManagerService }], target: i0.ɵɵFactoryTarget.Component });
+RepeatableItemContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RepeatableItemContainerComponent, selector: "mtna-wf-repeatable-item-container", inputs: { indicatorStatus: "indicatorStatus", item: "item", control: "control", parentIds: "parentIds", readonly: "readonly" }, 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    <button\n      *ngIf=\"!readonly && item.items.length > item.minOccurrences\"\n      mat-icon-button\n      class=\"item-remove-button\"\n      color=\"warn\"\n      (click)=\"removeItem(subitem)\"\n      matTooltip=\"Remove Item\"\n    >\n      <mat-icon>remove_circle</mat-icon>\n    </button>\n    <mtna-wf-item\n      [item]=\"subitem\"\n      [control]=\"!!control && !!control.controls ? control.controls[subitem.instanceId] : undefined\"\n      [readonly]=\"readonly\"\n      [parentIds]=\"parentIds\"\n    ></mtna-wf-item>\n  </mtna-wf-repeatable-item>\n</section>\n<button *ngIf=\"!readonly\" mat-raised-button (click)=\"addItem()\" class=\"new-item-button\" color=\"primary\">\n  {{ item.additionalText || 'ADD' | uppercase }}\n</button>\n", styles: ["mtna-wf-repeatable-item-container{display:block}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item{position:relative;padding:16px;border-style:dashed;border-width:4px;border-radius:4px;display:inline-block;margin:8px;max-width:100%}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item .item-remove-button{position:absolute;top:-22px;left:-22px}mtna-wf-repeatable-item-container>section>mtna-wf-repeatable-item>mtna-wf-item:first-child{margin-top:0}mtna-wf-repeatable-item-container .new-item-button{margin-left:.75em}mtna-wf-repeatable-item-container>section{padding-left:.75em}mtna-wf-repeatable-item-container>section,mtna-wf-repeatable-item-container .new-item-button{margin-top:16px}\n"], components: [{ type: ItemHeaderComponent, selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }, { type: RepeatableItemComponent, selector: "mtna-wf-repeatable-item" }, { type: i2.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: i18.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "step"], outputs: ["focusedSection"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "mtnaTrackByProperty": i7.MtnaTrackByPropertyPipe, "uppercase": i3.UpperCasePipe }, animations: [
+        trigger('repeatItemExpandCollapse', [
+            state('in', style({ height: '*', margin: '*', opacity: 1 })),
+            state('void', style({ height: 0, margin: 0, opacity: 0, visibility: 'hidden' })),
+            transition(':enter', [animate(COMPLEX_STANDARD, style({ height: '*', margin: '*', opacity: 1 }))]),
+            transition(':leave', animate(COMPLEX_STANDARD)),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RepeatableItemContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-repeatable-item-container',
+                    templateUrl: 'repeatable-item-container.component.html',
+                    styleUrls: [`repeatable-item-container.component.scss`],
+                    animations: [
+                        trigger('repeatItemExpandCollapse', [
+                            state('in', style({ height: '*', margin: '*', opacity: 1 })),
+                            state('void', style({ height: 0, margin: 0, opacity: 0, visibility: 'hidden' })),
+                            transition(':enter', [animate(COMPLEX_STANDARD, style({ height: '*', margin: '*', opacity: 1 }))]),
+                            transition(':leave', animate(COMPLEX_STANDARD)),
+                        ]),
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfManagerService }]; }, propDecorators: { indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], parentIds: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+class MtnaWfTableFormItemComponent {
+    constructor() {
+        this.indicatorStatus = 'INACTIVE';
+        this.readonly = false;
+        this.parentIds = new Array();
+    }
+    _trackByTableRow(index, row) {
+        return row.items
+            .filter((i) => !!i)
+            .map((item) => item.instanceId)
+            .join('');
+    }
+}
+MtnaWfTableFormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTableFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfTableFormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTableFormItemComponent, selector: "mtna-wf-table-item", inputs: { indicatorStatus: "indicatorStatus", item: "item", control: "control", readonly: "readonly", parentIds: "parentIds" }, 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: i20.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "step"], outputs: ["focusedSection"] }, { type: i20.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i20.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i20.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i20.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i20.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i20.MatCellDef, selector: "[matCellDef]" }, { type: i20.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i20.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i20.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: [{
+                    selector: 'mtna-wf-table-item',
+                    templateUrl: 'table-item.component.html',
+                    styleUrls: ['table-item.component.scss'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], parentIds: [{
+                type: Input
+            }] } });
+class ValueItemComponent {
+    constructor(cdf, cfResolver, formManager, logger, whiteList) {
+        this.cdf = cdf;
+        this.cfResolver = cfResolver;
+        this.formManager = formManager;
+        this.logger = logger;
+        this.whiteList = whiteList;
+        this.inList = false;
+        this.indicatorStatus = 'INACTIVE';
+        this.parentIds = new Array();
+        this.readonly = false;
+        /** The list of pre-existing(non-dynamic) item types
+         * If this item's itemId does not match one of the following, then
+         * this item is a dynamic component registered by the client application
+         * & requires the ComponentFactory to create the component.
+         */
+        this.fixedItemTypes = [
+            'booleanitem',
+            'bulletedlistitem',
+            'checkboxitem',
+            'dateitem',
+            'daterangeitem',
+            'decimalansweritem',
+            'documentationitem',
+            'dropdownitem',
+            'fileuploaditem',
+            'multiplechoiceitem',
+            'numberedlistitem',
+            'offsetdaterangeitem',
+            'paragraphansweritem',
+            'shortansweritem',
+            'tableitem',
+            'textitem',
+            'titleitem',
+            'wholenumberansweritem',
+            'yearquarterrangeitem',
+        ];
+    }
+    /**
+     * Sets a value on the control for any components that only emit a value &
+     * do not directly manipulate their control themselves, i.e. a FileUploadItem
+     *
+     * @param item the value to be set on the control
+     */
+    setValue(item) {
+        var _a, _b;
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.markAsDirty();
+        (_b = this.control) === null || _b === void 0 ? void 0 : _b.setValue(item);
+    }
+    /**
+     * Renders a dynamic component from a relevant type in the FormService (registered)components;
+     * ONLY if the item type(using itemId) does not match one of the existing fixedItemTypes
+     *
+     */
+    ngAfterViewInit() {
+        var _a, _b;
+        // Trim the itemId down to the relevant type
+        const newId = this.item.itemId.toLowerCase().split('.');
+        const type = newId[newId.length - 1];
+        // Check if type is not one of the fixedItemTypes
+        if (!this.fixedItemTypes.some((i) => i === type)) {
+            // Retrieve a relevant component type
+            const component = this.formManager.getDynamicComponent(type);
+            // if a type is returned, instantiate the component and set the input values, then mark
+            // the value item for changeDetection check
+            if (component) {
+                const componentFactory = this.cfResolver.resolveComponentFactory(component);
+                this.componentRef = (_a = this.itemHost) === null || _a === void 0 ? void 0 : _a.viewContainerRef.createComponent(componentFactory);
+                const instance = (_b = this.componentRef) === null || _b === void 0 ? void 0 : _b.instance;
+                if (instance) {
+                    for (const input of componentFactory.inputs) {
+                        const propName = input.propName;
+                        // Forcefully assign every input from this to instance
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        instance[propName] = this[propName];
+                    }
+                }
+                // Dynamic Component won't fire ngOnInit unless we detectChanges
+                this.cdf.detectChanges();
+            }
+            else if (!this.whiteList || !this.whiteList.itemTypes || !this.whiteList.itemTypes.some((t) => t === type)) {
+                this.logger.error(`No Component Found for ${type} - Ensure any dynamic components were registered in the service, or use the MtnaWfItemWhiteList to ignore this item.`);
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.componentRef) {
+            for (const prop in changes) {
+                if (Object.prototype.hasOwnProperty.call(changes, prop)) {
+                    const change = changes[prop];
+                    if (!change.firstChange && isKey(this.componentRef.instance, prop)) {
+                        this.componentRef.instance[prop] = change.currentValue;
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Used to destroy the componentRef to a dynamic component, if it was rendered.
+     *
+     */
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+    }
+}
+ValueItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValueItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: MtnaWfManagerService }, { token: i7.MtnaLogger }, { token: MTNA_WF_ITEM_WHITELIST, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ValueItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ValueItemComponent, selector: "mtna-wf-value-item", inputs: { control: "control", inList: "inList", indicatorStatus: "indicatorStatus", item: "item", parentIds: "parentIds", readonly: "readonly" }, viewQueries: [{ propertyName: "itemHost", first: true, predicate: MtnaWfFormItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"item.itemId | getObjectType\">\n  <h3 *ngSwitchCase=\"'titleitem'\" class=\"mtna-wf-title-item\" [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\">{{ item.value }}</h3>\n  <p\n    *ngSwitchCase=\"'textitem'\"\n    [innerHTML]=\"$any(item.value) | mtnaWfSanitizeHtml\"\n    class=\"mtna-wf-text-item\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n  ></p>\n\n  <mtna-wf-boolean-item\n    *ngSwitchCase=\"'booleanitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [mtnaHighlight]=\"indicatorStatus === 'ACTIVE'\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-boolean-item>\n\n  <mtna-wf-checkbox-item\n    *ngSwitchCase=\"'checkboxitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-checkbox-item>\n\n  <ng-container *ngSwitchCase=\"'dateitem'\">\n    <mtna-wf-date-item\n      *ngIf=\"item | coerceDateItem as dateItem\"\n      [header]=\"itemHeader\"\n      [indicatorStatus]=\"indicatorStatus\"\n      [format]=\"dateItem.format\"\n      [item]=\"dateItem\"\n      [control]=\"$any(control)\"\n      [readonly]=\"readonly\"\n    ></mtna-wf-date-item>\n  </ng-container>\n\n  <mtna-wf-date-range\n    *ngSwitchCase=\"'offsetdaterangeitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-date-range>\n\n  <mtna-wf-year-quarter-range-item\n    *ngSwitchCase=\"'yearquarterrangeitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-year-quarter-range-item>\n\n  <mtna-wf-dropdown-item\n    *ngSwitchCase=\"'dropdownitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [inList]=\"inList\"\n    [control]=\"$any(control)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-dropdown-item>\n\n  <mtna-wf-file-upload-item\n    *ngSwitchCase=\"'fileuploaditem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [readonly]=\"readonly\"\n    (file)=\"setValue($event)\"\n  ></mtna-wf-file-upload-item>\n\n  <mtna-wf-unordered-list-item\n    *ngSwitchCase=\"'bulletedlistitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n  ></mtna-wf-unordered-list-item>\n\n  <mtna-wf-ordered-list-item\n    *ngSwitchCase=\"'numberedlistitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n  ></mtna-wf-ordered-list-item>\n\n  <mtna-wf-multiple-choice-item\n    *ngSwitchCase=\"'multiplechoiceitem'\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [control]=\"$any(control)\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-multiple-choice-item>\n\n  <mtna-wf-input-item\n    *ngSwitchCase=\"'shortansweritem'\"\n    mtnaWfShortAnswerItem\n    [control]=\"$any(control)\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [inList]=\"inList\"\n    [item]=\"$any(item)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-input-item>\n\n  <mtna-wf-input-item\n    *ngSwitchCase=\"'paragraphansweritem'\"\n    mtnaWfParagraphItem\n    [control]=\"$any(control)\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [inList]=\"inList\"\n    [item]=\"$any(item)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-input-item>\n\n  <mtna-wf-table-item\n    *ngSwitchCase=\"'tableitem'\"\n    [control]=\"$any(control)\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [item]=\"$any(item)\"\n    [readonly]=\"readonly\"\n    [parentIds]=\"parentIds\"\n  ></mtna-wf-table-item>\n\n  <mtna-wf-input-item\n    *ngSwitchCase=\"'decimalansweritem'\"\n    mtnaWfDecimalItem\n    [control]=\"$any(control)\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [inList]=\"inList\"\n    [item]=\"$any(item)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-input-item>\n\n  <mtna-wf-input-item\n    *ngSwitchCase=\"'wholenumberansweritem'\"\n    mtnaWfWholeNumberItem\n    [control]=\"$any(control)\"\n    [header]=\"itemHeader\"\n    [indicatorStatus]=\"indicatorStatus\"\n    [inList]=\"inList\"\n    [item]=\"$any(item)\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-input-item>\n\n  <!-- DYNAMIC COMPONENT CONTAINER -->\n  <ng-template *ngSwitchDefault formItemHost></ng-template>\n</ng-container>\n\n<ng-template #itemHeader let-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", components: [{ type: i0.forwardRef(function () { return MtnaWfBooleanComponent; }), selector: "mtna-wf-boolean-item" }, { type: i0.forwardRef(function () { return MtnaWfCheckboxComponent; }), selector: "mtna-wf-checkbox-item", inputs: ["color"] }, { type: i0.forwardRef(function () { return MtnaWfDateComponent; }), selector: "mtna-wf-date-item", inputs: ["format", "rangeLimits"] }, { type: i0.forwardRef(function () { return MtnaWfDateRangeComponent; }), selector: "mtna-wf-date-range" }, { type: i0.forwardRef(function () { return MtnaWfYearQuarterRangeComponent; }), selector: "mtna-wf-year-quarter-range-item" }, { type: i0.forwardRef(function () { return MtnaWfDropdownComponent; }), selector: "mtna-wf-dropdown-item" }, { type: i0.forwardRef(function () { return MtnaWfFileUploadComponent; }), selector: "mtna-wf-file-upload-item", inputs: ["header", "indicatorStatus", "item", "readonly"], outputs: ["file"] }, { type: i0.forwardRef(function () { return MtnaWfUnorderedListItemComponent; }), selector: "mtna-wf-unordered-list-item", inputs: ["header", "indicatorStatus", "item"] }, { type: i0.forwardRef(function () { return MtnaWfOrderedListItemComponent; }), selector: "mtna-wf-ordered-list-item", inputs: ["header", "indicatorStatus", "item"] }, { type: i0.forwardRef(function () { return MtnaWfMultipleChoiceComponent; }), selector: "mtna-wf-multiple-choice-item" }, { type: i0.forwardRef(function () { return MtnaWfInputComponent; }), selector: "mtna-wf-input-item[mtnaWfDecimalItem],\n             mtna-wf-input-item[mtnaWfParagraphItem],\n             mtna-wf-input-item[mtnaWfShortAnswerItem],\n             mtna-wf-input-item[mtnaWfWholeNumberItem]," }, { type: i0.forwardRef(function () { return MtnaWfTableFormItemComponent; }), selector: "mtna-wf-table-item", inputs: ["indicatorStatus", "item", "control", "readonly", "parentIds"] }, { type: i0.forwardRef(function () { return ItemHeaderComponent; }), selector: "mtna-wf-item-header", inputs: ["descriptiveText", "disabled", "hideRequiredMarker", "invalid", "questionText", "required"] }], directives: [{ type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i0.forwardRef(function () { return i7.MtnaHighlightDirective; }), selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { type: i0.forwardRef(function () { return MtnaWfFormItemDirective; }), selector: "[formItemHost]" }], pipes: { "getObjectType": i0.forwardRef(function () { return GetObjectTypePipe; }), "mtnaWfSanitizeHtml": i0.forwardRef(function () { return MtnaWfSanitizeHtmlPipe; }), "coerceDateItem": i0.forwardRef(function () { return CoerceDateItemPipe; }) }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ValueItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-value-item',
+                    templateUrl: './value-item.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: MtnaWfManagerService }, { type: i7.MtnaLogger }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MTNA_WF_ITEM_WHITELIST]
+                }] }]; }, propDecorators: { itemHost: [{
+                type: ViewChild,
+                args: [MtnaWfFormItemDirective]
+            }], control: [{
+                type: Input
+            }], inList: [{
+                type: Input
+            }], indicatorStatus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], parentIds: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }] } });
+class MtnaWfMultipleChoiceComponent extends BaseSingleSelectionParent {
+    constructor(uiService) {
+        super(uiService);
+    }
+}
+MtnaWfMultipleChoiceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfMultipleChoiceComponent, deps: [{ token: MtnaWfUIService }], 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<ng-container *ngIf=\"control\">\n  <div class=\"mtna-wf-error-container\">\n    <ng-container *ngIf=\"control.invalid && (control.dirty || control.touched)\">\n      <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n        {{ error | mtnaWfGetControlError : item }}\n      </mat-error>\n    </ng-container>\n  </div>\n  <mat-radio-group class=\"control-item-content\" [formControl]=\"control\" (change)=\"selectionChange($event)\">\n    <ng-container *ngFor=\"let opt of item.options; trackBy: _trackByOptionId\">\n      <mat-radio-button [disableRipple]=\"readonly\" [value]=\"opt.option.id\">{{ opt.option.name }}</mat-radio-button>\n      <mtna-wf-item\n        *ngIf=\"item.optionItemMap[opt.option.id] as subItem\"\n        [item]=\"subItem\"\n        [control]=\"!!controlWrapper && !!controlWrapper.controls ? controlWrapper.controls[subItem.instanceId] : undefined\"\n        [parentIds]=\"parentIds.concat(opt.option.id)\"\n        [readonly]=\"readonly\"\n      ></mtna-wf-item>\n    </ng-container>\n  </mat-radio-group>\n</ng-container>\n", styles: [".mtna-wf-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n", "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: i32.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "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: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i32.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": MtnaGetFormControlErrorPipe }, 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: [{
+                    selector: 'mtna-wf-multiple-choice-item',
+                    templateUrl: 'multiple-choice.component.html',
+                    styleUrls: [
+                        `../form-item-controls/form-control.scss`,
+                        'multiple-choice.component.scss',
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfUIService }]; } });
+class MtnaWfBooleanComponent extends BaseParentItemControl {
+    constructor(uiService) {
+        super();
+        this.uiService = uiService;
+    }
+    toggleChange(change) {
+        this.uiService.toggleFormItems(this.item.option.enabledItems, this.item.option.disabledItems, change.checked, this.item.instanceId);
+    }
+    _trackByInstanceId(index, item) {
+        return item.value.instanceId;
+    }
+}
+MtnaWfBooleanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfBooleanComponent, deps: [{ 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 *ngIf=\"control\" [formControl]=\"control\" (change)=\"toggleChange($event)\">{{ item.option.option.name }}</mat-slide-toggle>\n<ng-container *ngIf=\"!!item.optionItemMap\">\n  <mtna-wf-item\n    *ngFor=\"let f of item.optionItemMap | keyvalue; trackBy: _trackByInstanceId\"\n    [item]=\"f.value\"\n    [control]=\"!!controlWrapper && controlWrapper.controls ? controlWrapper.controls[f.value.instanceId] : undefined\"\n    [parentIds]=\"parentIds\"\n    [readonly]=\"readonly\"\n  ></mtna-wf-item>\n  <ng-container> </ng-container\n></ng-container>\n", styles: [".mtna-wf-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n", "mtna-annotations-indicator+mtna-wf-value-item>mtna-wf-boolean-item{padding-right:24px}mtna-wf-boolean-item{display:block}mtna-wf-boolean-item .mat-slide-toggle{margin:4px 0}mtna-wf-boolean-item .mat-slide-toggle+mtna-wf-item{margin-top:0}mtna-wf-boolean-item .mat-slide-toggle~mtna-wf-item{padding-left:18px}mtna-wf-boolean-item.read-only .mat-slide-toggle.mat-disabled{opacity:.8}mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label,mtna-wf-boolean-item.read-only .mat-slide-toggle .mat-slide-toggle-label .mat-slide-toggle-bar .mat-slide-toggle-thumb-container{cursor:default}mtna-wf-boolean-item .mat-slide-toggle{height:auto;min-height:24px}mtna-wf-boolean-item .mat-slide-toggle>.mat-slide-toggle-label>.mat-slide-toggle-content{white-space:normal}\n"], components: [{ type: i35.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: ["item", "readonly", "control", "parentIds", "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: 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: [{
+                    selector: 'mtna-wf-boolean-item',
+                    templateUrl: 'boolean.component.html',
+                    styleUrls: [
+                        `../form-item-controls/form-control.scss`,
+                        'boolean.component.scss',
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfUIService }]; } });
+class MtnaWfCheckboxComponent extends BaseParentItemControl {
+    constructor(dialogService, uiService) {
+        super();
+        this.dialogService = dialogService;
+        this.uiService = uiService;
+        this.destroyed$ = new Subject();
+    }
+    handleChange(change, index) {
+        var _a;
+        const option = this.item.options[index];
+        const formControl = (_a = this.control) === null || _a === void 0 ? void 0 : _a.controls[index];
+        // If the user is trying to make a selection with something that has an acknowledgement,
+        // show the acknowledge dialog first to get their consent.
+        // Note: we don't need to show the acknowledgement if the user is unchecking the box.
+        if (option.acknowledgement && (formControl === null || formControl === void 0 ? void 0 : formControl.value)) {
+            // Revert the checkbox to an unchecked state until they agree to the acknowledgement
+            formControl === null || formControl === void 0 ? void 0 : formControl.setValue(false);
+            this.dialogService
+                .verifyAcknowledgement(option.acknowledgement)
+                .pipe(takeUntil(this.destroyed$))
+                .subscribe((acknowledged) => {
+                if (acknowledged) {
+                    formControl === null || formControl === void 0 ? void 0 : formControl.setValue(true);
+                    this.uiService.toggleFormItems(option.enabledItems, option.disabledItems, change.checked, this.item.instanceId);
+                }
+            });
+        }
+        else {
+            this.uiService.toggleFormItems(option.enabledItems, option.disabledItems, change.checked, this.item.instanceId);
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    /**
+     * Display what the user already acknowledged for a given option.
+     * @param event the browser event when the button was invoked
+     * @param acknowledgementItem The form item that represents the acknowledgement text to display to the user.
+     * */
+    showAcknowledgement(event, acknowledgementItem) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.dialogService.showAcknowledgement(acknowledgementItem);
+    }
+    /**
+     * Stop a browser event from propagating
+     * @param event the event to stop
+     */
+    stopEventPropagation(event) {
+        event.stopPropagation();
+    }
+}
+MtnaWfCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfCheckboxComponent, deps: [{ token: MtnaWfDialogService }, { token: MtnaWfUIService }], target: i0.ɵɵFactoryTarget.Component });
+MtnaWfCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfCheckboxComponent, selector: "mtna-wf-checkbox-item", inputs: { color: "color" }, 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      (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-control-item .mat-form-field{width:100%}.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}\n", "mtna-wf-checkbox-item{display:flex;flex-direction:column;position:relative}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: i36.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: i2.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: i18.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "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: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i7.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: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaGetFormControlErrorPipe }, 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: [{
+                    selector: 'mtna-wf-checkbox-item',
+                    templateUrl: 'checkbox.component.html',
+                    styleUrls: [
+                        `../form-item-controls/form-control.scss`,
+                        'checkbox.component.scss',
+                    ],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfDialogService }, { type: MtnaWfUIService }]; }, propDecorators: { color: [{
+                type: Input
+            }] } });
+
+class MtnaWfFormComponent extends mixinDestroyNotifier(class {
+}) {
+    constructor(mtnaFormManager, ngFormService, uiService) {
+        super();
+        this.mtnaFormManager = mtnaFormManager;
+        this.ngFormService = ngFormService;
+        this.uiService = uiService;
+        this._emitStatusOnMtnaFormChange = false;
+        this.readonly$ = new BehaviorSubject(true);
+        /**
+         * Emitted every time a form control's validation status changes.
+         * The `id` is the form control's name and the `status` is the new validation status for the control.
+         */
+        this.status = new EventEmitter();
+        this.focusedSection = new EventEmitter();
+        this.mtnaFormChange = new EventEmitter();
+        this.componentIds = [];
+        this._hasPreviousForm = false;
+        this._initialStatusEmitted = false;
+        this._constructionDate = new Date();
+        // Initialize the subscription to observe input changes
+        this._subscribeAndEmitMtnaFormChanges();
+    }
+    set annotations(map) {
+        this.uiService.registerAnnotations(map);
+    }
+    /** Whether to emit the status of each step each time the {@link mtnaForm} is set to a new value. Defaults to false.*/
+    get emitStatusOnMtnaFormChange() {
+        return this._emitStatusOnMtnaFormChange;
+    }
+    set emitStatusOnMtnaFormChange(emitStatusOnMtnaFormChange) {
+        this._emitStatusOnMtnaFormChange = coerceBooleanProperty(emitStatusOnMtnaFormChange);
+    }
+    get mtnaForm() {
+        return this._mtnaForm;
+    }
+    set mtnaForm(form) {
+        if (!!form && !this.ngForm) {
+            // serialize the form when input is set the first time
+            this._handleFormSerialization(form);
+            this._checkAndSubscribeToFormStatus();
+        }
+        this._mtnaForm = form;
+        if (form) {
+            this.mtnaFormManager.setMtnaForm(form);
+            // If indicated, re-emit the status of each step when there is a new form
+            if (this.emitStatusOnMtnaFormChange && this.ngForm) {
+                for (const key in this._steps) {
+                    if (Object.prototype.hasOwnProperty.call(this._steps, key)) {
+                        this._emitFormControlStatus(key);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * The form can contain sections not included in the steps.
+     * To avoid misalignment of steps-to-sections, we map each step to
+     * its instanceId
+     */
+    set steps(newSteps) {
+        if (!!newSteps && !!newSteps.length) {
+            if (!this._steps) {
+                this._steps = {};
+            }
+            for (const step of newSteps) {
+                this._steps[step.instanceId] = step;
+            }
+            this._checkAndSubscribeToFormStatus();
+        }
+    }
+    get readonly() {
+        return this.readonly$.value;
+    }
+    set readonly(r) {
+        const newValue = coerceBooleanProperty(r);
+        if (newValue !== this.readonly$.value) {
+            this.readonly$.next(r);
+        }
+    }
+    ngAfterViewInit() {
+        const afterViewInitDate = new Date();
+        const secondsToRender = (afterViewInitDate.getTime() - this._constructionDate.getTime()) / 1000;
+        console.warn('[MtnaFormComponent] afterViewInit - took ', secondsToRender, ' to render');
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.uiService.resetComponentMap();
+    }
+    _trackByInstanceId(index, formItem) {
+        return formItem.instanceId;
+    }
+    /** Subscribe and emit form status changes for the steps. */
+    _checkAndSubscribeToFormStatus() {
+        // Only subscribe once both the steps and the angular have been initialized
+        if (this.ngForm && this._steps) {
+            // Update form status subscriptions anytime the readonly input changes
+            this.readonly$.pipe(takeUntil(this.destroyed$), distinctUntilChanged()).subscribe((readonly) => {
+                if (readonly) {
+                    // Don't emit statuses while form is in readonly
+                    this._unsubscribeFromNgFormChanges();
+                }
+                else if (!this._ngFormStatusChangeSub || this._ngFormStatusChangeSub.closed) {
+                    // For performance, subscribe should only trigger again if the subscription didn't previously exist
+                    this._emitInitialStepsStatusAndSubscribeToChanges(!this._initialStatusEmitted);
+                    this._initialStatusEmitted = true;
+                }
+            });
+        }
+    }
+    /**
+     * 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.
+     */
+    _emitFormControlStatus(name) {
+        if (this.ngForm) {
+            const control = findFormControl(name, this.ngForm);
+            if (control) {
+                this.status.emit({
+                    id: name,
+                    status: control.status,
+                });
+            }
+        }
+    }
+    /**
+     * @param emitInitialValues Whether to emit initial step values or just listen for future changes
+     */
+    _emitInitialStepsStatusAndSubscribeToChanges(emitInitialValues) {
+        if (this._steps && this.ngForm) {
+            this._unsubscribeFromNgFormChanges();
+            this._ngFormStatusChangeSub = new Subscription();
+            // Find the form control for each step and only subscribe to those.
+            for (const key in this._steps) {
+                if (Object.prototype.hasOwnProperty.call(this._steps, key)) {
+                    const control = findFormControl(key, this.ngForm);
+                    if (control) {
+                        if (emitInitialValues) {
+                            this.status.emit({
+                                id: key,
+                                // Angular introduced this status in v13, once we update, this type cast can be removed.
+                                status: control.status,
+                            });
+                        }
+                        // 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 })));
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Observes input changes for readOnly, in order to handle internal change subscriptions.
+     * When the form is not readonly, we subscribe to form status & form item changes, so we can emit them.
+     * When the form is readonly, we do not want to emit any changes, so we unsubscribe.
+     */
+    _subscribeAndEmitMtnaFormChanges() {
+        this.readonly$
+            .pipe(takeUntil(this.destroyed$), 
+        // we don't want to create subscriptions until we have a form to subscribe to
+        skipWhile(() => !this.mtnaForm), distinctUntilChanged())
+            .subscribe((readonly) => {
+            if (readonly) {
+                this._unsubscribeFromMtnaFormChanges();
+            }
+            else if (!this._mtnaFormItemChangeSub || this._mtnaFormItemChangeSub.closed) {
+                // For performance, subscribe should only trigger again if one of the subscriptions didn't previously exist
+                this._subscribeToMtnaFormItemChanges();
+            }
+        });
+    }
+    _handleFormSerialization(form) {
+        // Get the registered form from the service if it exists
+        this._hasPreviousForm = this.ngFormService.hasForm();
+        if (this._hasPreviousForm) {
+            this.ngForm = this.ngFormService.getForm();
+            // FIXME this is necessary because the initial visiblity is based on the mtnaForm item's disable property
+            // If the user changes a value, goes to another tab (destroying form) and comes back, the initial values are incorrect
+            this.mtnaForm = this.mtnaFormManager.insertNewValues(form, this.ngFormService.getFormValue());
+        }
+        else {
+            this.ngForm = this.mtnaFormManager.serializeMtnaFormItem(form);
+            this.ngFormService.setForm(this.ngForm);
+        }
+    }
+    /**
+     * Adds or removes a FormItem whenever a new MtnaWfFormItemChange occurs,
+     * and emits a new MtnaForm.
+     */
+    _subscribeToMtnaFormItemChanges() {
+        this._unsubscribeFromMtnaFormChanges();
+        this._mtnaFormItemChangeSub = this.mtnaFormManager.formChanges
+            .pipe(takeUntil(this.destroyed$), skipWhile((change) => !change))
+            .subscribe((newForm) => this.mtnaFormChange.emit(newForm));
+    }
+    _unsubscribeFromNgFormChanges() {
+        if (!!this._ngFormStatusChangeSub && !this._ngFormStatusChangeSub.closed) {
+            this._ngFormStatusChangeSub.unsubscribe();
+        }
+    }
+    _unsubscribeFromMtnaFormChanges() {
+        if (!!this._mtnaFormItemChangeSub && !this._mtnaFormItemChangeSub.closed) {
+            this._mtnaFormItemChangeSub.unsubscribe();
+        }
+    }
+}
+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}mtna-form mtna-annotations-indicator+mtna-wf-value-item .mtna-wf-title-item,mtna-form mtna-annotations-indicator+mtna-wf-value-item .mtna-wf-text-item{padding-right:24px}\n"], components: [{ type: MtnaWfFormDisablerComponent, selector: "[formDisabled]", inputs: ["formDisabled"] }, { type: MtnaWfFormItemComponent, selector: "mtna-wf-item", inputs: ["item", "readonly", "control", "parentIds", "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,
+                }]
+        }], ctorParameters: function () { return [{ type: MtnaWfManagerService }, { type: MtnaWfNgFormService }, { type: MtnaWfUIService }]; }, propDecorators: { annotations: [{
+                type: Input
+            }], emitStatusOnMtnaFormChange: [{
+                type: Input
+            }], mtnaForm: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], status: [{
+                type: Output
+            }], focusedSection: [{
+                type: Output
+            }], mtnaFormChange: [{
+                type: Output
+            }] } });
+
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+const _FormStepMixinBase$1 = mixinColor(class {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}, 'primary');
+class MtnaWfFormStepComponent extends _FormStepMixinBase$1 {
+    constructor(elementRef) {
+        super(elementRef);
+        this.disabled = false;
+        this._clickable = true;
+    }
+    get step() {
+        return this._step;
+    }
+    set step(step) {
+        this._step = step;
+        this.disabled = step.status === 'DISABLED';
+    }
+    get clickable() {
+        return !this.disabled && this._clickable;
+    }
+    set clickable(clickable) {
+        this._clickable = clickable;
+    }
+    /**
+     * Prevents click event if this step is not clickable
+     */
+    _haltClickEvent(event) {
+        if (!this.clickable) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+}
+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
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      matRipple
+      [matRippleDisabled]="!clickable"
+      [class.active-step]="step.active"
+      (click)="_haltClickEvent($event)"
+    >
+      <mtna-status-circle
+        [color]="color"
+        [circleNumber]="step.num"
+        [incompleteIcon]="incompleteIcon"
+        [optional]="step.optional"
+        [status]="step.status"
+      ></mtna-status-circle>
+      <div fxLayout="column" fxFlex="100">
+        <p class="step-title">{{ step.label }}</p>
+        <p *ngIf="step.optional || disabled" class="step-status">{{ disabled ? step.disabledText || 'Not Applicable' : 'Optional' }}</p>
+      </div>
+    </li>
+  `, isInline: true, 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: i7.MtnaStatusCircleComponent, selector: "mtna-status-circle", inputs: ["color", "circleNumber", "incompleteIcon", "status", "validIcon", "optional"] }], directives: [{ type: i3$3.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$3.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: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i3$3.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: [{
+                    selector: 'mtna-wf-step',
+                    template: `
+    <li
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      matRipple
+      [matRippleDisabled]="!clickable"
+      [class.active-step]="step.active"
+      (click)="_haltClickEvent($event)"
+    >
+      <mtna-status-circle
+        [color]="color"
+        [circleNumber]="step.num"
+        [incompleteIcon]="incompleteIcon"
+        [optional]="step.optional"
+        [status]="step.status"
+      ></mtna-status-circle>
+      <div fxLayout="column" fxFlex="100">
+        <p class="step-title">{{ step.label }}</p>
+        <p *ngIf="step.optional || disabled" class="step-status">{{ disabled ? step.disabledText || 'Not Applicable' : 'Optional' }}</p>
+      </div>
+    </li>
+  `,
+                    styleUrls: ['form-step.component.scss'],
+                    inputs: ['color'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }], step: [{
+                type: Input
+            }], clickable: [{
+                type: HostBinding,
+                args: ['class.clickable']
+            }, {
+                type: Input
+            }], incompleteIcon: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+const _FormStepMixinBase = mixinColor(class {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}, 'primary');
+class MtnaWfFormStepGroupComponent extends _FormStepMixinBase {
+    constructor(elementRef) {
+        super(elementRef);
+        /** Whether all but the first step is hidden*/
+        this.collapsed = false;
+        this._steps = [];
+        this.selected = new EventEmitter();
+    }
+    /** Steps to be displayed */
+    get steps() {
+        return this._steps;
+    }
+    set steps(steps) {
+        this._steps = steps;
+    }
+}
+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">
+      <mtna-wf-step
+        [clickable]="step.status !== 'DISABLED'"
+        [color]="color"
+        [incompleteIcon]="incompleteIcon"
+        [step]="step"
+        (click)="selected.emit(step)"
+      ></mtna-wf-step>
+      <mat-divider *ngIf="!last" [vertical]="true"></mat-divider>
+      <p *ngIf="collapsed" class="show-more mat-caption">and {{ steps.length - 1 }} more...</p>
+    </ng-container>
+    <button
+      mat-icon-button
+      class="collapse-button"
+      [color]="color"
+      (click)="collapsed = !collapsed"
+      [matTooltip]="collapsed ? 'View All' : 'Hide'"
+    >
+      <mat-icon>{{ collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>
+    </button>
+  `, isInline: true, 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: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i2.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: i18.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: i19.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: [{
+                    selector: 'mtna-wf-step-group',
+                    template: `
+    <ng-container *ngFor="let step of steps | slice : 0 : (collapsed ? 1 : steps.length); let last = last">
+      <mtna-wf-step
+        [clickable]="step.status !== 'DISABLED'"
+        [color]="color"
+        [incompleteIcon]="incompleteIcon"
+        [step]="step"
+        (click)="selected.emit(step)"
+      ></mtna-wf-step>
+      <mat-divider *ngIf="!last" [vertical]="true"></mat-divider>
+      <p *ngIf="collapsed" class="show-more mat-caption">and {{ steps.length - 1 }} more...</p>
+    </ng-container>
+    <button
+      mat-icon-button
+      class="collapse-button"
+      [color]="color"
+      (click)="collapsed = !collapsed"
+      [matTooltip]="collapsed ? 'View All' : 'Hide'"
+    >
+      <mat-icon>{{ collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>
+    </button>
+  `,
+                    styleUrls: ['form-step-group.component.scss'],
+                    inputs: ['color'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { collapsed: [{
+                type: Input
+            }], incompleteIcon: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
+/**
+ * Pipe to determine if a FormStep is a FormStepGroup or a single step.
+ */
+class MtnaWfFormStepGroupPipe {
+    transform(step) {
+        return isFormStepGroup(step);
+    }
+}
+MtnaWfFormStepGroupPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+MtnaWfFormStepGroupPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepGroupPipe, name: "mtnaWfStepGroupPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepGroupPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mtnaWfStepGroupPipe',
+                }]
+        }] });
+
+function everyStepStatus(statusToCheck, steps, a, b, c) {
+    if (!steps || !steps.length) {
+        return false;
+    }
+    let exclusionIds = c || [];
+    let includeDisabled = false;
+    let includeOptional = false;
+    // If 'a' is not null, determine if it's the 'includeDisabled' boolean, or the exclusionIds array
+    if (a !== null && a !== undefined) {
+        if (Array.isArray(a)) {
+            exclusionIds = a;
+        }
+        else {
+            includeDisabled = a;
+            includeOptional = b || false;
+        }
+    }
+    return steps
+        .filter((s) => 
+    // Step ID is not excluded
+    !exclusionIds.some((id) => id === s.instanceId) &&
+        // Step status is not disabled, unless checking for disabled status
+        (includeDisabled ? true : s.status !== 'DISABLED') &&
+        // Step is required, unless optional steps should be checked
+        (includeOptional ? true : !s.optional))
+        .every((s) => s.status === statusToCheck);
+}
+
+/* eslint-disable @angular-eslint/no-inputs-metadata-property */
+const _FormStepperMixinBase = mixinColor(class {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+}, 'primary');
+/**
+ * Vertical stepper component, ability to show step statuses and allows clicking each step.
+ *
+ * @export
+ * @author Will Davis <will.davis@mtna.us>
+ */
+class MtnaWfFormStepperComponent extends _FormStepperMixinBase {
+    constructor(elementRef) {
+        super(elementRef);
+        /** Form steps */
+        this.steps = [];
+        /** When a step is selected */
+        this.selected = new EventEmitter();
+    }
+    /**
+     * Improves effeciency of the *ngFor loop that creates the steps.
+     *
+     * @param index index of loop
+     * @param step current step in loop
+     * @returns unique string to key each item in the loop
+     */
+    _trackStep(index, step) {
+        return step.instanceId || index;
+    }
+}
+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>
+      <ng-container *ngFor="let step of steps; let last = last; trackBy: _trackStep">
+        <ng-container
+          [ngTemplateOutlet]="(step | mtnaWfStepGroupPipe) ? groupStep : singleStep"
+          [ngTemplateOutletContext]="{ $implicit: step }"
+        ></ng-container>
+        <mat-divider *ngIf="!last" [vertical]="true"></mat-divider>
+      </ng-container>
+      <ng-template #singleStep let-step>
+        <mtna-wf-step
+          [clickable]="step.status !== 'DISABLED'"
+          [color]="color"
+          [step]="step"
+          [incompleteIcon]="incompleteIcon"
+          (click)="selected.emit(step)"
+        ></mtna-wf-step>
+      </ng-template>
+      <ng-template #groupStep let-step>
+        <mtna-wf-step-group
+          [collapsed]="step.collapsed"
+          [color]="color"
+          [incompleteIcon]="incompleteIcon"
+          [steps]="step.steps"
+          (selected)="selected.emit($event)"
+        ></mtna-wf-step-group>
+      </ng-template>
+    </ol>
+  `, isInline: true, 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: i3$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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mtna-wf-stepper',
+                    template: `
+    <ol>
+      <ng-container *ngFor="let step of steps; let last = last; trackBy: _trackStep">
+        <ng-container
+          [ngTemplateOutlet]="(step | mtnaWfStepGroupPipe) ? groupStep : singleStep"
+          [ngTemplateOutletContext]="{ $implicit: step }"
+        ></ng-container>
+        <mat-divider *ngIf="!last" [vertical]="true"></mat-divider>
+      </ng-container>
+      <ng-template #singleStep let-step>
+        <mtna-wf-step
+          [clickable]="step.status !== 'DISABLED'"
+          [color]="color"
+          [step]="step"
+          [incompleteIcon]="incompleteIcon"
+          (click)="selected.emit(step)"
+        ></mtna-wf-step>
+      </ng-template>
+      <ng-template #groupStep let-step>
+        <mtna-wf-step-group
+          [collapsed]="step.collapsed"
+          [color]="color"
+          [incompleteIcon]="incompleteIcon"
+          [steps]="step.steps"
+          (selected)="selected.emit($event)"
+        ></mtna-wf-step-group>
+      </ng-template>
+    </ol>
+  `,
+                    styleUrls: ['form-stepper.component.scss'],
+                    inputs: ['color'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { incompleteIcon: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
+class MtnaWfFormStepperModule {
+}
+MtnaWfFormStepperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MtnaWfFormStepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperModule, declarations: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepperComponent], imports: [CommonModule,
+        FlexLayoutModule,
+        MatDividerModule,
+        MtnaStatusCircleModule,
+        MatRippleModule,
+        MatButtonModule,
+        MatTooltipModule,
+        MatIconModule], exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepperComponent] });
+MtnaWfFormStepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperModule, imports: [[
+            CommonModule,
+            FlexLayoutModule,
+            MatDividerModule,
+            MtnaStatusCircleModule,
+            MatRippleModule,
+            MatButtonModule,
+            MatTooltipModule,
+            MatIconModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfFormStepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FlexLayoutModule,
+                        MatDividerModule,
+                        MtnaStatusCircleModule,
+                        MatRippleModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                    ],
+                    exports: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepperComponent],
+                    declarations: [MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepperComponent],
+                }]
+        }] });
+
+class MtnaFormModule {
+}
+MtnaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MtnaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaFormModule, declarations: [ItemHeaderComponent,
+        MtnaWfAcknowledgeDialogComponent,
+        MtnaWfBooleanComponent,
+        MtnaWfCheckboxComponent,
+        MtnaWfDateComponent,
+        MtnaWfDateRangeComponent,
+        MtnaWfDropdownComponent,
+        MtnaWfFileUploadComponent,
+        MtnaWfFormComponent,
+        MtnaWfFormDisablerComponent,
+        MtnaWfFormGroupComponent,
+        MtnaWfFormItemComponent,
+        MtnaWfFormItemDialogComponent,
+        MtnaWfFormItemDirective,
+        MtnaWfFormSectionComponent,
+        MtnaWfInputComponent,
+        MtnaWfMultipleChoiceComponent,
+        MtnaWfOrderedListItemComponent,
+        MtnaWfStepCardComponent,
+        MtnaWfTableFormItemComponent,
+        MtnaWfUnorderedListItemComponent,
+        MtnaWfYearQuarterComponent,
+        MtnaWfYearQuarterRangeComponent,
+        RepeatableItemComponent,
+        RepeatableItemContainerComponent,
+        ValueItemComponent], imports: [A11yModule,
+        CommonModule,
+        FlexLayoutModule,
+        FormsModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMomentDateModule,
+        MatOptionModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSlideToggleModule,
+        MatTableModule,
+        MatTooltipModule,
+        MtnaAnnotationsIndicatorModule,
+        MtnaFileDownloadModule,
+        MtnaFileUploadModule,
+        MtnaHighlightModule,
+        MtnaStatusCircleModule,
+        MtnaStatusCircleModule,
+        MtnaTrackByPropertyPipeModule,
+        MtnaWfFormStepperModule,
+        PipesModule,
+        ReactiveFormsModule], exports: [MtnaWfStepCardComponent, MtnaWfFormStepperComponent, MtnaWfFormComponent, PipesModule] });
+MtnaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaFormModule, providers: [{ provide: ErrorStateMatcher, useClass: MtnaWfInstantValidationResultErrorStateMatcher }], imports: [[
+            A11yModule,
+            CommonModule,
+            FlexLayoutModule,
+            FormsModule,
+            MatAutocompleteModule,
+            MatButtonModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatListModule,
+            MatMomentDateModule,
+            MatOptionModule,
+            MatProgressSpinnerModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSlideToggleModule,
+            MatTableModule,
+            MatTooltipModule,
+            MtnaAnnotationsIndicatorModule,
+            MtnaFileDownloadModule,
+            MtnaFileUploadModule,
+            MtnaHighlightModule,
+            MtnaStatusCircleModule,
+            MtnaStatusCircleModule,
+            MtnaTrackByPropertyPipeModule,
+            MtnaWfFormStepperModule,
+            PipesModule,
+            ReactiveFormsModule,
+        ], PipesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        A11yModule,
+                        CommonModule,
+                        FlexLayoutModule,
+                        FormsModule,
+                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatListModule,
+                        MatMomentDateModule,
+                        MatOptionModule,
+                        MatProgressSpinnerModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatTableModule,
+                        MatTooltipModule,
+                        MtnaAnnotationsIndicatorModule,
+                        MtnaFileDownloadModule,
+                        MtnaFileUploadModule,
+                        MtnaHighlightModule,
+                        MtnaStatusCircleModule,
+                        MtnaStatusCircleModule,
+                        MtnaTrackByPropertyPipeModule,
+                        MtnaWfFormStepperModule,
+                        PipesModule,
+                        ReactiveFormsModule,
+                    ],
+                    declarations: [
+                        ItemHeaderComponent,
+                        MtnaWfAcknowledgeDialogComponent,
+                        MtnaWfBooleanComponent,
+                        MtnaWfCheckboxComponent,
+                        MtnaWfDateComponent,
+                        MtnaWfDateRangeComponent,
+                        MtnaWfDropdownComponent,
+                        MtnaWfFileUploadComponent,
+                        MtnaWfFormComponent,
+                        MtnaWfFormDisablerComponent,
+                        MtnaWfFormGroupComponent,
+                        MtnaWfFormItemComponent,
+                        MtnaWfFormItemDialogComponent,
+                        MtnaWfFormItemDirective,
+                        MtnaWfFormSectionComponent,
+                        MtnaWfInputComponent,
+                        MtnaWfMultipleChoiceComponent,
+                        MtnaWfOrderedListItemComponent,
+                        MtnaWfStepCardComponent,
+                        MtnaWfTableFormItemComponent,
+                        MtnaWfUnorderedListItemComponent,
+                        MtnaWfYearQuarterComponent,
+                        MtnaWfYearQuarterRangeComponent,
+                        RepeatableItemComponent,
+                        RepeatableItemContainerComponent,
+                        ValueItemComponent,
+                    ],
+                    providers: [{ provide: ErrorStateMatcher, useClass: MtnaWfInstantValidationResultErrorStateMatcher }],
+                    exports: [MtnaWfStepCardComponent, MtnaWfFormStepperComponent, MtnaWfFormComponent, PipesModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseFormItemControl, BaseFormStep, COMPLEX_STANDARD, CoerceDateItemPipe, DEFAULT_ERROR_MESSAGES, DateQuarterPipe, FormStep, FormStepGroup, GetAutoCompletePipe, GetListIconPipe, GetObjectTypePipe, ItemHeaderComponent, MTNA_WF_API_TOKEN, MTNA_WF_DEFAULT_YEAR_RANGE, MTNA_WF_EXPAND_COLLAPSE, MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME, MTNA_WF_ITEM_WHITELIST, MTNA_WF_ITEM_WHITELIST_FACTORY, MtnaFormModule, MtnaGetFormControlErrorPipe, MtnaWfAcknowledgeDialogComponent, MtnaWfApiService, MtnaWfBooleanComponent, MtnaWfCheckboxComponent, MtnaWfCoerceFormGroupPipe, MtnaWfDateComponent, MtnaWfDateRangeComponent, MtnaWfDialogService, MtnaWfDropdownComponent, MtnaWfFileUploadComponent, MtnaWfFormComponent, MtnaWfFormGroupComponent, MtnaWfFormItemComponent, MtnaWfFormItemDialogComponent, MtnaWfFormSectionComponent, MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepperComponent, MtnaWfFormStepperModule, MtnaWfGetAvailableQuartersPipe, MtnaWfGetSelectedOptionNamePipe, MtnaWfInputComponent, MtnaWfInstantValidationResultErrorStateMatcher, MtnaWfItemsWithValuePipe, MtnaWfManagerService, MtnaWfMultipleChoiceComponent, MtnaWfNgFormService, MtnaWfOrderedListItemComponent, MtnaWfSanitizeHtmlPipe, serializerUtil as MtnaWfSerializer, MtnaWfStepCardComponent, MtnaWfTableFormItemComponent, MtnaWfUIService, MtnaWfUnorderedListItemComponent, MtnaWfYearQuarterComponent, MtnaWfYearQuarterRangeComponent, PipesModule, RepeatableItemComponent, RepeatableItemContainerComponent, ValueItemComponent, WEB_FORM_CUSTOM_ERRORS, everyStepStatus, findFormControl, findFormItem, flattenSteps, generateFormSteps, isFormGroup, isFormStepGroup, updateStepStatus, validationResultValidator };
+//# sourceMappingURL=mtna-web-form-angular.js.map