@stemy/ngx-dynamic-form 10.2.25 → 10.2.28

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

@@ -527,28 +527,69 @@
             _this.notifyCallback = notifyCallback;
             return _this;
         }
+        FormSubject.prototype.handleNotifiedValue = function (controlModel, control, val) {
+            var _this = this;
+            val.then(function (v) { return _this.next(v); });
+        };
         FormSubject.prototype.notify = function (controlModel, control) {
-            return __awaiter(this, void 0, void 0, function () {
-                var value;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            value = this.notifyCallback(controlModel, control);
-                            if (!(value instanceof Promise)) return [3 /*break*/, 2];
-                            return [4 /*yield*/, value];
-                        case 1:
-                            value = _a.sent();
-                            _a.label = 2;
-                        case 2:
-                            this.next(value);
-                            return [2 /*return*/];
-                    }
-                });
-            });
+            var path = controlModel;
+            while (path && isNaN(path.index)) {
+                path = path.parent;
+            }
+            var value = this.notifyCallback(controlModel, control, path === null || path === void 0 ? void 0 : path.index);
+            if (!(value instanceof Promise)) {
+                value = Promise.resolve(value);
+            }
+            this.handleNotifiedValue(controlModel, control, value);
         };
         return FormSubject;
     }(rxjs.Subject));
 
+    var FormSelectSubject = /** @class */ (function (_super) {
+        __extends(FormSelectSubject, _super);
+        function FormSelectSubject() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        FormSelectSubject.prototype.handleNotifiedValue = function (controlModel, control, val) {
+            var _this = this;
+            val.then(function (options) {
+                var _a, _b;
+                _this.next(options);
+                var currentVal = control.value;
+                if (controlModel.multiple) {
+                    var correctVal = (currentVal || []).filter(function (t) { return options.findIndex(function (o) { return o.value == t; }) >= 0; });
+                    if (correctVal.length !== (currentVal === null || currentVal === void 0 ? void 0 : currentVal.length)) {
+                        control.setValue(correctVal, { onlySelf: true, emitEvent: false });
+                    }
+                    return;
+                }
+                var option = options.find(function (t) { return t.value == currentVal; });
+                if (!option) {
+                    control.setValue((_b = (_a = options[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null, { onlySelf: true, emitEvent: false });
+                }
+            });
+        };
+        return FormSelectSubject;
+    }(FormSubject));
+
+    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) {
         __extends(DynamicFormArrayModel, _super);
         function DynamicFormArrayModel(config, layout) {
@@ -794,7 +835,8 @@
         };
         DynamicFormService.prototype.getFormControlModel = function (property, schema) {
             var _a, _b;
-            if (Array.isArray(property.enum) || ngxUtils.ObjectUtils.isString(property.optionsPath)) {
+            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));
             }
             switch (property.type) {
@@ -806,15 +848,10 @@
                     return new core.DynamicTextAreaModel(this.getFormTextareaConfig(property, schema));
                 case "boolean":
                     return new core.DynamicCheckboxModel(this.getFormCheckboxConfig(property, schema));
-                case "list":
-                    return new core.DynamicSelectModel(this.getFormSelectConfig(property, schema));
                 case "array":
-                    if (((_a = property.items) === null || _a === void 0 ? void 0 : _a.$ref) || property.$ref) {
+                    if (((_b = property.items) === null || _b === void 0 ? void 0 : _b.$ref) || property.$ref) {
                         return new DynamicFormArrayModel(this.getFormArrayConfig(property, schema));
                     }
-                    else if (((_b = property.items) === null || _b === void 0 ? void 0 : _b.enum) || property.enum) {
-                        return new core.DynamicSelectModel(this.getFormSelectConfig(property, schema));
-                    }
                     else {
                         return new core.DynamicInputModel(this.getFormInputConfig(property, schema));
                     }
@@ -877,8 +914,10 @@
                 mask: ngxUtils.ObjectUtils.isString(property.mask) ? property.mask : null,
                 pattern: ngxUtils.ObjectUtils.isString(property.pattern) ? property.pattern : null,
                 step: isNaN(sub.step) ? (isNaN(property.step) ? 1 : property.step) : sub.step,
-                min: isNaN(sub.minimum) ? (isNaN(sub.minLength) ? Number.MIN_SAFE_INTEGER : sub.minLength) : sub.minimum,
-                max: isNaN(sub.maximum) ? (isNaN(sub.maxLength) ? Number.MAX_SAFE_INTEGER : sub.maxLength) : sub.maximum
+                min: isNaN(sub.minimum) ? Number.MIN_SAFE_INTEGER : sub.minimum,
+                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,
             });
         };
         DynamicFormService.prototype.getFormTextareaConfig = function (property, schema) {
@@ -946,8 +985,17 @@
             var _this = this;
             var _a;
             var $enum = ((_a = property.items) === null || _a === void 0 ? void 0 : _a.enum) || property.enum;
-            if (property.optionsPath) {
-                return new FormSubject(function (formModel, control) {
+            if (Array.isArray($enum)) {
+                return new FormSelectSubject(function () {
+                    var options = $enum.map(function (value) {
+                        var label = property.translatable ? property.id + "." + value : value;
+                        return { value: value, label: label };
+                    });
+                    return _this.translateOptions(options);
+                });
+            }
+            if (isStringWithVal(property.optionsPath)) {
+                return new FormSelectSubject(function (formModel, control, index) {
                     var path = property.optionsPath;
                     var target = control;
                     if (path.startsWith("$root")) {
@@ -962,21 +1010,12 @@
                             target = target.parent;
                         }
                     }
-                    var value = ngxUtils.ObjectUtils.getValue(target.value, path);
+                    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 }); });
                     return _this.translateOptions(options);
                 });
             }
-            if (ngxUtils.ObjectUtils.isArray($enum)) {
-                return new FormSubject(function () {
-                    var options = $enum.map(function (value) {
-                        var label = property.translatable ? property.id + "." + value : value;
-                        return { value: value, label: label };
-                    });
-                    return _this.translateOptions(options);
-                });
-            }
-            return new FormSubject(function () { return __awaiter(_this, void 0, void 0, function () {
+            return new FormSelectSubject(function () { return __awaiter(_this, void 0, void 0, function () {
                 var options;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
@@ -1246,6 +1285,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; }
@@ -1314,6 +1362,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) {
@@ -1377,6 +1478,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);
@@ -1421,24 +1532,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 = [
@@ -1463,14 +1615,9 @@
                 ngModule: NgxDynamicFormModule,
                 providers: [
                     DynamicFormService,
-                    DynamicFormValidationService,
                     {
                         provide: core.DynamicFormService,
                         useExisting: DynamicFormService
-                    },
-                    {
-                        provide: core.DynamicFormValidationService,
-                        useExisting: DynamicFormValidationService
                     }
                 ]
             };
@@ -1512,14 +1659,17 @@
      */
 
     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;
     exports.FormSelect = FormSelect;
+    exports.FormSelectSubject = FormSelectSubject;
     exports.FormSerializable = FormSerializable;
     exports.FormStatic = FormStatic;
     exports.FormSubject = FormSubject;
@@ -1534,17 +1684,16 @@
     exports.getFormControl = getFormControl;
     exports.getFormFieldSets = getFormFieldSets;
     exports.getFormSerializer = getFormSerializer;
+    exports.validateItemsMaxLength = validateItemsMaxLength;
+    exports.validateItemsMaxValue = validateItemsMaxValue;
+    exports.validateItemsMinLength = validateItemsMinLength;
+    exports.validateItemsMinValue = validateItemsMinValue;
     exports.validateJSON = validateJSON;
     exports.validatePhone = validatePhone;
     exports.validateRequiredTranslation = validateRequiredTranslation;
-    exports.ɵa = validateItemsMinLength;
-    exports.ɵb = validateItemsMaxLength;
-    exports.ɵc = validateItemsMinValue;
-    exports.ɵd = validateItemsMaxValue;
-    exports.ɵe = components;
-    exports.ɵf = directives;
-    exports.ɵg = pipes;
-    exports.ɵh = DynamicFormValidationService;
+    exports.ɵa = components;
+    exports.ɵb = directives;
+    exports.ɵc = pipes;
 
     Object.defineProperty(exports, '__esModule', { value: true });