novo-elements 5.2.10 → 5.5.1

package/bundles/novo-elements.umd.js

@@ -6229,6 +6229,7 @@
             _this.renderer = renderer;
             _this.labels = labels;
             _this.placeholder = '';
+            _this.emptyOptionsLabel = '';
             _this.internalMap = new Map();
             return _this;
         }
@@ -6258,6 +6259,13 @@
             if (this.keyboardSubscription) {
                 this.keyboardSubscription.unsubscribe();
             }
+            if (this.config.options) {
+                this.config.options.forEach(function (option) {
+                    if (option.clearSecondaryOptions) {
+                        option.clearSecondaryOptions.unsubscribe();
+                    }
+                });
+            }
         };
         MixedMultiPickerResults.prototype.selectPrimaryOption = function (primaryOption, event) {
             var _this = this;
@@ -6307,6 +6315,18 @@
         MixedMultiPickerResults.prototype.shouldShowSearchBox = function (primaryOption) {
             return !!(primaryOption && primaryOption.showSearchOnSecondaryOptions);
         };
+        MixedMultiPickerResults.prototype.clearPrimaryOption = function (primaryOption) {
+            var _a;
+            if (this.internalMap.get(primaryOption.value)) {
+                if (primaryOption.value === ((_a = this.selectedPrimaryOption) === null || _a === void 0 ? void 0 : _a.value)) {
+                    this.activeMatch = null;
+                    this.matches = [];
+                    this.selectedPrimaryOption = null;
+                }
+                this.internalMap.delete(primaryOption.value);
+                this.ref.markForCheck();
+            }
+        };
         MixedMultiPickerResults.prototype.filterData = function () {
             if (this.selectedPrimaryOption) {
                 if (this.selectedPrimaryOption.secondaryOptions) {
@@ -6351,6 +6371,11 @@
                             _this.inputElement.nativeElement.focus();
                         });
                     });
+                    if (primaryOption.clearSecondaryOptions) {
+                        primaryOption.clearSecondaryOptions.subscribe(function () {
+                            _this.clearPrimaryOption(primaryOption);
+                        });
+                    }
                 }
                 else {
                     this.matches = this.filter(this.internalMap.get(primaryOption.value).items);
@@ -6363,7 +6388,7 @@
     MixedMultiPickerResults.decorators = [
         { type: core.Component, args: [{
                     selector: 'mixed-multi-picker-results',
-                    template: "\n    <div class=\"mixed-multi-picker-groups\">\n        <novo-list direction=\"vertical\">\n            <novo-list-item\n                *ngFor=\"let option of options\"\n                (click)=\"selectPrimaryOption(option, $event)\"\n                [class.active]=\"selectedPrimaryOption?.value === option.value\"\n                [attr.data-automation-id]=\"option.label\"\n                [class.disabled]=\"isLoading\">\n                <item-content>\n                    <i *ngIf=\"option.iconClass\" [class]=\"option.iconClass\"></i>\n                    <span data-automation-id=\"label\">{{ option.label }}</span>\n                </item-content>\n                <item-end *ngIf=\"optionHasSecondaryOptions(option)\">\n                    <i class=\"bhi-next\"></i>\n                </item-end>\n            </novo-list-item>\n        </novo-list>\n    </div>\n    <div class=\"mixed-multi-picker-matches\" [hidden]=\"!optionHasSecondaryOptions(selectedPrimaryOption)\">\n        <div class=\"mixed-multi-picker-input-container\" [hidden]=\"!shouldShowSearchBox(selectedPrimaryOption)\" data-automation-id=\"input-container\">\n            <input autofocus #input [(ngModel)]=\"searchTerm\" [disabled]=\"isLoading\" data-automation-id=\"input\" [placeholder]=\"placeholder\"/>\n            <i class=\"bhi-search\" *ngIf=\"!searchTerm\" [class.disabled]=\"isLoading\" data-automation-id=\"seach-icon\"></i>\n            <i class=\"bhi-times\" *ngIf=\"searchTerm\" (click)=\"clearSearchTerm($event)\" [class.disabled]=\"isLoading\" data-automation-id=\"remove-icon\"></i>\n        </div>\n        <div class=\"mixed-multi-picker-list-container\">\n            <novo-list direction=\"vertical\" #list>\n                <novo-list-item\n                    *ngFor=\"let match of matches\"\n                    (click)=\"selectMatch($event)\"\n                    [class.active]=\"match === activeMatch\"\n                    (mouseenter)=\"selectActive(match)\"\n                    [class.disabled]=\"preselected(match) || isLoading\"\n                    [attr.data-automation-id]=\"match.label\">\n                    <item-content>\n                        <span>{{ match.label }}</span>\n                    </item-content>\n                </novo-list-item>\n            </novo-list>\n            <div class=\"mixed-multi-picker-no-results\" *ngIf=\"matches.length === 0 && !isLoading && selectedPrimaryOption\" data-automation-id=\"empty-message\">\n                {{ labels.groupedMultiPickerEmpty }}\n            </div>\n            <div class=\"mixed-multi-picker-loading\" *ngIf=\"isLoading\" data-automation-id=\"loading-message\">\n                <novo-loading theme=\"line\"></novo-loading>\n            </div>\n        </div>\n    </div>"
+                    template: "\n    <div class=\"mixed-multi-picker-groups\">\n        <novo-list direction=\"vertical\">\n            <novo-list-item\n                *ngFor=\"let option of options\"\n                (click)=\"selectPrimaryOption(option, $event)\"\n                [class.active]=\"selectedPrimaryOption?.value === option.value\"\n                [attr.data-automation-id]=\"option.label\"\n                [class.disabled]=\"isLoading\">\n                <item-content>\n                    <i *ngIf=\"option.iconClass\" [class]=\"option.iconClass\"></i>\n                    <span data-automation-id=\"label\">{{ option.label }}</span>\n                </item-content>\n                <item-end *ngIf=\"optionHasSecondaryOptions(option)\">\n                    <i class=\"bhi-next\"></i>\n                </item-end>\n            </novo-list-item>\n        </novo-list>\n    </div>\n    <div class=\"mixed-multi-picker-matches\" [hidden]=\"!optionHasSecondaryOptions(selectedPrimaryOption)\">\n        <div class=\"mixed-multi-picker-input-container\" [hidden]=\"!shouldShowSearchBox(selectedPrimaryOption)\" data-automation-id=\"input-container\">\n            <input autofocus #input [(ngModel)]=\"searchTerm\" [disabled]=\"isLoading\" data-automation-id=\"input\" [placeholder]=\"placeholder\"/>\n            <i class=\"bhi-search\" *ngIf=\"!searchTerm\" [class.disabled]=\"isLoading\" data-automation-id=\"seach-icon\"></i>\n            <i class=\"bhi-times\" *ngIf=\"searchTerm\" (click)=\"clearSearchTerm($event)\" [class.disabled]=\"isLoading\" data-automation-id=\"remove-icon\"></i>\n        </div>\n        <div class=\"mixed-multi-picker-list-container\">\n            <novo-list direction=\"vertical\" #list>\n                <novo-list-item\n                    *ngFor=\"let match of matches\"\n                    (click)=\"selectMatch($event)\"\n                    [class.active]=\"match === activeMatch\"\n                    (mouseenter)=\"selectActive(match)\"\n                    [class.disabled]=\"preselected(match) || isLoading\"\n                    [attr.data-automation-id]=\"match.label\">\n                    <item-content>\n                        <span>{{ match.label }}</span>\n                    </item-content>\n                </novo-list-item>\n            </novo-list>\n            <div class=\"mixed-multi-picker-no-results\" *ngIf=\"matches.length === 0 && !isLoading && selectedPrimaryOption\" data-automation-id=\"empty-message\">\n                {{ config.emptyOptionsLabel ? config.emptyOptionsLabel : labels.groupedMultiPickerEmpty }}\n            </div>\n            <div class=\"mixed-multi-picker-loading\" *ngIf=\"isLoading\" data-automation-id=\"loading-message\">\n                <novo-loading theme=\"line\"></novo-loading>\n            </div>\n        </div>\n    </div>"
                 },] }
     ];
     MixedMultiPickerResults.ctorParameters = function () { return [
@@ -30462,6 +30487,7 @@
         function ControlConfig() {
             this.isEmbedded = false;
             this.isInlineEmbedded = false;
+            this.highlighted = false;
         }
         return ControlConfig;
     }());
@@ -30510,6 +30536,7 @@
             _this.startDate = config.startDate;
             _this.endDate = config.endDate;
             _this.restrictFieldInteractions = !!config.restrictFieldInteractions;
+            _this.highlighted = !!config.highlighted;
             if (!Helpers.isEmpty(config.warning)) {
                 _this.warning = config.warning;
             }
@@ -31840,7 +31867,7 @@
             else if (field.dataSpecialization === 'ALL_WORKFLOW_OPTIONS' && field.options) {
                 return field.options;
             }
-            else if (field.workflowOptions && fieldData) {
+            else if (field.workflowOptions) {
                 return this.getWorkflowOptions(field.workflowOptions, fieldData);
             }
             else if (field.dataSpecialization === 'SPECIALIZED_OPTIONS' ||
@@ -31864,12 +31891,14 @@
             return null;
         };
         FormUtils.prototype.getWorkflowOptions = function (workflowOptions, fieldData) {
-            var currentValue;
-            if (fieldData.id) {
+            var currentValue = null;
+            var currentWorkflowOption = 'initial';
+            if (fieldData === null || fieldData === void 0 ? void 0 : fieldData.id) {
                 currentValue = { value: fieldData.id, label: fieldData.label ? fieldData.label : fieldData.id };
+                currentWorkflowOption = fieldData.id;
             }
-            var currentWorkflowOption = fieldData.id ? fieldData.id : 'initial';
             var updateWorkflowOptions = workflowOptions[currentWorkflowOption] || [];
+            // Ensure that the current value is added to the beginning of the options list
             if (currentValue && !updateWorkflowOptions.find(function (option) { return option.value === currentValue.value; })) {
                 updateWorkflowOptions.unshift(currentValue);
             }
@@ -32670,6 +32699,13 @@
                 this.triggerEvent({ controlKey: key, prop: 'required', value: required }, otherForm);
             }
         };
+        FieldInteractionApi.prototype.highlight = function (key, isHighlighted, otherForm) {
+            var control = this.getControl(key, otherForm);
+            if (control && !control.restrictFieldInteractions) {
+                control.highlighted = isHighlighted;
+                this.triggerEvent({ controlKey: key, prop: 'highlight', value: isHighlighted }, otherForm);
+            }
+        };
         FieldInteractionApi.prototype.hide = function (key, clearValue, otherForm) {
             if (clearValue === void 0) { clearValue = true; }
             var control = this.getControl(key, otherForm);
@@ -32890,9 +32926,9 @@
         FieldInteractionApi.prototype.removeStaticOption = function (key, optionToRemove, otherForm) {
             var control = this.getControl(key, otherForm);
             if (control && !control.restrictFieldInteractions) {
-                var currentOptions = this.getProperty(key, 'options');
+                var currentOptions = this.getProperty(key, 'options', otherForm);
                 if (!currentOptions || !currentOptions.length) {
-                    var config = this.getProperty(key, 'config');
+                    var config = this.getProperty(key, 'config', otherForm);
                     if (config) {
                         currentOptions = config.options;
                         if (currentOptions && Array.isArray(currentOptions)) {
@@ -32913,7 +32949,7 @@
                                 currentOptions.splice(index_1, 1);
                             }
                             config.options = __spread(currentOptions);
-                            this.setProperty(key, 'config', config);
+                            this.setProperty(key, 'config', config, otherForm);
                         }
                     }
                 }
@@ -32934,7 +32970,7 @@
                     if (index_2 !== -1) {
                         currentOptions.splice(index_2, 1);
                     }
-                    this.setProperty(key, 'options', __spread(currentOptions));
+                    this.setProperty(key, 'options', __spread(currentOptions), otherForm);
                 }
                 this.triggerEvent({ controlKey: key, prop: 'options', value: control.options }, otherForm);
             }
@@ -33791,7 +33827,7 @@
     NovoControlElement.decorators = [
         { type: core.Component, args: [{
                     selector: 'novo-control',
-                    template: "\n        <div class=\"novo-control-container\" [hidden]=\"form.controls[control.key].hidden || form.controls[control.key].type === 'hidden' || form.controls[control.key].controlType === 'hidden'\">\n            <!--Encrypted Field-->\n            <span [tooltip]=\"labels.encryptedFieldTooltip\" [tooltipPosition]=\"'right'\"><i [hidden]=\"!form.controls[control.key].encrypted\"\n            class=\"bhi-lock\"></i></span>\n            <!--Label (for horizontal)-->\n            <label [attr.for]=\"control.key\" *ngIf=\"form.layout !== 'vertical' && form.controls[control.key].label && !condensed\" [ngClass]=\"{'encrypted': form.controls[control.key].encrypted }\">\n                {{ form.controls[control.key].label }}\n            </label>\n            <div class=\"novo-control-outer-container\">\n                <!--Label (for vertical)-->\n                <label\n                    *ngIf=\"form.layout === 'vertical' && form.controls[control.key].label && !condensed\"\n                    class=\"novo-control-label\"\n                    [attr.for]=\"control.key\"\n                    [class.novo-control-empty]=\"!hasValue\"\n                    [class.novo-control-focused]=\"focused\"\n                    [class.novo-control-filled]=\"hasValue\"\n                    [class.novo-control-always-active]=\"alwaysActive || form.controls[control.key].placeholder\"\n                    [class.novo-control-extra-spacing]=\"requiresExtraSpacing\">\n                    {{ form.controls[control.key].label }}\n                </label>\n                <div class=\"novo-control-inner-container\" [class.required]=\"form.controls[control.key].required && !form.controls[control.key].readOnly\">\n                    <div class=\"novo-control-inner-input-container\" [class.novo-control-filled]=\"hasValue\" [class.novo-control-empty]=\"!hasValue\">\n                      <!--Required Indicator-->\n                        <i [hidden]=\"!form.controls[control.key].required || form.controls[control.key].readOnly\"\n                            class=\"required-indicator {{ form.controls[control.key].controlType }}\"\n                            [ngClass]=\"{'bhi-circle': !isValid, 'bhi-check': isValid}\" *ngIf=\"!condensed || form.controls[control.key].required\">\n                        </i>\n                        <!--Form Controls-->\n                        <div class=\"novo-control-input {{ form.controls[control.key].controlType }}\" [attr.data-automation-id]=\"control.key\" [class.control-disabled]=\"form.controls[control.key].disabled\">\n                            <!--TODO prefix/suffix on the control-->\n                            <ng-container *ngIf=\"templates\">\n                              <ng-container *ngTemplateOutlet=\"templates[form.controls[control.key].controlType]; context: templateContext\"></ng-container>\n                            </ng-container>\n                            <ng-container *ngIf=\"!templates || loading\">\n                                <div class=\"novo-control-input-container novo-control-input-with-label\">\n                                  <input type=\"text\"/>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <!--Error Message-->\n                    <div class=\"field-message {{ form.controls[control.key].controlType }}\" *ngIf=\"!condensed\" [class.has-tip]=\"form.controls[control.key].tipWell\" [ngClass]=\"showErrorState || showMaxLengthMetMessage ? 'error-shown' : 'error-hidden'\">\n                        <div class=\"messages\" [ngClass]=\"showMessages ? 'count-shown messages-shown' : 'count-hidden messages-hidden'\">\n                            <span class=\"error-text\" *ngIf=\"showFieldMessage\"></span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && errors?.required && form.controls[control.key].controlType !== 'address'\">{{ form.controls[control.key].label | uppercase }} {{ labels.isRequired }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && errors?.minlength\">{{ form.controls[control.key].label | uppercase }} {{ labels.minLength }} {{ form.controls[control.key].minlength }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && maxLengthMet && focused && !errors?.maxlength && form.controls[control.key].controlType !== 'picker'\">{{ labels.maxlengthMet(form.controls[control.key].maxlength) }}</span>\n                            <span class=\"error-text\" *ngIf=\"errors?.maxlength && focused && !errors?.maxlengthFields\">{{ labels.invalidMaxlength(form.controls[control.key].maxlength) }}</span>\n                            <span class=\"error-text\" *ngIf=\"maxLengthMet && form.controls[control.key].controlType === 'picker'\">{{ labels.maxRecordsReached }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && errors?.invalidEmail\">{{ form.controls[control.key].label | uppercase }} {{ labels.invalidEmail }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && (errors?.integerTooLarge || errors?.doubleTooLarge)\">{{ form.controls[control.key].label | uppercase }} {{ labels.isTooLarge }}</span>\n                            <span *ngIf=\"isDirty && errors?.minYear\">{{ form.controls[control.key].label | uppercase }} {{ labels.notValidYear }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && (errors?.custom)\">{{ errors.custom }}</span>\n                            <span class=\"error-text\" *ngIf=\"errors?.maxlength && errors?.maxlengthFields && maxlengthErrorField && focused\">\n                                {{ labels.invalidMaxlengthWithField(control.config[maxlengthErrorField]?.label, control.config[maxlengthErrorField]?.maxlength) }}\n                            </span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && maxlengthMetField && focused && !errors?.maxlengthFields?.includes(maxlengthMetField)\">\n                              {{ labels.maxlengthMetWithField(control.config[maxlengthMetField]?.label, control.config[maxlengthMetField]?.maxlength) }}\n                            </span>\n                            <span *ngIf=\"isDirty && errors?.invalidAddress\">\n                                <span class=\"error-text\" *ngFor=\"let invalidAddressField of errors?.invalidAddressFields\">{{ invalidAddressField | uppercase }} {{ labels.isRequired }} </span>\n                            </span>\n                            <!--Field Hint-->\n                            <span class=\"description\" *ngIf=\"form.controls[control.key].description\">\n                                {{ form.controls[control.key].description }}\n                            </span>\n                            <span class=\"warning-text\" *ngIf=\"form.controls[control.key].warning\">{{ form.controls[control.key].warning }}</span>\n\n                        </div>\n                        <span class=\"character-count\" [class.error]=\"((errors?.maxlength && !errors?.maxlengthFields) || (errors?.maxlength && errors?.maxlengthFields && errors.maxlengthFields.includes(focusedField)))\" *ngIf=\"showCount && form.controls[control.key].controlType !== 'picker'\">{{ itemCount }}/{{ maxLength || form.controls[control.key].maxlength }}</span>\n                        <span class=\"record-count\" [class.zero-count]=\"itemCount === 0\" [class.row-picker]=\"form.controls[this.control.key].config.columns\" *ngIf=\"showCount && form.controls[control.key].controlType === 'picker'\">{{ itemCount }}/{{ maxLength || form.controls[control.key].maxlength }}</span>\n                    </div>\n                    <!--Tip Wel-->\n                    <novo-tip-well *ngIf=\"form.controls[control.key].tipWell\" [name]=\"control.key\" [tip]=\"form.controls[control.key]?.tipWell?.tip\" [icon]=\"form.controls[control.key]?.tipWell?.icon\" [button]=\"form.controls[control.key]?.tipWell?.button\" [sanitize]=\"form.controls[control.key]?.tipWell?.sanitize\"></novo-tip-well>\n                </div>\n                <i *ngIf=\"form.controls[control.key].fieldInteractionloading\" class=\"loading\">\n                    <svg version=\"1.1\"\n                     xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:a=\"http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/\"\n                     x=\"0px\" y=\"0px\" width=\"18.2px\" height=\"18.5px\" viewBox=\"0 0 18.2 18.5\" style=\"enable-background:new 0 0 18.2 18.5;\"\n                     xml:space=\"preserve\">\n                    <style type=\"text/css\">\n                        .spinner { fill:#FFFFFF; }\n                    </style>\n                        <path class=\"spinner\" d=\"M9.2,18.5C4.1,18.5,0,14.4,0,9.2S4.1,0,9.2,0c0.9,0,1.9,0.1,2.7,0.4c0.8,0.2,1.2,1.1,1,1.9\n                            c-0.2,0.8-1.1,1.2-1.9,1C10.5,3.1,9.9,3,9.2,3C5.8,3,3,5.8,3,9.2s2.8,6.2,6.2,6.2c2.8,0,5.3-1.9,6-4.7c0.2-0.8,1-1.3,1.8-1.1\n                            c0.8,0.2,1.3,1,1.1,1.8C17.1,15.7,13.4,18.5,9.2,18.5z\"/>\n                    </svg>\n                </i>\n            </div>\n        </div>\n    ",
+                    template: "\n        <div class=\"novo-control-container\" [hidden]=\"form.controls[control.key].hidden || form.controls[control.key].type === 'hidden' || form.controls[control.key].controlType === 'hidden'\">\n            <!--Encrypted Field-->\n            <span [tooltip]=\"labels.encryptedFieldTooltip\" [tooltipPosition]=\"'right'\"><i [hidden]=\"!form.controls[control.key].encrypted\"\n            class=\"bhi-lock\"></i></span>\n            <!--Label (for horizontal)-->\n            <label [attr.for]=\"control.key\" *ngIf=\"form.layout !== 'vertical' && form.controls[control.key].label && !condensed\" [ngClass]=\"{'encrypted': form.controls[control.key].encrypted }\">\n                {{ form.controls[control.key].label }}\n            </label>\n            <div class=\"novo-control-outer-container\">\n                <!--Label (for vertical)-->\n                <label\n                    *ngIf=\"form.layout === 'vertical' && form.controls[control.key].label && !condensed\"\n                    class=\"novo-control-label\"\n                    [attr.for]=\"control.key\"\n                    [class.novo-control-empty]=\"!hasValue\"\n                    [class.novo-control-focused]=\"focused\"\n                    [class.novo-control-filled]=\"hasValue\"\n                    [class.novo-control-always-active]=\"alwaysActive || form.controls[control.key].placeholder\"\n                    [class.novo-control-extra-spacing]=\"requiresExtraSpacing\">\n                    {{ form.controls[control.key].label }}\n                </label>\n                <div class=\"novo-control-inner-container\" [class.required]=\"form.controls[control.key].required && !form.controls[control.key].readOnly\">\n                    <div class=\"novo-control-inner-input-container\" [class.novo-control-filled]=\"hasValue\" [class.novo-control-empty]=\"!hasValue\">\n                      <!--Required Indicator-->\n                        <i [hidden]=\"!form.controls[control.key].required || form.controls[control.key].readOnly\"\n                            class=\"required-indicator {{ form.controls[control.key].controlType }}\"\n                            [ngClass]=\"{'bhi-circle': !isValid, 'bhi-check': isValid}\" *ngIf=\"!condensed || form.controls[control.key].required\">\n                        </i>\n                        <!--Form Controls-->\n                        <div class=\"novo-control-input {{ form.controls[control.key].controlType }}\" [attr.data-automation-id]=\"control.key\" [class.control-disabled]=\"form.controls[control.key].disabled\" [class.highlighted]=\"form.controls[control.key].highlighted\">\n                            <!--TODO prefix/suffix on the control-->\n                            <ng-container *ngIf=\"templates\">\n                              <ng-container *ngTemplateOutlet=\"templates[form.controls[control.key].controlType]; context: templateContext\"></ng-container>\n                            </ng-container>\n                            <ng-container *ngIf=\"!templates || loading\">\n                                <div class=\"novo-control-input-container novo-control-input-with-label\">\n                                  <input type=\"text\"/>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </div>\n                    <!--Error Message-->\n                    <div class=\"field-message {{ form.controls[control.key].controlType }}\" *ngIf=\"!condensed\" [class.has-tip]=\"form.controls[control.key].tipWell\" [ngClass]=\"showErrorState || showMaxLengthMetMessage ? 'error-shown' : 'error-hidden'\">\n                        <div class=\"messages\" [ngClass]=\"showMessages ? 'count-shown messages-shown' : 'count-hidden messages-hidden'\">\n                            <span class=\"error-text\" *ngIf=\"showFieldMessage\"></span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && errors?.required && form.controls[control.key].controlType !== 'address'\">{{ form.controls[control.key].label | uppercase }} {{ labels.isRequired }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && errors?.minlength\">{{ form.controls[control.key].label | uppercase }} {{ labels.minLength }} {{ form.controls[control.key].minlength }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && maxLengthMet && focused && !errors?.maxlength && form.controls[control.key].controlType !== 'picker'\">{{ labels.maxlengthMet(form.controls[control.key].maxlength) }}</span>\n                            <span class=\"error-text\" *ngIf=\"errors?.maxlength && focused && !errors?.maxlengthFields\">{{ labels.invalidMaxlength(form.controls[control.key].maxlength) }}</span>\n                            <span class=\"error-text\" *ngIf=\"maxLengthMet && form.controls[control.key].controlType === 'picker'\">{{ labels.maxRecordsReached }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && errors?.invalidEmail\">{{ form.controls[control.key].label | uppercase }} {{ labels.invalidEmail }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && (errors?.integerTooLarge || errors?.doubleTooLarge)\">{{ form.controls[control.key].label | uppercase }} {{ labels.isTooLarge }}</span>\n                            <span *ngIf=\"isDirty && errors?.minYear\">{{ form.controls[control.key].label | uppercase }} {{ labels.notValidYear }}</span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && (errors?.custom)\">{{ errors.custom }}</span>\n                            <span class=\"error-text\" *ngIf=\"errors?.maxlength && errors?.maxlengthFields && maxlengthErrorField && focused\">\n                                {{ labels.invalidMaxlengthWithField(control.config[maxlengthErrorField]?.label, control.config[maxlengthErrorField]?.maxlength) }}\n                            </span>\n                            <span class=\"error-text\" *ngIf=\"isDirty && maxlengthMetField && focused && !errors?.maxlengthFields?.includes(maxlengthMetField)\">\n                              {{ labels.maxlengthMetWithField(control.config[maxlengthMetField]?.label, control.config[maxlengthMetField]?.maxlength) }}\n                            </span>\n                            <span *ngIf=\"isDirty && errors?.invalidAddress\">\n                                <span class=\"error-text\" *ngFor=\"let invalidAddressField of errors?.invalidAddressFields\">{{ invalidAddressField | uppercase }} {{ labels.isRequired }} </span>\n                            </span>\n                            <!--Field Hint-->\n                            <span class=\"description\" *ngIf=\"form.controls[control.key].description\">\n                                {{ form.controls[control.key].description }}\n                            </span>\n                            <span class=\"warning-text\" *ngIf=\"form.controls[control.key].warning\">{{ form.controls[control.key].warning }}</span>\n\n                        </div>\n                        <span class=\"character-count\" [class.error]=\"((errors?.maxlength && !errors?.maxlengthFields) || (errors?.maxlength && errors?.maxlengthFields && errors.maxlengthFields.includes(focusedField)))\" *ngIf=\"showCount && form.controls[control.key].controlType !== 'picker'\">{{ itemCount }}/{{ maxLength || form.controls[control.key].maxlength }}</span>\n                        <span class=\"record-count\" [class.zero-count]=\"itemCount === 0\" [class.row-picker]=\"form.controls[this.control.key].config.columns\" *ngIf=\"showCount && form.controls[control.key].controlType === 'picker'\">{{ itemCount }}/{{ maxLength || form.controls[control.key].maxlength }}</span>\n                    </div>\n                    <!--Tip Wel-->\n                    <novo-tip-well *ngIf=\"form.controls[control.key].tipWell\" [name]=\"control.key\" [tip]=\"form.controls[control.key]?.tipWell?.tip\" [icon]=\"form.controls[control.key]?.tipWell?.icon\" [button]=\"form.controls[control.key]?.tipWell?.button\" [sanitize]=\"form.controls[control.key]?.tipWell?.sanitize\"></novo-tip-well>\n                </div>\n                <i *ngIf=\"form.controls[control.key].fieldInteractionloading\" class=\"loading\">\n                    <svg version=\"1.1\"\n                     xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:a=\"http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/\"\n                     x=\"0px\" y=\"0px\" width=\"18.2px\" height=\"18.5px\" viewBox=\"0 0 18.2 18.5\" style=\"enable-background:new 0 0 18.2 18.5;\"\n                     xml:space=\"preserve\">\n                    <style type=\"text/css\">\n                        .spinner { fill:#FFFFFF; }\n                    </style>\n                        <path class=\"spinner\" d=\"M9.2,18.5C4.1,18.5,0,14.4,0,9.2S4.1,0,9.2,0c0.9,0,1.9,0.1,2.7,0.4c0.8,0.2,1.2,1.1,1,1.9\n                            c-0.2,0.8-1.1,1.2-1.9,1C10.5,3.1,9.9,3,9.2,3C5.8,3,3,5.8,3,9.2s2.8,6.2,6.2,6.2c2.8,0,5.3-1.9,6-4.7c0.2-0.8,1-1.3,1.8-1.1\n                            c0.8,0.2,1.3,1,1.1,1.8C17.1,15.7,13.4,18.5,9.2,18.5z\"/>\n                    </svg>\n                </i>\n            </div>\n        </div>\n    ",
                     host: {
                         '[class]': 'form.controls[control.key].controlType',
                         '[attr.data-control-type]': 'form.controls[control.key].controlType',
@@ -33958,8 +33994,6 @@
             }
             else {
                 this.form.addControl(this.key, this.fb.array([nestedFormGroup]));
-                // Ensure that field interaction changes for nested forms originating from outside the form will be reflected in the nested elements
-                nestedFormGroup.fieldInteractionEvents.subscribe(this.onFieldInteractionEvent.bind(this));
             }
             this.disabledArray.push({
                 edit: true,
@@ -33971,6 +34005,8 @@
             }
             this.currentIndex++;
             this.assignIndexes();
+            // Ensure that field interaction changes for nested forms originating from outside the form will be reflected in the nested elements
+            nestedFormGroup.fieldInteractionEvents.subscribe(this.onFieldInteractionEvent.bind(this));
             this.ref.markForCheck();
         };
         /**