@mtna/web-form-angular 1.0.6-SNAPSHOT.22 → 1.0.6-SNAPSHOT.24

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Optional, Inject, Component, Input, HostBinding, EventEmitter, Output, Pipe, NgModule, ChangeDetectionStrategy, ViewEncapsulation, HostListener, ViewChild, LOCALE_ID } from '@angular/core';
+import { Injectable, InjectionToken, Optional, Inject, Component, Input, HostBinding, EventEmitter, Output, Injector, Pipe, NgModule, ChangeDetectionStrategy, ViewEncapsulation, HostListener, ViewChild, LOCALE_ID } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { BOOLEAN_ITEM_TEMPLATE_ID, CHECKBOX_ITEM_TEMPLATE_ID, OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID, YEAR_QUARTER_RANGE_ITEM_TEMPLATE_ID, DATE_ITEM_TEMPLATE_ID, DECIMAL_ANSWER_ITEM_TEMPLATE_ID, DROPDOWN_ITEM_TEMPLATE_ID, FILE_UPLOAD_ITEM_TEMPLATE_ID, INTERNATIONALIZED_PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID, INTERNATIONALIZED_SHORT_ANSWER_ITEM_TEMPLATE_ID, MULTIPLE_CHOICE_ITEM_TEMPLATE_ID, NUMBERED_LIST_ITEM_TEMPLATE_ID, PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID, REPEATABLE_ITEM_TEMPLATE_IMPL_ID, TEMPLATE_SECTION_IMPL_ID, SHORT_ANSWER_ITEM_TEMPLATE_ID, TEMPLATE_ITEM_GROUP_IMPL_ID, TEXT_ITEM_TEMPLATE_ID, TITLE_ITEM_TEMPLATE_ID, BULLETED_LIST_ITEM_TEMPLATE_ID, WHOLE_NUMBER_ANSWER_ITEM_TEMPLATE_ID, TIME_ITEM_TEMPLATE_ID, TEMPLATE_IMPL_ID, REQUEST_ID_ITEM_TEMPLATE_ID, MULTIPLE_CHOICE_GRID_ITEM_TEMPLATE_ID, LINEAR_SCALE_ITEM_TEMPLATE_ID, HIDDEN_REFERENCE_ITEM_TEMPLATE_ID, CHECKBOX_GRID_TEMPLATE_ID, instanceOfBooleanItemTemplate, instanceOfBulletedListItemTemplate, instanceOfCheckboxGridTemplate, instanceOfCheckboxItemTemplate, instanceOfDateItemTemplate, instanceOfDecimalAnswerItemTemplate, instanceOfDropdownItemTemplate, instanceOfFileUploadItemTemplate, instanceOfHiddenReferenceItemTemplate, instanceOfInternationalizedParagraphAnswerItemTemplate, instanceOfInternationalizedShortAnswerItemTemplate, instanceOfLinearScaleItemTemplate, instanceOfMultipleChoiceGridItemTemplate, instanceOfMultipleChoiceItemTemplate, instanceOfNumberedListItemTemplate, instanceOfOffsetDateRangeTemplate, instanceOfParagraphAnswerItemTemplate, instanceOfRepeatableItemTemplate, instanceOfRequestIdItemTemplate, instanceOfShortAnswerItemTemplate, instanceOfTemplateItemGroupImpl, instanceOfTemplateSectionImpl, instanceOfTextItemTemplate, instanceOfTimeItemTemplate, instanceOfTitleItemTemplate, instanceOfWholeNumberAnswerItemTemplate, instanceOfYearQuarterRangeTemplate, isForm, I18N_SHORT_ANSWER_ITEM_ID, I18N_PARAGRAPH_ANSWER_ITEM_ID, SHORT_ANSWER_ITEM_ID, PARAGRAPH_ANSWER_ITEM_ID, WHOLE_NUMBER_ANSWER_ITEM_ID, isWholeNumberItem, DECIMAL_ANSWER_ITEM_ID, CHECKBOX_ITEM_ID, isProgressiveForm, isRepeatableItem, isSection, isFormItemGroupImpl, isTableItem, isOffsetDateRangeItem, isYearQuarterRangeItem, isDataCubeItem, TITLE_ITEM_ID, TEXT_ITEM_ID, SECTION_ID, FORM_ITEM_GROUP_IMPL_ID, isConditionalItem, isOptionItemImpl, isOptionGroupItemImpl, instanceOfTemplateImpl, isValueItem, MtnaWfFormItemChange, DROPDOWN_ITEM_ID, isInternationalizedParagraphAnswerItem, isDecimalAnswerItem, isParagraphAnswerItem, BOOLEAN_ITEM_ID, DATE_ITEM_ID, OFFSET_DATE_RANGE_ITEM_ID, FILE_UPLOAD_ITEM_ID, MULTIPLE_CHOICE_ITEM_ID, NUMBERED_LIST_ITEM_ID, REPEATABLE_ITEM_ID, RESOURCE_SEARCH_ITEM_ID, BULLETED_LIST_ITEM_ID, YEAR_QUARTER_RANGE_ITEM_ID } from '@mtna/web-form-ts';
+import { BOOLEAN_ITEM_TEMPLATE_ID, CHECKBOX_ITEM_TEMPLATE_ID, OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID, YEAR_QUARTER_RANGE_ITEM_TEMPLATE_ID, DATE_ITEM_TEMPLATE_ID, DECIMAL_ANSWER_ITEM_TEMPLATE_ID, DROPDOWN_ITEM_TEMPLATE_ID, FILE_UPLOAD_ITEM_TEMPLATE_ID, INTERNATIONALIZED_PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID, INTERNATIONALIZED_SHORT_ANSWER_ITEM_TEMPLATE_ID, MULTIPLE_CHOICE_ITEM_TEMPLATE_ID, NUMBERED_LIST_ITEM_TEMPLATE_ID, PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID, REPEATABLE_ITEM_TEMPLATE_IMPL_ID, TEMPLATE_SECTION_IMPL_ID, SHORT_ANSWER_ITEM_TEMPLATE_ID, TEMPLATE_ITEM_GROUP_IMPL_ID, TEXT_ITEM_TEMPLATE_ID, TITLE_ITEM_TEMPLATE_ID, BULLETED_LIST_ITEM_TEMPLATE_ID, WHOLE_NUMBER_ANSWER_ITEM_TEMPLATE_ID, TIME_ITEM_TEMPLATE_ID, TEMPLATE_IMPL_ID, isForm, I18N_SHORT_ANSWER_ITEM_ID, I18N_PARAGRAPH_ANSWER_ITEM_ID, SHORT_ANSWER_ITEM_ID, PARAGRAPH_ANSWER_ITEM_ID, WHOLE_NUMBER_ANSWER_ITEM_ID, isWholeNumberItem, DECIMAL_ANSWER_ITEM_ID, CHECKBOX_ITEM_ID, isProgressiveForm, isRepeatableItem, isSection, isFormItemGroupImpl, isTableItem, isOffsetDateRangeItem, isYearQuarterRangeItem, instanceOfCheckboxItemTemplate, instanceOfDropdownItemTemplate, instanceOfMultipleChoiceItemTemplate, instanceOfBooleanItemTemplate, instanceOfTemplateItemGroupImpl, instanceOfTemplateSectionImpl, isConditionalItem, instanceOfInternationalizedShortAnswerItemTemplate, instanceOfWholeNumberAnswerItemTemplate, instanceOfBulletedListItemTemplate, instanceOfDateItemTemplate, instanceOfDecimalAnswerItemTemplate, instanceOfFileUploadItemTemplate, instanceOfInternationalizedParagraphAnswerItemTemplate, instanceOfNumberedListItemTemplate, instanceOfOffsetDateRangeTemplate, instanceOfParagraphAnswerItemTemplate, instanceOfRepeatableItemTemplate, instanceOfShortAnswerItemTemplate, instanceOfTextItemTemplate, instanceOfTimeItemTemplate, instanceOfTitleItemTemplate, instanceOfYearQuarterRangeTemplate, instanceOfTemplateImpl, isDataCubeItem, TITLE_ITEM_ID, TEXT_ITEM_ID, SECTION_ID, FORM_ITEM_GROUP_IMPL_ID, REQUEST_ID_ITEM_TEMPLATE_ID, MULTIPLE_CHOICE_GRID_ITEM_TEMPLATE_ID, LINEAR_SCALE_ITEM_TEMPLATE_ID, HIDDEN_REFERENCE_ITEM_TEMPLATE_ID, CHECKBOX_GRID_TEMPLATE_ID, instanceOfCheckboxGridTemplate, instanceOfHiddenReferenceItemTemplate, instanceOfLinearScaleItemTemplate, instanceOfMultipleChoiceGridItemTemplate, instanceOfRequestIdItemTemplate, isOptionItemImpl, isOptionGroupItemImpl, isDateItem, isValueItem, MtnaWfFormItemChange, DROPDOWN_ITEM_ID, isInternationalizedParagraphAnswerItem, isDecimalAnswerItem, isParagraphAnswerItem, BOOLEAN_ITEM_ID, DATE_ITEM_ID, OFFSET_DATE_RANGE_ITEM_ID, FILE_UPLOAD_ITEM_ID, MULTIPLE_CHOICE_ITEM_ID, NUMBERED_LIST_ITEM_ID, REPEATABLE_ITEM_ID, RESOURCE_SEARCH_ITEM_ID, BULLETED_LIST_ITEM_ID, YEAR_QUARTER_RANGE_ITEM_ID } from '@mtna/web-form-ts';
 import { BehaviorSubject, Subject, of, Subscription, merge } from 'rxjs';
 import * as i2$6 from '@mtna/core-i18n-angular';
 import { getI18nString, MtnaLocaleIds, mtnaToLanguageId, mtnaLanguageIdToDisplay } from '@mtna/core-i18n-angular';
-import { instanceOfModelDesignProperty, getLiteralProperties, getLiteralDesignProperty, getModelDesignProperty, getReferenceDesignProperty, getReferenceProperties, getI18nListProperties, getI18nListDesignProperty } from '@mtna/designer-ts';
+import { instanceOfModelDesignProperty, getLiteralProperties, getLiteralDesignProperty, getModelDesignProperty, getReferenceDesignProperty, getReferenceProperties, getI18nListProperties, getI18nListDesignProperty, getEnumerationLiteralDesignProperty, getEnumerationLiteralProperties } from '@mtna/designer-ts';
 import { isPresent, isKey, isNullOrUndefined, isType, isObject, toLetters } from '@mtna/core-ts';
 import * as i1$c from '@mtna/designer-angular';
 import { DesignMapper, DesignFacade, getDesignMap } from '@mtna/designer-angular';
@@ -15,7 +15,7 @@ import { v4 } from 'uuid';
 import * as i6 from '@angular/forms';
 import { FormGroup, Validators, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3$3 from '@angular/material/core';
-import { ErrorStateMatcher, mixinColor, MatRippleModule, MAT_DATE_FORMATS } from '@angular/material/core';
+import { ErrorStateMatcher, MAT_DATE_FORMATS, mixinColor, MatRippleModule } from '@angular/material/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i2 from '@mtna/pojo-social-angular';
 import { MtnaAnnotationsIndicatorModule } from '@mtna/pojo-social-angular';
@@ -31,7 +31,7 @@ import * as i1$2 from '@angular/platform-browser';
 import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { skipWhile, take, takeUntil, distinctUntilChanged, switchMap, map, catchError } from 'rxjs/operators';
+import { skipWhile, take, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
 import * as i1$3 from '@angular/common/http';
 import * as i1$8 from '@mtna/search-manager-angular';
 import { MtnaSearchSelectionService, MtnaSearchDialogComponent, MtnaSearchDialogData } from '@mtna/search-manager-angular';
@@ -69,7 +69,6 @@ import { MatTableModule } from '@angular/material/table';
 import * as i1$a from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector } from '@ngrx/store';
 import * as i1$b from '@ngrx/effects';
-import { createEffect, ofType } from '@ngrx/effects';
 import * as i5$2 from '@angular/router';
 
 // I18N Constants for the Template Item Mapper
@@ -97,9 +96,17 @@ const i18n_bulletedListItemInstructions = $localize `The items that make up this
 const i18n_checkboxConfiguration = $localize `Checkbox Configuration`;
 const i18n_codeOption = $localize `Code Option`;
 const i18n_codeOptionInstructions = $localize `The code option that should be presented to the user.`;
+const i18n_column = $localize `Column`;
+const i18n_conditions = $localize `Conditions`;
+const i18n_conditionAllRequired = $localize `All Required`;
+const i18n_conditionAllRequiredInstructions = $localize `Set to true if all item references must have the specified value for the condition to be met. Setting this as false means one to all of the values must match for the condition to be met.`;
+const i18n_conditionItemIds = $localize `Item References`;
+const i18n_conditionItemIdsInstructions = $localize `The item references that determine when the condition is met. These are references to other items in the form that affect the state of this item.`;
 const i18n_core = $localize `Core`;
 const i18n_childItems = $localize `Child Items`;
 const i18n_dateConfiguration = $localize `Date Configuration`;
+const i18n_dateFormat = $localize `Date Format`;
+const i18n_dateFormatInstructions = $localize `The format that the date should be displayed in the form. This is typically used to ensure that the date is presented in a way that is consistent with the user's expectations.`;
 const i18n_description = $localize `Description`;
 const i18n_descriptionInstructions = $localize `The description is a short representation of what the value for the input should be.`;
 const i18n_descriptive = $localize `Descriptive Information`;
@@ -132,7 +139,7 @@ const i18n_itemsInstructions = $localize `The items that make up this template.`
 const i18n_label = $localize `Label`;
 const i18n_labelInstructions = $localize `The label is a short representation of what the value for the input should be. This will be presented as a greyed out value in the input and shift to the input title once the user provides an input of their own.`;
 const i18n_layout = $localize `Layout`;
-const i18n_layoutInstructions = $localize `Indicates how the child items of this item should be presented, ROW indicates that multiple items should be put on a single row (to save space), COLUMN indicates the items should be placed in a vertical way.`;
+const i18n_layoutInstructions = $localize `Indicates how the child items of this item should be presented. "Row" indicates that multiple items should be put on a single row (to save space), while "Column" indicates the items should be placed in a vertical way.`;
 const i18n_maxCharCount = $localize `Maximum Character Count`;
 const i18n_maxCharCountInstructions = $localize `The maximum character count of the values that are input to be considered valid, this is optional.`;
 const i18n_minCharCount = $localize `Minimum Character Count`;
@@ -186,6 +193,7 @@ const i18n_repeatableItemTemplateId = $localize `Repeatable Item Template Id`;
 const i18n_repeatableItemTemplateIdInstructions = $localize `The id of the template that should be used to create a new instance of this item.`;
 const i18n_required = $localize `Required`;
 const i18n_requiredInstructions = $localize `Indicates that this item requires a value to be considered complete / valid.`;
+const i18n_row = $localize `Row`;
 const i18n_selectAReference = $localize `Select a Reference`;
 const i18n_selectAReferenceDialogTitle = $localize `Select a Reference Dialog`;
 const i18n_settings = $localize `Settings`;
@@ -213,60 +221,99 @@ const i18n_yearQuarterRangeConfiguration = $localize `Year Quarter Range Configu
 const i18n_listValue = $localize `List Value`;
 const i18n_newListValue = $localize `New List Value`;
 const i18n_newItem = $localize `New Item`;
-const i18n_exampleText = $localize `Example Text`;
+const i18n_startYear = $localize `Start Year`;
+const i18n_startYearInstructions = $localize `The starting year for the year quarter range.`;
+const i18n_startQuarter = $localize `Start Quarter`;
+const i18n_startQuarterInstructions = $localize `The starting quarter for the year quarter range.`;
+const i18n_endYear = $localize `End Year`;
+const i18n_endYearInstructions = $localize `The ending year for the year quarter range.`;
+const i18n_endQuarter = $localize `End Quarter`;
+const i18n_endQuarterInstructions = $localize `The ending quarter for the year quarter range.`;
+const i18n_quarterOne = $localize `Q1`;
+const i18n_quarterTwo = $localize `Q2`;
+const i18n_quarterThree = $localize `Q3`;
+const i18n_quarterFour = $localize `Q4`;
 const i18n_boolean = $localize `Boolean`;
 const i18n_booleanItem = $localize `Boolean Item`;
+const i18n_booleanItemDescription = $localize `A simple yes/no or true/false question.`;
 const i18n_bulletedListItem = $localize `Bulleted List Item`;
+const i18n_bulletedListItemDescription = $localize `Displays a list of items using bullet points.`;
 const i18n_checkbox = $localize `Checkbox`;
 const i18n_checkboxItem = $localize `Checkbox Item`;
-const i18n_offsetDateRange = $localize `Offset Date Range`;
-const i18n_offsetDateRangeItem = $localize `Offset Date Range Item`;
-const i18n_yearQuarterRange = $localize `Year Quarter Range`;
-const i18n_yearQuarterRangeItem = $localize `Year Quarter Range Item`;
+const i18n_checkboxItemDescription = $localize `Allows users to select one or more options from a list.`;
 const i18n_date = $localize `Date`;
 const i18n_dateItem = $localize `Date Item`;
+const i18n_dateItemDescription = $localize `Allows users to select a specific calendar date.`;
 const i18n_decimalAnswer = $localize `Decimal Answer`;
-const i18n_decimalValue = $localize `Decimal Value`;
 const i18n_decimalAnswerItem = $localize `Decimal Answer Item`;
+const i18n_decimalAnswerItemDescription = $localize `A field for entering numbers that may include decimals.`;
+const i18n_decimalValue = $localize `Decimal Value`;
 const i18n_dropdown = $localize `Dropdown`;
 const i18n_dropdownItem = $localize `Dropdown Item`;
+const i18n_dropdownItemDescription = $localize `A compact list of options where users select one item from a dropdown menu.`;
+const i18n_exampleText = $localize `Example Text`;
 const i18n_fileUpload = $localize `File Upload`;
 const i18n_fileUploadItem = $localize `File Upload Item`;
+const i18n_fileUploadItemDescription = $localize `Allows users to upload one or more files.`;
+const i18n_group = $localize `Group`;
+const i18n_groupItem = $localize `Group Item`;
+const i18n_groupItemDescription = $localize `Groups related fields together within a section.`;
 const i18n_internationalizedParagraphAnswer = $localize `Internationalized Paragraph Answer`;
 const i18n_internationalizedParagraphAnswerItem = $localize `Internationalized Paragraph Answer Item`;
+const i18n_internationalizedParagraphAnswerItemDescription = $localize `A long text response that supports multiple languages.`;
 const i18n_internationalizedShortAnswer = $localize `Internationalized Short Answer`;
 const i18n_internationalizedShortAnswerItem = $localize `Internationalized Short Answer Item`;
+const i18n_internationalizedShortAnswerItemDescription = $localize `A short text response that supports multiple languages.`;
 const i18n_multipleChoice = $localize `Multiple Choice`;
 const i18n_multipleChoiceItem = $localize `Multiple Choice Item`;
+const i18n_multipleChoiceItemDescription = $localize `Allows users to select a single option from a list.`;
+const i18n_newOptionDescription = $localize `Adds a new selectable option to a list of choices.`;
 const i18n_numberedListItem = $localize `Numbered List Item`;
+const i18n_numberedListItemDescription = $localize `Displays a list of items in a numbered format.`;
+const i18n_offsetDateRange = $localize `Offset Date Range`;
+const i18n_offsetDateRangeItem = $localize `Offset Date Range Item`;
+const i18n_offsetDateRangeItemDescription = $localize `Defines a date range relative to another date.`;
 const i18n_orderedList = $localize `Ordered List`;
 const i18n_orderedListItem = $localize `Ordered List Item`;
 const i18n_paragraphAnswer = $localize `Paragraph Answer`;
 const i18n_paragraphAnswerItem = $localize `Paragraph Answer Item`;
+const i18n_paragraphAnswerItemDescription = $localize `A multi-line text field for longer, detailed responses.`;
 const i18n_repeatable = $localize `Repeatable`;
 const i18n_repeatableItem = $localize `Repeatable Item`;
-const i18n_shortAnswer = $localize `Short Answer`;
-const i18n_shortAnswerItem = $localize `Short Answer Item`;
-const i18n_group = $localize `Group`;
-const i18n_groupItem = $localize `Group Item`;
+const i18n_repeatableItemDescription = $localize `Allows a set of fields to be repeated multiple times by the user.`;
 const i18n_section = $localize `Section`;
+const i18n_sectionDescription = $localize `A container used to organize content into distinct sections.`;
 const i18n_sectionItem = $localize `Section Item`;
+const i18n_sectionStepName = $localize `Section Step Name`;
+const i18n_sectionStepNameInstructions = $localize `The name of the step that this section represents. This is used to group sections together into a single step in the form.`;
+const i18n_sectionTitleItem = $localize `Section Title Item`;
+const i18n_shortAnswer = $localize `Short Answer`;
+const i18n_shortAnswerItem = $localize `Short Answer Item`;
+const i18n_shortAnswerItemDescription = $localize `A single-line text field for brief responses.`;
 const i18n_text = $localize `Text`;
 const i18n_textItem = $localize `Text Item`;
+const i18n_textItemDescription = $localize `Displays static informational text to guide users.`;
 const i18n_time = $localize `Time`;
 const i18n_timeItem = $localize `Time Item`;
 const i18n_title = $localize `Title`;
 const i18n_titleItem = $localize `Title Item`;
+const i18n_titleItemDescription = $localize `Displays a heading or title for a section or group.`;
 const i18n_unorderedList = $localize `Unordered List`;
 const i18n_unorderedListItem = $localize `Unordered List Item`;
 const i18n_wholeNumberAnswer = $localize `Whole Number Answer`;
 const i18n_wholeNumberAnswerItem = $localize `Whole Number Answer Item`;
+const i18n_wholeNumberAnswerItemDescription = $localize `A field for entering whole numbers only (no decimals).`;
 const i18n_wholeNumberValue = $localize `Whole Number Value`;
+const i18n_yearQuarterRange = $localize `Year Quarter Range`;
+const i18n_yearQuarterRangeItem = $localize `Year Quarter Range Item`;
+const i18n_yearQuarterRangeItemDescription = $localize `Allows users to select a range based on year and quarter.`;
 
 const prop_option_enabled_items = 'enabledItems';
 const prop_option_disabled_items = 'disabledItems';
 const prop_option_template = 'optionTemplate';
-const prop_item_acknowledgement = 'acknowledgement'; // maps to FormOptionSelector.acknowledgement property
+const prop_item_condition_allRequired = 'allRequired';
+const prop_item_condition_itemIds = 'itemIds';
+const prop_item_acknowledgementTemplate = 'acknowledgementTemplate'; // maps to FormOptionSelector.acknowledgement property
 const prop_item_additional_text = 'additionalText'; // maps to RepeatableItemTemplate.additionalText property
 const prop_item_annotation_enabled = 'annotationEnabled';
 const prop_item_code_option = 'codeOption'; // maps to TemplateOptionItem.codeOption property
@@ -298,6 +345,8 @@ const prop_item_option_subsets = 'optionSubsets'; // maps to CheckboxItemTemplat
 const prop_item_option_template_map = 'optionTemplateMap'; // maps to CheckboxItemTemplate.optionTemplateMap
 const prop_item_preset_value = 'presetValue'; // maps to DateItemTemplate.presetValue
 const prop_item_positive_only = 'positiveOnly'; // maps to wholeNumber/decimal AnswerItem.positiveOnly
+const prop_item_startQuarter = 'quarter'; // maps to QuarterRangeTemplate.rangeLimits.start/end.quarter
+const prop_item_endQuarter = 'endQuarter';
 const prop_item_question_text = 'questionText'; // maps to templateItem.questionText
 const prop_item_range_limits = 'rangeLimits'; // maps to OffsetDateRangeTemplate.rangeLimits
 const prop_item_repeatable_item_template_id = 'repeatableItemTemplateId'; // maps to RepeatableItemTemplate.repeatableItemTemplateId
@@ -307,139 +356,163 @@ const prop_item_text = 'text'; // maps to TextItemTemplate.value
 const prop_item_title = 'title'; // maps to templateSection.title
 const prop_item_value = 'value'; // maps to TitleItem.value
 const prop_item_values = 'values'; // maps to BulletedListItemTemplate.values
-const prop_template_descriptive_text = 'template-descriptive-text'; // maps to template.descriptiveText property
+const prop_item_startYear = 'startYear'; // maps to YearQuarterRangeTemplate.rangeLimits.start/end.year
+const prop_item_endYear = 'endYear'; // maps to YearQuarterRangeTemplate.rangeLimits.start/end.year
+const prop_template_descriptive_text = 'descriptiveText'; // maps to template.descriptiveText property
 const prop_template_items = 'items'; // maps to template.items property
 const prop_template_title = 'title'; // maps to template.title property
 
 const BOOLEAN_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_booleanItem,
+    description: i18n_booleanItemDescription,
     type: BOOLEAN_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const CHECKBOX_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_checkboxItem,
+    description: i18n_checkboxItemDescription,
     type: CHECKBOX_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const OFFSET_DATE_RANGE_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_offsetDateRangeItem,
+    description: i18n_offsetDateRangeItemDescription,
     type: OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const YEAR_QUARTER_RANGE_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_yearQuarterRangeItem,
+    description: i18n_yearQuarterRangeItemDescription,
     type: YEAR_QUARTER_RANGE_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const DATE_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_dateItem,
+    description: i18n_dateItemDescription,
     type: DATE_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const DECIMAL_ANSWER_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_decimalAnswerItem,
+    description: i18n_decimalAnswerItemDescription,
     type: DECIMAL_ANSWER_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const DROPDOWN_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_dropdownItem,
+    description: i18n_dropdownItemDescription,
     type: DROPDOWN_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const FILE_UPLOAD_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_fileUploadItem,
+    description: i18n_fileUploadItemDescription,
     type: FILE_UPLOAD_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const I18N_PARAGRAPH_ANSWER_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_internationalizedParagraphAnswerItem,
+    description: i18n_internationalizedParagraphAnswerItemDescription,
     type: INTERNATIONALIZED_PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const I18N_SHORT_ANSWER_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_internationalizedShortAnswerItem,
+    description: i18n_internationalizedShortAnswerItemDescription,
     type: INTERNATIONALIZED_SHORT_ANSWER_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const MULTIPLE_CHOICE_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_multipleChoiceItem,
+    description: i18n_multipleChoiceItemDescription,
     type: MULTIPLE_CHOICE_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const NUMBERED_LIST_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_numberedListItem,
+    description: i18n_numberedListItemDescription,
     type: NUMBERED_LIST_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const PARAGRAPH_ANSWER_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_paragraphAnswerItem,
+    description: i18n_paragraphAnswerItemDescription,
     type: PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const REPEATABLE_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_repeatableItem,
+    description: i18n_repeatableItemDescription,
     type: REPEATABLE_ITEM_TEMPLATE_IMPL_ID,
     focusType: 'SET_FOCUS',
 };
 const SECTION_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_section,
+    description: i18n_sectionDescription,
     type: TEMPLATE_SECTION_IMPL_ID,
     focusType: 'SET_FOCUS',
 };
 const SHORT_ANSWER_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_shortAnswerItem,
+    description: i18n_shortAnswerItemDescription,
     type: SHORT_ANSWER_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const GROUP_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_groupItem,
+    description: i18n_groupItemDescription,
     type: TEMPLATE_ITEM_GROUP_IMPL_ID,
     focusType: 'SET_FOCUS',
 };
 const TEXT_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_textItem,
+    description: i18n_textItemDescription,
     type: TEXT_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const TITLE_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_titleItem,
+    description: i18n_titleItemDescription,
     type: TITLE_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const BULLETED_LIST_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_bulletedListItem,
+    description: i18n_bulletedListItemDescription,
     type: BULLETED_LIST_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const WHOLE_NUMBER_ANSWER_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_wholeNumberAnswerItem,
+    description: i18n_wholeNumberAnswerItemDescription,
     type: WHOLE_NUMBER_ANSWER_ITEM_TEMPLATE_ID,
     focusType: 'SET_FOCUS',
 };
 const FORM_OPTION_SELECTOR_POTENTIAL_DESIGN = {
     id: v4(),
     display: i18n_newOption,
+    description: i18n_newOptionDescription,
     type: 'OPTION',
     focusType: 'MAINTAIN_FOCUS',
 };
@@ -468,22 +541,40 @@ const SECTION_POTENTIAL_DESIGN_LIST = [GROUP_POTENTIAL_DESIGN, ...GROUP_POTENTIA
 const TEMPLATE_POTENTIAL_DESIGN_LIST = [SECTION_POTENTIAL_DESIGN, ...SECTION_POTENTIAL_DESIGN_LIST];
 const OPTION_SELECTOR_POTENTIAL_DESIGN_LIST = [...SECTION_POTENTIAL_DESIGN_LIST];
 
+const templateMapperRegistry = {};
+const templateMapperToDesignRegistry = {};
+function registerTemplateMapper(id, ctor, toDesignFn) {
+    templateMapperRegistry[id] = ctor;
+    templateMapperToDesignRegistry[id] = toDesignFn;
+}
+function getTemplateMapperFromDesign$1(design, context, customParams) {
+    const MapperClass = templateMapperRegistry[design.type];
+    if (!MapperClass) {
+        throw new Error(`No mapper registered for design type: "${design.type}". Did you forget to import mapper-classes.model.ts?`);
+    }
+    return new MapperClass({ design, context, customParams });
+}
+function mapperTemplateToDesign(model, languageId, context, customParams) {
+    const fn = templateMapperToDesignRegistry[model.itemId];
+    const design = fn({ model, languageId, context, customParams });
+    return Object.assign({}, design);
+}
 const mapperRegistry = {};
 const mapperToDesignRegistry = {};
 function registerMapper(id, ctor, toDesignFn) {
     mapperRegistry[id] = ctor;
     mapperToDesignRegistry[id] = toDesignFn;
 }
-function getItemMapperFromDesign(design, context) {
+function getItemMapperFromDesign(design, context, customParams) {
     const MapperClass = mapperRegistry[design.type];
     if (!MapperClass) {
         throw new Error(`No mapper registered for design type: "${design.type}". Did you forget to import mapper-classes.model.ts?`);
     }
-    return new MapperClass({ design, context });
+    return new MapperClass({ design, context, customParams });
 }
-function mapperItemToDesign(item, languageId, parent, context) {
+function mapperItemToDesign(item, languageId, parent, context, customParams) {
     const fn = mapperToDesignRegistry[item.itemId];
-    const design = fn({ model: item, languageId, context });
+    const design = fn({ model: item, languageId, context, customParams });
     return Object.assign(Object.assign({}, design), { parent });
 }
 
@@ -550,7 +641,7 @@ const stringOption = {
 const newFormOptionSelectorStringOption = {
     containerDescription: '',
     codeValue: '',
-    acknowledgement: undefined,
+    acknowledgementTemplate: undefined,
     disabledItems: [],
     enabledItems: [],
     multiSelect: false,
@@ -562,7 +653,7 @@ const newFormOptionSelectorStringOption = {
 const newFormOptionSelectorBooleanOption = {
     containerDescription: '',
     codeValue: '',
-    acknowledgement: undefined,
+    acknowledgementTemplate: undefined,
     disabledItems: [],
     enabledItems: [],
     multiSelect: false,
@@ -638,7 +729,7 @@ const getNewTemplateItemGroup = (designBase, languageId) => {
     return Object.assign(Object.assign({}, baseTemplateItem(designBase, languageId)), { items: [], layout: 'COLUMN' });
 };
 const getNewTemplateSection = (designBase, languageId) => {
-    return Object.assign(Object.assign({}, getNewTemplateItemGroup(designBase, languageId)), { title: getNewTitleItemTemplate(designBase, languageId) });
+    return Object.assign(Object.assign({}, getNewTemplateItemGroup(designBase, languageId)), { title: getNewTitleItemTemplate(TITLE_POTENTIAL_DESIGN, languageId) });
 };
 const standardFactories = {
     [BOOLEAN_ITEM_TEMPLATE_ID]: getNewBooleanItemTemplate,
@@ -677,21 +768,22 @@ function getNewInitTemplateItem(designBase, languageId, languageTags) {
     return baseTemplateItem(designBase, languageId);
 }
 
+// TEMPLATE ITEM UTILS
 function getNewTemplateItem(designBase, languageId, languageIds) {
     return getNewInitTemplateItem(designBase, languageId, languageIds);
 }
-function toTemplateItem(design, context) {
-    const model = getItemMapperFromDesign(design, context).getModel();
+function toTemplateItem(design, context, customParams) {
+    const model = getItemMapperFromDesign(design, context, customParams).getModel();
     return model;
 }
 function getTemplateItemPotentialDesigns(design, property) {
     return getItemMapperFromDesign(design).getPotentialDesigns(property);
 }
-function itemToDesign(item, languageId, parent, context) {
-    const design = mapperItemToDesign(item, languageId, parent, context);
+function itemToDesign(item, languageId, parent, context, customParams) {
+    const design = mapperItemToDesign(item, languageId, parent, context, customParams);
     return Object.assign(Object.assign({}, design), { parent });
 }
-function getTemplateItems(design, sectionId, propertyIds, context) {
+function getTemplateItems(design, sectionId, propertyIds, context, customParams) {
     const values = {};
     const section = design.sections.find((designSection) => designSection.display === sectionId);
     if (section) {
@@ -700,7 +792,7 @@ function getTemplateItems(design, sectionId, propertyIds, context) {
             if (property && instanceOfModelDesignProperty(property)) {
                 values[propertyId] = [];
                 for (const value of property.values) {
-                    values[propertyId].push(toTemplateItem(value, context));
+                    values[propertyId].push(toTemplateItem(value, context, customParams));
                 }
             }
         }
@@ -723,7 +815,7 @@ class TemplateMapper extends DesignMapper {
     }
     getPotentialDesigns(property) {
         if (property.property === prop_template_items) {
-            return GROUP_POTENTIAL_DESIGN_LIST;
+            return TEMPLATE_POTENTIAL_DESIGN_LIST;
         }
         else {
             return [];
@@ -756,7 +848,9 @@ class TemplateMapper extends DesignMapper {
     }
     getSectionTemplateItems(template, languageId, parent) {
         const properties = [];
-        properties.push(getModelDesignProperty(i18n_templateItems, i18n_templateItemsInstructions, prop_template_items, true, template.items ? template.items.map((item) => itemToDesign(item, languageId, parent, this.context)) : []));
+        properties.push(getModelDesignProperty(i18n_templateItems, i18n_templateItemsInstructions, prop_template_items, true, template.items
+            ? template.items.map((item) => itemToDesign(item, languageId, parent, this.context, this.customParams))
+            : []));
         return { display: i18n_templateItems, properties };
     }
     templateToDesignBase(model, languageId) {
@@ -784,83 +878,17 @@ function getNewTemplate(designBase) {
 function initializeDesign(designBase) {
     return Object.assign(Object.assign({}, designBase), { sections: [] });
 }
-function isTemplateDesign(design) {
-    return design.type === TEMPLATE_IMPL_ID;
-}
-function isTemplateItemDesign(design) {
-    switch (design.type) {
-        case BOOLEAN_ITEM_TEMPLATE_ID:
-        case BULLETED_LIST_ITEM_TEMPLATE_ID:
-        case CHECKBOX_GRID_TEMPLATE_ID:
-        case CHECKBOX_ITEM_TEMPLATE_ID:
-        case DATE_ITEM_TEMPLATE_ID:
-        case DECIMAL_ANSWER_ITEM_TEMPLATE_ID:
-        case DROPDOWN_ITEM_TEMPLATE_ID:
-        case FILE_UPLOAD_ITEM_TEMPLATE_ID:
-        case HIDDEN_REFERENCE_ITEM_TEMPLATE_ID:
-        case INTERNATIONALIZED_PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID:
-        case INTERNATIONALIZED_SHORT_ANSWER_ITEM_TEMPLATE_ID:
-        case LINEAR_SCALE_ITEM_TEMPLATE_ID:
-        case MULTIPLE_CHOICE_GRID_ITEM_TEMPLATE_ID:
-        case MULTIPLE_CHOICE_ITEM_TEMPLATE_ID:
-        case NUMBERED_LIST_ITEM_TEMPLATE_ID:
-        case OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID:
-        case PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID:
-        case REPEATABLE_ITEM_TEMPLATE_IMPL_ID:
-        case REQUEST_ID_ITEM_TEMPLATE_ID:
-        case SHORT_ANSWER_ITEM_TEMPLATE_ID:
-        case TEMPLATE_ITEM_GROUP_IMPL_ID:
-        case TEMPLATE_SECTION_IMPL_ID:
-        case TEXT_ITEM_TEMPLATE_ID:
-        case TIME_ITEM_TEMPLATE_ID:
-        case TITLE_ITEM_TEMPLATE_ID:
-        case WHOLE_NUMBER_ANSWER_ITEM_TEMPLATE_ID:
-        case YEAR_QUARTER_RANGE_ITEM_TEMPLATE_ID:
-            return true;
-        default:
-            return false;
-    }
-}
-function isTemplateItem(something) {
-    return (instanceOfBooleanItemTemplate(something) ||
-        instanceOfBulletedListItemTemplate(something) ||
-        instanceOfCheckboxGridTemplate(something) ||
-        instanceOfCheckboxItemTemplate(something) ||
-        instanceOfDateItemTemplate(something) ||
-        instanceOfDecimalAnswerItemTemplate(something) ||
-        instanceOfDropdownItemTemplate(something) ||
-        instanceOfFileUploadItemTemplate(something) ||
-        instanceOfHiddenReferenceItemTemplate(something) ||
-        instanceOfInternationalizedParagraphAnswerItemTemplate(something) ||
-        instanceOfInternationalizedShortAnswerItemTemplate(something) ||
-        instanceOfLinearScaleItemTemplate(something) ||
-        instanceOfMultipleChoiceGridItemTemplate(something) ||
-        instanceOfMultipleChoiceItemTemplate(something) ||
-        instanceOfNumberedListItemTemplate(something) ||
-        instanceOfOffsetDateRangeTemplate(something) ||
-        instanceOfParagraphAnswerItemTemplate(something) ||
-        instanceOfRepeatableItemTemplate(something) ||
-        instanceOfRequestIdItemTemplate(something) ||
-        instanceOfShortAnswerItemTemplate(something) ||
-        instanceOfTemplateItemGroupImpl(something) ||
-        instanceOfTemplateSectionImpl(something) ||
-        instanceOfTextItemTemplate(something) ||
-        instanceOfTimeItemTemplate(something) ||
-        instanceOfTitleItemTemplate(something) ||
-        instanceOfWholeNumberAnswerItemTemplate(something) ||
-        instanceOfYearQuarterRangeTemplate(something));
-}
 function getTemplatePotentialDesigns(design, property) {
     return getTemplateMapperFromDesign(design).getPotentialDesigns(property);
 }
-function templateToDesign(template, languageId, context) {
-    return new TemplateMapper({ model: template, languageId, context }).getDesign();
+function templateToDesign(template, languageId, context, customParams) {
+    return new TemplateMapper({ model: template, languageId, context, customParams }).getDesign();
 }
-function toTemplate(design, context) {
-    return new TemplateMapper({ design, context }).getModel();
+function toTemplate(design, context, customParams) {
+    return new TemplateMapper({ design, context, customParams }).getModel();
 }
-function getTemplateMapperFromDesign(design) {
-    return new TemplateMapper({ design });
+function getTemplateMapperFromDesign(design, customParams) {
+    return new TemplateMapper({ design, customParams });
 }
 function getText(properties, key, i18n, languageId, fallback = '') {
     var _a;
@@ -881,9 +909,6 @@ var templateDesignUtil = /*#__PURE__*/Object.freeze({
     __proto__: null,
     getNewTemplate: getNewTemplate,
     initializeDesign: initializeDesign,
-    isTemplateDesign: isTemplateDesign,
-    isTemplateItemDesign: isTemplateItemDesign,
-    isTemplateItem: isTemplateItem,
     getTemplatePotentialDesigns: getTemplatePotentialDesigns,
     templateToDesign: templateToDesign,
     toTemplate: toTemplate,
@@ -927,6 +952,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** RegEx to validate number items contain only negative, digits, or decimals */
+const numOnlyWithoutComma$1 = /^-?\d+(\.\d*)?$/;
+/** RegEx to validate number items contain only negative, digits, or decimals in comma format */
+const numOnlyWithComma$1 = /^-?\d{1,3}(,\d{3})*(\.\d*)?$/;
+/** RegEx to validate 'positive only' item conains non-negative characters */
+const posOnly$1 = /^[^-]*$/;
+/** RegEx to validate 'whole number' item contains only negative, digits, or comma format */
+const wholeNumber$1 = /^-?\d+(,\d{3})*$/;
+function wholeNumberPattern() {
+    return (control) => {
+        if (isNullOrUndefined(control.value) || isEmptyString(control.value)) {
+            return null;
+        }
+        return wholeNumber$1.test(control.value) ? null : { wholeNumber: true };
+    };
+}
+function numericalValueCheck() {
+    return (control) => {
+        if (isNullOrUndefined(control.value) || isEmptyString(control.value)) {
+            return null;
+        }
+        return numOnlyWithoutComma$1.test(control.value) || numOnlyWithComma$1.test(control.value) ? null : { nonDigit: true };
+    };
+}
+function positiveNumberPattern() {
+    return (control) => {
+        if (isNullOrUndefined(control.value) || isEmptyString(control.value)) {
+            return null;
+        }
+        return posOnly$1.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;
+}
+
 /** 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 */
@@ -1304,55 +1387,6 @@ 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,
@@ -1556,6 +1590,29 @@ function findFormItem(instanceId, group) {
 
 const MTNA_WF_DEFAULT_YEAR_RANGE = new InjectionToken('mtna.wf.default.year.range');
 
+function getTypeDisplay(itemId) {
+    // FIXME this will work for now, but needs to be i18n
+    // Get the part after the last "."
+    const lastSegment = itemId.split('.').pop() || '';
+    // Remove "Item" and "Template"
+    const cleaned = lastSegment.replace(/(Item|Template)/g, '');
+    // Insert spaces between lowercase and uppercase letters
+    const spaced = cleaned.replace(/([a-z])([A-Z])/g, '$1 $2');
+    return spaced.trim();
+}
+function itemToDesignBase(model, languageId) {
+    const id = model.instanceId;
+    // let display = isPresent(model.descriptiveText) ? getI18nString(model.descriptiveText, languageId, true) : undefined;
+    let display = isPresent(model.name) && model.name !== '' ? model.name : undefined;
+    if (!isPresent(display)) {
+        display = i18n_newTemplateItem;
+    }
+    const type = model.itemId;
+    const typeDisplay = getTypeDisplay(model.itemId);
+    const focusType = 'SET_FOCUS';
+    return { id, display, type, typeDisplay, focusType };
+}
+
 class TemplateItemMapper extends DesignMapper {
     constructor(params) {
         super(params);
@@ -1564,11 +1621,13 @@ class TemplateItemMapper extends DesignMapper {
         return [];
     }
     toDesign(model, languageId, parent) {
-        const sections = [
-            this.getSectionItemCore(model),
-            // this.getSectionItemConditions(model, languageId)
-        ];
-        return Object.assign(Object.assign({}, this.itemToDesignBase(model, languageId)), { sections, parent });
+        const sectionItemCore = this.getSectionItemCore(model);
+        const sections = [sectionItemCore];
+        if (isConditionalItem(model)) {
+            const sectionItemConditions = this.getSectionItemConditions(model);
+            sections.push(sectionItemConditions);
+        }
+        return Object.assign(Object.assign({}, itemToDesignBase(model, languageId)), { sections, parent });
     }
     toModel(design) {
         let templateItem = {
@@ -1591,7 +1650,12 @@ class TemplateItemMapper extends DesignMapper {
             prop_item_name,
             prop_item_annotation_enabled,
         ]);
-        templateItem = Object.assign(Object.assign({}, templateItem), coreProperties);
+        const conditionalItemIds = this.getConditionalItemIdsFromDesign(design);
+        const conditionalProperties = getLiteralProperties(design, i18n_conditions, [prop_item_condition_allRequired]);
+        const condition = {
+            condition: Object.assign(Object.assign({}, conditionalItemIds), conditionalProperties),
+        };
+        templateItem = Object.assign(Object.assign(Object.assign({}, templateItem), coreProperties), condition);
         return templateItem;
     }
     getSectionItemCore(item) {
@@ -1603,30 +1667,35 @@ class TemplateItemMapper extends DesignMapper {
         properties.push(getLiteralDesignProperty(i18n_templateItemAnnotation, i18n_templateItemAnnotationInstructions, prop_item_annotation_enabled, 'BOOLEAN', item.annotationEnabled));
         return { display: i18n_templateItemBasicSettings, properties };
     }
-    // private getSectionItemConditions(item: TemplateItem, languageId: MtnaLanguageId): DesignSection {
-    //   return { display: i18n_conditions, properties };
-    // }
-    getTypeDisplay(itemId) {
-        // FIXME this will work for now, but needs to be i18n
-        // Get the part after the last "."
-        const lastSegment = itemId.split('.').pop() || '';
-        // Remove "Item" and "Template"
-        const cleaned = lastSegment.replace(/(Item|Template)/g, '');
-        // Insert spaces between lowercase and uppercase letters
-        const spaced = cleaned.replace(/([a-z])([A-Z])/g, '$1 $2');
-        return spaced.trim();
-    }
-    itemToDesignBase(model, languageId) {
-        const id = model.instanceId;
-        // let display = isPresent(model.descriptiveText) ? getI18nString(model.descriptiveText, languageId, true) : undefined;
-        let display = isPresent(model.name) && model.name !== '' ? model.name : undefined;
-        if (!isPresent(display)) {
-            display = i18n_newTemplateItem;
+    getSectionItemConditions(item) {
+        var _a, _b;
+        const properties = [];
+        properties.push(getLiteralDesignProperty(i18n_conditionAllRequired, i18n_conditionAllRequiredInstructions, prop_item_condition_allRequired, 'BOOLEAN', (_b = (_a = item.condition) === null || _a === void 0 ? void 0 : _a.allRequired) !== null && _b !== void 0 ? _b : false));
+        const itemIdReferenceDesignValues = [];
+        if (this.customParams && this.customParams.references) {
+            const references = this.customParams.references;
+            if (item.condition) {
+                item.condition.itemIds.forEach((itemId) => {
+                    if (isPresent(references[itemId])) {
+                        itemIdReferenceDesignValues.push(references[itemId]);
+                    }
+                });
+            }
         }
-        const type = model.itemId;
-        const typeDisplay = this.getTypeDisplay(model.itemId);
-        const focusType = 'SET_FOCUS';
-        return { id, display, type, typeDisplay, focusType };
+        properties.push(getReferenceDesignProperty(i18n_conditionItemIds, i18n_conditionItemIdsInstructions, prop_item_condition_itemIds, itemIdReferenceDesignValues, false));
+        return { display: i18n_conditions, properties };
+    }
+    getConditionalItemIdsFromDesign(design) {
+        const itemIds = [];
+        const referenceProperties = getReferenceProperties(design, i18n_conditions, [prop_item_condition_itemIds]);
+        if (referenceProperties[prop_item_condition_itemIds]) {
+            for (const referenceDesignProperty of referenceProperties[prop_item_condition_itemIds]) {
+                if (isPresent(referenceDesignProperty)) {
+                    itemIds.push(referenceDesignProperty.id);
+                }
+            }
+        }
+        return { itemIds };
     }
 }
 
@@ -1686,14 +1755,19 @@ class OptionSelectorMapper extends DesignMapper {
         if (optionTemplateProperties.length > 0) {
             properties.push(...optionTemplateProperties);
         }
-        // const optionAcknowledgementProperties: DesignProperty[] = this.getOptionAcknowledgementProperties(model, languageId, parent);
+        const optionAcknowledgementProperties = this.getOptionAcknowledgementProperties(model, languageId, parent);
+        if (optionAcknowledgementProperties.length > 0) {
+            properties.push(...optionAcknowledgementProperties);
+        }
         return { display: i18n_optionProperties, properties };
     }
     getOptionTemplateProperties(model, languageId, parent) {
         const properties = [];
         if (this.customParams && this.customParams.optionTemplateMap) {
             const templateItem = this.customParams.optionTemplateMap[model.option.id];
-            properties.push(getModelDesignProperty(i18n_optionTemplate, i18n_optionTemplateInstructions, prop_option_template, false, isPresent(templateItem) ? [itemToDesign(templateItem, languageId, parent, this.context)] : []));
+            properties.push(getModelDesignProperty(i18n_optionTemplate, i18n_optionTemplateInstructions, prop_option_template, false, isPresent(templateItem)
+                ? [itemToDesign(templateItem, languageId, parent, this.context, this.customParams)]
+                : []));
         }
         return properties;
     }
@@ -1738,6 +1812,13 @@ class OptionSelectorMapper extends DesignMapper {
         }
         return { enabledItems, disabledItems };
     }
+    getOptionAcknowledgementProperties(model, languageId, parent) {
+        const properties = [];
+        properties.push(getModelDesignProperty(i18n_acknowledgement, i18n_acknowledgementInstructions, prop_item_acknowledgementTemplate, false, isPresent(model.acknowledgementTemplate)
+            ? [itemToDesign(model.acknowledgementTemplate, languageId, parent, this.context, this.customParams)]
+            : []));
+        return properties;
+    }
 }
 
 const optionGroupItemSectionDisplayNameMap = {
@@ -1815,7 +1896,7 @@ function getOptionTemplateDesign(optionDesign) {
     const designs = getDesignsBySectionAndProperty(optionDesign, i18n_optionProperties, prop_option_template);
     return isPresent(designs[0]) ? designs[0] : undefined;
 }
-function getOptionsAndTemplateMap(design, mapperType, toTemplateItemFn, context) {
+function getOptionsAndTemplateMap(design, mapperType, toTemplateItemFn, context, customParams) {
     const options = [];
     const optionTemplateMap = {};
     const optionDesigns = getOptionDesigns(design, mapperType);
@@ -1824,7 +1905,7 @@ function getOptionsAndTemplateMap(design, mapperType, toTemplateItemFn, context)
         options.push(optionSelector);
         const optionTemplateDesign = getOptionTemplateDesign(optionDesign);
         if (isPresent(optionTemplateDesign)) {
-            const optionTemplate = toTemplateItemFn(optionTemplateDesign, context);
+            const optionTemplate = toTemplateItemFn(optionTemplateDesign, context, customParams);
             optionTemplateMap[optionSelector.option.id] = optionTemplate;
         }
     }
@@ -1863,7 +1944,7 @@ class OptionItemMapper extends TemplateItemMapper {
             display = i18n_newTemplateItem;
         }
         const type = model.itemId;
-        const typeDisplay = this.getTypeDisplay(model.itemId);
+        const typeDisplay = getTypeDisplay(model.itemId);
         const focusType = 'MAINTAIN_FOCUS';
         return { id, display, type, typeDisplay, focusType };
     }
@@ -1927,10 +2008,18 @@ class OptionGroupItemMapper extends TemplateItemMapper {
     }
     toModel(design) {
         let model = super.toModel(design);
-        const groupProperties = getLiteralProperties(design, optionGroupItemSectionDisplayNameMap[design.type], [
-            prop_item_min_selections,
-            prop_item_max_selections,
-        ]);
+        const sectionId = optionGroupItemSectionDisplayNameMap[design.type];
+        const propertyIds = [prop_item_min_selections, prop_item_max_selections];
+        if (instanceOfDropdownItemTemplate(model)) {
+            propertyIds.push(prop_item_label);
+        }
+        const groupProperties = getLiteralProperties(design, sectionId, propertyIds);
+        // Check here if the model is a CheckboxItemTemplate to ensure that min and max selections are set correctly. Use the required property
+        // to determine if min selections should be 1 or 0, and set max selections to 1 for checkbox items.
+        if (instanceOfMultipleChoiceItemTemplate(model)) {
+            groupProperties[prop_item_max_selections] = 1;
+            groupProperties[prop_item_min_selections] = model.required ? 1 : 0;
+        }
         const { options, optionTemplateMap } = getOptionsAndTemplateMap(design, 'optionGroupItem', toTemplateItem, this.context);
         model = Object.assign(Object.assign(Object.assign({}, model), groupProperties), { optionTemplateMap, options });
         return model;
@@ -1943,15 +2032,22 @@ class OptionGroupItemMapper extends TemplateItemMapper {
             display = i18n_newTemplateItem;
         }
         const type = model.itemId;
-        const typeDisplay = this.getTypeDisplay(model.itemId);
+        const typeDisplay = getTypeDisplay(model.itemId);
         const focusType = 'MAINTAIN_FOCUS';
         return { id, display, type, typeDisplay, focusType };
     }
     getGroupSectionItems(model, languageId, parent) {
         const properties = [];
         const designOptions = [];
-        properties.push(getLiteralDesignProperty(i18n_minSelections, i18n_minSelectionsInstructions, prop_item_min_selections, 'INTEGER', model.minSelections));
-        properties.push(getLiteralDesignProperty(i18n_maxSelections, i18n_maxSelectionsInstructions, prop_item_max_selections, 'INTEGER', model.maxSelections));
+        if (instanceOfDropdownItemTemplate(model)) {
+            properties.push(getLiteralDesignProperty(i18n_label, i18n_labelInstructions, prop_item_label, 'STRING_I18N', model.label));
+        }
+        // Don't include the min and max selections properties for checkbox items, as they are determined by the required property and should not
+        // be editable by the user. Instead, set them automatically in the toModel method based on the required property.
+        if (!instanceOfMultipleChoiceItemTemplate(model)) {
+            properties.push(getLiteralDesignProperty(i18n_minSelections, i18n_minSelectionsInstructions, prop_item_min_selections, 'INTEGER', model.minSelections));
+            properties.push(getLiteralDesignProperty(i18n_maxSelections, i18n_maxSelectionsInstructions, prop_item_max_selections, 'INTEGER', model.maxSelections));
+        }
         const parentForFormOptionSelector = this.getParentForFormOptionSelector(model, languageId);
         for (const formOptionSelector of model.options) {
             const designOption = optionSelectorToDesign(formOptionSelector, languageId, model.optionTemplateMap, this.customParams && this.customParams.references ? this.customParams.references : {}, parentForFormOptionSelector, this.context);
@@ -1976,6 +2072,195 @@ class CheckboxItemTemplateMapper extends OptionGroupItemMapper {
     }
 }
 
+function getEnumDesignProperty(propertyType, model) {
+    const enumFunction = propertyType.enumFunction;
+    const displayValue = model === null || model === void 0 ? void 0 : model[propertyType.propName];
+    const value = enumFunction(displayValue, propertyType.defaultValue);
+    return getEnumerationLiteralDesignProperty(propertyType.title, propertyType.instructions, propertyType.propName, value, propertyType.enumValues);
+}
+
+const SLASHED_DATE_DISPLAY_VALUE = {
+    value: 'MM/DD/YYYY',
+    display: 'MM/DD/YYYY',
+};
+const DASHED_DATE_DISPLAY_VALUE = {
+    value: 'MM-DD-YYYY',
+    display: 'MM-DD-YYYY',
+};
+const LONG_DATE_DISPLAY_VALUE = {
+    value: 'MMMM D, YYYY',
+    display: 'MMMM D, YYYY',
+};
+const EURO_LONG_DATE_DISPLAY_VALUE = {
+    value: 'D MMMM YYYY',
+    display: 'D MMMM YYYY',
+};
+const DOTTED_DATE_DISPLAY_VALUE = {
+    value: 'DD.MM.YYYY',
+    display: 'DD.MM.YYYY',
+};
+const ISO_8601_DATE_DISPLAY_VALUE = {
+    value: 'YYYY-MM-DD',
+    display: 'YYYY-MM-DD',
+};
+const MTNA_DEFAULT_USE_DISPLAY_VALUE = {
+    value: 'YYYY/MM/dd',
+    display: 'YYYY/MM/dd',
+};
+const DATE_DISPLAY_ENUM_VALUES = [
+    MTNA_DEFAULT_USE_DISPLAY_VALUE,
+    ISO_8601_DATE_DISPLAY_VALUE,
+    LONG_DATE_DISPLAY_VALUE,
+    EURO_LONG_DATE_DISPLAY_VALUE,
+    SLASHED_DATE_DISPLAY_VALUE,
+    DASHED_DATE_DISPLAY_VALUE,
+    DOTTED_DATE_DISPLAY_VALUE,
+];
+
+const LAYOUT_ROW_DISPLAY_VALUE = {
+    value: 'ROW',
+    display: i18n_row,
+};
+const LAYOUT_COLUMN_DISPLAY_VALUE = {
+    value: 'COLUMN',
+    display: i18n_column,
+};
+const LAYOUT_ENUM_VALUES = [LAYOUT_ROW_DISPLAY_VALUE, LAYOUT_COLUMN_DISPLAY_VALUE];
+
+const QUARTER_ONE_DISPLAY_VALUE = {
+    value: 0,
+    display: i18n_quarterOne,
+};
+const QUARTER_TWO_DISPLAY_VALUE = {
+    value: 1,
+    display: i18n_quarterTwo,
+};
+const QUARTER_THREE_DISPLAY_VALUE = {
+    value: 2,
+    display: i18n_quarterThree,
+};
+const QUARTER_FOUR_DISPLAY_VALUE = {
+    value: 3,
+    display: i18n_quarterFour,
+};
+const QUARTER_RANGE_ENUM_VALUES = [
+    QUARTER_ONE_DISPLAY_VALUE,
+    QUARTER_TWO_DISPLAY_VALUE,
+    QUARTER_THREE_DISPLAY_VALUE,
+    QUARTER_FOUR_DISPLAY_VALUE,
+];
+
+function getDateFormatValue(displayValue, defaultValue) {
+    let enumValue = defaultValue;
+    if (displayValue) {
+        if (displayValue === 'MM/DD/YYYY') {
+            enumValue = SLASHED_DATE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 'MM-DD-YYYY') {
+            enumValue = DASHED_DATE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 'MMMM D, YYYY') {
+            enumValue = LONG_DATE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 'D MMMM YYYY') {
+            enumValue = EURO_LONG_DATE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 'DD.MM.YYYY') {
+            enumValue = DOTTED_DATE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 'YYYY-MM-DD') {
+            enumValue = ISO_8601_DATE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 'YYYY/MM/dd') {
+            enumValue = MTNA_DEFAULT_USE_DISPLAY_VALUE;
+        }
+    }
+    return enumValue;
+}
+
+function getLayoutValue(displayValue, defaultValue) {
+    let enumValue = defaultValue;
+    if (displayValue) {
+        if (displayValue === 'ROW') {
+            enumValue = LAYOUT_ROW_DISPLAY_VALUE;
+        }
+        else if (displayValue === 'COLUMN') {
+            enumValue = LAYOUT_COLUMN_DISPLAY_VALUE;
+        }
+    }
+    return enumValue;
+}
+
+function getQuarterRangeValue(displayValue, defaultValue) {
+    let enumValue = defaultValue;
+    if (displayValue) {
+        if (displayValue === 0) {
+            enumValue = QUARTER_ONE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 1) {
+            enumValue = QUARTER_TWO_DISPLAY_VALUE;
+        }
+        else if (displayValue === 2) {
+            enumValue = QUARTER_THREE_DISPLAY_VALUE;
+        }
+        else if (displayValue === 3) {
+            enumValue = QUARTER_FOUR_DISPLAY_VALUE;
+        }
+    }
+    return enumValue;
+}
+
+const PROP_DATE_FORMAT = {
+    defaultValue: MTNA_DEFAULT_USE_DISPLAY_VALUE,
+    enumFunction: getDateFormatValue,
+    enumValues: DATE_DISPLAY_ENUM_VALUES,
+    instructions: i18n_dateFormatInstructions,
+    propName: prop_item_format,
+    title: i18n_dateFormat,
+    type: 'ENUMERATION',
+};
+
+const PROP_LAYOUT = {
+    defaultValue: LAYOUT_COLUMN_DISPLAY_VALUE,
+    enumFunction: getLayoutValue,
+    enumValues: LAYOUT_ENUM_VALUES,
+    instructions: i18n_layoutInstructions,
+    propName: prop_item_layout,
+    title: i18n_layout,
+    type: 'ENUMERATION',
+};
+
+const PROP_QUARTER_RANGE_START = {
+    defaultValue: QUARTER_ONE_DISPLAY_VALUE,
+    enumFunction: getQuarterRangeValue,
+    enumValues: QUARTER_RANGE_ENUM_VALUES,
+    instructions: i18n_startQuarterInstructions,
+    propName: prop_item_startQuarter,
+    title: i18n_startQuarter,
+    type: 'ENUMERATION',
+};
+const PROP_QUARTER_RANGE_END = {
+    defaultValue: QUARTER_ONE_DISPLAY_VALUE,
+    enumFunction: getQuarterRangeValue,
+    enumValues: QUARTER_RANGE_ENUM_VALUES,
+    instructions: i18n_endQuarterInstructions,
+    propName: prop_item_endQuarter,
+    title: i18n_endQuarter,
+    type: 'ENUMERATION',
+};
+
+function setEnumValue(design, sectionId, enumPropertyId) {
+    const enumerationLiteralProperties = getEnumerationLiteralProperties(design, sectionId, [enumPropertyId]);
+    if (isPresent(enumerationLiteralProperties[enumPropertyId])) {
+        return {
+            [enumPropertyId]: enumerationLiteralProperties[enumPropertyId].value,
+        };
+    }
+    else {
+        return {};
+    }
+}
+
 class DateItemTemplateMapper extends TemplateItemMapper {
     constructor(params) {
         super(params);
@@ -1987,26 +2272,15 @@ class DateItemTemplateMapper extends TemplateItemMapper {
     }
     toModel(design) {
         let model = super.toModel(design);
-        const dateProperties = getLiteralProperties(design, i18n_dateConfiguration, [
-            prop_item_label,
-            // TODO: See the comment in getSectionItemDate method
-            // prop_item_format,
-            prop_item_preset_value,
-        ]);
-        model = Object.assign(Object.assign({}, model), dateProperties);
+        const dateProperties = getLiteralProperties(design, i18n_dateConfiguration, [prop_item_label]);
+        const dateFormatEnumProperty = setEnumValue(design, i18n_dateConfiguration, prop_item_format);
+        model = Object.assign(Object.assign(Object.assign({}, model), dateProperties), dateFormatEnumProperty);
         return model;
     }
     getSectionItemDate(item) {
         const properties = [];
         properties.push(getLiteralDesignProperty(i18n_label, i18n_labelInstructions, prop_item_label, 'STRING_I18N', item.label));
-        /*
-         * TODO: Needs to be looked into further. This would mean that we would need to have a service (or similar) that could use the provided
-         * format and provide a custom MAT_DATE_FORMATS provider with the format attached to it. We do this because the 'display' prop of MatDateFormats
-         * is an object, so only one type of display is available at a time, and it should match the provided format given in the model. This should
-         * be an enumeration or have a way of constraining the values (available formats in the enumerations folder inside models/design/enumerations).
-         */
-        // properties.push(getLiteralDesignProperty(i18n_format, i18n_formatInstructions, prop_item_format, 'STRING', item.format));
-        properties.push(getLiteralDesignProperty(i18n_presetValue, i18n_presetValueInstructions, prop_item_preset_value, 'DATE', item.presetValue));
+        properties.push(getEnumDesignProperty(PROP_DATE_FORMAT, item));
         return { display: i18n_dateConfiguration, properties };
     }
 }
@@ -2017,20 +2291,12 @@ class DropdownItemTemplateMapper extends OptionGroupItemMapper {
     }
     toDesign(model, languageId, parent) {
         const design = super.toDesign(model, languageId, parent);
-        design.sections = [design.sections[0], this.getSectionItemDropdown(model), design.sections[1]];
         return design;
     }
     toModel(design) {
         let model = super.toModel(design);
-        const dropdownProperties = getLiteralProperties(design, i18n_dropdownProperties, [prop_item_label]);
-        model = Object.assign(Object.assign({}, model), dropdownProperties);
         return model;
     }
-    getSectionItemDropdown(item) {
-        const properties = [];
-        properties.push(getLiteralDesignProperty(i18n_label, i18n_labelInstructions, prop_item_label, 'STRING_I18N', item.label));
-        return { display: i18n_dropdownProperties, properties };
-    }
 }
 
 class FileUploadItemTemplateMapper extends TemplateItemMapper {
@@ -2044,17 +2310,13 @@ class FileUploadItemTemplateMapper extends TemplateItemMapper {
     }
     toModel(design) {
         let model = super.toModel(design);
-        const fileUploadProperties = getLiteralProperties(design, i18n_fileUploadConfiguration, [
-            prop_item_download_allowed,
-            prop_item_file_type_id,
-        ]);
+        const fileUploadProperties = getLiteralProperties(design, i18n_fileUploadConfiguration, [prop_item_download_allowed]);
         model = Object.assign(Object.assign({}, model), fileUploadProperties);
         return model;
     }
     getSectionItemFileUpload(item) {
         const properties = [];
         properties.push(getLiteralDesignProperty(i18n_downloadAllowed, i18n_downloadAllowedInstructions, prop_item_download_allowed, 'BOOLEAN', isPresent(item.downloadAllowed) ? item.downloadAllowed : true));
-        properties.push(getLiteralDesignProperty(i18n_fileTypeId, i18n_fileTypeIdInstructions, prop_item_file_type_id, 'STRING', item.fileTypeId));
         return { display: i18n_fileUploadConfiguration, properties };
     }
 }
@@ -2088,18 +2350,10 @@ class MultipleChoiceItemTemplateMapper extends OptionGroupItemMapper {
     }
     toDesign(model, languageId, parent) {
         const design = super.toDesign(model, languageId, parent);
-        const checkboxConfigSection = design.sections.find((section) => section.display === i18n_checkboxConfiguration);
-        if (checkboxConfigSection) {
-            checkboxConfigSection.properties.filter((property) => property.property !== prop_item_min_selections && property.property !== prop_item_max_selections);
-        }
         return design;
     }
     toModel(design) {
         let model = super.toModel(design);
-        // TODO - Since we no longer provide this in the 'toDesign' method above, we still need to make sure the model is correctly set.
-        // This is a temporary fix until we can merge the models in the 'setModifiedModel' method of the TemplateDesignFacade.
-        model.minSelections = 0;
-        model.maxSelections = 1;
         return model;
     }
 }
@@ -2170,18 +2424,17 @@ class OffsetDateRangeTemplateMapper extends TemplateItemMapper {
     toModel(design) {
         let model = super.toModel(design);
         const offsetDateRangeProperties = getLiteralProperties(design, i18n_offsetDateRangeConfiguration, [
-            prop_item_format,
-            // prop_item_range_limits
+        // prop_item_range_limits
         ]);
-        model = Object.assign(Object.assign({}, model), offsetDateRangeProperties);
+        const offsetDateRangeFormatEnumProperty = setEnumValue(design, i18n_offsetDateRangeConfiguration, prop_item_format);
+        model = Object.assign(Object.assign({}, model), offsetDateRangeFormatEnumProperty);
         return model;
     }
     getSectionItemOffsetDateRange(item) {
         const properties = [];
         // TODO need to handle for the range limits input
         // properties.push(getLiteralDesignProperty(i18n_rangeLimits, i18n_rangeLimitsInstructions, prop_item_range_limits, '', item.rangeLimits));
-        // TODO need a way to constrain the values that the format can take instead of just a string
-        properties.push(getLiteralDesignProperty(i18n_format, i18n_formatInstructions, prop_item_format, 'STRING', item.format));
+        properties.push(getEnumDesignProperty(PROP_DATE_FORMAT, item));
         return { display: i18n_offsetDateRangeConfiguration, properties };
     }
 }
@@ -2313,20 +2566,28 @@ class TitleItemTemplateMapper extends TemplateItemMapper {
         super(params);
     }
     toDesign(model, languageId, parent) {
-        const design = super.toDesign(model, languageId, parent);
-        design.sections = [...design.sections, this.getSectionItemTitle(model)];
-        return design;
+        const sectionTitleItemCore = this.getSectionTitleItemCore(model);
+        const sectionItemTitle = this.getSectionItemTitle(model);
+        const sections = [sectionTitleItemCore, sectionItemTitle];
+        return Object.assign(Object.assign({}, itemToDesignBase(model, languageId)), { sections, parent });
     }
     toModel(design) {
         let model = super.toModel(design);
-        const titleProperties = getLiteralProperties(design, i18n_childItems, [prop_item_value]);
-        model = Object.assign(Object.assign({}, model), titleProperties);
+        const coreProperties = getLiteralProperties(design, i18n_templateItemBasicSettings, [prop_item_name, prop_item_annotation_enabled]);
+        const titleProperties = getLiteralProperties(design, i18n_title, [prop_item_value]);
+        model = Object.assign(Object.assign(Object.assign({}, model), coreProperties), titleProperties);
         return model;
     }
     getSectionItemTitle(item) {
         const properties = [];
         properties.push(getLiteralDesignProperty(i18n_title, i18n_titleInstructionsSection, prop_item_value, 'STRING_I18N', item.value));
-        return { display: i18n_childItems, properties };
+        return { display: i18n_title, properties };
+    }
+    getSectionTitleItemCore(item) {
+        const properties = [];
+        properties.push(getLiteralDesignProperty(i18n_templateItemLabel, i18n_templateItemLabelInstructions, prop_item_name, 'STRING', item.name));
+        properties.push(getLiteralDesignProperty(i18n_templateItemAnnotation, i18n_templateItemAnnotationInstructions, prop_item_annotation_enabled, 'BOOLEAN', item.annotationEnabled));
+        return { display: i18n_templateItemBasicSettings, properties };
     }
 }
 
@@ -2341,14 +2602,30 @@ class YearQuarterRangeItemTemplateMapper extends TemplateItemMapper {
     }
     toModel(design) {
         let model = super.toModel(design);
-        const yearQuarterRangeProperties = getLiteralProperties(design, i18n_yearQuarterRangeConfiguration, [
-        // prop_item_range_limits,
-        ]);
-        model = Object.assign(Object.assign({}, model), yearQuarterRangeProperties);
+        const startQuarterRangeYearProperties = getLiteralProperties(design, i18n_yearQuarterRangeConfiguration, [prop_item_startYear]);
+        const endQuarterRangeYearProperties = getLiteralProperties(design, i18n_yearQuarterRangeConfiguration, [prop_item_endYear]);
+        const startQuarterRangeQuarterProperties = setEnumValue(design, i18n_yearQuarterRangeConfiguration, prop_item_startQuarter);
+        const endQuarterRangeQuarterProperties = setEnumValue(design, i18n_yearQuarterRangeConfiguration, prop_item_endQuarter);
+        const startYearQuarter = {
+            year: startQuarterRangeYearProperties[prop_item_startYear],
+            quarter: startQuarterRangeQuarterProperties[prop_item_startQuarter],
+        };
+        const endYearQuarter = {
+            year: endQuarterRangeYearProperties[prop_item_endYear],
+            quarter: endQuarterRangeQuarterProperties[prop_item_endQuarter],
+        };
+        model = Object.assign(Object.assign({}, model), { rangeLimits: {
+                start: startYearQuarter,
+                end: endYearQuarter,
+            } });
         return model;
     }
     getSectionItemYearQuarterRange(item) {
         const properties = [];
+        properties.push(getLiteralDesignProperty(i18n_startYear, i18n_startYearInstructions, prop_item_startYear, 'INTEGER', item.rangeLimits.start.year));
+        properties.push(getEnumDesignProperty(PROP_QUARTER_RANGE_START, item.rangeLimits.start));
+        properties.push(getLiteralDesignProperty(i18n_endYear, i18n_endYearInstructions, prop_item_endYear, 'INTEGER', item.rangeLimits.end.year));
+        properties.push(getEnumDesignProperty(PROP_QUARTER_RANGE_END, item.rangeLimits.end));
         // TODO need to handle for the range limits input
         // properties.push(getLiteralDesignProperty(i18n_rangeLimits, i18n_rangeLimitsInstructions, prop_item_range_limits, '', item.rangeLimits));
         return { display: i18n_yearQuarterRangeConfiguration, properties };
@@ -2363,22 +2640,53 @@ class TemplateItemGroupMapper extends TemplateItemMapper {
         return GROUP_POTENTIAL_DESIGN_LIST;
     }
     toDesign(model, languageId, parent) {
-        const design = super.toDesign(model, languageId, parent);
-        design.sections = [...design.sections, this.getSectionItemGroup(model, languageId, parent)];
-        return design;
+        const designBase = Object.assign({}, itemToDesignBase(model, languageId));
+        const designSections = [
+            this.getGroupItemCore(model),
+            // Use the current design as the parent for the template item group, in that it only needs to see the actual template item group design base.
+            this.getSectionItemGroup(model, languageId, designBase),
+        ];
+        return Object.assign(Object.assign({}, designBase), { sections: designSections, parent });
     }
     toModel(design) {
-        let model = super.toModel(design);
-        const itemGroupProperties = getLiteralProperties(design, i18n_childItems, [prop_item_layout]);
+        let templateItem = {
+            itemId: design.type,
+            instanceId: design.id,
+            annotatableId: design.id,
+            descriptiveText: [],
+            name: '',
+            questionText: [],
+            annotationEnabled: false,
+            excludeFromPrint: false,
+            required: false,
+            ignoreConditionalInstructions: false,
+            printAlternative: '',
+        };
+        const coreProperties = getLiteralProperties(design, i18n_templateItemBasicSettings, [
+            prop_item_name,
+            prop_item_descriptive_text,
+            prop_item_required,
+            prop_item_annotation_enabled,
+        ]);
+        const itemGroupProperties = setEnumValue(design, i18n_childItems, prop_item_layout);
         const itemGroupModelProperties = getTemplateItems(design, i18n_childItems, [prop_item_items]);
-        model = Object.assign(Object.assign(Object.assign({}, model), itemGroupProperties), itemGroupModelProperties);
-        return model;
+        templateItem = Object.assign(Object.assign(Object.assign(Object.assign({}, templateItem), coreProperties), itemGroupProperties), itemGroupModelProperties);
+        return templateItem;
+    }
+    getGroupItemCore(item) {
+        const properties = [];
+        properties.push(getLiteralDesignProperty(i18n_templateItemLabel, i18n_templateItemLabelInstructions, prop_item_name, 'STRING', item.name));
+        properties.push(getLiteralDesignProperty(i18n_templateItemHelp, i18n_templateItemHelpInstructions, prop_item_descriptive_text, 'RICH_TEXT_I18N', item.descriptiveText));
+        properties.push(getLiteralDesignProperty(i18n_templateItemRequired, i18n_templateItemRequiredInstructions, prop_item_required, 'BOOLEAN', item.required));
+        properties.push(getLiteralDesignProperty(i18n_templateItemAnnotation, i18n_templateItemAnnotationInstructions, prop_item_annotation_enabled, 'BOOLEAN', item.annotationEnabled));
+        return { display: i18n_templateItemBasicSettings, properties };
     }
     getSectionItemGroup(item, languageId, parent) {
         const properties = [];
-        // TODO there needs a way to set possible values on enumerations, not just the actual value
-        properties.push(getLiteralDesignProperty(i18n_layout, i18n_layoutInstructions, prop_item_layout, 'ENUMERATION', item.layout));
-        properties.push(getModelDesignProperty(i18n_templateItems, i18n_templateItemsInstructionsGroup, prop_item_items, true, item.items ? item.items.map((item) => itemToDesign(item, languageId, parent, this.context)) : []));
+        properties.push(getEnumDesignProperty(PROP_LAYOUT, item));
+        properties.push(getModelDesignProperty(i18n_templateItems, i18n_templateItemsInstructionsGroup, prop_item_items, true, item.items
+            ? item.items.map((tempItem) => itemToDesign(tempItem, languageId, parent, this.context, this.customParams))
+            : []));
         return { display: i18n_childItems, properties };
     }
 }
@@ -2389,7 +2697,7 @@ class TemplateSectionMapper extends TemplateItemGroupMapper {
     }
     getPotentialDesigns(property) {
         if (property.property === prop_item_title) {
-            return SECTION_POTENTIAL_DESIGN_LIST;
+            return [TITLE_POTENTIAL_DESIGN];
         }
         else if (property.property === prop_item_items) {
             return GROUP_POTENTIAL_DESIGN_LIST;
@@ -2399,123 +2707,99 @@ class TemplateSectionMapper extends TemplateItemGroupMapper {
         }
     }
     toDesign(model, languageId, parent) {
-        // TODO: add way to handle parent sections
         const design = super.toDesign(model, languageId, parent);
-        design.sections = [...design.sections, this.getSectionItemSection(model, languageId, parent)];
+        // Use the current design as the parent for the section item section, in that it only needs to see the actual section design base.
+        const currentTemplateSectionAsParent = itemToDesignBase(model, languageId);
+        design.sections = [...design.sections, this.getSectionItemSection(model, languageId, currentTemplateSectionAsParent)];
         return design;
     }
     toModel(design) {
         let model = super.toModel(design);
-        const sectionProperties = getLiteralProperties(design, i18n_childItems, [prop_item_title]);
-        model = Object.assign(Object.assign({}, model), sectionProperties);
+        const sectionTitleProperties = getTemplateItems(design, i18n_sectionTitleItem, [prop_item_title]);
+        model = Object.assign(Object.assign({}, model), sectionTitleProperties);
         return model;
     }
     getSectionItemSection(item, languageId, parent) {
         const properties = [];
-        properties.push(getModelDesignProperty(i18n_title, i18n_titleInstructionsSection, prop_item_title, false, item.title ? [itemToDesign(item, languageId, parent, this.context)] : []));
-        return { display: i18n_childItems, properties };
+        properties.push(getModelDesignProperty(i18n_title, i18n_titleInstructionsSection, prop_item_title, false, item.title ? [itemToDesign(item.title, languageId, parent, this.context, this.customParams)] : [], false));
+        return { display: i18n_sectionTitleItem, properties };
     }
 }
 
 registerMapper(BOOLEAN_ITEM_TEMPLATE_ID, BooleanItemTemplateMapper, (params) => instanceOfBooleanItemTemplate(params.model)
-    ? new BooleanItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new BooleanItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(BULLETED_LIST_ITEM_TEMPLATE_ID, BulletedListItemTemplateMapper, (params) => instanceOfBulletedListItemTemplate(params.model)
-    ? new BulletedListItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new BulletedListItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(CHECKBOX_ITEM_TEMPLATE_ID, CheckboxItemTemplateMapper, (params) => instanceOfCheckboxItemTemplate(params.model)
-    ? new CheckboxItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new CheckboxItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(DATE_ITEM_TEMPLATE_ID, DateItemTemplateMapper, (params) => instanceOfDateItemTemplate(params.model)
-    ? new DateItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new DateItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(DECIMAL_ANSWER_ITEM_TEMPLATE_ID, NumericResponseItemTemplateMapper, (params) => instanceOfDecimalAnswerItemTemplate(params.model)
-    ? new NumericResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new NumericResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(DROPDOWN_ITEM_TEMPLATE_ID, DropdownItemTemplateMapper, (params) => instanceOfDropdownItemTemplate(params.model)
-    ? new DropdownItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new DropdownItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(FILE_UPLOAD_ITEM_TEMPLATE_ID, FileUploadItemTemplateMapper, (params) => instanceOfFileUploadItemTemplate(params.model)
-    ? new FileUploadItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new FileUploadItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(INTERNATIONALIZED_PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID, I18nTextResponseItemTemplateMapper, (params) => instanceOfInternationalizedParagraphAnswerItemTemplate(params.model)
-    ? new I18nTextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new I18nTextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(INTERNATIONALIZED_SHORT_ANSWER_ITEM_TEMPLATE_ID, I18nTextResponseItemTemplateMapper, (params) => instanceOfInternationalizedShortAnswerItemTemplate(params.model)
-    ? new I18nTextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new I18nTextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(MULTIPLE_CHOICE_ITEM_TEMPLATE_ID, MultipleChoiceItemTemplateMapper, (params) => instanceOfMultipleChoiceItemTemplate(params.model)
-    ? new MultipleChoiceItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new MultipleChoiceItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(NUMBERED_LIST_ITEM_TEMPLATE_ID, NumberedListItemTemplateMapper, (params) => instanceOfNumberedListItemTemplate(params.model)
-    ? new NumberedListItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new NumberedListItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID, OffsetDateRangeTemplateMapper, (params) => instanceOfOffsetDateRangeTemplate(params.model)
-    ? new OffsetDateRangeTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new OffsetDateRangeTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID, TextResponseItemTemplateMapper, (params) => instanceOfParagraphAnswerItemTemplate(params.model)
-    ? new TextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new TextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(REPEATABLE_ITEM_TEMPLATE_IMPL_ID, RepeatableItemTemplateMapper, (params) => instanceOfRepeatableItemTemplate(params.model)
-    ? new RepeatableItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new RepeatableItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(SHORT_ANSWER_ITEM_TEMPLATE_ID, TextResponseItemTemplateMapper, (params) => instanceOfShortAnswerItemTemplate(params.model)
-    ? new TextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new TextResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(TEMPLATE_ITEM_GROUP_IMPL_ID, TemplateItemGroupMapper, (params) => instanceOfTemplateItemGroupImpl(params.model)
-    ? new TemplateItemGroupMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new TemplateItemGroupMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(TEMPLATE_SECTION_IMPL_ID, TemplateSectionMapper, (params) => instanceOfTemplateSectionImpl(params.model)
-    ? new TemplateSectionMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new TemplateSectionMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(TEXT_ITEM_TEMPLATE_ID, TextItemTemplateMapper, (params) => instanceOfTextItemTemplate(params.model)
-    ? new TextItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new TextItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(TIME_ITEM_TEMPLATE_ID, TimeItemTemplateMapper, (params) => instanceOfTimeItemTemplate(params.model)
-    ? new TimeItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new TimeItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(TITLE_ITEM_TEMPLATE_ID, TitleItemTemplateMapper, (params) => instanceOfTitleItemTemplate(params.model)
-    ? new TitleItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new TitleItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(WHOLE_NUMBER_ANSWER_ITEM_TEMPLATE_ID, NumericResponseItemTemplateMapper, (params) => instanceOfWholeNumberAnswerItemTemplate(params.model)
-    ? new NumericResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new NumericResponseItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
 registerMapper(YEAR_QUARTER_RANGE_ITEM_TEMPLATE_ID, YearQuarterRangeItemTemplateMapper, (params) => instanceOfYearQuarterRangeTemplate(params.model)
-    ? new YearQuarterRangeItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign()
+    ? new YearQuarterRangeItemTemplateMapper(Object.assign(Object.assign({}, params), { model: params.model, customParams: params.customParams })).getDesign()
     : new TemplateItemMapper(params).getDesign());
-
-const SLASHED_DATE_DISPLAY_VALUE = {
-    value: 'MM/DD/YYYY',
-    display: 'MM/DD/YYYY',
-};
-const DASHED_DATE_DISPLAY_VALUE = {
-    value: 'MM-DD-YYYY',
-    display: 'MM-DD-YYYY',
-};
-const LONG_DATE_DISPLAY_VALUE = {
-    value: 'MMMM D, YYYY',
-    display: 'MMMM D, YYYY',
-};
-const EURO_LONG_DATE_DISPLAY_VALUE = {
-    value: 'D MMMM YYYY',
-    display: 'D MMMM YYYY',
-};
-const DOTTED_DATE_DISPLAY_VALUE = {
-    value: 'DD.MM.YYYY',
-    display: 'DD.MM.YYYY',
-};
-const ISO_8601_DATE_DISPLAY_VALUE = {
-    value: 'YYYY-MM-DD',
-    display: 'YYYY-MM-DD',
-};
-const DATE_ENUM_VALUES = [
-    ISO_8601_DATE_DISPLAY_VALUE,
-    LONG_DATE_DISPLAY_VALUE,
-    EURO_LONG_DATE_DISPLAY_VALUE,
-    SLASHED_DATE_DISPLAY_VALUE,
-    DASHED_DATE_DISPLAY_VALUE,
-    DOTTED_DATE_DISPLAY_VALUE,
-];
+registerTemplateMapper(TEMPLATE_IMPL_ID, TemplateMapper, (params) => {
+    if (instanceOfTemplateImpl(params.model)) {
+        return new TemplateMapper(Object.assign(Object.assign({}, params), { model: params.model })).getDesign();
+    }
+    else {
+        throw new Error(`The model provided is not an instance of TemplateImpl. We do not support mapping it to a design. Model: ${JSON.stringify(params.model)}`);
+    }
+});
 
 const template = {
     id: 'template',
@@ -2526,6 +2810,31 @@ const form = {
     display: i18n_form,
 };
 
+const UnavailableTemplateItemNameMap = {
+    [BOOLEAN_ITEM_TEMPLATE_ID]: i18n_booleanItem,
+    [BULLETED_LIST_ITEM_TEMPLATE_ID]: i18n_bulletedListItem,
+    [CHECKBOX_ITEM_TEMPLATE_ID]: i18n_checkboxItem,
+    [DATE_ITEM_TEMPLATE_ID]: i18n_dateItem,
+    [DECIMAL_ANSWER_ITEM_TEMPLATE_ID]: i18n_decimalAnswerItem,
+    [DROPDOWN_ITEM_TEMPLATE_ID]: i18n_dropdownItem,
+    [FILE_UPLOAD_ITEM_TEMPLATE_ID]: i18n_fileUploadItem,
+    [I18N_PARAGRAPH_ANSWER_ITEM_ID]: i18n_internationalizedParagraphAnswerItem,
+    [I18N_SHORT_ANSWER_ITEM_ID]: i18n_internationalizedShortAnswerItem,
+    [MULTIPLE_CHOICE_ITEM_TEMPLATE_ID]: i18n_multipleChoiceItem,
+    [NUMBERED_LIST_ITEM_TEMPLATE_ID]: i18n_numberedListItem,
+    [OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID]: i18n_offsetDateRangeItem,
+    [PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID]: i18n_paragraphAnswerItem,
+    [REPEATABLE_ITEM_TEMPLATE_IMPL_ID]: i18n_repeatableItem,
+    [SHORT_ANSWER_ITEM_TEMPLATE_ID]: i18n_shortAnswerItem,
+    [TEMPLATE_ITEM_GROUP_IMPL_ID]: i18n_groupItem,
+    [TEMPLATE_SECTION_IMPL_ID]: i18n_sectionItem,
+    [TEXT_ITEM_TEMPLATE_ID]: i18n_textItem,
+    [TIME_ITEM_TEMPLATE_ID]: i18n_timeItem,
+    [TITLE_ITEM_TEMPLATE_ID]: i18n_titleItem,
+    [WHOLE_NUMBER_ANSWER_ITEM_TEMPLATE_ID]: i18n_wholeNumberAnswerItem,
+    [YEAR_QUARTER_RANGE_ITEM_TEMPLATE_ID]: i18n_yearQuarterRangeItem,
+};
+
 class BaseFormStep {
     constructor(instanceId) {
         this.instanceId = instanceId;
@@ -2711,6 +3020,73 @@ function isFormControl(something) {
     return isObject(something) && isType(something, 'value') && typeof something.value === 'string';
 }
 
+function isTemplateDesign(design) {
+    return design.type === TEMPLATE_IMPL_ID;
+}
+function isTemplateItemDesign(design) {
+    switch (design.type) {
+        case BOOLEAN_ITEM_TEMPLATE_ID:
+        case BULLETED_LIST_ITEM_TEMPLATE_ID:
+        case CHECKBOX_GRID_TEMPLATE_ID:
+        case CHECKBOX_ITEM_TEMPLATE_ID:
+        case DATE_ITEM_TEMPLATE_ID:
+        case DECIMAL_ANSWER_ITEM_TEMPLATE_ID:
+        case DROPDOWN_ITEM_TEMPLATE_ID:
+        case FILE_UPLOAD_ITEM_TEMPLATE_ID:
+        case HIDDEN_REFERENCE_ITEM_TEMPLATE_ID:
+        case INTERNATIONALIZED_PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID:
+        case INTERNATIONALIZED_SHORT_ANSWER_ITEM_TEMPLATE_ID:
+        case LINEAR_SCALE_ITEM_TEMPLATE_ID:
+        case MULTIPLE_CHOICE_GRID_ITEM_TEMPLATE_ID:
+        case MULTIPLE_CHOICE_ITEM_TEMPLATE_ID:
+        case NUMBERED_LIST_ITEM_TEMPLATE_ID:
+        case OFFSET_DATE_RANGE_ITEM_TEMPLATE_ID:
+        case PARAGRAPH_ANSWER_ITEM_TEMPLATE_ID:
+        case REPEATABLE_ITEM_TEMPLATE_IMPL_ID:
+        case REQUEST_ID_ITEM_TEMPLATE_ID:
+        case SHORT_ANSWER_ITEM_TEMPLATE_ID:
+        case TEMPLATE_ITEM_GROUP_IMPL_ID:
+        case TEMPLATE_SECTION_IMPL_ID:
+        case TEXT_ITEM_TEMPLATE_ID:
+        case TIME_ITEM_TEMPLATE_ID:
+        case TITLE_ITEM_TEMPLATE_ID:
+        case WHOLE_NUMBER_ANSWER_ITEM_TEMPLATE_ID:
+        case YEAR_QUARTER_RANGE_ITEM_TEMPLATE_ID:
+            return true;
+        default:
+            return false;
+    }
+}
+function isTemplateItem(something) {
+    return (instanceOfBooleanItemTemplate(something) ||
+        instanceOfBulletedListItemTemplate(something) ||
+        instanceOfCheckboxGridTemplate(something) ||
+        instanceOfCheckboxItemTemplate(something) ||
+        instanceOfDateItemTemplate(something) ||
+        instanceOfDecimalAnswerItemTemplate(something) ||
+        instanceOfDropdownItemTemplate(something) ||
+        instanceOfFileUploadItemTemplate(something) ||
+        instanceOfHiddenReferenceItemTemplate(something) ||
+        instanceOfInternationalizedParagraphAnswerItemTemplate(something) ||
+        instanceOfInternationalizedShortAnswerItemTemplate(something) ||
+        instanceOfLinearScaleItemTemplate(something) ||
+        instanceOfMultipleChoiceGridItemTemplate(something) ||
+        instanceOfMultipleChoiceItemTemplate(something) ||
+        instanceOfNumberedListItemTemplate(something) ||
+        instanceOfOffsetDateRangeTemplate(something) ||
+        instanceOfParagraphAnswerItemTemplate(something) ||
+        instanceOfRepeatableItemTemplate(something) ||
+        instanceOfRequestIdItemTemplate(something) ||
+        instanceOfShortAnswerItemTemplate(something) ||
+        instanceOfTemplateItemGroupImpl(something) ||
+        instanceOfTemplateSectionImpl(something) ||
+        instanceOfTextItemTemplate(something) ||
+        instanceOfTimeItemTemplate(something) ||
+        instanceOfTitleItemTemplate(something) ||
+        instanceOfWholeNumberAnswerItemTemplate(something) ||
+        instanceOfYearQuarterRangeTemplate(something));
+}
+
 function mergeFormOptionSelector(source, target) {
     const mergedFormOptionSelector = Object.assign(Object.assign(Object.assign({}, target), source), { disabledItems: source.disabledItems, enabledItems: source.enabledItems, option: Object.assign(Object.assign({}, target.option), source.option) });
     return mergedFormOptionSelector;
@@ -2728,7 +3104,6 @@ function mergeOptionTemplateMap(source, target) {
     return mergedOptionTemplateMap;
 }
 function mergeBooleanItemTemplate(source, target) {
-    // const conditional: Conditional = mergeConditional(source.conditional, target.conditional);
     const option = mergeFormOptionSelector(source.option, target.option);
     const optionTemplateMap = mergeOptionTemplateMap(source.optionTemplateMap, target.optionTemplateMap);
     const mergedBooleanItemTemplate = Object.assign(Object.assign(Object.assign({}, target), source), { codeOption: target.codeOption || source.codeOption, option,
@@ -2826,6 +3201,49 @@ function mergeTemplate(source, target) {
     return mergedTemplate;
 }
 
+function getModelMap(items, itemIdExclusions) {
+    const modelMap = new Map();
+    traverseItems(items, modelMap, itemIdExclusions);
+    return modelMap;
+}
+function traverseItems(items, modelMap, itemIdExclusions) {
+    for (const item of items) {
+        const propertyNameNotExcluded = isPresent(itemIdExclusions) && !itemIdExclusions.includes(item.itemId);
+        if (propertyNameNotExcluded) {
+            if (instanceOfTemplateItemGroupImpl(item)) {
+                modelMap.set(item.instanceId, item);
+                traverseItems(item.items, modelMap, itemIdExclusions);
+            }
+            else if (instanceOfTemplateSectionImpl(item)) {
+                modelMap.set(item.instanceId, item);
+                traverseItems(item.items, modelMap, itemIdExclusions);
+            }
+            else if (isTemplateItem(item)) {
+                modelMap.set(item.instanceId, item);
+            }
+        }
+    }
+}
+
+function getModelToDesign(model, languageId, contextSelected, references) {
+    if (instanceOfTemplateImpl(model)) {
+        return templateToDesign(model, languageId, contextSelected, {
+            references,
+        });
+    }
+    else if (isTemplateItem(model)) {
+        return itemToDesign(model, languageId, undefined, contextSelected, {
+            references,
+        });
+    }
+    else if (instanceOfFormOptionSelector(model)) {
+        return optionSelectorToDesign(model, languageId, {}, references, undefined, contextSelected);
+    }
+    else {
+        throw new Error(`Cannot convert model to design. Model is not recognized. Supported types are instances of TEMPLATE, TEMPLATE_ITEM, and OPTION.`);
+    }
+}
+
 /**
  * Update a {@link FormStep}'s `status`.
  * The server side form validation errors will trump the provided `status`.
@@ -3611,6 +4029,45 @@ class MtnaWfItemInjector extends MtnaComponentInjector {
             }
         }
     }
+    configureInjectedComponent() {
+        if (isDateItem(this.item) || isOffsetDateRangeItem(this.item)) {
+            const itemWithDateFormat = this.item;
+            const key = this.getInjectedComponentKey();
+            if (key && this.injectionService) {
+                const injectedComponent = this.injectionService.getInjectedComponent(key);
+                if (injectedComponent) {
+                    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(injectedComponent.component);
+                    const compModule = componentFactory.ngModule;
+                    // TODO:
+                    const providers = [];
+                    const updatedMatDateFormats = {
+                        parse: {
+                            dateInput: itemWithDateFormat.format,
+                        },
+                        display: {
+                            dateInput: itemWithDateFormat.format,
+                            monthLabel: 'MMM',
+                            monthYearLabel: 'YYYY MMM',
+                            dateA11yLabel: 'LL',
+                            monthYearA11yLabel: 'MMMM YYYY', // Accessible month-year, e.g., "July 2025"
+                        },
+                    };
+                    providers.push({ provide: MAT_DATE_FORMATS, useValue: updatedMatDateFormats });
+                    const componentRef = this.viewContainerRef.createComponent(componentFactory, undefined, providers.length > 0 ? Injector.create({ providers }) : this.injector, undefined, compModule);
+                    this.configureComponent(componentRef);
+                }
+                else {
+                    console.error('No injection component found for key [' + key + ']');
+                }
+            }
+            else {
+                console.warn('No key provided for injection');
+            }
+        }
+        else {
+            super.configureInjectedComponent();
+        }
+    }
     getInjectedComponentKey() {
         if (this.item) {
             return this.item.itemId;
@@ -4721,7 +5178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class GetI18nStringValueFromLocalePipe {
     transform(displayLocale, i18nStrings) {
         let stringValue = '';
-        if (i18nStrings.length > 0 && isPresent(displayLocale)) {
+        if (isPresent(i18nStrings) && i18nStrings.length > 0 && isPresent(displayLocale)) {
             const i18nString = i18nStrings.find((i18nSt) => i18nSt.facetId === displayLocale);
             if (i18nString) {
                 stringValue = i18nString.value ? i18nString.value : '';
@@ -4854,13 +5311,6 @@ class MtnaWfApiService extends BaseUrlService {
         this.API_URL = `${this.BASE_URL}`;
         this.FORM_URL = `${this.API_URL}/form`;
         this.TEMPLATE_URL = `${this.API_URL}/template`;
-        this.NEW_TEMPLATE_URL = `${this.TEMPLATE_URL}/new`;
-        this.NEW_SECTION_URL = `${this.TEMPLATE_URL}/section`;
-        this.ITEMS_URL = `${this.TEMPLATE_URL}/items`;
-        this.ITEM_INSTANCE_URL = `${this.TEMPLATE_URL}/item`;
-        this.TEMPLATE_SAVE_URL = `${this.TEMPLATE_URL}/save`;
-        this.TEMPLATE_DELETE_URL = `${this.TEMPLATE_URL}/delete`;
-        this.ALL_TEMPLATES_URL = `${this.API_URL}/templates`;
     }
     /**
      * Download a web form
@@ -4878,32 +5328,69 @@ class MtnaWfApiService extends BaseUrlService {
     getRepeatableItem(templateId, itemTemplateId) {
         return this.http.get(`${this.FORM_URL}/${templateId}/item/${itemTemplateId}`);
     }
-    getNewTemplate() {
-        return this.http.get(this.NEW_TEMPLATE_URL);
-    }
-    getAllTemplates() {
-        return this.http.get(this.ALL_TEMPLATES_URL);
-    }
-    getNewSection() {
-        return this.http.get(this.NEW_SECTION_URL);
+    /**
+     * Get all of the user's currently defined {@link Template}s.
+     *
+     * @return the {@link Template}s that the user has access to.
+     */
+    getTemplates() {
+        return this.http.get(`${this.TEMPLATE_URL}/list`);
     }
-    getItems() {
-        return this.http.get(this.ITEMS_URL);
+    /**
+     * Creates a new Template
+     *
+     * @return the newly created template
+     */
+    createTemplate() {
+        return this.http.post(`${this.TEMPLATE_URL}`, undefined);
     }
-    getTemplateItem(id) {
-        return this.http.get(`${this.ITEM_INSTANCE_URL}?id=${id}`);
+    /**
+     * Get the specified {@link Template}.
+     *
+     * @param id the ID of the {@link Template} to retrieve
+     * @return the specified template.
+     */
+    getTemplate(id) {
+        return this.http.get(`${this.TEMPLATE_URL}/${id}`);
     }
-    saveTemplate() {
-        return this.http.get(this.TEMPLATE_SAVE_URL);
+    /**
+     * Updates the specified {@link Template} with the values provided in the
+     * {@link Template} POJO. This will not update child items, only the properties
+     * at the template level.
+     *
+     * @param id       the ID of the {@link Template} to update
+     * @param template the {@link Template} POJO to use to update the persisted
+     *                 resource
+     * @return the updated {@link Template}
+     */
+    updateTemplate(id, template) {
+        return this.http.post(`${this.TEMPLATE_URL}/${id}`, template);
     }
-    getDeleteTemplate() {
-        return this.http.get(this.TEMPLATE_DELETE_URL);
+    /**
+     * Deletes the specified {@link Template}
+     *
+     * @param id the ID of the {@link Template} to delete
+     */
+    deleteTemplate(id) {
+        return this.http.delete(`${this.TEMPLATE_URL}/${id}`);
     }
-    getTemplateInstance(template) {
-        return this.http.post(`${this.TEMPLATE_URL}/convert`, template);
+    /**
+     * Creates a new {@link Template} by copying an existing {@link Template}.
+     *
+     * @param id the ID of the {@link Template} to clone
+     * @return the newly cloned {@link Template}
+     */
+    copyTemplate(id) {
+        return this.http.post(`${this.TEMPLATE_URL}/${id}/copy`, undefined);
     }
-    getTemplateItemInstance(templateItem) {
-        return this.http.post(`${this.ITEM_INSTANCE_URL}/convert`, templateItem);
+    /**
+     * Gets a {@link Form} instance of the specified {@link Template}.
+     *
+     * @param id the ID of the {@link Template} to preview
+     * @return a form created from the template
+     */
+    previewTemplate(id) {
+        return this.http.get(`${this.TEMPLATE_URL}/${id}/preview`);
     }
 }
 MtnaWfApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfApiService, deps: [{ token: MTNA_API_CONFIG }, { token: i1$3.HttpClient }, { token: i1$1.MtnaLogger }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6607,33 +7094,9 @@ class MtnaWfDateComponent extends MtnaWfBaseValueItem {
     }
     set item(value) {
         super.item = value;
-        if (this.item.format) {
-            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.item.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);
-        }
+        // if (this.item.format) {
+        //   this.configureDatePickerFormatter();
+        // }
     }
 }
 MtnaWfDateComponent.dateFormItemComponentInstances = 0;
@@ -6670,7 +7133,7 @@ MtnaWfDateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         MtnaHighlightModule,
         ReactiveFormsModule,
         MtnaWfGetFormControlErrorPipeModule], exports: [MtnaWfDateComponent] });
-MtnaWfDateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateModule, providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_MAT_DATE_FORMAT }], imports: [[
+MtnaWfDateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateModule, imports: [[
             CommonModule,
             FormsModule,
             MatFormFieldModule,
@@ -6697,7 +7160,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     ],
                     declarations: [MtnaWfDateComponent],
                     exports: [MtnaWfDateComponent],
-                    providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_MAT_DATE_FORMAT }],
                 }]
         }] });
 
@@ -7696,7 +8158,7 @@ class MtnaWfYearQuarterComponent extends MtnaWfBaseValueItem {
     }
 }
 MtnaWfYearQuarterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MTNA_WF_DEFAULT_YEAR_RANGE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfYearQuarterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item", host: { properties: { "class.mtna-wf-year-quarter-item": "this.yearQuarterItemClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div\n  *ngIf=\"control\"\n  class=\"year-quarter-container\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"Year Selection\" i18n-aria-label>\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"Quarter Selection\" i18n-aria-label>\n      <mat-option i18n>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfYearQuarterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterComponent, selector: "mtna-wf-year-quarter-item", host: { properties: { "class.mtna-wf-year-quarter-item": "this.yearQuarterItemClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"header\"></ng-container>\n<div\n  *ngIf=\"control\"\n  class=\"year-quarter-container\"\n  fxLayout=\"row\"\n  fxLayoutGap=\"8px\"\n  [mtnaHighlight]=\"indicatorStatus === 'ACTIVE' && !hasItemHeader\"\n>\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"Year Selection\" i18n-aria-label>\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"Quarter Selection\" i18n-aria-label>\n      <mat-option i18n>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n    <mat-error *ngFor=\"let error of control.errors | keyvalue\">\n      {{ error | mtnaWfGetControlError : item }}\n    </mat-error>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item.mtna-wf-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-error-container{font-size:75%;line-height:1;min-height:1em;margin-top:-.75rem}mtna-wf-year-quarter-item.mtna-wf-control-item .control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list){padding-left:.75em}mtna-wf-year-quarter-item.mtna-wf-control-item .mtna-wf-item-header~:not(.mtna-wf-error-container):not(.mat-list).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item.mtna-wf-year-quarter-item .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}mtna-wf-year-quarter-item .mat-select{min-width:60px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i1$1.MtnaHighlightDirective, selector: "[mtnaHighlight]", inputs: ["mtnaHighlight", "mtnaHighlightColor"], exportAs: ["mtnaHighlight"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "keyvalue": i3.KeyValuePipe, "mtnaWfGetControlError": MtnaWfGetFormControlErrorPipe, "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterComponent, decorators: [{
             type: Component,
             args: [{
@@ -8433,10 +8895,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
-function instanceOfStepAware(something) {
-    return (isType(something, 'step') && (something.step === null || something.step === undefined || instanceOfFormStep(something.step)));
-}
-
 class MtnaWfTemplateItemInjector extends MtnaComponentInjector {
     constructor(injector, cfr, vcr, injectionService) {
         super(injector, cfr, vcr, injectionService);
@@ -8503,10 +8961,54 @@ class MtnaWfTemplateItemInjector extends MtnaComponentInjector {
         if (this.wfTemplateItemComponent instanceof MtnaWfBaseTemplateItemWithListComponent) {
             this.wfTemplateItemComponent.inList = this.inList;
         }
-        if (instanceOfStepAware(this.wfTemplateItemComponent)) {
+        // Cannot use the instanceOfStepAware type guard here because:
+        // - At the time "const instance = componentRef.instance" runs angular has just created the component but the @Input step has not been set yet.
+        // - The isType part of the instanceOfStepAware check relies on the component already having a step property, which is not the case at this point, so it always returns false.
+        // - This is a timing issue in Angular's component lifecycle, where the component instance exists but its inputs have not been initialized yet.
+        // As a workaround, we can check for the presence of the 'step' property directly on the component instance, which is a more reliable way to determine if it is StepAware at this point in the lifecycle.
+        if ('step' in this.wfTemplateItemComponent) {
             this.wfTemplateItemComponent.step = this.step;
         }
     }
+    configureInjectedComponent() {
+        if (instanceOfDateItemTemplate(this.template) || instanceOfOffsetDateRangeTemplate(this.template)) {
+            const templateWithDateFormat = this.template;
+            const key = this.getInjectedComponentKey();
+            if (key && this.injectionService) {
+                const injectedComponent = this.injectionService.getInjectedComponent(key);
+                if (injectedComponent) {
+                    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(injectedComponent.component);
+                    const compModule = componentFactory.ngModule;
+                    // TODO:
+                    const providers = [];
+                    const updatedMatDateFormats = {
+                        parse: {
+                            dateInput: templateWithDateFormat.format,
+                        },
+                        display: {
+                            dateInput: templateWithDateFormat.format,
+                            monthLabel: 'MMM',
+                            monthYearLabel: 'YYYY MMM',
+                            dateA11yLabel: 'LL',
+                            monthYearA11yLabel: 'MMMM YYYY', // Accessible month-year, e.g., "July 2025"
+                        },
+                    };
+                    providers.push({ provide: MAT_DATE_FORMATS, useValue: updatedMatDateFormats });
+                    const componentRef = this.viewContainerRef.createComponent(componentFactory, undefined, providers.length > 0 ? Injector.create({ providers }) : this.injector, undefined, compModule);
+                    this.configureComponent(componentRef);
+                }
+                else {
+                    console.error('No injection component found for key [' + key + ']');
+                }
+            }
+            else {
+                console.warn('No key provided for injection');
+            }
+        }
+        else {
+            super.configureInjectedComponent();
+        }
+    }
     getInjectedComponentKey() {
         if (this.template) {
             return this.template.itemId;
@@ -8549,6 +9051,7 @@ class MtnaWfTemplateItemComponent {
         this._displayLocale = 'en';
         this._inList = false;
         this._isCompact = false;
+        this.isTemplateSection = false;
     }
     get displayLocale() {
         return this._displayLocale;
@@ -8590,10 +9093,13 @@ class MtnaWfTemplateItemComponent {
         if (isConditionalItem(template)) {
             this.condition = template.condition;
         }
+        if (instanceOfTemplateSectionImpl(template)) {
+            this.isTemplateSection = true;
+        }
     }
 }
 MtnaWfTemplateItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTemplateItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfTemplateItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: { displayLocale: "displayLocale", inList: "inList", isCompact: "isCompact", step: "step", template: "template", color: "color" }, ngImport: i0, template: "<mtna-annotations-indicator\n  *ngIf=\"template.annotationEnabled\"\n  [annotatableId]=\"template.annotatableId\"\n  color=\"primary\"\n></mtna-annotations-indicator>\n\n<mtna-wf-template-item-header\n  *ngIf=\"template.questionText.length > 0 || template.descriptiveText.length > 0\"\n  [descriptiveText]=\"template.descriptiveText\"\n  [displayLocale]=\"displayLocale\"\n  [questionText]=\"template.questionText\"\n  [required]=\"template.required\"\n></mtna-wf-template-item-header>\n\n<mtna-wf-template-item-injector\n  [color]=\"color\"\n  [displayLocale]=\"displayLocale\"\n  [inList]=\"inList\"\n  [isCompact]=\"isCompact\"\n  [template]=\"template\"\n  [step]=\"step\"\n></mtna-wf-template-item-injector>\n\n<ng-container *ngIf=\"condition\"> </ng-container>\n", styles: ["mtna-wf-template-item{display:block;position:relative}mtna-wf-template-item mtna-annotations-indicator{position:absolute;top:0;right:0;z-index:2}mtna-wf-template-item mtna-wf-template-item-header+.template-item-group-container{padding:.35em .75em .625em}mtna-wf-template-item mtna-wf-template-item-header+.template-item-group-container>mtna-wf-template-item{margin-top:0}mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-boolean-template-item,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-template-item-group,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-ordered-list-item-template,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-text-item-template,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-title-item-template,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-unordered-list-item-template{padding-right:24px}\n"], components: [{ type: i2.MtnaAnnotationsIndicatorComponent, selector: "mtna-annotations-indicator", inputs: ["color", "annotatableId", "annotatableItemName", "count"], outputs: ["status"] }, { type: MtnaWfTemplateItemHeaderComponent, selector: "mtna-wf-template-item-header", inputs: ["descriptiveText", "disabled", "displayLocale", "required", "questionText"] }, { type: MtnaWfTemplateItemInjector, selector: "mtna-wf-template-item-injector", inputs: ["displayLocale", "inList", "isCompact", "readonly", "step", "template", "color"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfTemplateItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: { displayLocale: "displayLocale", inList: "inList", isCompact: "isCompact", step: "step", template: "template", color: "color" }, ngImport: i0, template: "<mtna-annotations-indicator\n  *ngIf=\"template.annotationEnabled\"\n  [annotatableId]=\"template.annotatableId\"\n  color=\"primary\"\n></mtna-annotations-indicator>\n\n<mtna-wf-template-item-header\n  *ngIf=\"\n    !isTemplateSection &&\n    ((template.questionText && template.questionText.length > 0) || (template.descriptiveText && template.descriptiveText.length > 0))\n  \"\n  [descriptiveText]=\"template.descriptiveText ?? []\"\n  [displayLocale]=\"displayLocale\"\n  [questionText]=\"template.questionText ?? []\"\n  [required]=\"template.required\"\n></mtna-wf-template-item-header>\n\n<mtna-wf-template-item-injector\n  [color]=\"color\"\n  [displayLocale]=\"displayLocale\"\n  [inList]=\"inList\"\n  [isCompact]=\"isCompact\"\n  [template]=\"template\"\n  [step]=\"step\"\n></mtna-wf-template-item-injector>\n\n<ng-container *ngIf=\"condition\"> </ng-container>\n", styles: ["mtna-wf-template-item{display:block;position:relative}mtna-wf-template-item mtna-annotations-indicator{position:absolute;top:0;right:0;z-index:2}mtna-wf-template-item mtna-wf-template-item-header+.template-item-group-container{padding:.35em .75em .625em}mtna-wf-template-item mtna-wf-template-item-header+.template-item-group-container>mtna-wf-template-item{margin-top:0}mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-boolean-template-item,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-template-item-group,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-ordered-list-item-template,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-text-item-template,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-title-item-template,mtna-wf-template-item mtna-annotations-indicator+mtna-wf-template-item-header+mtna-wf-template-item+mtna-wf-unordered-list-item-template{padding-right:24px}\n"], components: [{ type: i2.MtnaAnnotationsIndicatorComponent, selector: "mtna-annotations-indicator", inputs: ["color", "annotatableId", "annotatableItemName", "count"], outputs: ["status"] }, { type: MtnaWfTemplateItemHeaderComponent, selector: "mtna-wf-template-item-header", inputs: ["descriptiveText", "disabled", "displayLocale", "required", "questionText"] }, { type: MtnaWfTemplateItemInjector, selector: "mtna-wf-template-item-injector", inputs: ["displayLocale", "inList", "isCompact", "readonly", "step", "template", "color"] }], directives: [{ 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: MtnaWfTemplateItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8770,31 +9276,6 @@ class MtnaWfDateItemTemplateComponent extends MtnaWfBaseTemplateItemComponent {
             }
         }
     }
-    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() {
-        var _a;
-        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((_a = this.template) === null || _a === void 0 ? void 0 : _a.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);
-        }
-    }
 }
 MtnaWfDateItemTemplateComponent.dateFormItemTemplateComponentInstances = 0;
 MtnaWfDateItemTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateItemTemplateComponent, deps: [{ token: LOCALE_ID }, { token: i1$1.MtnaLogger }], target: i0.ɵɵFactoryTarget.Component });
@@ -8865,7 +9346,7 @@ MtnaWfDateItemTemplateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         MatMomentDateModule,
         ReactiveFormsModule,
         GetI18nStringValueFromLocalePipeModule], exports: [MtnaWfDateItemTemplateComponent] });
-MtnaWfDateItemTemplateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateItemTemplateModule, providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_MAT_DATE_FORMAT }], imports: [[
+MtnaWfDateItemTemplateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDateItemTemplateModule, imports: [[
             CommonModule,
             FormsModule,
             MatFormFieldModule,
@@ -8890,7 +9371,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     ],
                     declarations: [MtnaWfDateItemTemplateComponent],
                     exports: [MtnaWfDateItemTemplateComponent],
-                    providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_MAT_DATE_FORMAT }],
                 }]
         }] });
 
@@ -8913,29 +9393,114 @@ const _BaseMtnaWfYearQuarterItemTemplate = mixinDestroyNotifier(class {
 class MtnaWfYearQuarterItemTemplateComponent extends _BaseMtnaWfYearQuarterItemTemplate {
     constructor(defaultYearRange) {
         super();
+        this._readonly = false;
+        this._containingControl = new FormControl();
         this._quarterControl = new FormControl();
         this._yearControl = new FormControl();
         this._yearSelection = new Array();
+        this.destroyObs = new Subject();
         this.defaultYearRange = { numFutureYears: 25, numPastYears: 25 };
+        /**
+         * 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.componentRangeLimits) === null || _a === void 0 ? void 0 : _a.end.year) &&
+                // quarter limit was provided
+                isPresent(this.componentRangeLimits.end.quarter) &&
+                // selected quarter is beyond quarter limit
+                quarter > this.componentRangeLimits.end.quarter;
+            const beyondLowerLimit = 
+            // year matches start year range limit
+            year === ((_b = this.componentRangeLimits) === null || _b === void 0 ? void 0 : _b.start.year) &&
+                // quarter limit was provided
+                isPresent(this.componentRangeLimits.start.quarter) &&
+                // selected quarter is beyond quarter limit
+                quarter < this.componentRangeLimits.start.quarter;
+            if (beyondLowerLimit || beyondUpperLimit) {
+                this._quarterControl.setValue(null, { emitEvent: false });
+                return [year, null];
+            }
+            return [year, quarter];
+        };
         this.defaultYearRange = defaultYearRange || this.defaultYearRange;
     }
-    // @Input()
-    // get readonly(): boolean {
-    //   return this._readonly;
-    // }
-    // set readonly(value: boolean) {
-    //   this._readonly = value;
-    // }
-    // private _readonly = false;
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        this._readonly = value;
+    }
     get yearQuarterRange() {
         return this._yearQuarterRange;
     }
     set yearQuarterRange(value) {
         this._yearQuarterRange = value;
+        this.componentRangeLimits = value;
+    }
+    get isReadOnly() {
+        return this._readonly;
+    }
+    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._containingControl) === null || _a === void 0 ? void 0 : _a.dirty) && (this._yearControl.dirty || this._quarterControl.dirty)) {
+                    (_b = this._containingControl) === null || _b === void 0 ? void 0 : _b.markAsDirty();
+                    (_c = this._containingControl) === 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._containingControl) === null || _d === void 0 ? void 0 : _d.setValue({ year, quarter });
+                }
+            });
+        }
+    }
+    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._containingControl) === null || _a === void 0 ? void 0 : _a.value) ? this._containingControl.value.year : null);
+        this._quarterControl.setValue(((_b = this._containingControl) === null || _b === void 0 ? void 0 : _b.value) ? this._containingControl.value.quarter : null);
+        // Create range limits if none exist
+        if (!this.componentRangeLimits) {
+            const thisYear = new Date().getFullYear();
+            this.componentRangeLimits = {
+                start: {
+                    year: thisYear - this.defaultYearRange.numPastYears,
+                    quarter: null,
+                },
+                end: {
+                    year: thisYear + this.defaultYearRange.numFutureYears,
+                    quarter: null,
+                },
+            };
+        }
+        // Populate the year selection
+        for (let i = this.componentRangeLimits.start.year || 0; i <= (this.componentRangeLimits.end.year || 0); i++) {
+            this._yearSelection.push(i);
+        }
+        if (this.readonly) {
+            (_c = this._containingControl) === null || _c === void 0 ? void 0 : _c.disable();
+            this._quarterControl.disable();
+            this._yearControl.disable();
+        }
     }
 }
 MtnaWfYearQuarterItemTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterItemTemplateComponent, deps: [{ token: MTNA_WF_DEFAULT_YEAR_RANGE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfYearQuarterItemTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterItemTemplateComponent, selector: "mtna-wf-year-quarter-item-template", inputs: { yearQuarterRange: "yearQuarterRange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"year-quarter-container\" fxLayout=\"row\" fxLayoutGap=\"8px\">\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"Year Selection\" i18n-aria-label>\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"Quarter Selection\" i18n-aria-label>\n      <mat-option i18n>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item-template.mtna-wf-template-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item-template.mtna-wf-template-control-item .template-control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector){padding-left:.75em}mtna-wf-year-quarter-item-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item-template .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item-template .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: 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: { "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfYearQuarterItemTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterItemTemplateComponent, selector: "mtna-wf-year-quarter-item-template", inputs: { readonly: "readonly", yearQuarterRange: "yearQuarterRange" }, host: { properties: { "class.read-only": "this.isReadOnly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"year-quarter-container\" fxLayout=\"row\" fxLayoutGap=\"8px\">\n  <mat-form-field>\n    <mat-select [formControl]=\"_yearControl\" aria-label=\"Year Selection\" i18n-aria-label>\n      <mat-option *ngFor=\"let year of _yearSelection\" [value]=\"year\">{{ year }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-select [formControl]=\"_quarterControl\" aria-label=\"Quarter Selection\" i18n-aria-label>\n      <mat-option i18n>None</mat-option>\n      <mat-option *ngFor=\"let quarter of _yearControl.value | mtnaWfGetQuarters : componentRangeLimits\" [value]=\"quarter\">{{\n        $any(quarter) | mtnaWfDateQuarter : 'short'\n      }}</mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: ["mtna-wf-year-quarter-item-template.mtna-wf-template-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-item-template.mtna-wf-template-control-item .template-control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-item-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector){padding-left:.75em}mtna-wf-year-quarter-item-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector).mat-form-field{width:calc(100% - .75em)}mtna-wf-year-quarter-item-template .year-quarter-container>.mat-form-field{max-width:75px}mtna-wf-year-quarter-item-template .year-quarter-container>.mat-form-field:first-of-type{margin-right:8px}mtna-wf-year-quarter-item-template .mat-select{min-width:60px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i3$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: 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: { "mtnaWfGetQuarters": MtnaWfGetAvailableQuartersPipe, "mtnaWfDateQuarter": MtnaWfDateQuarterPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterItemTemplateComponent, decorators: [{
             type: Component,
             args: [{
@@ -8950,8 +9515,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }, {
                     type: Inject,
                     args: [MTNA_WF_DEFAULT_YEAR_RANGE]
-                }] }]; }, propDecorators: { yearQuarterRange: [{
+                }] }]; }, propDecorators: { readonly: [{
                 type: Input
+            }], yearQuarterRange: [{
+                type: Input
+            }], isReadOnly: [{
+                type: HostBinding,
+                args: ['class.read-only']
             }] } });
 
 class MtnaWfYearQuarterItemTemplateModule {
@@ -8994,9 +9564,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }] });
 
 class MtnaWfYearQuarterRangeItemTemplateComponent extends MtnaWfBaseTemplateItemComponent {
+    get template() {
+        return super.template;
+    }
+    set template(template) {
+        super.template = template;
+        // Create fake items for the underlying date-item component
+        this._startItem = Object.assign(Object.assign({}, template), { value: undefined });
+        this._endItem = Object.assign(Object.assign({}, template), { value: undefined });
+    }
 }
 MtnaWfYearQuarterRangeItemTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterRangeItemTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfYearQuarterRangeItemTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterRangeItemTemplateComponent, selector: "mtna-wf-year-quarter-range-template", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"template\" class=\"range-item-container\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\n  <mtna-wf-year-quarter-item-template [yearQuarterRange]=\"template.rangeLimits\"></mtna-wf-year-quarter-item-template>\n  <span fxFlex=\"14px\">to</span>\n  <mtna-wf-year-quarter-item-template [yearQuarterRange]=\"template.rangeLimits\"></mtna-wf-year-quarter-item-template>\n</div>\n", styles: ["mtna-wf-year-quarter-range-template.mtna-wf-template-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-range-template.mtna-wf-template-control-item .template-control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-range-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector){padding-left:.75em}mtna-wf-year-quarter-range-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: MtnaWfYearQuarterItemTemplateComponent, selector: "mtna-wf-year-quarter-item-template", inputs: ["yearQuarterRange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfYearQuarterRangeItemTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfYearQuarterRangeItemTemplateComponent, selector: "mtna-wf-year-quarter-range-template", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"template\" class=\"range-item-container\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\n  <mtna-wf-year-quarter-item-template [yearQuarterRange]=\"_startItem.rangeLimits\"></mtna-wf-year-quarter-item-template>\n  <span fxFlex=\"14px\">to</span>\n  <mtna-wf-year-quarter-item-template [yearQuarterRange]=\"_endItem.rangeLimits\"></mtna-wf-year-quarter-item-template>\n</div>\n", styles: ["mtna-wf-year-quarter-range-template.mtna-wf-template-control-item .mat-form-field{width:100%}mtna-wf-year-quarter-range-template.mtna-wf-template-control-item .template-control-item-content{padding:.35em .75em .625em}mtna-wf-year-quarter-range-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector){padding-left:.75em}mtna-wf-year-quarter-range-template.mtna-wf-template-control-item mtna-wf-template-item-header~.mtna-wf-template-control-item:not(.mat-list):not(mtna-wf-template-item-injector).mat-form-field{width:calc(100% - .75em)}\n"], components: [{ type: MtnaWfYearQuarterItemTemplateComponent, selector: "mtna-wf-year-quarter-item-template", inputs: ["readonly", "yearQuarterRange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfYearQuarterRangeItemTemplateComponent, decorators: [{
             type: Component,
             args: [{
@@ -9029,7 +9608,7 @@ class MtnaWfDecimalAnswerItemTemplateComponent extends MtnaWfBaseTemplateOptionI
     }
 }
 MtnaWfDecimalAnswerItemTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDecimalAnswerItemTemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MtnaWfDecimalAnswerItemTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDecimalAnswerItemTemplateComponent, selector: "mtna-wf-decimal-answer-item-template", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"template\">\n  <mat-form-field>\n    <input\n      matInput\n      [autocomplete]=\"(displayLocale | getI18nStringValueFromLocale : template.label) || template.name | mtnaWfGetAutoComplete\"\n      [required]=\"template.required\"\n    />\n  </mat-form-field>\n\n  <ng-template #fullList>\n    <mat-list>\n      <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n    </mat-list>\n  </ng-template>\n\n  <ng-template #listItem>\n    <ng-template #listItem>\n      <mat-list-item class=\"wrappable-list-item\">\n        <!-- <mat-icon *ngIf=\"displayLocale | getI18nStringValueFromLocale : template.label as label\" matListIcon>{{\n          label | mtnaWfGetListIcon\n        }}</mat-icon> -->\n        <ng-container *ngIf=\"displayLocale | getI18nStringValueFromLocale : template.questionText as questionText\">\n          <ng-container *ngIf=\"questionText !== ''\">\n            <ng-container *ngIf=\"displayLocale | getI18nStringValueFromLocale : template.label as tempLabel\">\n              <h4 mat-line>{{ tempLabel !== '' ? tempLabel : template.name }}</h4>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        <p mat-line class=\"wrap-line\">{{ _noInformationText }}</p>\n      </mat-list-item>\n    </ng-template>\n  </ng-template>\n</ng-container>\n", styles: ["mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item,mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item.mat-2-line,mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe, "getI18nStringValueFromLocale": GetI18nStringValueFromLocalePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfDecimalAnswerItemTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfDecimalAnswerItemTemplateComponent, selector: "mtna-wf-decimal-answer-item-template", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"template\">\n  <mat-form-field>\n    <mat-label>{{ displayLocale | getI18nStringValueFromLocale : template.label }}</mat-label>\n    <input\n      matInput\n      [autocomplete]=\"(displayLocale | getI18nStringValueFromLocale : template.label) || template.name | mtnaWfGetAutoComplete\"\n      [required]=\"template.required\"\n    />\n  </mat-form-field>\n\n  <ng-template #fullList>\n    <mat-list>\n      <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n    </mat-list>\n  </ng-template>\n\n  <ng-template #listItem>\n    <ng-template #listItem>\n      <mat-list-item class=\"wrappable-list-item\">\n        <!-- <mat-icon *ngIf=\"displayLocale | getI18nStringValueFromLocale : template.label as label\" matListIcon>{{\n          label | mtnaWfGetListIcon\n        }}</mat-icon> -->\n        <ng-container *ngIf=\"displayLocale | getI18nStringValueFromLocale : template.questionText as questionText\">\n          <ng-container *ngIf=\"questionText !== ''\">\n            <ng-container *ngIf=\"displayLocale | getI18nStringValueFromLocale : template.label as tempLabel\">\n              <h4 mat-line>{{ tempLabel !== '' ? tempLabel : template.name }}</h4>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        <p mat-line class=\"wrap-line\">{{ _noInformationText }}</p>\n      </mat-list-item>\n    </ng-template>\n  </ng-template>\n</ng-container>\n", styles: ["mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item,mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:auto;padding:12px 0}mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item.mat-2-line,mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item.mat-2-line.mat-list-item-with-avatar{padding:18.5px 0}mtna-wf-decimal-answer-item-template .mat-list-base .mat-list-item .mat-line{white-space:normal;overflow:unset;text-overflow:unset}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$3.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "getI18nStringValueFromLocale": GetI18nStringValueFromLocalePipe, "mtnaWfGetAutoComplete": MtnaWfGetAutoCompletePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDecimalAnswerItemTemplateComponent, decorators: [{
             type: Component,
             args: [{
@@ -9045,29 +9624,35 @@ class MtnaWfDecimalAnswerItemTemplateModule {
 }
 MtnaWfDecimalAnswerItemTemplateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDecimalAnswerItemTemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MtnaWfDecimalAnswerItemTemplateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDecimalAnswerItemTemplateModule, declarations: [MtnaWfDecimalAnswerItemTemplateComponent], imports: [CommonModule,
+        GetI18nStringValueFromLocalePipeModule,
         MatFormFieldModule,
-        MatListModule,
         MatInputModule,
+        MatListModule,
         MtnaWfGetAutoCompletePipeModule,
-        GetI18nStringValueFromLocalePipeModule], exports: [MtnaWfDecimalAnswerItemTemplateComponent] });
+        MtnaWfGetFormControlErrorPipeModule,
+        ReactiveFormsModule], exports: [MtnaWfDecimalAnswerItemTemplateComponent] });
 MtnaWfDecimalAnswerItemTemplateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDecimalAnswerItemTemplateModule, imports: [[
             CommonModule,
+            GetI18nStringValueFromLocalePipeModule,
             MatFormFieldModule,
-            MatListModule,
             MatInputModule,
+            MatListModule,
             MtnaWfGetAutoCompletePipeModule,
-            GetI18nStringValueFromLocalePipeModule,
+            MtnaWfGetFormControlErrorPipeModule,
+            ReactiveFormsModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfDecimalAnswerItemTemplateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
+                        GetI18nStringValueFromLocalePipeModule,
                         MatFormFieldModule,
-                        MatListModule,
                         MatInputModule,
+                        MatListModule,
                         MtnaWfGetAutoCompletePipeModule,
-                        GetI18nStringValueFromLocalePipeModule,
+                        MtnaWfGetFormControlErrorPipeModule,
+                        ReactiveFormsModule,
                     ],
                     declarations: [MtnaWfDecimalAnswerItemTemplateComponent],
                     exports: [MtnaWfDecimalAnswerItemTemplateComponent],
@@ -9800,24 +10385,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: i1$a.Store }]; } });
 
 class TemplateFormEffects {
+    // getTemplateInstance$ = createEffect(() =>
+    //   this.actions$.pipe(
+    //     ofType(TemplateFormActions.getTemplateInstance),
+    //     switchMap(({ template }) => {
+    //       return this.mtnaWfApiService.getTemplateInstance(template).pipe(
+    //         map((form) => TemplateFormApiActions.getTemplateInstanceSuccess({ form })),
+    //         catchError((error) => {
+    //           this.errorService.showError(error);
+    //           return of(TemplateFormApiActions.getTemplateInstanceFailure());
+    //         })
+    //       );
+    //     })
+    //   )
+    // );
+    //
+    // getTemplateItemInstance$ = createEffect(() =>
+    //   this.actions$.pipe(
+    //     ofType(TemplateFormActions.getTemplateItemInstance),
+    //     switchMap(({ templateItem }) => {
+    //       return this.mtnaWfApiService.getTemplateItemInstance(templateItem).pipe(
+    //         map((formItem) => TemplateFormApiActions.getTemplateItemInstanceSuccess({ formItem })),
+    //         catchError((error) => {
+    //           this.errorService.showError(error);
+    //           return of(TemplateFormApiActions.getTemplateItemInstanceFailure());
+    //         })
+    //       );
+    //     })
+    //   )
+    // );
     constructor(actions$, mtnaWfApiService, errorService, store, router) {
         this.actions$ = actions$;
         this.mtnaWfApiService = mtnaWfApiService;
         this.errorService = errorService;
         this.store = store;
         this.router = router;
-        this.getTemplateInstance$ = createEffect(() => this.actions$.pipe(ofType(getTemplateInstance), switchMap(({ template }) => {
-            return this.mtnaWfApiService.getTemplateInstance(template).pipe(map((form) => getTemplateInstanceSuccess({ form })), catchError((error) => {
-                this.errorService.showError(error);
-                return of(getTemplateInstanceFailure());
-            }));
-        })));
-        this.getTemplateItemInstance$ = createEffect(() => this.actions$.pipe(ofType(getTemplateItemInstance), switchMap(({ templateItem }) => {
-            return this.mtnaWfApiService.getTemplateItemInstance(templateItem).pipe(map((formItem) => getTemplateItemInstanceSuccess({ formItem })), catchError((error) => {
-                this.errorService.showError(error);
-                return of(getTemplateItemInstanceFailure());
-            }));
-        })));
     }
 }
 TemplateFormEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateFormEffects, deps: [{ token: i1$b.Actions }, { token: MtnaWfApiService }, { token: i1$1.MtnaErrorService }, { token: i1$a.Store }, { token: i5$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -9833,6 +10435,35 @@ class TemplateDesignFacade extends DesignFacade {
         this.templateFormFacade = templateFormFacade;
         this.i18nFacade = i18nFacade;
         this.languageIds$ = new BehaviorSubject([]);
+        /**
+         * The property names in the design updates that should trigger a design update on transition to ensure that the references and design
+         * are updated to reflect any changes to these properties.
+         */
+        this.transitionUpdatePropNames = [
+            prop_item_name,
+            prop_item_question_text,
+            prop_item_descriptive_text,
+            prop_option_enabled_items,
+            prop_option_disabled_items,
+        ];
+        /**
+         * The section names in the design updates that should trigger a design update on transition to ensure that the references and design
+         * are updated to reflect any changes to properties.
+         */
+        this.transitionUpdateSectionNames = [i18n_templateItemBasicSettings, i18n_enabledAndDisabledItems];
+        /**
+         * Need to remove the following modelDesignProperties from the designMap when indexing the designs for the references
+         * because they are used for the display and description of the template and template items, so they should not be
+         * included as potential reference designs for the conditionals section or the option item sections.
+         */
+        this.referencePropertyNameExclusions = [prop_item_title, prop_item_acknowledgementTemplate, prop_option_template];
+        /**
+         * Need to remove the following itemIds from the modelMap when indexing the models for the references because they are used
+         * for the title and should not be included as potential reference designs for the conditionals section. We don't need to include
+         * the acknowledgement template here because the getModelMap function does not index the TemplateSection attached to the
+         * acknowledgementTemplate property.
+         */
+        this.itemIdExclusionsForReferences = [];
         this.modifiedModelSubscription = this.modifiedModel$.pipe().subscribe((modifiedModel) => {
             // This is to ensure that a FormOptionSelector can not be passed as a modified model when trying to get the Form context.
             // This should eliminate that possibility.
@@ -9860,6 +10491,17 @@ class TemplateDesignFacade extends DesignFacade {
             }
         });
     }
+    initialize(model) {
+        // reset to the first context in the available, assumes the contexts have already been set.
+        const contexts = this.contextAvailable$.value;
+        this.setContextSelected(isPresent(contexts) && contexts.length > 0 ? contexts[0] : undefined);
+        this.updateModelReferences(model);
+        const design = this.toDesign(model); // Convert the model to a design again to ensure that the design reflects the indexed references.
+        this.indexModelDesignProperties(design);
+        this.modifiedModel$.next(model);
+        this.design$.next(design);
+        this.setFocusedDesignId(design.id, design.focusType);
+    }
     close() {
         if (this.contextSubscription) {
             this.contextSubscription.unsubscribe();
@@ -9879,10 +10521,10 @@ class TemplateDesignFacade extends DesignFacade {
     }
     fromDesign(design) {
         if (isTemplateDesign(design)) {
-            return toTemplate(design, this.contextSelected$.value);
+            return toTemplate(design, this.contextSelected$.value, { references: this.references$.value });
         }
         else if (isTemplateItemDesign(design)) {
-            return toTemplateItem(design, this.contextSelected$.value);
+            return toTemplateItem(design, this.contextSelected$.value, { references: this.references$.value });
         }
         else if (design.type === 'OPTION') {
             return designToOptionSelector(design, this.contextSelected$.value);
@@ -9892,18 +10534,7 @@ class TemplateDesignFacade extends DesignFacade {
         }
     }
     toDesign(model) {
-        if (instanceOfTemplateImpl(model)) {
-            return templateToDesign(model, this.languageId, this.contextSelected$.value);
-        }
-        else if (isTemplateItem(model)) {
-            return itemToDesign(model, this.languageId, undefined, this.contextSelected$.value);
-        }
-        else if (instanceOfFormOptionSelector(model)) {
-            return optionSelectorToDesign(model, this.languageId, {}, this.references$.value, undefined, this.contextSelected$.value);
-        }
-        else {
-            throw new Error(`Cannot convert model to design. Model is not recognized. Supported types are instances of TEMPLATE, TEMPLATE_ITEM, and OPTION.`);
-        }
+        return getModelToDesign(model, this.languageId, this.contextSelected$.value, this.references$.value);
     }
     getPotentialDesigns(design, property, index) {
         this.placementIndex$.next(index); // Used to indicate where a new item should be placed when adding a new repeatable value (modelDesignProperty)
@@ -9923,11 +10554,15 @@ class TemplateDesignFacade extends DesignFacade {
     createNewInstance(designBase, parent) {
         if (isTemplateDesign(designBase)) {
             const template = getNewTemplate(designBase);
-            return templateToDesign(template, this.languageId, this.contextSelected$.value);
+            return templateToDesign(template, this.languageId, this.contextSelected$.value, {
+                references: this.references$.value,
+            });
         }
         else if (isTemplateItemDesign(designBase)) {
             const templateItem = getNewTemplateItem(designBase, this.languageId, this.languageIds$.value);
-            return itemToDesign(templateItem, this.languageId, parent, this.contextSelected$.value);
+            return itemToDesign(templateItem, this.languageId, parent, this.contextSelected$.value, {
+                references: this.references$.value,
+            });
         }
         else if (designBase.type === 'OPTION') {
             const formOptionSelector = getNewFormOptionSelector(designBase);
@@ -9938,6 +10573,14 @@ class TemplateDesignFacade extends DesignFacade {
         }
     }
     setModifiedModel(designUpdate) {
+        if (designUpdate) {
+            const partialDesignUpdate = {
+                designId: designUpdate.designId,
+                section: designUpdate.section,
+                property: designUpdate.property,
+            };
+            this.designUpdates$.next([...this.designUpdates$.value, partialDesignUpdate]);
+        }
         let modifiedModel = designUpdate ? this.fromDesign(designUpdate.design) : undefined;
         if (isPresent(modifiedModel)) {
             // Merge the new modified model with the existing modified model.
@@ -9963,7 +10606,10 @@ class TemplateDesignFacade extends DesignFacade {
     getDesignDisplay(design) {
         if (isTemplateDesign(design)) {
             const props = getLiteralProperties(design, i18n_descriptive, [prop_item_title]);
-            return isPresent(props[prop_item_title]) && props[prop_item_title] !== '' ? props[prop_item_title] : i18n_template;
+            // The prop_item_title is an InternationalizedString[], so we need to use the getI18nString function to retrieve the correct
+            // string value based on the current languageId and fallback to an empty language if not present.
+            const propTitleString = getI18nString(props[prop_item_title], this.languageId, true);
+            return isPresent(props[prop_item_title]) && propTitleString && propTitleString !== '' ? propTitleString : i18n_template;
         }
         else if (isTemplateItemDesign(design)) {
             const props = getLiteralProperties(design, i18n_templateItemBasicSettings, [prop_item_name]);
@@ -9979,18 +10625,9 @@ class TemplateDesignFacade extends DesignFacade {
     }
     indexModelDesignProperties(design) {
         const references = {};
-        const designMap = getDesignMap(design, true);
+        const designMap = getDesignMap(design, true, this.referencePropertyNameExclusions, this.itemIdExclusionsForReferences);
         for (const [_, value] of designMap.entries()) {
-            if (isTemplateDesign(value.design)) {
-                const properties = getLiteralProperties(value.design, i18n_descriptive, [prop_template_title, prop_template_descriptive_text]);
-                const referenceDesignValue = {
-                    id: value.design.id,
-                    display: getText(properties, prop_template_title, true, this.languageId),
-                    description: getText(properties, prop_template_descriptive_text, true, this.languageId),
-                };
-                references[value.design.id] = referenceDesignValue;
-            }
-            else if (isTemplateItemDesign(value.design)) {
+            if (isTemplateItemDesign(value.design)) {
                 const properties = getLiteralProperties(value.design, i18n_templateItemBasicSettings, [
                     prop_item_name,
                     prop_item_question_text,
@@ -10006,6 +10643,36 @@ class TemplateDesignFacade extends DesignFacade {
         }
         this.references$.next(references);
     }
+    updateModelReferences(model) {
+        var _a, _b, _c;
+        const references = {};
+        const templateItems = [];
+        if (instanceOfTemplateImpl(model)) {
+            templateItems.push(...model.items);
+            // Because this is a template
+        }
+        else if (isTemplateItem(model)) {
+            templateItems.push(model);
+        }
+        const modelMap = getModelMap(templateItems, this.itemIdExclusionsForReferences);
+        for (const [_, templateItem] of modelMap.entries()) {
+            let description = '';
+            if (isPresent(templateItem.questionText) && templateItem.questionText.length > 0) {
+                description = (_a = getI18nString(templateItem.questionText, this.languageId, true)) !== null && _a !== void 0 ? _a : '';
+            }
+            else if (isPresent(templateItem.descriptiveText) && templateItem.descriptiveText.length > 0) {
+                description = (_b = getI18nString(templateItem.descriptiveText, this.languageId, true)) !== null && _b !== void 0 ? _b : '';
+            }
+            const unavailableTemplateItemName = UnavailableTemplateItemNameMap[templateItem.itemId];
+            const referenceDesignValue = {
+                id: templateItem.instanceId,
+                display: (_c = templateItem.name) !== null && _c !== void 0 ? _c : unavailableTemplateItemName,
+                description,
+            };
+            references[templateItem.instanceId] = referenceDesignValue;
+        }
+        this.references$.next(references);
+    }
     setDesignDisabled(disabled) {
         // check to see if the disabled state has changed before updating the designDisabled$ observable
         if (this.designDisabled$.value !== disabled) {
@@ -10038,6 +10705,17 @@ class TemplateDesignFacade extends DesignFacade {
             } // otherwise maintain the current focus. This means we do not change the focusedDesignId$ value.
         }
     }
+    transitionDesign() {
+        if (this.design$.value) {
+            const affectsReferences = this.designUpdates$.value.some((designUpdate) => this.transitionUpdateSectionNames.includes(designUpdate.section) && this.transitionUpdatePropNames.includes(designUpdate.property));
+            if (isPresent(this.modifiedModel$.value) && affectsReferences) {
+                this.updateModelReferences(this.modifiedModel$.value);
+                const updatedDesign = this.toDesign(this.modifiedModel$.value);
+                this.design$.next(updatedDesign);
+            }
+        }
+        super.transitionDesign(); // This will reset the design updates to an empty array.
+    }
 }
 TemplateDesignFacade.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateDesignFacade, deps: [{ token: LOCALE_ID }, { token: TemplateFormFacade }, { token: i2$6.MtnaI18nFacade }], target: i0.ɵɵFactoryTarget.Injectable });
 TemplateDesignFacade.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateDesignFacade });
@@ -10052,22 +10730,37 @@ class MtnaWfTemplateDisplayViewerComponent {
     constructor(designFacade, templateFormFacade) {
         this.designFacade = designFacade;
         this.templateFormFacade = templateFormFacade;
+        this.formSteps$ = new BehaviorSubject(undefined);
+        this.designSteps$ = new BehaviorSubject([]);
+        this.singleTemplateDesignSectionStep$ = new BehaviorSubject(undefined);
         this.contextSelected$ = this.designFacade.contextSelected$;
         this.focusedDesignId$ = this.designFacade.focusedDesignId$;
-        this.modifiedModel$ = this.designFacade.modifiedModel$;
+        this.modifiedModel$ = this.designFacade.modifiedModel$.pipe(tap((modifiedModel) => {
+            if (isPresent(modifiedModel)) {
+                if (instanceOfTemplateImpl(modifiedModel)) {
+                    const generatedFormSteps = generateFormSteps(modifiedModel.items, true);
+                    const flattenedSteps = flattenSteps(generatedFormSteps);
+                    this.designSteps$.next(flattenedSteps);
+                }
+                else if (isTemplateItem(modifiedModel) && instanceOfTemplateSectionImpl(modifiedModel)) {
+                    const generatedFormSteps = generateFormSteps(modifiedModel.items, true);
+                    const flattenedSteps = flattenSteps(generatedFormSteps);
+                    this.singleTemplateDesignSectionStep$.next(flattenedSteps[0]);
+                }
+            }
+        }));
         this.previewLanguage$ = this.designFacade.previewLanguage$;
         this.loading$ = this.templateFormFacade.loading$;
         this.templateForm$ = this.templateFormFacade.templateForm$;
         this.templateFormItem$ = this.templateFormFacade.templateFormItem$;
         this.typeLoaded$ = this.templateFormFacade.typeLoaded$;
-        this.formSteps$ = new BehaviorSubject(undefined);
         this.retryTrigger$ = new BehaviorSubject(undefined);
         this.context_template = template;
         this.context_form = form;
     }
 }
 MtnaWfTemplateDisplayViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTemplateDisplayViewerComponent, deps: [{ token: i1$c.DesignFacade }, { token: TemplateFormFacade }], target: i0.ɵɵFactoryTarget.Component });
-MtnaWfTemplateDisplayViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTemplateDisplayViewerComponent, selector: "mtna-wf-template-display-viewer", ngImport: i0, template: "<ng-container *ngIf=\"modifiedModel$ | async as templateOrTemplateItem\">\n  <section class=\"content-preview\">\n    <ng-container *ngIf=\"contextSelected$ | async as context\" [ngSwitch]=\"context.id\">\n      <ng-container *ngSwitchCase=\"context_template.id\">\n        <ng-container *ngIf=\"templateOrTemplateItem | instanceOfTemplateImpl as template; else templateItemTemplate\">\n          <mtna-wf-template\n            [template]=\"template\"\n            [displayLocale]=\"(previewLanguage$ | async) ?? 'en'\"\n            [highlightId]=\"focusedDesignId$ | async\"\n          ></mtna-wf-template>\n        </ng-container>\n        <ng-template #templateItemTemplate>\n          <ng-container *ngIf=\"templateOrTemplateItem | instanceOfTemplateItem as templateItem\">\n            <mtna-wf-template-item [template]=\"templateItem\" [displayLocale]=\"(previewLanguage$ | async) ?? 'en'\"></mtna-wf-template-item>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n\n      <!-- Placeholder for form context -->\n      <div *ngSwitchCase=\"context_form.id\" class=\"form-preview\">\n        <div *ngIf=\"loading$ | async; else formDisplay\">\n          <mat-progress-spinner aria-label=\"Loading Form\" i18n-aria-label [mode]=\"'indeterminate'\"></mat-progress-spinner>\n        </div>\n        <ng-template #formDisplay></ng-template>\n        <!--        <div *ngIf=\"formState$ | async as state\">-->\n        <!--          &lt;!&ndash;          <span>{{ state | json }}</span>&ndash;&gt;-->\n        <!--          <mat-progress-spinner-->\n        <!--            *ngIf=\"state.loading\"-->\n        <!--            aria-label=\"Loading Form\"-->\n        <!--            i18n-aria-label-->\n        <!--            [mode]=\"'indeterminate'\"-->\n        <!--          ></mat-progress-spinner>-->\n        <!--          <div *ngIf=\"!state.loading && state.error\" class=\"form-preview-error mat-elevation-z4\" fxLayout=\"column\">-->\n        <!--            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"error-message\">-->\n        <!--              <mat-icon color=\"warn\">error</mat-icon><span>{{ state.error.message }}</span>-->\n        <!--            </div>-->\n        <!--            <div *ngIf=\"state.error.retry\" fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"retry-container\">-->\n        <!--              <button mat-flat-button color=\"accent\" (click)=\"retryFormLoad()\">RETRY</button>-->\n        <!--            </div>-->\n        <!--          </div>-->\n        <!--          <div *ngIf=\"!state.loading && state.form\">-->\n        <!--            <mtna-form [mtnaForm]=\"state.form\" [readonly]=\"false\" [steps]=\"formSteps$ | async\"></mtna-form>-->\n        <!--          </div>-->\n        <!--        </div>-->\n        <!--         When the context switches this can make the call to the form service and show a loader. Once it is returned you will pass it into the MtnaForm -->\n      </div>\n\n      <div *ngSwitchDefault></div>\n    </ng-container>\n  </section>\n</ng-container>\n", styles: ["mtna-wf-template-display-viewer{display:block;height:100%;overflow:auto}mtna-wf-template-display-viewer .content-preview{margin:80px}mtna-wf-template-display-viewer .form-preview{display:flex;justify-content:center}mtna-wf-template-display-viewer .form-preview .form-preview-error{border-style:solid;border-width:1px;border-radius:4px;padding:16px}mtna-wf-template-display-viewer .form-preview .form-preview-error .error-message{margin-bottom:8px}mtna-wf-template-display-viewer .form-preview .form-preview-error .error-message .mat-icon{margin-right:4px;margin-bottom:auto}\n"], components: [{ type: MtnaWfTemplateComponent, selector: "mtna-wf-template", inputs: ["displayLocale", "isCompact", "highlightId", "steps", "template"] }, { type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }, { type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3.AsyncPipe, "instanceOfTemplateImpl": MtnaWfInstanceOfTemplateImplPipe, "instanceOfTemplateItem": MtnaWfInstanceOfTemplateItemPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MtnaWfTemplateDisplayViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MtnaWfTemplateDisplayViewerComponent, selector: "mtna-wf-template-display-viewer", ngImport: i0, template: "<ng-container *ngIf=\"modifiedModel$ | async as templateOrTemplateItem\">\n  <section class=\"content-preview\">\n    <ng-container *ngIf=\"contextSelected$ | async as context\" [ngSwitch]=\"context.id\">\n      <ng-container *ngSwitchCase=\"context_template.id\">\n        <ng-container *ngIf=\"templateOrTemplateItem | instanceOfTemplateImpl as template; else templateItemTemplate\">\n          <mtna-wf-template\n            [displayLocale]=\"(previewLanguage$ | async) ?? 'en'\"\n            [highlightId]=\"focusedDesignId$ | async\"\n            [steps]=\"designSteps$ | async\"\n            [template]=\"template\"\n          ></mtna-wf-template>\n        </ng-container>\n        <ng-template #templateItemTemplate>\n          <ng-container *ngIf=\"templateOrTemplateItem | instanceOfTemplateItem as templateItem\">\n            <mtna-wf-template-item\n              [displayLocale]=\"(previewLanguage$ | async) ?? 'en'\"\n              [step]=\"singleTemplateDesignSectionStep$ | async\"\n              [template]=\"templateItem\"\n            ></mtna-wf-template-item>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n\n      <!-- Placeholder for form context -->\n      <div *ngSwitchCase=\"context_form.id\" class=\"form-preview\">\n        <div *ngIf=\"loading$ | async; else formDisplay\">\n          <mat-progress-spinner aria-label=\"Loading Form\" i18n-aria-label [mode]=\"'indeterminate'\"></mat-progress-spinner>\n        </div>\n        <ng-template #formDisplay></ng-template>\n        <!--        <div *ngIf=\"formState$ | async as state\">-->\n        <!--          &lt;!&ndash;          <span>{{ state | json }}</span>&ndash;&gt;-->\n        <!--          <mat-progress-spinner-->\n        <!--            *ngIf=\"state.loading\"-->\n        <!--            aria-label=\"Loading Form\"-->\n        <!--            i18n-aria-label-->\n        <!--            [mode]=\"'indeterminate'\"-->\n        <!--          ></mat-progress-spinner>-->\n        <!--          <div *ngIf=\"!state.loading && state.error\" class=\"form-preview-error mat-elevation-z4\" fxLayout=\"column\">-->\n        <!--            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"error-message\">-->\n        <!--              <mat-icon color=\"warn\">error</mat-icon><span>{{ state.error.message }}</span>-->\n        <!--            </div>-->\n        <!--            <div *ngIf=\"state.error.retry\" fxLayout=\"row\" fxLayoutAlign=\"end center\" class=\"retry-container\">-->\n        <!--              <button mat-flat-button color=\"accent\" (click)=\"retryFormLoad()\">RETRY</button>-->\n        <!--            </div>-->\n        <!--          </div>-->\n        <!--          <div *ngIf=\"!state.loading && state.form\">-->\n        <!--            <mtna-form [mtnaForm]=\"state.form\" [readonly]=\"false\" [steps]=\"formSteps$ | async\"></mtna-form>-->\n        <!--          </div>-->\n        <!--        </div>-->\n        <!--         When the context switches this can make the call to the form service and show a loader. Once it is returned you will pass it into the MtnaForm -->\n      </div>\n\n      <div *ngSwitchDefault></div>\n    </ng-container>\n  </section>\n</ng-container>\n", styles: ["mtna-wf-template-display-viewer{display:block;height:100%;overflow:auto}mtna-wf-template-display-viewer .content-preview{margin:80px}mtna-wf-template-display-viewer .form-preview{display:flex;justify-content:center}mtna-wf-template-display-viewer .form-preview .form-preview-error{border-style:solid;border-width:1px;border-radius:4px;padding:16px}mtna-wf-template-display-viewer .form-preview .form-preview-error .error-message{margin-bottom:8px}mtna-wf-template-display-viewer .form-preview .form-preview-error .error-message .mat-icon{margin-right:4px;margin-bottom:auto}\n"], components: [{ type: MtnaWfTemplateComponent, selector: "mtna-wf-template", inputs: ["displayLocale", "isCompact", "highlightId", "steps", "template"] }, { type: MtnaWfTemplateItemComponent, selector: "mtna-wf-template-item", inputs: ["displayLocale", "inList", "isCompact", "step", "template", "color"] }, { type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3.AsyncPipe, "instanceOfTemplateImpl": MtnaWfInstanceOfTemplateImplPipe, "instanceOfTemplateItem": MtnaWfInstanceOfTemplateItemPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MtnaWfTemplateDisplayViewerComponent, decorators: [{
             type: Component,
             args: [{
@@ -10477,5 +11170,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BOOLEAN_POTENTIAL_DESIGN, BULLETED_LIST_POTENTIAL_DESIGN, BaseFormStep, BooleanItemTemplateMapper, BulletedListItemTemplateMapper, CHECKBOX_POTENTIAL_DESIGN, COMPLEX_STANDARD, CUSTOM_MAT_DATE_FORMAT, CheckboxItemTemplateMapper, ChildStepActivePipe, ChildStepActivePipeModule, CoerceFormStepGroupPipe, CoerceFormStepGroupPipeModule, CoerceFormStepPipe, CoerceFormStepPipeModule, DASHED_DATE_DISPLAY_VALUE, DATE_ENUM_VALUES, DATE_POTENTIAL_DESIGN, DECIMAL_ANSWER_POTENTIAL_DESIGN, DEFAULT_ERROR_MESSAGES, DOTTED_DATE_DISPLAY_VALUE, DROPDOWN_POTENTIAL_DESIGN, DateItemTemplateMapper, DropdownItemTemplateMapper, EURO_LONG_DATE_DISPLAY_VALUE, FILE_UPLOAD_POTENTIAL_DESIGN, FORM_OPTION_SELECTOR_POTENTIAL_DESIGN, FileUploadItemTemplateMapper, FormStep, FormStepGroup, GROUP_POTENTIAL_DESIGN, GROUP_POTENTIAL_DESIGN_LIST, GetActiveFormStepItemPipe, GetActiveFormStepItemPipeModule, GetI18nStringValueFromLocalePipe, GetI18nStringValueFromLocalePipeModule, GetI18nStringsValueFromLocalePipe, GetI18nStringsValueFromLocalePipeModule, GetProgressiveFormItemPipe, GetProgressiveFormItemPipeModule, GetStepAriaLabel, GetStepAriaLabelModule, I18N_PARAGRAPH_ANSWER_POTENTIAL_DESIGN, I18N_SHORT_ANSWER_POTENTIAL_DESIGN, I18nTextResponseItemTemplateMapper, ISO_8601_DATE_DISPLAY_VALUE, LONG_DATE_DISPLAY_VALUE, MTNA_WF_DEFAULT_YEAR_RANGE, MTNA_WF_EXPAND_COLLAPSE, MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME, MTNA_WF_ITEM_INJECTED_COMPONENTS, MTNA_WF_ITEM_WHITELIST, MTNA_WF_ITEM_WHITELIST_FACTORY, MTNA_WF_TEMPLATE_ITEM_INJECTED_COMPONENTS, MULTIPLE_CHOICE_POTENTIAL_DESIGN, MtnaFormModule, templateDesignCoreUtil as MtnaTemplateCoreDesign, templateDesignUtil as MtnaTemplateDesign, MtnaTemplateTransformationService, MtnaWfAcknowledgeDialogComponent, MtnaWfAcknowledgeDialogModule, MtnaWfApiService, MtnaWfBaseFormItemControl, MtnaWfBaseGroupItem, MtnaWfBaseParentValueItem, MtnaWfBaseSectionItem, MtnaWfBaseSingleSelectionParentValueItem, MtnaWfBaseTemplateItemComponent, MtnaWfBaseTemplateItemWithListComponent, MtnaWfBaseValueItem, MtnaWfBooleanComponent, MtnaWfBooleanItemTemplateComponent, MtnaWfBooleanItemTemplateModule, MtnaWfBooleanModule, MtnaWfCheckboxComponent, MtnaWfCheckboxItemTemplateComponent, MtnaWfCheckboxItemTemplateModule, MtnaWfCheckboxModule, MtnaWfCoerceDateItemPipe, MtnaWfCoerceDateItemPipeModule, MtnaWfCoerceFormControlPipe, MtnaWfCoerceFormControlPipeModule, MtnaWfCoerceFormGroupPipe, MtnaWfCoerceFormGroupPipeModule, MtnaWfDateComponent, MtnaWfDateItemTemplateComponent, MtnaWfDateItemTemplateModule, MtnaWfDateModule, MtnaWfDateQuarterPipe, MtnaWfDateQuarterPipeModule, MtnaWfDateRangeComponent, MtnaWfDateRangeModule, MtnaWfDecimalAnswerItemTemplateComponent, MtnaWfDecimalAnswerItemTemplateModule, MtnaWfDialogService, MtnaWfDropdownComponent, MtnaWfDropdownItemTemplateComponent, MtnaWfDropdownItemTemplateModule, MtnaWfDropdownModule, MtnaWfFileUploadComponent, MtnaWfFileUploadItemTemplateComponent, MtnaWfFileUploadItemTemplateModule, MtnaWfFileUploadModule, MtnaWfFilterHiddenItemsPipe, MtnaWfFilterHiddenItemsPipeModule, MtnaWfFormComponent, MtnaWfFormDisablerComponent, MtnaWfFormDisablerModule, MtnaWfFormGroupComponent, MtnaWfFormGroupModule, MtnaWfFormItemComponent, MtnaWfFormItemDialogComponent, MtnaWfFormItemDialogData, MtnaWfFormItemDialogModule, MtnaWfFormItemModule, MtnaWfFormSectionComponent, MtnaWfFormSectionModule, MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepGroupPipeModule, MtnaWfFormStepperComponent, MtnaWfFormStepperModule, MtnaWfGetAutoCompletePipe, MtnaWfGetAutoCompletePipeModule, MtnaWfGetAvailableQuartersPipe, MtnaWfGetAvailableQuartersPipeModule, MtnaWfGetFormControlErrorPipe, MtnaWfGetFormControlErrorPipeModule, MtnaWfGetListIconPipe, MtnaWfGetListIconPipeModule, MtnaWfGetObjectTypePipe, MtnaWfGetObjectTypePipeModule, MtnaWfGetSelectedOptionNamePipe, MtnaWfGetSelectedOptionNamePipeModule, MtnaWfI18nInputComponent, MtnaWfI18nInputModule, MtnaWfI18nParagraphAnswerItemTemplateComponent, MtnaWfI18nParagraphAnswerItemTemplateModule, MtnaWfI18nShortAnswerItemTemplateComponent, MtnaWfI18nShortAnswerItemTemplateModule, MtnaWfInputComponent, MtnaWfInputModule, MtnaWfInstanceOfTemplateImplPipe, MtnaWfInstanceOfTemplateImplPipeModule, MtnaWfInstanceOfTemplateItemGroupImplPipe, MtnaWfInstanceOfTemplateItemGroupImplPipeModule, MtnaWfInstanceOfTemplateItemPipe, MtnaWfInstanceOfTemplateItemPipeModule, MtnaWfInstantValidationResultErrorStateMatcher, MtnaWfItemComponentProvider, MtnaWfItemHeaderComponent, MtnaWfItemHeaderModule, MtnaWfItemInjector, MtnaWfItemInjectorModule, MtnaWfItemsWithValuePipe, MtnaWfItemsWithValuePipeModule, MtnaWfManagerService, MtnaWfMultipleChoiceComponent, MtnaWfMultipleChoiceItemTemplateComponent, MtnaWfMultipleChoiceItemTemplateModule, MtnaWfMultipleChoiceModule, MtnaWfNgFormService, MtnaWfOffsetDateRangeItemTemplateComponent, MtnaWfOffsetDateRangeItemTemplateModule, MtnaWfOrderedListItemComponent, MtnaWfOrderedListItemModule, MtnaWfOrderedListItemTemplateComponent, MtnaWfOrderedListItemTemplateModule, MtnaWfParagraphAnswerItemTemplateComponent, MtnaWfParagraphAnswerItemTemplateModule, MtnaWfProgressiveFormComponent, MtnaWfProgressiveFormModule, MtnaWfRepeatableItemComponent, MtnaWfRepeatableItemContainerComponent, MtnaWfRepeatableItemContainerModule, MtnaWfRepeatableItemModule, MtnaWfRepeatableItemTemplateComponent, MtnaWfRepeatableItemTemplateContainerComponent, MtnaWfRepeatableItemTemplateContainerModule, MtnaWfRepeatableItemTemplateModule, MtnaWfResourceSearchComponent, MtnaWfResourceSearchModule, MtnaWfResourceSearchSelectionService, MtnaWfSanitizeHtmlPipe, MtnaWfSanitizeHtmlPipeModule, serializerUtil as MtnaWfSerializer, MtnaWfShortAnswerItemTemplateComponent, MtnaWfShortAnswerItemTemplateModule, MtnaWfStepCardComponent, MtnaWfStepCardModule, MtnaWfTableFormItemComponent, MtnaWfTableFormItemModule, MtnaWfTemplateComponent, MtnaWfTemplateDisplayViewerComponent, MtnaWfTemplateDisplayViewerModule, MtnaWfTemplateItemComponent, MtnaWfTemplateItemComponentProvider, MtnaWfTemplateItemGroupComponent, MtnaWfTemplateItemGroupModule, MtnaWfTemplateItemHeaderComponent, MtnaWfTemplateItemHeaderModule, MtnaWfTemplateItemInjector, MtnaWfTemplateItemInjectorModule, MtnaWfTemplateItemModule, MtnaWfTemplateModule, MtnaWfTemplateSectionComponent, MtnaWfTemplateSectionModule, MtnaWfTextItemComponent, MtnaWfTextItemModule, MtnaWfTextItemTemplateComponent, MtnaWfTextItemTemplateModule, MtnaWfTitleItemComponent, MtnaWfTitleItemModule, MtnaWfTitleItemTemplateComponent, MtnaWfTitleItemTemplateModule, MtnaWfUIService, MtnaWfUnorderedListItemComponent, MtnaWfUnorderedListItemModule, MtnaWfUnorderedListItemTemplateComponent, MtnaWfUnorderedListItemTemplateModule, MtnaWfWholeNumberAnswerItemTemplateComponent, MtnaWfWholeNumberAnswerItemTemplateModule, MtnaWfYearQuarterComponent, MtnaWfYearQuarterItemTemplateComponent, MtnaWfYearQuarterItemTemplateModule, MtnaWfYearQuarterModule, MtnaWfYearQuarterRangeComponent, MtnaWfYearQuarterRangeItemTemplateComponent, MtnaWfYearQuarterRangeItemTemplateModule, MtnaWfYearQuarterRangeModule, MultipleChoiceItemTemplateMapper, NUMBERED_LIST_POTENTIAL_DESIGN, NumberedListItemTemplateMapper, NumericResponseItemTemplateMapper, OFFSET_DATE_RANGE_POTENTIAL_DESIGN, OPTION_SELECTOR_POTENTIAL_DESIGN_LIST, OffsetDateRangeTemplateMapper, OptionGroupItemMapper, OptionItemMapper, OptionSelectorMapper, PARAGRAPH_ANSWER_POTENTIAL_DESIGN, REPEATABLE_POTENTIAL_DESIGN, RepeatableItemTemplateMapper, SECTION_POTENTIAL_DESIGN, SECTION_POTENTIAL_DESIGN_LIST, SHORT_ANSWER_POTENTIAL_DESIGN, SLASHED_DATE_DISPLAY_VALUE, TEMPLATE_FORM_STATE_KEY, TEMPLATE_POTENTIAL_DESIGN_LIST, TEXT_POTENTIAL_DESIGN, TITLE_POTENTIAL_DESIGN, TemplateDesignFacade, templateForm_actions as TemplateFormActions, templateFormApi_actions as TemplateFormApiActions, TemplateFormEffects, TemplateFormFacade, templateForm_selectors as TemplateFormSelectors, TemplateItemGroupMapper, TemplateItemMapper, TemplateMapper, TemplateSectionMapper, TextItemTemplateMapper, TextResponseItemTemplateMapper, TimeItemTemplateMapper, TitleItemTemplateMapper, WEB_FORM_CUSTOM_ERRORS, WHOLE_NUMBER_ANSWER_POTENTIAL_DESIGN, YEAR_QUARTER_RANGE_POTENTIAL_DESIGN, YearQuarterRangeItemTemplateMapper, deactivateStep, everyStepStatus, findFormControl, findFormItem, flattenConditionalItems, flattenSteps, form, generateFormSteps, generateFormStepsFromOutline, getConditionalProcessingResources, getItemClassSuffix, getItemMapperFromDesign, hasCondition, i18n_acknowledgement, i18n_acknowledgementDialogTitle, i18n_acknowledgementInstructions, i18n_additionalText, i18n_additionalTextInstructions, i18n_annotationEnabled, i18n_annotationEnabledInstructions, i18n_boolean, i18n_booleanConfiguration, i18n_booleanItem, i18n_bulletedListConfiguration, i18n_bulletedListItem, i18n_bulletedListItemInstructions, i18n_checkbox, i18n_checkboxConfiguration, i18n_checkboxItem, i18n_childItems, i18n_codeOption, i18n_codeOptionInstructions, i18n_core, i18n_date, i18n_dateConfiguration, i18n_dateItem, i18n_decimalAnswer, i18n_decimalAnswerItem, i18n_decimalValue, i18n_description, i18n_descriptionInstructions, i18n_descriptive, i18n_descriptiveText, i18n_descriptiveTextInstructionsItem, i18n_descriptiveTextInstructionsTemplate, i18n_disabledItems, i18n_disabledItemsInstructions, i18n_downloadAllowed, i18n_downloadAllowedInstructions, i18n_dropdown, i18n_dropdownConfiguration, i18n_dropdownItem, i18n_dropdownProperties, i18n_enabledAndDisabledItems, i18n_enabledItems, i18n_enabledItemsInstructions, i18n_exampleText, i18n_fileTypeId, i18n_fileTypeIdInstructions, i18n_fileUpload, i18n_fileUploadConfiguration, i18n_fileUploadItem, i18n_form, i18n_format, i18n_formatInstructions, i18n_formatTimeInstructions, i18n_fullWidth, i18n_fullWidthInstructions, i18n_group, i18n_groupItem, i18n_help, i18n_helpInstructions, i18n_internationalizedParagraphAnswer, i18n_internationalizedParagraphAnswerItem, i18n_internationalizedShortAnswer, i18n_internationalizedShortAnswerItem, i18n_item, i18n_items, i18n_itemsInstructions, i18n_label, i18n_labelInstructions, i18n_layout, i18n_layoutInstructions, i18n_listValue, i18n_maxCharCount, i18n_maxCharCountInstructions, i18n_maxOccurrances, i18n_maxOccurrancesInstructions, i18n_maxSelections, i18n_maxSelectionsInstructions, i18n_maxValue, i18n_maxValueInstructions, i18n_minCharCount, i18n_minCharCountInstructions, i18n_minOccurrances, i18n_minOccurrancesInstructions, i18n_minSelections, i18n_minSelectionsInstructions, i18n_minValue, i18n_minValueInstructions, i18n_multipleChoice, i18n_multipleChoiceConfiguration, i18n_multipleChoiceItem, i18n_name, i18n_nameInstructions, i18n_new, i18n_newItem, i18n_newListValue, i18n_newOption, i18n_newOptionTemplate, i18n_newTemplate, i18n_newTemplateItem, i18n_numberedListConfiguration, i18n_numberedListItem, i18n_numberedListItemInstructions, i18n_numericConfiguration, i18n_offsetDateRange, i18n_offsetDateRangeConfiguration, i18n_offsetDateRangeItem, i18n_option, i18n_optionInstructions, i18n_optionProperties, i18n_optionSubsetInstructions, i18n_optionSubsets, i18n_optionTemplate, i18n_optionTemplateInstructions, i18n_optionTemplateMap, i18n_optionTemplateMapInstructions, i18n_optionTemplates, i18n_options, i18n_optionsInstructions, i18n_orderedList, i18n_orderedListItem, i18n_paragraphAnswer, i18n_paragraphAnswerItem, i18n_positiveOnly, i18n_positiveOnlyInstructions, i18n_presetValue, i18n_presetValueInstructions, i18n_questionText, i18n_questionTextInstructions, i18n_rangeLimits, i18n_rangeLimitsInstructions, i18n_repeatable, i18n_repeatableItem, i18n_repeatableItemConfiguration, i18n_repeatableItemTemplateId, i18n_repeatableItemTemplateIdInstructions, i18n_required, i18n_requiredInstructions, i18n_section, i18n_sectionItem, i18n_selectAReference, i18n_selectAReferenceDialogTitle, i18n_settings, i18n_shortAnswer, i18n_shortAnswerItem, i18n_startingInstances, i18n_startingInstancesInstructions, i18n_template, i18n_templateItem, i18n_templateItemAnnotation, i18n_templateItemAnnotationInstructions, i18n_templateItemBasicSettings, i18n_templateItemHelp, i18n_templateItemHelpInstructions, i18n_templateItemInstructions, i18n_templateItemLabel, i18n_templateItemLabelInstructions, i18n_templateItemQuestionText, i18n_templateItemQuestionTextInstructions, i18n_templateItemRequired, i18n_templateItemRequiredInstructions, i18n_templateItems, i18n_templateItemsInstructions, i18n_templateItemsInstructionsGroup, i18n_text, i18n_textConfiguration, i18n_textInputConfiguration, i18n_textItem, i18n_textValue, i18n_textValueInstructions, i18n_time, i18n_timeInputConfiguration, i18n_timeItem, i18n_title, i18n_titleInstructions, i18n_titleInstructionsSection, i18n_titleItem, i18n_unorderedList, i18n_unorderedListItem, i18n_value, i18n_valueInstructions, i18n_values, i18n_valuesInstructions, i18n_verifyAcknowledgementDialogTitle, i18n_wholeNumberAnswer, i18n_wholeNumberAnswerItem, i18n_wholeNumberValue, i18n_yearQuarterRange, i18n_yearQuarterRangeConfiguration, i18n_yearQuarterRangeItem, initialTemplateFormState, instanceOfFormStep, instanceOfFormStepGroup, isFormControl, isFormGroup, isFormStepGroup, mapperItemToDesign, mapperRegistry, mapperToDesignRegistry, mergeBooleanItemTemplate, mergeExtendedTemplateOptionGroupItem, mergeFormOptionSelector, mergeFormOptionSelectors, mergeOptionTemplateMap, mergeTemplate, mergeTemplateItem, mergeTemplateItemBase, mergeTemplateItemGroup, mergeTemplateSection, optionGroupItemSectionDisplayNameMap, optionItemSectionDisplayNameMap, processConditionals, prop_item_acknowledgement, prop_item_additional_text, prop_item_annotation_enabled, prop_item_code_option, prop_item_description, prop_item_descriptive_text, prop_item_download_allowed, prop_item_exclude_print, prop_item_file_type_id, prop_item_format, prop_item_format_time, prop_item_full_width, prop_item_help, prop_item_item, prop_item_items, prop_item_label, prop_item_layout, prop_item_max_char, prop_item_max_occurrences, prop_item_max_selections, prop_item_max_value, prop_item_min_char, prop_item_min_occurrences, prop_item_min_selections, prop_item_min_value, prop_item_name, prop_item_option, prop_item_option_subsets, prop_item_option_template_map, prop_item_options, prop_item_positive_only, prop_item_preset_value, prop_item_question_text, prop_item_range_limits, prop_item_repeatable_item_template_id, prop_item_required, prop_item_starting_instances, prop_item_text, prop_item_title, prop_item_value, prop_item_values, prop_option_disabled_items, prop_option_enabled_items, prop_option_template, prop_template_descriptive_text, prop_template_items, prop_template_title, registerMapper, removeFromCondition, template, updateConditional, updateStepStatus, validationResultValidator, wfTemplateFormReducer };
+export { BOOLEAN_POTENTIAL_DESIGN, BULLETED_LIST_POTENTIAL_DESIGN, BaseFormStep, BooleanItemTemplateMapper, BulletedListItemTemplateMapper, CHECKBOX_POTENTIAL_DESIGN, COMPLEX_STANDARD, CUSTOM_MAT_DATE_FORMAT, CheckboxItemTemplateMapper, ChildStepActivePipe, ChildStepActivePipeModule, CoerceFormStepGroupPipe, CoerceFormStepGroupPipeModule, CoerceFormStepPipe, CoerceFormStepPipeModule, DASHED_DATE_DISPLAY_VALUE, DATE_DISPLAY_ENUM_VALUES, DATE_POTENTIAL_DESIGN, DECIMAL_ANSWER_POTENTIAL_DESIGN, DEFAULT_ERROR_MESSAGES, DOTTED_DATE_DISPLAY_VALUE, DROPDOWN_POTENTIAL_DESIGN, DateItemTemplateMapper, DropdownItemTemplateMapper, EURO_LONG_DATE_DISPLAY_VALUE, FILE_UPLOAD_POTENTIAL_DESIGN, FORM_OPTION_SELECTOR_POTENTIAL_DESIGN, FileUploadItemTemplateMapper, FormStep, FormStepGroup, GROUP_POTENTIAL_DESIGN, GROUP_POTENTIAL_DESIGN_LIST, GetActiveFormStepItemPipe, GetActiveFormStepItemPipeModule, GetI18nStringValueFromLocalePipe, GetI18nStringValueFromLocalePipeModule, GetI18nStringsValueFromLocalePipe, GetI18nStringsValueFromLocalePipeModule, GetProgressiveFormItemPipe, GetProgressiveFormItemPipeModule, GetStepAriaLabel, GetStepAriaLabelModule, I18N_PARAGRAPH_ANSWER_POTENTIAL_DESIGN, I18N_SHORT_ANSWER_POTENTIAL_DESIGN, I18nTextResponseItemTemplateMapper, ISO_8601_DATE_DISPLAY_VALUE, LAYOUT_COLUMN_DISPLAY_VALUE, LAYOUT_ENUM_VALUES, LAYOUT_ROW_DISPLAY_VALUE, LONG_DATE_DISPLAY_VALUE, MTNA_DEFAULT_USE_DISPLAY_VALUE, MTNA_WF_DEFAULT_YEAR_RANGE, MTNA_WF_EXPAND_COLLAPSE, MTNA_WF_FORM_ITEM_VALIDATION_RESULT_ERROR_NAME, MTNA_WF_ITEM_INJECTED_COMPONENTS, MTNA_WF_ITEM_WHITELIST, MTNA_WF_ITEM_WHITELIST_FACTORY, MTNA_WF_TEMPLATE_ITEM_INJECTED_COMPONENTS, MULTIPLE_CHOICE_POTENTIAL_DESIGN, MtnaFormModule, templateDesignCoreUtil as MtnaTemplateCoreDesign, templateDesignUtil as MtnaTemplateDesign, MtnaTemplateTransformationService, MtnaWfAcknowledgeDialogComponent, MtnaWfAcknowledgeDialogModule, MtnaWfApiService, MtnaWfBaseFormItemControl, MtnaWfBaseGroupItem, MtnaWfBaseParentValueItem, MtnaWfBaseSectionItem, MtnaWfBaseSingleSelectionParentValueItem, MtnaWfBaseTemplateItemComponent, MtnaWfBaseTemplateItemWithListComponent, MtnaWfBaseValueItem, MtnaWfBooleanComponent, MtnaWfBooleanItemTemplateComponent, MtnaWfBooleanItemTemplateModule, MtnaWfBooleanModule, MtnaWfCheckboxComponent, MtnaWfCheckboxItemTemplateComponent, MtnaWfCheckboxItemTemplateModule, MtnaWfCheckboxModule, MtnaWfCoerceDateItemPipe, MtnaWfCoerceDateItemPipeModule, MtnaWfCoerceFormControlPipe, MtnaWfCoerceFormControlPipeModule, MtnaWfCoerceFormGroupPipe, MtnaWfCoerceFormGroupPipeModule, MtnaWfDateComponent, MtnaWfDateItemTemplateComponent, MtnaWfDateItemTemplateModule, MtnaWfDateModule, MtnaWfDateQuarterPipe, MtnaWfDateQuarterPipeModule, MtnaWfDateRangeComponent, MtnaWfDateRangeModule, MtnaWfDecimalAnswerItemTemplateComponent, MtnaWfDecimalAnswerItemTemplateModule, MtnaWfDialogService, MtnaWfDropdownComponent, MtnaWfDropdownItemTemplateComponent, MtnaWfDropdownItemTemplateModule, MtnaWfDropdownModule, MtnaWfFileUploadComponent, MtnaWfFileUploadItemTemplateComponent, MtnaWfFileUploadItemTemplateModule, MtnaWfFileUploadModule, MtnaWfFilterHiddenItemsPipe, MtnaWfFilterHiddenItemsPipeModule, MtnaWfFormComponent, MtnaWfFormDisablerComponent, MtnaWfFormDisablerModule, MtnaWfFormGroupComponent, MtnaWfFormGroupModule, MtnaWfFormItemComponent, MtnaWfFormItemDialogComponent, MtnaWfFormItemDialogData, MtnaWfFormItemDialogModule, MtnaWfFormItemModule, MtnaWfFormSectionComponent, MtnaWfFormSectionModule, MtnaWfFormStepComponent, MtnaWfFormStepGroupComponent, MtnaWfFormStepGroupPipe, MtnaWfFormStepGroupPipeModule, MtnaWfFormStepperComponent, MtnaWfFormStepperModule, MtnaWfGetAutoCompletePipe, MtnaWfGetAutoCompletePipeModule, MtnaWfGetAvailableQuartersPipe, MtnaWfGetAvailableQuartersPipeModule, MtnaWfGetFormControlErrorPipe, MtnaWfGetFormControlErrorPipeModule, MtnaWfGetListIconPipe, MtnaWfGetListIconPipeModule, MtnaWfGetObjectTypePipe, MtnaWfGetObjectTypePipeModule, MtnaWfGetSelectedOptionNamePipe, MtnaWfGetSelectedOptionNamePipeModule, MtnaWfI18nInputComponent, MtnaWfI18nInputModule, MtnaWfI18nParagraphAnswerItemTemplateComponent, MtnaWfI18nParagraphAnswerItemTemplateModule, MtnaWfI18nShortAnswerItemTemplateComponent, MtnaWfI18nShortAnswerItemTemplateModule, MtnaWfInputComponent, MtnaWfInputModule, MtnaWfInstanceOfTemplateImplPipe, MtnaWfInstanceOfTemplateImplPipeModule, MtnaWfInstanceOfTemplateItemGroupImplPipe, MtnaWfInstanceOfTemplateItemGroupImplPipeModule, MtnaWfInstanceOfTemplateItemPipe, MtnaWfInstanceOfTemplateItemPipeModule, MtnaWfInstantValidationResultErrorStateMatcher, MtnaWfItemComponentProvider, MtnaWfItemHeaderComponent, MtnaWfItemHeaderModule, MtnaWfItemInjector, MtnaWfItemInjectorModule, MtnaWfItemsWithValuePipe, MtnaWfItemsWithValuePipeModule, MtnaWfManagerService, MtnaWfMultipleChoiceComponent, MtnaWfMultipleChoiceItemTemplateComponent, MtnaWfMultipleChoiceItemTemplateModule, MtnaWfMultipleChoiceModule, MtnaWfNgFormService, MtnaWfOffsetDateRangeItemTemplateComponent, MtnaWfOffsetDateRangeItemTemplateModule, MtnaWfOrderedListItemComponent, MtnaWfOrderedListItemModule, MtnaWfOrderedListItemTemplateComponent, MtnaWfOrderedListItemTemplateModule, MtnaWfParagraphAnswerItemTemplateComponent, MtnaWfParagraphAnswerItemTemplateModule, MtnaWfProgressiveFormComponent, MtnaWfProgressiveFormModule, MtnaWfRepeatableItemComponent, MtnaWfRepeatableItemContainerComponent, MtnaWfRepeatableItemContainerModule, MtnaWfRepeatableItemModule, MtnaWfRepeatableItemTemplateComponent, MtnaWfRepeatableItemTemplateContainerComponent, MtnaWfRepeatableItemTemplateContainerModule, MtnaWfRepeatableItemTemplateModule, MtnaWfResourceSearchComponent, MtnaWfResourceSearchModule, MtnaWfResourceSearchSelectionService, MtnaWfSanitizeHtmlPipe, MtnaWfSanitizeHtmlPipeModule, serializerUtil as MtnaWfSerializer, MtnaWfShortAnswerItemTemplateComponent, MtnaWfShortAnswerItemTemplateModule, MtnaWfStepCardComponent, MtnaWfStepCardModule, MtnaWfTableFormItemComponent, MtnaWfTableFormItemModule, MtnaWfTemplateComponent, MtnaWfTemplateDisplayViewerComponent, MtnaWfTemplateDisplayViewerModule, MtnaWfTemplateItemComponent, MtnaWfTemplateItemComponentProvider, MtnaWfTemplateItemGroupComponent, MtnaWfTemplateItemGroupModule, MtnaWfTemplateItemHeaderComponent, MtnaWfTemplateItemHeaderModule, MtnaWfTemplateItemInjector, MtnaWfTemplateItemInjectorModule, MtnaWfTemplateItemModule, MtnaWfTemplateModule, MtnaWfTemplateSectionComponent, MtnaWfTemplateSectionModule, MtnaWfTextItemComponent, MtnaWfTextItemModule, MtnaWfTextItemTemplateComponent, MtnaWfTextItemTemplateModule, MtnaWfTitleItemComponent, MtnaWfTitleItemModule, MtnaWfTitleItemTemplateComponent, MtnaWfTitleItemTemplateModule, MtnaWfUIService, MtnaWfUnorderedListItemComponent, MtnaWfUnorderedListItemModule, MtnaWfUnorderedListItemTemplateComponent, MtnaWfUnorderedListItemTemplateModule, MtnaWfWholeNumberAnswerItemTemplateComponent, MtnaWfWholeNumberAnswerItemTemplateModule, MtnaWfYearQuarterComponent, MtnaWfYearQuarterItemTemplateComponent, MtnaWfYearQuarterItemTemplateModule, MtnaWfYearQuarterModule, MtnaWfYearQuarterRangeComponent, MtnaWfYearQuarterRangeItemTemplateComponent, MtnaWfYearQuarterRangeItemTemplateModule, MtnaWfYearQuarterRangeModule, MultipleChoiceItemTemplateMapper, NUMBERED_LIST_POTENTIAL_DESIGN, NumberedListItemTemplateMapper, NumericResponseItemTemplateMapper, OFFSET_DATE_RANGE_POTENTIAL_DESIGN, OPTION_SELECTOR_POTENTIAL_DESIGN_LIST, OffsetDateRangeTemplateMapper, OptionGroupItemMapper, OptionItemMapper, OptionSelectorMapper, PARAGRAPH_ANSWER_POTENTIAL_DESIGN, QUARTER_FOUR_DISPLAY_VALUE, QUARTER_ONE_DISPLAY_VALUE, QUARTER_RANGE_ENUM_VALUES, QUARTER_THREE_DISPLAY_VALUE, QUARTER_TWO_DISPLAY_VALUE, REPEATABLE_POTENTIAL_DESIGN, RepeatableItemTemplateMapper, SECTION_POTENTIAL_DESIGN, SECTION_POTENTIAL_DESIGN_LIST, SHORT_ANSWER_POTENTIAL_DESIGN, SLASHED_DATE_DISPLAY_VALUE, TEMPLATE_FORM_STATE_KEY, TEMPLATE_POTENTIAL_DESIGN_LIST, TEXT_POTENTIAL_DESIGN, TITLE_POTENTIAL_DESIGN, TemplateDesignFacade, templateForm_actions as TemplateFormActions, templateFormApi_actions as TemplateFormApiActions, TemplateFormEffects, TemplateFormFacade, templateForm_selectors as TemplateFormSelectors, TemplateItemGroupMapper, TemplateItemMapper, TemplateMapper, TemplateSectionMapper, TextItemTemplateMapper, TextResponseItemTemplateMapper, TimeItemTemplateMapper, TitleItemTemplateMapper, UnavailableTemplateItemNameMap, WEB_FORM_CUSTOM_ERRORS, WHOLE_NUMBER_ANSWER_POTENTIAL_DESIGN, YEAR_QUARTER_RANGE_POTENTIAL_DESIGN, YearQuarterRangeItemTemplateMapper, deactivateStep, everyStepStatus, findFormControl, findFormItem, flattenConditionalItems, flattenSteps, form, generateFormSteps, generateFormStepsFromOutline, getConditionalProcessingResources, getEnumDesignProperty, getItemClassSuffix, getItemMapperFromDesign, getModelMap, getModelToDesign, getTemplateMapperFromDesign$1 as getTemplateMapperFromDesign, getTypeDisplay, hasCondition, i18n_acknowledgement, i18n_acknowledgementDialogTitle, i18n_acknowledgementInstructions, i18n_additionalText, i18n_additionalTextInstructions, i18n_annotationEnabled, i18n_annotationEnabledInstructions, i18n_boolean, i18n_booleanConfiguration, i18n_booleanItem, i18n_booleanItemDescription, i18n_bulletedListConfiguration, i18n_bulletedListItem, i18n_bulletedListItemDescription, i18n_bulletedListItemInstructions, i18n_checkbox, i18n_checkboxConfiguration, i18n_checkboxItem, i18n_checkboxItemDescription, i18n_childItems, i18n_codeOption, i18n_codeOptionInstructions, i18n_column, i18n_conditionAllRequired, i18n_conditionAllRequiredInstructions, i18n_conditionItemIds, i18n_conditionItemIdsInstructions, i18n_conditions, i18n_core, i18n_date, i18n_dateConfiguration, i18n_dateFormat, i18n_dateFormatInstructions, i18n_dateItem, i18n_dateItemDescription, i18n_decimalAnswer, i18n_decimalAnswerItem, i18n_decimalAnswerItemDescription, i18n_decimalValue, i18n_description, i18n_descriptionInstructions, i18n_descriptive, i18n_descriptiveText, i18n_descriptiveTextInstructionsItem, i18n_descriptiveTextInstructionsTemplate, i18n_disabledItems, i18n_disabledItemsInstructions, i18n_downloadAllowed, i18n_downloadAllowedInstructions, i18n_dropdown, i18n_dropdownConfiguration, i18n_dropdownItem, i18n_dropdownItemDescription, i18n_dropdownProperties, i18n_enabledAndDisabledItems, i18n_enabledItems, i18n_enabledItemsInstructions, i18n_endQuarter, i18n_endQuarterInstructions, i18n_endYear, i18n_endYearInstructions, i18n_exampleText, i18n_fileTypeId, i18n_fileTypeIdInstructions, i18n_fileUpload, i18n_fileUploadConfiguration, i18n_fileUploadItem, i18n_fileUploadItemDescription, i18n_form, i18n_format, i18n_formatInstructions, i18n_formatTimeInstructions, i18n_fullWidth, i18n_fullWidthInstructions, i18n_group, i18n_groupItem, i18n_groupItemDescription, i18n_help, i18n_helpInstructions, i18n_internationalizedParagraphAnswer, i18n_internationalizedParagraphAnswerItem, i18n_internationalizedParagraphAnswerItemDescription, i18n_internationalizedShortAnswer, i18n_internationalizedShortAnswerItem, i18n_internationalizedShortAnswerItemDescription, i18n_item, i18n_items, i18n_itemsInstructions, i18n_label, i18n_labelInstructions, i18n_layout, i18n_layoutInstructions, i18n_listValue, i18n_maxCharCount, i18n_maxCharCountInstructions, i18n_maxOccurrances, i18n_maxOccurrancesInstructions, i18n_maxSelections, i18n_maxSelectionsInstructions, i18n_maxValue, i18n_maxValueInstructions, i18n_minCharCount, i18n_minCharCountInstructions, i18n_minOccurrances, i18n_minOccurrancesInstructions, i18n_minSelections, i18n_minSelectionsInstructions, i18n_minValue, i18n_minValueInstructions, i18n_multipleChoice, i18n_multipleChoiceConfiguration, i18n_multipleChoiceItem, i18n_multipleChoiceItemDescription, i18n_name, i18n_nameInstructions, i18n_new, i18n_newItem, i18n_newListValue, i18n_newOption, i18n_newOptionDescription, i18n_newOptionTemplate, i18n_newTemplate, i18n_newTemplateItem, i18n_numberedListConfiguration, i18n_numberedListItem, i18n_numberedListItemDescription, i18n_numberedListItemInstructions, i18n_numericConfiguration, i18n_offsetDateRange, i18n_offsetDateRangeConfiguration, i18n_offsetDateRangeItem, i18n_offsetDateRangeItemDescription, i18n_option, i18n_optionInstructions, i18n_optionProperties, i18n_optionSubsetInstructions, i18n_optionSubsets, i18n_optionTemplate, i18n_optionTemplateInstructions, i18n_optionTemplateMap, i18n_optionTemplateMapInstructions, i18n_optionTemplates, i18n_options, i18n_optionsInstructions, i18n_orderedList, i18n_orderedListItem, i18n_paragraphAnswer, i18n_paragraphAnswerItem, i18n_paragraphAnswerItemDescription, i18n_positiveOnly, i18n_positiveOnlyInstructions, i18n_presetValue, i18n_presetValueInstructions, i18n_quarterFour, i18n_quarterOne, i18n_quarterThree, i18n_quarterTwo, i18n_questionText, i18n_questionTextInstructions, i18n_rangeLimits, i18n_rangeLimitsInstructions, i18n_repeatable, i18n_repeatableItem, i18n_repeatableItemConfiguration, i18n_repeatableItemDescription, i18n_repeatableItemTemplateId, i18n_repeatableItemTemplateIdInstructions, i18n_required, i18n_requiredInstructions, i18n_row, i18n_section, i18n_sectionDescription, i18n_sectionItem, i18n_sectionStepName, i18n_sectionStepNameInstructions, i18n_sectionTitleItem, i18n_selectAReference, i18n_selectAReferenceDialogTitle, i18n_settings, i18n_shortAnswer, i18n_shortAnswerItem, i18n_shortAnswerItemDescription, i18n_startQuarter, i18n_startQuarterInstructions, i18n_startYear, i18n_startYearInstructions, i18n_startingInstances, i18n_startingInstancesInstructions, i18n_template, i18n_templateItem, i18n_templateItemAnnotation, i18n_templateItemAnnotationInstructions, i18n_templateItemBasicSettings, i18n_templateItemHelp, i18n_templateItemHelpInstructions, i18n_templateItemInstructions, i18n_templateItemLabel, i18n_templateItemLabelInstructions, i18n_templateItemQuestionText, i18n_templateItemQuestionTextInstructions, i18n_templateItemRequired, i18n_templateItemRequiredInstructions, i18n_templateItems, i18n_templateItemsInstructions, i18n_templateItemsInstructionsGroup, i18n_text, i18n_textConfiguration, i18n_textInputConfiguration, i18n_textItem, i18n_textItemDescription, i18n_textValue, i18n_textValueInstructions, i18n_time, i18n_timeInputConfiguration, i18n_timeItem, i18n_title, i18n_titleInstructions, i18n_titleInstructionsSection, i18n_titleItem, i18n_titleItemDescription, i18n_unorderedList, i18n_unorderedListItem, i18n_value, i18n_valueInstructions, i18n_values, i18n_valuesInstructions, i18n_verifyAcknowledgementDialogTitle, i18n_wholeNumberAnswer, i18n_wholeNumberAnswerItem, i18n_wholeNumberAnswerItemDescription, i18n_wholeNumberValue, i18n_yearQuarterRange, i18n_yearQuarterRangeConfiguration, i18n_yearQuarterRangeItem, i18n_yearQuarterRangeItemDescription, initialTemplateFormState, instanceOfFormStep, instanceOfFormStepGroup, isEmptyString, isFormControl, isFormGroup, isFormStepGroup, isTemplateDesign, isTemplateItem, isTemplateItemDesign, itemToDesignBase, mapperItemToDesign, mapperRegistry, mapperTemplateToDesign, mapperToDesignRegistry, mergeBooleanItemTemplate, mergeExtendedTemplateOptionGroupItem, mergeFormOptionSelector, mergeFormOptionSelectors, mergeOptionTemplateMap, mergeTemplate, mergeTemplateItem, mergeTemplateItemBase, mergeTemplateItemGroup, mergeTemplateSection, numValueLimit, numericalValueCheck, optionGroupItemSectionDisplayNameMap, optionItemSectionDisplayNameMap, positiveNumberPattern, processConditionals, prop_item_acknowledgementTemplate, prop_item_additional_text, prop_item_annotation_enabled, prop_item_code_option, prop_item_condition_allRequired, prop_item_condition_itemIds, prop_item_description, prop_item_descriptive_text, prop_item_download_allowed, prop_item_endQuarter, prop_item_endYear, prop_item_exclude_print, prop_item_file_type_id, prop_item_format, prop_item_format_time, prop_item_full_width, prop_item_help, prop_item_item, prop_item_items, prop_item_label, prop_item_layout, prop_item_max_char, prop_item_max_occurrences, prop_item_max_selections, prop_item_max_value, prop_item_min_char, prop_item_min_occurrences, prop_item_min_selections, prop_item_min_value, prop_item_name, prop_item_option, prop_item_option_subsets, prop_item_option_template_map, prop_item_options, prop_item_positive_only, prop_item_preset_value, prop_item_question_text, prop_item_range_limits, prop_item_repeatable_item_template_id, prop_item_required, prop_item_startQuarter, prop_item_startYear, prop_item_starting_instances, prop_item_text, prop_item_title, prop_item_value, prop_item_values, prop_option_disabled_items, prop_option_enabled_items, prop_option_template, prop_template_descriptive_text, prop_template_items, prop_template_title, registerMapper, registerTemplateMapper, removeFromCondition, template, templateMapperRegistry, templateMapperToDesignRegistry, updateConditional, updateStepStatus, validationResultValidator, wfTemplateFormReducer, wholeNumberPattern };
 //# sourceMappingURL=mtna-web-form-angular.js.map