import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { nanoid } from 'nanoid';
import { cloneDeep } from 'lodash';
import * as i0 from "@angular/core";
import * as i1 from "../../services/result-criteria.service";
import * as i2 from "@angular/common";
import * as i3 from "../../../../ui-kit/tooltip/tooltip.directive";
import * as i4 from "@vcomply/editor";
import * as i5 from "@angular/forms";
import * as i6 from "../add-segment-popup/add-segment-popup.component";
export class SettingResponseSegmentComponent {
    editSegment() { }
    closeSegmentPopup() { }
    openSegmentPopup() { }
    set settingData(value) {
        this.setting = value;
        this.localSetting = cloneDeep(value);
    }
    constructor(el, criteriaService) {
        this.el = el;
        this.criteriaService = criteriaService;
        // constructor() { }
        // ngOnInit(): void {
        // }
        this.description = {
            mode: 'prime',
            placeholder: 'Enter Segment criteria description',
        };
        this.save = new EventEmitter();
        this.showResultPopup = false;
        this.showResultEditPopup = false;
        this.selectedSegment = {
            id: nanoid(),
            segmentName: '',
            segmentDescription: '',
            toRange: 0,
            fromRange: 0,
            color: '#000000'
        };
        this.closed = new EventEmitter();
        this.cancelEvt = new EventEmitter();
        this.resultCriteria = [];
        this.maxRange = 10;
        this.errorArray = [];
    }
    ngOnInit() {
        this.maxRange = this.criteriaService.calculateMaxScore(this.fd.formsPage);
    }
    addNewSegment() {
        this.showResultEditPopup = false;
        this.mode = 'ADD';
        this.selectedSegment = {
            id: nanoid(14),
            segmentName: '',
            segmentDescription: '',
            fromRange: 0,
            toRange: this.maxRange,
            color: '#000000'
        };
        this.clickResultPopup();
    }
    closePopUp() {
        this.closed.emit();
    }
    closeSegment() {
        this.showResultPopup = false;
        this.showResultEditPopup = false;
        this.editIndex = -10;
    }
    clickResultPopup() {
        this.editIndex = -10;
        const popover = this.button.nativeElement.getBoundingClientRect();
        let left = 0;
        let top = 0;
        top = popover.top;
        left = popover.left;
        this.showResultPopup = !this.showResultPopup;
        this.showResultEditPopup = false;
        this.popoverLeft = left + 10;
        this.popoverTop = top - 350;
    }
    editResultPopup(event, segment, i) {
        this.editIndex = i;
        this.mode = 'EDIT';
        this.selectedSegment = segment;
        const popover = event.target.parentElement.parentElement.parentElement.parentElement.getBoundingClientRect();
        let left = 0;
        let top = 0;
        top = popover.top;
        left = popover.left;
        this.showResultEditPopup = true;
        this.showResultPopup = false;
        this.popoverLeft = left + 10;
        this.popoverTop = top - 350;
    }
    saveCriteria(evt) {
        if (this.mode === 'ADD') {
            this.showResultPopup = !this.showResultPopup;
            this.setting.segmentData.segments.push(evt);
        }
        else if (this.mode === 'EDIT') {
            this.showResultEditPopup = !this.showResultEditPopup;
            const index = this.setting.segmentData.segments.findIndex((x) => x.id === evt.id);
            this.setting.segmentData.segments[index] = evt;
        }
    }
    deleteSegment(index) {
        this.setting.segmentData.segments.splice(index, 1);
    }
    saveSetting() {
        this.editIndex = -10;
        this.showResultEditPopup = false;
        this.showResultPopup = false;
        this.errorArray = [];
        if (this.setting.segmentData.title.trim().length === 0) {
            this.errorArray.push({ type: 'SEGMENT_NAME_MISSING', message: 'Please enter the segment criteria name.' });
            return false;
        }
        else if (this.setting.segmentData.segments.length === 0) {
            this.errorArray.push({ type: 'NO_SEGMENT_FOUND', message: 'Please add atleast one segment.' });
            return false;
        }
        this.save.emit(this.setting);
    }
    discardEdit(index) {
        this.editIndex = -10;
        this.showResultEditPopup = false;
    }
    closeSegmentResult() {
        this.editIndex = -10;
        this.showResultEditPopup = false;
        this.showResultPopup = false;
    }
    cancel() {
        this.cancelEvt.emit(this.localSetting);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingResponseSegmentComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResultCriteriaService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SettingResponseSegmentComponent, selector: "app-setting-response-segment", inputs: { settingData: ["setting", "settingData"], formJSON: "formJSON", fd: "fd" }, outputs: { save: "save", closed: "closed", cancelEvt: "cancelEvt" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "buttonEdit", first: true, predicate: ["buttonEdit"], descendants: true }], ngImport: i0, template: "<div class=\"item-body vx-pt-3 vx-pb-3\" [class.error]=\"errorArray.length > 0\" *ngIf=\"true\">\n    <!-- <app-cs-switch [value]=\"setting?.settingEnableText\" [(ngValue)]=\"setting.isEnabled\" ><div class=\"vx-fs-13 vx-paragraph-txt\">Configure Response Segments for this form</div></app-cs-switch> -->\n    <!-- *ngIf=\"setting.isEnabled\" -->\n     <div  class=\"segment-form vx-mt-4\">\n        <div class=\"form-item vx-mb-4\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT CRITERIA <span class=\"vx-fs-16 vx-fw-400 vx-txt-red\">*</span></div>\n            <input type=\"text\" placeholder=\"Enter Segment criteria\" [(ngModel)]=\"setting.segmentData.title\">\n        </div>\n        <div class=\"form-item vx-mb-4\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT CRITERIA DESCRIPTION</div>\n            <vcomply-editor [editorConfig]=\"description\"  [(ngModel)]=\"setting.segmentData.description\"></vcomply-editor>\n        </div>\n        <div class=\"form-item vx-mb-4\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">MAXIMUM SCORE RANGE:</div>\n            <span class=\"score-label vx-fs-11 vx-fw-600 vx-paragraph-txt vx-pl-1 vx-pr-1 vx-lh-4\">0 - {{maxRange}}</span>\n        </div>\n        <div class=\"form-item vx-mb-4\" *ngIf=\"setting?.segmentData?.segments?.length > 0\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">ASSOCIATED SEGMENTS:</div>\n            <div class=\"associated-list vx-mb-1\"  *ngFor=\"let segment of setting?.segmentData?.segments; let i = index\">\n                <div class=\"vx-d-flex vx-align-center vx-justify-between\"  *ngIf=\"!(showResultEditPopup && editIndex === i)\">\n                    <div class=\"left vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\">\n                        <div class=\"name vx-fs-12\"   [style.color]=\"segment?.color\" [appTooltip]=\"segment?.segmentName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{segment?.segmentName}}</div>\n                        <i *ngIf=\"segment?.segmentDescription\" class=\"icons info vx-fs-16 vx-txt-blue\" [appTooltip]=\"segment?.segmentDescription\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\n                    </div>\n                    <div class=\"right\">\n                        <div class=\"score vx-align-center vx-pl-2 vx-pr-2\" [style.background]=\"segment?.color\">\n                            <span class=\"vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-mr-3\">RANGE:</span>\n                            <span class=\"vx-fs-11 vx-fw-600 vx-txt-white\">{{' '+segment?.fromRange}} - {{segment?.toRange}}</span>\n                        </div>\n                        <div class=\"action vx-align-center vx-justify-center vx-pl-2 vx-pr-2\">\n                            <button  *ngIf=\"!(showResultEditPopup && editIndex === i)\" (click)=\"editResultPopup($event,segment,i)\" class=\"vx-fs-14 vx-txt-blue vx-p-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"editSegment()\"><i class=\"icons\">&#xe9ba;</i></button>\n                            <button (click)=\"deleteSegment(i)\" class=\"vx-fs-14 vx-txt-blue vx-p-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons\">&#xe923;</i></button>\n                        </div>\n                    </div>\n                </div>\n                <button *ngIf=\"showResultEditPopup\" class=\"segment-close vx-fs-12 vx-fw-600 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"closeSegment()\"><i class=\"icons\">&#xe9ae;</i></button>\n                <div class=\"segment-popup\" *ngIf=\"showResultEditPopup\">\n                    <app-add-segment-popup [mode]=\"mode\" [criteria]=\"selectedSegment\"\n                    [segmentCollection]=\"setting?.segmentData?.segments\" (save)=\"saveCriteria($event)\"\n                    (closeSegment)=\"closeSegmentResult()\" [maxRange]=\"maxRange\"></app-add-segment-popup>\n                </div>\n                <div class=\"overlay\" *ngIf=\"showResultEditPopup\"></div>\n            </div>\n        </div>\n        <div class=\"form-item vx-mb-4\">\n            <button *ngIf=\"!showResultPopup\" #button (click)=\"addNewSegment()\" class=\"segment-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\" (click)=\"openSegmentPopup()\"><i class=\"icons vx-fs-14 vx-fw-600 vx-mr-4 vx-lh-4\">&#xe915;</i> ADD SEGMENT</button>\n            <button *ngIf=\"showResultPopup\" (click)=\"closeSegment()\" class=\"segment-close vx-fs-12 vx-fw-600 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" ><i class=\"icons\">&#xe9ae;</i></button>\n            <div class=\"segment-popup\" *ngIf=\"showResultPopup\">\n                <app-add-segment-popup [mode]=\"mode\" [criteria]=\"selectedSegment\"\n                [segmentCollection]=\"setting?.segmentData?.segments\" (save)=\"saveCriteria($event)\"\n                (closeSegment)=\"closeSegmentResult()\" [maxRange]=\"maxRange\"></app-add-segment-popup>\n            </div>\n            <div class=\"overlay\" *ngIf=\"showResultPopup\"></div>\n        </div>\n        <div class=\"segment-bottom vx-d-flex vx-align-center vx-justify-end vx-p-2\" *ngIf=\"errorArray.length === 0\">\n            <button (click)=\"cancel()\" class=\"cancel-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\">CANCEL</button>\n            <button (click)=\"saveSetting()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\">SAVE</button>\n        </div>\n        <div class=\"segment-bottom error vx-d-flex vx-align-center vx-justify-between vx-p-2\" *ngIf=\"errorArray.length > 0\">\n            <div class=\"text vx-fs-12 vx-txt-white\">{{errorArray[0]?.message}}</div>\n            <button (click)=\"saveSetting()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-red vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\">SAVE</button>\n        </div>\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 .assessment-settings{background:#fff;width:31.25rem;height:100vh}::ng-deep .assessment-settings-head{background:#f8f8f8;border-bottom:1px solid #F1F1F1;height:3rem}::ng-deep .assessment-settings-head i.info{cursor:pointer}::ng-deep .assessment-settings-head button.close{background:transparent;border:none;border-radius:0}::ng-deep .assessment-settings-body{padding-left:2.25rem;padding-right:1rem;width:32.25rem;position:relative;left:-1rem;height:calc(100vh - 3.5rem);overflow-y:auto}::ng-deep .assessment-settings-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .assessment-settings-body .settings-item{border:1px solid #DBDBDB;border-radius:.25rem;position:relative;transition:all .3s ease-in-out}::ng-deep .assessment-settings-body .settings-item:hover,::ng-deep .assessment-settings-body .settings-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}::ng-deep .assessment-settings-body .settings-item.done{background:#fbfbfb;border-color:#f1f1f1}::ng-deep .assessment-settings-body .settings-item.done:hover{border-color:#1e5dd3}::ng-deep .assessment-settings-body .settings-item .status{background:#fff;border-radius:50%;position:absolute;left:-2.25rem;top:.35rem;width:1.75rem;height:1.75rem;transition:all .1s ease-in-out;z-index:1}::ng-deep .assessment-settings-body .settings-item .status.done .checkIcon{position:absolute;top:-1px;width:29px;height:29px;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}::ng-deep .assessment-settings-body .settings-item .status.done .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .assessment-settings-body .settings-item .status.done .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .assessment-settings-body .settings-item .status.edit .edit-loader{position:absolute;top:-.1875rem;left:-.1875rem;right:0;bottom:0;width:34px;height:34px;transform:rotate(90deg)}::ng-deep .assessment-settings-body .settings-item .status.edit .editmark{width:28px;height:28px;border-radius:50%;stroke-width:4;stroke:#1e5dd3;stroke-miterlimit:10;box-shadow:inset 0 0 #1e5dd3}::ng-deep .assessment-settings-body .settings-item .status.edit .editmark__circle{stroke-dasharray:0;stroke-dashoffset:0;stroke-width:0;stroke-miterlimit:10;stroke:#f1f1f1;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;transform:scale(.23)}::ng-deep .assessment-settings-body .settings-item .status.edit .editmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;fill:#1e5dd3;transform:scale(.5)}::ng-deep .assessment-settings-body .settings-item .item-head{min-height:2.5rem;width:100%;cursor:pointer}::ng-deep .assessment-settings-body .settings-item .item-head .name I.info{position:relative;top:1px;cursor:pointer}::ng-deep .assessment-settings-body .settings-item .item-body{border-top:1px solid #F1F1F1}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item{border:1px solid #DBDBDB;border-radius:.25rem;min-height:2.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item.done{background:#fbfbfb;border-color:#f1f1f1}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item.done .criteria-list{border-color:#f1f1f1}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score-area{border-left:1px solid #DBDBDB;width:9.5rem;height:2.375rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score-area .input-area button{background:transparent;border:none;border-radius:0;height:1.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score-area .input-area input{background:#fff;border:1px solid #F1F1F1;border-radius:.25rem;color:#747576;font-size:13px;text-align:center;width:44px;height:1.5rem;outline:none}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score{background:#fff;border:1px solid #F1F1F1;border-radius:.125rem;margin:.375rem .375rem .375rem 0;min-width:4.5rem;max-width:5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .criteria-list{border-top:1px solid #DBDBDB}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .criteria-list cs-radio{display:block;margin-bottom:.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item app-cs-switch{width:100%}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item{position:relative;min-height:2.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:0 .75rem;height:2.5rem;width:100%;outline:none;transition:all .3s ease-in-out}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input:hover,::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input::placeholder{color:#747576;opacity:1}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item vcomply-editor .editor-container .editable-block{font-size:12px;padding:.5rem .75rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .score-label{background:#f1f1f1;border-radius:.125rem;position:relative;top:-.375rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list{background:#f8f8f8;border-radius:.125rem;height:2rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .left{width:calc(100% - 6.5rem)}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .left .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 2rem)}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .left i.info{cursor:pointer}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right{width:6.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right .score{border-radius:0 .125rem .125rem 0;height:2rem;display:flex}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right .action{height:2rem;display:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right .action button{background:transparent;border:none;border-radius:0}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list:hover .right .score{display:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list:hover .right .action{display:flex}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list button.segment-close{top:-.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item button.segment-btn{background:#fff;border:1px solid #1e5dd3;border-radius:.25rem;height:2.5rem;width:100%}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item button.segment-close{background:#1e5dd3;border:.25rem solid #FFFFFF;border-radius:50%;width:36px;height:36px;margin:.125rem auto;position:relative;z-index:3}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .segment-popup{position:absolute;bottom:1.25rem;left:.875rem;width:25rem;z-index:2}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom{background:#fbfbfb;border-top:1px solid #F1F1F1;border-radius:0 0 .1875rem .1875rem;height:2.75rem;margin:0 0 -.75rem -1rem;width:calc(100% + 2rem)}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button{border-radius:.125rem;height:1.875rem;width:5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button.cancel-btn{background:#fff;border:1px solid #DBDBDB}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button.save-btn{background:#1e5dd3;border:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button.disabled{background:#f1f1f1;color:#747576;pointer-events:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom.error{background:#d93b41}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom.error button{border-radius:.125rem;height:1.875rem;width:5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom.error button.save-btn{background:#fff}::ng-deep .assessment-settings-body .settings-item.skeleton-loader{background:#f8f8f8;border-color:#f1f1f1;height:2.5rem}::ng-deep .assessment-settings-body .settings-item.skeleton-loader .loader{background:#dbdbdb;border-radius:.5rem;height:.5rem;width:12rem}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillEdit{to{box-shadow:inset 0 0 0 2px #1e5dd3}}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep app-cs-switch .cs-switch{cursor:pointer}\n"], dependencies: [{ 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.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.AddSegmentPopupComponent, selector: "app-add-segment-popup", inputs: ["top", "left", "segmentCollection", "mode", "maxRange", "criteria"], outputs: ["save", "closeSegment"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingResponseSegmentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-setting-response-segment', template: "<div class=\"item-body vx-pt-3 vx-pb-3\" [class.error]=\"errorArray.length > 0\" *ngIf=\"true\">\n    <!-- <app-cs-switch [value]=\"setting?.settingEnableText\" [(ngValue)]=\"setting.isEnabled\" ><div class=\"vx-fs-13 vx-paragraph-txt\">Configure Response Segments for this form</div></app-cs-switch> -->\n    <!-- *ngIf=\"setting.isEnabled\" -->\n     <div  class=\"segment-form vx-mt-4\">\n        <div class=\"form-item vx-mb-4\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT CRITERIA <span class=\"vx-fs-16 vx-fw-400 vx-txt-red\">*</span></div>\n            <input type=\"text\" placeholder=\"Enter Segment criteria\" [(ngModel)]=\"setting.segmentData.title\">\n        </div>\n        <div class=\"form-item vx-mb-4\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT CRITERIA DESCRIPTION</div>\n            <vcomply-editor [editorConfig]=\"description\"  [(ngModel)]=\"setting.segmentData.description\"></vcomply-editor>\n        </div>\n        <div class=\"form-item vx-mb-4\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">MAXIMUM SCORE RANGE:</div>\n            <span class=\"score-label vx-fs-11 vx-fw-600 vx-paragraph-txt vx-pl-1 vx-pr-1 vx-lh-4\">0 - {{maxRange}}</span>\n        </div>\n        <div class=\"form-item vx-mb-4\" *ngIf=\"setting?.segmentData?.segments?.length > 0\">\n            <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">ASSOCIATED SEGMENTS:</div>\n            <div class=\"associated-list vx-mb-1\"  *ngFor=\"let segment of setting?.segmentData?.segments; let i = index\">\n                <div class=\"vx-d-flex vx-align-center vx-justify-between\"  *ngIf=\"!(showResultEditPopup && editIndex === i)\">\n                    <div class=\"left vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\">\n                        <div class=\"name vx-fs-12\"   [style.color]=\"segment?.color\" [appTooltip]=\"segment?.segmentName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{segment?.segmentName}}</div>\n                        <i *ngIf=\"segment?.segmentDescription\" class=\"icons info vx-fs-16 vx-txt-blue\" [appTooltip]=\"segment?.segmentDescription\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\n                    </div>\n                    <div class=\"right\">\n                        <div class=\"score vx-align-center vx-pl-2 vx-pr-2\" [style.background]=\"segment?.color\">\n                            <span class=\"vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-mr-3\">RANGE:</span>\n                            <span class=\"vx-fs-11 vx-fw-600 vx-txt-white\">{{' '+segment?.fromRange}} - {{segment?.toRange}}</span>\n                        </div>\n                        <div class=\"action vx-align-center vx-justify-center vx-pl-2 vx-pr-2\">\n                            <button  *ngIf=\"!(showResultEditPopup && editIndex === i)\" (click)=\"editResultPopup($event,segment,i)\" class=\"vx-fs-14 vx-txt-blue vx-p-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"editSegment()\"><i class=\"icons\">&#xe9ba;</i></button>\n                            <button (click)=\"deleteSegment(i)\" class=\"vx-fs-14 vx-txt-blue vx-p-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons\">&#xe923;</i></button>\n                        </div>\n                    </div>\n                </div>\n                <button *ngIf=\"showResultEditPopup\" class=\"segment-close vx-fs-12 vx-fw-600 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"closeSegment()\"><i class=\"icons\">&#xe9ae;</i></button>\n                <div class=\"segment-popup\" *ngIf=\"showResultEditPopup\">\n                    <app-add-segment-popup [mode]=\"mode\" [criteria]=\"selectedSegment\"\n                    [segmentCollection]=\"setting?.segmentData?.segments\" (save)=\"saveCriteria($event)\"\n                    (closeSegment)=\"closeSegmentResult()\" [maxRange]=\"maxRange\"></app-add-segment-popup>\n                </div>\n                <div class=\"overlay\" *ngIf=\"showResultEditPopup\"></div>\n            </div>\n        </div>\n        <div class=\"form-item vx-mb-4\">\n            <button *ngIf=\"!showResultPopup\" #button (click)=\"addNewSegment()\" class=\"segment-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\" (click)=\"openSegmentPopup()\"><i class=\"icons vx-fs-14 vx-fw-600 vx-mr-4 vx-lh-4\">&#xe915;</i> ADD SEGMENT</button>\n            <button *ngIf=\"showResultPopup\" (click)=\"closeSegment()\" class=\"segment-close vx-fs-12 vx-fw-600 vx-txt-white vx-p-0 vx-d-flex vx-align-center vx-justify-center\" ><i class=\"icons\">&#xe9ae;</i></button>\n            <div class=\"segment-popup\" *ngIf=\"showResultPopup\">\n                <app-add-segment-popup [mode]=\"mode\" [criteria]=\"selectedSegment\"\n                [segmentCollection]=\"setting?.segmentData?.segments\" (save)=\"saveCriteria($event)\"\n                (closeSegment)=\"closeSegmentResult()\" [maxRange]=\"maxRange\"></app-add-segment-popup>\n            </div>\n            <div class=\"overlay\" *ngIf=\"showResultPopup\"></div>\n        </div>\n        <div class=\"segment-bottom vx-d-flex vx-align-center vx-justify-end vx-p-2\" *ngIf=\"errorArray.length === 0\">\n            <button (click)=\"cancel()\" class=\"cancel-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\">CANCEL</button>\n            <button (click)=\"saveSetting()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\">SAVE</button>\n        </div>\n        <div class=\"segment-bottom error vx-d-flex vx-align-center vx-justify-between vx-p-2\" *ngIf=\"errorArray.length > 0\">\n            <div class=\"text vx-fs-12 vx-txt-white\">{{errorArray[0]?.message}}</div>\n            <button (click)=\"saveSetting()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-red vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\">SAVE</button>\n        </div>\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 .assessment-settings{background:#fff;width:31.25rem;height:100vh}::ng-deep .assessment-settings-head{background:#f8f8f8;border-bottom:1px solid #F1F1F1;height:3rem}::ng-deep .assessment-settings-head i.info{cursor:pointer}::ng-deep .assessment-settings-head button.close{background:transparent;border:none;border-radius:0}::ng-deep .assessment-settings-body{padding-left:2.25rem;padding-right:1rem;width:32.25rem;position:relative;left:-1rem;height:calc(100vh - 3.5rem);overflow-y:auto}::ng-deep .assessment-settings-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .assessment-settings-body .settings-item{border:1px solid #DBDBDB;border-radius:.25rem;position:relative;transition:all .3s ease-in-out}::ng-deep .assessment-settings-body .settings-item:hover,::ng-deep .assessment-settings-body .settings-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}::ng-deep .assessment-settings-body .settings-item.done{background:#fbfbfb;border-color:#f1f1f1}::ng-deep .assessment-settings-body .settings-item.done:hover{border-color:#1e5dd3}::ng-deep .assessment-settings-body .settings-item .status{background:#fff;border-radius:50%;position:absolute;left:-2.25rem;top:.35rem;width:1.75rem;height:1.75rem;transition:all .1s ease-in-out;z-index:1}::ng-deep .assessment-settings-body .settings-item .status.done .checkIcon{position:absolute;top:-1px;width:29px;height:29px;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}::ng-deep .assessment-settings-body .settings-item .status.done .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .assessment-settings-body .settings-item .status.done .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .assessment-settings-body .settings-item .status.edit .edit-loader{position:absolute;top:-.1875rem;left:-.1875rem;right:0;bottom:0;width:34px;height:34px;transform:rotate(90deg)}::ng-deep .assessment-settings-body .settings-item .status.edit .editmark{width:28px;height:28px;border-radius:50%;stroke-width:4;stroke:#1e5dd3;stroke-miterlimit:10;box-shadow:inset 0 0 #1e5dd3}::ng-deep .assessment-settings-body .settings-item .status.edit .editmark__circle{stroke-dasharray:0;stroke-dashoffset:0;stroke-width:0;stroke-miterlimit:10;stroke:#f1f1f1;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;transform:scale(.23)}::ng-deep .assessment-settings-body .settings-item .status.edit .editmark__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;fill:#1e5dd3;transform:scale(.5)}::ng-deep .assessment-settings-body .settings-item .item-head{min-height:2.5rem;width:100%;cursor:pointer}::ng-deep .assessment-settings-body .settings-item .item-head .name I.info{position:relative;top:1px;cursor:pointer}::ng-deep .assessment-settings-body .settings-item .item-body{border-top:1px solid #F1F1F1}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item{border:1px solid #DBDBDB;border-radius:.25rem;min-height:2.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item.done{background:#fbfbfb;border-color:#f1f1f1}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item.done .criteria-list{border-color:#f1f1f1}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score-area{border-left:1px solid #DBDBDB;width:9.5rem;height:2.375rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score-area .input-area button{background:transparent;border:none;border-radius:0;height:1.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score-area .input-area input{background:#fff;border:1px solid #F1F1F1;border-radius:.25rem;color:#747576;font-size:13px;text-align:center;width:44px;height:1.5rem;outline:none}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .score{background:#fff;border:1px solid #F1F1F1;border-radius:.125rem;margin:.375rem .375rem .375rem 0;min-width:4.5rem;max-width:5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .criteria-list{border-top:1px solid #DBDBDB}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item .criteria-list cs-radio{display:block;margin-bottom:.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .mode-item app-cs-switch{width:100%}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item{position:relative;min-height:2.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:0 .75rem;height:2.5rem;width:100%;outline:none;transition:all .3s ease-in-out}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input:hover,::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item input::placeholder{color:#747576;opacity:1}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item vcomply-editor .editor-container .editable-block{font-size:12px;padding:.5rem .75rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .score-label{background:#f1f1f1;border-radius:.125rem;position:relative;top:-.375rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list{background:#f8f8f8;border-radius:.125rem;height:2rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .left{width:calc(100% - 6.5rem)}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .left .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 2rem)}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .left i.info{cursor:pointer}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right{width:6.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right .score{border-radius:0 .125rem .125rem 0;height:2rem;display:flex}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right .action{height:2rem;display:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list .right .action button{background:transparent;border:none;border-radius:0}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list:hover .right .score{display:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list:hover .right .action{display:flex}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .associated-list button.segment-close{top:-.5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item button.segment-btn{background:#fff;border:1px solid #1e5dd3;border-radius:.25rem;height:2.5rem;width:100%}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item button.segment-close{background:#1e5dd3;border:.25rem solid #FFFFFF;border-radius:50%;width:36px;height:36px;margin:.125rem auto;position:relative;z-index:3}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .form-item .segment-popup{position:absolute;bottom:1.25rem;left:.875rem;width:25rem;z-index:2}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom{background:#fbfbfb;border-top:1px solid #F1F1F1;border-radius:0 0 .1875rem .1875rem;height:2.75rem;margin:0 0 -.75rem -1rem;width:calc(100% + 2rem)}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button{border-radius:.125rem;height:1.875rem;width:5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button.cancel-btn{background:#fff;border:1px solid #DBDBDB}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button.save-btn{background:#1e5dd3;border:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom button.disabled{background:#f1f1f1;color:#747576;pointer-events:none}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom.error{background:#d93b41}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom.error button{border-radius:.125rem;height:1.875rem;width:5rem}::ng-deep .assessment-settings-body .settings-item .item-body .segment-form .segment-bottom.error button.save-btn{background:#fff}::ng-deep .assessment-settings-body .settings-item.skeleton-loader{background:#f8f8f8;border-color:#f1f1f1;height:2.5rem}::ng-deep .assessment-settings-body .settings-item.skeleton-loader .loader{background:#dbdbdb;border-radius:.5rem;height:.5rem;width:12rem}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillEdit{to{box-shadow:inset 0 0 0 2px #1e5dd3}}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep app-cs-switch .cs-switch{cursor:pointer}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ResultCriteriaService }]; }, propDecorators: { settingData: [{
                type: Input,
                args: ['setting']
            }], save: [{
                type: Output
            }], button: [{
                type: ViewChild,
                args: ['button']
            }], buttonEdit: [{
                type: ViewChild,
                args: ['buttonEdit']
            }], closed: [{
                type: Output
            }], cancelEvt: [{
                type: Output
            }], formJSON: [{
                type: Input
            }], fd: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 