import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { FormControl, FormArray, FormBuilder, Validators, FormGroup, AbstractControl } from '@angular/forms';
let AddMoreFieldComponent = class AddMoreFieldComponent {
    /**
     * @param FormBuilder
     * @description
     * Contructor to inilazie the values
     */
    constructor(fb) {
        this.fb = fb;
        /**
        * @description
        * Contain FormArray to save options
        */
        this.selectBoxOptions = new FormArray([]);
    }
    ngOnInit() {
        this.setForm();
        this.addMoreOption();
    }
    /**
     * @description
     * Set the form fields
     */
    setForm() {
        this.validatorForm = this.fb.group({
            name: [this.data.name, Validators.required],
            type: [this.data.type],
            status: [this.data.status],
            options: [this.data.options],
            required: [this.data.required],
        });
    }
    /**
     * @description
     * DropDown compare values for default section
     */
    compareFn(o1, o2) {
        return o1 == o2;
    }
    /**
     * @description
     * Method to Added/Edited  custom field
     */
    saveData() {
        if (this.validatorForm.value.type == 'selectbox') {
            if (this.selectBoxOptions.value[0].option_txt == '' || this.selectBoxOptions.value[0].option_val == '') {
                return false;
            }
            var cleanValues = this.selectBoxOptions.value;
            cleanValues = cleanValues.filter(value => Object.keys(value.option_txt).length !== 0);
            this.validatorForm.value.options = cleanValues;
        }
        if (this.validatorForm.invalid) {
            this.validatorForm.markAllAsTouched();
        }
        else {
            //this.dialogRef.close(this.validatorForm.value);      
        }
    }
    /**
     * @description
     * Method to remove  custom field form
     */
    closeCustomFieldForm() {
    }
    /**
     * @description
     * Method to REMOVE Option
     */
    removeOption(index) {
        this.selectBoxOptions.removeAt(index);
    }
    /**
     * @description
     * Method to add Option
     */
    addMoreOption() {
        const group = new FormGroup({
            option_txt: new FormControl(''),
            option_val: new FormControl('')
        });
        this.selectBoxOptions.push(group);
    }
};
AddMoreFieldComponent.ctorParameters = () => [
    { type: FormBuilder }
];
__decorate([
    Input()
], AddMoreFieldComponent.prototype, "data", void 0);
AddMoreFieldComponent = __decorate([
    Component({
        selector: 'app-add-more-field',
        template: "<!-- <div class=\"mat-dialog-header\">\r\n    <div class=\"col m12 modal-header-common\">\r\n        <h3 mat-dialog-title>{{ 'REGISTER_FORM.CUSTOM_FIELD.ADD' | translate }}</h3>\r\n\r\n        <span class=\"close-dialog\" (click)=\"closeDailog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n    </div>\r\n\r\n</div>\r\n<div class=\"modal-content-outer\" [formGroup]=\"validatorForm\">\r\n    <mat-dialog-content class=\"mat-dialog-content\">\r\n        <div class=\"add-field-more-ew\">\r\n            <div class=\"bottom-custom-design-fields\">\r\n                <mat-form-field class=\"with-label-design\" floatLabel=\"never\">\r\n                    <label>{{ 'REGISTER_FORM.CUSTOM_FIELD.LABEL' | translate }} </label>\r\n                    <input matInput value=\"\" placeholder=\"What is your school name ?\" formControlName=\"name\">\r\n                </mat-form-field>\r\n                <mat-form-field class=\"with-label-design\" floatLabel=\"never\">\r\n                    <label>{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE' | translate }}</label>                    \r\n                    <mat-select matInput [compareWith]=\"compareFn\" formControlName=\"type\" onchange=\"\">\r\n                        <mat-option value=\"label\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.TEXT' | translate }}</mat-option>\r\n                        <mat-option value=\"number\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.NUMBER' | translate }}</mat-option>\r\n                        <mat-option value=\"selectbox\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.DROPDWON' | translate }}</mat-option>\r\n                        <mat-option value=\"hidden\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.HIDDEN' | translate }}</mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>                \r\n\r\n                <span *ngIf=\"(validatorForm.value.type =='selectbox')\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col m5\">\r\n                            <label>{{ 'REGISTER_FORM.CUSTOM_FIELD.OPTION' | translate }}</label>\r\n                        </div>\r\n                        <div class=\"col m5\">\r\n                            <label>{{ 'REGISTER_FORM.CUSTOM_FIELD.VALUE' | translate }}</label>\r\n                        </div>\r\n                    </div>\r\n\r\n                    \r\n                    <div *ngFor=\"let opt of selectBoxOptions.controls;index as i\">\r\n                        \r\n                        <div class=\"row\" [formGroup]=\"opt\">\r\n                            <div class=\"col m5\">\r\n                                <mat-form-field floatLabel=\"never\" class=\"custom-prefix\">\r\n                                    <input matInput formControlName=\"option\" />\r\n                                    <span style=\"color:red;\" *ngIf=\"((i ==0) && (selectBoxOptions.value[0].option ==''))\">Please provide the option text</span>\r\n                                </mat-form-field>\r\n                            </div>\r\n                            <div class=\"col m5\">\r\n                                <mat-form-field floatLabel=\"never\" class=\"custom-prefix\">\r\n                                    <input matInput formControlName=\"value\"/>\r\n                                    <span style=\"color:red;\" *ngIf=\"((i ==0) && (selectBoxOptions.value[0].value ==''))\">Please provide the option value</span>\r\n                                </mat-form-field>                        \r\n                            </div>\r\n                            <div class=\"col m2\">\r\n                                <span *ngIf=\"(i !=0) \" (click)=\"removeOption(i)\" class=\"close-calender-clear\"><mat-icon>close</mat-icon></span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"btn-with-icon\" mat-flat-button color=\"grey\" (click)=\"addMoreOption()\">Add Option</button>\r\n                </span>\r\n                \r\n\r\n                <div class=\"elements-custom-outer-ew\">\r\n                    <div class=\"left-list-item\">\r\n                        <span class=\"title-list-nav\">{{ 'REGISTER_FORM.CUSTOM_FIELD.REQUIRED' | translate }}</span>\r\n                    </div>\r\n                    \r\n                    <div class=\"right-list-item\">\r\n                        <div class=\"ew-toggle-button\" >\r\n                            <div class=\"toggle-button-cover\">\r\n                                <div class=\"button-cover\">\r\n                                    <div class=\"button b2\" id=\"button-ew\">\r\n                                        <input type=\"checkbox\" [formControlName]=\"'required'\" class=\"checkbox\">\r\n                                        <div class=\"knobs\">\r\n                                            <span></span>\r\n                                        </div>\r\n                                        <div class=\"layer\"></div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n       \r\n    </mat-dialog-content>\r\n</div>\r\n\r\n<mat-dialog-actions align=\"start\">\r\n    <button class=\"padding-standard-btn\" mat-flat-button color=\"accent\" (click)=\"saveData()\">Save</button>\r\n   \r\n</mat-dialog-actions> -->\r\n\r\n<div class=\"custom-field-box-ew\">\r\n    <div class=\"cutom-field-header-ew\">\r\n        <span class=\"custom-field-title-ew\">{{ 'REGISTER_FORM.CUSTOM_FIELD.ADD' | translate }}</span>\r\n        <span class=\"material-icons\" (click)=\"closeCustomFieldForm()\">\r\n         close\r\n         </span>\r\n </div>\r\n <div class=\"custom-field-body-ew\" [formGroup]=\"validatorForm\">\r\n     <ul class=\"bottom-custom-elements-form-setting\">\r\n         <li>\r\n             <div class=\"elements-custom-outer-ew\">\r\n                 <div class=\"left-list-item\">\r\n                     <span class=\"title-list-nav\">\r\n                        {{ 'REGISTER_FORM.CUSTOM_FIELD.LABEL' | translate }}</span>\r\n                 </div>\r\n                 <div class=\"bottom-custom-design-fields\">\r\n                     <mat-form-field class=\"ew-field-no-label\" floatLabel=\"never\">\r\n                         <input matInput value=\"\" placeholder=\"What is your school name ?\" formControlName=\"name\">\r\n                     </mat-form-field>\r\n                 </div>\r\n             </div>\r\n         </li>\r\n         <li>\r\n             <div class=\"elements-custom-outer-ew\">\r\n                 <div class=\"left-list-item\">\r\n                     <span class=\"title-list-nav\">\r\n                         {{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE' | translate }}</span>\r\n                 </div>\r\n                 <div class=\"bottom-custom-design-fields\">\r\n                     <mat-form-field  class=\"form-select-ew-custom-small ew-field-no-label\">\r\n                        <mat-select matInput [compareWith]=\"compareFn\" formControlName=\"type\" onchange=\"\">\r\n                            <mat-option value=\"label\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.TEXT' | translate }}</mat-option>\r\n                            <mat-option value=\"number\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.NUMBER' | translate }}</mat-option>\r\n                            <mat-option value=\"S\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.DROPDWON' | translate }}</mat-option>\r\n                            <mat-option value=\"hidden\">{{ 'REGISTER_FORM.CUSTOM_FIELD.TYPE_OPTION.HIDDEN' | translate }}</mat-option>\r\n                        </mat-select>\r\n                       </mat-form-field>\r\n                 </div>\r\n             </div>\r\n             <span *ngIf=\"(validatorForm.value.type =='selectbox')\">\r\n                <div class=\"row\">\r\n                    <div class=\"col m6\">\r\n                        <label>{{ 'REGISTER_FORM.CUSTOM_FIELD.OPTION' | translate }}</label>\r\n                    </div>\r\n                    <div class=\"col m6\">\r\n                        <label>{{ 'REGISTER_FORM.CUSTOM_FIELD.VALUE' | translate }}</label>\r\n                    </div>\r\n                </div>\r\n                <div *ngFor=\"let opt of selectBoxOptions.controls;index as i\">\r\n                    \r\n                    <div class=\"row\" [formGroup]=\"opt\">\r\n                        <div class=\"col m5\">\r\n                            <mat-form-field floatLabel=\"never\" class=\"custom-prefix\">\r\n                                <input matInput formControlName=\"option\" />\r\n                                <span style=\"color:red;\" *ngIf=\"((i ==0) && (selectBoxOptions.value[0].option_txt ==''))\">Please provide the option text</span>\r\n                            </mat-form-field>\r\n                        </div>\r\n                        <div class=\"col m5\">\r\n                            <mat-form-field floatLabel=\"never\" class=\"custom-prefix\">\r\n                                <input matInput formControlName=\"value\"/>\r\n                                <span style=\"color:red;\" *ngIf=\"((i ==0) && (selectBoxOptions.value[0].option_val ==''))\">Please provide the option value</span>\r\n                            </mat-form-field>                        \r\n                        </div>\r\n                        <div class=\"col m2\">\r\n                            <span *ngIf=\"(i !=0) \" (click)=\"removeOption(i)\" class=\"close-calender-clear\"><mat-icon>close</mat-icon></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <button class=\"btn-with-icon\" mat-flat-button color=\"grey\" (click)=\"addMoreOption()\">Add Option</button>\r\n            </span>\r\n         </li>\r\n     </ul>\r\n     <div class=\"make-required-ew-custom\">\r\n         <span class=\"left-text-ew-field\">{{ 'REGISTER_FORM.CUSTOM_FIELD.REQUIRED' | translate }} </span>\r\n         <div class=\"ew-toggle-button\">\r\n             <div class=\"toggle-button-cover\">\r\n                 <div class=\"button-cover\">\r\n                   <div class=\"button b3\" id=\"button-ew\">\r\n                    <input type=\"checkbox\" [formControlName]=\"'required'\" class=\"checkbox\">\r\n                     <div class=\"knobs\">\r\n                       <span></span>\r\n                     </div>\r\n                     <div class=\"layer\"></div>\r\n                   </div>\r\n                 </div>\r\n               </div>\r\n         </div>\r\n     </div>\r\n     <button mat-flat-button color=\"accent\" (click)=\"saveData()\">Save</button>\r\n </div>\r\n</div> ",
        styles: [""]
    })
], AddMoreFieldComponent);
export { AddMoreFieldComponent };
//# sourceMappingURL=data:application/json;base64, 