@posiwise/smart-crm 0.0.37 → 0.0.39

package/fesm2022/posiwise-smart-crm.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { Component, EventEmitter, Input, Inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i3 from '@angular/forms';
-import { UntypedFormBuilder, Validators, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@posiwise/smart-crm-shared';
-import { CRM_ACCOUNT_FILES_PATH, CRM_PERMISSIONS, CRM_KEYS } from '@posiwise/smart-crm-shared';
-import { PAGE_SIZE, DOCUMENT_TYPE_EXT, TOKEN_HEADER_KEY, POLL_TIMEOUT } from '@posiwise/common-utilities';
 import { AppBaseComponent } from '@posiwise/app-base-component';
 import * as i2 from '@posiwise/common-services';
 import { PermissionService, FormHelperService } from '@posiwise/common-services';
+import { PAGE_SIZE, DOCUMENT_TYPE_EXT, TOKEN_HEADER_KEY, POLL_TIMEOUT } from '@posiwise/common-utilities';
 import { HelperService } from '@posiwise/helper-service';
+import * as i1 from '@posiwise/smart-crm-shared';
+import { CRM_ACCOUNT_FILES_PATH, CRM_PERMISSIONS, CRM_KEYS } from '@posiwise/smart-crm-shared';
+import * as i3 from '@angular/forms';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i5 from '@posiwise/directives';
@@ -21,10 +21,10 @@ import * as i11 from '@posiwise/shared-components';
 import { SharedComponentsModule } from '@posiwise/shared-components';
 import * as i11$1 from '@jsverse/transloco';
 import { TRANSLOCO_SCOPE, TranslocoModule } from '@jsverse/transloco';
-import * as i2$2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i12 from 'ngx-uploader';
 import { UploadStatus, NgxUploaderModule } from 'ngx-uploader';
+import * as i2$2 from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i1$1 from '@angular/router';
@@ -33,8 +33,8 @@ import * as i8 from 'primeng/api';
 import * as i10 from 'primeng/table';
 import * as i14 from '@posiwise/pipes';
 import { PipesModule } from '@posiwise/pipes';
-import swal from 'sweetalert2';
 import moment from 'moment';
+import swal from 'sweetalert2';
 import * as i4$1 from 'ngx-ui-switch';
 import { UiSwitchModule } from 'ngx-ui-switch';
 import * as i17 from 'ngx-infinite-scroll';
@@ -56,11 +56,12 @@ import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk
 import uniqBy from 'lodash/uniqBy';
 import * as i4$3 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
+import * as i12$2 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
 import { PageAccessGuard } from '@posiwise/core-guards';
+import { AppConfigService } from '@posiwise/app-config-service';
 import { CoreTranslocoModule } from '@posiwise/core-transloco';
 import { Loader } from '@googlemaps/js-api-loader';
-import { AppConfigService } from '@posiwise/app-config-service';
-import { DropdownModule } from 'primeng/dropdown';
 import { StatusCodes } from 'http-status-codes';
 import * as i3$1 from '@posiwise/layouts';
 import { LayoutsModule } from '@posiwise/layouts';
@@ -284,15 +285,15 @@ class SmartCrmCompanyDetailsComponent extends AppBaseComponent {
         this.crmService = crmService;
         this.commonService = commonService;
         this.geoService = geoService;
-        this.submitted = false;
-        this.buttonBusy = false;
-        this.isLoading = true;
-        this.onEdit = false;
+        this.countryNames = [];
         this.subscriptionMembers = [];
         this.status = [];
         this.priority = [];
         this.source = [];
-        this.countryNames = [];
+        this.isLoading = true;
+        this.onEdit = false;
+        this.submitted = false;
+        this.buttonBusy = false;
         this.form = AppSmartCrm.getAccountsForm();
     }
     onSearchOwner(event) {
@@ -474,11 +475,11 @@ class SmartCrmCompanyFilesComponent extends AppBaseComponent {
         this.modalService = modalService;
         this.authService = authService;
         this.cdr = cdr;
+        this.page = 1;
         this.isLoaded = false;
+        this.loading = true;
         this.searchText = '';
         this.totalRecordsUnFiltered = 0;
-        this.loading = true;
-        this.page = 1;
         this.routers = ROUTERS;
         this.options = { concurrency: 1, maxUploads: 3 };
         this.uploadInput = new EventEmitter();
@@ -638,15 +639,15 @@ class SmartCrmCompanyAccountInvoiceComponent extends AppBaseComponent {
     constructor(injector, crmService) {
         super(injector);
         this.crmService = crmService;
+        this.page = 0;
+        this.intervalTimer = interval(POLL_TIMEOUT * 60 * 1000);
         this.invoices = [];
-        this.buttonBusy = false;
-        this.totalRecordsUnFiltered = 0;
+        this.invoiceFrequency = ['week', 'month', 'year'];
         this.searchText = '';
-        this.intervalTimer = interval(POLL_TIMEOUT * 60 * 1000);
-        this.isLoaded = false;
-        this.page = 0;
+        this.totalRecordsUnFiltered = 0;
         this.totalRecords = 0;
-        this.invoiceFrequency = ['week', 'month', 'year'];
+        this.isLoaded = false;
+        this.buttonBusy = false;
         this.subscriptionId = PermissionService.selectedSubscription.id;
     }
     onLazyLoad(event) {
@@ -699,29 +700,29 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
         this.cdr = cdr;
         this.logoCacheService = logoCacheService;
         this.document = document;
-        this.isFormEdit = true;
-        this.isDataLoaded = false;
-        this.submitted = false;
+        this.page = 1;
+        this.totalContacts = 0;
+        this.isContactValid = true;
         this.accountComments = [];
+        this.potential = ['low', 'medium', 'high'];
+        this.selector = '.timeline-container';
+        this.searchText = '';
+        this.totalRecordsUnFiltered = 0;
+        this.currentPage = 1;
         this.hasAccess = false;
-        this.editComment = false;
-        this.isContactValid = true;
+        this.isDataLoaded = false;
         this.isLoaded = false;
-        this.totalRecordsUnFiltered = 0;
         this.loading = true;
-        this.searchText = '';
-        this.potential = ['low', 'medium', 'high'];
+        this.isFormEdit = true;
+        this.submitted = false;
+        this.editComment = false;
         this.showFullComment = false;
+        this.submitAction = false;
         this.isDisabled = false;
+        this.buttonBusy = false;
         this.updating = false;
         this.direction = '';
-        this.page = 1;
-        this.currentPage = 1;
-        this.totalContacts = 0;
-        this.selector = '.timeline-container';
-        this.submitAction = false;
         this.routers = ROUTERS;
-        this.buttonBusy = false;
         this.options = { concurrency: 1, maxUploads: 3 };
         this.uploadInput = new EventEmitter();
         this.token = btoa(this.authService.getToken());
@@ -1269,16 +1270,13 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
         this.commonService = commonService;
         this.logoCacheService = logoCacheService;
         this.cdr = cdr;
+        this.page = 1;
         this.data = {
             accounts: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.searchText = '';
-        this.loading = true;
         this.organizationSizes = [];
-        this.hasAccess = false;
-        this.isLoaded = false;
         this.searchOptions = [];
         this.filterByIndustries = [];
         this.status = [];
@@ -1288,8 +1286,11 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
         this.filterByStatus = [];
         this.filterByPriority = [];
         this.filterBySizeId = [];
+        this.searchText = '';
         this.accountActivities = [];
-        this.page = 1;
+        this.loading = true;
+        this.hasAccess = false;
+        this.isLoaded = false;
         this.routers = ROUTERS;
         this.actionNames = [];
     }
@@ -1580,11 +1581,11 @@ class SmartCrmSettingsDetailsComponent extends AppBaseComponent {
     constructor(crmService, injector) {
         super(injector);
         this.crmService = crmService;
+        this.targetWeek = [];
+        this.targetWeekMin = [];
         this.submitted = false;
         this.buttonBusy = false;
         this.isLoading = true;
-        this.targetWeek = [];
-        this.targetWeekMin = [];
         this.form = AppSmartCrm.getSettingsForm();
     }
     ngOnInit() {
@@ -1667,6 +1668,7 @@ class SmartCrmActionsComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
+        this.page = 1;
         this.data = {
             crm_actions: [],
             object_count: 0,
@@ -1676,7 +1678,6 @@ class SmartCrmActionsComponent extends AppBaseComponent {
         this.loading = true;
         this.hasAccess = false;
         this.isLoaded = false;
-        this.page = 1;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -1766,16 +1767,16 @@ class SmartCrmCompanySourceComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
-        this.searchText = '';
-        this.loading = true;
-        this.hasAccess = false;
-        this.isLoaded = false;
+        this.page = 1;
         this.data = {
             crm_sources: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.page = 1;
+        this.searchText = '';
+        this.loading = true;
+        this.hasAccess = false;
+        this.isLoaded = false;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -1855,17 +1856,17 @@ class SmartCrmWidgetsComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
-        this.searchText = '';
-        this.loading = true;
+        this.page = 1;
         this.data = {
             crm_widget_relationships: [],
             object_count: 0,
             unfiltered_count: 0
         };
+        this.positions = [];
+        this.searchText = '';
+        this.loading = true;
         this.hasAccess = false;
         this.isLoaded = false;
-        this.positions = [];
-        this.page = 1;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -1961,20 +1962,20 @@ class SmartCrmStagesComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
-        this.searchText = '';
-        this.loading = true;
+        this.page = 1;
         this.data = {
             crm_opportunity_stages: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.hasAccess = false;
-        this.isLoaded = false;
-        this.page = 1;
         this.filterByCategory = [];
         this.stageNames = [];
         this.categories = [];
         this.availableCategories = [];
+        this.searchText = '';
+        this.loading = true;
+        this.hasAccess = false;
+        this.isLoaded = false;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -2097,17 +2098,17 @@ class SmartCrmOpportunityCategoriesComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
+        this.page = 1;
         this.data = {
             crm_opportunity_categories: [],
             object_count: 0,
             unfiltered_count: 0
         };
+        this.categoryNames = [];
         this.searchText = '';
         this.loading = true;
         this.hasAccess = false;
         this.isLoaded = false;
-        this.page = 1;
-        this.categoryNames = [];
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -2208,11 +2209,11 @@ class SmartCrmConfigurationComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmConfigurationComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmConfigurationComponent, selector: "pw-configuration", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "component", type: SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source" }, { kind: "component", type: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets" }, { kind: "component", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions" }, { kind: "component", type: SmartCrmStagesComponent, selector: "pw-smart-crm-stages" }, { kind: "component", type: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmConfigurationComponent, selector: "pw-configuration", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "component", type: SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source" }, { kind: "component", type: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets" }, { kind: "component", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions" }, { kind: "component", type: SmartCrmStagesComponent, selector: "pw-smart-crm-stages" }, { kind: "component", type: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-configuration', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SubscriptionAdmin' && 'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
+            args: [{ selector: 'pw-configuration', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
 class SmartCrmOpportunityCategoriesDetailsComponent extends AppBaseComponent {
@@ -2357,9 +2358,9 @@ class SmartCrmStageDetailsComponent extends AppBaseComponent {
     constructor(injector, crmService) {
         super(injector);
         this.crmService = crmService;
+        this.categories = [];
         this.buttonBusy = false;
         this.isLoading = true;
-        this.categories = [];
         this.form = AppSmartCrm.getStageForm();
     }
     ngOnInit() {
@@ -2530,12 +2531,12 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
         this.commonService = commonService;
         this.crmService = crmService;
         this.cdr = cdr;
-        this.submitted = false;
-        this.buttonBusy = false;
-        this.isLoading = true;
         this.filteredAccounts = [];
         this.potentials = [];
         this.labels = [];
+        this.submitted = false;
+        this.buttonBusy = false;
+        this.isLoading = true;
         this.form = AppSmartCrm.getContactsForm();
     }
     ngOnInit() {
@@ -2566,8 +2567,8 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
                 this.getContactDetails(this.id);
             }
             else if (this.accountId) {
-                const accountyData = this.accounts.find(x => x.id === this.accountId);
-                this.form.get('crm_account_id').patchValue(accountyData);
+                const accountData = this.accounts.find(x => x.id === this.accountId);
+                this.form.get('crm_account_id').patchValue(accountData);
             }
         });
     }
@@ -2666,22 +2667,22 @@ class SmartCrmContactInfoComponent extends AppBaseComponent {
         this.modalService = modalService;
         this.authService = authService;
         this.document = document;
-        this.isDisabled = false;
         this.actions = [];
-        this.isFormEdit = true;
+        this.filteredAccounts = [];
         this.accounts = [];
-        this.submitted = false;
-        this.buttonBusy = false;
         this.contactComments = [];
-        this.hasAccess = false;
         this.contactVersioning = [];
-        this.isDataLoaded = false;
-        this.updating = false;
         this.potentials = ['low', 'medium', 'high'];
         this.labels = [];
-        this.filteredAccounts = [];
-        this.showFullComment = false;
+        this.submitted = false;
+        this.buttonBusy = false;
+        this.isDisabled = false;
+        this.isFormEdit = true;
         this.isLoaded = false;
+        this.isDataLoaded = false;
+        this.hasAccess = false;
+        this.updating = false;
+        this.showFullComment = false;
         this.submitAction = false;
         this.routers = ROUTERS;
         this.options = { concurrency: 1, maxUploads: 3 };
@@ -3102,22 +3103,22 @@ class SmartCrmContactComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
+        this.page = 1;
         this.data = {
             contacts: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.searchText = '';
-        this.loading = true;
-        this.hasAccess = false;
-        this.isLoaded = false;
         this.potential = [];
         this.labels = [];
-        this.page = 1;
-        this.routers = ROUTERS;
         this.selectedLabels = [];
         this.selectedAccount = [];
         this.accountDropDown = [];
+        this.searchText = '';
+        this.loading = true;
+        this.hasAccess = false;
+        this.isLoaded = false;
+        this.routers = ROUTERS;
     }
     ngOnInit() {
         this.route.params.subscribe(data => {
@@ -3358,20 +3359,20 @@ class SmartCrmContactComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
+            args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n            <select class=\"form-select\" (change)=\"filterByPotential($event)\">\n                <option value=\"\">Select Priority</option>\n                <option *ngFor=\"let option of potential\" [selected]=\"filterByPotentials === option\" [value]=\"option\">\n                    {{ option }}\n                </option>\n            </select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 class SmartCrmCustomerSuccessComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCustomerSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCustomerSuccessComponent, selector: "pw-smart-crm-customer-success", ngImport: i0, template: "<pw-coming-soon message=\"Customer Success\"></pw-coming-soon>\n", dependencies: [{ kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCustomerSuccessComponent, selector: "pw-smart-crm-customer-success", ngImport: i0, template: "<pw-coming-soon message=\"CX & Success\"></pw-coming-soon>\n", dependencies: [{ kind: "component", type: i11.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCustomerSuccessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-customer-success', template: "<pw-coming-soon message=\"Customer Success\"></pw-coming-soon>\n" }]
+            args: [{ selector: 'pw-smart-crm-customer-success', template: "<pw-coming-soon message=\"CX & Success\"></pw-coming-soon>\n" }]
         }] });
 
 class SmartCrmSocialMediaComponent {
@@ -3388,14 +3389,14 @@ class SmartCrmCommunicationsInsightComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
-        this.searchText = '';
         this.data = {
             crm_newsletters: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.isLoaded = false;
+        this.searchText = '';
         this.loading = true;
+        this.isLoaded = false;
         this.communicationsInsightLoaded = false;
         this.geographyLoaded = false;
         this.routers = ROUTERS;
@@ -3541,10 +3542,10 @@ class SmartCrmContactInsightComponent extends AppBaseComponent {
         this.cdr = cdr;
         this.adminService = adminService;
         this.loading = true;
-        this.routers = ROUTERS;
         this.contactInsightLoaded = false;
         this.geographyLoaded = false;
         this.userBaseLoaded = false;
+        this.routers = ROUTERS;
     }
     ngOnInit() {
         this.getUserSubscription().subscribe(response => {
@@ -3607,11 +3608,11 @@ class SmartCrmContactInsightComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactInsightComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2$3.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactInsightComponent, selector: "pw-smart-crm-contact-insight", usesInheritance: true, ngImport: i0, template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n    <!-- User Base Graph -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!userBaseLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n          <plotly-plot [data]=\"userBaseData?.data\"\n              [config]=\"userBaseData?.config\"\n              [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!geographyLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n          <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactInsightLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n                  class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n                  insight?.headline | textTruncate: 20 }} </span>\n              </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n  </div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactInsightComponent, selector: "pw-smart-crm-contact-insight", usesInheritance: true, ngImport: i0, template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n    <!-- User Base Graph -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!userBaseLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n          <plotly-plot [data]=\"userBaseData?.data\"\n              [config]=\"userBaseData?.config\"\n              [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!geographyLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n          <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactInsightLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n                  class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n                  insight?.headline | textTruncate: 20 }} </span>\n              </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n  </div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactInsightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-contact-insight', template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n    <!-- User Base Graph -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!userBaseLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n          <plotly-plot [data]=\"userBaseData?.data\"\n              [config]=\"userBaseData?.config\"\n              [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!geographyLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n          <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactInsightLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n                  class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n                  insight?.headline | textTruncate: 20 }} </span>\n              </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"contactInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n  </div>\n" }]
+            args: [{ selector: 'pw-smart-crm-contact-insight', template: "\n\n<app-date-picker\n[selectedDateRange]=\"selectedDateRange\"\n[dateRanges]=\"dateRanges\"\n(dateRangeChange)=\"onDateRangeSelect($event)\">\n</app-date-picker>\n\n<div class=\"row mt-5\">\n\n    <!-- User Base Graph -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contact Evolution Timeline</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!userBaseLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"userBaseLoaded && userBaseData?.data?.length\">\n          <plotly-plot [data]=\"userBaseData?.data\"\n              [config]=\"userBaseData?.config\"\n              [layout]=\"userBaseData?.layout\" [useResizeHandler]=\"true\"></plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"userBaseLoaded && !userBaseData?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!geographyLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"geographyLoaded && contactGeography?.data?.length\">\n          <plotly-plot [data]=\"contactGeography?.data\" [config]=\"contactGeography?.config\" [layout]=\"contactGeography?.layout\" [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"geographyLoaded && !contactGeography?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactInsightLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"contactInsightLoaded && contactInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"contactInsight\" [paginator]=\"contactInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.ContactMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\"\n                  class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span [ngbTooltip]=\"insight?.headline\" container=\"body\" tooltipClass=\"custom-tooltip\" placement=\"bottom\"> {{\n                  insight?.headline | textTruncate: 20 }} </span>\n              </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n\n  </div>\n" }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i2$3.AdminService }] });
 
 class SmartCrmOpportunitiesInsightComponent extends AppBaseComponent {
@@ -3620,29 +3621,29 @@ class SmartCrmOpportunitiesInsightComponent extends AppBaseComponent {
         this.crmService = crmService;
         this.cdr = cdr;
         this.productService = productService;
-        this.hasAccess = false;
-        this.searchText = '';
         this.data = {
             crm_opportunities: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.id = '';
-        this.isLoaded = false;
-        this.loading = true;
+        this.searchText = '';
         this.searchStages = [];
+        this.searchCategories = [];
         this.filterByStages = [];
         this.filterByCategories = [];
-        this.searchCategories = [];
         this.page = 1;
         this.stages = [];
         this.categories = [];
-        this.routers = ROUTERS;
+        this.id = '';
+        this.loading = true;
+        this.isLoaded = false;
+        this.hasAccess = false;
         this.opportunitiesInsightLoaded = false;
         this.opportunitiesGeographyLoaded = false;
         this.opportunitiesCategoryLoaded = false;
         this.opportunitiesStageLoaded = false;
         this.opportunitiesGraphLoaded = false;
+        this.routers = ROUTERS;
     }
     ngOnInit() {
         this.getUserSubscription().subscribe(subscription => {
@@ -3756,7 +3757,6 @@ class SmartCrmAccountInsightComponent extends AppBaseComponent {
     constructor(crmService, injector) {
         super(injector);
         this.crmService = crmService;
-        this.routers = ROUTERS;
         this.signUpLastNinetyDaysLoaded = false;
         this.accountLastActivitiesLoaded = false;
         this.churnedAccountLoaded = false;
@@ -3767,6 +3767,7 @@ class SmartCrmAccountInsightComponent extends AppBaseComponent {
         this.accountGeographyLoaded = false;
         this.accountInsightLoaded = false;
         this.magicMomentLoaded = false;
+        this.routers = ROUTERS;
     }
     ngOnInit() {
         this.getUserSubscription().subscribe(response => {
@@ -3967,28 +3968,28 @@ class SmartCrmInsightComponent {
             { id: 1, title: 'Accounts' },
             { id: 2, title: 'Contacts' },
             { id: 3, title: 'Opportunities' },
-            { id: 4, title: 'Email Marketing' },
+            { id: 4, title: 'E-Marketing' },
             { id: 5, title: 'Analysis' }
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmInsightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmInsightComponent, selector: "pw-smart-crm-insight", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Insight</h2>\n    <p>\n      Below, you\u2019ll find key insights for your CRM. The data updates every few hours.\n    </p>\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li *ngFor=\"let tab of tabs\" [ngbNavItem]=\"tab.id\">\n        <a ngbNavLink>{{ tab.title }}</a>\n        <ng-template ngbNavContent>\n          <ng-container *ngIf=\"tab.title === 'Accounts'\">\n            <pw-smart-crm-account-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Contacts'\">\n            <pw-smart-crm-contact-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Opportunities'\">\n            <pw-smart-crm-opportunities-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Email Marketing'\">\n            <pw-smart-crm-communications-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Analysis'\">\n             <pw-smart-crm-analysis/>\n          </ng-container>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmCommunicationsInsightComponent, selector: "pw-smart-crm-communications-insight" }, { kind: "component", type: SmartCrmAnalysisComponent, selector: "pw-smart-crm-analysis" }, { kind: "component", type: SmartCrmContactInsightComponent, selector: "pw-smart-crm-contact-insight" }, { kind: "component", type: SmartCrmOpportunitiesInsightComponent, selector: "pw-smart-crm-opportunities-insight" }, { kind: "component", type: SmartCrmAccountInsightComponent, selector: "pw-smart-crm-account-insight" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmInsightComponent, selector: "pw-smart-crm-insight", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Insight</h2>\n    <p>\n      Below, you\u2019ll find key insights for your CRM. The data updates every few hours.\n    </p>\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li *ngFor=\"let tab of tabs\" [ngbNavItem]=\"tab.id\">\n        <a ngbNavLink>{{ tab.title }}</a>\n        <ng-template ngbNavContent>\n          <ng-container *ngIf=\"tab.title === 'Accounts'\">\n            <pw-smart-crm-account-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Contacts'\">\n            <pw-smart-crm-contact-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Opportunities'\">\n            <pw-smart-crm-opportunities-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'E-Marketing'\">\n            <pw-smart-crm-communications-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Analysis'\">\n             <pw-smart-crm-analysis/>\n          </ng-container>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: SmartCrmCommunicationsInsightComponent, selector: "pw-smart-crm-communications-insight" }, { kind: "component", type: SmartCrmAnalysisComponent, selector: "pw-smart-crm-analysis" }, { kind: "component", type: SmartCrmContactInsightComponent, selector: "pw-smart-crm-contact-insight" }, { kind: "component", type: SmartCrmOpportunitiesInsightComponent, selector: "pw-smart-crm-opportunities-insight" }, { kind: "component", type: SmartCrmAccountInsightComponent, selector: "pw-smart-crm-account-insight" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmInsightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-insight', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Insight</h2>\n    <p>\n      Below, you\u2019ll find key insights for your CRM. The data updates every few hours.\n    </p>\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li *ngFor=\"let tab of tabs\" [ngbNavItem]=\"tab.id\">\n        <a ngbNavLink>{{ tab.title }}</a>\n        <ng-template ngbNavContent>\n          <ng-container *ngIf=\"tab.title === 'Accounts'\">\n            <pw-smart-crm-account-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Contacts'\">\n            <pw-smart-crm-contact-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Opportunities'\">\n            <pw-smart-crm-opportunities-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Email Marketing'\">\n            <pw-smart-crm-communications-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Analysis'\">\n             <pw-smart-crm-analysis/>\n          </ng-container>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pw-smart-crm-insight', template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>Insight</h2>\n    <p>\n      Below, you\u2019ll find key insights for your CRM. The data updates every few hours.\n    </p>\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li *ngFor=\"let tab of tabs\" [ngbNavItem]=\"tab.id\">\n        <a ngbNavLink>{{ tab.title }}</a>\n        <ng-template ngbNavContent>\n          <ng-container *ngIf=\"tab.title === 'Accounts'\">\n            <pw-smart-crm-account-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Contacts'\">\n            <pw-smart-crm-contact-insight />\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Opportunities'\">\n            <pw-smart-crm-opportunities-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'E-Marketing'\">\n            <pw-smart-crm-communications-insight/>\n          </ng-container>\n          <ng-container *ngIf=\"tab.title === 'Analysis'\">\n             <pw-smart-crm-analysis/>\n          </ng-container>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n" }]
         }] });
 
 class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
     constructor(injector, crmService) {
         super(injector);
         this.crmService = crmService;
-        this.submitted = false;
-        this.buttonBusy = false;
-        this.isLoading = true;
         this.filteredAccounts = [];
         this.potentials = [];
         this.labels = [];
+        this.submitted = false;
+        this.buttonBusy = false;
+        this.isLoading = true;
         this.form = AppSmartCrm.getLeadsForm();
     }
     ngOnInit() {
@@ -4157,13 +4158,13 @@ class SmartCrmLeadsComponent extends AppBaseComponent {
             object_count: 0,
             unfiltered_count: 0
         };
+        this.allSource = [];
+        this.crmSources = [];
         this.searchText = '';
-        this.isLoaded = false;
         this.loading = true;
+        this.isLoaded = false;
         this.page = 1;
-        this.allSource = [];
         this.routers = ROUTERS;
-        this.crmSources = [];
     }
     ngOnInit() {
         this.getUserSubscription().subscribe(response => {
@@ -4266,15 +4267,15 @@ class SmartCrmMarketingUsersListComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
-        this.searchText = '';
+        this.page = 1;
         this.data = {
             newsletter_contacts: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.isLoaded = false;
+        this.searchText = '';
         this.loading = true;
-        this.page = 1;
+        this.isLoaded = false;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -4327,8 +4328,6 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.commonService = commonService;
-        this.submitted = false;
-        this.buttonBusy = false;
         this.status = [];
         this.priority = [];
         this.source = [];
@@ -4342,8 +4341,10 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
             { label: 'high', value: 'high' }
         ];
         this.allCommunications = [];
-        this.isLoading = true;
         this.userNameSyntax = '{{ @user.share_name }}';
+        this.submitted = false;
+        this.buttonBusy = false;
+        this.isLoading = true;
         QuillHelper.init();
         this.editorConfig = QuillHelper.getEditorConfig();
         this.form = AppSmartCrm.getMarketingForm();
@@ -4573,15 +4574,15 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.cdr = cdr;
-        this.searchText = '';
+        this.page = 1;
         this.data = {
             crm_newsletters: [],
             object_count: 0,
             unfiltered_count: 0
         };
-        this.isLoaded = false;
+        this.searchText = '';
         this.loading = true;
-        this.page = 1;
+        this.isLoaded = false;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -4694,11 +4695,11 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>Email Marketing</h2>\n    <p>Plan, create, and optimize your email marketing strategy here.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email Campaign' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Delivered?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                (keydown.enter)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(item.id)\"\n                                (keydown.space)=\"onDelete(item.id)\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Preview and Recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-eye eye-icon\"\n                                (keydown.enter)=\"onNavigate(subscription, item)\"\n                                (click)=\"onNavigate(subscription, item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n              </span>\n              </td>\n              <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Campaigns Location</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>E-Marketing</h2>\n    <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n        campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email Campaign' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Delivered?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                (keydown.enter)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(item.id)\"\n                                (keydown.space)=\"onDelete(item.id)\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Preview and Recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-eye eye-icon\"\n                                (keydown.enter)=\"onNavigate(subscription, item)\"\n                                (click)=\"onNavigate(subscription, item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n              </span>\n              </td>\n              <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Campaigns Location</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>Email Marketing</h2>\n    <p>Plan, create, and optimize your email marketing strategy here.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email Campaign' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Delivered?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                (keydown.enter)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(item.id)\"\n                                (keydown.space)=\"onDelete(item.id)\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Preview and Recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-eye eye-icon\"\n                                (keydown.enter)=\"onNavigate(subscription, item)\"\n                                (click)=\"onNavigate(subscription, item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n              </span>\n              </td>\n              <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Campaigns Location</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
+            args: [{ selector: 'pw-smart-crm-communications', template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>E-Marketing</h2>\n    <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n        campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add New Email Campaign' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Delivered?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                (keydown.enter)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(item.id)\"\n                                (keydown.space)=\"onDelete(item.id)\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Preview and Recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-eye eye-icon\"\n                                (keydown.enter)=\"onNavigate(subscription, item)\"\n                                (click)=\"onNavigate(subscription, item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n              </span>\n              </td>\n              <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Campaigns Location</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"true\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
 
 class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
@@ -4767,14 +4768,14 @@ class SmartCrmBoardComponent extends AppBaseComponent {
     constructor(crmService, injector) {
         super(injector);
         this.crmService = crmService;
-        this.opportunitiesGroup = [];
-        this.isLoaded = false;
-        this.categories = [];
         this.availableOpportunities = [];
-        this.routers = ROUTERS;
+        this.pageSize = 5; // Show 5 cards initially
         this.masterStages = [];
+        this.opportunitiesGroup = [];
+        this.categories = [];
         this.selectedCategoryId = 0;
-        this.pageSize = 5; // Show 5 cards initially
+        this.isLoaded = false;
+        this.routers = ROUTERS;
     }
     ngOnInit() {
         this.getUserSubscription().subscribe(response => {
@@ -4990,27 +4991,27 @@ class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.productService = productService;
-        this.onEdit = false;
-        this.submitted = false;
-        this.buttonBusy = false;
-        this.isLoading = true;
-        this.searchText = '';
+        this.isUserSubscriptionSuperAdmin = this.permissionService.isUserMasterSubscriptionSuperAdmin();
         this.allContacts = [];
         this.filteredUsers = [];
-        this.winChance = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
         this.opportunities = [];
-        this.WonField = false;
-        this.LostField = false;
-        this.isContactChange = false;
-        this.TrialStartField = false;
         this.accounts = [];
-        this.masterStages = [];
-        this.isUserSubscriptionSuperAdmin = this.permissionService.isUserMasterSubscriptionSuperAdmin();
         this.stages = [];
+        this.masterStages = [];
         this.categories = [];
-        this.accountValueCount = 0;
         this.featureKeys = [];
         this.currencies = [];
+        this.winChance = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+        this.accountValueCount = 0;
+        this.searchText = '';
+        this.onEdit = false;
+        this.isContactChange = false;
+        this.TrialStartField = false;
+        this.WonField = false;
+        this.LostField = false;
+        this.submitted = false;
+        this.buttonBusy = false;
+        this.isLoading = true;
         this.form = AppSmartCrm.getOpportunitiesInfoForm();
     }
     ngOnInit() {
@@ -5338,15 +5339,17 @@ class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
         this.modalService = modalService;
         this.authService = authService;
         this.document = document;
+        this.filteredAccounts = [];
         this.isLoaded = false;
         this.isFormEdit = true;
-        this.submitted = false;
-        this.buttonBusy = false;
-        this.filteredAccounts = [];
         this.isDisabled = false;
         this.updating = false;
         this.showFullComment = false;
         this.submitAction = false;
+        this.buttonBusy = false;
+        this.submitted = false;
+        this.dangerColor = false;
+        this.dragOver = false;
         this.routers = ROUTERS;
         this.options = { concurrency: 1, maxUploads: 3 };
         this.uploadInput = new EventEmitter();
@@ -5786,23 +5789,23 @@ class SmartCrmOpportunitiesListComponent extends AppBaseComponent {
         this.crmService = crmService;
         this.cdr = cdr;
         this.productService = productService;
-        this.hasAccess = false;
-        this.searchText = '';
         this.data = {
             crm_opportunities: [],
             object_count: 0,
             unfiltered_count: 0
         };
         this.id = '';
-        this.isLoaded = false;
-        this.loading = true;
+        this.searchText = '';
         this.searchStages = [];
+        this.searchCategories = [];
         this.filterByStages = [];
         this.filterByCategories = [];
-        this.searchCategories = [];
         this.page = 1;
         this.stages = [];
         this.categories = [];
+        this.loading = true;
+        this.isLoaded = false;
+        this.hasAccess = false;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -5989,18 +5992,18 @@ class CrmActionsComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.document = document;
+        this.totalPendingActions = 0;
+        this.currentPage = 1;
         this.contactActions = [];
-        this.isLoaded = false;
+        this.contactActionsAll = [];
         this.accountActionSuggested = [];
-        this.updating = false;
+        this.selector = '.pending-actions-wrapper';
+        this.suggestedActionsSelector = '.suggested-actions-wrapper';
+        this.isLoaded = false;
         this.isLoadedSuggested = false;
         this.showFullComment = false;
-        this.contactActionsAll = [];
         this.showFilter = false;
-        this.selector = '.pending-actions-wrapper';
-        this.suggestedActionsSelector = '.suggested-actions-wrapper';
-        this.totalPendingActions = 0;
-        this.currentPage = 1;
+        this.updating = false;
         this.routers = ROUTERS;
     }
     ngOnInit() {
@@ -6213,11 +6216,11 @@ class CrmActionsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmActionsComponent, selector: "pw-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-4\">\n    <div class=\"col-12 mb-0\">\n      <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n    </div>\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <select class=\"form-select\"\n        (change)=\"filterByUser($event)\">\n        <option value=\"0\">Filter by user</option>\n        <option *ngFor=\"let member of allSubscriptionMembers\"\n          [value]=\"member.id\">\n          {{ member.first_name }} {{ member.last_name }}\n        </option>\n      </select>\n    </div>\n    <div>\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n    data-cy=\"add-opportunities\"\n    [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div #selector class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"dd-mmm-yyyy\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li>\n              <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n                <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n                  <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\"  [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n                    <div class=\"avatar avatar-image\">\n                      <img\n                        class=\"img-fluid\"\n                        [src]=\"owner_image.url\"\n                        alt=\"Male Icon\"\n                        (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n                      />\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n              <ng-template #noProfileImg>\n                <div class=\"text-center my-2\">\n                  <div class=\"avatar avatar-image\">\n                    <img\n                      src=\"/assets/img/icons/male.png\"\n                      alt=\"\"\n                      class=\"img-fluid\"\n                    />\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                aria-label=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                aria-label=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                aria-label=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n\n    <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n        infiniteScroll\n        [infiniteScrollContainer]=\"suggestedActionsSelector\"\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\">\n\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"\n                  let suggestedAction of accountActionSuggested\n                      | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                  let i = index\n              \">\n        <div class=\"p-2\">\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a [routerLink]=\"[\n                              '/' + subscription?.slug + routers.accountInfo,\n                              suggestedAction?.crm_account?.id\n                          ]\">{{ suggestedAction?.crm_account?.name }}</a>\n          </p>\n          <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n          <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$3.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmActionsComponent, selector: "pw-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-4\">\n    <div class=\"col-12 mb-0\">\n      <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n    </div>\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <p-dropdown\n        [options]=\"allSubscriptionMembers\"\n        optionLabel=\"first_name\"\n        optionValue=\"id\"\n        [ngModel]=\"0\"\n        (onChange)=\"filterByUser($event.value)\">\n\n  <ng-template pTemplate=\"selectedItem\" let-selected>\n    <span *ngIf=\"selected\">\n      {{ selected.first_name }} {{ selected.last_name }}\n    </span>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-option>\n    {{ option.first_name }} {{ option.last_name }}\n  </ng-template>\n</p-dropdown>\n    </div>\n    <div>\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n    data-cy=\"add-opportunities\"\n    [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div #selector class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"dd-mmm-yyyy\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li>\n              <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n                <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n                  <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\"  [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n                    <div class=\"avatar avatar-image\">\n                      <img\n                        class=\"img-fluid\"\n                        [src]=\"owner_image.url\"\n                        alt=\"Male Icon\"\n                        (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n                      />\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n              <ng-template #noProfileImg>\n                <div class=\"text-center my-2\">\n                  <div class=\"avatar avatar-image\">\n                    <img\n                      src=\"/assets/img/icons/male.png\"\n                      alt=\"\"\n                      class=\"img-fluid\"\n                    />\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                aria-label=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                aria-label=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                aria-label=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n\n    <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n        infiniteScroll\n        [infiniteScrollContainer]=\"suggestedActionsSelector\"\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\">\n\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"\n                  let suggestedAction of accountActionSuggested\n                      | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                  let i = index\n              \">\n        <div class=\"p-2\">\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a [routerLink]=\"[\n                              '/' + subscription?.slug + routers.accountInfo,\n                              suggestedAction?.crm_account?.id\n                          ]\">{{ suggestedAction?.crm_account?.name }}</a>\n          </p>\n          <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n          <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$3.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i17.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i12$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$3.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-crm-actions', template: "<div class=\"row\">\n  <div class=\"col-12 mb-4\">\n    <div class=\"col-12 mb-0\">\n      <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n    </div>\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <select class=\"form-select\"\n        (change)=\"filterByUser($event)\">\n        <option value=\"0\">Filter by user</option>\n        <option *ngFor=\"let member of allSubscriptionMembers\"\n          [value]=\"member.id\">\n          {{ member.first_name }} {{ member.last_name }}\n        </option>\n      </select>\n    </div>\n    <div>\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n    data-cy=\"add-opportunities\"\n    [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div #selector class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"dd-mmm-yyyy\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li>\n              <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n                <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n                  <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\"  [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n                    <div class=\"avatar avatar-image\">\n                      <img\n                        class=\"img-fluid\"\n                        [src]=\"owner_image.url\"\n                        alt=\"Male Icon\"\n                        (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n                      />\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n              <ng-template #noProfileImg>\n                <div class=\"text-center my-2\">\n                  <div class=\"avatar avatar-image\">\n                    <img\n                      src=\"/assets/img/icons/male.png\"\n                      alt=\"\"\n                      class=\"img-fluid\"\n                    />\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                aria-label=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                aria-label=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                aria-label=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n\n    <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n        infiniteScroll\n        [infiniteScrollContainer]=\"suggestedActionsSelector\"\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\">\n\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"\n                  let suggestedAction of accountActionSuggested\n                      | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                  let i = index\n              \">\n        <div class=\"p-2\">\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a [routerLink]=\"[\n                              '/' + subscription?.slug + routers.accountInfo,\n                              suggestedAction?.crm_account?.id\n                          ]\">{{ suggestedAction?.crm_account?.name }}</a>\n          </p>\n          <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n          <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"] }]
+            args: [{ selector: 'pw-crm-actions', template: "<div class=\"row\">\n  <div class=\"col-12 mb-4\">\n    <div class=\"col-12 mb-0\">\n      <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n    </div>\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <p-dropdown\n        [options]=\"allSubscriptionMembers\"\n        optionLabel=\"first_name\"\n        optionValue=\"id\"\n        [ngModel]=\"0\"\n        (onChange)=\"filterByUser($event.value)\">\n\n  <ng-template pTemplate=\"selectedItem\" let-selected>\n    <span *ngIf=\"selected\">\n      {{ selected.first_name }} {{ selected.last_name }}\n    </span>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-option>\n    {{ option.first_name }} {{ option.last_name }}\n  </ng-template>\n</p-dropdown>\n    </div>\n    <div>\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n    data-cy=\"add-opportunities\"\n    [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div #selector class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"dd-mmm-yyyy\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li>\n              <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n                <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n                  <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\"  [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n                    <div class=\"avatar avatar-image\">\n                      <img\n                        class=\"img-fluid\"\n                        [src]=\"owner_image.url\"\n                        alt=\"Male Icon\"\n                        (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n                      />\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n              <ng-template #noProfileImg>\n                <div class=\"text-center my-2\">\n                  <div class=\"avatar avatar-image\">\n                    <img\n                      src=\"/assets/img/icons/male.png\"\n                      alt=\"\"\n                      class=\"img-fluid\"\n                    />\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                aria-label=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                aria-label=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                aria-label=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n\n    <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n        infiniteScroll\n        [infiniteScrollContainer]=\"suggestedActionsSelector\"\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\">\n\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"\n                  let suggestedAction of accountActionSuggested\n                      | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                  let i = index\n              \">\n        <div class=\"p-2\">\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a [routerLink]=\"[\n                              '/' + subscription?.slug + routers.accountInfo,\n                              suggestedAction?.crm_account?.id\n                          ]\">{{ suggestedAction?.crm_account?.name }}</a>\n          </p>\n          <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n          <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -6264,14 +6267,14 @@ class SmartCrmTabsComponent extends AppBaseComponent {
             },
             {
                 id: 'marketing_tab',
-                label: 'Email Marketing',
+                label: 'E-Marketing',
                 icon: 'fas fa-bullhorn',
                 routerLink: ['/crm/marketing/emails'],
                 visible: this.permissionService.evaluatePermissions(`${CRM_PERMISSIONS.Marketing}`)
             },
             {
                 id: 'customer-success',
-                label: 'Customer Success',
+                label: 'CX & Success',
                 icon: 'fa fa-check-circle',
                 routerLink: ['/crm/customer-success'],
                 visible: this.permissionService.evaluatePermissions(`${CRM_PERMISSIONS.CustomerSuccess}`)
@@ -6937,9 +6940,9 @@ class CrmNewsletterUnsubscribeComponent {
         this.token = '';
         this.message = '';
         this.errorMsg = '';
-        this.error = false;
         this.success = "You've successfully been removed from our newsletter.";
         this.failure = 'Something went wrong and we were not able to unsubscribe you. If the problem persists, please contact us.';
+        this.error = false;
         this.route.queryParams.subscribe(params => {
             this.token = params['crm_newsletter_token'] || '';
             if (this.token) {