@shikshalokam/sl-questionnaire
Version:
Library to integrate questionnaire in SL Projects
1,173 lines • 96.5 kB
JavaScript
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, Component, Input, EventEmitter, ViewChild, Output, HostListener, ContentChild, NgModule } from '@angular/core';
import * as i4 from '@angular/forms';
import { UntypedFormControl, UntypedFormArray, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as _ from 'lodash-es';
import * as i5 from '@project-sunbird/ng2-semantic-ui';
import { TemplateModalConfig, SuiModule } from '@project-sunbird/ng2-semantic-ui';
import * as i4$1 from '@angular-slider/ngx-slider';
import { NgxSliderModule } from '@angular-slider/ngx-slider';
var ResponseType;
(function (ResponseType) {
ResponseType["TEXT"] = "text";
ResponseType["NUMBER"] = "number";
ResponseType["RADIO"] = "radio";
ResponseType["MULTISELECT"] = "multiselect";
ResponseType["DATE"] = "date";
ResponseType["SLIDER"] = "slider";
ResponseType["PAGEQUESTIONS"] = "pageQuestions";
ResponseType["MATRIX"] = "matrix";
})(ResponseType || (ResponseType = {}));
class SlQuestionnaireService {
constructor() {
this.validate = (data) => {
return (control) => {
if (typeof data.validation == 'string') {
return null;
}
if (!data.validation.required) {
return null;
}
if (data.validation.regex) {
const forbidden = this.testRegex(data.validation.regex, control.value);
return forbidden ? null : { err: 'Invalid character found' };
}
if (data.validation.IsNumber) {
if (!control.value) {
return { err: 'Number not entered' };
}
const forbidden = !isNaN(control.value);
return forbidden ? null : { err: 'Only numbers allowed' };
}
if (data.validation.required) {
if (!control.value) {
return { err: 'Required field' };
}
if (data.responseType == ResponseType.MULTISELECT) {
return control.value.some((v) => v != '')
? null
: { err: 'Select at least one option' };
}
if (data.responseType == ResponseType.SLIDER) {
let min = data.validation.min;
let max = data.validation.max;
return min <= control.value && control.value <= max
? null
: { err: 'Selected value not within range' };
}
}
};
};
}
testRegex(regexExpression, value) {
const regex = new RegExp(regexExpression);
return regex.test(value);
}
setSubmissionId(submissionId) {
this._submissionId = submissionId;
}
getSubmissionId() {
return this._submissionId;
}
mapSubmissionToAssessment(data) {
const assessment = data.assessment;
for (const evidence of assessment.evidences) {
const validSubmission = assessment.submissions[evidence.externalId];
if (validSubmission) {
evidence.notApplicable = validSubmission.notApplicable;
if (evidence.notApplicable) {
continue;
}
for (const section of evidence.sections) {
for (const question of section.questions) {
if (question.responseType === 'pageQuestions') {
for (const questions of question.pageQuestions) {
questions.value =
questions.responseType !== 'matrix'
? validSubmission.answers[questions._id].value
: this.constructMatrixValue(validSubmission, questions, evidence.externalId);
questions.remarks = validSubmission.answers[questions._id]
? validSubmission.answers[questions._id].remarks
: '';
questions.fileName = validSubmission.answers[questions._id]
? validSubmission.answers[questions._id].fileName
: [];
questions.endTime = validSubmission.answers[questions._id]
? validSubmission.answers[questions._id].endTime
: '';
}
}
else if (validSubmission.answers &&
validSubmission.answers[question._id]) {
question.value =
question.responseType !== 'matrix'
? validSubmission.answers[question._id].value
: this.constructMatrixValue(validSubmission, question, evidence.externalId);
question.remarks = validSubmission.answers[question._id]
? validSubmission.answers[question._id].remarks
: '';
question.fileName = validSubmission.answers[question._id]
? validSubmission.answers[question._id].fileName
: [];
question.endTime = validSubmission.answers[question._id]
? validSubmission.answers[question._id].endTime
: '';
}
}
}
}
}
this.setSubmissionId(assessment.submissionId);
return data;
}
constructMatrixValue(validSubmission, matrixQuestion, ecmId) {
matrixQuestion.value = [];
if (validSubmission.answers &&
validSubmission.answers[matrixQuestion._id] &&
validSubmission.answers[matrixQuestion._id].value) {
for (const answer of validSubmission.answers[matrixQuestion._id].value) {
matrixQuestion.value.push(JSON.parse(JSON.stringify(matrixQuestion.instanceQuestions)));
}
matrixQuestion.value.forEach((instance, index) => {
instance.forEach((question, instanceIndex) => {
if (validSubmission.answers[matrixQuestion._id] &&
validSubmission.answers[matrixQuestion._id].value[index][question._id]) {
question.value =
validSubmission.answers[matrixQuestion._id].value[index][question._id].value;
question.remarks =
validSubmission.answers[matrixQuestion._id].value[index][question._id].remarks;
question.fileName =
validSubmission.answers[matrixQuestion._id].value[index][question._id].fileName;
question.endTime =
validSubmission.answers[matrixQuestion._id].value[index][question._id].endTime;
}
});
});
return matrixQuestion.value;
}
else {
return [];
}
}
getEvidenceData(evidence, formValues) {
let sections = evidence.sections;
let answers = this.getSectionData(sections, formValues);
let payloadData = {
externalId: evidence.externalId,
answers: answers,
startTime: evidence.startTime,
endTime: Date.now(),
};
return payloadData;
}
getSectionData(sections, formValues) {
let answers = {};
for (let index = 0; index < sections.length; index++) {
answers = {
...answers,
...this.createpayload(sections[index].questions, formValues),
};
}
return answers;
}
createpayload(questions, formValues) {
let answers = {};
for (let index = 0; index < questions.length; index++) {
let currentQuestion = questions[index];
if (currentQuestion.responseType == 'pageQuestions') {
answers = {
...answers,
...this.createpayload(currentQuestion.pageQuestions, formValues),
};
continue;
}
if (currentQuestion.responseType == 'matrix') {
for (let index = 0; index < currentQuestion.value.length; index++) {
formValues[currentQuestion._id][index] = this.createpayload(currentQuestion.value[index], formValues[currentQuestion._id][index]);
}
}
let perQuestionData = this.formatToPayload(currentQuestion, formValues);
answers[currentQuestion._id] = perQuestionData;
}
return answers;
}
formatToPayload(currentQuestion, formValues) {
let value, labels;
if (currentQuestion.responseType == 'matrix') {
value = formValues[currentQuestion._id];
labels = currentQuestion.value;
}
else {
value = currentQuestion.value;
labels = formValues[currentQuestion._id];
if (currentQuestion.responseType == 'radio' && currentQuestion.value) {
labels = currentQuestion.options.find(_ => _.value == currentQuestion.value).label;
}
if (currentQuestion.responseType == 'multiselect' && currentQuestion.value) {
labels = currentQuestion.options.filter(_ => currentQuestion.value.includes(_.value)).map(_ => _.label);
}
}
return {
qid: currentQuestion._id,
value: value,
remarks: currentQuestion.remarks,
fileName: currentQuestion.fileName,
gpsLocation: '',
payload: {
question: currentQuestion.question,
labels: this.convertToArray(labels),
responseType: currentQuestion.responseType,
filesNotUploaded: [], //todo
},
startTime: currentQuestion.startTime,
endTime: currentQuestion.endTime,
criteriaId: currentQuestion.payload.criteriaId,
responseType: currentQuestion.responseType,
evidenceMethod: currentQuestion.evidenceMethod,
rubricLevel: '',
};
}
convertToArray(arr) {
if (!arr) {
return arr;
}
let clonedArr = _.cloneDeep(arr);
if (Array.isArray(clonedArr)) {
return arr;
}
else {
return [clonedArr];
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlQuestionnaireService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlQuestionnaireService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlQuestionnaireService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return []; } });
class SlTranslateService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlTranslateService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlTranslateService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class TextInputComponent {
constructor(qService, translate) {
this.qService = qService;
this.translate = translate;
}
ngOnInit() {
this.placeholder = this.translate['frmelmnts'].lbl.enterResponse;
setTimeout(() => {
this.questionnaireForm.addControl(this.question._id, new UntypedFormControl(this.question.value || null, [
this.qService.validate(this.question),
]));
this.question.startTime = this.question.startTime
? this.question.startTime
: Date.now();
});
}
get isValid() {
return this.questionnaireForm.controls[this.question._id].valid;
}
get isTouched() {
return this.questionnaireForm.controls[this.question._id].touched;
}
onChange(e) {
let value = e.target.value;
this.question.value = value;
this.question.endTime = Date.now();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputComponent, deps: [{ token: SlQuestionnaireService }, { token: SlTranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextInputComponent, selector: "sl-text-input", inputs: { questionnaireForm: "questionnaireForm", question: "question" }, ngImport: i0, template: "<div\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n>\n <input\n type=\"text\"\n [formControlName]=\"question?._id\"\n [ngClass]=\"!isValid && isTouched ? 'is-invalid ' : 'is-valid'\"\n class=\"sb-form-control\"\n [placeholder]=\"placeholder\"\n (change)=\"onChange($event)\"\n [value]=\"question.value\"\n />\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-text-input', template: "<div\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n>\n <input\n type=\"text\"\n [formControlName]=\"question?._id\"\n [ngClass]=\"!isValid && isTouched ? 'is-invalid ' : 'is-valid'\"\n class=\"sb-form-control\"\n [placeholder]=\"placeholder\"\n (change)=\"onChange($event)\"\n [value]=\"question.value\"\n />\n</div>\n" }]
}], ctorParameters: function () { return [{ type: SlQuestionnaireService }, { type: SlTranslateService }]; }, propDecorators: { questionnaireForm: [{
type: Input
}], question: [{
type: Input
}] } });
class DateInputComponent {
constructor(qService, translate) {
this.qService = qService;
this.translate = translate;
}
ngOnInit() {
this.autoCaptureText = this.translate['frmelmnts'].btn?.autoCapture;
setTimeout(() => {
this.questionnaireForm.addControl(this.question._id, new UntypedFormControl(this.question.value ? new Date(this.question.value) : null, [this.qService.validate(this.question)]));
this.question.startTime = this.question.startTime
? this.question.startTime
: Date.now();
});
this.min = this.question.validation.min
? new Date(this.question.validation.min)
: null;
this.max = this.question.validation.max
? new Date(this.question.validation.max)
: null;
}
onChange(e) {
if (!e)
return;
let value = this.dateTimeFormat(e);
this.question.value = value;
this.question.endTime = Date.now();
}
dateTimeFormat(e) {
let x = new Date(e);
let n = new Date();
let h = n.getHours();
let m = n.getMinutes();
x.setHours(h);
x.setMinutes(m);
return x;
}
autoCapture() {
this.questionnaireForm.controls[this.question._id].patchValue(new Date(Date.now()));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputComponent, deps: [{ token: SlQuestionnaireService }, { token: SlTranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateInputComponent, selector: "sl-date-input", inputs: { questionnaireForm: "questionnaireForm", question: "question", autoCaptureText: "autoCaptureText" }, ngImport: i0, template: "<div\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n class=\"sb-g sb-g-col-xs-12\"\n>\n <div class=\"ui left icon input sb-g-col-xs-12 sb-g-col-md-8\">\n <i class=\"calendar icon\"></i>\n <input\n suiDatepicker\n [pickerMode]=\"'date'\"\n [pickerUseNativeOnMobile]=\"false\"\n [formControlName]=\"question?._id\"\n (pickerSelectedDateChange)=\"onChange($event)\"\n class=\"question-date-input\"\n [pickerMinDate]=\"min\"\n [pickerMaxDate]=\"max\"\n />\n </div>\n <div *ngIf=\"question?.autoCapture && !question?.value\" class=\"d-flex sb-g-col-xs-12 sb-g-col-md-4 margin\">\n <button class=\"sb-btn sb-btn-normal sb-btn-primary\" (click)=\"autoCapture()\">\n\t\t{{autoCaptureText}}\n </button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.SuiDatepickerDirective, selector: "[suiDatepicker]", inputs: ["pickerMode", "pickerInitialDate", "pickerMaxDate", "pickerMinDate", "pickerFirstDayOfWeek", "pickerLocaleOverrides", "pickerPlacement", "pickerTransition", "pickerTransitionDuration"], outputs: ["pickerSelectedDateChange", "pickerValidatorChange"] }, { kind: "directive", type: i5.SuiDatepickerDirectiveValueAccessor, selector: "[suiDatepicker]" }, { kind: "directive", type: i5.SuiDatepickerDirectiveValidator, selector: "[suiDatepicker]" }, { kind: "directive", type: i5.SuiDatepickerInputDirective, selector: "input[suiDatepicker]", inputs: ["pickerUseNativeOnMobile"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-date-input', template: "<div\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n class=\"sb-g sb-g-col-xs-12\"\n>\n <div class=\"ui left icon input sb-g-col-xs-12 sb-g-col-md-8\">\n <i class=\"calendar icon\"></i>\n <input\n suiDatepicker\n [pickerMode]=\"'date'\"\n [pickerUseNativeOnMobile]=\"false\"\n [formControlName]=\"question?._id\"\n (pickerSelectedDateChange)=\"onChange($event)\"\n class=\"question-date-input\"\n [pickerMinDate]=\"min\"\n [pickerMaxDate]=\"max\"\n />\n </div>\n <div *ngIf=\"question?.autoCapture && !question?.value\" class=\"d-flex sb-g-col-xs-12 sb-g-col-md-4 margin\">\n <button class=\"sb-btn sb-btn-normal sb-btn-primary\" (click)=\"autoCapture()\">\n\t\t{{autoCaptureText}}\n </button>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: SlQuestionnaireService }, { type: SlTranslateService }]; }, propDecorators: { questionnaireForm: [{
type: Input
}], question: [{
type: Input
}], autoCaptureText: [{
type: Input
}] } });
class NumberInputComponent {
constructor(qService, translate) {
this.qService = qService;
this.translate = translate;
}
ngOnInit() {
this.placeholder = this.translate['frmelmnts']?.lbl?.enterResponse;
setTimeout(() => {
this.questionnaireForm.addControl(this.question._id, new UntypedFormControl(this.question.value || null, [
this.qService.validate(this.question),
]));
this.question.startTime = this.question.startTime
? this.question.startTime
: Date.now();
});
}
onChange(e) {
let value = e.target.value;
this.question.value = value;
this.question.endTime = Date.now();
}
get isValid() {
return this.questionnaireForm.controls[this.question._id].valid;
}
get isTouched() {
return this.questionnaireForm.controls[this.question._id].touched;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberInputComponent, deps: [{ token: SlQuestionnaireService }, { token: SlTranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumberInputComponent, selector: "sl-number-input", inputs: { questionnaireForm: "questionnaireForm", question: "question" }, ngImport: i0, template: "<div\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n>\n <input\n type=\"number\"\n [formControlName]=\"question?._id\"\n class=\"sb-form-control\"\n [placeholder]=\"placeholder\"\n (change)=\"onChange($event)\"\n [value]=\"question.value\"\n />\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-number-input', template: "<div\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n>\n <input\n type=\"number\"\n [formControlName]=\"question?._id\"\n class=\"sb-form-control\"\n [placeholder]=\"placeholder\"\n (change)=\"onChange($event)\"\n [value]=\"question.value\"\n />\n</div>\n" }]
}], ctorParameters: function () { return [{ type: SlQuestionnaireService }, { type: SlTranslateService }]; }, propDecorators: { questionnaireForm: [{
type: Input
}], question: [{
type: Input
}] } });
class RangeInputComponent {
constructor(qService) {
this.qService = qService;
this.options = {
step: 1,
hidePointerLabels: true,
hideLimitLabels: true,
showSelectionBar: true
};
}
ngOnInit() {
setTimeout(() => {
this.questionnaireForm.addControl(this.question._id, new UntypedFormControl(this.question.value || +this.min, [
this.qService.validate(this.question),
]));
this.question.startTime = this.question.startTime
? this.question.startTime
: Date.now();
this.question.value = this.question.value ? this.question.value : this.min;
});
this.max && (this.options['ceil'] = +this.max);
this.min && (this.options['floor'] = +this.min);
setTimeout(() => {
if (this.question.value) {
this.questionnaireForm.controls[this.question._id].reset(this.question.value);
}
else {
if ((this.question.validation).required) {
this.questionnaireForm.controls[this.question._id].reset(null);
}
}
}, 100);
}
onChange(e) {
let value = e.value;
this.question.value = value;
this.question.endTime = Date.now();
}
get isValid() {
return this.questionnaireForm.controls[this.question._id].valid;
}
get isTouched() {
return this.questionnaireForm.controls[this.question._id].touched;
}
get min() {
if (typeof this.question.validation == 'string') {
return null;
}
return this.question.validation.min;
}
get max() {
if (typeof this.question.validation == 'string') {
return null;
}
return this.question.validation.max;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RangeInputComponent, deps: [{ token: SlQuestionnaireService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RangeInputComponent, selector: "sl-range-input", inputs: { questionnaireForm: "questionnaireForm", question: "question" }, ngImport: i0, template: "<div\n class=\"\n d-flex\n flex-ai-center flex-dc\n mt-30\n ng-dirty ng-invalid ng-touched\n range-wrap\n \"\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n>\n <div class=\"range-value\">{{ this.question.value }}</div>\n \n <ngx-slider\n [options]=\"options\"\n [formControlName]=\"question?._id\"\n (userChange)=\"onChange($event)\" \n [ngClass]=\"isValid && isTouched ? 'is-invalid' : 'is-valid'\" \n class=\"w-100\">\n</ngx-slider>\n</div>\n", styles: [".range-value{width:50px;height:50px;line-height:50px;border-radius:50%;font-size:20px;color:#0274fd;text-align:center;background:#e9e8d9;margin-bottom:17px}.ngx-slider::ng-deep .ngx-slider-bar{height:3px;border-radius:3px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RangeInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-range-input', template: "<div\n class=\"\n d-flex\n flex-ai-center flex-dc\n mt-30\n ng-dirty ng-invalid ng-touched\n range-wrap\n \"\n [formGroup]=\"questionnaireForm\"\n *ngIf=\"questionnaireForm?.contains(question._id)\"\n>\n <div class=\"range-value\">{{ this.question.value }}</div>\n \n <ngx-slider\n [options]=\"options\"\n [formControlName]=\"question?._id\"\n (userChange)=\"onChange($event)\" \n [ngClass]=\"isValid && isTouched ? 'is-invalid' : 'is-valid'\" \n class=\"w-100\">\n</ngx-slider>\n</div>\n", styles: [".range-value{width:50px;height:50px;line-height:50px;border-radius:50%;font-size:20px;color:#0274fd;text-align:center;background:#e9e8d9;margin-bottom:17px}.ngx-slider::ng-deep .ngx-slider-bar{height:3px;border-radius:3px}\n"] }]
}], ctorParameters: function () { return [{ type: SlQuestionnaireService }]; }, propDecorators: { questionnaireForm: [{
type: Input
}], question: [{
type: Input
}] } });
class AlertModalComponent {
constructor(translate, location) {
this.translate = translate;
this.location = location;
this.closeHintEmitter = new EventEmitter();
this.location.onPopState(() => {
this.isDimmed = false;
this.closeHintEmitter.emit({});
});
}
ngOnInit() {
this.hintCloseText = this.translate['frmelmnts'].btn?.close;
this.hintModalNote = this.translate['frmelmnts'].lbl?.hintModalNote;
}
closeHint() {
this.isDimmed = false;
this.closeHintEmitter.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertModalComponent, deps: [{ token: SlTranslateService }, { token: i3.LocationStrategy }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertModalComponent, selector: "sl-alert-modal", inputs: { isDimmed: "isDimmed", hint: "hint" }, outputs: { closeHintEmitter: "closeHintEmitter" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<sui-modal\n [mustScroll]=\"true\"\n [isClosable]=\"false\"\n [transitionDuration]=\"0\"\n [size]=\"'normal'\"\n class=\"sb-modal customModal\"\n appBodyScroll\n *ngIf=\"isDimmed\"\n #modal\n>\n <!--Header-->\n <div class=\"sb-modal-header d-flex flex-dir-row\">\n <div>\n <i class=\"info circle icon sb-color-primary\"></i>\n </div>\n <div class=\"font-weight-bold sb-color-primary modalNote\">\n {{ hintModalNote }}\n </div>\n </div>\n <!--/Header-->\n <!--Content-->\n <div class=\"sb-modal-content\">\n <h4 class=\"ui header\">{{ hint }}</h4>\n </div>\n <!--/Content-->\n\n <!--Actions-->\n <div class=\"sb-modal-actions\">\n <button\n type=\"button\"\n class=\"sb-btn sb-btn-sm sb-btn-primary\"\n type=\"submit\"\n (click)=\"closeHint()\"\n >\n {{ hintCloseText }}\n </button>\n </div>\n <!--/Actions-->\n</sui-modal>\n", styles: ["::ng-deep .customModal .ui.modal .ui.header{font-size:1.3em!important}::ng-deep .customModal .ui.modal{top:30%!important}::ng-deep .customModal .close{display:none!important}::ng-deep .customModal i.icon{font-size:1.25rem!important}::ng-deep .customModal .modalNote{font-size:1.1rem!important}::ng-deep .customModal .sb-modal-content{padding:1rem 3.2rem!important}::ng-deep .customModal .sb-modal-actions{flex-direction:column!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.SuiModal, selector: "sui-modal", inputs: ["isClosable", "closeResult", "size", "isCentered", "isFullScreen", "isBasic", "mustScroll", "isInverted", "transition", "transitionDuration"], outputs: ["approved", "denied", "dismissed"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertModalComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-alert-modal', template: "<sui-modal\n [mustScroll]=\"true\"\n [isClosable]=\"false\"\n [transitionDuration]=\"0\"\n [size]=\"'normal'\"\n class=\"sb-modal customModal\"\n appBodyScroll\n *ngIf=\"isDimmed\"\n #modal\n>\n <!--Header-->\n <div class=\"sb-modal-header d-flex flex-dir-row\">\n <div>\n <i class=\"info circle icon sb-color-primary\"></i>\n </div>\n <div class=\"font-weight-bold sb-color-primary modalNote\">\n {{ hintModalNote }}\n </div>\n </div>\n <!--/Header-->\n <!--Content-->\n <div class=\"sb-modal-content\">\n <h4 class=\"ui header\">{{ hint }}</h4>\n </div>\n <!--/Content-->\n\n <!--Actions-->\n <div class=\"sb-modal-actions\">\n <button\n type=\"button\"\n class=\"sb-btn sb-btn-sm sb-btn-primary\"\n type=\"submit\"\n (click)=\"closeHint()\"\n >\n {{ hintCloseText }}\n </button>\n </div>\n <!--/Actions-->\n</sui-modal>\n", styles: ["::ng-deep .customModal .ui.modal .ui.header{font-size:1.3em!important}::ng-deep .customModal .ui.modal{top:30%!important}::ng-deep .customModal .close{display:none!important}::ng-deep .customModal i.icon{font-size:1.25rem!important}::ng-deep .customModal .modalNote{font-size:1.1rem!important}::ng-deep .customModal .sb-modal-content{padding:1rem 3.2rem!important}::ng-deep .customModal .sb-modal-actions{flex-direction:column!important}\n"] }]
}], ctorParameters: function () { return [{ type: SlTranslateService }, { type: i3.LocationStrategy }]; }, propDecorators: { modal: [{
type: ViewChild,
args: ['modal']
}], isDimmed: [{
type: Input
}], hint: [{
type: Input
}], closeHintEmitter: [{
type: Output
}] } });
class RadioInputComponent {
constructor(qService, translate) {
this.qService = qService;
this.translate = translate;
this.dependentParent = new EventEmitter();
}
ngOnInit() {
this.hintCloseText = this.translate['frmelmnts'].btn?.close;
this.hintModalNote = this.translate['frmelmnts'].lbl?.hintModalNote;
setTimeout(() => {
this.questionnaireForm.addControl(this.question._id, new UntypedFormControl(this.question.value || null, this.qService.validate(this.question)));
this.question.startTime = this.question.startTime
? this.question.startTime
: Date.now();
if (this.question.value) {
if (this.question.children.length) {
this.dependentParent.emit(this.question);
}
}
});
}
get isValid() {
return this.questionnaireForm.controls[this.question._id].valid;
}
get isTouched() {
return this.questionnaireForm.controls[this.question._id].touched;
}
onChange(value) {
this.questionnaireForm.controls[this.question._id].setValue(value);
this.question.value = value;
this.question.endTime = Date.now();
if (this.question.children.length) {
this.dependentParent.emit(this.question);
}
}
closeHint() {
this.isDimmed = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioInputComponent, deps: [{ token: SlQuestionnaireService }, { token: SlTranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioInputComponent, selector: "sl-radio-input", inputs: { options: "options", questionnaireForm: "questionnaireForm", question: "question" }, outputs: { dependentParent: "dependentParent" }, ngImport: i0, template: "<div *ngIf=\"questionnaireForm?.contains(question._id)\">\n <div\n *ngFor=\"let o of options; let optionIndex = index\"\n [formGroup]=\"questionnaireForm\"\n class=\"\n mb-15\n sb-radio-btn-checkbox sb-radio-btn-primary\n d-flex\n flex-ai-baseline\n \"\n >\n <input\n type=\"radio\"\n (change)=\"onChange(o.value)\"\n [name]=\"question._id\"\n [ngClass]=\"isValid && isTouched ? 'is-invalid' : 'is-valid'\"\n [value]=\"o.value\"\n [formControlName]=\"question._id\"\n id=\"{{question._id + o.value}}\"\n />\n <label for=\"{{question._id + o.value}}\">{{ o.label }}</label>\n <div *ngIf=\"options && options[optionIndex]?.hint\">\n <i\n class=\"icon large lightbulb\"\n (click)=\"\n isDimmed = !isDimmed; hint = options[optionIndex]?.hint\n \"\n ></i>\n </div>\n </div>\n</div>\n\n<sl-alert-modal [isDimmed]=\"isDimmed\" (closeHintEmitter)=\"closeHint()\" [hint]=\"hint\"></sl-alert-modal>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AlertModalComponent, selector: "sl-alert-modal", inputs: ["isDimmed", "hint"], outputs: ["closeHintEmitter"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-radio-input', template: "<div *ngIf=\"questionnaireForm?.contains(question._id)\">\n <div\n *ngFor=\"let o of options; let optionIndex = index\"\n [formGroup]=\"questionnaireForm\"\n class=\"\n mb-15\n sb-radio-btn-checkbox sb-radio-btn-primary\n d-flex\n flex-ai-baseline\n \"\n >\n <input\n type=\"radio\"\n (change)=\"onChange(o.value)\"\n [name]=\"question._id\"\n [ngClass]=\"isValid && isTouched ? 'is-invalid' : 'is-valid'\"\n [value]=\"o.value\"\n [formControlName]=\"question._id\"\n id=\"{{question._id + o.value}}\"\n />\n <label for=\"{{question._id + o.value}}\">{{ o.label }}</label>\n <div *ngIf=\"options && options[optionIndex]?.hint\">\n <i\n class=\"icon large lightbulb\"\n (click)=\"\n isDimmed = !isDimmed; hint = options[optionIndex]?.hint\n \"\n ></i>\n </div>\n </div>\n</div>\n\n<sl-alert-modal [isDimmed]=\"isDimmed\" (closeHintEmitter)=\"closeHint()\" [hint]=\"hint\"></sl-alert-modal>\n\n" }]
}], ctorParameters: function () { return [{ type: SlQuestionnaireService }, { type: SlTranslateService }]; }, propDecorators: { options: [{
type: Input
}], questionnaireForm: [{
type: Input
}], question: [{
type: Input
}], dependentParent: [{
type: Output
}] } });
class CheckboxInputComponent {
constructor(qService, translate) {
this.qService = qService;
this.translate = translate;
this.dependentParent = new EventEmitter();
}
ngOnInit() {
this.hintCloseText = this.translate['frmelmnts'].btn?.close;
this.hintModalNote = this.translate['frmelmnts'].lbl?.hintModalNote;
setTimeout(() => {
const optionControl = this.options.map((v) => {
if (this.question.value &&
this.question.value.find((_v) => _v == v.value)) {
return new UntypedFormControl(v.value);
}
return new UntypedFormControl('');
});
this.questionnaireForm.addControl(this.question._id, new UntypedFormArray(optionControl, this.qService.validate(this.question)));
this.question.startTime = this.question.startTime
? this.question.startTime
: Date.now();
if (this.question.value.length) {
if (this.question.children.length) {
this.dependentParent.emit(this.question);
}
}
});
}
onChange(oId, isChecked, oIndex) {
const formArray = this.questionnaireForm.get(this.question._id);
if (isChecked) {
formArray.controls[oIndex].patchValue(oId);
}
this.question.value =
this.questionnaireForm.controls[this.question._id].value;
this.question.value = this.question.value.filter(Boolean);
this.question.endTime = Date.now();
if (this.question.children.length) {
this.dependentParent.emit(this.question);
}
}
get isValid() {
return this.questionnaireForm.controls[this.question._id].valid;
}
get isTouched() {
return this.questionnaireForm.controls[this.question._id].touched;
}
closeHint() {
this.isDimmed = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxInputComponent, deps: [{ token: SlQuestionnaireService }, { token: SlTranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxInputComponent, selector: "sl-checkbox-input", inputs: { options: "options", questionnaireForm: "questionnaireForm", question: "question" }, outputs: { dependentParent: "dependentParent" }, ngImport: i0, template: "<div *ngIf=\"questionnaireForm?.contains(question._id)\">\n <div\n *ngFor=\"let o of options; let i = index\"\n [formGroup]=\"questionnaireForm\"\n class=\"mb-15 sb-checkbox sb-checkbox-secondary d-flex flex-ai-baseline\"\n >\n <div [formArrayName]=\"question._id\">\n <sui-checkbox\n (checkChange)=\"onChange(o.value, $event, i)\"\n [formControlName]=\"i\"\n >\n {{ o.label }}\n </sui-checkbox>\n </div>\n <div *ngIf=\"question?.option && question?.option[i]?.hint\">\n <i\n class=\"icon large lightbulb\"\n (click)=\"isDimmed = !isDimmed; hint = question?.option[i]?.hint\"\n ></i>\n </div>\n </div>\n</div>\n\n<sl-alert-modal [isDimmed]=\"isDimmed\" [hint]=\"hint\" (closeHintEmitter)=\"closeHint()\"></sl-alert-modal>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i5.SuiCheckbox, selector: "sui-checkbox", inputs: ["name", "isDisabled", "isReadonly"], outputs: ["checkChange", "touched"], exportAs: ["suiCheckbox"] }, { kind: "directive", type: i5.SuiCheckboxValueAccessor, selector: "sui-checkbox" }, { kind: "component", type: AlertModalComponent, selector: "sl-alert-modal", inputs: ["isDimmed", "hint"], outputs: ["closeHintEmitter"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-checkbox-input', template: "<div *ngIf=\"questionnaireForm?.contains(question._id)\">\n <div\n *ngFor=\"let o of options; let i = index\"\n [formGroup]=\"questionnaireForm\"\n class=\"mb-15 sb-checkbox sb-checkbox-secondary d-flex flex-ai-baseline\"\n >\n <div [formArrayName]=\"question._id\">\n <sui-checkbox\n (checkChange)=\"onChange(o.value, $event, i)\"\n [formControlName]=\"i\"\n >\n {{ o.label }}\n </sui-checkbox>\n </div>\n <div *ngIf=\"question?.option && question?.option[i]?.hint\">\n <i\n class=\"icon large lightbulb\"\n (click)=\"isDimmed = !isDimmed; hint = question?.option[i]?.hint\"\n ></i>\n </div>\n </div>\n</div>\n\n<sl-alert-modal [isDimmed]=\"isDimmed\" [hint]=\"hint\" (closeHintEmitter)=\"closeHint()\"></sl-alert-modal>\n\n" }]
}], ctorParameters: function () { return [{ type: SlQuestionnaireService }, { type: SlTranslateService }]; }, propDecorators: { options: [{
type: Input
}], questionnaireForm: [{
type: Input
}], question: [{
type: Input
}], dependentParent: [{
type: Output
}] } });
class QuesRemarksComponent {
constructor(translate) {
this.translate = translate;
this.remark = '';
this.saveClicked = new EventEmitter();
}
ngOnInit() {
this.title = this.translate['frmelmnts'].lbl?.remark_title;
this.remarksAddText = this.translate['frmelmnts'].btn.addRemarks;
this.remark = this.question.remarks;
this.remark ? (this.showRemarks = true) : false;
}
saveRemark() {
this.question.remarks = this.remark;
this.saveClicked.emit({ value: this.remark });
}
deleteRemark() {
this.remark = '';
this.saveRemark();
this.showRemarks = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuesRemarksComponent, deps: [{ token: SlTranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuesRemarksComponent, selector: "sl-ques-remarks", inputs: { question: "question" }, outputs: { saveClicked: "saveClicked" }, ngImport: i0, template: "<div class=\"d-flex flex-ai-center flex-jc-space-between my-10\">\n <h5 class=\"my-10\">{{ title }}</h5>\n <button\n class=\"sb-btn sb-btn-normal sb-btn-primary\"\n *ngIf=\"!remark.length\"\n (click)=\"showRemarks = true\"\n >\n {{ remarksAddText }}\n </button>\n <span *ngIf=\"remark.length\" (click)=\"deleteRemark()\"\n ><i class=\"trash large icon\"></i\n ></span>\n</div>\n\n<div class=\"d-flex flex-ai-end\" *ngIf=\"showRemarks\">\n <textarea\n rows=\"3\"\n class=\"w-100\"\n [(ngModel)]=\"remark\"\n (ngModelChange)=\"saveRemark()\"\n >\n </textarea>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: QuesRemarksComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-ques-remarks', template: "<div class=\"d-flex flex-ai-center flex-jc-space-between my-10\">\n <h5 class=\"my-10\">{{ title }}</h5>\n <button\n class=\"sb-btn sb-btn-normal sb-btn-primary\"\n *ngIf=\"!remark.length\"\n (click)=\"showRemarks = true\"\n >\n {{ remarksAddText }}\n </button>\n <span *ngIf=\"remark.length\" (click)=\"deleteRemark()\"\n ><i class=\"trash large icon\"></i\n ></span>\n</div>\n\n<div class=\"d-flex flex-ai-end\" *ngIf=\"showRemarks\">\n <textarea\n rows=\"3\"\n class=\"w-100\"\n [(ngModel)]=\"remark\"\n (ngModelChange)=\"saveRemark()\"\n >\n </textarea>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: SlTranslateService }]; }, propDecorators: { saveClicked: [{
type: Output
}], question: [{
type: Input
}] } });
class SlUtilsAbstract {
}
class SlUtilsService extends SlUtilsAbstract {
constructor(modalService) {
super();
this.modalService = modalService;
}
/**
* @param {AlertMeta} meta: Alert Meta Form Object
* @param {String} meta.title Optional ! Display title of alert fields
* @param {String} meta.size Provide size of alert.('tiny','mini)
* @param {AlertBodyType} meta.bodyType Alert-content type to show in alert body
* @param {String} meta.data content to show
* @param {String} meta.buttonClass class to apply on button div
* @param {String} meta.acceptText text to show in accept button
* @param {String} meta.cancelText text to show in accept button
* @param {String} meta.type Optional ! To set type of alert
* @param {Boolean} meta.closeIcon Optional ! Show top right close icon , default = false
*/
alert(meta) {
const button = [];
meta.acceptText &&
button.push({
type: 'accept',
returnValue: true,
buttonText: meta.acceptText,
});
meta.cancelText &&
button.push({
type: 'cancel',
returnValue: false,
buttonText: meta.cancelText,
});
let alertMeta = {
type: meta.type,
size: meta.size,
isClosed: meta.closeIcon,
content: {
title: meta.title,
body: {
type: meta.bodyType,
data: meta.data,
},
},
footer: {
className: meta.buttonClass,
buttons: button,
},
};
return this.openAlert(alertMeta);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlUtilsService, deps: [{ token: i5.SuiModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlUtilsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlUtilsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return [{ type: i5.SuiModalService }]; } });
class AttachmentComponent {
constructor(translate, utils) {
this.translate = translate;
this.utils = utils;
}
ngOnInit() {
this.files = this.translate['frmelmnts'].lbl?.files;
}
basicUpload(event) {
const files = event.target.files;
let sizeMB = +(files[0].size / 1000 / 1000).toFixed(4);
if (sizeMB > 20) {
this.fileLimitCross();
return;
}
this.formData = new FormData();
Array.from(files).forEach((f) => this.formData.append('file', f));
event.target.value = null;
this.preSignedUrl(this.getFileNames(this.formData));
}
fileLimitCross() {
const alertMeta = {
size: 'tiny',
bodyType: 'text',
data: this.translate['frmelmnts'].lbl.fileLimitCross20,
buttonClass: 'single-btn',
acceptText: this.translate['frmelmnts'].btn.ok,
cancelText: null,
};
this.utils.alert(alertMeta);
}
getFileNames(formData) {
let files = [];
formData.forEach((element) => {
files.push(element.name);
});
return files;
}
preSignedUrl(files) {
let payload = {};
payload['ref'] = 'survey';
payload['request'] = {};
payload['request'][this.data.submissionId] = {
files: files,
};
this.utils.getPreSingedUrls(payload).subscribe((imageData) => {
const presignedUrlData = imageData['result'][this.data.submissionId].files[0];
this.formData.append('url', presignedUrlData.url);
this.utils.cloudStorageUpload(this.formData).subscribe((success) => {
if (success.status === 200) {
const obj = {
name: this.getFileNames(this.formData)[0],
url: presignedUrlData.url.split('?')[0],
};
for (const key of Object.keys(presignedUrlData.payload)) {
obj[key] = presignedUrlData['payload'][key];
}
this.data.files.push(obj);
const alertMeta = {
size: 'tiny',
bodyType: 'text',
data: this.translate['frmelmnts'].lbl.evidenceUploaded,
buttonClass: 'single-btn',
acceptText: this.translate['frmelmnts'].btn.ok,
cancelText: null,
type: 'uploaded',
};
this.utils.alert(alertMeta);
}
else {
this.utils.error(this.translate['frmelmnts'].message.unableToUpload);
}
}, (error) => {
this.utils.error(this.translate['frmelmnts'].message.unableToUpload);
});
}, (error) => {
console.log(error);
});
}
extension(name) {
return name.split('.').pop();
}
openFile(file) {
window.open(file.url, '_blank');
}
async deleteAttachment(fileIndex) {
const alertMeta = {
size: 'mini',
bodyType: 'text',
data: this.translate['frmelmnts'].lbl.confirmEvidenceDelete,
buttonClass: 'double-btn',
acceptText: this.translate['frmelmnts'].btn.yes,
cancelText: this.translate['frmelmnts'].btn.no,
};
const accepted = await this.utils.alert(alertMeta);
if (!accepted) {
return;
}
this.data.files.splice(fileIndex, 1);
}
async onAddApproval(file) {
let html = `
${this.translate['frmelmnts'].lbl.evidence_content_policy}<a href='/term-of-use.html' target="_blank">${this.translate['frmelmnts'].lbl.evidence_content_policy_label}</a> .${this.translate['frmelmnts'].lbl.uploadevidencecontent}
`;
const alertMeta = {
size: 'tiny',
bodyType: 'checkbox',
data: html,
buttonClass: 'double-btn',
acceptText: this.translate['frmelmnts'].btn.upload,
cancelText: this.translate['frmelmnts'].btn.donotupload,
};
let returnData = await this.utils.alert(alertMeta);
if (returnData == false) {
this.notAccepted();
return;
}
if (returnData == true) {
file.click();
}
}
notAccepted() {
const alertMeta = {
size: 'tiny',
bodyType: 'text',
data: this.translate['frmelmnts'].lbl.uploadTermsRejected,
buttonClass: 'single-btn',
acceptText: this.translate['frmelmnts'].btn.ok,
cancelText: null,
type: 'notAccepted',
};
this.utils.alert(alertMeta);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttachmentComponent, deps: [{ token: SlTranslateService }, { token: SlUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AttachmentComponent, selector: "sl-attachment", inputs: { data: "data" }, ngImport: i0, template: "<label for=\"file-upload\" class=\"custom-file-upload\"></label>\n<input\n id=\"file-upload\"\n type=\"file\"\n #file\n (change)=\"basicUpload($event)\"\n/>\n<div class=\"d-flex\">\n <div class=\"bs-1 attachment\" (click)=\"onAddApproval(file)\">\n <i class=\"plus icon\"></i>\n <div class=\"files\">{{files}}</div>\n </div>\n <div\n *ngFor=\"let item of data.files; let i = index\"\n (click)=\"openFile(item)\"\n class=\"area\"\n >\n <a\n class=\"remove-image\"\n (click)=\"$event.stopPropagation(); deleteAttachment(i)\"\n >×</a\n >\n <div [ngSwitch]=\"extension(item.name)\">\n <div *ngSwitchCase = \"'png'\" class=\"mx-10\">\n <i class=\"file image outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'jpg'\" class=\"mx-10\">\n <i class=\"file image outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'jpeg'\" class=\"mx-10\">\n <i class=\"file image outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'pdf'\" class=\"mx-10\">\n <i class=\"file pdf outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'mp4'\" class=\"mx-10\">\n <i class=\"file video outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'mp3'\" class=\"mx-10\">\n <i class=\"file audio outline icon\"></i>\n </div>\n <div *ngSwitchDefault class=\"mx-10\">\n <i class=\"file alternate outline icon\"></i>\n </div>\n </div>\n </div>\n</div>", styles: ["input[type=file]{display:none}.area{position:relative}.area a{display:inline}.area i{font-size:40px}.remove-image{display:none;position:absolute;top:-10px;right:2px;border-radius:10em;padding:0 7px;text-decoration:none;font:620 9px/12px sans-serif;background:#555;border:3px solid #fff;color:#fff!important;box-shadow:0 2px 6px #00000080,inset 0 2px 4px #0000004d;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:background .5s}.remove-image:hover{background:#e54e4e;padding:0 7px;top:-11px;right:2px}.remove-image:active{background:#e54e4e;top:-10px;right:2px}.bs-1{background-color:gray}.files{font-size:.8rem}.attachment{width:10%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:.8rem;background:#a9a9a9;font-size:.5rem;border-radius:.1rem!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttachmentComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-attachment', template: "<label for=\"file-upload\" class=\"custom-file-upload\"></label>\n<input\n id=\"file-upload\"\n type=\"file\"\n #file\n (change)=\"basicUpload($event)\"\n/>\n<div class=\"d-flex\">\n <div class=\"bs-1 attachment\" (click)=\"onAddApproval(file)\">\n <i class=\"plus icon\"></i>\n <div class=\"files\">{{files}}</div>\n </div>\n <div\n *ngFor=\"let item of data.files; let i = index\"\n (click)=\"openFile(item)\"\n class=\"area\"\n >\n <a\n class=\"remove-image\"\n (click)=\"$event.stopPropagation(); deleteAttachment(i)\"\n >×</a\n >\n <div [ngSwitch]=\"extension(item.name)\">\n <div *ngSwitchCase = \"'png'\" class=\"mx-10\">\n <i class=\"file image outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'jpg'\" class=\"mx-10\">\n <i class=\"file image outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'jpeg'\" class=\"mx-10\">\n <i class=\"file image outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'pdf'\" class=\"mx-10\">\n <i class=\"file pdf outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'mp4'\" class=\"mx-10\">\n <i class=\"file video outline icon\"></i>\n </div>\n <div *ngSwitchCase = \"'mp3'\" class=\"mx-10\">\n <i class=\"file audio outline icon\"></i>\n </div>\n <div *ngSwitchDefault class=\"mx-10\">\n <i class=\"file alternate outline icon\"></i>\n </div>\n </div>\n </div>\n</div>", styles: ["input[type=file]{display:none}.area{position:relative}.area a{display:inline}.area i{font-size:40px}.remove-image{display:none;position:absolute;top:-10px;right:2px;border-radius:10em;padding:0 7px;text-decoration:none;font:620 9px/12px sans-serif;background:#555;border:3px solid #fff;color:#fff!important;box-shadow:0 2px 6px #00000080,inset 0 2px 4px #0000004d;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:background .5s}.remove-image:hover{background:#e54e4e;padding:0 7px;top:-11px;right:2px}.remove-image:active{background:#e54e4e;top:-10px;right:2px}.bs-1{background-color:gray}.files{font-size:.8rem}.attachment{width:10%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:.8rem;background:#a9a9a9;font-size:.5rem;border-radius:.1rem!important}\n"] }]
}], ctorParameters: function () { return [{ type: SlTranslateService }, { type: SlUtilsService }]; }, propDecorators: { data: [{
type: Input
}] } });
class MatrixQuestionsComponent {
onPopState(event) {
this.showBadgeAssingModel = false;
}
constructor(translate, modalService, fb, utils) {
this.translate = translate;
this.modalService = modalService;
this.fb = fb;
this.utils = utils;
this.instanceLastUpdated = [];
}
ngOnInit() {
this.addText = this.translate['frmelmnts'].btn.add;
this.submitText = this.translate['frmelmnts'].btn.submit;
this.cancelText = this.translate['frmelmnts'].btn.cancel;
setTimeout(() => {
this.matrixForm = this.fb.group({}, Validators.required);
this.questionnaireForm.addControl(this.question._id, new UntypedFormArray([], [Validators.required]));
this.initializeMatrix();
});
}
initializeMatrix() {
// let valid = true;
if (this.question.value.length) {
this.question.value.map((v) => {
let obj = {};
let endTime = [];
v.forEach((ques) => {
endTime.push(ques.endTime);
if (!ques.value)
return;
obj[ques._id] = ques.value;
});
this.questionnaireForm.controls[this.question._id].push(new UntypedFormControl(obj, [this.instanceValidation]));
let instanceupdatedAt = endTime.reduce(function (x, y) {
return x > y ? x : y;
});
this.instanceLastUpdated.push(instanceupdatedAt);
// if (_.isEmpty(obj)) {
// valid = false;
// }
});
}
// if (!valid)
// this.questionnaireForm.controls[this.question._id].setErrors({
// err: 'Matrix reposne not valid',
// });
}
instanceValidation(control) {
let value = control.value;
if (_.isEmpty(value)) {
return { err: 'Instance not filled' };
}
return null;
}
addInstances() {
this.question.value = this.question.value ? this.question.value : [];
this.question.value.push(JSON.parse(JSON.stringify(this.question.instanceQuestions)));
this.matrixForm.reset();
this.formAsArray.push(new UntypedFormControl([], [Validators.required]));
}
viewInstance(i) {
this.matrixForm.reset();
if (this.formAsArray.controls[i].value) {
this.matrixForm.patchValue(this.formAsArray.controls[i].value);
}
const config = new TemplateModalConfig(this.modalTemplate);
config.closeResult = 'closed!';
let deepClonedQuestion = _.cloneDeep(this.question.value[i]);
config.context = {
questions: deepClonedQuestion,
heading: `${this.question.instanceIdentifier} ${i + 1}`,
index: i,
};
this.context = config.context;
this.showBadgeAssingModel = true;
}
get formAsArray() {
return this.questionnaireForm.controls[this.question._id];
}
matrixSubmit(index) {
this.showBadgeAssingModel = false;
this.question.value[index] = this.context.questions;
this.formAsArray.at(index).patchValue(this.matrixForm.value);
if (this.matrixForm.invalid) {
this.formAsArray.at(index).setErrors({ err: 'Matrix reposne not valid' });
}
this.instanceLastUpdated[index] = Date.now();
}
async deleteInstanceAlert(index) {
// let metaData = await this.observationUtilService.getAlertMetaData();
// metaData.content.body.data =
// this.resourceService.frmelmnts.lbl.deleteSubmission;
// metaData.content.body.type = 'text';
// metaData.content.title = this.resourceService.frmelmnts.btn.delete;
// metaData.size = 'mini';
// metaData.footer.buttons.push({
// type: 'cancel',
// returnValue: false,
// buttonText: this.resourceService.frmelmnts.btn.no,
// });
// metaData.footer.buttons.push({
// type: 'accept',
// returnValue: true,
// buttonText: this.resourceService.frmelmnts.btn.yes,
// });
// metaData.footer.className = 'double-btn';
// const accepted = await this.observationUtilService.showPopupAlert(metaData);
const alertMeta = {
title: this.translate['frmelmnts'].btn.delete,
size: 'mini',
bodyType: 'text',
data: this.translate['frmelmnts'].lbl.deleteSubmission,
buttonClass: 'double-btn',
acceptText: this.translate['frmelmnts'].btn.yes,
cancelText: this.translate['frmelmnts'].btn.no,
};
const accepted = await this.utils.alert(alertMeta);
if (!accepted) {
return;
}
this.question.value.splice(index, 1);
this.questionnaireForm.controls[this.question._id].removeAt(index);
this.instanceLastUpdated.splice(index, 1);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MatrixQuestionsComponent, deps: [{ token: SlTranslateService }, { token: i5.SuiModalService }, { token: i4.UntypedFormBuilder }, { token: SlUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MatrixQuestionsComponent, selector: "sl-matrix-questions", inputs: { questionnaireForm: "questionnaireForm", question: "question" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, queries: [{ propertyName: "matrixTemplateRef", first: true, predicate: ["matrixTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "modalTemplate", first: true, predicate: ["modalTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-jc-flex-end\">\n <button class=\"sb-btn sb-btn-normal sb-btn-primary\" (click)=\"addInstances()\">\n {{ addText }}\n {{ question?.instanceIdentifier }}\n </button>\n</div>\n<div\n class=\"ui card student-card\"\n *ngFor=\"let instance of question?.value; let i = index\"\n>\n <div class=\"content flex-jc-space-between\">\n <div\n (click)=\"viewInstance(i)\"\n style=\"flex: 1\"\n class=\"d-flex flex-dc px-10\"\n [ngClass]=\"{\n 'valid-response':\n formAsArray?.controls[i].valid\n }\"\n >\n <span> {{ question?.instanceIdentifier }} {{ i + 1 }}</span>\n <span class=\"fs-0-785 modified\" *ngIf=\"instanceLastUpdated[i]\">Last Updated On : {{instanceLastUpdated[i] |date:'short'}}</span> \n </div>\n <div>\n <i class=\"trash large icon\" (click)=\"deleteInstanceAlert(i)\"></i>\n </div>\n </div>\n</div>\n\n<sui-modal\n [mustScroll]=\"true\"\n [isClosable]=\"true\"\n [transitionDuration]=\"0\"\n [size]=\"'normal'\"\n class=\"sb-modal\"\n appBodyScroll\n (dismissed)=\"showBadgeAssingModel = false\"\n *ngIf=\"showBadgeAssingModel\"\n #modal\n>\n <!--Header-->\n <div class=\"sb-modal-header\">\n {{ context?.heading }}\n </div>\n <!--/Header-->\n <!--Content-->\n <div class=\"sb-modal-content\">\n <ng-container *ngTemplateOutlet=\"matrixTemplateRef\"></ng-container>\n </div>\n <!--/Content-->\n\n <!--Actions-->\n <div class=\"sb-modal-actions\">\n <button\n [disabled]=\"!matrixForm?.valid\"\n type=\"button\"\n (click)=\"matrixSubmit(context.index)\"\n [ngClass]=\"{\n 'sb-btn sb-btn-normal': true,\n 'sb-btn-primary': matrixForm?.valid,\n 'sb-btn-disabled': !matrixForm?.valid\n }\"\n >\n {{ submitText }}\n </button>\n <button\n class=\"sb-btn sb-btn-normal sb-btn-outline-primary\"\n type=\"button\"\n (click)=\"showBadgeAssingModel = false\"\n >\n {{ cancelText }}\n </button>\n </div>\n <!--/Actions-->\n</sui-modal>\n", styles: [".card{width:100%;border-radius:90px}.content{display:flex;flex-direction:row}.ui.card>.content:after,.ui.cards>.card>.content:after{content:none}.modals.dimmer .ui.scrolling.modal{position:fixed!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.SuiModal, selector: "sui-modal", inputs: ["isClosable", "closeResult", "size", "isCentered", "isFullScreen", "isBasic", "mustScroll", "isInverted", "transition", "transitionDuration"], outputs: ["approved", "denied", "dismissed"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MatrixQuestionsComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-matrix-questions', template: "<div class=\"d-flex flex-jc-flex-end\">\n <button class=\"sb-btn sb-btn-normal sb-btn-primary\" (click)=\"addInstances()\">\n {{ addText }}\n {{ question?.instanceIdentifier }}\n </button>\n</div>\n<div\n class=\"ui card student-card\"\n *ngFor=\"let instance of question?.value; let i = index\"\n>\n <div class=\"content flex-jc-space-between\">\n <div\n (click)=\"viewInstance(i)\"\n style=\"flex: 1\"\n class=\"d-flex flex-dc px-10\"\n [ngClass]=\"{\n 'valid-response':\n formAsArray?.controls[i].valid\n }\"\n >\n <span> {{ question?.instanceIdentifier }} {{ i + 1 }}</span>\n <span class=\"fs-0-785 modified\" *ngIf=\"instanceLastUpdated[i]\">Last Updated On : {{instanceLastUpdated[i] |date:'short'}}</span> \n </div>\n <div>\n <i class=\"trash large icon\" (click)=\"deleteInstanceAlert(i)\"></i>\n </div>\n </div>\n</div>\n\n<sui-modal\n [mustScroll]=\"true\"\n [isClosable]=\"true\"\n [transitionDuration]=\"0\"\n [size]=\"'normal'\"\n class=\"sb-modal\"\n appBodyScroll\n (dismissed)=\"showBadgeAssingModel = false\"\n *ngIf=\"showBadgeAssingModel\"\n #modal\n>\n <!--Header-->\n <div class=\"sb-modal-header\">\n {{ context?.heading }}\n </div>\n <!--/Header-->\n <!--Content-->\n <div class=\"sb-modal-content\">\n <ng-container *ngTemplateOutlet=\"matrixTemplateRef\"></ng-container>\n </div>\n <!--/Content-->\n\n <!--Actions-->\n <div class=\"sb-modal-actions\">\n <button\n [disabled]=\"!matrixForm?.valid\"\n type=\"button\"\n (click)=\"matrixSubmit(context.index)\"\n [ngClass]=\"{\n 'sb-btn sb-btn-normal': true,\n 'sb-btn-primary': matrixForm?.valid,\n 'sb-btn-disabled': !matrixForm?.valid\n }\"\n >\n {{ submitText }}\n </button>\n <button\n class=\"sb-btn sb-btn-normal sb-btn-outline-primary\"\n type=\"button\"\n (click)=\"showBadgeAssingModel = false\"\n >\n {{ cancelText }}\n </button>\n </div>\n <!--/Actions-->\n</sui-modal>\n", styles: [".card{width:100%;border-radius:90px}.content{display:flex;flex-direction:row}.ui.card>.content:after,.ui.cards>.card>.content:after{content:none}.modals.dimmer .ui.scrolling.modal{position:fixed!important}\n"] }]
}], ctorParameters: function () { return [{ type: SlTranslateService }, { type: i5.SuiModalService }, { type: i4.UntypedFormBuilder }, { type: SlUtilsService }]; }, propDecorators: { onPopState: [{
type: HostListener,
args: ['window:popstate', ['$event']]
}], matrixTemplateRef: [{
type: ContentChild,
args: ['matrixTemplateRef', { static: false }]
}], questionnaireForm: [{
type: Input
}], question: [{
type: Input
}], modalTemplate: [{
type: ViewChild,
args: ['modalTemplate']
}] } });
class InputComponent {
constructor(translate, qService) {
this.translate = translate;
this.qService = qService;
}
get reponseType() {
return ResponseType;
}
toggleQuestion(parent) {
const { children } = parent;
this.questions.map((q, i) => {
if (children.includes(q._id)) {
let child = this.questions[i];
child['canDisplay'] = this.canDisplayChildQ(child, i);
if (child['canDisplay'] == false) {
child.value = '';
this.questionnaireForm.removeControl(child._id);
}
}
});
}
canDisplayChildQ(currentQuestion, currentQuestionIndex) {
let display = true;
if (typeof currentQuestion.visibleIf == 'string' || null || undefined) {
return false; //if condition not present
}
for (const question of this.questions) {
for (const condition of currentQuestion.visibleIf) {
if (condition._id === question._id) {
let expression = [];
if (condition.operator != '===') {
if (question.responseType === 'multiselect') {
for (const parentValue of question.value) {
for (const value of condition.value) {
expression.push('(', "'" + parentValue + "'", '===', "'" + value + "'", ')', condition.operator);
}
}
}
else {
for (const value of condition.value) {
expression.push('(', "'" + question.value + "'", '===', "'" + value + "'", ')', condition.operator);
}
}
expression.pop();
}
else {
if (question.responseType === 'multiselect') {
for (const value of question.value) {
expression.push('(', "'" + condition.value + "'", '===', "'" + value + "'", ')', '||');
}
expression.pop();
}
else {
expression.push('(', "'" + question.value + "'", condition.operator, "'" + condition.value + "'", ')');
}
}
if (!eval(expression.join(''))) {
this.questions[currentQuestionIndex].isCompleted = true;
return false;
}
else {
// this.questions[currentQuestionIndex].isCompleted =
// this.utils.isQuestionComplete(currentQuestion);
}
}
}
}
return display;
}
closeHint() {
this.isDimmed = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: [{ token: SlTranslateService }, { token: SlQuestionnaireService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "sl-input", inputs: { questions: "questions", questionnaireForm: "questionnaireForm" }, ngImport: i0, template: "<div *ngFor=\"let question of questions; let qi = index\">\n <div *ngIf=\"question?.sectionHeader && (!question.visibleIf.length || question.canDisplay == true)\">\n <h4 class=\"section-header-style\">{{question?.sectionHeader}}</h4>\n </div>\n <div\n [ngClass]=\"{\n 'ui card question-card sb--card relative9':\n question.responseType != 'pageQuestions'\n }\"\n *ngIf=\"!question.visibleIf.length || question.canDisplay == true\"\n >\n <div [ngClass]=\"{ content: question.responseType != 'pageQuestions' }\">\n <div class=\"d-flex flex-ai-flex-start flex-jc-space-between\">\n <div\n *ngFor=\"let q of question.question; let qai = index\"\n [ngClass]=\"{\n 'mb-20': q.length,\n 'valid-response': questionnaireForm?.controls[question._id]?.valid\n }\"\n >\n <div class=\"sb-h5\" *ngIf=\"q!=''\">\n {{ question.questionNumber + \" . \"}} {{ q }}\n </div>\n </div>\n <div *ngIf=\"question?.hint\">\n <i\n class=\"icon large lightbulb\"\n (click)=\"dimmerIndex = qi; isDimmed = !isDimmed\"\n ></i>\n </div>\n </div>\n <div *ngIf=\"question?.tip\" class=\"mb-10\">\n <small class=\"mb-10\">{{ question?.tip }}</small>\n </div>\n <div class=\"sbt-page-content-questionnaireFormarea'\">\n <sl-text-input\n *ngIf=\"question.responseType == reponseType.TEXT\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-text-input>\n <sl-date-input\n *ngIf=\"question.responseType == reponseType.DATE\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-date-input>\n <sl-number-input\n *ngIf=\"question.responseType == reponseType.NUMBER\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-number-input>\n <sl-range-input\n *ngIf=\"question.responseType == reponseType.SLIDER\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-range-input>\n <sl-radio-input\n *ngIf=\"question.responseType == reponseType.RADIO\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n [options]=\"question.options\"\n (dependentParent)=\"toggleQuestion($event)\"\n ></sl-radio-input>\n <sl-checkbox-input\n *ngIf=\"question.responseType == reponseType.MULTISELECT\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n [options]=\"question.options\"\n (dependentParent)=\"toggleQuestion($event)\"\n ></sl-checkbox-input>\n <ng-container *ngIf=\"question.responseType == reponseType.PAGEQUESTIONS\">\n <sl-input\n [questionnaireForm]=\"questionnaireForm\"\n [questions]=\"question.pageQuestions\"\n ></sl-input>\n </ng-container>\n <sl-matrix-questions *ngIf=\"question.responseType == reponseType.MATRIX\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n #matrixComponent>\n <ng-template #matrixTemplateRef>\n <sl-input\n [questions]=\"matrixComponent.context?.questions\"\n [questionnaireForm]=\"matrixComponent.matrixForm\"\n ></sl-input>\n </ng-template>\n </sl-matrix-questions>\n <sl-ques-remarks\n [question]=\"question\"\n *ngIf=\"question.showRemarks\"\n ></sl-ques-remarks>\n <sl-attachment\n [data]=\"{\n submissionId: qService.getSubmissionId(),\n files: question.fileName\n }\"\n *ngIf=\"question.file\"\n ></sl-attachment>\n <sl-alert-modal *ngIf=\"dimmerIndex == qi && question?.hint\" [isDimmed]=\"isDimmed\" [hint]=\"question?.hint\" (closeHintEmitter)=\"closeHint()\"></sl-alert-modal>\n </div>\n </div>\n </div>\n</div>\n", styles: [".section-header-style{font-size:large;font-weight:700;color:green!important}.help{font-size:30px;z-index:557;margin-right:15px;position:absolute;color:gray}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextInputComponent, selector: "sl-text-input", inputs: ["questionnaireForm", "question"] }, { kind: "component", type: DateInputComponent, selector: "sl-date-input", inputs: ["questionnaireForm", "question", "autoCaptureText"] }, { kind: "component", type: NumberInputComponent, selector: "sl-number-input", inputs: ["questionnaireForm", "question"] }, { kind: "component", type: RangeInputComponent, selector: "sl-range-input", inputs: ["questionnaireForm", "question"] }, { kind: "component", type: RadioInputComponent, selector: "sl-radio-input", inputs: ["options", "questionnaireForm", "question"], outputs: ["dependentParent"] }, { kind: "component", type: CheckboxInputComponent, selector: "sl-checkbox-input", inputs: ["options", "questionnaireForm", "question"], outputs: ["dependentParent"] }, { kind: "component", type: QuesRemarksComponent, selector: "sl-ques-remarks", inputs: ["question"], outputs: ["saveClicked"] }, { kind: "component", type: AttachmentComponent, selector: "sl-attachment", inputs: ["data"] }, { kind: "component", type: InputComponent, selector: "sl-input", inputs: ["questions", "questionnaireForm"] }, { kind: "component", type: MatrixQuestionsComponent, selector: "sl-matrix-questions", inputs: ["questionnaireForm", "question"] }, { kind: "component", type: AlertModalComponent, selector: "sl-alert-modal", inputs: ["isDimmed", "hint"], outputs: ["closeHintEmitter"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-input', template: "<div *ngFor=\"let question of questions; let qi = index\">\n <div *ngIf=\"question?.sectionHeader && (!question.visibleIf.length || question.canDisplay == true)\">\n <h4 class=\"section-header-style\">{{question?.sectionHeader}}</h4>\n </div>\n <div\n [ngClass]=\"{\n 'ui card question-card sb--card relative9':\n question.responseType != 'pageQuestions'\n }\"\n *ngIf=\"!question.visibleIf.length || question.canDisplay == true\"\n >\n <div [ngClass]=\"{ content: question.responseType != 'pageQuestions' }\">\n <div class=\"d-flex flex-ai-flex-start flex-jc-space-between\">\n <div\n *ngFor=\"let q of question.question; let qai = index\"\n [ngClass]=\"{\n 'mb-20': q.length,\n 'valid-response': questionnaireForm?.controls[question._id]?.valid\n }\"\n >\n <div class=\"sb-h5\" *ngIf=\"q!=''\">\n {{ question.questionNumber + \" . \"}} {{ q }}\n </div>\n </div>\n <div *ngIf=\"question?.hint\">\n <i\n class=\"icon large lightbulb\"\n (click)=\"dimmerIndex = qi; isDimmed = !isDimmed\"\n ></i>\n </div>\n </div>\n <div *ngIf=\"question?.tip\" class=\"mb-10\">\n <small class=\"mb-10\">{{ question?.tip }}</small>\n </div>\n <div class=\"sbt-page-content-questionnaireFormarea'\">\n <sl-text-input\n *ngIf=\"question.responseType == reponseType.TEXT\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-text-input>\n <sl-date-input\n *ngIf=\"question.responseType == reponseType.DATE\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-date-input>\n <sl-number-input\n *ngIf=\"question.responseType == reponseType.NUMBER\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-number-input>\n <sl-range-input\n *ngIf=\"question.responseType == reponseType.SLIDER\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n ></sl-range-input>\n <sl-radio-input\n *ngIf=\"question.responseType == reponseType.RADIO\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n [options]=\"question.options\"\n (dependentParent)=\"toggleQuestion($event)\"\n ></sl-radio-input>\n <sl-checkbox-input\n *ngIf=\"question.responseType == reponseType.MULTISELECT\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n [options]=\"question.options\"\n (dependentParent)=\"toggleQuestion($event)\"\n ></sl-checkbox-input>\n <ng-container *ngIf=\"question.responseType == reponseType.PAGEQUESTIONS\">\n <sl-input\n [questionnaireForm]=\"questionnaireForm\"\n [questions]=\"question.pageQuestions\"\n ></sl-input>\n </ng-container>\n <sl-matrix-questions *ngIf=\"question.responseType == reponseType.MATRIX\"\n [questionnaireForm]=\"questionnaireForm\"\n [question]=\"question\"\n #matrixComponent>\n <ng-template #matrixTemplateRef>\n <sl-input\n [questions]=\"matrixComponent.context?.questions\"\n [questionnaireForm]=\"matrixComponent.matrixForm\"\n ></sl-input>\n </ng-template>\n </sl-matrix-questions>\n <sl-ques-remarks\n [question]=\"question\"\n *ngIf=\"question.showRemarks\"\n ></sl-ques-remarks>\n <sl-attachment\n [data]=\"{\n submissionId: qService.getSubmissionId(),\n files: question.fileName\n }\"\n *ngIf=\"question.file\"\n ></sl-attachment>\n <sl-alert-modal *ngIf=\"dimmerIndex == qi && question?.hint\" [isDimmed]=\"isDimmed\" [hint]=\"question?.hint\" (closeHintEmitter)=\"closeHint()\"></sl-alert-modal>\n </div>\n </div>\n </div>\n</div>\n", styles: [".section-header-style{font-size:large;font-weight:700;color:green!important}.help{font-size:30px;z-index:557;margin-right:15px;position:absolute;color:gray}\n"] }]
}], ctorParameters: function () { return [{ type: SlTranslateService }, { type: SlQuestionnaireService }]; }, propDecorators: { questions: [{
type: Input
}], questionnaireForm: [{
type: Input
}] } });
class PageQuestionsComponent {
constructor() { }
ngOnInit() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageQuestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PageQuestionsComponent, selector: "sl-page-questions", inputs: { questionnaireForm: "questionnaireForm", question: "question" }, ngImport: i0, template: "<sl-input\n [questions]=\"question.pageQuestions\"\n [questionnaireForm]=\"questionnaireForm\"\n></sl-input>\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "sl-input", inputs: ["questions", "questionnaireForm"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PageQuestionsComponent, decorators: [{
type: Component,
args: [{ selector: 'sl-page-questions', template: "<sl-input\n [questions]=\"question.pageQuestions\"\n [questionnaireForm]=\"questionnaireForm\"\n></sl-input>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { questionnaireForm: [{
type: Input
}], question: [{
type: Input
}] } });
class SlQuestionnaireModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlQuestionnaireModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SlQuestionnaireModule, declarations: [TextInputComponent,
DateInputComponent,
NumberInputComponent,
RangeInputComponent,
RadioInputComponent,
CheckboxInputComponent,
QuesRemarksComponent,
AttachmentComponent,
InputComponent,
PageQuestionsComponent,
MatrixQuestionsComponent,
AlertModalComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, SuiModule, NgxSliderModule], exports: [TextInputComponent,
DateInputComponent,
NumberInputComponent,
RangeInputComponent,
RadioInputComponent,
CheckboxInputComponent,
QuesRemarksComponent,
AttachmentComponent,
InputComponent,
PageQuestionsComponent,
MatrixQuestionsComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlQuestionnaireModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, SuiModule, NgxSliderModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlQuestionnaireModule, decorators: [{
type: NgModule,
args: [{
declarations: [
TextInputComponent,
DateInputComponent,
NumberInputComponent,
RangeInputComponent,
RadioInputComponent,
CheckboxInputComponent,
QuesRemarksComponent,
AttachmentComponent,
InputComponent,
PageQuestionsComponent,
MatrixQuestionsComponent,
AlertModalComponent
],
imports: [CommonModule, FormsModule, ReactiveFormsModule, SuiModule, NgxSliderModule],
exports: [
TextInputComponent,
DateInputComponent,
NumberInputComponent,
RangeInputComponent,
RadioInputComponent,
CheckboxInputComponent,
QuesRemarksComponent,
AttachmentComponent,
InputComponent,
PageQuestionsComponent,
MatrixQuestionsComponent
],
}]
}] });
/*
* Public API Surface of sl-questionnaire
*/
/**
* Generated bundle index. Do not edit.
*/
export { AttachmentComponent, CheckboxInputComponent, DateInputComponent, InputComponent, MatrixQuestionsComponent, NumberInputComponent, PageQuestionsComponent, QuesRemarksComponent, RadioInputComponent, RangeInputComponent, ResponseType, SlQuestionnaireModule, SlQuestionnaireService, SlTranslateService, SlUtilsAbstract, SlUtilsService, TextInputComponent };
//# sourceMappingURL=shikshalokam-sl-questionnaire.mjs.map