import { Component, Output, EventEmitter, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CheckpointsListComponent {
    constructor() {
        this.createQuestion = new EventEmitter();
        this.questionTypeList = [];
    }
    ngOnInit() {
    }
    addQuestion(type) {
        //  this.createQuestion.emit(type.type);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckpointsListComponent, selector: "app-checkpoints-list", inputs: { questionTypeList: "questionTypeList" }, outputs: { createQuestion: "createQuestion" }, ngImport: i0, template: "<div class=\"checkpoints-list\">\n    <h4 class=\"title\">Please select a question type to begin:</h4>\n    <ul class=\"list-of-type\">\n        <li *ngFor=\"let questionType of questionTypeList\">\n            <button (click)=\"addQuestion(questionType)\">\n                <i class=\"icons\" [innerHTML]=\"questionType?.icon\"></i>\n                <span class=\"value\">\n                    <span class=\"title\">{{questionType?.text}}</span>\n                    <span class=\"description\">{{questionType?.description}}</span>\n                </span>\n            </button>\n        </li>\n    </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.checkpoints-list{position:relative;margin:0 -100px;height:60%}.checkpoints-list h4.title{color:#161b2f;font-size:18px;margin:0 0 20px;padding:0;line-height:20px;font-weight:500;text-align:center}.checkpoints-list ul{display:flex;flex-wrap:wrap;padding:0;margin:0;width:700px}.checkpoints-list ul li{list-style:none;padding:4px;width:50%;animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both}.checkpoints-list ul li button{display:flex;align-items:center;padding:14px;box-shadow:0 0 5px #fbfbfb;transition:all .3s ease-in-out;background:#fff;cursor:pointer;border-radius:4px;height:100%;width:100%;border:1px solid #F1F1F1}.checkpoints-list ul li button i{height:36px;width:36px;border-radius:2px;background:#f1f1f1;font-size:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#1e5dd3;margin-right:8px}.checkpoints-list ul li button span{text-align:left}.checkpoints-list ul li button span.value{display:block;width:calc(100% - 40px);text-transform:none}.checkpoints-list ul li button span.title{font-size:14px;color:#161b2f;width:100%;display:block;line-height:18px;font-weight:400}.checkpoints-list ul li button span.description{font-size:12px;color:#747576;display:block;font-weight:400}.checkpoints-list ul li button:hover{box-shadow:0 0 5px #1e5dd345}@keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointsListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-checkpoints-list', template: "<div class=\"checkpoints-list\">\n    <h4 class=\"title\">Please select a question type to begin:</h4>\n    <ul class=\"list-of-type\">\n        <li *ngFor=\"let questionType of questionTypeList\">\n            <button (click)=\"addQuestion(questionType)\">\n                <i class=\"icons\" [innerHTML]=\"questionType?.icon\"></i>\n                <span class=\"value\">\n                    <span class=\"title\">{{questionType?.text}}</span>\n                    <span class=\"description\">{{questionType?.description}}</span>\n                </span>\n            </button>\n        </li>\n    </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.checkpoints-list{position:relative;margin:0 -100px;height:60%}.checkpoints-list h4.title{color:#161b2f;font-size:18px;margin:0 0 20px;padding:0;line-height:20px;font-weight:500;text-align:center}.checkpoints-list ul{display:flex;flex-wrap:wrap;padding:0;margin:0;width:700px}.checkpoints-list ul li{list-style:none;padding:4px;width:50%;animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both}.checkpoints-list ul li button{display:flex;align-items:center;padding:14px;box-shadow:0 0 5px #fbfbfb;transition:all .3s ease-in-out;background:#fff;cursor:pointer;border-radius:4px;height:100%;width:100%;border:1px solid #F1F1F1}.checkpoints-list ul li button i{height:36px;width:36px;border-radius:2px;background:#f1f1f1;font-size:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#1e5dd3;margin-right:8px}.checkpoints-list ul li button span{text-align:left}.checkpoints-list ul li button span.value{display:block;width:calc(100% - 40px);text-transform:none}.checkpoints-list ul li button span.title{font-size:14px;color:#161b2f;width:100%;display:block;line-height:18px;font-weight:400}.checkpoints-list ul li button span.description{font-size:12px;color:#747576;display:block;font-weight:400}.checkpoints-list ul li button:hover{box-shadow:0 0 5px #1e5dd345}@keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { createQuestion: [{
                type: Output
            }], questionTypeList: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2twb2ludHMtbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92eC13b3JrZmxvdy1lbmdpbmUvc3JjL2xpYi9zaGFyZWRDb21wb25lbnRzL2NoZWNrcG9pbnQvY2hlY2twb2ludHMtbGlzdC9jaGVja3BvaW50cy1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3NoYXJlZENvbXBvbmVudHMvY2hlY2twb2ludC9jaGVja3BvaW50cy1saXN0L2NoZWNrcG9pbnRzLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTy9FLE1BQU0sT0FBTyx3QkFBd0I7SUFHbkM7UUFGVSxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDckMscUJBQWdCLEdBQUcsRUFBRSxDQUFDO0lBQ2YsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUNELFdBQVcsQ0FBQyxJQUFTO1FBQ3RCLHdDQUF3QztJQUN2QyxDQUFDOytHQVRVLHdCQUF3QjttR0FBeEIsd0JBQXdCLDZKQ1ByQywwbUJBY0E7OzRGRFBhLHdCQUF3QjtrQkFMcEMsU0FBUzsrQkFDRSxzQkFBc0I7MEVBS3RCLGNBQWM7c0JBQXZCLE1BQU07Z0JBQ0UsZ0JBQWdCO3NCQUF4QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtY2hlY2twb2ludHMtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGVja3BvaW50cy1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2hlY2twb2ludHMtbGlzdC5jb21wb25lbnQubGVzcyddXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrcG9pbnRzTGlzdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBPdXRwdXQoKSBjcmVhdGVRdWVzdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQElucHV0KCkgcXVlc3Rpb25UeXBlTGlzdCA9IFtdO1xuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG4gIGFkZFF1ZXN0aW9uKHR5cGU6IGFueSl7XG4gLy8gIHRoaXMuY3JlYXRlUXVlc3Rpb24uZW1pdCh0eXBlLnR5cGUpO1xuICB9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJjaGVja3BvaW50cy1saXN0XCI+XG4gICAgPGg0IGNsYXNzPVwidGl0bGVcIj5QbGVhc2Ugc2VsZWN0IGEgcXVlc3Rpb24gdHlwZSB0byBiZWdpbjo8L2g0PlxuICAgIDx1bCBjbGFzcz1cImxpc3Qtb2YtdHlwZVwiPlxuICAgICAgICA8bGkgKm5nRm9yPVwibGV0IHF1ZXN0aW9uVHlwZSBvZiBxdWVzdGlvblR5cGVMaXN0XCI+XG4gICAgICAgICAgICA8YnV0dG9uIChjbGljayk9XCJhZGRRdWVzdGlvbihxdWVzdGlvblR5cGUpXCI+XG4gICAgICAgICAgICAgICAgPGkgY2xhc3M9XCJpY29uc1wiIFtpbm5lckhUTUxdPVwicXVlc3Rpb25UeXBlPy5pY29uXCI+PC9pPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidmFsdWVcIj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ0aXRsZVwiPnt7cXVlc3Rpb25UeXBlPy50ZXh0fX08L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZGVzY3JpcHRpb25cIj57e3F1ZXN0aW9uVHlwZT8uZGVzY3JpcHRpb259fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9saT5cbiAgICA8L3VsPlxuPC9kaXY+XG4iXX0=