@posiwise/smart-crm 0.0.48 → 0.0.50

package/esm2022/lib/private/components/smart-crm-insight/smart-crm-account-insight/smart-crm-account-insight.component.mjs

@@ -9,10 +9,10 @@ import * as i3 from "@ng-bootstrap/ng-bootstrap";
 import * as i4 from "@posiwise/directives";
 import * as i5 from "angular-plotly.js";
 import * as i6 from "@angular/router";
-import * as i7 from "primeng/api";
-import * as i8 from "primeng/tooltip";
-import * as i9 from "primeng/progressspinner";
-import * as i10 from "primeng/table";
+import * as i7 from "primeng/table";
+import * as i8 from "primeng/api";
+import * as i9 from "primeng/tooltip";
+import * as i10 from "primeng/progressspinner";
 import * as i11 from "@posiwise/shared-components";
 import * as i12 from "@posiwise/pipes";
 import * as i13 from "@jsverse/transloco";
@@ -217,7 +217,7 @@ export class SmartCrmAccountInsightComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmAccountInsightComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmAccountInsightComponent, selector: "pw-smart-crm-account-insight", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <ng-container class=\"mt-5\">\n\n    <!-- Signed up last 90 days -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Signed up Last 90 Days</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!signUpLastNinetyDaysLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"signedUpLastThirtyDays?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"signedUpLastThirtyDays\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"signedUpLastThirtyDays.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-signUp>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, signUp.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"signUp.crm_account_name\">{{ signUp?.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n              </td>\n              <td data-head=\"SignUpAt\">\n                {{ signUp.signed_up_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"signedUpLastThirtyDays.length!== 0\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n      </div>\n      <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Churned Last 90 days -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Churned Last 90 Days</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!churnedAccountLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"churnedAccounts?.length\">\n        <p-table class=\"table\" #dt [value]=\"churnedAccounts\" [paginator]=\"true\" [rows]=\"20\"\n          [totalRecords]=\"churnedAccounts.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.UnsubscribedAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\"\n                  class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\"> {{ account.signed_up_at | dateFormat }} </td>\n              <td data-head=\"UnsubscribedAt\" [ngClass]=\"{'text-danger': account.unsubscribed_at | isPastDate}\">\n                {{ account.unsubscribed_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"churnedAccounts?.length !== 0\">{{ 'Label.Total' | transloco }}: {{\n          churnedAccounts.length }}</span>\n      </div>\n      <div *ngIf=\"churnedAccounts?.length === 0 && churnedAccountLoaded\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Active Opportunities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Active Opportunities</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"activeOpportunities?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"activeOpportunities\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n\n          [totalRecords]=\"activeOpportunities.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-opportunities>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, opportunities.crm_account?.id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"opportunities.crm_account?.name\">{{ opportunities.crm_account?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Title\">\n                <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n                                    hasAccess ||\n                                    opportunities?.owner_id === userId ||\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.opportunityInfo,\n                                    opportunities.id\n                                ]\">\n                <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n              </a>\n              </td>\n              <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n              <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n              <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n                  *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"activeOpportunities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n      </div>\n      <div *ngIf=\"activeOpportunities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Latest Activities</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountLastActivitiesLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"accountLastActivities?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"accountLastActivities\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"accountLastActivities.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-activities>\n            <tr>\n              <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n                </a>\n              </td>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Action\">\n                <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n                                  itemsArray: actionNames,\n                                  item: activities.crm_action?.name\n                              }\"\n                  color=\"blue-grey\"\n                  class=\"badge\">{{ activities.crm_action?.name }}</span>\n              </td>\n              <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastActivities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastActivities?.length === 0 && accountLastActivitiesLoaded\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Accounts at risk -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"accountAtRisk?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"accountAtRisk\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"accountAtRisk.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n              </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\"  *ngIf=\"accountAtRisk.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n      </div>\n      <div *ngIf=\"accountAtRisk?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Contract renewal -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts at 1-Year Mark</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactRenewalLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"ContractRenewal?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"ContractRenewal\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"ContractRenewal.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n              </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n              <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n                {{ account.cc_expiring_at | dateFormat }}\n                <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n                  <i class=\"fas fa-info-circle ml-1\"></i>\n                </span>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"ContractRenewal.length !== 0\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n      </div>\n      <div *ngIf=\"ContractRenewal?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n <!-- Credit Cards Expiring -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts with Expiring Credit Cards</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"creditCardExpiring?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"creditCardExpiring\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"creditCardExpiring.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: account.currency }}\n              </td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n              <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n                {{ account.cc_expiring_at | dateFormat }}\n                <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n                  <i class=\"fas fa-info-circle ml-1\"></i>\n                </span>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"creditCardExpiring.length !== 0\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n      </div>\n      <div *ngIf=\"creditCardExpiring?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Magic Moment -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts with Magic Moment</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!magicMomentLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"magicMoment?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"magicMoment\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"magicMoment.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: account.currency }}\n              </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"magicMoment.length !==0 \">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n      </div>\n      <div *ngIf=\"magicMoment?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Accounts Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts Location</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountGeographyLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"accountGeographyLoaded && accountGeography?.data?.length\">\n          <plotly-plot [data]=\"accountGeography?.data\"\n            [layout]=\"accountGeography?.layout\" [useResizeHandler]=\"accountGeographyLoaded ? true : false\" [config]=\"accountGeography?.config\"\n            >\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"accountGeographyLoaded && !accountGeography?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i4.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i5.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: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i9.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: i2.PercentPipe, name: "percent" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i12.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmAccountInsightComponent, selector: "pw-smart-crm-account-insight", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <ng-container class=\"mt-5\">\n\n    <!-- Signed up last 90 days -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Signed up Last 90 Days</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!signUpLastNinetyDaysLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"signedUpLastThirtyDays?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"signedUpLastThirtyDays\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"signedUpLastThirtyDays.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-signUp>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, signUp.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"signUp.crm_account_name\">{{ signUp?.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n              </td>\n              <td data-head=\"SignUpAt\">\n                {{ signUp.signed_up_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"signedUpLastThirtyDays.length!== 0\">{{ 'Label.Total' | transloco }}: {{ signedUpLastThirtyDays.length }}</span>\n      </div>\n      <div *ngIf=\"signedUpLastThirtyDays?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Churned Last 90 days -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Churned Last 90 Days</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!churnedAccountLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"churnedAccounts?.length\">\n        <p-table class=\"table\" #dt [value]=\"churnedAccounts\" [paginator]=\"true\" [rows]=\"20\"\n          [totalRecords]=\"churnedAccounts.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.UnsubscribedAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\"\n                  class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\"> {{ account.signed_up_at | dateFormat }} </td>\n              <td data-head=\"UnsubscribedAt\" [ngClass]=\"{'text-danger': account.unsubscribed_at | isPastDate}\">\n                {{ account.unsubscribed_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"churnedAccounts?.length !== 0\">{{ 'Label.Total' | transloco }}: {{\n          churnedAccounts.length }}</span>\n      </div>\n      <div *ngIf=\"churnedAccounts?.length === 0 && churnedAccountLoaded\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Active Opportunities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Active Opportunities</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!activeOpportunitiesLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"activeOpportunities?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"activeOpportunities\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n\n          [totalRecords]=\"activeOpportunities.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.OneTimeAmount' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-opportunities>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, opportunities.crm_account?.id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"opportunities.crm_account?.name\">{{ opportunities.crm_account?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Title\">\n                <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n                                    hasAccess ||\n                                    opportunities?.owner_id === userId ||\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.opportunityInfo,\n                                    opportunities.id\n                                ]\">\n                <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n              </a>\n              </td>\n              <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n              <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n              <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} <span class=\"text-danger\"\n                  *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"activeOpportunities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ activeOpportunities.length }}</span>\n      </div>\n      <div *ngIf=\"activeOpportunities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Latest Activities</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountLastActivitiesLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"accountLastActivities?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"accountLastActivities\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"accountLastActivities.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-activities>\n            <tr>\n              <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n                </a>\n              </td>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Action\">\n                <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n                                  itemsArray: actionNames,\n                                  item: activities.crm_action?.name\n                              }\"\n                  color=\"blue-grey\"\n                  class=\"badge\">{{ activities.crm_action?.name }}</span>\n              </td>\n              <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastActivities.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastActivities?.length === 0 && accountLastActivitiesLoaded\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Accounts at risk -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts at Risk</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountAtRiskDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"accountAtRisk?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"accountAtRisk\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"accountAtRisk.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n              </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\"  *ngIf=\"accountAtRisk.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountAtRisk.length }}</span>\n      </div>\n      <div *ngIf=\"accountAtRisk?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Contract renewal -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts at 1-Year Mark</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!contactRenewalLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"ContractRenewal?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"ContractRenewal\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"ContractRenewal.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n              </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n              <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n                {{ account.cc_expiring_at | dateFormat }}\n                <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n                  <i class=\"fas fa-info-circle ml-1\"></i>\n                </span>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"ContractRenewal.length !== 0\">{{ 'Label.Total' | transloco }}: {{ ContractRenewal.length }}</span>\n      </div>\n      <div *ngIf=\"ContractRenewal?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n <!-- Credit Cards Expiring -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts with Expiring Credit Cards</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!creditCardExpiringDetailsLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"creditCardExpiring?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"creditCardExpiring\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"creditCardExpiring.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.CCExpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: account.currency }}\n              </td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n              <td data-head=\"ExpAt\" [ngClass]=\"{'text-danger': account.cc_expiring_at | isPastDate}\">\n                {{ account.cc_expiring_at | dateFormat }}\n                <span *ngIf=\"account.cc_expiring_at | isPastDate\" class=\"tooltip-wrap\" [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Insight.Tooltip.ExpAtMessage' | transloco\" tooltipPosition=\"top\">\n                  <i class=\"fas fa-info-circle ml-1\"></i>\n                </span>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"creditCardExpiring.length !== 0\">{{ 'Label.Total' | transloco }}: {{ creditCardExpiring.length }}</span>\n      </div>\n      <div *ngIf=\"creditCardExpiring?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Magic Moment -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts with Magic Moment</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!magicMomentLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"magicMoment?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"magicMoment\"\n          [paginator]=\"true\"\n          [rows]=\"20\"\n          [totalRecords]=\"magicMoment.length\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Quarter' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.AccountMessage.Month' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-account>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"account.crm_account_name\">{{ account?.crm_account_name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"MRR\" class=\"expected-mrr\">\n                {{ account.expected_mrr / 100 | currency: account.currency }}\n              </td>\n              <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n              <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_month > 5}\">{{ account.sessions_last_month }}</td>\n              <td data-head=\"SignUpAt\">\n                {{ account.signed_up_at | dateFormat }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"magicMoment.length !==0 \">{{ 'Label.Total' | transloco }}: {{ magicMoment.length }}</span>\n      </div>\n      <div *ngIf=\"magicMoment?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n      </div>\n    </div>\n\n    <!-- Accounts Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts Location</h5>\n      <div class=\"w-100 text-center mt-3\">\n        <ng-template [ngIf]=\"!accountGeographyLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div>\n        <ng-template [ngIf]=\"accountGeographyLoaded && accountGeography?.data?.length\">\n          <plotly-plot [data]=\"accountGeography?.data\"\n            [layout]=\"accountGeography?.layout\" [useResizeHandler]=\"accountGeographyLoaded ? true : false\" [config]=\"accountGeography?.config\"\n            >\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"accountGeographyLoaded && !accountGeography?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i4.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i5.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: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.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: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i10.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: "pipe", type: i2.PercentPipe, name: "percent" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i12.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmAccountInsightComponent, decorators: [{
             type: Component,

package/esm2022/lib/private/components/smart-crm-insight/smart-crm-contact-insight/smart-crm-contact-insight.component.mjs

@@ -13,9 +13,9 @@ import * as i4 from "@ng-bootstrap/ng-bootstrap";
 import * as i5 from "angular-plotly.js";
 import * as i6 from "@angular/router";
 import * as i7 from "@posiwise/shared-components";
-import * as i8 from "primeng/api";
-import * as i9 from "primeng/progressspinner";
-import * as i10 from "primeng/table";
+import * as i8 from "primeng/table";
+import * as i9 from "primeng/api";
+import * as i10 from "primeng/progressspinner";
 import * as i11 from "@posiwise/pipes";
 import * as i12 from "@jsverse/transloco";
 export class SmartCrmContactInsightComponent extends AppBaseComponent {
@@ -91,7 +91,7 @@ export 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.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]=\"userBaseData ? true : false\"></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]=\"geographyLoaded ? true : false\">\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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i5.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: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.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: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i11.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.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]=\"userBaseData ? true : false\"></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]=\"geographyLoaded ? true : false\">\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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i5.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: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.DateRangePickerComponent, selector: "app-date-picker", inputs: ["selectedDateRange", "dateRanges"], outputs: ["dateRangeChange"] }, { kind: "component", type: i8.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: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i11.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactInsightComponent, decorators: [{
             type: Component,

package/esm2022/lib/private/components/smart-crm-insight/smart-crm-marketing-insight/smart-crm-marketing-insight.component.mjs

@@ -8,9 +8,9 @@ import * as i2 from "@angular/common";
 import * as i3 from "@ng-bootstrap/ng-bootstrap";
 import * as i4 from "angular-plotly.js";
 import * as i5 from "@angular/router";
-import * as i6 from "primeng/api";
-import * as i7 from "primeng/progressspinner";
-import * as i8 from "primeng/table";
+import * as i6 from "primeng/table";
+import * as i7 from "primeng/api";
+import * as i8 from "primeng/progressspinner";
 import * as i9 from "@posiwise/shared-components";
 import * as i10 from "@posiwise/pipes";
 import * as i11 from "@jsverse/transloco";
@@ -69,7 +69,7 @@ export class SmartCrmCommunicationsInsightComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsInsightComponent, 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: SmartCrmCommunicationsInsightComponent, selector: "pw-smart-crm-communications-insight", usesInheritance: true, ngImport: i0, template: "\n  <div class=\"row mt-5\">\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]=\"!communicationsInsightLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsightLoaded && 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=\"communicationsInsightLoaded && !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\">Engagement</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 && communicationEngagement?.data?.length\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"communicationEngagement ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"geographyLoaded && !communicationEngagement?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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.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: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i8.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: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i10.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsInsightComponent, selector: "pw-smart-crm-communications-insight", usesInheritance: true, ngImport: i0, template: "\n  <div class=\"row mt-5\">\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]=\"!communicationsInsightLoaded\">\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </ng-template>\n      </div>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsightLoaded && 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=\"communicationsInsightLoaded && !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\">Engagement</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 && communicationEngagement?.data?.length\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"communicationEngagement ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"geographyLoaded && !communicationEngagement?.data?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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.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: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.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: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i10.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsInsightComponent, decorators: [{
             type: Component,

package/esm2022/lib/private/components/smart-crm-leads/smart-crm-leads-details/smart-crm-leads-details.component.mjs

@@ -14,11 +14,11 @@ import * as i4 from "@angular/forms";
 import * as i5 from "ngx-ui-switch";
 import * as i6 from "@posiwise/directives";
 import * as i7 from "@angular-magic/ngx-gp-autocomplete";
-import * as i8 from "primeng/multiselect";
-import * as i9 from "primeng/progressspinner";
-import * as i10 from "primeng/autocomplete";
-import * as i11 from "@posiwise/shared-components";
-import * as i12 from "primeng/dropdown";
+import * as i8 from "primeng/dropdown";
+import * as i9 from "primeng/multiselect";
+import * as i10 from "primeng/progressspinner";
+import * as i11 from "primeng/autocomplete";
+import * as i12 from "@posiwise/shared-components";
 import * as i13 from "@ng-bootstrap/ng-bootstrap";
 import * as i14 from "@jsverse/transloco";
 export class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
@@ -217,7 +217,7 @@ export class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmLeadsDetailsComponent, selector: "pw-smart-crm-leads-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.CrmLeads.Title' | transloco }}: {{ isLoading ? '' : (data?.first_name || data?.last_name ? data?.first_name ||\n      data?.last_name : ('Label.AddNew' | transloco)) }}</span>\n  </h3>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n<div class=\"p-2 mt-3\"   *ngIf=\"!isLoading\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\" name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\" name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n          [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n          name=\"location\">\n          <input ngx-gp-autocomplete\n            class=\"form-control\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Country\">{{ 'Crm.AccountMessage.Country' | transloco }}</label>\n        <p-autoComplete formControlName=\"country\"\n          [suggestions]=\"filteredCountries\"\n          (completeMethod)=\"onSearchCountry($event)\"\n          dataKey=\"code\"\n          field=\"name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Country\"\n          [dropdown]=\"true\"\n          [inputStyle]=\"\n                        submitted && f['country'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\" name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\" name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <label for=\"email\">{{ 'Crm.ContactMessage.Email' | transloco }} <span class=\"text-danger required-icon\">*</span>\n            <span *ngIf=\"data && data.email_verified\" class=\"text-success fw-bold\">Verified</span>\n          </label>\n          <input type=\"text\" class=\"form-control\" formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n          <pw-field-error-display [displayError]=\"(submitted || f['email'].touched) && f['email'].errors\" [errorMsg]=\"\n                            f['email']?.errors?.required\n                                ? 'Please enter email'\n                                : 'Please Enter valid email'\n                        \">\n          </pw-field-error-display>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"email\">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco\n              }} </span>\n          </label>\n          <pw-input-container class=\"nowrap\" name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\" name=\"linkedin_url\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Account' | transloco }}</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n          autocomplete=\"off\" field=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \" placeholder=\"Search accounts\" [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Source\">{{ 'Crm.CrmLeads.Source' | transloco }} <span class=\"text-danger required-icon\">*</span><span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Source' | transloco }}</span>\n        </label>\n        <pw-input-container name=\"crm_source_id\" errorMsg=\"source is required\" *ngIf=\"source$ | async as source\">\n          <p-dropdown\n            [options]=\"source['crm_sources']\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n            [placeholder]=\"'Select Source'\"\n            optionLabel=\"label\"\n             optionValue=\"value\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\" placeholder=\"dd-mmm-yyyy\" formControlName=\"dob\" ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\" (click)=\"d.toggle()\" type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Potential\">{{ 'Crm.ContactMessage.Potential' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco\n            }}</span>\n        </label>\n        <p-dropdown\n        [options]=\"potentials\"\n        formControlName=\"potential\"\n        [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\"\n        placeholder=\"Select Potential\">\n      </p-dropdown>\n\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Label\">{{ 'Crm.ContactMessage.Labels' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}\n          </span>\n        </label>\n        <p-multiSelect [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"></p-multiSelect>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" [buttonBusy]=\"buttonBusy\" class=\"btn btn-primary\" [disabled]=\"form.invalid\"> {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i6.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i8.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: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i12.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: "directive", type: i13.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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmLeadsDetailsComponent, selector: "pw-smart-crm-leads-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.CrmLeads.Title' | transloco }}: {{ isLoading ? '' : (data?.first_name || data?.last_name ? data?.first_name ||\n      data?.last_name : ('Label.AddNew' | transloco)) }}</span>\n  </h3>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n<div class=\"p-2 mt-3\"   *ngIf=\"!isLoading\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\" name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\" name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.AccountMessage.Location' | transloco\"\n          [errorMsg]=\"'Crm.AccountMessage.LocationErrorMessage' | transloco\"\n          name=\"location\">\n          <input ngx-gp-autocomplete\n            class=\"form-control\"\n            #places=\"ngx-places\"\n            formControlName=\"location\"\n            (onAddressChange)=\"handleAddressChange($event)\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Country\">{{ 'Crm.AccountMessage.Country' | transloco }}</label>\n        <p-autoComplete formControlName=\"country\"\n          [suggestions]=\"filteredCountries\"\n          (completeMethod)=\"onSearchCountry($event)\"\n          dataKey=\"code\"\n          field=\"name\"\n          [multiple]=\"false\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Country\"\n          [dropdown]=\"true\"\n          [inputStyle]=\"\n                        submitted && f['country'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\" name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\" name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <label for=\"email\">{{ 'Crm.ContactMessage.Email' | transloco }} <span class=\"text-danger required-icon\">*</span>\n            <span *ngIf=\"data && data.email_verified\" class=\"text-success fw-bold\">Verified</span>\n          </label>\n          <input type=\"text\" class=\"form-control\" formControlName=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n          <pw-field-error-display [displayError]=\"(submitted || f['email'].touched) && f['email'].errors\" [errorMsg]=\"\n                            f['email']?.errors?.required\n                                ? 'Please enter email'\n                                : 'Please Enter valid email'\n                        \">\n          </pw-field-error-display>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"email\">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco\n              }} </span>\n          </label>\n          <pw-input-container class=\"nowrap\" name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\" name=\"linkedin_url\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Account' | transloco }}</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n          autocomplete=\"off\" field=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \" placeholder=\"Search accounts\" [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Source\">{{ 'Crm.CrmLeads.Source' | transloco }} <span class=\"text-danger required-icon\">*</span><span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Source' | transloco }}</span>\n        </label>\n        <pw-input-container name=\"crm_source_id\" errorMsg=\"source is required\" *ngIf=\"source$ | async as source\">\n          <p-dropdown\n            [options]=\"source['crm_sources']\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n            [placeholder]=\"'Select Source'\"\n            optionLabel=\"label\"\n             optionValue=\"value\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\" placeholder=\"dd-mmm-yyyy\" formControlName=\"dob\" ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\" (click)=\"d.toggle()\" type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Potential\">{{ 'Crm.ContactMessage.Potential' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco\n            }}</span>\n        </label>\n        <p-dropdown\n        [options]=\"potentials\"\n        formControlName=\"potential\"\n        [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\"\n        placeholder=\"Select Potential\">\n      </p-dropdown>\n\n      </div>\n      <div class=\"col-12 col-sm-4\">\n        <label class=\"info-circle mb-2\" for=\"Label\">{{ 'Crm.ContactMessage.Labels' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}\n          </span>\n        </label>\n        <p-multiSelect [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"></p-multiSelect>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" [buttonBusy]=\"buttonBusy\" class=\"btn btn-primary\" [disabled]=\"form.invalid\"> {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i6.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i8.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: "component", type: i9.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: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i13.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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsDetailsComponent, decorators: [{
             type: Component,