@stemy/ngx-dynamic-form 10.2.27 → 10.2.30

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

@@ -5,11 +5,6 @@
 }(this, (function (exports, ngxUtils, rxjs, core$1, forms, core, operators, common) { 'use strict';
 
     // --- Decorator functions ---
-    var emptyArray = [];
-    var emptyTester = function () {
-        return Promise.resolve(false);
-    };
-    var ɵ0 = emptyTester;
     function defaultSerializer(id, parent) {
         var control = parent.get(id);
         return !control ? null : control.value;
@@ -55,85 +50,54 @@
             defineFormControl(target, propertyKey, createFormFile(propertyKey, data));
         };
     }
-    function FormFieldSet(data) {
-        return function (target) {
-            var sets = getFormFieldSets(target);
-            data.classes = data.classes || "";
-            sets[data.id] = data;
-            ngxUtils.ReflectUtils.defineMetadata("dynamicFormFieldSets", sets, target);
-        };
-    }
     function defineFormControl(target, propertyKey, control) {
         ngxUtils.ReflectUtils.defineMetadata("dynamicFormControl", control, target, propertyKey);
     }
-    function getFormFieldSets(target) {
-        return ngxUtils.ReflectUtils.getMetadata("dynamicFormFieldSets", target) || {};
-    }
     function getFormControl(target, propertyKey) {
         return ngxUtils.ReflectUtils.getMetadata("dynamicFormControl", target, propertyKey);
     }
     function getFormSerializer(target, propertyKey) {
         return ngxUtils.ReflectUtils.getMetadata("dynamicFormSerializer", target, propertyKey);
     }
-    function createFormControl(id, type, data) {
-        data = data || {};
-        data.label = ngxUtils.ObjectUtils.isNullOrUndefined(data.label) ? id : data.label;
-        data.labelAlign = data.labelAlign || "left";
-        data.fieldSet = data.fieldSet || ngxUtils.UniqueUtils.uuid();
-        data.classes = data.classes || "";
-        data.readonly = data.readonly || emptyTester;
-        data.hidden = data.hidden || emptyTester;
-        data.validators = data.validators || emptyArray;
-        return {
-            id: id,
-            type: type,
-            data: data
-        };
+    function createFormControl(id, type, config) {
+        config = config || { id: id };
+        config.id = id;
+        config.label = ngxUtils.ObjectUtils.isNullOrUndefined(config.label) ? id : config.label;
+        config.disabled = config.disabled || false;
+        config.hidden = config.hidden || false;
+        return { id: id, type: type, config: config };
     }
-    function createFormInput(id, data, type) {
+    function createFormInput(id, config, type) {
         if (type === void 0) { type = "text"; }
-        var control = createFormControl(id, "input", data);
-        data = control.data;
-        data.type = data.type || type;
-        data.classes = !data.classes ? "form-group-" + data.type : data.classes + " form-group-" + data.type;
-        data.placeholder = data.placeholder || (data.type == "mask" ? "_" : "");
-        data.step = data.step || 1;
-        data.mask = data.mask || [/\w*/gi];
+        var control = createFormControl(id, "input", config);
+        config = control.config;
+        config.inputType = config.inputType || type;
+        config.placeholder = config.placeholder || (config.inputType == "mask" ? "_" : "");
+        config.step = config.step || 1;
+        config.mask = config.mask || [/\w*/gi];
         return control;
     }
     function createFormSelect(id, data) {
         var control = createFormControl(id, "select", data);
-        data = control.data;
+        data = control.config;
         data.options = data.options || [];
-        data.type = data.type || "select";
-        var classType = data.type == "select" ? "select" : "select-" + data.type;
-        data.classes = !data.classes ? "form-group-" + classType : data.classes + " form-group-" + classType;
         return control;
     }
-    function createFormStatic(id, data) {
-        var control = createFormControl(id, "static", data);
-        data = control.data;
-        data.style = data.style || "table";
-        return control;
+    function createFormStatic(id, config) {
+        return createFormControl(id, "static", config);
     }
     function createFormModel(id, data) {
-        var control = createFormControl(id, "model", data);
-        data = control.data;
+        var control = createFormControl(id, "group", data);
+        data = control.config;
         data.name = data.name || "";
         return control;
     }
     function createFormFile(id, data) {
         var control = createFormControl(id, "file", data);
-        data = control.data;
-        data.accept = data.accept || ".jpg,.jpeg,.png";
-        data.multi = data.multi || false;
-        data.baseUrl = ngxUtils.ObjectUtils.isString(data.baseUrl) ? data.baseUrl : "assets/";
-        data.uploadUrl = ngxUtils.ObjectUtils.isString(data.uploadUrl) ? data.uploadUrl : "assets";
-        data.createUploadData = data.createUploadData || (function (file) {
-            var form = new FormData();
-            form.append("file", file);
-            return form;
-        });
+        data = control.config;
+        data.accept = data.accept || ["jpg", "jpeg", "png"];
+        data.multiple = data.multiple || false;
+        data.url = ngxUtils.ObjectUtils.isString(data.url) ? data.url : "assets";
         return control;
     }
 
@@ -555,6 +519,8 @@
             val.then(function (options) {
                 var _a, _b;
                 _this.next(options);
+                if (options.length == 0)
+                    return;
                 var currentVal = control.value;
                 if (controlModel.multiple) {
                     var correctVal = (currentVal || []).filter(function (t) { return options.findIndex(function (o) { return o.value == t; }) >= 0; });
@@ -574,6 +540,20 @@
 
     function isStringWithVal(val) {
         return typeof val == "string" && val.length > 0;
+    }
+    function collectPathAble(start, getter) {
+        if (!start || !getter(start))
+            return [];
+        var parts = [];
+        var currentPath = start;
+        while (currentPath) {
+            var val = getter(currentPath);
+            if (val) {
+                parts.unshift(val);
+            }
+            currentPath = currentPath.parent;
+        }
+        return parts;
     }
 
     var DynamicFormArrayModel = /** @class */ (function (_super) {
@@ -794,9 +774,9 @@
                 }
             });
         };
-        DynamicFormService.prototype.getFormModelForSchema = function (name) {
+        DynamicFormService.prototype.getFormModelForSchema = function (name, customizeModel) {
             return __awaiter(this, void 0, void 0, function () {
-                var _c;
+                var _c, customizeModels;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
@@ -805,49 +785,69 @@
                             return [4 /*yield*/, this.openApi.getSchemas()];
                         case 1:
                             _c.schemas = _d.sent();
-                            return [2 /*return*/, this.getFormModelForSchemaDef(this.schemas[name])];
+                            customizeModels = function (property, schema, modelType, config) {
+                                var model = new modelType(config);
+                                if (!ngxUtils.ObjectUtils.isFunction(customizeModel))
+                                    return [model];
+                                var res = customizeModel(property, schema, model, config);
+                                return Array.isArray(res) ? res : [res];
+                            };
+                            return [2 /*return*/, this.getFormModelForSchemaDef(this.schemas[name], customizeModels)];
                     }
                 });
             });
         };
-        DynamicFormService.prototype.getFormModelForSchemaDef = function (schema) {
-            var _this = this;
+        DynamicFormService.prototype.getFormModelForSchemaDef = function (schema, customizeModels) {
+            var e_1, _c;
             if (!schema)
                 return [];
-            return Object.keys(schema.properties || {}).map(function (p) {
-                var property = schema.properties[p];
-                return _this.getFormControlModel(property, schema);
-            }).filter(function (t) { return null !== t; });
+            var keys = Object.keys(schema.properties || {});
+            var controls = [];
+            try {
+                for (var keys_1 = __values(keys), keys_1_1 = keys_1.next(); !keys_1_1.done; keys_1_1 = keys_1.next()) {
+                    var p = keys_1_1.value;
+                    var property = schema.properties[p];
+                    controls.push.apply(controls, __spread(this.getFormControlModels(property, schema, customizeModels)));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (keys_1_1 && !keys_1_1.done && (_c = keys_1.return)) _c.call(keys_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return controls.filter(function (t) { return null !== t; });
         };
-        DynamicFormService.prototype.getFormControlModel = function (property, schema) {
+        DynamicFormService.prototype.getFormControlModels = function (property, schema, customizeModels) {
             var _a, _b;
             var $enum = ((_a = property.items) === null || _a === void 0 ? void 0 : _a.enum) || property.enum;
             if (Array.isArray($enum) || isStringWithVal(property.optionsPath) || isStringWithVal(property.endpoint)) {
-                return new core.DynamicSelectModel(this.getFormSelectConfig(property, schema));
+                return customizeModels(property, schema, core.DynamicSelectModel, this.getFormSelectConfig(property, schema));
             }
             switch (property.type) {
                 case "string":
                 case "number":
                 case "integer":
-                    return new core.DynamicInputModel(this.getFormInputConfig(property, schema));
+                    return customizeModels(property, schema, core.DynamicInputModel, this.getFormInputConfig(property, schema));
                 case "textarea":
-                    return new core.DynamicTextAreaModel(this.getFormTextareaConfig(property, schema));
+                    return customizeModels(property, schema, core.DynamicTextAreaModel, this.getFormTextareaConfig(property, schema));
                 case "boolean":
-                    return new core.DynamicCheckboxModel(this.getFormCheckboxConfig(property, schema));
+                    return customizeModels(property, schema, core.DynamicCheckboxModel, this.getFormCheckboxConfig(property, schema));
                 case "array":
                     if (((_b = property.items) === null || _b === void 0 ? void 0 : _b.$ref) || property.$ref) {
-                        return new DynamicFormArrayModel(this.getFormArrayConfig(property, schema));
+                        return customizeModels(property, schema, DynamicFormArrayModel, this.getFormArrayConfig(property, schema, customizeModels));
                     }
                     else {
-                        return new core.DynamicInputModel(this.getFormInputConfig(property, schema));
+                        return customizeModels(property, schema, core.DynamicInputModel, this.getFormInputConfig(property, schema));
                     }
                 case "file":
-                    return new core.DynamicFileUploadModel(this.getFormUploadConfig(property, schema));
+                    return customizeModels(property, schema, core.DynamicFileUploadModel, this.getFormUploadConfig(property, schema));
             }
             if (property.$ref) {
-                return new core.DynamicFormGroupModel(this.getFormGroupConfig(property, schema));
+                return customizeModels(property, schema, core.DynamicFormGroupModel, this.getFormGroupConfig(property, schema, customizeModels));
             }
-            return null;
+            return [];
         };
         DynamicFormService.prototype.getFormControlConfig = function (property, schema) {
             var validators = this.getValidators(property, schema);
@@ -865,17 +865,17 @@
                 additional: Object.assign({}, property)
             };
         };
-        DynamicFormService.prototype.getFormArrayConfig = function (property, schema) {
+        DynamicFormService.prototype.getFormArrayConfig = function (property, schema, customizeModels) {
             var _this = this;
             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); } });
+            return Object.assign(this.getFormControlConfig(property, schema), { groupFactory: function () { return _this.getFormModelForSchemaDef(subSchema, customizeModels); } });
         };
-        DynamicFormService.prototype.getFormGroupConfig = function (property, schema) {
+        DynamicFormService.prototype.getFormGroupConfig = function (property, schema, customizeModels) {
             var ref = property.$ref || "";
             var subSchema = this.schemas[ref.split("/").pop()];
-            return Object.assign(this.getFormControlConfig(property, schema), { group: this.getFormModelForSchemaDef(subSchema) });
+            return Object.assign(this.getFormControlConfig(property, schema), { group: this.getFormModelForSchemaDef(subSchema, customizeModels) });
         };
         DynamicFormService.prototype.getFormInputConfig = function (property, schema) {
             var _a;
@@ -928,8 +928,8 @@
         };
         DynamicFormService.prototype.translateOptions = function (options) {
             return __awaiter(this, void 0, void 0, function () {
-                var options_1, options_1_1, option, _c, e_1_1;
-                var e_1, _d;
+                var options_1, options_1_1, option, _c, e_2_1;
+                var e_2, _d;
                 return __generator(this, function (_e) {
                     switch (_e.label) {
                         case 0:
@@ -953,14 +953,14 @@
                             return [3 /*break*/, 2];
                         case 5: return [3 /*break*/, 8];
                         case 6:
-                            e_1_1 = _e.sent();
-                            e_1 = { error: e_1_1 };
+                            e_2_1 = _e.sent();
+                            e_2 = { error: e_2_1 };
                             return [3 /*break*/, 8];
                         case 7:
                             try {
                                 if (options_1_1 && !options_1_1.done && (_d = options_1.return)) _d.call(options_1);
                             }
-                            finally { if (e_1) throw e_1.error; }
+                            finally { if (e_2) throw e_2.error; }
                             return [7 /*endfinally*/];
                         case 8: return [2 /*return*/, options];
                     }
@@ -974,7 +974,7 @@
             if (Array.isArray($enum)) {
                 return new FormSelectSubject(function () {
                     var options = $enum.map(function (value) {
-                        var label = property.translatable ? property.id + "." + value : value;
+                        var label = property.translatable ? property.id + "." + value : "" + value;
                         return { value: value, label: label };
                     });
                     return _this.translateOptions(options);
@@ -1271,6 +1271,15 @@
             this.formService.clearFormArray(formArray, formArrayModel);
             this.changeDetectorRef.detectChanges();
         };
+        DynamicBaseFormComponent.prototype.getClass = function (model) {
+            var parts = collectPathAble(model, function (p) { return p.id; });
+            if (parts.length == 0)
+                return "";
+            if (model instanceof core.DynamicFormGroupModel) {
+                return "form-group-" + parts.join("-");
+            }
+            return "form-control-" + parts.join("-");
+        };
         DynamicBaseFormComponent.prototype.validate = function (showErrors) {
             var _this = this;
             if (showErrors === void 0) { showErrors = true; }
@@ -1339,6 +1348,59 @@
         ngForm: [{ type: core$1.ViewChild, args: [forms.NgForm,] }]
     };
 
+    var DynamicBaseFormArrayComponent = /** @class */ (function (_super) {
+        __extends(DynamicBaseFormArrayComponent, _super);
+        function DynamicBaseFormArrayComponent(layoutService, validationService) {
+            var _this = _super.call(this, layoutService, validationService) || this;
+            _this.layoutService = layoutService;
+            _this.validationService = validationService;
+            _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;
+        }
+        DynamicBaseFormArrayComponent.prototype.getClass = function (context, place, model) {
+            return [
+                context == "element" ? this.getModelClass(model) : null,
+                _super.prototype.getClass.call(this, context, place, model)
+            ].filter(function (cls) { return !!cls; }).join(" ");
+        };
+        DynamicBaseFormArrayComponent.prototype.getModelClass = function (model) {
+            var parts = collectPathAble(model, function (p) { return p.id; });
+            if (parts.length == 0)
+                return "";
+            if (model instanceof core.DynamicFormGroupModel) {
+                return "form-group-" + parts.join("-");
+            }
+            return "form-control-" + parts.join("-");
+        };
+        return DynamicBaseFormArrayComponent;
+    }(core.DynamicFormArrayComponent));
+    DynamicBaseFormArrayComponent.decorators = [
+        { type: core$1.Component, args: [{
+                    selector: "dynamic-base-form-array",
+                    template: "",
+                    changeDetection: core$1.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    DynamicBaseFormArrayComponent.ctorParameters = function () { return [
+        { type: core.DynamicFormLayoutService },
+        { type: core.DynamicFormValidationService }
+    ]; };
+    DynamicBaseFormArrayComponent.propDecorators = {
+        formLayout: [{ type: core$1.Input }],
+        group: [{ type: core$1.Input }],
+        layout: [{ type: core$1.Input }],
+        model: [{ type: core$1.Input }],
+        templates: [{ type: core$1.Input }],
+        blur: [{ type: core$1.Output }],
+        change: [{ type: core$1.Output }],
+        customEvent: [{ type: core$1.Output }],
+        focus: [{ type: core$1.Output }],
+        components: [{ type: core$1.ViewChildren, args: [core$1.forwardRef(function () { return core.DynamicFormControlContainerComponent; }),] }]
+    };
+
     var DynamicBaseFormControlContainerComponent = /** @class */ (function (_super) {
         __extends(DynamicBaseFormControlContainerComponent, _super);
         function DynamicBaseFormControlContainerComponent(form, changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService) {
@@ -1402,6 +1464,16 @@
             _super.prototype.ngOnDestroy.call(this);
             this.onDetectChanges.unsubscribe();
         };
+        DynamicBaseFormControlContainerComponent.prototype.getLabel = function () {
+            var _a;
+            var label = collectPathAble(this.model, function (p) { return p.label; });
+            if (label.length == 0)
+                return "";
+            if ((_a = this.form) === null || _a === void 0 ? void 0 : _a.labelPrefix) {
+                label.unshift(this.form.labelPrefix);
+            }
+            return label.join(".");
+        };
         DynamicBaseFormControlContainerComponent.prototype.createFormControlComponent = function () {
             var _a;
             _super.prototype.createFormControlComponent.call(this);
@@ -1446,24 +1518,65 @@
         componentViewContainerRef: [{ type: core$1.ViewChild, args: ["componentViewContainer", { read: core$1.ViewContainerRef, static: true },] }]
     };
 
-    var DynamicFormValidationService = /** @class */ (function (_super) {
-        __extends(DynamicFormValidationService, _super);
-        function DynamicFormValidationService() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    var DynamicBaseFormGroupComponent = /** @class */ (function (_super) {
+        __extends(DynamicBaseFormGroupComponent, _super);
+        function DynamicBaseFormGroupComponent(layoutService, validationService) {
+            var _this = _super.call(this, layoutService, validationService) || this;
+            _this.layoutService = layoutService;
+            _this.validationService = validationService;
+            _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;
         }
-        DynamicFormValidationService.prototype.showErrorMessages = function (control, model, hasFocus) {
-            return _super.prototype.showErrorMessages.call(this, control, model, hasFocus);
+        DynamicBaseFormGroupComponent.prototype.getClass = function (context, place, model) {
+            return [
+                context == "element" ? this.getModelClass(model) : null,
+                _super.prototype.getClass.call(this, context, place, model)
+            ].filter(function (cls) { return !!cls; }).join(" ");
         };
-        return DynamicFormValidationService;
-    }(core.DynamicFormValidationService));
-    DynamicFormValidationService.decorators = [
-        { type: core$1.Injectable }
-    ];
+        DynamicBaseFormGroupComponent.prototype.getModelClass = function (model) {
+            var parts = collectPathAble(model, function (p) { return p.id; });
+            if (parts.length == 0)
+                return "";
+            if (model instanceof core.DynamicFormGroupModel) {
+                return "form-group-" + parts.join("-");
+            }
+            return "form-control-" + parts.join("-");
+        };
+        return DynamicBaseFormGroupComponent;
+    }(core.DynamicFormGroupComponent));
+    DynamicBaseFormGroupComponent.decorators = [
+        { type: core$1.Component, args: [{
+                    selector: "dynamic-base-form-group",
+                    template: "",
+                    changeDetection: core$1.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    DynamicBaseFormGroupComponent.ctorParameters = function () { return [
+        { type: core.DynamicFormLayoutService },
+        { type: core.DynamicFormValidationService }
+    ]; };
+    DynamicBaseFormGroupComponent.propDecorators = {
+        formLayout: [{ type: core$1.Input }],
+        group: [{ type: core$1.Input }],
+        layout: [{ type: core$1.Input }],
+        model: [{ type: core$1.Input }],
+        templates: [{ type: core$1.Input }],
+        blur: [{ type: core$1.Output }],
+        change: [{ type: core$1.Output }],
+        customEvent: [{ type: core$1.Output }],
+        focus: [{ type: core$1.Output }],
+        components: [{ type: core$1.ViewChildren, args: [core$1.forwardRef(function () { return core.DynamicFormControlContainerComponent; }),] }]
+    };
 
     // --- Components ---
     var components = [
         DynamicBaseFormComponent,
-        DynamicBaseFormControlContainerComponent
+        DynamicBaseFormArrayComponent,
+        DynamicBaseFormControlContainerComponent,
+        DynamicBaseFormGroupComponent
     ];
     // --- Directives ---
     var directives = [
@@ -1471,7 +1584,7 @@
     ];
     // --- Pipes ---
     var pipes = [];
-    var ɵ0$1 = validateJSON, ɵ1 = validateRequiredTranslation, ɵ2 = validateItemsMinLength, ɵ3 = validateItemsMaxLength, ɵ4 = validateItemsMinValue, ɵ5 = validateItemsMaxValue, ɵ6 = new Map([
+    var ɵ0 = validateJSON, ɵ1 = validateRequiredTranslation, ɵ2 = validateItemsMinLength, ɵ3 = validateItemsMaxLength, ɵ4 = validateItemsMinValue, ɵ5 = validateItemsMaxValue, ɵ6 = new Map([
         ["json", validateJSON],
         ["requiredTranslation", validateRequiredTranslation],
         ["phone", validatePhone],
@@ -1488,14 +1601,9 @@
                 ngModule: NgxDynamicFormModule,
                 providers: [
                     DynamicFormService,
-                    DynamicFormValidationService,
                     {
                         provide: core.DynamicFormService,
                         useExisting: DynamicFormService
-                    },
-                    {
-                        provide: core.DynamicFormValidationService,
-                        useExisting: DynamicFormValidationService
                     }
                 ]
             };
@@ -1518,7 +1626,7 @@
                     ]),
                     entryComponents: components,
                     providers: __spread(pipes, [
-                        { provide: forms.NG_VALIDATORS, useValue: ɵ0$1, multi: true },
+                        { provide: forms.NG_VALIDATORS, useValue: ɵ0, multi: true },
                         { provide: forms.NG_VALIDATORS, useValue: ɵ1, multi: true },
                         { provide: forms.NG_VALIDATORS, useValue: ɵ2, multi: true },
                         { provide: forms.NG_VALIDATORS, useValue: ɵ3, multi: true },
@@ -1537,10 +1645,11 @@
      */
 
     exports.AsyncSubmitDirective = AsyncSubmitDirective;
+    exports.DynamicBaseFormArrayComponent = DynamicBaseFormArrayComponent;
     exports.DynamicBaseFormComponent = DynamicBaseFormComponent;
     exports.DynamicBaseFormControlContainerComponent = DynamicBaseFormControlContainerComponent;
+    exports.DynamicBaseFormGroupComponent = DynamicBaseFormGroupComponent;
     exports.DynamicFormService = DynamicFormService;
-    exports.FormFieldSet = FormFieldSet;
     exports.FormFile = FormFile;
     exports.FormInput = FormInput;
     exports.FormModel = FormModel;
@@ -1558,7 +1667,6 @@
     exports.defaultSerializer = defaultSerializer;
     exports.defineFormControl = defineFormControl;
     exports.getFormControl = getFormControl;
-    exports.getFormFieldSets = getFormFieldSets;
     exports.getFormSerializer = getFormSerializer;
     exports.validateItemsMaxLength = validateItemsMaxLength;
     exports.validateItemsMaxValue = validateItemsMaxValue;
@@ -1570,7 +1678,6 @@
     exports.ɵa = components;
     exports.ɵb = directives;
     exports.ɵc = pipes;
-    exports.ɵd = DynamicFormValidationService;
 
     Object.defineProperty(exports, '__esModule', { value: true });