import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ASSETS } from '../../constants/assets.constants';
import * as i0 from "@angular/core";
import * as i1 from "../../ui-kit/snack-bar/snack-bar.service";
import * as i2 from "@angular/forms";
import * as i3 from "../../ui-kit/snack-bar/snack-bar.component";
import * as i4 from "../floating-bar/floating-bar.component";
export class ReviewFrequencyComponent {
    constructor(snackbar) {
        this.snackbar = snackbar;
        this.ASSETS = ASSETS;
        this.closeReviewFrequency = new EventEmitter();
        this.backToUserList = new EventEmitter();
        this.saveReviewFrequency = new EventEmitter();
    }
    ngOnInit() { }
    close() {
        this.backToUserList.emit();
    }
    save() {
        this.saveReviewFrequency.emit({
            completeDays: this.reviewCompleteDays,
            notCompleted: this.reviewNOtCompletedDays,
        });
    }
    onValueChange() {
        if (this.reviewCompleteDays < 1) {
            this.snackbar.show('Please enter a value greater than 0.', 'alert');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewFrequencyComponent, deps: [{ token: i1.SnackBarService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewFrequencyComponent, selector: "app-review-frequency", inputs: { reviewCompleteDays: "reviewCompleteDays", reviewNOtCompletedDays: "reviewNOtCompletedDays" }, outputs: { closeReviewFrequency: "closeReviewFrequency", backToUserList: "backToUserList", saveReviewFrequency: "saveReviewFrequency" }, ngImport: i0, template: "<app-snack-bar></app-snack-bar>\n\n<div class=\"review-frequency\">\n  <div class=\"review-frequency-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\">\n    <i class=\"icons arrow vx-fs-16 vx-mr-2\" (click)=\"close()\">&#xe91d;</i>\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Review Frequency</div>\n  </div>\n  <div class=\"review-frequency-body\">\n    <div class=\"review-frequency-message\">\n      <div class=\"review-frequency-icon\">\n        <img [src]=\"ASSETS.bulb\" alt=\"\" />\n      </div>\n      <div\n        class=\"review-frequency-inner vx-fs-12 vx-paragraph-txt vx-lh-5 vx-w-100\"\n      >\n        The review period begins after the responsibility is completed. This\n        means that if a responsibility is completed on the specified due date,\n        the review will take place after the due date. In some circumstances\n        this may be fine. In others, such as a responsibility with a regulatory\n        due date, this may result in non-compliance with an external obligation.\n        Accordingly, when adding the \u201CReview\u201D option to a responsibility, it is\n        important to carefully consider the due date for a responsibility and\n        how incorporating a review of the responsibility affects when a\n        responsibility is completed.\n      </div>\n    </div>\n    <div class=\"review-frequency-body-inner vx-mt-2 vx-mb-4\">\n      <div class=\"frequency-due-date\">\n        <div class=\"frequency-due-date-item vx-mt-3\">\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n            COMPLETION WINDOW OPENS:\n          </div>\n          <div\n            class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\n          >\n            The responsibility can be reviewed\n            <input\n              class=\"countNum\"\n              [(ngModel)]=\"reviewCompleteDays\"\n              (focusout)=\"onValueChange()\"\n              type=\"number\"\n              onkeydown=\"return event.keyCode !== 190\"\n              min=\"0\"\n              oninput=\"this.value = Math.abs(this.value)\"\n            />\n            {{ reviewCompleteDays > 1 ? \"days\" : \"day\" }}\n            <span class=\"vx-fw-500\">after</span> it has been completed. Where\n            this occurs, this will show as the review being\n            <span class=\"completed-text vx-fw-500\">completed on time</span>.\n          </div>\n        </div>\n\n        <div class=\"frequency-due-date-item vx-mt-5\">\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n            EXTENSION:\n          </div>\n          <div\n            class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\n          >\n            The responsibility can be reviewed\n            <input\n              class=\"countNum\"\n              [(ngModel)]=\"reviewNOtCompletedDays\"\n              type=\"number\"\n              onkeydown=\"return event.keyCode !== 190\"\n              min=\"0\"\n              oninput=\"this.value = Math.abs(this.value)\"\n            />\n            {{ reviewNOtCompletedDays > 1 ? \"days\" : \"day\"\n            }}<span class=\"vx-fw-500\"> after</span> the review due date. Where\n            this occurs, this will show as the review being\n            <span class=\"delay-text vx-fw-500\">completed with delay</span>.\n          </div>\n        </div>\n\n        <div class=\"frequency-due-date-item vx-mt-5\">\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n            COMPLETION WINDOW CLOSES:\n          </div>\n          <div\n            class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\n          >\n            The responsibility cannot be reviewed\n            <span class=\"vx-fw-500 vx-label-txt vx-ml-1\">{{\n              reviewNOtCompletedDays\n            }}</span>\n            {{ reviewNOtCompletedDays > 1 ? \"days\" : \"day\"\n            }}<span class=\"vx-fw-500\"> after</span> the review due date. Where\n            this occurs, this will show as the review being\n            <span class=\"notcompleted-text vx-fw-500\">not completed</span>.\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <app-floating-bar\n    [showWorkflow]=\"false\"\n    [isDisabled]=\"reviewCompleteDays < 1 ? true : false\"\n    (closeEvent)=\"save()\"\n    (closeList)=\"closeReviewFrequency.emit()\"\n  >\n    <span class=\"name\"\n      >This responsibility needs to be reviewed within\n      <b>{{ reviewCompleteDays }}</b>\n      {{ reviewCompleteDays > 1 ? \"days\" : \"day\" }} after it has been\n      completed.</span\n    >\n  </app-floating-bar>\n</div>\n", 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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .review-frequency{position:fixed;top:0;right:31.25rem;bottom:0;left:0;z-index:-1}@media screen and (max-width: 1280px){::ng-deep .review-frequency{right:30px}}::ng-deep .review-frequency:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .review-frequency-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .review-frequency-head .arrow{cursor:pointer}::ng-deep .review-frequency-body{background:#fff;height:calc(100vh - 7.75rem);padding:2rem 2rem 1rem}::ng-deep .review-frequency-body-inner{height:calc(100vh - 18.75rem);overflow:hidden;overflow-y:auto}::ng-deep .review-frequency-message{position:relative}::ng-deep .review-frequency-inner{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:.25rem;padding:.5rem .5rem .5rem 1.75rem!important}::ng-deep .review-frequency-icon{background:#fff;box-shadow:1px 1px 4px #1c5bd140;border-radius:.25rem;width:2rem;height:2rem;padding:.125rem;position:absolute;left:-1rem;top:1rem}::ng-deep .review-frequency-icon img{width:100%}::ng-deep .review-frequency app-floating-bar .userGroup-floating-bar{margin:0 2rem}::ng-deep .frequency-due-date-item-box{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-due-date-item-box input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-due-date-item-box input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-due-date-item-box input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-due-date-item-box .completed-text{color:#34aa44}::ng-deep .frequency-due-date-item-box .delay-text{color:#f0b819}::ng-deep .frequency-due-date-item-box .notcompleted-text{color:#d93b41}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SnackBarComponent, selector: "app-snack-bar" }, { kind: "component", type: i4.FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewFrequencyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-review-frequency', template: "<app-snack-bar></app-snack-bar>\n\n<div class=\"review-frequency\">\n  <div class=\"review-frequency-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\">\n    <i class=\"icons arrow vx-fs-16 vx-mr-2\" (click)=\"close()\">&#xe91d;</i>\n    <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Review Frequency</div>\n  </div>\n  <div class=\"review-frequency-body\">\n    <div class=\"review-frequency-message\">\n      <div class=\"review-frequency-icon\">\n        <img [src]=\"ASSETS.bulb\" alt=\"\" />\n      </div>\n      <div\n        class=\"review-frequency-inner vx-fs-12 vx-paragraph-txt vx-lh-5 vx-w-100\"\n      >\n        The review period begins after the responsibility is completed. This\n        means that if a responsibility is completed on the specified due date,\n        the review will take place after the due date. In some circumstances\n        this may be fine. In others, such as a responsibility with a regulatory\n        due date, this may result in non-compliance with an external obligation.\n        Accordingly, when adding the \u201CReview\u201D option to a responsibility, it is\n        important to carefully consider the due date for a responsibility and\n        how incorporating a review of the responsibility affects when a\n        responsibility is completed.\n      </div>\n    </div>\n    <div class=\"review-frequency-body-inner vx-mt-2 vx-mb-4\">\n      <div class=\"frequency-due-date\">\n        <div class=\"frequency-due-date-item vx-mt-3\">\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n            COMPLETION WINDOW OPENS:\n          </div>\n          <div\n            class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\n          >\n            The responsibility can be reviewed\n            <input\n              class=\"countNum\"\n              [(ngModel)]=\"reviewCompleteDays\"\n              (focusout)=\"onValueChange()\"\n              type=\"number\"\n              onkeydown=\"return event.keyCode !== 190\"\n              min=\"0\"\n              oninput=\"this.value = Math.abs(this.value)\"\n            />\n            {{ reviewCompleteDays > 1 ? \"days\" : \"day\" }}\n            <span class=\"vx-fw-500\">after</span> it has been completed. Where\n            this occurs, this will show as the review being\n            <span class=\"completed-text vx-fw-500\">completed on time</span>.\n          </div>\n        </div>\n\n        <div class=\"frequency-due-date-item vx-mt-5\">\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n            EXTENSION:\n          </div>\n          <div\n            class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\n          >\n            The responsibility can be reviewed\n            <input\n              class=\"countNum\"\n              [(ngModel)]=\"reviewNOtCompletedDays\"\n              type=\"number\"\n              onkeydown=\"return event.keyCode !== 190\"\n              min=\"0\"\n              oninput=\"this.value = Math.abs(this.value)\"\n            />\n            {{ reviewNOtCompletedDays > 1 ? \"days\" : \"day\"\n            }}<span class=\"vx-fw-500\"> after</span> the review due date. Where\n            this occurs, this will show as the review being\n            <span class=\"delay-text vx-fw-500\">completed with delay</span>.\n          </div>\n        </div>\n\n        <div class=\"frequency-due-date-item vx-mt-5\">\n          <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n            COMPLETION WINDOW CLOSES:\n          </div>\n          <div\n            class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\"\n          >\n            The responsibility cannot be reviewed\n            <span class=\"vx-fw-500 vx-label-txt vx-ml-1\">{{\n              reviewNOtCompletedDays\n            }}</span>\n            {{ reviewNOtCompletedDays > 1 ? \"days\" : \"day\"\n            }}<span class=\"vx-fw-500\"> after</span> the review due date. Where\n            this occurs, this will show as the review being\n            <span class=\"notcompleted-text vx-fw-500\">not completed</span>.\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <app-floating-bar\n    [showWorkflow]=\"false\"\n    [isDisabled]=\"reviewCompleteDays < 1 ? true : false\"\n    (closeEvent)=\"save()\"\n    (closeList)=\"closeReviewFrequency.emit()\"\n  >\n    <span class=\"name\"\n      >This responsibility needs to be reviewed within\n      <b>{{ reviewCompleteDays }}</b>\n      {{ reviewCompleteDays > 1 ? \"days\" : \"day\" }} after it has been\n      completed.</span\n    >\n  </app-floating-bar>\n</div>\n", 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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .review-frequency{position:fixed;top:0;right:31.25rem;bottom:0;left:0;z-index:-1}@media screen and (max-width: 1280px){::ng-deep .review-frequency{right:30px}}::ng-deep .review-frequency:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .review-frequency-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .review-frequency-head .arrow{cursor:pointer}::ng-deep .review-frequency-body{background:#fff;height:calc(100vh - 7.75rem);padding:2rem 2rem 1rem}::ng-deep .review-frequency-body-inner{height:calc(100vh - 18.75rem);overflow:hidden;overflow-y:auto}::ng-deep .review-frequency-message{position:relative}::ng-deep .review-frequency-inner{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:.25rem;padding:.5rem .5rem .5rem 1.75rem!important}::ng-deep .review-frequency-icon{background:#fff;box-shadow:1px 1px 4px #1c5bd140;border-radius:.25rem;width:2rem;height:2rem;padding:.125rem;position:absolute;left:-1rem;top:1rem}::ng-deep .review-frequency-icon img{width:100%}::ng-deep .review-frequency app-floating-bar .userGroup-floating-bar{margin:0 2rem}::ng-deep .frequency-due-date-item-box{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-due-date-item-box input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-due-date-item-box input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-due-date-item-box input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-due-date-item-box .completed-text{color:#34aa44}::ng-deep .frequency-due-date-item-box .delay-text{color:#f0b819}::ng-deep .frequency-due-date-item-box .notcompleted-text{color:#d93b41}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SnackBarService }]; }, propDecorators: { reviewCompleteDays: [{
                type: Input
            }], reviewNOtCompletedDays: [{
                type: Input
            }], closeReviewFrequency: [{
                type: Output
            }], backToUserList: [{
                type: Output
            }], saveReviewFrequency: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 