import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../../ui-kit/tooltip/tooltip.directive";
import * as i3 from "../../../../ui-kit/popover/popover.component";
import * as i4 from "../../../../ui-kit/popover/popover.directive";
import * as i5 from "../../../../formgroup/cs-checkbox/cs-checkbox.component";
import * as i6 from "../../../../formgroup/cs-radio/cs-radio.component";
import * as i7 from "../../../../formgroup/cs-switch/cs-switch.component";
export class AddResponseSetPopupComponent {
    constructor() {
        this.setResponse = false;
        this.hideSpecificCategory = false;
    }
    ngOnInit() {
    }
    showResponse() {
        this.setResponse = !this.setResponse;
    }
    clickSpecificCategory() {
        this.hideSpecificCategory = true;
    }
    backResponseSet() {
        this.hideSpecificCategory = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddResponseSetPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddResponseSetPopupComponent, selector: "app-add-response-set-popup", ngImport: i0, template: "<div class=\"form-dialog\">\n    <div class=\"form-dialog-heading vx-d-flex vx-align-center vx-justify-between vx-pt-3 vx-pb-3 vx-pl-4 vx-pr-4 vx-mb-2\">\n        <ng-container *ngIf=\"!hideSpecificCategory\">\n            <div class=\"heading vx-fs-14 vx-fw-500 vx-label-txt\">Add a Response Set</div>\n            <button class=\"close vx-p-0 vx-m-0 vx-d-flex vx-align-center\" [appTooltip]=\"'[Esc] to close'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons vx-fs-16 vx-label-txt\">&#xe93f;</i></button>\n        </ng-container>\n        <ng-container *ngIf=\"hideSpecificCategory\">\n            <div class=\"heading vx-fs-14 vx-fw-500 vx-label-txt\">Select Form Categories</div>\n            <button (click)=\"backResponseSet()\" class=\"close vx-fs-12 vx-fw-500 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-16 vx-mr-2\">&#xe91d;</i> BACK</button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"!hideSpecificCategory\" class=\"form-dialog-mid vx-p-4 vx-pt-0\">\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">RESPONSE SET NAME</label>\n            <input type=\"text\" placeholder=\"Name this response set\" />\n        </div>\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">THIS RESPONSE SET IS APPLICABLE FOR:</label>\n            <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n                <div class=\"set-item vx-d-flex vx-align-center vx-p-2\">\n                    <app-cs-radio><span class=\"name vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">ALL FORM CATEGORIES</span></app-cs-radio>\n                </div>\n                <div class=\"set-item vx-d-flex vx-align-center vx-p-2\">\n                    <div class=\"specific-radio vx-d-flex vx-align-center\" (click)=\"clickSpecificCategory()\">\n                        <span class=\"circle-radio vx-mr-3\"></span>\n                        <span class=\"name vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">SPECIFIC FORM CATEGORIES</span>\n                    </div>\n                    <div *ngIf=\"false\" class=\"after-select vx-d-flex vx-align-center vx-w-100\">\n                        <span class=\"circle-radio vx-mr-3\"></span>\n                        <div class=\"input-group vx-d-flex vx-align-center vx-justify-between\">\n                            <div class=\"left vx-d-flex vx-align-center\">\n                                <div class=\"chip vx-fs-11 vx-txt-blue vx-pl-2 vx-pr-2 vx-lh-5\" [appTooltip]=\"'category text'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">category text</div>\n                                <button class=\"count vx-fs-10 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center vx-lh-5\" appPopover (click)=\"responseCount.popover()\" position=\"right\">+13</button>\n                                <app-popover #responseCount>\n                                    <div class=\"wf-action-list\">\n                                      <ul class=\"action-item\">\n                                        <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                                          <div class=\"chip-item\">\n                                              <span class=\"vx-paragraph-txt\" [appTooltip]=\"'Category response name'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">Category response name</span>\n                                          </div>\n                                        </li>\n                                      </ul>\n                                    </div>\n                                </app-popover>\n                            </div>\n                            <button class=\"edit vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-lh-5\">EDIT</button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">RESPONSE CHOICES</label>\n            <div class=\"choice-item vx-d-flex vx-mt-5\">\n                <div class=\"number vx-fs-12 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-p-1 vx-mr-4\" style=\"background: #1E5DD3;\">1</div>\n                <div class=\"right\">\n                    <ng-container>\n                        <div class=\"edit-mode\" (click)=\"showResponse()\">\n                            <input type=\"text\" placeholder=\"Type your response\" />\n                            <button class=\"set-icon vx-fs-14 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                        </div>\n                        <div class=\"set-popup vx-p-3 vx-d-flex vx-justify-between\" *ngIf=\"!setResponse\">\n                            <div class=\"item\">\n                                <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SET COLOR</div>\n                                <div class=\"color-box vx-p-1 vx-d-flex vx-align-center vx-justify-center\" style=\"color: #1E5DD3;\">\n                                    <i class=\"icons vx-fs-18\">&#xeb01;</i>\n                                    <input type=\"color\" />\n                                </div>\n                            </div>\n                            <div class=\"item\">\n                                <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">ADD SCORE</div>\n                                <div class=\"score-input vx-d-flex\">\n                                    <input type=\"number\" value=\"1\" />\n                                    <div class=\"buttons\">\n                                        <button class=\"plus-btn vx-fs-12 vx-fw-500 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+</button>\n                                        <button class=\"minus-btn vx-fs-12 vx-fw-500 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">-</button>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"item\">\n                                <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1 vx-d-flex vx-align-center\">SET AS A FAILED RESPONSE <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1\" appTooltip=\"If this response choice is 'Set as a failed response' VComply would automatically flag it as an exception when selected by the respondent. This can help identify areas for improvement and in the development of corrective action plans.\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xeb16;</i></div>\n                                <app-cs-switch></app-cs-switch>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"after-set-response vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\">\n                        <div class=\"value vx-fs-12 vx-label-txt\" [appTooltip]=\"'Response choice content'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Response choice content</div>\n                        <div class=\"vx-d-flex vx-align-center\">\n                            <button class=\"edit vx-fs-12 vx-txt-blue vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"><i class=\"icons\">&#xe9ba;</i></button>\n                            <button class=\"delete vx-fs-12 vx-txt-red vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"><i class=\"icons\">&#xe923;</i></button>\n                        </div>\n                    </div>\n                    <div class=\"response-value vx-fs-10 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-text-right vx-mt-1\">SCORE: 1</div>\n                    <div class=\"response-value vx-fs-10 vx-fw-500 vx-txt-red vx-tt-uppercase vx-text-right vx-mt-1\">THIS HAS BEEN SET AS A FAILED RESPONSE.</div>\n                </div>\n            </div>\n            <button class=\"add-response-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-mt-5 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-12 vx-mr-2 vx-d-flex\">&#xe915;</i> ADD RESPONSE</button>\n        </div>\n    </div>\n    <div *ngIf=\"hideSpecificCategory\" class=\"category-mid vx-p-4 vx-pr-0 vx-pt-0 vx-mt-4\">\n        <div class=\"search-field vx-pr-4 vx-mb-3\">\n            <input type=\"search\" placeholder=\"Search...\" />\n            <i class=\"icons search vx-fs-14\">&#xe90b;</i>\n        </div>\n        <app-cs-checkbox><span class=\"name vx-fw-500\">Select All</span></app-cs-checkbox>\n        <!-- <app-cs-checkbox-indeterminate *ngIf=\"false\"><span class=\"name vx-fw-500\">Select All</span></app-cs-checkbox-indeterminate> -->\n        <div class=\"list vx-pr-4 vx-mt-3\">\n            <ul class=\"vx-p-0 vx-m-0\">\n                <li class=\"vx-mb-3\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\"><app-cs-checkbox><span class=\"name\" [appTooltip]=\"'Select form category name'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Select form category name</span></app-cs-checkbox></li>\n            </ul>\n        </div>\n    </div>\n    <div *ngIf=\"hideSpecificCategory\" class=\"category-bottom vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mt-4\">\n        <div class=\"vx-d-flex vx-align-center\">\n            <div class=\"count vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\">12</div> <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">Form Category selected</span>\n        </div>\n        <button class=\"next-btn vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center vx-lh-7\">NEXT</button>\n    </div>\n    <button *ngIf=\"!hideSpecificCategory\" class=\"form-dialog-btn vx-fs-13 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-mt-4 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\">SAVE</button>\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 .form-dialog{background:#fff;width:31.25rem;height:100vh}::ng-deep .form-dialog-heading{background:#f8f8f8;border-bottom:1px solid #F1F1F1;height:2.75rem}::ng-deep .form-dialog-heading button.close{background:transparent;border:none;border-radius:0}::ng-deep .form-dialog-mid{height:calc(100vh - 7.25rem);overflow:auto}::ng-deep .form-dialog-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .form-dialog-mid .from-group{position:relative}::ng-deep .form-dialog-mid .from-group input[type=text]{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem .75rem;line-height:1.25rem;font-size:13px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group input[type=text]:hover,::ng-deep .form-dialog-mid .from-group input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group input[type=text]::placeholder{color:#dbdbdb;opacity:1}::ng-deep .form-dialog-mid .from-group .set-item{border:1px solid #DBDBDB;border-radius:.25rem;width:calc(50% - .25rem);height:2.5rem}::ng-deep .form-dialog-mid .from-group .set-item cs-radio{display:flex;width:100%}::ng-deep .form-dialog-mid .from-group .set-item cs-radio .radio-item{width:100%}::ng-deep .form-dialog-mid .from-group .set-item .specific-radio{cursor:pointer}::ng-deep .form-dialog-mid .from-group .set-item .specific-radio .circle-radio{background:#fff;border:1px solid #DBDBDB;border-radius:50%;height:1rem;width:1rem}::ng-deep .form-dialog-mid .from-group .set-item .after-select .circle-radio{background:#fff;border:5px solid #34aa44;border-radius:50%;height:1rem;width:1rem}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group{width:calc(100% - 1.75rem)}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group .left{width:calc(100% - 3rem)}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group .left .chip{background:#fff;box-shadow:0 1px 4px #1e5dd326;border-radius:.125rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group .left button.count{background:#1e5dd3;border:none;border-radius:.125rem;min-width:1.25rem}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group button.edit{background:#34aa44;border:none;border-radius:.125rem}::ng-deep .form-dialog-mid .from-group .choice-item:first-of-type{margin-top:.5rem!important}::ng-deep .form-dialog-mid .from-group .choice-item .number{border-radius:50%;width:1.75rem;height:1.75rem;margin-top:.125rem}::ng-deep .form-dialog-mid .from-group .choice-item .right{width:calc(100% - 2.75rem);position:relative}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]{height:2rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem 2.625rem .5rem .75rem;line-height:1.25rem;font-size:12px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]:hover,::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]::placeholder{color:#dbdbdb;opacity:1}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode button.set-icon{background:#f8f8f8;border-radius:0 .25rem .25rem 0;border:none;position:absolute;top:1px;right:1px;width:1.875rem;height:1.875rem}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup{background:#fff;border-radius:.25rem;box-shadow:0 3px 6px #1e5dd326;width:100%}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .heading I.info{cursor:pointer}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item app-cs-switch{display:flex;justify-content:start}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item app-cs-switch .cs-switch{width:auto}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .color-box{background:#f1f1f1;border-radius:.125rem;width:1.875rem;height:1.875rem;position:relative}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .color-box input{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input{border:1px solid #F1F1F1;border-radius:.125rem;height:1.875rem;width:3.75rem}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input input{background:#fff;border:none;border-right:1px solid #F1F1F1;border-radius:0;font-size:12px;font-weight:400;color:#161b2f;padding:0 .5rem;margin:0;width:42px;outline:none}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input .buttons button{background:transparent;border:none;border-radius:0;width:1rem;height:.875rem}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input .buttons button.plus-btn{border-bottom:1px solid #F1F1F1}::ng-deep .form-dialog-mid .from-group .choice-item .right .after-set-response{height:2rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#f8f8f8}::ng-deep .form-dialog-mid .from-group .choice-item .right .after-set-response .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .form-dialog-mid .from-group .choice-item .right .after-set-response button{background:transparent;border:none;border-radius:0}::ng-deep .form-dialog-mid .from-group button.add-response-btn{background:transparent;border:none;border-radius:0;padding-left:2.75rem!important}::ng-deep .form-dialog .category-mid{height:calc(100vh - 7.5rem)}::ng-deep .form-dialog .category-mid .search-field{position:relative}::ng-deep .form-dialog .category-mid .search-field input{background:#fff;border:1px solid #7475763F;border-radius:.25rem;color:#161b2f;font-size:13px;font-weight:400;padding:.5rem .75rem .5rem 2.25rem;width:100%;height:2.5rem;outline:none}::ng-deep .form-dialog .category-mid .search-field i.search{position:absolute;top:.75rem;left:1.5rem;color:#f1f1f1}::ng-deep .form-dialog .category-mid .list{height:calc(100vh - 13rem);overflow:auto}::ng-deep .form-dialog .category-mid .list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .form-dialog .category-mid .list ul{list-style-type:none}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item .checkbox,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item .checkmark,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item span,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item span.value,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;width:100%}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item span.value .name,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item span.value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-dialog .category-bottom{background:#f8f8f8;border-top:1px solid #F1F1F1;height:2.75rem}::ng-deep .form-dialog .category-bottom .count{background:#34aa44;border-radius:.125rem;min-width:1.25rem;height:1.25rem}::ng-deep .form-dialog .category-bottom button.next-btn{background:#1e5dd3;border-radius:.125rem;border:none;width:4rem}::ng-deep .form-dialog-btn{background:#1e5dd3;border:none;border-radius:0;color:#fff;width:100%;height:3.125rem;letter-spacing:1.3px}::ng-deep .form-dialog-btn.disabled{background:#f1f1f1;color:#747576!important;opacity:1;pointer-events:none}\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.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i3.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i4.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: i5.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: i6.CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: i7.CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddResponseSetPopupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-add-response-set-popup', template: "<div class=\"form-dialog\">\n    <div class=\"form-dialog-heading vx-d-flex vx-align-center vx-justify-between vx-pt-3 vx-pb-3 vx-pl-4 vx-pr-4 vx-mb-2\">\n        <ng-container *ngIf=\"!hideSpecificCategory\">\n            <div class=\"heading vx-fs-14 vx-fw-500 vx-label-txt\">Add a Response Set</div>\n            <button class=\"close vx-p-0 vx-m-0 vx-d-flex vx-align-center\" [appTooltip]=\"'[Esc] to close'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"><i class=\"icons vx-fs-16 vx-label-txt\">&#xe93f;</i></button>\n        </ng-container>\n        <ng-container *ngIf=\"hideSpecificCategory\">\n            <div class=\"heading vx-fs-14 vx-fw-500 vx-label-txt\">Select Form Categories</div>\n            <button (click)=\"backResponseSet()\" class=\"close vx-fs-12 vx-fw-500 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-16 vx-mr-2\">&#xe91d;</i> BACK</button>\n        </ng-container>\n    </div>\n    <div *ngIf=\"!hideSpecificCategory\" class=\"form-dialog-mid vx-p-4 vx-pt-0\">\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">RESPONSE SET NAME</label>\n            <input type=\"text\" placeholder=\"Name this response set\" />\n        </div>\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">THIS RESPONSE SET IS APPLICABLE FOR:</label>\n            <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n                <div class=\"set-item vx-d-flex vx-align-center vx-p-2\">\n                    <app-cs-radio><span class=\"name vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">ALL FORM CATEGORIES</span></app-cs-radio>\n                </div>\n                <div class=\"set-item vx-d-flex vx-align-center vx-p-2\">\n                    <div class=\"specific-radio vx-d-flex vx-align-center\" (click)=\"clickSpecificCategory()\">\n                        <span class=\"circle-radio vx-mr-3\"></span>\n                        <span class=\"name vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">SPECIFIC FORM CATEGORIES</span>\n                    </div>\n                    <div *ngIf=\"false\" class=\"after-select vx-d-flex vx-align-center vx-w-100\">\n                        <span class=\"circle-radio vx-mr-3\"></span>\n                        <div class=\"input-group vx-d-flex vx-align-center vx-justify-between\">\n                            <div class=\"left vx-d-flex vx-align-center\">\n                                <div class=\"chip vx-fs-11 vx-txt-blue vx-pl-2 vx-pr-2 vx-lh-5\" [appTooltip]=\"'category text'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">category text</div>\n                                <button class=\"count vx-fs-10 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center vx-lh-5\" appPopover (click)=\"responseCount.popover()\" position=\"right\">+13</button>\n                                <app-popover #responseCount>\n                                    <div class=\"wf-action-list\">\n                                      <ul class=\"action-item\">\n                                        <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n                                          <div class=\"chip-item\">\n                                              <span class=\"vx-paragraph-txt\" [appTooltip]=\"'Category response name'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">Category response name</span>\n                                          </div>\n                                        </li>\n                                      </ul>\n                                    </div>\n                                </app-popover>\n                            </div>\n                            <button class=\"edit vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-lh-5\">EDIT</button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"from-group vx-mt-1 vx-mb-4\">\n            <label class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">RESPONSE CHOICES</label>\n            <div class=\"choice-item vx-d-flex vx-mt-5\">\n                <div class=\"number vx-fs-12 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-p-1 vx-mr-4\" style=\"background: #1E5DD3;\">1</div>\n                <div class=\"right\">\n                    <ng-container>\n                        <div class=\"edit-mode\" (click)=\"showResponse()\">\n                            <input type=\"text\" placeholder=\"Type your response\" />\n                            <button class=\"set-icon vx-fs-14 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                        </div>\n                        <div class=\"set-popup vx-p-3 vx-d-flex vx-justify-between\" *ngIf=\"!setResponse\">\n                            <div class=\"item\">\n                                <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SET COLOR</div>\n                                <div class=\"color-box vx-p-1 vx-d-flex vx-align-center vx-justify-center\" style=\"color: #1E5DD3;\">\n                                    <i class=\"icons vx-fs-18\">&#xeb01;</i>\n                                    <input type=\"color\" />\n                                </div>\n                            </div>\n                            <div class=\"item\">\n                                <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">ADD SCORE</div>\n                                <div class=\"score-input vx-d-flex\">\n                                    <input type=\"number\" value=\"1\" />\n                                    <div class=\"buttons\">\n                                        <button class=\"plus-btn vx-fs-12 vx-fw-500 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+</button>\n                                        <button class=\"minus-btn vx-fs-12 vx-fw-500 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">-</button>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"item\">\n                                <div class=\"heading vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1 vx-d-flex vx-align-center\">SET AS A FAILED RESPONSE <i class=\"icons info vx-fs-12 vx-txt-blue vx-ml-1\" appTooltip=\"If this response choice is 'Set as a failed response' VComply would automatically flag it as an exception when selected by the respondent. This can help identify areas for improvement and in the development of corrective action plans.\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xeb16;</i></div>\n                                <app-cs-switch></app-cs-switch>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"after-set-response vx-d-flex vx-align-center vx-justify-between vx-pl-3 vx-pr-3\">\n                        <div class=\"value vx-fs-12 vx-label-txt\" [appTooltip]=\"'Response choice content'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Response choice content</div>\n                        <div class=\"vx-d-flex vx-align-center\">\n                            <button class=\"edit vx-fs-12 vx-txt-blue vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"><i class=\"icons\">&#xe9ba;</i></button>\n                            <button class=\"delete vx-fs-12 vx-txt-red vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"><i class=\"icons\">&#xe923;</i></button>\n                        </div>\n                    </div>\n                    <div class=\"response-value vx-fs-10 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-text-right vx-mt-1\">SCORE: 1</div>\n                    <div class=\"response-value vx-fs-10 vx-fw-500 vx-txt-red vx-tt-uppercase vx-text-right vx-mt-1\">THIS HAS BEEN SET AS A FAILED RESPONSE.</div>\n                </div>\n            </div>\n            <button class=\"add-response-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-mt-5 vx-d-flex vx-align-center\"><i class=\"icons vx-fs-12 vx-mr-2 vx-d-flex\">&#xe915;</i> ADD RESPONSE</button>\n        </div>\n    </div>\n    <div *ngIf=\"hideSpecificCategory\" class=\"category-mid vx-p-4 vx-pr-0 vx-pt-0 vx-mt-4\">\n        <div class=\"search-field vx-pr-4 vx-mb-3\">\n            <input type=\"search\" placeholder=\"Search...\" />\n            <i class=\"icons search vx-fs-14\">&#xe90b;</i>\n        </div>\n        <app-cs-checkbox><span class=\"name vx-fw-500\">Select All</span></app-cs-checkbox>\n        <!-- <app-cs-checkbox-indeterminate *ngIf=\"false\"><span class=\"name vx-fw-500\">Select All</span></app-cs-checkbox-indeterminate> -->\n        <div class=\"list vx-pr-4 vx-mt-3\">\n            <ul class=\"vx-p-0 vx-m-0\">\n                <li class=\"vx-mb-3\" *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\"><app-cs-checkbox><span class=\"name\" [appTooltip]=\"'Select form category name'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">Select form category name</span></app-cs-checkbox></li>\n            </ul>\n        </div>\n    </div>\n    <div *ngIf=\"hideSpecificCategory\" class=\"category-bottom vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4 vx-mt-4\">\n        <div class=\"vx-d-flex vx-align-center\">\n            <div class=\"count vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-pl-1 vx-pr-1\">12</div> <span class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">Form Category selected</span>\n        </div>\n        <button class=\"next-btn vx-fs-11 vx-fw-500 vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center vx-lh-7\">NEXT</button>\n    </div>\n    <button *ngIf=\"!hideSpecificCategory\" class=\"form-dialog-btn vx-fs-13 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-mt-4 vx-d-flex vx-align-center vx-justify-center\" [class.disabled]=\"false\">SAVE</button>\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 .form-dialog{background:#fff;width:31.25rem;height:100vh}::ng-deep .form-dialog-heading{background:#f8f8f8;border-bottom:1px solid #F1F1F1;height:2.75rem}::ng-deep .form-dialog-heading button.close{background:transparent;border:none;border-radius:0}::ng-deep .form-dialog-mid{height:calc(100vh - 7.25rem);overflow:auto}::ng-deep .form-dialog-mid::-webkit-scrollbar-track{background-color:#fff}::ng-deep .form-dialog-mid .from-group{position:relative}::ng-deep .form-dialog-mid .from-group input[type=text]{height:2.5rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem .75rem;line-height:1.25rem;font-size:13px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group input[type=text]:hover,::ng-deep .form-dialog-mid .from-group input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group input[type=text]::placeholder{color:#dbdbdb;opacity:1}::ng-deep .form-dialog-mid .from-group .set-item{border:1px solid #DBDBDB;border-radius:.25rem;width:calc(50% - .25rem);height:2.5rem}::ng-deep .form-dialog-mid .from-group .set-item cs-radio{display:flex;width:100%}::ng-deep .form-dialog-mid .from-group .set-item cs-radio .radio-item{width:100%}::ng-deep .form-dialog-mid .from-group .set-item .specific-radio{cursor:pointer}::ng-deep .form-dialog-mid .from-group .set-item .specific-radio .circle-radio{background:#fff;border:1px solid #DBDBDB;border-radius:50%;height:1rem;width:1rem}::ng-deep .form-dialog-mid .from-group .set-item .after-select .circle-radio{background:#fff;border:5px solid #34aa44;border-radius:50%;height:1rem;width:1rem}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group{width:calc(100% - 1.75rem)}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group .left{width:calc(100% - 3rem)}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group .left .chip{background:#fff;box-shadow:0 1px 4px #1e5dd326;border-radius:.125rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group .left button.count{background:#1e5dd3;border:none;border-radius:.125rem;min-width:1.25rem}::ng-deep .form-dialog-mid .from-group .set-item .after-select .input-group button.edit{background:#34aa44;border:none;border-radius:.125rem}::ng-deep .form-dialog-mid .from-group .choice-item:first-of-type{margin-top:.5rem!important}::ng-deep .form-dialog-mid .from-group .choice-item .number{border-radius:50%;width:1.75rem;height:1.75rem;margin-top:.125rem}::ng-deep .form-dialog-mid .from-group .choice-item .right{width:calc(100% - 2.75rem);position:relative}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]{height:2rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#fff;outline:none;padding:.5rem 2.625rem .5rem .75rem;line-height:1.25rem;font-size:12px;font-weight:400;color:#747576;transition:all .2s ease-in-out;width:100%}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]:hover,::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]:focus{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode input[type=text]::placeholder{color:#dbdbdb;opacity:1}::ng-deep .form-dialog-mid .from-group .choice-item .right .edit-mode button.set-icon{background:#f8f8f8;border-radius:0 .25rem .25rem 0;border:none;position:absolute;top:1px;right:1px;width:1.875rem;height:1.875rem}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup{background:#fff;border-radius:.25rem;box-shadow:0 3px 6px #1e5dd326;width:100%}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .heading I.info{cursor:pointer}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item app-cs-switch{display:flex;justify-content:start}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item app-cs-switch .cs-switch{width:auto}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .color-box{background:#f1f1f1;border-radius:.125rem;width:1.875rem;height:1.875rem;position:relative}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .color-box input{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input{border:1px solid #F1F1F1;border-radius:.125rem;height:1.875rem;width:3.75rem}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input input{background:#fff;border:none;border-right:1px solid #F1F1F1;border-radius:0;font-size:12px;font-weight:400;color:#161b2f;padding:0 .5rem;margin:0;width:42px;outline:none}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input .buttons button{background:transparent;border:none;border-radius:0;width:1rem;height:.875rem}::ng-deep .form-dialog-mid .from-group .choice-item .right .set-popup .item .score-input .buttons button.plus-btn{border-bottom:1px solid #F1F1F1}::ng-deep .form-dialog-mid .from-group .choice-item .right .after-set-response{height:2rem;border-radius:.25rem;border:1px solid #DBDBDB;background:#f8f8f8}::ng-deep .form-dialog-mid .from-group .choice-item .right .after-set-response .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .form-dialog-mid .from-group .choice-item .right .after-set-response button{background:transparent;border:none;border-radius:0}::ng-deep .form-dialog-mid .from-group button.add-response-btn{background:transparent;border:none;border-radius:0;padding-left:2.75rem!important}::ng-deep .form-dialog .category-mid{height:calc(100vh - 7.5rem)}::ng-deep .form-dialog .category-mid .search-field{position:relative}::ng-deep .form-dialog .category-mid .search-field input{background:#fff;border:1px solid #7475763F;border-radius:.25rem;color:#161b2f;font-size:13px;font-weight:400;padding:.5rem .75rem .5rem 2.25rem;width:100%;height:2.5rem;outline:none}::ng-deep .form-dialog .category-mid .search-field i.search{position:absolute;top:.75rem;left:1.5rem;color:#f1f1f1}::ng-deep .form-dialog .category-mid .list{height:calc(100vh - 13rem);overflow:auto}::ng-deep .form-dialog .category-mid .list::-webkit-scrollbar-track{background-color:#fff}::ng-deep .form-dialog .category-mid .list ul{list-style-type:none}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item{position:relative;padding-left:1.5rem;width:100%}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item .checkbox,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item .checkbox{position:absolute!important;left:0;top:0}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item .checkmark,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute!important;left:0;top:0}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item span,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item span{justify-content:unset!important;margin:0!important}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item span.value,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item span.value{color:#747576!important;font-size:11px!important;width:100%}::ng-deep .form-dialog .category-mid app-cs-checkbox .checkbox-item span.value .name,::ng-deep .form-dialog .category-mid app-cs-checkbox-indeterminate .checkbox-item span.value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .form-dialog .category-bottom{background:#f8f8f8;border-top:1px solid #F1F1F1;height:2.75rem}::ng-deep .form-dialog .category-bottom .count{background:#34aa44;border-radius:.125rem;min-width:1.25rem;height:1.25rem}::ng-deep .form-dialog .category-bottom button.next-btn{background:#1e5dd3;border-radius:.125rem;border:none;width:4rem}::ng-deep .form-dialog-btn{background:#1e5dd3;border:none;border-radius:0;color:#fff;width:100%;height:3.125rem;letter-spacing:1.3px}::ng-deep .form-dialog-btn.disabled{background:#f1f1f1;color:#747576!important;opacity:1;pointer-events:none}\n"] }]
        }], ctorParameters: function () { return []; } });
//# sourceMappingURL=data:application/json;base64, 