@pepperi-addons/ngx-composite-lib 0.4.1-beta.1 → 0.4.1-beta.11

package/fesm2020/pepperi-addons-ngx-composite-lib-generic-form.mjs

@@ -4,7 +4,7 @@ import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@pepperi-addons/ngx-lib';
 import { ObjectsDataRow, UIControl, PepGuid, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
-import { PepFormComponent, PepFormModule } from '@pepperi-addons/ngx-lib/form';
+import { PepFormModule } from '@pepperi-addons/ngx-lib/form';
 import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
 import * as i4 from '@pepperi-addons/ngx-lib/page-layout';
 import { PepPageLayoutModule } from '@pepperi-addons/ngx-lib/page-layout';
@@ -12,294 +12,301 @@ import * as i5 from '@pepperi-addons/ngx-lib/top-bar';
 import { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';
 import { DataViewConverter } from '@pepperi-addons/data-views';
 
-class PepGenericFormService {
-    constructor() {
-        // 
-    }
-    /**
-     * checks if the object contains property
-     * @param obj object
-     * @param prop property name
-     * @returns true if contains, false otherwise
-    */
-    hasProperty(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    }
-    createFormField(data) {
-        let field = {};
-        field.ApiName = data.ApiName;
-        field.Value = data.controlFieldValue;
-        field.FieldType = data.FieldType;
-        field.Enabled = !data.ReadOnly;
-        field.Visible = !data.Hidden;
-        field.GroupFields = [];
-        field.Highlighted = false;
-        field.OptionalValues = data.OptionalValues;
-        field.AdditionalProps = data.AdditionalProps;
-        return field;
-    }
-    convertToUiControlField(field) {
-        return {
-            ApiName: field.ApiName,
-            FieldType: field.FieldType,
-            Title: field.Title,
-            ReadOnly: field.ReadOnlyField,
-            Mandatory: field.MandatoryField,
-            Hidden: field.Hidden,
-            ColumnWidth: field.ColumnWidth,
-            ColumnWidthType: 1,
-            MaxFieldCharacters: field.MaxCharacters,
-            MinValue: field.MinValue,
-            MaxValue: field.MaxValue,
-            Layout: {
-                X: field.Layout.X,
-                Y: field.Layout.Y,
-                Width: field.Layout.Width,
-                Height: field.Layout.Field_Height,
-                XAlignment: field.Layout.xAlignment,
-                YAlignment: field.Layout.yAlignment,
-            }
-        };
-    }
-}
-PepGenericFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PepGenericFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormService, decorators: [{
-            type: Injectable
+class PepGenericFormService {
+    constructor() {
+        // 
+    }
+    /**
+     * checks if the object contains property
+     * @param obj object
+     * @param prop property name
+     * @returns true if contains, false otherwise
+    */
+    hasProperty(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+    createFormField(data) {
+        let field = {};
+        field.ApiName = data.ApiName;
+        field.Value = data.controlFieldValue;
+        field.FieldType = data.FieldType;
+        field.Enabled = !data.ReadOnly;
+        field.Visible = !data.Hidden;
+        field.GroupFields = [];
+        field.Highlighted = false;
+        field.OptionalValues = data.OptionalValues;
+        field.AdditionalProps = data.AdditionalProps;
+        return field;
+    }
+    convertToUiControlField(field) {
+        return {
+            ApiName: field.ApiName,
+            FieldType: field.FieldType,
+            Title: field.Title,
+            ReadOnly: field.ReadOnlyField,
+            Mandatory: field.MandatoryField,
+            Hidden: field.Hidden,
+            ColumnWidth: field.ColumnWidth,
+            ColumnWidthType: 1,
+            MaxFieldCharacters: field.MaxCharacters,
+            MinValue: field.MinValue,
+            MaxValue: field.MaxValue,
+            Layout: {
+                X: field.Layout.X,
+                Y: field.Layout.Y,
+                Width: field.Layout.Width,
+                Height: field.Layout.Field_Height,
+                XAlignment: field.Layout.xAlignment,
+                YAlignment: field.Layout.yAlignment,
+            }
+        };
+    }
+}
+PepGenericFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PepGenericFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class GenericFormComponent {
-    constructor(_resolver, layoutService, _genericFormService) {
-        this._resolver = _resolver;
-        this.layoutService = layoutService;
-        this._genericFormService = _genericFormService;
-        this.isLocked = false;
-        this.inline = false;
-        this.showTopBar = false;
-        this.addPadding = false;
-        this.valueChange = new EventEmitter();
-        this.fieldClick = new EventEmitter();
-        this.formValidationChange = new EventEmitter();
-        this.layoutService.onResize$.pipe().subscribe((size) => {
-            //            
-        });
-        this._formData = new ObjectsDataRow();
-        this._uiControl = new UIControl();
-    }
-    set pepListContainer(val) {
-        this._pepFormContainer = val;
-    }
-    set dataSource(val) {
-        this._data = val;
-    }
-    set dataView(val) {
-        this.initForm(val);
-    }
-    ngOnInit() {
-        //
-    }
-    initForm(dataView) {
-        setTimeout(() => {
-            if (this._pepFormContainer) {
-                if (this._pepFormContainer.length) {
-                    this._pepFormContainer.remove();
-                    this._formData = new ObjectsDataRow();
-                    this._uiControl = new UIControl();
-                }
-                const factory = this._resolver.resolveComponentFactory(PepFormComponent);
-                const componentRef = this._pepFormContainer.createComponent(factory);
-                this._pepForm = componentRef.instance;
-                this._formData.IsEditable = !this.isLocked;
-                this._formData.UID = dataView.UID || PepGuid.newGuid();
-                const uiControlData = DataViewConverter.toUIControlData(dataView);
-                if (uiControlData) {
-                    if (uiControlData?.ControlFields) {
-                        this._uiControl.ControlFields = uiControlData.ControlFields.map((field) => this._genericFormService.convertToUiControlField(field));
-                    }
-                    this._uiControl.Columns = uiControlData.Columns;
-                    if (this._uiControl.ControlFields?.length) {
-                        this._formData.Fields = [];
-                        this._uiControl.ControlFields.forEach((item) => {
-                            let value = '';
-                            if (this._genericFormService.hasProperty(this._data, item.ApiName)) {
-                                value = this._data[item.ApiName];
-                            }
-                            let dataViewField;
-                            if (dataView.Fields) {
-                                dataViewField = dataView.Fields.find(field => field.FieldID === item.ApiName);
-                            }
-                            const controlFieldData = {
-                                ...item,
-                                ...{
-                                    controlFieldValue: value
-                                },
-                                ...{
-                                    OptionalValues: dataViewField?.OptionalValues?.length ? dataViewField.OptionalValues : [],
-                                    AdditionalProps: dataViewField?.AdditionalProps || null
-                                }
-                            };
-                            this._formData.Fields.push(this._genericFormService.createFormField(controlFieldData));
-                        });
-                        componentRef.instance.layoutType = 'form';
-                        componentRef.instance.layout = this._uiControl;
-                        componentRef.instance.data = this._formData;
-                        componentRef.instance.isInternal = false;
-                        componentRef.instance.lockFields = this.isLocked;
-                        componentRef.instance.valueChange.subscribe(($event) => {
-                            this.onValueChanged($event);
-                        });
-                        componentRef.instance.fieldClick.subscribe(($event) => {
-                            this.onfieldClicked($event);
-                        });
-                        componentRef.instance.formValidationChange.subscribe(($event) => {
-                            this.onFormValidationChanged($event);
-                        });
-                    }
-                }
-            }
-        }, 0);
-    }
-    /**
-     * updates form field's value
-     * @param field object containing the data of the required update
-     */
-    updateFieldValue(fieldChanged) {
-        this._data[fieldChanged.ApiName] = fieldChanged.Value;
-    }
-    getData() {
-        return {
-            UID: this._formData.UID,
-            Values: this._data
-        };
-    }
-    /**
-    * updates form field(s) params
-    * @param fields
-    */
-    updateFields(fields) {
-        fields.forEach((field) => {
-            const index = this._formData.Fields.findIndex((item) => item.ApiName === field.FieldId);
-            if (index >= 0) {
-                for (const [key, value] of Object.entries(field.Params)) {
-                    if (this._genericFormService.hasProperty(this._formData.Fields[index], key)) {
-                        const item = this._formData.Fields[index];
-                        item[key] = value;
-                    }
-                }
-            }
-        });
-        this._pepForm.ReloadForm();
-        this._pepForm.data = this._formData;
-    }
-    onValueChanged(event) {
-        const field = {
-            UID: event.id,
-            ApiName: event.key,
-            Value: event.value
-        };
-        this.updateFieldValue(field);
-        this.valueChange.emit(field);
-    }
-    onfieldClicked(event) {
-        const field = {
-            UID: event.id,
-            ApiName: event.key,
-            Value: event.value
-        };
-        this.updateFieldValue(field);
-        this.fieldClick.emit(field);
-    }
-    onFormValidationChanged(event) {
-        this.formValidationChange.emit(event);
-    }
-}
-GenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GenericFormComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i1.PepLayoutService }, { token: PepGenericFormService }], target: i0.ɵɵFactoryTarget.Component });
-GenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GenericFormComponent, selector: "pep-generic-form", inputs: { dataSource: "dataSource", dataView: "dataView", isLocked: "isLocked", inline: "inline", showTopBar: "showTopBar", addPadding: "addPadding" }, outputs: { valueChange: "valueChange", fieldClick: "fieldClick", formValidationChange: "formValidationChange" }, providers: [PepGenericFormService], viewQueries: [{ propertyName: "pepListContainer", first: true, predicate: ["pepFormContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <div pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [inline]=\"inline\"> \n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n\n        <!-- <div footer-start-content>\n            <ng-content select=\"[bottom-left-buttons]\"></ng-content>\n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[bottom-right-buttons]\"></ng-content>\n        </div> -->\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #formTemplate>\n    <div class=\"form-view\">\n        <ng-container #pepFormContainer></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i5.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GenericFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-generic-form', providers: [PepGenericFormService], template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <div pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [inline]=\"inline\"> \n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n\n        <!-- <div footer-start-content>\n            <ng-content select=\"[bottom-left-buttons]\"></ng-content>\n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[bottom-right-buttons]\"></ng-content>\n        </div> -->\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #formTemplate>\n    <div class=\"form-view\">\n        <ng-container #pepFormContainer></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i1.PepLayoutService }, { type: PepGenericFormService }]; }, propDecorators: { pepListContainer: [{
-                type: ViewChild,
-                args: ['pepFormContainer', { read: ViewContainerRef }]
-            }], dataSource: [{
-                type: Input
-            }], dataView: [{
-                type: Input
-            }], isLocked: [{
-                type: Input
-            }], inline: [{
-                type: Input
-            }], showTopBar: [{
-                type: Input
-            }], addPadding: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], fieldClick: [{
-                type: Output
-            }], formValidationChange: [{
-                type: Output
+class GenericFormComponent {
+    constructor(layoutService, _genericFormService) {
+        this.layoutService = layoutService;
+        this._genericFormService = _genericFormService;
+        this.isLocked = false;
+        this.inline = false;
+        this.showTopBar = false;
+        this.addPadding = false;
+        this.valueChange = new EventEmitter();
+        this.fieldClick = new EventEmitter();
+        this.formValidationChange = new EventEmitter();
+        this.layoutService.onResize$.pipe().subscribe((size) => {
+            //            
+        });
+        this._formData = new ObjectsDataRow();
+        this._uiControl = new UIControl();
+    }
+    set pepListContainer(val) {
+        this._pepFormContainer = val;
+    }
+    set dataSource(val) {
+        this._data = val;
+    }
+    set dataView(val) {
+        this.initForm(val);
+    }
+    ngOnInit() {
+        //        
+    }
+    initForm(dataView) {
+        setTimeout(async () => {
+            if (this._pepFormContainer) {
+                if (this._pepFormContainer.length) {
+                    this._pepFormContainer.remove();
+                    this._formData = new ObjectsDataRow();
+                    this._uiControl = new UIControl();
+                }
+                const { PepFormComponent } = await import('@pepperi-addons/ngx-lib/form');
+                const componentRef = this._pepFormContainer.createComponent(PepFormComponent);
+                this._pepForm = componentRef.instance;
+                this._formData.IsEditable = !this.isLocked;
+                this._formData.UID = dataView.UID || PepGuid.newGuid();
+                const uiControlData = DataViewConverter.toUIControlData(dataView);
+                if (uiControlData) {
+                    if (uiControlData?.ControlFields) {
+                        this._uiControl.ControlFields = uiControlData.ControlFields.map((field) => this._genericFormService.convertToUiControlField(field));
+                    }
+                    this._uiControl.Columns = uiControlData.Columns;
+                    if (this._uiControl.ControlFields?.length) {
+                        this._formData.Fields = [];
+                        this._uiControl.ControlFields.forEach((item) => {
+                            let value = '';
+                            if (this._genericFormService.hasProperty(this._data, item.ApiName)) {
+                                value = this._data[item.ApiName];
+                            }
+                            let dataViewField;
+                            if (dataView.Fields) {
+                                dataViewField = dataView.Fields.find(field => field.FieldID === item.ApiName);
+                            }
+                            const controlFieldData = {
+                                ...item,
+                                ...{
+                                    controlFieldValue: value
+                                },
+                                ...{
+                                    OptionalValues: dataViewField?.OptionalValues?.length ? dataViewField.OptionalValues : [],
+                                    AdditionalProps: dataViewField?.AdditionalProps || null
+                                }
+                            };
+                            this._formData.Fields.push(this._genericFormService.createFormField(controlFieldData));
+                        });
+                        componentRef.instance.layoutType = 'form';
+                        componentRef.instance.layout = this._uiControl;
+                        componentRef.instance.data = this._formData;
+                        componentRef.instance.isInternal = false;
+                        componentRef.instance.lockFields = this.isLocked;
+                        componentRef.instance.valueChange.subscribe(($event) => {
+                            this.onValueChanged($event);
+                        });
+                        componentRef.instance.fieldClick.subscribe(($event) => {
+                            this.onfieldClicked($event);
+                        });
+                        componentRef.instance.formValidationChange.subscribe(($event) => {
+                            this.onFormValidationChanged($event);
+                        });
+                    }
+                }
+            }
+        }, 0);
+    }
+    /**
+     * updates form field's value
+     * @param field object containing the data of the required update
+     */
+    updateFieldValue(fieldChanged) {
+        this._data[fieldChanged.ApiName] = fieldChanged.Value;
+    }
+    getData() {
+        return {
+            UID: this._formData.UID,
+            Values: this._data
+        };
+    }
+    /**
+    * updates form field(s) params
+    * @param fields
+    */
+    updateFields(fields) {
+        // update data view with current data
+        for (const [key, value] of Object.entries(this._data)) {
+            const index = this._formData.Fields.findIndex((item) => item.ApiName === key);
+            if (index >= 0) {
+                const item = this._formData.Fields[index];
+                item.Value = value;
+            }
+        }
+        fields.forEach((field) => {
+            const index = this._formData.Fields.findIndex((item) => item.ApiName === field.FieldId);
+            if (index >= 0) {
+                for (const [key, value] of Object.entries(field.Params)) {
+                    if (this._genericFormService.hasProperty(this._formData.Fields[index], key)) {
+                        const item = this._formData.Fields[index];
+                        item[key] = value;
+                    }
+                }
+            }
+        });
+        this._pepForm.ReloadForm();
+        this._pepForm.data = this._formData;
+    }
+    onValueChanged(event) {
+        const field = {
+            UID: event.id,
+            ApiName: event.key,
+            Value: event.value
+        };
+        this.updateFieldValue(field);
+        this.valueChange.emit(field);
+    }
+    onfieldClicked(event) {
+        const field = {
+            UID: event.id,
+            ApiName: event.key,
+            Value: event.value
+        };
+        this.updateFieldValue(field);
+        this.fieldClick.emit(field);
+    }
+    onFormValidationChanged(event) {
+        this.formValidationChange.emit(event);
+    }
+}
+GenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GenericFormComponent, deps: [{ token: i1.PepLayoutService }, { token: PepGenericFormService }], target: i0.ɵɵFactoryTarget.Component });
+GenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GenericFormComponent, selector: "pep-generic-form", inputs: { dataSource: "dataSource", dataView: "dataView", isLocked: "isLocked", inline: "inline", showTopBar: "showTopBar", addPadding: "addPadding" }, outputs: { valueChange: "valueChange", fieldClick: "fieldClick", formValidationChange: "formValidationChange" }, providers: [PepGenericFormService], viewQueries: [{ propertyName: "pepListContainer", first: true, predicate: ["pepFormContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <div pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [inline]=\"inline\"> \n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n\n        <!-- <div footer-start-content>\n            <ng-content select=\"[bottom-left-buttons]\"></ng-content>\n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[bottom-right-buttons]\"></ng-content>\n        </div> -->\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #formTemplate>\n    <div class=\"form-view\">\n        <ng-container #pepFormContainer></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.PepPageLayoutComponent, selector: "pep-page-layout", inputs: ["addPadding", "showShadow"] }, { kind: "component", type: i5.PepTopBarComponent, selector: "pep-top-bar", inputs: ["inline", "title"], outputs: ["footerStateChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GenericFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-generic-form', providers: [PepGenericFormService], template: "<div *ngIf=\"inline\" class=\"inline-container\" [ngClass]=\"{ 'add-padding': addPadding }\">\n    <div *ngIf=\"showTopBar\" class=\"inline-top-bar-container\">\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n</div>\n\n<pep-page-layout *ngIf=\"!inline\" [addPadding]=\"addPadding\">\n    <ng-container *ngIf=\"showTopBar\" pep-top-area>\n        <ng-container *ngTemplateOutlet=\"topBarTemplate\"></ng-container>\n    </ng-container>\n    <div pep-main-area class=\"main-area-container\">\n        <ng-container *ngTemplateOutlet=\"formTemplate\"></ng-container>\n    </div>\n</pep-page-layout>\n\n<ng-template #topBarTemplate>\n    <pep-top-bar [inline]=\"inline\"> \n        <div header-start-content>\n            <ng-content select=\"[left-buttons]\"></ng-content>\n        </div>\n        <div header-end-content>\n            <ng-content select=\"[right-buttons]\"></ng-content>\n        </div>\n\n        <!-- <div footer-start-content>\n            <ng-content select=\"[bottom-left-buttons]\"></ng-content>\n        </div>\n        <div footer-end-content>\n            <ng-content select=\"[bottom-right-buttons]\"></ng-content>\n        </div> -->\n    </pep-top-bar>\n</ng-template>\n\n<ng-template #formTemplate>\n    <div class=\"form-view\">\n        <ng-container #pepFormContainer></ng-container>\n    </div>\n</ng-template>\n", styles: [":host{height:inherit;display:block}.main-area-container{display:grid;height:inherit}.inline-container{height:inherit;display:grid;grid-template-rows:auto 1fr}.inline-container.add-padding{padding-inline:var(--pep-spacing-lg, 1rem)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.PepLayoutService }, { type: PepGenericFormService }]; }, propDecorators: { pepListContainer: [{
+                type: ViewChild,
+                args: ['pepFormContainer', { read: ViewContainerRef }]
+            }], dataSource: [{
+                type: Input
+            }], dataView: [{
+                type: Input
+            }], isLocked: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], showTopBar: [{
+                type: Input
+            }], addPadding: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], fieldClick: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
             }] } });
 
-class PepGenericFormModule {
-}
-PepGenericFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepGenericFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, declarations: [GenericFormComponent], imports: [CommonModule,
-        // MatFormFieldModule,
-        //   ReactiveFormsModule,
-        PepNgxLibModule,
-        // PepListModule,
-        PepFormModule,
-        PepMenuModule,
-        PepPageLayoutModule,
-        PepTopBarModule], exports: [GenericFormComponent] });
-PepGenericFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, providers: [
-        PepGenericFormService
-    ], imports: [CommonModule,
-        // MatFormFieldModule,
-        //   ReactiveFormsModule,
-        PepNgxLibModule,
-        // PepListModule,
-        PepFormModule,
-        PepMenuModule,
-        PepPageLayoutModule,
-        PepTopBarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        GenericFormComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        // MatFormFieldModule,
-                        //   ReactiveFormsModule,
-                        PepNgxLibModule,
-                        // PepListModule,
-                        PepFormModule,
-                        PepMenuModule,
-                        PepPageLayoutModule,
-                        PepTopBarModule,
-                        //   PepTextboxModule,
-                        //  PepDateModule
-                        //   PepSearchModule,
-                        //  PepBreadCrumbsModule
-                    ],
-                    exports: [
-                        GenericFormComponent
-                    ],
-                    providers: [
-                        PepGenericFormService
-                    ]
-                }]
+class PepGenericFormModule {
+}
+PepGenericFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepGenericFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, declarations: [GenericFormComponent], imports: [CommonModule,
+        // MatFormFieldModule,
+        //   ReactiveFormsModule,
+        PepNgxLibModule,
+        // PepListModule,
+        PepFormModule,
+        PepMenuModule,
+        PepPageLayoutModule,
+        PepTopBarModule], exports: [GenericFormComponent] });
+PepGenericFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, providers: [
+        PepGenericFormService
+    ], imports: [CommonModule,
+        // MatFormFieldModule,
+        //   ReactiveFormsModule,
+        PepNgxLibModule,
+        // PepListModule,
+        PepFormModule,
+        PepMenuModule,
+        PepPageLayoutModule,
+        PepTopBarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepGenericFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GenericFormComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        // MatFormFieldModule,
+                        //   ReactiveFormsModule,
+                        PepNgxLibModule,
+                        // PepListModule,
+                        PepFormModule,
+                        PepMenuModule,
+                        PepPageLayoutModule,
+                        PepTopBarModule,
+                        //   PepTextboxModule,
+                        //  PepDateModule
+                        //   PepSearchModule,
+                        //  PepBreadCrumbsModule
+                    ],
+                    exports: [
+                        GenericFormComponent
+                    ],
+                    providers: [
+                        PepGenericFormService
+                    ]
+                }]
         }] });
 
-/*
-* Public API Surface of ngx-composite-lib/generic-form
+/*
+* Public API Surface of ngx-composite-lib/generic-form
 */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { GenericFormComponent, PepGenericFormModule, PepGenericFormService };