import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyInputModule } from '@angular/material/legacy-input';
import { MatLegacyRadioModule } from '@angular/material/legacy-radio';
import { MatLegacySelectModule } from '@angular/material/legacy-select';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { TranslateModule } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/legacy-form-field";
import * as i3 from "@angular/material/legacy-input";
import * as i4 from "@angular/material/legacy-radio";
import * as i5 from "@angular/material/legacy-select";
import * as i6 from "@angular/material/legacy-core";
import * as i7 from "@angular/material/legacy-checkbox";
import * as i8 from "@angular/material/datepicker";
import * as i9 from "@angular/material/icon";
import * as i10 from "@angular/forms";
import * as i11 from "@ngx-translate/core";
export class SurveyFormQuestionComponent {
    constructor() {
        this.questionValues = new EventEmitter();
        this.otherFieldType = ['radio', 'boolean', 'rating'];
        this.stars = Array(5).fill(0);
        this.previesAnswer = '';
    }
    ngOnInit() {
        if (this.questionForm) {
            this.answerControl.valueChanges.subscribe((value) => {
                if (value !== this.previesAnswer && value !== null) {
                    if (this.fieldDetails['fieldType'] === 'numeric') {
                        let modifiedValue = value.replace(/[^0-9.]/g, ''); // Remove all non-numeric and non-decimal characters
                        const decimalCount = (modifiedValue.match(/\./g) || []).length;
                        if (decimalCount > 1) {
                            modifiedValue = modifiedValue.replace(/\.$/, ''); // Remove the last decimal point
                        }
                        if (value !== modifiedValue) {
                            this.answerControl.patchValue(modifiedValue);
                        }
                    }
                    if (this.fieldDetails['validatorsArray'] && this.questionForm.controls.isNA.value) {
                        this.answerControl.setValidators(this.fieldDetails['validatorsArray']);
                        this.questionForm.controls.isNA.patchValue(false);
                        this.answerControl.markAllAsTouched();
                        this.answerControl.updateValueAndValidity();
                    }
                    this.questionForm.updateValueAndValidity();
                    this.emitAnswer();
                }
                this.previesAnswer = value;
            });
        }
    }
    get answerControl() {
        return this.questionForm.controls.answer;
    }
    sectionChange() {
        if (this.questionForm.controls.isNA.value) {
            this.answerControl.reset();
            this.answerControl.clearValidators();
            const validatorsArray = this.fieldDetails['validatorsArray'] ? this.fieldDetails['validatorsArray'].filter((validator) => validator !== Validators.required) : [];
            this.answerControl.setValidators(validatorsArray);
            this.answerControl.updateValueAndValidity();
            this.resetCheckboxes();
            this.emitAnswer();
        }
    }
    resetCheckboxes() {
        if (this.fieldDetails && this.fieldDetails.values) {
            this.fieldDetails.values.forEach((e) => {
                e['checked'] = false;
            });
        }
    }
    setRating(rating) {
        if (this.answerControl) {
            this.answerControl.patchValue(rating);
            this.emitAnswer();
        }
    }
    checkboxClicked(event, index) {
        let checkedList = this.answerControl.value ? this.answerControl.value : [];
        if (event.checked) {
            checkedList.push(event.source.value);
        }
        else {
            checkedList = checkedList.filter((e) => e !== event.source.value);
        }
        if (this.fieldDetails.values && this.fieldDetails.values[index]) {
            this.fieldDetails.values[index]['checked'] = event.checked;
        }
        this.answerControl.patchValue(checkedList);
        this.answerControl.updateValueAndValidity();
        this.questionForm.updateValueAndValidity();
        this.emitAnswer();
    }
    emitAnswer() {
        const answerDetails = this.questionForm.value;
        this.questionValues.emit(answerDetails);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurveyFormQuestionComponent, isStandalone: true, selector: "ws-app-survey-form-question", inputs: { questionForm: "questionForm", fieldDetails: "fieldDetails" }, outputs: { questionValues: "questionValues" }, ngImport: i0, template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n    <div class=\"flex items-start\">\n        <div class=\"font-semibold margin-remove flex\"\n            [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{questionForm.value?.question}}\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n        <ng-container *ngSwitchCase=\"'dropdown'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n                    <mat-option value=\"{{obj.value}}\"\n                        *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'phone number'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'boolean'\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n                <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n                <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.invalidEmail' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'rating'\">\n            <div class=\"rating-container\">\n                <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n                    [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n                    star\n                </mat-icon>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'textarea'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n                    formControlName=\"answer\"></textarea>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n                <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n                    {{ obj.key }}\n                </mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'numeric'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n                    maxlength=\"18\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <section class=\"pt-2\">\n                <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n                    <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n                        (change)=\"checkboxClicked($event, i)\">\n                        {{ objct.key }}\n                    </mat-checkbox>\n                </ng-container>\n            </section>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"fieldDetails.notApplicable\">\n        <div class=\"mt-2\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n                <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n            </mat-radio-group>\n        </div>\n    </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i2.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "ngmodule", type: MatLegacyRadioModule }, { kind: "directive", type: i4.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatLegacySelectModule }, { kind: "component", type: i5.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatLegacyCheckboxModule }, { kind: "component", type: i7.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i10.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyFormQuestionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-app-survey-form-question', standalone: true, imports: [
                        CommonModule,
                        MatInputModule,
                        MatLegacyRadioModule,
                        MatLegacySelectModule,
                        MatLegacyCheckboxModule,
                        MatLegacyInputModule,
                        MatDatepickerModule,
                        MatIconModule,
                        MatLegacySelectModule,
                        ReactiveFormsModule,
                        FormsModule,
                        MatFormFieldModule,
                        TranslateModule
                    ], template: "<form [formGroup]=\"questionForm\" class=\"pb-2 q-element mb-4 question-container\">\n    <div class=\"flex items-start\">\n        <div class=\"font-semibold margin-remove flex\"\n            [ngClass]=\"{'required' : fieldDetails.isRequired, 'pb-3': otherFieldType.includes(fieldDetails.fieldType)}\"\n            i18n=\"Title label|Label which explains the user to enter title\">\n            {{questionForm.value?.question}}\n        </div>\n    </div>\n    <ng-container [ngSwitch]=\"fieldDetails.fieldType\">\n        <ng-container *ngSwitchCase=\"'dropdown'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-select placeholder=\"Select...\" formControlName=\"answer\">\n                    <mat-option value=\"{{obj.value}}\"\n                        *ngFor=\" let obj of fieldDetails?.values\">{{obj?.key}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'phone number'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" maxlength=\"10\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.pleaseEnterValidMobileNumber' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'date'\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput [matDatepicker]=\"picker\" formControlName=\"answer\">\n                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                <mat-datepicker #picker></mat-datepicker>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'boolean'\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"answer\">\n                <mat-radio-button [value]=\"true\" class=\"pr-10 pb-2\">True</mat-radio-button>\n                <mat-radio-button [value]=\"false\" class=\"pr-10 pb-2\">False</mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n            <ng-container\n                *ngIf=\"questionForm.controls.answer.touched && questionForm.controls.answer.hasError('pattern')\">\n                <mat-error class=\"mat-error mb-1\">\n                    {{ 'profileInfo.invalidEmail' | translate }}\n                </mat-error>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'rating'\">\n            <div class=\"rating-container\">\n                <mat-icon *ngFor=\"let star of stars; index as i\" class=\"stat-mat-icon\"\n                    [ngClass]=\"{ 'filled': i < questionForm.controls.answer.value }\" (click)=\"setRating(i + 1)\">\n                    star\n                </mat-icon>\n            </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'textarea'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <textarea matInput i18n-placeholder placeholder=\"Type here...\" rows=\"4\" cols=\"5\"\n                    formControlName=\"answer\"></textarea>\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n            <mat-radio-group class=\"pt-2 custom\" formControlName=\"answer\">\n                <mat-radio-button *ngFor=\"let obj of fieldDetails?.values\" [value]=\"obj.value\" class=\"pr-5 pb-2\">\n                    {{ obj.key }}\n                </mat-radio-button>\n            </mat-radio-group>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'numeric'\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <input matInput i18n-placeholder placeholder=\"Type here...\" formControlName=\"answer\" type=\"text\"\n                    maxlength=\"18\" />\n            </mat-form-field>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n            <section class=\"pt-2\">\n                <ng-container *ngFor=\"let objct of fieldDetails?.values; let i = index\">\n                    <mat-checkbox [checked]=\"objct.checked\" [value]=\"objct.value\" class=\"pr-5 pb-2 custom\"\n                        (change)=\"checkboxClicked($event, i)\">\n                        {{ objct.key }}\n                    </mat-checkbox>\n                </ng-container>\n            </section>\n        </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"fieldDetails.notApplicable\">\n        <div class=\"mt-2\">\n            <mat-radio-group class=\"pt-2\" formControlName=\"isNA\" (change)=\"sectionChange()\">\n                <mat-radio-button class=\"pr-10 pb-2 my-raido\" value=\"true\">N/A</mat-radio-button>\n            </mat-radio-group>\n        </div>\n    </ng-container>\n</form>", styles: [".drag-icon{font-size:20px;color:#000}.q-element{padding:16px;background:#fff;border-radius:8px}.rating-container{display:flex;gap:5px}.stat-mat-icon{font-size:30px;cursor:pointer;color:#ccc;width:30px;height:30px}.stat-mat-icon.filled{color:#ffca28}:host ::ng-deep .question-container .mat-form-field-wrapper{padding:0!important}:host ::ng-deep .question-container .mat-radio-checked{background-color:#fff!important}:host ::ng-deep .question-container .mat-radio-label-content{font-size:14px!important;font-family:Montserrat}:host ::ng-deep .custom .mat-checkbox-layout,:host ::ng-deep .custom .mat-radio-label{white-space:normal!important}\n"] }]
        }], propDecorators: { questionForm: [{
                type: Input
            }], fieldDetails: [{
                type: Input
            }], questionValues: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 