@yomotech/view-toolkit 0.0.29 → 0.0.31

package/fesm2022/yomotech-view-toolkit.mjs

@@ -412,10 +412,10 @@ class UtilityService {
         return quantity;
     }
     replacePaginationParams(url, currentPage, pageSize) {
-        if (url.includes('{{pageNumber}}')) {
+        if (url && url.includes('{{pageNumber}}')) {
             url = url.replace(/{{pageNumber}}/g, currentPage.toString());
         }
-        if (url.includes('{{pageSize}}') && pageSize !== undefined) {
+        if (url && url.includes('{{pageSize}}') && pageSize !== undefined) {
             url = url.replace(/{{pageSize}}/g, pageSize.toString());
         }
         return url;
@@ -1280,180 +1280,239 @@ class FormComponent {
     selectedLanguageInfo = {};
     formButtonClick = new EventEmitter();
     checkBoxChangeEvent = new EventEmitter();
-    constructor() { }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     ngOnChanges(changes) {
+        if (changes['form'] && this.form) {
+            this.formCopy = this.safeClone(this.form);
+            this.setValidations();
+        }
+        if ((changes['selectedLanguageInfo'] || this.selectedLanguageInfo) &&
+            this.selectedLanguageInfo?.selectedLanguage) {
+            this.applySelectedLanguage();
+            this.setValidations();
+        }
+    }
+    ngAfterViewInit() {
         setTimeout(() => {
-            if (changes['form'] && this.form) {
-                this.formCopy = JSON.parse(JSON.stringify(this.form));
-            }
-            if ((changes['selectedLanguageInfo'] || this.selectedLanguageInfo) && this.selectedLanguageInfo.selectedLanguage) {
-                if (this.selectedLanguageInfo?.errorMessages) {
-                    this.errorMessages = this.selectedLanguageInfo.errorMessages;
-                }
-                this.form.propertySchema = this.formCopy.propertySchema ? JSON.parse(JSON.stringify(this.formCopy.propertySchema)) : {};
-                this.form.propertySchema = this.translateSchema(this.form.propertySchema, this.selectedLanguageInfo.selectedLanguage);
-                if (this.formCopy.layoutSchema && this.formCopy.layoutSchema.formSections) {
-                    this.formCopy.layoutSchema.formSections.forEach((formSection, index) => {
-                        if (formSection?.label?.caption && this.selectedLanguageInfo.selectedLanguage[formSection.label.caption]) {
-                            this.form.layoutSchema.formSections[index].label.caption = this.selectedLanguageInfo.selectedLanguage[formSection.label.caption];
-                        }
-                        if (formSection.formFields && formSection.formFields.length > 0) {
-                            formSection.formFields.forEach((formField, fieldIndex) => {
-                                if (formField.label?.caption && this.selectedLanguageInfo.selectedLanguage[formField.label.caption]) {
-                                    this.form.layoutSchema.formSections[index].formFields[fieldIndex].label.caption = this.selectedLanguageInfo.selectedLanguage[formField.label.caption];
-                                }
-                            });
-                        }
-                    });
-                }
-            }
-        }, 1000);
+            this.setValidations();
+        });
     }
-    translateSchema(schema, SelectedLanguage) {
-        if (schema && typeof schema === 'object' && SelectedLanguage) {
-            for (const key of Object.keys(schema)) {
-                const val = schema[key];
-                // If nested object → recurse
-                if (val && typeof val === 'object' && !Array.isArray(val)) {
-                    this.translateSchema(val, SelectedLanguage);
+    safeClone(value) {
+        try {
+            return JSON.parse(JSON.stringify(value || {}));
+        }
+        catch {
+            return {};
+        }
+    }
+    applySelectedLanguage() {
+        if (this.selectedLanguageInfo?.errorMessages) {
+            this.errorMessages = this.selectedLanguageInfo.errorMessages;
+        }
+        if (!this.formCopy || !this.form) {
+            return;
+        }
+        const selectedLanguage = this.selectedLanguageInfo.selectedLanguage;
+        this.form.propertySchema = this.formCopy.propertySchema
+            ? this.safeClone(this.formCopy.propertySchema)
+            : {};
+        this.form.propertySchema = this.translateSchema(this.form.propertySchema, selectedLanguage);
+        if (this.formCopy?.layoutSchema?.formSections?.length) {
+            this.formCopy.layoutSchema.formSections.forEach((formSection, sectionIndex) => {
+                if (formSection?.label?.caption &&
+                    selectedLanguage[formSection.label.caption]) {
+                    this.form.layoutSchema.formSections[sectionIndex].label.caption =
+                        selectedLanguage[formSection.label.caption];
                 }
-                // If array → loop items and recurse each one
-                if (Array.isArray(val)) {
-                    val.forEach((item) => {
-                        if (item && typeof item === 'object') {
-                            this.translateSchema(item, SelectedLanguage);
+                if (formSection?.formFields?.length) {
+                    formSection.formFields.forEach((formField, fieldIndex) => {
+                        if (formField?.label?.caption &&
+                            selectedLanguage[formField.label.caption]) {
+                            this.form.layoutSchema.formSections[sectionIndex].formFields[fieldIndex].label.caption = selectedLanguage[formField.label.caption];
                         }
                     });
                 }
-                // Translate caption
-                if (val &&
-                    typeof val === 'object' &&
-                    typeof val.caption === 'string' &&
-                    val.caption.trim()) {
-                    const original = val.caption.trim();
-                    if (SelectedLanguage[original]) {
-                        val.caption = SelectedLanguage[original];
+            });
+        }
+    }
+    translateSchema(schema, selectedLanguage) {
+        if (!schema || typeof schema !== 'object' || !selectedLanguage) {
+            return schema;
+        }
+        Object.keys(schema).forEach((key) => {
+            const value = schema[key];
+            if (value && typeof value === 'object' && !Array.isArray(value)) {
+                this.translateSchema(value, selectedLanguage);
+            }
+            if (Array.isArray(value)) {
+                value.forEach((item) => {
+                    if (item && typeof item === 'object') {
+                        this.translateSchema(item, selectedLanguage);
                     }
+                });
+            }
+            if (value &&
+                typeof value === 'object' &&
+                typeof value.caption === 'string' &&
+                value.caption.trim()) {
+                const original = value.caption.trim();
+                if (selectedLanguage[original]) {
+                    value.caption = selectedLanguage[original];
                 }
-                // Translate placeholder
-                if (val &&
-                    typeof val === 'object' &&
-                    typeof val.placeholder === 'string' &&
-                    val.placeholder.trim()) {
-                    const original = val.placeholder.trim();
-                    if (SelectedLanguage[original]) {
-                        val.placeholder = SelectedLanguage[original];
-                    }
+            }
+            if (value &&
+                typeof value === 'object' &&
+                typeof value.placeholder === 'string' &&
+                value.placeholder.trim()) {
+                const original = value.placeholder.trim();
+                if (selectedLanguage[original]) {
+                    value.placeholder = selectedLanguage[original];
                 }
             }
-        }
+        });
         return schema;
     }
-    togglePasswordVisibility() {
-        this.showPassword = !this.showPassword;
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.setValidations();
-        }, 2000);
-    }
     getStyleWithoutClasses(styleObject) {
-        if (!styleObject) {
+        if (!styleObject || typeof styleObject !== 'object') {
             return { classes: '', style: {} };
         }
         const { classes, ...styleWithoutClasses } = styleObject;
-        return { classes: classes && classes.length > 0 ? classes[0] : '', style: styleWithoutClasses };
+        return {
+            classes: Array.isArray(classes) ? classes.join(' ') : classes || '',
+            style: styleWithoutClasses || {},
+        };
+    }
+    getSectionBodyStyle(formSection) {
+        const layout = formSection?.layout || {};
+        const schemaStyle = this.getStyleWithoutClasses(formSection?.style).style;
+        return {
+            display: schemaStyle?.display || 'grid',
+            gridTemplateColumns: schemaStyle?.gridTemplateColumns ||
+                `repeat(${layout?.desktopColumns || 12}, minmax(0, 1fr))`,
+            gap: schemaStyle?.gap || layout?.gap || '10px',
+            alignItems: schemaStyle?.alignItems || 'start',
+            width: '100%',
+            boxSizing: 'border-box',
+            ...schemaStyle,
+        };
+    }
+    getFieldWrapperStyle(formField) {
+        const schemaStyle = this.getStyleWithoutClasses(formField?.style).style;
+        return {
+            minWidth: 0,
+            width: '100%',
+            boxSizing: 'border-box',
+            ...schemaStyle,
+        };
+    }
+    getFieldInnerLayoutStyle(formField) {
+        if (formField?.layout === 'horizontal') {
+            return {
+                display: 'grid',
+                gridTemplateColumns: 'minmax(110px, 30%) 1fr',
+                alignItems: 'center',
+                gap: '10px',
+            };
+        }
+        return {
+            display: 'block',
+        };
     }
     getScope(scope) {
-        let propertyScope = "";
-        let start = scope?.indexOf("#/") + 2;
-        let end = scope?.indexOf("/", start);
-        if (start && end) {
-            propertyScope = scope.substring(start, end);
+        if (!scope || typeof scope !== 'string') {
+            return '';
         }
-        return propertyScope;
+        const start = scope.indexOf('#/') + 2;
+        const end = scope.indexOf('/', start);
+        if (start >= 2 && end > start) {
+            return scope.substring(start, end);
+        }
+        return '';
+    }
+    togglePasswordVisibility() {
+        this.showPassword = !this.showPassword;
     }
     invokeFormBtnClick(option, propertySchema) {
-        this.formButtonClick.emit({ option: option, propertySchema: propertySchema });
+        this.formButtonClick.emit({
+            option,
+            propertySchema,
+        });
     }
     setformData() {
-        this.checkBoxChangeEvent.emit();
+        this.checkBoxChangeEvent.emit(this.form?.propertySchema);
     }
     setErroMessage(formField, errorMessages, field) {
-        let error = "";
-        let fieldName = "";
+        let error = '';
+        let fieldName = '';
         if (field?.errors?.required) {
-            error = errorMessages.required;
+            error = errorMessages?.required || '';
         }
-        else if (field?.errors?.email || field.errors?.pattern) {
-            error = errorMessages.pattern;
+        else if (field?.errors?.email || field?.errors?.pattern) {
+            error = errorMessages?.pattern || '';
         }
         else if (field?.errors?.minlength) {
-            error = errorMessages.minlength;
+            error = errorMessages?.minlength || '';
         }
         else if (field?.errors?.maxlength) {
-            error = errorMessages.maxlength;
+            error = errorMessages?.maxlength || '';
         }
-        if (formField.label?.value) {
-            fieldName = formField.label?.value;
+        if (formField?.label?.value) {
+            fieldName = formField.label.value;
         }
         else {
-            let propertySchema = this.form.propertySchema[this.getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()];
-            fieldName = propertySchema?.caption ? propertySchema.caption : propertySchema?.placeholder;
+            const scope = this.getScope(formField?.scope?.reference);
+            const key = formField?.scope?.reference?.split('/').pop();
+            const propertySchema = this.form?.propertySchema?.[scope]?.[key];
+            fieldName = propertySchema?.caption || propertySchema?.placeholder || '';
         }
-        if (error && error.toString().includes("{{requiredLength}}")) {
-            error = error.replace(/{{\s*requiredLength\s*}}/g, formField?.minlength.toString());
+        if (error && error.toString().includes('{{requiredLength}}')) {
+            error = error.replace(/{{\s*requiredLength\s*}}/g, formField?.minlength?.toString() || '');
         }
         return error.replace(/{{\s*field\s*}}/g, fieldName);
     }
     setValidations() {
-        if (this.form?.layoutSchema?.formSections?.length) {
-            this.form?.layoutSchema?.formSections.forEach((formSection) => {
-                if (formSection?.formFields?.length) {
-                    formSection.formFields.forEach((formField) => {
-                        if (formField.scope && this.form.propertySchema && Object.keys(this.form.propertySchema)?.length && this.form.propertySchema[this.getScope(formField.scope?.reference)]) {
-                            let validations = this.form.propertySchema[this.getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.validation;
-                            if (validations?.length > 0) {
-                                validations.forEach((validation) => {
-                                    if (validation.required) {
-                                        formField['required'] = true;
-                                    }
-                                    if (validation.email) {
-                                        formField['email'] = true;
-                                    }
-                                    if (validation.minlength) {
-                                        formField['minlength'] = validation.minlength;
-                                    }
-                                    if (validation.maxlength) {
-                                        formField['maxlength'] = validation.maxlength;
-                                    }
-                                });
-                            }
-                        }
-                    });
+        if (!this.form?.layoutSchema?.formSections?.length) {
+            return;
+        }
+        this.form.layoutSchema.formSections.forEach((formSection) => {
+            if (!formSection?.formFields?.length) {
+                return;
+            }
+            formSection.formFields.forEach((formField) => {
+                const reference = formField?.scope?.reference;
+                if (!reference || !this.form?.propertySchema) {
+                    return;
+                }
+                const scope = this.getScope(reference);
+                const key = reference.split('/').pop();
+                const property = this.form.propertySchema?.[scope]?.[key];
+                if (!property?.validation?.length) {
+                    return;
                 }
+                property.validation.forEach((validation) => {
+                    if (validation.required) {
+                        formField.required = true;
+                    }
+                    if (validation.email) {
+                        formField.email = true;
+                    }
+                    if (validation.minlength) {
+                        formField.minlength = validation.minlength;
+                    }
+                    if (validation.maxlength) {
+                        formField.maxlength = validation.maxlength;
+                    }
+                });
             });
-        }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: FormComponent, isStandalone: true, selector: "vl-form", inputs: { errorMessages: "errorMessages", creditCardError: "creditCardError", form: "form", selectedLanguageInfo: "selectedLanguageInfo" }, outputs: { formButtonClick: "formButtonClick", checkBoxChangeEvent: "checkBoxChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<div [style]=\"getStyleWithoutClasses(form?.layoutSchema?.style).style\" [class]=\"form?.layoutSchema?.style?.classes[0]\">\r\n  <form *ngIf=\"form?.layoutSchema?.formSections?.length > 0\">\r\n    <span *ngFor=\"let formSection of form?.layoutSchema?.formSections\">\r\n      <div *ngIf=\"formSection.label.caption\" [class]=\"formSection?.label?.style?.classes[0]\"\r\n        [style]=\"getStyleWithoutClasses(formSection?.label?.style).style\">\r\n        {{formSection.label.caption}}\r\n      </div>\r\n      <div [class]=\"formSection?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(formSection?.style).style\"\r\n        *ngIf=\"formSection.formFields?.length > 0\">\r\n        <div *ngFor=\"let formField of formSection.formFields\" [class]=\"formField?.style?.classes[0]\">\r\n          <div\r\n            [ngSwitch]=\"formField?.scope?.reference && form.propertySchema[getScope(formField.scope?.reference)] ?\r\n             form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n            <!-- image control -->\r\n            <div *ngSwitchCase=\"'image'\" [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <img [src]=\"formField.option.src\" [alt]=\"'img'\" />\r\n            </div>\r\n\r\n            <!-- credit card control -->\r\n            <div *ngSwitchCase=\"'carditCard'\" [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <div id=\"card-element\">\r\n                <!-- a Stripe element will be inserted here -->\r\n              </div>\r\n              <!-- Used to display form errors -->\r\n              <div id=\"card-errors\" [class]=\"creditCardError.textContent!=='' ? 'text-red-400 m-0': ''\"></div>\r\n            </div>\r\n\r\n            <!-- string control -->\r\n            <span *ngSwitchCase=\"'string'\" class=\"form-group\">\r\n              <span *ngIf=\"formField.option.protected\">\r\n                <h5 style=\"display: flex; justify-content: space-between;\">\r\n                  <span [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                    [class]=\"formField?.label?.style?.classes[0]\">\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}\r\n                  </span>\r\n                  <span>\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.value\r\n                    }}\r\n                  </span>\r\n                </h5>\r\n              </span>\r\n              <span *ngIf=\"!formField.option.protected\">\r\n                <div [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                  <label [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                    [class]=\"formField?.label?.style?.classes[0]\">{{ formField.label?.value ?\r\n                    formField.label?.value : formField.label?.caption ? formField.label?.caption :\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}</label>\r\n                  <div\r\n                    [ngStyle]=\"formField?.option.password ?  {'position':'relative','display':'flex','align-items':'center'} : {}\">\r\n                    <input [type]=\"formField?.option.password ? !showPassword ?  'password' : 'text' : 'text'\"\r\n                      #inputField=\"ngModel\" [required]=\"formField?.required\" [attr.inputmode]=\"\r\n                      formField?.option?.email ? 'email' :\r\n                      formField?.option?.password ? 'numeric' :\r\n                      'text'\" [pattern]=\"formField?.email ? customEmailPattern : ''\" [email]=\"formField?.email\"\r\n                      [class]=\"formField?.scope?.style?.classes[0]\" [minlength]=\"formField?.minlength\"\r\n                      [maxlength]=\"formField?.maxlength\" [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n                      [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                      [name]=\"formField.scope?.reference\"\r\n                      [placeholder]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.placeholder\" />\r\n\r\n                    <!-- Eye Icon -->\r\n                    <i *ngIf=\"formField?.option.password\" class=\"fa\"\r\n                      [ngClass]=\"showPassword ? 'fa-eye' : 'fa-eye-slash'\" (click)=\"togglePasswordVisibility()\"\r\n                      style=\"position: absolute; right: 10px; cursor: pointer;\">\r\n                    </i>\r\n                  </div>\r\n                </div>\r\n                <!-- Error Message -->\r\n                <div *ngIf=\"inputField?.touched && inputField?.invalid\"\r\n                  [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\r\n                  <p [class]=\"formField?.layout == 'horizontal' ? 'text-red-400 m-0 horizontal-error' : 'text-red-400 m-0'\"\r\n                    *ngIf=\"inputField?.errors\">{{ setErroMessage(formField, errorMessages, inputField) }}</p>\r\n                </div>\r\n              </span>\r\n            </span>\r\n\r\n            <!-- number control -->\r\n            <div *ngSwitchCase=\"'number'\" class=\"form-group\">\r\n              <span *ngIf=\"formField.option.protected\" [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                [class]=\"formField?.label?.style?.classes[0]\">\r\n                <h5>{{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }} {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.value\r\n                  |\r\n                  currency:formField.option.currency :true: formField.option?.decimalPoint}}\r\n                </h5>\r\n              </span>\r\n              <span *ngIf=\"!formField.option.protected\">\r\n                <div [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                  <label [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                    [class]=\"formField?.label?.style?.classes[0]\">{{ formField.label?.value ?\r\n                    formField.label?.value :\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}</label>\r\n                  <input type=\"number\" [class]=\"formField?.scope?.style?.classes[0]\"\r\n                    [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                    [name]=\"formField.scope?.reference\"\r\n                    [placeholder]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.placeholder\" />\r\n                </div>\r\n              </span>\r\n            </div>\r\n\r\n            <!-- checkBox control -->\r\n            <div *ngSwitchCase=\"'checkbox'\" class=\"form-group\"\r\n              [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <span *ngIf=\"formField.option?.postfixCaption\">\r\n                <label class=\"form-check-label\"><input type=\"checkbox\" class=\"form-check-input mr-2\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                    [name]=\"formField.scope?.reference\" (ngModelChange)=\"setformData()\" />{{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }}</label>\r\n              </span>\r\n              <div *ngIf=\"!formField.option?.postfixCaption\"\r\n                [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                <label class=\"form-check-label\">{{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }}\r\n                  <input type=\"checkbox\" class=\"form-check-input\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                    [name]=\"formField.scope?.reference\" /></label>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- dropdown control -->\r\n            <div *ngSwitchCase=\"'dropdown'\" class=\"form-group\"\r\n              [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <span *ngIf=\"formField.option?.postfixCaption\">\r\n                <select id=\"dynamic-dropdown\" [class]=\"formField?.scope?.style?.classes[0]\" #dropdownField=\"ngModel\"\r\n                  [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\" [name]=\"formField.scope?.reference\"\r\n                  [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope.split('/').pop()].value\">\r\n                  <option\r\n                    *ngFor=\"let item of form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\r\n                    [value]=\"formField.option.optionValue\"> {{ formField.option.optionLabel}}</option>\r\n                </select>\r\n                <label\r\n                  [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }}</label>\r\n              </span>\r\n              <div *ngIf=\"!formField.option?.postfixCaption\">\r\n                <div [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                  <label\r\n                    [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}</label>\r\n\r\n                  <nz-select nzShowSearch nzAllowClear nzPlaceHolder=\"Select\" #dropdownField=\"ngModel\"\r\n                    [required]=\"formField?.required\" [class]=\"formField?.scope?.style?.classes[0]\"\r\n                    [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\" [name]=\"formField.scope?.reference\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\r\n                    <nz-option\r\n                      *ngFor=\"let item of form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\r\n                      [nzLabel]=\"item[formField.option.optionLabel]\"\r\n                      [nzValue]=\"item[formField.option.optionValue]\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n                <!-- Error Message -->\r\n                <div *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\r\n                  [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\r\n                  <p [class]=\"formField?.layout == 'horizontal' ? 'text-red-400 m-0 horizontal-error' : 'text-red-400 m-0'\"\r\n                    *ngIf=\"dropdownField?.errors\">{{ setErroMessage(formField, errorMessages, dropdownField) }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- button control -->\r\n            <div *ngSwitchCase=\"'default'\">\r\n              <button type=\"submit\" [style]=\"getStyleWithoutClasses(formField.style).style\"\r\n                (click)=\"invokeFormBtnClick(formField.option, form.propertySchema)\"\r\n                [class]=\"formField?.style?.classes[0]\">\r\n                {{ formField.label?.caption }}\r\n              </button>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </span>\r\n  </form>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: 
-                // Angular
-                CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: 
-                // NG-ZORRO
-                NzSelectModule }, { kind: "component", type: i3.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: FormComponent, isStandalone: true, selector: "vl-form", inputs: { errorMessages: "errorMessages", creditCardError: "creditCardError", form: "form", selectedLanguageInfo: "selectedLanguageInfo" }, outputs: { formButtonClick: "formButtonClick", checkBoxChangeEvent: "checkBoxChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-renderer\" [ngClass]=\"getStyleWithoutClasses(form?.layoutSchema?.style)?.classes\"\r\n  [ngStyle]=\"getStyleWithoutClasses(form?.layoutSchema?.style)?.style\">\r\n  <form *ngIf=\"form?.layoutSchema?.formSections?.length > 0\">\r\n    <div *ngFor=\"let formSection of form?.layoutSchema?.formSections; let i = index\" class=\"section-card\">\r\n      <div *ngIf=\"formSection?.label?.caption\" class=\"section-header\">\r\n        <div class=\"section-title\" [ngClass]=\"getStyleWithoutClasses(formSection?.label?.style)?.classes\"\r\n          [ngStyle]=\"getStyleWithoutClasses(formSection?.label?.style)?.style\">\r\n          {{ formSection.label.caption }}\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"formSection?.formFields?.length > 0\" class=\"section-body\"\r\n        [ngClass]=\"getStyleWithoutClasses(formSection?.style)?.classes\" [ngStyle]=\"getSectionBodyStyle(formSection)\">\r\n        <div *ngFor=\"let formField of formSection.formFields\" class=\"field-row\"\r\n          [ngClass]=\"getStyleWithoutClasses(formField?.style)?.classes\" [ngStyle]=\"getFieldWrapperStyle(formField)\">\r\n          <div [ngSwitch]=\"\r\n              formField?.scope?.reference &&\r\n              form?.propertySchema?.[getScope(formField.scope?.reference)]\r\n                ? form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                  ]?.type\r\n                : 'default'\r\n            \">\r\n            <!-- image control -->\r\n            <div *ngSwitchCase=\"'image'\" [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <img [src]=\"formField?.option?.src\" [alt]=\"'img'\" />\r\n            </div>\r\n\r\n            <!-- credit card control -->\r\n            <div *ngSwitchCase=\"'carditCard'\" [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <div id=\"card-element\"></div>\r\n              <div id=\"card-errors\" [class]=\"creditCardError?.textContent !== '' ? 'text-red-400 m-0' : ''\"></div>\r\n            </div>\r\n\r\n            <!-- string control -->\r\n            <span *ngSwitchCase=\"'string'\" class=\"form-group\">\r\n              <span *ngIf=\"formField?.option?.protected\">\r\n                <h5 style=\"display: flex; justify-content: space-between\">\r\n                  <span [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </span>\r\n\r\n                  <span>\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.value\r\n                    }}\r\n                  </span>\r\n                </h5>\r\n              </span>\r\n\r\n              <span *ngIf=\"!formField?.option?.protected\">\r\n                <div [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                  <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    formField?.label?.value\r\n                    ? formField.label.value\r\n                    : formField?.label?.caption\r\n                    ? formField.label.caption\r\n                    : form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </label>\r\n\r\n                  <div [ngStyle]=\"\r\n                      formField?.option?.password\r\n                        ? {\r\n                            position: 'relative',\r\n                            display: 'flex',\r\n                            alignItems: 'center'\r\n                          }\r\n                        : {}\r\n                    \">\r\n                    <input [type]=\"\r\n                        formField?.option?.password\r\n                          ? !showPassword\r\n                            ? 'password'\r\n                            : 'text'\r\n                          : 'text'\r\n                      \" #inputField=\"ngModel\" [required]=\"formField?.required\" [attr.inputmode]=\"\r\n                        formField?.option?.email\r\n                          ? 'email'\r\n                          : formField?.option?.password\r\n                          ? 'numeric'\r\n                          : 'text'\r\n                      \" [pattern]=\"formField?.email ? customEmailPattern : ''\" [email]=\"formField?.email\"\r\n                      [minlength]=\"formField?.minlength\" [maxlength]=\"formField?.maxlength\"\r\n                      [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                      [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\" [(ngModel)]=\"\r\n                        form.propertySchema[getScope(formField.scope?.reference)][\r\n                          formField.scope?.reference.split('/').pop()\r\n                        ].value\r\n                      \" [name]=\"formField.scope?.reference\" [placeholder]=\"\r\n                        form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                          formField.scope?.reference.split('/').pop()\r\n                        ]?.placeholder\r\n                      \" />\r\n\r\n                    <i *ngIf=\"formField?.option?.password\" class=\"fa\"\r\n                      [ngClass]=\"showPassword ? 'fa-eye' : 'fa-eye-slash'\" (click)=\"togglePasswordVisibility()\"\r\n                      style=\"position: absolute; right: 10px; cursor: pointer\"></i>\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"inputField?.touched && inputField?.invalid\"\r\n                  [ngClass]=\"getStyleWithoutClasses(formField?.validation?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.validation?.style)?.style\">\r\n                  <p [class]=\"\r\n                      formField?.layout === 'horizontal'\r\n                        ? 'text-red-400 m-0 horizontal-error'\r\n                        : 'text-red-400 m-0'\r\n                    \" *ngIf=\"inputField?.errors\">\r\n                    {{ setErroMessage(formField, errorMessages, inputField) }}\r\n                  </p>\r\n                </div>\r\n              </span>\r\n            </span>\r\n\r\n            <!-- number control -->\r\n            <div *ngSwitchCase=\"'number'\" class=\"form-group\">\r\n              <span *ngIf=\"formField?.option?.protected\"\r\n                [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                <h5>\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.value\r\n                  | currency\r\n                  : formField?.option?.currency\r\n                  : true\r\n                  : formField?.option?.decimalPoint\r\n                  }}\r\n                </h5>\r\n              </span>\r\n\r\n              <span *ngIf=\"!formField?.option?.protected\">\r\n                <div [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                  <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    formField?.label?.value\r\n                    ? formField.label.value\r\n                    : form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </label>\r\n\r\n                  <input type=\"number\" [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \" [name]=\"formField.scope?.reference\" [placeholder]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ]?.placeholder\r\n                    \" />\r\n                </div>\r\n              </span>\r\n            </div>\r\n\r\n            <!-- checkbox control -->\r\n            <div *ngSwitchCase=\"'checkbox'\" class=\"form-group\"\r\n              [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <span *ngIf=\"formField?.option?.postfixCaption\">\r\n                <label class=\"form-check-label\">\r\n                  <input type=\"checkbox\" class=\"form-check-input mr-2\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \" [name]=\"formField.scope?.reference\" (ngModelChange)=\"setformData()\" />\r\n\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n                </label>\r\n              </span>\r\n\r\n              <div *ngIf=\"!formField?.option?.postfixCaption\" [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                <label class=\"form-check-label\">\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n\r\n                  <input type=\"checkbox\" class=\"form-check-input\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \" [name]=\"formField.scope?.reference\" (ngModelChange)=\"setformData()\" />\r\n                </label>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- dropdown control -->\r\n            <div *ngSwitchCase=\"'dropdown'\" class=\"form-group\"\r\n              [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <span *ngIf=\"formField?.option?.postfixCaption\">\r\n                <select id=\"dynamic-dropdown\" #dropdownField=\"ngModel\"\r\n                  [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\" [name]=\"formField.scope?.reference\"\r\n                  [(ngModel)]=\"\r\n                    form.propertySchema[getScope(formField.scope?.reference)][\r\n                      formField.scope?.reference.split('/').pop()\r\n                    ].value\r\n                  \">\r\n                  <option *ngFor=\"\r\n                      let item of form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ]?.data\r\n                    \" [value]=\"item[formField?.option?.optionValue]\">\r\n                    {{ item[formField?.option?.optionLabel] }}\r\n                  </option>\r\n                </select>\r\n\r\n                <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n                </label>\r\n              </span>\r\n\r\n              <div *ngIf=\"!formField?.option?.postfixCaption\">\r\n                <div [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                  <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </label>\r\n\r\n                  <nz-select nzShowSearch nzAllowClear nzPlaceHolder=\"Select\" #dropdownField=\"ngModel\"\r\n                    [required]=\"formField?.required\"\r\n                    [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\"\r\n                    [name]=\"formField.scope?.reference\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \">\r\n                    <nz-option *ngFor=\"\r\n                        let item of form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                          formField.scope?.reference.split('/').pop()\r\n                        ]?.data\r\n                      \" [nzLabel]=\"item[formField?.option?.optionLabel]\"\r\n                      [nzValue]=\"item[formField?.option?.optionValue]\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <div *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\r\n                  [ngClass]=\"getStyleWithoutClasses(formField?.validation?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.validation?.style)?.style\">\r\n                  <p [class]=\"\r\n                      formField?.layout === 'horizontal'\r\n                        ? 'text-red-400 m-0 horizontal-error'\r\n                        : 'text-red-400 m-0'\r\n                    \" *ngIf=\"dropdownField?.errors\">\r\n                    {{ setErroMessage(formField, errorMessages, dropdownField) }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- button/default control -->\r\n            <div *ngSwitchCase=\"'default'\">\r\n              <button type=\"submit\" [ngClass]=\"getStyleWithoutClasses(formField?.style)?.classes\"\r\n                [ngStyle]=\"getStyleWithoutClasses(formField?.style)?.style\"\r\n                (click)=\"invokeFormBtnClick(formField?.option, form.propertySchema)\">\r\n                {{ formField?.label?.caption }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>", styles: [":host{display:block;width:100%;height:100%;min-height:0}.form-renderer{width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;padding:12px}.section-card{border:1px solid #e5e7eb;border-radius:var(--radius-sm, 8px);padding:12px;margin-bottom:12px;background:#fff;box-sizing:border-box}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:600}.section-title{font-size:14px;color:#0f172a}.section-body{position:relative;width:100%;min-height:78px;box-sizing:border-box}.field-row{position:relative;min-width:0;width:100%;box-sizing:border-box}.field-row input,.field-row select,.field-row nz-select,.field-row textarea,.field-row button{max-width:100%;box-sizing:border-box}@media(max-width:768px){.section-body{grid-template-columns:repeat(1,minmax(0,1fr))!important}.field-row{grid-column:span 1!important}}@media(min-width:769px)and (max-width:1024px){.section-body{grid-template-columns:repeat(6,minmax(0,1fr))!important}.field-row{grid-column:span 6!important}}:host-context(.mobile-frame) .section-body,:host-context(.device-mobile) .section-body{grid-template-columns:repeat(1,minmax(0,1fr))!important}:host-context(.mobile-frame) .field-row,:host-context(.device-mobile) .field-row{grid-column:span 1!important}:host-context(.tablet-frame) .section-body,:host-context(.device-tablet) .section-body{grid-template-columns:repeat(6,minmax(0,1fr))!important}:host-context(.tablet-frame) .field-row,:host-context(.device-tablet) .field-row{grid-column:span 6!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i3.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
-                        // Angular
-                        CommonModule,
-                        FormsModule,
-                        // NG-ZORRO
-                        NzSelectModule
-                    ], selector: 'vl-form', template: "<div [style]=\"getStyleWithoutClasses(form?.layoutSchema?.style).style\" [class]=\"form?.layoutSchema?.style?.classes[0]\">\r\n  <form *ngIf=\"form?.layoutSchema?.formSections?.length > 0\">\r\n    <span *ngFor=\"let formSection of form?.layoutSchema?.formSections\">\r\n      <div *ngIf=\"formSection.label.caption\" [class]=\"formSection?.label?.style?.classes[0]\"\r\n        [style]=\"getStyleWithoutClasses(formSection?.label?.style).style\">\r\n        {{formSection.label.caption}}\r\n      </div>\r\n      <div [class]=\"formSection?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(formSection?.style).style\"\r\n        *ngIf=\"formSection.formFields?.length > 0\">\r\n        <div *ngFor=\"let formField of formSection.formFields\" [class]=\"formField?.style?.classes[0]\">\r\n          <div\r\n            [ngSwitch]=\"formField?.scope?.reference && form.propertySchema[getScope(formField.scope?.reference)] ?\r\n             form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n            <!-- image control -->\r\n            <div *ngSwitchCase=\"'image'\" [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <img [src]=\"formField.option.src\" [alt]=\"'img'\" />\r\n            </div>\r\n\r\n            <!-- credit card control -->\r\n            <div *ngSwitchCase=\"'carditCard'\" [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <div id=\"card-element\">\r\n                <!-- a Stripe element will be inserted here -->\r\n              </div>\r\n              <!-- Used to display form errors -->\r\n              <div id=\"card-errors\" [class]=\"creditCardError.textContent!=='' ? 'text-red-400 m-0': ''\"></div>\r\n            </div>\r\n\r\n            <!-- string control -->\r\n            <span *ngSwitchCase=\"'string'\" class=\"form-group\">\r\n              <span *ngIf=\"formField.option.protected\">\r\n                <h5 style=\"display: flex; justify-content: space-between;\">\r\n                  <span [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                    [class]=\"formField?.label?.style?.classes[0]\">\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}\r\n                  </span>\r\n                  <span>\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.value\r\n                    }}\r\n                  </span>\r\n                </h5>\r\n              </span>\r\n              <span *ngIf=\"!formField.option.protected\">\r\n                <div [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                  <label [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                    [class]=\"formField?.label?.style?.classes[0]\">{{ formField.label?.value ?\r\n                    formField.label?.value : formField.label?.caption ? formField.label?.caption :\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}</label>\r\n                  <div\r\n                    [ngStyle]=\"formField?.option.password ?  {'position':'relative','display':'flex','align-items':'center'} : {}\">\r\n                    <input [type]=\"formField?.option.password ? !showPassword ?  'password' : 'text' : 'text'\"\r\n                      #inputField=\"ngModel\" [required]=\"formField?.required\" [attr.inputmode]=\"\r\n                      formField?.option?.email ? 'email' :\r\n                      formField?.option?.password ? 'numeric' :\r\n                      'text'\" [pattern]=\"formField?.email ? customEmailPattern : ''\" [email]=\"formField?.email\"\r\n                      [class]=\"formField?.scope?.style?.classes[0]\" [minlength]=\"formField?.minlength\"\r\n                      [maxlength]=\"formField?.maxlength\" [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n                      [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                      [name]=\"formField.scope?.reference\"\r\n                      [placeholder]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.placeholder\" />\r\n\r\n                    <!-- Eye Icon -->\r\n                    <i *ngIf=\"formField?.option.password\" class=\"fa\"\r\n                      [ngClass]=\"showPassword ? 'fa-eye' : 'fa-eye-slash'\" (click)=\"togglePasswordVisibility()\"\r\n                      style=\"position: absolute; right: 10px; cursor: pointer;\">\r\n                    </i>\r\n                  </div>\r\n                </div>\r\n                <!-- Error Message -->\r\n                <div *ngIf=\"inputField?.touched && inputField?.invalid\"\r\n                  [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\r\n                  <p [class]=\"formField?.layout == 'horizontal' ? 'text-red-400 m-0 horizontal-error' : 'text-red-400 m-0'\"\r\n                    *ngIf=\"inputField?.errors\">{{ setErroMessage(formField, errorMessages, inputField) }}</p>\r\n                </div>\r\n              </span>\r\n            </span>\r\n\r\n            <!-- number control -->\r\n            <div *ngSwitchCase=\"'number'\" class=\"form-group\">\r\n              <span *ngIf=\"formField.option.protected\" [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                [class]=\"formField?.label?.style?.classes[0]\">\r\n                <h5>{{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }} {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.value\r\n                  |\r\n                  currency:formField.option.currency :true: formField.option?.decimalPoint}}\r\n                </h5>\r\n              </span>\r\n              <span *ngIf=\"!formField.option.protected\">\r\n                <div [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                  <label [style]=\"getStyleWithoutClasses(formField?.label?.style).style\"\r\n                    [class]=\"formField?.label?.style?.classes[0]\">{{ formField.label?.value ?\r\n                    formField.label?.value :\r\n                    form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}</label>\r\n                  <input type=\"number\" [class]=\"formField?.scope?.style?.classes[0]\"\r\n                    [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                    [name]=\"formField.scope?.reference\"\r\n                    [placeholder]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.placeholder\" />\r\n                </div>\r\n              </span>\r\n            </div>\r\n\r\n            <!-- checkBox control -->\r\n            <div *ngSwitchCase=\"'checkbox'\" class=\"form-group\"\r\n              [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <span *ngIf=\"formField.option?.postfixCaption\">\r\n                <label class=\"form-check-label\"><input type=\"checkbox\" class=\"form-check-input mr-2\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                    [name]=\"formField.scope?.reference\" (ngModelChange)=\"setformData()\" />{{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }}</label>\r\n              </span>\r\n              <div *ngIf=\"!formField.option?.postfixCaption\"\r\n                [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                <label class=\"form-check-label\">{{\r\n                  form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }}\r\n                  <input type=\"checkbox\" class=\"form-check-input\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\"\r\n                    [name]=\"formField.scope?.reference\" /></label>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- dropdown control -->\r\n            <div *ngSwitchCase=\"'dropdown'\" class=\"form-group\"\r\n              [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\"\r\n              [class]=\"formField?.scope?.style?.classes[0]\">\r\n              <span *ngIf=\"formField.option?.postfixCaption\">\r\n                <select id=\"dynamic-dropdown\" [class]=\"formField?.scope?.style?.classes[0]\" #dropdownField=\"ngModel\"\r\n                  [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\" [name]=\"formField.scope?.reference\"\r\n                  [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope.split('/').pop()].value\">\r\n                  <option\r\n                    *ngFor=\"let item of form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\r\n                    [value]=\"formField.option.optionValue\"> {{ formField.option.optionLabel}}</option>\r\n                </select>\r\n                <label\r\n                  [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                  }}</label>\r\n              </span>\r\n              <div *ngIf=\"!formField.option?.postfixCaption\">\r\n                <div [class]=\"formField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n                  <label\r\n                    [style]=\"getStyleWithoutClasses(formField?.label?.style).style\">{{form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption\r\n                    }}</label>\r\n\r\n                  <nz-select nzShowSearch nzAllowClear nzPlaceHolder=\"Select\" #dropdownField=\"ngModel\"\r\n                    [required]=\"formField?.required\" [class]=\"formField?.scope?.style?.classes[0]\"\r\n                    [style]=\"getStyleWithoutClasses(formField?.scope?.style).style\" [name]=\"formField.scope?.reference\"\r\n                    [(ngModel)]=\"form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()].value\">\r\n                    <nz-option\r\n                      *ngFor=\"let item of form.propertySchema[getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.data\"\r\n                      [nzLabel]=\"item[formField.option.optionLabel]\"\r\n                      [nzValue]=\"item[formField.option.optionValue]\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n                <!-- Error Message -->\r\n                <div *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\r\n                  [style]=\"getStyleWithoutClasses(formField?.validation?.style).style\">\r\n                  <p [class]=\"formField?.layout == 'horizontal' ? 'text-red-400 m-0 horizontal-error' : 'text-red-400 m-0'\"\r\n                    *ngIf=\"dropdownField?.errors\">{{ setErroMessage(formField, errorMessages, dropdownField) }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- button control -->\r\n            <div *ngSwitchCase=\"'default'\">\r\n              <button type=\"submit\" [style]=\"getStyleWithoutClasses(formField.style).style\"\r\n                (click)=\"invokeFormBtnClick(formField.option, form.propertySchema)\"\r\n                [class]=\"formField?.style?.classes[0]\">\r\n                {{ formField.label?.caption }}\r\n              </button>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </span>\r\n  </form>\r\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { errorMessages: [{
+            args: [{ standalone: true, imports: [CommonModule, FormsModule, NzSelectModule], selector: 'vl-form', template: "<div class=\"form-renderer\" [ngClass]=\"getStyleWithoutClasses(form?.layoutSchema?.style)?.classes\"\r\n  [ngStyle]=\"getStyleWithoutClasses(form?.layoutSchema?.style)?.style\">\r\n  <form *ngIf=\"form?.layoutSchema?.formSections?.length > 0\">\r\n    <div *ngFor=\"let formSection of form?.layoutSchema?.formSections; let i = index\" class=\"section-card\">\r\n      <div *ngIf=\"formSection?.label?.caption\" class=\"section-header\">\r\n        <div class=\"section-title\" [ngClass]=\"getStyleWithoutClasses(formSection?.label?.style)?.classes\"\r\n          [ngStyle]=\"getStyleWithoutClasses(formSection?.label?.style)?.style\">\r\n          {{ formSection.label.caption }}\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"formSection?.formFields?.length > 0\" class=\"section-body\"\r\n        [ngClass]=\"getStyleWithoutClasses(formSection?.style)?.classes\" [ngStyle]=\"getSectionBodyStyle(formSection)\">\r\n        <div *ngFor=\"let formField of formSection.formFields\" class=\"field-row\"\r\n          [ngClass]=\"getStyleWithoutClasses(formField?.style)?.classes\" [ngStyle]=\"getFieldWrapperStyle(formField)\">\r\n          <div [ngSwitch]=\"\r\n              formField?.scope?.reference &&\r\n              form?.propertySchema?.[getScope(formField.scope?.reference)]\r\n                ? form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                  ]?.type\r\n                : 'default'\r\n            \">\r\n            <!-- image control -->\r\n            <div *ngSwitchCase=\"'image'\" [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <img [src]=\"formField?.option?.src\" [alt]=\"'img'\" />\r\n            </div>\r\n\r\n            <!-- credit card control -->\r\n            <div *ngSwitchCase=\"'carditCard'\" [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <div id=\"card-element\"></div>\r\n              <div id=\"card-errors\" [class]=\"creditCardError?.textContent !== '' ? 'text-red-400 m-0' : ''\"></div>\r\n            </div>\r\n\r\n            <!-- string control -->\r\n            <span *ngSwitchCase=\"'string'\" class=\"form-group\">\r\n              <span *ngIf=\"formField?.option?.protected\">\r\n                <h5 style=\"display: flex; justify-content: space-between\">\r\n                  <span [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </span>\r\n\r\n                  <span>\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.value\r\n                    }}\r\n                  </span>\r\n                </h5>\r\n              </span>\r\n\r\n              <span *ngIf=\"!formField?.option?.protected\">\r\n                <div [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                  <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    formField?.label?.value\r\n                    ? formField.label.value\r\n                    : formField?.label?.caption\r\n                    ? formField.label.caption\r\n                    : form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </label>\r\n\r\n                  <div [ngStyle]=\"\r\n                      formField?.option?.password\r\n                        ? {\r\n                            position: 'relative',\r\n                            display: 'flex',\r\n                            alignItems: 'center'\r\n                          }\r\n                        : {}\r\n                    \">\r\n                    <input [type]=\"\r\n                        formField?.option?.password\r\n                          ? !showPassword\r\n                            ? 'password'\r\n                            : 'text'\r\n                          : 'text'\r\n                      \" #inputField=\"ngModel\" [required]=\"formField?.required\" [attr.inputmode]=\"\r\n                        formField?.option?.email\r\n                          ? 'email'\r\n                          : formField?.option?.password\r\n                          ? 'numeric'\r\n                          : 'text'\r\n                      \" [pattern]=\"formField?.email ? customEmailPattern : ''\" [email]=\"formField?.email\"\r\n                      [minlength]=\"formField?.minlength\" [maxlength]=\"formField?.maxlength\"\r\n                      [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                      [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\" [(ngModel)]=\"\r\n                        form.propertySchema[getScope(formField.scope?.reference)][\r\n                          formField.scope?.reference.split('/').pop()\r\n                        ].value\r\n                      \" [name]=\"formField.scope?.reference\" [placeholder]=\"\r\n                        form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                          formField.scope?.reference.split('/').pop()\r\n                        ]?.placeholder\r\n                      \" />\r\n\r\n                    <i *ngIf=\"formField?.option?.password\" class=\"fa\"\r\n                      [ngClass]=\"showPassword ? 'fa-eye' : 'fa-eye-slash'\" (click)=\"togglePasswordVisibility()\"\r\n                      style=\"position: absolute; right: 10px; cursor: pointer\"></i>\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"inputField?.touched && inputField?.invalid\"\r\n                  [ngClass]=\"getStyleWithoutClasses(formField?.validation?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.validation?.style)?.style\">\r\n                  <p [class]=\"\r\n                      formField?.layout === 'horizontal'\r\n                        ? 'text-red-400 m-0 horizontal-error'\r\n                        : 'text-red-400 m-0'\r\n                    \" *ngIf=\"inputField?.errors\">\r\n                    {{ setErroMessage(formField, errorMessages, inputField) }}\r\n                  </p>\r\n                </div>\r\n              </span>\r\n            </span>\r\n\r\n            <!-- number control -->\r\n            <div *ngSwitchCase=\"'number'\" class=\"form-group\">\r\n              <span *ngIf=\"formField?.option?.protected\"\r\n                [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                <h5>\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.value\r\n                  | currency\r\n                  : formField?.option?.currency\r\n                  : true\r\n                  : formField?.option?.decimalPoint\r\n                  }}\r\n                </h5>\r\n              </span>\r\n\r\n              <span *ngIf=\"!formField?.option?.protected\">\r\n                <div [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                  <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    formField?.label?.value\r\n                    ? formField.label.value\r\n                    : form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </label>\r\n\r\n                  <input type=\"number\" [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \" [name]=\"formField.scope?.reference\" [placeholder]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ]?.placeholder\r\n                    \" />\r\n                </div>\r\n              </span>\r\n            </div>\r\n\r\n            <!-- checkbox control -->\r\n            <div *ngSwitchCase=\"'checkbox'\" class=\"form-group\"\r\n              [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <span *ngIf=\"formField?.option?.postfixCaption\">\r\n                <label class=\"form-check-label\">\r\n                  <input type=\"checkbox\" class=\"form-check-input mr-2\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \" [name]=\"formField.scope?.reference\" (ngModelChange)=\"setformData()\" />\r\n\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n                </label>\r\n              </span>\r\n\r\n              <div *ngIf=\"!formField?.option?.postfixCaption\" [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                <label class=\"form-check-label\">\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n\r\n                  <input type=\"checkbox\" class=\"form-check-input\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \" [name]=\"formField.scope?.reference\" (ngModelChange)=\"setformData()\" />\r\n                </label>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- dropdown control -->\r\n            <div *ngSwitchCase=\"'dropdown'\" class=\"form-group\"\r\n              [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n              [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\">\r\n              <span *ngIf=\"formField?.option?.postfixCaption\">\r\n                <select id=\"dynamic-dropdown\" #dropdownField=\"ngModel\"\r\n                  [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\" [name]=\"formField.scope?.reference\"\r\n                  [(ngModel)]=\"\r\n                    form.propertySchema[getScope(formField.scope?.reference)][\r\n                      formField.scope?.reference.split('/').pop()\r\n                    ].value\r\n                  \">\r\n                  <option *ngFor=\"\r\n                      let item of form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ]?.data\r\n                    \" [value]=\"item[formField?.option?.optionValue]\">\r\n                    {{ item[formField?.option?.optionLabel] }}\r\n                  </option>\r\n                </select>\r\n\r\n                <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                  {{\r\n                  form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                  formField.scope?.reference.split('/').pop()\r\n                  ]?.caption\r\n                  }}\r\n                </label>\r\n              </span>\r\n\r\n              <div *ngIf=\"!formField?.option?.postfixCaption\">\r\n                <div [ngStyle]=\"getFieldInnerLayoutStyle(formField)\">\r\n                  <label [ngClass]=\"getStyleWithoutClasses(formField?.label?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.label?.style)?.style\">\r\n                    {{\r\n                    form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                    formField.scope?.reference.split('/').pop()\r\n                    ]?.caption\r\n                    }}\r\n                  </label>\r\n\r\n                  <nz-select nzShowSearch nzAllowClear nzPlaceHolder=\"Select\" #dropdownField=\"ngModel\"\r\n                    [required]=\"formField?.required\"\r\n                    [ngClass]=\"getStyleWithoutClasses(formField?.scope?.style)?.classes\"\r\n                    [ngStyle]=\"getStyleWithoutClasses(formField?.scope?.style)?.style\"\r\n                    [name]=\"formField.scope?.reference\" [(ngModel)]=\"\r\n                      form.propertySchema[getScope(formField.scope?.reference)][\r\n                        formField.scope?.reference.split('/').pop()\r\n                      ].value\r\n                    \">\r\n                    <nz-option *ngFor=\"\r\n                        let item of form.propertySchema[getScope(formField.scope?.reference)]?.[\r\n                          formField.scope?.reference.split('/').pop()\r\n                        ]?.data\r\n                      \" [nzLabel]=\"item[formField?.option?.optionLabel]\"\r\n                      [nzValue]=\"item[formField?.option?.optionValue]\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <div *ngIf=\"dropdownField?.touched && dropdownField?.invalid\"\r\n                  [ngClass]=\"getStyleWithoutClasses(formField?.validation?.style)?.classes\"\r\n                  [ngStyle]=\"getStyleWithoutClasses(formField?.validation?.style)?.style\">\r\n                  <p [class]=\"\r\n                      formField?.layout === 'horizontal'\r\n                        ? 'text-red-400 m-0 horizontal-error'\r\n                        : 'text-red-400 m-0'\r\n                    \" *ngIf=\"dropdownField?.errors\">\r\n                    {{ setErroMessage(formField, errorMessages, dropdownField) }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- button/default control -->\r\n            <div *ngSwitchCase=\"'default'\">\r\n              <button type=\"submit\" [ngClass]=\"getStyleWithoutClasses(formField?.style)?.classes\"\r\n                [ngStyle]=\"getStyleWithoutClasses(formField?.style)?.style\"\r\n                (click)=\"invokeFormBtnClick(formField?.option, form.propertySchema)\">\r\n                {{ formField?.label?.caption }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>", styles: [":host{display:block;width:100%;height:100%;min-height:0}.form-renderer{width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;padding:12px}.section-card{border:1px solid #e5e7eb;border-radius:var(--radius-sm, 8px);padding:12px;margin-bottom:12px;background:#fff;box-sizing:border-box}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:600}.section-title{font-size:14px;color:#0f172a}.section-body{position:relative;width:100%;min-height:78px;box-sizing:border-box}.field-row{position:relative;min-width:0;width:100%;box-sizing:border-box}.field-row input,.field-row select,.field-row nz-select,.field-row textarea,.field-row button{max-width:100%;box-sizing:border-box}@media(max-width:768px){.section-body{grid-template-columns:repeat(1,minmax(0,1fr))!important}.field-row{grid-column:span 1!important}}@media(min-width:769px)and (max-width:1024px){.section-body{grid-template-columns:repeat(6,minmax(0,1fr))!important}.field-row{grid-column:span 6!important}}:host-context(.mobile-frame) .section-body,:host-context(.device-mobile) .section-body{grid-template-columns:repeat(1,minmax(0,1fr))!important}:host-context(.mobile-frame) .field-row,:host-context(.device-mobile) .field-row{grid-column:span 1!important}:host-context(.tablet-frame) .section-body,:host-context(.device-tablet) .section-body{grid-template-columns:repeat(6,minmax(0,1fr))!important}:host-context(.tablet-frame) .field-row,:host-context(.device-tablet) .field-row{grid-column:span 6!important}\n"] }]
+        }], propDecorators: { errorMessages: [{
                 type: Input
             }], creditCardError: [{
                 type: Input
@@ -2708,9 +2767,12 @@ class ConfigService {
                 tenantName = await this.utilityService.getStorage('tenantName');
             }
             if (tenantName) {
+                console.log('tenantName-44: ', tenantName);
+                console.log('projectName-55: ', projectName);
                 this.config = await this.couchdbService.getFileContentFromCouchDb(`${tenantName}_${projectName}`, 'environments/environment.json');
             }
             else {
+                console.log('projectName--66: ', projectName);
                 this.config = await this.couchdbService.getFileContentFromCouchDb(`${projectName}`, 'environments/environment.json');
             }
             if (this.platform.ANDROID || this.platform.IOS) {
@@ -2769,9 +2831,12 @@ class ConfigService {
         }
         let env = {};
         if (tenantName) {
+            console.log('tenantName-11: ', tenantName);
+            console.log('projectName-22: ', projectName);
             env = await this.couchdbService.getFileContentFromCouchDb(`${tenantName}_${projectName}`, 'environments/environment.json');
         }
         else {
+            console.log('projectName--33: ', projectName);
             env = await this.couchdbService.getFileContentFromCouchDb(`${projectName}`, 'environments/environment.json');
         }
         if (env?.environment?.login.type === "keycloak") {