sf-i-events 1.0.977 → 1.0.978

package/sf-i-events.js

@@ -5280,7 +5280,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     console.log('idArr', idArr);
                     const mmdd = idArr[2] + "/" + idArr[3];
                     const j = idArr[4];
-                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
                     let renewEvent = this.events[mmdd][j];
                     let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
                     console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -7395,73 +7395,81 @@ let SfIEvents = class SfIEvents extends LitElement {
             //console.log('mappedstatutes', mappedStatutes);
             this.renderOnboardingStatutes(mappedStatutes);
         };
-        this.loadOnboardingCompliances = async () => {
+        this.loadOnboardingCompliances = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingCompliancesContainer.style.display = 'flex';
-            const mappedStatutes = await this.fetchMappedStatutes();
-            const mappedCompliances = await this.fetchMappedCompliances();
-            this.renderOnboardingCompliances(mappedStatutes, mappedCompliances);
+            const mappedStatutes = await this.fetchMappedStatutesList();
+            console.log("mapped statutes", mappedStatutes);
+            // const mappedStatutes = await this.fetchMappedStatutes();
+            // const mappedCompliances = await this.fetchMappedCompliances();
+            // this.renderOnboardingCompliances(mappedStatutes, mappedCompliances);
+            this.renderOnboardingStatutesDropdownMapping(this._SfOnboardingCompliancesContainer, mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.renderOnboardingCompliances);
         };
-        this.loadOnboardingCountries = async () => {
+        this.loadOnboardingCountries = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingCountriesContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const countriesJobs = await this.fetchCountriesJobs();
-            const mappedCountries = await this.fetchMappedCountries();
-            const mappedCompliances = await this.fetchMappedCompliances();
+            // const mappedCountries = await this.fetchMappedCountries();
+            // const mappedCompliances = await this.fetchMappedCompliances();
             // const mappedStatutes = await this.fetchMappedStatutes();
-            //console.log('countriesJobs', countriesJobs);
-            console.log('mappedCompliances', mappedCompliances);
-            console.log('mappedCountries', mappedCountries);
-            for (var i = 0; i < mappedCompliances.data.mappings.mappings.length; i++) {
-                if (mappedCompliances.data.mappings.mappings[i].id == "33a0deab-e93e-41b7-831a-473f9ea3eea2") {
-                    //console.log('uniqcol zero', mappedCompliances.data.mappings.mappings[i]);
-                }
-            }
-            this.renderOnboardingCountries(mappedCountries, mappedCompliances, null);
+            // //console.log('countriesJobs', countriesJobs);
+            // console.log('mappedCompliances', mappedCompliances);
+            // console.log('mappedCountries', mappedCountries);
+            // this.renderOnboardingCountries(mappedCountries, mappedCompliances, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingCountriesContainer, 'countries-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, () => { return []; }, this.fetchMappedCountries, this.renderOnboardingCountries);
         };
-        this.loadOnboardingEntities = async () => {
+        this.loadOnboardingEntities = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingEntitiesContainer.style.display = 'flex';
             // const entitiesJobs = await this.fetchEntitiesJobs();
-            const mappedEntities = await this.fetchMappedEntities();
-            const mappedSerializedCountries = await this.fetchMappedSerializedCountries();
-            const arrStatuteEntitiesApplicabilities = await this.loadProposedFromStatutes(1);
-            // const mappedStatutes = await this.fetchMappedStatutes();
+            const mappedStatutes = await this.fetchMappedStatutesList();
+            // const mappedEntities = await this.fetchMappedEntities();
+            // const mappedSerializedCountries = await this.fetchMappedSerializedCountries();
+            // const arrStatuteEntitiesApplicabilities = await this.loadProposedFromStatutes(1);
+            // // const mappedStatutes = await this.fetchMappedStatutes();
             //console.log('mappedSerializedCountries', mappedSerializedCountries);
             //console.log('mappedEntities', mappedEntities);
             //console.log('entitiesApplicabilities', arrStatuteEntitiesApplicabilities);
-            this.renderOnboardingEntities(mappedEntities, mappedSerializedCountries, null, arrStatuteEntitiesApplicabilities);
+            // this.renderOnboardingEntities(mappedEntities, mappedSerializedCountries, null, arrStatuteEntitiesApplicabilities);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingEntitiesContainer, 'entities-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedCountries, this.fetchMappedEntities, this.renderOnboardingEntities);
         };
-        this.loadOnboardingLocations = async () => {
+        this.loadOnboardingLocations = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingLocationsContainer.style.display = 'flex';
             // const locationsJobs = await this.fetchLocationsJobs();
-            const mappedSerializedEntities = await this.fetchMappedSerializedEntities();
-            const mappedLocations = await this.fetchMappedLocations();
+            const mappedStatutes = await this.fetchMappedStatutesList();
+            // const mappedSerializedEntities = await this.fetchMappedSerializedEntities();
+            // const mappedLocations = await this.fetchMappedLocations();
             //console.log('mappedserializedentities', mappedSerializedEntities);
-            //console.log('mappedlocations', mappedLocations);
-            this.renderOnboardingLocations(mappedLocations, mappedSerializedEntities, null);
+            //console.log('mappedlocations', mappedLocations); 
+            // this.renderOnboardingLocations(mappedLocations, mappedSerializedEntities, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingLocationsContainer, 'locations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedEntities, this.fetchMappedLocations, this.renderOnboardingLocations);
         };
-        this.loadOnboardingFunctions = async () => {
+        this.loadOnboardingFunctions = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingFunctionsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const functionsJobs = await this.fetchFunctionJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedFunctions = await this.fetchMappedFunctions();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedFunctions = await this.fetchMappedFunctions();
             //console.log('functionjobs', functionsJobs);
             //console.log('mappedserializedlocations', mappedSerializedLocations);
             //console.log('mappedfunctions', mappedFunctions);
-            this.renderOnboardingFunctions(mappedFunctions, mappedSerializedLocations, null);
+            // this.renderOnboardingFunctions(mappedFunctions, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingFunctionsContainer, 'functions-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedLocations, this.fetchMappedFunctions, this.renderOnboardingFunctions);
         };
-        this.loadOnboardingTags = async () => {
+        this.loadOnboardingTags = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingTagsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const tagsJobs = await this.fetchTagsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedTags = await this.fetchMappedTags();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedTags = await this.fetchMappedTags();
             //console.log('mappedSerializedLocations', mappedSerializedLocations);
             //console.log('mappedtags', mappedTags);
-            this.renderOnboardingTags(mappedTags, mappedSerializedLocations, null);
+            // this.renderOnboardingTags(mappedTags, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingTagsContainer, 'tags-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedTags, this.renderOnboardingTags);
         };
         this.loadProposedFromStatutes = async (fieldIndex) => {
             const mappedStatutes = await this.fetchMappedStatutes();
@@ -7479,161 +7487,191 @@ let SfIEvents = class SfIEvents extends LitElement {
             //console.log('mappedstatutesend', arrStatuteReporters);
             return arrStatuteReporters;
         };
-        this.loadOnboardingReporters = async () => {
+        this.loadOnboardingReporters = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingReportersContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const reportersJobs = await this.fetchReportersJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedReporters = await this.fetchMappedReporters();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedReporters = await this.fetchMappedReporters();
             // const arrStatuteReporters = await this.loadProposedFromStatutes(1);
             //console.log('mappedSerializedLocations', mappedSerializedLocations);
             //console.log('mappedreporters', mappedReporters);
             //console.log('arrstatutereporters', arrStatuteReporters);
-            this.renderOnboardingReporters(mappedReporters, mappedSerializedLocations, null, null);
+            // this.renderOnboardingReporters(mappedReporters, mappedSerializedLocations, null, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingReportersContainer, 'reporters-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedReporters, this.renderOnboardingReporters);
         };
-        this.loadOnboardingApprovers = async () => {
+        this.loadOnboardingApprovers = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingApproversContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const approversJobs = await this.fetchApproversJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedApprovers = await this.fetchMappedApprovers();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedApprovers = await this.fetchMappedApprovers();
             // const arrStatuteApprovers = await this.loadProposedFromStatutes(2);
             //console.log('mappedserializedlocations', mappedSerializedLocations);
             //console.log('mappedapprovers', mappedApprovers);
-            this.renderOnboardingApprovers(mappedApprovers, mappedSerializedLocations, null, null);
+            // this.renderOnboardingApprovers(mappedApprovers, mappedSerializedLocations, null, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingApproversContainer, 'approvers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedApprovers, this.renderOnboardingApprovers);
         };
-        this.loadOnboardingFunctionHeads = async () => {
+        this.loadOnboardingFunctionHeads = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingFunctionHeadsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const functionHeadsJobs = await this.fetchFunctionHeadsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedFunctionHeads = await this.fetchMappedFunctionHeads();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedFunctionHeads = await this.fetchMappedFunctionHeads();
             // const arrStatuteFunctionheads = await this.loadProposedFromStatutes(3);
             //console.log('mappedserializedlocations', mappedSerializedLocations);
             //console.log('mappedfunctionheads', mappedFunctionHeads);
-            this.renderOnboardingFunctionHeads(mappedFunctionHeads, mappedSerializedLocations, null, null);
+            // this.renderOnboardingFunctionHeads(mappedFunctionHeads, mappedSerializedLocations, null, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingFunctionHeadsContainer, 'functionheads-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedFunctionHeads, this.renderOnboardingFunctionHeads);
         };
-        this.loadOnboardingViewers = async () => {
+        this.loadOnboardingViewers = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingViewersContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const makerViewersJobs = await this.fetchViewersJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedViewers = await this.fetchMappedViewers();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedViewers = await this.fetchMappedViewers();
             // const arrStatuteViewers = await this.loadProposedFromStatutes(5);
             //console.log('mappedSerializedLocations', mappedSerializedLocations);
             //console.log('mappedViewers', mappedViewers);
-            this.renderOnboardingViewers(mappedViewers, mappedSerializedLocations, null, null);
+            // this.renderOnboardingViewers(mappedViewers, mappedSerializedLocations, null, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingViewersContainer, 'viewers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedViewers, this.renderOnboardingViewers);
         };
-        this.loadOnboardingDocs = async () => {
+        this.loadOnboardingDocs = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingDocsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const docsJobs = await this.fetchDocsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedDocs = await this.fetchMappedDocs();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedDocs = await this.fetchMappedDocs();
             //console.log('mappedSerializedLocations', mappedSerializedLocations);
             //console.log('mappedDocs', mappedDocs);
-            this.renderOnboardingDocs(mappedDocs, mappedSerializedLocations, null);
+            // this.renderOnboardingDocs(mappedDocs, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingDocsContainer, 'docs-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedDocs, this.renderOnboardingDocs);
         };
-        this.loadOnboardingMakerCheckers = async () => {
+        this.loadOnboardingMakerCheckers = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingMakerCheckersContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const makerCheckersJobs = await this.fetchMakerCheckersJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedMakerCheckers = await this.fetchMappedMakerCheckers();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedMakerCheckers = await this.fetchMappedMakerCheckers();
             //console.log('mappedSerializedLocations', mappedSerializedLocations);
             //console.log('mappedMakerCheckers', mappedMakerCheckers);
-            this.renderOnboardingMakerCheckers(mappedMakerCheckers, mappedSerializedLocations, null);
+            // this.renderOnboardingMakerCheckers(mappedMakerCheckers, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingMakerCheckersContainer, 'makercheckers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedMakerCheckers, this.renderOnboardingMakerCheckers);
         };
-        this.loadOnboardingAuditors = async () => {
+        this.loadOnboardingAuditors = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingAuditorsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const auditorsJobs = await this.fetchAuditorsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedAuditors = await this.fetchMappedAuditors();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedAuditors = await this.fetchMappedAuditors();
             // const arrStatuteAuditors = await this.loadProposedFromStatutes(4);
             //console.log('mappedSerializedFunctionheads', mappedSerializedLocations);
             //console.log('mappedAuditors', mappedAuditors);
-            this.renderOnboardingAuditors(mappedAuditors, mappedSerializedLocations, null, null);
+            // this.renderOnboardingAuditors(mappedAuditors, mappedSerializedLocations, null, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingAuditorsContainer, 'auditors-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedAuditors, this.renderOnboardingAuditors);
         };
-        this.loadOnboardingDuedates = async () => {
+        this.loadOnboardingDuedates = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingDuedatesContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const duedatesJobs = await this.fetchDueDatesJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedDuedates = await this.fetchMappedDuedates();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedDuedates = await this.fetchMappedDuedates();
             //console.log('mappedSerializedLocations', mappedSerializedLocations);
             //console.log('mappedduedates', mappedDuedates);
-            this.renderOnboardingDuedates(mappedDuedates, mappedSerializedLocations, null);
+            // this.renderOnboardingDuedates(mappedDuedates, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingDuedatesContainer, 'duedates-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedDuedates, this.renderOnboardingDuedates);
         };
-        this.loadOnboardingActivations = async () => {
+        this.loadOnboardingActivations = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingActivationsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const activationsJobs = await this.fetchExtensionsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedActivations = await this.fetchMappedActivations();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedActivations = await this.fetchMappedActivations();
             //console.log('mappedserializedlocations', mappedSerializedLocations);
             //console.log('mappedactivations', mappedActivations);
-            this.renderOnboardingActivations(mappedActivations, mappedSerializedLocations, null);
+            // this.renderOnboardingActivations(mappedActivations, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingActivationsContainer, 'activations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedActivations, this.renderOnboardingActivations);
         };
-        this.loadOnboardingInvalidations = async () => {
+        this.loadOnboardingInvalidations = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingInvalidationsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const invalidationsJobs = await this.fetchExtensionsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedInvalidations = await this.fetchMappedInvalidations();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedInvalidations = await this.fetchMappedInvalidations();
             //console.log('mappedserializedlocations', mappedSerializedLocations);
             //console.log('mappedinvalidations', mappedInvalidations);
-            this.renderOnboardingInvalidations(mappedInvalidations, mappedSerializedLocations, null);
+            // this.renderOnboardingInvalidations(mappedInvalidations, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingInvalidationsContainer, 'invalidations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedInvalidations, this.renderOnboardingInvalidations);
         };
-        this.loadOnboardingAlertSchedules = async () => {
+        this.loadOnboardingAlertSchedules = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingAlertSchedulesContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const alertschedulesJobs = await this.fetchAlertSchedulesJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedAlertSchedules = await this.fetchMappedAlertSchedules();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedAlertSchedules = await this.fetchMappedAlertSchedules();
             //console.log('mappedserializedlocations', mappedSerializedLocations);
             //console.log('mappedalertschedules', mappedAlertSchedules);
-            this.renderOnboardingAlertSchedules(mappedAlertSchedules, mappedSerializedLocations, null);
+            // this.renderOnboardingAlertSchedules(mappedAlertSchedules, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingAlertSchedulesContainer, 'alertschedules-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedAlertSchedules, this.renderOnboardingAlertSchedules);
         };
-        this.loadOnboardingExtensions = async () => {
+        this.loadOnboardingExtensions = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingExtensionsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const extensionsJobs = await this.fetchExtensionsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedExtensions = await this.fetchMappedExtensions();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedExtensions = await this.fetchMappedExtensions();
             //console.log('mappedserializedlocations', mappedSerializedLocations);
             //console.log('mappedextensions', mappedExtensions);
-            this.renderOnboardingExtensions(mappedExtensions, mappedSerializedLocations, null);
+            // this.renderOnboardingExtensions(mappedExtensions, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingExtensionsContainer, 'extensions-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedExtensions, this.renderOnboardingExtensions);
         };
-        this.loadOnboardingTriggers = async () => {
+        this.loadOnboardingTriggers = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingTriggersContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const triggersJobs = await this.fetchInternalControlsJobs();
             // const mappedSerializedAlertSchedules = await this.fetchMappedSerializedAlertSchedules();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedTriggers = await this.fetchMappedTriggers();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedTriggers = await this.fetchMappedTriggers();
             //console.log('mappedSerializedAlertSchedules', mappedSerializedAlertSchedules);
             //console.log('mappedTriggers', mappedTriggers);
-            this.renderOnboardingTriggers(mappedTriggers, mappedSerializedLocations, null);
+            // this.renderOnboardingTriggers(mappedTriggers, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingTriggersContainer, 'triggers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedTriggers, this.renderOnboardingTriggers);
         };
-        this.loadOnboardingInternalControls = async () => {
+        this.loadOnboardingInternalControls = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingInternalControlsContainer.style.display = 'flex';
+            const mappedStatutes = await this.fetchMappedStatutesList();
             // const internalcontrolsJobs = await this.fetchInternalControlsJobs();
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedInternalControls = await this.fetchMappedInternalControls();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedInternalControls = await this.fetchMappedInternalControls();
             //console.log('mappedSerializedlocations', mappedSerializedLocations);
             //console.log('mappedinternalcontrols', mappedInternalControls);
-            this.renderOnboardingInternalControls(mappedInternalControls, mappedSerializedLocations, null);
+            // this.renderOnboardingInternalControls(mappedInternalControls, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingInternalControlsContainer, 'internalcontrols-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedInternalControls, this.renderOnboardingInternalControls);
         };
-        this.loadOnboardingReportedLocations = async () => {
+        this.loadOnboardingReportedLocations = async (selectedStatutes = []) => {
             this.hideTabContainers();
             this._SfOnboardingReportedLocationsContainer.style.display = 'flex';
-            const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-            const mappedReportedLocations = await this.fetchMappedReportedLocations();
+            const mappedStatutes = await this.fetchMappedStatutesList();
+            // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+            // const mappedReportedLocations = await this.fetchMappedReportedLocations();
             //console.log('mappedSerializedlocations', mappedSerializedLocations);
             //console.log('mappedReportedLocations', mappedReportedLocations);
-            this.renderOnboardingReportedLocations(mappedReportedLocations, mappedSerializedLocations, null);
+            // this.renderOnboardingReportedLocations(mappedReportedLocations, mappedSerializedLocations, null);
+            this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingReportedLocationsContainer, 'reportedlocations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedReportedLocations, this.renderOnboardingReportedLocations);
         };
         this.loadOnboardingSignoff = async () => {
             this.hideTabContainers();
@@ -9274,7 +9312,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     console.log('idArr', idArr);
                     const mmdd = idArr[2] + "/" + idArr[3];
                     const j = idArr[4];
-                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
                     let renewEvent = this.events[mmdd][j];
                     let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
                     console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -9919,7 +9957,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     console.log('idArr', idArr);
                     const mmdd = idArr[2] + "/" + idArr[3];
                     const j = idArr[4];
-                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
                     let renewEvent = this.events[mmdd][j];
                     let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
                     console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -10100,6 +10138,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             const startDate = new Date(startDateStr);
             const endDate = new Date(endDateStr);
             const month = parseInt(monthStr, 10); // Ensure month is a number
+            console.log('getting date', startDate, endDate, month);
             if (isNaN(month) || month < 1 || month > 12) {
                 return this.calendarStartYYYY;
             }
@@ -11000,7 +11039,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     console.log('idArr', idArr);
                     const mmdd = idArr[2] + "/" + idArr[3];
                     const j = idArr[4];
-                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+                    const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
                     let renewEvent = this.events[mmdd][j];
                     let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
                     console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -15988,6 +16027,61 @@ let SfIEvents = class SfIEvents extends LitElement {
             taggingArray.data.mappings.mappings = tempArray;
             //console.log('selectedindexchecking', colName, taggingArray);
         };
+        this.applyAndReloadTaggingNew = (e, colName, taggingArray, sourceArray, divElement) => {
+            const selectedIndex = e.currentTarget.id.split('-')[1];
+            const tempArray = [];
+            console.log('sourceArray apply', sourceArray, taggingArray);
+            console.log('selectedindexchecking 1', this.selectedCbs);
+            for (var count = 0; count < taggingArray.data.mappings.mappings.length; count++) {
+                console.log('selectedindexchecking', selectedIndex, count, this.selectedCbs.includes(selectedIndex + ""), this.selectedCbs.includes(count + ""));
+                tempArray.push(taggingArray.data.mappings.mappings[count]);
+                if (this.selectedCbs.includes(selectedIndex + '') && this.selectedCbs.includes(count + '')) {
+                    if (divElement.querySelector('#tags-' + selectedIndex).selectedValues != null) {
+                        if (tempArray[count] == null)
+                            tempArray[count] = {};
+                        tempArray[count][colName] = divElement.querySelector('#tags-' + selectedIndex).selectedValues();
+                    }
+                    else {
+                        if (tempArray[count] == null)
+                            tempArray[count] = {};
+                        tempArray[count][colName] = divElement.querySelector('#tags-' + selectedIndex).value;
+                    }
+                }
+                else {
+                    if (divElement.querySelector('#tags-' + count).selectedValues != null) {
+                        if (tempArray[count] == null)
+                            tempArray[count] = {};
+                        if (colName == "countries" || colName == "entities" || colName == "locations") {
+                            let selectedValues = divElement.querySelector('#tags-' + count).selectedValues();
+                            if (selectedValues == null || selectedValues.length == 0) {
+                                tempArray[count] = {};
+                                console.log('deleting1', tempArray);
+                            }
+                            else {
+                                tempArray[count][colName] = divElement.querySelector('#tags-' + count).selectedValues();
+                            }
+                        }
+                        else {
+                            tempArray[count][colName] = divElement.querySelector('#tags-' + count).selectedValues();
+                        }
+                    }
+                    else {
+                        //console.log('selectedindexchecking D');
+                        if (tempArray[count] == null)
+                            tempArray[count] = {};
+                        if (colName == "countries" || colName == "entities" || colName == "locations") {
+                            tempArray[count] = {};
+                            console.log('deleting2', tempArray);
+                        }
+                        else {
+                            tempArray[count][colName] = divElement.querySelector('#tags-' + count).value;
+                        }
+                    }
+                }
+            }
+            taggingArray.data.mappings.mappings = tempArray;
+            console.log('selectedindexchecking', colName, taggingArray);
+        };
         this.getDataValue = (jsonData, id) => {
             let ret = null;
             //console.log('pushing up again..', id, jsonData);
@@ -16007,7 +16101,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             return ret;
         };
-        this.saveMapping = async (divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, saveInBackground = false) => {
+        this.saveMapping = async (divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, saveInBackground = false, mappedStatutes) => {
             const process = async () => {
                 const tableRowArr = divElement.querySelectorAll('.tablerow');
                 const checkboxArr = divElement.querySelectorAll('.checkbox-row');
@@ -16021,30 +16115,79 @@ let SfIEvents = class SfIEvents extends LitElement {
                 let updatedRows = [];
                 let jsonArr = [];
                 if (uploadBlock < 0) {
-                    for (var i = 0; i < checkboxArr.length; i++) {
-                        //console.log('tablerow', (tableRowArr[i] as HTMLTableRowElement));
-                        if (tableRowArr[i].style.display == 'none') {
-                        }
-                        else {
-                            updatedRows.push(statuteArr[i].text);
+                    if (mappedStatutes.length == 0) {
+                        for (var i = 0; i < checkboxArr.length; i++) {
+                            //console.log('tablerow', (tableRowArr[i] as HTMLTableRowElement));
+                            if (checkboxArr[i].checked !== true) {
+                                continue;
+                            }
+                            if (tableRowArr[i].style.display == 'none') {
+                            }
+                            else {
+                                updatedRows.push(statuteArr[i].text);
+                            }
+                            let cols = JSON.parse(this.getColsValue(jsonData, statuteArr[i].text)[0]);
+                            let data = JSON.parse(this.getDataValue(jsonData, statuteArr[i].text)[0]);
+                            var dataToBePushed = { id: statuteArr[i].text, name: data[cols.indexOf('name')], countryname: data[cols.indexOf('country')][0] };
+                            /* var dataToBePushed = { id: (statuteArr[k] as SfIElasticText).text, selected: checkboxArr[k].checked, data: this.getDataValue(jsonData, (statuteArr[k] as SfIElasticText).text), cols: this.getColsValue(jsonData, (statuteArr[k] as SfIElasticText).text), extraFields: [] as string[], updatedFields: [] as string[] };
+                            for (var j = 0; j < extraFields.length; j++) {
+                              const inputArr = (divElement as HTMLDivElement).querySelectorAll('.extra-field-' + j) as NodeListOf<SfIMultitextarea>;
+                              const value = inputArr[k].getValues();
+                              dataToBePushed.extraFields.push(value);
+                              if (j === 0) {
+                                const fields = inputArr[i].getFields();
+                                dataToBePushed.updatedFields.push(...fields);
+                              }
+                            } */
+                            jsonArr.push(dataToBePushed);
                         }
-                        var dataToBePushed = { id: statuteArr[i].text, selected: checkboxArr[i].checked, data: this.getDataValue(jsonData, statuteArr[i].text), cols: this.getColsValue(jsonData, statuteArr[i].text), extraFields: [], updatedFields: [] };
-                        for (var j = 0; j < extraFields.length; j++) {
-                            const inputArr = divElement.querySelectorAll('.extra-field-' + j);
-                            const value = inputArr[i].getValues();
-                            // //console.log('value', value);
-                            dataToBePushed.extraFields.push(value);
-                            if (j === 0) {
+                        console.log('jsonArr', jsonArr);
+                        //console.log('updatedRows', updatedRows);
+                        // const batchNum = new Date().getTime();
+                        // await uploadFunction({ "searchstring": searchString, "mappings": jsonArr, "batch": batchNum, "updatedrows": updatedRows });
+                        await uploadFunction({ "searchstring": searchString, "mappings": jsonArr });
+                    }
+                    else {
+                        for (var i = 0; i < checkboxArr.length; i++) {
+                            //console.log('tablerow', (tableRowArr[i] as HTMLTableRowElement));
+                            if (checkboxArr[i].checked !== true) {
+                                continue;
+                            }
+                            if (tableRowArr[i].style.display == 'none') {
+                            }
+                            else {
+                                updatedRows.push(statuteArr[i].text);
+                            }
+                            let cols = JSON.parse(this.getColsValue(jsonData, statuteArr[i].text)[0]);
+                            let data = JSON.parse(this.getDataValue(jsonData, statuteArr[i].text)[0]);
+                            var dataToBePushed = { id: statuteArr[i].text, data: [JSON.stringify(data)], cols: [JSON.stringify(cols)] };
+                            /* var dataToBePushed = { id: (statuteArr[k] as SfIElasticText).text, selected: checkboxArr[k].checked, data: this.getDataValue(jsonData, (statuteArr[k] as SfIElasticText).text), cols: this.getColsValue(jsonData, (statuteArr[k] as SfIElasticText).text), extraFields: [] as string[], updatedFields: [] as string[] };
+                            for (var j = 0; j < extraFields.length; j++) {
+                              const inputArr = (divElement as HTMLDivElement).querySelectorAll('.extra-field-' + j) as NodeListOf<SfIMultitextarea>;
+                              const value = inputArr[k].getValues();
+                              dataToBePushed.extraFields.push(value);
+                              if (j === 0) {
                                 const fields = inputArr[i].getFields();
                                 dataToBePushed.updatedFields.push(...fields);
+                              }
+                            } */
+                            jsonArr.push(dataToBePushed);
+                        }
+                        let jsonObj = {};
+                        for (let statuteObj of mappedStatutes) {
+                            let statuteid = statuteObj.id;
+                            if (jsonObj[statuteid] == null) {
+                                jsonObj[statuteid] = {};
+                            }
+                            for (let mappingObj of jsonArr) {
+                                console.log('mappingObj', mappingObj.data, statuteid);
+                                if (mappingObj.data[0].indexOf(statuteid) >= 0) {
+                                    jsonObj[statuteid][mappingObj.id] = mappingObj;
+                                }
                             }
                         }
-                        jsonArr.push(dataToBePushed);
+                        await uploadFunction(jsonObj, mappedStatutes);
                     }
-                    //console.log('jsonArr', jsonArr);
-                    //console.log('updatedRows', updatedRows);
-                    const batchNum = new Date().getTime();
-                    await uploadFunction({ "searchstring": searchString, "mappings": jsonArr, "batch": batchNum, "updatedrows": updatedRows });
                 }
                 else {
                     const batchNum = new Date().getTime();
@@ -16077,7 +16220,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     }
                 }
                 if (!saveInBackground)
-                    refreshFunction();
+                    refreshFunction(mappedStatutes);
             };
             if (this.disablesave == "yes") {
                 return;
@@ -16099,12 +16242,49 @@ let SfIEvents = class SfIEvents extends LitElement {
                 process();
             }
         };
-        this.saveTagging = async (mapping, uploadFunction, refreshFunction, saveInBackground) => {
+        this.saveTagging = async (mapping, selectedStatutes, uploadFunction, refreshFunction, saveInBackground, colName) => {
             async function process() {
-                //console.log('Saving...', mapping);
-                await uploadFunction(mapping);
+                console.log('Saving...', JSON.stringify(mapping));
+                let statuteids = [];
+                let statutewiseMapping = {};
+                for (let statutesObj of selectedStatutes) {
+                    statuteids.push(statutesObj.id);
+                    statutewiseMapping[statutesObj.id] = {};
+                    for (let mapObj of mapping.mappings) {
+                        if (mapObj.statuteid == statutesObj.id) {
+                            let pushObj = mapObj;
+                            delete pushObj.statuteid;
+                            let compoundid = mapObj.id;
+                            // if (colName == "countries" || colName == "entities" || colName == "locations") {
+                            switch (colName) {
+                                case "countries":
+                                    compoundid = mapObj.id;
+                                    break;
+                                case "entities":
+                                    compoundid = mapObj.countryid + ';' + mapObj.id;
+                                    break;
+                                case "locations":
+                                    compoundid = mapObj.entityid + ';' + mapObj.id;
+                                    break;
+                                default:
+                                    compoundid = mapObj.entityid + ';' + mapObj.locationid + ';' + mapObj.id;
+                                    break;
+                            }
+                            // }
+                            if (statutewiseMapping[statutesObj.id][compoundid] != null) {
+                                let pushObjOld = statutewiseMapping[statutesObj.id][compoundid];
+                                pushObj[colName] = [...pushObjOld[colName], ...mapObj[colName]];
+                            }
+                            else {
+                                statutewiseMapping[statutesObj.id][compoundid] = pushObj;
+                            }
+                        }
+                    }
+                }
+                console.log('Uploading ...', JSON.stringify(statutewiseMapping));
+                await uploadFunction(statutewiseMapping, statuteids);
                 if (!saveInBackground)
-                    refreshFunction();
+                    refreshFunction(selectedStatutes);
             }
             if (this.disablesave == "yes") {
                 return;
@@ -16984,7 +17164,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             // });
             const buttonSave = divElement.querySelector('.button-save');
             buttonSave === null || buttonSave === void 0 ? void 0 : buttonSave.addEventListener('click', async () => {
-                await this.saveTagging(taggingArray.data.mappings, uploadFunction, refreshFunction, false);
+                await this.saveTagging(taggingArray.data.mappings, [], uploadFunction, refreshFunction, false, colName);
             });
             const buttonCancel = divElement.querySelector('.button-cancel');
             buttonCancel === null || buttonCancel === void 0 ? void 0 : buttonCancel.addEventListener('click', async () => {
@@ -17024,133 +17204,975 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             this.changedOnboardingItemIds = [];
         };
-        this.renderMappingTable = (divElement, jsonData, cursor, fetchFunction, searchString, mappedArray, found, uploadFunction, refreshFunction, extraFields, uploadBlock, extraFieldPosition, colName, subfilter, statuteColName, extraHintsArr) => {
-            var _a, _b, _c, _f, _g, _h, _j;
-            console.log('cols1', jsonData);
-            // console.log('cols', jsonData[0].data.cols);
-            //console.log('divelement', divElement);
-            //console.log('jsonData', jsonData);
-            //console.log('cursor', cursor);
-            //console.log('fetch', fetchFunction);
-            //console.log('searchstring', searchString);
-            //console.log('subfiltervalue', subfilter);
-            const arrCompliancesFrequencies = {};
-            if (jsonData.length === 0)
-                return;
+        this.renderTaggingTableNew = (divElement, selectedStatutes, sourceObject, sourceMapping, taggingObject, sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter) => {
+            var _a, _b, _c, _f;
+            console.log('sourceObj', sourceObject);
+            console.log('taggingObj', taggingObject);
+            let sourceArray = { data: { mappings: { mappings: sourceObject.data.mappings } } };
+            let taggingArray = { data: { mappings: { mappings: taggingObject.data.mappings } } };
+            if (taggingObject.data.mappings.mappings != null) {
+                taggingArray = taggingObject;
+            }
+            console.log('divelement', divElement);
+            console.log('sourcearray', sourceArray);
+            console.log('sourceMapping', sourceMapping);
+            console.log('taggingarray', JSON.stringify(taggingArray));
+            console.log('selectedStatutes', selectedStatutes);
             this.selectedCbs = [];
-            let colCountry = -1;
-            let colState = -1;
-            let colSubcategory = -1;
-            let colStatute = -1;
-            const unfilteredDict = [];
-            var html = '';
-            html += '<div>';
-            html += '<h3 part="results-title">Total Items (' + found + ')</h3>';
-            html += '<h4 id="span-filtered" part="results-title"></h4>';
-            html += '<h4 id="span-extra-filled" part="results-title"></h4>';
-            html += '</div>';
-            html += '<div class="d-flex justify-between align-center left-sticky flex-wrap mb-20">';
-            html += '<div id="div-subfiltered"></div>';
-            html += '<div id="scroll-overlay" part="onboarding-scroll-overlay" class="pos-fixed-scroll justify-center align-center">';
-            html += '<div id="scroll-overlay-left" class="mr-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_left_alt</span></button></div>';
-            html += '<div id="scroll-overlay-right" class="ml-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_right_alt</span></button></div>';
-            html += '</div>';
-            html += '<div id="detail-overlay" part="onboarding-detail-overlay" class="pos-fixed justify-center align-center hide">';
-            html += '<div class="cover-slide"></div>';
-            html += '<div class="detail-container p-10">';
-            html += '<div class="d-flex justify-between align-center mb-20">';
-            html += '<div part="results-title">Row Details</div>';
-            html += '<button part="button-icon" class="detail-close"><span class="material-symbols-outlined">close</span></button>';
-            html += '</div>';
-            html += '<div id="detail-overlay-list">';
-            html += '</div>';
-            html += '</div>';
-            html += '</div>';
-            html += '<div class="d-flex align-center">';
-            html += '<input part="input" type="text" placeholder="Filter" class="input-filter mr-10" value="' + subfilter + '" />';
-            html += '<div class="mr-10">';
-            html += '<div class="d-flex justify-end"><button part="calendar-tab-icon-not-selected" class="material-icons button-toggle-more">expand_more</button><button part="calendar-tab-icon-selected" class="material-icons button-toggle-more-back hide">expand_less</button></div>';
-            html += '<div style="position: absolute; margin-top: 5px;"><button part="button" class="hide d-flex align-center button-download-backups" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">file_save</span><span>Download Backups</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">export_notes</span><span>Export Mapping</span></button></div>';
-            html += '</div>';
-            html += (this.disablesave == "yes" ? '' : '<button part="button" class="button-save" disabled>Save</button>');
-            html += '</div>';
-            html += '</div>';
-            html += '<table id="table-data">';
-            html += '<thead>';
-            html += '<th part="td-head" class="td-head">';
-            // html += 'Select';
-            html += '<div id="select-all"><input class="checkbox checkbox-all" part="input-checkbox" type="checkbox" ' + ((this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + '/></div>';
-            html += '</th>';
-            html += '<th part="td-head" class="td-head">';
-            html += '<div>View</div>';
-            html += '</th>';
-            if (extraFieldPosition === 0) {
-                for (var i = 0; i < extraFields.length; i++) {
-                    html += '<th part="td-head" class="td-head">';
-                    html += extraFields[i];
-                    html += '</th>';
-                }
-            }
-            if (colName.toLowerCase() == "compliances") {
-                html += '<th part="td-head" class="td-head">';
-                html += 'Proposed Users';
-                html += '</th>';
-            }
-            html += '<th part="td-head" class="td-head">';
-            html += 'Id';
-            html += '</th>';
-            // for(var j = 0; j < JSON.parse(jsonData[0].data.cols).length; j++) {
-            //   if(jsonData[0].cols.includes(JSON.parse(jsonData[0].data.cols)[j])) {
-            //     html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == JSON.parse(jsonData[0].data.cols)[j].toLowerCase() ? 'left-sticky' : '') + '">'
-            //     html += JSON.parse(jsonData[0].data.cols)[j]
-            //     html += '</th>'
+            // const foundArr = [];
+            // if (taggingArray.data.mappings != null && taggingArray.data.mappings.mappings.length > 0) {
+            //   console.log('scanning taggingarray', taggingArray.data.mappings.mappings.length + "");
+            //   for (var i = 0; i < taggingArray.data.mappings.mappings.length; i++) {
+            //     var found = false;
+            //     // console.log('source array search', sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[i].id], taggingArray.data.mappings.mappings[i].id)
+            //     if (taggingArray.data.mappings.mappings[i].id != null && sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[i].id] != null) {
+            //       var equal = true;
+            //       for (var k = 0; k < uniqCols.length; k++) {
+            //         console.log('checking uniqCols', uniqCols[k]);
+            //         if (sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[i].id] != null && taggingArray.data.mappings.mappings[i] != null) {
+            //           if (sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[i].id][uniqCols[k]] != taggingArray.data.mappings.mappings[i][uniqCols[k]]) {
+            //             equal = false;
+            //           }
+            //         }
+            //       }
+            //       if (equal) {
+            //         found = true;
+            //       }
+            //     }
+            //     if (found) {
+            //       foundArr.push(taggingArray.data.mappings.mappings[i]);
+            //     } else {
+            //       console.log('taggingarray not found', taggingArray.data.mappings.mappings[i], i)
+            //     }
             //   }
+            // } else {
+            //   console.log('taggingArray1', taggingArray.data.mappings, taggingArray.data.mappings.mappings)
             // }
-            for (var j = 0; j < jsonData[0].cols.length; j++) {
-                console.log('jsoncols', JSON.parse(jsonData[0].data.cols), jsonData[0].cols.length, j);
-                html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == ((_a = JSON.parse(jsonData[0].data.cols)[j]) !== null && _a !== void 0 ? _a : "").toLowerCase() ? 'left-sticky' : '') + '">';
-                // html += jsonData[0].cols[j]
-                html += '</th>';
+            // console.log('taggingarray2', taggingArray.data.mappings.mappings.length + "");
+            // if (taggingArray.data.mappings == null) {
+            //   taggingArray.data.mappings = {};
+            // }
+            // taggingArray.data.mappings.mappings = foundArr;
+            for (var i = 0; i < taggingArray.data.mappings.mappings.length; i++) {
+                if (taggingArray.data.mappings.mappings[i].id != null && sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[i].id] == null) {
+                    taggingArray.data.mappings.mappings.splice(i, 1);
+                }
             }
-            if (extraFieldPosition === 1) {
-                for (var i = 0; i < extraFields.length; i++) {
-                    html += '<th part="td-head" class="td-head">';
-                    html += extraFields[i];
-                    html += '</th>';
+            let mandatoryPresent = true;
+            console.log('mandatoryFields', mandatoryFields);
+            for (i = 0; i < mandatoryFields.length; i++) {
+                for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+                    if (taggingArray.data.mappings.mappings[j][mandatoryFields[i]] == null) {
+                        console.log('mandatory not found', mandatoryFields[i]);
+                        mandatoryPresent = false;
+                    }
                 }
             }
-            html += '</thead>';
-            //console.log('colstate',  JSON.parse(jsonData[0].data.cols));
-            for (var i = 0; i < JSON.parse(jsonData[0].data.cols).length; i++) {
-                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "country") {
-                    console.log('colstate country', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-                    colCountry = i;
+            var taggedIds = [];
+            for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+                if (taggingArray.data.mappings.mappings[j] != null) {
+                    if (sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[j].id] != null) {
+                        if (taggedIds.indexOf(taggingArray.data.mappings.mappings[j].id) < 0) {
+                            taggedIds.push(taggingArray.data.mappings.mappings[j].id);
+                        }
+                    }
                 }
-                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "state") {
-                    //console.log('colstate state', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-                    colState = i;
+            }
+            // if (taggedIds.length < Object.keys(sourceArray.data.mappings.mappings).length) {
+            //   for (let sourceid of Object.keys(sourceArray.data.mappings.mappings)) {
+            //     if (taggedIds.indexOf(sourceid) >= 0) {
+            //       continue;
+            //     }
+            //     let objToPush: any = { id: sourceid }
+            //     for (i = 0; i < (mandatoryFields as Array<string>).length; i++) {
+            //       objToPush[mandatoryFields[i]] = ""
+            //     }
+            //     taggingArray.data.mappings.mappings.push(objToPush);
+            //   }
+            // }
+            for (var i = 0; i < ((_b = (_a = sourceMapping.data) === null || _a === void 0 ? void 0 : _a.mappings) !== null && _b !== void 0 ? _b : []).length; i++) {
+                let flagMatch = false;
+                if (sourceArray.data.mappings.mappings[sourceMapping.data.mappings[i].id] == null) {
+                    continue;
                 }
-                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "subcategory") {
-                    //console.log('colstate subcategory', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-                    colSubcategory = i;
+                for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+                    if (taggingArray.data.mappings.mappings[j] != null) {
+                        if (sourceMapping.data.mappings[i].id == taggingArray.data.mappings.mappings[j].id) {
+                            let flagMatchObj = true;
+                            for (let objKey of compareFields) {
+                                if (sourceMapping.data.mappings[i][objKey] !== taggingArray.data.mappings.mappings[j][objKey] && taggingArray.data.mappings.mappings[j][objKey] != null) {
+                                    console.log('Flag Mismatch', objKey, sourceMapping.data.mappings[i][objKey], taggingArray.data.mappings.mappings[j][objKey]);
+                                    flagMatchObj = false;
+                                    break;
+                                }
+                            }
+                            if (flagMatchObj == true) {
+                                flagMatch = true;
+                                continue;
+                            }
+                        }
+                    }
                 }
-                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == statuteColName) {
-                    //console.log('colstate statute', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-                    colStatute = i;
+                if (!flagMatch) {
+                    let objToPush = sourceMapping.data.mappings[i];
+                    for (i = 0; i < mandatoryFields.length; i++) {
+                        objToPush[mandatoryFields[i]] = "";
+                    }
+                    taggingArray.data.mappings.mappings.push(objToPush);
                 }
             }
-            //var countExtra0 = 0;
-            var countextra = [];
-            var subfiltered = 0;
-            html += '<tbody>';
-            var mappedCount = 0;
-            for (let level = 0; level < 2; level++) {
-                for (var i = 0; i < jsonData.length; i++) {
-                    // console.log('subfilter value before', subfiltered);
-                    console.log('rendering', i, jsonData[i]);
-                    let tempColCountry = -1;
-                    let tempColState = -1;
-                    let tempColStatute = -1;
+            var tagged = 0;
+            var changed = 0;
+            var total = 0;
+            for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+                if (taggingArray.data.mappings.mappings[j] != null) {
+                    if (sourceMapping.data == null) {
+                        if (sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[j].id] != null) {
+                            total++;
+                            let tagStr = "";
+                            for (let col of compareFields) {
+                                tagStr += `${taggingArray.data.mappings.mappings[j][col]};`;
+                            }
+                            tagStr.slice(0, -1);
+                            if (this.changedOnboardingItemIds.length > 0) {
+                                let changedId = tagStr;
+                                if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+                                    changed++;
+                                }
+                            }
+                            if (taggingArray.data.mappings.mappings[j][colName] == null || taggingArray.data.mappings.mappings[j][colName] == "" || taggingArray.data.mappings.mappings[j][colName].length == 0) {
+                                if (colName == "countries" || colName == "entities" || colName == "locations") {
+                                    let flagNull = false;
+                                    for (let mandatoryfield of mandatoryFields) {
+                                        if (taggingArray.data.mappings.mappings[j][mandatoryfield] == null || taggingArray.data.mappings.mappings[j][mandatoryfield] == "") {
+                                            flagNull = true;
+                                            break;
+                                        }
+                                    }
+                                    if (flagNull) {
+                                        continue;
+                                    }
+                                }
+                                else {
+                                    continue;
+                                }
+                            }
+                            tagged++;
+                        }
+                    }
+                    else {
+                        let flagFound = false;
+                        for (let sourceObj of sourceMapping.data.mappings) {
+                            if (sourceObj.id == taggingArray.data.mappings.mappings[j].id) {
+                                let flagEqual = true;
+                                for (let col of compareFields) {
+                                    if (sourceObj[col] != taggingArray.data.mappings.mappings[j][col] && taggingArray.data.mappings.mappings[j][col] != null) {
+                                        flagEqual = false;
+                                        break;
+                                    }
+                                }
+                                if (flagEqual) {
+                                    flagFound = true;
+                                    break;
+                                }
+                            }
+                        }
+                        if (flagFound) {
+                            let tagStr = "";
+                            for (let col of compareFields) {
+                                tagStr += `${taggingArray.data.mappings.mappings[j][col]};`;
+                            }
+                            tagStr.slice(0, -1);
+                            total++;
+                            if (this.changedOnboardingItemIds.length > 0) {
+                                let changedId = tagStr;
+                                if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+                                    changed++;
+                                }
+                            }
+                            if (taggingArray.data.mappings.mappings[j][colName] == null || taggingArray.data.mappings.mappings[j][colName] == "" || taggingArray.data.mappings.mappings[j][colName].length == 0) {
+                                if (colName == "countries" || colName == "entities" || colName == "locations") {
+                                    let flagNull = false;
+                                    for (let mandatoryfield of mandatoryFields) {
+                                        if (taggingArray.data.mappings.mappings[j][mandatoryfield] == null || taggingArray.data.mappings.mappings[j][mandatoryfield] == "") {
+                                            flagNull = true;
+                                            break;
+                                        }
+                                    }
+                                    if (flagNull) {
+                                        continue;
+                                    }
+                                }
+                                else {
+                                    continue;
+                                }
+                            }
+                            tagged++;
+                        }
+                        else {
+                            console.log('tagged not found', taggingArray.data.mappings.mappings[j]);
+                        }
+                    }
+                }
+            }
+            console.log('taggingarray3', JSON.stringify(taggingArray.data.mappings.mappings));
+            console.log('tagged', tagged, 'total', total);
+            const unfilteredDict = [];
+            if (divElement == null) {
+                return;
+            }
+            var html = '';
+            var showTable = true;
+            html += '<div class="d-flex justify-between flex-wrap align-center"> ';
+            var status = '';
+            if (tagged < total) {
+                status = '<span class="color-pending material-icons">pending</span>';
+            }
+            else {
+                status = '<span class="color-done material-icons">check_circle</span>';
+            }
+            var mandatoryStatus = '';
+            if (!mandatoryPresent) {
+                mandatoryStatus = '<span class="color-late-executed material-icons">error</span>&nbsp;&nbsp;Mandatory fields are not present';
+            }
+            else {
+                mandatoryStatus = '<span class="color-done material-icons">check_circle</span>&nbsp;&nbsp;Mandatory fields are present';
+            }
+            if (showTable) {
+                html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 id="mapped-stats-title" part="results-title" class="d-flex align-center m-0">' + status + '&nbsp;&nbsp;Mapped ' + tagged + ' out of ' + total + '</h4></div>');
+            }
+            else {
+                html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 id="mapped-stats-title" part="results-title" class="d-flex align-center m-0">' + status + '&nbsp;&nbsp;Mapped ' + tagged + ' out of ' + total + '</h4></div>');
+            }
+            if (changed > 0) {
+                html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 part="results-title" class="d-flex align-center m-0"><span class="color-pending material-icons">pending</span>&nbsp;&nbsp;' + changed + ' Items changed</h4></div>');
+            }
+            html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 part="results-title" class="d-flex align-center m-0">' + mandatoryStatus + '</h4></div>');
+            html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 id="span-extra-filled" class="m-0" part="results-title"></h4></div>');
+            html += '<div class="d-flex align-center">';
+            html += '<div class="mr-10">';
+            html += '<div class="d-flex justify-end"><button part="calendar-tab-icon-not-selected" class="material-icons button-toggle-more">expand_more</button><button part="calendar-tab-icon-selected" class="material-icons button-toggle-more-back hide">expand_less</button></div>';
+            html += '<div style="position: absolute; margin-top: 5px;">';
+            html += '<button part="button" class="hide d-flex align-center button-download-backups" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">file_save</span><span>Download Backups</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">export_notes</span><span>Export Mapping</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping-csv" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">data_table</span><span>Export CSV</span></button>';
+            // console.log('jobs', jobs);
+            html += ('<input id="fileInput" type="file" style="display:none;" /><button part="button" class="mt-10 hide button-local-load d-flex align-center mr-10" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">upload_file</span><span>Load From Local</span></button><button part="button" class="mt-10 hide button-local-save d-flex align-center mr-10" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">save</span><span>Save Locally</span></button>');
+            html += '</div>';
+            html += '</div>';
+            html += '<button part="button" class="button-apply d-flex align-center mr-10"><span class="material-symbols-outlined mr-10">touch_app</span><span>Apply</span></button>';
+            html += '<button part="button" class="button-save d-flex align-center"><span class="material-symbols-outlined mr-10">save</span><span>Save On Cloud</span></button>';
+            html += '</div>';
+            html += '</div>';
+            html += '<div>';
+            html += '<h4 id="span-filtered" part="results-title"></h4>';
+            html += '<div id="div-subfiltered"></div>';
+            html += '</div>';
+            html += '<br />';
+            var subfiltered = 0;
+            if (showTable) {
+                html += '<table id="table-data" class="mt-20" style="height: 200px">';
+                html += '<thead>';
+                html += '<th part="td-head" class="td-head">';
+                html += '<div id="select-all"><input class="checkbox checkbox-all" part="input-checkbox" type="checkbox" ' + ((this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + '/></div>';
+                html += '</th>';
+                for (var i = 0; i < extraFields.length; i++) {
+                    html += '<th part="td-head" class="td-head">';
+                    html += extraFields[i];
+                    html += '</th>';
+                }
+                html += '<th part="td-head" class="td-head">';
+                html += colName;
+                html += '</th>';
+                for (i = 0; i < uniqCols.length; i++) {
+                    html += '<th part="td-head" class="td-head">';
+                    html += uniqCols[i];
+                    html += '</th>';
+                }
+                for (i = 0; i < sourceCols.length; i++) {
+                    html += '<th part="td-head" class="td-head">';
+                    html += sourceCols[i];
+                    html += '</th>';
+                }
+                html += '</thead>';
+                html += '<tbody>';
+                // console.log('changedIds', this.changedOnboardingItemIds);
+                for (i = 0; i < taggingArray.data.mappings.mappings.length; i++) {
+                    let complianceid = taggingArray.data.mappings.mappings[i].id;
+                    console.log('compliance id', complianceid);
+                    var showSearch = false;
+                    if (subfilter == "") {
+                        //console.log('showsearch true 1');
+                        showSearch = true;
+                    }
+                    var classBg = "";
+                    if (i % 2 === 0) {
+                        if (this.changedOnboardingItemIds.length > 0) {
+                            let changedId = "";
+                            for (let [k, col] of uniqCols.entries()) {
+                                // console.log('taggingarray rendered', i, col)
+                                changedId += taggingArray.data.mappings.mappings[i][col];
+                                if (k < (uniqCols.length - 1)) {
+                                    changedId += ";";
+                                }
+                            }
+                            if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+                                classBg = 'td-light-selected';
+                            }
+                            else {
+                                classBg = 'td-light';
+                            }
+                        }
+                        else {
+                            classBg = 'td-light';
+                        }
+                    }
+                    else {
+                        if (this.changedOnboardingItemIds.length > 0) {
+                            let changedId = "";
+                            for (let [k, col] of uniqCols.entries()) {
+                                if (taggingArray.data.mappings.mappings[i] == null) {
+                                    // console.log('id not found', i, taggingArray.data.mappings.mappings.length, sourceArray.data.mappings.mappings.length)
+                                }
+                                changedId += taggingArray.data.mappings.mappings[i][col];
+                                if (k < (uniqCols.length - 1)) {
+                                    changedId += ";";
+                                }
+                            }
+                            if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+                                classBg = 'td-dark-selected';
+                            }
+                            else {
+                                classBg = 'td-dark';
+                            }
+                        }
+                        else {
+                            classBg = 'td-dark';
+                        }
+                    }
+                    html += '<tr class="" id="tablerow-' + i + '">';
+                    html += '<td class="left-sticky td-body ' + classBg + '" ><div class="' + (!showSearch ? 'truncate' : '') + '"><input id="cb-' + i + '" type="checkbox" class="checkbox-row cb-select"/></div></td>';
+                    for (var j = 0; j < extraFields.length; j++) {
+                        if (i < taggingArray.data.mappings.mappings.length) {
+                            html += '<td part="td-body" class="' + classBg + '">';
+                            html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+                            html += '<textarea part="input" id="extra-field-' + i + '-' + j + '" class="extra-field extra-field-' + j + '" ' + (extraFields != null ? (extraFields[j] != null ? ((extraFields[j].toLowerCase() == "client remarks" && this.disableclientresponse.toLowerCase() == "yes") ? 'disabled' : ((extraFields[j].toLowerCase() == "flagggrc response" && this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '')) : "") : "") + ' >' + (taggingArray.data.mappings.mappings[i].extraFields != null ? (taggingArray.data.mappings.mappings[i].extraFields[j] != null ? (typeof taggingArray.data.mappings.mappings[i].extraFields[j] == 'string' ? taggingArray.data.mappings.mappings[i].extraFields[j] : "") : "") : "") + '</textarea>';
+                            html += '</div>';
+                            html += '</td>';
+                        }
+                        else {
+                            html += '<td part="td-body" class="' + classBg + '">';
+                            html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+                            html += '<textarea part="input" id="extra-field-' + i + '-' + j + '" class="extra-field extra-field-' + j + '" type="text" value="" ' + ((extraFields[j].toLowerCase() == "flagggrc response" && this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + ' ></textarea>';
+                            html += '</div>';
+                            html += '</td>';
+                        }
+                    }
+                    html += '<td class="td-body ' + classBg + '" part="td-key">';
+                    html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+                    if (apiIdDropdown.length > 0) {
+                        if (anotherProjection != null) {
+                            html += '<sf-i-form id="tags-' + i + '" class="tags-input tags-' + i + '" name="Tags" label="Select ' + colName + '" apiId="' + apiIdDropdown + '" mode="multiselect-dropdown" searchPhrase="' + this.projectName + ((dropdownSearchPhrase != null && dropdownSearchPhrase != "") ? dropdownSearchPhrase : "") + '" selectProjection="name" selectAnotherProjection="' + anotherProjection + '" mandatory></sf-i-form>';
+                        }
+                        else {
+                            html += '<sf-i-form id="tags-' + i + '" class="tags-input tags-' + i + '" name="Tags" label="Select ' + colName + '" apiId="' + apiIdDropdown + '" mode="multiselect-dropdown" searchPhrase="' + this.projectName + ((dropdownSearchPhrase != null && dropdownSearchPhrase != "") ? dropdownSearchPhrase : "") + '" selectProjection="name" mandatory></sf-i-form>';
+                        }
+                    }
+                    else {
+                        if (colName.toLowerCase() == "internalcontrols") {
+                            html += '<textarea id="tags-' + i + '" type="text" part="input" class="tags-input"></textarea>';
+                        }
+                        else {
+                            html += '<input id="tags-' + i + '" type="text" part="input" class="tags-input"/>';
+                        }
+                    }
+                    html += '</div>';
+                    html += '</td>';
+                    for (var l = 0; l < uniqCols.length; l++) {
+                        html += '<td class="td-body ' + classBg + '" part="td-key">';
+                        html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+                        html += '<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + taggingArray.data.mappings.mappings[i][uniqCols[l]].replace(/ *\([^)]*\) */g, "") + '" minLength="20"></sf-i-elastic-text>';
+                        html += '</div>';
+                        html += '</td>';
+                    }
+                    for (l = 0; l < sourceCols.length; l++) {
+                        for (var j = 0; j < JSON.parse(sourceArray.data.mappings.mappings[complianceid].cols).length; j++) {
+                            if (sourceCols[l] == JSON.parse(sourceArray.data.mappings.mappings[complianceid].cols)[j]) {
+                                if (sourceArray.data.mappings.mappings[complianceid].data != null) {
+                                    html += '<td class="td-body ' + classBg + '" part="td-body">';
+                                    html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+                                    if (Array.isArray(JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j])) {
+                                        for (var k = 0; k < JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j].length; k++) {
+                                            html += ('<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j][k] + '" minLength="100" lineSize="4"></sf-i-elastic-text>');
+                                        }
+                                    }
+                                    else {
+                                        if (typeof JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j] == "string" && Util.isJSONParsable(JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j])) {
+                                            html += ('<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + JSON.parse(JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j]) + '" minLength="100" lineSize="4"></sf-i-elastic-text>');
+                                        }
+                                        else {
+                                            html += ('<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j] + '" minLength="100" lineSize="4"></sf-i-elastic-text>');
+                                        }
+                                    }
+                                    html += '</div>';
+                                    html += '</td>';
+                                }
+                            }
+                        }
+                    }
+                    html += '</tr>';
+                    //console.log('i=', i);
+                }
+                html += '</tbody>';
+                html += '</table>';
+            }
+            if (divElement == null) {
+                return;
+            }
+            divElement.innerHTML = html;
+            if (unfilteredDict.length > 0) {
+                var html = '';
+                html += '<div class="mb-10">Items In Your Category (' + unfilteredDict.length + ")</div>";
+                html += this.getFilterOnboardingString();
+                divElement.querySelector('#span-filtered').innerHTML = html;
+            }
+            else {
+                divElement.querySelector('#span-filtered').style.display = 'none';
+            }
+            if (subfiltered > 0) {
+                divElement.querySelector('#div-subfiltered').innerHTML = '<h4 part="results-title">Filtered Results (' + subfiltered + ')</h4>';
+            }
+            if (this.getfilterOnboarding().length > 0) {
+                for (var i = 0; i < taggingArray.data.mappings.mappings.length; i++) {
+                    if (!unfilteredDict.includes(i)) {
+                        const tableRow = divElement.querySelector('#tablerow-' + i);
+                        if (tableRow != null) {
+                            tableRow.style.display = 'none';
+                        }
+                    }
+                }
+            }
+            (_c = divElement.querySelector('.checkbox-all')) === null || _c === void 0 ? void 0 : _c.addEventListener('change', (e) => {
+                divElement.querySelector('.button-save').disabled = false;
+                const arrCheckBoxes = divElement.querySelectorAll('.checkbox-row');
+                //console.log('cb-length', arrCheckBoxes.length);
+                for (var i = 0; i < arrCheckBoxes.length; i++) {
+                    const tableRow = divElement.querySelector('#tablerow-' + (i));
+                    //console.log('tablerow', i, tableRow);
+                    if (tableRow != null) {
+                        if (tableRow.style.display != 'none') {
+                            //console.log('tablerow setting', e.currentTarget.checked, (arrCheckBoxes[i] as HTMLInputElement));
+                            arrCheckBoxes[i].checked = e.currentTarget.checked;
+                            if (e.currentTarget.checked) {
+                                if (!this.selectedCbs.includes(i + '')) {
+                                    this.selectedCbs.push(i + '');
+                                }
+                            }
+                            else {
+                                this.selectedCbs = [];
+                            }
+                        }
+                    }
+                }
+                //console.log('checkedarr', this.selectedCbs);
+            });
+            for (var j = 0; j < extraFields.length; j++) {
+                const inputArrJ = divElement.querySelectorAll('.extra-field-' + j);
+                for (var k = 0; k < inputArrJ.length; k++) {
+                    inputArrJ[k].addEventListener('keyup', (e) => {
+                        divElement.querySelector('.button-save').disabled = false;
+                        if (e.key == "Enter") {
+                            this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+                            const activeIndex = e.target.id.split('-')[2];
+                            for (var count = 0; count < taggingArray.data.mappings.mappings.length; count++) {
+                                taggingArray.data.mappings.mappings[count].extraFields = [];
+                                if (this.selectedCbs.length > 0 && this.selectedCbs.includes(count + "")) {
+                                    for (var l = 0; l < extraFields.length; l++) {
+                                        const inputExtraField = divElement.querySelector('#extra-field-' + activeIndex + '-' + l);
+                                        taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value);
+                                    }
+                                }
+                                else {
+                                    for (var l = 0; l < extraFields.length; l++) {
+                                        const inputExtraField = divElement.querySelector('#extra-field-' + count + '-' + l);
+                                        taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value);
+                                    }
+                                }
+                            }
+                            this.renderTaggingTableNew(divElement, selectedStatutes, sourceArray, sourceMapping, taggingArray, sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter);
+                        }
+                        // this.saveTagging(taggingArray.data.mappings, uploadFunction, refreshFunction, true);
+                    });
+                    inputArrJ[k].addEventListener('focusout', (e) => {
+                        this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+                        const activeIndex = e.target.id.split('-')[2];
+                        for (var count = 0; count < taggingArray.data.mappings.mappings.length; count++) {
+                            taggingArray.data.mappings.mappings[count].extraFields = [];
+                            if (this.selectedCbs.length > 0 && this.selectedCbs.includes(count + "")) {
+                                for (var l = 0; l < extraFields.length; l++) {
+                                    const inputExtraField = divElement.querySelector('#extra-field-' + activeIndex + '-' + l);
+                                    taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value);
+                                }
+                            }
+                            else {
+                                for (var l = 0; l < extraFields.length; l++) {
+                                    const inputExtraField = divElement.querySelector('#extra-field-' + count + '-' + l);
+                                    taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value);
+                                }
+                            }
+                        }
+                        this.renderTaggingTableNew(divElement, selectedStatutes, sourceArray, sourceMapping, taggingArray, sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter);
+                    });
+                }
+            }
+            const multiArr = divElement.querySelectorAll('.tags-input');
+            for (var i = 0; i < multiArr.length; i++) {
+                if (apiIdDropdown.length > 0) {
+                    // for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+                    var equal = true;
+                    let complianceid = taggingArray.data.mappings.mappings[i].id;
+                    for (var k = 0; k < uniqCols.length; k++) {
+                        if (uniqCols[k] != "id") {
+                            continue;
+                        }
+                        if (sourceArray.data.mappings.mappings[complianceid] != null && taggingArray.data.mappings.mappings[i] != null) {
+                            if (sourceArray.data.mappings.mappings[complianceid][uniqCols[k]] != taggingArray.data.mappings.mappings[i][uniqCols[k]]) {
+                                equal = false;
+                            }
+                        }
+                    }
+                    if (equal) {
+                        let preselctedVals = [];
+                        if ((colName == "countries" || colName == "entities" || colName == "locations") && taggingArray.data.mappings.mappings[i][colName] == null) {
+                            let preselctedValsStr = "";
+                            for (let mandatoryfield of mandatoryFields) {
+                                if (taggingArray.data.mappings.mappings[i][mandatoryfield] == null || taggingArray.data.mappings.mappings[i][mandatoryfield] == "") {
+                                    preselctedValsStr = "";
+                                }
+                                else {
+                                    preselctedValsStr += `${taggingArray.data.mappings.mappings[i][mandatoryfield]};`;
+                                }
+                            }
+                            preselctedValsStr = preselctedValsStr.slice(0, -1);
+                            if (preselctedValsStr.indexOf(';') >= 0) {
+                                preselctedVals.push(preselctedValsStr);
+                            }
+                        }
+                        else {
+                            preselctedVals = taggingArray.data.mappings.mappings[i][colName];
+                        }
+                        multiArr[i].preselectedValues = JSON.stringify(preselctedVals);
+                        if (preselctedVals.length > 0) {
+                            multiArr[i].parentElement.setAttribute("part", "row-mapped");
+                        }
+                    }
+                    // }
+                    multiArr[i].addEventListener('valueChanged', async (e) => {
+                        divElement.querySelector('.button-save').disabled = false;
+                        this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+                    });
+                }
+                else {
+                    // for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+                    var equal = true;
+                    let complianceid = taggingArray.data.mappings.mappings[i].id;
+                    for (var k = 0; k < uniqCols.length; k++) {
+                        if (uniqCols[k] != "id") {
+                            continue;
+                        }
+                        if (sourceArray.data.mappings.mappings[complianceid] != null && taggingArray.data.mappings.mappings[i] != null) {
+                            if (sourceArray.data.mappings.mappings[complianceid][uniqCols[k]] != taggingArray.data.mappings.mappings[i][uniqCols[k]]) {
+                                equal = false;
+                            }
+                        }
+                    }
+                    if (equal) {
+                        if (taggingArray.data.mappings.mappings[i] != null) {
+                            if (Util.isJSONParsable(sourceArray.data.mappings.mappings[complianceid][colName])) {
+                                multiArr[i].value = JSON.parse(sourceArray.data.mappings.mappings[complianceid][colName])[0];
+                            }
+                            else {
+                                multiArr[i].value = (_f = sourceArray.data.mappings.mappings[complianceid][colName]) !== null && _f !== void 0 ? _f : "";
+                            }
+                        }
+                    }
+                    // }
+                    multiArr[i].addEventListener('keyup', async (e) => {
+                        if (e.key == "Enter") {
+                            divElement.querySelector('.button-save').disabled = false;
+                            this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+                        }
+                    });
+                    multiArr[i].addEventListener('focusout', async (e) => {
+                        divElement.querySelector('.button-save').disabled = false;
+                        this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+                    });
+                }
+            }
+            const buttonApply = divElement.querySelector('.button-apply');
+            buttonApply.addEventListener('click', () => {
+                // console.log('applied');
+                // this.applyAndReloadTagging(e,colName, taggingArray, sourceArray, divElement);
+                this.renderTaggingTableNew(divElement, selectedStatutes, sourceObject, sourceMapping, taggingArray, sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter);
+            });
+            const buttonToggleMoreBack = divElement.querySelector('.button-toggle-more-back');
+            const buttonToggleMore = divElement.querySelector('.button-toggle-more');
+            buttonToggleMore.addEventListener('click', async (ev) => {
+                ev.target.classList.add('hide');
+                buttonToggleMoreBack.classList.remove('hide');
+                const buttonDownloadBackups = divElement.querySelector('.button-download-backups');
+                buttonDownloadBackups.style.display = 'flex';
+                const buttonExportMapping = divElement.querySelector('.button-export-mapping');
+                buttonExportMapping.style.display = 'flex';
+                const buttonExportMappingCSV = divElement.querySelector('.button-export-mapping-csv');
+                buttonExportMappingCSV.style.display = 'flex';
+                // const buttonApply = (divElement as HTMLDivElement).querySelector('.button-apply') as HTMLButtonElement;
+                // buttonApply.style.display = 'flex';
+                const buttonLoadLocal = divElement.querySelector('.button-local-load');
+                buttonLoadLocal.style.display = 'flex';
+                const buttonSaveLocal = divElement.querySelector('.button-local-save');
+                buttonSaveLocal.style.display = 'flex';
+                // const buttonSave = (divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement;
+                // buttonSave.style.display = 'flex';
+                const buttonDownloadBackupsNew = Util.clearListeners(buttonDownloadBackups);
+                buttonDownloadBackupsNew.addEventListener('click', async () => {
+                    const result = await this.fetchGetStoredMapping(colName);
+                    for (var i = 0; i < result.data.length; i++) {
+                        const blob = new Blob([result.data[i].mappings != null ? JSON.stringify(result.data[i].mappings) : JSON.stringify(result.data[i])], { type: 'text/html' });
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.setAttribute('href', url);
+                        a.setAttribute('download', 'report_' + colName + '_' + i + '.json');
+                        a.click();
+                    }
+                    buttonToggleMoreBack.click();
+                    if (result.data.length === 0) {
+                        this.setError("No backups found!");
+                        setTimeout(() => {
+                            this.clearMessages();
+                        }, 3000);
+                    }
+                });
+                const buttonExportMappingNew = Util.clearListeners(buttonExportMapping);
+                buttonExportMappingNew.addEventListener('click', async () => {
+                    let valueStr = [];
+                    for (var i = 0; i < multiArr.length; i++) {
+                        if (apiIdDropdown.length > 0) {
+                            for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+                                var equal = true;
+                                let complianceid = taggingArray.data.mappings.mappings[j].id;
+                                for (var k = 0; k < uniqCols.length; k++) {
+                                    if (uniqCols[k] != "id") {
+                                        continue;
+                                    }
+                                    if (sourceArray.data.mappings.mappings[complianceid] != null && taggingArray.data.mappings.mappings[j] != null) {
+                                        if (sourceArray.data.mappings.mappings[complianceid][uniqCols[k]] != taggingArray.data.mappings.mappings[j][uniqCols[k]]) {
+                                            equal = false;
+                                        }
+                                    }
+                                }
+                                if (equal) {
+                                    valueStr.push(JSON.stringify(taggingArray.data.mappings.mappings[j][colName]));
+                                }
+                            }
+                        }
+                        else {
+                            if (taggingArray.data.mappings.mappings[i] != null) {
+                                valueStr.push(taggingArray.data.mappings.mappings[i][colName]);
+                            }
+                            else {
+                                valueStr.push('');
+                            }
+                        }
+                    }
+                    //console.log('valueStr', valueStr);
+                    const valuesHTML = JSON.stringify(valueStr);
+                    const outerHTML = '<h3>This extract is generated on ' + new Date() + '</h3>' + divElement.querySelector('#span-filtered').outerHTML + '<br /><h2>' + divElement.querySelector('#mapped-stats-title').outerHTML + '</h2>' + divElement.querySelector('#table-data').outerHTML;
+                    let tableHTML = this.TAGGING_HTML.replace(/TABLE_DATA/g, outerHTML);
+                    tableHTML = tableHTML.replace(/TABLE_VALUES/g, valuesHTML);
+                    const blob = new Blob([tableHTML], { type: 'text/html' });
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.setAttribute('href', url);
+                    a.setAttribute('download', 'mapping_' + colName + '_' + new Date().getTime() + '.html');
+                    a.click();
+                });
+                const buttonExportMappingCSVNew = Util.clearListeners(buttonExportMappingCSV);
+                buttonExportMappingCSVNew === null || buttonExportMappingCSVNew === void 0 ? void 0 : buttonExportMappingCSVNew.addEventListener('click', async () => {
+                    let csvArray = JSON.parse(JSON.stringify(taggingArray.data.mappings.mappings));
+                    for (let [i, obj] of csvArray.entries()) {
+                        let tempCsvObj = obj;
+                        if (obj['cols'] != null && obj['data'] != null) {
+                            let dataArr = JSON.parse(obj['data']);
+                            let colsArr = JSON.parse(obj['cols']);
+                            for (let [j, colKey] of colsArr.entries()) {
+                                tempCsvObj['cols_' + colKey] = dataArr[j];
+                            }
+                        }
+                        csvArray[i] = tempCsvObj;
+                    }
+                    console.log('csv array', csvArray);
+                    let csvData = Util.convertToCSV(csvArray);
+                    // let csvData = Util.convertToCSV(taggingArray.data.mappings.mappings);
+                    console.log('csvData', csvData);
+                    const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.setAttribute('href', url);
+                    a.setAttribute('download', 'mapping_' + colName + '_' + new Date().getTime() + '.csv');
+                    a.click();
+                });
+                const buttonLoadLocalNew = Util.clearListeners(buttonLoadLocal);
+                buttonLoadLocalNew === null || buttonLoadLocalNew === void 0 ? void 0 : buttonLoadLocalNew.addEventListener('click', async () => {
+                    console.log('load-local');
+                    divElement.querySelector('#fileInput').click();
+                });
+                const fileInput = divElement.querySelector('#fileInput');
+                fileInput.value = '';
+                const fileInputNew = Util.clearListeners(fileInput);
+                fileInputNew.addEventListener('change', (e) => {
+                    var fr = new FileReader();
+                    fr.onload = () => {
+                        this.renderTaggingTableNew(divElement, selectedStatutes, sourceArray, sourceMapping, JSON.parse(fr.result + ""), sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter);
+                    };
+                    var frCsv = new FileReader();
+                    frCsv.onload = () => {
+                        console.log('taggingarray onload called');
+                        console.log('csv result', frCsv.result);
+                        const tempArr = Util.parseCsv(frCsv.result + "");
+                        console.log('csv data', tempArr);
+                        let changeCount = 0;
+                        for (let [i, obj] of tempArr.entries()) {
+                            let tempObj = taggingArray.data.mappings.mappings[i];
+                            delete tempObj['delta'];
+                            delete tempObj['lastupdated'];
+                            let tempNewObj = obj;
+                            delete tempNewObj['delta'];
+                            delete tempNewObj['lastupdated'];
+                            if (JSON.stringify(tempObj) !== JSON.stringify(tempNewObj)) {
+                                // console.log('item changed', taggingArray.data.mappings.mappings[i], obj)
+                                let changedId = "";
+                                for (let [k, col] of uniqCols.entries()) {
+                                    if (col != "id") {
+                                        continue;
+                                    }
+                                    changedId += tempObj[col];
+                                    if (k < (uniqCols.length - 1)) {
+                                        changedId += ";";
+                                    }
+                                }
+                                this.changedOnboardingItemIds.push(changedId);
+                                changeCount++;
+                            }
+                        }
+                        this.setSuccessBtn(changeCount + " items changed. Do you wish to apply?", ["No", "Yes"], [
+                            () => {
+                                this.clearMessages();
+                                this.changedOnboardingItemIds = [];
+                                buttonToggleMoreBack.click();
+                            },
+                            () => {
+                                this.clearMessages();
+                                let tempObj = {};
+                                tempObj["data"] = {};
+                                tempObj["data"]["mappings"] = {};
+                                tempObj["data"]["mappings"]["mappings"] = tempArr;
+                                let tempObjStr = JSON.stringify(tempObj);
+                                console.log('csv taggingarray cols', uniqCols, JSON.parse(tempObjStr)["data"]["mappings"]["mappings"].length, Object.keys(tempObj.data.mappings.mappings[0]));
+                                this.renderTaggingTableNew(divElement, selectedStatutes, sourceArray, sourceMapping, JSON.parse(tempObjStr), sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter);
+                            }
+                        ]);
+                    };
+                    if (e.target.files[0].name.toLowerCase().indexOf(colName.toLowerCase()) >= 0) {
+                        let ext = e.target.files[0].name.split('.')[e.target.files[0].name.split('.').length - 1];
+                        if (ext.toLowerCase() == "csv") {
+                            frCsv.readAsText(e.target.files[0]);
+                        }
+                        else {
+                            fr.readAsText(e.target.files[0]);
+                        }
+                    }
+                });
+                const buttonSaveLocalNew = Util.clearListeners(buttonSaveLocal);
+                buttonSaveLocalNew === null || buttonSaveLocalNew === void 0 ? void 0 : buttonSaveLocalNew.addEventListener('click', async () => {
+                    console.log('save-local');
+                    const blob = new Blob([JSON.stringify(taggingArray)], { type: 'text/plain' });
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.setAttribute('href', url);
+                    a.setAttribute('download', 'mapping_' + colName + '_' + new Date().toLocaleString() + '.txt');
+                    a.click();
+                });
+            });
+            buttonToggleMoreBack.addEventListener('click', async (ev) => {
+                ev.target.classList.add('hide');
+                buttonToggleMore.classList.remove('hide');
+                const buttonDownloadBackups = divElement.querySelector('.button-download-backups');
+                buttonDownloadBackups.style.display = 'none';
+                const buttonExportMapping = divElement.querySelector('.button-export-mapping');
+                buttonExportMapping.style.display = 'none';
+                const buttonExportMappingCSV = divElement.querySelector('.button-export-mapping-csv');
+                buttonExportMappingCSV.style.display = 'none';
+                // const buttonApply = (divElement as HTMLDivElement).querySelector('.button-apply') as HTMLButtonElement;
+                // buttonApply.style.display = 'none';
+                const buttonLoadLocal = divElement.querySelector('.button-local-load');
+                buttonLoadLocal.style.display = 'none';
+                const buttonSaveLocal = divElement.querySelector('.button-local-save');
+                buttonSaveLocal.style.display = 'none';
+                // const buttonSave = (divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement;
+                // buttonSave.style.display = 'none';
+            });
+            const buttonSave = divElement.querySelector('.button-save');
+            buttonSave === null || buttonSave === void 0 ? void 0 : buttonSave.addEventListener('click', async () => {
+                await this.saveTagging(taggingArray.data.mappings, selectedStatutes, uploadFunction, refreshFunction, false, colName);
+            });
+            const buttonCancel = divElement.querySelector('.button-cancel');
+            buttonCancel === null || buttonCancel === void 0 ? void 0 : buttonCancel.addEventListener('click', async () => {
+                //console.log('cancel clicked');
+                await this.fetchCancelOnboardingJob(colName);
+                refreshFunction();
+            });
+            const cbArr = divElement.querySelectorAll('.cb-select');
+            for (i = 0; i < cbArr.length; i++) {
+                cbArr[i].addEventListener('change', (ev) => {
+                    const cbSelectId = ev.currentTarget.id;
+                    const cbSelectIndex = cbSelectId.split('-')[1];
+                    if (!this.selectedCbs.includes(cbSelectIndex)) {
+                        this.selectedCbs.push(cbSelectIndex);
+                    }
+                    else {
+                        this.selectedCbs.splice(this.selectedCbs.indexOf(cbSelectIndex), 1);
+                    }
+                    //console.log(this.selectedCbs);
+                });
+            }
+            this.changedOnboardingItemIds = [];
+        };
+        this.renderMappingTable = (divElement, jsonData, cursor, fetchFunction, searchString, mappedArray, found, uploadFunction, refreshFunction, extraFields, uploadBlock, extraFieldPosition, colName, subfilter, statuteColName, extraHintsArr, mappedStatutes = []) => {
+            var _a, _b, _c, _f, _g, _h, _j;
+            console.log('cols1', jsonData);
+            // console.log('cols', jsonData[0].data.cols);
+            //console.log('divelement', divElement);
+            //console.log('jsonData', jsonData);
+            //console.log('cursor', cursor);
+            //console.log('fetch', fetchFunction);
+            //console.log('searchstring', searchString);
+            //console.log('subfiltervalue', subfilter);
+            const arrCompliancesFrequencies = {};
+            if (jsonData.length === 0)
+                return;
+            this.selectedCbs = [];
+            let colCountry = -1;
+            let colState = -1;
+            let colSubcategory = -1;
+            let colStatute = -1;
+            const unfilteredDict = [];
+            var html = '';
+            html += '<div>';
+            html += '<h3 part="results-title">Total Items (' + found + ')</h3>';
+            html += '<h4 id="span-filtered" part="results-title"></h4>';
+            html += '<h4 id="span-extra-filled" part="results-title"></h4>';
+            html += '</div>';
+            html += '<div class="d-flex justify-between align-center left-sticky flex-wrap mb-20">';
+            html += '<div id="div-subfiltered"></div>';
+            html += '<div id="scroll-overlay" part="onboarding-scroll-overlay" class="pos-fixed-scroll justify-center align-center">';
+            html += '<div id="scroll-overlay-left" class="mr-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_left_alt</span></button></div>';
+            html += '<div id="scroll-overlay-right" class="ml-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_right_alt</span></button></div>';
+            html += '</div>';
+            html += '<div id="detail-overlay" part="onboarding-detail-overlay" class="pos-fixed justify-center align-center hide">';
+            html += '<div class="cover-slide"></div>';
+            html += '<div class="detail-container p-10">';
+            html += '<div class="d-flex justify-between align-center mb-20">';
+            html += '<div part="results-title">Row Details</div>';
+            html += '<button part="button-icon" class="detail-close"><span class="material-symbols-outlined">close</span></button>';
+            html += '</div>';
+            html += '<div id="detail-overlay-list">';
+            html += '</div>';
+            html += '</div>';
+            html += '</div>';
+            html += '<div class="d-flex align-center">';
+            html += '<input part="input" type="text" placeholder="Filter" class="input-filter mr-10" value="' + subfilter + '" />';
+            html += '<div class="mr-10">';
+            html += '<div class="d-flex justify-end"><button part="calendar-tab-icon-not-selected" class="material-icons button-toggle-more">expand_more</button><button part="calendar-tab-icon-selected" class="material-icons button-toggle-more-back hide">expand_less</button></div>';
+            html += '<div style="position: absolute; margin-top: 5px;"><button part="button" class="hide d-flex align-center button-download-backups" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">file_save</span><span>Download Backups</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">export_notes</span><span>Export Mapping</span></button></div>';
+            html += '</div>';
+            html += (this.disablesave == "yes" ? '' : '<button part="button" class="button-save" disabled>Save</button>');
+            html += '</div>';
+            html += '</div>';
+            html += '<table id="table-data">';
+            html += '<thead>';
+            html += '<th part="td-head" class="td-head">';
+            // html += 'Select';
+            html += '<div id="select-all"><input class="checkbox checkbox-all" part="input-checkbox" type="checkbox" ' + ((this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + '/></div>';
+            html += '</th>';
+            html += '<th part="td-head" class="td-head">';
+            html += '<div>View</div>';
+            html += '</th>';
+            if (extraFieldPosition === 0) {
+                for (var i = 0; i < extraFields.length; i++) {
+                    html += '<th part="td-head" class="td-head">';
+                    html += extraFields[i];
+                    html += '</th>';
+                }
+            }
+            if (colName.toLowerCase() == "compliances") {
+                html += '<th part="td-head" class="td-head">';
+                html += 'Proposed Users';
+                html += '</th>';
+            }
+            html += '<th part="td-head" class="td-head">';
+            html += 'Id';
+            html += '</th>';
+            // for(var j = 0; j < JSON.parse(jsonData[0].data.cols).length; j++) {
+            //   if(jsonData[0].cols.includes(JSON.parse(jsonData[0].data.cols)[j])) {
+            //     html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == JSON.parse(jsonData[0].data.cols)[j].toLowerCase() ? 'left-sticky' : '') + '">'
+            //     html += JSON.parse(jsonData[0].data.cols)[j]
+            //     html += '</th>'
+            //   }
+            // }
+            for (var j = 0; j < jsonData[0].cols.length; j++) {
+                console.log('jsoncols', JSON.parse(jsonData[0].data.cols), jsonData[0].cols.length, j);
+                html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == ((_a = JSON.parse(jsonData[0].data.cols)[j]) !== null && _a !== void 0 ? _a : "").toLowerCase() ? 'left-sticky' : '') + '">';
+                // html += jsonData[0].cols[j]
+                html += '</th>';
+            }
+            if (extraFieldPosition === 1) {
+                for (var i = 0; i < extraFields.length; i++) {
+                    html += '<th part="td-head" class="td-head">';
+                    html += extraFields[i];
+                    html += '</th>';
+                }
+            }
+            html += '</thead>';
+            //console.log('colstate',  JSON.parse(jsonData[0].data.cols));
+            for (var i = 0; i < JSON.parse(jsonData[0].data.cols).length; i++) {
+                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "country") {
+                    console.log('colstate country', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+                    colCountry = i;
+                }
+                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "state") {
+                    //console.log('colstate state', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+                    colState = i;
+                }
+                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "subcategory") {
+                    //console.log('colstate subcategory', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+                    colSubcategory = i;
+                }
+                if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == statuteColName) {
+                    //console.log('colstate statute', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+                    colStatute = i;
+                }
+            }
+            //var countExtra0 = 0;
+            var countextra = [];
+            var subfiltered = 0;
+            html += '<tbody>';
+            var mappedCount = 0;
+            for (let level = 0; level < 2; level++) {
+                for (var i = 0; i < jsonData.length; i++) {
+                    // console.log('subfilter value before', subfiltered);
+                    console.log('rendering', i, jsonData[i]);
+                    let tempColCountry = -1;
+                    let tempColState = -1;
+                    let tempColStatute = -1;
                     let tempColSubcategory = -1;
                     if (JSON.parse(jsonData[0].data.cols)[0] == ('lastModifiedBy')) {
                         if (JSON.parse(jsonData[i].data.cols)[0] != ('lastModifiedBy')) {
@@ -17637,7 +18659,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     //console.log(e.currentTarget, (e.currentTarget as HTMLInputElement).checked);
                     divElement.querySelector('.button-save').disabled = false;
                     if (extraFieldPosition === 1) {
-                        await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, true);
+                        await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, true, mappedStatutes);
                     }
                 });
             }
@@ -17705,7 +18727,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             });
             (_j = this._SfButtonSave) === null || _j === void 0 ? void 0 : _j.addEventListener('click', async () => {
-                await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, false);
+                await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, false, mappedStatutes);
             });
             // const arrExtraFields = (divElement as HTMLDivElement).querySelectorAll('.extra-field') as NodeListOf<SfIMultitextarea>;
             // var totalFields = 0;
@@ -18326,220 +19348,321 @@ let SfIEvents = class SfIEvents extends LitElement {
             });
             //this.refreshCalendar();
         };
-        this.renderOnboardingTriggers = (mappedTriggers, mappedSerializedAlertSchedules, triggersJobs) => {
-            var html = '';
-            html += '<div id="triggers-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingTriggersContainer.innerHTML = html;
-            //console.log('rendering triggers...', (this._SfOnboardingTriggersContainer as HTMLDivElement).innerHTML);
-            this.renderTaggingTable(this._SfOnboardingTriggersListContainer, mappedSerializedAlertSchedules, mappedTriggers, ["shortid", "obligationtitle", "obligationtype"], this.uploadTriggersMapping, this.loadOnboardingTriggers, "triggers", ["id", "entityname", "locationname"], '', "", ["triggers"], triggersJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingTriggers = (selectedStatutes, mappedCompliances, mappedFunctions, mappedTriggers) => {
+            this.renderTaggingTableNew(this._SfOnboardingTriggersListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedTriggers, ["shortid", "obligationtitle", "obligationtype"], this.uploadTriggersMapping, this.loadOnboardingTriggers, "triggers", ["id"], '', "", ["triggers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingInternalControls = (mappedInternalControls, mappedSerializedTriggers, internalcontrolsJobs) => {
-            var html = '';
-            html += '<div id="internalcontrols-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingInternalControlsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingInternalControlsListContainer, mappedSerializedTriggers, mappedInternalControls, ["shortid", "obligationtitle", "obligationtype"], this.uploadInternalControlsMapping, this.loadOnboardingInternalControls, "internalcontrols", ["id", "entityname", "locationname"], '', "", ["internalcontrols"], internalcontrolsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingInternalControls = (selectedStatutes, mappedCompliances, mappedFunctions, mappedInternalControls) => {
+            this.renderTaggingTableNew(this._SfOnboardingInternalControlsListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedInternalControls, ["shortid", "obligationtitle", "obligationtype"], this.uploadInternalControlsMapping, this.loadOnboardingInternalControls, "internalcontrols", ["id", "entityname", "locationname"], '', "", ["internalcontrols"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingReportedLocations = (mappedReportedLocations, mappedSerializedTriggers, reportedlocationsJobs) => {
-            var html = '';
-            html += '<div id="reportedlocations-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingReportedLocationsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingReportedLocationsContainer, mappedSerializedTriggers, mappedReportedLocations, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportedLocationsMapping, this.loadOnboardingReportedLocations, "reportedlocations", ["id", "entityname", "locationname"], '', "", ["reportedlocations"], reportedlocationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingReportedLocations = (selectedStatutes, mappedCompliances, mappedFunctions, mappedReportedLocations) => {
+            this.renderTaggingTableNew(this._SfOnboardingReportedLocationsListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedReportedLocations, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportedLocationsMapping, this.loadOnboardingReportedLocations, "reportedlocations", ["id", "entityname", "locationname"], '', "", ["reportedlocations"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingActivations = (mappedActivations, mappedSerializedExtensions, activationsJobs) => {
-            var html = '';
-            html += '<div id="activations-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingActivationsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingActivationListContainer, mappedSerializedExtensions, mappedActivations, ["shortid", "obligationtitle", "obligationtype"], this.uploadActivationsMapping, this.loadOnboardingActivations, "activations", ["id", "entityname", "locationname"], '', "", ["activations"], activationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingActivations = (selectedStatutes, mappedCompliances, mappedFunctions, mappedActivations) => {
+            this.renderTaggingTableNew(this._SfOnboardingActivationListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedActivations, ["shortid", "obligationtitle", "obligationtype"], this.uploadActivationsMapping, this.loadOnboardingActivations, "activations", ["id", "entityname", "locationname"], '', "", ["activations"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingInvalidations = (mappedInvalidations, mappedSerializedExtensions, invalidationsJobs) => {
-            var html = '';
-            html += '<div id="invalidations-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingInvalidationsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingInvalidationListContainer, mappedSerializedExtensions, mappedInvalidations, ["shortid", "obligationtitle", "obligationtype"], this.uploadInvalidationsMapping, this.loadOnboardingInvalidations, "invalidations", ["id", "entityname", "locationname"], '', "", ["invalidations"], invalidationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingInvalidations = (selectedStatutes, mappedCompliances, mappedFunctions, mappedInvalidations) => {
+            this.renderTaggingTableNew(this._SfOnboardingInvalidationListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedInvalidations, ["shortid", "obligationtitle", "obligationtype"], this.uploadInvalidationsMapping, this.loadOnboardingInvalidations, "invalidations", ["id", "entityname", "locationname"], '', "", ["invalidations"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingAlertSchedules = (mappedAlertSchedules, mappedSerializedExtensions, alertschedulesJobs) => {
-            var html = '';
-            html += '<div id="alertschedules-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingAlertSchedulesContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingAlertSchedulesListContainer, mappedSerializedExtensions, mappedAlertSchedules, ["shortid", "obligationtitle", "obligationtype"], this.uploadAlertSchedulesMapping, this.loadOnboardingAlertSchedules, "alertschedules", ["id", "entityname", "locationname"], '', "", ["alertschedules"], alertschedulesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingAlertSchedules = (selectedStatutes, mappedCompliances, mappedFunctions, mappedAlertSchedules) => {
+            this.renderTaggingTableNew(this._SfOnboardingAlertSchedulesListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedAlertSchedules, ["shortid", "obligationtitle", "obligationtype"], this.uploadAlertSchedulesMapping, this.loadOnboardingAlertSchedules, "alertschedules", ["id", "entityname", "locationname"], '', "", ["alertschedules"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingExtensions = (mappedExtensions, mappedSerializedDuedates, extensionsJobs) => {
-            var html = '';
-            html += '<div id="extensions-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingExtensionsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingExtensionsListContainer, mappedSerializedDuedates, mappedExtensions, ["shortid", "obligationtitle", "obligationtype"], this.uploadExtensionsMapping, this.loadOnboardingExtensions, "extensions", ["id", "entityname", "locationname"], '', "", ["extensions"], extensionsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingExtensions = (selectedStatutes, mappedCompliances, mappedFunctions, mappedExtensions) => {
+            this.renderTaggingTableNew(this._SfOnboardingExtensionsListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedExtensions, ["shortid", "obligationtitle", "obligationtype"], this.uploadExtensionsMapping, this.loadOnboardingExtensions, "extensions", ["id", "entityname", "locationname"], '', "", ["extensions"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingDuedates = (mappedDuedates, mappedSerializedMakerCheckers, duedatesJobs) => {
-            var html = '';
-            html += '<div id="duedates-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingDuedatesContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingDuedatesListContainer, mappedSerializedMakerCheckers, mappedDuedates, ["shortid", "obligationtitle", "obligationtype"], this.uploadDuedatesMapping, this.loadOnboardingDuedates, "duedates", ["id", "entityname", "locationname"], '', "", ["duedates"], duedatesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingDuedates = (selectedStatutes, mappedCompliances, mappedFunctions, mappedDuedates) => {
+            this.renderTaggingTableNew(this._SfOnboardingDuedatesListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedDuedates, ["shortid", "obligationtitle", "obligationtype"], this.uploadDuedatesMapping, this.loadOnboardingDuedates, "duedates", ["id", "entityname", "locationname"], '', "", ["duedates"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingReporters = (mappedReporters, mappedSerializedTags, reportersJobs, _arrFeedbackReference) => {
-            var html = '';
-            html += '<div id="reporters-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingReportersContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingReportersListContainer, mappedSerializedTags, mappedReporters, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportersMapping, this.loadOnboardingReporters, "reporters", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["reporters"], reportersJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+        this.renderOnboardingReporters = (selectedStatutes, mappedCompliances, mappedFunctions, mappedReporters) => {
+            this.renderTaggingTableNew(this._SfOnboardingReportersListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedReporters, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportersMapping, this.loadOnboardingReporters, "reporters", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["reporters"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
         };
-        this.renderOnboardingApprovers = (mappedApprovers, mappedSerializedReporters, approversJobs, _arrFeedbackReference) => {
-            var html = '';
-            html += '<div id="approvers-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingApproversContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingApproversListContainer, mappedSerializedReporters, mappedApprovers, ["shortid", "obligationtitle", "obligationtype"], this.uploadApproversMapping, this.loadOnboardingApprovers, "approvers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["approvers"], approversJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+        this.renderOnboardingApprovers = (selectedStatutes, mappedCompliances, mappedFunctions, mappedApprovers) => {
+            this.renderTaggingTableNew(this._SfOnboardingApproversListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedApprovers, ["shortid", "obligationtitle", "obligationtype"], this.uploadApproversMapping, this.loadOnboardingApprovers, "approvers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["approvers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
         };
-        this.renderOnboardingFunctionHeads = (mappedFunctionHeads, mappedSerializedApprovers, functionHeadsJobs, _arrFeedbackReference) => {
-            var html = '';
-            html += '<div id="functionheads-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingFunctionHeadsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingFunctionHeadsListContainer, mappedSerializedApprovers, mappedFunctionHeads, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionHeadsMapping, this.loadOnboardingFunctionHeads, "functionheads", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["functionheads"], functionHeadsJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+        this.renderOnboardingFunctionHeads = (selectedStatutes, mappedCompliances, mappedFunctions, mappedFunctionHeads) => {
+            this.renderTaggingTableNew(this._SfOnboardingFunctionHeadsListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedFunctionHeads, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionHeadsMapping, this.loadOnboardingFunctionHeads, "functionheads", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["functionheads"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
         };
-        this.renderOnboardingMakerCheckers = (mappedMakerCheckers, mappedSerializedDocs, makerCheckerJobs) => {
-            var html = '';
-            html += '<div id="makercheckers-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingMakerCheckersContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingMakerCheckersListContainer, mappedSerializedDocs, mappedMakerCheckers, ["shortid", "obligationtitle", "obligationtype"], this.uploadMakerCheckersMapping, this.loadOnboardingMakerCheckers, "makercheckers", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["makercheckers"], makerCheckerJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingMakerCheckers = (selectedStatutes, mappedCompliances, mappedFunctions, mappedMakerCheckers) => {
+            this.renderTaggingTableNew(this._SfOnboardingMakerCheckersListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedMakerCheckers, ["shortid", "obligationtitle", "obligationtype"], this.uploadMakerCheckersMapping, this.loadOnboardingMakerCheckers, "makercheckers", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["makercheckers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingDocs = (mappedDocs, mappedSerializedViewers, docsJobs) => {
-            var html = '';
-            html += '<div id="docs-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingDocsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingDocsListContainer, mappedSerializedViewers, mappedDocs, ["shortid", "obligationtitle", "obligationtype"], this.uploadDocsMapping, this.loadOnboardingDocs, "docs", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["docs"], docsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingDocs = (selectedStatutes, mappedCompliances, mappedFunctions, mappedDocs) => {
+            this.renderTaggingTableNew(this._SfOnboardingDocsListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedDocs, ["shortid", "obligationtitle", "obligationtype"], this.uploadDocsMapping, this.loadOnboardingDocs, "docs", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["docs"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
         };
-        this.renderOnboardingAuditors = (mappedAuditors, mappedSerializedFunctionheads, auditorsJobs, _arrFeedbackReference) => {
-            //console.log('inside rendering auditors..');
-            var html = '';
-            html += '<div id="auditors-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingAuditorsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingAuditorsListContainer, mappedSerializedFunctionheads, mappedAuditors, ["shortid", "obligationtitle", "obligationtype"], this.uploadAuditorsMapping, this.loadOnboardingAuditors, "auditors", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["auditors"], auditorsJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+        this.renderOnboardingAuditors = (selectedStatutes, mappedCompliances, mappedFunctions, mappedAuditors) => {
+            this.renderTaggingTableNew(this._SfOnboardingAuditorsListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedAuditors, ["shortid", "obligationtitle", "obligationtype"], this.uploadAuditorsMapping, this.loadOnboardingAuditors, "auditors", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["auditors"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
         };
-        this.renderOnboardingViewers = (mappedViewers, mappedSerializedAuditors, viewersJobs, _arrFeedbackReference) => {
-            //console.log('inside rendering viewers..');
-            var html = '';
-            html += '<div id="viewers-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingViewersContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingViewersListContainer, mappedSerializedAuditors, mappedViewers, ["shortid", "obligationtitle", "obligationtype"], this.uploadViewersMapping, this.loadOnboardingViewers, "viewers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["viewers"], viewersJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+        this.renderOnboardingViewers = (selectedStatutes, mappedCompliances, mappedFunctions, mappedViewers) => {
+            this.renderTaggingTableNew(this._SfOnboardingViewersListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedViewers, ["shortid", "obligationtitle", "obligationtype"], this.uploadViewersMapping, this.loadOnboardingViewers, "viewers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["viewers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
         };
-        this.renderOnboardingTags = (mappedTags, mappedSerializedFunctions, tagsJobs) => {
-            var html = '';
-            html += '<div id="tags-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingTagsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingTagsListContainer, mappedSerializedFunctions, mappedTags, ["shortid", "obligationtitle", "obligationtype"], this.uploadTagsMapping, this.loadOnboardingTags, "tags", ["id", "countryname", "entityname", "locationname"], this.apiIdTags, "&Tag", ["tags"], tagsJobs, "tagtype", ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingTags = (selectedStatutes, mappedCompliances, mappedFunctions, mappedTags) => {
+            this.renderTaggingTableNew(this._SfOnboardingTagsListContainer, selectedStatutes, mappedCompliances, mappedFunctions, mappedTags, ["shortid", "obligationtitle", "obligationtype"], this.uploadTagsMapping, this.loadOnboardingTags, "tags", ["id", "entityname", "locationname"], this.apiIdTags, "&Tag", ["tags"], ["id", "countryid", "entityid", "locationid"], "tagtype", [], null, "", "");
         };
-        this.renderOnboardingFunctions = (mappedFunctions, mappedSerializedLocations, functionsJobs) => {
+        this.renderOnboardingFunctions = (selectedStatutes, mappedCompliances, mappedLocations, mappedFunctions) => {
+            this.renderTaggingTableNew(this._SfOnboardingFunctionsListContainer, selectedStatutes, mappedCompliances, mappedLocations, mappedFunctions, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionsMapping, this.loadOnboardingFunctions, "functions", ["id", "entityname", "locationname"], this.apiIdTags, "&Function", ["functions"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
+        };
+        this.renderOnboardingLocations = (selectedStatutes, mappedCompliances, mappedEntities, mappedLocations) => {
+            this.renderTaggingTableNew(this._SfOnboardingLocationsListContainer, selectedStatutes, mappedCompliances, mappedEntities, mappedLocations, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "reference", "activations", "invalidations"], this.uploadLocationsMapping, this.loadOnboardingLocations, "locations", ["id", "entityname"], this.apiIdTags, "&Location", ["locationname", "locationid"], ["id", "countryid", "entityid"], null, [], null, "", "");
+        };
+        this.renderOnboardingStatutesDropdownMapping = (container, mappedStatutes, selectedStatutes, fetchtaggingfunction, rendermappingfunction) => {
+            console.log('rendering dropdown', mappedStatutes.length);
             var html = '';
-            html += '<div id="functions-list-container" class="d-flex flex-col w-100 scroll-x">';
+            html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
+            html += '<div class="d-flex flex-col justify-center align-stretch w-100">';
+            html += '<label part="input-label">Select Statute</label>';
+            html += '<sf-multiselect-search mode="edit" id="statute-select"></sf-multiselect-search>';
+            html += '</div>';
+            html += '<div id="compliances-list-container" class="d-flex flex-col w-100 scroll-x">';
+            html += '</div>';
             html += '</div>';
-            for (var i = 0; i < mappedSerializedLocations.data.mappings.mappings.length; i++) {
-                if (mappedSerializedLocations.data.mappings.mappings[i].id == "33a0deab-e93e-41b7-831a-473f9ea3eea2") {
-                    //console.log('mappedSerializedLocations', mappedSerializedLocations.data.mappings.mappings[i]);
+            console.log('attaching html', html);
+            container.innerHTML = html;
+            let multiselectStatute = container.querySelector('#statute-select');
+            multiselectStatute.listelements = mappedStatutes;
+            let selectedStatutesObj = {};
+            for (let statuteObj of selectedStatutes) {
+                selectedStatutesObj[statuteObj.id] = true;
+            }
+            multiselectStatute.listselection = selectedStatutesObj;
+            multiselectStatute.loadMode();
+            multiselectStatute.addEventListener('valueChanged', async (e) => {
+                let multiselect = e.currentTarget;
+                console.log('selected statutes', multiselect.selectedValuesNames());
+                if (Object.keys(multiselect.selectedValuesNames()).length == 0) {
+                    return;
                 }
-            }
-            this._SfOnboardingFunctionsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingFunctionsListContainer, mappedSerializedLocations, mappedFunctions, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionsMapping, this.loadOnboardingFunctions, "functions", ["id", "countryname", "entityname", "locationname"], this.apiIdTags, "&Function", ["functions"], functionsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+                let selectedStatutes = [];
+                const regex = /^\[.*?\] - /;
+                for (let statuteid of Object.keys(multiselect.selectedValuesNames())) {
+                    selectedStatutes.push({ id: statuteid, selected: true, statutename: multiselect.selectedValuesNames()[statuteid].name.replace(regex, '') });
+                }
+                let mappedCompliances = await fetchtaggingfunction(Object.keys(multiselect.selectedValuesNames()));
+                rendermappingfunction({ data: { mappings: { mappings: selectedStatutes } } }, mappedCompliances);
+            });
         };
-        this.renderOnboardingLocations = (mappedLocations, mappedSerializedEntities, locationsJobs) => {
+        this.renderOnboardingStatutesDropdownTagging = (container, listcontainerid, mappedStatutes, selectedStatutes, fetchcompliancesfunction, fetchsourcemapping, fetchtaggingfunction, rendertaggingfunction) => {
+            console.log('rendering dropdown', mappedStatutes.length);
             var html = '';
-            html += '<div id="locations-list-container" class="d-flex flex-col w-100 scroll-x">';
+            html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
+            html += '<div class="d-flex flex-col justify-center align-stretch w-100">';
+            html += '<label part="input-label">Select Statute</label>';
+            html += '<sf-multiselect-search mode="edit" id="statute-select"></sf-multiselect-search>';
             html += '</div>';
-            this._SfOnboardingLocationsContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingLocationsListContainer, mappedSerializedEntities, mappedLocations, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "reference", "activations", "invalidations"], this.uploadLocationsMapping, this.loadOnboardingLocations, "locations", ["id", "countryname", "entityname"], this.apiIdTags, "&Location", ["locations"], locationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+            html += '<div id="' + listcontainerid + '" class="d-flex flex-col w-100 scroll-x">';
+            html += '</div>';
+            html += '</div>';
+            console.log('attaching html', html);
+            container.innerHTML = html;
+            let multiselectStatute = container.querySelector('#statute-select');
+            multiselectStatute.listelements = mappedStatutes;
+            let selectedStatutesObj = {};
+            for (let statuteObj of selectedStatutes) {
+                selectedStatutesObj[statuteObj.id] = true;
+            }
+            multiselectStatute.listselection = selectedStatutesObj;
+            multiselectStatute.loadMode();
+            multiselectStatute.addEventListener('valueChanged', async (e) => {
+                let multiselect = e.currentTarget;
+                console.log('selected statutes', multiselect.selectedValuesNames());
+                if (Object.keys(multiselect.selectedValuesNames()).length == 0) {
+                    return;
+                }
+                let selectedStatutes = [];
+                const regex = /^\[.*?\] - /;
+                for (let statuteid of Object.keys(multiselect.selectedValuesNames())) {
+                    selectedStatutes.push({ id: statuteid, selected: true, statutename: multiselect.selectedValuesNames()[statuteid].name.replace(regex, '') });
+                }
+                let sourceMappingArray = await fetchsourcemapping(Object.keys(multiselect.selectedValuesNames()));
+                let mappingArray = await fetchtaggingfunction(Object.keys(multiselect.selectedValuesNames()));
+                let mappedCompliances = await fetchcompliancesfunction(Object.keys(multiselect.selectedValuesNames()));
+                let mappedCompliancesArr = { data: { mappings: {} } };
+                console.log('mapped compliances', mappedCompliances);
+                for (let statuteObj of selectedStatutes) {
+                    for (let complianceid of Object.keys(mappedCompliances.data.mappings[statuteObj.id])) {
+                        let pushObj = mappedCompliances.data.mappings[statuteObj.id][complianceid];
+                        pushObj.id = complianceid;
+                        pushObj.statuteid = statuteObj.id;
+                        mappedCompliancesArr.data.mappings[complianceid] = pushObj;
+                    }
+                }
+                rendertaggingfunction(selectedStatutes, mappedCompliancesArr, sourceMappingArray, mappingArray);
+            });
         };
-        this.renderOnboardingCompliances = (mappedStatutes, mappedCompliances) => {
+        this.renderOnboardingCompliances = async (mappedStatutes, mappedCompliancesArr) => {
             //console.log('mappedcompliances', mappedCompliances);
             //console.log('mappedstatutes', mappedStatutes);
             var searchString = "";
+            let mappedCompliances = { data: { mappings: { mappings: [] } } };
             for (var i = 0; i < mappedStatutes.data.mappings.mappings.length; i++) {
                 if (mappedStatutes.data.mappings.mappings[i].selected) {
-                    searchString += mappedStatutes.data.mappings.mappings[i].id + "|";
+                    let statuteid = mappedStatutes.data.mappings.mappings[i].id;
+                    if (mappedCompliancesArr.data.mappings[statuteid] != null) {
+                        for (let complianceid of Object.keys(mappedCompliancesArr.data.mappings[statuteid])) {
+                            let pushObj = mappedCompliancesArr.data.mappings[statuteid][complianceid];
+                            pushObj.id = complianceid;
+                            mappedCompliances.data.mappings.mappings.push(pushObj);
+                        }
+                    }
+                    searchString += statuteid + "|";
                 }
             }
             searchString = searchString.slice(0, -1);
             //console.log('searchstring', searchString);
             var initCursor = "";
-            var html = '';
-            html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
-            html += '<div class="d-flex flex-col w-100">';
-            html += '<label part="input-label">Search Compliances</label>';
-            html += '<div class="d-flex">';
-            html += '<input part="input" type="text" class="w-100 input-search" placeholder="Use | to separate..." disabled/>';
-            html += '<button part="button-icon" class="ml-10 material-icons button-search">search</button>';
-            html += '</div>';
-            html += '</div>';
-            html += '<div id="compliances-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            html += '</div>';
-            this._SfOnboardingCompliancesContainer.innerHTML = html;
-            this._SfButtonSearch.addEventListener('click', async () => {
-                //console.log('clicked', mappedStatutes.data.mappings.mappings);
-                const searchString = this._SfInputSearch.value;
-                //console.log('searchstring', searchString);
-                if (searchString.length > 0) {
-                    const arrSearchString = searchString.split('|');
-                    const arrSearchStringProcessed = [];
-                    arrSearchString.forEach((complianceId) => {
-                        if (complianceId.length === 36) {
-                            arrSearchStringProcessed.push(complianceId);
+            // var html = '';
+            // html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
+            // html += '<div class="d-flex flex-col w-100">';
+            // html += '<label part="input-label">Search Compliances</label>';
+            // html += '<div class="d-flex">';
+            // html += '<input part="input" type="text" class="w-100 input-search" placeholder="Use | to separate..." disabled/>'
+            // html += '<button part="button-icon" class="ml-10 material-icons button-search">search</button>'
+            // html += '</div>';
+            // html += '</div>';
+            // html += '<div id="compliances-list-container" class="d-flex flex-col w-100 scroll-x">';
+            // html += '</div>';
+            // html += '</div>';
+            // (this._SfOnboardingCompliancesContainer as HTMLDivElement).innerHTML = html;
+            // (this._SfButtonSearch as HTMLButtonElement)?.addEventListener('click', async () => {
+            //   //console.log('clicked', mappedStatutes.data.mappings.mappings);
+            //   const searchString = (this._SfInputSearch as HTMLButtonElement).value;
+            //   //console.log('searchstring', searchString);
+            //   if (searchString.length > 0) {
+            //     const arrSearchString = searchString.split('|');
+            //     const arrSearchStringProcessed: any = [];
+            //     arrSearchString.forEach((complianceId: string) => {
+            //       if (complianceId.length === 36) {
+            //         arrSearchStringProcessed.push(complianceId);
+            //       }
+            //     });
+            //     var resultCompliances: any = {};
+            //     resultCompliances.values = [];
+            //     const chunkSize = 20;
+            //     for (let k = 0; k < arrSearchStringProcessed.length; k += chunkSize) {
+            //       const chunk = arrSearchStringProcessed.slice(k, k + chunkSize);
+            //       console.log('chunk', chunk);
+            //       // do whatever
+            //       const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchStringProcessed.length);
+            //       console.log(tempResultCompliances)
+            //       resultCompliances.values.push(...tempResultCompliances.values);
+            //       //console.log(resultCompliances);
+            //     }
+            //     // var resultCompliances : any = {};
+            //     // resultCompliances.values = [];
+            //     // const chunkSize = 20;
+            //     // for (let k = 0; k < arrSearchString.length; k += chunkSize) {
+            //     //   const chunk = arrSearchString.slice(k, k + chunkSize);
+            //     //   console.log('chunk', chunk);
+            //     //     // do whatever
+            //     //   const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchString.length);
+            //     //   console.log(tempResultCompliances)
+            //     //   resultCompliances.values.push(...tempResultCompliances.values);
+            //     //   //console.log(resultCompliances);
+            //     // }
+            //     if (resultCompliances != null) {
+            //       const jsonData = [];
+            //       const arrCompliancesFrequencies: any = {};
+            //       for (var i = 0; i < resultCompliances.values.length; i++) {
+            //         if (arrCompliancesFrequencies[resultCompliances.values[i].id] != null) {
+            //           continue;
+            //         } else {
+            //           arrCompliancesFrequencies[resultCompliances.values[i].id] = 0;
+            //         }
+            //         var mapped = false;
+            //         var extraFields = null;
+            //         var previousExtraFields = null;
+            //         console.log('mappedcompliances', mappedCompliances)
+            //         for (var j = 0; j < mappedCompliances.data.mappings.mappings.length; j++) {
+            //           if (mappedCompliances.data.mappings.mappings[j].id == resultCompliances.values[i].id) {
+            //             if (mappedCompliances.data.mappings.mappings[j].selected) {
+            //               mapped = true;
+            //             }
+            //             extraFields = mappedCompliances.data.mappings.mappings[j].extraFields;
+            //           }
+            //         }
+            //         for (j = 0; j < mappedStatutes.data.mappings.mappings.length; j++) {
+            //           // console.log('mappedStatutes.data.mappings.mappings[j]', mappedStatutes.data.mappings.mappings[j]);
+            //           if (Array.isArray(mappedStatutes.data.mappings.mappings[j].statutename)) {
+            //             // sometimes this error occurs
+            //             continue;
+            //           }
+            //           if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == JSON.parse(resultCompliances.values[i].fields.data[0])[6][0].trim()) {
+            //             // if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == "Corporation Act, 2001") {
+            //             //   console.log('pushpreviousvalues', mappedStatutes.data.mappings.mappings[j], Object.keys(mappedStatutes.data.mappings.mappings[j].extraFields[0]));
+            //             // }
+            //             previousExtraFields = mappedStatutes.data.mappings.mappings[j].extraFields
+            //           }
+            //         }
+            //         jsonData.push({ id: resultCompliances.values[i].id, mapped: mapped, data: resultCompliances.values[i].fields, cols: ["country", "jurisdiction", "state", "category", "subcategory", "statute", "applicability", "obligationtitle", "obligation", "risk", "riskarea", "frequency", "penalty", "reference", "form", "subfrequency", "obligationtype", "duedate"], extraFields: extraFields, previousExtraFields: previousExtraFields })
+            //       }
+            //       this.renderMappingTable((this._SfOnboardingCompliancesListContainer as HTMLDivElement), jsonData, [{ prev: initCursor, next: resultCompliances.cursor }], this.fetchSearchCompliances, searchString, mappedCompliances, resultCompliances.values.length, this.uploadCompliancesMapping, this.loadOnboardingCompliances, ["Client remarks", "FlaggGRC response"], -1, 0, "compliances", "", "statute", ["optional", "optional"]);
+            //     }
+            //   }
+            // });
+            //console.log('compliances searchstring', searchString);
+            // if (searchString != "") {
+            //   (this._SfInputSearch as HTMLInputElement).value = searchString;
+            //   (this._SfButtonSearch as HTMLButtonElement).click();
+            // }
+            if (searchString.length > 0) {
+                const arrSearchString = searchString.split('|');
+                const arrSearchStringProcessed = [];
+                arrSearchString.forEach((complianceId) => {
+                    if (complianceId.length === 36) {
+                        arrSearchStringProcessed.push(complianceId);
+                    }
+                });
+                var resultCompliances = {};
+                resultCompliances.values = [];
+                const chunkSize = 20;
+                for (let k = 0; k < arrSearchStringProcessed.length; k += chunkSize) {
+                    const chunk = arrSearchStringProcessed.slice(k, k + chunkSize);
+                    console.log('chunk', chunk);
+                    // do whatever
+                    const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchStringProcessed.length);
+                    console.log(tempResultCompliances);
+                    resultCompliances.values.push(...tempResultCompliances.values);
+                    //console.log(resultCompliances);
+                }
+                // var resultCompliances : any = {};
+                // resultCompliances.values = [];
+                // const chunkSize = 20;
+                // for (let k = 0; k < arrSearchString.length; k += chunkSize) {
+                //   const chunk = arrSearchString.slice(k, k + chunkSize);
+                //   console.log('chunk', chunk);
+                //     // do whatever
+                //   const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchString.length);
+                //   console.log(tempResultCompliances)
+                //   resultCompliances.values.push(...tempResultCompliances.values);
+                //   //console.log(resultCompliances);
+                // }
+                if (resultCompliances != null) {
+                    const jsonData = [];
+                    const arrCompliancesFrequencies = {};
+                    for (var i = 0; i < resultCompliances.values.length; i++) {
+                        if (arrCompliancesFrequencies[resultCompliances.values[i].id] != null) {
+                            continue;
                         }
-                    });
-                    var resultCompliances = {};
-                    resultCompliances.values = [];
-                    const chunkSize = 20;
-                    for (let k = 0; k < arrSearchStringProcessed.length; k += chunkSize) {
-                        const chunk = arrSearchStringProcessed.slice(k, k + chunkSize);
-                        console.log('chunk', chunk);
-                        // do whatever
-                        const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchStringProcessed.length);
-                        console.log(tempResultCompliances);
-                        resultCompliances.values.push(...tempResultCompliances.values);
-                        //console.log(resultCompliances);
-                    }
-                    // var resultCompliances : any = {};
-                    // resultCompliances.values = [];
-                    // const chunkSize = 20;
-                    // for (let k = 0; k < arrSearchString.length; k += chunkSize) {
-                    //   const chunk = arrSearchString.slice(k, k + chunkSize);
-                    //   console.log('chunk', chunk);
-                    //     // do whatever
-                    //   const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchString.length);
-                    //   console.log(tempResultCompliances)
-                    //   resultCompliances.values.push(...tempResultCompliances.values);
-                    //   //console.log(resultCompliances);
-                    // }
-                    if (resultCompliances != null) {
-                        const jsonData = [];
-                        const arrCompliancesFrequencies = {};
-                        for (var i = 0; i < resultCompliances.values.length; i++) {
-                            if (arrCompliancesFrequencies[resultCompliances.values[i].id] != null) {
-                                continue;
-                            }
-                            else {
-                                arrCompliancesFrequencies[resultCompliances.values[i].id] = 0;
+                        else {
+                            arrCompliancesFrequencies[resultCompliances.values[i].id] = 0;
+                        }
+                        var mapped = false;
+                        var extraFields = null;
+                        var previousExtraFields = null;
+                        console.log('mappedcompliances', mappedCompliances);
+                        if (mappedCompliances.data.mappings.mappings == null) {
+                            for (var j = 0; j < Object.keys(mappedCompliances.data.mappings).length; j++) {
+                                let statuteKey = Object.keys(mappedCompliances.data.mappings)[j];
+                                for (var k = 0; k < Object.keys(mappedCompliances.data.mappings[statuteKey]).length; k++) {
+                                    let complianceKey = Object.keys(mappedCompliances.data.mappings[statuteKey])[k];
+                                    if (mappedCompliances.data.mappings[statuteKey][complianceKey].id == resultCompliances.values[i].id) {
+                                        mapped = true;
+                                        extraFields = mappedCompliances.data.mappings[statuteKey][complianceKey].extraFields;
+                                    }
+                                }
                             }
-                            var mapped = false;
-                            var extraFields = null;
-                            var previousExtraFields = null;
-                            console.log('mappedcompliances', mappedCompliances);
+                        }
+                        else {
                             for (var j = 0; j < mappedCompliances.data.mappings.mappings.length; j++) {
                                 if (mappedCompliances.data.mappings.mappings[j].id == resultCompliances.values[i].id) {
-                                    if (mappedCompliances.data.mappings.mappings[j].selected) {
-                                        mapped = true;
-                                    }
+                                    mapped = true;
                                     extraFields = mappedCompliances.data.mappings.mappings[j].extraFields;
                                 }
                             }
@@ -18550,51 +19673,25 @@ let SfIEvents = class SfIEvents extends LitElement {
                                     continue;
                                 }
                                 if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == JSON.parse(resultCompliances.values[i].fields.data[0])[6][0].trim()) {
-                                    if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == "Corporation Act, 2001") {
-                                        //console.log('pushpreviousvalues', mappedStatutes.data.mappings.mappings[j], Object.keys(mappedStatutes.data.mappings.mappings[j].extraFields[0]));
-                                    }
+                                    // if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == "Corporation Act, 2001") {
+                                    //   //console.log('pushpreviousvalues', mappedStatutes.data.mappings.mappings[j], Object.keys(mappedStatutes.data.mappings.mappings[j].extraFields[0]));
+                                    // }
                                     previousExtraFields = mappedStatutes.data.mappings.mappings[j].extraFields;
                                 }
                             }
-                            jsonData.push({ id: resultCompliances.values[i].id, mapped: mapped, data: resultCompliances.values[i].fields, cols: ["country", "jurisdiction", "state", "category", "subcategory", "statute", "applicability", "obligationtitle", "obligation", "risk", "riskarea", "frequency", "penalty", "reference", "form", "subfrequency", "obligationtype", "duedate"], extraFields: extraFields, previousExtraFields: previousExtraFields });
                         }
-                        this.renderMappingTable(this._SfOnboardingCompliancesListContainer, jsonData, [{ prev: initCursor, next: resultCompliances.cursor }], this.fetchSearchCompliances, searchString, mappedCompliances, resultCompliances.values.length, this.uploadCompliancesMapping, this.loadOnboardingCompliances, ["Client remarks", "FlaggGRC response"], -1, 0, "compliances", "", "statute", ["optional", "optional"]);
+                        jsonData.push({ id: resultCompliances.values[i].id, mapped: mapped, data: resultCompliances.values[i].fields, cols: ["country", "jurisdiction", "state", "category", "subcategory", "statute", "applicability", "obligationtitle", "obligation", "risk", "riskarea", "frequency", "penalty", "reference", "form", "subfrequency", "obligationtype", "duedate"], extraFields: extraFields, previousExtraFields: previousExtraFields });
                     }
+                    this.renderMappingTable(this._SfOnboardingCompliancesListContainer, jsonData, [{ prev: initCursor, next: resultCompliances.cursor }], this.fetchSearchCompliances, searchString, mappedCompliances, resultCompliances.values.length, this.uploadCompliancesMapping, this.loadOnboardingCompliances, [], -1, 0, "compliances", "", "statute", ["optional", "optional"], mappedStatutes.data.mappings.mappings);
                 }
-            });
-            //console.log('compliances searchstring', searchString);
-            if (searchString != "") {
-                this._SfInputSearch.value = searchString;
-                this._SfButtonSearch.click();
             }
         };
-        this.renderOnboardingEntities = (mappedEntities, mappedSerializedCountries, entitiesJobs, arrFeedbackReference) => {
-            var html = '';
-            html += '<div id="entities-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingEntitiesContainer.innerHTML = html;
-            this.renderTaggingTable(this._SfOnboardingEntitiesListContainer, mappedSerializedCountries, mappedEntities, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute"], this.uploadEntitiesMapping, this.loadOnboardingEntities, "entities", ["id", "countryname"], this.apiIdTags, "&Entity", ["entities"], entitiesJobs, null, ["Client remarks", "FlaggGRC response"], arrFeedbackReference, "Guideline", "");
+        this.renderOnboardingEntities = (selectedStatutes, mappedCompliances, mappedCountries, mappedEntities) => {
+            this.renderTaggingTableNew(this._SfOnboardingEntitiesListContainer, selectedStatutes, mappedCompliances, mappedCountries, mappedEntities, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute"], this.uploadEntitiesMapping, this.loadOnboardingEntities, "entities", ["id", "countryname"], this.apiIdTags, "&Entity", ["entityname", "entityid"], ["id", "countryid"], null, [], [], "Guideline", "");
         };
-        this.renderOnboardingCountries = (mappedCountries, mappedCompliances, countriesJobs) => {
-            var html = '';
-            html += '<div id="countries-list-container" class="d-flex flex-col w-100 scroll-x">';
-            html += '</div>';
-            this._SfOnboardingCountriesContainer.innerHTML = html;
-            const arr1 = [];
-            for (var i = 0; i < mappedCompliances.data.mappings.mappings.length; i++) {
-                if (mappedCompliances.data.mappings.mappings[i].selected) {
-                    arr1.push(mappedCompliances.data.mappings.mappings[i]);
-                }
-            }
-            mappedCompliances.data.mappings.mappings = arr1;
-            // const arr2 = [];
-            // for(var i = 0; i < mappedCountries.data.mappings.mappings.length; i++) {
-            //   if(mappedCountries.data.mappings.mappings[i].selected) {
-            //     arr2.push(mappedCountries.data.mappings.mappings[i]);
-            //   }
-            // }
-            // mappedCountries.data.mappings.mappings = arr2;
-            this.renderTaggingTable(this._SfOnboardingCountriesListContainer, mappedCompliances, mappedCountries, ["shortid", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "state", "subcategory"], this.uploadCountriesMapping, this.loadOnboardingCountries, "countries", ["id"], this.apiIdTags, "-Country", ["countries"], countriesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+        this.renderOnboardingCountries = (selectedStatutes, mappedCompliances, sourceMapping, mappedCountries) => {
+            sourceMapping = {};
+            this.renderTaggingTableNew(this._SfOnboardingCountriesListContainer, selectedStatutes, mappedCompliances, sourceMapping, mappedCountries, ["shortid", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "state", "subcategory"], this.uploadCountriesMapping, this.loadOnboardingCountries, "countries", ["id"], this.apiIdTags, "-Country", ["countryname", "countryid"], ["id"], null, [], null, "", "");
         };
         this.renderOnboardingStatutes = (mappedStatutes) => {
             var initCursor = "";
@@ -18631,9 +19728,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                                 for (var j = 0; j < mappedStatutes.data.mappings.mappings.length; j++) {
                                     if (mappedStatutes.data.mappings.mappings[j].id == resultStatutes.values[i].id) {
                                         //console.log('comparing',mappedStatutes.data.mappings.mappings[j].id,resultStatutes.values[i].id);
-                                        if (mappedStatutes.data.mappings.mappings[j].selected) {
-                                            mapped = true;
-                                        }
+                                        // if (mappedStatutes.data.mappings.mappings[j].selected) {
+                                        mapped = true;
+                                        // }
                                         extraFields = mappedStatutes.data.mappings.mappings[j].extraFields;
                                     }
                                 }
@@ -18868,112 +19965,112 @@ let SfIEvents = class SfIEvents extends LitElement {
             this._SfOnboardingTabContainer.innerHTML = html;
             (_a = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-statutes')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_STATUTES;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 await this.loadOnboardingStatutes();
             });
             (_b = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-compliances')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_COMPLIANCES;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingCompliances();
             });
             (_c = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-countries')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_COUNTRIES;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingCountries();
             });
             (_f = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-entities')) === null || _f === void 0 ? void 0 : _f.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_ENTITIES;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingEntities();
             });
             (_g = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-locations')) === null || _g === void 0 ? void 0 : _g.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_LOCATIONS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingLocations();
             });
             (_h = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-functions')) === null || _h === void 0 ? void 0 : _h.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_FUNCTIONS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingFunctions();
             });
             (_j = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-tags')) === null || _j === void 0 ? void 0 : _j.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_TAGS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingTags();
             });
             (_k = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-reporters')) === null || _k === void 0 ? void 0 : _k.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_REPORTERS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingReporters();
             });
             (_l = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-approvers')) === null || _l === void 0 ? void 0 : _l.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_APPROVERS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingApprovers();
             });
             (_m = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-functionheads')) === null || _m === void 0 ? void 0 : _m.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_FUNCTION_HEADS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingFunctionHeads();
             });
             (_o = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-auditors')) === null || _o === void 0 ? void 0 : _o.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_AUDITORS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingAuditors();
             });
             (_p = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-viewers')) === null || _p === void 0 ? void 0 : _p.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_VIEWERS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingViewers();
             });
             (_q = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-makercheckers')) === null || _q === void 0 ? void 0 : _q.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_MAKER_CHECKERS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingMakerCheckers();
             });
             (_r = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-docs')) === null || _r === void 0 ? void 0 : _r.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_DOCS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingDocs();
             });
             (_s = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-duedates')) === null || _s === void 0 ? void 0 : _s.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_DUEDATES;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingDuedates();
             });
             (_t = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-alertschedules')) === null || _t === void 0 ? void 0 : _t.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_ALERTSCHEDULES;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingAlertSchedules();
             });
             (_u = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-activations')) === null || _u === void 0 ? void 0 : _u.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_ACTIVATIONS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingActivations();
             });
             (_v = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-invalidations')) === null || _v === void 0 ? void 0 : _v.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_INVALIDATION;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingInvalidations();
             });
             (_w = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-triggers')) === null || _w === void 0 ? void 0 : _w.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_TRIGGERS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingTriggers();
             });
             (_x = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-extensions')) === null || _x === void 0 ? void 0 : _x.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_EXTENSIONS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingExtensions();
             });
             (_y = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-internalcontrols')) === null || _y === void 0 ? void 0 : _y.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_INTERNALCONTROLS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingInternalControls();
             });
             (_z = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-reportedlocations')) === null || _z === void 0 ? void 0 : _z.addEventListener('click', async () => {
                 this.myOnboardingTab = this.TAB_REPORTEDLOCATIONS;
-                this.renderOnboardingTabs();
+                await this.renderOnboardingTabs();
                 this.loadOnboardingReportedLocations();
             });
             (_0 = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-signoff')) === null || _0 === void 0 ? void 0 : _0.addEventListener('click', async () => {
@@ -22346,65 +23443,65 @@ let SfIEvents = class SfIEvents extends LitElement {
                 users: transformedUsers
             };
         };
-        this.uploadTriggersMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'triggers');
+        this.uploadTriggersMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'triggers', statuteids);
         };
-        this.uploadInternalControlsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'internalcontrols');
+        this.uploadInternalControlsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'internalcontrols', statuteids);
         };
-        this.uploadReportedLocationsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'reportedlocations');
+        this.uploadReportedLocationsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'reportedlocations', statuteids);
         };
-        this.uploadAlertSchedulesMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'alertschedules');
+        this.uploadAlertSchedulesMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'alertschedules', statuteids);
         };
-        this.uploadActivationsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'activations');
+        this.uploadActivationsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'activations', statuteids);
         };
-        this.uploadInvalidationsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'invalidations');
+        this.uploadInvalidationsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'invalidations', statuteids);
         };
-        this.uploadDuedatesMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'duedates');
+        this.uploadDuedatesMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'duedates', statuteids);
         };
-        this.uploadExtensionsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'extensions');
+        this.uploadExtensionsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'extensions', statuteids);
         };
-        this.uploadApproversMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'approvers');
+        this.uploadApproversMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'approvers', statuteids);
         };
-        this.uploadFunctionHeadsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'functionheads');
+        this.uploadFunctionHeadsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'functionheads', statuteids);
         };
-        this.uploadMakerCheckersMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'makercheckers');
+        this.uploadMakerCheckersMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'makercheckers', statuteids);
         };
-        this.uploadDocsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'docs');
+        this.uploadDocsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'docs', statuteids);
         };
-        this.uploadAuditorsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'auditors');
+        this.uploadAuditorsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'auditors', statuteids);
         };
-        this.uploadViewersMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'viewers');
+        this.uploadViewersMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'viewers', statuteids);
         };
-        this.uploadReportersMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'reporters');
+        this.uploadReportersMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'reporters', statuteids);
         };
-        this.uploadTagsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'tags');
+        this.uploadTagsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'tags', statuteids);
         };
-        this.uploadFunctionsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'functions');
+        this.uploadFunctionsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'functions', statuteids);
         };
-        this.uploadLocationsMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'locations');
+        this.uploadLocationsMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'locations', statuteids);
         };
-        this.uploadEntitiesMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'entities');
+        this.uploadEntitiesMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'entities', statuteids);
         };
-        this.uploadCountriesMapping = async (data) => {
-            await this.uploadOnboardingMapping(data, 'countries');
+        this.uploadCountriesMapping = async (data, statuteids) => {
+            await this.uploadOnboardingMapping(data, 'countries', statuteids);
         };
         this.uploadMappedSuspense = async (data, year) => {
             //console.log('uploading..', data);
@@ -22434,9 +23531,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }, 2000);
             }
         };
-        this.uploadOnboardingMapping = async (data, onboardingstep) => {
+        this.uploadOnboardingMapping = async (data, onboardingstep, statuteids) => {
             //console.log('uploading..', data);
-            let url = "https://" + this.apiId + "/updatemappedonboarding";
+            let url = "https://" + this.apiId + "/updatemappedonboarding1";
             // const body = { 
             //   "projectid": this.projectId, 
             //   "data": JSON.stringify(data),
@@ -22445,7 +23542,8 @@ let SfIEvents = class SfIEvents extends LitElement {
             let body = {
                 "projectid": this.projectId,
                 "presigned": true,
-                "onboardingstep": onboardingstep
+                "onboardingstep": onboardingstep,
+                "statuteids": statuteids
             };
             let authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
             let xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
@@ -22457,7 +23555,8 @@ let SfIEvents = class SfIEvents extends LitElement {
                 body = {
                     "projectid": this.projectId,
                     "key": jsonRespose.key,
-                    "onboardingstep": onboardingstep
+                    "onboardingstep": onboardingstep,
+                    "statuteids": statuteids
                 };
                 authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
                 xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
@@ -22481,9 +23580,13 @@ let SfIEvents = class SfIEvents extends LitElement {
             if (xhr.status == 200) {
             }
         };
-        this.uploadCompliancesMapping = async (data) => {
-            //console.log('uploading..', data);
-            let url = "https://" + this.apiId + "/updatemappedcompliances";
+        this.uploadCompliancesMapping = async (data, mappedstatutes) => {
+            console.log('uploading..', data, mappedstatutes);
+            let url = "https://" + this.apiId + "/updatemappedcompliances1";
+            let statuteids = [];
+            for (let statuteObj of mappedstatutes) {
+                statuteids.push(statuteObj.id);
+            }
             let body = {
                 "projectid": this.projectId,
                 "presigned": true,
@@ -22497,6 +23600,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 await this.uploadToPresignedUrl(data, jsonRespose.signedUrl);
                 body = {
                     "projectid": this.projectId,
+                    "statuteids": statuteids,
                     "key": jsonRespose.key
                 };
                 authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
@@ -22516,22 +23620,30 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
         };
         this.uploadStatutesMapping = async (data) => {
-            //console.log('uploading..', data);
-            let url = "https://" + this.apiId + "/updatemappedstatutes";
-            var searchstring = '';
-            for (var i = 0; i < data.mappings.length; i++) {
-                const dataItem = JSON.parse(data.mappings[i].data);
-                // //console.log(dataItem[3])
-                searchstring += dataItem[3];
-                if (i < (data.mappings.length - 1)) {
-                    searchstring += '|';
-                }
-            }
-            // const body = { 
+            // console.log('uploading..', data);
+            let url = "https://" + this.apiId + "/updatemappedstatutes1";
+            // var searchstring = '';
+            // for (var i = 0; i < data.mappings.length; i++) {
+            //   // const dataItem = JSON.parse(data.mappings[i].data);
+            //   const dataId = data.mappings[i].id;
+            //   // console.log(dataItem[3])
+            //   if (data.mappings[i].selected == true) {
+            //     searchstring += dataId;
+            //     // if (i < (data.mappings.length - 1)) {
+            //       searchstring += '|';
+            //     // }
+            //   }
+            // }
+            // if(searchstring.length > 0){
+            //   searchstring = searchstring.slice(0, -1);
+            // }
+            // const bodyUpload = { 
             //   "projectid": this.projectId, 
-            //   "data": JSON.stringify(data),
+            //   // "data": JSON.stringify(data),
             //   "compliancessearchstring": searchstring
             // }
+            // console.log("upload body", bodyUpload)
+            // return;
             let body = {
                 "projectid": this.projectId,
                 "presigned": true,
@@ -22545,7 +23657,6 @@ let SfIEvents = class SfIEvents extends LitElement {
                 body = {
                     "projectid": this.projectId,
                     "key": jsonRespose.key,
-                    "compliancessearchstring": searchstring
                 };
                 authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
                 xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization));
@@ -23592,10 +24703,10 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.setError(jsonRespose.error);
             }
         };
-        this.fetchMappedCompliances = async () => {
-            let url = "https://" + this.apiId + "/getmappedcompliances";
+        this.fetchMappedCompliances = async (statuteids = []) => {
+            let url = "https://" + this.apiId + "/getmappedcompliances1";
             const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
-            const xhr = (await this.prepareXhr({ "projectid": this.projectId }, url, this._SfLoader, authorization));
+            const xhr = (await this.prepareXhr({ "projectid": this.projectId, "statuteids": statuteids }, url, this._SfLoader, authorization));
             this._SfLoader.innerHTML = '';
             if (xhr.status == 200) {
                 var jsRespose = JSON.parse(xhr.responseText);
@@ -23710,7 +24821,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
         };
         this.fetchSerializedMapping = async (onboardingstep) => {
-            const url = "https://" + this.apiId + "/getmappedserializedonboarding";
+            const url = "https://" + this.apiId + "/getmappedserializedonboarding1";
             const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
             const xhr = (await this.prepareXhr({ "projectid": this.projectId, "onboardingstep": onboardingstep }, url, this._SfLoader, authorization));
             this._SfLoader.innerHTML = '';
@@ -23789,70 +24900,71 @@ let SfIEvents = class SfIEvents extends LitElement {
             // return (await this.fetchSerializedPartByPart("https://"+this.apiId+"/getmappedserializedcountries"));
             return (await this.fetchSerializedMapping("countries"));
         };
-        this.fetchMappedTriggers = async () => {
-            return (await this.fetchMappedOnboarding('triggers'));
+        this.fetchMappedTriggers = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('triggers', statuteids));
         };
-        this.fetchMappedInternalControls = async () => {
-            return (await this.fetchMappedOnboarding('internalcontrols'));
+        this.fetchMappedInternalControls = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('internalcontrols', statuteids));
         };
-        this.fetchMappedReportedLocations = async () => {
-            return (await this.fetchMappedOnboarding('reportedlocations'));
+        this.fetchMappedReportedLocations = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('reportedlocations', statuteids));
         };
-        this.fetchMappedAlertSchedules = async () => {
-            return (await this.fetchMappedOnboarding('alertschedules'));
+        this.fetchMappedAlertSchedules = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('alertschedules', statuteids));
         };
-        this.fetchMappedActivations = async () => {
-            return (await this.fetchMappedOnboarding('activations'));
+        this.fetchMappedActivations = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('activations', statuteids));
         };
-        this.fetchMappedInvalidations = async () => {
-            return (await this.fetchMappedOnboarding('invalidations'));
+        this.fetchMappedInvalidations = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('invalidations', statuteids));
         };
-        this.fetchMappedExtensions = async () => {
-            return (await this.fetchMappedOnboarding('extensions'));
+        this.fetchMappedExtensions = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('extensions', statuteids));
         };
-        this.fetchMappedDuedates = async () => {
-            return (await this.fetchMappedOnboarding('duedates'));
+        this.fetchMappedDuedates = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('duedates', statuteids));
         };
-        this.fetchMappedReporters = async () => {
-            return (await this.fetchMappedOnboarding('reporters'));
+        this.fetchMappedReporters = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('reporters', statuteids));
         };
-        this.fetchMappedApprovers = async () => {
-            return (await this.fetchMappedOnboarding('approvers'));
+        this.fetchMappedApprovers = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('approvers', statuteids));
         };
-        this.fetchMappedFunctionHeads = async () => {
-            return (await this.fetchMappedOnboarding('functionheads'));
+        this.fetchMappedFunctionHeads = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('functionheads', statuteids));
         };
-        this.fetchMappedMakerCheckers = async () => {
-            return (await this.fetchMappedOnboarding('makercheckers'));
+        this.fetchMappedMakerCheckers = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('makercheckers', statuteids));
         };
-        this.fetchMappedDocs = async () => {
-            return (await this.fetchMappedOnboarding('docs'));
+        this.fetchMappedDocs = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('docs', statuteids));
         };
-        this.fetchMappedAuditors = async () => {
-            return (await this.fetchMappedOnboarding('auditors'));
+        this.fetchMappedAuditors = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('auditors', statuteids));
         };
-        this.fetchMappedViewers = async () => {
-            return (await this.fetchMappedOnboarding('viewers'));
+        this.fetchMappedViewers = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('viewers', statuteids));
         };
-        this.fetchMappedTags = async () => {
-            return (await this.fetchMappedOnboarding('tags'));
+        this.fetchMappedTags = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('tags', statuteids));
         };
-        this.fetchMappedLocations = async () => {
-            return (await this.fetchMappedOnboarding('locations'));
+        this.fetchMappedLocations = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('locations', statuteids));
         };
-        this.fetchMappedFunctions = async () => {
-            return (await this.fetchMappedOnboarding('functions'));
+        this.fetchMappedFunctions = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('functions', statuteids));
         };
-        this.fetchMappedEntities = async () => {
-            return (await this.fetchMappedOnboarding('entities'));
+        this.fetchMappedEntities = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('entities', statuteids));
         };
-        this.fetchMappedCountries = async () => {
-            return (await this.fetchMappedOnboarding('countries'));
+        this.fetchMappedCountries = async (statuteids = []) => {
+            return (await this.fetchMappedOnboarding('countries', statuteids));
         };
-        this.fetchMappedOnboarding = async (onboardingstep) => {
-            const url = "https://" + this.apiId + "/getmappedonboarding";
+        this.fetchMappedOnboarding = async (onboardingstep, statuteids) => {
+            var _a;
+            const url = "https://" + this.apiId + "/getmappedonboarding1";
             const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
-            const xhr = (await this.prepareXhr({ "projectid": this.projectId, "onboardingstep": onboardingstep }, url, this._SfLoader, authorization));
+            const xhr = (await this.prepareXhr({ "projectid": this.projectId, "onboardingstep": onboardingstep, "statuteids": statuteids }, url, this._SfLoader, authorization));
             this._SfLoader.innerHTML = '';
             if (xhr.status == 200) {
                 var jsRespose = JSON.parse(xhr.responseText);
@@ -23860,7 +24972,17 @@ let SfIEvents = class SfIEvents extends LitElement {
                 resultPresigned = {};
                 resultPresigned.data = {};
                 let tempObj = await this.fetchPresignedUrl(jsRespose.signedUrlGet);
-                resultPresigned.data.mappings = (tempObj.mappings != null) ? tempObj : { mappings: [] };
+                let tempArr = [];
+                for (let statuteid of statuteids) {
+                    for (let foundObjId of Object.keys((_a = tempObj[statuteid]) !== null && _a !== void 0 ? _a : [])) {
+                        let tempPushObj = tempObj[statuteid][foundObjId];
+                        tempPushObj.id = foundObjId.split(';')[foundObjId.split(';').length - 1];
+                        tempPushObj.statuteid = statuteid;
+                        tempArr.push(tempPushObj);
+                    }
+                }
+                // resultPresigned.data.mappings = (tempObj.mappings != null) ? tempObj : { mappings: [] };
+                resultPresigned.data.mappings = tempArr;
                 console.log('resultPresigned onboarding1', tempObj);
                 console.log('resultPresigned onboarding', resultPresigned);
                 // await this.fetchPresignedUrlDelete(jsRespose.signedUrlDelete)
@@ -23895,7 +25017,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
         };
         this.fetchMappedStatutes = async () => {
-            let url = "https://" + this.apiId + "/getmappedstatutes";
+            let url = "https://" + this.apiId + "/getmappedstatutes1";
             const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
             const xhr = (await this.prepareXhr({ "projectid": this.projectId }, url, this._SfLoader, authorization));
             this._SfLoader.innerHTML = '';
@@ -23913,6 +25035,25 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.setError(jsonRespose.error);
             }
         };
+        this.fetchMappedStatutesList = async () => {
+            let url = "https://" + this.apiId + "/getmappedstatuteslist";
+            const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+            const xhr = (await this.prepareXhr({ "projectid": this.projectId }, url, this._SfLoader, authorization));
+            this._SfLoader.innerHTML = '';
+            if (xhr.status == 200) {
+                const jsonRespose = JSON.parse(xhr.responseText);
+                //console.log(jsonRespose);
+                return jsonRespose.data;
+            }
+            else {
+                if (xhr.status == 401) {
+                    let changeEvent = new CustomEvent('tokenExpired', { bubbles: true });
+                    this.dispatchEvent(changeEvent);
+                }
+                const jsonRespose = JSON.parse(xhr.responseText);
+                this.setError(jsonRespose.error);
+            }
+        };
         this.fetchCreateRcmJob = async (complianceid, data, triggerDate, triggerMessage, projects) => {
             data.trigger = {};
             data.trigger.date = triggerDate;
@@ -28655,6 +29796,9 @@ __decorate([
 __decorate([
     query('#internalcontrols-container')
 ], SfIEvents.prototype, "_SfOnboardingInternalControlsContainer", void 0);
+__decorate([
+    query('#reportedlocations-list-container')
+], SfIEvents.prototype, "_SfOnboardingReportedLocationsListContainer", void 0);
 __decorate([
     query('#reportedlocations-container')
 ], SfIEvents.prototype, "_SfOnboardingReportedLocationsContainer", void 0);