import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/editor.service";
import * as i2 from "@angular/common";
import * as i3 from "../../../../ui-kit/tooltip/tooltip.directive";
import * as i4 from "../../../../ui-kit/popover/popover.component";
import * as i5 from "../../../../ui-kit/popover/popover.directive";
import * as i6 from "../../../../formgroup/cs-switch/cs-switch.component";
import * as i7 from "@angular/forms";
export class QuickSettingsComponent {
    constructor(fd) {
        this.fd = fd;
        this.typeChanged = new EventEmitter();
        this.selectedQuestionDetails = { questionValue: '', questionName: '', questionIcon: '', questionClass: '' };
        this.questionTypeDropdown = [
            { questionValue: 'multiple-choice', questionName: 'Multiple Choice', questionIcon: '&#xeabd;', questionClass: 'multiple-choice' },
            { questionValue: 'checkbox', questionName: 'Checkboxes', questionIcon: '&#xeabb;', questionClass: 'checkboxes' },
            // { questionValue: 'image-choice', questionName: 'Image Choice', questionIcon: '&#xea29;', questionClass: 'image-choice' },
            // { questionValue: 'star-rating', questionName: 'Star Ratings', questionIcon: '&#xea71;', questionClass: 'star-rating' },
            { questionValue: 'single-textbox', questionName: 'Single Textbox', questionIcon: '&#xeab5;', questionClass: 'single-textbox' },
            // { questionValue: 'comment-box', questionName: 'Comment Box', questionIcon: '&#xe9a6;', questionClass: 'comment-box' },
            // { questionValue: 'matrix-dropdown', questionName: 'Matrix of Dropdown', questionIcon: '&#xeab7;', questionClass: 'matrix-dropdown' },
            { questionValue: 'dropdown', questionName: 'Dropdown', questionIcon: '&#xeab9;', questionClass: 'dropdown-icon' },
            // { questionValue: 'rating-scale', questionName: 'Matrix & Rating Scale', questionIcon: '&#xeab8;', questionClass: 'matrix-rating' },
            // { questionValue: 'ranking', questionName: 'Ranking', questionIcon: '&#xeb03;', questionClass: 'ranking' },
            // { questionValue: 'slider', questionName: 'Slider', questionIcon: '&#xeab6;', questionClass: 'slider' },
            // { questionValue: 'multiple-textbox', questionName: 'Multiple Textboxes', questionIcon: '&#xeab4;', questionClass: 'multiple-textbox' },
            { questionValue: 'date-time', questionName: 'Date & Time', questionIcon: '&#xeaba;', questionClass: 'date-time' },
            { questionValue: 'file-upload', questionName: 'File Upload', questionIcon: '&#xea97;', questionClass: 'file-upload' },
        ];
        this.quickSettingsList = [];
        this.optionsForQuickSettings = [
            {
                title: 'Is required',
                toolTip: 'You can use this option to ensure that important questions are not left unanswered.' +
                    'If enabled, the respondent cannot submit the response to the assessment unless the question is answered.',
                optionType: 'required',
                toggleValue: 'isRequired',
                eligibleQuestionTypes: ['image-choice', 'checkbox', 'single-textbox', 'multiple-choice', 'file-upload', 'star-rating',
                    'comment-box', 'matrix-dropdown', 'rating-scale', 'ranking', 'slider', 'multiple-textbox', 'date-time', 'dropdown']
            },
            {
                title: 'Edit Placeholder',
                toolTip: 'You can customize the placeholder text to provide more relevant information to the respondents taking the ' +
                    `assessment` + '.',
                optionType: 'placeholder',
                toggleValue: 'isPlaceholder',
                eligibleQuestionTypes: ['single-textbox', 'comment-box', 'multiple-textbox']
            },
            {
                title: 'Description',
                toolTip: 'Add more context to your assessment questions by providing more details.',
                optionType: 'questiondescription',
                toggleValue: 'hasDescription',
                eligibleQuestionTypes: ['image-choice', 'checkbox', 'single-textbox', 'multiple-choice', 'file-upload', 'star-rating',
                    'comment-box', 'matrix-dropdown', 'rating-scale', 'ranking', 'slider', 'multiple-textbox', 'date-time', 'dropdown']
            },
            {
                title: 'Comment',
                toolTip: 'You can provide additional information about the question using this option.',
                optionType: 'comments',
                toggleValue: 'hasComments',
                eligibleQuestionTypes: ['image-choice', 'checkbox', 'single-textbox', 'multiple-choice', 'file-upload', 'star-rating',
                    'comment-box', 'matrix-dropdown', 'rating-scale', 'ranking', 'slider', 'multiple-textbox', 'date-time', 'dropdown']
            },
            {
                title: '\'Other\' Answer Choice',
                toolTip: 'You can add ‘Other’ as an answer choice so that your respondents can provide details and or alternate answers.',
                optionType: 'other',
                toggleValue: 'hasOther',
                eligibleQuestionTypes: ['checkbox', 'multiple-choice', 'multiple-textbox', 'dropdown']
            },
            {
                title: 'Randomize',
                toolTip: 'To avoid order bias while answering a question, you can randomize the answer order' +
                    'every time the respondents view the assessment.',
                optionType: 'randomize',
                toggleValue: 'randomize',
                eligibleQuestionTypes: ['checkbox', 'multiple-choice', 'matrix-dropdown', 'rating-scale', 'ranking', 'multiple-textbox', 'dropdown']
            },
            {
                title: 'Switch Alignments',
                toolTip: 'You can choose to present the answer choices one after the other in vertical columns or display in a horizontal sequence.',
                optionType: 'alignment',
                toggleValue: 'alignment',
                eligibleQuestionTypes: ['checkbox', 'multiple-choice']
            },
            {
                title: 'Add rating labels',
                toolTip: 'You can add labels above your icons to indicate what the scale represents.',
                optionType: 'ratingLabel',
                toggleValue: 'hasRatingLabel',
                eligibleQuestionTypes: ['star-rating']
            },
            {
                title: 'Character Length',
                toolTip: 'This option lets you set a maximum and minimum character length criteria' +
                    'that the respondents must follow while answering the question.',
                optionType: 'characterLength',
                toggleValue: 'hasCharacterLength',
                eligibleQuestionTypes: ['single-textbox', 'comment-box']
            },
            {
                title: 'Use weights',
                toolTip: 'This option allows you to specify a weight or score to each column of the matrix question.' +
                    'This is useful when you\'re analyzing the data and wanting to tally up average scores to each of the answers.',
                optionType: 'useWeights',
                toggleValue: 'hasWeight',
                eligibleQuestionTypes: ['rating-scale']
            },
            {
                title: 'Show numerical input box',
                toolTip: 'This allows the respondent to select a scale on the slider by entering the value.',
                optionType: 'numericalInput',
                toggleValue: 'numericBoxEnabled',
                eligibleQuestionTypes: ['slider']
            },
            {
                title: 'Date Info',
                toolTip: '',
                optionType: 'dateFormat',
                toggleValue: 'hasDate',
                eligibleQuestionTypes: ['date-time']
            },
            {
                title: 'Time Info',
                toolTip: '',
                optionType: 'timeInfo',
                toggleValue: 'hasTime',
                eligibleQuestionTypes: ['date-time']
            },
            {
                title: 'Allow Attachments',
                toolTip: 'This option allows the respondents to upload a file in addition to answering the question.',
                optionType: 'userAttachedFiles',
                toggleValue: 'isRespondentAttachment',
                eligibleQuestionTypes: ['image-choice', 'checkbox', 'single-textbox', 'multiple-choice', 'file-upload', 'star-rating',
                    'comment-box', 'matrix-dropdown', 'rating-scale', 'ranking', 'slider', 'multiple-textbox', 'date-time', 'dropdown']
            },
            {
                title: 'Allow Comments',
                toolTip: 'This option allows the respondent to add notes or comments to a question.',
                optionType: 'userComments',
                toggleValue: 'isRespondentComment',
                eligibleQuestionTypes: ['image-choice', 'checkbox', 'single-textbox', 'multiple-choice', 'file-upload', 'star-rating',
                    'comment-box', 'matrix-dropdown', 'rating-scale', 'ranking', 'slider', 'multiple-textbox', 'date-time', 'dropdown']
            }
        ];
    }
    ngOnInit() {
        this.populateSelectedQuestionType();
        this.populateQuickSettingsList();
    }
    populateSelectedQuestionType() {
        this.questionTypeDropdown.forEach(questionType => {
            if (questionType.questionValue === this.fd.formsPage.elements[this.questionIndex].type) {
                this.selectedQuestionDetails.questionClass = questionType.questionClass;
                this.selectedQuestionDetails.questionName = questionType.questionName;
                this.selectedQuestionDetails.questionIcon = questionType.questionIcon;
                this.selectedQuestionDetails.questionValue = questionType.questionValue;
            }
        });
    }
    changeQuestionType(selectedQuestion) {
        if (selectedQuestion.questionValue === 'rating-scale') {
            this.fd.formsPage.elements[this.questionIndex].columns =
                [{ title: '', value: 1, weight: 0, isSelected: false, required: 0, hasHelpingLabel: false, helpingLabel: '' }];
        }
        else if (selectedQuestion.questionValue === 'matrix-dropdown') {
            this.fd.formsPage.elements[this.questionIndex].columns =
                [{
                        title: '', value: 1, weight: 0, isSelected: false, required: 0, hasHelpingLabel: false, helpingLabel: '',
                        choices: [{ hasHelpingLabel: false, helpingLabel: '', isSelected: false, required: 0, title: '', value: 1 }]
                    }];
        }
        else if (selectedQuestion.questionValue === 'date-time') {
            this.fd.formsPage.elements[this.questionIndex].hasDate = true;
            this.fd.formsPage.elements[this.questionIndex].date = { title: '', value: '' };
            this.fd.formsPage.elements[this.questionIndex].time = { title: '', value: '' };
        }
        else if (selectedQuestion.questionValue === 'star-rating') {
            this.fd.formsPage.elements[this.questionIndex].cursorType = 'number';
            this.fd.formsPage.elements[this.questionIndex].scale = 2;
            this.fd.formsPage.elements[this.questionIndex].ratingLabelType = 'specific';
            this.fd.formsPage.elements[this.questionIndex].scaleRangeTo = 'Extreme Likely';
            this.fd.formsPage.elements[this.questionIndex].scaleRangeFrom = 'Not at all likely';
            this.fd.formsPage.elements[this.questionIndex].cursorColor = '#ff8000';
            this.fd.formsPage.elements[this.questionIndex].starValue = '';
            this.fd.formsPage.elements[this.questionIndex].choices = [
                { title: '', isVisible: true, value: 0, isSelected: false, required: 0, hasHelpingLabel: true, helpingLabel: '' },
                { title: '', isVisible: true, value: 1, isSelected: false, required: 0, hasHelpingLabel: true, helpingLabel: '' },
            ];
        }
        else if (selectedQuestion.questionValue === 'slider') {
            this.fd.formsPage.elements[this.questionIndex].scaleRangeMin = 0;
            this.fd.formsPage.elements[this.questionIndex].scaleRangeMax = 100;
            this.fd.formsPage.elements[this.questionIndex].stepSize = 10;
        }
        this.fd.formsPage.elements[this.questionIndex].type = selectedQuestion.questionValue;
        this.selectedQuestionDetails = selectedQuestion;
        this.populateQuickSettingsList();
        this.populateSelectedQuestionType();
        this.typeChanged.emit();
    }
    populateQuickSettingsList() {
        this.quickSettingsList = [...this.optionsForQuickSettings];
        this.quickSettingsList = this.quickSettingsList.filter((option) => option.eligibleQuestionTypes.includes(this.fd.formsPage.elements[this.questionIndex].type));
    }
    toggle(e, quickSetting) {
        const questionDetail = this.fd.formsPage.elements[this.questionIndex];
        if (questionDetail.type === 'date-time') {
            if (quickSetting.toggleValue === 'hasDate' && e) {
                this.fd.formsPage.elements[this.questionIndex].hasDate = true;
            }
            else if (quickSetting.toggleValue === 'hasTime' && e) {
                this.fd.formsPage.elements[this.questionIndex].hasTime = true;
            }
            else if (quickSetting.toggleValue === 'hasDate' && !e) {
                this.fd.formsPage.elements[this.questionIndex].hasDate = false;
                if (!this.fd.formsPage.elements[this.questionIndex].hasTime) {
                    this.fd.formsPage.elements[this.questionIndex].hasTime = true;
                }
            }
            else if (quickSetting.toggleValue === 'hasTime' && !e) {
                this.fd.formsPage.elements[this.questionIndex].hasTime = false;
                if (!this.fd.formsPage.elements[this.questionIndex].hasDate) {
                    this.fd.formsPage.elements[this.questionIndex].hasDate = true;
                }
            }
            this.fd.formsPage.elements[this.questionIndex][quickSetting.toggleValue] = e;
            return;
        }
        if (quickSetting.optionType === 'characterLength' && e) {
            this.fd.formsPage.elements[this.questionIndex].maxCharacterLength = 100;
            this.fd.formsPage.elements[this.questionIndex].minCharacterLength = 0;
        }
        this.fd.formsPage.elements[this.questionIndex][quickSetting.toggleValue] = e;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuickSettingsComponent, deps: [{ token: i1.EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QuickSettingsComponent, selector: "app-quick-setting", inputs: { questionIndex: "questionIndex", question: "question" }, outputs: { typeChanged: "typeChanged" }, ngImport: i0, template: "<div class=\"quick-settings\">\n    <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION TYPE</div>\n    <div class=\"settings-option vx-d-flex vx-align-center vx-justify-between vx-pb-2\" appPopover (click)=\"questionOption.popover()\" placement=\"right\">\n        <div class=\"content vx-d-flex vx-align-center\">\n            <div class=\"question-icon vx-d-flex vx-align-center vx-justify-center vx-mr-2\" [ngClass]=\"selectedQuestionDetails.questionClass\">\n                <i class=\"icons vx-fs-16 vx-txt-white\" [innerHTML]='selectedQuestionDetails.questionIcon'></i></div>\n            <div class=\"name vx-fs-14 vx-label-txt\">{{selectedQuestionDetails.questionName}}</div>\n        </div>\n        <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n    </div>\n    <app-popover #questionOption>\n        <div class=\"select-option vx-p-2 vx-pb-1\">\n            <ul class=\"vx-p-0 vx-m-0 vx-d-flex vx-flex-wrap\">\n                <li class=\"vx-d-flex vx-align-center vx-mt-1 vx-mb-1\" *ngFor=\"let menu of questionTypeDropdown\">\n                    <button class=\"vx-m-0 vx-p-0 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)='changeQuestionType(menu)'>\n                        <div [ngClass]=\"menu.questionClass\" class=\"question-icon vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\" [innerHTML]=\"menu?.questionIcon\">&#xeabd;</i></div>\n                        <div class=\"name vx-fs-12 vx-label-txt\">{{menu?.questionName}}</div>\n                    </button>\n                </li>\n            </ul>\n        </div>\n    </app-popover>\n    <div class=\"title vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-2\">QUICK SETTINGS</div>\n    <div class=\"settings-list\">\n        <ul class=\"vx-p-0 vx-m-0\">\n            <li class=\"vx-pt-3 vx-pb-3\" *ngFor='let quickSetting of quickSettingsList'>\n                <app-cs-switch \n                [ngValue]=\"fd.formsPage.elements[questionIndex][quickSetting.toggleValue]\"\n                (ngValueChange)=\"toggle($event,quickSetting);\"\n                [disabled]='quickSetting.title === \"Is required\" && fd.formsPage.elements[questionIndex].visibilityLogic.length > 0'>\n                    <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\">\n                        <div class=\"settings-name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">{{quickSetting.title}}</div>\n                        <i class=\"icons info vx-fs-14 vx-txt-blue\" *ngIf=\"quickSetting.toolTip.length>0\" [appTooltip]=\"quickSetting.toolTip\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xeb16;</i>\n                    </div>\n                </app-cs-switch>\n            </li>\n           \n        </ul>\n    </div>\n    <div class=\"max-min-field vx-d-flex vx-align-center vx-mt-3 vx-mb-2\" *ngIf=\"fd.formsPage.elements[questionIndex].hasCharacterLength\">\n        <input type=\"number\"  [(ngModel)]=\"fd.formsPage.elements[questionIndex].minCharacterLength\"/>\n        <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-5\">Min</span>\n        <input type=\"number\"  [(ngModel)]=\"fd.formsPage.elements[questionIndex].maxCharacterLength\"/>\n        <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">Max</span>\n    </div>\n</div>", 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\";::ng-deep .quick-settings .heading{position:relative}::ng-deep .quick-settings .heading:before{background:#1e5dd3;content:\"\";position:absolute;left:0;top:.0625rem;width:.125rem;height:.875rem}::ng-deep .quick-settings .settings-option{border-bottom:1px solid #F1F1F1;cursor:pointer;margin-bottom:1.875rem}::ng-deep .quick-settings .settings-option .content .question-icon{background:#ee5daf;border-radius:.25rem;width:1.5rem;min-width:1.5rem;height:1.5rem}::ng-deep .quick-settings .settings-option .content .question-icon.welcome-screen{background:#ee5daf}::ng-deep .quick-settings .settings-option .content .question-icon.thank-you-screen{background:#ee3939}::ng-deep .quick-settings .settings-option .content .question-icon.multiple-choice{background:#d1c131}::ng-deep .quick-settings .settings-option .content .question-icon.checkboxes{background:#6f81fc}::ng-deep .quick-settings .settings-option .content .question-icon.image-choice{background:#4681ef}::ng-deep .quick-settings .settings-option .content .question-icon.star-rating{background:#e8c247}::ng-deep .quick-settings .settings-option .content .question-icon.single-textbox{background:#2fd2cd}::ng-deep .quick-settings .settings-option .content .question-icon.comment-box{background:#acbb7e}::ng-deep .quick-settings .settings-option .content .question-icon.matrix-dropdown{background:#66bf72}::ng-deep .quick-settings .settings-option .content .question-icon.dropdown-icon{background:#9d9fe1}::ng-deep .quick-settings .settings-option .content .question-icon.matrix-rating{background:#67d2cd}::ng-deep .quick-settings .settings-option .content .question-icon.ranking{background:#ee9f24}::ng-deep .quick-settings .settings-option .content .question-icon.slider{background:#d1c131}::ng-deep .quick-settings .settings-option .content .question-icon.multiple-textbox{background:#66bf72}::ng-deep .quick-settings .settings-option .content .question-icon.date-time{background:#acbb7e}::ng-deep .quick-settings .settings-option .content .question-icon.file-upload{background:#4681ef}::ng-deep .quick-settings .settings-option .content .name{width:calc(100% - 1.75rem);white-space:nowrap}::ng-deep .quick-settings .settings-list ul{list-style-type:none}::ng-deep .quick-settings .settings-list ul li{border-bottom:1px solid #F1F1F1}::ng-deep .quick-settings .settings-list ul li app-cs-switch .cs-switch{cursor:pointer}::ng-deep .quick-settings .max-min-field input{background:#fff;border:1px solid #DBDBDB;border-radius:.125rem;color:#161b2f;font-size:13px;width:3.5rem;height:2.5rem;padding:0 .75rem;margin-right:.5rem;outline:none}.select-option{background:#fff;border-radius:.25rem;box-shadow:0 3px 6px #1c5bd140;width:25.5rem}.select-option ul{list-style-type:none}.select-option ul li{width:50%}.select-option ul li button{background:transparent;border:none;border-radius:0}.select-option ul li button .question-icon{background:#ee5daf;border-radius:.25rem;width:1.5rem;min-width:1.5rem;height:1.5rem}.select-option ul li button .question-icon.welcome-screen{background:#ee5daf}.select-option ul li button .question-icon.thank-you-screen{background:#ee3939}.select-option ul li button .question-icon.multiple-choice{background:#d1c131}.select-option ul li button .question-icon.checkboxes{background:#6f81fc}.select-option ul li button .question-icon.image-choice{background:#4681ef}.select-option ul li button .question-icon.star-rating{background:#e8c247}.select-option ul li button .question-icon.single-textbox{background:#2fd2cd}.select-option ul li button .question-icon.comment-box{background:#acbb7e}.select-option ul li button .question-icon.matrix-dropdown{background:#66bf72}.select-option ul li button .question-icon.dropdown-icon{background:#9d9fe1}.select-option ul li button .question-icon.matrix-rating{background:#67d2cd}.select-option ul li button .question-icon.ranking{background:#ee9f24}.select-option ul li button .question-icon.slider{background:#d1c131}.select-option ul li button .question-icon.multiple-textbox{background:#66bf72}.select-option ul li button .question-icon.date-time{background:#acbb7e}.select-option ul li button .question-icon.file-upload{background:#4681ef}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i4.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: i6.CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: i7.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: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QuickSettingsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-quick-setting', template: "<div class=\"quick-settings\">\n    <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-5 vx-pl-2\">QUESTION TYPE</div>\n    <div class=\"settings-option vx-d-flex vx-align-center vx-justify-between vx-pb-2\" appPopover (click)=\"questionOption.popover()\" placement=\"right\">\n        <div class=\"content vx-d-flex vx-align-center\">\n            <div class=\"question-icon vx-d-flex vx-align-center vx-justify-center vx-mr-2\" [ngClass]=\"selectedQuestionDetails.questionClass\">\n                <i class=\"icons vx-fs-16 vx-txt-white\" [innerHTML]='selectedQuestionDetails.questionIcon'></i></div>\n            <div class=\"name vx-fs-14 vx-label-txt\">{{selectedQuestionDetails.questionName}}</div>\n        </div>\n        <i class=\"icons vx-fs-10 vx-paragraph-txt\">&#xe9e8;</i>\n    </div>\n    <app-popover #questionOption>\n        <div class=\"select-option vx-p-2 vx-pb-1\">\n            <ul class=\"vx-p-0 vx-m-0 vx-d-flex vx-flex-wrap\">\n                <li class=\"vx-d-flex vx-align-center vx-mt-1 vx-mb-1\" *ngFor=\"let menu of questionTypeDropdown\">\n                    <button class=\"vx-m-0 vx-p-0 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)='changeQuestionType(menu)'>\n                        <div [ngClass]=\"menu.questionClass\" class=\"question-icon vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\" [innerHTML]=\"menu?.questionIcon\">&#xeabd;</i></div>\n                        <div class=\"name vx-fs-12 vx-label-txt\">{{menu?.questionName}}</div>\n                    </button>\n                </li>\n            </ul>\n        </div>\n    </app-popover>\n    <div class=\"title vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-2\">QUICK SETTINGS</div>\n    <div class=\"settings-list\">\n        <ul class=\"vx-p-0 vx-m-0\">\n            <li class=\"vx-pt-3 vx-pb-3\" *ngFor='let quickSetting of quickSettingsList'>\n                <app-cs-switch \n                [ngValue]=\"fd.formsPage.elements[questionIndex][quickSetting.toggleValue]\"\n                (ngValueChange)=\"toggle($event,quickSetting);\"\n                [disabled]='quickSetting.title === \"Is required\" && fd.formsPage.elements[questionIndex].visibilityLogic.length > 0'>\n                    <div class=\"vx-d-flex vx-align-center vx-justify-between vx-w-100\">\n                        <div class=\"settings-name vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">{{quickSetting.title}}</div>\n                        <i class=\"icons info vx-fs-14 vx-txt-blue\" *ngIf=\"quickSetting.toolTip.length>0\" [appTooltip]=\"quickSetting.toolTip\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xeb16;</i>\n                    </div>\n                </app-cs-switch>\n            </li>\n           \n        </ul>\n    </div>\n    <div class=\"max-min-field vx-d-flex vx-align-center vx-mt-3 vx-mb-2\" *ngIf=\"fd.formsPage.elements[questionIndex].hasCharacterLength\">\n        <input type=\"number\"  [(ngModel)]=\"fd.formsPage.elements[questionIndex].minCharacterLength\"/>\n        <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mr-5\">Min</span>\n        <input type=\"number\"  [(ngModel)]=\"fd.formsPage.elements[questionIndex].maxCharacterLength\"/>\n        <span class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase\">Max</span>\n    </div>\n</div>", 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\";::ng-deep .quick-settings .heading{position:relative}::ng-deep .quick-settings .heading:before{background:#1e5dd3;content:\"\";position:absolute;left:0;top:.0625rem;width:.125rem;height:.875rem}::ng-deep .quick-settings .settings-option{border-bottom:1px solid #F1F1F1;cursor:pointer;margin-bottom:1.875rem}::ng-deep .quick-settings .settings-option .content .question-icon{background:#ee5daf;border-radius:.25rem;width:1.5rem;min-width:1.5rem;height:1.5rem}::ng-deep .quick-settings .settings-option .content .question-icon.welcome-screen{background:#ee5daf}::ng-deep .quick-settings .settings-option .content .question-icon.thank-you-screen{background:#ee3939}::ng-deep .quick-settings .settings-option .content .question-icon.multiple-choice{background:#d1c131}::ng-deep .quick-settings .settings-option .content .question-icon.checkboxes{background:#6f81fc}::ng-deep .quick-settings .settings-option .content .question-icon.image-choice{background:#4681ef}::ng-deep .quick-settings .settings-option .content .question-icon.star-rating{background:#e8c247}::ng-deep .quick-settings .settings-option .content .question-icon.single-textbox{background:#2fd2cd}::ng-deep .quick-settings .settings-option .content .question-icon.comment-box{background:#acbb7e}::ng-deep .quick-settings .settings-option .content .question-icon.matrix-dropdown{background:#66bf72}::ng-deep .quick-settings .settings-option .content .question-icon.dropdown-icon{background:#9d9fe1}::ng-deep .quick-settings .settings-option .content .question-icon.matrix-rating{background:#67d2cd}::ng-deep .quick-settings .settings-option .content .question-icon.ranking{background:#ee9f24}::ng-deep .quick-settings .settings-option .content .question-icon.slider{background:#d1c131}::ng-deep .quick-settings .settings-option .content .question-icon.multiple-textbox{background:#66bf72}::ng-deep .quick-settings .settings-option .content .question-icon.date-time{background:#acbb7e}::ng-deep .quick-settings .settings-option .content .question-icon.file-upload{background:#4681ef}::ng-deep .quick-settings .settings-option .content .name{width:calc(100% - 1.75rem);white-space:nowrap}::ng-deep .quick-settings .settings-list ul{list-style-type:none}::ng-deep .quick-settings .settings-list ul li{border-bottom:1px solid #F1F1F1}::ng-deep .quick-settings .settings-list ul li app-cs-switch .cs-switch{cursor:pointer}::ng-deep .quick-settings .max-min-field input{background:#fff;border:1px solid #DBDBDB;border-radius:.125rem;color:#161b2f;font-size:13px;width:3.5rem;height:2.5rem;padding:0 .75rem;margin-right:.5rem;outline:none}.select-option{background:#fff;border-radius:.25rem;box-shadow:0 3px 6px #1c5bd140;width:25.5rem}.select-option ul{list-style-type:none}.select-option ul li{width:50%}.select-option ul li button{background:transparent;border:none;border-radius:0}.select-option ul li button .question-icon{background:#ee5daf;border-radius:.25rem;width:1.5rem;min-width:1.5rem;height:1.5rem}.select-option ul li button .question-icon.welcome-screen{background:#ee5daf}.select-option ul li button .question-icon.thank-you-screen{background:#ee3939}.select-option ul li button .question-icon.multiple-choice{background:#d1c131}.select-option ul li button .question-icon.checkboxes{background:#6f81fc}.select-option ul li button .question-icon.image-choice{background:#4681ef}.select-option ul li button .question-icon.star-rating{background:#e8c247}.select-option ul li button .question-icon.single-textbox{background:#2fd2cd}.select-option ul li button .question-icon.comment-box{background:#acbb7e}.select-option ul li button .question-icon.matrix-dropdown{background:#66bf72}.select-option ul li button .question-icon.dropdown-icon{background:#9d9fe1}.select-option ul li button .question-icon.matrix-rating{background:#67d2cd}.select-option ul li button .question-icon.ranking{background:#ee9f24}.select-option ul li button .question-icon.slider{background:#d1c131}.select-option ul li button .question-icon.multiple-textbox{background:#66bf72}.select-option ul li button .question-icon.date-time{background:#acbb7e}.select-option ul li button .question-icon.file-upload{background:#4681ef}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.EditorService }]; }, propDecorators: { questionIndex: [{
                type: Input
            }], question: [{
                type: Input
            }], typeChanged: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 