import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../choice-settings-panel/choice-settings-panel.component";
export class MultipleChoiceComponent {
    constructor(cdr) {
        this.cdr = cdr;
        this.addOption = new EventEmitter();
        this.deleteOption = new EventEmitter();
    }
    ngOnInit() {
    }
    modifyOption(mode, choiceIndex, type) {
        if (mode === 'ADD') {
            this.addOption.emit({ choiceIndex, type });
        }
        else if (mode === 'DELETE') {
            this.deleteOption.emit({ choiceIndex, type });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultipleChoiceComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultipleChoiceComponent, selector: "app-multiple-choice", inputs: { question: "question", service: "service" }, outputs: { addOption: "addOption", deleteOption: "deleteOption" }, ngImport: i0, template: "<div class=\"multiple-choice vx-d-flex vx-mb-4\" *ngFor=\"let choice of question?.choices; let choiceIndex = index\">\n    <div class=\"left\">\n        <input type=\"text\" placeholder=\"Option\" [attr.id]='\"radio-\"+choiceIndex' (keyup.enter)=\"modifyOption('ADD',choiceIndex,'radio-')\" [(ngModel)]=\"choice.title\" />\n        <div class=\"option-color vx-d-flex vx-align-center vx-justify-center\">\n            <input type=\"color\" [(ngModel)]=\"choice.color\">\n            <i class=\"icons vx-fs-16\" [style.color]='choice.color'>&#xeb01;</i>\n        </div>\n        <!-- <button  class=\"choice-icon vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons\">&#xe913;</i></button> -->\n        <app-choice-settings-panel [defaultScore]=\"service.score.defaultScore\" [negativeScore]=\"service.score.negativeScore\" [scoreVisible]='service.formsPage.settings.assessmentMode' [(isFailed)]='choice.isFailed' [(score)]='choice.score'></app-choice-settings-panel>\n    </div>\n    <div class=\"right vx-d-flex vx-align-center vx-ml-1\">\n        <button class=\"vx-fs-24 vx-paragraph-txt vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"  (click)=\"modifyOption('ADD',choiceIndex,'radio-')\">+</button>\n        <button class=\"vx-fs-24 vx-paragraph-txt vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"  (click)=\"modifyOption('DELETE',choiceIndex,'radio-')\" [class.disabled]=\"question?.choices?.length === 1\">-</button>\n    </div>\n</div>\n<div class=\"multiple-choice vx-d-flex vx-mb-4\" *ngIf=\"question?.hasOther\">\n    <div class=\"left\">\n        <input type=\"text\" disabled placeholder=\"Option\" [attr.id]='\"radio-\"' [(ngModel)]=\"question.otherValue\">\n        <div class=\"option-color vx-d-flex vx-align-center vx-justify-center\">\n            <input type=\"color\" [(ngModel)]=\"question.otherConfig.color\">\n            <i class=\"icons vx-fs-16\"  [style.color]='question.otherConfig.color'>&#xeb01;</i>\n        </div>\n        <!-- <button  class=\"choice-icon vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons\">&#xe913;</i></button> -->\n      <app-choice-settings-panel [scoreVisible]='service.formsPage.settings.assessmentMode'\n       [(isFailed)]='question.otherConfig.isFailed'\n       [defaultScore]=\"service.score.defaultScore\" [negativeScore]=\"service.score.negativeScore\"\n       [(score)]='question.otherConfig.score'></app-choice-settings-panel>\n    </div>\n  \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\";.multiple-choice .left{width:calc(100% - 4.75rem);position:relative}.multiple-choice .left input[type=text]{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:.5rem 2.75rem;width:100%;height:2.5rem;outline:none;transition:all .3s ease-in-out}.multiple-choice .left input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.multiple-choice .left .option-color{background:#f1f1f1;border-radius:.125rem;width:1.5rem;height:1.5rem;position:absolute;top:.5rem;left:.5rem}.multiple-choice .left .option-color input[type=color]{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}.multiple-choice .left button.choice-icon{background:transparent;border:none;border-radius:0;position:absolute;top:.75rem;right:.5rem}.multiple-choice .right{width:4.5rem;height:2.5rem}.multiple-choice .right button{background:#f8f8f8;border-radius:50%;border:none;width:2rem;height:2rem}.multiple-choice .right button.disabled{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ChoiceSettingsPanelComponent, selector: "app-choice-settings-panel", inputs: ["defaultScore", "negativeScore", "isFailed", "score", "scoreVisible"], outputs: ["isFailedChange", "scoreChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultipleChoiceComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-multiple-choice', template: "<div class=\"multiple-choice vx-d-flex vx-mb-4\" *ngFor=\"let choice of question?.choices; let choiceIndex = index\">\n    <div class=\"left\">\n        <input type=\"text\" placeholder=\"Option\" [attr.id]='\"radio-\"+choiceIndex' (keyup.enter)=\"modifyOption('ADD',choiceIndex,'radio-')\" [(ngModel)]=\"choice.title\" />\n        <div class=\"option-color vx-d-flex vx-align-center vx-justify-center\">\n            <input type=\"color\" [(ngModel)]=\"choice.color\">\n            <i class=\"icons vx-fs-16\" [style.color]='choice.color'>&#xeb01;</i>\n        </div>\n        <!-- <button  class=\"choice-icon vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons\">&#xe913;</i></button> -->\n        <app-choice-settings-panel [defaultScore]=\"service.score.defaultScore\" [negativeScore]=\"service.score.negativeScore\" [scoreVisible]='service.formsPage.settings.assessmentMode' [(isFailed)]='choice.isFailed' [(score)]='choice.score'></app-choice-settings-panel>\n    </div>\n    <div class=\"right vx-d-flex vx-align-center vx-ml-1\">\n        <button class=\"vx-fs-24 vx-paragraph-txt vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"  (click)=\"modifyOption('ADD',choiceIndex,'radio-')\">+</button>\n        <button class=\"vx-fs-24 vx-paragraph-txt vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"  (click)=\"modifyOption('DELETE',choiceIndex,'radio-')\" [class.disabled]=\"question?.choices?.length === 1\">-</button>\n    </div>\n</div>\n<div class=\"multiple-choice vx-d-flex vx-mb-4\" *ngIf=\"question?.hasOther\">\n    <div class=\"left\">\n        <input type=\"text\" disabled placeholder=\"Option\" [attr.id]='\"radio-\"' [(ngModel)]=\"question.otherValue\">\n        <div class=\"option-color vx-d-flex vx-align-center vx-justify-center\">\n            <input type=\"color\" [(ngModel)]=\"question.otherConfig.color\">\n            <i class=\"icons vx-fs-16\"  [style.color]='question.otherConfig.color'>&#xeb01;</i>\n        </div>\n        <!-- <button  class=\"choice-icon vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons\">&#xe913;</i></button> -->\n      <app-choice-settings-panel [scoreVisible]='service.formsPage.settings.assessmentMode'\n       [(isFailed)]='question.otherConfig.isFailed'\n       [defaultScore]=\"service.score.defaultScore\" [negativeScore]=\"service.score.negativeScore\"\n       [(score)]='question.otherConfig.score'></app-choice-settings-panel>\n    </div>\n  \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\";.multiple-choice .left{width:calc(100% - 4.75rem);position:relative}.multiple-choice .left input[type=text]{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:.5rem 2.75rem;width:100%;height:2.5rem;outline:none;transition:all .3s ease-in-out}.multiple-choice .left input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}.multiple-choice .left .option-color{background:#f1f1f1;border-radius:.125rem;width:1.5rem;height:1.5rem;position:absolute;top:.5rem;left:.5rem}.multiple-choice .left .option-color input[type=color]{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}.multiple-choice .left button.choice-icon{background:transparent;border:none;border-radius:0;position:absolute;top:.75rem;right:.5rem}.multiple-choice .right{width:4.5rem;height:2.5rem}.multiple-choice .right button{background:#f8f8f8;border-radius:50%;border:none;width:2rem;height:2rem}.multiple-choice .right button.disabled{pointer-events:none;opacity:.5}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { question: [{
                type: Input
            }], service: [{
                type: Input
            }], addOption: [{
                type: Output
            }], deleteOption: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 