import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DEFAULT_TIME } from '../../../constants/time.constants';
import * as i0 from "@angular/core";
import * as i1 from "../frequency.service";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
import * as i4 from "../../../ui-kit/tooltip/tooltip.directive";
import * as i5 from "../../../ui-kit/popover/popover.component";
import * as i6 from "../../../ui-kit/popover/popover.directive";
import * as i7 from "../../../formgroup/select/cs-select/cs-select.component";
import * as i8 from "../../../formgroup/select/cs-option/cs-option.component";
import * as i9 from "../../../ui-kit/time-picker/time-picker/time-picker.component";
import * as i10 from "../frequency-due-date/frequency-due-date.component";
import * as i11 from "../frequency-responsibility-list/frequency-responsibility-list.component";
export class FrequencyOnCompletionOfComponent {
    constructor(frequencyService) {
        this.frequencyService = frequencyService;
        this.mode = '';
        this.DEFAULT_TIME = DEFAULT_TIME;
        this.onCompletionOfInput = 1;
        this.onCompletionOfWindow = 3;
        this.onCompletionOfFailed = 5;
        this.onCompletionOfTime = DEFAULT_TIME;
        this.onCompletionOfResponsibility = [];
        this.isLifecycleModified = false;
        this.selectedResponsibility = 0;
        this.placeholder = 'Loading...';
        this.selectedResponsibilityDetails = {};
        this.startDate = Math.floor(Date.now() / 1000);
        this.lifecycleDetails = '0000-00-00~~0';
        this.frequencyDetails = new EventEmitter();
        this.radioForm = new EventEmitter();
        this.openRadio = false;
        this.backButton = false;
        this.isSelectedData = false;
    }
    ngOnInit() {
        this.featureFlag_on_completion_of = this.feature.isFeatureEnabled('ff_frequency_on_completion_of');
        this.frequencyInfo = Object.assign(this.frequencyService.frequencyInfo);
        this.getCompletionReports();
        this.getOnCompletionFrequency();
        this.isSelectedData = this.selectedResponsibilityDetails
            ? Object.keys(this.selectedResponsibilityDetails)?.length > 0
            : false;
    }
    populateFrequency() {
        const frequencySelected = this.frequencyData.pattern.split('~');
        this.onCompletionOfInput = parseInt(frequencySelected[3]);
        this.onCompletionOfFailed = this.frequencyData.failed;
        this.onCompletionOfWindow = this.frequencyData.window;
        this.onCompletionOfTime = this.frequencyData.failedTime;
        this.selectedResponsibilityDetails = this.onCompletionOfResponsibility.find((res) => res.ReportId === this.frequencyData.selectedReport);
        this.getOnCompletionFrequency();
        this.isSelectedData = this.selectedResponsibilityDetails
            ? Object.keys(this.selectedResponsibilityDetails)?.length > 0
            : false;
    }
    onTimeChanged(event) {
        this.onCompletionOfTime = event;
        this.getOnCompletionFrequency();
    }
    onValueChange(event) {
        if (event.type === 'completed') {
            this.onCompletionOfWindow = event.value;
        }
        else {
            this.onCompletionOfFailed = event.value;
        }
        this.getOnCompletionFrequency();
    }
    onResponsibilitySelection(event) {
        if (this.featureFlag_on_completion_of) {
            this.selectedResponsibilityDetails = event;
            this.isSelectedData = this.selectedResponsibilityDetails
                ? Object.keys(this.selectedResponsibilityDetails)?.length > 0
                : false;
        }
        if (typeof this.selectedResponsibilityDetails === 'object') {
            this.frequencyInfo.reportId =
                this.selectedResponsibilityDetails?.ReportId;
        }
        else {
            this.frequencyInfo.reportId = 0;
        }
        this.getOnCompletionFrequency();
    }
    getCompletionReports() {
        this.selectedResponsibility = 0;
        this.placeholder = 'Select a Responsibility';
        this.onCompletionOfResponsibility = [];
        if (this.frequencyData?.onCompletionReportDetails) {
            this.onCompletionOfResponsibility.push(this.frequencyData?.onCompletionReportDetails);
        }
        if (this.frequencyData.pattern != '' &&
            parseInt(this.frequencyData.pattern.split('~')[0]) === 6) {
            this.populateFrequency();
        }
    }
    inputValueChange(event) {
        this.onCompletionOfInput = Number(event.target.value);
        if (this.onCompletionOfInput < 1) {
            this.onCompletionOfInput = 1;
        }
        this.getOnCompletionFrequency();
    }
    getOnCompletionFrequency() {
        this.frequencyInfo.placeholder =
            this.onCompletionOfInput +
                ' ' +
                (this.onCompletionOfInput > 1 ? 'days' : 'day') +
                ' after completion of ' +
                (this.onCompletionOfResponsibility &&
                    this.selectedResponsibilityDetails?.report_name
                    ? this.selectedResponsibilityDetails?.report_name
                    : '');
        this.frequencyInfo.pattern =
            6 + '~' + '0' + '~' + '0' + '~' + this.onCompletionOfInput;
        this.frequencyInfo.case = 'onCompletionOf';
        this.frequencyInfo.failedAfter = this.onCompletionOfFailed;
        this.frequencyInfo.window = this.onCompletionOfWindow;
        this.frequencyInfo.timeIn12hr = this.onCompletionOfTime;
        this.frequencyInfo.timeIn24Hr = this.frequencyService.timeFrom12hTo24h(this.onCompletionOfTime);
        this.frequencyInfo.failed_time_utc = 0;
        this.frequencyInfo.reportId =
            this.selectedResponsibilityDetails?.ReportId ?? 0;
        this.frequencyDetails.emit(this.frequencyInfo);
    }
    openRadioResponsibility(event) {
        if (event === 'backToOnCompletion') {
            this.backButton = true;
            this.openRadio = false;
        }
        else {
            this.openRadio = true;
            this.backButton = false;
        }
        this.radioForm.emit(this.openRadio);
    }
    remove() {
        this.selectedResponsibilityDetails = {};
        this.isSelectedData = this.selectedResponsibilityDetails
            ? Object.keys(this.selectedResponsibilityDetails)?.length > 0
            : false;
        this.frequencyInfo.reportId = 0;
        this.frequencyDetails.emit(this.frequencyInfo);
    }
    timeSelection(event) {
        const selectedValue = event.selectedValue;
        this.onTimeChanged(selectedValue);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyOnCompletionOfComponent, deps: [{ token: i1.FrequencyService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FrequencyOnCompletionOfComponent, selector: "app-frequency-on-completion-of", inputs: { mode: "mode", feature: "feature", startDate: "startDate", frequencyData: "frequencyData" }, outputs: { frequencyDetails: "frequencyDetails", radioForm: "radioForm" }, ngImport: i0, template: "<div class=\"frequency-completion\" *ngIf=\"mode !== 'policy' || backButton\">\n  <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n    DUE DATE FREQUENCY:\n  </div>\n  <div class=\"frequency-completion-inner\">\n    <div class=\"frequency-completion-top vx-p-3 vx-d-flex vx-align-center\">\n      <input\n        class=\"countNum\"\n        type=\"number\"\n        [(ngModel)]=\"onCompletionOfInput\"\n        (change)=\"inputValueChange($event)\"\n        onkeydown=\"return event.keyCode !== 190\"\n        min=\"0\"\n        oninput=\"this.value = Math.abs(this.value)\"\n      />\n      <div class=\"vx-fs-13 vx-paragraph-txt\">day after completion of</div>\n    </div>\n    <div class=\"frequency-completion-bottom vx-p-3\">\n      <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n        RESPONSIBILITY\n      </div>\n      <div class=\"vx-d-flex vx-align-center\">\n        <ng-container *ngIf=\"featureFlag_on_completion_of\">\n          <div\n            *ngIf=\"featureFlag_on_completion_of && !isSelectedData\"\n            [class.disabled]=\"placeholder === 'Loading...'\"\n            class=\"select-box vx-fs-11 vx-paragraph-txt vx-p-2 vx-pl-3 vx-pr-3 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n            (click)=\"openRadioResponsibility($event)\"\n          >\n            {{\n              placeholder === \"Loading...\"\n                ? \"Loading...\"\n                : \"Select a Responsibility\"\n            }}\n            <i class=\"icons vx-fs-10\">&#xe9e8;</i>\n          </div>\n          <div\n            *ngIf=\"featureFlag_on_completion_of && isSelectedData\"\n            class=\"after-select-box vx-p-1 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n          >\n            <div\n              *ngIf=\"isSelectedData\"\n              class=\"select-chip vx-fs-12 vx-paragraph-txt vx-p-1 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center\"\n            >\n              <i\n                *ngIf=\"isSelectedData\"\n                class=\"icons cross vx-fs-14 vx-mr-1\"\n                (click)=\"remove()\"\n                >&#xe9ae;</i\n              >\n              <span\n                [appTooltip]=\"selectedResponsibilityDetails?.ReportName\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"true\"\n                >{{ selectedResponsibilityDetails?.ReportName }}</span\n              >\n            </div>\n            <button\n              class=\"edit-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center\"\n              (click)=\"openRadioResponsibility($event)\"\n            >\n              <i class=\"icons vx-mr-1\" (click)=\"openRadioResponsibility($event)\"\n                >&#xe90c;</i\n              >\n              EDIT\n            </button>\n          </div>\n          <app-frequency-responsibility-list\n            *ngIf=\"openRadio\"\n            [feature]=\"feature\"\n            [selectedResponsibilityDetails]=\"\n              selectedResponsibilityDetails ? selectedResponsibilityDetails : {}\n            \"\n            (backButton)=\"openRadioResponsibility($event)\"\n            (selectedResponsibility)=\"onResponsibilitySelection($event)\"\n          ></app-frequency-responsibility-list>\n        </ng-container>\n        <ng-container *ngIf=\"!featureFlag_on_completion_of\">\n          <cs-select\n            [class.disabled]=\"placeholder === 'Loading...'\"\n            [(ngModel)]=\"selectedResponsibilityDetails\"\n            (valueChanged)=\"onResponsibilitySelection($event)\"\n            [placeholder]=\"placeholder\"\n          >\n            <cs-option\n              *ngFor=\"\n                let responsibility of onCompletionOfResponsibility;\n                let i = index\n              \"\n              [value]=\"responsibility\"\n              [optionTooltip]=\"responsibility?.ReportName\"\n              >{{ responsibility?.ReportName }}</cs-option\n            >\n          </cs-select>\n        </ng-container>\n\n        <div class=\"time-picker-group vx-d-flex\" *ngIf=\"!openRadio\">\n          <div\n            class=\"time-field\"\n            appPopover\n            (click)=\"timePicker.popover()\"\n            placement=\"right\"\n          >\n            <input\n              class=\"input\"\n              [placeholder]=\"onCompletionOfTime | uppercase\"\n              readonly\n            />\n            <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\n              <i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i>\n            </div>\n          </div>\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\n            <app-time-picker\n              [time]=\"onCompletionOfTime\"\n              (onTimeSelection)=\"\n                timeSelection($event); timePicker.closePopover('top')\n              \"\n            ></app-time-picker>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n  </div>\n  <app-frequency-due-date\n    [id]=\"3\"\n    [pageName]=\"'onCompletion'\"\n    [mode]=\"mode\"\n    [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\"\n    [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"\n  ></app-frequency-due-date>\n</div>\n\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-on-completion-of\">\n  <div class=\"frequency-on-completion-of-message\">\n    <input\n      type=\"number\"\n      [(ngModel)]=\"onCompletionOfInput\"\n      (change)=\"inputValueChange($event)\"\n      onkeydown=\"return event.keyCode !== 190\"\n      min=\"0\"\n      oninput=\"this.value = Math.abs(this.value)\"\n    />\n    <p>{{ onCompletionOfInput > 1 ? \"days\" : \"day\" }} after completion of</p>\n  </div>\n  <div class=\"frequency-on-completion-of-row\">\n    <div class=\"responsibility\">\n      <cs-select\n        [class.disabled]=\"placeholder === 'Loading...'\"\n        [(ngModel)]=\"selectedResponsibilityDetails\"\n        (valueChanged)=\"onResponsibilitySelection($event)\"\n        [placeholder]=\"placeholder\"\n      >\n        <cs-option\n          *ngFor=\"\n            let responsibility of onCompletionOfResponsibility;\n            let i = index\n          \"\n          [value]=\"responsibility\"\n          [optionTooltip]=\"responsibility?.ReportName\"\n          >{{ responsibility?.ReportName }}</cs-option\n        >\n      </cs-select>\n    </div>\n    <div class=\"time\">\n      <input\n        type=\"text\"\n        readonly\n        aria-label=\"12hr format\"\n        [(ngModel)]=\"onCompletionOfTime\"\n        placeholder=\"Select Time\"\n      />\n    </div>\n  </div>\n  <app-frequency-due-date\n    [id]=\"3\"\n    [pageName]=\"'onCompletion'\"\n    [mode]=\"mode\"\n    [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\"\n    [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"\n  ></app-frequency-due-date>\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 .frequency-completion-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-completion-top 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 0 0;outline:none}::ng-deep .frequency-completion-top input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-completion-top input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-completion-bottom{border-top:1px solid #f1f1f1}::ng-deep .frequency-completion-bottom .select-box{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2rem}::ng-deep .frequency-completion-bottom .select-box.disabled{pointer-events:none;opacity:.5}::ng-deep .frequency-completion-bottom .after-select-box{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;height:2rem}::ng-deep .frequency-completion-bottom .after-select-box .select-chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a}::ng-deep .frequency-completion-bottom .after-select-box .select-chip .cross{cursor:pointer}::ng-deep .frequency-completion-bottom .after-select-box .select-chip span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:30rem}::ng-deep .frequency-completion-bottom .after-select-box button.edit-btn{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;height:1.5rem}::ng-deep .frequency-completion-bottom cs-select{width:100%;margin-right:.75rem}::ng-deep .frequency-completion-bottom cs-select .selection-wrap .input-group input.value{height:2rem!important;font-size:11px!important}::ng-deep .frequency-completion-bottom .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-completion-bottom .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group .time-field.disable{background:#f1f1f1;border-radius:.25rem}::ng-deep .frequency-completion-bottom .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep .selection-wrap .input-group i{top:12px!important}\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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i5.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: i8.CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: i9.TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: i10.FrequencyDueDateComponent, selector: "app-frequency-due-date", inputs: ["mode", "pageType", "completedRequired", "notCompletedRequired", "completedValue", "notCompletedValue", "deactivateValue", "isDeactivated", "id", "pageName"], outputs: ["valueChange"] }, { kind: "component", type: i11.FrequencyResponsibilityListComponent, selector: "app-frequency-responsibility-list", inputs: ["onCompletionOfResponsibility", "feature", "selectedResponsibilityDetails"], outputs: ["backButton", "selectedResponsibility"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FrequencyOnCompletionOfComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-frequency-on-completion-of', template: "<div class=\"frequency-completion\" *ngIf=\"mode !== 'policy' || backButton\">\n  <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n    DUE DATE FREQUENCY:\n  </div>\n  <div class=\"frequency-completion-inner\">\n    <div class=\"frequency-completion-top vx-p-3 vx-d-flex vx-align-center\">\n      <input\n        class=\"countNum\"\n        type=\"number\"\n        [(ngModel)]=\"onCompletionOfInput\"\n        (change)=\"inputValueChange($event)\"\n        onkeydown=\"return event.keyCode !== 190\"\n        min=\"0\"\n        oninput=\"this.value = Math.abs(this.value)\"\n      />\n      <div class=\"vx-fs-13 vx-paragraph-txt\">day after completion of</div>\n    </div>\n    <div class=\"frequency-completion-bottom vx-p-3\">\n      <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\n        RESPONSIBILITY\n      </div>\n      <div class=\"vx-d-flex vx-align-center\">\n        <ng-container *ngIf=\"featureFlag_on_completion_of\">\n          <div\n            *ngIf=\"featureFlag_on_completion_of && !isSelectedData\"\n            [class.disabled]=\"placeholder === 'Loading...'\"\n            class=\"select-box vx-fs-11 vx-paragraph-txt vx-p-2 vx-pl-3 vx-pr-3 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n            (click)=\"openRadioResponsibility($event)\"\n          >\n            {{\n              placeholder === \"Loading...\"\n                ? \"Loading...\"\n                : \"Select a Responsibility\"\n            }}\n            <i class=\"icons vx-fs-10\">&#xe9e8;</i>\n          </div>\n          <div\n            *ngIf=\"featureFlag_on_completion_of && isSelectedData\"\n            class=\"after-select-box vx-p-1 vx-mr-3 vx-d-flex vx-align-center vx-justify-between vx-w-100\"\n          >\n            <div\n              *ngIf=\"isSelectedData\"\n              class=\"select-chip vx-fs-12 vx-paragraph-txt vx-p-1 vx-pl-2 vx-pr-2 vx-d-flex vx-align-center\"\n            >\n              <i\n                *ngIf=\"isSelectedData\"\n                class=\"icons cross vx-fs-14 vx-mr-1\"\n                (click)=\"remove()\"\n                >&#xe9ae;</i\n              >\n              <span\n                [appTooltip]=\"selectedResponsibilityDetails?.ReportName\"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"true\"\n                >{{ selectedResponsibilityDetails?.ReportName }}</span\n              >\n            </div>\n            <button\n              class=\"edit-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center\"\n              (click)=\"openRadioResponsibility($event)\"\n            >\n              <i class=\"icons vx-mr-1\" (click)=\"openRadioResponsibility($event)\"\n                >&#xe90c;</i\n              >\n              EDIT\n            </button>\n          </div>\n          <app-frequency-responsibility-list\n            *ngIf=\"openRadio\"\n            [feature]=\"feature\"\n            [selectedResponsibilityDetails]=\"\n              selectedResponsibilityDetails ? selectedResponsibilityDetails : {}\n            \"\n            (backButton)=\"openRadioResponsibility($event)\"\n            (selectedResponsibility)=\"onResponsibilitySelection($event)\"\n          ></app-frequency-responsibility-list>\n        </ng-container>\n        <ng-container *ngIf=\"!featureFlag_on_completion_of\">\n          <cs-select\n            [class.disabled]=\"placeholder === 'Loading...'\"\n            [(ngModel)]=\"selectedResponsibilityDetails\"\n            (valueChanged)=\"onResponsibilitySelection($event)\"\n            [placeholder]=\"placeholder\"\n          >\n            <cs-option\n              *ngFor=\"\n                let responsibility of onCompletionOfResponsibility;\n                let i = index\n              \"\n              [value]=\"responsibility\"\n              [optionTooltip]=\"responsibility?.ReportName\"\n              >{{ responsibility?.ReportName }}</cs-option\n            >\n          </cs-select>\n        </ng-container>\n\n        <div class=\"time-picker-group vx-d-flex\" *ngIf=\"!openRadio\">\n          <div\n            class=\"time-field\"\n            appPopover\n            (click)=\"timePicker.popover()\"\n            placement=\"right\"\n          >\n            <input\n              class=\"input\"\n              [placeholder]=\"onCompletionOfTime | uppercase\"\n              readonly\n            />\n            <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\n              <i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i>\n            </div>\n          </div>\n          <app-popover #timePicker [dontCloseonClick]=\"true\">\n            <app-time-picker\n              [time]=\"onCompletionOfTime\"\n              (onTimeSelection)=\"\n                timeSelection($event); timePicker.closePopover('top')\n              \"\n            ></app-time-picker>\n          </app-popover>\n        </div>\n      </div>\n    </div>\n  </div>\n  <app-frequency-due-date\n    [id]=\"3\"\n    [pageName]=\"'onCompletion'\"\n    [mode]=\"mode\"\n    [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\"\n    [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"\n  ></app-frequency-due-date>\n</div>\n\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-on-completion-of\">\n  <div class=\"frequency-on-completion-of-message\">\n    <input\n      type=\"number\"\n      [(ngModel)]=\"onCompletionOfInput\"\n      (change)=\"inputValueChange($event)\"\n      onkeydown=\"return event.keyCode !== 190\"\n      min=\"0\"\n      oninput=\"this.value = Math.abs(this.value)\"\n    />\n    <p>{{ onCompletionOfInput > 1 ? \"days\" : \"day\" }} after completion of</p>\n  </div>\n  <div class=\"frequency-on-completion-of-row\">\n    <div class=\"responsibility\">\n      <cs-select\n        [class.disabled]=\"placeholder === 'Loading...'\"\n        [(ngModel)]=\"selectedResponsibilityDetails\"\n        (valueChanged)=\"onResponsibilitySelection($event)\"\n        [placeholder]=\"placeholder\"\n      >\n        <cs-option\n          *ngFor=\"\n            let responsibility of onCompletionOfResponsibility;\n            let i = index\n          \"\n          [value]=\"responsibility\"\n          [optionTooltip]=\"responsibility?.ReportName\"\n          >{{ responsibility?.ReportName }}</cs-option\n        >\n      </cs-select>\n    </div>\n    <div class=\"time\">\n      <input\n        type=\"text\"\n        readonly\n        aria-label=\"12hr format\"\n        [(ngModel)]=\"onCompletionOfTime\"\n        placeholder=\"Select Time\"\n      />\n    </div>\n  </div>\n  <app-frequency-due-date\n    [id]=\"3\"\n    [pageName]=\"'onCompletion'\"\n    [mode]=\"mode\"\n    [isDeactivated]=\"false\"\n    [completedValue]=\"onCompletionOfWindow\"\n    [notCompletedValue]=\"onCompletionOfFailed\"\n    (valueChange)=\"onValueChange($event)\"\n  ></app-frequency-due-date>\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 .frequency-completion-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-completion-top 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 0 0;outline:none}::ng-deep .frequency-completion-top input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-completion-top input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-completion-bottom{border-top:1px solid #f1f1f1}::ng-deep .frequency-completion-bottom .select-box{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2rem}::ng-deep .frequency-completion-bottom .select-box.disabled{pointer-events:none;opacity:.5}::ng-deep .frequency-completion-bottom .after-select-box{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;height:2rem}::ng-deep .frequency-completion-bottom .after-select-box .select-chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a}::ng-deep .frequency-completion-bottom .after-select-box .select-chip .cross{cursor:pointer}::ng-deep .frequency-completion-bottom .after-select-box .select-chip span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:30rem}::ng-deep .frequency-completion-bottom .after-select-box button.edit-btn{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;height:1.5rem}::ng-deep .frequency-completion-bottom cs-select{width:100%;margin-right:.75rem}::ng-deep .frequency-completion-bottom cs-select .selection-wrap .input-group input.value{height:2rem!important;font-size:11px!important}::ng-deep .frequency-completion-bottom .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-completion-bottom .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-completion-bottom .time-picker-group .time-field.disable{background:#f1f1f1;border-radius:.25rem}::ng-deep .frequency-completion-bottom .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep .selection-wrap .input-group i{top:12px!important}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FrequencyService }]; }, propDecorators: { mode: [{
                type: Input
            }], feature: [{
                type: Input
            }], startDate: [{
                type: Input
            }], frequencyData: [{
                type: Input
            }], frequencyDetails: [{
                type: Output
            }], radioForm: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 