@stemy/ngx-dynamic-form 10.2.30 → 10.2.33

package/bundles/stemy-ngx-dynamic-form.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@stemy/ngx-utils'), require('rxjs'), require('@angular/core'), require('@angular/forms'), require('@ng-dynamic-forms/core'), require('rxjs/operators'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('@stemy/ngx-dynamic-form', ['exports', '@stemy/ngx-utils', 'rxjs', '@angular/core', '@angular/forms', '@ng-dynamic-forms/core', 'rxjs/operators', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.stemy = global.stemy || {}, global.stemy['ngx-dynamic-form'] = {}), global.ngxUtils, global.rxjs, global.ng.core, global.ng.forms, global.core, global.rxjs.operators, global.ng.common));
-}(this, (function (exports, ngxUtils, rxjs, core$1, forms, core, operators, common) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@stemy/ngx-utils'), require('@ng-dynamic-forms/core'), require('rxjs'), require('@angular/core'), require('@angular/forms'), require('rxjs/operators'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('@stemy/ngx-dynamic-form', ['exports', '@stemy/ngx-utils', '@ng-dynamic-forms/core', 'rxjs', '@angular/core', '@angular/forms', 'rxjs/operators', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.stemy = global.stemy || {}, global.stemy['ngx-dynamic-form'] = {}), global.ngxUtils, global.core, global.rxjs, global.ng.core, global.ng.forms, global.rxjs.operators, global.ng.common));
+}(this, (function (exports, ngxUtils, core, rxjs, core$1, forms, operators, common) { 'use strict';
 
     // --- Decorator functions ---
     function defaultSerializer(id, parent) {
@@ -484,6 +484,24 @@
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
+    var DynamicFormArrayModel = /** @class */ (function (_super) {
+        __extends(DynamicFormArrayModel, _super);
+        function DynamicFormArrayModel(config, layout) {
+            var _this = _super.call(this, config, layout) || this;
+            _this.useTabs = config.useTabs || false;
+            _this.saveTab = ngxUtils.ObjectUtils.isFunction(config.saveTab) ? config.saveTab : (function (index, model) {
+                model.tabIndex = index;
+            });
+            _this.restoreTab = ngxUtils.ObjectUtils.isFunction(config.restoreTab) ? config.restoreTab : (function (model) {
+                return model.tabIndex;
+            });
+            _this.additional = config.additional || {};
+            return _this;
+        }
+        return DynamicFormArrayModel;
+    }(core.DynamicFormArrayModel));
+
+    var indexLabels = ["$ix", "$pix"];
     var FormSubject = /** @class */ (function (_super) {
         __extends(FormSubject, _super);
         function FormSubject(notifyCallback) {
@@ -495,12 +513,18 @@
             var _this = this;
             val.then(function (v) { return _this.next(v); });
         };
-        FormSubject.prototype.notify = function (controlModel, control) {
+        FormSubject.prototype.notify = function (controlModel, control, root) {
+            var indexes = {};
             var path = controlModel;
-            while (path && isNaN(path.index)) {
+            var ix = 0;
+            while (path) {
+                if (!isNaN(path.index)) {
+                    var key = indexLabels[ix++] || "$pix" + ix;
+                    indexes[key] = path.index;
+                }
                 path = path.parent;
             }
-            var value = this.notifyCallback(controlModel, control, path === null || path === void 0 ? void 0 : path.index);
+            var value = this.notifyCallback(controlModel, control, root, indexes);
             if (!(value instanceof Promise)) {
                 value = Promise.resolve(value);
             }
@@ -556,21 +580,12 @@
         return parts;
     }
 
-    var DynamicFormArrayModel = /** @class */ (function (_super) {
-        __extends(DynamicFormArrayModel, _super);
-        function DynamicFormArrayModel(config, layout) {
-            var _this = _super.call(this, config, layout) || this;
-            _this.additional = config.additional || {};
-            return _this;
-        }
-        return DynamicFormArrayModel;
-    }(core.DynamicFormArrayModel));
-
     var DynamicFormService = /** @class */ (function (_super) {
         __extends(DynamicFormService, _super);
-        function DynamicFormService(cs, vs, openApi) {
+        function DynamicFormService(cs, vs, openApi, injector) {
             var _this = _super.call(this, cs, vs) || this;
             _this.openApi = openApi;
+            _this.injector = injector;
             _this.onDetectChanges = new core$1.EventEmitter();
             return _this;
         }
@@ -601,20 +616,20 @@
         DynamicFormService.prototype.serialize = function (formModel, formGroup) {
             return this.serializeRecursive(formModel, formGroup);
         };
-        DynamicFormService.prototype.notifyChanges = function (formModel, formGroup) {
-            this.notifyChangesRecursive(formModel, formGroup);
+        DynamicFormService.prototype.notifyChanges = function (formModel, formGroup, root) {
+            this.notifyChangesRecursive(formModel, formGroup, root);
         };
-        DynamicFormService.prototype.updateSelectOptions = function (formControlModel, formControl) {
+        DynamicFormService.prototype.updateSelectOptions = function (formControlModel, formControl, root) {
             if (formControlModel instanceof core.DynamicSelectModel) {
                 var options = formControlModel.options$;
                 if (options instanceof FormSubject) {
-                    options.notify(formControlModel, formControl);
+                    options.notify(formControlModel, formControl, root);
                     return;
                 }
                 while (options instanceof rxjs.Subject && options.source) {
                     options = options.source;
                     if (options instanceof FormSubject) {
-                        options.notify(formControlModel, formControl);
+                        options.notify(formControlModel, formControl, root);
                     }
                 }
             }
@@ -732,7 +747,7 @@
                 });
             });
         };
-        DynamicFormService.prototype.notifyChangesRecursive = function (formModel, formGroup) {
+        DynamicFormService.prototype.notifyChangesRecursive = function (formModel, formGroup, root) {
             if (!formModel || !formGroup)
                 return;
             for (var i in formModel) {
@@ -743,15 +758,15 @@
                     var subArray = subControl;
                     for (var i_2 = 0; i_2 < length; i_2++) {
                         var itemModel = subModel.get(i_2);
-                        this.notifyChangesRecursive(itemModel.group, subArray.at(i_2));
+                        this.notifyChangesRecursive(itemModel.group, subArray.at(i_2), root);
                     }
                     continue;
                 }
                 if (subModel instanceof core.DynamicFormGroupModel) {
-                    this.notifyChangesRecursive(subModel.group, subControl);
+                    this.notifyChangesRecursive(subModel.group, subControl, root);
                     continue;
                 }
-                this.updateSelectOptions(subModel, subControl);
+                this.updateSelectOptions(subModel, subControl, root);
             }
         };
         DynamicFormService.prototype.showErrorsForGroup = function (formGroup) {
@@ -777,6 +792,7 @@
         DynamicFormService.prototype.getFormModelForSchema = function (name, customizeModel) {
             return __awaiter(this, void 0, void 0, function () {
                 var _c, customizeModels;
+                var _this = this;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
@@ -789,7 +805,7 @@
                                 var model = new modelType(config);
                                 if (!ngxUtils.ObjectUtils.isFunction(customizeModel))
                                     return [model];
-                                var res = customizeModel(property, schema, model, config);
+                                var res = customizeModel(property, schema, model, config, _this.injector);
                                 return Array.isArray(res) ? res : [res];
                             };
                             return [2 /*return*/, this.getFormModelForSchemaDef(this.schemas[name], customizeModels)];
@@ -849,6 +865,21 @@
             }
             return [];
         };
+        DynamicFormService.prototype.findModelByPath = function (parent, path) {
+            if (path.length == 0)
+                return parent;
+            var next = path.shift();
+            if (Array.isArray(parent)) {
+                return this.findModelByPath(parent.find(function (t) { return t.id == next; }), path);
+            }
+            if (parent instanceof core.DynamicFormGroupModel) {
+                return this.findModelByPath(parent.group.find(function (t) { return t.id == next; }), path);
+            }
+            if (parent instanceof DynamicFormArrayModel) {
+                return this.findModelByPath(parent.groups.find(function (t) { return t.index == next; }), path);
+            }
+            return parent;
+        };
         DynamicFormService.prototype.getFormControlConfig = function (property, schema) {
             var validators = this.getValidators(property, schema);
             var errorMessages = Object.keys(validators).reduce(function (res, key) {
@@ -870,7 +901,10 @@
             var _a;
             var ref = ((_a = property.items) === null || _a === void 0 ? void 0 : _a.$ref) || property.$ref || "";
             var subSchema = this.schemas[ref.split("/").pop()];
-            return Object.assign(this.getFormControlConfig(property, schema), { groupFactory: function () { return _this.getFormModelForSchemaDef(subSchema, customizeModels); } });
+            return Object.assign(this.getFormControlConfig(property, schema), {
+                groupFactory: function () { return _this.getFormModelForSchemaDef(subSchema, customizeModels); },
+                useTabs: property.useTabs || false
+            });
         };
         DynamicFormService.prototype.getFormGroupConfig = function (property, schema, customizeModels) {
             var ref = property.$ref || "";
@@ -879,7 +913,7 @@
         };
         DynamicFormService.prototype.getFormInputConfig = function (property, schema) {
             var _a;
-            var inputType = ngxUtils.StringUtils.has(property.id, "password", "Password") ? "password" : (((_a = property.items) === null || _a === void 0 ? void 0 : _a.type) || property.type);
+            var inputType = ngxUtils.StringUtils.has(property.id, "password", "Password") ? "password" : (property.format || ((_a = property.items) === null || _a === void 0 ? void 0 : _a.type) || property.type);
             switch (inputType) {
                 case "boolean":
                     inputType = "checkbox";
@@ -904,6 +938,7 @@
                 max: isNaN(sub.maximum) ? Number.MAX_SAFE_INTEGER : sub.maximum,
                 minLength: isNaN(sub.minLength) ? Number.MIN_SAFE_INTEGER : sub.minLength,
                 maxLength: isNaN(sub.maxLength) ? Number.MAX_SAFE_INTEGER : sub.maxLength,
+                placeholder: property.placeholder || ""
             });
         };
         DynamicFormService.prototype.getFormTextareaConfig = function (property, schema) {
@@ -981,23 +1016,34 @@
                 });
             }
             if (isStringWithVal(property.optionsPath)) {
-                return new FormSelectSubject(function (formModel, control, index) {
+                return new FormSelectSubject(function (formModel, control, root, indexes) {
                     var path = property.optionsPath;
                     var target = control;
+                    var model = formModel;
                     if (path.startsWith("$root")) {
                         path = path.substr(5);
                         while (target.parent) {
                             target = target.parent;
                         }
+                        model = root;
                     }
                     while (path.startsWith(".")) {
                         path = path.substr(1);
                         if (target.parent) {
                             target = target.parent;
                         }
+                        model = model.parent || root;
                     }
-                    var value = ngxUtils.ObjectUtils.getValue(target.value, path.replace(/\$ix/gi, index));
-                    var options = (!ngxUtils.ObjectUtils.isArray(value) ? [] : value).map(function (value) { return ({ value: value, label: value }); });
+                    Object.keys(indexes).forEach(function (key) {
+                        path = path.replace(key, indexes[key]);
+                    });
+                    model = _this.findModelByPath(model, path.split("."));
+                    var modelOptions = (model instanceof core.DynamicSelectModel ? model.options : []);
+                    var value = ngxUtils.ObjectUtils.getValue(target.value, path);
+                    var options = (!ngxUtils.ObjectUtils.isArray(value) ? [] : value).map(function (value) {
+                        var modelOption = modelOptions.find(function (t) { return t.value == value; });
+                        return { value: value, label: (modelOption === null || modelOption === void 0 ? void 0 : modelOption.label) || value };
+                    });
                     return _this.translateOptions(options);
                 });
             }
@@ -1086,7 +1132,8 @@
     DynamicFormService.ctorParameters = function () { return [
         { type: core.DynamicFormComponentService },
         { type: core.DynamicFormValidationService },
-        { type: ngxUtils.OpenApiService }
+        { type: ngxUtils.OpenApiService, decorators: [{ type: core$1.Inject, args: [ngxUtils.OpenApiService,] }] },
+        { type: core$1.Injector, decorators: [{ type: core$1.Inject, args: [core$1.Injector,] }] }
     ]; };
 
     var AsyncSubmitDirective = /** @class */ (function () {
@@ -1208,8 +1255,8 @@
             _this.blur = new core$1.EventEmitter();
             _this.change = new core$1.EventEmitter();
             _this.focus = new core$1.EventEmitter();
-            _this.onStatusChange = new core$1.EventEmitter();
             _this.onValueChange = new core$1.EventEmitter();
+            _this.onStatusChange = new core$1.EventEmitter();
             _this.onSubmit = new core$1.EventEmitter();
             _this.templates = new core$1.QueryList();
             _this.subscription = new rxjs.Subscription();
@@ -1231,8 +1278,9 @@
                 this.groupSubscription = ngxUtils.ObservableUtils.multiSubscription(this.group.statusChanges.subscribe(function () {
                     _this.onStatusChange.emit(_this);
                 }), this.group.valueChanges.subscribe(function () {
-                    _this.onValueChange.emit(_this);
-                    _this.formService.notifyChanges(_this.model, _this.group);
+                    _this.formService.notifyChanges(_this.model, _this.group, _this.model);
+                }), this.change.subscribe(function (ev) {
+                    _this.onValueChange.emit(Object.assign(Object.assign({}, ev), { form: _this }));
                 }));
             }
         };
@@ -1342,28 +1390,46 @@
         focus: [{ type: core$1.Output }],
         contentTemplates: [{ type: core$1.ContentChildren, args: [core.DynamicTemplateDirective,] }],
         viewTemplates: [{ type: core$1.ViewChildren, args: [core.DynamicTemplateDirective,] }],
-        onStatusChange: [{ type: core$1.Output }],
         onValueChange: [{ type: core$1.Output }],
+        onStatusChange: [{ type: core$1.Output }],
         onSubmit: [{ type: core$1.Output }],
         ngForm: [{ type: core$1.ViewChild, args: [forms.NgForm,] }]
     };
 
     var DynamicBaseFormArrayComponent = /** @class */ (function (_super) {
         __extends(DynamicBaseFormArrayComponent, _super);
-        function DynamicBaseFormArrayComponent(layoutService, validationService) {
+        function DynamicBaseFormArrayComponent(layoutService, validationService, injector) {
             var _this = _super.call(this, layoutService, validationService) || this;
             _this.layoutService = layoutService;
             _this.validationService = validationService;
+            _this.injector = injector;
             _this.blur = new core$1.EventEmitter();
             _this.change = new core$1.EventEmitter();
             _this.customEvent = new core$1.EventEmitter();
             _this.focus = new core$1.EventEmitter();
             return _this;
         }
+        Object.defineProperty(DynamicBaseFormArrayComponent.prototype, "useTabs", {
+            get: function () {
+                var _a;
+                return (_a = this.model) === null || _a === void 0 ? void 0 : _a.useTabs;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DynamicBaseFormArrayComponent.prototype.saveTab = function (index) {
+            this.model.saveTab(index, this.model, this.injector);
+        };
+        DynamicBaseFormArrayComponent.prototype.restoreTab = function () {
+            return this.model.restoreTab(this.model, this.injector);
+        };
         DynamicBaseFormArrayComponent.prototype.getClass = function (context, place, model) {
+            var _a;
             return [
                 context == "element" ? this.getModelClass(model) : null,
-                _super.prototype.getClass.call(this, context, place, model)
+                context == "element" ? this.getAdditionalClass(model) : null,
+                _super.prototype.getClass.call(this, context, place, model),
+                model instanceof core.DynamicFormValueControlModel ? (_a = model.additional) === null || _a === void 0 ? void 0 : _a.classes : null
             ].filter(function (cls) { return !!cls; }).join(" ");
         };
         DynamicBaseFormArrayComponent.prototype.getModelClass = function (model) {
@@ -1375,6 +1441,16 @@
             }
             return "form-control-" + parts.join("-");
         };
+        DynamicBaseFormArrayComponent.prototype.getAdditionalClass = function (model) {
+            var _a, _b;
+            if (model instanceof DynamicFormArrayModel) {
+                return (_a = model.additional) === null || _a === void 0 ? void 0 : _a.classes;
+            }
+            if (model instanceof core.DynamicFormValueControlModel) {
+                return (_b = model.additional) === null || _b === void 0 ? void 0 : _b.classes;
+            }
+            return null;
+        };
         return DynamicBaseFormArrayComponent;
     }(core.DynamicFormArrayComponent));
     DynamicBaseFormArrayComponent.decorators = [
@@ -1386,7 +1462,8 @@
     ];
     DynamicBaseFormArrayComponent.ctorParameters = function () { return [
         { type: core.DynamicFormLayoutService },
-        { type: core.DynamicFormValidationService }
+        { type: core.DynamicFormValidationService },
+        { type: core$1.Injector }
     ]; };
     DynamicBaseFormArrayComponent.propDecorators = {
         formLayout: [{ type: core$1.Input }],
@@ -1457,7 +1534,7 @@
                 if (form !== _this.form)
                     return;
                 _this.changeDetectorRef.detectChanges();
-                _this.formService.updateSelectOptions(_this.model, _this.control);
+                _this.formService.updateSelectOptions(_this.model, _this.control, _this.form.model);
             });
         };
         DynamicBaseFormControlContainerComponent.prototype.ngOnDestroy = function () {
@@ -1533,6 +1610,7 @@
         DynamicBaseFormGroupComponent.prototype.getClass = function (context, place, model) {
             return [
                 context == "element" ? this.getModelClass(model) : null,
+                context == "element" ? this.getAdditionalClass(model) : null,
                 _super.prototype.getClass.call(this, context, place, model)
             ].filter(function (cls) { return !!cls; }).join(" ");
         };
@@ -1545,6 +1623,16 @@
             }
             return "form-control-" + parts.join("-");
         };
+        DynamicBaseFormGroupComponent.prototype.getAdditionalClass = function (model) {
+            var _a, _b;
+            if (model instanceof DynamicFormArrayModel) {
+                return (_a = model.additional) === null || _a === void 0 ? void 0 : _a.classes;
+            }
+            if (model instanceof core.DynamicFormValueControlModel) {
+                return (_b = model.additional) === null || _b === void 0 ? void 0 : _b.classes;
+            }
+            return null;
+        };
         return DynamicBaseFormGroupComponent;
     }(core.DynamicFormGroupComponent));
     DynamicBaseFormGroupComponent.decorators = [
@@ -1649,6 +1737,7 @@
     exports.DynamicBaseFormComponent = DynamicBaseFormComponent;
     exports.DynamicBaseFormControlContainerComponent = DynamicBaseFormControlContainerComponent;
     exports.DynamicBaseFormGroupComponent = DynamicBaseFormGroupComponent;
+    exports.DynamicFormArrayModel = DynamicFormArrayModel;
     exports.DynamicFormService = DynamicFormService;
     exports.FormFile = FormFile;
     exports.FormInput = FormInput;