import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../formgroup/cs-select/cs-select.component";
import * as i3 from "../../ui-kit/popover/popover.component";
export class CheckpointFloatingBarComponent {
    constructor() {
        this.count = 0;
        this.pluralText = '';
        this.singularText = '';
        this.closeList = new EventEmitter();
        this.saveList = new EventEmitter();
        this.requiredPoint = 0;
        this.isPolicyCheckpoint = false;
        this.requiredPointChange = new EventEmitter();
    }
    ngOnInit() {
    }
    next() {
        this.saveList.emit();
    }
    close() {
        this.closeList.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointFloatingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckpointFloatingBarComponent, selector: "app-checkpoint-floating-bar", inputs: { count: "count", pluralText: "pluralText", singularText: "singularText", requiredPoint: "requiredPoint", isPolicyCheckpoint: "isPolicyCheckpoint" }, outputs: { closeList: "closeList", saveList: "saveList", requiredPointChange: "requiredPointChange" }, ngImport: i0, template: "<div class=\"checkpoint-floating-bar\">\n  <div class=\"checkpoint-floating-bar-container vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\n    <div class=\"left\">\n      <div class=\"counter vx-fs-9 vx-fw-600 vx-txt-white vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center\">{{count}}</div>\n      <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n        <span *ngIf=\"count < 2\">{{singularText}}</span>\n        <span *ngIf=\"count > 1\">{{pluralText}}</span>\n      </div>\n    </div>\n    <!-- <div class=\"mid\" *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        <div class=\"label\">Total Points : {{count}}</div>\n        <em>Each question carries 1 point</em>\n        <span class=\"required\">*</span>\n        <!- - <i class=\"icons\">&#xe91f;</i> - ->\n      </div>\n      <div class=\"name points\" *ngIf=\"true\">\n        <div>\n          <div class=\"label\">Points required<br>to attest\n            <span class=\"required\">*</span>\n            <i class=\"icons\" appPopover (click)=\"policyPassing.popover()\" placement=\"right\">&#xe91f;</i> :\n          </div>\n        </div>\n        <div>\n          <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n          oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n        </div>\n      </div>\n    </div> -->\n    <div class=\"right\">\n      <!-- <ng-container *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        Total Points : {{count}}<br>\n        <i>Each question carries 1 point</i>\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n      </div>\n      <div class=\"name\" *ngIf=\"true\">\n        Points required to attest\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n        <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n        oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n      </div>\n    </ng-container> -->\n      <app-cs-select *ngIf=\"false\"></app-cs-select>\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n      <button (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\n    </div>\n  </div>\n</div>\n<app-popover #policyPassing [dontCloseonClick]=\"true\">\n  <div  class=\"pop\">\n   Every correct answer choice carries 1 point. You can specify the total number of questions that the reader must answer correctly in order to attest the policy.\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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\";input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}::ng-deep .checkpoint-floating-bar-container{height:3rem;border-radius:.25rem;border:1px solid #f8f8f8;box-shadow:0 6px 12px #4681ef26}::ng-deep .checkpoint-floating-bar-container .left{display:flex;align-items:center;max-width:70%}::ng-deep .checkpoint-floating-bar-container .left .counter{background:#1e5dd3;border-radius:1.25rem;min-width:1.5rem;height:1rem}::ng-deep .checkpoint-floating-bar-container .mid{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .mid .name{color:#747576;font-size:10px;font-weight:500;line-height:16px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid .name .label{color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .checkpoint-floating-bar-container .mid .name span.required{color:#eb2424;font-size:14px}::ng-deep .checkpoint-floating-bar-container .mid .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .checkpoint-floating-bar-container .mid .name.points{display:flex;align-items:center;margin-left:40px}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]{-moz-appearance:textfield;border:1px solid #DCDCDC;border-radius:2px;width:30px;height:30px;text-align:center;margin-left:16px;color:#747576;font-size:11px;font-weight:600}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]:focus{outline:none}::ng-deep .checkpoint-floating-bar-container .right{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .checkpoint-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .checkpoint-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .checkpoint-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .checkpoint-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}.pop{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:10px;font-size:12px;color:#6e717e}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CsSelectComponent, selector: "app-cs-select", inputs: ["dataList", "dropdownLabel", "displayProperty", "selectedValue", "isRequired", "dropdownSubLabel", "placeholder", "stylex", "valueKey", "colorBlock", "colorCode"], outputs: ["selectedData", "selectedValueChange"] }, { kind: "component", type: i3.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckpointFloatingBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-checkpoint-floating-bar', template: "<div class=\"checkpoint-floating-bar\">\n  <div class=\"checkpoint-floating-bar-container vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\n    <div class=\"left\">\n      <div class=\"counter vx-fs-9 vx-fw-600 vx-txt-white vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center\">{{count}}</div>\n      <div class=\"name vx-fs-12 vx-paragraph-txt vx-ml-2\">\n        <span *ngIf=\"count < 2\">{{singularText}}</span>\n        <span *ngIf=\"count > 1\">{{pluralText}}</span>\n      </div>\n    </div>\n    <!-- <div class=\"mid\" *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        <div class=\"label\">Total Points : {{count}}</div>\n        <em>Each question carries 1 point</em>\n        <span class=\"required\">*</span>\n        <!- - <i class=\"icons\">&#xe91f;</i> - ->\n      </div>\n      <div class=\"name points\" *ngIf=\"true\">\n        <div>\n          <div class=\"label\">Points required<br>to attest\n            <span class=\"required\">*</span>\n            <i class=\"icons\" appPopover (click)=\"policyPassing.popover()\" placement=\"right\">&#xe91f;</i> :\n          </div>\n        </div>\n        <div>\n          <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n          oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n        </div>\n      </div>\n    </div> -->\n    <div class=\"right\">\n      <!-- <ng-container *ngIf=\"isPolicyCheckpoint\">\n      <div class=\"name\" *ngIf=\"true\" >\n        Total Points : {{count}}<br>\n        <i>Each question carries 1 point</i>\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n      </div>\n      <div class=\"name\" *ngIf=\"true\">\n        Points required to attest\n        <span class=\"required\">*</span>\n        <i class=\"icons\">&#xe91f;</i>\n        <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\n        oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\n      </div>\n    </ng-container> -->\n      <app-cs-select *ngIf=\"false\"></app-cs-select>\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\n      <button (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\n    </div>\n  </div>\n</div>\n<app-popover #policyPassing [dontCloseonClick]=\"true\">\n  <div  class=\"pop\">\n   Every correct answer choice carries 1 point. You can specify the total number of questions that the reader must answer correctly in order to attest the policy.\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.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/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.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\";input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}::ng-deep .checkpoint-floating-bar-container{height:3rem;border-radius:.25rem;border:1px solid #f8f8f8;box-shadow:0 6px 12px #4681ef26}::ng-deep .checkpoint-floating-bar-container .left{display:flex;align-items:center;max-width:70%}::ng-deep .checkpoint-floating-bar-container .left .counter{background:#1e5dd3;border-radius:1.25rem;min-width:1.5rem;height:1rem}::ng-deep .checkpoint-floating-bar-container .mid{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .mid .name{color:#747576;font-size:10px;font-weight:500;line-height:16px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid .name .label{color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .checkpoint-floating-bar-container .mid .name span.required{color:#eb2424;font-size:14px}::ng-deep .checkpoint-floating-bar-container .mid .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .checkpoint-floating-bar-container .mid .name.points{display:flex;align-items:center;margin-left:40px}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]{-moz-appearance:textfield;border:1px solid #DCDCDC;border-radius:2px;width:30px;height:30px;text-align:center;margin-left:16px;color:#747576;font-size:11px;font-weight:600}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]:focus{outline:none}::ng-deep .checkpoint-floating-bar-container .right{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .checkpoint-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .checkpoint-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .checkpoint-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .checkpoint-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}.pop{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:10px;font-size:12px;color:#6e717e}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { count: [{
                type: Input
            }], pluralText: [{
                type: Input
            }], singularText: [{
                type: Input
            }], closeList: [{
                type: Output
            }], saveList: [{
                type: Output
            }], requiredPoint: [{
                type: Input
            }], isPolicyCheckpoint: [{
                type: Input
            }], requiredPointChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 