@piserve-tech/form-submission 0.0.0-watch

package/fesm2022/piserve-tech-form-submission.mjs

@@ -0,0 +1,2558 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import * as i3$1 from '@piserve-tech/drop-down';
+import { DropdownModule } from '@piserve-tech/drop-down';
+import * as i2$1 from '@piserve-tech/file-upload';
+import { DocUploadModule } from '@piserve-tech/file-upload';
+import * as i2$2 from '@angular/google-maps';
+import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
+import * as i3$2 from '@kolkov/angular-editor';
+import { AngularEditorModule } from '@kolkov/angular-editor';
+import * as i3$3 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import { FilePreviewModule } from '@piserve-tech/file-preview';
+import { MatTabsModule } from '@angular/material/tabs';
+import { BrowserModule } from '@angular/platform-browser';
+
+class FormSubmissionService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class DataService {
+    constructor() {
+        this.dataSubject = new BehaviorSubject('');
+        this.apiUrl$ = this.dataSubject.asObservable();
+        this.headerSubject = new BehaviorSubject({});
+        this.header$ = this.headerSubject.asObservable();
+    }
+    setApiUrl(data) {
+        this.dataSubject.next(data);
+    }
+    setHeader(data) {
+        this.headerSubject.next(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+function mapPublicFormToModel(apiPublicForm) {
+    return {
+        name: apiPublicForm.result.name,
+        formConfiguration: mapFormConfigurationToModel(apiPublicForm.result.formConfiguration),
+        pages: apiPublicForm.result.pages.map((apiPage) => mapPageToModel(apiPage)),
+    };
+}
+function mapFormConfigurationToModel(apiFormConfiguration) {
+    return {
+        saveAutomatically: apiFormConfiguration.saveAutomatically,
+        saveInterval: apiFormConfiguration.saveInterval,
+        customizeFont: apiFormConfiguration.customizeFont,
+        fontFamily: apiFormConfiguration.fontFamily,
+        fontSize: apiFormConfiguration.fontSize,
+        enableDataExport: apiFormConfiguration.enableDataExport,
+        fileFormats: apiFormConfiguration.fileFormats,
+        enableQuestionNumbering: apiFormConfiguration.enableQuestionNumbering,
+        questionNumbering: apiFormConfiguration.questionNumbering,
+        enableGoogleRecaptcha: apiFormConfiguration.enableGoogleRecaptcha,
+        googleRecaptchaKey: apiFormConfiguration.googleRecaptchaKey,
+        googleRecaptchaSecret: apiFormConfiguration.googleRecaptchaSecret,
+        navigation: apiFormConfiguration.navigation,
+        markAllQuestionsAsRequired: apiFormConfiguration.markAllQuestionsAsRequired,
+    };
+}
+function mapPageToModel(apiPage) {
+    return {
+        title: apiPage.title,
+        rows: apiPage.rows.map((apiRow) => mapRowToModel(apiRow)),
+    };
+}
+function mapRowToModel(apiRow) {
+    return {
+        grid: apiRow.grid.map((apiGrid) => mapGridToModel(apiGrid)),
+    };
+}
+function mapGridToModel(apiGrid) {
+    let entity;
+    switch (apiGrid.entityType) {
+        case 'QUESTION':
+            entity = mapQuestionToModel(apiGrid.formElementType);
+            break;
+        case 'SECTION':
+            entity = mapSectionToModel(apiGrid.formElementType);
+            break;
+        case 'SUBFORM':
+            entity = mapSubFormToModel(apiGrid.formElementType);
+            break;
+        default:
+            throw new Error(`Unknown entity type: ${apiGrid.entityType}`);
+    }
+    return {
+        entityType: apiGrid.entityType,
+        formElementType: entity,
+    };
+}
+function mapSectionToModel(apiSection) {
+    return {
+        id: apiSection.id,
+        title: apiSection.title,
+        description: apiSection.description,
+    };
+}
+function mapQuestionToModel(apiQuestion) {
+    return {
+        count: apiQuestion.count,
+        id: apiQuestion.id,
+        questionNumber: apiQuestion.questionNumber,
+        required: apiQuestion.required,
+        hint: apiQuestion.hint,
+        question: apiQuestion.question,
+        answer: {},
+        validation: true,
+        formElement: mapFormElementToModel(apiQuestion.formElement),
+        childLogics: apiQuestion?.childLogics?.map((logic) => mapLogicToModel(logic)),
+    };
+}
+function mapFormElementToModel(apiFormElement) {
+    return {
+        elementType: apiFormElement.elementType,
+        appearance: mapAppearanceToModel(apiFormElement.appearance),
+        validation: mapValidationToModel(apiFormElement.validation),
+        option: mapOptionToModel(apiFormElement?.option),
+        selectionMatrixLabel: apiFormElement.selectionMatrixLabel,
+        selectionMatrixColumn: apiFormElement.selectionMatrixColumn,
+    };
+}
+function mapLogicToModel(apiLogic) {
+    return {
+        id: apiLogic.id,
+        inputValue: apiLogic.inputValue,
+        condition: apiLogic.condition,
+        formElements: apiLogic.formElements.map((element) => mapFormElementTypeToModel(element)),
+    };
+}
+function mapSubFormToModel(apiSubForm) {
+    return {
+        id: apiSubForm.id,
+        title: apiSubForm.title,
+        description: apiSubForm.description,
+        subFormStructure: apiSubForm.subFormStructure,
+        formElements: apiSubForm.formElements.map((element) => mapFormElementTypeToModel(element)),
+    };
+}
+function mapFormElementTypeToModel(apiFormElementType) {
+    return {
+        entityType: apiFormElementType.entityType,
+        formElementType: apiFormElementType.formElementType,
+    };
+}
+function mapAppearanceToModel(apiAppearance) {
+    return {
+        placeholder: apiAppearance.placeholder,
+        fontSize: apiAppearance.fontSize,
+        textAlign: apiAppearance.textAlign,
+        font: apiAppearance.font,
+        underline: apiAppearance.underline,
+        bold: apiAppearance.bold,
+        italics: apiAppearance.italics,
+        defaultValue: apiAppearance.defaultValue,
+        numberOfRows: apiAppearance.numberOfRows,
+        singleSelection: apiAppearance.singleSelection,
+        displayCountryCode: apiAppearance.displayCountryCode,
+        displayFlag: apiAppearance.displayFlag,
+        displayCode: apiAppearance.displayCode,
+        showCountryName: apiAppearance.showCountryName,
+        beautifyNumbers: apiAppearance.beautifyNumbers,
+        upAndDownButton: apiAppearance.upAndDownButton,
+        allowNegativeValues: apiAppearance.allowNegativeValues,
+        showPreviewButton: apiAppearance.showPreviewButton,
+        confirmPassword: apiAppearance.confirmPassword,
+        viewButton: apiAppearance.viewButton,
+        displayStrong: apiAppearance.displayStrong,
+        dateType: apiAppearance.dateType,
+        format: apiAppearance.format,
+        setCurrentPosition: apiAppearance.setCurrentPosition,
+        defaultZoomLevel: apiAppearance.defaultZoomLevel,
+        allowFullScreen: apiAppearance.allowFullScreen,
+        latitude: apiAppearance.latitude,
+        longitude: apiAppearance.longitude,
+        showAcceptButton: apiAppearance.showAcceptButton,
+        labelOnValue: apiAppearance.labelOnValue,
+        labelOffValue: apiAppearance.labelOffValue,
+        labelOnColor: apiAppearance.labelOnColor,
+        labelOffColor: apiAppearance.labelOffColor,
+        minValue: apiAppearance.minValue,
+        maxValue: apiAppearance.maxValue,
+        stepValue: apiAppearance.stepValue,
+        changeSliderColor: apiAppearance.changeSliderColor,
+        sliderColor: apiAppearance.sliderColor,
+        canvasOption: apiAppearance.canvasOption,
+        selectionType: apiAppearance.selectionType,
+        dragAndDrop: apiAppearance.dragAndDrop,
+        previewUploadedFiles: apiAppearance.previewUploadedFiles,
+        multiFileUploads: apiAppearance.multiFileUploads,
+        selectionColorRequired: apiAppearance.selectionColorRequired,
+        selectionColor: apiAppearance.selectionColor,
+        color: apiAppearance.color,
+    };
+}
+function mapValidationToModel(apiValidation) {
+    return {
+        regexValidation: apiValidation.regexValidation,
+        regex: apiValidation.regex,
+        validationMessage: apiValidation.validationMessage,
+        limitedCharacters: apiValidation.limitedCharacters,
+        count: apiValidation.count,
+        minimumSelection: apiValidation.minimumSelection,
+        maximumSelection: apiValidation.maximumSelection,
+        countryWiseValidation: apiValidation.countryWiseValidation,
+        restrictCountry: apiValidation.restrictCountry,
+        allowedCountry: apiValidation.allowedCountry,
+        blockedCountry: apiValidation.blockedCountry,
+        regularExpression: apiValidation.regularExpression,
+        expectedDomains: apiValidation.expectedDomains,
+        min: apiValidation.min,
+        max: apiValidation.max,
+        minLength: apiValidation.minLength,
+        maxLength: apiValidation.maxLength,
+        requireLowercaseLetters: apiValidation.requireLowercaseLetters,
+        requireUppercaseLetters: apiValidation.requireUppercaseLetters,
+        requireNumbers: apiValidation.requireNumbers,
+        requireSpecialCharacters: apiValidation.requireSpecialCharacters,
+        allowedSpecialCharacters: apiValidation.allowedSpecialCharacters,
+        minDateOption: apiValidation.minDateOption,
+        minDate: apiValidation.minDate,
+        maxDateOption: apiValidation.maxDateOption,
+        maxDate: apiValidation.maxDate,
+        regionBoundary: apiValidation.regionBoundary,
+        region: apiValidation.region,
+        preventFromProceedingWithoutAgree: apiValidation.preventFromProceedingWithoutAgree,
+        buttonColour: apiValidation.buttonColour,
+        maxFileSize: apiValidation.maxFileSize,
+        minFileSize: apiValidation.minFileSize,
+        minSelection: apiValidation.minSelection,
+        maxSelection: apiValidation.maxSelection,
+        fileTypes: apiValidation.fileTypes,
+        fileSize: apiValidation.fileSize,
+        fileSizeUnit: apiValidation.fileSizeUnit,
+        totalFileSize: apiValidation.totalFileSize,
+        minSelectionRequired: apiValidation.minSelectionRequired,
+        minSelectionValue: apiValidation.minSelectionValue,
+        validationType: apiValidation.validationType,
+        validation: apiValidation.validation,
+    };
+}
+function mapElementOptionDBToModel(apiElementOptionDB) {
+    return {
+        tableName: apiElementOptionDB.tableName,
+        valueField: apiElementOptionDB.valueField,
+        labelField: apiElementOptionDB.labelField,
+        criteria: apiElementOptionDB.criteria.map((apiCriteria) => mapElementOptionDBCriteriaToModel(apiCriteria)),
+    };
+}
+function mapElementOptionDBCriteriaToModel(apiElementOptionDBCriteria) {
+    return {
+        field: apiElementOptionDBCriteria.field,
+        condition: apiElementOptionDBCriteria.condition,
+        valueSource: apiElementOptionDBCriteria.valueSource,
+        inputValue: apiElementOptionDBCriteria.inputValue,
+        logicalOperator: apiElementOptionDBCriteria.logicalOperator,
+    };
+}
+function mapElementOptionAPIToModel(apiElementOptionAPI) {
+    return {
+        external: apiElementOptionAPI.external,
+        url: apiElementOptionAPI.url,
+        valueField: apiElementOptionAPI.valueField,
+        labelField: apiElementOptionAPI.labelField,
+        pathToValue: apiElementOptionAPI.pathToValue,
+        headers: apiElementOptionAPI.headers?.map(mapElementOptionAPIDataToModel),
+        params: apiElementOptionAPI.params?.map(mapElementOptionAPIDataToModel),
+        pathVariables: apiElementOptionAPI.pathVariables?.map(mapElementOptionAPIDataToModel),
+    };
+}
+function mapElementOptionAPIDataToModel(apiElementOptionAPIData) {
+    return {
+        keyName: apiElementOptionAPIData.keyName,
+        valueSource: apiElementOptionAPIData.valueSource,
+        inputValue: apiElementOptionAPIData.inputValue,
+    };
+}
+function mapOptionToModel(apiOption) {
+    return {
+        optionType: apiOption?.optionType,
+        lookupTable: apiOption?.lookupTable,
+        customOptions: apiOption?.customOptions?.map((option) => ({
+            value: option.value,
+        })),
+        database: apiOption?.database
+            ? mapElementOptionDBToModel(apiOption.database)
+            : undefined,
+        api: apiOption?.api ? mapElementOptionAPIToModel(apiOption.api) : undefined,
+    };
+}
+
+class FormService {
+    constructor(http, dataService) {
+        this.http = http;
+        this.dataService = dataService;
+        this.apiUrl = '';
+        this.header = {};
+        this.dataService.apiUrl$.subscribe((data) => {
+            this.apiUrl = data;
+        });
+        this.dataService.header$.subscribe((data) => {
+            this.header = data;
+        });
+    }
+    getQuestions(moduleName) {
+        return this.http.get(`${this.apiUrl}/api/public/forms/${moduleName}`);
+    }
+    fetchDataFromDatabase(database) {
+        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+        return this.http.post(`${this.apiUrl}/api/load-from-db`, database, {
+            headers,
+        });
+    }
+    fetchDataFromLookup(tableName) {
+        return this.http.get(`${this.apiUrl}/api/public/lookup/${tableName}`);
+    }
+    fetchDataFromExternalAPI(url) {
+        return this.http.get(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, deps: [{ token: i1.HttpClient }, { token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: DataService }]; } });
+
+class HeaderComponent {
+    constructor() {
+        this.name = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, selector: "lib-header", inputs: { name: "name" }, ngImport: i0, template: "<div class=\"head container\">\r\n  <div class=\"registration-header\">\r\n    <h2>{{ name }}</h2>\r\n  </div>\r\n  <div class=\"line\"></div>\r\n</div>\r\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.line{margin-top:1%;margin-bottom:2%;width:100%;height:0px;border:1.5px solid #eaeaea;transform:rotate(180deg)}@media (max-width: 576px){.line{margin-bottom:5%}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-header', template: "<div class=\"head container\">\r\n  <div class=\"registration-header\">\r\n    <h2>{{ name }}</h2>\r\n  </div>\r\n  <div class=\"line\"></div>\r\n</div>\r\n", styles: [".head{background-color:#fff;padding:0!important}.registration-header{top:20px;left:50%}.line{margin-top:1%;margin-bottom:2%;width:100%;height:0px;border:1.5px solid #eaeaea;transform:rotate(180deg)}@media (max-width: 576px){.line{margin-bottom:5%}}\n"] }]
+        }], propDecorators: { name: [{
+                type: Input
+            }] } });
+
+class SectionFieldsComponent {
+    constructor() {
+        this.section = {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: { section: "section" }, ngImport: i0, template: "<div class=\"mb-4 px-3\">\r\n  <p class=\"sectionTitle\">{{ section.title }}</p>\r\n  <p class=\"description\">{{ section.description }}</p>\r\n</div>\r\n", styles: [".sectionTitle{font-size:15px;font-weight:500}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-section-fields', template: "<div class=\"mb-4 px-3\">\r\n  <p class=\"sectionTitle\">{{ section.title }}</p>\r\n  <p class=\"description\">{{ section.description }}</p>\r\n</div>\r\n", styles: [".sectionTitle{font-size:15px;font-weight:500}\n"] }]
+        }], propDecorators: { section: [{
+                type: Input
+            }] } });
+
+class CheckBoxFieldsComponent {
+    constructor(formService) {
+        this.formService = formService;
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.selectionType = '';
+        this.optionType = '';
+        this.lookupTable = {};
+        this.customOptions = [];
+        this.database = {};
+        this.api = {};
+        this.apiOptions = []; // Assuming you have a property to store API options
+        this.selectedOptions = [];
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.selectionType = this.question.formElement.appearance.selectionType;
+        this.minimumSelection =
+            this.question.formElement.validation.minimumSelection;
+        this.maximumSelection =
+            this.question.formElement.validation.maximumSelection;
+        this.optionType = this.question.formElement.option.optionType;
+        switch (this.optionType) {
+            case 'OPTION':
+                this.customOptions = this.question.formElement.option.customOptions;
+                break;
+            case 'LOOKUP':
+                this.lookupTable = this.question.formElement.option.lookupTable;
+                this.fetchDataFromLookup();
+                break;
+            case 'DATABASE':
+                this.database = this.question.formElement.option.database;
+                this.fetchDataFromDatabase();
+                break;
+            case 'API':
+                this.api = this.question.formElement.option.api;
+                this.fetchDataFromAPI();
+                break;
+            default:
+                console.warn('Unknown option type:', this.optionType);
+        }
+        // If selectionType is 'SINGLE', set minimumSelection and maximumSelection to 1
+        if (this.selectionType === 'SINGLE') {
+            this.minimumSelection = 1;
+            this.maximumSelection = 1;
+        }
+        // If selectionType is 'MULTIPLE' and minSelection and maxSelection are not specified, set them to undefined
+        if (this.selectionType === 'MULTIPLE' &&
+            !this.minimumSelection &&
+            !this.maximumSelection) {
+            this.minimumSelection = undefined;
+            this.maximumSelection = undefined;
+        }
+    }
+    onCheckboxChange(option, event) {
+        if (this.selectionType === 'SINGLE') {
+            // Clear previously selected options for single selection type
+            this.selectedOptions = [];
+        }
+        if (event.target.checked) {
+            // Add the selected option if it's not already in the list
+            if (!this.selectedOptions.includes(option)) {
+                this.selectedOptions.push(option);
+                this.isMinimumSelectionValid();
+            }
+        }
+        else {
+            // Remove the selected option
+            this.selectedOptions = this.selectedOptions.filter((item) => item !== option);
+            this.isMinimumSelectionValid();
+        }
+        // Check if the number of selected options exceeds the maximum allowed
+        if (this.maximumSelection !== undefined &&
+            this.selectedOptions.length > this.maximumSelection) {
+            // If exceeded, uncheck the last selected option
+            event.target.checked = false;
+            // Remove the unchecked option from the selectedOptions array
+            this.selectedOptions = this.selectedOptions.filter((item) => item !== option);
+            // You can add a message to inform the user about the maximum selection limit if needed
+        }
+    }
+    fetchDataFromLookup() {
+        this.formService.fetchDataFromLookup(this.lookupTable).subscribe((response) => {
+            this.customOptions = response.result.values.map((item) => ({
+                value: item.value,
+                label: item.label,
+            }));
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    fetchDataFromDatabase() {
+        const transformedDatabase = this.transformDatabaseObject(this.database);
+        this.formService.fetchDataFromDatabase(transformedDatabase).subscribe((response) => {
+            if (response.success) {
+                this.customOptions = response.result.map((item) => ({
+                    value: item.value,
+                    label: item.label,
+                }));
+            }
+            else {
+                console.error('Error fetching data from database:', response.message);
+            }
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    transformDatabaseObject(database) {
+        return {
+            tableName: database.tableName,
+            valueField: database.valueField,
+            labelField: database.labelField,
+            criteria: database.criteria.map((criteria) => ({
+                field: criteria.field,
+                condition: criteria.condition,
+                value: criteria.inputValue,
+                logicalOperator: criteria.logicalOperator,
+            })),
+        };
+    }
+    fetchDataFromAPI() {
+        const apiConfig = this.api;
+        this.formService.fetchDataFromExternalAPI(apiConfig.url).subscribe((response) => {
+            const data = this.extractDataByPath(response, apiConfig.pathToValue);
+            this.customOptions = data.map((item) => ({
+                value: item[apiConfig.valueField],
+                label: item[apiConfig.labelField],
+            }));
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    extractDataByPath(data, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], data);
+    }
+    isMinimumSelectionValid() {
+        this.validationFailed = false;
+        if (this.selectedOptions.length == 0 && this.required) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+        }
+        else if (this.minimumSelection !== undefined) {
+            if (this.selectedOptions.length < this.minimumSelection) {
+                this.validationFailed = true;
+                this.validationMessage = `Minimum ${this.minimumSelection}  selection(s) required.`;
+                this.validate.emit(this.validationFailed);
+            }
+        }
+        else {
+            this.validate.emit(this.validationFailed);
+        }
+    }
+    getOptions() {
+        if (this.optionType === 'OPTION') {
+            return this.customOptions;
+        }
+        else if (this.optionType === 'LOOKUP') {
+            return Object.values(this.lookupTable);
+        }
+        else if (this.optionType === 'API') {
+            return this.apiOptions.map((option) => option.valueField);
+        }
+        else {
+            return [];
+        }
+    }
+    isOptionDisabled(option) {
+        return (this.maximumSelection !== undefined &&
+            this.selectedOptions.length >= this.maximumSelection &&
+            !this.selectedOptions.includes(option));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, deps: [{ token: FormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-check\" *ngFor=\"let option of customOptions\">\r\n    <input\r\n      class=\"form-check-input\"\r\n      type=\"checkbox\"\r\n      [id]=\"option.value + 'Checkbox'\"\r\n      [name]=\"option.value + 'Checkbox'\"\r\n      [value]=\"option.value\"\r\n      (change)=\"onCheckboxChange(option, $event)\"\r\n      [disabled]=\"isOptionDisabled(option)\"\r\n      [checked]=\"selectedOptions.includes(option.value)\"\r\n    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + 'Checkbox'\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + 'Checkbox'\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-check-box-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper mb-2\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"form-check\" *ngFor=\"let option of customOptions\">\r\n    <input\r\n      class=\"form-check-input\"\r\n      type=\"checkbox\"\r\n      [id]=\"option.value + 'Checkbox'\"\r\n      [name]=\"option.value + 'Checkbox'\"\r\n      [value]=\"option.value\"\r\n      (change)=\"onCheckboxChange(option, $event)\"\r\n      [disabled]=\"isOptionDisabled(option)\"\r\n      [checked]=\"selectedOptions.includes(option.value)\"\r\n    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + 'Checkbox'\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value + 'Checkbox'\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class DateTimeFieldsComponent {
+    constructor() {
+        this.bsConfig = {
+            containerClass: 'theme-red', // Set the container class to apply the grey theme
+        };
+        this.question = {};
+        this.required = false;
+        this.hint = '';
+        this.count = 0;
+        this.dateType = '';
+        this.format = 'DD-MM-YYYY';
+        this.minDateOption = '';
+        this.maxDateOption = '';
+        this.todayDate = new Date(); // Current date
+        this.selectedDate = '';
+        this.selectedTime = '';
+        this.selectedDateRange = '';
+        this.selectedDateAndTime = '';
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.dateType = this.question.formElement.appearance.dateType;
+        this.format = this.question.formElement.appearance.format;
+        this.minDateOption = this.question.formElement.validation.minDateOption;
+        this.minDate = this.getMinDate();
+        this.maxDateOption = this.question.formElement.validation.maxDateOption;
+        this.maxDate = this.getMaxDate();
+    }
+    getMinDate() {
+        if (this.minDateOption === 'TODAY') {
+            return this.todayDate;
+        }
+        else if (this.minDateOption === 'CUSTOM') {
+            return new Date(this.question.formElement.validation.minDate);
+        }
+        return undefined; // Return undefined if no valid option
+    }
+    getMaxDate() {
+        if (this.maxDateOption === 'TODAY') {
+            return this.todayDate;
+        }
+        else if (this.maxDateOption === 'CUSTOM') {
+            return new Date(this.question.formElement.validation.maxDate);
+        }
+        return undefined; // Return undefined if no valid option
+    }
+    openDatePicker() {
+        this.datepicker.toggle();
+    }
+    openDateRangePicker() {
+        this.dateRangePicker.toggle();
+    }
+    openDateAndTimePicker() {
+        this.dateAndTimePicker.toggle();
+    }
+    validateField() {
+        if (this.dateType === 'DATE_ONLY') {
+            this.question.answer = String(this.selectedDate);
+            this.validateDateOnly();
+        }
+        else if (this.dateType === 'TIME_ONLY') {
+            this.question.answer = String(this.selectedTime);
+            this.validateTimeOnly();
+        }
+        else if (this.dateType === 'DATE_AND_TIME') {
+            this.question.answer = String(this.selectedDateAndTime);
+            this.validateDateAndTime();
+        }
+        else {
+            this.question.answer = String(this.selectedDateRange);
+            this.validateDateRange();
+        }
+    }
+    validateDateOnly() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && !this.selectedDate) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.question.validation = false;
+        }
+        else {
+            this.question.validation = true;
+        }
+    }
+    validateTimeOnly() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && !this.selectedTime) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            ;
+            this.question.validation = false;
+        }
+        else {
+            this.question.validation = true;
+        }
+    }
+    validateDateRange() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && !this.selectedDateRange) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.question.validation = false;
+        }
+        else {
+            this.question.validation = true;
+        }
+    }
+    validateDateAndTime() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && !this.selectedDateAndTime) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.question.validation = false;
+        }
+        else {
+            this.question.validation = true;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepickerYMD"], descendants: true }, { propertyName: "dateRangePicker", first: true, predicate: ["daterangepicker"], descendants: true }, { propertyName: "dateAndTimePicker", first: true, predicate: ["dateAndTimePicker"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n    <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\r\n      <!-- Date only picker -->\r\n      <div class=\"input-container\">\r\n        <input\r\n          class=\"form-control height\"\r\n          #datepickerYMD=\"bsDatepicker\"\r\n          bsDatepicker\r\n          [minDate]=\"minDate ? minDate : todayDate\"\r\n          [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n          [bsConfig]=\"{ dateInputFormat: format }\"\r\n          [(ngModel)]=\"selectedDate\"\r\n          (blur)=\"validateField()\"\r\n          (ngModelChange)=\"validateField()\"\r\n          [class.invalid]=\"validationFailed\"\r\n        />\r\n        <i class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"  (click)=\"openDatePicker()\"></i>\r\n      </div>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\r\n      <!-- Time picker -->\r\n      <input type=\"time\" class=\"form-control height\"\r\n      (blur)=\"validateTimeOnly()\" \r\n      [(ngModel)]=\"selectedTime\"\r\n      (ngModelChange)=\"validateTimeOnly()\"\r\n      [class.invalid]=\"validationFailed\"/>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\r\n      <!-- Date and time picker -->\r\n      <div class=\"input-container\">\r\n      <input\r\n      #dateAndTimePicker=\"bsDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        [minDate]=\"minDate ? minDate : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          withTimepicker: true,\r\n          keepDatepickerOpened: true,\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format\r\n        }\"\r\n        bsDatepicker\r\n        [class.invalid]=\"validationFailed\"\r\n        [(ngModel)]=\"selectedDateAndTime\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n      />\r\n      <i class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"  (click)=\"openDateAndTimePicker()\"></i>\r\n    </div>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\r\n      <!-- Date range picker -->\r\n      <div class=\"input-container\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        #daterangepicker=\"bsDaterangepicker\"\r\n        bsDaterangepicker\r\n        [minDate]=\"minDate ? minDate : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format,\r\n          showWeekNumbers: false\r\n        }\"\r\n        [(ngModel)]=\"selectedDateRange\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n      />\r\n      <i class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"  (click)=\"openDateRangePicker()\"></i>\r\n    </div>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i3.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-time-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n    <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\r\n      <!-- Date only picker -->\r\n      <div class=\"input-container\">\r\n        <input\r\n          class=\"form-control height\"\r\n          #datepickerYMD=\"bsDatepicker\"\r\n          bsDatepicker\r\n          [minDate]=\"minDate ? minDate : todayDate\"\r\n          [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n          [bsConfig]=\"{ dateInputFormat: format }\"\r\n          [(ngModel)]=\"selectedDate\"\r\n          (blur)=\"validateField()\"\r\n          (ngModelChange)=\"validateField()\"\r\n          [class.invalid]=\"validationFailed\"\r\n        />\r\n        <i class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"  (click)=\"openDatePicker()\"></i>\r\n      </div>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\r\n      <!-- Time picker -->\r\n      <input type=\"time\" class=\"form-control height\"\r\n      (blur)=\"validateTimeOnly()\" \r\n      [(ngModel)]=\"selectedTime\"\r\n      (ngModelChange)=\"validateTimeOnly()\"\r\n      [class.invalid]=\"validationFailed\"/>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\r\n      <!-- Date and time picker -->\r\n      <div class=\"input-container\">\r\n      <input\r\n      #dateAndTimePicker=\"bsDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        [minDate]=\"minDate ? minDate : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          withTimepicker: true,\r\n          keepDatepickerOpened: true,\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format\r\n        }\"\r\n        bsDatepicker\r\n        [class.invalid]=\"validationFailed\"\r\n        [(ngModel)]=\"selectedDateAndTime\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n      />\r\n      <i class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"  (click)=\"openDateAndTimePicker()\"></i>\r\n    </div>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\r\n      <!-- Date range picker -->\r\n      <div class=\"input-container\">\r\n      <input\r\n        type=\"text\"\r\n        class=\"form-control height\"\r\n        #daterangepicker=\"bsDaterangepicker\"\r\n        bsDaterangepicker\r\n        [minDate]=\"minDate ? minDate : todayDate\"\r\n        [maxDate]=\"maxDate ? maxDate : todayDate\"\r\n        [bsConfig]=\"{\r\n          rangeInputFormat: format,\r\n          dateInputFormat: format,\r\n          showWeekNumbers: false\r\n        }\"\r\n        [(ngModel)]=\"selectedDateRange\"\r\n        (blur)=\"validateField()\"\r\n        (ngModelChange)=\"validateField()\"\r\n        [class.invalid]=\"validationFailed\"\r\n      />\r\n      <i class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"  (click)=\"openDateRangePicker()\"></i>\r\n    </div>\r\n      <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\r\n        <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n          </svg>\r\n          {{validationMessage}}</div>\r\n    </ng-container>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], datepicker: [{
+                type: ViewChild,
+                args: ['datepickerYMD']
+            }], dateRangePicker: [{
+                type: ViewChild,
+                args: ['daterangepicker']
+            }], dateAndTimePicker: [{
+                type: ViewChild,
+                args: ['dateAndTimePicker']
+            }], validate: [{
+                type: Output
+            }] } });
+
+class DropDownFieldsComponent {
+    constructor(formService) {
+        this.formService = formService;
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.selectionType = '';
+        this.minimumSelection = 0;
+        this.maximumSelection = 0;
+        this.optionType = '';
+        this.lookupTable = '';
+        this.customOptions = [];
+        this.database = {};
+        this.api = {};
+        this.selectedValue = [];
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    onValueChange(newValue) {
+        this.selectedValue = newValue;
+        this.selectItems();
+    }
+    valueAssigned() {
+        console.log('Question', this.question);
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.selectionType = this.question.formElement.appearance.selectionType;
+        this.minimumSelection =
+            this.question.formElement.validation.minimumSelection;
+        this.maximumSelection =
+            this.question.formElement.validation.maximumSelection;
+        this.optionType = this.question.formElement.option.optionType;
+        switch (this.optionType) {
+            case 'OPTION':
+                this.customOptions = this.question.formElement.option.customOptions.map((option) => ({
+                    label: option.value,
+                    value: '',
+                    image: '',
+                }));
+                break;
+            case 'LOOKUP':
+                this.lookupTable = this.question.formElement.option.lookupTable;
+                this.fetchDataFromLookup();
+                break;
+            case 'DATABASE':
+                this.database = this.question.formElement.option.database;
+                this.fetchDataFromDatabase();
+                break;
+            case 'API':
+                this.api = this.question.formElement.option.api;
+                this.fetchDataFromAPI();
+                break;
+            default:
+                console.warn('Unknown option type:', this.optionType);
+        }
+    }
+    transformDatabaseObject(database) {
+        return {
+            tableName: database.tableName,
+            valueField: database.valueField,
+            labelField: database.labelField,
+            criteria: database.criteria.map((criteria) => ({
+                field: criteria.field,
+                condition: criteria.condition,
+                value: criteria.inputValue,
+                logicalOperator: criteria.logicalOperator,
+            })),
+        };
+    }
+    fetchDataFromDatabase() {
+        const transformedDatabase = this.transformDatabaseObject(this.database);
+        this.formService.fetchDataFromDatabase(transformedDatabase).subscribe((response) => {
+            if (response.success) {
+                this.customOptions = response.result.map((item) => ({
+                    value: item.value,
+                    label: item.label,
+                }));
+            }
+            else {
+                console.error('Error fetching data from database:', response.message);
+            }
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    fetchDataFromLookup() {
+        this.formService.fetchDataFromLookup(this.lookupTable).subscribe((response) => {
+            this.customOptions = response.result.values.map((item) => ({
+                value: item.value,
+                label: item.label,
+            }));
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    fetchDataFromAPI() {
+        const apiConfig = this.api;
+        this.formService.fetchDataFromExternalAPI(apiConfig.url).subscribe((response) => {
+            const data = this.extractDataByPath(response, apiConfig.pathToValue);
+            this.customOptions = data.map((item) => ({
+                value: item[apiConfig.valueField],
+                label: item[apiConfig.labelField],
+            }));
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    extractDataByPath(data, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], data);
+    }
+    selectItems() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.selectedValue.length == 0 && this.required) {
+            this.validationFailed = true;
+            this.validationMessage = `This is a required question`;
+            this.validate.emit(this.validationFailed);
+        }
+        else if (this.selectedValue.length < this.minimumSelection ||
+            this.selectedValue.length > this.maximumSelection) {
+            this.validationFailed = true;
+            this.validationMessage = `selected options must be between ${this.minimumSelection} & ${this.maximumSelection}`;
+            this.validate.emit(this.validationFailed);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, deps: [{ token: FormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <lib-dropdown\r\n    [items]=\"customOptions\"\r\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\r\n  ></lib-dropdown>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-drop-down-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <lib-dropdown\r\n    [items]=\"customOptions\"\r\n    [multiple]=\"selectionType === 'SINGLE' ? false : true\"\r\n  ></lib-dropdown>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class FilePickerFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.multiFileUploads = true;
+        this.fileTypes = [];
+        this.fileSize = 0;
+        this.fileSizeUnit = '';
+        this.totalFileSize = 0;
+        this.dragAndDrop = true;
+        this.previewUploadedFiles = true;
+        this.validationFailed = false;
+        this.validationMessage = '';
+    }
+    handleFileTypeNotAllowed(fileType) {
+        console.log(`File type not allowed in app: ${fileType}`);
+        this.validationFailed = true;
+        this.validationMessage = 'File type not allowed';
+    }
+    handleFileSize(fileType) {
+        console.log(`maximum limit app: ${fileType}`);
+    }
+    handleFinalArray(fileType) {
+        const extractedData = fileType.map((item) => ({
+            name: item._file.name,
+            size: item._file.size,
+            type: item._file.type,
+        }));
+        const jsonString = JSON.stringify(extractedData);
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.multiFileUploads =
+            this.question.formElement.appearance.multiFileUploads;
+        this.dragAndDrop = this.question.formElement.appearance.dragAndDrop;
+        this.previewUploadedFiles =
+            this.question.formElement.appearance.previewUploadedFiles;
+        this.fileTypes = this.question.formElement.validation.fileTypes;
+        this.fileSizeUnit = this.question.formElement.validation.fileSizeUnit;
+        this.fileSize = this.convertToBytes(this.question.formElement.validation.fileSize, this.fileSizeUnit);
+        if (this.multiFileUploads) {
+            this.totalFileSize = this.convertToBytes(this.question.formElement.validation.totalFileSize, this.fileSizeUnit);
+        }
+        else {
+            this.totalFileSize = this.fileSize;
+        }
+    }
+    convertToBytes(size, unit) {
+        const units = {
+            B: 1,
+            KB: 1024,
+            MB: 1024 * 1024,
+            GB: 1024 * 1024 * 1024,
+        };
+        return size * (units[unit.toUpperCase()] || 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <lib-docUpload\r\n    [totalSize]=\"totalFileSize\"\r\n    [fileAllowed]=\"fileTypes\"\r\n    [multiple]=\"multiFileUploads\"\r\n    (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\r\n    (fileSizeAllowed)=\"handleFileSize($event)\"\r\n    (finalArray)=\"handleFinalArray($event)\"\r\n  ></lib-docUpload>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DocUploadComponent, selector: "lib-docUpload", inputs: ["totalSize", "fileAllowed", "multiple"], outputs: ["fileTypeNotAllowed", "fileSizeAllowed", "finalArray"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-file-picker-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <lib-docUpload\r\n    [totalSize]=\"totalFileSize\"\r\n    [fileAllowed]=\"fileTypes\"\r\n    [multiple]=\"multiFileUploads\"\r\n    (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\r\n    (fileSizeAllowed)=\"handleFileSize($event)\"\r\n    (finalArray)=\"handleFinalArray($event)\"\r\n  ></lib-docUpload>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }] } });
+
+class LocationFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.defaultZoomLevel = 0;
+        this.setCurrentPosition = false;
+        this.allowFullScreen = false;
+        this.latitude = 0;
+        this.longitude = 0;
+        this.regionBoundary = false;
+        this.region = '';
+        this.mapConfigurations = {};
+    }
+    ngOnInit() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.defaultZoomLevel =
+            this.question.formElement.appearance.defaultZoomLevel;
+        this.setCurrentPosition =
+            this.question.formElement.appearance.setCurrentPosition;
+        this.allowFullScreen = this.question.formElement.appearance.allowFullScreen;
+        this.latitude = this.question.formElement.appearance.latitude;
+        this.longitude = this.question.formElement.appearance.longitude;
+        this.regionBoundary = this.question.formElement.validation.regionBoundary;
+        this.region = this.question.formElement.validation.region;
+        this.mapConfigurations = {
+            disableDefaultUI: true,
+            fullscreenControl: this.allowFullScreen,
+            zoomControl: true,
+        };
+    }
+    ngAfterViewInit() {
+        const searchBox = new google.maps.places.SearchBox(this.searchField.nativeElement);
+        this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(this.searchField.nativeElement);
+        searchBox.addListener('places_changed', () => {
+            const places = searchBox.getPlaces();
+            if (places?.length === 0) {
+                return;
+            }
+            const bounds = new google.maps.LatLngBounds();
+            places?.forEach((place) => {
+                if (!place.geometry || !place.geometry.location) {
+                    return;
+                }
+                if (place.geometry.viewport) {
+                    // Only geocodes have viewport.
+                    bounds.union(place.geometry.viewport);
+                }
+                else {
+                    bounds.extend(place.geometry.location);
+                }
+            });
+            this.map.fitBounds(bounds);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocationFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: { question: "question" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["mapSearchField"], descendants: true }, { propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control location-input\"\r\n      placeholder=\"Enter location\"\r\n      #locationInput\r\n    />\r\n  </div>\r\n\r\n  <input #mapSearchField class=\"my-map-search-field\" type=\"text\"/>\r\n  <google-map\r\n    width=\"100%\"\r\n    [options]=\"mapConfigurations\"\r\n  ></google-map>\r\n</div>", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocationFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-location-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control location-input\"\r\n      placeholder=\"Enter location\"\r\n      #locationInput\r\n    />\r\n  </div>\r\n\r\n  <input #mapSearchField class=\"my-map-search-field\" type=\"text\"/>\r\n  <google-map\r\n    width=\"100%\"\r\n    [options]=\"mapConfigurations\"\r\n  ></google-map>\r\n</div>", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], searchField: [{
+                type: ViewChild,
+                args: ['mapSearchField']
+            }], map: [{
+                type: ViewChild,
+                args: [GoogleMap]
+            }] } });
+
+class MailFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.placeholder = '';
+        this.expectedDomains = [];
+        this.regularExpression = '';
+        this.email = '';
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.placeholder = this.question.formElement.appearance.placeholder;
+        this.expectedDomains =
+            this.question?.formElement?.validation?.expectedDomains
+                ?.split(',')
+                .map((domain) => domain.trim());
+        this.regularExpression =
+            this.question.formElement.validation.regularExpression;
+    }
+    validateEmail() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        const enteredEmail = this.email.trim().toLowerCase();
+        if (this.required && !this.email) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+            this.question.validation = false;
+        }
+        else if (this.expectedDomains) {
+            const isValidEmail = this.expectedDomains?.some((domain) => enteredEmail.endsWith(domain));
+            this.validationFailed = !isValidEmail;
+            this.validationMessage = 'Please enter valid email address';
+            if (this.validationFailed) {
+                this.validate.emit(this.validationFailed);
+                this.question.validation = false;
+            }
+            else {
+                this.question.validation = true;
+            }
+        }
+        else {
+            this.question.validation = true;
+        }
+    }
+    validateInput(event) {
+        this.question.answer = event.target.value;
+        this.validateEmail();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <input\r\n    type=\"email\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"email\"\r\n    (blur)=\"validateEmail()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-mail-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <input\r\n    type=\"email\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [(ngModel)]=\"email\"\r\n    (blur)=\"validateEmail()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class CountryService {
+    constructor(http, dataService) {
+        this.http = http;
+        this.dataService = dataService;
+        this.apiUrl = '';
+        this.header = {};
+        this.dataService.apiUrl$.subscribe((data) => {
+            this.apiUrl = data;
+        });
+    }
+    loadCountryDetails() {
+        return this.http.get(`${this.apiUrl}/api/public/json/country`);
+    }
+    processCountryDetails(data, displayFlag, displayCode, showCountryName) {
+        const countryDetails = [];
+        data.forEach((country) => {
+            const name = showCountryName ? country.name || '' : '';
+            let flag = '';
+            if (displayFlag && country.flag) {
+                flag = country.flag;
+            }
+            if (displayCode &&
+                country.isd &&
+                country.isd.root &&
+                country.isd.suffixes?.length > 0) {
+                country.isd.suffixes.forEach((suffix) => {
+                    const isdCode = `${country.isd.root}${suffix}`;
+                    countryDetails.push({
+                        value: isdCode,
+                        label: `${name}  ${isdCode}`,
+                        image: flag,
+                    });
+                });
+            }
+            else if (displayCode) {
+                countryDetails.push({
+                    value: name,
+                    label: country.isd?.root || '',
+                    image: flag,
+                });
+            }
+            else if (!displayCode && !displayFlag) {
+                countryDetails.push({
+                    value: name,
+                    label: '',
+                    image: '',
+                });
+            }
+        });
+        return countryDetails;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CountryService, deps: [{ token: i1.HttpClient }, { token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CountryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CountryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: DataService }]; } });
+
+class MobileFieldsComponent {
+    constructor(countryService) {
+        this.countryService = countryService;
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.placeholder = '';
+        this.displayCountryCode = true;
+        this.displayFlag = true;
+        this.displayCode = true;
+        this.showCountryName = true;
+        this.beautifyNumbers = true;
+        this.countryWiseValidation = true;
+        this.restrictCountry = true;
+        this.allowedCountry = [];
+        this.blockedCountry = [];
+        this.countryDetails = [];
+        this.selectedCountry = [];
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.mobileNumber = '';
+        this.filteredCountry = [];
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.placeholder = this.question.formElement.appearance.placeholder;
+        this.displayCountryCode =
+            this.question.formElement.appearance.displayCountryCode;
+        this.displayFlag = this.question.formElement.appearance.displayFlag;
+        this.displayCode = this.question.formElement.appearance.displayCode;
+        this.showCountryName = this.question.formElement.appearance.showCountryName;
+        this.beautifyNumbers = this.question.formElement.appearance.beautifyNumbers;
+        this.countryWiseValidation =
+            this.question.formElement.validation.countryWiseValidation;
+        this.restrictCountry = this.question.formElement.validation.restrictCountry;
+        this.allowedCountry = this.question.formElement.validation.allowedCountry;
+        this.blockedCountry = this.question.formElement.validation.blockedCountry;
+        this.countryService.loadCountryDetails().subscribe((data) => {
+            this.filteredCountry = data.result;
+            if (this.restrictCountry && (this.allowedCountry || this.blockedCountry)) {
+                this.filteredCountry = this.filteredCountry.filter(country => {
+                    return (this.allowedCountry.includes(country.name) || !this.blockedCountry.includes(country.name));
+                });
+            }
+            this.countryDetails = this.countryService.processCountryDetails(this.filteredCountry, this.displayFlag, this.displayCode, this.showCountryName);
+        });
+    }
+    validateMobile() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && (!this.mobileNumber || this.selectedCountry.length === 0)) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, deps: [{ token: CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <div class=\"input-group mb-2\">\r\n    <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2\">\r\n      <lib-dropdown\r\n       [items]=\"countryDetails\"\r\n      [multiple] = \"false\"\r\n      [(selectedItems)]=\"selectedCountry\"></lib-dropdown>\r\n    </div>\r\n    <input\r\n      type=\"number\"\r\n      class=\"form-control col-xs-7 col-7 col-md-9  height mobileField\" \r\n      [placeholder]=\"placeholder\"\r\n      aria-label=\"Mobile Number\"\r\n      [class.invalid]=\"validationFailed\"\r\n      (blur)=\"validateMobile()\"\r\n      [(ngModel)]=\"mobileNumber\"\r\n    />\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-mobile-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <div class=\"input-group mb-2\">\r\n    <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2\">\r\n      <lib-dropdown\r\n       [items]=\"countryDetails\"\r\n      [multiple] = \"false\"\r\n      [(selectedItems)]=\"selectedCountry\"></lib-dropdown>\r\n    </div>\r\n    <input\r\n      type=\"number\"\r\n      class=\"form-control col-xs-7 col-7 col-md-9  height mobileField\" \r\n      [placeholder]=\"placeholder\"\r\n      aria-label=\"Mobile Number\"\r\n      [class.invalid]=\"validationFailed\"\r\n      (blur)=\"validateMobile()\"\r\n      [(ngModel)]=\"mobileNumber\"\r\n    />\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: CountryService }]; }, propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class NumberFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.upDown = this.question.formElement.appearance.upAndDownButton;
+        this.allowNegativeValues =
+            this.question.formElement.appearance.allowNegativeValues;
+        this.placeholder = this.question.formElement.appearance.placeholder;
+        this.min = this.question.formElement.validation.min;
+        this.max = this.question.formElement.validation.max;
+    }
+    validateNumber() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && !this.enteredNumber) {
+            this.validationFailed = true;
+            this.validationMessage = `Please enter a valid number`;
+            this.validate.emit(this.validationFailed);
+        }
+        else if (!this.allowNegativeValues && this.enteredNumber < 0) {
+            this.validationFailed = true;
+            this.validationMessage = 'Please enter a positive number';
+            this.validate.emit(this.validationFailed);
+        }
+        else if (this.enteredNumber < this.min || this.enteredNumber > this.max) {
+            this.validationFailed = true;
+            this.validationMessage = `Please enter a valid number between ${this.min} and ${this.max}`;
+            this.validate.emit(this.validationFailed);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <input\r\n    type=\"number\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [class.hide-spin-buttons]=\"!upDown\"\r\n    (blur)=\"validateNumber()\"\r\n    [(ngModel)]=\"enteredNumber\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-number-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <input\r\n    type=\"number\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [class.hide-spin-buttons]=\"!upDown\"\r\n    (blur)=\"validateNumber()\"\r\n    [(ngModel)]=\"enteredNumber\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.hide-spin-buttons::-webkit-outer-spin-button,.hide-spin-buttons::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class PasswordFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.allowedSpecialCharacters = [];
+        this.validationMessage = '';
+        this.cnfrmValidationMessage = '';
+        this.validationFailed = false;
+        this.validatedCnfrmPassword = false;
+        this.enteredPassowrd = '';
+        this.enteredCnfrmPassword = '';
+        this.passwordStrength = 0;
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.confirmPassword = this.question.formElement.appearance.confirmPassword;
+        this.displayStrength = this.question.formElement.appearance.displayStrong;
+        this.viewButton = this.question.formElement.appearance.viewButton;
+        this.maxLength = this.question.formElement.validation.maxLength;
+        this.minLength = this.question.formElement.validation.minLength;
+        this.requireLowercaseLetters =
+            this.question.formElement.validation.requireLowercaseLetters;
+        this.requireUppercaseLetters =
+            this.question.formElement.validation.requireUppercaseLetters;
+        this.requireNumbers = this.question.formElement.validation.requireNumbers;
+        this.requireSpecialCharacters =
+            this.question.formElement.validation.requireSpecialCharacters;
+        if (this.requireSpecialCharacters) {
+            this.allowedSpecialCharacters =
+                this.question.formElement.validation.allowedSpecialCharacters
+                    .split(',')
+                    .map((char) => char.trim());
+        }
+    }
+    togglePasswordVisibility() {
+        let passwordField = document.getElementById('passwordField');
+        let eyeIcon = document.getElementById('passwordEyeIcon');
+        if (passwordField.type === 'password') {
+            passwordField.type = 'text';
+            eyeIcon.classList.remove('fa-eye');
+            eyeIcon.classList.add('fa-eye-slash');
+        }
+        else {
+            passwordField.type = 'password';
+            eyeIcon.classList.remove('fa-eye-slash');
+            eyeIcon.classList.add('fa-eye');
+        }
+    }
+    toggleCnfrmPasswordVisibility() {
+        let passwordField = document.getElementById('cnfrmPasswordField');
+        let eyeIcon = document.getElementById('CnfrmPasswordEyeIcon');
+        if (passwordField.type === 'password') {
+            passwordField.type = 'text';
+            eyeIcon.classList.remove('fa-eye');
+            eyeIcon.classList.add('fa-eye-slash');
+        }
+        else {
+            passwordField.type = 'password';
+            eyeIcon.classList.remove('fa-eye-slash');
+            eyeIcon.classList.add('fa-eye');
+        }
+    }
+    checkPasswordMatch() {
+        this.validatedCnfrmPassword = false;
+        this.cnfrmValidationMessage = '';
+        if (this.required && this.confirmPassword && !this.enteredCnfrmPassword) {
+            this.validatedCnfrmPassword = true;
+            this.cnfrmValidationMessage = `Please enter a valid password`;
+        }
+        if (this.enteredPassowrd != this.enteredCnfrmPassword && this.confirmPassword) {
+            this.validatedCnfrmPassword = true;
+            this.cnfrmValidationMessage = 'Passwords do not match';
+        }
+    }
+    validatePassword() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && !this.enteredPassowrd) {
+            this.validationFailed = true;
+            this.validationMessage = `Please enter a valid password`;
+            this.question.validation = false;
+            this.validate.emit(this.validationFailed);
+        }
+        else if (this.requireLowercaseLetters ||
+            this.requireUppercaseLetters ||
+            this.requireNumbers ||
+            this.requireSpecialCharacters) {
+            const lowercaseRegex = /[a-z]/;
+            const uppercaseRegex = /[A-Z]/;
+            const numberRegex = /\d/;
+            let lowerCaseValidate = lowercaseRegex.test(this.enteredPassowrd);
+            let upperCaseValidate = uppercaseRegex.test(this.enteredPassowrd);
+            let containsNumber = numberRegex.test(this.enteredPassowrd);
+            let containsSpecialCharacter = this.allowedSpecialCharacters.some((char) => this.enteredPassowrd.includes(char));
+            if (!lowerCaseValidate && this.requireLowercaseLetters) {
+                this.validationFailed = true;
+                this.validationMessage =
+                    'Password must contain at least one lowercase letter';
+                this.validate.emit(this.validationFailed);
+                this.question.validation = false;
+            }
+            else if (!upperCaseValidate && this.requireUppercaseLetters) {
+                this.validationFailed = true;
+                this.validationMessage =
+                    'Password must contain at least one uppercase letter';
+                this.validate.emit(this.validationFailed);
+                this.question.validation = false;
+            }
+            else if (!containsNumber && this.requireNumbers) {
+                this.validationFailed = true;
+                this.validationMessage = 'Password must contain at least one number';
+                this.validate.emit(this.validationFailed);
+                this.question.validation = false;
+            }
+            else if (!containsSpecialCharacter && this.requireSpecialCharacters) {
+                this.validationFailed = true;
+                this.validationMessage =
+                    'Password must contain at least one special character';
+                this.question.validation = false;
+                this.validate.emit(this.validationFailed);
+            }
+            else if (this.enteredPassowrd.length < this.minLength ||
+                this.enteredPassowrd.length > this.maxLength) {
+                this.validationFailed = true;
+                this.validationMessage = `Password must be between ${this.minLength} and ${this.maxLength} characters long`;
+                this.validate.emit(this.validationFailed);
+                this.question.validation = false;
+            }
+            else {
+                this.question.validation = true;
+            }
+            const lengthStrength = Math.min(100, Math.max(0, ((this.enteredPassowrd.length - this.minLength) /
+                (this.maxLength - this.minLength)) *
+                100));
+            const uppercaseStrength = upperCaseValidate ? 20 : 0;
+            const lowercaseStrength = lowerCaseValidate ? 20 : 0;
+            const numberStrength = containsNumber ? 20 : 0;
+            this.passwordStrength =
+                lengthStrength + uppercaseStrength + lowercaseStrength + numberStrength;
+        }
+        else {
+            this.question.validation = true;
+        }
+    }
+    validateInput(event) {
+        this.question.answer = event.target.value;
+        this.validatePassword();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PasswordFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"password-input-wrapper\">\r\n    <div  class=\"input-wrapper\">\r\n    <label for=\"passwordField\">{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      id=\"passwordField\"\r\n      (blur)=\"validatePassword()\"\r\n      [(ngModel)]=\"enteredPassowrd\"\r\n      [class.invalid]=\"validationFailed\"\r\n      (input)=\"validateInput($event)\"\r\n    />\r\n    <button id=\"togglePasswordBtn\" class=\"toggle-password-btn\" (click)=\"togglePasswordVisibility()\">\r\n      <i class=\"fa fa-eye\" id=\"passwordEyeIcon\"></i>\r\n    </button>\r\n  </div>\r\n  <div class=\"password-strength-meter\" *ngIf=\"displayStrength\">\r\n    <div class=\"progress\">\r\n      <div\r\n        class=\"progress-bar\"\r\n        role=\"progressbar\"\r\n        [style.width]=\"passwordStrength + '%'\"\r\n        [class.bg-danger]=\"passwordStrength < 30\"\r\n        [class.bg-warning]=\"passwordStrength >= 30 && passwordStrength < 70\"\r\n        [class.bg-success]=\"passwordStrength >= 70\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n  \r\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\r\n    <label for=\"cnfrmPasswordField\">Confirm password</label>\r\n    <input type=\"password\" class=\"form-control mb-2 height\" id=\"cnfrmPasswordField\"\r\n    (blur)=\"checkPasswordMatch()\"\r\n    [(ngModel)]=\"enteredCnfrmPassword\"\r\n    [class.invalid]=\"validatedCnfrmPassword\">\r\n    <button id=\"toggleCnfrmPasswordBtn\" class=\"toggle-password-btn\" (click)=\"toggleCnfrmPasswordVisibility()\">\r\n      <i class=\"fa fa-eye\" id=\"CnfrmPasswordEyeIcon\"></i>\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{cnfrmValidationMessage}}</div>\r\n \r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.password-input-wrapper{position:relative}.password-input{padding-right:40px}.toggle-password-btn{position:absolute;top:70%;right:15px;transform:translateY(-50%);border:none;background-color:transparent;cursor:pointer}.toggle-password-btn:focus{outline:none}.cnfrmPasswordWrapper{position:relative}.password-strength-meter{width:40%;margin-top:10px;margin-left:auto}.progress{height:10px}.progress-bar{transition:width .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PasswordFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-password-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"password-input-wrapper\">\r\n    <div  class=\"input-wrapper\">\r\n    <label for=\"passwordField\">{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control mb-2 height\"\r\n      id=\"passwordField\"\r\n      (blur)=\"validatePassword()\"\r\n      [(ngModel)]=\"enteredPassowrd\"\r\n      [class.invalid]=\"validationFailed\"\r\n      (input)=\"validateInput($event)\"\r\n    />\r\n    <button id=\"togglePasswordBtn\" class=\"toggle-password-btn\" (click)=\"togglePasswordVisibility()\">\r\n      <i class=\"fa fa-eye\" id=\"passwordEyeIcon\"></i>\r\n    </button>\r\n  </div>\r\n  <div class=\"password-strength-meter\" *ngIf=\"displayStrength\">\r\n    <div class=\"progress\">\r\n      <div\r\n        class=\"progress-bar\"\r\n        role=\"progressbar\"\r\n        [style.width]=\"passwordStrength + '%'\"\r\n        [class.bg-danger]=\"passwordStrength < 30\"\r\n        [class.bg-warning]=\"passwordStrength >= 30 && passwordStrength < 70\"\r\n        [class.bg-success]=\"passwordStrength >= 70\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n  \r\n  <div class=\"cnfrmPasswordWrapper\" *ngIf=\"confirmPassword\">\r\n    <label for=\"cnfrmPasswordField\">Confirm password</label>\r\n    <input type=\"password\" class=\"form-control mb-2 height\" id=\"cnfrmPasswordField\"\r\n    (blur)=\"checkPasswordMatch()\"\r\n    [(ngModel)]=\"enteredCnfrmPassword\"\r\n    [class.invalid]=\"validatedCnfrmPassword\">\r\n    <button id=\"toggleCnfrmPasswordBtn\" class=\"toggle-password-btn\" (click)=\"toggleCnfrmPasswordVisibility()\">\r\n      <i class=\"fa fa-eye\" id=\"CnfrmPasswordEyeIcon\"></i>\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"validatedCnfrmPassword\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{cnfrmValidationMessage}}</div>\r\n \r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.password-input-wrapper{position:relative}.password-input{padding-right:40px}.toggle-password-btn{position:absolute;top:70%;right:15px;transform:translateY(-50%);border:none;background-color:transparent;cursor:pointer}.toggle-password-btn:focus{outline:none}.cnfrmPasswordWrapper{position:relative}.password-strength-meter{width:40%;margin-top:10px;margin-left:auto}.progress{height:10px}.progress-bar{transition:width .3s ease-in-out}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class RadioButtonFieldsComponent {
+    constructor(formService) {
+        this.formService = formService;
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.color = '';
+        this.minimumSelection = 0;
+        this.maximumSelection = 0;
+        this.optionType = '';
+        this.lookupTable = '';
+        this.customOptions = [];
+        this.database = {};
+        this.api = {};
+        this.apiOptions = []; // Assuming you have a property to store API options
+        this.selectedOption = '';
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.color = this.question.formElement.appearance.color;
+        this.optionType = this.question.formElement.option.optionType;
+        switch (this.optionType) {
+            case 'OPTION':
+                this.customOptions = this.question.formElement.option.customOptions;
+                break;
+            case 'LOOKUP':
+                this.lookupTable = this.question.formElement.option.lookupTable;
+                this.fetchDataFromLookup();
+                break;
+            case 'DATABASE':
+                this.database = this.question.formElement.option.database;
+                this.fetchDataFromDatabase();
+                break;
+            case 'API':
+                this.api = this.question.formElement.option.api;
+                this.fetchDataFromAPI();
+                break;
+            default:
+                console.warn('Unknown option type:', this.optionType);
+        }
+    }
+    fetchDataFromLookup() {
+        this.formService.fetchDataFromLookup(this.lookupTable).subscribe((response) => {
+            this.customOptions = response.result.values.map((item) => ({
+                value: item.value,
+                label: item.label,
+            }));
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    fetchDataFromDatabase() {
+        const transformedDatabase = this.transformDatabaseObject(this.database);
+        this.formService.fetchDataFromDatabase(transformedDatabase).subscribe((response) => {
+            if (response.success) {
+                this.customOptions = response.result.map((item) => ({
+                    value: item.value,
+                    label: item.label,
+                }));
+            }
+            else {
+                console.error('Error fetching data from database:', response.message);
+            }
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    transformDatabaseObject(database) {
+        return {
+            tableName: database.tableName,
+            valueField: database.valueField,
+            labelField: database.labelField,
+            criteria: database.criteria.map((criteria) => ({
+                field: criteria.field,
+                condition: criteria.condition,
+                value: criteria.inputValue,
+                logicalOperator: criteria.logicalOperator,
+            })),
+        };
+    }
+    fetchDataFromAPI() {
+        const apiConfig = this.api;
+        this.formService.fetchDataFromExternalAPI(apiConfig.url).subscribe((response) => {
+            const data = this.extractDataByPath(response, apiConfig.pathToValue);
+            this.customOptions = data.map((item) => ({
+                value: item[apiConfig.valueField],
+                label: item[apiConfig.labelField],
+            }));
+        }, (error) => {
+            console.error('HTTP Error:', error);
+        });
+    }
+    extractDataByPath(data, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], data);
+    }
+    validateInput() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && this.selectedOption == '') {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonFieldsComponent, deps: [{ token: FormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\r\n    <input\r\n      class=\"formCheckbox mb-2\"\r\n      type=\"radio\"\r\n      [name]=\"question.id\"\r\n      [id]=\"option.value\"\r\n      [value]=\"option.value\"\r\n      [style.accent-color]=\"color\"\r\n      (blur)=\"validateInput()\"\r\n      [(ngModel)]=\"selectedOption\"\r\n    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-radio-button-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"checkboxField\" *ngFor=\"let option of customOptions\">\r\n    <input\r\n      class=\"formCheckbox mb-2\"\r\n      type=\"radio\"\r\n      [name]=\"question.id\"\r\n      [id]=\"option.value\"\r\n      [value]=\"option.value\"\r\n      [style.accent-color]=\"color\"\r\n      (blur)=\"validateInput()\"\r\n      [(ngModel)]=\"selectedOption\"\r\n    />\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'OPTION'\"\r\n      >{{ option.value }}</label\r\n    >\r\n    <label\r\n      class=\"formCheckLabel ms-2 mb-2\"\r\n      [for]=\"option.value\"\r\n      *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\r\n      >{{ option.label }}</label\r\n    >\r\n  </div>\r\n\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg\r\n      class=\"validationSvg\"\r\n      viewBox=\"0 0 24 24\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      <path\r\n        d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        clip-rule=\"evenodd\"\r\n        d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\r\n        fill=\"#FF0000\"\r\n        stroke=\"#FF0000\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <path\r\n        d=\"M12 12.75L12 7.75\"\r\n        stroke=\"white\"\r\n        stroke-width=\"1.5\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n      />\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\r\n    </svg>\r\n    {{ validationMessage }}\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.formCheckbox,.formCheckLabel{cursor:pointer}.formCheckbox{width:15px;height:15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class RichTextEditorFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.limitedCharacters = false;
+        this.counts = 0;
+        this.htmlContent = '';
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+        this.config = {
+            editable: true,
+            spellcheck: true,
+            height: '15rem',
+            minHeight: '5rem',
+            placeholder: 'Enter text here...',
+            translate: 'no',
+            defaultParagraphSeparator: 'p',
+            defaultFontName: 'Arial',
+            toolbarHiddenButtons: [['bold']],
+            customClasses: [
+                {
+                    name: 'quote',
+                    class: 'quote',
+                },
+                {
+                    name: 'redText',
+                    class: 'redText',
+                },
+                {
+                    name: 'titleText',
+                    class: 'titleText',
+                    tag: 'h1',
+                },
+            ],
+        };
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.numberOfRows = this.question.formElement.appearance.numberOfRows;
+        this.limitedCharacters =
+            this.question.formElement.validation.limitedCharacters;
+        this.counts = this.question.formElement.validation.count;
+        this.numberOfRows = this.question.formElement.appearance.numberOfRows;
+        this.limitedCharacters =
+            this.question.formElement.validation.limitedCharacters;
+        if (this.limitedCharacters) {
+            this.characterCount = this.question.formElement.validation.count;
+        }
+    }
+    validateEditor() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (!this.htmlContent && this.required) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+            ;
+        }
+    }
+    validateInput(event) {
+        if (this.htmlContent.length >= this.characterCount) {
+            this.htmlContent = this.htmlContent.substring(0, this.characterCount);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <angular-editor\r\n    [(ngModel)]=\"htmlContent\"\r\n    [config]=\"config\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateEditor()\"\r\n  ></angular-editor>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RichTextEditorFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-rich-text-editor-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>\r\n</div>\r\n  <angular-editor\r\n    [(ngModel)]=\"htmlContent\"\r\n    [config]=\"config\"\r\n    (input)=\"validateInput($event)\"\r\n    (blur)=\"validateEditor()\"\r\n  ></angular-editor>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class SelectionMatrixFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+    }
+    ngOnInit() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.question;
+        this.count;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionMatrixFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n    <div  class=\"input-wrapper\">\r\n    <label>{{question.question}}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n        <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n    </div>\r\n    </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionMatrixFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-selection-matrix-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n    <div  class=\"input-wrapper\">\r\n    <label>{{question.question}}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n        <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n    </div>\r\n    </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }] } });
+
+class SignatureFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.maxFileSize = 0;
+        this.minFileSize = 0;
+    }
+    ngOnInit() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.maxFileSize = this.question.formElement.validation.maxFileSize;
+        this.minFileSize = this.question.formElement.validation.minFileSize;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n    <div  class=\"input-wrapper\">\r\n    <label>{{question.question}}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n        <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n    </div>\r\n</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignatureFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-signature-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n    <div  class=\"input-wrapper\">\r\n    <label>{{question.question}}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n        <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n          <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n    </div>\r\n</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }] } });
+
+class SliderFieldsComponent {
+    constructor(renderer, el) {
+        this.renderer = renderer;
+        this.el = el;
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.minValue = 0;
+        this.maxValue = 0;
+        this.stepValue = 0;
+        this.changeSliderColor = false;
+        this.sliderColor = '';
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.selectedValue = 0; // Initialize with default value
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.minValue = this.question.formElement.appearance.minValue;
+        this.maxValue = this.question.formElement.appearance.maxValue;
+        this.stepValue = this.question.formElement.appearance.stepValue;
+        this.changeSliderColor =
+            this.question.formElement.appearance.changeSliderColor;
+        if (this.changeSliderColor) {
+            this.sliderColor = this.question.formElement.appearance.sliderColor;
+        }
+    }
+    validateSlider() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && this.selectedValue == 0) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderFieldsComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n</div>\r\n</div>\r\n  <div class=\"sliderRow\">\r\n    <div class=\"sliderLeft\">\r\n      <mat-slider\r\n        [min]=\"minValue\"\r\n        [max]=\"maxValue\"\r\n        [step]=\"stepValue\"\r\n        [ngStyle]=\"{\r\n          '--mdc-slider-active-track-color': changeSliderColor\r\n            ? sliderColor\r\n            : ''\r\n        }\"\r\n      >\r\n        <input matSliderThumb [(ngModel)]=\"selectedValue\" (blur)=\"validateSlider()\"/>\r\n      </mat-slider>\r\n    </div>\r\n    <div class=\"sliderRight\">\r\n      <label class=\"selected-count font-weight-bold\">{{ selectedValue }}</label>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.selected-count{font-size:.8rem;color:#000}mat-slider{width:100%}.mat-mdc-slider.mat-primary{--mdc-slider-handle-color: #fcfcfc;--mdc-slider-handle-width: 15px;--mdc-slider-handle-height: 15px;--mat-mdc-slider-focus-ripple-color: none;--mat-mdc-slider-hover-ripple-color: none;--mdc-slider-focus-handle-color: #fcfcfc;--mdc-slider-inactive-track-color: #9e9d9d}.mat-mdc-slider .mdc-slider__thumb-knob{outline:1px solid #ff0000!important}.mat-slider-thumb{background-color:none!important;border:none!important;box-shadow:none;outline:none}.sliderRow{display:flex;align-items:center;gap:32px;width:100%}.sliderLeft{flex:1}.sliderRight label{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-slider-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n</div>\r\n</div>\r\n  <div class=\"sliderRow\">\r\n    <div class=\"sliderLeft\">\r\n      <mat-slider\r\n        [min]=\"minValue\"\r\n        [max]=\"maxValue\"\r\n        [step]=\"stepValue\"\r\n        [ngStyle]=\"{\r\n          '--mdc-slider-active-track-color': changeSliderColor\r\n            ? sliderColor\r\n            : ''\r\n        }\"\r\n      >\r\n        <input matSliderThumb [(ngModel)]=\"selectedValue\" (blur)=\"validateSlider()\"/>\r\n      </mat-slider>\r\n    </div>\r\n    <div class=\"sliderRight\">\r\n      <label class=\"selected-count font-weight-bold\">{{ selectedValue }}</label>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.selected-count{font-size:.8rem;color:#000}mat-slider{width:100%}.mat-mdc-slider.mat-primary{--mdc-slider-handle-color: #fcfcfc;--mdc-slider-handle-width: 15px;--mdc-slider-handle-height: 15px;--mat-mdc-slider-focus-ripple-color: none;--mat-mdc-slider-hover-ripple-color: none;--mdc-slider-focus-handle-color: #fcfcfc;--mdc-slider-inactive-track-color: #9e9d9d}.mat-mdc-slider .mdc-slider__thumb-knob{outline:1px solid #ff0000!important}.mat-slider-thumb{background-color:none!important;border:none!important;box-shadow:none;outline:none}.sliderRow{display:flex;align-items:center;gap:32px;width:100%}.sliderLeft{flex:1}.sliderRight label{margin-bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class TermsAndConditionFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+    }
+    ngOnInit() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.question;
+        this.count;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermsAndConditionFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n  </div>\r\n</div>\r\n  </div>\r\n  \r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TermsAndConditionFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-terms-and-condition-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n  </div>\r\n</div>\r\n  </div>\r\n  \r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }] } });
+
+class TextAreaFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.answer = '';
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.enteredText = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.numberOfRows = this.question.formElement.appearance.numberOfRows;
+        this.limitedCharacters =
+            this.question.formElement.validation.limitedCharacters;
+        if (this.limitedCharacters) {
+            this.characterCount = this.question.formElement.validation.count;
+        }
+    }
+    validateInput(event) {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        let value = event.target.value;
+        if (this.required && !value) {
+            this.validationFailed = true;
+            this.validationMessage = 'Please enter a valid text';
+        }
+    }
+    validateTextarea() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (!this.enteredText && this.required) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+            ;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n</div>\r\n</div>\r\n  <textarea class=\"form-control mb-2\" [rows]=\"numberOfRows\"\r\n  (input)=\"validateInput($event)\"\r\n  (blur)=\"validateTextarea()\"\r\n  [(ngModel)]=\"enteredText\"\r\n  [class.invalid]=\"validationFailed\"\r\n  [maxlength]=\"characterCount\"\r\n  ></textarea>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextAreaFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-text-area-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n</div>\r\n</div>\r\n  <textarea class=\"form-control mb-2\" [rows]=\"numberOfRows\"\r\n  (input)=\"validateInput($event)\"\r\n  (blur)=\"validateTextarea()\"\r\n  [(ngModel)]=\"enteredText\"\r\n  [class.invalid]=\"validationFailed\"\r\n  [maxlength]=\"characterCount\"\r\n  ></textarea>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class TextFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.answer = '';
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.placeholder = '';
+        this.defaultValue = '';
+        this.textAlign = '';
+        this.font = '';
+        this.fontSize = '';
+        this.validationType = '';
+        this.validation = '';
+        this.regex = '';
+        this.enteredText = '';
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.placeholder = this.question.formElement.appearance.placeholder;
+        this.defaultValue = this.question.formElement.appearance.defaultValue;
+        this.isBold = this.question.formElement.appearance.bold;
+        this.isItalics = this.question.formElement.appearance.italics;
+        this.isUnderline = this.question.formElement.appearance.underline;
+        this.textAlign = this.question.formElement.appearance.textAlign;
+        this.font = this.question.formElement.appearance.font;
+        this.fontSize = this.question.formElement.appearance.fontSize;
+        this.validationType = this.question.formElement.validation.validationType;
+        if (this.validationType == 'CUSTOM_VALIDATION') {
+            this.validation = this.question.formElement.validation.validation;
+        }
+        else if (this.validationType == 'REGULAR_EXPRESSION') {
+            this.regex = this.question.formElement.validation.regex;
+        }
+    }
+    validatetextField() {
+        if (this.required && !this.enteredText) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.validate.emit(this.validationFailed);
+        }
+    }
+    validateInput(event) {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        let value = event.target.value;
+        if (this.required && !this.enteredText) {
+            this.validationFailed = true;
+            this.validationMessage = 'Please enter a valid text';
+            this.validate.emit(this.validationFailed);
+        }
+        if (this.validation == 'Numbers only') {
+            event.target.value = value?.replace(/\D/g, '');
+        }
+        else if (this.validation == 'Alphanumeric') {
+            event.target.value = value?.replace(/[^a-zA-Z0-9]/g, '');
+        }
+        else if (this.validationType == 'REGULAR_EXPRESSION' && this.regex) {
+            //  /[^aeiou]/gi
+            event.target.value = value?.replace(this.regex, '');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextFieldsComponent, selector: "lib-text-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\" viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  \r\n  <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [value]=\"defaultValue\"\r\n    [ngClass]=\"{\r\n      'bold': isBold,\r\n      'underline': isUnderline,\r\n      'italics': isItalics\r\n    }\"\r\n    [style.text-align]=\"textAlign\"\r\n    [style.font-family]=\"font\"\r\n    [style.font-size]=\"fontSize+'px'\"\r\n    [(ngModel)]=\"enteredText\"\r\n    (blur)=\"validatetextField()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-control:not(:placeholder-shown).bold{font-weight:700}.form-control:not(:placeholder-shown).underline{text-decoration:underline}.form-control:not(:placeholder-shown).italics{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-text-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label>&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n      <svg class=\"hintSvg\" viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  \r\n  <input\r\n    type=\"text\"\r\n    class=\"form-control mb-2 height\"\r\n    [placeholder]=\"placeholder\"\r\n    [value]=\"defaultValue\"\r\n    [ngClass]=\"{\r\n      'bold': isBold,\r\n      'underline': isUnderline,\r\n      'italics': isItalics\r\n    }\"\r\n    [style.text-align]=\"textAlign\"\r\n    [style.font-family]=\"font\"\r\n    [style.font-size]=\"fontSize+'px'\"\r\n    [(ngModel)]=\"enteredText\"\r\n    (blur)=\"validatetextField()\"\r\n    (input)=\"validateInput($event)\"\r\n    [class.invalid]=\"validationFailed\"\r\n  />\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-control:not(:placeholder-shown).bold{font-weight:700}.form-control:not(:placeholder-shown).underline{text-decoration:underline}.form-control:not(:placeholder-shown).italics{font-style:italic}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class ToggleSwitchFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.labelOnValue = '';
+        this.labelOffValue = '';
+        this.labelOnColor = '';
+        this.labelOffColor = '';
+        this.toggleBackgroundColor = '';
+    }
+    ngOnInit() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.labelOnValue = this.question.formElement.appearance.labelOnValue;
+        this.labelOffValue = this.question.formElement.appearance.labelOffValue;
+        this.labelOnColor = this.question.formElement.appearance.labelOnColor;
+        this.labelOffColor = this.question.formElement.appearance.labelOffColor;
+        this.toggleBackgroundColor = this.labelOnColor;
+    }
+    toggleSliderColor(event) {
+        let isChecked = event.target.checked;
+        // Update slider background color based on toggle state
+        this.toggleBackgroundColor = isChecked
+            ? this.question.formElement.appearance.labelOffColor
+            : this.question.formElement.appearance.labelOnColor;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleSwitchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-2 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>  \r\n</div>\r\n  <div class=\"mt-2\">\r\n    <label class=\"switch\">\r\n      <input type=\"checkbox\" id=\"togBtn\" (change)=\"toggleSliderColor($event)\" />\r\n      <div\r\n        class=\"slider round\"\r\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\r\n      >\r\n        <span class=\"on action-btn-text\">{{ labelOffValue }}</span>\r\n        <span class=\"off action-btn-text\">{{ labelOnValue }}</span>\r\n      </div>\r\n    </label>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.switch{position:relative;display:inline-block;width:auto;height:34px;min-width:120px}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;right:59px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#00c48c}input:not(:checked)+.slider{background-color:#00c48c}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{transform:translate(86px)}.on{display:none}.on,.off{color:#fff;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;font-size:13px;font-weight:500}input:checked+.slider .on{display:block}input:checked+.slider .off{display:none}.slider.round{border-radius:28px}.slider.round:before{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleSwitchFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-toggle-switch-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-2 px-3\">\r\n  <div  class=\"input-wrapper\">\r\n  <label>{{ question.question }}</label>&nbsp;\r\n  <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n  <div class=\"svg-wrapper  mb-2 hintIcon\" [attr.data-title]=\"hint\" *ngIf=\"hint\">\r\n    <svg class=\"hintSvg\"  viewBox=\"0 0 30 30\"  xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\" stroke=\"#323232\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n    </svg>\r\n  </div>  \r\n</div>\r\n  <div class=\"mt-2\">\r\n    <label class=\"switch\">\r\n      <input type=\"checkbox\" id=\"togBtn\" (change)=\"toggleSliderColor($event)\" />\r\n      <div\r\n        class=\"slider round\"\r\n        [ngStyle]=\"{ 'background-color': toggleBackgroundColor }\"\r\n      >\r\n        <span class=\"on action-btn-text\">{{ labelOffValue }}</span>\r\n        <span class=\"off action-btn-text\">{{ labelOnValue }}</span>\r\n      </div>\r\n    </label>\r\n  </div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.switch{position:relative;display:inline-block;width:auto;height:34px;min-width:120px}.switch input{display:none}.slider{position:absolute;cursor:pointer;inset:0;transition:.4s}.slider:before{position:absolute;content:\"\";height:26px;width:26px;left:4px;right:59px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#00c48c}input:not(:checked)+.slider{background-color:#00c48c}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{transform:translate(86px)}.on{display:none}.on,.off{color:#fff;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;font-size:13px;font-weight:500}input:checked+.slider .on{display:block}input:checked+.slider .off{display:none}.slider.round{border-radius:28px}.slider.round:before{border-radius:50%}\n"] }]
+        }], propDecorators: { question: [{
+                type: Input
+            }] } });
+
+class UrlFieldsComponent {
+    constructor() {
+        this.question = {};
+        this.count = 0;
+        this.required = false;
+        this.hint = '';
+        this.placeholder = '';
+        this.enteredUrl = '';
+        this.validationFailed = false;
+        this.validationMessage = '';
+        this.validate = new EventEmitter();
+    }
+    ngOnInit() {
+        this.valueAssigned();
+    }
+    handleClick() {
+        const textFieldValue = document.getElementById('textField').value;
+        window.open(textFieldValue, '_blank');
+    }
+    valueAssigned() {
+        this.count = this.question.count;
+        this.required = this.question.required;
+        this.hint = this.question.hint;
+        this.placeholder = this.question.formElement.appearance.placeholder;
+        this.showPreviewButton =
+            this.question.formElement.appearance.showPreviewButton;
+    }
+    validateUrl() {
+        this.validationFailed = false;
+        this.validationMessage = '';
+        if (this.required && !this.enteredUrl) {
+            this.validationFailed = true;
+            this.validationMessage = 'This is a required question';
+            this.question.validation = false;
+        }
+        else {
+            this.question.validation = true;
+        }
+    }
+    validateInput(event) {
+        this.validateUrl();
+        this.question.answer = event.target.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: { question: "question" }, outputs: { validate: "validate" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      id=\"textField\"\r\n      type=\"text\"\r\n      class=\"form-control col-11.5 rounded height\"\r\n      [placeholder]=\"placeholder\"\r\n      [(ngModel)]=\"enteredUrl\"\r\n      (blur)=\"validateUrl()\"\r\n      (input)=\"validateInput($event)\"\r\n      [class.invalid]=\"validationFailed\"\r\n    />\r\n    <div class=\"ps-2\">\r\n      <button\r\n        *ngIf=\"showPreviewButton\"\r\n        type=\"button\"\r\n        class=\"btn col-.5 custom-button rounded d-flex justify-content-center align-items-center height\"\r\n        (click)=\"handleClick()\"\r\n      >\r\n        <svg\r\n          width=\"30\"\r\n          height=\"30\"\r\n          viewBox=\"0 0 30 30\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M4.99561 16.2503C4.99561 21.7754 9.47462 26.2544 14.9998 26.2544C20.5249 26.2544 25.0039 21.7754 25.0039 16.2503C25.0039 10.7251 20.5249 6.24609 14.9998 6.24609H6.24613\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 2.49219L6.24609 6.24375\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 9.99766L6.24609 6.24609\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M17.7924 14.8125L14.3035 18.3015L12.2051 16.2106\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.custom-button{border:1px solid #ced4da;background-color:transparent;padding:.375rem .75rem;line-height:1.5;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UrlFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-url-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-4 px-3\">\r\n  <div class=\"input-wrapper\">\r\n    <label>{{ question.question }}</label\r\n    >&nbsp;\r\n    <span class=\"text-danger\" *ngIf=\"required\">*</span>\r\n    <div\r\n      class=\"svg-wrapper mb-2 hintIcon\"\r\n      [attr.data-title]=\"hint\"\r\n      *ngIf=\"hint\"\r\n    >\r\n      <svg\r\n        class=\"hintSvg\"\r\n        viewBox=\"0 0 30 30\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n        <path\r\n          d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\r\n          stroke=\"#323232\"\r\n          stroke-width=\"1.5\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"input-group\">\r\n    <input\r\n      id=\"textField\"\r\n      type=\"text\"\r\n      class=\"form-control col-11.5 rounded height\"\r\n      [placeholder]=\"placeholder\"\r\n      [(ngModel)]=\"enteredUrl\"\r\n      (blur)=\"validateUrl()\"\r\n      (input)=\"validateInput($event)\"\r\n      [class.invalid]=\"validationFailed\"\r\n    />\r\n    <div class=\"ps-2\">\r\n      <button\r\n        *ngIf=\"showPreviewButton\"\r\n        type=\"button\"\r\n        class=\"btn col-.5 custom-button rounded d-flex justify-content-center align-items-center height\"\r\n        (click)=\"handleClick()\"\r\n      >\r\n        <svg\r\n          width=\"30\"\r\n          height=\"30\"\r\n          viewBox=\"0 0 30 30\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M4.99561 16.2503C4.99561 21.7754 9.47462 26.2544 14.9998 26.2544C20.5249 26.2544 25.0039 21.7754 25.0039 16.2503C25.0039 10.7251 20.5249 6.24609 14.9998 6.24609H6.24613\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 2.49219L6.24609 6.24375\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M9.99766 9.99766L6.24609 6.24609\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M17.7924 14.8125L14.3035 18.3015L12.2051 16.2106\"\r\n            stroke=\"#084FFF\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"validationFailed\" class=\"text-danger\">\r\n    <svg class=\"validationSvg\"  viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\" fill=\"#FF0000\" stroke=\"#FF0000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <path d=\"M12 12.75L12 7.75\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\"/>\r\n      </svg>\r\n      {{validationMessage}}</div>\r\n</div>\r\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-left:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%);padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;white-space:nowrap}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.custom-button{border:1px solid #ced4da;background-color:transparent;padding:.375rem .75rem;line-height:1.5;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { question: [{
+                type: Input
+            }], validate: [{
+                type: Output
+            }] } });
+
+class LogicComponent {
+    constructor() {
+        this.childLogics = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LogicComponent, selector: "lib-logic", inputs: { childLogics: "childLogics" }, ngImport: i0, template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div *ngFor=\"let formElement of childLogic.formElements\">\r\n    <!-- <lib-form-elements [grid]=\"formElement\"></lib-form-elements> -->\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-logic', template: "<div *ngFor=\"let childLogic of childLogics\">\r\n  <div *ngFor=\"let formElement of childLogic.formElements\">\r\n    <!-- <lib-form-elements [grid]=\"formElement\"></lib-form-elements> -->\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { childLogics: [{
+                type: Input
+            }] } });
+
+class QuestionComponent {
+    ngOnInit() { }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.question = {};
+        this.validations = [];
+        this.currentPageIndex = 0;
+        this.emitValidations = new EventEmitter();
+    }
+    handleValidation(validation) {
+        this.validations.push(validation);
+        // Update validationStatus array
+        this.emitValidations.emit(this.validations);
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuestionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuestionComponent, selector: "lib-question", inputs: { question: "question", currentPageIndex: "currentPageIndex" }, outputs: { emitValidations: "emitValidations" }, ngImport: i0, template: "<div>\r\n  <lib-check-box-fields\r\n    *ngIf=\"question.formElement.elementType === 'CHECK_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-check-box-fields>\r\n  <lib-date-time-fields\r\n    *ngIf=\"question.formElement.elementType === 'DATE_TIME'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-date-time-fields>\r\n  <lib-drop-down-fields\r\n    *ngIf=\"question.formElement.elementType === 'DROP_DOWN'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\r\n  <lib-file-picker-fields\r\n    *ngIf=\"question.formElement.elementType === 'FILE_PICKER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\r\n  <lib-location-fields\r\n    *ngIf=\"question.formElement.elementType === 'LOCATION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-location-fields>\r\n\r\n  <lib-mail-fields\r\n    *ngIf=\"question.formElement.elementType === 'EMAIL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mail-fields>\r\n  <lib-mobile-fields\r\n    *ngIf=\"question.formElement.elementType === 'MOBILE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mobile-fields>\r\n  <lib-number-fields\r\n    *ngIf=\"question.formElement.elementType === 'NUMBER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-number-fields>\r\n  <lib-password-fields\r\n    *ngIf=\"question.formElement.elementType === 'PASSWORD'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-password-fields>\r\n  <lib-radio-button-fields\r\n    *ngIf=\"question.formElement.elementType === 'RADIO_BUTTON'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\r\n  <lib-rich-text-editor-fields\r\n    *ngIf=\"question.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\r\n  <lib-selection-matrix-fields\r\n    *ngIf=\"question.formElement.elementType === 'SELECTION_MATRIX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\r\n  <lib-signature-fields\r\n    *ngIf=\"question.formElement.elementType === 'SIGNATURE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-signature-fields>\r\n  <lib-slider-fields\r\n    *ngIf=\"question.formElement.elementType === 'SLIDER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-slider-fields>\r\n  <lib-terms-and-condition-fields\r\n    *ngIf=\"question.formElement.elementType === 'TERMS_AND_CONDITION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\r\n  <lib-text-area-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_AREA'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-area-fields>\r\n  <lib-text-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-fields>\r\n  <lib-toggle-switch-fields\r\n    *ngIf=\"question.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\r\n  <lib-url-fields\r\n    *ngIf=\"question.formElement.elementType === 'URL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-url-fields>\r\n  <lib-logic *ngIf=\"question.childLogics\"\r\n    [childLogics]=\"question.childLogics\"></lib-logic>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: ["question"] }, { kind: "component", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: ["question"] }, { kind: "component", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: NumberFieldsComponent, selector: "lib-number-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: PasswordFieldsComponent, selector: "lib-password-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: RadioButtonFieldsComponent, selector: "lib-radio-button-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: RichTextEditorFieldsComponent, selector: "lib-rich-text-editor-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: SelectionMatrixFieldsComponent, selector: "lib-selection-matrix-fields", inputs: ["question"] }, { kind: "component", type: SignatureFieldsComponent, selector: "lib-signature-fields", inputs: ["question"] }, { kind: "component", type: SliderFieldsComponent, selector: "lib-slider-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: TermsAndConditionFieldsComponent, selector: "lib-terms-and-condition-fields", inputs: ["question"] }, { kind: "component", type: TextAreaFieldsComponent, selector: "lib-text-area-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: TextFieldsComponent, selector: "lib-text-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: ToggleSwitchFieldsComponent, selector: "lib-toggle-switch-fields", inputs: ["question"] }, { kind: "component", type: UrlFieldsComponent, selector: "lib-url-fields", inputs: ["question"], outputs: ["validate"] }, { kind: "component", type: LogicComponent, selector: "lib-logic", inputs: ["childLogics"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuestionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-question', template: "<div>\r\n  <lib-check-box-fields\r\n    *ngIf=\"question.formElement.elementType === 'CHECK_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-check-box-fields>\r\n  <lib-date-time-fields\r\n    *ngIf=\"question.formElement.elementType === 'DATE_TIME'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-date-time-fields>\r\n  <lib-drop-down-fields\r\n    *ngIf=\"question.formElement.elementType === 'DROP_DOWN'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-drop-down-fields>\r\n  <lib-file-picker-fields\r\n    *ngIf=\"question.formElement.elementType === 'FILE_PICKER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-file-picker-fields>\r\n  <lib-location-fields\r\n    *ngIf=\"question.formElement.elementType === 'LOCATION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-location-fields>\r\n\r\n  <lib-mail-fields\r\n    *ngIf=\"question.formElement.elementType === 'EMAIL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mail-fields>\r\n  <lib-mobile-fields\r\n    *ngIf=\"question.formElement.elementType === 'MOBILE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-mobile-fields>\r\n  <lib-number-fields\r\n    *ngIf=\"question.formElement.elementType === 'NUMBER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-number-fields>\r\n  <lib-password-fields\r\n    *ngIf=\"question.formElement.elementType === 'PASSWORD'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\">\r\n  </lib-password-fields>\r\n  <lib-radio-button-fields\r\n    *ngIf=\"question.formElement.elementType === 'RADIO_BUTTON'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-radio-button-fields>\r\n  <lib-rich-text-editor-fields\r\n    *ngIf=\"question.formElement.elementType === 'RICH_TEXT_EDITOR'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-rich-text-editor-fields>\r\n  <lib-selection-matrix-fields\r\n    *ngIf=\"question.formElement.elementType === 'SELECTION_MATRIX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-selection-matrix-fields>\r\n  <lib-signature-fields\r\n    *ngIf=\"question.formElement.elementType === 'SIGNATURE'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-signature-fields>\r\n  <lib-slider-fields\r\n    *ngIf=\"question.formElement.elementType === 'SLIDER'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-slider-fields>\r\n  <lib-terms-and-condition-fields\r\n    *ngIf=\"question.formElement.elementType === 'TERMS_AND_CONDITION'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-terms-and-condition-fields>\r\n  <lib-text-area-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_AREA'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-area-fields>\r\n  <lib-text-fields\r\n    *ngIf=\"question.formElement.elementType === 'TEXT_BOX'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-text-fields>\r\n  <lib-toggle-switch-fields\r\n    *ngIf=\"question.formElement.elementType === 'TOGGLE_SWITCH'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-toggle-switch-fields>\r\n  <lib-url-fields\r\n    *ngIf=\"question.formElement.elementType === 'URL'\"\r\n    [question]=\"question\"\r\n    (validate)=\"handleValidation($event)\"></lib-url-fields>\r\n  <lib-logic *ngIf=\"question.childLogics\"\r\n    [childLogics]=\"question.childLogics\"></lib-logic>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { question: [{
+                type: Input
+            }], currentPageIndex: [{
+                type: Input
+            }], emitValidations: [{
+                type: Output
+            }] } });
+
+class SubFormComponent {
+    constructor() {
+        this.subForm = {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubFormComponent, selector: "lib-sub-form", inputs: { subForm: "subForm" }, ngImport: i0, template: "<div class=\"outer-container mb-4 px-3\">\r\n  <div class=\"body container pt-3 pb-3 px-3\">\r\n    <div class=\"tab-content pt-4 pb-3 px-3\">\r\n      <p class=\"sectionTitle\">{{subForm.title}}</p>\r\n      <p class=\"description mb-5\">{{subForm.description}}</p>\r\n        <div *ngFor=\"let formElement of subForm.formElements\">\r\n            <!-- <lib-form-elements [grid]=\"formElement\"></lib-form-elements> -->\r\n          </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sub-form', template: "<div class=\"outer-container mb-4 px-3\">\r\n  <div class=\"body container pt-3 pb-3 px-3\">\r\n    <div class=\"tab-content pt-4 pb-3 px-3\">\r\n      <p class=\"sectionTitle\">{{subForm.title}}</p>\r\n      <p class=\"description mb-5\">{{subForm.description}}</p>\r\n        <div *ngFor=\"let formElement of subForm.formElements\">\r\n            <!-- <lib-form-elements [grid]=\"formElement\"></lib-form-elements> -->\r\n          </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}.tab-content{background-color:#fff}.sectionTitle{font-size:15px;font-weight:500}\n"] }]
+        }], propDecorators: { subForm: [{
+                type: Input
+            }] } });
+
+class FormElementsComponent {
+    constructor() {
+        this.grid = {};
+        this.currentPageIndex = 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormElementsComponent, selector: "lib-form-elements", inputs: { grid: "grid", currentPageIndex: "currentPageIndex" }, ngImport: i0, template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n  <lib-question [question]=\"grid?.formElementType\"\r\n  [currentPageIndex]=\"currentPageIndex\"\r\n  ></lib-question>\r\n</div>\r\n<div *ngIf=\"grid.entityType === 'SECTION'\">\r\n  <lib-section-fields [section]=\"grid.formElementType\"></lib-section-fields>\r\n</div>\r\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\r\n  <lib-sub-form [subForm]=\"grid.formElementType\"></lib-sub-form>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SectionFieldsComponent, selector: "lib-section-fields", inputs: ["section"] }, { kind: "component", type: QuestionComponent, selector: "lib-question", inputs: ["question", "currentPageIndex"], outputs: ["emitValidations"] }, { kind: "component", type: SubFormComponent, selector: "lib-sub-form", inputs: ["subForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-elements', template: "<div *ngIf=\"grid.entityType === 'QUESTION'\">\r\n  <lib-question [question]=\"grid?.formElementType\"\r\n  [currentPageIndex]=\"currentPageIndex\"\r\n  ></lib-question>\r\n</div>\r\n<div *ngIf=\"grid.entityType === 'SECTION'\">\r\n  <lib-section-fields [section]=\"grid.formElementType\"></lib-section-fields>\r\n</div>\r\n<div *ngIf=\"grid.entityType === 'SUBFORM'\">\r\n  <lib-sub-form [subForm]=\"grid.formElementType\"></lib-sub-form>\r\n</div>\r\n" }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], currentPageIndex: [{
+                type: Input
+            }] } });
+
+class NavigationTabsComponent {
+    constructor() {
+        this.pages = [];
+        this.currentPageIndex = 0;
+        this.pageChanged = new EventEmitter();
+    }
+    setCurrentPage(index) {
+        this.pageChanged.emit(index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: { pages: "pages", currentPageIndex: "currentPageIndex" }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<div class=\"tab-inner-container\">\r\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\r\n    <li\r\n      class=\"nav-item mr-1\"\r\n      role=\"presentation\"\r\n      *ngFor=\"let page of pages; let i = index\">\r\n      <button\r\n        class=\"nav-link\"\r\n        [class.active]=\"i === currentPageIndex\"\r\n        id=\"tab-{{ i }}\"\r\n        [attr.data-bs-toggle]=\"'tab'\"\r\n        [attr.data-bs-target]=\"'#content-' + i\"\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [attr.aria-controls]=\"'content-' + i\"\r\n        [attr.aria-selected]=\"i === 0\"\r\n        (click)=\"setCurrentPage(i)\">\r\n        {{ page.title }}\r\n      </button>\r\n    </li>\r\n  </ul>\r\n\r\n  <div class=\"tab-content pt-5 pb-3 px-1\">\r\n    <div\r\n      *ngFor=\"let page of pages; let i = index\"\r\n      class=\"tab-pane fade\"\r\n      [class.show]=\"i === 0\"\r\n      [class.active]=\"i === 0\"\r\n      id=\"content-{{ i }}\"\r\n      role=\"tabpanel\"\r\n      [attr.aria-labelledby]=\"'tab-' + i\">\r\n      <div *ngFor=\"let row of page.rows\">\r\n        <div class=\"margin\">\r\n          <div *ngFor=\"let grid of row.grid\">\r\n            <lib-form-elements\r\n              [grid]=\"grid\"></lib-form-elements>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"currentPageIndex == pages.length - 1\"\r\n        class=\"footerButton d-flex justify-content-end\">\r\n        <button class=\"btn btn-primary me-md-2 rounded-pill\" type=\"button\">\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-navigation-tabs', template: "<div class=\"tab-inner-container\">\r\n  <ul class=\"nav nav-tabs navTabs\" id=\"myTab\" role=\"tablist\">\r\n    <li\r\n      class=\"nav-item mr-1\"\r\n      role=\"presentation\"\r\n      *ngFor=\"let page of pages; let i = index\">\r\n      <button\r\n        class=\"nav-link\"\r\n        [class.active]=\"i === currentPageIndex\"\r\n        id=\"tab-{{ i }}\"\r\n        [attr.data-bs-toggle]=\"'tab'\"\r\n        [attr.data-bs-target]=\"'#content-' + i\"\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [attr.aria-controls]=\"'content-' + i\"\r\n        [attr.aria-selected]=\"i === 0\"\r\n        (click)=\"setCurrentPage(i)\">\r\n        {{ page.title }}\r\n      </button>\r\n    </li>\r\n  </ul>\r\n\r\n  <div class=\"tab-content pt-5 pb-3 px-1\">\r\n    <div\r\n      *ngFor=\"let page of pages; let i = index\"\r\n      class=\"tab-pane fade\"\r\n      [class.show]=\"i === 0\"\r\n      [class.active]=\"i === 0\"\r\n      id=\"content-{{ i }}\"\r\n      role=\"tabpanel\"\r\n      [attr.aria-labelledby]=\"'tab-' + i\">\r\n      <div *ngFor=\"let row of page.rows\">\r\n        <div class=\"margin\">\r\n          <div *ngFor=\"let grid of row.grid\">\r\n            <lib-form-elements\r\n              [grid]=\"grid\"></lib-form-elements>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        *ngIf=\"currentPageIndex == pages.length - 1\"\r\n        class=\"footerButton d-flex justify-content-end\">\r\n        <button class=\"btn btn-primary me-md-2 rounded-pill\" type=\"button\">\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".tab-inner-container{width:100%;position:relative;padding:3rem}@media (max-width: 1024px){.tab-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.tab-inner-container{padding:2rem .5rem}}.navTabs{overflow-x:auto;overflow-y:hidden;flex-wrap:unset;margin:0 0 -1px!important}.nav-item{background-color:#fff;border-radius:5px}.nav-link{position:relative;margin-bottom:-2px}.nav-link:after{content:\"\";position:absolute;left:0;bottom:0;width:101%;height:6px;background:#efefef}.nav-link.active:after{display:none}.tab-content{background-color:#fff}\n"] }]
+        }], propDecorators: { pages: [{
+                type: Input
+            }], currentPageIndex: [{
+                type: Input
+            }], pageChanged: [{
+                type: Output
+            }] } });
+
+class NextPrevNavigationComponent {
+    constructor() {
+        this.currentPageIndex = 0;
+        this.pages = [];
+        this.previousPage = {};
+        this.nextPage = {};
+        this.currentPage = {};
+        this.navigateNext = new EventEmitter();
+        this.navigatePrevious = new EventEmitter();
+    }
+    onNavigateNext() {
+        this.navigateNext.emit();
+    }
+    onNavigatePrevious() {
+        this.navigatePrevious.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: { currentPageIndex: "currentPageIndex", pages: "pages", previousPage: "previousPage", nextPage: "nextPage", currentPage: "currentPage" }, outputs: { navigateNext: "navigateNext", navigatePrevious: "navigatePrevious" }, ngImport: i0, template: "<div class=\"pageTitleDiv\">\r\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\r\n</div>\r\n<div class=\"button-inner-container rounded\">\r\n  <div class=\"tab-content pt-5 pb-3 row\">\r\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\r\n      <div *ngFor=\"let grid of row.grid\">\r\n        <lib-form-elements\r\n          [grid]=\"grid\"\r\n          [currentPageIndex]=\"currentPageIndex\"\r\n        ></lib-form-elements>\r\n      </div>\r\n    </div>\r\n    <div class=\"footerButton\">\r\n      <div class=\"prevButtonDiv\">\r\n        <button\r\n          class=\"me-md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigatePrevious()\"\r\n          *ngIf=\"0 < currentPageIndex\"\r\n        >\r\n          <svg\r\n            width=\"24\"\r\n            height=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <path\r\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n          Previous | {{ previousPage.title }}\r\n        </button>\r\n      </div>\r\n      <div class=\"nextButtonDiv\">\r\n        <button\r\n          class=\"md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigateNext()\"\r\n          *ngIf=\"currentPageIndex < pages.length - 1\"\r\n        >\r\n          Next | {{ nextPage.title }}\r\n          <svg\r\n            width=\"24\"\r\n            height=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <path\r\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n        <button\r\n          class=\"submitBtn me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pages.length - 1\"\r\n        >\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormElementsComponent, selector: "lib-form-elements", inputs: ["grid", "currentPageIndex"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextPrevNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-next-prev-navigation', template: "<div class=\"pageTitleDiv\">\r\n  <p class=\"pageTitle\">{{ currentPage.title }}</p>\r\n</div>\r\n<div class=\"button-inner-container rounded\">\r\n  <div class=\"tab-content pt-5 pb-3 row\">\r\n    <div *ngFor=\"let row of pages[currentPageIndex].rows\" class=\"marginSize\">\r\n      <div *ngFor=\"let grid of row.grid\">\r\n        <lib-form-elements\r\n          [grid]=\"grid\"\r\n          [currentPageIndex]=\"currentPageIndex\"\r\n        ></lib-form-elements>\r\n      </div>\r\n    </div>\r\n    <div class=\"footerButton\">\r\n      <div class=\"prevButtonDiv\">\r\n        <button\r\n          class=\"me-md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigatePrevious()\"\r\n          *ngIf=\"0 < currentPageIndex\"\r\n        >\r\n          <svg\r\n            width=\"24\"\r\n            height=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <path\r\n              d=\"M4.51025 11.9883L19.5003 11.9883\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M10.514 17.9766L4.49805 11.9996L10.514 6.02256\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n          Previous | {{ previousPage.title }}\r\n        </button>\r\n      </div>\r\n      <div class=\"nextButtonDiv\">\r\n        <button\r\n          class=\"md-2 rounded-pill navButton\"\r\n          type=\"button\"\r\n          (click)=\"onNavigateNext()\"\r\n          *ngIf=\"currentPageIndex < pages.length - 1\"\r\n        >\r\n          Next | {{ nextPage.title }}\r\n          <svg\r\n            width=\"24\"\r\n            height=\"24\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <path\r\n              d=\"M19.4897 12.0117L4.49975 12.0117\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <path\r\n              d=\"M13.486 6.02344L19.502 12.0004L13.486 17.9774\"\r\n              stroke=\"white\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n        <button\r\n          class=\"submitBtn me-md-2 rounded-pill\"\r\n          type=\"button\"\r\n          *ngIf=\"currentPageIndex == pages.length - 1\"\r\n        >\r\n          Submit\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".pageTitle{font-size:15px;font-weight:500}.pageTitleDiv{padding-left:3rem;padding-top:3rem}@media (max-width: 1024px){.pageTitleDiv{padding-left:1rem;padding-top:2rem}}@media (max-width: 576px){.pageTitleDiv{padding-left:.4rem;padding-top:1.5rem}}.button-inner-container{width:100%;position:relative;padding:0rem 3rem 3rem}@media (max-width: 1024px){.button-inner-container{padding-left:1rem;padding-right:1rem}}@media (max-width: 576px){.button-inner-container{padding:.1rem .5rem 2rem}}@media (max-width: 576px){.marginSize{padding:0!important}}.footerButton{padding:10px 32px 16px 30px;display:flex;flex-wrap:wrap}@media (max-width: 576px){.footerButton{padding-left:20px;padding-right:17px}}.navButton{background:#084fff;color:#fff;border:none;padding:10px 8px;width:auto}.submitBtn{background:#084fff;color:#fff;border:none;padding:10px 27px;width:auto}.prevButtonDiv{display:flex;justify-content:center;margin-bottom:5px}.nextButtonDiv{display:flex;justify-content:end;margin-left:auto;margin-bottom:5px}.tab-content,.row{background-color:#fff}\n"] }]
+        }], propDecorators: { currentPageIndex: [{
+                type: Input
+            }], pages: [{
+                type: Input
+            }], previousPage: [{
+                type: Input
+            }], nextPage: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], navigateNext: [{
+                type: Output
+            }], navigatePrevious: [{
+                type: Output
+            }] } });
+
+class SubmitFormComponent {
+    constructor(formService) {
+        this.formService = formService;
+        this.question = null;
+        this.moduleName = '';
+        this.name = '';
+        this.saveAutomatically = false;
+        this.saveInterval = 0;
+        this.customizeFont = false;
+        this.fontFamily = '';
+        this.fontSize = 0;
+        this.enableDataExport = false;
+        this.fileFormats = [];
+        this.enableQuestionNumbering = false;
+        this.questionNumbering = '';
+        this.enableGoogleRecaptcha = false;
+        this.googleRecaptchaKey = '';
+        this.googleRecaptchaSecret = '';
+        this.navigation = '';
+        this.markAllQuestionsAsRequired = false;
+        this.pages = [];
+        this.currentPageIndex = 0;
+        this.previousPage = {};
+        this.currentPage = {};
+        this.nextPage = {};
+        this.lastTab = false;
+        this.validations = [];
+        this.questionAnswers = [];
+    }
+    ngOnInit() {
+        this.formService.getQuestions(this.moduleName).subscribe((response) => {
+            this.question = mapPublicFormToModel(response);
+            this.name = this.question.name;
+            this.pages = this.question.pages;
+            this.currentPage = this.pages[0];
+            this.nextPage = this.pages[1];
+            this.saveAutomatically =
+                this.question.formConfiguration.saveAutomatically;
+            this.saveInterval = this.question.formConfiguration.saveInterval;
+            this.customizeFont = this.question.formConfiguration.customizeFont;
+            this.fontFamily = this.question.formConfiguration.fontFamily;
+            this.fontSize = this.question.formConfiguration.fontSize;
+            this.enableDataExport = this.question.formConfiguration.enableDataExport;
+            this.fileFormats = this.question.formConfiguration.fileFormats;
+            this.enableQuestionNumbering =
+                this.question.formConfiguration.enableQuestionNumbering;
+            this.questionNumbering =
+                this.question.formConfiguration.questionNumbering;
+            this.enableGoogleRecaptcha =
+                this.question.formConfiguration.enableGoogleRecaptcha;
+            this.googleRecaptchaKey =
+                this.question.formConfiguration.googleRecaptchaKey;
+            this.googleRecaptchaSecret =
+                this.question.formConfiguration.googleRecaptchaSecret;
+            this.navigation = this.question.formConfiguration.navigation;
+            this.markAllQuestionsAsRequired =
+                this.question.formConfiguration.markAllQuestionsAsRequired;
+            this.generateQuestionAnswers();
+        });
+    }
+    navigateToNextPage() {
+        if (this.currentPageIndex < this.pages.length - 1) {
+            if (this.markAllQuestionsAsRequired) {
+                if (this.validations?.length === 0) {
+                    this.previousPage = this.currentPage;
+                    this.currentPageIndex++;
+                    this.currentPage = this.pages[this.currentPageIndex];
+                    this.nextPage = this.pages[this.currentPageIndex + 1];
+                }
+                else {
+                    alert('please fill required questions');
+                }
+            }
+            else {
+                this.previousPage = this.currentPage;
+                this.currentPageIndex++;
+                this.currentPage = this.pages[this.currentPageIndex];
+                this.nextPage = this.pages[this.currentPageIndex + 1];
+            }
+        }
+    }
+    navigateToPreviousPage() {
+        if (this.currentPageIndex > 0) {
+            if (this.markAllQuestionsAsRequired) {
+                if (this.validations?.length === 0) {
+                    this.nextPage = this.currentPage;
+                    this.currentPageIndex--;
+                    this.currentPage = this.pages[this.currentPageIndex];
+                    this.previousPage = this.pages[this.currentPageIndex - 1];
+                }
+                else {
+                    alert('please fill required questions');
+                }
+            }
+            else {
+                this.nextPage = this.currentPage;
+                this.currentPageIndex--;
+                this.currentPage = this.pages[this.currentPageIndex];
+                this.previousPage = this.pages[this.currentPageIndex - 1];
+            }
+        }
+    }
+    setCurrentPage(index) {
+        this.currentPageIndex = index;
+    }
+    generateQuestionAnswers() {
+        const extractQuestions = (formElements) => {
+            const questions = [];
+            formElements.forEach((element) => {
+                if (element.entityType === 'QUESTION') {
+                    questions.push({
+                        questionId: element.formElementType.id,
+                        answer: '',
+                    });
+                    if (element.formElementType.childLogics) {
+                        element.formElementType.childLogics.forEach((logic) => {
+                            questions.push(...extractQuestions(logic.formElements));
+                        });
+                    }
+                }
+                else if (element.entityType === 'SUBFORM') {
+                    if (element.formElementType.formElements) {
+                        questions.push(...extractQuestions(element.formElementType.formElements));
+                    }
+                }
+            });
+            return questions;
+        };
+        const processPages = (pages) => {
+            const questions = [];
+            pages.forEach((page) => {
+                page.rows.forEach((row) => {
+                    questions.push(...extractQuestions(row.grid));
+                });
+            });
+            return questions;
+        };
+        this.questionAnswers = processPages(this.pages);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, deps: [{ token: FormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SubmitFormComponent, selector: "lib-submit-form", inputs: { moduleName: "moduleName" }, ngImport: i0, template: "<div class=\"outer-container\">\r\n  <div class=\"head container\">\r\n    <lib-header [name]=\"name\"></lib-header>\r\n  </div>\r\n  <div class=\"body container\">\r\n    <lib-navigation-tabs\r\n      *ngIf=\"navigation == 'TAB'\"\r\n      [pages]=\"pages\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      (pageChanged)=\"setCurrentPage($event)\"\r\n    ></lib-navigation-tabs>\r\n    <lib-next-prev-navigation\r\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      [pages]=\"pages\"\r\n      [previousPage]=\"previousPage\"\r\n      [currentPage]=\"currentPage\"\r\n      [nextPage]=\"nextPage\"\r\n      (navigateNext)=\"navigateToNextPage()\"\r\n      (navigatePrevious)=\"navigateToPreviousPage()\"\r\n    ></lib-next-prev-navigation>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["name"] }, { kind: "component", type: NavigationTabsComponent, selector: "lib-navigation-tabs", inputs: ["pages", "currentPageIndex"], outputs: ["pageChanged"] }, { kind: "component", type: NextPrevNavigationComponent, selector: "lib-next-prev-navigation", inputs: ["currentPageIndex", "pages", "previousPage", "nextPage", "currentPage"], outputs: ["navigateNext", "navigatePrevious"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SubmitFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-submit-form', template: "<div class=\"outer-container\">\r\n  <div class=\"head container\">\r\n    <lib-header [name]=\"name\"></lib-header>\r\n  </div>\r\n  <div class=\"body container\">\r\n    <lib-navigation-tabs\r\n      *ngIf=\"navigation == 'TAB'\"\r\n      [pages]=\"pages\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      (pageChanged)=\"setCurrentPage($event)\"\r\n    ></lib-navigation-tabs>\r\n    <lib-next-prev-navigation\r\n      *ngIf=\"navigation == 'NEXT_AND_PREVIOUS_BUTTON'\"\r\n      [currentPageIndex]=\"currentPageIndex\"\r\n      [pages]=\"pages\"\r\n      [previousPage]=\"previousPage\"\r\n      [currentPage]=\"currentPage\"\r\n      [nextPage]=\"nextPage\"\r\n      (navigateNext)=\"navigateToNextPage()\"\r\n      (navigatePrevious)=\"navigateToPreviousPage()\"\r\n    ></lib-next-prev-navigation>\r\n  </div>\r\n</div>\r\n", styles: [".outer-container{background-color:#fff;padding:20px;position:relative;margin-top:25px}@media (max-width: 576px){.outer-container{padding:8px}}.head{background-color:#fff;padding:0!important}.body{position:relative;z-index:1;background:#efefef;border-radius:6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FormService }]; }, propDecorators: { moduleName: [{
+                type: Input
+            }] } });
+
+class FormSubmissionComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.formData = {};
+    }
+    ngOnInit() {
+        this.dataService.setApiUrl(this.formData.apiurl);
+        this.dataService.setHeader(this.formData.headers);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormSubmissionComponent, selector: "lib-formSubmission", inputs: { formData: "formData" }, ngImport: i0, template: "<lib-submit-form [moduleName]=\"formData.moduleName\"></lib-submit-form>", styles: [""], dependencies: [{ kind: "component", type: SubmitFormComponent, selector: "lib-submit-form", inputs: ["moduleName"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-formSubmission', template: "<lib-submit-form [moduleName]=\"formData.moduleName\"></lib-submit-form>" }]
+        }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { formData: [{
+                type: Input
+            }] } });
+
+class FormFieldsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormFieldsModule, declarations: [CheckBoxFieldsComponent,
+            DateTimeFieldsComponent,
+            DropDownFieldsComponent,
+            FilePickerFieldsComponent,
+            LocationFieldsComponent,
+            RadioButtonFieldsComponent,
+            RichTextEditorFieldsComponent,
+            SelectionMatrixFieldsComponent,
+            SignatureFieldsComponent,
+            SliderFieldsComponent,
+            TermsAndConditionFieldsComponent,
+            TextAreaFieldsComponent,
+            TextFieldsComponent,
+            ToggleSwitchFieldsComponent,
+            UrlFieldsComponent,
+            MailFieldsComponent,
+            MobileFieldsComponent,
+            NumberFieldsComponent,
+            PasswordFieldsComponent,
+            SectionFieldsComponent], imports: [CommonModule,
+            FormsModule,
+            MatSliderModule, i3.BsDatepickerModule, DropdownModule,
+            AngularEditorModule,
+            DocUploadModule,
+            BrowserModule,
+            GoogleMapsModule,
+            FilePreviewModule], exports: [CheckBoxFieldsComponent,
+            DateTimeFieldsComponent,
+            DropDownFieldsComponent,
+            FilePickerFieldsComponent,
+            LocationFieldsComponent,
+            MailFieldsComponent,
+            MobileFieldsComponent,
+            NumberFieldsComponent,
+            PasswordFieldsComponent,
+            RadioButtonFieldsComponent,
+            RichTextEditorFieldsComponent,
+            SelectionMatrixFieldsComponent,
+            SignatureFieldsComponent,
+            SliderFieldsComponent,
+            TermsAndConditionFieldsComponent,
+            TextAreaFieldsComponent,
+            TextFieldsComponent,
+            ToggleSwitchFieldsComponent,
+            UrlFieldsComponent,
+            SectionFieldsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldsModule, imports: [CommonModule,
+            FormsModule,
+            MatSliderModule,
+            BsDatepickerModule.forRoot(),
+            DropdownModule,
+            AngularEditorModule,
+            DocUploadModule,
+            BrowserModule,
+            GoogleMapsModule,
+            FilePreviewModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CheckBoxFieldsComponent,
+                        DateTimeFieldsComponent,
+                        DropDownFieldsComponent,
+                        FilePickerFieldsComponent,
+                        LocationFieldsComponent,
+                        RadioButtonFieldsComponent,
+                        RichTextEditorFieldsComponent,
+                        SelectionMatrixFieldsComponent,
+                        SignatureFieldsComponent,
+                        SliderFieldsComponent,
+                        TermsAndConditionFieldsComponent,
+                        TextAreaFieldsComponent,
+                        TextFieldsComponent,
+                        ToggleSwitchFieldsComponent,
+                        UrlFieldsComponent,
+                        MailFieldsComponent,
+                        MobileFieldsComponent,
+                        NumberFieldsComponent,
+                        PasswordFieldsComponent,
+                        SectionFieldsComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatSliderModule,
+                        BsDatepickerModule.forRoot(),
+                        DropdownModule,
+                        AngularEditorModule,
+                        DocUploadModule,
+                        BrowserModule,
+                        GoogleMapsModule,
+                        FilePreviewModule
+                    ],
+                    exports: [
+                        CheckBoxFieldsComponent,
+                        DateTimeFieldsComponent,
+                        DropDownFieldsComponent,
+                        FilePickerFieldsComponent,
+                        LocationFieldsComponent,
+                        MailFieldsComponent,
+                        MobileFieldsComponent,
+                        NumberFieldsComponent,
+                        PasswordFieldsComponent,
+                        RadioButtonFieldsComponent,
+                        RichTextEditorFieldsComponent,
+                        SelectionMatrixFieldsComponent,
+                        SignatureFieldsComponent,
+                        SliderFieldsComponent,
+                        TermsAndConditionFieldsComponent,
+                        TextAreaFieldsComponent,
+                        TextFieldsComponent,
+                        ToggleSwitchFieldsComponent,
+                        UrlFieldsComponent,
+                        SectionFieldsComponent
+                    ]
+                }]
+        }] });
+
+class LogicModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LogicModule, declarations: [LogicComponent], imports: [CommonModule], exports: [LogicComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogicModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LogicModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LogicComponent],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [LogicComponent]
+                }]
+        }] });
+
+class ElementTypeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementTypeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ElementTypeModule, declarations: [FormElementsComponent, QuestionComponent, SubFormComponent], imports: [CommonModule,
+            FormFieldsModule,
+            LogicModule], exports: [FormElementsComponent,
+            QuestionComponent,
+            SubFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementTypeModule, imports: [CommonModule,
+            FormFieldsModule,
+            LogicModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ElementTypeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FormElementsComponent, QuestionComponent, SubFormComponent],
+                    imports: [
+                        CommonModule,
+                        FormFieldsModule,
+                        LogicModule
+                    ],
+                    exports: [
+                        FormElementsComponent,
+                        QuestionComponent,
+                        SubFormComponent
+                    ]
+                }]
+        }] });
+
+class FormSubmitModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormSubmitModule, declarations: [SubmitFormComponent,
+            HeaderComponent,
+            NavigationTabsComponent,
+            NextPrevNavigationComponent], imports: [CommonModule,
+            FormFieldsModule, i3.BsDatepickerModule, ElementTypeModule], exports: [SubmitFormComponent, NextPrevNavigationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmitModule, imports: [CommonModule,
+            FormFieldsModule,
+            BsDatepickerModule.forRoot(),
+            ElementTypeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SubmitFormComponent,
+                        HeaderComponent,
+                        NavigationTabsComponent,
+                        NextPrevNavigationComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormFieldsModule,
+                        BsDatepickerModule.forRoot(),
+                        ElementTypeModule
+                    ],
+                    exports: [SubmitFormComponent, NextPrevNavigationComponent]
+                }]
+        }] });
+
+class FormSubmissionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionModule, declarations: [FormSubmissionComponent], imports: [DropdownModule,
+            FilePreviewModule,
+            DocUploadModule,
+            FormsModule,
+            MatTabsModule,
+            FormFieldsModule,
+            FormSubmitModule], exports: [FormSubmissionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionModule, imports: [DropdownModule,
+            FilePreviewModule,
+            DocUploadModule,
+            FormsModule,
+            MatTabsModule,
+            FormFieldsModule,
+            FormSubmitModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormSubmissionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FormSubmissionComponent],
+                    imports: [
+                        DropdownModule,
+                        FilePreviewModule,
+                        DocUploadModule,
+                        FormsModule,
+                        MatTabsModule,
+                        FormFieldsModule,
+                        FormSubmitModule,
+                    ],
+                    exports: [FormSubmissionComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of form-submission
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormSubmissionComponent, FormSubmissionModule, FormSubmissionService };
+//# sourceMappingURL=piserve-tech-form-submission.mjs.map