import { Component, EventEmitter, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ToolkitComponent {
    constructor() {
        this.addQuestion = new EventEmitter();
        this.showCollapse = true;
    }
    ngOnInit() {
    }
    clickCollapse() {
        this.showCollapse = !this.showCollapse;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolkitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolkitComponent, selector: "app-toolkit", outputs: { addQuestion: "addQuestion" }, ngImport: i0, template: "<div class=\"toolkit-section\" [class.collapse]=\"showCollapse\">\n    <button class=\"heading-btn vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"clickCollapse()\">\n        <ng-container *ngIf=\"!showCollapse\">\n            <span class=\"vx-fs-11 vx-fw-500 vx-tt-uppercase\">TOOLKIT</span>\n            <i class=\"icons arrow vx-fs-10\">&#xe96b;</i>\n        </ng-container>\n        <ng-container *ngIf=\"showCollapse\">\n            <span class=\"dot vx-fs-12 vx-fw-500 vx-tt-uppercase\">. . .</span>\n            <i class=\"icons arrow vx-fs-10\">&#xe970;</i>\n        </ng-container>\n    </button>\n    <div class=\"toolkit-items vx-p-3 vx-pr-0\">\n        <ul class=\"vx-p-0 vx-pr-3 vx-m-0\">\n            <li class=\"vx-mb-2\" *ngIf=\"true\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('welcome')\">\n                    <div class=\"question-icon welcome-screen vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab3;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">WELCOME SCREEN</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('thankyou')\">\n                    <div class=\"question-icon thank-you-screen vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab2;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">THANK YOU SCREEN</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('multiple-choice')\">\n                    <div class=\"question-icon multiple-choice vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeabd;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MULTIPLE CHOICE</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('checkbox')\">\n                    <div class=\"question-icon checkboxes vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeabb;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">CHECKBOXES</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('image-choice')\">\n                    <div class=\"question-icon image-choice vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xea29;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">IMAGE CHOICE</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('star-rating')\">\n                    <div class=\"question-icon star-rating vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xea71;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">STAR RATINGS</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('single-textbox')\">\n                    <div class=\"question-icon single-textbox vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab5;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">SINGLE TEXTBOX</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('comment-box')\">\n                    <div class=\"question-icon comment-box vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xe9a6;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">COMMENT BOX</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('matrix-dropdown')\">\n                    <div class=\"question-icon matrix-dropdown vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab7;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MATRIX OF DROPDOWNS</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('dropdown')\">\n                    <div class=\"question-icon dropdown-icon vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab9;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">DROPDOWN</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('rating-scale')\">\n                    <div class=\"question-icon matrix-rating vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab8;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MATRIX & RATING SCALE</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('ranking')\">\n                    <div class=\"question-icon ranking vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeb03;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">RANKING</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('slider')\">\n                    <div class=\"question-icon slider vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab6;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">SLIDER</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\"  *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('multiple-textbox')\">\n                    <div class=\"question-icon multiple-textbox vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab4;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MULTIPLE TEXTBOXES</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" >\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('date-time')\">\n                    <div class=\"question-icon date-time vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeaba;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">DATE & TIME</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('file-upload')\">\n                    <div class=\"question-icon file-upload vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xea97;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">FILE UPLOAD</div>\n                </button>\n            </li>\n        </ul>\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\";.toolkit-section{width:11.35rem;height:100%;position:sticky;top:0;transition:all .3s ease-in-out}.toolkit-section button.heading-btn{background:#1e5dd3;border-radius:0;border:none;height:1.5rem;position:relative;width:100%}.toolkit-section button.heading-btn .dot{position:relative;top:-.1875rem}.toolkit-section button.heading-btn i.arrow{position:absolute;top:.4375rem;right:.25rem}.toolkit-section .toolkit-items{background:#fff;border-right:1px solid #F1F1F1;height:calc(100% - 1.5rem)}.toolkit-section .toolkit-items ul{list-style-type:none;height:100%;overflow:hidden;overflow-y:auto}.toolkit-section .toolkit-items ul::-webkit-scrollbar{width:1px}.toolkit-section .toolkit-items ul::-webkit-scrollbar-thumb{border-radius:1px;background-color:#747576}.toolkit-section .toolkit-items ul::-webkit-scrollbar-track{background-color:transparent}.toolkit-section .toolkit-items ul li:last-of-type{margin-bottom:0!important}.toolkit-section .toolkit-items ul li button{background:#f8f8f8;border-radius:.125rem;border:none}.toolkit-section .toolkit-items ul li button:hover{background:#f1f1f1}.toolkit-section .toolkit-items ul li button .question-icon{background:#ee5daf;border-radius:.25rem;width:1.5rem;min-width:1.5rem;height:1.5rem}.toolkit-section .toolkit-items ul li button .question-icon.welcome-screen{background:#ee5daf}.toolkit-section .toolkit-items ul li button .question-icon.thank-you-screen{background:#ee3939}.toolkit-section .toolkit-items ul li button .question-icon.multiple-choice{background:#d1c131}.toolkit-section .toolkit-items ul li button .question-icon.checkboxes{background:#6f81fc}.toolkit-section .toolkit-items ul li button .question-icon.image-choice{background:#4681ef}.toolkit-section .toolkit-items ul li button .question-icon.star-rating{background:#e8c247}.toolkit-section .toolkit-items ul li button .question-icon.single-textbox{background:#2fd2cd}.toolkit-section .toolkit-items ul li button .question-icon.comment-box{background:#acbb7e}.toolkit-section .toolkit-items ul li button .question-icon.matrix-dropdown{background:#66bf72}.toolkit-section .toolkit-items ul li button .question-icon.dropdown-icon{background:#9d9fe1}.toolkit-section .toolkit-items ul li button .question-icon.matrix-rating{background:#67d2cd}.toolkit-section .toolkit-items ul li button .question-icon.ranking{background:#ee9f24}.toolkit-section .toolkit-items ul li button .question-icon.slider{background:#d1c131}.toolkit-section .toolkit-items ul li button .question-icon.multiple-textbox{background:#66bf72}.toolkit-section .toolkit-items ul li button .question-icon.date-time{background:#acbb7e}.toolkit-section .toolkit-items ul li button .question-icon.file-upload{background:#4681ef}.toolkit-section .toolkit-items ul li button .name{width:calc(100% - 1.75rem);white-space:nowrap}.toolkit-section.collapse{width:3.5rem}.toolkit-section.collapse .toolkit-items{margin-right:.25rem}.toolkit-section.collapse .toolkit-items ul{padding-right:.5rem!important}.toolkit-section.collapse .toolkit-items ul li button{min-width:2rem}.toolkit-section.collapse .toolkit-items ul li button .question-icon{margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolkitComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-toolkit', template: "<div class=\"toolkit-section\" [class.collapse]=\"showCollapse\">\n    <button class=\"heading-btn vx-txt-white vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\" (click)=\"clickCollapse()\">\n        <ng-container *ngIf=\"!showCollapse\">\n            <span class=\"vx-fs-11 vx-fw-500 vx-tt-uppercase\">TOOLKIT</span>\n            <i class=\"icons arrow vx-fs-10\">&#xe96b;</i>\n        </ng-container>\n        <ng-container *ngIf=\"showCollapse\">\n            <span class=\"dot vx-fs-12 vx-fw-500 vx-tt-uppercase\">. . .</span>\n            <i class=\"icons arrow vx-fs-10\">&#xe970;</i>\n        </ng-container>\n    </button>\n    <div class=\"toolkit-items vx-p-3 vx-pr-0\">\n        <ul class=\"vx-p-0 vx-pr-3 vx-m-0\">\n            <li class=\"vx-mb-2\" *ngIf=\"true\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('welcome')\">\n                    <div class=\"question-icon welcome-screen vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab3;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">WELCOME SCREEN</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('thankyou')\">\n                    <div class=\"question-icon thank-you-screen vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab2;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">THANK YOU SCREEN</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('multiple-choice')\">\n                    <div class=\"question-icon multiple-choice vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeabd;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MULTIPLE CHOICE</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('checkbox')\">\n                    <div class=\"question-icon checkboxes vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeabb;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">CHECKBOXES</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('image-choice')\">\n                    <div class=\"question-icon image-choice vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xea29;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">IMAGE CHOICE</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('star-rating')\">\n                    <div class=\"question-icon star-rating vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xea71;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">STAR RATINGS</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('single-textbox')\">\n                    <div class=\"question-icon single-textbox vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab5;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">SINGLE TEXTBOX</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('comment-box')\">\n                    <div class=\"question-icon comment-box vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xe9a6;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">COMMENT BOX</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('matrix-dropdown')\">\n                    <div class=\"question-icon matrix-dropdown vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab7;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MATRIX OF DROPDOWNS</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('dropdown')\">\n                    <div class=\"question-icon dropdown-icon vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab9;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">DROPDOWN</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('rating-scale')\">\n                    <div class=\"question-icon matrix-rating vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab8;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MATRIX & RATING SCALE</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('ranking')\">\n                    <div class=\"question-icon ranking vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeb03;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">RANKING</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('slider')\">\n                    <div class=\"question-icon slider vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab6;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">SLIDER</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\"  *ngIf=\"false\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('multiple-textbox')\">\n                    <div class=\"question-icon multiple-textbox vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeab4;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">MULTIPLE TEXTBOXES</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\" >\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('date-time')\">\n                    <div class=\"question-icon date-time vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xeaba;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">DATE & TIME</div>\n                </button>\n            </li>\n            <li class=\"vx-mb-2\">\n                <button class=\"vx-m-0 vx-p-1 vx-text-left vx-w-100 vx-d-flex vx-align-center\" (click)=\"addQuestion.emit('file-upload')\">\n                    <div class=\"question-icon file-upload vx-d-flex vx-align-center vx-justify-center vx-mr-1\"><i class=\"icons vx-fs-16 vx-txt-white\">&#xea97;</i></div>\n                    <div class=\"name vx-fs-10 vx-paragraph-txt vx-tt-uppercase\" *ngIf=\"!showCollapse\">FILE UPLOAD</div>\n                </button>\n            </li>\n        </ul>\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\";.toolkit-section{width:11.35rem;height:100%;position:sticky;top:0;transition:all .3s ease-in-out}.toolkit-section button.heading-btn{background:#1e5dd3;border-radius:0;border:none;height:1.5rem;position:relative;width:100%}.toolkit-section button.heading-btn .dot{position:relative;top:-.1875rem}.toolkit-section button.heading-btn i.arrow{position:absolute;top:.4375rem;right:.25rem}.toolkit-section .toolkit-items{background:#fff;border-right:1px solid #F1F1F1;height:calc(100% - 1.5rem)}.toolkit-section .toolkit-items ul{list-style-type:none;height:100%;overflow:hidden;overflow-y:auto}.toolkit-section .toolkit-items ul::-webkit-scrollbar{width:1px}.toolkit-section .toolkit-items ul::-webkit-scrollbar-thumb{border-radius:1px;background-color:#747576}.toolkit-section .toolkit-items ul::-webkit-scrollbar-track{background-color:transparent}.toolkit-section .toolkit-items ul li:last-of-type{margin-bottom:0!important}.toolkit-section .toolkit-items ul li button{background:#f8f8f8;border-radius:.125rem;border:none}.toolkit-section .toolkit-items ul li button:hover{background:#f1f1f1}.toolkit-section .toolkit-items ul li button .question-icon{background:#ee5daf;border-radius:.25rem;width:1.5rem;min-width:1.5rem;height:1.5rem}.toolkit-section .toolkit-items ul li button .question-icon.welcome-screen{background:#ee5daf}.toolkit-section .toolkit-items ul li button .question-icon.thank-you-screen{background:#ee3939}.toolkit-section .toolkit-items ul li button .question-icon.multiple-choice{background:#d1c131}.toolkit-section .toolkit-items ul li button .question-icon.checkboxes{background:#6f81fc}.toolkit-section .toolkit-items ul li button .question-icon.image-choice{background:#4681ef}.toolkit-section .toolkit-items ul li button .question-icon.star-rating{background:#e8c247}.toolkit-section .toolkit-items ul li button .question-icon.single-textbox{background:#2fd2cd}.toolkit-section .toolkit-items ul li button .question-icon.comment-box{background:#acbb7e}.toolkit-section .toolkit-items ul li button .question-icon.matrix-dropdown{background:#66bf72}.toolkit-section .toolkit-items ul li button .question-icon.dropdown-icon{background:#9d9fe1}.toolkit-section .toolkit-items ul li button .question-icon.matrix-rating{background:#67d2cd}.toolkit-section .toolkit-items ul li button .question-icon.ranking{background:#ee9f24}.toolkit-section .toolkit-items ul li button .question-icon.slider{background:#d1c131}.toolkit-section .toolkit-items ul li button .question-icon.multiple-textbox{background:#66bf72}.toolkit-section .toolkit-items ul li button .question-icon.date-time{background:#acbb7e}.toolkit-section .toolkit-items ul li button .question-icon.file-upload{background:#4681ef}.toolkit-section .toolkit-items ul li button .name{width:calc(100% - 1.75rem);white-space:nowrap}.toolkit-section.collapse{width:3.5rem}.toolkit-section.collapse .toolkit-items{margin-right:.25rem}.toolkit-section.collapse .toolkit-items ul{padding-right:.5rem!important}.toolkit-section.collapse .toolkit-items ul li button{min-width:2rem}.toolkit-section.collapse .toolkit-items ul li button .question-icon{margin-right:0!important}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { addQuestion: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 