import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "../../../formgroup/cs-radio/cs-radio.component";
import * as i4 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i5 from "../../../ui-kit/popover/popover.component";
import * as i6 from "../../../ui-kit/popover/popover.directive";
export class CheckpointsPolicyQuestionsComponent {
    set checkpointDetails(value) {
        this.checkPointQuestions = value;
        if (this.checkPointQuestions.length) {
            this.checkPointQuestions.forEach((element, index) => {
                const answerIndex = element?.answers.indexOf(element?.ranswer);
                if (answerIndex > -1 && element.ranswer.trim().length > 0) {
                    this.rightAnswerIndex[index] = answerIndex;
                }
            });
        }
    }
    constructor() {
        this.checkPointQuestions = [];
        this.changeMax = new EventEmitter();
        this.requiredPoint = 0;
        this.requiredPointChange = new EventEmitter();
        this.saveValidQuestions = new EventEmitter();
        this.activeQuestionIndex = 0;
        this.errorTracker = [];
        this.rightAnswerIndex = [];
    }
    ngOnInit() { }
    /**
     * Changes active question index
     * @param index
     */
    changeActiveQuestion(index) {
        this.activeQuestionIndex = index;
    }
    cloneQuestion(index, isBlank) {
        if (isBlank === false) {
            const COPY_ARR = JSON.parse(JSON.stringify(this.checkPointQuestions[index]));
            this.checkPointQuestions.splice(index + 1, 0, COPY_ARR);
        }
        if (isBlank === true) {
            const QUESTION = {
                ranswer: '',
                question: '',
                answers: ['', ''],
            };
            this.checkPointQuestions.splice(index + 1, 0, QUESTION);
        }
        this.changeActiveQuestion(index + 1);
        this.requiredPointChange.emit(this.requiredPoint + 1);
        //this.changeMax.emit(this.checkPointQuestions.length)
    }
    addOption(questionIndex, optionIndex) {
        this.checkPointQuestions[questionIndex].answers.splice(optionIndex + 1, 0, '');
        this.focusAnOption(questionIndex, optionIndex + 1);
    }
    deleteOption(questionIndex, optionIndex) {
        this.checkPointQuestions[questionIndex].answers.splice(optionIndex, 1);
        this.focusAnOption(questionIndex, optionIndex - 1);
    }
    focusAnOption(questionIndex, optionIndex) {
        setTimeout(() => {
            const EL = document.getElementById('option' + '-' + questionIndex + '' + optionIndex);
            if (EL) {
                EL.focus();
            }
        }, 10);
    }
    deleteOnBackspace(questionIndex, optionIndex) {
        if (this.checkPointQuestions[questionIndex].answers?.length > 2 &&
            this.checkPointQuestions[questionIndex].answers[optionIndex].trim()
                .length === 0) {
            this.deleteOption(questionIndex, optionIndex);
        }
    }
    deleteQuestion(questionIndex) {
        this.checkPointQuestions.splice(questionIndex, 1);
        if (this.checkPointQuestions.length === 0) {
            const QUESTION = {
                ranswer: '',
                question: '',
                answers: ['', ''],
            };
            this.checkPointQuestions.push(QUESTION);
            this.requiredPoint = 1;
        }
        //this.changeMax.emit(this.checkPointQuestions.length)
        this.requiredPointChange.emit(this.requiredPoint - 1);
    }
    selectRightAnswer(evt, index, answerIndex) {
        if (evt) {
            this.checkPointQuestions[index].ranswer =
                this.checkPointQuestions[index][answerIndex];
            this.rightAnswerIndex[index] = answerIndex;
            this.reValidate(index);
        }
    }
    reValidate(questionIndex) {
        if (this.errorTracker[questionIndex]) {
            this.validateForm();
        }
    }
    async saveCheckPoint() {
        const validStatus = await this.validateForm();
        if (validStatus) {
            this.saveValidQuestions.emit(this.checkPointQuestions);
        }
    }
    mapRightAnswers() {
        this.checkPointQuestions.forEach((element, index) => {
            element.ranswer = element.answers[this.rightAnswerIndex[index]] ?? '';
        });
    }
    async validateForm() {
        await this.mapRightAnswers();
        this.errorTracker = [];
        await this.checkPointQuestions.forEach((element, index) => {
            if (element.question.trim().length === 0) {
                this.errorTracker[index] = {
                    type: 'QUESTION',
                    message: 'Please add a question.',
                };
            }
            else {
                if (element.answers.length >= 2) {
                    if (this.isOptionValid(element.answers) === false) {
                        this.errorTracker[index] = {
                            type: 'OPTION',
                            message: 'You need to complete all the answer options.',
                        };
                    }
                    else {
                        if (this.checkDuplicate(element?.answers) === true) {
                            this.errorTracker[index] = {
                                type: 'OPTION',
                                message: 'Two options cannot have same title.',
                            };
                        }
                        else {
                            if (element?.ranswer?.length === 0) {
                                this.errorTracker[index] = {
                                    type: 'OPTION',
                                    message: 'Select the correct answer choice for this question.',
                                };
                            }
                        }
                    }
                }
            }
        });
        return this.errorTracker.length > 0 ? false : true;
    }
    isOptionValid(options) {
        if (options.length ===
            options.filter((ele) => ele.trim().length > 0).length) {
            return true;
        }
        else {
            return false;
        }
    }
    checkDuplicate(arr) {
        let result = false;
        // create a Set with array elements
        const s = new Set(arr);
        // compare the size of array and Set
        if (arr.length !== s.size) {
            result = true;
        }
        return result;
    }
    trackByFn(index, item) {
        return index;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointsPolicyQuestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckpointsPolicyQuestionsComponent, selector: "app-checkpoints-policy-questions", inputs: { requiredPoint: "requiredPoint", checkpointDetails: "checkpointDetails" }, outputs: { changeMax: "changeMax", requiredPointChange: "requiredPointChange", saveValidQuestions: "saveValidQuestions" }, ngImport: i0, template: "<div class=\"checkpoints-policy-questions\">\n    <!-- <div class=\"checkpoints-questions-blocks instruction\">\n        <div class=\"container\">\n            <h3 class=\"question\">\n                <span class=\"counter\"><i class=\"icons\">&#xe932;</i></span>\n                <span class=\"text\">Add instruction</span>\n            </h3>\n        </div>\n    </div> -->\n    <!-- <small>\n      <pre>\n        {{checkPointQuestions |json}}\n      </pre>\n    </small> -->\n    <div class=\"checkpoints-policy-questions-top vx-d-flex vx-align-center vx-justify-between vx-pb-2 vx-mb-2\">\n        <div class=\"vx-d-flex vx-align-center\">\n            <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">TOTAL POINTS</span>\n            <span class=\"vx-fs-11 vx-paragraph-txt vx-mr-1\">(Each question carries 1 point)</span>\n            <div class=\"question-count vx-fs-12 vx-paragraph-txt vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center\">{{checkPointQuestions.length}}</div>\n        </div>\n        <div class=\"vx-d-flex vx-align-center\">\n            <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">POINTS REQUIRED TO ATTEST: <span class=\"vx-fs-14 vx-txt-red\">*</span></span>\n            <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-2\" appPopover (click)=\"policyPassing.popover()\" placement=\"right\">&#xe91f;</i>\n            <input class=\"attestInput\"  type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"checkPointQuestions.length\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n            oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n            <app-popover #policyPassing [dontCloseonClick]=\"true\">\n                <div class=\"infoPopup\">\n                 Every correct answer choice carries 1 point. You can specify the total number of questions that the reader must answer correctly in order to attest the policy.\n                </div>\n            </app-popover>\n        </div>\n    </div>\n    <ng-container *ngFor=\"let questionValue of checkPointQuestions; let questionIndex = index\">\n      <!-- [class.error]=\"questionIndex === 0\" -->\n        <div class=\"checkpoints-policy-questions-blocks\" [appScrollInView]=\"activeQuestionIndex === questionIndex\"   [class.active]=\"activeQuestionIndex === questionIndex\" (click)=\"changeActiveQuestion(questionIndex)\">\n            <div class=\"container\">\n                <h3 class=\"question\" >\n                    <span class=\"counter\">{{questionIndex + 1}}.\n                      <!-- <span class=\"required\">*</span> -->\n                    </span>\n                    <input [appConditionalFocus]=\"activeQuestionIndex === questionIndex\" [(ngModel)]=\"questionValue.question\" class=\"text\" type=\"text\"\n                        placeholder=\"Type your question here\" (ngModelChange)=\"reValidate(questionIndex)\"\n                       >\n                </h3>\n                <p class=\"error-message\" *ngIf=\"errorTracker[questionIndex]?.type === 'QUESTION'\">{{errorTracker[questionIndex]?.message}}</p>\n                <ul class=\"list\">\n\n                    <li *ngFor=\"let option of questionValue.answers; let optionIndex = index;trackBy:trackByFn\">\n                        <app-cs-radio  [readonly]=\"option?.trim()?.length === 0\" [name]=\"'option-' + '' + questionIndex + '' + optionIndex\" [checked]=\"rightAnswerIndex[questionIndex] === optionIndex ? true  :false \"\n                        (checkedEvent)=\"selectRightAnswer($event,questionIndex,optionIndex)\" [oneLine]=\"true\" [id]=\"optionIndex + 'wee'\" >\n                          <input  [id]=\"'option-' + '' + questionIndex + '' + optionIndex\" (ngModelChange)=\"reValidate(questionIndex)\"\n                          (keydown.enter)=\"addOption(questionIndex,optionIndex)\"\n                          (keydown.backspace)=\"deleteOnBackspace(questionIndex,optionIndex)\"\n                          placeholder=\"Option\" [(ngModel)]=\"questionValue.answers[optionIndex]\" type=\"text\" placeholder=\"Option\" />\n                        </app-cs-radio>\n                        <button *ngIf=\"questionValue?.answers?.length > 2 && activeQuestionIndex === questionIndex\" (click)=\"deleteOption(questionIndex,optionIndex)\" class=\"close\" ><i class=\"icons\">&#xe90d;</i></button>\n                    </li>\n\n                    <li class=\"add-new\" *ngIf=\"activeQuestionIndex === questionIndex\">\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\">\n                            <input type=\"text\" readonly placeholder=\"Add more option\"\n                                (click)=\"addOption(questionIndex,questionValue?.answers?.length-1)\">\n                        </app-cs-radio>\n                    </li>\n                </ul>\n                <p class=\"error-message\" *ngIf=\"errorTracker[questionIndex]?.type === 'OPTION'\">{{errorTracker[questionIndex]?.message}}</p>\n            </div>\n\n            <div class=\"footer\">\n                <div class=\"left\">\n                    <!-- <app-cs-checkbox>Is required</app-cs-checkbox> -->\n                </div>\n                <div class=\"right\">\n                    <ul>\n                        <li>\n                            <button (click)=\"cloneQuestion(questionIndex,true);$event.stopPropagation();\" [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li>\n                        <li>\n                            <button  (click)=\"deleteQuestion(questionIndex)\" class=\"delete\" [appTooltip]=\"'Delete'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\n                                <i class=\"icons\">&#xe923;</i>\n                            </button>\n                        </li>\n                        <li>\n                            <button (click)=\"cloneQuestion(questionIndex,false);$event.stopPropagation();\" [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <button class=\"btn-add-new vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center vx-justify-center\" type=\"button\" (click)=\"cloneQuestion(checkPointQuestions.length -1,true);$event.stopPropagation();\">+ ADD A NEW QUESTION</button>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .checkpoints-policy-questions-top{background:#fff;border-bottom:1px solid #dbdbdb;position:sticky;top:0;z-index:1}::ng-deep .checkpoints-policy-questions-top:before{background:#fff;content:\"\";position:absolute;top:0;left:-1rem;width:1rem;height:100%}::ng-deep .checkpoints-policy-questions-top:after{background:#fff;content:\"\";position:absolute;top:0;right:-1rem;width:1rem;height:100%}::ng-deep .checkpoints-policy-questions-top .question-count{background:#f1f1f1;border-radius:.125rem;min-width:1.5rem;height:1.5rem}::ng-deep .checkpoints-policy-questions-top .info{cursor:pointer}::ng-deep .checkpoints-policy-questions-top input[type=number]{-moz-appearance:textfield;border:1px solid #dbdbdb;border-radius:.125rem;color:#747576;font-size:12px;min-width:2.25rem;width:2.25rem;height:1.5rem;text-align:center;margin-left:.25rem}::ng-deep .checkpoints-policy-questions-top input[type=number]:focus{outline:none}::ng-deep .checkpoints-policy-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-policy-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-policy-questions-blocks .question{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;position:relative;display:flex;align-items:flex-start;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#dbdbdb;position:absolute}::ng-deep .checkpoints-policy-questions-blocks .question span.counter{display:inline-block;font-weight:600;width:auto;padding:0 0 0 8px;position:absolute;left:-41px;top:1px;line-height:25px}::ng-deep .checkpoints-policy-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-policy-questions-blocks .question input.text{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;width:calc(100% - 28px);border:none;border-bottom:1px solid transparent;outline:none;padding-left:0;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-policy-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input{width:100%;border:1px solid #DBDBDB;height:36px;line-height:24px;border-radius:4px;padding:4px 8px 4px 28px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-policy-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-policy-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;inset:0;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks .file-upload span{background:#1e5dd3;height:32px;border-radius:4px;display:flex;color:#fff;font-weight:400;font-size:11px;padding:8px 12px;justify-content:flex-starts;cursor:pointer;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .checkpoints-policy-questions-blocks .footer{background:#f1f1f180;display:none;border-top:1px solid #DBDBDB;justify-content:space-between;padding:0 0 0 8px;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox label.checkbox-item span.value{white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:500}::ng-deep .checkpoints-policy-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #DBDBDB;padding:0}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li button{width:48px;height:36px;font-size:15px;color:#1e5dd3;outline:none;display:flex;align-items:center;justify-content:center;background:transparent;border:none}::ng-deep .checkpoints-policy-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-policy-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.radio{position:absolute!important;top:9px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.value{padding:8px 8px 8px 40px;width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid #BCBCBC;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .checkpoints-policy-questions-blocks ul.list li input,::ng-deep .checkpoints-policy-questions-blocks ul.list li span{color:#161b2f;font-size:14px;line-height:20px;display:block;border:none;outline:none;margin-left:0!important;margin:0;padding:0}::ng-deep .checkpoints-policy-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-policy-questions-blocks ul.list li button.close{font-size:12px;color:#9c1d22;padding:8px;cursor:pointer;background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks.active{border:1px solid #1E5DD3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-policy-questions-blocks.active .question:before{background:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item span.value{width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid transparent;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#eefcf0;border:1px solid #34AA44}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input{cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction{border:1px solid #DBDBDB;margin-bottom:12px}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text vcomply-editor{cursor:text}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled{background:#f8f8f8;max-height:100px;overflow:auto}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-policy-questions .btn-add-new{background:transparent;border-radius:.25rem;border:1px dashed #1E5DD3;margin:1.25rem 0 0;width:100%;height:2.5rem}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:0;margin-bottom:0}.infoPopup{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:8px;font-size:12px;color:#6e717e}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i5.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1.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: CheckpointsPolicyQuestionsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-checkpoints-policy-questions', template: "<div class=\"checkpoints-policy-questions\">\n    <!-- <div class=\"checkpoints-questions-blocks instruction\">\n        <div class=\"container\">\n            <h3 class=\"question\">\n                <span class=\"counter\"><i class=\"icons\">&#xe932;</i></span>\n                <span class=\"text\">Add instruction</span>\n            </h3>\n        </div>\n    </div> -->\n    <!-- <small>\n      <pre>\n        {{checkPointQuestions |json}}\n      </pre>\n    </small> -->\n    <div class=\"checkpoints-policy-questions-top vx-d-flex vx-align-center vx-justify-between vx-pb-2 vx-mb-2\">\n        <div class=\"vx-d-flex vx-align-center\">\n            <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-1\">TOTAL POINTS</span>\n            <span class=\"vx-fs-11 vx-paragraph-txt vx-mr-1\">(Each question carries 1 point)</span>\n            <div class=\"question-count vx-fs-12 vx-paragraph-txt vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center\">{{checkPointQuestions.length}}</div>\n        </div>\n        <div class=\"vx-d-flex vx-align-center\">\n            <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">POINTS REQUIRED TO ATTEST: <span class=\"vx-fs-14 vx-txt-red\">*</span></span>\n            <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-2\" appPopover (click)=\"policyPassing.popover()\" placement=\"right\">&#xe91f;</i>\n            <input class=\"attestInput\"  type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"checkPointQuestions.length\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n            oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n            <app-popover #policyPassing [dontCloseonClick]=\"true\">\n                <div class=\"infoPopup\">\n                 Every correct answer choice carries 1 point. You can specify the total number of questions that the reader must answer correctly in order to attest the policy.\n                </div>\n            </app-popover>\n        </div>\n    </div>\n    <ng-container *ngFor=\"let questionValue of checkPointQuestions; let questionIndex = index\">\n      <!-- [class.error]=\"questionIndex === 0\" -->\n        <div class=\"checkpoints-policy-questions-blocks\" [appScrollInView]=\"activeQuestionIndex === questionIndex\"   [class.active]=\"activeQuestionIndex === questionIndex\" (click)=\"changeActiveQuestion(questionIndex)\">\n            <div class=\"container\">\n                <h3 class=\"question\" >\n                    <span class=\"counter\">{{questionIndex + 1}}.\n                      <!-- <span class=\"required\">*</span> -->\n                    </span>\n                    <input [appConditionalFocus]=\"activeQuestionIndex === questionIndex\" [(ngModel)]=\"questionValue.question\" class=\"text\" type=\"text\"\n                        placeholder=\"Type your question here\" (ngModelChange)=\"reValidate(questionIndex)\"\n                       >\n                </h3>\n                <p class=\"error-message\" *ngIf=\"errorTracker[questionIndex]?.type === 'QUESTION'\">{{errorTracker[questionIndex]?.message}}</p>\n                <ul class=\"list\">\n\n                    <li *ngFor=\"let option of questionValue.answers; let optionIndex = index;trackBy:trackByFn\">\n                        <app-cs-radio  [readonly]=\"option?.trim()?.length === 0\" [name]=\"'option-' + '' + questionIndex + '' + optionIndex\" [checked]=\"rightAnswerIndex[questionIndex] === optionIndex ? true  :false \"\n                        (checkedEvent)=\"selectRightAnswer($event,questionIndex,optionIndex)\" [oneLine]=\"true\" [id]=\"optionIndex + 'wee'\" >\n                          <input  [id]=\"'option-' + '' + questionIndex + '' + optionIndex\" (ngModelChange)=\"reValidate(questionIndex)\"\n                          (keydown.enter)=\"addOption(questionIndex,optionIndex)\"\n                          (keydown.backspace)=\"deleteOnBackspace(questionIndex,optionIndex)\"\n                          placeholder=\"Option\" [(ngModel)]=\"questionValue.answers[optionIndex]\" type=\"text\" placeholder=\"Option\" />\n                        </app-cs-radio>\n                        <button *ngIf=\"questionValue?.answers?.length > 2 && activeQuestionIndex === questionIndex\" (click)=\"deleteOption(questionIndex,optionIndex)\" class=\"close\" ><i class=\"icons\">&#xe90d;</i></button>\n                    </li>\n\n                    <li class=\"add-new\" *ngIf=\"activeQuestionIndex === questionIndex\">\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\">\n                            <input type=\"text\" readonly placeholder=\"Add more option\"\n                                (click)=\"addOption(questionIndex,questionValue?.answers?.length-1)\">\n                        </app-cs-radio>\n                    </li>\n                </ul>\n                <p class=\"error-message\" *ngIf=\"errorTracker[questionIndex]?.type === 'OPTION'\">{{errorTracker[questionIndex]?.message}}</p>\n            </div>\n\n            <div class=\"footer\">\n                <div class=\"left\">\n                    <!-- <app-cs-checkbox>Is required</app-cs-checkbox> -->\n                </div>\n                <div class=\"right\">\n                    <ul>\n                        <li>\n                            <button (click)=\"cloneQuestion(questionIndex,true);$event.stopPropagation();\" [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li>\n                        <li>\n                            <button  (click)=\"deleteQuestion(questionIndex)\" class=\"delete\" [appTooltip]=\"'Delete'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\n                                <i class=\"icons\">&#xe923;</i>\n                            </button>\n                        </li>\n                        <li>\n                            <button (click)=\"cloneQuestion(questionIndex,false);$event.stopPropagation();\" [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n    <button class=\"btn-add-new vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center vx-justify-center\" type=\"button\" (click)=\"cloneQuestion(checkPointQuestions.length -1,true);$event.stopPropagation();\">+ ADD A NEW QUESTION</button>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .checkpoints-policy-questions-top{background:#fff;border-bottom:1px solid #dbdbdb;position:sticky;top:0;z-index:1}::ng-deep .checkpoints-policy-questions-top:before{background:#fff;content:\"\";position:absolute;top:0;left:-1rem;width:1rem;height:100%}::ng-deep .checkpoints-policy-questions-top:after{background:#fff;content:\"\";position:absolute;top:0;right:-1rem;width:1rem;height:100%}::ng-deep .checkpoints-policy-questions-top .question-count{background:#f1f1f1;border-radius:.125rem;min-width:1.5rem;height:1.5rem}::ng-deep .checkpoints-policy-questions-top .info{cursor:pointer}::ng-deep .checkpoints-policy-questions-top input[type=number]{-moz-appearance:textfield;border:1px solid #dbdbdb;border-radius:.125rem;color:#747576;font-size:12px;min-width:2.25rem;width:2.25rem;height:1.5rem;text-align:center;margin-left:.25rem}::ng-deep .checkpoints-policy-questions-top input[type=number]:focus{outline:none}::ng-deep .checkpoints-policy-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-policy-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-policy-questions-blocks .question{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;position:relative;display:flex;align-items:flex-start;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#dbdbdb;position:absolute}::ng-deep .checkpoints-policy-questions-blocks .question span.counter{display:inline-block;font-weight:600;width:auto;padding:0 0 0 8px;position:absolute;left:-41px;top:1px;line-height:25px}::ng-deep .checkpoints-policy-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-policy-questions-blocks .question input.text{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;width:calc(100% - 28px);border:none;border-bottom:1px solid transparent;outline:none;padding-left:0;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-policy-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input{width:100%;border:1px solid #DBDBDB;height:36px;line-height:24px;border-radius:4px;padding:4px 8px 4px 28px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-policy-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-policy-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;inset:0;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks .file-upload span{background:#1e5dd3;height:32px;border-radius:4px;display:flex;color:#fff;font-weight:400;font-size:11px;padding:8px 12px;justify-content:flex-starts;cursor:pointer;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .checkpoints-policy-questions-blocks .footer{background:#f1f1f180;display:none;border-top:1px solid #DBDBDB;justify-content:space-between;padding:0 0 0 8px;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox label.checkbox-item span.value{white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:500}::ng-deep .checkpoints-policy-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #DBDBDB;padding:0}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li button{width:48px;height:36px;font-size:15px;color:#1e5dd3;outline:none;display:flex;align-items:center;justify-content:center;background:transparent;border:none}::ng-deep .checkpoints-policy-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-policy-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.radio{position:absolute!important;top:9px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.value{padding:8px 8px 8px 40px;width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid #BCBCBC;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .checkpoints-policy-questions-blocks ul.list li input,::ng-deep .checkpoints-policy-questions-blocks ul.list li span{color:#161b2f;font-size:14px;line-height:20px;display:block;border:none;outline:none;margin-left:0!important;margin:0;padding:0}::ng-deep .checkpoints-policy-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-policy-questions-blocks ul.list li button.close{font-size:12px;color:#9c1d22;padding:8px;cursor:pointer;background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks.active{border:1px solid #1E5DD3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-policy-questions-blocks.active .question:before{background:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item span.value{width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid transparent;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#eefcf0;border:1px solid #34AA44}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input{cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction{border:1px solid #DBDBDB;margin-bottom:12px}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text vcomply-editor{cursor:text}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled{background:#f8f8f8;max-height:100px;overflow:auto}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-policy-questions .btn-add-new{background:transparent;border-radius:.25rem;border:1px dashed #1E5DD3;margin:1.25rem 0 0;width:100%;height:2.5rem}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:0;margin-bottom:0}.infoPopup{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:8px;font-size:12px;color:#6e717e}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { changeMax: [{
                type: Output
            }], requiredPoint: [{
                type: Input
            }], requiredPointChange: [{
                type: Output
            }], checkpointDetails: [{
                type: Input
            }], saveValidQuestions: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 