@ajf/material 12.1.5 → 12.1.8

package/bundles/material-form-builder.umd.js

@@ -533,7 +533,8 @@
     }
     function buildFormBuilderNodesSubtree(nodes, parent, ignoreConditionalBranches) {
         if (ignoreConditionalBranches === void 0) { ignoreConditionalBranches = false; }
-        var entries = nodes.filter(function (n) { return n.parent === parent.id; })
+        var entries = nodes
+            .filter(function (n) { return n.parent === parent.id; })
             .sort(function (n1, n2) { return n1.parentNode - n2.parentNode; })
             .map(function (n) {
             var children = buildFormBuilderNodesSubtree(nodes, n);
@@ -543,7 +544,7 @@
             return {
                 node: n,
                 children: children,
-                content: buildFormBuilderNodesContent(nodes, n)
+                content: buildFormBuilderNodesContent(nodes, n),
             };
         });
         if (!ignoreConditionalBranches) {
@@ -573,9 +574,9 @@
     }
     function getDescendants(flatNodes, parentNode, branch) {
         if (branch === void 0) { branch = null; }
-        return branch != null ?
-            flatNodes.filter(function (n) { return n.parent === parentNode.id && n.parentNode === branch; }) :
-            flatNodes.filter(function (n) { return n.parent === parentNode.id; });
+        return branch != null
+            ? flatNodes.filter(function (n) { return n.parent === parentNode.id && n.parentNode === branch; })
+            : flatNodes.filter(function (n) { return n.parent === parentNode.id; });
     }
     function removeNodes(nodes, ids) {
         var len = nodes.length;
@@ -608,74 +609,74 @@
                     label: 'Slide',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-slide' },
                     nodeType: { node: forms.AjfNodeType.AjfSlide },
-                    isSlide: true
+                    isSlide: true,
                 },
                 {
                     label: 'Repeating slide',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-repeatingslide' },
                     nodeType: { node: forms.AjfNodeType.AjfRepeatingSlide },
-                    isSlide: true
+                    isSlide: true,
                 },
                 {
                     label: 'String',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-string' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.String }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.String },
                 },
                 {
                     label: 'Text',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-text' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Text }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Text },
                 },
                 {
                     label: 'Number',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-number' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Number }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Number },
                 },
                 {
                     label: 'Boolean',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-boolean' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Boolean }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Boolean },
                 },
                 {
                     label: 'Single choice',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-singlechoice' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.SingleChoice }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.SingleChoice },
                 },
                 {
                     label: 'Multiple choice',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-multiplechoice' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.MultipleChoice }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.MultipleChoice },
                 },
                 {
                     label: 'Formula',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-formula' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Formula }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Formula },
                 },
                 {
                     label: 'Date',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-date' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Date }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Date },
                 },
                 {
                     label: 'Date input',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-dateinput' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.DateInput }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.DateInput },
                 },
                 {
                     label: 'Time',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-time' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Time }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Time },
                 },
                 {
                     label: 'Table',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-table' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Table }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Table },
                 },
                 {
                     label: 'Range',
                     icon: { fontSet: 'ajf-icon', fontIcon: 'field-range' },
-                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Range }
-                }
+                    nodeType: { node: forms.AjfNodeType.AjfField, field: forms.AjfFieldType.Range },
+                },
             ];
             this._form = new rxjs.BehaviorSubject(null);
             this._formObs = this._form;
@@ -684,11 +685,14 @@
              */
             this._connectedDropLists = new rxjs.BehaviorSubject([]);
             this._editedNodeEntry = new rxjs.BehaviorSubject(null);
-            this._editedNodeEntryObs = this._editedNodeEntry;
+            this._editedNodeEntryObs = this
+                ._editedNodeEntry;
             this._editedCondition = new rxjs.BehaviorSubject(null);
-            this._editedConditionObs = this._editedCondition;
+            this._editedConditionObs = this
+                ._editedCondition;
             this._editedChoicesOrigin = new rxjs.BehaviorSubject(null);
-            this._editedChoicesOriginObs = this._editedChoicesOrigin;
+            this._editedChoicesOriginObs = this
+                ._editedChoicesOrigin;
             this._beforeNodesUpdate = new core.EventEmitter();
             this._beforeNodesUpdateObs = this._beforeNodesUpdate;
             this._afterNodeUpdate = new core.EventEmitter();
@@ -903,9 +907,9 @@
             }
             this._beforeNodesUpdate.emit();
             this._nodesUpdates.next(function (nodes) {
-                var cn = forms.isContainerNode(parent) && inContent ?
-                    parent :
-                    getNodeContainer({ nodes: nodes }, parent);
+                var cn = forms.isContainerNode(parent) && inContent
+                    ? parent
+                    : getNodeContainer({ nodes: nodes }, parent);
                 if (!isFieldNode) {
                     var newNodes = nodes.slice(0);
                     newNodes.splice(insertInIndex, 0, node);
@@ -940,10 +944,12 @@
         };
         AjfFormBuilderService.prototype.getCurrentForm = function () {
             return rxjs.combineLatest([
-                this.form, this._nodesWithoutChoiceOrigins, this.attachmentsOrigins,
-                this.choicesOrigins, this.stringIdentifier
-            ])
-                .pipe(operators.filter(function (_b) {
+                this.form,
+                this._nodesWithoutChoiceOrigins,
+                this.attachmentsOrigins,
+                this.choicesOrigins,
+                this.stringIdentifier,
+            ]).pipe(operators.filter(function (_b) {
                 var _c = __read(_b, 1), form = _c[0];
                 return form != null;
             }), operators.map(function (_b) {
@@ -1005,7 +1011,7 @@
                     node: rootNode,
                     container: null,
                     children: buildFormBuilderNodesSubtree(nodes, rootNode),
-                    content: buildFormBuilderNodesContent(nodes, rootNode)
+                    content: buildFormBuilderNodesContent(nodes, rootNode),
                 });
                 return tree;
             }
@@ -1042,25 +1048,24 @@
                     return form != null && form.nodes != null ? form.nodes.slice(0) : [];
                 });
                 _this._attachmentsOriginsUpdates.next(function (_attachmentsOrigins) {
-                    return form != null && form.attachmentsOrigins != null ?
-                        form.attachmentsOrigins.slice(0) :
-                        [];
+                    return form != null && form.attachmentsOrigins != null
+                        ? form.attachmentsOrigins.slice(0)
+                        : [];
                 });
                 _this._choicesOriginsUpdates.next(function (_choicesOrigins) {
                     return form != null && form.choicesOrigins != null ? form.choicesOrigins.slice(0) : [];
                 });
                 _this._stringIdentifierUpdates.next(function (_) {
-                    return form != null && form.stringIdentifier != null ? form.stringIdentifier.slice(0) :
-                        [];
+                    return form != null && form.stringIdentifier != null
+                        ? form.stringIdentifier.slice(0)
+                        : [];
                 });
             });
         };
         AjfFormBuilderService.prototype._initChoicesOriginsStreams = function () {
-            this._choicesOrigins =
-                this._choicesOriginsUpdates
-                    .pipe(operators.scan(function (choicesOrigins, op) {
-                    return op(choicesOrigins);
-                }, []), operators.publishReplay(1), operators.refCount());
+            this._choicesOrigins = (this._choicesOriginsUpdates).pipe(operators.scan(function (choicesOrigins, op) {
+                return op(choicesOrigins);
+            }, []), operators.publishReplay(1), operators.refCount());
         };
         AjfFormBuilderService.prototype._initAttachmentsOriginsStreams = function () {
             this._attachmentsOrigins = this._attachmentsOriginsUpdates.pipe(operators.scan(function (attachmentsOrigins, op) {
@@ -1074,27 +1079,25 @@
         };
         AjfFormBuilderService.prototype._initNodesStreams = function () {
             var _this = this;
-            this._nodes = this._nodesUpdates
-                .pipe(operators.scan(function (nodes, op) {
+            this._nodes = this._nodesUpdates.pipe(operators.scan(function (nodes, op) {
                 return op(nodes);
             }, []), operators.publishReplay(1), operators.refCount());
-            this._nodesWithoutChoiceOrigins =
-                this._nodes.pipe(operators.map(function (slides) { return slides.map(function (slide) {
-                    slide.nodes = slide.nodes.map(function (node) {
-                        if (forms.isFieldWithChoices(node)) {
-                            var fwc = utils.deepCopy(node);
-                            if (fwc && fwc.choices) {
-                                delete fwc.choices;
-                            }
-                            if (fwc && fwc.choicesOrigin) {
-                                delete fwc.choicesOrigin;
-                            }
-                            return fwc;
+            this._nodesWithoutChoiceOrigins = this._nodes.pipe(operators.map(function (slides) { return slides.map(function (slide) {
+                slide.nodes = slide.nodes.map(function (node) {
+                    if (forms.isFieldWithChoices(node)) {
+                        var fwc = utils.deepCopy(node);
+                        if (fwc && fwc.choices) {
+                            delete fwc.choices;
                         }
-                        return node;
-                    });
-                    return slide;
-                }); }));
+                        if (fwc && fwc.choicesOrigin) {
+                            delete fwc.choicesOrigin;
+                        }
+                        return fwc;
+                    }
+                    return node;
+                });
+                return slide;
+            }); }));
             this._flatNodes = this._nodes.pipe(operators.map(function (nodes) { return flattenNodes(nodes); }), operators.publishReplay(1), operators.refCount());
             this._flatFields = this._flatNodes.pipe(operators.map(function (nodes) { return nodes.filter(function (n) { return !forms.isContainerNode(n); }); }), operators.publishReplay(1), operators.refCount());
             this._nodeEntriesTree = this._nodes.pipe(operators.map(function (nodes) { return _this._buildFormBuilderNodesTree(nodes); }), operators.publishReplay(1), operators.refCount());
@@ -1114,19 +1117,22 @@
                 node.id = nodeEntry.node.id;
                 node.name = properties.name;
                 node.label = properties.label;
-                node.visibility = properties.visibility != null ?
-                    models.createCondition({ condition: properties.visibility }) :
-                    null;
+                node.visibility =
+                    properties.visibility != null
+                        ? models.createCondition({ condition: properties.visibility })
+                        : null;
                 var oldConditionalBranches = node.conditionalBranches.length;
-                node.conditionalBranches = properties.conditionalBranches != null ?
-                    properties.conditionalBranches.map(function (condition) { return models.createCondition({ condition: condition }); }) :
-                    [models.alwaysCondition()];
+                node.conditionalBranches =
+                    properties.conditionalBranches != null
+                        ? properties.conditionalBranches.map(function (condition) { return models.createCondition({ condition: condition }); })
+                        : [models.alwaysCondition()];
                 var newConditionalBranches = node.conditionalBranches.length;
                 if (forms.isRepeatingContainerNode(node)) {
                     var repNode = node;
-                    repNode.formulaReps = properties.formulaReps != null ?
-                        models.createFormula({ formula: properties.formulaReps }) :
-                        undefined;
+                    repNode.formulaReps =
+                        properties.formulaReps != null
+                            ? models.createFormula({ formula: properties.formulaReps })
+                            : undefined;
                     repNode.minReps = properties.minReps;
                     repNode.maxReps = properties.maxReps;
                 }
@@ -1134,9 +1140,8 @@
                     var field = node;
                     field.description = properties.description;
                     field.defaultValue = properties.defaultValue;
-                    field.formula = properties.formula != null ?
-                        models.createFormula({ formula: properties.formula }) :
-                        undefined;
+                    field.formula =
+                        properties.formula != null ? models.createFormula({ formula: properties.formula }) : undefined;
                     var forceValue = properties.value;
                     var notEmpty = properties.notEmpty;
                     var validationConditions = properties.validationConditions;
@@ -1156,25 +1161,24 @@
                     if (isNaN(maxDigits)) {
                         maxDigits = null;
                     }
-                    if (forceValue != null || notEmpty != null ||
+                    if (forceValue != null ||
+                        notEmpty != null ||
                         (validationConditions != null && validationConditions.length > 0) ||
-                        minValue != null || maxValue != null || minDigits != null ||
+                        minValue != null ||
+                        maxValue != null ||
+                        minDigits != null ||
                         maxDigits != null) {
                         var validation = field.validation || forms.createValidationGroup({});
                         validation.forceValue = forceValue;
                         validation.notEmpty = notEmpty ? forms.notEmptyValidation() : undefined;
                         validation.minValue = minValue != null ? forms.minValidation(minValue) : undefined;
                         validation.maxValue = maxValue != null ? forms.maxValidation(maxValue) : undefined;
-                        validation.minDigits =
-                            minDigits != null ? forms.minDigitsValidation(minDigits) : undefined;
-                        validation.maxDigits =
-                            maxDigits != null ? forms.maxDigitsValidation(maxDigits) : undefined;
-                        validation.conditions =
-                            (validationConditions ||
-                                []).map(function (c) { return forms.createValidation({
-                                condition: c.condition,
-                                errorMessage: c.errorMessage
-                            }); });
+                        validation.minDigits = minDigits != null ? forms.minDigitsValidation(minDigits) : undefined;
+                        validation.maxDigits = maxDigits != null ? forms.maxDigitsValidation(maxDigits) : undefined;
+                        validation.conditions = (validationConditions || []).map(function (c) { return forms.createValidation({
+                            condition: c.condition,
+                            errorMessage: c.errorMessage,
+                        }); });
                         field.validation = validation;
                     }
                     else {
@@ -1186,20 +1190,19 @@
                         (warningConditions != null && warningConditions.length > 0)) {
                         var warning = field.warning || forms.createWarningGroup({});
                         warning.notEmpty = notEmptyWarn ? forms.notEmptyWarning() : undefined;
-                        warning.conditions =
-                            (warningConditions ||
-                                []).map(function (w) { return forms.createWarning({
-                                condition: w.condition,
-                                warningMessage: w.warningMessage
-                            }); });
+                        warning.conditions = (warningConditions || []).map(function (w) { return forms.createWarning({
+                            condition: w.condition,
+                            warningMessage: w.warningMessage,
+                        }); });
                         field.warning = warning;
                     }
                     else {
                         field.warning = undefined;
                     }
-                    field.nextSlideCondition = properties.nextSlideCondition != null ?
-                        models.createCondition({ condition: properties.nextSlideCondition }) :
-                        undefined;
+                    field.nextSlideCondition =
+                        properties.nextSlideCondition != null
+                            ? models.createCondition({ condition: properties.nextSlideCondition })
+                            : undefined;
                     field.size = properties.size;
                     field.defaultValue = properties.defaultValue;
                     if (forms.isFieldWithChoices(field)) {
@@ -1207,8 +1210,13 @@
                         fwc.choicesOriginRef = properties.choicesOriginRef;
                         fwc.forceExpanded = properties.forceExpanded;
                         fwc.forceNarrow = properties.forceNarrow;
-                        fwc.triggerConditions = (properties.triggerConditions ||
-                            []).map(function (t) { return models.createCondition({ condition: t }); });
+                        fwc.triggerConditions = (properties.triggerConditions || []).map(function (t) { return models.createCondition({ condition: t }); });
+                    }
+                    if (forms.isRangeField(field)) {
+                        var rf = field;
+                        rf.start = properties.start;
+                        rf.end = properties.end;
+                        rf.step = properties.step;
                     }
                 }
                 _this._editedNodeEntry.next(null);
@@ -1276,32 +1284,31 @@
         AjfFormBuilderService.prototype._initMoveNode = function () {
             var _this = this;
             this._moveNodeSub.unsubscribe();
-            this._moveNodeSub =
-                this._moveNodeEntryEvent
-                    .pipe(operators.map(function (moveEvent) {
-                    _this._beforeNodesUpdate.emit();
-                    return function (nodes) {
-                        var nodeEntry = moveEvent.nodeEntry;
-                        var node = nodeEntry.node;
-                        var cn = getNodeContainer({ nodes: nodes }, node);
-                        var newNodes = nodes;
-                        if (cn != null) {
-                            var replaceNodes = cn.nodes === nodes;
-                            newNodes = cn.nodes;
-                            dragDrop.moveItemInArray(newNodes, moveEvent.fromIndex, moveEvent.toIndex);
-                            newNodes = _this._updateNodesList(cn.id, newNodes);
-                            cn.nodes = newNodes;
-                            if (replaceNodes) {
-                                nodes = newNodes;
-                            }
-                            else {
-                                nodes = nodes.slice(0);
-                            }
+            this._moveNodeSub = this._moveNodeEntryEvent
+                .pipe(operators.map(function (moveEvent) {
+                _this._beforeNodesUpdate.emit();
+                return function (nodes) {
+                    var nodeEntry = moveEvent.nodeEntry;
+                    var node = nodeEntry.node;
+                    var cn = getNodeContainer({ nodes: nodes }, node);
+                    var newNodes = nodes;
+                    if (cn != null) {
+                        var replaceNodes = cn.nodes === nodes;
+                        newNodes = cn.nodes;
+                        dragDrop.moveItemInArray(newNodes, moveEvent.fromIndex, moveEvent.toIndex);
+                        newNodes = _this._updateNodesList(cn.id, newNodes);
+                        cn.nodes = newNodes;
+                        if (replaceNodes) {
+                            nodes = newNodes;
                         }
-                        return nodes;
-                    };
-                }))
-                    .subscribe(this._nodesUpdates);
+                        else {
+                            nodes = nodes.slice(0);
+                        }
+                    }
+                    return nodes;
+                };
+            }))
+                .subscribe(this._nodesUpdates);
         };
         /**
          * Updates the "id" and "parent" fields of a modified or rearranged list of nodes.
@@ -1315,8 +1322,8 @@
             var contId = containerId != undefined ? containerId : 0;
             for (var idx = 0; idx < nodesList.length; idx++) {
                 var currentNode = nodesList[idx];
-                currentNode.id = (contId * 1000) + idx + 1;
-                currentNode.parent = idx == 0 ? contId : (contId * 1000) + idx;
+                currentNode.id = contId * 1000 + idx + 1;
+                currentNode.parent = idx == 0 ? contId : contId * 1000 + idx;
                 if (currentNode.nodeType == forms.AjfNodeType.AjfSlide ||
                     currentNode.nodeType == forms.AjfNodeType.AjfRepeatingSlide) {
                     var currentSlide = currentNode;
@@ -1358,8 +1365,7 @@
     var AjfFbChoicesOriginEditorDialog = /** @class */ (function () {
         function AjfFbChoicesOriginEditorDialog(_service) {
             this._service = _service;
-            this._choicesOrigin =
-                this._service.editedChoicesOrigin.pipe(operators.filter(function (c) { return c != null; }), operators.map(function (c) { return c; }));
+            this._choicesOrigin = this._service.editedChoicesOrigin.pipe(operators.filter(function (c) { return c != null; }), operators.map(function (c) { return c; }));
         }
         Object.defineProperty(AjfFbChoicesOriginEditorDialog.prototype, "choicesOrigin", {
             get: function () {
@@ -1369,7 +1375,11 @@
             configurable: true
         });
         AjfFbChoicesOriginEditorDialog.prototype.saveChoicesOrigin = function () {
-            this._service.saveChoicesOrigin({ label: this.editor.label, name: this.editor.name, choices: this.editor.choicesArr });
+            this._service.saveChoicesOrigin({
+                label: this.editor.label,
+                name: this.editor.name,
+                choices: this.editor.choicesArr,
+            });
         };
         AjfFbChoicesOriginEditorDialog.prototype.cancelChoicesOriginEdit = function () {
             this._service.cancelChoicesOriginEdit();
@@ -1445,12 +1455,15 @@
             }
         };
         AjfFbConditionEditor.prototype.onEditorInit = function () {
-            monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({ noSemanticValidation: false, noSyntaxValidation: false });
+            monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+                noSemanticValidation: false,
+                noSyntaxValidation: false,
+            });
             monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
                 target: monaco.languages.typescript.ScriptTarget.ES2015,
                 allowNonTsExtensions: true,
                 allowJs: true,
-                module: monaco.languages.typescript.ModuleKind.None
+                module: monaco.languages.typescript.ModuleKind.None,
             });
             try {
                 monaco.languages.typescript.javascriptDefaults.addExtraLib('', 'condition-editor-variables.d.ts');
@@ -1482,16 +1495,14 @@
                     })
                         .join('\n');
             }
-            catch (e) {
-            }
+            catch (e) { }
         };
         AjfFbConditionEditor.prototype._updateFunctions = function () {
             try {
                 monaco.languages.typescript.javascriptDefaults._extraLibs['condition-editor-functions.d.ts'] =
                     models.AjfExpressionUtils.UTIL_FUNCTIONS;
             }
-            catch (e) {
-            }
+            catch (e) { }
         };
         AjfFbConditionEditor.prototype._fieldVarType = function (fieldType) {
             switch (fieldType) {
@@ -1634,8 +1645,9 @@
                 fbService.insertNode(itemData, null, 0, content, event.currentIndex);
                 return;
             }
-            var emptySlot = content ? { parent: nodeEntry.node, parentNode: 0 } :
-                nodeEntry;
+            var emptySlot = content
+                ? { parent: nodeEntry.node, parentNode: 0 }
+                : nodeEntry;
             fbService.insertNode(itemData, emptySlot.parent, emptySlot.parentNode, content, event.currentIndex);
             return;
         }
@@ -1673,7 +1685,8 @@
             this._stringIdentifierSub = _service.stringIdentifier.subscribe(function (identifier) {
                 _this.dataSource.data = __spreadArray([], __read(identifier));
             });
-            this.fields$ = _service.flatFields.pipe(operators.map(function (fields) { return fields.sort(function (f1, f2) { return f1.name.localeCompare(f2.name); })
+            this.fields$ = _service.flatFields.pipe(operators.map(function (fields) { return fields
+                .sort(function (f1, f2) { return f1.name.localeCompare(f2.name); })
                 .map(function (f) { return f.name; })
                 .filter(function (f) { return f.length > 0; }); }), operators.shareReplay(1));
         }
@@ -1764,28 +1777,28 @@
             this._nodeTypes = _service.availableNodeTypes;
             this._nodeEntriesTree = _service.nodeEntriesTree;
             this._choicesOrigins = _service.choicesOrigins;
-            this._editConditionSub =
-                this._service.editedCondition.subscribe(function (condition) {
-                    if (_this._editConditionDialog != null) {
-                        _this._editConditionDialog.close();
-                        _this._editConditionDialog = null;
-                    }
-                    if (condition != null) {
-                        _this._editConditionDialog =
-                            _this._dialog.open(AjfFbConditionEditorDialog, { disableClose: true });
-                    }
-                });
-            this._editChoicesOriginSub =
-                this._service.editedChoicesOrigin.subscribe(function (choicesOrigin) {
-                    if (_this._editChoicesOriginDialog != null) {
-                        _this._editChoicesOriginDialog.close();
-                        _this._editChoicesOriginDialog = null;
-                    }
-                    if (choicesOrigin != null) {
-                        _this._editChoicesOriginDialog =
-                            _this._dialog.open(AjfFbChoicesOriginEditorDialog, { disableClose: true });
-                    }
-                });
+            this._editConditionSub = this._service.editedCondition.subscribe(function (condition) {
+                if (_this._editConditionDialog != null) {
+                    _this._editConditionDialog.close();
+                    _this._editConditionDialog = null;
+                }
+                if (condition != null) {
+                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog, {
+                        disableClose: true,
+                    });
+                }
+            });
+            this._editChoicesOriginSub = this._service.editedChoicesOrigin.subscribe(function (choicesOrigin) {
+                if (_this._editChoicesOriginDialog != null) {
+                    _this._editChoicesOriginDialog.close();
+                    _this._editChoicesOriginDialog = null;
+                }
+                if (choicesOrigin != null) {
+                    _this._editChoicesOriginDialog = _this._dialog.open(AjfFbChoicesOriginEditorDialog, {
+                        disableClose: true,
+                    });
+                }
+            });
             this._beforeNodesUpdateSub = this._service.beforeNodesUpdate.subscribe(function () {
                 if (_this.designerCont == null) {
                     return;
@@ -1890,7 +1903,11 @@
                 this._stringIdentifierDialog.close();
                 this._stringIdentifierDialog = null;
             }
-            this._stringIdentifierDialog = this._dialog.open(AjfFbStringIdentifierDialogComponent, { disableClose: true, width: '60%', height: '60%' });
+            this._stringIdentifierDialog = this._dialog.open(AjfFbStringIdentifierDialogComponent, {
+                disableClose: true,
+                width: '60%',
+                height: '60%',
+            });
         };
         AjfFormBuilder.prototype.expandAll = function () {
             this._globalExpanded = true;
@@ -2191,7 +2208,9 @@
             };
         };
         AjfFbNodeEntry.prototype._updateBranchHeights = function () {
-            if (this.nodeEntry == null || !this.isNodeEntry || this.branchLines == null ||
+            if (this.nodeEntry == null ||
+                !this.isNodeEntry ||
+                this.branchLines == null ||
                 this.childEntries == null) {
                 return;
             }
@@ -2376,6 +2395,13 @@
         }
         return null;
     }
+    function checkRangeValidity(c) {
+        var _a = c.value, start = _a.start, end = _a.end;
+        if (start != null && end != null && start > end) {
+            return { range: 'End must be greater than start' };
+        }
+        return null;
+    }
     var AjfFbNodeProperties = /** @class */ (function () {
         function AjfFbNodeProperties(_cdr, _service, _dialog, _fb) {
             var _this = this;
@@ -2384,9 +2410,11 @@
             this._dialog = _dialog;
             this._fb = _fb;
             this._fieldSizes = [
-                { label: 'Normal', value: 'normal' }, { label: 'Small', value: 'small' },
-                { label: 'Smaller', value: 'smaller' }, { label: 'Tiny', value: 'tiny' },
-                { label: 'Mini', value: 'mini' }
+                { label: 'Normal', value: 'normal' },
+                { label: 'Small', value: 'small' },
+                { label: 'Smaller', value: 'smaller' },
+                { label: 'Tiny', value: 'tiny' },
+                { label: 'Mini', value: 'mini' },
             ];
             this._choicesOrigins = [];
             this._conditionalBranches = [];
@@ -2445,8 +2473,7 @@
             this._saveEvt = new core.EventEmitter();
             this._saveSub = rxjs.Subscription.EMPTY;
             this._nodeEntry = _service.editedNodeEntry;
-            this._choicesOriginsSub =
-                _service.choicesOrigins.subscribe(function (c) { return _this._choicesOrigins = c || []; });
+            this._choicesOriginsSub = _service.choicesOrigins.subscribe(function (c) { return (_this._choicesOrigins = c || []); });
             this._enabled = this._nodeEntry.pipe(operators.map(function (n) { return n != null; }));
             this._initForm();
             this._initVisibilityEdit();
@@ -2657,6 +2684,9 @@
         AjfFbNodeProperties.prototype.isFieldWithChoices = function (node) {
             return forms.isField(node) && forms.isFieldWithChoices(node);
         };
+        AjfFbNodeProperties.prototype.isRangeField = function (node) {
+            return forms.isField(node) && forms.isRangeField(node);
+        };
         AjfFbNodeProperties.prototype.save = function () {
             this._saveEvt.emit();
         };
@@ -2704,6 +2734,7 @@
                 var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
                 var fg = formGroup;
                 var val = Object.assign(Object.assign({}, fg.value), { conditionalBranches: _this._conditionalBranches });
+                console.log(val);
                 _this._service.saveNodeEntry(val);
             });
         };
@@ -2727,7 +2758,7 @@
                     label: n.node.label,
                     visibilityOpt: [visibilityOpt, forms$1.Validators.required],
                     visibility: [visibility, forms$1.Validators.required],
-                    conditionalBranchesNum: n.node.conditionalBranches.length
+                    conditionalBranchesNum: n.node.conditionalBranches.length,
                 };
                 var validators = [];
                 if (forms.isRepeatingContainerNode(n.node)) {
@@ -2792,12 +2823,10 @@
                             maxValue = (numField.validation.maxValue.condition || '').replace('$value <= ', '');
                         }
                         if (numField.validation.minDigits != null) {
-                            minDigits = (numField.validation.minDigits.condition ||
-                                '').replace('$value.toString().length >= ', '');
+                            minDigits = (numField.validation.minDigits.condition || '').replace('$value.toString().length >= ', '');
                         }
                         if (numField.validation.maxDigits != null) {
-                            maxDigits = (numField.validation.maxDigits.condition ||
-                                '').replace('$value.toString().length <= ', '');
+                            maxDigits = (numField.validation.maxDigits.condition || '').replace('$value.toString().length <= ', '');
                         }
                     }
                     controls.minValue = minValue;
@@ -2807,13 +2836,20 @@
                     validators.push(checkValueLimitsValidity);
                     validators.push(checkDigitsValidity);
                 }
+                if (_this.isRangeField(n.node)) {
+                    var rangeField = n.node;
+                    var start = rangeField.start, end = rangeField.end, step = rangeField.step;
+                    controls.start = start;
+                    controls.end = end;
+                    controls.step = step;
+                    validators.push(checkRangeValidity);
+                }
                 if (_this.isFieldWithChoices(n.node)) {
                     var fieldWithChoices = n.node;
                     var triggerConditions = (fieldWithChoices.triggerConditions || []).map(function (c) { return c.condition; });
                     controls.choicesOriginRef = fieldWithChoices.choicesOriginRef;
-                    controls.choicesFilter = fieldWithChoices.choicesFilter != null ?
-                        fieldWithChoices.choicesFilter.formula :
-                        null;
+                    controls.choicesFilter =
+                        fieldWithChoices.choicesFilter != null ? fieldWithChoices.choicesFilter.formula : null;
                     controls.forceExpanded = fieldWithChoices.forceExpanded;
                     controls.forceNarrow = fieldWithChoices.forceNarrow;
                     controls.triggerConditions = triggerConditions;
@@ -2903,28 +2939,28 @@
             var _this = this;
             this._editConditionDialogSub = rxjs.Subscription.EMPTY;
             this._cdr.markForCheck();
-            this._editTriggerConditionSub =
-                this._editTriggerConditionEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), vcIdx = _b[0], fg = _b[1];
-                    _this._destroyConditionDialog();
-                    if (vcIdx < 0 || vcIdx >= _this._triggerConditions.length || fg == null) {
-                        return;
+            this._editTriggerConditionSub = this._editTriggerConditionEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), vcIdx = _b[0], fg = _b[1];
+                _this._destroyConditionDialog();
+                if (vcIdx < 0 || vcIdx >= _this._triggerConditions.length || fg == null) {
+                    return;
+                }
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                var cmp = _this._editConditionDialog.componentInstance;
+                cmp.condition = _this._triggerConditions[vcIdx];
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        _this._triggerConditions[vcIdx] = cond;
                     }
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    var cmp = _this._editConditionDialog.componentInstance;
-                    cmp.condition = _this._triggerConditions[vcIdx];
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                _this._triggerConditions[vcIdx] = cond;
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initRemoveWarningCondition = function () {
             this._removeWarningConditionSub = this._removeWarningConditionEvt
@@ -2961,31 +2997,30 @@
         };
         AjfFbNodeProperties.prototype._initWarningConditionEdit = function () {
             var _this = this;
-            this._editWarningConditionSub =
-                this._editWarningConditionEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), vcIdx = _b[0], fg = _b[1];
-                    _this._destroyWarningConditionDialog();
-                    if (vcIdx < 0 || vcIdx >= _this._warningConditions.length || fg == null) {
-                        return;
+            this._editWarningConditionSub = this._editWarningConditionEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), vcIdx = _b[0], fg = _b[1];
+                _this._destroyWarningConditionDialog();
+                if (vcIdx < 0 || vcIdx >= _this._warningConditions.length || fg == null) {
+                    return;
+                }
+                _this._editWarningConditionDialog = _this._dialog.open(AjfFbWarningConditionEditorDialog);
+                var cmp = _this._editWarningConditionDialog.componentInstance;
+                var w = _this._warningConditions[vcIdx];
+                cmp.condition = w.condition;
+                cmp.warningMessage = w.warningMessage;
+                _this._editWarningConditionDialogSub = _this._editWarningConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        _this._warningConditions[vcIdx] = cond;
                     }
-                    _this._editWarningConditionDialog =
-                        _this._dialog.open(AjfFbWarningConditionEditorDialog);
-                    var cmp = _this._editWarningConditionDialog.componentInstance;
-                    var w = _this._warningConditions[vcIdx];
-                    cmp.condition = w.condition;
-                    cmp.warningMessage = w.warningMessage;
-                    _this._editWarningConditionDialogSub =
-                        _this._editWarningConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                _this._warningConditions[vcIdx] = cond;
-                            }
-                            _this._editWarningConditionDialogSub.unsubscribe();
-                            _this._editWarningConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editWarningConditionDialogSub.unsubscribe();
+                    _this._editWarningConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initRemoveValidationCondition = function () {
             this._removeValidationConditionSub = this._removeValidationConditionEvt
@@ -3022,221 +3057,218 @@
         };
         AjfFbNodeProperties.prototype._initValidationConditionEdit = function () {
             var _this = this;
-            this._editValidationConditionSub =
-                this._editValidationConditionEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), vcIdx = _b[0], fg = _b[1];
-                    _this._destroyValidationConditionDialog();
-                    if (vcIdx < 0 || vcIdx >= _this._validationConditions.length || fg == null) {
-                        return;
+            this._editValidationConditionSub = this._editValidationConditionEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), vcIdx = _b[0], fg = _b[1];
+                _this._destroyValidationConditionDialog();
+                if (vcIdx < 0 || vcIdx >= _this._validationConditions.length || fg == null) {
+                    return;
+                }
+                _this._editValidationConditionDialog = _this._dialog.open(AjfFbValidationConditionEditorDialog);
+                var cmp = _this._editValidationConditionDialog.componentInstance;
+                var v = _this._validationConditions[vcIdx];
+                cmp.condition = v.condition;
+                cmp.errorMessage = v.errorMessage;
+                _this._editValidationConditionDialogSub = _this._editValidationConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        _this._validationConditions[vcIdx] = cond;
                     }
-                    _this._editValidationConditionDialog =
-                        _this._dialog.open(AjfFbValidationConditionEditorDialog);
-                    var cmp = _this._editValidationConditionDialog.componentInstance;
-                    var v = _this._validationConditions[vcIdx];
-                    cmp.condition = v.condition;
-                    cmp.errorMessage = v.errorMessage;
-                    _this._editValidationConditionDialogSub =
-                        _this._editValidationConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                _this._validationConditions[vcIdx] = cond;
-                            }
-                            _this._editValidationConditionDialogSub.unsubscribe();
-                            _this._editValidationConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editValidationConditionDialogSub.unsubscribe();
+                    _this._editValidationConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initForceValueEdit = function () {
             var _this = this;
-            this._editForceValueSub =
-                this._editForceValueEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
-                    _this._destroyConditionDialog();
-                    if (formGroup == null) {
-                        return;
+            this._editForceValueSub = this._editForceValueEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
+                _this._destroyConditionDialog();
+                if (formGroup == null) {
+                    return;
+                }
+                var fg = formGroup;
+                var ctrl = fg.controls['forceValue'];
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                _this._editConditionDialog.componentInstance.condition = ctrl.value;
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        ctrl.setValue(cond);
                     }
-                    var fg = formGroup;
-                    var ctrl = fg.controls['forceValue'];
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    _this._editConditionDialog.componentInstance.condition = ctrl.value;
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                ctrl.setValue(cond);
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initNextSlideConditionEdit = function () {
             var _this = this;
-            this._editNextSlideConditionSub =
-                this._editNextSlideConditionEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
-                    _this._destroyConditionDialog();
-                    if (formGroup == null) {
-                        return;
+            this._editNextSlideConditionSub = this._editNextSlideConditionEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
+                _this._destroyConditionDialog();
+                if (formGroup == null) {
+                    return;
+                }
+                var fg = formGroup;
+                var ctrl = fg.controls['nextSlideCondition'];
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                _this._editConditionDialog.componentInstance.condition = ctrl.value;
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        ctrl.setValue(cond);
                     }
-                    var fg = formGroup;
-                    var ctrl = fg.controls['nextSlideCondition'];
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    _this._editConditionDialog.componentInstance.condition = ctrl.value;
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                ctrl.setValue(cond);
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initFormulaEdit = function () {
             var _this = this;
             this._editConditionDialogSub = rxjs.Subscription.EMPTY;
             this._cdr.markForCheck();
-            this._editFormulaSub =
-                this._editFormulaEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
-                    _this._destroyConditionDialog();
-                    if (formGroup == null) {
-                        return;
+            this._editFormulaSub = this._editFormulaEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
+                _this._destroyConditionDialog();
+                if (formGroup == null) {
+                    return;
+                }
+                var fg = formGroup;
+                var ctrl = fg.controls['formula'];
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                _this._editConditionDialog.componentInstance.condition = ctrl.value;
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        ctrl.setValue(cond);
                     }
-                    var fg = formGroup;
-                    var ctrl = fg.controls['formula'];
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    _this._editConditionDialog.componentInstance.condition = ctrl.value;
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                ctrl.setValue(cond);
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initFormulaRepsEdit = function () {
             var _this = this;
-            this._editFormulaRepsSub =
-                this._editFormulaRepsEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
-                    _this._destroyConditionDialog();
-                    if (formGroup == null) {
-                        return;
+            this._editFormulaRepsSub = this._editFormulaRepsEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
+                _this._destroyConditionDialog();
+                if (formGroup == null) {
+                    return;
+                }
+                var fg = formGroup;
+                var ctrl = fg.controls['formulaReps'];
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                _this._editConditionDialog.componentInstance.condition = ctrl.value;
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        ctrl.setValue(cond);
                     }
-                    var fg = formGroup;
-                    var ctrl = fg.controls['formulaReps'];
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    _this._editConditionDialog.componentInstance.condition = ctrl.value;
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                ctrl.setValue(cond);
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initChoicesFilterEdit = function () {
             var _this = this;
-            this._editChoicesFilterSub =
-                this._editChoicesFilterEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
-                    _this._destroyConditionDialog();
-                    if (formGroup == null) {
-                        return;
+            this._editChoicesFilterSub = this._editChoicesFilterEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
+                _this._destroyConditionDialog();
+                if (formGroup == null) {
+                    return;
+                }
+                var fg = formGroup;
+                var ctrl = fg.controls['choicesFilter'];
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                _this._editConditionDialog.componentInstance.condition = ctrl.value;
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        ctrl.setValue(cond);
                     }
-                    var fg = formGroup;
-                    var ctrl = fg.controls['choicesFilter'];
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    _this._editConditionDialog.componentInstance.condition = ctrl.value;
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                ctrl.setValue(cond);
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initConditionalBranchEdit = function () {
             var _this = this;
-            this._editConditionalBranchSub =
-                this._editConditionalBranchEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), cbIdx = _b[0], fg = _b[1];
-                    _this._destroyConditionDialog();
-                    if (cbIdx < 0 || cbIdx >= _this._conditionalBranches.length || fg == null) {
-                        return;
+            this._editConditionalBranchSub = this._editConditionalBranchEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), cbIdx = _b[0], fg = _b[1];
+                _this._destroyConditionDialog();
+                if (cbIdx < 0 || cbIdx >= _this._conditionalBranches.length || fg == null) {
+                    return;
+                }
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                _this._editConditionDialog.componentInstance.condition = _this._conditionalBranches[cbIdx];
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        _this._conditionalBranches[cbIdx] = cond;
                     }
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    _this._editConditionDialog.componentInstance.condition =
-                        _this._conditionalBranches[cbIdx];
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                _this._conditionalBranches[cbIdx] = cond;
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._initVisibilityEdit = function () {
             var _this = this;
-            this._editVisibilitySub =
-                this._editVisibilityEvt
-                    .pipe(operators.withLatestFrom(this._propertiesForm))
-                    .subscribe(function (_a) {
-                    var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
-                    _this._destroyConditionDialog();
-                    if (formGroup == null) {
-                        return;
+            this._editVisibilitySub = this._editVisibilityEvt
+                .pipe(operators.withLatestFrom(this._propertiesForm))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), _ = _b[0], formGroup = _b[1];
+                _this._destroyConditionDialog();
+                if (formGroup == null) {
+                    return;
+                }
+                var fg = formGroup;
+                var ctrl = fg.controls['visibility'];
+                var condition = ctrl.value;
+                _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
+                _this._editConditionDialog.componentInstance.condition = condition;
+                _this._editConditionDialogSub = _this._editConditionDialog
+                    .afterClosed()
+                    .subscribe(function (cond) {
+                    if (cond !== void 0) {
+                        ctrl.setValue(cond);
                     }
-                    var fg = formGroup;
-                    var ctrl = fg.controls['visibility'];
-                    var condition = ctrl.value;
-                    _this._editConditionDialog = _this._dialog.open(AjfFbConditionEditorDialog);
-                    _this._editConditionDialog.componentInstance.condition = condition;
-                    _this._editConditionDialogSub =
-                        _this._editConditionDialog.afterClosed().subscribe(function (cond) {
-                            if (cond !== void 0) {
-                                ctrl.setValue(cond);
-                            }
-                            _this._editConditionDialogSub.unsubscribe();
-                            _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
-                            _this._cdr.markForCheck();
-                        });
+                    _this._editConditionDialogSub.unsubscribe();
+                    _this._editConditionDialogSub = rxjs.Subscription.EMPTY;
+                    _this._cdr.markForCheck();
                 });
+            });
         };
         AjfFbNodeProperties.prototype._handleTriggerCondtionsChange = function (fg) {
             var _this = this;
             this._triggerConditionsSub = fg.valueChanges
-                .pipe(operators.distinctUntilChanged(function (v1, v2) { return JSON.stringify(v1.triggerConditions) ===
-                JSON.stringify(v2.triggerConditions); }))
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return JSON.stringify(v1.triggerConditions) === JSON.stringify(v2.triggerConditions); }))
                 .subscribe(function (v) {
                 _this._triggerConditions = v.triggerConditions;
                 _this._cdr.markForCheck();
@@ -3245,8 +3277,7 @@
         AjfFbNodeProperties.prototype._handleWarningCondtionsChange = function (fg) {
             var _this = this;
             this._warningConditionsSub = fg.valueChanges
-                .pipe(operators.distinctUntilChanged(function (v1, v2) { return JSON.stringify(v1.warningConditions) ===
-                JSON.stringify(v2.warningConditions); }))
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return JSON.stringify(v1.warningConditions) === JSON.stringify(v2.warningConditions); }))
                 .subscribe(function (v) {
                 _this._warningConditions = v.warningConditions;
                 _this._cdr.markForCheck();
@@ -3254,111 +3285,104 @@
         };
         AjfFbNodeProperties.prototype._handleValidationCondtionsChange = function (fg) {
             var _this = this;
-            this._validationConditionsSub =
-                fg.valueChanges
-                    .pipe(operators.distinctUntilChanged(function (v1, v2) { return JSON.stringify(v1.validationConditions) ===
-                    JSON.stringify(v2.validationConditions); }))
-                    .subscribe(function (v) {
-                    _this._validationConditions = v.validationConditions;
-                    _this._cdr.markForCheck();
-                });
+            this._validationConditionsSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return JSON.stringify(v1.validationConditions) === JSON.stringify(v2.validationConditions); }))
+                .subscribe(function (v) {
+                _this._validationConditions = v.validationConditions;
+                _this._cdr.markForCheck();
+            });
         };
         AjfFbNodeProperties.prototype._handleForceValueChange = function (fg) {
             var _this = this;
-            this._forceValueSub =
-                fg.valueChanges.pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.forceValue === v2.forceValue; }))
-                    .subscribe(function (v) {
-                    _this._curForceValue = v.forceValue;
-                    _this._cdr.markForCheck();
-                });
+            this._forceValueSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.forceValue === v2.forceValue; }))
+                .subscribe(function (v) {
+                _this._curForceValue = v.forceValue;
+                _this._cdr.markForCheck();
+            });
         };
         AjfFbNodeProperties.prototype._handleNextSlideConditionChange = function (fg) {
             var _this = this;
-            this._formulaSub =
-                fg.valueChanges
-                    .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.nextSlideCondition === v2.nextSlideCondition; }))
-                    .subscribe(function (v) {
-                    _this._nextSlideCondition = v.nextSlideCondition;
-                    _this._cdr.markForCheck();
-                });
-            this._formulaSub =
-                fg.valueChanges
-                    .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.nextSlideCondition === v2.nextSlideCondition; }))
-                    .subscribe(function (v) {
-                    _this._nextSlideCondition = v.nextSlideCondition;
-                    _this._cdr.markForCheck();
-                });
+            this._formulaSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.nextSlideCondition === v2.nextSlideCondition; }))
+                .subscribe(function (v) {
+                _this._nextSlideCondition = v.nextSlideCondition;
+                _this._cdr.markForCheck();
+            });
+            this._formulaSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.nextSlideCondition === v2.nextSlideCondition; }))
+                .subscribe(function (v) {
+                _this._nextSlideCondition = v.nextSlideCondition;
+                _this._cdr.markForCheck();
+            });
         };
         AjfFbNodeProperties.prototype._handleFormulaChange = function (fg) {
             var _this = this;
-            this._formulaSub =
-                fg.valueChanges.pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.formula === v2.formula; }))
-                    .subscribe(function (v) {
-                    _this._curFormula = v.formula;
-                    _this._cdr.markForCheck();
-                });
+            this._formulaSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.formula === v2.formula; }))
+                .subscribe(function (v) {
+                _this._curFormula = v.formula;
+                _this._cdr.markForCheck();
+            });
         };
         AjfFbNodeProperties.prototype._handleFormulaRepsChange = function (fg) {
             var _this = this;
-            this._formulaRepsSub =
-                fg.valueChanges.pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.formulaReps === v2.formulaReps; }))
-                    .subscribe(function (v) {
-                    _this._curFormulaReps = v.formulaReps;
-                    _this._cdr.markForCheck();
-                });
+            this._formulaRepsSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.formulaReps === v2.formulaReps; }))
+                .subscribe(function (v) {
+                _this._curFormulaReps = v.formulaReps;
+                _this._cdr.markForCheck();
+            });
         };
         AjfFbNodeProperties.prototype._handleChoicesFilterChange = function (fg) {
             var _this = this;
-            this._choicesFilterSub =
-                fg.valueChanges
-                    .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.choicesFilter === v2.choicesFilter; }))
-                    .subscribe(function (v) {
-                    _this._curChoicesFilter = v.choicesFilter;
-                    _this._cdr.markForCheck();
-                });
+            this._choicesFilterSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.choicesFilter === v2.choicesFilter; }))
+                .subscribe(function (v) {
+                _this._curChoicesFilter = v.choicesFilter;
+                _this._cdr.markForCheck();
+            });
         };
         AjfFbNodeProperties.prototype._handleConditionalBranchesChange = function (fg) {
             var _this = this;
-            this._conditionalBranchesSub =
-                fg.valueChanges
-                    .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.conditionalBranchesNum === v2.conditionalBranchesNum; }))
-                    .subscribe(function (v) {
-                    var cbNum = v.conditionalBranchesNum;
-                    var curCbNum = _this._conditionalBranches.length;
-                    if (curCbNum < cbNum) {
-                        var newCbs = [];
-                        for (var i = curCbNum; i < cbNum; i++) {
-                            newCbs.push(models.alwaysCondition().condition);
-                        }
-                        _this._conditionalBranches = _this._conditionalBranches.concat(newCbs);
-                    }
-                    else if (curCbNum > cbNum) {
-                        _this._conditionalBranches.splice(0, curCbNum - cbNum);
+            this._conditionalBranchesSub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.conditionalBranchesNum === v2.conditionalBranchesNum; }))
+                .subscribe(function (v) {
+                var cbNum = v.conditionalBranchesNum;
+                var curCbNum = _this._conditionalBranches.length;
+                if (curCbNum < cbNum) {
+                    var newCbs = [];
+                    for (var i = curCbNum; i < cbNum; i++) {
+                        newCbs.push(models.alwaysCondition().condition);
                     }
-                    _this._cdr.markForCheck();
-                });
+                    _this._conditionalBranches = _this._conditionalBranches.concat(newCbs);
+                }
+                else if (curCbNum > cbNum) {
+                    _this._conditionalBranches.splice(0, curCbNum - cbNum);
+                }
+                _this._cdr.markForCheck();
+            });
         };
         AjfFbNodeProperties.prototype._handleVisibilityChange = function (fg) {
             var _this = this;
-            this._visibilitySub =
-                fg.valueChanges
-                    .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.visibilityOpt === v2.visibilityOpt; }))
-                    .subscribe(function (v) {
-                    var visibilityOpt = v.visibilityOpt;
-                    var newCondition;
-                    switch (visibilityOpt) {
-                        case 'always':
-                            newCondition = models.alwaysCondition().condition;
-                            break;
-                        case 'never':
-                            newCondition = models.neverCondition().condition;
-                            break;
-                        default:
-                            newCondition = null;
-                    }
-                    _this._curVisibility = newCondition;
-                    fg.controls['visibility'].setValue(newCondition);
-                });
+            this._visibilitySub = fg.valueChanges
+                .pipe(operators.distinctUntilChanged(function (v1, v2) { return v1.visibilityOpt === v2.visibilityOpt; }))
+                .subscribe(function (v) {
+                var visibilityOpt = v.visibilityOpt;
+                var newCondition;
+                switch (visibilityOpt) {
+                    case 'always':
+                        newCondition = models.alwaysCondition().condition;
+                        break;
+                    case 'never':
+                        newCondition = models.neverCondition().condition;
+                        break;
+                    default:
+                        newCondition = null;
+                }
+                _this._curVisibility = newCondition;
+                fg.controls['visibility'].setValue(newCondition);
+            });
             this._visibilitySub = fg.valueChanges
                 .pipe(operators.filter(function (v) { return v.visibilityOpt === 'condition'; }), operators.distinctUntilChanged(function (v1, v2) { return v1.visibility === v2.visibility; }))
                 .subscribe(function (v) {
@@ -3380,7 +3404,7 @@
     AjfFbNodeProperties.decorators = [
         { type: core.Component, args: [{
                     selector: 'ajf-fb-node-properties',
-                    template: "<div\n  [style.display]=\"(enabled|async) ? 'none' : 'block'\"\n  class=\"ajf-disabled-overlay\"\n></div>\n<div class=\"ajf-header\">\n  <h3>{{'Properties'|transloco}}</h3>\n  <mat-icon (click)=\"save()\">save</mat-icon>\n  <mat-icon (click)=\"cancel()\">cancel</mat-icon>\n</div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n  <ng-container *ngIf=\"propertiesForm|async as pf\">\n    <form [formGroup]=\"pf!\" novalidate>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input\n            matInput\n            formControlName=\"name\"\n            [placeholder]=\"'Name' | transloco\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input\n            matInput\n            formControlName=\"label\"\n            [placeholder]=\"'Label' | transloco\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <mat-label>{{'Visibility'|transloco}}</mat-label>\n          <mat-select\n            formControlName=\"visibilityOpt\"\n            [placeholder]=\"'Visible' | transloco\"\n          >\n            <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n            <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n            <mat-option value=\"condition\"\n              >{{'Condition...'|transloco}}</mat-option\n            >\n          </mat-select>\n        </mat-form-field>\n        <button\n          (click)=\"editVisibility()\"\n          [disabled]=\"pf!.value.visibilityOpt != 'condition'\"\n          mat-raised-button\n          [matTooltip]=\"curVisibility || ''\"\n        >\n          <div class=\"ajf-icon-cont\">\n            <mat-icon>edit</mat-icon>\n            <span>{{ curVisibility }}</span>\n          </div>\n        </button>\n      </div>\n      <div class=\"ajf-prop\">\n        <div><label>{{'Branches'|transloco}}</label></div>\n        <div>\n          <mat-slider\n            formControlName=\"conditionalBranchesNum\"\n            thumbLabel\n            tickInterval=\"auto\"\n            min=\"1\"\n            max=\"5\"\n            step=\"1\"\n          ></mat-slider>\n        </div>\n        <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n          <button\n            (click)=\"editConditionalBranch(idx)\"\n            mat-raised-button\n            [matTooltip]=\"branch\"\n          >\n            <div class=\"ajf-icon-cont\">\n              <mat-icon>edit</mat-icon>\n              <span>{{ branch }}</span>\n            </div>\n          </button>\n        </div>\n      </div>\n      <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n        <div class=\"ajf-prop\">\n          <div><label>{{'Repetitions'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editFormulaReps()\"\n              mat-raised-button\n              [matTooltip]=\"curFormulaReps || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curFormulaReps }}</span>\n              </div>\n            </button>\n          </div>\n          <div><label>{{'Min repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider\n              formControlName=\"minReps\"\n              thumbLabel\n              tickInterval=\"auto\"\n              min=\"1\"\n              max=\"5\"\n              step=\"1\"\n            ></mat-slider>\n          </div>\n          <div><label>{{'Max repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider\n              formControlName=\"maxReps\"\n              thumbLabel\n              tickInterval=\"auto\"\n              min=\"1\"\n              max=\"5\"\n              step=\"1\"\n            ></mat-slider>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"isField(ne)\">\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <mat-label>{{'Field size'|transloco}}</mat-label>\n            <mat-select\n              formControlName=\"size\"\n              [placeholder]=\"'Size' | transloco\"\n            >\n              <mat-option\n                *ngFor=\"let fieldSize of fieldSizes\"\n                [value]=\"fieldSize.value\"\n              >\n                {{ fieldSize.label|transloco }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"hint\"\n              [placeholder]=\"'Hint' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <textarea\n              matInput\n              formControlName=\"description\"\n              [placeholder]=\"'Description' | transloco\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"defaultValue\"\n              [placeholder]=\"'Default value' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Formula'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editFormula()\"\n              mat-raised-button\n              [matTooltip]=\"curFormula || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curFormula }}</span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <!-- <div class=\"ajf-prop\">\n          <div><label>{{'Force value'|translco}}</label></div>\n          <div>\n            <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curForceValue }}</span>\n              </div>\n            </button>\n          </div>\n        </div> -->\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmpty\"\n            >{{'Not empty'|transloco}}</mat-checkbox\n          >\n        </div>\n        <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minValue\"\n                [placeholder]=\"'Min value' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxValue\"\n                [placeholder]=\"'Max value' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minDigits\"\n                [placeholder]=\"'Min digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxDigits\"\n                [placeholder]=\"'Max digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{ 'Validation' | transloco }}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div\n            *ngIf=\"validationConditions == null || validationConditions.length == 0\"\n            class=\"ajf-validation-row ajf-emph\"\n          >\n            {{'No conditions'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editValidationCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"validationCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ validationCondition.condition }}</span>\n              </div>\n            </button>\n            <mat-icon\n              class=\"ajf-pointer\"\n              (click)=\"removeValidationCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmptyWarning\"\n            >{{'Not empty warning'|transloco}}</mat-checkbox\n          >\n        </div>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{'Warnings'|transloco}}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div\n            *ngIf=\"warningConditions == null || warningConditions.length == 0\"\n            class=\"ajf-validation-row ajf-emph\"\n          >\n            {{'No warnings'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editWarningCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"warningCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ warningCondition.condition }}</span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editNextSlideCondition()\"\n              mat-raised-button\n              [matTooltip]=\"nextSlideCondition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ nextSlideCondition }}</span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-label>{{'Choices origins'|transloco}}</mat-label>\n              <mat-select\n                formControlName=\"choicesOriginRef\"\n                [placeholder]=\"'Choices' | transloco\"\n              >\n                <mat-option\n                  *ngFor=\"let choicesOrigin of choicesOrigins\"\n                  [value]=\"choicesOrigin.name\"\n                >\n                  {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <div><label>{{'Choices filter'|transloco}}</label></div>\n            <div>\n              <button\n                (click)=\"editChoicesFilter()\"\n                mat-raised-button\n                [matTooltip]=\"curChoicesFilter\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span>{{ curChoicesFilter }}</span>\n                </div>\n              </button>\n            </div>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"forceExpanded\"\n              >{{'Force expanded selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"forceNarrow\"\n              >{{'Force narrow selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <div class=\"ajf-header\">\n              <label>{{'Trigger selection'|transloco}}</label>\n              <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n                >add_circle_outline</mat-icon\n              >\n            </div>\n            <div\n              *ngIf=\"triggerConditions == null || triggerConditions.length == 0\"\n              class=\"ajf-validation-row ajf-emph\"\n            >\n              {{'No trigger condition'|transloco}}\n            </div>\n            <div\n              class=\"ajf-validation-row\"\n              *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n            >\n              <button\n                (click)=\"editTriggerCondition(idx)\"\n                mat-raised-button\n                [matTooltip]=\"triggerCondition\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span>{{ triggerCondition }}</span>\n                </div>\n              </button>\n              <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n                >remove_circle_outline</mat-icon\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n    </form>\n  </ng-container>\n</ng-container>\n",
+                    template: "<div\n  [style.display]=\"(enabled|async) ? 'none' : 'block'\"\n  class=\"ajf-disabled-overlay\"\n></div>\n<div class=\"ajf-header\">\n  <h3>{{'Properties'|transloco}}</h3>\n  <mat-icon (click)=\"save()\">save</mat-icon>\n  <mat-icon (click)=\"cancel()\">cancel</mat-icon>\n</div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n  <ng-container *ngIf=\"propertiesForm|async as pf\">\n    <form [formGroup]=\"pf!\" novalidate>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input\n            matInput\n            formControlName=\"name\"\n            [placeholder]=\"'Name' | transloco\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input\n            matInput\n            formControlName=\"label\"\n            [placeholder]=\"'Label' | transloco\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <mat-label>{{'Visibility'|transloco}}</mat-label>\n          <mat-select\n            formControlName=\"visibilityOpt\"\n            [placeholder]=\"'Visible' | transloco\"\n          >\n            <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n            <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n            <mat-option value=\"condition\"\n              >{{'Condition...'|transloco}}</mat-option\n            >\n          </mat-select>\n        </mat-form-field>\n        <button\n          (click)=\"editVisibility()\"\n          [disabled]=\"pf!.value.visibilityOpt != 'condition'\"\n          mat-raised-button\n          [matTooltip]=\"curVisibility || ''\"\n        >\n          <div class=\"ajf-icon-cont\">\n            <mat-icon>edit</mat-icon>\n            <span>{{ curVisibility }}</span>\n          </div>\n        </button>\n      </div>\n      <div class=\"ajf-prop\">\n        <div><label>{{'Branches'|transloco}}</label></div>\n        <div>\n          <mat-slider\n            formControlName=\"conditionalBranchesNum\"\n            thumbLabel\n            tickInterval=\"auto\"\n            min=\"1\"\n            max=\"5\"\n            step=\"1\"\n          ></mat-slider>\n        </div>\n        <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n          <button\n            (click)=\"editConditionalBranch(idx)\"\n            mat-raised-button\n            [matTooltip]=\"branch\"\n          >\n            <div class=\"ajf-icon-cont\">\n              <mat-icon>edit</mat-icon>\n              <span>{{ branch }}</span>\n            </div>\n          </button>\n        </div>\n      </div>\n      <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n        <div class=\"ajf-prop\">\n          <div><label>{{'Repetitions'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editFormulaReps()\"\n              mat-raised-button\n              [matTooltip]=\"curFormulaReps || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curFormulaReps }}</span>\n              </div>\n            </button>\n          </div>\n          <div><label>{{'Min repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider\n              formControlName=\"minReps\"\n              thumbLabel\n              tickInterval=\"auto\"\n              min=\"1\"\n              max=\"5\"\n              step=\"1\"\n            ></mat-slider>\n          </div>\n          <div><label>{{'Max repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider\n              formControlName=\"maxReps\"\n              thumbLabel\n              tickInterval=\"auto\"\n              min=\"1\"\n              max=\"5\"\n              step=\"1\"\n            ></mat-slider>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"isField(ne)\">\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <mat-label>{{'Field size'|transloco}}</mat-label>\n            <mat-select\n              formControlName=\"size\"\n              [placeholder]=\"'Size' | transloco\"\n            >\n              <mat-option\n                *ngFor=\"let fieldSize of fieldSizes\"\n                [value]=\"fieldSize.value\"\n              >\n                {{ fieldSize.label|transloco }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"hint\"\n              [placeholder]=\"'Hint' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <textarea\n              matInput\n              formControlName=\"description\"\n              [placeholder]=\"'Description' | transloco\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"defaultValue\"\n              [placeholder]=\"'Default value' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Formula'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editFormula()\"\n              mat-raised-button\n              [matTooltip]=\"curFormula || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curFormula }}</span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <!-- <div class=\"ajf-prop\">\n          <div><label>{{'Force value'|translco}}</label></div>\n          <div>\n            <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curForceValue }}</span>\n              </div>\n            </button>\n          </div>\n        </div> -->\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmpty\"\n            >{{'Not empty'|transloco}}</mat-checkbox\n          >\n        </div>\n        <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minValue\"\n                [placeholder]=\"'Min value' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxValue\"\n                [placeholder]=\"'Max value' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minDigits\"\n                [placeholder]=\"'Min digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxDigits\"\n                [placeholder]=\"'Max digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"start\"\n                [placeholder]=\"'Start' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"end\"\n                [placeholder]=\"'End' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"step\"\n                [placeholder]=\"'Step' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{ 'Validation' | transloco }}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div\n            *ngIf=\"validationConditions == null || validationConditions.length == 0\"\n            class=\"ajf-validation-row ajf-emph\"\n          >\n            {{'No conditions'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editValidationCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"validationCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ validationCondition.condition }}</span>\n              </div>\n            </button>\n            <mat-icon\n              class=\"ajf-pointer\"\n              (click)=\"removeValidationCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmptyWarning\"\n            >{{'Not empty warning'|transloco}}</mat-checkbox\n          >\n        </div>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{'Warnings'|transloco}}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div\n            *ngIf=\"warningConditions == null || warningConditions.length == 0\"\n            class=\"ajf-validation-row ajf-emph\"\n          >\n            {{'No warnings'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editWarningCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"warningCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ warningCondition.condition }}</span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editNextSlideCondition()\"\n              mat-raised-button\n              [matTooltip]=\"nextSlideCondition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ nextSlideCondition }}</span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-label>{{'Choices origins'|transloco}}</mat-label>\n              <mat-select\n                formControlName=\"choicesOriginRef\"\n                [placeholder]=\"'Choices' | transloco\"\n              >\n                <mat-option\n                  *ngFor=\"let choicesOrigin of choicesOrigins\"\n                  [value]=\"choicesOrigin.name\"\n                >\n                  {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <div><label>{{'Choices filter'|transloco}}</label></div>\n            <div>\n              <button\n                (click)=\"editChoicesFilter()\"\n                mat-raised-button\n                [matTooltip]=\"curChoicesFilter\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span>{{ curChoicesFilter }}</span>\n                </div>\n              </button>\n            </div>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"forceExpanded\"\n              >{{'Force expanded selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"forceNarrow\"\n              >{{'Force narrow selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <div class=\"ajf-header\">\n              <label>{{'Trigger selection'|transloco}}</label>\n              <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n                >add_circle_outline</mat-icon\n              >\n            </div>\n            <div\n              *ngIf=\"triggerConditions == null || triggerConditions.length == 0\"\n              class=\"ajf-validation-row ajf-emph\"\n            >\n              {{'No trigger condition'|transloco}}\n            </div>\n            <div\n              class=\"ajf-validation-row\"\n              *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n            >\n              <button\n                (click)=\"editTriggerCondition(idx)\"\n                mat-raised-button\n                [matTooltip]=\"triggerCondition\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span>{{ triggerCondition }}</span>\n                </div>\n              </button>\n              <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n                >remove_circle_outline</mat-icon\n              >\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n    </form>\n  </ng-container>\n</ng-container>\n",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: ["ajf-fb-node-properties{display:block;padding:1em;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.4;background-color:#fff}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;min-height:36px}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"]
@@ -3476,13 +3500,32 @@
     AjfFormBuilderModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [
-                        monacoEditor.AjfMonacoEditorModule, nodeIcon.AjfNodeIconModule, common.CommonModule, dragDrop.DragDropModule,
-                        forms$1.FormsModule, autocomplete.MatAutocompleteModule, button.MatButtonModule, card.MatCardModule,
-                        checkbox.MatCheckboxModule, chips.MatChipsModule, dialog.MatDialogModule, formField.MatFormFieldModule,
-                        icon.MatIconModule, input.MatInputModule, list.MatListModule, menu.MatMenuModule,
-                        select.MatSelectModule, sidenav.MatSidenavModule, slider.MatSliderModule, table.MatTableModule,
-                        toolbar.MatToolbarModule, tooltip.MatTooltipModule, forms$1.ReactiveFormsModule, transloco.AjfTranslocoModule,
-                        expansion.MatExpansionModule, slideToggle.MatSlideToggleModule,
+                        monacoEditor.AjfMonacoEditorModule,
+                        nodeIcon.AjfNodeIconModule,
+                        common.CommonModule,
+                        dragDrop.DragDropModule,
+                        forms$1.FormsModule,
+                        autocomplete.MatAutocompleteModule,
+                        button.MatButtonModule,
+                        card.MatCardModule,
+                        checkbox.MatCheckboxModule,
+                        chips.MatChipsModule,
+                        dialog.MatDialogModule,
+                        formField.MatFormFieldModule,
+                        icon.MatIconModule,
+                        input.MatInputModule,
+                        list.MatListModule,
+                        menu.MatMenuModule,
+                        select.MatSelectModule,
+                        sidenav.MatSidenavModule,
+                        slider.MatSliderModule,
+                        table.MatTableModule,
+                        toolbar.MatToolbarModule,
+                        tooltip.MatTooltipModule,
+                        forms$1.ReactiveFormsModule,
+                        transloco.AjfTranslocoModule,
+                        expansion.MatExpansionModule,
+                        slideToggle.MatSlideToggleModule,
                     ],
                     declarations: [
                         AjfFbBranchLine,
@@ -3498,12 +3541,8 @@
                         AjfFbWarningConditionEditorDialog,
                         AjfFormBuilder,
                     ],
-                    exports: [
-                        AjfFormBuilder,
-                    ],
-                    providers: [
-                        AjfFormBuilderService,
-                    ],
+                    exports: [AjfFormBuilder],
+                    providers: [AjfFormBuilderService],
                 },] }
     ];