@stemy/ngx-dynamic-form 10.2.27 → 10.2.28

package/fesm2015/stemy-ngx-dynamic-form.js

@@ -1,9 +1,9 @@
 import { ReflectUtils, ObjectUtils, UniqueUtils, StringUtils, OpenApiService, TOASTER_SERVICE, ObservableUtils, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
 import { Subject, Subscription } from 'rxjs';
 import { __awaiter } from 'tslib';
-import { EventEmitter, Injectable, Directive, Inject, ChangeDetectorRef, ElementRef, Renderer2, Input, Output, HostBinding, HostListener, QueryList, Component, ChangeDetectionStrategy, ContentChildren, ViewChildren, ViewChild, ComponentFactoryResolver, ViewContainerRef, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Directive, Inject, ChangeDetectorRef, ElementRef, Renderer2, Input, Output, HostBinding, HostListener, QueryList, Component, ChangeDetectionStrategy, ContentChildren, ViewChildren, ViewChild, forwardRef, ComponentFactoryResolver, ViewContainerRef, NgModule } from '@angular/core';
 import { FormGroup, FormArray, NgForm, FormsModule, ReactiveFormsModule, NG_VALIDATORS } from '@angular/forms';
-import { DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormService as DynamicFormService$1, DynamicSelectModel, DynamicFormGroupModel, DynamicInputModel, DynamicFileUploadModel, DynamicCheckboxModel, DynamicTextAreaModel, DynamicFormComponentService, DynamicFormValidationService as DynamicFormValidationService$1, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormLayoutService, DynamicFormRelationService, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
+import { DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormService as DynamicFormService$1, DynamicSelectModel, DynamicFormGroupModel, DynamicInputModel, DynamicFileUploadModel, DynamicCheckboxModel, DynamicTextAreaModel, DynamicFormComponentService, DynamicFormValidationService, DynamicFormComponent, DynamicTemplateDirective, DynamicFormArrayComponent, DynamicFormLayoutService, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormRelationService, DynamicFormGroupComponent, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
 import { first } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 
@@ -239,6 +239,20 @@ class FormSelectSubject extends FormSubject {
 
 function isStringWithVal(val) {
     return typeof val == "string" && val.length > 0;
+}
+function collectPathAble(start, getter) {
+    if (!start || !getter(start))
+        return [];
+    const parts = [];
+    let currentPath = start;
+    while (currentPath) {
+        const val = getter(currentPath);
+        if (val) {
+            parts.unshift(val);
+        }
+        currentPath = currentPath.parent;
+    }
+    return parts;
 }
 
 class DynamicFormArrayModel extends DynamicFormArrayModel$1 {
@@ -649,7 +663,7 @@ DynamicFormService.decorators = [
 ];
 DynamicFormService.ctorParameters = () => [
     { type: DynamicFormComponentService },
-    { type: DynamicFormValidationService$1 },
+    { type: DynamicFormValidationService },
     { type: OpenApiService }
 ];
 
@@ -815,6 +829,15 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
         this.formService.clearFormArray(formArray, formArrayModel);
         this.changeDetectorRef.detectChanges();
     }
+    getClass(model) {
+        const parts = collectPathAble(model, p => p.id);
+        if (parts.length == 0)
+            return "";
+        if (model instanceof DynamicFormGroupModel) {
+            return `form-group-${parts.join("-")}`;
+        }
+        return `form-control-${parts.join("-")}`;
+    }
     validate(showErrors = true) {
         if (!this.group)
             return Promise.resolve();
@@ -872,6 +895,56 @@ DynamicBaseFormComponent.propDecorators = {
     ngForm: [{ type: ViewChild, args: [NgForm,] }]
 };
 
+class DynamicBaseFormArrayComponent extends DynamicFormArrayComponent {
+    constructor(layoutService, validationService) {
+        super(layoutService, validationService);
+        this.layoutService = layoutService;
+        this.validationService = validationService;
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.customEvent = new EventEmitter();
+        this.focus = new EventEmitter();
+    }
+    getClass(context, place, model) {
+        return [
+            context == "element" ? this.getModelClass(model) : null,
+            super.getClass(context, place, model)
+        ].filter(cls => !!cls).join(" ");
+    }
+    getModelClass(model) {
+        const parts = collectPathAble(model, p => p.id);
+        if (parts.length == 0)
+            return "";
+        if (model instanceof DynamicFormGroupModel) {
+            return `form-group-${parts.join("-")}`;
+        }
+        return `form-control-${parts.join("-")}`;
+    }
+}
+DynamicBaseFormArrayComponent.decorators = [
+    { type: Component, args: [{
+                selector: "dynamic-base-form-array",
+                template: "",
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DynamicBaseFormArrayComponent.ctorParameters = () => [
+    { type: DynamicFormLayoutService },
+    { type: DynamicFormValidationService }
+];
+DynamicBaseFormArrayComponent.propDecorators = {
+    formLayout: [{ type: Input }],
+    group: [{ type: Input }],
+    layout: [{ type: Input }],
+    model: [{ type: Input }],
+    templates: [{ type: Input }],
+    blur: [{ type: Output }],
+    change: [{ type: Output }],
+    customEvent: [{ type: Output }],
+    focus: [{ type: Output }],
+    components: [{ type: ViewChildren, args: [forwardRef(() => DynamicFormControlContainerComponent),] }]
+};
+
 class DynamicBaseFormControlContainerComponent extends DynamicFormControlContainerComponent {
     constructor(form, changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService) {
         super(changeDetectorRef, componentFactoryResolver, layoutService, validationService, componentService, relationService);
@@ -916,6 +989,16 @@ class DynamicBaseFormControlContainerComponent extends DynamicFormControlContain
         super.ngOnDestroy();
         this.onDetectChanges.unsubscribe();
     }
+    getLabel() {
+        var _a;
+        const label = collectPathAble(this.model, p => 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(".");
+    }
     createFormControlComponent() {
         var _a;
         super.createFormControlComponent();
@@ -940,7 +1023,7 @@ DynamicBaseFormControlContainerComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
     { type: ComponentFactoryResolver },
     { type: DynamicFormLayoutService },
-    { type: DynamicFormValidationService$1 },
+    { type: DynamicFormValidationService },
     { type: DynamicFormComponentService },
     { type: DynamicFormRelationService }
 ];
@@ -959,19 +1042,62 @@ DynamicBaseFormControlContainerComponent.propDecorators = {
     componentViewContainerRef: [{ type: ViewChild, args: ["componentViewContainer", { read: ViewContainerRef, static: true },] }]
 };
 
-class DynamicFormValidationService extends DynamicFormValidationService$1 {
-    showErrorMessages(control, model, hasFocus) {
-        return super.showErrorMessages(control, model, hasFocus);
+class DynamicBaseFormGroupComponent extends DynamicFormGroupComponent {
+    constructor(layoutService, validationService) {
+        super(layoutService, validationService);
+        this.layoutService = layoutService;
+        this.validationService = validationService;
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.customEvent = new EventEmitter();
+        this.focus = new EventEmitter();
+    }
+    getClass(context, place, model) {
+        return [
+            context == "element" ? this.getModelClass(model) : null,
+            super.getClass(context, place, model)
+        ].filter(cls => !!cls).join(" ");
+    }
+    getModelClass(model) {
+        const parts = collectPathAble(model, p => p.id);
+        if (parts.length == 0)
+            return "";
+        if (model instanceof DynamicFormGroupModel) {
+            return `form-group-${parts.join("-")}`;
+        }
+        return `form-control-${parts.join("-")}`;
     }
 }
-DynamicFormValidationService.decorators = [
-    { type: Injectable }
-];
+DynamicBaseFormGroupComponent.decorators = [
+    { type: Component, args: [{
+                selector: "dynamic-base-form-group",
+                template: "",
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+DynamicBaseFormGroupComponent.ctorParameters = () => [
+    { type: DynamicFormLayoutService },
+    { type: DynamicFormValidationService }
+];
+DynamicBaseFormGroupComponent.propDecorators = {
+    formLayout: [{ type: Input }],
+    group: [{ type: Input }],
+    layout: [{ type: Input }],
+    model: [{ type: Input }],
+    templates: [{ type: Input }],
+    blur: [{ type: Output }],
+    change: [{ type: Output }],
+    customEvent: [{ type: Output }],
+    focus: [{ type: Output }],
+    components: [{ type: ViewChildren, args: [forwardRef(() => DynamicFormControlContainerComponent),] }]
+};
 
 // --- Components ---
 const components = [
     DynamicBaseFormComponent,
-    DynamicBaseFormControlContainerComponent
+    DynamicBaseFormArrayComponent,
+    DynamicBaseFormControlContainerComponent,
+    DynamicBaseFormGroupComponent
 ];
 // --- Directives ---
 const directives = [
@@ -994,14 +1120,9 @@ class NgxDynamicFormModule {
             ngModule: NgxDynamicFormModule,
             providers: [
                 DynamicFormService,
-                DynamicFormValidationService,
                 {
                     provide: DynamicFormService$1,
                     useExisting: DynamicFormService
-                },
-                {
-                    provide: DynamicFormValidationService$1,
-                    useExisting: DynamicFormValidationService
                 }
             ]
         };
@@ -1049,5 +1170,5 @@ NgxDynamicFormModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicBaseFormComponent, DynamicBaseFormControlContainerComponent, DynamicFormService, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSelectSubject, FormSerializable, FormStatic, FormSubject, NgxDynamicFormModule, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, validateItemsMaxLength, validateItemsMaxValue, validateItemsMinLength, validateItemsMinValue, validateJSON, validatePhone, validateRequiredTranslation, components as ɵa, directives as ɵb, pipes as ɵc, DynamicFormValidationService as ɵd };
+export { AsyncSubmitDirective, DynamicBaseFormArrayComponent, DynamicBaseFormComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicFormService, FormFieldSet, FormFile, FormInput, FormModel, FormSelect, FormSelectSubject, FormSerializable, FormStatic, FormSubject, NgxDynamicFormModule, createFormControl, createFormInput, createFormModel, createFormSelect, createFormStatic, defaultSerializer, defineFormControl, getFormControl, getFormFieldSets, getFormSerializer, validateItemsMaxLength, validateItemsMaxValue, validateItemsMinLength, validateItemsMinValue, validateJSON, validatePhone, validateRequiredTranslation, components as ɵa, directives as ɵb, pipes as ɵc };
 //# sourceMappingURL=stemy-ngx-dynamic-form.js.map