@posiwise/smart-crm 0.0.44 → 0.0.45

package/fesm2022/posiwise-smart-crm.mjs

@@ -41,7 +41,7 @@ import * as i4$1 from 'ngx-ui-switch';
 import { UiSwitchModule } from 'ngx-ui-switch';
 import * as i17 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { interval, Subject, finalize } from 'rxjs';
+import { interval, map, Subject, finalize } from 'rxjs';
 import * as i4$2 from 'angular-plotly.js';
 import { PlotlyViaCDNModule } from 'angular-plotly.js';
 import * as i9$1 from 'primeng/multiselect';
@@ -683,7 +683,7 @@ class SmartCrmCompanyAccountInvoiceComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyAccountInvoiceComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: { accountId: "accountId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div class=\"row primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"col-12 px-0\">\n    <p-table #tt\n      [value]=\"invoices\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter justify-content-end\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              type=\"text\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search Invoices...\"\n              data-cy=\"incident-search\"\n              class=\"wd-90\">\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"col\" pSortableColumn=\"date\">Invoice Date <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"frequency\">Frequency <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"quantity\">Seats <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"subtotal\">Subtotal <p-sortIcon field=\"subtotal\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"total\">Total (incl. tax) <p-sortIcon field=\"total\"></p-sortIcon></th>\n          <th scope=\"col\">Action</th>\n        </tr>\n      </ng-template>\n\n      <ng-template pTemplate=\"body\" let-invoice>\n        <tr>\n          <td>{{ invoice.date | date:'dd-MMM-YYYY' }}</td>\n          <td>\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: invoiceFrequency,\n                              item: invoice?.frequency\n                          }\"\n              color=\"blue-grey\">{{ invoice?.frequency }}</span>\n          </td>\n          <td>{{ invoice?.quantity }}</td>\n          <td>{{ (invoice.subtotal_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td class=\"td-total\">{{ (invoice.total_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td>\n            <a *ngIf=\"invoice?.file?.url; else noFileUrl\" class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice.file.url\" target=\"_blank\" title=\"Download\">\n              <i class=\"fa fa-download\">&nbsp;Download</i>\n            </a>\n            <ng-template #noFileUrl>\n              <a class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice?.stripe_invoice_pdf\" target=\"_blank\" title=\"Download\">\n                <i class=\"fa fa-download\">&nbsp;Download</i>\n              </a>\n            </ng-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n\n    <span *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">Total: {{ totalRecords }}</span>\n\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" message=\"You don't have any invoice yet.\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: { accountId: "accountId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div class=\"row primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"col-12 px-0\">\n    <p-table #tt\n      [value]=\"invoices\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter justify-content-end\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              type=\"text\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search Invoices...\"\n              data-cy=\"incident-search\"\n              class=\"wd-90\">\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"col\" pSortableColumn=\"date\">Invoice Date <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"frequency\">Frequency <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"quantity\">Seats <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"subtotal\">Subtotal <p-sortIcon field=\"subtotal\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"total\">Total (incl. tax) <p-sortIcon field=\"total\"></p-sortIcon></th>\n          <th scope=\"col\">Action</th>\n        </tr>\n      </ng-template>\n\n      <ng-template pTemplate=\"body\" let-invoice>\n        <tr>\n          <td>{{ invoice.date | date:'dd-MMM-YYYY' }}</td>\n          <td>\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: invoiceFrequency,\n                              item: invoice?.frequency\n                          }\"\n              color=\"blue-grey\">{{ invoice?.frequency }}</span>\n          </td>\n          <td>{{ invoice?.quantity }}</td>\n          <td>{{ (invoice.subtotal_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td class=\"td-total\">{{ (invoice.total_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td>\n            <a *ngIf=\"invoice?.file?.url; else noFileUrl\" class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice.file.url\" target=\"_blank\" title=\"Download\">\n              <i class=\"fa fa-download\">&nbsp;Download</i>\n            </a>\n            <ng-template #noFileUrl>\n              <a class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice?.stripe_invoice_pdf\" target=\"_blank\" title=\"Download\">\n                <i class=\"fa fa-download\">&nbsp;Download</i>\n              </a>\n            </ng-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n\n    <span *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">Total: {{ totalRecords }}</span>\n\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" message=\"You don't have any invoice yet.\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyAccountInvoiceComponent, decorators: [{
             type: Component,
@@ -1565,7 +1565,7 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n            <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n        </td>\n        <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n  <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n    {{ account.expected_mrr / 100 | currency: account.main_currency }}\n  </span>\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</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_quarter > 5}\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Status\">\n          <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n        </td>\n\n        <td data-head=\"Priority\">\n          <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n        </td>\n\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n                (keydown.space)=\"onDelete(account.id, subscription.id)\"\n                (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\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=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n          <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n            [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\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=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n        </div>\n        <div *ngIf=\"accountActivities?.length === 0\">\n          <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.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\">Accounts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n            <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n        </td>\n        <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n  <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n    {{ account.expected_mrr / 100 | currency: account.main_currency }}\n  </span>\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</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_quarter > 5}\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Status\">\n          <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n        </td>\n\n        <td data-head=\"Priority\">\n          <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n        </td>\n\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n                (keydown.space)=\"onDelete(account.id, subscription.id)\"\n                (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\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=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n          <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n            [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\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=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n        </div>\n        <div *ngIf=\"accountActivities?.length === 0\">\n          <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.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\">Accounts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
             type: Component,
@@ -1768,7 +1768,7 @@ class SmartCrmActionsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>{{ 'Crm.Actions.Config.Description' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      class=\"btn btn-sm btn-outline-primary float-end build-default-action-button\"\n      (click)=\"buildDefaultActions()\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}\n    </a>\n    <a *ngIf=\"hasAccess\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + subscription?.slug + routers.configurationDetails + 'add']\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.AddAction' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_actions\"\n        [paginator]=\"data.object_count!==0\"\n        [lazy]=\"true\"\n        [rows]=\"100\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search action...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n          <ng-template pTemplate=\"header\" >\n            <tr>\n              <th scope=\"true\"\n                pSortableColumn=\"name\">\n                {{ 'Crm.Settings.Name' | transloco }}\n                <p-sortIcon field=\"name\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n              pSortableColumn=\"previous_action_id\">\n              {{ 'Crm.CategoriesMessages.PreviousAction' | transloco }}\n              <p-sortIcon field=\"previous_action_id\"></p-sortIcon>\n            </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week\">\n                {{ 'Crm.Settings.TargetWeek' | transloco }}\n                <p-sortIcon field=\"target_week\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week_min\">\n                {{ 'Crm.Settings.TargetWeekMin' | transloco }}\n                <p-sortIcon field=\"target_week_min\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"visible\">\n                {{ 'Crm.Settings.Visible' | transloco }}\n                <p-sortIcon field=\"visible\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                *ngIf=\"hasAccess\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-action>\n          <tr>\n            <td data-head=\"Name\">{{ action.name }}</td>\n            <td data-head=\"Previous Action\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: actionNames,\n                                    item: getActionName(action?.previous_action_id)\n                                }\"\n                color=\"blue-grey\">{{ getActionName(action?.previous_action_id) }}</span>\n            </td>\n            <td data-head=\"TargetWeek\">{{ action.target_week }}</td>\n            <td data-head=\"TargetWeekMin\">{{ action.target_week_min }}</td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: action?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!action?.visible }}</span>\n            </td>\n            <td data-head=\"Action\"\n              *ngIf=\"hasAccess\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li ngbTooltip=\"Edit\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.configurationDetails,\n                                        action.id\n                                    ]\">\n                  <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <li ngbTooltip=\"Delete\"\n                  class=\"me-2 me-sm-3\">\n                  <i\n                                        class=\"fa fa-trash delete-icon\"\n                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                        (click)=\"onDelete(action.id)\"\n                                        aria-hidden=\"true\"\n                                    ></i>\n                </li>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count!==0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n    <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.build-default-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>{{ 'Crm.Actions.Config.Description' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      class=\"btn btn-sm btn-outline-primary float-end build-default-action-button\"\n      (click)=\"buildDefaultActions()\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}\n    </a>\n    <a *ngIf=\"hasAccess\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + subscription?.slug + routers.configurationDetails + 'add']\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.AddAction' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_actions\"\n        [paginator]=\"data.object_count!==0\"\n        [lazy]=\"true\"\n        [rows]=\"100\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search action...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n          <ng-template pTemplate=\"header\" >\n            <tr>\n              <th scope=\"true\"\n                pSortableColumn=\"name\">\n                {{ 'Crm.Settings.Name' | transloco }}\n                <p-sortIcon field=\"name\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n              pSortableColumn=\"previous_action_id\">\n              {{ 'Crm.CategoriesMessages.PreviousAction' | transloco }}\n              <p-sortIcon field=\"previous_action_id\"></p-sortIcon>\n            </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week\">\n                {{ 'Crm.Settings.TargetWeek' | transloco }}\n                <p-sortIcon field=\"target_week\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week_min\">\n                {{ 'Crm.Settings.TargetWeekMin' | transloco }}\n                <p-sortIcon field=\"target_week_min\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"visible\">\n                {{ 'Crm.Settings.Visible' | transloco }}\n                <p-sortIcon field=\"visible\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                *ngIf=\"hasAccess\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-action>\n          <tr>\n            <td data-head=\"Name\">{{ action.name }}</td>\n            <td data-head=\"Previous Action\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: actionNames,\n                                    item: getActionName(action?.previous_action_id)\n                                }\"\n                color=\"blue-grey\">{{ getActionName(action?.previous_action_id) }}</span>\n            </td>\n            <td data-head=\"TargetWeek\">{{ action.target_week }}</td>\n            <td data-head=\"TargetWeekMin\">{{ action.target_week_min }}</td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: action?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!action?.visible }}</span>\n            </td>\n            <td data-head=\"Action\"\n              *ngIf=\"hasAccess\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li ngbTooltip=\"Edit\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.configurationDetails,\n                                        action.id\n                                    ]\">\n                  <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <li ngbTooltip=\"Delete\"\n                  class=\"me-2 me-sm-3\">\n                  <i\n                                        class=\"fa fa-trash delete-icon\"\n                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                        (click)=\"onDelete(action.id)\"\n                                        aria-hidden=\"true\"\n                                    ></i>\n                </li>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count!==0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n    <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.build-default-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmActionsComponent, decorators: [{
             type: Component,
@@ -1963,7 +1963,7 @@ class SmartCrmWidgetsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmWidgetsComponent, 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: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>{{ 'Crm.Widgets.Config.Description' | transloco }}</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.widgetsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Widgets.AddWidgets' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_widget_relationships\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_widget_id\">\n              {{ 'Crm.Widgets.CrmWidget' | transloco }}\n              <p-sortIcon field=\"crm_widget_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"position\">\n              {{ 'Crm.Widgets.Position' | transloco }}\n              <p-sortIcon field=\"position\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.Widgets.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-widget>\n          <tr>\n            <td data-head=\"Crm Widget\">{{ widget.crm_widget }}</td>\n            <td data-head=\"Position\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: positions,\n                                    item: widget?.position\n                                }\"\n                color=\"default\">{{ widget.position }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: widget?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!widget?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.widgetsDetails,\n                                            widget.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (keydown.enter)=\"onDelete(widget.id)\"\n                                            (keydown.space)=\"onDelete(widget.id)\"\n                                            (click)=\"onDelete(widget.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\"*ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>{{ 'Crm.Widgets.Config.Description' | transloco }}</p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.widgetsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Widgets.AddWidgets' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_widget_relationships\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search source...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_widget_id\">\n              {{ 'Crm.Widgets.CrmWidget' | transloco }}\n              <p-sortIcon field=\"crm_widget_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"position\">\n              {{ 'Crm.Widgets.Position' | transloco }}\n              <p-sortIcon field=\"position\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.Widgets.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-widget>\n          <tr>\n            <td data-head=\"Crm Widget\">{{ widget.crm_widget }}</td>\n            <td data-head=\"Position\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: positions,\n                                    item: widget?.position\n                                }\"\n                color=\"default\">{{ widget.position }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: widget?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!widget?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.widgetsDetails,\n                                            widget.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (keydown.enter)=\"onDelete(widget.id)\"\n                                            (keydown.space)=\"onDelete(widget.id)\"\n                                            (click)=\"onDelete(widget.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\"*ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmWidgetsComponent, decorators: [{
             type: Component,
@@ -2099,7 +2099,7 @@ class SmartCrmStagesComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmStagesComponent, 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: SmartCrmStagesComponent, selector: "pw-smart-crm-stages", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.Stages.Config.Description' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n    class=\"btn btn-sm btn-outline-primary float-end build-default-stage-button\"\n    (click)=\"buildDefaultStages()\"\n    data-cy=\"add-contact\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.StageMessages.BuildDefaultStage' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.stageDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.StageMessages.AddStage' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_stages\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"row\">\n\n            <div class=\"col-4\">\n              <p-multiSelect placeholder=\"Select Category\" [options]=\"availableCategories\" [(ngModel)]=\"filterByCategory\"\n            (onChange)=\"onSearchOptionChange($event)\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n            </div>\n            <div class=\"col-8 d-flex justify-content-end\">\n              <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n              <input type=\"text\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                size=\"50\"\n                placeholder=\"Search stages...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"mw-90\" />\n            </div>\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.StageMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_stage_id\">\n              {{ 'Crm.StageMessages.PreviousStage' | transloco }}\n              <p-sortIcon field=\"previous_stage_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_opportunity_category_ids\">\n              {{ 'Crm.StageMessages.OpportunityCategory' | transloco }}\n              <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.StageMessages.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: stageNames,\n                                    item: stage?.crm_previous_stage?.name\n                                }\"\n                color=\"warning\">{{ stage?.crm_previous_stage?.name }}</span>\n            </td>\n            <td data-head=\"Opportunity Category\">\n              <span *ngFor=\"let category of stage?.crm_opportunity_categories\"\n                class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n                color=\"blue-grey\">{{ category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!stage?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.stageDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (keydown.enter)=\"onDelete(stage.id)\"\n                                            (keydown.space)=\"onDelete(stage.id)\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-default-stage-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmStagesComponent, selector: "pw-smart-crm-stages", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.Stages.Config.Description' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n    class=\"btn btn-sm btn-outline-primary float-end build-default-stage-button\"\n    (click)=\"buildDefaultStages()\"\n    data-cy=\"add-contact\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n    {{ 'Crm.StageMessages.BuildDefaultStage' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.stageDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.StageMessages.AddStage' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_stages\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"row\">\n\n            <div class=\"col-4\">\n              <p-multiSelect placeholder=\"Select Category\" [options]=\"availableCategories\" [(ngModel)]=\"filterByCategory\"\n            (onChange)=\"onSearchOptionChange($event)\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n            </div>\n            <div class=\"col-8 d-flex justify-content-end\">\n              <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n              <input type=\"text\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                size=\"50\"\n                placeholder=\"Search stages...\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"mw-90\" />\n            </div>\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.StageMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_stage_id\">\n              {{ 'Crm.StageMessages.PreviousStage' | transloco }}\n              <p-sortIcon field=\"previous_stage_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"crm_opportunity_category_ids\">\n              {{ 'Crm.StageMessages.OpportunityCategory' | transloco }}\n              <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"visible\">\n              {{ 'Crm.StageMessages.Visible' | transloco }}\n              <p-sortIcon field=\"visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: stageNames,\n                                    item: stage?.crm_previous_stage?.name\n                                }\"\n                color=\"warning\">{{ stage?.crm_previous_stage?.name }}</span>\n            </td>\n            <td data-head=\"Opportunity Category\">\n              <span *ngFor=\"let category of stage?.crm_opportunity_categories\"\n                class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n                color=\"blue-grey\">{{ category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!stage?.visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.stageDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (keydown.enter)=\"onDelete(stage.id)\"\n                                            (keydown.space)=\"onDelete(stage.id)\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-default-stage-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmStagesComponent, decorators: [{
             type: Component,
@@ -2200,7 +2200,7 @@ class SmartCrmOpportunityCategoriesComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, 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: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.Categories.Config.Description' | transloco }}</p>\n    <div class=\"col-12\" *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\">\n      <a class=\"btn btn-sm btn-outline-primary float-end build-category-button\"\n        data-cy=\"add-category\"\n          (click)=\"buildCategories()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.CategoriesMessages.BuildCategory' | transloco }}\n      </a>\n    </div>\n    <div class=\"col-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end mr-2\"\n          data-cy=\"add-category\"\n          [routerLink]=\"['/' + subscription?.slug + routers.categoryDetails + 'add']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n          {{ 'Crm.CategoriesMessages.AddCategory' | transloco }}\n        </a>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_categories\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.CategoriesMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_category_id\">\n              {{ 'Crm.CategoriesMessages.PreviousCategory' | transloco }}\n              <p-sortIcon field=\"previous_category_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"is_visible\">\n              {{ 'Crm.CategoriesMessages.Visible' | transloco }}\n              <p-sortIcon field=\"is_visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: categoryNames,\n                                    item: stage?.previous_category?.name\n                                }\"\n                color=\"blue-grey\">{{ stage?.previous_category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.is_visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ stage?.is_visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.categoryDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (keydown.enter)=\"onDelete(stage.id)\"\n                                            (keydown.space)=\"onDelete(stage.id)\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-category-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <p>{{ 'Crm.Categories.Config.Description' | transloco }}</p>\n    <div class=\"col-12\" *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\">\n      <a class=\"btn btn-sm btn-outline-primary float-end build-category-button\"\n        data-cy=\"add-category\"\n          (click)=\"buildCategories()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.CategoriesMessages.BuildCategory' | transloco }}\n      </a>\n    </div>\n    <div class=\"col-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end mr-2\"\n          data-cy=\"add-category\"\n          [routerLink]=\"['/' + subscription?.slug + routers.categoryDetails + 'add']\">\n          <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n          {{ 'Crm.CategoriesMessages.AddCategory' | transloco }}\n        </a>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n      [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_opportunity_categories\"\n        [paginator]=\"data.object_count !== 0\"\n        [lazy]=\"true\"\n        [rows]=\"PAGE_SIZE\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search stages...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\"\n              pSortableColumn=\"name\">\n              {{ 'Crm.CategoriesMessages.Name' | transloco }}\n              <p-sortIcon field=\"name\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"previous_category_id\">\n              {{ 'Crm.CategoriesMessages.PreviousCategory' | transloco }}\n              <p-sortIcon field=\"previous_category_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\"\n              pSortableColumn=\"is_visible\">\n              {{ 'Crm.CategoriesMessages.Visible' | transloco }}\n              <p-sortIcon field=\"is_visible\"></p-sortIcon>\n            </th>\n            <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-stage>\n          <tr>\n            <td data-head=\"Name\">{{ stage?.name }}</td>\n            <td data-head=\"Previous Stage\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: categoryNames,\n                                    item: stage?.previous_category?.name\n                                }\"\n                color=\"blue-grey\">{{ stage?.previous_category?.name }}</span>\n            </td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: stage?.is_visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ stage?.is_visible }}</span>\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess\">\n                  <li ngbTooltip=\"Edit\"\n                    class=\"me-2 me-sm-3\"\n                    [routerLink]=\"[\n                                            '/' + subscription?.slug + routers.categoryDetails,\n                                            stage.id\n                                        ]\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li ngbTooltip=\"Delete\"\n                    class=\"me-2 me-sm-3\">\n                    <i\n                                            class=\"fa fa-trash delete-icon\"\n                                            (keydown.enter)=\"onDelete(stage.id)\"\n                                            (keydown.space)=\"onDelete(stage.id)\"\n                                            (click)=\"onDelete(stage.id)\"\n                                            aria-hidden=\"true\"\n                                        ></i>\n                  </li>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n</div>\n", styles: [".build-category-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, decorators: [{
             type: Component,
@@ -2571,7 +2571,15 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
         this.form.get('crm_account_id').setValue(null);
         this.getUserSubscriptionId().subscribe(response => {
             this.subscriptionId = response;
-            this.crmSources$ = this.crmService.getAllAccountSource(this.subscriptionId);
+            this.crmSources$ = this.crmService.getAllAccountSource(this.subscriptionId).pipe(map(res => ({
+                crm_sources: [
+                    { label: 'Select CRM Source', value: null },
+                    ...(res?.crm_sources || []).map(item => ({
+                        label: item.name,
+                        value: item.id
+                    }))
+                ]
+            })));
             this.getDefaultValues(this.subscriptionId);
             if (this.subscriptionId) {
                 this.getAccountsBySubscription();
@@ -2687,7 +2695,7 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactDetailsComponent, deps: [{ token: i2.CommonService }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }, { token: i2.GeoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactDetailsComponent, selector: "pw-smart-crm-contact-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n      {{ isLoading ? '' :\n               (data?.first_name\n                    ? data?.first_name + ' ' + data.last_name\n                    : ('Label.AddNew' | transloco))\n            }}</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\">\n  <form [formGroup]=\"form\"\n    *ngIf=\"!isLoading\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n          name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"first_name\"\n            id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n          name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"last_name\"\n            id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\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\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n          name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"headline\"\n            id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n          name=\"email\"\n          errorMsg=\"{{\n                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n                    }}\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"email\"\n            id=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n            class=\"nowrap\"\n            name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\"\n              name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n          name=\"linkedin_url\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"linkedin_url\"\n            id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [multiple]=\"false\"\n          autocomplete=\"off\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n          name=\"department_id\"\n          *ngIf=\"departments$ | async as departments\">\n          <p-dropdown\n            [options]=\"departments['organization_departments']\"\n            formControlName=\"department_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n            [placeholder]=\"'Select Department'\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"potential\">{{ 'Crm.ContactMessage.Potential' | transloco }}</label>\n        <p-dropdown\n          [options]=\"potentials\"\n          formControlName=\"potential\"\n          [placeholder]=\"'Select Potential'\">\n        </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"contact\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n        <p-multiSelect [options]=\"labels\"\n          formControlName=\"labels\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\"\n        *ngIf=\"crmSources$ | async as source\">\n        <label for=\"source\">{{ 'Crm.ContactMessage.Source' | transloco }}</label>\n        <p-dropdown\n        [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n        id=\"country\"\n        [options]=\"source['crm_sources']\"\n        optionLabel=\"name\"\n        optionValue=\"id\"\n        [showClear]=\"true\"\n        formControlName=\"crm_source_id\"\n        placeholder=\"select crm source\">\n      </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n          name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"dob\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                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\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.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: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.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: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactDetailsComponent, selector: "pw-smart-crm-contact-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n      {{ isLoading ? '' :\n               (data?.first_name\n                    ? data?.first_name + ' ' + data.last_name\n                    : ('Label.AddNew' | transloco))\n            }}</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\">\n  <form [formGroup]=\"form\"\n    *ngIf=\"!isLoading\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n          name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"first_name\"\n            id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n          name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"last_name\"\n            id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\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\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n          name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"headline\"\n            id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n          name=\"email\"\n          errorMsg=\"{{\n                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n                    }}\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"email\"\n            id=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n            class=\"nowrap\"\n            name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\"\n              name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n          name=\"linkedin_url\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"linkedin_url\"\n            id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [multiple]=\"false\"\n          autocomplete=\"off\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n          name=\"department_id\"\n          *ngIf=\"departments$ | async as departments\">\n          <p-dropdown\n            [options]=\"departments['organization_departments']\"\n            formControlName=\"department_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n            [placeholder]=\"'Select Department'\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"potential\">{{ 'Crm.ContactMessage.Potential' | transloco }}</label>\n        <p-dropdown\n          [options]=\"potentials\"\n          formControlName=\"potential\"\n          [placeholder]=\"'Select Potential'\">\n        </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"contact\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n        <p-multiSelect [options]=\"labels\"\n          formControlName=\"labels\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\"\n        *ngIf=\"crmSources$ | async as source\">\n        <label for=\"source\">{{ 'Crm.ContactMessage.Source' | transloco }}</label>\n        <p-dropdown\n        [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n        id=\"country\"\n        [options]=\"source['crm_sources']\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        formControlName=\"crm_source_id\"\n        placeholder=\"select crm source\">\n      </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n          name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"dob\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                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\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.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: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.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: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -2697,7 +2705,7 @@ __decorate([
 ], SmartCrmContactDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-contact-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n      {{ isLoading ? '' :\n               (data?.first_name\n                    ? data?.first_name + ' ' + data.last_name\n                    : ('Label.AddNew' | transloco))\n            }}</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\">\n  <form [formGroup]=\"form\"\n    *ngIf=\"!isLoading\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n          name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"first_name\"\n            id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n          name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"last_name\"\n            id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\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\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n          name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"headline\"\n            id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n          name=\"email\"\n          errorMsg=\"{{\n                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n                    }}\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"email\"\n            id=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n            class=\"nowrap\"\n            name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\"\n              name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n          name=\"linkedin_url\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"linkedin_url\"\n            id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [multiple]=\"false\"\n          autocomplete=\"off\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n          name=\"department_id\"\n          *ngIf=\"departments$ | async as departments\">\n          <p-dropdown\n            [options]=\"departments['organization_departments']\"\n            formControlName=\"department_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n            [placeholder]=\"'Select Department'\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"potential\">{{ 'Crm.ContactMessage.Potential' | transloco }}</label>\n        <p-dropdown\n          [options]=\"potentials\"\n          formControlName=\"potential\"\n          [placeholder]=\"'Select Potential'\">\n        </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"contact\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n        <p-multiSelect [options]=\"labels\"\n          formControlName=\"labels\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\"\n        *ngIf=\"crmSources$ | async as source\">\n        <label for=\"source\">{{ 'Crm.ContactMessage.Source' | transloco }}</label>\n        <p-dropdown\n        [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n        id=\"country\"\n        [options]=\"source['crm_sources']\"\n        optionLabel=\"name\"\n        optionValue=\"id\"\n        [showClear]=\"true\"\n        formControlName=\"crm_source_id\"\n        placeholder=\"select crm source\">\n      </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n          name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"dob\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                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\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: 'pw-smart-crm-contact-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.ContactMessage.Contact' | transloco }}:\n      {{ isLoading ? '' :\n               (data?.first_name\n                    ? data?.first_name + ' ' + data.last_name\n                    : ('Label.AddNew' | transloco))\n            }}</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\">\n  <form [formGroup]=\"form\"\n    *ngIf=\"!isLoading\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.FirstName' | transloco\"\n          name=\"first_name\"\n          [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"first_name\"\n            id=\"first_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n          name=\"last_name\"\n          [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"last_name\"\n            id=\"last_name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" />\n        </pw-input-container>\n      </div>\n\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\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n          name=\"headline\"\n          [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"headline\"\n            id=\"headline\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\"\n          name=\"tel\"\n          [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"tel\"\n            id=\"tel\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n          name=\"email\"\n          errorMsg=\"{{\n                        f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n                    }}\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"email\"\n            id=\"email\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <div class=\"mb-3\">\n          <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\"\n            class=\"nowrap\"\n            name=\"email_verified\">\n            <ui-switch formControlName=\"email_verified\"\n              name=\"email_verified\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n            </ui-switch>\n          </pw-input-container>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\"\n          name=\"linkedin_url\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"linkedin_url\"\n            id=\"linkedin_url\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.ContactMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [multiple]=\"false\"\n          autocomplete=\"off\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n          name=\"department_id\"\n          *ngIf=\"departments$ | async as departments\">\n          <p-dropdown\n            [options]=\"departments['organization_departments']\"\n            formControlName=\"department_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['department_id'].errors }\"\n            [placeholder]=\"'Select Department'\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"potential\">{{ 'Crm.ContactMessage.Potential' | transloco }}</label>\n        <p-dropdown\n          [options]=\"potentials\"\n          formControlName=\"potential\"\n          [placeholder]=\"'Select Potential'\">\n        </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\">\n        <label for=\"contact\">{{ 'Crm.ContactMessage.Labels' | transloco }} </label>\n        <p-multiSelect [options]=\"labels\"\n          formControlName=\"labels\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4\"\n        *ngIf=\"crmSources$ | async as source\">\n        <label for=\"source\">{{ 'Crm.ContactMessage.Source' | transloco }}</label>\n        <p-dropdown\n        [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n        id=\"country\"\n        [options]=\"source['crm_sources']\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        formControlName=\"crm_source_id\"\n        placeholder=\"select crm source\">\n      </p-dropdown>\n      </div>\n\n      <div class=\"col-12 col-sm-4 col-lg-4 mt-3\">\n        <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n          name=\"dob\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"dob\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                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\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i2.CommonService }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }, { type: i2.GeoService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
 
 class SmartCrmContactInfoComponent extends AppBaseComponent {
@@ -3367,7 +3375,10 @@ class SmartCrmContactComponent extends AppBaseComponent {
     }
     getDefaultValues(id) {
         this.crmService.getCrmContactDefaultValues(id).subscribe(res => {
-            this.potential = res['potential'];
+            this.potential = [
+                { label: 'Select Priority', value: null },
+                ...(res['potential'] || []).map(item => ({ label: item, value: item }))
+            ];
             const label = res['labels'];
             label.forEach(val => {
                 const data = {
@@ -3410,11 +3421,11 @@ class SmartCrmContactComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n            <p-dropdown\n              [options]=\"potential\"\n              [showClear]=\"true\"\n              [(ngModel)]=\"filterByPotentials\"\n              [placeholder]=\"'Select Priority'\"\n              (onChange)=\"filterByPotential($event.value)\">\n            </p-dropdown>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmContactComponent, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n            <p-dropdown\n              [options]=\"potential\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [(ngModel)]=\"filterByPotentials\"\n              [placeholder]=\"'Select Priority'\"\n              (onChange)=\"filterByPotential($event.value)\">\n            </p-dropdown>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n            <p-dropdown\n              [options]=\"potential\"\n              [showClear]=\"true\"\n              [(ngModel)]=\"filterByPotentials\"\n              [placeholder]=\"'Select Priority'\"\n              (onChange)=\"filterByPotential($event.value)\">\n            </p-dropdown>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
+            args: [{ selector: 'pw-crm-contacts', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2 *ngIf=\"!accountData?.name\">Contacts</h2>\n    <h3 *ngIf=\"accountData?.name\"\n      class=\"mb-2\">\n      {{ accountData.name }}\n      <span *ngIf=\"hasAccess || accountData.owner_id === userId\" [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n    </h3>\n    <h4 *ngIf=\"accountData?.location\"\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    <h4 *ngIf=\"accountData?.tel\">Tel: {{ accountData.tel }}</h4>\n    <h4 *ngIf=\"accountData?.company_url\">\n      URL:\n      <a href=\"{{ accountData.company_url }}\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\">\n        {{ accountData.company_url }}\n      </a>\n    </h4>\n    <a class=\"btn btn-sm btn-outline-primary float-end mb-3 ms-2\"\n      data-cy=\"add-opportunities\"\n      (click)=\"navigateToOpportunities()\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      *ngIf=\"!accountData?.name\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    <a class=\"btn btn-sm btn-outline-primary me-3 float-end\"\n      data-cy=\"list-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contacts]\"\n      *ngIf=\"accountData?.name\">\n      <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table class=\"table\"\n    #dt\n    [value]=\"data.contacts\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    stateStorage=\"local\"\n    stateKey=\"smart-crm-contacts\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row\">\n        <div class=\"col-sm-3 col-6 mb-sm-0 mb-0\">\n            <p-dropdown\n              [options]=\"potential\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              [(ngModel)]=\"filterByPotentials\"\n              [placeholder]=\"'Select Priority'\"\n              (onChange)=\"filterByPotential($event.value)\">\n            </p-dropdown>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedLabels\" placeholder=\"Select Label\" [options]=\"labels\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" (onChange)=\"onLabelChange($event)\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <!-- multiple select account drop down -->\n        <div class=\"col-sm-3 col-6\">\n            <p-multiSelect [(ngModel)]=\"selectedAccount\" placeholder=\"Select Account\" [options]=\"accountDropDown\" [filter]=\"true\"\n                [showHeader]=\"true\" [showToggleAll]=\"true\" optionLabel=\"name\" (onChange)=\"onSelectAccount()\" appendTo=\"body\">\n            </p-multiSelect>\n        </div>\n        <div class=\"col-sm-3 col-md-4 col-lg-3\">\n         <div class=\"d-flex\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search contact...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control\" />\n         </div>\n      </div>\n\n    </div>\n\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"owner_id\">\n          {{ 'Crm.ContactMessage.ContactOwner' | transloco }}\n          <p-sortIcon field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_account_id\">\n          {{ 'Crm.ContactMessage.AccountOwner' | transloco }}\n          <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"labels\">\n          {{ 'Crm.ContactMessage.Labels' | transloco }}\n          <p-sortIcon field=\"labels\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"potential\">\n          {{ 'Crm.ContactMessage.Potential' | transloco }}\n          <p-sortIcon field=\"potential\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-contact>\n      <tr>\n        <td data-head=\"Name\"\n        class=\"contactname\">\n          <a ngbTooltip=\"{{contact.headline ? contact.headline : 'No headline for this contact'}}\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, contact.id]\">{{ (contact?.first_name || '') + ' ' + (contact?.last_name || '') | textTruncate: 20 }}\n          </a>\n        </td>\n        <td data-head=\"OwnerName\">{{ contact.owner | ifNameNullShowEmail }}</td>\n        <td data-head=\"Account Name\">\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            contact.crm_account.id\n                        ]\" ngbTooltip=\"{{contact?.crm_account.name}}\">{{ contact?.crm_account.name | textTruncate: 20 }}</a>\n        </td>\n        <td data-head=\"Labels\">\n          <span class=\"badge bg-info m-1\"\n            *ngFor=\"let item of contact.labels\">{{\n                        item\n                    }}</span>\n        </td>\n        <td data-head=\"Potential\">\n          <span [appDynamicBadge]=\"{ itemsArray: potential, item: contact.potential }\"\n            color=\"warning\"\n            class=\"badge\">{{ contact.potential }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + '/crm/contacts/info',\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Add opportunity\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n              [queryParams]=\"{ contact_id: contact.id }\">\n              <i class=\"fa fa-plus-circle add-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactDetails,\n                                contact.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                contact.owner_id === userId ||\n                                contact.crm_account.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(contact.id)\"\n                                (keydown.space)=\"onDelete(contact.id)\"\n                                (click)=\"onDelete(contact.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n</div>\n\n<ng-container>\n  <div class=\"row mt-5\"\n    *ngIf=\"isLoaded && !accountData?.name\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"contactInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"contactInsight\"\n          [paginator]=\"contactInsight?.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"contactInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.ContactMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Contact\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, insight.crm_contact_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Headline\">\n                <span\n                [ngbTooltip]=\"insight?.headline\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.headline | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\">\n                {{ insight.reason }}\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"contactInsight?.length !== 0\">Total: {{ contactInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!contactInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Contacts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"contactGeography\">\n          <plotly-plot [data]=\"contactGeography?.data\"\n            [config]=\"contactGeography?.config\"\n            [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!contactGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.table tr{vertical-align:baseline}@media (min-width: 640px){.list-inline{width:150px}}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 class SmartCrmCustomerSuccessComponent {
@@ -4006,7 +4017,7 @@ 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$3.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$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i14.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$3.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$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i15.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmAccountInsightComponent, decorators: [{
             type: Component,
@@ -4062,7 +4073,15 @@ class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
                 this.getDefaultValues(this.subscriptionId);
                 this.form.get('subscription_id').setValue(this.subscriptionId);
                 this.getAccountsBySubscription();
-                this.source$ = this.crmService.getAllAccountSource(this.subscriptionId);
+                this.source$ = this.crmService.getAllAccountSource(this.subscriptionId).pipe(map(res => ({
+                    crm_sources: [
+                        { label: 'Select CRM Source', value: null },
+                        ...(res?.crm_sources || []).map(item => ({
+                            label: item.name,
+                            value: item.id
+                        }))
+                    ]
+                })));
             }
         });
     }
@@ -4219,11 +4238,11 @@ 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            [showClear]=\"true\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.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: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.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: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11$1.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i2$1.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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.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: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i8.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.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: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11$1.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i2$1.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,
-            args: [{ selector: 'pw-smart-crm-leads-details', 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            [showClear]=\"true\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\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" }]
+            args: [{ selector: 'pw-smart-crm-leads-details', 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" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.GeoService }] });
 
 class SmartCrmLeadsComponent extends AppBaseComponent {
@@ -4341,7 +4360,7 @@ class SmartCrmLeadsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmLeadsComponent, selector: "pw-smart-crm-leads", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Leads</h2>\n    <p>\n      This section lists prospects who either engaged with a landing page or were identified by our AI Agent. In both cases,\n      we believe they\u2019re worth reaching out to.\n    </p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-leads\"\n      [routerLink]=\"['/' + subscription?.slug + routers.leadsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.CrmLeads.AddLead' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_leads\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <p-multiSelect placeholder=\"Select Source\"\n            [options]=\"crmSources\"\n            [filter]=\"true\"\n            (onChange)=\"onSourceChange($event)\"\n            [showHeader]=\"true\"\n            [showToggleAll]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end ms-auto\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search leads...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.CrmLeads.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"country\">\n          {{ 'Crm.AccountMessage.Country' | transloco }}\n          <p-sortIcon field=\"country\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.CrmLeads.EmailVerified' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Crm.CrmLeads.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_source_id\">\n          {{ 'Crm.CrmLeads.Source' | transloco }}\n          <p-sortIcon field=\"crm_source_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-lead>\n      <tr>\n        <td data-head=\"Name\"\n          class=\"contactname\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, lead?.id]\">\n            {{\n                            !lead?.first_name && !lead.last_name\n                                ? 'N/A'\n                                : ((lead?.first_name || '') + ' ' + (lead?.last_name || '') | textTruncate: 20)\n                        }}\n          </a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ lead?.email }}\">{{ lead?.email }}</a>\n          <span *ngIf=\"lead?.enquiry\"\n            class=\"ms-2\"\n            [pTooltip]=\"lead?.enquiry\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-info-circle\"></i>\n          </span>\n        </td>\n        <td data-head=\"Country\">\n          <span>{{ getCountryName(lead?.country) }}</span>\n        </td>\n        <td data-head=\"Email Verified\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: lead?.email_verified\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ lead?.email_verified ? 'true' : 'false' }}</span>\n          <span class=\"ms-2 cursor-pointer\"\n            [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n            tooltipPosition=\"top\"\n            *ngIf=\"!lead?.newsletter_subscribed\"><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n        </td>\n        <td data-head=\"Created At\">\n          {{ lead?.created_at | dateFormat }}\n        </td>\n        <td>\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{ itemsArray: allSource, item: lead?.crm_source?.name }\"\n            color=\"default\">{{ lead?.crm_source?.name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.leadsDetails,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(lead.id)\"\n                                (keydown.space)=\"onDelete(lead.id)\"\n                                (click)=\"onDelete(lead.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$3.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmLeadsComponent, selector: "pw-smart-crm-leads", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Leads</h2>\n    <p>\n      This section lists prospects who either engaged with a landing page or were identified by our AI Agent. In both cases,\n      we believe they\u2019re worth reaching out to.\n    </p>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-leads\"\n      [routerLink]=\"['/' + subscription?.slug + routers.leadsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.CrmLeads.AddLead' | transloco }}\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_leads\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <p-multiSelect placeholder=\"Select Source\"\n            [options]=\"crmSources\"\n            [filter]=\"true\"\n            (onChange)=\"onSourceChange($event)\"\n            [showHeader]=\"true\"\n            [showToggleAll]=\"true\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end ms-auto\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search leads...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Crm.ContactMessage.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Crm.CrmLeads.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"country\">\n          {{ 'Crm.AccountMessage.Country' | transloco }}\n          <p-sortIcon field=\"country\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Crm.CrmLeads.EmailVerified' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Crm.CrmLeads.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"crm_source_id\">\n          {{ 'Crm.CrmLeads.Source' | transloco }}\n          <p-sortIcon field=\"crm_source_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-lead>\n      <tr>\n        <td data-head=\"Name\"\n          class=\"contactname\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, lead?.id]\">\n            {{\n                            !lead?.first_name && !lead.last_name\n                                ? 'N/A'\n                                : ((lead?.first_name || '') + ' ' + (lead?.last_name || '') | textTruncate: 20)\n                        }}\n          </a>\n        </td>\n        <td data-head=\"Email\">\n          <a href=\"mailto:{{ lead?.email }}\">{{ lead?.email }}</a>\n          <span *ngIf=\"lead?.enquiry\"\n            class=\"ms-2\"\n            [pTooltip]=\"lead?.enquiry\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-info-circle\"></i>\n          </span>\n        </td>\n        <td data-head=\"Country\">\n          <span>{{ getCountryName(lead?.country) }}</span>\n        </td>\n        <td data-head=\"Email Verified\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: lead?.email_verified\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ lead?.email_verified ? 'true' : 'false' }}</span>\n          <span class=\"ms-2 cursor-pointer\"\n            [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n            tooltipPosition=\"top\"\n            *ngIf=\"!lead?.newsletter_subscribed\"><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n        </td>\n        <td data-head=\"Created At\">\n          {{ lead?.created_at | dateFormat }}\n        </td>\n        <td>\n          <span class=\"badge\"\n            [appDynamicBadge]=\"{ itemsArray: allSource, item: lead?.crm_source?.name }\"\n            color=\"default\">{{ lead?.crm_source?.name }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Show\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-eye see-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.leadsDetails,\n                                lead?.id\n                            ]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"\n                                hasAccess ||\n                                lead?.owner_id === userId ||\n                                lead?.crm_account?.owner_id === userId\n                            \"\n              ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(lead.id)\"\n                                (keydown.space)=\"onDelete(lead.id)\"\n                                (click)=\"onDelete(lead.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8$3.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmLeadsComponent, decorators: [{
             type: Component,
@@ -4781,7 +4800,7 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>E-Marketing</h2>\n    <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n        campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Email Campaign' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Delivered?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                (keydown.enter)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(item.id)\"\n                                (keydown.space)=\"onDelete(item.id)\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Preview and Recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-eye eye-icon\"\n                                (keydown.enter)=\"onNavigate(subscription, item)\"\n                                (click)=\"onNavigate(subscription, item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n              </span>\n              </td>\n              <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Campaigns Location</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"communicationEngagement ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsComponent, selector: "pw-smart-crm-communications", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    <h2>E-Marketing</h2>\n    <p>The <strong>E-Marketing</strong> module allows you to quickly launch and customize professional email marketing\n        campaigns. <br /> You can <strong>precisely target recipients</strong> to boost deliverability and engagement.</p>\n  </div>\n  <div class=\"col-12 col-md-12 text-end\">\n    <button class=\"btn btn-sm btn-outline-primary\"\n      [routerLink]=\"['/' + subscription?.slug + routers.marketingDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Email Campaign' }}\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container mt-3 table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.crm_newsletters\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    filterDelay=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search communication emails...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Crm.CommunicationsMessage.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"location\">\n          {{ 'Crm.CommunicationsMessage.Location' | transloco }}\n          <p-sortIcon field=\"location'\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"send_until\">\n          {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n          <p-sortIcon field=\"send_until\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_pushed\">\n          {{ 'Crm.CommunicationsMessage.Pushed' | transloco }}\n          <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_sent\">\n          {{ 'Crm.CommunicationsMessage.Sent' | transloco }}\n          <p-sortIcon field=\"is_sent\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr class=\"table-row\">\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, item.id]\">{{\n                        item.title\n                    }}</a>\n        </td>\n        <td data-head=\"Body\"\n          [innerHtml]=\"item.body | removeHtml: 'quill' | textTruncate: 200\"></td>\n        <td data-head=\"Location\">{{ item.location }}</td>\n        <td data-head=\"Send Until\">{{ item.send_until | dateFormat }}</td>\n        <td data-head=\"Pushed?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_pushed }}</span>\n        </td>\n        <td data-head=\"Delivered?\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ !!item?.is_sent }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Send test email\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-comment-alt cta1-icon\"\n                                (click)=\"sendTestEmail(item)\"\n                                (keydown.enter)=\"sendTestEmail(item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-edit edit-icon\"\n                                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.marketingDetails,\n                                    item.id\n                                ]\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-trash delete-icon\"\n                                (keydown.enter)=\"onDelete(item.id)\"\n                                (keydown.space)=\"onDelete(item.id)\"\n                                (click)=\"onDelete(item.id)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Preview and Recipients\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fa fa-eye eye-icon\"\n                                (keydown.enter)=\"onNavigate(subscription, item)\"\n                                (click)=\"onNavigate(subscription, item)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\"\n        *ngIf=\"communicationsInsight?.length\">\n        <p-table class=\"table\"\n          #dt\n          [value]=\"communicationsInsight\"\n          [paginator]=\"communicationsInsight.length !== 0\"\n          [rows]=\"PAGE_SIZE\"\n\n          [totalRecords]=\"communicationsInsight.length\"\n          [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Title' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendAt' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}\n              </th>\n              <th scope=\"true\">\n                {{ 'Crm.CommunicationsMessage.Reason' | transloco }}\n              </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-insight>\n            <tr>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                <a [routerLink]=\"['/' + subscription?.slug + routers.marketing, insight.id]\">{{ insight?.title | textTruncate: 30 }}</a>\n              </span>\n              </td>\n              <td data-head=\"Value\">{{ insight.send_at | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Value\">{{ insight.send_until | date: 'dd-MMM-YYYY'  }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"communicationsInsight.length !== 0\">{{ 'Label.Total' | transloco }}: {{ communicationsInsight.length }}</span>\n      </div>\n      <div *ngIf=\"!communicationsInsight?.length\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Campaigns Location</h5>\n      <div>\n        <ng-template [ngIf]=\"communicationEngagement\">\n          <plotly-plot [data]=\"communicationEngagement?.data\"\n            [layout]=\"communicationEngagement?.layout\"\n            [config]=\"communicationEngagement?.config\"\n            [useResizeHandler]=\"communicationEngagement ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!communicationEngagement\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".actions-column{min-width:170px}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsComponent, decorators: [{
             type: Component,
@@ -5300,7 +5319,13 @@ class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
     }
     accountDefaultValues(id) {
         this.crmService.getCrmAccountDefaultValues(id).subscribe(response => {
-            this.currencies = response?.currencies;
+            this.currencies = [
+                { label: 'Select Currency', value: null },
+                ...(response?.currencies || []).map(currency => ({
+                    label: currency,
+                    value: currency
+                }))
+            ];
         });
     }
     /** Function to execute on submit opportunities form */
@@ -5411,11 +5436,11 @@ class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesDetailsComponent, selector: "pw-smart-crm-opportunities-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ isLoading ? '': (data?.name ? data?.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\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"searchAccount($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"message\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</label>\n        <p-autoComplete [suggestions]=\"filteredUsers\"\n          formControlName=\"crm_contact_id\"\n          dataKey=\"id\"\n          field=\"displayName\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search contact\"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.OneTimeAmount' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.MRR' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MRR' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n      </div>\n\n      <!-- Features -->\n      <div class=\"mb-3 col-12 col-md-4\"  *rbacAllow=\"'Pages.Alpha'\">\n        <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n          <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n        </label>\n        <p-multiSelect [options]=\"featureKeys\"\n          placeholder=\"Select feature keys\"\n          [showHeader]=\"true\"\n          [showToggleAll]=\"true\"\n          formControlName=\"feature_keys\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"win_chances\"\n            [options]=\"winChance\"\n            [placeholder]=\"'Select Win Chance'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Currency\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"currency\"\n            [options]=\"currencies\"\n            [showClear]=\"true\"\n            [placeholder]=\"'Select Currency'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n     <div class=\"col-12 col-md-4 won-control\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding won-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control won-title\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n        </div>\n      </div>\n\n\n      <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n            <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n          </label>\n          <p-multiSelect [options]=\"categories\"\n            placeholder=\"Select Categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"TrialStartField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n          name=\"trial_start_at\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"trial_start_at\"\n              ngbDatepicker\n              #c=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"c.toggle()\"\n                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\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"LostField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n          name=\"lost_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"lost_reason\"\n            id=\"lost_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"WonField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n          name=\"won_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"won_reason\"\n            id=\"won_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Stage\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n            </span>\n          </label>\n\n          <p-dropdown\n  [options]=\"stages\"\n  optionLabel=\"name\"\n  optionValue=\"id\"\n  formControlName=\"crm_opportunity_stage_id\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\"\n  placeholder=\"Select Stage\">\n</p-dropdown>\n\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.StartingAt' | transloco\n                        }}</span></label>\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"starting_at\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['starting_at'].errors }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-12\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n        name=\"description\"\n        [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n          <textarea rows=\"10\"\n            type=\"text\"\n            class=\"form-control description-field\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.won-title{margin-top:2px}.won-tooltip{left:0}::ng-deep .p-multiselect.p-component{height:33.5px!important}::ng-deep .p-multiselect-label{display:flex;align-items:center;height:100%}.won-control .info-circle .tooltiptext:after{left:25px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.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: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesDetailsComponent, selector: "pw-smart-crm-opportunities-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ isLoading ? '': (data?.name ? data?.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\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"searchAccount($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"message\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</label>\n        <p-autoComplete [suggestions]=\"filteredUsers\"\n          formControlName=\"crm_contact_id\"\n          dataKey=\"id\"\n          field=\"displayName\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search contact\"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.OneTimeAmount' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.MRR' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MRR' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n      </div>\n\n      <!-- Features -->\n      <div class=\"mb-3 col-12 col-md-4\"  *rbacAllow=\"'Pages.Alpha'\">\n        <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n          <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n        </label>\n        <p-multiSelect [options]=\"featureKeys\"\n          placeholder=\"Select feature keys\"\n          [showHeader]=\"true\"\n          [showToggleAll]=\"true\"\n          formControlName=\"feature_keys\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"win_chances\"\n            [options]=\"winChance\"\n            [placeholder]=\"'Select Win Chance'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Currency\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"currency\"\n            [options]=\"currencies\"\n            [placeholder]=\"'Select Currency'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n     <div class=\"col-12 col-md-4 won-control\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding won-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control won-title\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n        </div>\n      </div>\n\n\n      <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n            <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n          </label>\n          <p-multiSelect [options]=\"categories\"\n            placeholder=\"Select Categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"TrialStartField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n          name=\"trial_start_at\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"trial_start_at\"\n              ngbDatepicker\n              #c=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"c.toggle()\"\n                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\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"LostField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n          name=\"lost_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"lost_reason\"\n            id=\"lost_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"WonField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n          name=\"won_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"won_reason\"\n            id=\"won_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Stage\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n            </span>\n          </label>\n\n          <p-dropdown\n  [options]=\"stages\"\n  optionLabel=\"name\"\n  optionValue=\"id\"\n  formControlName=\"crm_opportunity_stage_id\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\"\n  placeholder=\"Select Stage\">\n</p-dropdown>\n\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.StartingAt' | transloco\n                        }}</span></label>\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"starting_at\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['starting_at'].errors }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-12\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n        name=\"description\"\n        [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n          <textarea rows=\"10\"\n            type=\"text\"\n            class=\"form-control description-field\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.won-title{margin-top:2px}.won-tooltip{left:0}::ng-deep .p-multiselect.p-component{height:33.5px!important}::ng-deep .p-multiselect-label{display:flex;align-items:center;height:100%}.won-control .info-circle .tooltiptext:after{left:25px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.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: i11$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i8$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-opportunities-details', template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ isLoading ? '': (data?.name ? data?.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\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"searchAccount($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"message\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</label>\n        <p-autoComplete [suggestions]=\"filteredUsers\"\n          formControlName=\"crm_contact_id\"\n          dataKey=\"id\"\n          field=\"displayName\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search contact\"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.OneTimeAmount' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.MRR' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MRR' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n      </div>\n\n      <!-- Features -->\n      <div class=\"mb-3 col-12 col-md-4\"  *rbacAllow=\"'Pages.Alpha'\">\n        <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n          <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n        </label>\n        <p-multiSelect [options]=\"featureKeys\"\n          placeholder=\"Select feature keys\"\n          [showHeader]=\"true\"\n          [showToggleAll]=\"true\"\n          formControlName=\"feature_keys\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"win_chances\"\n            [options]=\"winChance\"\n            [placeholder]=\"'Select Win Chance'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Currency\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"currency\"\n            [options]=\"currencies\"\n            [showClear]=\"true\"\n            [placeholder]=\"'Select Currency'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n     <div class=\"col-12 col-md-4 won-control\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding won-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control won-title\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n        </div>\n      </div>\n\n\n      <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n            <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n          </label>\n          <p-multiSelect [options]=\"categories\"\n            placeholder=\"Select Categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"TrialStartField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n          name=\"trial_start_at\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"trial_start_at\"\n              ngbDatepicker\n              #c=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"c.toggle()\"\n                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\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"LostField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n          name=\"lost_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"lost_reason\"\n            id=\"lost_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"WonField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n          name=\"won_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"won_reason\"\n            id=\"won_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Stage\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n            </span>\n          </label>\n\n          <p-dropdown\n  [options]=\"stages\"\n  optionLabel=\"name\"\n  optionValue=\"id\"\n  formControlName=\"crm_opportunity_stage_id\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\"\n  placeholder=\"Select Stage\">\n</p-dropdown>\n\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.StartingAt' | transloco\n                        }}</span></label>\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"starting_at\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['starting_at'].errors }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-12\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n        name=\"description\"\n        [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n          <textarea rows=\"10\"\n            type=\"text\"\n            class=\"form-control description-field\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.won-title{margin-top:2px}.won-tooltip{left:0}::ng-deep .p-multiselect.p-component{height:33.5px!important}::ng-deep .p-multiselect-label{display:flex;align-items:center;height:100%}.won-control .info-circle .tooltiptext:after{left:25px!important}\n"] }]
+            args: [{ selector: 'pw-smart-crm-opportunities-details', template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ isLoading ? '': (data?.name ? data?.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\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"searchAccount($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"message\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</label>\n        <p-autoComplete [suggestions]=\"filteredUsers\"\n          formControlName=\"crm_contact_id\"\n          dataKey=\"id\"\n          field=\"displayName\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search contact\"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.OneTimeAmount' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.MRR' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MRR' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n      </div>\n\n      <!-- Features -->\n      <div class=\"mb-3 col-12 col-md-4\"  *rbacAllow=\"'Pages.Alpha'\">\n        <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n          <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n        </label>\n        <p-multiSelect [options]=\"featureKeys\"\n          placeholder=\"Select feature keys\"\n          [showHeader]=\"true\"\n          [showToggleAll]=\"true\"\n          formControlName=\"feature_keys\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"win_chances\"\n            [options]=\"winChance\"\n            [placeholder]=\"'Select Win Chance'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Currency\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"currency\"\n            [options]=\"currencies\"\n            [placeholder]=\"'Select Currency'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n     <div class=\"col-12 col-md-4 won-control\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding won-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control won-title\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n        </div>\n      </div>\n\n\n      <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n            <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n          </label>\n          <p-multiSelect [options]=\"categories\"\n            placeholder=\"Select Categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"TrialStartField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n          name=\"trial_start_at\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"trial_start_at\"\n              ngbDatepicker\n              #c=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"c.toggle()\"\n                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\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"LostField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n          name=\"lost_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"lost_reason\"\n            id=\"lost_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"WonField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n          name=\"won_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"won_reason\"\n            id=\"won_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Stage\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n            </span>\n          </label>\n\n          <p-dropdown\n  [options]=\"stages\"\n  optionLabel=\"name\"\n  optionValue=\"id\"\n  formControlName=\"crm_opportunity_stage_id\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\"\n  placeholder=\"Select Stage\">\n</p-dropdown>\n\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.StartingAt' | transloco\n                        }}</span></label>\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"starting_at\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['starting_at'].errors }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-12\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n        name=\"description\"\n        [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n          <textarea rows=\"10\"\n            type=\"text\"\n            class=\"form-control description-field\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.won-title{margin-top:2px}.won-tooltip{left:0}::ng-deep .p-multiselect.p-component{height:33.5px!important}::ng-deep .p-multiselect-label{display:flex;align-items:center;height:100%}.won-control .info-circle .tooltiptext:after{left:25px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.ProductService }] });
 
 class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
@@ -6057,7 +6082,7 @@ class SmartCrmOpportunitiesListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesListComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n        class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"row\">\n            <div class=\"col-sm-3 col-6\">\n              <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n                (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n                <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n                    (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" appendTo=\"body\">\n                </p-multiSelect>\n            </div>\n            <!-- Empty column occupying the same space -->\n            <div class=\"col-sm-3 col-6\"></div>\n            <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n                <div class=\"d-flex w-100\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n                      (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n                </div>\n            </div>\n        </div>\n          <div class=\"search-filter\">\n            <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n                field=\"title\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n              <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n              <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n              }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n            </th>\n            <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n              }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n              <p-sortIcon field=\"win_chances\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n              transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n              <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n                }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n              </th>\n            <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n              <p-sortIcon field=\"starting_at\"></p-sortIcon>\n            </th>\n            <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-opportunities>\n          <tr>\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: 15 }} </span>\n              </a>\n              <a *ngIf=\"\n                                    !hasAccess &&\n                                    opportunities?.owner_id !== userId &&\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n            </td>\n            <td class=\"contactname\" data-head=\"Crm Contact\">\n              <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    opportunities.crm_contact_id.id\n                                ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n                opportunities.crm_contact?.last_name }}</a>\n            </td>\n            <td data-head=\"Account\">\n              <a [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accountInfo,\n                                    opportunities.crm_account.id\n                                ]\">{{ opportunities.crm_account.name }}</a>\n            </td>\n            <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"WinChance\">\n              <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n                {{ opportunities.win_chances / 100 | percent }}\n              </span>\n               <span class=\"text-danger\"\n                *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n            </td>\n            <td data-head=\"Categories\">\n              <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n                }}</span>\n            </td>\n            <td data-head=\"Stage\">\n              <span class=\"badge\" [appDynamicBadge]=\"{\n                                    itemsArray: stages,\n                                    item: opportunities?.crm_opportunity_stage?.name\n                                }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n            </td>\n            <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.opportunities,\n                                                opportunities.id\n                                            ]\">\n                      <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                      <i class=\"fa fa-trash delete-icon\"   (keydown.enter)=\"onDelete(opportunities.id)\"\n                      (keydown.space)=\"onDelete(opportunities.id)\"\n                      (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\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.OpportunitiesMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.title | textTruncate: 20 }}\n              </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=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n      </div>\n      <div *ngIf=\"opportunitiesInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.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\">Opportunities Location</h5>\n      <div>\n        <ng-template [ngIf]=\"opportunitiesGeography\">\n          <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"opportunitiesGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!opportunitiesGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n        class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"row\">\n            <div class=\"col-sm-3 col-6\">\n              <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n                (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n                <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n                    (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" appendTo=\"body\">\n                </p-multiSelect>\n            </div>\n            <!-- Empty column occupying the same space -->\n            <div class=\"col-sm-3 col-6\"></div>\n            <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n                <div class=\"d-flex w-100\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n                      (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n                </div>\n            </div>\n        </div>\n          <div class=\"search-filter\">\n            <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n                field=\"title\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n              <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n              <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n              }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n            </th>\n            <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n              }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n              <p-sortIcon field=\"win_chances\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n              transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n              <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n                }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n              </th>\n            <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n              <p-sortIcon field=\"starting_at\"></p-sortIcon>\n            </th>\n            <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-opportunities>\n          <tr>\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: 15 }} </span>\n              </a>\n              <a *ngIf=\"\n                                    !hasAccess &&\n                                    opportunities?.owner_id !== userId &&\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n            </td>\n            <td class=\"contactname\" data-head=\"Crm Contact\">\n              <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    opportunities.crm_contact_id.id\n                                ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n                opportunities.crm_contact?.last_name }}</a>\n            </td>\n            <td data-head=\"Account\">\n              <a [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accountInfo,\n                                    opportunities.crm_account.id\n                                ]\">{{ opportunities.crm_account.name }}</a>\n            </td>\n            <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"WinChance\">\n              <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n                {{ opportunities.win_chances / 100 | percent }}\n              </span>\n               <span class=\"text-danger\"\n                *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n            </td>\n            <td data-head=\"Categories\">\n              <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n                }}</span>\n            </td>\n            <td data-head=\"Stage\">\n              <span class=\"badge\" [appDynamicBadge]=\"{\n                                    itemsArray: stages,\n                                    item: opportunities?.crm_opportunity_stage?.name\n                                }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n            </td>\n            <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.opportunities,\n                                                opportunities.id\n                                            ]\">\n                      <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                      <i class=\"fa fa-trash delete-icon\"   (keydown.enter)=\"onDelete(opportunities.id)\"\n                      (keydown.space)=\"onDelete(opportunities.id)\"\n                      (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\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.OpportunitiesMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.title | textTruncate: 20 }}\n              </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=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n      </div>\n      <div *ngIf=\"opportunitiesInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.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\">Opportunities Location</h5>\n      <div>\n        <ng-template [ngIf]=\"opportunitiesGeography\">\n          <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"opportunitiesGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!opportunitiesGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8$2.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: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesListComponent, decorators: [{
             type: Component,