@posiwise/smart-crm 0.0.71 → 0.0.72

package/fesm2022/posiwise-smart-crm.mjs

@@ -3629,11 +3629,11 @@ class SmartCrmContactComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmContactComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmContactComponent, isStandalone: false, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    @if (!accountData?.name) {\n      <h2>Contacts</h2>\n    }\n    @if (accountData?.name) {\n      <h3\n        class=\"mb-2\">\n        {{ accountData.name }}\n        @if (hasAccess || accountData.owner_id === userId) {\n          <span [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n        }\n      </h3>\n    }\n    @if (accountData?.location) {\n      <h4\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    }\n    @if (accountData?.tel) {\n      <h4>Tel: {{ accountData.tel }}</h4>\n    }\n    @if (accountData?.company_url) {\n      <h4>\n        URL:\n        <a href=\"{{ accountData.company_url }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          {{ accountData.company_url }}\n        </a>\n      </h4>\n    }\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    @if (accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (!accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (accountData?.name) {\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        >\n        <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n      </a>\n    }\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\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 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-select\n            [options]=\"potential\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"filterByPotentials\"\n            [placeholder]=\"'Select Priority'\"\n            (onChange)=\"filterByPotential($event.value)\">\n          </p-select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n          <p-multiSelect inputId=\"crm-contacts-select-labels\" [(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 inputId=\"crm-contacts-select-account\" [(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            <label for=\"smart-crm-contacts-search\" class=\"visually-hidden\">Search contact</label>\n            <input type=\"text\" id=\"smart-crm-contacts-search\" name=\"smart-crm-contacts-search\" [(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\"\n          pSortableColumn=\"last_logged_in_at\">\n          Last Seen At\n          <p-sortIcon field=\"last_logged_in_at\"></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          @for (item of contact.labels; track item) {\n            <span class=\"badge bg-info m-1\"\n              >{{\n              item\n            }}</span>\n          }\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=\"Last Seen At\">\n          @if (contact?.last_logged_in_at) {\n            <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n              {{ contact?.last_logged_in_at | dateFormat }}\n            </span>\n          }\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            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n\n<ng-container>\n  @if (isLoaded && !accountData?.name) {\n    <div class=\"row mt-5\"\n      >\n      <!-- Drill Down -->\n      <div class=\"col-12 col-md-6 mb-3 analytics\">\n        <h5 class=\"accordion-heading\">Watch Closely</h5>\n        @if (contactInsight?.length) {\n          <div class=\"primeng-datatable-container table-responsive\"\n            >\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            @if (contactInsight?.length !== 0) {\n              <span class=\"total-records-count\">Total: {{ contactInsight.length }}</span>\n            }\n          </div>\n        }\n        @if (!contactInsight?.length) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\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          @if (contactGeography) {\n            <plotly-plot [data]=\"contactGeography?.data\"\n              [config]=\"contactGeography?.config\"\n              [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n            </plotly-plot>\n          }\n        </div>\n        @if (!contactGeography) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\n      </div>\n    </div>\n  }\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { 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: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i3$1.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: i7$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i7$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.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: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmContactComponent, isStandalone: false, selector: "pw-crm-contacts", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    @if (!accountData?.name) {\n      <h2>Contacts</h2>\n    }\n    @if (accountData?.name) {\n      <h3\n        class=\"mb-2\">\n        {{ accountData.name }}\n        @if (hasAccess || accountData.owner_id === userId) {\n          <span [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n        }\n      </h3>\n    }\n    @if (accountData?.location) {\n      <h4\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    }\n    @if (accountData?.tel) {\n      <h4>Tel: {{ accountData.tel }}</h4>\n    }\n    @if (accountData?.company_url) {\n      <h4>\n        URL:\n        <a href=\"{{ accountData.company_url }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          {{ accountData.company_url }}\n        </a>\n      </h4>\n    }\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    @if (accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (!accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (accountData?.name) {\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        >\n        <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n      </a>\n    }\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\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 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-select\n            [options]=\"potential\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"filterByPotentials\"\n            [placeholder]=\"'Select Priority'\"\n            (onChange)=\"filterByPotential($event.value)\"\n            appendTo=\"body\">\n          </p-select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n          <p-multiSelect inputId=\"crm-contacts-select-labels\" [(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 inputId=\"crm-contacts-select-account\" [(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            <label for=\"smart-crm-contacts-search\" class=\"visually-hidden\">Search contact</label>\n            <input type=\"text\" id=\"smart-crm-contacts-search\" name=\"smart-crm-contacts-search\" [(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\"\n          pSortableColumn=\"last_logged_in_at\">\n          Last Seen At\n          <p-sortIcon field=\"last_logged_in_at\"></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          @for (item of contact.labels; track item) {\n            <span class=\"badge bg-info m-1\"\n              >{{\n              item\n            }}</span>\n          }\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=\"Last Seen At\">\n          @if (contact?.last_logged_in_at) {\n            <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n              {{ contact?.last_logged_in_at | dateFormat }}\n            </span>\n          }\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            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n\n<ng-container>\n  @if (isLoaded && !accountData?.name) {\n    <div class=\"row mt-5\"\n      >\n      <!-- Drill Down -->\n      <div class=\"col-12 col-md-6 mb-3 analytics\">\n        <h5 class=\"accordion-heading\">Watch Closely</h5>\n        @if (contactInsight?.length) {\n          <div class=\"primeng-datatable-container table-responsive\"\n            >\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            @if (contactInsight?.length !== 0) {\n              <span class=\"total-records-count\">Total: {{ contactInsight.length }}</span>\n            }\n          </div>\n        }\n        @if (!contactInsight?.length) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\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          @if (contactGeography) {\n            <plotly-plot [data]=\"contactGeography?.data\"\n              [config]=\"contactGeography?.config\"\n              [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n            </plotly-plot>\n          }\n        </div>\n        @if (!contactGeography) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\n      </div>\n    </div>\n  }\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { 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: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i3$1.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: i7$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i7$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.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: i15.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i11$1.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-crm-contacts', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    @if (!accountData?.name) {\n      <h2>Contacts</h2>\n    }\n    @if (accountData?.name) {\n      <h3\n        class=\"mb-2\">\n        {{ accountData.name }}\n        @if (hasAccess || accountData.owner_id === userId) {\n          <span [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n        }\n      </h3>\n    }\n    @if (accountData?.location) {\n      <h4\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    }\n    @if (accountData?.tel) {\n      <h4>Tel: {{ accountData.tel }}</h4>\n    }\n    @if (accountData?.company_url) {\n      <h4>\n        URL:\n        <a href=\"{{ accountData.company_url }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          {{ accountData.company_url }}\n        </a>\n      </h4>\n    }\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    @if (accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (!accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (accountData?.name) {\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        >\n        <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n      </a>\n    }\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\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 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-select\n            [options]=\"potential\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"filterByPotentials\"\n            [placeholder]=\"'Select Priority'\"\n            (onChange)=\"filterByPotential($event.value)\">\n          </p-select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n          <p-multiSelect inputId=\"crm-contacts-select-labels\" [(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 inputId=\"crm-contacts-select-account\" [(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            <label for=\"smart-crm-contacts-search\" class=\"visually-hidden\">Search contact</label>\n            <input type=\"text\" id=\"smart-crm-contacts-search\" name=\"smart-crm-contacts-search\" [(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\"\n          pSortableColumn=\"last_logged_in_at\">\n          Last Seen At\n          <p-sortIcon field=\"last_logged_in_at\"></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          @for (item of contact.labels; track item) {\n            <span class=\"badge bg-info m-1\"\n              >{{\n              item\n            }}</span>\n          }\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=\"Last Seen At\">\n          @if (contact?.last_logged_in_at) {\n            <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n              {{ contact?.last_logged_in_at | dateFormat }}\n            </span>\n          }\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            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n\n<ng-container>\n  @if (isLoaded && !accountData?.name) {\n    <div class=\"row mt-5\"\n      >\n      <!-- Drill Down -->\n      <div class=\"col-12 col-md-6 mb-3 analytics\">\n        <h5 class=\"accordion-heading\">Watch Closely</h5>\n        @if (contactInsight?.length) {\n          <div class=\"primeng-datatable-container table-responsive\"\n            >\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            @if (contactInsight?.length !== 0) {\n              <span class=\"total-records-count\">Total: {{ contactInsight.length }}</span>\n            }\n          </div>\n        }\n        @if (!contactInsight?.length) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\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          @if (contactGeography) {\n            <plotly-plot [data]=\"contactGeography?.data\"\n              [config]=\"contactGeography?.config\"\n              [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n            </plotly-plot>\n          }\n        </div>\n        @if (!contactGeography) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\n      </div>\n    </div>\n  }\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', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    @if (!accountData?.name) {\n      <h2>Contacts</h2>\n    }\n    @if (accountData?.name) {\n      <h3\n        class=\"mb-2\">\n        {{ accountData.name }}\n        @if (hasAccess || accountData.owner_id === userId) {\n          <span [routerLink]=\"['/' + subscription?.slug + routers.accounts, accountData.id]\"><i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i></span>\n        }\n      </h3>\n    }\n    @if (accountData?.location) {\n      <h4\n      class=\"mb-1\">Location: {{ accountData.location }}</h4>\n    }\n    @if (accountData?.tel) {\n      <h4>Tel: {{ accountData.tel }}</h4>\n    }\n    @if (accountData?.company_url) {\n      <h4>\n        URL:\n        <a href=\"{{ accountData.company_url }}\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\">\n          {{ accountData.company_url }}\n        </a>\n      </h4>\n    }\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    @if (accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd, accountId]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (!accountData?.name) {\n      <a class=\"btn btn-sm btn-outline-primary float-end\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n        >\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.AddContact' | transloco }}\n      </a>\n    }\n    @if (accountData?.name) {\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        >\n        <i class=\"fa fa-plus-list\" aria-hidden=\"true\"></i>\n        {{ 'Crm.ContactMessage.ShowAllContacts' | transloco }}\n      </a>\n    }\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 text-center mt-3\"\n    >\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 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-select\n            [options]=\"potential\"\n            optionLabel=\"label\"\n            optionValue=\"value\"\n            [(ngModel)]=\"filterByPotentials\"\n            [placeholder]=\"'Select Priority'\"\n            (onChange)=\"filterByPotential($event.value)\"\n            appendTo=\"body\">\n          </p-select>\n        </div>\n        <div class=\"col-sm-3 col-6\">\n          <p-multiSelect inputId=\"crm-contacts-select-labels\" [(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 inputId=\"crm-contacts-select-account\" [(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            <label for=\"smart-crm-contacts-search\" class=\"visually-hidden\">Search contact</label>\n            <input type=\"text\" id=\"smart-crm-contacts-search\" name=\"smart-crm-contacts-search\" [(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\"\n          pSortableColumn=\"last_logged_in_at\">\n          Last Seen At\n          <p-sortIcon field=\"last_logged_in_at\"></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          @for (item of contact.labels; track item) {\n            <span class=\"badge bg-info m-1\"\n              >{{\n              item\n            }}</span>\n          }\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=\"Last Seen At\">\n          @if (contact?.last_logged_in_at) {\n            <span [ngClass]=\"lastSeenAtTextClass(contact?.last_logged_in_at)\">\n              {{ contact?.last_logged_in_at | dateFormat }}\n            </span>\n          }\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            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n            @if (\n              hasAccess ||\n              contact.owner_id === userId ||\n              contact.crm_account.owner_id === userId\n              ) {\n              <li\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            }\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (data.object_count === 0 && data.unfiltered_count !== 0) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n  }\n  @if (data.object_count !== 0) {\n    <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n  }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n\n<ng-container>\n  @if (isLoaded && !accountData?.name) {\n    <div class=\"row mt-5\"\n      >\n      <!-- Drill Down -->\n      <div class=\"col-12 col-md-6 mb-3 analytics\">\n        <h5 class=\"accordion-heading\">Watch Closely</h5>\n        @if (contactInsight?.length) {\n          <div class=\"primeng-datatable-container table-responsive\"\n            >\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            @if (contactInsight?.length !== 0) {\n              <span class=\"total-records-count\">Total: {{ contactInsight.length }}</span>\n            }\n          </div>\n        }\n        @if (!contactInsight?.length) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\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          @if (contactGeography) {\n            <plotly-plot [data]=\"contactGeography?.data\"\n              [config]=\"contactGeography?.config\"\n              [layout]=\"contactGeography?.layout\"  [useResizeHandler]=\"contactGeography ? true : false\">\n            </plotly-plot>\n          }\n        </div>\n        @if (!contactGeography) {\n          <div>\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        }\n      </div>\n    </div>\n  }\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 {