@ng-simplicity/forms-core 1.0.0

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

@@ -0,0 +1,687 @@
+import { Subject, takeUntil, BehaviorSubject, map, filter, 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 { 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 {
+    destroy$ = new Subject();
+    subscriptions = [];
+    subscribe(subscribeTo, nextObserver) {
+        subscribeTo.pipe(takeUntil(this.destroy$)).subscribe(nextObserver);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.subscriptions.forEach((subscriber) => subscriber.unsubscribe());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsSubscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsSubscriber, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsSubscriber, decorators: [{
+            type: Directive
+        }] });
+
+const NGS_FORMS_ITEM_DATA = new InjectionToken('ngs-forms-item-data');
+const NGS_FORMS_CONTROL_ADD_REMOVE_FN = new InjectionToken('ngs-form-control-remove-fn');
+const NGS_FORMS_ITEM_INDEX = new InjectionToken('ngs-forms-item-index');
+const NgsFormsFormControlAddRemoveFunctions = {
+    formGroup: (formGroup) => ({
+        add: (control, controlName) => formGroup.addControl(controlName, control),
+        remove: (control, controlName) => formGroup.removeControl(controlName),
+    }),
+    formArray: (formArray) => ({
+        add: (control, controlName) => formArray.controls.push(control),
+        remove: (control, controlName) => {
+            const index = formArray.controls.indexOf(control);
+            formArray.controls.splice(index, 1);
+        },
+    }),
+};
+
+class NgsFormsBaseClassFormComponent extends NgsSubscriber {
+    static key;
+    id = v4();
+    config;
+    itemData;
+    constructor() {
+        super();
+        this.itemData = inject(NGS_FORMS_ITEM_DATA);
+        this.config = this.itemData.config;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsBaseClassFormComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassFormComponent, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: () => [] });
+
+class NgsFormsComponentRegistryService {
+    itemComponentRegistry = {};
+    getComponentTypeForKey(key) {
+        return this.itemComponentRegistry[key];
+    }
+    register(key, component) {
+        this.itemComponentRegistry[key] = component;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsComponentRegistryService, providedIn: 'platform' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsComponentRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'platform' }]
+        }] });
+
+class NgsFormsService {
+    attempt = 0;
+    formValue$ = new BehaviorSubject({});
+    formValue = {};
+    internalFormService;
+    formGroupSubscriptions = [];
+    formGroup = new UntypedFormGroup({});
+    get dirty() {
+        return this.formGroup?.dirty ?? false;
+    }
+    get isValid() {
+        if (!this.internalServiceIsSet)
+            return false;
+        return this.internalFormService.checkIsValid();
+    }
+    get internalServiceIsSet() {
+        return !!this.internalFormService;
+    }
+    setFormConfig(formConfig) {
+        if (!this.internalServiceIsSet) {
+            if (this.attempt > 20) {
+                console.error('Internal form service is unavailable.  Is the ngs-form root tag added to the page?');
+                return;
+            }
+            this.attempt++;
+            setTimeout(() => this.setFormConfig(formConfig), 25);
+            return;
+        }
+        this.internalFormService.setFormData(formConfig);
+    }
+    setInternalService(internalFormsService) {
+        this.internalFormService = internalFormsService;
+        this.bindFormGroup();
+    }
+    setIsSubmitted(isSubmitted) {
+        if (!this.internalServiceIsSet)
+            return;
+        this.internalFormService.setIsSubmitted(isSubmitted);
+    }
+    bindFormGroup() {
+        this.internalFormService.formGroup$.subscribe((fg) => {
+            this.formGroup = fg;
+            this.formGroupSubscriptions.forEach((subscription) => subscription.unsubscribe());
+            this.formGroupSubscriptions.push(this.formGroup.valueChanges.subscribe((v) => {
+                this.formValue = v;
+                this.formValue$.next(v);
+            }));
+        });
+    }
+    updateComponentState(componentKey, state) {
+        this.internalFormService?.updateComponentState(componentKey, state);
+    }
+    updateGlobalState(state) {
+        this.internalFormService?.updateGlobalState(state);
+    }
+    ngOnDestroy() {
+        this.formGroupSubscriptions.forEach((subscription) => subscription.unsubscribe());
+    }
+    patchValue(entityData) {
+        this.formGroup.patchValue(entityData);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsService, decorators: [{
+            type: Injectable
+        }] });
+
+class NgsFormsInternalService {
+    formGroup$ = new BehaviorSubject(new UntypedFormGroup({}));
+    formConfig$ = new BehaviorSubject(undefined);
+    isSubmitted$ = new BehaviorSubject(false);
+    state = new BehaviorSubject({});
+    setIsSubmitted(isSubmitted) {
+        this.isSubmitted$.next(isSubmitted);
+    }
+    checkIsValid() {
+        if (!this.formGroup$.value)
+            return false;
+        return this.formGroup$.value.valid;
+    }
+    setFormData(formConfig) {
+        this.formGroup$.next(new UntypedFormGroup({}));
+        this.formConfig$.next(formConfig);
+        this.isSubmitted$.next(false);
+    }
+    mergeState(key, update) {
+        const obj = this.state.value[key] || {};
+        const updated = defaults(update, obj);
+        this.state.value[key] = updated;
+        this.state.next(this.state.value);
+    }
+    updateGlobalState(state) {
+        this.mergeState('global', state);
+    }
+    updateComponentState(componentKey, state) {
+        this.mergeState(componentKey, state);
+    }
+    subscribeToState(fieldName) {
+        let last = '';
+        return this.state.pipe(map((allState) => defaults(allState[fieldName], allState['global'])), filter((currentState) => {
+            const stringifiedState = JSON.stringify(currentState);
+            const isUpdated = stringifiedState !== last;
+            last = stringifiedState;
+            return isUpdated;
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsInternalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsInternalService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsInternalService, decorators: [{
+            type: Injectable
+        }] });
+
+class NgsFormsFormItemWithVisibleAndValidatorsBase extends NgsFormsBaseClassFormComponent {
+    control;
+    errorMessage = '';
+    formAddRemoveFns = inject(NGS_FORMS_CONTROL_ADD_REMOVE_FN);
+    privateService = inject(NgsFormsInternalService);
+    submitted = toSignal(this.privateService.isSubmitted$, { initialValue: false });
+    ngOnInit() {
+        this.control = new FormControl(undefined, { validators: [] });
+        //this.bindVisible();
+        this.bindValidators();
+        //this.bindControlValidityChange();
+        this.formAddRemoveFns.add(this.control, this.config.name);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.formAddRemoveFns.remove(this.control, this.config.name);
+    }
+    bindValidators() {
+        if (!this.config.validators && !this.config.validators$)
+            return;
+        if (this.config.validators) {
+            this.control.setValidators(this.config.validators);
+            return;
+        }
+        if (this.config.validators$) {
+            this.subscribe(this.config.validators$, (validators) => this.control.setValidators(validators));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormItemWithVisibleAndValidatorsBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsFormItemWithVisibleAndValidatorsBase, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormItemWithVisibleAndValidatorsBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });
+
+class NgsFormsBaseClassFormInputComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase {
+    myFormService = inject(NgsFormsService);
+    internalService = inject(NgsFormsInternalService);
+    commonState = toSignal(this.internalService.subscribeToState(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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsBaseClassFormInputComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassFormInputComponent, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });
+
+class NgsFormsBaseClassItemsContainerBase extends NgsFormsBaseClassFormComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassItemsContainerBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsBaseClassItemsContainerBase, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassItemsContainerBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }] });
+
+class NgsFormsBaseClassFormItemInputWithOptionsComponent extends NgsFormsBaseClassFormInputComponent {
+    options = toSignal(this.config.options$ ?? of(this.config.options ?? []), { initialValue: this.config.options ?? [] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassFormItemInputWithOptionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsBaseClassFormItemInputWithOptionsComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsBaseClassFormItemInputWithOptionsComponent, decorators: [{
+            type: Directive
+        }] });
+
+class NgsFormItemController extends NgsSubscriber {
+    injector;
+    viewContainerRef;
+    itemData;
+    addRemoveControlFn;
+    index;
+    componentRef;
+    parentVisibility = new BehaviorSubject(false);
+    lastVisible;
+    constructor(injector, viewContainerRef, itemData, addRemoveControlFn, index) {
+        super();
+        this.injector = injector;
+        this.viewContainerRef = viewContainerRef;
+        this.itemData = itemData;
+        this.addRemoveControlFn = addRemoveControlFn;
+        this.index = index;
+        this.bindVisibility();
+    }
+    destroy() {
+        this.detach();
+        super.ngOnDestroy();
+    }
+    bindVisibility() {
+        if (!this.itemData.visible$) {
+            this.create();
+            return;
+        }
+        this.subscribe(this.itemData.visible$, (visible) => {
+            if (this.lastVisible === visible)
+                return;
+            this.lastVisible = visible;
+            if (visible) {
+                this.create();
+                return;
+            }
+            this.detach();
+        });
+    }
+    create() {
+        const providers = [{ provide: NGS_FORMS_ITEM_DATA, useValue: this.itemData }];
+        if (this.index !== undefined) {
+            providers.push({ provide: NGS_FORMS_ITEM_INDEX, useValue: this.index });
+        }
+        if (this.addRemoveControlFn) {
+            providers.push({ provide: NGS_FORMS_CONTROL_ADD_REMOVE_FN, useValue: this.addRemoveControlFn });
+        }
+        const myInjector = Injector.create({
+            parent: this.injector,
+            providers,
+        });
+        const componentType = this.injector.get(NgsFormsComponentRegistryService).getComponentTypeForKey(this.itemData.type);
+        if (!componentType) {
+            console.error(`Ngs form component type ${this.itemData.type} not registered.`);
+            return;
+        }
+        this.componentRef = this.viewContainerRef.createComponent(componentType, { injector: myInjector });
+        this.parentVisibility.next(true);
+    }
+    detach() {
+        this.parentVisibility.next(false);
+        this.componentRef?.destroy();
+    }
+}
+
+class NgsFormsFormItemDirective {
+    itemData = undefined;
+    formGroup;
+    formArray;
+    index;
+    controller;
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    formComponentRegistryService = inject(NgsFormsComponentRegistryService);
+    ngOnInit() {
+        if (!this.itemData) {
+            return console.error('Form item without form data');
+        }
+        let addRemoveFn = undefined;
+        if (this.formArray) {
+            addRemoveFn = NgsFormsFormControlAddRemoveFunctions.formArray(this.formArray);
+        }
+        if (this.formGroup) {
+            addRemoveFn = NgsFormsFormControlAddRemoveFunctions.formGroup(this.formGroup);
+        }
+        this.controller = new NgsFormItemController(this.injector, this.viewContainerRef, this.itemData, addRemoveFn, this.index);
+    }
+    ngOnDestroy() {
+        this.controller?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsFormItemDirective, isStandalone: true, selector: "[ngs-form-item]", inputs: { itemData: ["ngs-form-item", "itemData"], formGroup: ["ngs-form-group", "formGroup"], formArray: ["ngs-form-array", "formArray"], index: ["ngs-form-index", "index"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngs-form-item]',
+                    //templateUrl: "./form-item.component.html",
+                }]
+        }], propDecorators: { itemData: [{
+                type: Input,
+                args: ['ngs-form-item']
+            }], formGroup: [{
+                type: Input,
+                args: ['ngs-form-group']
+            }], formArray: [{
+                type: Input,
+                args: ['ngs-form-array']
+            }], index: [{
+                type: Input,
+                args: ['ngs-form-index']
+            }] } });
+
+class NgsFormComponent {
+    ngsInternalFormsService = inject(NgsFormsInternalService);
+    ngsFormsService = inject(NgsFormsService);
+    formGroup = toSignal(this.ngsInternalFormsService.formGroup$);
+    formConfig = toSignal(this.ngsInternalFormsService.formConfig$);
+    constructor() {
+        this.ngsFormsService.setInternalService(this.ngsInternalFormsService);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormComponent, isStandalone: true, selector: "ngs-form", providers: [NgsFormsInternalService], ngImport: i0, template: "@if (formConfig()?.root && formGroup()) {\n  <ng-container [ngs-form-group]=\"formGroup()!\" [ngs-form-item]=\"formConfig()!.root\"></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: NgsFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form', providers: [NgsFormsInternalService], imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (formConfig()?.root && formGroup()) {\n  <ng-container [ngs-form-group]=\"formGroup()!\" [ngs-form-item]=\"formConfig()!.root\"></ng-container>\n}\n\n" }]
+        }], ctorParameters: () => [] });
+
+class NgsFormsColumnComponent extends NgsFormsBaseClassItemsContainerBase {
+    static key = 'column';
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsColumnComponent.key,
+            config,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsColumnComponent, isStandalone: true, selector: "ngs-form-component-column", usesInheritance: true, ngImport: i0, template: "@for (item of config.items; track item.uuid) {\n  <ng-container [ngs-form-item]=\"item\"></ng-container>\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: NgsFormsColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-component-column', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of config.items; track item.uuid) {\n  <ng-container [ngs-form-item]=\"item\"></ng-container>\n}\n" }]
+        }] });
+
+// --
+
+class NgsFormsRowComponent extends NgsFormsBaseClassFormComponent {
+    static key = 'form-row';
+    constructor() {
+        super();
+    }
+    getIndividualRowDivClass(index) {
+        if (this.config.columnClass) {
+            return this.config.columnClass;
+        }
+        if (!this.config.columnClasses?.length) {
+            return '';
+        }
+        return this.config.columnClasses[index];
+    }
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsRowComponent.key,
+            config: config,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsRowComponent, isStandalone: true, selector: "ngs-forms-row-component", usesInheritance: true, ngImport: i0, template: "<div class=\"{{config.containerClass}}\">\n  @for(item of config.items; track item; let i = $index){\n    <div class=\"{{getIndividualRowDivClass(i)}}\">\n      <ng-container [ngs-form-item]=\"item\"></ng-container>\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-forms-row-component', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"{{config.containerClass}}\">\n  @for(item of config.items; track item; let i = $index){\n    <div class=\"{{getIndividualRowDivClass(i)}}\">\n      <ng-container [ngs-form-item]=\"item\"></ng-container>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+class NgsFormsFormGroupComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase {
+    static key = 'form-group';
+    static create(config, items) {
+        return {
+            uuid: v4(),
+            type: NgsFormsFormGroupComponent.key,
+            config,
+            items,
+        };
+    }
+    get formGroupControl() {
+        return this.control;
+    }
+    constructor() {
+        super();
+        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 });
+}
+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" }]
+        }], ctorParameters: () => [] });
+
+class NgsFormsFormArrayInternalService {
+    config = inject(NGS_FORMS_ITEM_DATA).config;
+    formArray = new UntypedFormArray([]);
+    addRemoveFn = inject(NGS_FORMS_CONTROL_ADD_REMOVE_FN);
+    constructor() {
+        this.addRemoveFn.add(this.formArray, this.config.name);
+        if (this.config.initialItemCount) {
+            for (let i = 0; i < this.config.initialItemCount; i++) {
+                this.addItem();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.addRemoveFn.remove(this.formArray, this.config.name);
+    }
+    removeAt(index) {
+        if (this.config?.minItems && this.formArray.controls.length <= this.config.minItems) {
+            return;
+        }
+        if (!this.formArray.controls.length) {
+            return;
+        }
+        this.formArray.removeAt(index);
+    }
+    addItem() {
+        if (this.config?.maxItems && this.formArray.controls.length >= this.config.maxItems) {
+            return;
+        }
+        this.formArray.controls.push(new UntypedFormGroup({}));
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayInternalService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class NgsFormsFormArrayAddItemComponent extends NgsFormsBaseClassFormComponent {
+    static key = 'form-array-add-item';
+    internalArrayService = inject(NgsFormsFormArrayInternalService);
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsFormArrayAddItemComponent.key,
+            config: config,
+        };
+    }
+    addItem() {
+        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 });
+}
+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" }]
+        }] });
+
+class NgsFormsFormArrayContainerComponent extends NgsFormsFormItemWithVisibleAndValidatorsBase {
+    static key = 'form-array';
+    static create(config) {
+        return {
+            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 ɵ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" }]
+        }] });
+
+class NgsFormsFormArrayListComponent extends NgsFormsBaseClassFormComponent {
+    static key = 'form-array-list';
+    internalArrayService = inject(NgsFormsFormArrayInternalService);
+    myFormArray = this.internalArrayService.formArray;
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsFormArrayListComponent.key,
+            config: config,
+        };
+    }
+    castToFormGroup(control) {
+        return control;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayListComponent, isStandalone: true, selector: "ngs-forms-form-array-list", usesInheritance: true, ngImport: i0, template: "@for (formGroup of myFormArray.controls; track formGroup; let i = $index) {\n  <div [attr.data-index]=\"$index\" [class]=\"config.containerClass || ''\">\n    <ng-container [ngs-form-group]=\"castToFormGroup(formGroup)\" [ngs-form-index]=\"i\"\n                  [ngs-form-item]=\"config.templateItem\"></ng-container>\n  </div>\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: NgsFormsFormArrayListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-forms-form-array-list', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (formGroup of myFormArray.controls; track formGroup; let i = $index) {\n  <div [attr.data-index]=\"$index\" [class]=\"config.containerClass || ''\">\n    <ng-container [ngs-form-group]=\"castToFormGroup(formGroup)\" [ngs-form-index]=\"i\"\n                  [ngs-form-item]=\"config.templateItem\"></ng-container>\n  </div>\n}\n" }]
+        }] });
+
+class NgsFormsFormArrayRemoveItemComponent extends NgsFormsBaseClassFormComponent {
+    static key = 'form-array-remove-item';
+    internalArrayService = inject(NgsFormsFormArrayInternalService);
+    myIndex = inject(NGS_FORMS_ITEM_INDEX);
+    constructor() {
+        super();
+    }
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsFormArrayRemoveItemComponent.key,
+            config,
+        };
+    }
+    removeItem() {
+        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 });
+}
+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" }]
+        }], ctorParameters: () => [] });
+
+class NgsFormsTextDivComponent extends NgsFormsBaseClassFormComponent {
+    static key = 'text-div';
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsTextDivComponent.key,
+            config: config,
+        };
+    }
+    static title(title, divClass = 'h2') {
+        return NgsFormsTextDivComponent.create({
+            text: title,
+            classes: divClass,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsTextDivComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsTextDivComponent, isStandalone: true, selector: "ngs-form-component-text-div", usesInheritance: true, ngImport: i0, template: "<div class=\"{{config.classes\">{{ config.text }}</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsTextDivComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-component-text-div', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"{{config.classes\">{{ config.text }}</div>\n" }]
+        }] });
+
+class NgsFormsHtmlContentComponent extends NgsFormsBaseClassFormComponent {
+    static key = 'content-html';
+    contentConfig = this.config;
+    html;
+    constructor() {
+        super();
+        const sanitizer = inject(Sanitizer);
+        this.html =
+            sanitizer.sanitize(SecurityContext.HTML, this.contentConfig.html) ||
+                '';
+    }
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsHtmlContentComponent.key,
+            config,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsHtmlContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsHtmlContentComponent, isStandalone: true, selector: "ngs-form-component-html-content", usesInheritance: true, ngImport: i0, template: "<div [innerHTML]=\"html\"></div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsHtmlContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-form-component-html-content', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [innerHTML]=\"html\"></div>\n" }]
+        }], ctorParameters: () => [] });
+
+const sectionConfigDefaults = {
+    titleClass: 'h3',
+    subtitleClass: 'lead',
+};
+
+class NgsFormsFormSectionComponent extends NgsFormsBaseClassItemsContainerBase {
+    static key = 'section';
+    static create(config) {
+        return {
+            uuid: v4(),
+            type: NgsFormsFormSectionComponent.key,
+            config: config,
+        };
+    }
+    ngOnInit() {
+        this.config = defaults(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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-forms-form-section', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }] });
+
+class NgsFormsCoreModule {
+    static registerCoreNgsFormComponents(registryService) {
+        registryService.register(NgsFormsFormGroupComponent.key, NgsFormsFormGroupComponent);
+        registryService.register(NgsFormsRowComponent.key, NgsFormsRowComponent);
+        registryService.register(NgsFormsColumnComponent.key, NgsFormsColumnComponent);
+        registryService.register(NgsFormsFormArrayContainerComponent.key, NgsFormsFormArrayContainerComponent);
+        registryService.register(NgsFormsFormArrayAddItemComponent.key, NgsFormsFormArrayAddItemComponent);
+        registryService.register(NgsFormsFormArrayRemoveItemComponent.key, NgsFormsFormArrayRemoveItemComponent);
+        registryService.register(NgsFormsFormArrayListComponent.key, NgsFormsFormArrayListComponent);
+        registryService.register(NgsFormsTextDivComponent.key, NgsFormsTextDivComponent);
+        //registryService.register('content-html', NgsFormsHtmlContentComponent);
+        registryService.register(NgsFormsFormSectionComponent.key, NgsFormsFormSectionComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsCoreModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsCoreModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule],
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=ng-simplicity-forms-core.mjs.map