@ng-simplicity/forms-core 1.0.0 → 1.1.0

package/fesm2022/ng-simplicity-forms-core.mjs

@@ -1,10 +1,9 @@
-import { Subject, takeUntil, BehaviorSubject, map, filter, of } from 'rxjs';
+import { Subject, takeUntil, BehaviorSubject, map, filter, merge, of } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, inject, Injectable, Injector, ViewContainerRef, Input, ChangeDetectionStrategy, Component, Sanitizer, SecurityContext, NgModule } from '@angular/core';
+import { Directive, InjectionToken, inject, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, Input, ChangeDetectionStrategy, Component, ElementRef, Sanitizer, SecurityContext, NgModule } from '@angular/core';
 import { v4 } from 'uuid';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup, FormControl, UntypedFormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { defaults } from 'lodash';
 import { CommonModule } from '@angular/common';
 
 class NgsSubscriber {
@@ -42,6 +41,20 @@ const NgsFormsFormControlAddRemoveFunctions = {
     }),
 };
 
+function ngsDefaults(target, ...sources) {
+    const result = target ? { ...target } : {};
+    for (const source of sources) {
+        if (!source)
+            continue;
+        for (const key of Object.keys(source)) {
+            if (result[key] === undefined) {
+                result[key] = source[key];
+            }
+        }
+    }
+    return result;
+}
+
 class NgsFormsBaseClassFormComponent extends NgsSubscriber {
     static key;
     id = v4();
@@ -164,7 +177,7 @@ class NgsFormsInternalService {
     }
     mergeState(key, update) {
         const obj = this.state.value[key] || {};
-        const updated = defaults(update, obj);
+        const updated = ngsDefaults(update, obj);
         this.state.value[key] = updated;
         this.state.next(this.state.value);
     }
@@ -174,9 +187,14 @@ class NgsFormsInternalService {
     updateComponentState(componentKey, state) {
         this.mergeState(componentKey, state);
     }
-    subscribeToState(fieldName) {
+    subscribeToState(uuid, name) {
         let last = '';
-        return this.state.pipe(map((allState) => defaults(allState[fieldName], allState['global'])), filter((currentState) => {
+        return this.state.pipe(map((allState) => {
+            const stateByUuid = allState[uuid] || {};
+            const stateByName = name ? (allState[name] || {}) : {};
+            const globalState = allState['global'] || {};
+            return ngsDefaults(stateByUuid, ngsDefaults(stateByName, globalState));
+        }), filter((currentState) => {
             const stringifiedState = JSON.stringify(currentState);
             const isUpdated = stringifiedState !== last;
             last = stringifiedState;
@@ -195,13 +213,40 @@ class NgsFormsFormItemWithVisibleAndValidatorsBase extends NgsFormsBaseClassForm
     errorMessage = '';
     formAddRemoveFns = inject(NGS_FORMS_CONTROL_ADD_REMOVE_FN);
     privateService = inject(NgsFormsInternalService);
+    changeDetectorRef = inject(ChangeDetectorRef);
     submitted = toSignal(this.privateService.isSubmitted$, { initialValue: false });
     ngOnInit() {
-        this.control = new FormControl(undefined, { validators: [] });
+        if (!this.control) {
+            this.control = new FormControl(undefined, { validators: [] });
+        }
         //this.bindVisible();
         this.bindValidators();
         //this.bindControlValidityChange();
         this.formAddRemoveFns.add(this.control, this.config.name);
+        // Listen to changes and update error message dynamically
+        this.subscribe(merge(this.control.valueChanges, this.control.statusChanges, this.privateService.isSubmitted$), () => {
+            this.updateErrorMessage();
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    updateErrorMessage() {
+        if (!this.control) {
+            this.errorMessage = '';
+            return;
+        }
+        const showErrors = this.control.invalid && (this.control.touched || this.control.dirty || this.submitted());
+        if (!showErrors) {
+            this.errorMessage = '';
+            return;
+        }
+        const errors = this.control.errors;
+        if (!errors) {
+            this.errorMessage = '';
+            return;
+        }
+        const firstErrorKey = Object.keys(errors)[0];
+        const map = this.config.errorMessageMap;
+        this.errorMessage = map?.[firstErrorKey] || `Field is invalid: ${firstErrorKey}`;
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -229,7 +274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 class NgsFormsBaseClassFormInputComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase {
     myFormService = inject(NgsFormsService);
     internalService = inject(NgsFormsInternalService);
-    commonState = toSignal(this.internalService.subscribeToState(this.config.name), { initialValue: {} });
+    commonState = toSignal(this.internalService.subscribeToState(this.itemData.uuid || '', this.config.name), { initialValue: {} });
     toggleDisplayMode(setTo) {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -264,16 +309,18 @@ class NgsFormItemController extends NgsSubscriber {
     itemData;
     addRemoveControlFn;
     index;
+    changeDetectorRef;
     componentRef;
     parentVisibility = new BehaviorSubject(false);
     lastVisible;
-    constructor(injector, viewContainerRef, itemData, addRemoveControlFn, index) {
+    constructor(injector, viewContainerRef, itemData, addRemoveControlFn, index, changeDetectorRef) {
         super();
         this.injector = injector;
         this.viewContainerRef = viewContainerRef;
         this.itemData = itemData;
         this.addRemoveControlFn = addRemoveControlFn;
         this.index = index;
+        this.changeDetectorRef = changeDetectorRef;
         this.bindVisibility();
     }
     destroy() {
@@ -281,16 +328,16 @@ class NgsFormItemController extends NgsSubscriber {
         super.ngOnDestroy();
     }
     bindVisibility() {
-        if (!this.itemData.visible$) {
-            this.create();
+        if (!this.itemData.config.visible$) {
+            Promise.resolve().then(() => this.create());
             return;
         }
-        this.subscribe(this.itemData.visible$, (visible) => {
+        this.subscribe(this.itemData.config.visible$, (visible) => {
             if (this.lastVisible === visible)
                 return;
             this.lastVisible = visible;
             if (visible) {
-                this.create();
+                Promise.resolve().then(() => this.create());
                 return;
             }
             this.detach();
@@ -314,11 +361,14 @@ class NgsFormItemController extends NgsSubscriber {
             return;
         }
         this.componentRef = this.viewContainerRef.createComponent(componentType, { injector: myInjector });
+        this.componentRef.changeDetectorRef?.detectChanges();
+        this.changeDetectorRef?.markForCheck();
         this.parentVisibility.next(true);
     }
     detach() {
         this.parentVisibility.next(false);
         this.componentRef?.destroy();
+        this.changeDetectorRef?.markForCheck();
     }
 }
 
@@ -330,6 +380,7 @@ class NgsFormsFormItemDirective {
     controller;
     viewContainerRef = inject(ViewContainerRef);
     injector = inject(Injector);
+    changeDetectorRef = inject(ChangeDetectorRef);
     formComponentRegistryService = inject(NgsFormsComponentRegistryService);
     ngOnInit() {
         if (!this.itemData) {
@@ -342,7 +393,7 @@ class NgsFormsFormItemDirective {
         if (this.formGroup) {
             addRemoveFn = NgsFormsFormControlAddRemoveFunctions.formGroup(this.formGroup);
         }
-        this.controller = new NgsFormItemController(this.injector, this.viewContainerRef, this.itemData, addRemoveFn, this.index);
+        this.controller = new NgsFormItemController(this.injector, this.viewContainerRef, this.itemData, addRemoveFn, this.index, this.changeDetectorRef);
     }
     ngOnDestroy() {
         this.controller?.destroy();
@@ -390,7 +441,7 @@ class NgsFormsColumnComponent extends NgsFormsBaseClassItemsContainerBase {
     static key = 'column';
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsColumnComponent.key,
             config,
         };
@@ -421,7 +472,7 @@ class NgsFormsRowComponent extends NgsFormsBaseClassFormComponent {
     }
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsRowComponent.key,
             config: config,
         };
@@ -436,12 +487,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 class NgsFormsFormGroupComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase {
     static key = 'form-group';
-    static create(config, items) {
+    static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsFormGroupComponent.key,
             config,
-            items,
         };
     }
     get formGroupControl() {
@@ -452,19 +502,18 @@ class NgsFormsFormGroupComponent extends NgsFormsFormItemWithVisibleAndValidator
         this.control = new UntypedFormGroup({});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormGroupComponent, isStandalone: true, selector: "ngs-forms-form-group", usesInheritance: true, ngImport: i0, template: "@if (itemData.items) {\n  @for (item of itemData.items; track item.uuid) {\n    <ng-container [ngs-form-item]=\"item\" [ngs-form-group]=\"formGroupControl\"></ng-container>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgsFormsFormItemDirective, selector: "[ngs-form-item]", inputs: ["ngs-form-item", "ngs-form-group", "ngs-form-array", "ngs-form-index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormGroupComponent, isStandalone: true, selector: "ngs-forms-form-group", usesInheritance: true, ngImport: i0, template: "@if (config.items) {\n  @for (item of config.items; track item.uuid) {\n    <ng-container [ngs-form-item]=\"item\" [ngs-form-group]=\"formGroupControl\"></ng-container>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgsFormsFormItemDirective, selector: "[ngs-form-item]", inputs: ["ngs-form-item", "ngs-form-group", "ngs-form-array", "ngs-form-index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-form-group', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (itemData.items) {\n  @for (item of itemData.items; track item.uuid) {\n    <ng-container [ngs-form-item]=\"item\" [ngs-form-group]=\"formGroupControl\"></ng-container>\n  }\n}\n" }]
+            args: [{ selector: 'ngs-forms-form-group', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.items) {\n  @for (item of config.items; track item.uuid) {\n    <ng-container [ngs-form-item]=\"item\" [ngs-form-group]=\"formGroupControl\"></ng-container>\n  }\n}\n" }]
         }], ctorParameters: () => [] });
 
 class NgsFormsFormArrayInternalService {
     config = inject(NGS_FORMS_ITEM_DATA).config;
     formArray = new UntypedFormArray([]);
-    addRemoveFn = inject(NGS_FORMS_CONTROL_ADD_REMOVE_FN);
+    itemsChanged = new Subject();
     constructor() {
-        this.addRemoveFn.add(this.formArray, this.config.name);
         if (this.config.initialItemCount) {
             for (let i = 0; i < this.config.initialItemCount; i++) {
                 this.addItem();
@@ -472,7 +521,6 @@ class NgsFormsFormArrayInternalService {
         }
     }
     ngOnDestroy() {
-        this.addRemoveFn.remove(this.formArray, this.config.name);
     }
     removeAt(index) {
         if (this.config?.minItems && this.formArray.controls.length <= this.config.minItems) {
@@ -482,12 +530,14 @@ class NgsFormsFormArrayInternalService {
             return;
         }
         this.formArray.removeAt(index);
+        this.itemsChanged.next();
     }
     addItem() {
         if (this.config?.maxItems && this.formArray.controls.length >= this.config.maxItems) {
             return;
         }
-        this.formArray.controls.push(new UntypedFormGroup({}));
+        this.formArray.push(new UntypedFormGroup({}));
+        this.itemsChanged.next();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayInternalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayInternalService });
@@ -501,7 +551,7 @@ class NgsFormsFormArrayAddItemComponent extends NgsFormsBaseClassFormComponent {
     internalArrayService = inject(NgsFormsFormArrayInternalService);
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsFormArrayAddItemComponent.key,
             config: config,
         };
@@ -510,37 +560,49 @@ class NgsFormsFormArrayAddItemComponent extends NgsFormsBaseClassFormComponent {
         this.internalArrayService.addItem();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayAddItemComponent, isStandalone: true, selector: "ngs-forms-form-array-add-item", usesInheritance: true, ngImport: i0, template: "<button\n  (click)=\"addItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-primary'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\"></i>\n  }\n  {{ config.buttonText || 'Add Item' }}\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayAddItemComponent, isStandalone: true, selector: "ngs-forms-form-array-add-item", usesInheritance: true, ngImport: i0, template: "<button\n  (click)=\"addItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-primary'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Add Item' }}\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayAddItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-form-array-add-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"addItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-primary'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\"></i>\n  }\n  {{ config.buttonText || 'Add Item' }}\n</button>\n" }]
+            args: [{ selector: 'ngs-forms-form-array-add-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"addItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-primary'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Add Item' }}\n</button>\n" }]
         }] });
 
 class NgsFormsFormArrayContainerComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase {
+    formArrayService;
     static key = 'form-array';
+    constructor(formArrayService) {
+        super();
+        this.formArrayService = formArrayService;
+        this.control = this.formArrayService.formArray;
+    }
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsFormArrayContainerComponent.key,
             config: config,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayContainerComponent, deps: [{ token: NgsFormsFormArrayInternalService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayContainerComponent, isStandalone: true, selector: "ngs-forms-form-array", providers: [NgsFormsFormArrayInternalService], usesInheritance: true, ngImport: i0, template: "<div [class]=\"config.containerClass || ''\">\n  @for (item of config.items; track item.uuid) {\n    <ng-container [ngs-form-item]=\"item\"></ng-container>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgsFormsFormItemDirective, selector: "[ngs-form-item]", inputs: ["ngs-form-item", "ngs-form-group", "ngs-form-array", "ngs-form-index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-forms-form-array', imports: [NgsFormsFormItemDirective], providers: [NgsFormsFormArrayInternalService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"config.containerClass || ''\">\n  @for (item of config.items; track item.uuid) {\n    <ng-container [ngs-form-item]=\"item\"></ng-container>\n  }\n</div>\n" }]
-        }] });
+        }], ctorParameters: () => [{ type: NgsFormsFormArrayInternalService }] });
 
 class NgsFormsFormArrayListComponent extends NgsFormsBaseClassFormComponent {
     static key = 'form-array-list';
     internalArrayService = inject(NgsFormsFormArrayInternalService);
     myFormArray = this.internalArrayService.formArray;
+    changeDetectorRef = inject(ChangeDetectorRef);
+    ngOnInit() {
+        this.subscribe(this.internalArrayService.itemsChanged, () => {
+            this.changeDetectorRef.markForCheck();
+        });
+    }
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsFormArrayListComponent.key,
             config: config,
         };
@@ -559,13 +621,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 class NgsFormsFormArrayRemoveItemComponent extends NgsFormsBaseClassFormComponent {
     static key = 'form-array-remove-item';
     internalArrayService = inject(NgsFormsFormArrayInternalService);
-    myIndex = inject(NGS_FORMS_ITEM_INDEX);
+    elementRef = inject(ElementRef);
+    indexFromDi = inject(NGS_FORMS_ITEM_INDEX, { optional: true });
+    get myIndex() {
+        if (this.indexFromDi !== null && this.indexFromDi !== undefined) {
+            return this.indexFromDi;
+        }
+        const el = this.elementRef.nativeElement;
+        const container = el.closest('[data-index]');
+        if (container) {
+            const idxAttr = container.getAttribute('data-index');
+            if (idxAttr !== null) {
+                return parseInt(idxAttr, 10);
+            }
+        }
+        return 0;
+    }
     constructor() {
         super();
     }
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsFormArrayRemoveItemComponent.key,
             config,
         };
@@ -574,18 +651,18 @@ class NgsFormsFormArrayRemoveItemComponent extends NgsFormsBaseClassFormComponen
         this.internalArrayService.removeAt(this.myIndex);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayRemoveItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayRemoveItemComponent, isStandalone: true, selector: "ngs-forms-form-array-remove-item", usesInheritance: true, ngImport: i0, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n  index:{{ myIndex }}\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayRemoveItemComponent, isStandalone: true, selector: "ngs-forms-form-array-remove-item", usesInheritance: true, ngImport: i0, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n  index:{{ myIndex }}\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayRemoveItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-form-array-remove-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n  index:{{ myIndex }}\n</button>\n" }]
+            args: [{ selector: 'ngs-forms-form-array-remove-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n  index:{{ myIndex }}\n</button>\n" }]
         }], ctorParameters: () => [] });
 
 class NgsFormsTextDivComponent extends NgsFormsBaseClassFormComponent {
     static key = 'text-div';
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsTextDivComponent.key,
             config: config,
         };
@@ -617,7 +694,7 @@ class NgsFormsHtmlContentComponent extends NgsFormsBaseClassFormComponent {
     }
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsHtmlContentComponent.key,
             config,
         };
@@ -639,13 +716,13 @@ class NgsFormsFormSectionComponent extends NgsFormsBaseClassItemsContainerBase {
     static key = 'section';
     static create(config) {
         return {
-            uuid: v4(),
+            uuid: config.uuid || v4(),
             type: NgsFormsFormSectionComponent.key,
             config: config,
         };
     }
     ngOnInit() {
-        this.config = defaults(this.config, sectionConfigDefaults);
+        this.config = ngsDefaults(this.config, sectionConfigDefaults);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormSectionComponent, isStandalone: true, selector: "ngs-forms-form-section", usesInheritance: true, ngImport: i0, template: "<div class=\"form-section\">\n  <div class=\"form-section-title {{config.titleClass}}\">{{ config.title }}</div>\n  @if (config.subtitle) {\n    <div class=\"form-section-subtitle {{config.subtitleClass}}\">{{ config.subtitle }}</div>\n  }\n  @if (config.items.length) {\n    <div class=\"form-section-items\">\n      @for (item of config.items; track item.uuid) {\n        <ng-container [ngs-form-item]=\"item\"></ng-container>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgsFormsFormItemDirective, selector: "[ngs-form-item]", inputs: ["ngs-form-item", "ngs-form-group", "ngs-form-array", "ngs-form-index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -683,5 +760,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NGS_FORMS_CONTROL_ADD_REMOVE_FN, NGS_FORMS_ITEM_DATA, NGS_FORMS_ITEM_INDEX, NgsFormComponent, NgsFormsBaseClassFormComponent, NgsFormsBaseClassFormInputComponent, NgsFormsBaseClassFormItemInputWithOptionsComponent, NgsFormsBaseClassItemsContainerBase, NgsFormsColumnComponent, NgsFormsComponentRegistryService, NgsFormsCoreModule, NgsFormsFormArrayAddItemComponent, NgsFormsFormArrayContainerComponent, NgsFormsFormArrayInternalService, NgsFormsFormArrayListComponent, NgsFormsFormArrayRemoveItemComponent, NgsFormsFormControlAddRemoveFunctions, NgsFormsFormGroupComponent, NgsFormsFormItemDirective, NgsFormsFormItemWithVisibleAndValidatorsBase, NgsFormsFormSectionComponent, NgsFormsHtmlContentComponent, NgsFormsInternalService, NgsFormsRowComponent, NgsFormsService, NgsFormsTextDivComponent, NgsSubscriber };
+export { NGS_FORMS_CONTROL_ADD_REMOVE_FN, NGS_FORMS_ITEM_DATA, NGS_FORMS_ITEM_INDEX, NgsFormComponent, NgsFormsBaseClassFormComponent, NgsFormsBaseClassFormInputComponent, NgsFormsBaseClassFormItemInputWithOptionsComponent, NgsFormsBaseClassItemsContainerBase, NgsFormsColumnComponent, NgsFormsComponentRegistryService, NgsFormsCoreModule, NgsFormsFormArrayAddItemComponent, NgsFormsFormArrayContainerComponent, NgsFormsFormArrayInternalService, NgsFormsFormArrayListComponent, NgsFormsFormArrayRemoveItemComponent, NgsFormsFormControlAddRemoveFunctions, NgsFormsFormGroupComponent, NgsFormsFormItemDirective, NgsFormsFormItemWithVisibleAndValidatorsBase, NgsFormsFormSectionComponent, NgsFormsHtmlContentComponent, NgsFormsInternalService, NgsFormsRowComponent, NgsFormsService, NgsFormsTextDivComponent, NgsSubscriber, ngsDefaults };
 //# sourceMappingURL=ng-simplicity-forms-core.mjs.map