import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, HostListener, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../ui-kit/snack-bar/snack-bar.service";
import * as i2 from "../../../services/common.service";
import * as i3 from "@angular/forms";
import * as i4 from "@vcomply/editor";
import * as i5 from "@angular/common";
import * as i6 from "../../../formgroup/cs-checkbox/cs-checkbox.component";
import * as i7 from "../../../formgroup/cs-radio/cs-radio.component";
import * as i8 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i9 from "ng2-date-picker";
import * as i10 from "../../../ui-kit/format-html.pipe";
export class CheckpointsQuestionsComponent {
    constructor(elementRef, snackbar, commonService) {
        this.elementRef = elementRef;
        this.snackbar = snackbar;
        this.commonService = commonService;
        this.checkpointData = [];
        this.questionTypeList = [];
        this.errorIndex = -1;
        this.checkpointInstruction = '';
        this.createQuestion = new EventEmitter();
        this.deleteQuestion = new EventEmitter();
        this.copyQuestion = new EventEmitter();
        this.blankQuestion = new EventEmitter();
        this.createOption = new EventEmitter();
        this.removeOption = new EventEmitter();
        this.updateDescription = new EventEmitter();
        this.datePickerOverlay = false;
        this.activeQuestionIndex = 0;
        this.placeholder = {
            textbox: 'Type your question here [Text Box]',
            select: 'Type your question here [Select]',
            radio: 'Type your question here [Radio]',
            checkbox: 'Type your question here [CheckBox]',
            date: 'Type your question here [Date]',
            upload: 'Type your question here [Upload]',
        };
        this.description = '';
    }
    ngOnInit() { }
    saveDescription() {
        this.addInstruction = false;
        if (this.extractContent(this.checkpointInstruction) === '') {
            this.checkpointInstruction = '';
        }
        this.updateDescription.emit(this.checkpointInstruction);
    }
    extractContent(s) {
        var span = document.createElement('span');
        span.innerHTML = s;
        return (span.textContent || span.innerText)
            .replace(/&nbsp;/g, '')
            .replace(/\<br\s*[\/]?>/gi, '')
            .trim();
    }
    ngOnChanges(changes) {
        if (changes.errorIndex) {
            if (this.errorIndex >= 0) {
                this.activeQuestionIndex = this.errorIndex;
            }
        }
    }
    openDatePicker() {
        this.datePicker?.api?.open();
        this.datePickerOverlay = true;
    }
    closeDatepicker() {
        this.datePicker?.api?.close();
        this.datePickerOverlay = false;
    }
    addQuestion(type) {
        //  this.createQuestion.emit(type.type);
        // this.activeQuestionIndex = this.checkpointData.length - 1;
    }
    removeQuestion(index) {
        this.deleteQuestion.emit(index);
        this.activeQuestionIndex = index - 1;
    }
    cloneQuestion(index) {
        // this.activeQuestionIndex = index + 1;
        // this.copyQuestion.emit(index);
    }
    blankClone(type, index) {
        // this.blankQuestion.emit({type, index});
        // this.activeQuestionIndex = index + 1;
    }
    addOption(questionIndex, optionIndex, type) {
        // this.createOption.emit({questionIndex, optionIndex, type});
    }
    deleteOption(questionIndex, optionIndex, type) {
        this.removeOption.emit({ questionIndex, optionIndex, type });
    }
    deleteOnBackspace(questionIndex, optionIndex, type) {
        if (this.checkpointData[questionIndex].options[optionIndex].label.length <
            1 &&
            this.checkpointData[questionIndex].options.length > 1) {
            this.removeOption.emit({ questionIndex, optionIndex, type });
        }
    }
    documentClick(event) {
        const datePickerObject = {
            event: event,
            class: 'frequency-date',
            popup: this.datePickerPopUp,
            component: this.datePicker,
            overlay: this.datePickerOverlay,
        };
        this.commonService.handleDocumentClick(datePickerObject);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointsQuestionsComponent, deps: [{ token: i0.ElementRef }, { token: i1.SnackBarService }, { token: i2.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckpointsQuestionsComponent, selector: "app-checkpoints-questions", inputs: { checkpointData: "checkpointData", questionTypeList: "questionTypeList", errorIndex: "errorIndex", checkpointInstruction: "checkpointInstruction" }, outputs: { createQuestion: "createQuestion", deleteQuestion: "deleteQuestion", copyQuestion: "copyQuestion", blankQuestion: "blankQuestion", createOption: "createOption", removeOption: "removeOption", updateDescription: "updateDescription" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "datePickerPopUp", first: true, predicate: ["datePicker"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- <p>checkpoints-questions works!</p> -->\n<div class=\"checkpoints-questions\">\n  <div\n    class=\"checkpoints-questions-blocks instruction\"\n    [class.filled]=\"checkpointInstruction.length > 0 && !addInstruction\"\n  >\n    <div class=\"container\">\n      <h3 class=\"question\">\n        <span class=\"counter\" *ngIf=\"!addInstruction\"\n          ><i class=\"icons\">&#xe932;</i></span\n        >\n        <span\n          class=\"text\"\n          *ngIf=\"!addInstruction\"\n          [innerHTML]=\"\n            checkpointInstruction.length > 0\n              ? (checkpointInstruction | formatHtml)\n              : 'Add instruction'\n          \"\n        ></span>\n        <span class=\"text\" *ngIf=\"addInstruction && false\">\n          <vcomply-editor\n            [(ngModel)]=\"checkpointInstruction\"\n            [editorConfig]=\"{\n              mode: 'prime',\n              colorPalette: true,\n              link: true,\n              placeholder: 'Add instruction',\n              buttonName: 'SAVE',\n              id: 'checkpoint-instructions'\n            }\"\n            (comment)=\"saveDescription()\"\n          ></vcomply-editor>\n        </span>\n      </h3>\n    </div>\n  </div>\n\n  <ng-container\n    *ngFor=\"let question of checkpointData; let questionIndex = index\"\n  >\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"['textbox', 'date', 'upload'].includes(question?.type)\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ng-container\n          class=\"preview\"\n          *ngIf=\"activeQuestionIndex !== questionIndex\"\n        >\n          <label class=\"file-upload\" *ngIf=\"question.type === 'upload'\">\n            <input type=\"file\" disabled />\n            <span><i class=\"icons\">&#xe9ed;</i> Browse File</span>\n          </label>\n          <ng-container *ngIf=\"question.type === 'date'\">\n            <div class=\"date-picker\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                placeholder=\"Select date\"\n                (click)=\"\n                  openDatePicker();\n                  $event.stopPropagation();\n                  datePickerOverlay = true\n                \"\n                disabled\n                id=\"date-picker\"\n              />\n              <dp-date-picker #datePicker (click)=\"$event.stopPropagation()\">\n              </dp-date-picker>\n              <div\n                class=\"vx-overlay\"\n                (click)=\"closeDatepicker(); $event.stopPropagation()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <li>\n              <button\n                [appTooltip]=\"'Add new'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  blankClone(question.type, questionIndex);\n                  $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe915;</i>\n              </button>\n            </li>\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <li>\n              <!-- <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button> -->\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"question?.type === 'radio'\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ul class=\"list\">\n          <li *ngFor=\"let option of question?.options; let opIndex = index\">\n            <app-cs-radio\n              [oneLine]=\"true\"\n              [readonly]=\"true\"\n              [disabled]=\"activeQuestionIndex === questionIndex\"\n              ><input\n                [(ngModel)]=\"option.label\"\n                [id]=\"'radio-' + '' + questionIndex + '' + opIndex\"\n                type=\"text\"\n                placeholder=\"Option\"\n              />\n            </app-cs-radio>\n            <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\n                                class=\"icons\">&#xe90d;</i></button> -->\n          </li>\n          <!-- <li *ngIf=\"activeQuestionIndex === questionIndex && false\" class=\"add-new\">\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\">\n                            <input type=\"text\" readonly placeholder=\"Add more option\"\n                                (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\">\n                        </app-cs-radio>\n                    </li> -->\n        </ul>\n      </div>\n\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <!-- <li>\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li> -->\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <!-- <li>\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li> -->\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"question?.type === 'select'\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ul class=\"list\">\n          <li *ngFor=\"let option of question?.options; let opIndex = index\">\n            <app-cs-radio\n              [oneLine]=\"true\"\n              readonly\n              [disabled]=\"activeQuestionIndex === questionIndex\"\n            >\n              <input\n                [(ngModel)]=\"option.label\"\n                name=\"'select-' + '' + questionIndex + '' + opIndex\"\n                (keydown.enter)=\"\n                  addOption(questionIndex, opIndex, question.type)\n                \"\n                (keydown.backspace)=\"\n                  deleteOnBackspace(questionIndex, opIndex, question.type)\n                \"\n                [id]=\"'select-' + '' + questionIndex + '' + opIndex\"\n                type=\"text\"\n                placeholder=\"Option\"\n              />\n            </app-cs-radio>\n            <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\n                                class=\"icons\">&#xe90d;</i></button> -->\n          </li>\n          <!-- \n                    <li *ngIf=\"activeQuestionIndex === questionIndex\" class=\"add-new\">\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\"><input readonly type=\"text\"\n                                placeholder=\"Add more option\"\n                                (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\">\n                        </app-cs-radio>\n                    </li> -->\n          <!-- <button (click)=\"addOption(questionIndex,question?.options?.length,question.type)\"\n                        *ngIf=\"activeQuestionIndex === questionIndex\">Add More Options</button> -->\n        </ul>\n      </div>\n\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <!-- <li>\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li> -->\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <!-- <li>\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li> -->\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"question?.type === 'checkbox'\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ul class=\"list\">\n          <li *ngFor=\"let option of question?.options; let opIndex = index\">\n            <app-cs-checkbox [oneLine]=\"true\" [readonly]=\"true\">\n              <input\n                [(ngModel)]=\"option.label\"\n                type=\"text\"\n                placeholder=\"Option\"\n                [id]=\"'checkbox-' + '' + questionIndex + '' + opIndex\"\n                (keydown.enter)=\"\n                  addOption(questionIndex, opIndex, question.type)\n                \"\n                (keydown.backspace)=\"\n                  deleteOnBackspace(questionIndex, opIndex, question.type)\n                \"\n              />\n            </app-cs-checkbox>\n            <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\n                                class=\"icons\">&#xe90d;</i></button> -->\n          </li>\n          <!-- <li *ngIf=\"activeQuestionIndex === questionIndex\" class=\"add-new\">\n                        <app-cs-checkbox [oneLine]=\"true\"\n                            (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\"\n                            [disabled]=\"true\">\n                            <input [disabled]=\"true\" type=\"text\" placeholder=\"Add more option\">\n                        </app-cs-checkbox>\n                    </li> -->\n        </ul>\n      </div>\n\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <!-- <li>\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li> -->\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <!-- <li>\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li> -->\n          </ul>\n        </div>\n      </div>\n    </div>\n    <!-- <div class=\"checkpoints-questions-blocks\" [class.active]=\"true\">\n        <div class=\"container\">\n            <h3 class=\"question\">\n                <span class=\"counter\">2. <span class=\"required\">*</span></span>\n                <input class=\"text\" type=\"text\" placeholder=\"Type your question here [Select Box]\" value=\"Has the previous audit report been closed out?\">\n            </h3>\n            <ul class=\"list\">\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><span>Yes</span></app-cs-radio> <button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><span>No</span></app-cs-radio><button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><span>N/A</span></app-cs-radio><button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><input type=\"text\" placeholder=\"Option\"></app-cs-radio> <button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n            </ul>\n        </div>\n        <div class=\"footer\">\n            <div class=\"left\">\n                <app-cs-checkbox [ngValue]=\"question.required\" (ngValueChange)=\"question.required = $event\">Is required</app-cs-checkbox>\n            </div>\n            <div class=\"right\">\n                <ul>\n                    <li><button><i class=\"icons\">&#xe915;</i></button></li>\n                    <li><button><i class=\"icons\">&#xe923;</i></button></li>\n                    <li><button><i class=\"icons\">&#xe9b6;</i></button></li>\n                </ul>\n            </div>\n        </div>\n    </div> -->\n  </ng-container>\n  <!-- <button class=\"btn-add-new\" type=\"button\" appPopover (click)=\"newCheckpoint.popover()\" placement=\"left\">+ Add a new\n        checkpoint</button> -->\n  <!-- <app-popover #newCheckpoint>\n\n        <ul class=\"checkpoint-type-list\">\n            <li><span class=\"checkpoint-type-list-title\">Add Checkpoints</span></li>\n            <li *ngFor=\"let type of questionTypeList\">\n                <button (click)=\"addQuestion(type)\">\n                    <i class=\"icons\" [innerHTML]=\"type.icon\"></i>\n                    <span class=\"value\">\n                        {{type?.text}}\n                    </span>\n                </button>\n            </li>\n        </ul>\n    </app-popover> -->\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .checkpoints-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-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-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#dbdbdb;position:absolute}::ng-deep .checkpoints-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-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-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-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-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-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;inset:0;cursor:pointer}::ng-deep .checkpoints-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-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-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-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-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-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-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #DBDBDB;padding:0}::ng-deep .checkpoints-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-questions-blocks .footer .right ul li button.delete{color:#ee3939}::ng-deep .checkpoints-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-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-questions-blocks ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-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-questions-blocks ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-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-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .checkpoints-questions-blocks ul.list li input,::ng-deep .checkpoints-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-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-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-questions-blocks.active{border:1px solid #1E5DD3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-questions-blocks.active .question:before{background:#1e5dd3}::ng-deep .checkpoints-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-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-questions-blocks.active ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-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-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input{cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction{border:1px solid #DBDBDB;margin-bottom:12px}::ng-deep .checkpoints-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction .question span.text vcomply-editor{cursor:text}::ng-deep .checkpoints-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-questions-blocks.instruction.filled{background:#f8f8f8;max-height:100px;overflow:auto}::ng-deep .checkpoints-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-questions .btn-add-new{display:flex;justify-content:center;align-items:center;line-height:16px;height:36px;border-radius:4px;color:#1e5dd3;border:1px dashed #1E5DD3;margin-top:20px;width:100%;background:transparent;text-transform:uppercase;font-weight:600}.checkpoint-type-list{background:#fff;padding:0;margin:0;width:220px;box-shadow:0 3px 6px #1c5bd140;border-radius:4px}.checkpoint-type-list-title{font-size:12px;font-weight:500;color:#161b2f;text-transform:uppercase;line-height:20px;padding:8px 12px;display:block}.checkpoint-type-list li{list-style:none}.checkpoint-type-list li+li{border-top:1px solid #f8f8f8}.checkpoint-type-list li button{padding:4px;background:transparent;border:none;outline:none;display:flex;justify-content:flex-start;cursor:pointer;width:100%}.checkpoint-type-list li button i{font-size:16px;color:#1e5dd3;padding:0 4px;display:flex;justify-content:center;width:40px;height:32px;align-items:center;margin-right:8px}.checkpoint-type-list li button span.value{width:calc(100% - 48px);display:block;color:#747576;font-size:11px;line-height:32px;text-transform:uppercase;text-align:left}.checkpoint-type-list li button:hover{background:#f8f8f8}.error{border-color:red}.vx-overlay{position:fixed;z-index:1;inset:0}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: i7.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "directive", type: i8.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "pipe", type: i10.FormatHtmlPipe, name: "formatHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointsQuestionsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-checkpoints-questions', template: "<!-- <p>checkpoints-questions works!</p> -->\n<div class=\"checkpoints-questions\">\n  <div\n    class=\"checkpoints-questions-blocks instruction\"\n    [class.filled]=\"checkpointInstruction.length > 0 && !addInstruction\"\n  >\n    <div class=\"container\">\n      <h3 class=\"question\">\n        <span class=\"counter\" *ngIf=\"!addInstruction\"\n          ><i class=\"icons\">&#xe932;</i></span\n        >\n        <span\n          class=\"text\"\n          *ngIf=\"!addInstruction\"\n          [innerHTML]=\"\n            checkpointInstruction.length > 0\n              ? (checkpointInstruction | formatHtml)\n              : 'Add instruction'\n          \"\n        ></span>\n        <span class=\"text\" *ngIf=\"addInstruction && false\">\n          <vcomply-editor\n            [(ngModel)]=\"checkpointInstruction\"\n            [editorConfig]=\"{\n              mode: 'prime',\n              colorPalette: true,\n              link: true,\n              placeholder: 'Add instruction',\n              buttonName: 'SAVE',\n              id: 'checkpoint-instructions'\n            }\"\n            (comment)=\"saveDescription()\"\n          ></vcomply-editor>\n        </span>\n      </h3>\n    </div>\n  </div>\n\n  <ng-container\n    *ngFor=\"let question of checkpointData; let questionIndex = index\"\n  >\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"['textbox', 'date', 'upload'].includes(question?.type)\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ng-container\n          class=\"preview\"\n          *ngIf=\"activeQuestionIndex !== questionIndex\"\n        >\n          <label class=\"file-upload\" *ngIf=\"question.type === 'upload'\">\n            <input type=\"file\" disabled />\n            <span><i class=\"icons\">&#xe9ed;</i> Browse File</span>\n          </label>\n          <ng-container *ngIf=\"question.type === 'date'\">\n            <div class=\"date-picker\">\n              <i class=\"icons\">&#xe92d;</i>\n              <input\n                type=\"text\"\n                placeholder=\"Select date\"\n                (click)=\"\n                  openDatePicker();\n                  $event.stopPropagation();\n                  datePickerOverlay = true\n                \"\n                disabled\n                id=\"date-picker\"\n              />\n              <dp-date-picker #datePicker (click)=\"$event.stopPropagation()\">\n              </dp-date-picker>\n              <div\n                class=\"vx-overlay\"\n                (click)=\"closeDatepicker(); $event.stopPropagation()\"\n                *ngIf=\"datePickerOverlay\"\n              ></div>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <li>\n              <button\n                [appTooltip]=\"'Add new'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  blankClone(question.type, questionIndex);\n                  $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe915;</i>\n              </button>\n            </li>\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <li>\n              <!-- <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button> -->\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"question?.type === 'radio'\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ul class=\"list\">\n          <li *ngFor=\"let option of question?.options; let opIndex = index\">\n            <app-cs-radio\n              [oneLine]=\"true\"\n              [readonly]=\"true\"\n              [disabled]=\"activeQuestionIndex === questionIndex\"\n              ><input\n                [(ngModel)]=\"option.label\"\n                [id]=\"'radio-' + '' + questionIndex + '' + opIndex\"\n                type=\"text\"\n                placeholder=\"Option\"\n              />\n            </app-cs-radio>\n            <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\n                                class=\"icons\">&#xe90d;</i></button> -->\n          </li>\n          <!-- <li *ngIf=\"activeQuestionIndex === questionIndex && false\" class=\"add-new\">\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\">\n                            <input type=\"text\" readonly placeholder=\"Add more option\"\n                                (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\">\n                        </app-cs-radio>\n                    </li> -->\n        </ul>\n      </div>\n\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <!-- <li>\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li> -->\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <!-- <li>\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li> -->\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"question?.type === 'select'\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ul class=\"list\">\n          <li *ngFor=\"let option of question?.options; let opIndex = index\">\n            <app-cs-radio\n              [oneLine]=\"true\"\n              readonly\n              [disabled]=\"activeQuestionIndex === questionIndex\"\n            >\n              <input\n                [(ngModel)]=\"option.label\"\n                name=\"'select-' + '' + questionIndex + '' + opIndex\"\n                (keydown.enter)=\"\n                  addOption(questionIndex, opIndex, question.type)\n                \"\n                (keydown.backspace)=\"\n                  deleteOnBackspace(questionIndex, opIndex, question.type)\n                \"\n                [id]=\"'select-' + '' + questionIndex + '' + opIndex\"\n                type=\"text\"\n                placeholder=\"Option\"\n              />\n            </app-cs-radio>\n            <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\n                                class=\"icons\">&#xe90d;</i></button> -->\n          </li>\n          <!-- \n                    <li *ngIf=\"activeQuestionIndex === questionIndex\" class=\"add-new\">\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\"><input readonly type=\"text\"\n                                placeholder=\"Add more option\"\n                                (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\">\n                        </app-cs-radio>\n                    </li> -->\n          <!-- <button (click)=\"addOption(questionIndex,question?.options?.length,question.type)\"\n                        *ngIf=\"activeQuestionIndex === questionIndex\">Add More Options</button> -->\n        </ul>\n      </div>\n\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <!-- <li>\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li> -->\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <!-- <li>\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li> -->\n          </ul>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"checkpoints-questions-blocks\"\n      *ngIf=\"question?.type === 'checkbox'\"\n      [class.error]=\"errorIndex === questionIndex\"\n    >\n      <div class=\"container\">\n        <h3 class=\"question\">\n          <span class=\"counter\"\n            >{{ questionIndex + 1 }}.\n            <span class=\"required\" *ngIf=\"question.required\">*</span></span\n          >\n          <input\n            class=\"text\"\n            type=\"text\"\n            [placeholder]=\"placeholder[question.type]\"\n            [(ngModel)]=\"question.label\"\n            readonly\n          />\n        </h3>\n        <ul class=\"list\">\n          <li *ngFor=\"let option of question?.options; let opIndex = index\">\n            <app-cs-checkbox [oneLine]=\"true\" [readonly]=\"true\">\n              <input\n                [(ngModel)]=\"option.label\"\n                type=\"text\"\n                placeholder=\"Option\"\n                [id]=\"'checkbox-' + '' + questionIndex + '' + opIndex\"\n                (keydown.enter)=\"\n                  addOption(questionIndex, opIndex, question.type)\n                \"\n                (keydown.backspace)=\"\n                  deleteOnBackspace(questionIndex, opIndex, question.type)\n                \"\n              />\n            </app-cs-checkbox>\n            <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\n                                class=\"icons\">&#xe90d;</i></button> -->\n          </li>\n          <!-- <li *ngIf=\"activeQuestionIndex === questionIndex\" class=\"add-new\">\n                        <app-cs-checkbox [oneLine]=\"true\"\n                            (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\"\n                            [disabled]=\"true\">\n                            <input [disabled]=\"true\" type=\"text\" placeholder=\"Add more option\">\n                        </app-cs-checkbox>\n                    </li> -->\n        </ul>\n      </div>\n\n      <div class=\"footer\">\n        <div class=\"left\">\n          <app-cs-checkbox\n            [ngValue]=\"question.required\"\n            (ngValueChange)=\"question.required = $event\"\n            >Is required</app-cs-checkbox\n          >\n        </div>\n        <div class=\"right\">\n          <ul>\n            <!-- <li>\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe915;</i>\n                            </button>\n                        </li> -->\n            <li>\n              <button\n                class=\"delete\"\n                [appTooltip]=\"'Delete'\"\n                placement=\"bottom\"\n                delay=\"0\"\n                [tooltipMandatory]=\"true\"\n                (click)=\"\n                  removeQuestion(questionIndex); $event.stopPropagation()\n                \"\n              >\n                <i class=\"icons\">&#xe923;</i>\n              </button>\n            </li>\n            <!-- <li>\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\n                                <i class=\"icons\">&#xe9b6;</i>\n                            </button>\n                        </li> -->\n          </ul>\n        </div>\n      </div>\n    </div>\n    <!-- <div class=\"checkpoints-questions-blocks\" [class.active]=\"true\">\n        <div class=\"container\">\n            <h3 class=\"question\">\n                <span class=\"counter\">2. <span class=\"required\">*</span></span>\n                <input class=\"text\" type=\"text\" placeholder=\"Type your question here [Select Box]\" value=\"Has the previous audit report been closed out?\">\n            </h3>\n            <ul class=\"list\">\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><span>Yes</span></app-cs-radio> <button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><span>No</span></app-cs-radio><button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><span>N/A</span></app-cs-radio><button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n                <li>\n                    <app-cs-radio [oneLine]=\"true\"><input type=\"text\" placeholder=\"Option\"></app-cs-radio> <button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\n                </li>\n            </ul>\n        </div>\n        <div class=\"footer\">\n            <div class=\"left\">\n                <app-cs-checkbox [ngValue]=\"question.required\" (ngValueChange)=\"question.required = $event\">Is required</app-cs-checkbox>\n            </div>\n            <div class=\"right\">\n                <ul>\n                    <li><button><i class=\"icons\">&#xe915;</i></button></li>\n                    <li><button><i class=\"icons\">&#xe923;</i></button></li>\n                    <li><button><i class=\"icons\">&#xe9b6;</i></button></li>\n                </ul>\n            </div>\n        </div>\n    </div> -->\n  </ng-container>\n  <!-- <button class=\"btn-add-new\" type=\"button\" appPopover (click)=\"newCheckpoint.popover()\" placement=\"left\">+ Add a new\n        checkpoint</button> -->\n  <!-- <app-popover #newCheckpoint>\n\n        <ul class=\"checkpoint-type-list\">\n            <li><span class=\"checkpoint-type-list-title\">Add Checkpoints</span></li>\n            <li *ngFor=\"let type of questionTypeList\">\n                <button (click)=\"addQuestion(type)\">\n                    <i class=\"icons\" [innerHTML]=\"type.icon\"></i>\n                    <span class=\"value\">\n                        {{type?.text}}\n                    </span>\n                </button>\n            </li>\n        </ul>\n    </app-popover> -->\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .checkpoints-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-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-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#dbdbdb;position:absolute}::ng-deep .checkpoints-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-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-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-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-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-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;inset:0;cursor:pointer}::ng-deep .checkpoints-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-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-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-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-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-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-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-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-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #DBDBDB;padding:0}::ng-deep .checkpoints-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-questions-blocks .footer .right ul li button.delete{color:#ee3939}::ng-deep .checkpoints-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-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-questions-blocks ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-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-questions-blocks ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-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-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .checkpoints-questions-blocks ul.list li input,::ng-deep .checkpoints-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-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-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-questions-blocks.active{border:1px solid #1E5DD3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-questions-blocks.active .question:before{background:#1e5dd3}::ng-deep .checkpoints-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-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-questions-blocks.active ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-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-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input{cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction{border:1px solid #DBDBDB;margin-bottom:12px}::ng-deep .checkpoints-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction .question span.text vcomply-editor{cursor:text}::ng-deep .checkpoints-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-questions-blocks.instruction.filled{background:#f8f8f8;max-height:100px;overflow:auto}::ng-deep .checkpoints-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-questions .btn-add-new{display:flex;justify-content:center;align-items:center;line-height:16px;height:36px;border-radius:4px;color:#1e5dd3;border:1px dashed #1E5DD3;margin-top:20px;width:100%;background:transparent;text-transform:uppercase;font-weight:600}.checkpoint-type-list{background:#fff;padding:0;margin:0;width:220px;box-shadow:0 3px 6px #1c5bd140;border-radius:4px}.checkpoint-type-list-title{font-size:12px;font-weight:500;color:#161b2f;text-transform:uppercase;line-height:20px;padding:8px 12px;display:block}.checkpoint-type-list li{list-style:none}.checkpoint-type-list li+li{border-top:1px solid #f8f8f8}.checkpoint-type-list li button{padding:4px;background:transparent;border:none;outline:none;display:flex;justify-content:flex-start;cursor:pointer;width:100%}.checkpoint-type-list li button i{font-size:16px;color:#1e5dd3;padding:0 4px;display:flex;justify-content:center;width:40px;height:32px;align-items:center;margin-right:8px}.checkpoint-type-list li button span.value{width:calc(100% - 48px);display:block;color:#747576;font-size:11px;line-height:32px;text-transform:uppercase;text-align:left}.checkpoint-type-list li button:hover{background:#f8f8f8}.error{border-color:red}.vx-overlay{position:fixed;z-index:1;inset:0}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SnackBarService }, { type: i2.CommonService }]; }, propDecorators: { checkpointData: [{
                type: Input
            }], questionTypeList: [{
                type: Input
            }], errorIndex: [{
                type: Input
            }], checkpointInstruction: [{
                type: Input
            }], createQuestion: [{
                type: Output
            }], deleteQuestion: [{
                type: Output
            }], copyQuestion: [{
                type: Output
            }], blankQuestion: [{
                type: Output
            }], createOption: [{
                type: Output
            }], removeOption: [{
                type: Output
            }], updateDescription: [{
                type: Output
            }], datePicker: [{
                type: ViewChild,
                args: ['datePicker']
            }], datePickerPopUp: [{
                type: ViewChild,
                args: ['datePicker', { read: ElementRef, static: false }]
            }], documentClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 