import { HttpParams } from '@angular/common/http';
import { Component, EventEmitter, Output, Input } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { CONSTANTS } from './constants';
import { LINKS } from '../workflow/shared/constants/cdn-link.constant';
import { API_URLS } from '../workflow-engine-container/api-constants';
import * as i0 from "@angular/core";
import * as i1 from "../workflow-services/policy.service";
import * as i2 from "@angular/common";
import * as i3 from "../formgroup/cs-checkbox/cs-checkbox.component";
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 "../sharedComponents/no-data/no-data.component";
import * as i8 from "../sharedComponents/v-loader/loader-inline/loader-inline.component";
import * as i9 from "../workflow-program/create-program-ui/pagination/pagination/pagination.component";
export class LinkRelatedPoliciesComponent {
    constructor(policyService) {
        this.policyService = policyService;
        this.CONSTANTS = CONSTANTS;
        this.LINKS = LINKS;
        this.animation = false;
        this.unsubscribe = new Subject();
        this.policySortBy = 'desc';
        this.selectedControlIds = [];
        this.selectedPolicyList = [];
        this.deletedList = [];
        this.searchText = {
            policy: '',
        };
        this.loader = false;
        this.recentPage = CONSTANTS.DEFAULT_PAGE_NUMBER;
        this.policiesList = {
            from: 1,
            to: 0,
            currentPage: 1,
            totalPage: 0,
            totalRecords: 0,
            data: [],
        };
        this.selectedPolicies = [];
        this.mode = 'CREATE';
        this.policyId = '';
        this.closeLinkPolicyList = new EventEmitter();
        this.selectedList = new EventEmitter();
        this.recentPage = CONSTANTS.DEFAULT_PAGE_NUMBER;
    }
    ngOnInit() {
        this.selectedPolicyList = [...new Set(this.selectedPolicies)];
        this.animation = true;
        setTimeout(() => {
            this.animation = false;
        }, 300);
        this.getPolicies();
    }
    goBack() {
        this.closeLinkPolicyList.emit();
    }
    selectedItems() {
        const selectedContractIds = this.selectedPolicyList?.map((item) => item?.contract_id);
        this.selectedControlIds = this.policyService?.linkRelatePolicies[this.recentPage - 1]?.data
            .filter((element) => selectedContractIds?.includes(element?.contract_id))
            .map((element) => element?.contract_id);
    }
    searchBy(event) {
        if (this.searchText?.policy != event) {
            this.searchText.policy = event;
            this.getPolicies({ search: true });
        }
        if (!event) {
            this.recentPage = CONSTANTS.DEFAULT_PAGE_NUMBER;
            this.getPolicies({ search: false });
        }
    }
    changePage(event) {
        this.recentPage = event;
        if (this.policyService?.linkRelatePolicies[event - 1]) {
            this.policiesList = this.policyService?.linkRelatePolicies[event - 1];
            this.selectedItems();
            return;
        }
        this.getPolicies();
    }
    selectedParam(data) {
        let params = new HttpParams();
        params = params.append('paginationType', 'small');
        if (data?.search) {
            params = params.append('searchText', this.searchText.policy);
        }
        params = params.append('pageNo', this.recentPage);
        if (data?.sort) {
            params = params.append('sortBy', this.policySortBy);
        }
        if (this.mode === 'EDIT') {
            params = params.append(CONSTANTS.POLICY_ID, this.policyId);
        }
        return params;
    }
    getPagePolicyList(res) {
        return {
            from: res?.from ?? 1,
            to: res?.to ?? 0,
            currentPage: this.recentPage,
            totalPage: res?.total_pages ?? 0,
            totalRecords: res?.all_records ?? 0,
            data: [...new Set(res?.data)],
        };
    }
    getPolicies(data) {
        if (this.policyService?.linkRelatePolicies[this.recentPage - 1] &&
            !data?.search) {
            this.policiesList =
                this.policyService.linkRelatePolicies[this.recentPage - 1];
            this.selectedItems();
            return;
        }
        let params = this.selectedParam(data);
        this.loader = true;
        const request = {
            method: 'get',
            action: '/policy',
            mode: API_URLS.fetchPolicyList,
            params,
        };
        this.policyService
            .getPolicyList(request)
            .pipe(takeUntil(this.unsubscribe))
            .subscribe({
            next: (res) => {
                this.loader = false;
                this.policiesList = this.getPagePolicyList(res);
                if (!this.policyService?.linkRelatePolicies[this.recentPage - 1]) {
                    this.policyService.linkRelatePolicies[this.recentPage - 1] =
                        JSON.parse(JSON.stringify(this.policiesList));
                }
                this.selectedItems();
            },
            error: (err) => {
                this.loader = false;
            },
        });
    }
    selectPolicy(event, data) {
        if (event) {
            this.selectedControlIds.push(data?.contract_id);
            this.selectedPolicyList.push(data);
        }
        else {
            this.selectedControlIds = this.selectedControlIds?.filter((id) => id !== data?.contract_id);
            this.selectedPolicyList = this.selectedPolicyList?.filter((item) => item?.contract_id !== data?.contract_id);
        }
    }
    saveChanges() {
        this.selectedList.emit({
            selectedPolicyList: this.selectedPolicyList,
        });
    }
    deleteItem(event) {
        this.selectedPolicyList = this.selectedPolicyList?.filter((item) => item?.contract_id !== event?.contract_id);
        this.selectedItems();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkRelatedPoliciesComponent, deps: [{ token: i1.PolicyService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LinkRelatedPoliciesComponent, selector: "app-link-related-policies", inputs: { selectedPolicies: "selectedPolicies", mode: "mode", policyId: "policyId" }, outputs: { closeLinkPolicyList: "closeLinkPolicyList", selectedList: "selectedList" }, ngImport: i0, template: "<div class=\"link-policy\" [class.animate]=\"animation\">\n  <ng-container>\n    <div\n      class=\"link-policy-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n      <div class=\"page-title vx-fs-14 vx-fw-500 vx-label-txt\">\n        Select Policies to link with\n      </div>\n    </div>\n    <div class=\"link-policy-body vx-p-4 vx-pb-3\">\n      <div class=\"link-policy-search vx-mb-2\">\n        <i class=\"icons vx-fs-12\">&#xe90b;</i>\n        <input\n          type=\"text\"\n          placeholder=\"Search Policies\"\n          (keyup.enter)=\"searchBy($event.target.value)\"\n        />\n      </div>\n      <vui-pagination\n        *ngIf=\"\n          !loader && policiesList.totalPage > CONSTANTS.DEFAULT_PAGE_NUMBER\n        \"\n        [from]=\"policiesList.from\"\n        [to]=\"policiesList.to\"\n        [total]=\"policiesList.totalRecords\"\n        [showPageDetail]=\"true\"\n        [totalPage]=\"policiesList.totalPage\"\n        [currentPage]=\"policiesList.currentPage\"\n        [pageInSingleView]=\"CONSTANTS.PAGE_IN_SINGLE_VIEW\"\n        (pageChanged)=\"changePage($event)\"\n      >\n      </vui-pagination>\n      <div\n        class=\"link-policy-table\"\n        [class.with-pagination]=\"!loader && policiesList.totalPage > 1\"\n      >\n        <ng-container *ngIf=\"!loader && policiesList?.data?.length > 0\">\n          <div class=\"table-header\">\n            <div class=\"table-row\">\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                #\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center policies\"\n              >\n                POLICIES\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center categories\"\n              >\n                CATEGORIES\n              </div>\n            </div>\n          </div>\n          <div class=\"table-body\">\n            <div\n              class=\"table-row\"\n              [class.active]=\"selectedControlIds?.includes(policy?.contract_id)\"\n              *ngFor=\"let policy of policiesList?.data; let i = index\"\n            >\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"i + policiesList.from\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ i + policiesList.from }}\n                </div>\n                <app-cs-checkbox\n                  class=\"check-box\"\n                  [value]=\"policy?.contract_id\"\n                  [ngValue]=\"selectedControlIds?.includes(policy?.contract_id)\"\n                  (ngValueChange)=\"selectPolicy($event, policy)\"\n                ></app-cs-checkbox>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center policies column-body clickable\"\n              >\n                <div\n                  class=\"value vx-fs-12 vx-label-txt\"\n                  [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                  (click)=\"\n                    selectPolicy(\n                      !selectedControlIds?.includes(policy?.contract_id),\n                      policy\n                    )\n                  \"\n                >\n                  {{\n                    policy?.control_id\n                      ? \"[POLID - \" + policy.control_id + \"] \"\n                      : \"\"\n                  }}{{ policy?.contract_name }}\n                </div>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center categories\"\n              >\n                <ng-container *ngIf=\"policy?.childCat?.length\">\n                  <div\n                    class=\"value vx-fs-12 vx-label-txt\"\n                    [appTooltip]=\"policy?.childCat[0]?.category_name\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ policy?.childCat[0]?.category_name }}\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"policy?.childCat?.length > 1\">\n                  <button\n                    class=\"count vx-fs-12 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"\n                    appPopover\n                    (click)=\"category.popover()\"\n                    placement=\"top\"\n                  >\n                    +{{ policy?.childCat?.length - 1 }}\n                  </button>\n                  <app-popover #category [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li\n                          *ngFor=\"\n                            let childCategory of policy?.childCat\n                              | slice : 1\n                          \"\n                        >\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">{{\n                              childCategory?.category_name\n                            }}</span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <app-no-data\n          *ngIf=\"!loader && policiesList?.data?.length === 0\"\n          [noDataImage]=\"LINKS.linkPolicyNoDataImage\"\n          [noDataText]=\"CONSTANTS.NO_DATA_IMAGE_TEXT\"\n        ></app-no-data>\n      </div>\n\n      <div\n        class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3 vx-mt-1\"\n      >\n        <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\n          <div class=\"selected\" *ngIf=\"selectedPolicyList?.length > 0\">\n            <div\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n            >\n              <ng-container\n                *ngFor=\"let policy of selectedPolicyList | slice : 0 : 1\"\n              >\n                <i\n                  (click)=\"deleteItem(policy)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  >&#xe9ae;</i\n                >\n                <span\n                  class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                  >{{ policy?.contract_name }}</span\n                >\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"selectedPolicyList.length > 1\"\n                type=\"button\"\n                appPopover\n                (click)=\"relatedPolicy.popover()\"\n                placement=\"left\"\n              >\n                +{{ selectedPolicyList?.length - 1 }}\n              </button>\n            </div>\n          </div>\n        </div>\n        <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let policy of selectedPolicyList | slice : 1;\n                  let j = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"deleteItem(policy)\">&#xe90d;</i>\n                    {{ policy?.contract_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <div class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\n          <button\n            (click)=\"goBack()\"\n            class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-red\"\n          >\n            CANCEL\n          </button>\n          <button\n            (click)=\"saveChanges()\"\n            class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-white\"\n          >\n            NEXT <i class=\"icons vx-ml-2\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\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/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\";::ng-deep .link-policy{position:fixed;inset:0 500px 0 0}::ng-deep .link-policy.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .link-policy-head{background:#f8f8f8;border-radius:.125rem .125rem 0 0;border-bottom:1px solid #F1F1F1;height:2.75rem}::ng-deep .link-policy-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .link-policy-search{position:relative}::ng-deep .link-policy-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .link-policy-search input::placeholder{color:#747576;opacity:1}::ng-deep .link-policy-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .link-policy-table{overflow:hidden;overflow-y:auto;height:calc(100vh - 14rem)}::ng-deep .link-policy-table::-webkit-scrollbar-track{background-color:transparent}::ng-deep .link-policy-table .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .link-policy-table .table-header .table-row{border:none!important;border-radius:0!important}::ng-deep .link-policy-table .table-header .table-row .table-column{line-height:1rem!important;min-height:1.5rem!important}::ng-deep .link-policy-table .table-row{border:1px solid #F1F1F1;border-radius:.25rem;display:flex;justify-content:space-between;position:relative;margin-bottom:.25rem}::ng-deep .link-policy-table .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .link-policy-table .table-row.active .table-column.serial app-cs-checkbox{opacity:1}::ng-deep .link-policy-table .table-row .table-column{min-height:2.5rem;position:relative;width:100%}::ng-deep .link-policy-table .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .link-policy-table .table-row .table-column.serial .sr-no{width:1.25rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .link-policy-table .table-row .table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .link-policy-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .link-policy-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .link-policy-table .table-row .table-column.policies{width:calc(100% - 28rem);min-width:calc(100% - 28rem)}::ng-deep .link-policy-table .table-row .table-column.policies .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .link-policy-table .table-row .table-column.categories{width:26rem;min-width:26rem}::ng-deep .link-policy-table .table-row .table-column.categories .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1rem)}::ng-deep .link-policy-table .table-row .table-column.categories button.count{background:#1e5dd3;border:none;border-radius:.125rem;height:1.5rem}::ng-deep .link-policy-table .table-row .table-column.category-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .link-policy-table .table-row .table-column.category-name .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .link-policy-floating-bar{background:#fff;border-radius:.25rem;box-shadow:0 2px 12px #4681ef40}::ng-deep .link-policy-floating-bar-left .counter{background:#34aa44;border-radius:.125rem;min-width:1.75rem}::ng-deep .link-policy-floating-bar-left .chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a;height:1.5rem;display:block;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .link-policy-floating-bar-left .chip i{position:relative;top:.0625rem;cursor:pointer}::ng-deep .link-policy-floating-bar-left button.count{background:#34aa44;border:none;border-radius:.125rem;height:1.5rem}::ng-deep .link-policy-floating-bar-right button{background:transparent;border:none;border-radius:.125rem;padding:0 .5rem;height:1.5rem}::ng-deep .link-policy-floating-bar-right button.next-btn{background:#1e5dd3}::ng-deep .link-policy-floating-bar-right button.next-btn.disabled{background:#f1f1f1!important;color:#747576!important;pointer-events:none!important}::ng-deep app-popover .wf-action-list ul.action-item li .avatar-card .cross-btn{cursor:pointer}.wf-action-list .action-item li .count-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.column-body{position:relative;left:10px}.clickable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { 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: "component", type: i7.NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: i8.LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: i9.PaginationComponent, selector: "vui-pagination", inputs: ["from", "to", "total", "showPageDetail", "totalPage", "currentPage", "pageInSingleView"], outputs: ["pageChanged"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LinkRelatedPoliciesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-link-related-policies', template: "<div class=\"link-policy\" [class.animate]=\"animation\">\n  <ng-container>\n    <div\n      class=\"link-policy-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n    >\n      <div class=\"page-title vx-fs-14 vx-fw-500 vx-label-txt\">\n        Select Policies to link with\n      </div>\n    </div>\n    <div class=\"link-policy-body vx-p-4 vx-pb-3\">\n      <div class=\"link-policy-search vx-mb-2\">\n        <i class=\"icons vx-fs-12\">&#xe90b;</i>\n        <input\n          type=\"text\"\n          placeholder=\"Search Policies\"\n          (keyup.enter)=\"searchBy($event.target.value)\"\n        />\n      </div>\n      <vui-pagination\n        *ngIf=\"\n          !loader && policiesList.totalPage > CONSTANTS.DEFAULT_PAGE_NUMBER\n        \"\n        [from]=\"policiesList.from\"\n        [to]=\"policiesList.to\"\n        [total]=\"policiesList.totalRecords\"\n        [showPageDetail]=\"true\"\n        [totalPage]=\"policiesList.totalPage\"\n        [currentPage]=\"policiesList.currentPage\"\n        [pageInSingleView]=\"CONSTANTS.PAGE_IN_SINGLE_VIEW\"\n        (pageChanged)=\"changePage($event)\"\n      >\n      </vui-pagination>\n      <div\n        class=\"link-policy-table\"\n        [class.with-pagination]=\"!loader && policiesList.totalPage > 1\"\n      >\n        <ng-container *ngIf=\"!loader && policiesList?.data?.length > 0\">\n          <div class=\"table-header\">\n            <div class=\"table-row\">\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                #\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center policies\"\n              >\n                POLICIES\n              </div>\n              <div\n                class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center categories\"\n              >\n                CATEGORIES\n              </div>\n            </div>\n          </div>\n          <div class=\"table-body\">\n            <div\n              class=\"table-row\"\n              [class.active]=\"selectedControlIds?.includes(policy?.contract_id)\"\n              *ngFor=\"let policy of policiesList?.data; let i = index\"\n            >\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\"\n              >\n                <div\n                  class=\"sr-no\"\n                  [appTooltip]=\"i + policiesList.from\"\n                  placement=\"bottom\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ i + policiesList.from }}\n                </div>\n                <app-cs-checkbox\n                  class=\"check-box\"\n                  [value]=\"policy?.contract_id\"\n                  [ngValue]=\"selectedControlIds?.includes(policy?.contract_id)\"\n                  (ngValueChange)=\"selectPolicy($event, policy)\"\n                ></app-cs-checkbox>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center policies column-body clickable\"\n              >\n                <div\n                  class=\"value vx-fs-12 vx-label-txt\"\n                  [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                  (click)=\"\n                    selectPolicy(\n                      !selectedControlIds?.includes(policy?.contract_id),\n                      policy\n                    )\n                  \"\n                >\n                  {{\n                    policy?.control_id\n                      ? \"[POLID - \" + policy.control_id + \"] \"\n                      : \"\"\n                  }}{{ policy?.contract_name }}\n                </div>\n              </div>\n              <div\n                class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center categories\"\n              >\n                <ng-container *ngIf=\"policy?.childCat?.length\">\n                  <div\n                    class=\"value vx-fs-12 vx-label-txt\"\n                    [appTooltip]=\"policy?.childCat[0]?.category_name\"\n                    placement=\"bottom-left\"\n                    delay=\"0\"\n                    type=\"black\"\n                    [tooltipMandatory]=\"false\"\n                  >\n                    {{ policy?.childCat[0]?.category_name }}\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"policy?.childCat?.length > 1\">\n                  <button\n                    class=\"count vx-fs-12 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"\n                    appPopover\n                    (click)=\"category.popover()\"\n                    placement=\"top\"\n                  >\n                    +{{ policy?.childCat?.length - 1 }}\n                  </button>\n                  <app-popover #category [dontCloseonClick]=\"true\">\n                    <div class=\"wf-action-list\">\n                      <ul class=\"action-item\">\n                        <li\n                          *ngFor=\"\n                            let childCategory of policy?.childCat\n                              | slice : 1\n                          \"\n                        >\n                          <div class=\"avatar-card\">\n                            <span class=\"value\">{{\n                              childCategory?.category_name\n                            }}</span>\n                          </div>\n                        </li>\n                      </ul>\n                    </div>\n                  </app-popover>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <app-no-data\n          *ngIf=\"!loader && policiesList?.data?.length === 0\"\n          [noDataImage]=\"LINKS.linkPolicyNoDataImage\"\n          [noDataText]=\"CONSTANTS.NO_DATA_IMAGE_TEXT\"\n        ></app-no-data>\n      </div>\n\n      <div\n        class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3 vx-mt-1\"\n      >\n        <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\n          <div class=\"selected\" *ngIf=\"selectedPolicyList?.length > 0\">\n            <div\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n            >\n              <ng-container\n                *ngFor=\"let policy of selectedPolicyList | slice : 0 : 1\"\n              >\n                <i\n                  (click)=\"deleteItem(policy)\"\n                  class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n                  >&#xe9ae;</i\n                >\n                <span\n                  class=\"chipName vx-fs-11 vx-label-txt\"\n                  [appTooltip]=\"policy?.contract_name\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"false\"\n                  >{{ policy?.contract_name }}</span\n                >\n              </ng-container>\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                *ngIf=\"selectedPolicyList.length > 1\"\n                type=\"button\"\n                appPopover\n                (click)=\"relatedPolicy.popover()\"\n                placement=\"left\"\n              >\n                +{{ selectedPolicyList?.length - 1 }}\n              </button>\n            </div>\n          </div>\n        </div>\n        <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n          <div class=\"wf-action-list\">\n            <ul class=\"action-item\">\n              <li\n                *ngFor=\"\n                  let policy of selectedPolicyList | slice : 1;\n                  let j = index\n                \"\n              >\n                <div class=\"avatar-card\">\n                  <span class=\"value\">\n                    <i class=\"icons\" (click)=\"deleteItem(policy)\">&#xe90d;</i>\n                    {{ policy?.contract_name }}\n                  </span>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </app-popover>\n        <div class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\n          <button\n            (click)=\"goBack()\"\n            class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-red\"\n          >\n            CANCEL\n          </button>\n          <button\n            (click)=\"saveChanges()\"\n            class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-white\"\n          >\n            NEXT <i class=\"icons vx-ml-2\">&#xe91e;</i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\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/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\";::ng-deep .link-policy{position:fixed;inset:0 500px 0 0}::ng-deep .link-policy.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .link-policy-head{background:#f8f8f8;border-radius:.125rem .125rem 0 0;border-bottom:1px solid #F1F1F1;height:2.75rem}::ng-deep .link-policy-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .link-policy-search{position:relative}::ng-deep .link-policy-search input{height:2.75rem;line-height:1.5rem;padding:.75rem .75rem .75rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .link-policy-search input::placeholder{color:#747576;opacity:1}::ng-deep .link-policy-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1}::ng-deep .link-policy-table{overflow:hidden;overflow-y:auto;height:calc(100vh - 14rem)}::ng-deep .link-policy-table::-webkit-scrollbar-track{background-color:transparent}::ng-deep .link-policy-table .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .link-policy-table .table-header .table-row{border:none!important;border-radius:0!important}::ng-deep .link-policy-table .table-header .table-row .table-column{line-height:1rem!important;min-height:1.5rem!important}::ng-deep .link-policy-table .table-row{border:1px solid #F1F1F1;border-radius:.25rem;display:flex;justify-content:space-between;position:relative;margin-bottom:.25rem}::ng-deep .link-policy-table .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .link-policy-table .table-row.active .table-column.serial app-cs-checkbox{opacity:1}::ng-deep .link-policy-table .table-row .table-column{min-height:2.5rem;position:relative;width:100%}::ng-deep .link-policy-table .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .link-policy-table .table-row .table-column.serial .sr-no{width:1.25rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .link-policy-table .table-row .table-column.serial app-cs-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .link-policy-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .link-policy-table .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .link-policy-table .table-row .table-column.policies{width:calc(100% - 28rem);min-width:calc(100% - 28rem)}::ng-deep .link-policy-table .table-row .table-column.policies .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .link-policy-table .table-row .table-column.categories{width:26rem;min-width:26rem}::ng-deep .link-policy-table .table-row .table-column.categories .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1rem)}::ng-deep .link-policy-table .table-row .table-column.categories button.count{background:#1e5dd3;border:none;border-radius:.125rem;height:1.5rem}::ng-deep .link-policy-table .table-row .table-column.category-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .link-policy-table .table-row .table-column.category-name .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .link-policy-floating-bar{background:#fff;border-radius:.25rem;box-shadow:0 2px 12px #4681ef40}::ng-deep .link-policy-floating-bar-left .counter{background:#34aa44;border-radius:.125rem;min-width:1.75rem}::ng-deep .link-policy-floating-bar-left .chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a;height:1.5rem;display:block;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .link-policy-floating-bar-left .chip i{position:relative;top:.0625rem;cursor:pointer}::ng-deep .link-policy-floating-bar-left button.count{background:#34aa44;border:none;border-radius:.125rem;height:1.5rem}::ng-deep .link-policy-floating-bar-right button{background:transparent;border:none;border-radius:.125rem;padding:0 .5rem;height:1.5rem}::ng-deep .link-policy-floating-bar-right button.next-btn{background:#1e5dd3}::ng-deep .link-policy-floating-bar-right button.next-btn.disabled{background:#f1f1f1!important;color:#747576!important;pointer-events:none!important}::ng-deep app-popover .wf-action-list ul.action-item li .avatar-card .cross-btn{cursor:pointer}.wf-action-list .action-item li .count-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}.column-body{position:relative;left:10px}.clickable{cursor:pointer}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.PolicyService }]; }, propDecorators: { selectedPolicies: [{
                type: Input
            }], mode: [{
                type: Input
            }], policyId: [{
                type: Input
            }], closeLinkPolicyList: [{
                type: Output
            }], selectedList: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 