import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/validator.service";
import * as i2 from "@angular/common";
import * as i3 from "../../../../ui-kit/tooltip/tooltip.directive";
import * as i4 from "../build/multiple-choice/multiple-choice.component";
import * as i5 from "../build/checkbox/checkbox.component";
import * as i6 from "../build/image-choice/image-choice.component";
import * as i7 from "../build/star-rating/star-rating.component";
import * as i8 from "../build/matrix-dropdown/matrix-dropdown.component";
import * as i9 from "../build/dropdown/dropdown.component";
import * as i10 from "../build/matrix-rating-scale/matrix-rating-scale.component";
import * as i11 from "../build/ranking/ranking.component";
import * as i12 from "../build/slider/slider.component";
import * as i13 from "../build/multiple-textbox/multiple-textbox.component";
import * as i14 from "../build/date-time/date-time.component";
import * as i15 from "../build/weightage-selector/weightage-selector.component";
import * as i16 from "@angular/forms";
import * as i17 from "../question-type/question-type.component";
import * as i18 from "../quick-settings/quick-settings.component";
import * as i19 from "../single-line-editor/single-line-editor.component";
import * as i20 from "../response-selector/response-selector.component";
import * as i21 from "../move/move.component";
import * as i22 from "../logic/logic.component";
import * as i23 from "../pipes/error-message.pipe";
import * as i24 from "../pipes/current-page-question.pipe";
export class EditorWrapperComponent {
    openResponsePopup() {
        this.hideResponsePopup = true;
    }
    closeResponsePopup() {
        this.hideResponsePopup = false;
    }
    openNextQuestion() {
        this.nextQuestion = true;
    }
    closeNextQuestion() {
        this.nextQuestion = false;
    }
    constructor(cdr, validator) {
        this.cdr = cdr;
        this.validator = validator;
        this.hideResponsePopup = false;
        this.nextQuestion = false;
        this.openPortal = '';
        this.validQuestionData = new EventEmitter();
        this.errorPresent = false;
        this.viewMode = 'build';
        this.deleteQuestion = new EventEmitter();
        this.copyQuestion = new EventEmitter();
    }
    ngOnInit() {
        if (this.question.errorArray && Object.values(this.question.errorArray).length > 0) {
            this.errorPresent = true;
        }
    }
    ngAfterViewInit() {
        setTimeout(() => {
            this.questionContainer.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
    }
    openResponseChoice() {
        this.responseChoice = true;
    }
    closeThis() {
        this.responseChoice = false;
    }
    callDelete() {
        this.deleteQuestion.emit(this.questionIndex);
    }
    callCopy() {
        this.copyQuestion.emit(this.questionIndex);
    }
    /**
     * Adds new option for a question
     * @param choiceIndex Index of option after which new option should be added
     * @param type Unique identifier to set id of newly created options
     */
    addOption({ choiceIndex, type }) {
        this.question.choices.splice(choiceIndex + 1, 0, { title: '', value: '', is_selected: false, answerCompletedBy: [] });
        this.setFocus(type, choiceIndex + 1);
    }
    /**
     * Deletes a particular option
     * @param choiceIndex Index of option after which new option should be added
     * @param type Unique identifier to set id of newly created options
     */
    deleteOption({ choiceIndex, type }) {
        if (this.question.choices.length !== 1) {
            this.question.choices.splice(choiceIndex, 1);
        }
        (choiceIndex - 1 >= 0) ? this.setFocus(type, choiceIndex - 1) :
            this.setFocus(type, 0);
    }
    deleteColumn({ columnIndex, type }) {
        if (this.question.columns.length === 1) {
            return;
        }
        this.question.columns.splice(columnIndex, 1);
        (columnIndex - 1 >= 0) ? this.setFocus(type, columnIndex - 1) : this.setFocus(type, 0);
    }
    addColumn({ columnIndex, type }) {
        const column = { title: '', value: 0, is_selected: false, weight: 0, choices: [{ title: '' }] };
        this.question.columns.splice(columnIndex + 1, 0, column);
        this.setFocus(type, columnIndex + 1);
    }
    /**
     * Sets focus to updated option
     * @param type Unique identifier to set id of newly created options
     * @param choiceIndex Index of option after which new option should be added
     */
    setFocus(type, choiceIndex) {
        this.cdr.detectChanges();
        let EL;
        EL = document.getElementById(type + choiceIndex);
        if (EL) {
            EL.focus();
        }
    }
    /**
     * Operation on click of save button
     */
    async checkForValidationStatus(mode) {
        const status = await this.validator.validate(this.question);
        if (status.valid === true) {
            this.errorPresent = false;
            this.validator.validatedQuestions[status.question.name] = status.question;
            this.validQuestionData.emit(mode);
        }
        else {
            this.errorPresent = true;
            delete this.validator.validatedQuestions[status.question.name];
        }
    }
    insertResponseSet(evt) {
        this.question.choices = evt;
        if (this.service.formsPage.settings.assessmentMode) {
            this.question.choices.some((ele) => {
                if (!ele.isFailed) {
                    ele.score = this.service.formsPage.settings.defaultScore;
                }
                if (ele.isFailed === true) {
                    ele.score = this.service.formsPage.settings.negativeScore;
                }
            });
            this.question.hasOther = false;
        }
        this.responseChoice = false;
        this.checkForValidationStatus('partial');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ValidatorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorWrapperComponent, selector: "app-editor-wrapper", inputs: { openPortal: "openPortal", questionIndex: "questionIndex", question: "question", GRS: "GRS", service: "service", editorMode: "editorMode" }, outputs: { validQuestionData: "validQuestionData", deleteQuestion: "deleteQuestion", copyQuestion: "copyQuestion" }, viewQueries: [{ propertyName: "questionContainer", first: true, predicate: ["questionContainer"], descendants: true }], ngImport: i0, template: "<div class=\"editor-wrapper vx-mb-4 \" [class.error]=\"errorPresent\" [class.with-logic]=\"false\" [ngSwitch]=\"viewMode\"  #questionContainer >\n    <!-- <div class=\"label-mode vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pt-1 vx-pb-1\">ASSESSMENT MODE ENABLED</div> -->\n    <div class=\"editor-top vx-d-flex vx-align-center vx-justify-center vx-pl-2 vx-pr-2\">\n        <button class=\"type-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center\" [class.active]=\"viewMode == 'build'\" (click)=\"viewMode = 'build'\">BUILD</button>\n\n\n\n        <div class=\"logic-area\">\n            <button [class.disabled]=\" (service.formsPage.elements | currentPageQuestion : service.currentPageNumber ) === false\" class=\"type-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center\" [class.active]=\"viewMode == 'logic'\" (click)=\"viewMode = 'logic'\" >LOGIC</button>\n            <i *ngIf=\"(service.formsPage.elements | currentPageQuestion : service.currentPageNumber ) === false\" [appTooltip]=\"(service.formsPage.elements | currentPageQuestion : service.currentPageNumber ) === false ? 'You need to have at least two questions to create a logical workflow.':''\" class=\"icons info vx-fs-12 vx-txt-blue\"  placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">&#xe932;</i>\n        </div>\n\n\n\n        <button [class.disabled]=\"service.formsPage?.elements?.length < 2\" class=\"type-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center\" [class.active]=\"viewMode == 'move'\" (click)=\"viewMode = 'move'\">MOVE</button>\n        <div class=\"rightside-button vx-d-flex vx-align-center\">\n            <button class=\"duplicate-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center vx-lh-7\" (click)=\"copyQuestion.emit(questionIndex)\">DUPLICATE</button>\n            <button class=\"delete-btn vx-fs-14 vx-txt-red vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" (click)=\"deleteQuestion.emit(questionIndex)\"><i class=\"icons\">&#xe923;</i></button>\n        </div>\n    </div>\n    <div class=\"editor-mid vx-pl-5 vx-pr-5\" [ngSwitch]=\"viewMode\">\n        <div class=\"build-area vx-d-flex vx-justify-between\" *ngSwitchCase=\"'build'\">\n            <div class=\"left\">\n                <!-- <app-welcome></app-welcome>\n                <app-thank-you></app-thank-you> -->\n                <div class=\"vx-d-flex vx-justify-between\">\n                    <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}} <span *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div>\n                    <!-- *ngIf=\"service.formsPage?.settings?.weightageEnabled === true\" -->\n                    <app-weightage-selector *ngIf=\"service.formsPage?.settings?.weightageEnabled === true && ['multiple-choice','checkbox','dropdown'].includes(question?.type)\" [(value)]=\"question.weightage\" ></app-weightage-selector>\n                </div>\n                <!-- <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}}\n                <span  *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div> -->\n                <app-single-line-editor [placeholder]=\"'Question'\" [label]=\"false\" [editorMode]=\"'multiline'\" [(ngModel)]=\"question.title\"></app-single-line-editor>\n                <ng-container *ngIf=\"question.isPlaceholder &&  ['single-textbox','comment-box'].includes(question.type)\">\n                    <div class=\"label-heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Placeholder Text</div>\n                    <app-single-line-editor [placeholder]=\"'Please enter a response'\" [label]=\"false\" [editorMode]=\"'multiline'\"></app-single-line-editor>\n                </ng-container>\n\n                <app-single-line-editor [label]=\"true\" [(ngModel)]=\"question.description\" *ngIf=\"question.hasDescription\" [placeholder]=\"'Description'\" [editorMode]=\"'multiline'\"></app-single-line-editor>\n                <app-single-line-editor  [label]=\"true\" [(ngModel)]=\"question.comments\" *ngIf=\"question.hasComments\" [placeholder]=\"'Comment'\" [editorMode]=\"'multiline'\"></app-single-line-editor>\n                <div class=\"response-block vx-d-flex vx-align-center vx-justify-end vx-mb-3\" *ngIf=\"false\">\n                    <button *ngIf=\"!hideResponsePopup\" class=\"response-select vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-m-0 vx-p-0 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center vx-justify-center vx-lh-6\" (click)=\"openResponsePopup()\">PRECONFIGURED RESPONSE CHOICE <i class=\"icons vx-fs-10 vx-d-flex vx-ml-4\">&#xe9e8;</i></button>\n                    <app-response-selector *ngIf=\"hideResponsePopup\"></app-response-selector>\n                    <div class=\"overlay\" *ngIf=\"hideResponsePopup\" (click)=\"closeResponsePopup()\"></div>\n                </div>\n                <ng-container [ngSwitch]=\"question?.type\">\n                    <app-multiple-choice *ngSwitchCase=\"'multiple-choice'\"  [service]=\"service\" [question]=\"question\" (addOption)=\"addOption($event)\"  (deleteOption)=\"deleteOption($event)\"></app-multiple-choice>\n                    <app-checkbox *ngSwitchCase=\"'checkbox'\" [service]=\"service\" [question]=\"question\" (addOption)=\"addOption($event)\"  (deleteOption)=\"deleteOption($event)\"></app-checkbox>\n                    <app-image-choice  *ngSwitchCase=\"'image-choice'\"></app-image-choice>\n                    <app-star-rating  *ngSwitchCase=\"'star-rating'\"></app-star-rating>\n                    <app-matrix-dropdown *ngSwitchCase=\"'matrix-dropdown'\"></app-matrix-dropdown>\n                    <app-build-dropdown *ngSwitchCase=\"'dropdown'\" [service]=\"service\" [question]=\"question\" (addOption)=\"addOption($event)\"  (deleteOption)=\"deleteOption($event)\"></app-build-dropdown>\n                    <app-matrix-rating-scale *ngSwitchCase=\"'rating-scale'\"></app-matrix-rating-scale>\n                    <app-ranking *ngSwitchCase=\"'ranking'\"></app-ranking>\n                    <app-slider *ngSwitchCase=\"'slider'\"></app-slider>\n                    <app-multiple-textbox *ngSwitchCase=\"'multiple-textbox'\"></app-multiple-textbox>\n                    <app-build-date-time *ngSwitchCase=\"'date-time'\" [question]=\"question\"></app-build-date-time>\n                </ng-container>\n\n            </div>\n            <div class=\"right\">\n                <app-quick-setting [questionIndex]=\"questionIndex\" [question]=\"question\" (typeChanged)=\"checkForValidationStatus('PARTIAL')\"></app-quick-setting>\n            </div>\n        </div>\n        <div class=\"logic-area\" *ngSwitchCase=\"'logic'\">\n            <div class=\"question-heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}} <span *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div>\n            <div class=\"question-name vx-fs-16 vx-label-txt vx-lh-6 vx-pt-1 vx-pb-1 vx-mb-5\">\n                {{question?.title ? question?.title : 'Question'}}\n                <i class=\"icons info vx-txt-blue vx-ml-2\" *ngIf=\"question?.hasComments\"  [appTooltip]=\"question?.comments\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></div>\n            <app-logic [service]=\"service\" [question]=\"question\" [editorMode]=\"editorMode\" [questionIndex]=\"questionIndex\"></app-logic>\n        </div>\n        <div class=\"move-area\" *ngSwitchCase=\"'move'\">\n            <div class=\"question-heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}} <span *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div>\n            <div class=\"question-name vx-fs-16 vx-label-txt vx-lh-6 vx-pt-1 vx-pb-1 vx-mb-5\">{{question?.title ? question?.title : 'Question'}} <i  *ngIf=\"question?.hasComments\" class=\"icons info vx-txt-blue vx-ml-2\" [appTooltip]=\"question?.comments\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></div>\n            <app-move [service]=\"service\" [openPortal]=\"openPortal\" [question] =\"question\" [questionIndex]=\"questionIndex\"></app-move>\n        </div>\n    </div>\n    <div class=\"editor-bottom vx-d-flex vx-align-center vx-justify-between vx-p-2 error\">\n        <button (click)=\"openNextQuestion()\" class=\"next-btn vx-fs-12 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><span class=\"plus-icon vx-fs-14 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-mr-1\">+</span> NEXT QUESTION</button>\n        <div class=\"error-msg vx-fs-12 vx-txt-white vx-tt-uppercase vx-d-flex vx-align-center\" *ngIf=\"(question?.errorArray|errorMessage) as error\">\n            <i class=\"icons vx-d-flex vx-mr-1\">&#xe914;</i> {{error}}\n        </div>\n        <button (click)=\"checkForValidationStatus('save')\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">SAVE</button>\n        <div *ngIf=\"nextQuestion\" class=\"next-question vx-p-4\">\n            <app-question-type (addQuestion)=\"service.addQuestion($event,questionIndex);closeNextQuestion();\"></app-question-type>\n        </div>\n        <div *ngIf=\"nextQuestion\" class=\"overlay\" (click)=\"closeNextQuestion()\"></div>\n    </div>\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/mixin/mixin.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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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\";.editor-wrapper{border:1px solid #1e5dd3;border-radius:.25rem;position:relative}.editor-wrapper .label-mode{background:#7aa6f7;border:1px solid #1e5dd3;border-left:none;border-radius:0 .125rem .125rem 0;writing-mode:vertical-lr;position:absolute;left:-1.0625rem;top:3rem;width:1rem;transform:rotate(180deg)}.editor-wrapper.error{border-color:#d93b41}.editor-wrapper.error .editor-bottom{background:#d93b41}.editor-wrapper.with-logic{border-color:#f0b819}.editor-wrapper.with-logic .label-mode{background:#f4c84a;border-color:#f0b819}.editor-top{background:#fbfbfb;border-bottom:1px solid #F1F1F1;border-radius:.25rem .25rem 0 0;height:2.75rem;position:relative}.editor-top .logic-area{position:relative}.editor-top .logic-area i.info{position:absolute;right:.75rem;top:1.0625rem;cursor:pointer}.editor-top button.type-btn{background:transparent;border:none;border-bottom:.1875rem solid transparent;border-radius:0;line-height:2.75rem;margin:0 2rem}.editor-top button.type-btn.active{color:#1e5dd3;border-color:#1e5dd3}.editor-top button.disabled{pointer-events:none;opacity:.5}.editor-top .rightside-button{position:absolute;right:.5rem;top:.5rem}.editor-top .rightside-button button{background:#f1f1f1;border:none;border-radius:.125rem;height:1.75rem}.editor-top .rightside-button button.delete-btn{width:1.75rem}.editor-mid{padding-top:1.5rem;padding-bottom:1.5rem}.editor-mid .build-area .left{width:calc(100% - 17.5rem);position:relative}.editor-mid .build-area .left .heading{position:relative}.editor-mid .build-area .left .heading:before{background:#4681ef;content:\"\";position:absolute;top:.125rem;left:0;width:.125rem;height:.875rem}.editor-mid .build-area .left .response-block{position:relative;top:-.5rem}.editor-mid .build-area .left .response-block button.response-select{background:#fbfbfb;border:1px solid #DBDBDB;border-radius:.125rem}.editor-mid .build-area .left .response-block app-response-selector{position:relative;width:100%;z-index:9}.editor-mid .build-area .left .response-block .overlay{z-index:8}.editor-mid .build-area .right{width:16rem}.editor-mid .logic-area .question-heading,.editor-mid .move-area .question-heading{position:relative}.editor-mid .logic-area .question-heading:before,.editor-mid .move-area .question-heading:before{background:#4681ef;content:\"\";position:absolute;top:.4375rem;left:0;width:.125rem;height:.875rem}.editor-mid .logic-area .question-name i.info,.editor-mid .move-area .question-name i.info{cursor:pointer;position:relative;top:.125rem}.editor-bottom{background:#1e5dd3;border-radius:0 0 .125rem .125rem;position:relative}.editor-bottom button{background:#fff;border:none;border-radius:.1125rem}.editor-bottom button.next-btn{height:1.75rem}.editor-bottom button.next-btn .plus-icon{border:.125rem solid #1e5dd3;border-radius:50%;width:1.125rem;height:1.125rem;line-height:1.125rem}.editor-bottom button.save-btn{width:4.75rem;height:1.75rem}.editor-bottom .next-question{background:#fff;border-radius:.25rem;box-shadow:0 -3px 6px #1e5dd326;position:absolute;bottom:0;left:0;z-index:9}.editor-bottom .next-question ::ng-deep app-question-type .question-type ul{left:10rem;width:calc(100% - 20rem)}.editor-bottom .next-question ::ng-deep app-question-type .question-type ul li{width:10rem!important}.editor-bottom .overlay{z-index:8}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i4.MultipleChoiceComponent, selector: "app-multiple-choice", inputs: ["question", "service"], outputs: ["addOption", "deleteOption"] }, { kind: "component", type: i5.CheckboxComponent, selector: "app-checkbox", inputs: ["question", "service"], outputs: ["addOption", "deleteOption"] }, { kind: "component", type: i6.ImageChoiceComponent, selector: "app-image-choice" }, { kind: "component", type: i7.StarRatingComponent, selector: "app-star-rating" }, { kind: "component", type: i8.MatrixDropdownComponent, selector: "app-matrix-dropdown" }, { kind: "component", type: i9.DropdownComponent, selector: "app-build-dropdown", inputs: ["question", "service"], outputs: ["addOption", "deleteOption"] }, { kind: "component", type: i10.MatrixRatingScaleComponent, selector: "app-matrix-rating-scale" }, { kind: "component", type: i11.RankingComponent, selector: "app-ranking" }, { kind: "component", type: i12.SliderComponent, selector: "app-slider" }, { kind: "component", type: i13.MultipleTextboxComponent, selector: "app-multiple-textbox" }, { kind: "component", type: i14.DateTimeComponent, selector: "app-build-date-time", inputs: ["question"] }, { kind: "component", type: i15.WeightageSelectorComponent, selector: "app-weightage-selector", inputs: ["value"], outputs: ["valueChange"] }, { kind: "directive", type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i17.QuestionTypeComponent, selector: "app-question-type", outputs: ["addQuestion"] }, { kind: "component", type: i18.QuickSettingsComponent, selector: "app-quick-setting", inputs: ["questionIndex", "question"], outputs: ["typeChanged"] }, { kind: "component", type: i19.SingleLineEditorComponent, selector: "app-single-line-editor", inputs: ["placeholder", "editorMode", "label", "id"] }, { kind: "component", type: i20.ResponseSelectorComponent, selector: "app-response-selector" }, { kind: "component", type: i21.MoveComponent, selector: "app-move", inputs: ["questionIndex", "question", "service", "openPortal"] }, { kind: "component", type: i22.LogicComponent, selector: "app-logic", inputs: ["service", "question", "questionIndex", "editorMode"] }, { kind: "pipe", type: i23.ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: i24.CurrentPageQuestionPipe, name: "currentPageQuestion" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorWrapperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-editor-wrapper', template: "<div class=\"editor-wrapper vx-mb-4 \" [class.error]=\"errorPresent\" [class.with-logic]=\"false\" [ngSwitch]=\"viewMode\"  #questionContainer >\n    <!-- <div class=\"label-mode vx-fs-10 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pt-1 vx-pb-1\">ASSESSMENT MODE ENABLED</div> -->\n    <div class=\"editor-top vx-d-flex vx-align-center vx-justify-center vx-pl-2 vx-pr-2\">\n        <button class=\"type-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center\" [class.active]=\"viewMode == 'build'\" (click)=\"viewMode = 'build'\">BUILD</button>\n\n\n\n        <div class=\"logic-area\">\n            <button [class.disabled]=\" (service.formsPage.elements | currentPageQuestion : service.currentPageNumber ) === false\" class=\"type-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center\" [class.active]=\"viewMode == 'logic'\" (click)=\"viewMode = 'logic'\" >LOGIC</button>\n            <i *ngIf=\"(service.formsPage.elements | currentPageQuestion : service.currentPageNumber ) === false\" [appTooltip]=\"(service.formsPage.elements | currentPageQuestion : service.currentPageNumber ) === false ? 'You need to have at least two questions to create a logical workflow.':''\" class=\"icons info vx-fs-12 vx-txt-blue\"  placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">&#xe932;</i>\n        </div>\n\n\n\n        <button [class.disabled]=\"service.formsPage?.elements?.length < 2\" class=\"type-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-d-flex vx-align-center\" [class.active]=\"viewMode == 'move'\" (click)=\"viewMode = 'move'\">MOVE</button>\n        <div class=\"rightside-button vx-d-flex vx-align-center\">\n            <button class=\"duplicate-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center vx-lh-7\" (click)=\"copyQuestion.emit(questionIndex)\">DUPLICATE</button>\n            <button class=\"delete-btn vx-fs-14 vx-txt-red vx-pl-2 vx-pr-2 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" (click)=\"deleteQuestion.emit(questionIndex)\"><i class=\"icons\">&#xe923;</i></button>\n        </div>\n    </div>\n    <div class=\"editor-mid vx-pl-5 vx-pr-5\" [ngSwitch]=\"viewMode\">\n        <div class=\"build-area vx-d-flex vx-justify-between\" *ngSwitchCase=\"'build'\">\n            <div class=\"left\">\n                <!-- <app-welcome></app-welcome>\n                <app-thank-you></app-thank-you> -->\n                <div class=\"vx-d-flex vx-justify-between\">\n                    <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}} <span *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div>\n                    <!-- *ngIf=\"service.formsPage?.settings?.weightageEnabled === true\" -->\n                    <app-weightage-selector *ngIf=\"service.formsPage?.settings?.weightageEnabled === true && ['multiple-choice','checkbox','dropdown'].includes(question?.type)\" [(value)]=\"question.weightage\" ></app-weightage-selector>\n                </div>\n                <!-- <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}}\n                <span  *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div> -->\n                <app-single-line-editor [placeholder]=\"'Question'\" [label]=\"false\" [editorMode]=\"'multiline'\" [(ngModel)]=\"question.title\"></app-single-line-editor>\n                <ng-container *ngIf=\"question.isPlaceholder &&  ['single-textbox','comment-box'].includes(question.type)\">\n                    <div class=\"label-heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">Placeholder Text</div>\n                    <app-single-line-editor [placeholder]=\"'Please enter a response'\" [label]=\"false\" [editorMode]=\"'multiline'\"></app-single-line-editor>\n                </ng-container>\n\n                <app-single-line-editor [label]=\"true\" [(ngModel)]=\"question.description\" *ngIf=\"question.hasDescription\" [placeholder]=\"'Description'\" [editorMode]=\"'multiline'\"></app-single-line-editor>\n                <app-single-line-editor  [label]=\"true\" [(ngModel)]=\"question.comments\" *ngIf=\"question.hasComments\" [placeholder]=\"'Comment'\" [editorMode]=\"'multiline'\"></app-single-line-editor>\n                <div class=\"response-block vx-d-flex vx-align-center vx-justify-end vx-mb-3\" *ngIf=\"false\">\n                    <button *ngIf=\"!hideResponsePopup\" class=\"response-select vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-m-0 vx-p-0 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center vx-justify-center vx-lh-6\" (click)=\"openResponsePopup()\">PRECONFIGURED RESPONSE CHOICE <i class=\"icons vx-fs-10 vx-d-flex vx-ml-4\">&#xe9e8;</i></button>\n                    <app-response-selector *ngIf=\"hideResponsePopup\"></app-response-selector>\n                    <div class=\"overlay\" *ngIf=\"hideResponsePopup\" (click)=\"closeResponsePopup()\"></div>\n                </div>\n                <ng-container [ngSwitch]=\"question?.type\">\n                    <app-multiple-choice *ngSwitchCase=\"'multiple-choice'\"  [service]=\"service\" [question]=\"question\" (addOption)=\"addOption($event)\"  (deleteOption)=\"deleteOption($event)\"></app-multiple-choice>\n                    <app-checkbox *ngSwitchCase=\"'checkbox'\" [service]=\"service\" [question]=\"question\" (addOption)=\"addOption($event)\"  (deleteOption)=\"deleteOption($event)\"></app-checkbox>\n                    <app-image-choice  *ngSwitchCase=\"'image-choice'\"></app-image-choice>\n                    <app-star-rating  *ngSwitchCase=\"'star-rating'\"></app-star-rating>\n                    <app-matrix-dropdown *ngSwitchCase=\"'matrix-dropdown'\"></app-matrix-dropdown>\n                    <app-build-dropdown *ngSwitchCase=\"'dropdown'\" [service]=\"service\" [question]=\"question\" (addOption)=\"addOption($event)\"  (deleteOption)=\"deleteOption($event)\"></app-build-dropdown>\n                    <app-matrix-rating-scale *ngSwitchCase=\"'rating-scale'\"></app-matrix-rating-scale>\n                    <app-ranking *ngSwitchCase=\"'ranking'\"></app-ranking>\n                    <app-slider *ngSwitchCase=\"'slider'\"></app-slider>\n                    <app-multiple-textbox *ngSwitchCase=\"'multiple-textbox'\"></app-multiple-textbox>\n                    <app-build-date-time *ngSwitchCase=\"'date-time'\" [question]=\"question\"></app-build-date-time>\n                </ng-container>\n\n            </div>\n            <div class=\"right\">\n                <app-quick-setting [questionIndex]=\"questionIndex\" [question]=\"question\" (typeChanged)=\"checkForValidationStatus('PARTIAL')\"></app-quick-setting>\n            </div>\n        </div>\n        <div class=\"logic-area\" *ngSwitchCase=\"'logic'\">\n            <div class=\"question-heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}} <span *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div>\n            <div class=\"question-name vx-fs-16 vx-label-txt vx-lh-6 vx-pt-1 vx-pb-1 vx-mb-5\">\n                {{question?.title ? question?.title : 'Question'}}\n                <i class=\"icons info vx-txt-blue vx-ml-2\" *ngIf=\"question?.hasComments\"  [appTooltip]=\"question?.comments\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></div>\n            <app-logic [service]=\"service\" [question]=\"question\" [editorMode]=\"editorMode\" [questionIndex]=\"questionIndex\"></app-logic>\n        </div>\n        <div class=\"move-area\" *ngSwitchCase=\"'move'\">\n            <div class=\"question-heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION {{questionIndex  + 1}} <span *ngIf=\"question.isRequired === true\" class=\"vx-fs-16 vx-fw-400 vx-txt-red vx-ml-1\">*</span></div>\n            <div class=\"question-name vx-fs-16 vx-label-txt vx-lh-6 vx-pt-1 vx-pb-1 vx-mb-5\">{{question?.title ? question?.title : 'Question'}} <i  *ngIf=\"question?.hasComments\" class=\"icons info vx-txt-blue vx-ml-2\" [appTooltip]=\"question?.comments\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i></div>\n            <app-move [service]=\"service\" [openPortal]=\"openPortal\" [question] =\"question\" [questionIndex]=\"questionIndex\"></app-move>\n        </div>\n    </div>\n    <div class=\"editor-bottom vx-d-flex vx-align-center vx-justify-between vx-p-2 error\">\n        <button (click)=\"openNextQuestion()\" class=\"next-btn vx-fs-12 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><span class=\"plus-icon vx-fs-14 vx-fw-500 vx-d-flex vx-align-center vx-justify-center vx-mr-1\">+</span> NEXT QUESTION</button>\n        <div class=\"error-msg vx-fs-12 vx-txt-white vx-tt-uppercase vx-d-flex vx-align-center\" *ngIf=\"(question?.errorArray|errorMessage) as error\">\n            <i class=\"icons vx-d-flex vx-mr-1\">&#xe914;</i> {{error}}\n        </div>\n        <button (click)=\"checkForValidationStatus('save')\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">SAVE</button>\n        <div *ngIf=\"nextQuestion\" class=\"next-question vx-p-4\">\n            <app-question-type (addQuestion)=\"service.addQuestion($event,questionIndex);closeNextQuestion();\"></app-question-type>\n        </div>\n        <div *ngIf=\"nextQuestion\" class=\"overlay\" (click)=\"closeNextQuestion()\"></div>\n    </div>\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/mixin/mixin.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/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.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\";.editor-wrapper{border:1px solid #1e5dd3;border-radius:.25rem;position:relative}.editor-wrapper .label-mode{background:#7aa6f7;border:1px solid #1e5dd3;border-left:none;border-radius:0 .125rem .125rem 0;writing-mode:vertical-lr;position:absolute;left:-1.0625rem;top:3rem;width:1rem;transform:rotate(180deg)}.editor-wrapper.error{border-color:#d93b41}.editor-wrapper.error .editor-bottom{background:#d93b41}.editor-wrapper.with-logic{border-color:#f0b819}.editor-wrapper.with-logic .label-mode{background:#f4c84a;border-color:#f0b819}.editor-top{background:#fbfbfb;border-bottom:1px solid #F1F1F1;border-radius:.25rem .25rem 0 0;height:2.75rem;position:relative}.editor-top .logic-area{position:relative}.editor-top .logic-area i.info{position:absolute;right:.75rem;top:1.0625rem;cursor:pointer}.editor-top button.type-btn{background:transparent;border:none;border-bottom:.1875rem solid transparent;border-radius:0;line-height:2.75rem;margin:0 2rem}.editor-top button.type-btn.active{color:#1e5dd3;border-color:#1e5dd3}.editor-top button.disabled{pointer-events:none;opacity:.5}.editor-top .rightside-button{position:absolute;right:.5rem;top:.5rem}.editor-top .rightside-button button{background:#f1f1f1;border:none;border-radius:.125rem;height:1.75rem}.editor-top .rightside-button button.delete-btn{width:1.75rem}.editor-mid{padding-top:1.5rem;padding-bottom:1.5rem}.editor-mid .build-area .left{width:calc(100% - 17.5rem);position:relative}.editor-mid .build-area .left .heading{position:relative}.editor-mid .build-area .left .heading:before{background:#4681ef;content:\"\";position:absolute;top:.125rem;left:0;width:.125rem;height:.875rem}.editor-mid .build-area .left .response-block{position:relative;top:-.5rem}.editor-mid .build-area .left .response-block button.response-select{background:#fbfbfb;border:1px solid #DBDBDB;border-radius:.125rem}.editor-mid .build-area .left .response-block app-response-selector{position:relative;width:100%;z-index:9}.editor-mid .build-area .left .response-block .overlay{z-index:8}.editor-mid .build-area .right{width:16rem}.editor-mid .logic-area .question-heading,.editor-mid .move-area .question-heading{position:relative}.editor-mid .logic-area .question-heading:before,.editor-mid .move-area .question-heading:before{background:#4681ef;content:\"\";position:absolute;top:.4375rem;left:0;width:.125rem;height:.875rem}.editor-mid .logic-area .question-name i.info,.editor-mid .move-area .question-name i.info{cursor:pointer;position:relative;top:.125rem}.editor-bottom{background:#1e5dd3;border-radius:0 0 .125rem .125rem;position:relative}.editor-bottom button{background:#fff;border:none;border-radius:.1125rem}.editor-bottom button.next-btn{height:1.75rem}.editor-bottom button.next-btn .plus-icon{border:.125rem solid #1e5dd3;border-radius:50%;width:1.125rem;height:1.125rem;line-height:1.125rem}.editor-bottom button.save-btn{width:4.75rem;height:1.75rem}.editor-bottom .next-question{background:#fff;border-radius:.25rem;box-shadow:0 -3px 6px #1e5dd326;position:absolute;bottom:0;left:0;z-index:9}.editor-bottom .next-question ::ng-deep app-question-type .question-type ul{left:10rem;width:calc(100% - 20rem)}.editor-bottom .next-question ::ng-deep app-question-type .question-type ul li{width:10rem!important}.editor-bottom .overlay{z-index:8}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ValidatorService }]; }, propDecorators: { openPortal: [{
                type: Input
            }], questionIndex: [{
                type: Input
            }], question: [{
                type: Input
            }], GRS: [{
                type: Input
            }], service: [{
                type: Input
            }], editorMode: [{
                type: Input
            }], validQuestionData: [{
                type: Output
            }], deleteQuestion: [{
                type: Output
            }], copyQuestion: [{
                type: Output
            }], questionContainer: [{
                type: ViewChild,
                args: ['questionContainer']
            }] } });
//# sourceMappingURL=data:application/json;base64, 