@shikshalokam/sl-questionnaire
Version:
Library to integrate questionnaire in SL Projects
75 lines • 13 kB
JavaScript
import { Component, Input } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "../services/sl-questionnaire.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular-slider/ngx-slider";
export 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: i1.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.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: i1.SlQuestionnaireService }]; }, propDecorators: { questionnaireForm: [{
type: Input
}], question: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFuZ2UtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2wtcXVlc3Rpb25uYWlyZS9zcmMvbGliL3JhbmdlLWlucHV0L3JhbmdlLWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NsLXF1ZXN0aW9ubmFpcmUvc3JjL2xpYi9yYW5nZS1pbnB1dC9yYW5nZS1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBQW9CLGtCQUFrQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7OztBQVV0RSxNQUFNLE9BQU8sbUJBQW1CO0lBUzlCLFlBQW1CLFFBQWdDO1FBQWhDLGFBQVEsR0FBUixRQUFRLENBQXdCO1FBTjVDLFlBQU8sR0FBUztZQUNyQixJQUFJLEVBQUMsQ0FBQztZQUNOLGlCQUFpQixFQUFDLElBQUk7WUFDdEIsZUFBZSxFQUFDLElBQUk7WUFDcEIsZ0JBQWdCLEVBQUMsSUFBSTtTQUN0QixDQUFDO0lBQ29ELENBQUM7SUFFdkQsUUFBUTtRQUNOLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsaUJBQWlCLENBQUMsVUFBVSxDQUMvQixJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsRUFDakIsSUFBSSxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUU7Z0JBQ3ZELElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7YUFDdEMsQ0FBQyxDQUNILENBQUM7WUFDRixJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVM7Z0JBQy9DLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVM7Z0JBQ3pCLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDZixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7UUFDN0UsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQTtRQUM5QyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQTtRQUUvQyxVQUFVLENBQUMsR0FBRSxFQUFFO1lBQ2IsSUFBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBQztnQkFDckIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQy9FO2lCQUFJO2dCQUNILElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBZ0IsQ0FBQyxRQUFRLEVBQUM7b0JBQ25ELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7aUJBQ2xFO2FBQ0Y7UUFDSCxDQUFDLEVBQUMsR0FBRyxDQUFDLENBQUM7SUFDVCxDQUFDO0lBRUQsUUFBUSxDQUFDLENBQUM7UUFDUixJQUFJLEtBQUssR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUM1QixJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVELElBQUksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLGlCQUFpQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUNsRSxDQUFDO0lBRUQsSUFBSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsT0FBTyxDQUFDO0lBQ3BFLENBQUM7SUFFRCxJQUFJLEdBQUc7UUFDTCxJQUFJLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLElBQUksUUFBUSxFQUFFO1lBQy9DLE9BQU8sSUFBSSxDQUFDO1NBQ2I7UUFDRCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQztJQUN0QyxDQUFDO0lBRUQsSUFBSSxHQUFHO1FBQ0wsSUFBSSxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxJQUFJLFFBQVEsRUFBRTtZQUMvQyxPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUM7SUFDdEMsQ0FBQzsrR0FoRVUsbUJBQW1CO21HQUFuQixtQkFBbUIsZ0lDWGhDLHFnQkFxQkE7OzRGRFZhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSxnQkFBZ0I7NkdBS2pCLGlCQUFpQjtzQkFBekIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVbnR5cGVkRm9ybUdyb3VwLCBVbnR5cGVkRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBPcHRpb25zIH0gZnJvbSAnQGFuZ3VsYXItc2xpZGVyL25neC1zbGlkZXInO1xuaW1wb3J0IHsgUXVlc3Rpb24sIFZhbGlkYXRpb24gfSBmcm9tICcuLi9pbnRlcmZhY2VzL3F1ZXN0aW9ubmFpcmUudHlwZSc7XG5pbXBvcnQgeyBTbFF1ZXN0aW9ubmFpcmVTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvc2wtcXVlc3Rpb25uYWlyZS5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2wtcmFuZ2UtaW5wdXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcmFuZ2UtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9yYW5nZS1pbnB1dC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBSYW5nZUlucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgcXVlc3Rpb25uYWlyZUZvcm06IFVudHlwZWRGb3JtR3JvdXA7XG4gIEBJbnB1dCgpIHF1ZXN0aW9uOiBRdWVzdGlvbjtcbiAgcHVibGljIG9wdGlvbnM6T3B0aW9ucz17XG4gICAgc3RlcDoxLFxuICAgIGhpZGVQb2ludGVyTGFiZWxzOnRydWUsXG4gICAgaGlkZUxpbWl0TGFiZWxzOnRydWUsXG4gICAgc2hvd1NlbGVjdGlvbkJhcjp0cnVlXG4gIH07XG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBxU2VydmljZTogU2xRdWVzdGlvbm5haXJlU2VydmljZSkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMucXVlc3Rpb25uYWlyZUZvcm0uYWRkQ29udHJvbChcbiAgICAgICAgdGhpcy5xdWVzdGlvbi5faWQsXG4gICAgICAgIG5ldyBVbnR5cGVkRm9ybUNvbnRyb2wodGhpcy5xdWVzdGlvbi52YWx1ZSB8fCArdGhpcy5taW4sIFtcbiAgICAgICAgICB0aGlzLnFTZXJ2aWNlLnZhbGlkYXRlKHRoaXMucXVlc3Rpb24pLFxuICAgICAgICBdKVxuICAgICAgKTtcbiAgICAgIHRoaXMucXVlc3Rpb24uc3RhcnRUaW1lID0gdGhpcy5xdWVzdGlvbi5zdGFydFRpbWVcbiAgICAgICAgPyB0aGlzLnF1ZXN0aW9uLnN0YXJ0VGltZVxuICAgICAgICA6IERhdGUubm93KCk7XG4gICAgICB0aGlzLnF1ZXN0aW9uLnZhbHVlID0gdGhpcy5xdWVzdGlvbi52YWx1ZSA/IHRoaXMucXVlc3Rpb24udmFsdWUgOiB0aGlzLm1pbjtcbiAgICB9KTtcbiAgICB0aGlzLm1heCAmJiAodGhpcy5vcHRpb25zWydjZWlsJ10gPSArdGhpcy5tYXgpXG4gICAgdGhpcy5taW4gJiYgKHRoaXMub3B0aW9uc1snZmxvb3InXSA9ICt0aGlzLm1pbilcblxuICAgIHNldFRpbWVvdXQoKCk9PntcbiAgICAgIGlmKHRoaXMucXVlc3Rpb24udmFsdWUpe1xuICAgICAgICB0aGlzLnF1ZXN0aW9ubmFpcmVGb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24uX2lkXS5yZXNldCh0aGlzLnF1ZXN0aW9uLnZhbHVlKTtcbiAgICAgIH1lbHNle1xuICAgICAgICBpZigoKHRoaXMucXVlc3Rpb24udmFsaWRhdGlvbikgYXMgVmFsaWRhdGlvbikucmVxdWlyZWQpe1xuICAgICAgICAgICAgdGhpcy5xdWVzdGlvbm5haXJlRm9ybS5jb250cm9sc1t0aGlzLnF1ZXN0aW9uLl9pZF0ucmVzZXQobnVsbCk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LDEwMCk7XG4gIH1cblxuICBvbkNoYW5nZShlKSB7XG4gICAgbGV0IHZhbHVlID0gZS52YWx1ZTtcbiAgICB0aGlzLnF1ZXN0aW9uLnZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5xdWVzdGlvbi5lbmRUaW1lID0gRGF0ZS5ub3coKTtcbiAgfVxuXG4gIGdldCBpc1ZhbGlkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLnF1ZXN0aW9ubmFpcmVGb3JtLmNvbnRyb2xzW3RoaXMucXVlc3Rpb24uX2lkXS52YWxpZDtcbiAgfVxuXG4gIGdldCBpc1RvdWNoZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMucXVlc3Rpb25uYWlyZUZvcm0uY29udHJvbHNbdGhpcy5xdWVzdGlvbi5faWRdLnRvdWNoZWQ7XG4gIH1cblxuICBnZXQgbWluKCkge1xuICAgIGlmICh0eXBlb2YgdGhpcy5xdWVzdGlvbi52YWxpZGF0aW9uID09ICdzdHJpbmcnKSB7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG4gICAgcmV0dXJuIHRoaXMucXVlc3Rpb24udmFsaWRhdGlvbi5taW47XG4gIH1cblxuICBnZXQgbWF4KCkge1xuICAgIGlmICh0eXBlb2YgdGhpcy5xdWVzdGlvbi52YWxpZGF0aW9uID09ICdzdHJpbmcnKSB7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG4gICAgcmV0dXJuIHRoaXMucXVlc3Rpb24udmFsaWRhdGlvbi5tYXg7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJcbiAgICBkLWZsZXhcbiAgICBmbGV4LWFpLWNlbnRlciBmbGV4LWRjXG4gICAgbXQtMzBcbiAgICBuZy1kaXJ0eSBuZy1pbnZhbGlkIG5nLXRvdWNoZWRcbiAgICByYW5nZS13cmFwXG4gIFwiXG4gIFtmb3JtR3JvdXBdPVwicXVlc3Rpb25uYWlyZUZvcm1cIlxuICAqbmdJZj1cInF1ZXN0aW9ubmFpcmVGb3JtPy5jb250YWlucyhxdWVzdGlvbi5faWQpXCJcbj5cbiAgPGRpdiBjbGFzcz1cInJhbmdlLXZhbHVlXCI+e3sgdGhpcy5xdWVzdGlvbi52YWx1ZSB9fTwvZGl2PlxuICBcbiAgPG5neC1zbGlkZXJcbiAgW29wdGlvbnNdPVwib3B0aW9uc1wiXG4gIFtmb3JtQ29udHJvbE5hbWVdPVwicXVlc3Rpb24/Ll9pZFwiXG4gICh1c2VyQ2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIiBcbiAgW25nQ2xhc3NdPVwiaXNWYWxpZCAmJiBpc1RvdWNoZWQgPyAnaXMtaW52YWxpZCcgOiAnaXMtdmFsaWQnXCIgXG4gIGNsYXNzPVwidy0xMDBcIj5cbjwvbmd4LXNsaWRlcj5cbjwvZGl2PlxuIl19