sf-i-events
Version:
Superflows Navigation Component
1,718 lines (1,432 loc) • 1.53 MB
text/typescript
/**
* @license
* Copyright 2022 Superflow.dev
* SPDX-License-Identifier: MIT
*/
import { LitElement, html, css, PropertyValueMap } from 'lit';
import { customElement, query, queryAssignedElements, property } from 'lit/decorators.js';
// import {customElement, query, property} from 'lit/decorators.js';
import Util from './util';
import { SfIForm } from 'sf-i-form';
import { SfIUploader } from 'sf-i-uploader';
import { Chart, ChartItem, registerables } from 'chart.js';
import { SfIElasticText } from 'sf-i-elastic-text';
import { SfIMultitextarea } from 'sf-i-multitextarea';
import { SfIReporting } from 'sf-i-reporting';
// import {LitElement, html, css} from 'lit';
// import {customElement} from 'lit/decorators.js';
/*
Modes: View, Add, Edit, Delete, Admin
DB: partitionKey, rangeKey, values
*/
/**
* SfIEvents element.
* @fires renderComplete - When the list is populated
* @fires valueChanged - When the value is changed
* @property apiId - backend api id
* @property label - input label
* @property name - name of the input
* @property mode - mode of operation
* @property selectedId - id to preselect
* @property selectedValue - callback function
*/
@customElement('sf-i-events')
export class SfIEvents extends LitElement {
SEARCH_BLOCK_SIZE = 10;
FLOW_GRAPH_COMPLETENESS = "completeness";
FLOW_GRAPH_TIMELINESS = "timeliness";
FLOW_GRAPH_COMPLIANCE = "compliance";
FLOW_GRAPH_RISKAREAS = "riskarea";
FLOW_GRAPH_RISKSEVERITY = "risk";
FLOW_GRAPH_LOCATION = "locationname";
FLOW_GRAPH_FUNCTION = "functions";
FLOW_GRAPH_OBLIGATIONTYPE = "obligationtype";
FLOW_GRAPH_JURISDICTION = "jurisdiction";
FLOW_GRAPH_FREQUENCY = "frequency";
FLOW_GRAPH_SUBCATEGORY = "subcategory";
TAB_GROUP_BUSINESS_UNDERSTANDING = "businessunderstanding";
TAB_GROUP_GOVERNANCE_MAPPING = "governancemapping";
TAB_GROUP_CUSTOMIZATION = "customize";
TAB_GROUP_ROLLOUT = "rollout";
TAB_YEAR = "year";
TAB_FIND = "find";
TAB_STREAM = "stream";
TAB_UPCOMING = "upcoming";
TAB_THIS = "this";
TAB_PAST = "past";
TAB_CUSTOM = "custom";
TAB_ADHOC = "adhoc";
TAB_REGISTERS = "registers";
TAB_ALL_ROLES = "allroles";
TAB_REPORTER = "reporter";
TAB_APPROVER = "approver";
TAB_FUNCTION_HEAD = "functionhead";
TAB_AUDITOR = "auditor";
TAB_VIEWER = "viewer";
TAB_STATUTES = "statutes";
TAB_COMPLIANCES = "compliances";
TAB_NOTICES = "notices";
TAB_ENTITIES = "entities";
TAB_LOCATIONS = "locations";
TAB_TAGS = "tags";
TAB_REPORTERS = "reporters";
TAB_APPROVERS = "approvers";
TAB_FUNCTION_HEADS = "functionheads";
TAB_MAKER_CHECKERS = "makercheckers";
TAB_AUDITORS = "auditors";
TAB_DOCS = "docs";
TAB_VIEWERS = "viewers";
TAB_DUEDATES = "duedates";
TAB_EXTENSIONS = "extensions";
TAB_TRIGGERS = "triggers";
TAB_ALERTSCHEDULES = "alertschedules";
TAB_ACTIVATIONS = "activations";
TAB_INVALIDATION = "invalidations";
TAB_INTERNALCONTROLS = "internalcontrols";
TAB_REPORTEDLOCATIONS = "reportedlocations";
TAB_SIGNOFF = "signoff";
TAB_FUNCTIONS = "functions";
TAB_COUNTRIES = "countries";
TAB_CALENDAR = "calendar";
TAB_RCM_COMPLIANCES = "compliances";
TAB_RCM_PROJECTS = "projects";
TAB_RCM_DATE = "date";
TAB_RCM_CONFIRM = "confirm";
TAB_RCM_JOBS = "jobs";
TAB_ALL = "all";
TAB_PENDING_ON_ME = "pending on me";
TAB_PENDING_ON_REPORTER = "pending on reporter";
TAB_PENDING_ON_APPROVER = "pending on approver";
TAB_DONE = "done";
COLOR_APPROVED = "#50cf01";
COLOR_NOT_STARTED = "#A4A9AD";
COLOR_PENDING_APPROVAL = "#ffe505"
COLOR_REJECTED = "#C80036"
COLOR_PAST_DUE_DATE = "#ffe505";
COLOR_LATE_EXECUTED = "#840B0F";
COLOR_LATE_APPROVED = "#EE2F36";
COLOR_LATE_REPORTED = "#Ef9C66";
COLOR_SCHEDULED = "#888888";
COLOR_NOT_COMPLIED = "#C80036";
COLOR_PARTIALLY_COMPLIED = "#F79256";
COLOR_COMPLIED = "#50cf01";
COLOR_COMPLIED_WITH_EXCEPTION = "#ffe505";
COLOR_REPORTED_NON_COMPLIANCE = "#840B0F";
STATUS_NOT_STARTED = "not-started";
STATUS_PENDING_APPROVAL = "pending-approval";
STATUS_REJECTED = "rejected";
STATUS_APPROVED = "approved";
CERTIFICATE_HTML = `
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: Source Sans Pro;
margin: 2px;
padding: 20px;
background-color: #efefef;
}
.certificate-section {
background-image: url('https://flagggrc-images.s3.amazonaws.com/certificate_background.jpg');
background-size: cover;
background-position: center;
box-shadow: inset 2px 2px 6px rgba(5, 5, 5, 0.2);
border-top: solid 1px rgba(255, 255, 255, 0.8);
border-left: solid 1px rgba(255, 255, 255, 0.8);
border-bottom: solid 1px rgba(255, 255, 255, 0.8);
border-right: solid 1px rgba(255, 255, 255, 0.8);
overflow:hidden;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 10px;
}
.certificate-section h1 {
font-family: Belanosima;
font-weight: 600;
}
.person-designation {
text-transform: capitalize;
}
.status-format {
text-transform: uppercase;
}
.text-center {
text-align: center;
}
.d-flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.w-25 {
width: 25%;
}
.w-16 {
width: 16%;
}
.w-14 {
width: 14%;
}
.w-12 {
width: 12%;
}
.w-100 {
width: 100%;
}
.text-center {
text-align: center;
}
table {
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
border-top: solid 1px rgba(255, 255, 255, 0.8);
border-left: solid 1px rgba(255, 255, 255, 0.8);
border-bottom: solid 1px rgba(255, 255, 255, 0.8);
border-right: solid 1px rgba(255, 255, 255, 0.8);
overflow:hidden;
}
th {
background-color: #6a6a6a;
color: white;
padding: 5px;
}
.td-thin {
min-width: 150px;
}
.td-wide {
min-width: 300px;
}
td {
padding: 5px;
font-size: 70%;
vertical-align: top;
min-width: 200px;
}
td span {
font-size: 130% !important;
}
.td-odd {
background-color: #efefef;
}
.td-even {
background-color: #dedede;
}
.color-pending {
color: #ffe505;
}
.color-pending-approval {
color: #ffe505;
}
.color-not-started {
color: #888888;
}
.color-not-complied {
color: #C80036;
}
.color-partially-complied {
color: #F79256;
}
.color-scheduled {
color: #888888;
}
.color-complied {
color: #50cf01;
}
.color-done {
color: #50cf01;
}
.color-rejected {
color: #C80036;
}
.color-approved {
color: #50cf01;
}
.color-past-due-date {
color: #ffe505;
}
.color-late-executed {
color: #840B0F;
}
.color-late-approved {
color: #EE2F36;
}
.color-late-reported {
color: #Ef9C66;
}
</style>
</head>
<body>
<div class="certificate-section">
<h1 class="text-center">Certificate</h1>
<p>I, PERSON_NAME, working as <span class="person-designation">PERSON_DESIGNATION</span> in PERSON_COMPANY, hereby declare that I am entrusted with the responsibility of ensuring compliance with various laws applicable to the company in the administration of business and the affairs of the company</p>
<p>After having examined and considered all relevant information and based on the information furnished by the concerned officers, I, do hereby certify that the Finance / Technical / Administration / Legal wings / department of PERSON_COMPANY for the period PERSON_PERIOD, has in the conduct of business:</p>
<ol>
<li>Complied with all applicable laws, enactments, orders, rules, regulations, and other statutory requirements of the Central, State and other Statutory and local authorities concerning the business and affairs of the company;</li>
<li>Paid all applicable statutory dues on due dates;</li>
<li>Maintained proper registers, records, documents and books and filed proper returns, forms and statements and furnished necessary particulars to the relevant authorities; and</li>
<li>Not done or committed any act or entered into any transactions in violation of any statutory provisions</li>
</ol>
<br /><br />
<div class="d-flex justify-between align-center">
<div>
<div>Date: PERSON_DATE</div>
<div>Criteria: PERSON_CRITERIA</div>
</div>
<div>
<div>Name: PERSON_NAME</div>
<div class="person-designation">Role: PERSON_DESIGNATION</div>
</div>
</div>
</div>
<br /><br />
<h3>Compliance Status</h3>
PERSON_COMPLIANCE_STATUS
<br /><br />
<h3>Compliances List</h3>
PERSON_COMPLIANCES
</body>
</html>
`;
COMPLIANCES_HTML = `
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;300;400;700;900&family=Oleo+Script&family=Oswald:wght@700&display=swap" rel="stylesheet">
<style>
body {
font-family: DM Sans;
margin: 2px;
padding: 20px;
}
.status-format {
text-transform: uppercase;
}
.text-center {
text-align: center;
}
.d-flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.mt-10 {
margin-top: 10px;
}
.w-25 {
width: 25%;
}
.w-16 {
width: 16%;
}
.w-14 {
width: 14%;
}
.w-12 {
width: 12%;
}
.w-100 {
width: 100%;
}
.w-200px {
width: 200px;
}
.text-center {
text-align: center;
}
table {
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
border-top: solid 1px rgba(255, 255, 255, 0.8);
border-left: solid 1px rgba(255, 255, 255, 0.8);
border-bottom: solid 1px rgba(255, 255, 255, 0.8);
border-right: solid 1px rgba(255, 255, 255, 0.8);
overflow:auto;
}
th {
background-color: #6a6a6a;
color: white;
padding: 5px;
}
.td-thin {
min-width: 150px;
}
.td-wide {
min-width: 300px;
}
.td-head {
font-weight: 400;
padding-left: 5px;
vertical-align: middle;
font-size: 80%;
text-transform: capitalize;
text-align: left;
}
td {
padding: 5px;
font-size: 70%;
vertical-align: top;
min-width: 200px;
}
td span {
font-size: 130% !important;
}
.td-odd {
background-color: #efefef;
}
.td-even {
background-color: #dedede;
}
.color-pending {
color: #ffe505;
}
.color-pending-approval {
color: #ffe505;
}
.color-not-started {
color: #888888;
}
.color-not-complied {
color: #C80036;
}
.color-partially-complied {
color: #F79256;
}
.color-complied {
color: #50cf01;
}
.color-complied-with-gaps {
color: #ffe505;
}
.color-reported-non-compliance {
color: #840B0F;
}
.color-scheduled {
color: #888888;
}
.color-done {
color: #50cf01;
}
.color-rejected {
color: #C80036;
}
.color-approved {
color: #50cf01;
}
.color-past-due-date {
color: #ffe505;
}
.color-late-executed {
color: #840B0F;
}
.color-late-approved {
color: #EE2F36;
}
.color-late-reported {
color: #Ef9C66;
}
.h-100 {
height: 100vh;
}
.abs {
position: absolute;
}
.watermark {
background-image: url(https://flagggrc-images.s3.amazonaws.com/logo.png);
background-position: center;
background-repeat: no-repeat;
opacity: 5%;
width: 100%;
height: 100vh;
position: fixed;
}
.scroll-x {
display: block;
overflow-x: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<div>
<h1>Compliance Report</h1>
<div class="d-flex justify-between align-center">
<div>
<div>Report generated for PROJECT_NAME on REPORT_DATE</div>
</div>
</div>
<div class="d-flex justify-between align-center">
FILTERS_DATA
</div>
<br />
<div class="watermark"></div>
<div class="report">
PERSON_COMPLIANCES
</div>
</div>
<script>
</script>
</body>
</html>
`;
MAPPING_HTML = `
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module">
import {LitElement, html, css} from 'https://esm.run/lit-element/lit-element.js';
import {SfISelect} from 'https://esm.run/sf-i-select/sf-i-select.js';
import {SfISubSelect} from 'https://esm.run/sf-i-sub-select/sf-i-sub-select.js';
import {SfIForm} from 'https://esm.run/sf-i-form/sf-i-form.js';
import {SfIElasticText} from 'https://esm.run/sf-i-elastic-text/sf-i-elastic-text.js';
import {SfIUploader} from 'https://esm.run/sf-i-uploader/sf-i-uploader.js';
import {SfIMultitextarea} from 'https://esm.run/sf-i-multitextarea/sf-i-multitextarea.js';
// import {LitElement, html, css} from 'https://unpkg.com/lit-element@3.3.3/lit-element.js?module';
// import {SfNav} from 'https://unpkg.com/sf-nav@1.0.94/sf-nav.js?module';
// import {SfChartPie} from 'https://unpkg.com/sf-chart-pie@1.0.4/sf-chart-pie.js?module';
// import {SfChartBar} from 'https://unpkg.com/sf-chart-bar@1.0.6/sf-chart-bar.js?module';
// import {SfUserAuth} from 'https://unpkg.com/sf-user-auth@1.0.89/sf-user-auth.js?module';
// import {SfISelect} from 'https://unpkg.com/sf-i-select@1.0.91/sf-i-select.js?module';
// import {SfISubSelect} from 'https://unpkg.com/sf-i-sub-select@1.0.82/sf-i-sub-select.js?module';
// import {SfIForm} from 'https://unpkg.com/sf-i-form@1.0.125/sf-i-form.js?module';
// import {SfIEvents} from 'https://unpkg.com/sf-i-events@1.0.469/sf-i-events.js?module';
// import {SfIElasticText} from 'https://unpkg.com/sf-i-elastic-text@1.0.11/sf-i-elastic-text.js?module';
// import {SfIUploader} from 'https://unpkg.com/sf-i-uploader@1.0.60/sf-i-uploader.js?module';
// import {SfRandomText} from 'https://unpkg.com/sf-random-text@1.0.2/sf-random-text.js?module';
// import {SfIMultitextarea} from 'https://unpkg.com/sf-i-multitextarea@1.0.16/sf-i-multitextarea.js?module';
</script>
<style>
body {
font-family: Source Sans Pro;
margin: 2px;
padding: 20px;
background-color: #efefef;
}
.chosen {
background-color: #E5FAD4 !important;
}
.td-head {
text-transform: capitalize;
}
.status-format {
text-transform: uppercase;
}
.text-center {
text-align: center;
}
.d-flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.w-25 {
width: 25%;
}
.w-16 {
width: 16%;
}
.w-14 {
width: 14%;
}
.w-12 {
width: 12%;
}
.w-100 {
width: 100%;
}
.text-center {
text-align: center;
}
table {
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
border-top: solid 1px rgba(255, 255, 255, 0.8);
border-left: solid 1px rgba(255, 255, 255, 0.8);
border-bottom: solid 1px rgba(255, 255, 255, 0.8);
border-right: solid 1px rgba(255, 255, 255, 0.8);
overflow:hidden;
}
th {
background-color: #6a6a6a;
color: white;
padding: 5px;
}
td {
padding: 5px;
font-size: 70%;
vertical-align: top;
}
td span {
font-size: 130% !important;
}
.td-odd {
background-color: #efefef;
}
.td-even {
background-color: #dedede;
}
.color-pending {
color: #ffe505;
}
.color-pending-approval {
color: #ffe505;
}
.color-not-started {
color: #888888;
}
.color-not-complied {
color: #C80036;
}
.color-partially-complied {
color: #F79256;
}
.color-complied {
color: #50cf01;
}
.color-complied-with-gaps {
color: #ffe505;
}
.color-reported-non-compliance {
color: #840B0F;
}
.color-scheduled {
color: #888888;
}
.color-done {
color: #50cf01;
}
.color-rejected {
color: #C80036;
}
.color-approved {
color: #50cf01;
}
.color-past-due-date {
color: #ffe505;
}
.color-late-executed {
color: #840B0F;
}
.color-late-approved {
color: #EE2F36;
}
.color-late-reported {
color: #Ef9C66;
}
</style>
</head>
<body>
TABLE_DATA
</body>
</html>
`;
TAGGING_HTML = `
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script type="module">
import {LitElement, html, css} from 'https://esm.run/lit-element/lit-element.js';
import {SfISelect} from 'https://esm.run/sf-i-select/sf-i-select.js';
import {SfISubSelect} from 'https://esm.run/sf-i-sub-select/sf-i-sub-select.js';
import {SfIForm} from 'https://esm.run/sf-i-form/sf-i-form.js';
import {SfIElasticText} from 'https://esm.run/sf-i-elastic-text/sf-i-elastic-text.js';
import {SfIUploader} from 'https://esm.run/sf-i-uploader/sf-i-uploader.js';
import {SfIMultitextarea} from 'https://esm.run/sf-i-multitextarea/sf-i-multitextarea.js';
// import {LitElement, html, css} from 'https://unpkg.com/lit-element@3.3.3/lit-element.js?module';
// import {SfNav} from 'https://unpkg.com/sf-nav@1.0.94/sf-nav.js?module';
// import {SfChartPie} from 'https://unpkg.com/sf-chart-pie@1.0.4/sf-chart-pie.js?module';
// import {SfChartBar} from 'https://unpkg.com/sf-chart-bar@1.0.6/sf-chart-bar.js?module';
// import {SfUserAuth} from 'https://unpkg.com/sf-user-auth@1.0.89/sf-user-auth.js?module';
// import {SfISelect} from 'https://unpkg.com/sf-i-select@1.0.91/sf-i-select.js?module';
// import {SfISubSelect} from 'https://unpkg.com/sf-i-sub-select@1.0.82/sf-i-sub-select.js?module';
// import {SfIForm} from 'https://unpkg.com/sf-i-form@1.0.125/sf-i-form.js?module';
// import {SfIEvents} from 'https://unpkg.com/sf-i-events@1.0.469/sf-i-events.js?module';
// import {SfIElasticText} from 'https://unpkg.com/sf-i-elastic-text@1.0.11/sf-i-elastic-text.js?module';
// import {SfIUploader} from 'https://unpkg.com/sf-i-uploader@1.0.60/sf-i-uploader.js?module';
// import {SfRandomText} from 'https://unpkg.com/sf-random-text@1.0.2/sf-random-text.js?module';
// import {SfIMultitextarea} from 'https://unpkg.com/sf-i-multitextarea@1.0.16/sf-i-multitextarea.js?module';
</script>
<style>
body {
font-family: Source Sans Pro;
margin: 2px;
padding: 20px;
background-color: #efefef;
}
.chosen {
background-color: #E5FAD4 !important;
}
.td-head {
text-transform: capitalize;
}
.status-format {
text-transform: uppercase;
}
.text-center {
text-align: center;
}
.d-flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.align-center {
align-items: center;
}
.w-25 {
width: 25%;
}
.w-16 {
width: 16%;
}
.w-14 {
width: 14%;
}
.w-12 {
width: 12%;
}
.w-100 {
width: 100%;
}
.text-center {
text-align: center;
}
table {
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
border-top: solid 1px rgba(255, 255, 255, 0.8);
border-left: solid 1px rgba(255, 255, 255, 0.8);
border-bottom: solid 1px rgba(255, 255, 255, 0.8);
border-right: solid 1px rgba(255, 255, 255, 0.8);
overflow:hidden;
}
th {
background-color: #6a6a6a;
color: white;
padding: 5px;
}
td {
padding: 5px;
font-size: 70%;
vertical-align: top;
}
td span {
font-size: 130% !important;
}
.td-odd {
background-color: #efefef;
}
.td-even {
background-color: #dedede;
}
.color-pending {
color: #ffe505;
}
.color-pending-approval {
color: #ffe505;
}
.color-not-started {
color: #888888;
}
.color-not-complied {
color: #C80036;
}
.color-partially-complied {
color: #F79256;
}
.color-complied {
color: #50cf01;
}
.color-scheduled {
color: #888888;
}
.color-done {
color: #50cf01;
}
.color-rejected {
color: #C80036;
}
.color-approved {
color: #50cf01;
}
.color-past-due-date {
color: #ffe505;
}
.color-late-executed {
color: #840B0F;
}
.color-late-approved {
color: #EE2F36;
}
.color-late-reported {
color: #Ef9C66;
}
</style>
</head>
<body>
TABLE_DATA
</body>
<script>
var preselectedValues = TABLE_VALUES;
const inputs = document.querySelectorAll('.tags-input');
for(var i = 0; i < inputs.length; i++) {
inputs[i].preselectedValues = preselectedValues[i];
}
</script>
</html>
`;
AUTOSAVE_FLAG = true;
EXCLUDE_COLS_FROM_REGS: Array<string> = ["updatetype", "question", "invalidations", "activations", "alertschedule", "clientquestion", "countryname", "countryid", "entityname", "entityid", "locationname", "locationid", "reporters", "approvers", "timeframe", "responsedays", "execmodule", "functions", "shortid", "shortnumid", "countries", "tagsmap", "reportersmap", "approversmap", "functionheadsmap", "auditorsmap", "viewersmap", "approved", "documents", "comments", "lastupdated", "dateofcompletion", "mmdd", "completeness", "timeliness", "compliance", "delta", "triggers"]
CHARTS_LIST_BY_MODULES: { [key: string]: Array<string> } = { "compliances": ["compliance", "timeliness", "completeness", "riskSeverity", "riskArea", "location", "function", "obligationType", "jurisdiction", "frequency", "subCategory"], "notices": ["compliance", "timeliness", "completeness", "riskSeverity", "riskArea", "location", "function", "obligationType", "jurisdiction", "frequency", "subCategory"], "contracts": ["compliance", "timeliness", "completeness", "location"], "licenses": ["compliance", "timeliness", "completeness", "riskSeverity", "riskArea", "location", "function", "obligationType", "jurisdiction", "frequency", "subCategory"], "rcmresources": ["compliance", "timeliness", "completeness", "riskSeverity", "riskArea", "location", "function", "obligationType", "jurisdiction", "frequency", "subCategory"] };
chartSelectedLegend: Array<number> = [];
selectedFilters: any = null;
barCharDataSet2: Array<any> = [];
barCharDataSet2Arr: Array<any> = [];
barCharDataSet3: Array<any> = [];
barCharDataSet3Arr: Array<any> = [];
barCharDataSet4: Array<any> = [];
barCharDataSet4Arr: Array<any> = [];
getallcountryevetsParams: string = "";
@query('#decrypt-container')
_SfDecryptContainer: any;
@query('#sf-i-project-decrypt')
_SfDecryptProjectInput: any;
@query('#input-decrypt')
_SfDecryptFileInput: any;
@query('#button-decrypt')
_SfDecryptButton: any;
@property()
decryptProjectId: string = "";
@property()
decryptFileName: string = "";
@property()
filteronboarding: string = '[]';
getfilterOnboarding = () => {
return JSON.parse(this.filteronboarding);
}
getFilterOnboardingString = () => {
const jsonFilterOnboarding = JSON.parse(this.filteronboarding);
var html = '';
html += '<h5>Mapped Locations</h5>'
html += '<table>';
html += '<tr>';
html += '<th part="td-head">';
html += 'Country'
html += '</th>';
html += '<th part="td-head">';
html += 'State'
html += '</th>';
html += '<th part="td-head">';
html += 'Location'
html += '</th>';
html += '</tr>';
let count = 0;
for (var i = 0; i < jsonFilterOnboarding.length; i++) {
var country = jsonFilterOnboarding[i].country;
if (jsonFilterOnboarding[i].locations != null && Object.keys(jsonFilterOnboarding[i].locations).length > 0) {
for (var j = 0; j < Object.keys(jsonFilterOnboarding[i].locations).length; j++) {
const state = Object.keys(jsonFilterOnboarding[i].locations)[j];
var classBg = '';
if (count % 2 === 0) {
classBg = 'td-light';
} else {
classBg = 'td-dark';
}
html += '<tr>';
html += '<td part="td-body1" class="' + classBg + '">';
html += country;
html += '</td>';
html += '<td part="td-body1" class="' + classBg + '">';
html += state;
html += '</td>';
html += '<td part="td-body1" class="' + classBg + '">';
//console.log('gettinglocations', (jsonFilterOnboarding[i]['locations'][state]));
var tempHtml = '';
for (var k = 0; k < (jsonFilterOnboarding[i]['locations'][state]).length; k++) {
const location = (jsonFilterOnboarding[i]['locations'][state])[k];
tempHtml += location;
if (k < ((jsonFilterOnboarding[i]['locations'][state]).length - 1)) {
tempHtml += ', ';
}
}
html += ('<div><sf-i-elastic-text exportparts="highlight,highlight-count" class="statute-summary id-9" text="' + tempHtml + '" minlength="50"></sf-i-elastic-text></div>');
html += '</td>';
html += '</tr>';
count++;
}
}
}
html += '</table>';
html += '<h5 class="mt-20">Mapped Laws</h5>'
html += '<table>';
html += '<tr>';
html += '<th part="td-head">';
html += 'Country'
html += '</th>';
html += '<th part="td-head">';
html += 'State'
html += '</th>';
html += '<th part="td-head">';
html += 'Subcategory'
html += '</th>';
html += '<th part="td-head">';
html += 'Exclusions'
html += '</th>';
html += '<th part="td-head">';
html += 'Inclusions'
html += '</th>';
html += '</tr>';
for (var i = 0; i < jsonFilterOnboarding.length; i++) {
var classBg = '';
if (i % 2 === 0) {
classBg = 'td-light';
} else {
classBg = 'td-dark';
}
html += '<tr>';
html += '<td part="td-body1" class="' + classBg + '">';
html += jsonFilterOnboarding[i].country;
html += '</td>';
html += '<td part="td-body1" class="' + classBg + '">';
for (var j = 0; j < jsonFilterOnboarding[i].states.length; j++) {
html += ('<div>' + (jsonFilterOnboarding[i].states[j].length === 0 ? 'Federal' : jsonFilterOnboarding[i].states[j]) + '</div>');
}
html += '</td>';
html += '<td part="td-body1" class="' + classBg + '">';
for (var j = 0; j < jsonFilterOnboarding[i].subcategories.length; j++) {
html += ('<div>' + jsonFilterOnboarding[i].subcategories[j] + '</div>');
}
html += '</td>';
html += '<td part="td-body1" class="' + classBg + '">';
if (jsonFilterOnboarding[i].excludestatutes != null) {
for (var j = 0; j < jsonFilterOnboarding[i].excludestatutes.length; j++) {
html += ('<div><sf-i-elastic-text exportparts="highlight,highlight-count" class="statute-summary id-9" text="' + jsonFilterOnboarding[i].excludestatutes[j] + '" minlength="10"></sf-i-elastic-text></div>');
}
}
html += '</td>';
html += '<td part="td-body1" class="' + classBg + '">';
if (jsonFilterOnboarding[i].includestatutes != null) {
for (var j = 0; j < jsonFilterOnboarding[i].includestatutes.length; j++) {
html += ('<div><sf-i-elastic-text exportparts="highlight,highlight-count" class="statute-summary id-9" text="' + jsonFilterOnboarding[i].includestatutes[j] + '" minlength="20"></sf-i-elastic-text></div>');
}
}
html += '</td>';
html += '</tr>';
}
html += '</table>';
return html;
}
@property()
locations!: string;
getLocations = () => {
return JSON.parse(this.locations);
}
getLocationsByCountry = (country: string, statute: string) => {
let locations = [];
if (this.getLocations()[country] != null) {
const states = Object.keys(this.getLocations()[country]);
for (var i = 0; i < states.length; i++) {
if (this.getfilterOnboarding().length === 0) {
locations.push(...this.getLocations()[country][states[i]]);
} else {
for (var j = 0; j < this.getLocations()[country][states[i]].length; j++) {
for (var k = 0; k < this.getfilterOnboarding().length; k++) {
if (this.getfilterOnboarding()[k]['country'] == country) {
if (this.getfilterOnboarding()[k]['locations'] != null) {
if (this.getfilterOnboarding()[k]['locations'][states[i]] != null) {
var push = true;
if (this.getfilterOnboarding()[k]['locations'][states[i]].includes(this.getLocations()[country][states[i]][j])) {
if (this.getfilterOnboarding()[k]['excludelocations'] == null) {
} else {
if (this.getfilterOnboarding()[k]['excludelocations'][statute] == null) {
} else {
if (this.getfilterOnboarding()[k]['excludelocations'][statute][states[i]] == null) {
} else {
if (statute == "Information Technology Act, 2000") {
//console.log("getLocationsByCountry", push, this.getfilterOnboarding()[k]['excludelocations'][statute][states[i]], this.getLocations()[country][states[i]][j], this.getfilterOnboarding()[k]['excludelocations'][statute][states[i]].includes(this.getLocations()[country][states[i]][j]));
}
if (this.getfilterOnboarding()[k]['excludelocations'][statute][states[i]].includes(this.getLocations()[country][states[i]][j])) {
//console.log("getLocationsByCountry", 'setting false');
push = false;
}
}
}
if (statute == "Information Technology Act, 2000") {
//console.log("getLocationsByCountry", push, this.getLocations()[country][states[i]][j]);
}
}
} else {
push = false;
}
} else {
push = false;
}
} else {
push = false;
}
if (push) {
locations.push(this.getLocations()[country][states[i]][j]);
}
}
}
}
}
}
}
return locations;
}
getLocationsByState = (country: string, state: string, statute: string) => {
//console.log('getting getLocationsByState', country, state, this.getfilterOnboarding());
let locations = [];
if (this.getLocations()[country] != null) {
if (this.getLocations()[country][state] != null) {
if (this.getLocations()[country][state] != null) {
if (this.getfilterOnboarding().length === 0) {
locations.push(...this.getLocations()[country][state]);
} else {
for (var k = 0; k < this.getfilterOnboarding().length; k++) {
if (this.getfilterOnboarding()[k]['country'] == country) {
for (var i = 0; i < this.getLocations()[country][state].length; i++) {
var push = true;
if (this.getfilterOnboarding()[k]['locations'] != null) {
if (this.getfilterOnboarding()[k]['locations'][state] != null) {
if (this.getfilterOnboarding()[k]['locations'][state].includes(this.getLocations()[country][state][i])) {
if (this.getfilterOnboarding()[k]['excludelocations'] == null) {
} else {
if (this.getfilterOnboarding()[k]['excludelocations'][statute] == null) {
} else {
if (this.getfilterOnboarding()[k]['excludelocations'][statute][state] == null) {
} else {
if (this.getfilterOnboarding()[k]['excludelocations'][statute][state].includes(this.getLocations()[country][state][i])) {
push = false;
}
}
}
}
} else {
push = false;
}
} else {
push = false;
}
} else {
push = false;
}
if (push) {
locations.push(this.getLocations()[country][state][i]);
}
}
}
}
}
}
}
}
//console.log('getting getLocationsByState return ', locations);
return locations;
}
@property({ type: Array })
selectedCbs: Array<any> = [];
@property()
projectId!: string;
@property()
contractStartDate: string = "";
@property()
name!: string;
@property()
disableflagggrcresponse: string = "";
@property()
disablesave: string = "";
@property()
disableclientresponse: string = "";
@property()
disablesignoff: string = "";
@property()
apiId!: string;
@property()
apiIdStatutes!: string;
@property()
apiIdDefinitions!: string;
@property()
apiidReportformats!: string;
@property()
apiIdProjects!: string;
@property()
apiIdCompliances!: string;
@property()
apiIdList!: string;
@property()
apiIdDetail!: string;
@property()
apiIdUsers!: string;
@property()
apiIdTags!: string;
@property()
apiIdNotices!: string;
@property()
apiIdAgreements!: string;
@property()
apiIdLicenses!: string;
@property()
apiIdRCMResources!: string;
@property()
apiMethodList!: string;
@property()
apiMethodDetail!: string;
@property()
apiBodyList!: string;
@property()
apiBodyDetail!: string;
@property()
userProfileId!: string;
@property()
graphParam: string = "";
@property()
entityId: string = "";
@property()
locationId: string = "";
@property()
showRegisterExport: string = "false";
@property()
countryId: string = "";
@property()
functionId: string = "";
@property()
tagId: string = "";
@property()
userName!: string;
@property()
projectName!: string;
@property()
selectedCriteria!: string;
@property()
apiResponseFieldList!: string;
@property()
rcmSelectedCompliance!: any;
@property()
rcmSelectedProjects!: any;
@property()
rcmSelectedDate!: any;
@property()
rcmSelectedMessage!: any;
@property()
myOnboardingTab: string = "";
@property()
myOnboardingTabGroup: string = "";
@property()
myRcmTab: string = this.TAB_RCM_COMPLIANCES;
@property()
myNoticesTab: string = this.TAB_COMPLIANCES;
@property()
myRole: string = "";
@property()
chart: any = null;
@property()
chartBase64: any = null;
@property()
chart2: any = null;
@property()
chart2Base64: any = null;
@property()
chart3: any = null;
@property()
chart3Base64: any = null;
@property()
chart4: any = null;
@property()
chart4Base64: any = null;
@property()
calendarStartDD!: string;
@property()
calendarStartMM!: string;
@property()
calendarStartYYYY!: string;
@property({ type: Array })
calendar: Date[] = [];
@property()
mappedValuesDueDates: any = {};
@property()
mappedValuesUsers: any = {};
@property()
mappedValuesTags: any = {};
@property()
unmappedEvents: any = null;
@property()
mappings: any = null;
@property()
triggers: any = null;
@property({ type: Array })
monthNames: string[] = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
@property()
events: any = null;
@property()
nextEvents: any = null;
@property()
notices: any = null;
@property()
statistics: any = null;
@property()
statisticsMeta: any = null;
@property()
statisticsFiltersData: any = null;
@property()
streamIndex: any = null;
@property()
eventsInWindow: any = null;
@property()
eventHideFields: any = null;
getEventHideFields = () => {
return JSON.parse(this.eventHideFields);
}
@property()
eventPreviewFields: any = null;
getEventPreviewFields = () => {
return JSON.parse(this.eventPreviewFields);
}
@property()
eventFields: any = null;
getEventFields = () => {
return JSON.parse(this.eventFields);
}
@property()
eventFieldDependencies: any = null;
getEventFieldDependencies = () => {
return JSON.parse(this.eventFieldDependencies);
}
getApiBodyList = () => {
//console.log('calendar api body list', this.apiBodyList);
try {
return JSON.parse(this.apiBodyList);
} catch (e: any) {
return {};
}
}
getApiBodyDetail = () => {
return JSON.parse(this.apiBodyDetail);
}
@property()
csvDataRegisters: string = "";
@property()
csvDataCompliances: string = "";
@property()
csvTableData: string = "";
@property()
csvDataStats: string = "";
@property()
csvGraphStats: string = "";
@property()
csvCompletenessStats: string = "";
@property()
csvTimelinessStats: string = "";
@property()
csvComplianceStats: string = "";
@property()
htmlDataCompliances: string = "";
@property()
htmlDataStats: string = "";
@property()
htmlDataSummary: string = "";
@property()
htmlStatsFilter: string = "";
@property()
period: string = "";
@property()
mode!: string;
@property({ type: Number })
flowRcmNotification: number = 0;
@property()
flowGraph: string = "";
@property()
flow: string = "";
@property()
fill: string = "solid";
@property({ type: Array })
filterTags: string[] = [];
@property()
subfilter: string = "";
@property()
riskAreasData: any = null;
@property()
riskAreasPartStatusData: any = null;
@property()
riskAreasLateStatusData: any = null;
@property()
riskAreasComplianceStatusData: any = null;
@property()
riskSeverityData: any = null;
@property({ type: Array })
arrCols: Array<string> = ["country", "state", "obligationtitle", "statute", "category"];
@property({ type: Array })
arrRcmProjectCols: Array<string> = ["name"];
@property()
riskSeverityPartStatusData: any = null;
@property()
riskSeverityLateStatusData: any = null;
@property()
riskSeverityComplianceStatusData: any = null;
@property()
functionData: any = null;
@property()
functionPartStatusData: any = null;
@property()
functionLateStatusData: any = null;
@property()
functionComplianceStatusData: any = null;
@property()
obligationTypeData: any = null;
@property()
obligationTypePartStatusData: any = null;
@property()
obligationTypeLateStatusData: any = null;
@property()
obligationTypeComplianceStatusData: any = null;
@property()
jurisdictionData: any = null;
@property()
jurisdictionPartStatusData: any = null;
@property()
jurisdictionLateStatusData: any = null;
@property()
jurisdictionComplianceStatusData: any = null;
@property()
currentColumnIndex: string = "";
@property()
frequencyData: any = null;
@property()
frequencyPartStatusData: any = null;
@property()
frequencyLateStatusData: any = null;
@property()
frequencyComplianceStatusData: any = null;
@property()
subcategoryData: any = null;
@property()
subcategoryPartStatusData: any = null;
@property()
subcategoryLateStatusData: any = null;
@property()
subcategoryComplianceStatusData: any = null;
@property()
locationData: any = null;
@property()
locationPartStatusData: any = null;
@property()
locationLateStatusData: any = null;
@property()
locationComplianceStatusData: any = null;
@property({ type: Array })
selectedItemIds: Array<string> = [];
@property({ type: Array })
selectedItems: Array<any> = [];
@property()
selectedStatus: string = "";
@property()
selectedTab: string = "";
@property({ type: Number })
selectedCountryTab: number = -1;
@property()
restrictToMapping: string = "";
@property()
enableDeleteLatestReport: string = "";
@property()
stream: string = this.TAB_STREAM;
@property()
myroles: string = "[]";
@property()
blocksize: string = "5";
@property()
features: string = "[]"
getFeatures = () => {
return ['compliances', ...JSON.parse(this.features)]
}
selectedFeatures: string[] = ['compliances']
nextPage: number = 0;
nextTabRole: string = "";
nextTabStatus: string = "";
@property()
sdate: string = "";
@property()
edate: string = "";
lastupdated: string = "";
changedOnboardingItemIds: string[] = [];
selectedCountryIndex: number = 0;
selectedRegisterIndex: number = -1;
@property()
selectallblock: string = "100";
graphFilter: string = "";
recentlyReported: any = {}
registerFilters: { [key: string]: { [key: string]: boolean } } = {};
tablecols: string[] = []
static override styles = css`
.bg-white {
background-color: white;
}
.proposed-users-table {
width: 150px;
}
.lds-dual-ring1 {
display: inline-block;
width: 15px;
height: 15px;
}
.lds-dual-ring1:after {
content: " ";
display: block;
width: 15px;
height: 15px;
margin: 0px;
border-radius: 50%;
border: 2px solid #fff;
border-color: #666 #ddd #666 #ddd;
animation: lds-dual-ring 0.8s linear infinite;
}
@k