@posiwise/smart-crm 0.0.75 → 0.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -51,11 +51,10 @@ import { PlotlyViaCDNModule } from 'angular-plotly.js';
|
|
|
51
51
|
import * as i9$1 from 'primeng/multiselect';
|
|
52
52
|
import * as i18 from 'primeng/tooltip';
|
|
53
53
|
import { __decorate, __metadata } from 'tslib';
|
|
54
|
-
import * as i12$1 from '@posiwise/utils';
|
|
55
54
|
import { ValidateForm, handleDateRangeSelection, QuillHelper } from '@posiwise/utils';
|
|
56
55
|
import { takeUntil } from 'rxjs/operators';
|
|
57
56
|
import * as i2$3 from '@posiwise/admin-module-utils';
|
|
58
|
-
import * as i12$
|
|
57
|
+
import * as i12$1 from 'ngx-quill';
|
|
59
58
|
import { QuillModule } from 'ngx-quill';
|
|
60
59
|
import * as i2$4 from '@angular/platform-browser';
|
|
61
60
|
import * as i9$2 from '@angular/cdk/drag-drop';
|
|
@@ -644,11 +643,11 @@ class SmartCrmCompanyFilesComponent extends AppBaseComponent {
|
|
|
644
643
|
super.ngOnDestroy();
|
|
645
644
|
}
|
|
646
645
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanyFilesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
647
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompanyFilesComponent, isStandalone: false, selector: "pw-smart-crm-company-files", inputs: { accountId: "accountId", contactId: "contactId", opportunityId: "opportunityId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\n<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n </a>\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 actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Files...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n @if (file.crm_account_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n }\n </td>\n <td data-head=\"Contact\">\n @if (file.crm_contact_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n }\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess || file.owner_id === userId) {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-files-file-upload\">\n <input type=\"file\"\n id=\"account-files-file-upload\"\n name=\"account-files-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
646
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompanyFilesComponent, isStandalone: false, selector: "pw-smart-crm-company-files", inputs: { accountId: "accountId", contactId: "contactId", opportunityId: "opportunityId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\n<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n </a>\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 actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Files...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n @if (file.crm_account_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n }\n </td>\n <td data-head=\"Contact\">\n @if (file.crm_contact_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n }\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess || file.owner_id === userId) {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-files-file-upload\">\n <input type=\"file\"\n id=\"account-files-file-upload\"\n name=\"account-files-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
648
647
|
}
|
|
649
648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanyFilesComponent, decorators: [{
|
|
650
649
|
type: Component,
|
|
651
|
-
args: [{ selector: 'pw-smart-crm-company-files', standalone: false, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\n<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n </a>\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 actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Files...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n @if (file.crm_account_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n }\n </td>\n <td data-head=\"Contact\">\n @if (file.crm_contact_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n }\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess || file.owner_id === userId) {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-files-file-upload\">\n <input type=\"file\"\n id=\"account-files-file-upload\"\n name=\"account-files-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n" }]
|
|
650
|
+
args: [{ selector: 'pw-smart-crm-company-files', standalone: false, template: "<div class=\"row d-none\">\n <div class=\"col-12 mb-3\">\n <h2>Account Files</h2>\n </div>\n</div>\n<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-file\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add File' | transloco }}\n </a>\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 actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"allFiles\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-files-search\"\n name=\"crm-account-files-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Files...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"owner_id\">\n {{ 'Crm.AccountFilesMessage.Owner' | transloco }}\n <p-sortIcon field=\"owner_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_account_id\">\n {{ 'Crm.AccountFilesMessage.Account' | transloco }}\n <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_contact_id\">\n {{ 'Crm.AccountFilesMessage.Contact' | transloco }}\n <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"crm_opportunity_id\">\n {{ 'Crm.AccountFilesMessage.Opportunity' | transloco }}\n <p-sortIcon field=\"crm_opportunity_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"file\">\n {{ 'Crm.AccountFilesMessage.File' | transloco }}\n <p-sortIcon field=\"file\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-file>\n <tr>\n <td data-head=\"Owner\">{{ file.owner?.first_name }} {{ file.owner?.last_name }}</td>\n <td data-head=\"Account\">\n @if (file.crm_account_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.accountInfo,\n file.crm_account_id\n ]\">{{ file.crm_account?.name }}</a>\n }\n </td>\n <td data-head=\"Contact\">\n @if (file.crm_contact_id) {\n <a\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n file.crm_contact_id\n ]\">{{ file.crm_contact | ifNameNullShowEmail }}</a>\n }\n </td>\n <td data-head=\"Opportunities\">{{ file?.crm_opportunity?.title }}</td>\n <td data-head=\"Files\">\n <a href=\"{{ file.file?.url }}\"\n target=\"blank\">{{\n file.file.url.split('?')[0].split('/')[\n file.file.url.split('?')[0].split('/').length - 1\n ]\n }}</a>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess || file.owner_id === userId) {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(file.id)\"\n (keydown.space)=\"onDelete(file.id)\"\n (click)=\"onDelete(file.id)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountFilesMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-files-file-upload\">\n <input type=\"file\"\n id=\"account-files-file-upload\"\n name=\"account-files-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n" }]
|
|
652
651
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { accountId: [{
|
|
653
652
|
type: Input
|
|
654
653
|
}], contactId: [{
|
|
@@ -1314,11 +1313,11 @@ class SmartCrmCompanyInfoComponent extends AppBaseComponent {
|
|
|
1314
1313
|
super.ngOnDestroy();
|
|
1315
1314
|
}
|
|
1316
1315
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanyInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.SubscriptionService }, { token: i2.GeoService }, { token: i2.CommonService }, { token: i2$2.NgbModal }, { token: i2.AuthService }, { token: i0.ChangeDetectorRef }, { token: i2.LogoCacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompanyInfoComponent, isStandalone: false, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\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 Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n @if (countries$ | async; as countries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n @if (isFormEdit && data?.owner_id) {\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n >\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n }\n @if (!isFormEdit || !data?.owner_id) {\n <p-autoComplete\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n @if (isFormEdit && data?.company_url) {\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n >{{ data?.company_url }}</a>\n }\n @if (!isFormEdit || !data?.company_url) {\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n }\n </div>\n @if (data?.tel) {\n <div class=\"mb-3\"\n >\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n }\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n @if (!isFormEdit) {\n <div\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n }\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n >\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n @if (!updating || actionId !== item.id) {\n <span\n class=\"font-small-3\">\n {{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n }\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\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 + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(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 (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media(max-width:768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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.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: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.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.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i20.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { 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: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "component", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: ["accountId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1316
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompanyInfoComponent, isStandalone: false, selector: "pw-smart-crm-company-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\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 Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n @if (countries$ | async; as countries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n @if (isFormEdit && data?.owner_id) {\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n >\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n }\n @if (!isFormEdit || !data?.owner_id) {\n <p-autoComplete\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n @if (isFormEdit && data?.company_url) {\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n >{{ data?.company_url }}</a>\n }\n @if (!isFormEdit || !data?.company_url) {\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n }\n </div>\n @if (data?.tel) {\n <div class=\"mb-3\"\n >\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n }\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n @if (!isFormEdit) {\n <div\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n }\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n >\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n @if (!updating || actionId !== item.id) {\n <span\n class=\"font-small-3\">\n {{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n }\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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\" class=\"actions-list-three\">{{ '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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\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 + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(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 (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media(max-width:768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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.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: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.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.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i13$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i13$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i20.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { 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: SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "component", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: ["accountId"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1318
1317
|
}
|
|
1319
1318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanyInfoComponent, decorators: [{
|
|
1320
1319
|
type: Component,
|
|
1321
|
-
args: [{ selector: 'pw-smart-crm-company-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\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 Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n @if (countries$ | async; as countries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n @if (isFormEdit && data?.owner_id) {\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n >\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n }\n @if (!isFormEdit || !data?.owner_id) {\n <p-autoComplete\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n @if (isFormEdit && data?.company_url) {\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n >{{ data?.company_url }}</a>\n }\n @if (!isFormEdit || !data?.company_url) {\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n }\n </div>\n @if (data?.tel) {\n <div class=\"mb-3\"\n >\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n }\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n @if (!isFormEdit) {\n <div\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n }\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n >\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n @if (!updating || actionId !== item.id) {\n <span\n class=\"font-small-3\">\n {{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n }\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\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 + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(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 (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media(max-width:768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
1320
|
+
args: [{ selector: 'pw-smart-crm-company-info', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-0\">\n <div class=\"me-auto mb-0\">\n <h2 class=\"mb-0\">\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 Account Info\n </h2>\n </div>\n <a class=\"btn btn-sm btn-outline-primary float-end mb-3\"\n data-cy=\"add-opportunities\"\n (click)=\"navigateToAddOpportunities()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n </a>\n </div>\n @if (!isDataLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner> </p-progressSpinner>\n </div>\n }\n @if (isDataLoaded) {\n <div>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"user-info p-3 card pb-0 h-auto\">\n <div class=\"mb-2 text-center\">\n <a class=\"profile-image\">\n <img alt=\"Profile Logo\"\n width=\"100\"\n height=\"100\"\n [src]=\"getAccountLogo(data?.company_url)\"\n class=\"img-fluid company-logo\"\n (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n </a>\n </div>\n <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n <h4 class=\"d-inline-block name-block\">\n About @if (data?.id) {\n <span>{{ data.name }}</span>\n }\n </h4>\n @if (isFormEdit && (userId === data?.owner?.id || hasAccess)) {\n <a href=\"#\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"$event.preventDefault(); isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()\">{{ 'Button.Edit' | transloco }}</a>\n }\n </div>\n <form [formGroup]=\"aboutControls\"\n [class.isDisabled]=\"isFormEdit\">\n <div class=\"mb-3\">\n <label class=\"label mb-0\" for=\"crm-account-info-name\">{{ 'Crm.AccountMessage.Name' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-name\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </div>\n <div class=\"mb-3\">\n <span class=\"pw-label-style label mb-0\" id=\"crm-account-info-location-label\">{{\n 'Crm.AccountMessage.Location' | transloco\n }}</span>\n <input ngx-gp-autocomplete\n id=\"crm-account-info-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-account-info-location-label'\"\n class=\"form-control rounded-0 ps-1 user-value\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n @if (countries$ | async; as countries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-country-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Country' | transloco\n }}<span class=\"text-danger required-icon\">*</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-country-label'\"\n [options]=\"countries\"\n formControlName=\"country\"\n [ngClass]=\"{ 'is-invalid': submitted && f['country'].errors }\"\n [placeholder]=\"'Select Country'\"\n optionValue=\"code\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3 ui-fluid skills-modal\">\n <span class=\"pw-label-style label mb-2\" id=\"crm-account-info-owner-label\">{{ 'Crm.AccountMessage.Owner' | transloco }}</span>\n @if (isFormEdit && data?.owner_id) {\n <p class=\"form-control d-block pb-2 ps-1 user-value\"\n >\n {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}\n </p>\n }\n @if (!isFormEdit || !data?.owner_id) {\n <p-autoComplete\n [attr.aria-labelledby]=\"'crm-account-info-owner-label'\"\n [suggestions]=\"filteredOwner\"\n formControlName=\"owner_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search owner\"\n [multiple]=\"false\">\n </p-autoComplete>\n }\n </div>\n <div class=\"mb-3\">\n <span class=\"label mb-0 d-block\" id=\"crm-account-info-company_url-label\">{{\n 'Crm.AccountMessage.CompanyUrl' | transloco\n }}</span>\n @if (isFormEdit && data?.company_url) {\n <a [href]=\"data?.company_url\"\n target=\"blank\"\n class=\"form-control d-block pb-2 ps-1 user-value\"\n >{{ data?.company_url }}</a>\n }\n @if (!isFormEdit || !data?.company_url) {\n <input\n type=\"text\"\n id=\"crm-account-info-company_url\"\n class=\"form-control rounded-0 ps-1 user-value\"\n [attr.aria-labelledby]=\"'crm-account-info-company_url-label'\"\n formControlName=\"company_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n }\n </div>\n @if (data?.tel) {\n <div class=\"mb-3\"\n >\n <label class=\"label mb-0\" for=\"crm-account-info-tel\">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>\n <input type=\"text\"\n id=\"crm-account-info-tel\"\n class=\"form-control rounded-0 ps-1 user-value\"\n formControlName=\"tel\" />\n </div>\n }\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-organization-type-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationType' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-organization-type-label'\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_type_id'].errors }\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-industry-label\" class=\"pw-label-style\">{{ 'Organization.OrganizationIndustry' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-industry-label'\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_industry_id'].errors }\"\n [placeholder]=\"'Select Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3\"\n >\n <span id=\"crm-account-info-size-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Size' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-size-label'\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['organization_size_id'].errors }\"\n [placeholder]=\"'Select Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n }\n <div class=\"mb-3\">\n <span id=\"crm-account-info-status-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Status' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-status-label'\"\n [options]=\"status\"\n formControlName=\"status\"\n [ngClass]=\"{ 'is-invalid': submitted && f['status'].errors }\"\n [placeholder]=\"'Select Status'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-priority-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Priority' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-priority-label'\"\n [options]=\"priority\"\n formControlName=\"priority\"\n [ngClass]=\"{ 'is-invalid': submitted && f['priority'].errors }\"\n [placeholder]=\"'Select Priority'\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <span id=\"crm-account-info-source-label\" class=\"pw-label-style\">{{ 'Crm.AccountMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-account-info-source-label'\"\n [options]=\"source\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [placeholder]=\"'Select Source'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </div>\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Description' | transloco\"\n name=\"description\">\n <textarea rows=\"5\"\n type=\"text\"\n class=\"form-control\"\n formControlName=\"description\"\n id=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n </pw-input-container>\n </div>\n @if (!isFormEdit) {\n <div\n class=\"text-end form-action-buttons\">\n <input type=\"button\"\n class=\"btn btn-outline-primary\"\n (click)=\"isFormEdit = !isFormEdit; getAccountDetails()\"\n value=\"Cancel\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary ms-3\"\n (click)=\"updateAccountInfo()\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n }\n </form>\n </div>\n </div>\n <div class=\"col-12 col-md-8\">\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Notes</a>\n <ng-template ngbNavContent>\n <form [formGroup]=\"actionControls\"\n (ngSubmit)=\"onSave()\">\n <label for=\"crm-account-info-comment\" class=\"visually-hidden\">Note</label>\n <textarea id=\"crm-account-info-comment\"\n name=\"comment\"\n class=\"form-control\"\n formControlName=\"comment\"\n rows=\"6\"></textarea>\n @if (\n actionControls.get('comment').touched &&\n actionControls.get('comment').invalid\n ) {\n <p class=\"text-danger\"\n >\n Note Required\n </p>\n }\n @if (actions?.length) {\n <div\n class=\"d-block clear-both pt-3\">\n @for (action of actions; track action.id; let i = $index) {\n @if (action.visible) {\n <button\n type=\"button\"\n [class.active]=\"\"\n class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n (click)=\"showDatePicker($event, action.id); d.toggle()\">\n {{ action.name }}\n </button>\n }\n }\n @if (submitAction && actionControls.get('crm_action_id').invalid) {\n <div class=\"text-danger\"\n >\n Please select an action\n </div>\n }\n <div class=\"row mt-3\">\n <div class=\"col-12 col-sm-4\">\n <label for=\"crm-account-info-when\" class=\"visually-hidden\">Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-account-info-when\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"when\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.toggle()\" />\n </div>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4 ps-0\">\n <p-autoComplete inputId=\"crm-account-info-search-contact\"\n [suggestions]=\"filteredContact\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n [dropdown]=\"true\"\n (completeMethod)=\"searchContact($event)\"\n (onSelect)=\"selectContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\"w-100\"\n placeholder=\"Search contact\"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n <div class=\"col-sm-4 pe-0 completed-toggle\">\n <div class=\"mb-3\">\n <ui-switch\n formControlName=\"completed\"\n name=\"completed\">\n </ui-switch>\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"float-end\">\n <a class=\"btn btn-outline-primary me-0 me-sm-2\"\n (keydown.enter)=\"openModal(content)\"\n (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonDisable\"\n class=\"btn btn-primary mt-2 mb-2\">Submit Note</button>\n </div>\n @if (buttonDisable) {\n <div\n class=\"no-actions pt-4\">\n <pw-no-data [withImage]=\"true\" [message]=\"\n 'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco\n \">\n </pw-no-data>\n </div>\n }\n </form>\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!accountComments?.length && isLoaded) {\n <div\n class=\"no-actions pt-2\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoActionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n @if (accountComments?.length) {\n <div>\n <div id=\"timeline\"\n class=\"pt-3 clear-both timeline-center timeline-wrapper timeline-container\"\n infiniteScroll\n [infiniteScrollDistance]=\"2\"\n [infiniteScrollThrottle]=\"50\"\n [infiniteScrollContainer]=\"selector\"\n [fromRoot]=\"true\"\n (scrolled)=\"onScrollTimeline()\">\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n </ul>\n <ul class=\"timeline\">\n <li class=\"timeline-line\"></li>\n @for (\n item of accountComments; track\n item.id; let i = $index; let odd = $odd; let even = $even; let last = $last; let first = $first) {\n <li class=\"timeline-item\"\n [ngClass]=\"{ 'mt-5': odd || last }\"\n >\n <div class=\"timeline-badge\">\n <span class=\"bg-red bg-lighten-1\">\n <span class=\"timeline-year\">\n <span class=\"d-block date-year\">{{\n item.when | date: 'medium' | slice: 0:3\n }}</span>\n <span>{{ item.year }}</span></span>\n </span>\n </div>\n <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n <div class=\"card-header py-4\">\n <div class=\"mb-0 clearfix\">\n <textarea type=\"text\"\n [id]=\"'crm-account-timeline-comment-' + item.id\"\n name=\"comment\"\n class=\"comment-field form-control p-0\"\n [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n <div class=\"auto-complete mb-3 ui-fluid skills-modal\">\n <p-autoComplete [(ngModel)]=\"item.crm_contact\"\n [suggestions]=\"filteredContactComment\"\n dataKey=\"id\"\n optionLabel=\"first_name\"\n dropdown=\" true \"\n (completeMethod)=\"\n searchContactInComment($event)\n \"\n (onSelect)=\"selectCommentContact($event)\"\n (onBlur)=\"OnContactBlur()\"\n styleClass=\" w-100 \"\n placeholder=\" Search contact \"\n [multiple]=\"false\"\n (onDropdownClick)=\"onDropdownClick()\">\n </p-autoComplete>\n </div>\n @if (\n !showFullComment || item.id !== commentId\n ) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment | slice: 0:170\n }}@if (item.comment.length > 170) {\n <a\n class=\"text-secondary\"\n (click)=\"\n showFullComment = true;\n commentId = item.id\n \">...show more\n </a>\n }\n </p>\n }\n @if (showFullComment && item.id === commentId) {\n <p class=\"float-start mb-0\"\n >\n {{ item.comment }}\n @if (\n item.comment.length > 170 &&\n showFullComment\n ) {\n <a\n (click)=\"showFullComment = false\"\n class=\"text-secondary\">...show less</a>\n }\n </p>\n }\n @if (userId === item.owner_id || hasAccess) {\n <button class=\"btn btn-md edit-btn float-end py-0\"\n (click)=\"showEditControls($event, item)\"\n >\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n <div class=\"card-subtitle text-muted my-0 clearfix\">\n <div class=\"float-start\">\n @if (!updating || actionId !== item.id) {\n <span\n class=\"font-small-3\">\n {{ item.when }}</span>\n }\n @if (updating && actionId === item.id) {\n <input\n [id]=\"'crm-account-info-when-' + item.id\"\n name=\"when\"\n placeholder=\"dd-mmm-yyyy\"\n value=\"{{ item.when }}\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (focus)=\"d.toggle()\"\n (dateSelect)=\"onDateSelect($event, item)\"\n aria-label=\"Date\" />\n }\n </div>\n @if (userId === item.owner_id || hasAccess) {\n <button type=\" button\"\n class=\"btn btn-sm float-end when-btn py-0\"\n (click)=\"showDatePickerUpdate(item.id)\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></i>\n </button>\n }\n </div>\n @if (!item.cancelled && !item.completed) {\n <p [class.text-danger]=\"!item.color\"\n class=\"mb-0\">\n {{ item.due }}\n </p>\n }\n @if (item.crm_contact) {\n <a class=\"text-secondary action-owner\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n item.crm_contact.id\n ]\">{{ item.crm_contact.first_name }}\n {{ item.crm_contact.last_name || '' }}</a>\n }\n <p>\n By\n {{\n item.owner.first_name +\n ' ' +\n item.owner.last_name\n }}\n </p>\n <span class=\"badge bg-primary\">{{\n item?.crm_action?.name\n }}</span>\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <span\n class=\"badge bg-success ms-2\">Open</span>\n }\n @if (\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as completed\"\n aria-label=\"Set as completed\"\n class=\"me-3 ms-3\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \">\n <i\n class=\"fa fa-tasks completed\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n !item.cancelled &&\n !item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as cancelled\"\n aria-label=\"Set as cancelled\"\n href=\"#\"\n (click)=\"$event.preventDefault(); setAsCancelled(item.id, item)\">\n <i\n class=\"fa fa-times delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n @if (\n item.completed &&\n (userId === item.owner_id || hasAccess)\n ) {\n <a\n ngbTooltip=\"Set as UnCompleted\"\n aria-label=\"Set as UnCompleted\"\n href=\"#\"\n (click)=\"\n $event.preventDefault();\n setAsCompletedOrUncompleted(\n item.id,\n item,\n item.completed\n )\n \"\n class=\"ms-2\">\n <i\n class=\"far fa-window-close\"\n aria-hidden=\"true\"\n ></i>\n </a>\n }\n <div class=\"control-btns mt-3 text-end form-action-buttons\">\n <button type=\"button\"\n class=\"btn btn-sm btn-outline-default me-2\"\n (click)=\"showEditControls(undefined, '')\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button class=\"btn btn-sm btn-primary\"\n type=\"button\"\n (click)=\"updateComment(item)\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </div>\n </li>\n }\n </ul>\n </div>\n </div>\n }\n </ng-template>\n </li>\n @if (canViewContactsTab()) {\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Contacts</a>\n <ng-template ngbNavContent>\n <div class=\"row\">\n <div class=\"col-12 mb-3\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.contactAdd,\n accountId\n ]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.ContactMessage.AddContact' | transloco }}\n </a>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table class=\"table\"\n #dt\n [value]=\"contacts\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-account-info-search-contact\"\n name=\"crm-account-info-search-contact\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.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=\"headline\">\n {{ 'Crm.ContactMessage.Headline' | transloco }}\n <p-sortIcon field=\"headline\"></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\" class=\"actions-list-three\">{{ '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 [routerLink]=\"[\n '/' + subscription?.slug + routers.contactInfo,\n contact.id\n ]\"> {{ (contact.first_name || '') + ' ' + (contact.last_name || '') | textTruncate: 20 }}</a>\n </td>\n <td data-head=\"OwnerName\">\n {{ contact.owner | ifNameNullShowEmail }}\n </td>\n <td data-head=\"Headline\"\n class=\"headline-content\">\n {{ contact?.headline | textTruncate: 20 }}\n </td>\n <td data-head=\"LastSeenAt\">\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 + routers.contactInfo,\n contact.id\n ]\">\n <i\n class=\"fa fa-eye see-icon\"\n aria-hidden=\"true\"\n ></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]=\"[\n '/' +\n subscription?.slug +\n routers.opportunityAdd\n ]\"\n [queryParams]=\"{ contact_id: contact.id }\">\n <i\n class=\"fa fa-plus-circle add-icon\"\n aria-hidden=\"true\"\n ></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 '/' +\n subscription?.slug +\n routers.contactDetails,\n contact.id\n ]\">\n <i\n class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"\n ></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)=\"onDeleteContact(contact.id)\"\n (keydown.space)=\"onDeleteContact(contact.id)\"\n (click)=\"onDeleteContact(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 (totalRecords === 0 && totalRecordsUnFiltered !== 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 (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.ContactsAdminMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n @if (hasAccess) {\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Versioning</a>\n <ng-template ngbNavContent>\n @for (versioning of accountVersioning; track versioning.item_id) {\n <div>\n <p>\n <strong>Event: </strong>{{ versioning.event }} |\n <strong>Author: </strong>@if (versioning?.author) {\n <a\n [routerLink]=\"['/members', versioning?.author?.slug]\">{{ versioning?.author | ifNameNullShowEmail }}</a>\n }\n | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />\n <strong>Object: </strong>{{ versioning.object | json }}\n </p>\n <hr />\n </div>\n }\n @if (accountVersioning?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoVersionsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </ng-template>\n </li>\n }\n <li [ngbNavItem]=\"4\">\n <a ngbNavLink>Files</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-company-files [accountId]=\"accountId\"></pw-smart-crm-company-files>\n </ng-template>\n </li>\n @if (hasAccess) {\n <li [ngbNavItem]=\"5\">\n <a ngbNavLink>Invoices</a>\n <ng-template ngbNavContent>\n <pw-smart-crm-account-invoices [accountId]=\"accountId\"/>\n </ng-template>\n </li>\n }\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n </div>\n </div>\n}\n</div>\n<ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <div class=\"row p-2\">\n <div class=\"col-12\">\n <div class=\"upload-box\">\n <div class=\"upload-box-content\">\n <div class=\"drop-container\"\n ngFileDrop\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\">\n <p>\n Drag files here or\n <label class=\"upload-button\" for=\"account-info-file-upload\">\n <input type=\"file\"\n id=\"account-info-file-upload\"\n name=\"account-info-file-upload\"\n ngFileSelect\n [options]=\"options\"\n (uploadOutput)=\"onUploadOutput($event)\"\n [uploadInput]=\"uploadInput\"\n multiple />\n browse\n </label>\n to upload.\n </p>\n </div>\n @for (f of files; track f.name; let i = $index) {\n <div class=\"upload-item\"\n >\n <div class=\"upload-item-content\">\n <div class=\"filename\">\n <div class=\"filename-left\">\n <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n <span>{{ f.name }}</span>\n </div>\n </div>\n <div class=\"progress-content\">\n <div class=\"progress\">\n <span class=\"bar\"\n [style.width]=\"f?.progress?.data?.percentage + '%'\"\n [class.is-done]=\"f['uploaded']\"></span>\n </div>\n </div>\n <div class=\"progress-text-content\">\n <span class=\"progress-text\"\n [class.is-done]=\"f['uploaded']\">\n @if (!f['uploaded']) {\n <span>{{ f.progress?.data?.percentage - 1 }}%\n </span>\n }\n @if (f['uploaded']) {\n <span>100 %</span>\n }\n @if (!f['uploaded']) {\n <span>Uploading...</span>\n }\n @if (f['uploaded']) {\n <span>Done</span>\n }\n </span>\n @if (f.progress?.data?.percentage !== 0 && !f['uploaded']) {\n <span class=\"speed-and-eta-text\"\n >\n <span>{{ f.progress?.data?.speedHuman }} </span>\n <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n </span>\n }\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\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)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.control-btns{display:none}::ng-deep .p-overlay{width:100%!important;min-width:100%!important;max-width:100%!important;left:0!important}::ng-deep .p-autocomplete-items li{white-space:nowrap!important;overflow:auto!important;text-overflow:ellipsis!important}::ng-deep .p-autocomplete-items li:hover{text-overflow:clip!important}.name-block{width:85%}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.auto-complete{display:none;margin-top:10px}.show-controls .comment-field,.show-controls .auto-complete,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn,.show-controls .action-owner{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled input,.isDisabled textarea,.isDisabled p-dropdown,.isDisabled select{pointer-events:none}.isDisabled select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none!important}.timeline-card.card{min-height:auto}@media(max-width:768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.timeline-container{height:700px;overflow-y:scroll}.action-btn.active{color:#fff!important;background-color:var(--first)}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"] }]
|
|
1322
1321
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.SubscriptionService }, { type: i2.GeoService }, { type: i2.CommonService }, { type: i2$2.NgbModal }, { type: i2.AuthService }, { type: i0.ChangeDetectorRef }, { type: i2.LogoCacheService }, { type: Document, decorators: [{
|
|
1323
1322
|
type: Inject,
|
|
1324
1323
|
args: [DOCUMENT]
|
|
@@ -1651,11 +1650,11 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
|
|
|
1651
1650
|
super.ngOnDestroy();
|
|
1652
1651
|
}
|
|
1653
1652
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompaniesComponent, isStandalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-accounts-filter-industry\" 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 inputId=\"crm-accounts-filter-size\" 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 inputId=\"crm-accounts-filter-status\" 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 inputId=\"crm-accounts-filter-priority\" 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 inputId=\"crm-accounts-filter-source\" 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 <label for=\"crm-accounts-search-location\" class=\"visually-hidden\">Search location</label>\n <input id=\"crm-accounts-search-location\"\n name=\"crm-accounts-search-location\"\n ngx-gp-autocomplete\n class=\"form-control location\"\n #places=\"ngx-places\"\n [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\"\n (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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-accounts-search\"\n name=\"smart-crm-accounts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\">{{ 'Products' }}</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 @if (canViewMrr || userId) {\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}\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=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n @if (i === 0 && data?.accounts?.length) {\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\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 @if (account?.reason_to_cancel) {\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n }\n </a>\n </td>\n <td data-head=\"Products\">\n @if (account?.subscription_products && account.subscription_products.length > 0) {\n @for (product of account.subscription_products; track product) {\n <span\n [appDynamicBadge]=\"{\n itemsArray: productFeatureKeys,\n item: product.feature_key\n }\"\n color=\"blue-grey\"\n class=\"badge me-1 mb-1\">\n {{ product.feature_key }}\n </span>\n }\n }\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n @if (account.expected_mrr && (canViewMrr || account.owner_id === userId)) {\n <span>\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n }\n </td>\n }\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-yyyy' }}</td>\n <td data-head=\"Last Seen At\">\n @if (account?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n }\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_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n @if (account.status === 'Prospect') {\n <span class=\"badge bg-primary\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Inactive') {\n <span class=\"badge bg-secondary\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - New') {\n <span class=\"badge bg-info\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Inactive') {\n <span class=\"badge bg-warning\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Old') {\n <span class=\"badge bg-dark\">{{account.status}}</span>\n }\n @if (account.status === 'Dead') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Competitor') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Vendor') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Supplier') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Other') {\n <span class=\"badge bg-teal\">{{account.status}}</span>\n }\n </td>\n\n <td data-head=\"Priority\">\n @if (account.priority === 'A - Ideal Fit') {\n <span class=\"badge bg-success\">{{account.priority}}</span>\n }\n @if (account.priority === 'B - High Potential') {\n <span class=\"badge bg-primary\">{{account.priority}}</span>\n }\n @if (account.priority === 'C - Low Potential') {\n <span class=\"badge bg-warning\">{{account.priority}}</span>\n }\n @if (account.priority === 'D - Out of market') {\n <span class=\"badge bg-secondary\">{{account.priority}}</span>\n }\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 @if (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 }\n </ul>\n </td>\n </tr>\n</ng-template>\n<ng-template pTemplate=\"footer\">\n @if (data?.accounts?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n}\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<ng-container>\n @if (data.unfiltered_count !== 0 && isLoaded) {\n <div class=\"row mt-5\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n @if (accountActivities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\">\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 @if (accountInsight?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountActivities.length\" />\n }\n </div>\n }\n @if (accountActivities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.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\">Accounts Location</h5>\n <div>\n @if (accountGeography) {\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!accountGeography) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";: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;word-break:keep-all;white-space:nowrap}.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,.expected-mrr{word-break:keep-all;white-space:nowrap}.totals-row{background-color:#f8f9fa;font-weight:700}\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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i7.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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i12.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "dummyPath"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i18.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1653
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompaniesComponent, isStandalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"primeng-datatable-container actions-collapsed 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-industry\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-size\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-status\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-priority\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-source\" 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 <label for=\"crm-accounts-search-location\" class=\"visually-hidden\">Search location</label>\n <input id=\"crm-accounts-search-location\"\n name=\"crm-accounts-search-location\"\n ngx-gp-autocomplete\n class=\"form-control location\"\n #places=\"ngx-places\"\n [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\"\n (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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-accounts-search\"\n name=\"smart-crm-accounts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\">{{ 'Products' }}</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 @if (canViewMrr || userId) {\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}\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=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_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\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n</tr>\n</ng-template>\n<ng-template pTemplate=\"body\" let-account let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n @if (i === 0 && data?.accounts?.length) {\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\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 @if (account?.reason_to_cancel) {\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n }\n </a>\n </td>\n <td data-head=\"Products\">\n @if (account?.subscription_products && account.subscription_products.length > 0) {\n @for (product of account.subscription_products; track product) {\n <span\n [appDynamicBadge]=\"{\n itemsArray: productFeatureKeys,\n item: product.feature_key\n }\"\n color=\"blue-grey\"\n class=\"badge me-1 mb-1\">\n {{ product.feature_key }}\n </span>\n }\n }\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n @if (account.expected_mrr && (canViewMrr || account.owner_id === userId)) {\n <span>\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n }\n </td>\n }\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-yyyy' }}</td>\n <td data-head=\"Last Seen At\">\n @if (account?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n }\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_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n @if (account.status === 'Prospect') {\n <span class=\"badge bg-primary\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Inactive') {\n <span class=\"badge bg-secondary\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - New') {\n <span class=\"badge bg-info\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Inactive') {\n <span class=\"badge bg-warning\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Old') {\n <span class=\"badge bg-dark\">{{account.status}}</span>\n }\n @if (account.status === 'Dead') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Competitor') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Vendor') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Supplier') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Other') {\n <span class=\"badge bg-teal\">{{account.status}}</span>\n }\n </td>\n\n <td data-head=\"Priority\">\n @if (account.priority === 'A - Ideal Fit') {\n <span class=\"badge bg-success\">{{account.priority}}</span>\n }\n @if (account.priority === 'B - High Potential') {\n <span class=\"badge bg-primary\">{{account.priority}}</span>\n }\n @if (account.priority === 'C - Low Potential') {\n <span class=\"badge bg-warning\">{{account.priority}}</span>\n }\n @if (account.priority === 'D - Out of market') {\n <span class=\"badge bg-secondary\">{{account.priority}}</span>\n }\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 @if (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 }\n </ul>\n </td>\n </tr>\n</ng-template>\n<ng-template pTemplate=\"footer\">\n @if (data?.accounts?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n}\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<ng-container>\n @if (data.unfiltered_count !== 0 && isLoaded) {\n <div class=\"row mt-5\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n @if (accountActivities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\">\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 @if (accountInsight?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountActivities.length\" />\n }\n </div>\n }\n @if (accountActivities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.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\">Accounts Location</h5>\n <div>\n @if (accountGeography) {\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!accountGeography) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";: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;word-break:keep-all;white-space:nowrap}.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,.expected-mrr{word-break:keep-all;white-space:nowrap}.totals-row{background-color:#f8f9fa;font-weight:700}::ng-deep .primeng-datatable-container.actions-collapsed thead tr,::ng-deep .primeng-datatable-container.actions-collapsed tbody tr,::ng-deep .primeng-datatable-container.actions-collapsed .totals-row,::ng-deep .primeng-datatable-container.actions-collapsed tfoot tr{position:relative}::ng-deep .primeng-datatable-container.actions-collapsed thead th[class*=actions-list-],::ng-deep .primeng-datatable-container.actions-collapsed tbody td[data-head=Action],::ng-deep .primeng-datatable-container.actions-collapsed .totals-row td:last-child,::ng-deep .primeng-datatable-container.actions-collapsed tfoot td:last-child{position:absolute;top:0;right:0;bottom:0;width:auto;min-width:0;max-width:none;padding:0;border:0}\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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i7.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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i12.ClearBitIconComponent, selector: "pw-clearbit-icon", inputs: ["src", "altText", "dummyPath"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i18.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1655
1654
|
}
|
|
1656
1655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
|
|
1657
1656
|
type: Component,
|
|
1658
|
-
args: [{ selector: 'pw-smart-crm-companies', standalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-accounts-filter-industry\" 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 inputId=\"crm-accounts-filter-size\" 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 inputId=\"crm-accounts-filter-status\" 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 inputId=\"crm-accounts-filter-priority\" 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 inputId=\"crm-accounts-filter-source\" 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 <label for=\"crm-accounts-search-location\" class=\"visually-hidden\">Search location</label>\n <input id=\"crm-accounts-search-location\"\n name=\"crm-accounts-search-location\"\n ngx-gp-autocomplete\n class=\"form-control location\"\n #places=\"ngx-places\"\n [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\"\n (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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-accounts-search\"\n name=\"smart-crm-accounts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\">{{ 'Products' }}</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 @if (canViewMrr || userId) {\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}\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=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n @if (i === 0 && data?.accounts?.length) {\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\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 @if (account?.reason_to_cancel) {\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n }\n </a>\n </td>\n <td data-head=\"Products\">\n @if (account?.subscription_products && account.subscription_products.length > 0) {\n @for (product of account.subscription_products; track product) {\n <span\n [appDynamicBadge]=\"{\n itemsArray: productFeatureKeys,\n item: product.feature_key\n }\"\n color=\"blue-grey\"\n class=\"badge me-1 mb-1\">\n {{ product.feature_key }}\n </span>\n }\n }\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n @if (account.expected_mrr && (canViewMrr || account.owner_id === userId)) {\n <span>\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n }\n </td>\n }\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-yyyy' }}</td>\n <td data-head=\"Last Seen At\">\n @if (account?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n }\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_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n @if (account.status === 'Prospect') {\n <span class=\"badge bg-primary\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Inactive') {\n <span class=\"badge bg-secondary\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - New') {\n <span class=\"badge bg-info\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Inactive') {\n <span class=\"badge bg-warning\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Old') {\n <span class=\"badge bg-dark\">{{account.status}}</span>\n }\n @if (account.status === 'Dead') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Competitor') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Vendor') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Supplier') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Other') {\n <span class=\"badge bg-teal\">{{account.status}}</span>\n }\n </td>\n\n <td data-head=\"Priority\">\n @if (account.priority === 'A - Ideal Fit') {\n <span class=\"badge bg-success\">{{account.priority}}</span>\n }\n @if (account.priority === 'B - High Potential') {\n <span class=\"badge bg-primary\">{{account.priority}}</span>\n }\n @if (account.priority === 'C - Low Potential') {\n <span class=\"badge bg-warning\">{{account.priority}}</span>\n }\n @if (account.priority === 'D - Out of market') {\n <span class=\"badge bg-secondary\">{{account.priority}}</span>\n }\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 @if (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 }\n </ul>\n </td>\n </tr>\n</ng-template>\n<ng-template pTemplate=\"footer\">\n @if (data?.accounts?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n}\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<ng-container>\n @if (data.unfiltered_count !== 0 && isLoaded) {\n <div class=\"row mt-5\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n @if (accountActivities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\">\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 @if (accountInsight?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountActivities.length\" />\n }\n </div>\n }\n @if (accountActivities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.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\">Accounts Location</h5>\n <div>\n @if (accountGeography) {\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!accountGeography) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";: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;word-break:keep-all;white-space:nowrap}.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,.expected-mrr{word-break:keep-all;white-space:nowrap}.totals-row{background-color:#f8f9fa;font-weight:700}\n"] }]
|
|
1657
|
+
args: [{ selector: 'pw-smart-crm-companies', standalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"primeng-datatable-container actions-collapsed 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-industry\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-size\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-status\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-priority\" 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 mb-2\">\n <p-multiSelect inputId=\"crm-accounts-filter-source\" 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 <label for=\"crm-accounts-search-location\" class=\"visually-hidden\">Search location</label>\n <input id=\"crm-accounts-search-location\"\n name=\"crm-accounts-search-location\"\n ngx-gp-autocomplete\n class=\"form-control location\"\n #places=\"ngx-places\"\n [(ngModel)]=\"searchLocationText\"\n placeholder=\"Search location...\"\n (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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-accounts-search\"\n name=\"smart-crm-accounts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search accounts...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\">{{ 'Products' }}</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 @if (canViewMrr || userId) {\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}\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=\"last_logged_in_at\"> Last Seen At <p-sortIcon field=\"last_logged_in_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\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n</tr>\n</ng-template>\n<ng-template pTemplate=\"body\" let-account let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) - show before first data row -->\n @if (i === 0 && data?.accounts?.length) {\n <tr class=\"totals-row \">\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\n <tr>\n <td data-head=\"Name\" class=\"name-column\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n <pw-clearbit-icon [src]=\"account.company_url\" altText=\"Company Logo\"></pw-clearbit-icon>\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 @if (account?.reason_to_cancel) {\n <i class=\"fas fa-exclamation-circle text-danger info-icon\"\n [pTooltip]=\"account.reason_to_cancel\"\n tooltipPosition=\"top\"></i>\n }\n </a>\n </td>\n <td data-head=\"Products\">\n @if (account?.subscription_products && account.subscription_products.length > 0) {\n @for (product of account.subscription_products; track product) {\n <span\n [appDynamicBadge]=\"{\n itemsArray: productFeatureKeys,\n item: product.feature_key\n }\"\n color=\"blue-grey\"\n class=\"badge me-1 mb-1\">\n {{ product.feature_key }}\n </span>\n }\n }\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n @if (account.expected_mrr && (canViewMrr || account.owner_id === userId)) {\n <span>\n {{ account.expected_mrr / 100 | currency: account.main_currency }}\n </span>\n }\n </td>\n }\n <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-yyyy' }}</td>\n <td data-head=\"Last Seen At\">\n @if (account?.last_logged_in_at) {\n <span [ngClass]=\"lastSeenAtTextClass(account?.last_logged_in_at)\">\n {{ account?.last_logged_in_at | dateFormat }}\n </span>\n }\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_quarter > 5}\">{{ account.sessions_last_month }}</td>\n <td data-head=\"Status\">\n @if (account.status === 'Prospect') {\n <span class=\"badge bg-primary\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Trial - Inactive') {\n <span class=\"badge bg-secondary\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - New') {\n <span class=\"badge bg-info\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Active') {\n <span class=\"badge bg-success\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Inactive') {\n <span class=\"badge bg-warning\">{{account.status}}</span>\n }\n @if (account.status === 'Customer - Old') {\n <span class=\"badge bg-dark\">{{account.status}}</span>\n }\n @if (account.status === 'Dead') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Competitor') {\n <span class=\"badge bg-danger\">{{account.status}}</span>\n }\n @if (account.status === 'Vendor') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Supplier') {\n <span class=\"badge bg-blue-grey\">{{account.status}}</span>\n }\n @if (account.status === 'Other') {\n <span class=\"badge bg-teal\">{{account.status}}</span>\n }\n </td>\n\n <td data-head=\"Priority\">\n @if (account.priority === 'A - Ideal Fit') {\n <span class=\"badge bg-success\">{{account.priority}}</span>\n }\n @if (account.priority === 'B - High Potential') {\n <span class=\"badge bg-primary\">{{account.priority}}</span>\n }\n @if (account.priority === 'C - Low Potential') {\n <span class=\"badge bg-warning\">{{account.priority}}</span>\n }\n @if (account.priority === 'D - Out of market') {\n <span class=\"badge bg-secondary\">{{account.priority}}</span>\n }\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 @if (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 }\n </ul>\n </td>\n </tr>\n</ng-template>\n<ng-template pTemplate=\"footer\">\n @if (data?.accounts?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"expected-mrr\">\n <strong>{{ totals?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_quarter }}</strong>\n </td>\n <td class=\"fw-bold\">\n <strong>{{ totals?.sessions_last_month }}</strong>\n </td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n}\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<ng-container>\n @if (data.unfiltered_count !== 0 && isLoaded) {\n <div class=\"row mt-5\">\n <!-- Last Activities -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Latest Activities</h5>\n @if (accountActivities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\">\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 @if (accountInsight?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountActivities.length\" />\n }\n </div>\n }\n @if (accountActivities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.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\">Accounts Location</h5>\n <div>\n @if (accountGeography) {\n <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!accountGeography) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\n</ng-container>\n", styles: ["@charset \"UTF-8\";: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;word-break:keep-all;white-space:nowrap}.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,.expected-mrr{word-break:keep-all;white-space:nowrap}.totals-row{background-color:#f8f9fa;font-weight:700}::ng-deep .primeng-datatable-container.actions-collapsed thead tr,::ng-deep .primeng-datatable-container.actions-collapsed tbody tr,::ng-deep .primeng-datatable-container.actions-collapsed .totals-row,::ng-deep .primeng-datatable-container.actions-collapsed tfoot tr{position:relative}::ng-deep .primeng-datatable-container.actions-collapsed thead th[class*=actions-list-],::ng-deep .primeng-datatable-container.actions-collapsed tbody td[data-head=Action],::ng-deep .primeng-datatable-container.actions-collapsed .totals-row td:last-child,::ng-deep .primeng-datatable-container.actions-collapsed tfoot td:last-child{position:absolute;top:0;right:0;bottom:0;width:auto;min-width:0;max-width:none;padding:0;border:0}\n"] }]
|
|
1659
1658
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i2.CommonService }, { type: i2.LogoCacheService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
1660
1659
|
|
|
1661
1660
|
class SmartCrmCompetitionComponent {
|
|
@@ -1746,7 +1745,7 @@ class SmartCrmSettingsDetailsComponent extends AppBaseComponent {
|
|
|
1746
1745
|
super.ngOnDestroy();
|
|
1747
1746
|
}
|
|
1748
1747
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmSettingsDetailsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1749
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmSettingsDetailsComponent, isStandalone: false, selector: "pw-smart-crm-settings-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>Action: {{ isLoading ? '' : data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n </h3>\n</div>\n@if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-3\">\n <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\" controlId=\"crm-action-name\"\n [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"crm-action-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week-label\">{{ 'Crm.Settings.TargetWeek' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week-label'\"\n [options]=\"targetWeek\"\n formControlName=\"target_week\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\"\n [placeholder]=\"'Select Target Week'\">\n </p-select>\n @if (\n form.get('target_week').touched && form.get('target_week')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week_min-label\">{{ 'Crm.Settings.TargetWeekMin' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week_min-label'\"\n [options]=\"targetWeekMin\"\n formControlName=\"target_week_min\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\"\n [placeholder]=\"'Select Target Week Min'\">\n </p-select>\n @if (\n form.get('target_week_min').touched &&\n form.get('target_week_min')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n @if (actions$ | async; as actions) {\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n controlId=\"crm-action-previous_action_id\" [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-action-previous_action_id-label'\"\n [options]=\"actions['crm_actions']\"\n formControlName=\"previous_action_id\"\n [placeholder]=\"'Select Previous Action'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-visible-label\">{{ 'Crm.Settings.Visible' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n </span>\n <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\"\n [attr.aria-labelledby]=\"'crm-action-visible-label'\">\n </ui-switch>\n </div>\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\"> {{ 'Button.Submit' | transloco }} </button>\n </div>\n </div>\n </form>\n</div>\n}\n", styles: [".vertical-bottom{vertical-align:text-bottom}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1748
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmSettingsDetailsComponent, isStandalone: false, selector: "pw-smart-crm-settings-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>Action: {{ isLoading ? '' : data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n </h3>\n</div>\n@if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-3\">\n <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\" controlId=\"crm-action-name\"\n [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"crm-action-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week-label\">{{ 'Crm.Settings.TargetWeek' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week-label'\"\n [options]=\"targetWeek\"\n formControlName=\"target_week\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\"\n [placeholder]=\"'Select Target Week'\">\n </p-select>\n @if (\n form.get('target_week').touched && form.get('target_week')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week_min-label\">{{ 'Crm.Settings.TargetWeekMin' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week_min-label'\"\n [options]=\"targetWeekMin\"\n formControlName=\"target_week_min\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\"\n [placeholder]=\"'Select Target Week Min'\">\n </p-select>\n @if (\n form.get('target_week_min').touched &&\n form.get('target_week_min')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n @if (actions$ | async; as actions) {\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n controlId=\"crm-action-previous_action_id\" [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-action-previous_action_id-label'\"\n [options]=\"actions['crm_actions']\"\n formControlName=\"previous_action_id\"\n [placeholder]=\"'Select Previous Action'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-visible-label\">{{ 'Crm.Settings.Visible' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n </span>\n <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\"\n [attr.aria-labelledby]=\"'crm-action-visible-label'\">\n </ui-switch>\n </div>\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\"> {{ 'Button.Submit' | transloco }} </button>\n </div>\n </div>\n </form>\n</div>\n}\n", styles: [".vertical-bottom{vertical-align:text-bottom}:host .pw-label-style{display:block;width:fit-content;height:18px;line-height:18px;margin-bottom:8px!important}:host .pw-label-style.info-circle:after{top:50%!important;transform:translateY(-50%)}:host ui-switch{min-height:36px;display:flex!important;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1750
1749
|
}
|
|
1751
1750
|
__decorate([
|
|
1752
1751
|
ValidateForm('form'),
|
|
@@ -1756,7 +1755,7 @@ __decorate([
|
|
|
1756
1755
|
], SmartCrmSettingsDetailsComponent.prototype, "onSave", null);
|
|
1757
1756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmSettingsDetailsComponent, decorators: [{
|
|
1758
1757
|
type: Component,
|
|
1759
|
-
args: [{ selector: 'pw-smart-crm-settings-details', standalone: false, 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>Action: {{ isLoading ? '' : data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n </h3>\n</div>\n@if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-3\">\n <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\" controlId=\"crm-action-name\"\n [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"crm-action-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week-label\">{{ 'Crm.Settings.TargetWeek' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week-label'\"\n [options]=\"targetWeek\"\n formControlName=\"target_week\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\"\n [placeholder]=\"'Select Target Week'\">\n </p-select>\n @if (\n form.get('target_week').touched && form.get('target_week')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week_min-label\">{{ 'Crm.Settings.TargetWeekMin' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week_min-label'\"\n [options]=\"targetWeekMin\"\n formControlName=\"target_week_min\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\"\n [placeholder]=\"'Select Target Week Min'\">\n </p-select>\n @if (\n form.get('target_week_min').touched &&\n form.get('target_week_min')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n @if (actions$ | async; as actions) {\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n controlId=\"crm-action-previous_action_id\" [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-action-previous_action_id-label'\"\n [options]=\"actions['crm_actions']\"\n formControlName=\"previous_action_id\"\n [placeholder]=\"'Select Previous Action'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-visible-label\">{{ 'Crm.Settings.Visible' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n </span>\n <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\"\n [attr.aria-labelledby]=\"'crm-action-visible-label'\">\n </ui-switch>\n </div>\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\"> {{ 'Button.Submit' | transloco }} </button>\n </div>\n </div>\n </form>\n</div>\n}\n", styles: [".vertical-bottom{vertical-align:text-bottom}\n"] }]
|
|
1758
|
+
args: [{ selector: 'pw-smart-crm-settings-details', standalone: false, 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>Action: {{ isLoading ? '' : data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n </h3>\n</div>\n@if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-md-3\">\n <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\" controlId=\"crm-action-name\"\n [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"crm-action-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week-label\">{{ 'Crm.Settings.TargetWeek' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week-label'\"\n [options]=\"targetWeek\"\n formControlName=\"target_week\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\"\n [placeholder]=\"'Select Target Week'\">\n </p-select>\n @if (\n form.get('target_week').touched && form.get('target_week')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-target_week_min-label\">{{ 'Crm.Settings.TargetWeekMin' | transloco }}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-action-target_week_min-label'\"\n [options]=\"targetWeekMin\"\n formControlName=\"target_week_min\"\n [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\"\n [placeholder]=\"'Select Target Week Min'\">\n </p-select>\n @if (\n form.get('target_week_min').touched &&\n form.get('target_week_min')?.errors?.required\n ) {\n <div class=\"danger\">\n <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n </div>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-md-2\">\n @if (actions$ | async; as actions) {\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n controlId=\"crm-action-previous_action_id\" [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-action-previous_action_id-label'\"\n [options]=\"actions['crm_actions']\"\n formControlName=\"previous_action_id\"\n [placeholder]=\"'Select Previous Action'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-action-visible-label\">{{ 'Crm.Settings.Visible' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n </span>\n <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\"\n [attr.aria-labelledby]=\"'crm-action-visible-label'\">\n </ui-switch>\n </div>\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\"> {{ 'Button.Submit' | transloco }} </button>\n </div>\n </div>\n </form>\n</div>\n}\n", styles: [".vertical-bottom{vertical-align:text-bottom}:host .pw-label-style{display:block;width:fit-content;height:18px;line-height:18px;margin-bottom:8px!important}:host .pw-label-style.info-circle:after{top:50%!important;transform:translateY(-50%)}:host ui-switch{min-height:36px;display:flex!important;align-items:center}\n"] }]
|
|
1760
1759
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { onSave: [] } });
|
|
1761
1760
|
|
|
1762
1761
|
class SmartCrmActionsComponent extends AppBaseComponent {
|
|
@@ -1864,11 +1863,11 @@ class SmartCrmActionsComponent extends AppBaseComponent {
|
|
|
1864
1863
|
super.ngOnDestroy();
|
|
1865
1864
|
}
|
|
1866
1865
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1867
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmActionsComponent, isStandalone: false, 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 @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\n @if (hasAccess) {\n <a\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 }\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-actions-search\"\n name=\"smart-crm-actions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search action...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (hasAccess) {\n <th scope=\"true\"\n >{{ 'Label.Actions' | transloco }}</th>\n }\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 @if (hasAccess) {\n <td data-head=\"Action\"\n >\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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n </div>\n }\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";: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: 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1866
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmActionsComponent, isStandalone: false, 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 @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\n @if (hasAccess) {\n <a\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 }\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-actions-search\"\n name=\"smart-crm-actions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search action...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (hasAccess) {\n <th scope=\"true\"\n class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n }\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 @if (hasAccess) {\n <td data-head=\"Action\"\n >\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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n </div>\n }\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";: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: 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1868
1867
|
}
|
|
1869
1868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmActionsComponent, decorators: [{
|
|
1870
1869
|
type: Component,
|
|
1871
|
-
args: [{ selector: 'pw-smart-crm-actions', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <p>{{ 'Crm.Actions.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\n @if (hasAccess) {\n <a\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 }\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-actions-search\"\n name=\"smart-crm-actions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search action...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (hasAccess) {\n <th scope=\"true\"\n
|
|
1870
|
+
args: [{ selector: 'pw-smart-crm-actions', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <p>{{ 'Crm.Actions.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\n @if (hasAccess) {\n <a\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 }\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-actions-search\"\n name=\"smart-crm-actions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search action...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (hasAccess) {\n <th scope=\"true\"\n class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n }\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 @if (hasAccess) {\n <td data-head=\"Action\"\n >\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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n </div>\n }\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";: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"] }]
|
|
1872
1871
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
1873
1872
|
|
|
1874
1873
|
class SmartCrmCompanySourceComponent extends AppBaseComponent {
|
|
@@ -1958,11 +1957,11 @@ class SmartCrmCompanySourceComponent extends AppBaseComponent {
|
|
|
1958
1957
|
super.ngOnDestroy();
|
|
1959
1958
|
}
|
|
1960
1959
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanySourceComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompanySourceComponent, isStandalone: false, selector: "pw-smart-crm-source", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <p>{{ 'Crm.Sources.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a class=\"btn btn-sm btn-outline-primary float-end build-action-button\"\n data-cy=\"build-contact\"\n (click)=\"buildAccountSource()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.BuildAccountSource' | transloco }}\n </a>\n }\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.sourceDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.AddAccountSource' | transloco }}\n </a>\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_sources\"\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 <label for=\"crm-source-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-source-search\"\n name=\"crm-source-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Crm.AccountSourceMessage.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-source>\n <tr>\n <td data-head=\"Name\">{{ source.name }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess) {\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.sourceDetails,\n source.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(source.id)\"\n (keydown.space)=\"onDelete(source.id)\"\n (click)=\"onDelete(source.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountSourceMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-action-button{margin-left:7px}\n"], dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1960
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCompanySourceComponent, isStandalone: false, selector: "pw-smart-crm-source", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <p>{{ 'Crm.Sources.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a class=\"btn btn-sm btn-outline-primary float-end build-action-button\"\n data-cy=\"build-contact\"\n (click)=\"buildAccountSource()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.BuildAccountSource' | transloco }}\n </a>\n }\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.sourceDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.AddAccountSource' | transloco }}\n </a>\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_sources\"\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 <label for=\"crm-source-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-source-search\"\n name=\"crm-source-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Crm.AccountSourceMessage.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-source>\n <tr>\n <td data-head=\"Name\">{{ source.name }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess) {\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.sourceDetails,\n source.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(source.id)\"\n (keydown.space)=\"onDelete(source.id)\"\n (click)=\"onDelete(source.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountSourceMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-action-button{margin-left:7px}\n"], dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1962
1961
|
}
|
|
1963
1962
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCompanySourceComponent, decorators: [{
|
|
1964
1963
|
type: Component,
|
|
1965
|
-
args: [{ selector: 'pw-smart-crm-source', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <p>{{ 'Crm.Sources.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a class=\"btn btn-sm btn-outline-primary float-end build-action-button\"\n data-cy=\"build-contact\"\n (click)=\"buildAccountSource()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.BuildAccountSource' | transloco }}\n </a>\n }\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.sourceDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.AddAccountSource' | transloco }}\n </a>\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_sources\"\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 <label for=\"crm-source-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-source-search\"\n name=\"crm-source-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Crm.AccountSourceMessage.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-source>\n <tr>\n <td data-head=\"Name\">{{ source.name }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess) {\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.sourceDetails,\n source.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(source.id)\"\n (keydown.space)=\"onDelete(source.id)\"\n (click)=\"onDelete(source.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountSourceMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-action-button{margin-left:7px}\n"] }]
|
|
1964
|
+
args: [{ selector: 'pw-smart-crm-source', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\n <p>{{ 'Crm.Sources.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a class=\"btn btn-sm btn-outline-primary float-end build-action-button\"\n data-cy=\"build-contact\"\n (click)=\"buildAccountSource()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.BuildAccountSource' | transloco }}\n </a>\n }\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-contact\"\n [routerLink]=\"['/' + subscription?.slug + routers.sourceDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Crm.AccountSourceMessage.AddAccountSource' | transloco }}\n </a>\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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.crm_sources\"\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 <label for=\"crm-source-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-source-search\"\n name=\"crm-source-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Crm.AccountSourceMessage.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-source>\n <tr>\n <td data-head=\"Name\">{{ source.name }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (hasAccess) {\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/' + subscription?.slug + routers.sourceDetails,\n source.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(source.id)\"\n (keydown.space)=\"onDelete(source.id)\"\n (click)=\"onDelete(source.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountSourceMessage.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-action-button{margin-left:7px}\n"] }]
|
|
1966
1965
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
1967
1966
|
|
|
1968
1967
|
class SmartCrmWidgetsComponent extends AppBaseComponent {
|
|
@@ -2068,11 +2067,11 @@ class SmartCrmWidgetsComponent extends AppBaseComponent {
|
|
|
2068
2067
|
super.ngOnDestroy();
|
|
2069
2068
|
}
|
|
2070
2069
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmWidgetsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2071
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmWidgetsComponent, isStandalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-widgets-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-widgets-search\"\n name=\"crm-widgets-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
2070
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmWidgetsComponent, isStandalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-widgets-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-widgets-search\"\n name=\"crm-widgets-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
2072
2071
|
}
|
|
2073
2072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmWidgetsComponent, decorators: [{
|
|
2074
2073
|
type: Component,
|
|
2075
|
-
args: [{ selector: 'pw-smart-crm-widgets', standalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-widgets-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-widgets-search\"\n name=\"crm-widgets-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n" }]
|
|
2074
|
+
args: [{ selector: 'pw-smart-crm-widgets', standalone: false, 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 @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-widgets-search\" class=\"visually-hidden\">Search source</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-widgets-search\"\n name=\"crm-widgets-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search source...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Widgets.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n" }]
|
|
2076
2075
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
2077
2076
|
|
|
2078
2077
|
class SmartCrmStagesComponent extends AppBaseComponent {
|
|
@@ -2207,11 +2206,11 @@ class SmartCrmStagesComponent extends AppBaseComponent {
|
|
|
2207
2206
|
super.ngOnDestroy();
|
|
2208
2207
|
}
|
|
2209
2208
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmStagesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmStagesComponent, isStandalone: false, 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 @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\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 @if (!isLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-stages-filter-category\" 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 <label for=\"crm-stages-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-stages-search\"\n name=\"crm-stages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @for (category of stage?.crm_opportunity_categories; track category) {\n <span\n class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n color=\"blue-grey\">{{ category?.name }}</span>\n }\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-default-stage-button{margin-left:7px}\n"], dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
2209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmStagesComponent, isStandalone: false, 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 @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\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 @if (!isLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-stages-filter-category\" 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 <label for=\"crm-stages-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-stages-search\"\n name=\"crm-stages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @for (category of stage?.crm_opportunity_categories; track category) {\n <span\n class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n color=\"blue-grey\">{{ category?.name }}</span>\n }\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-default-stage-button{margin-left:7px}\n"], dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
2211
2210
|
}
|
|
2212
2211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmStagesComponent, decorators: [{
|
|
2213
2212
|
type: Component,
|
|
2214
|
-
args: [{ selector: 'pw-smart-crm-stages', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'Crm.Stages.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\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 @if (!isLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-stages-filter-category\" 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 <label for=\"crm-stages-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-stages-search\"\n name=\"crm-stages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @for (category of stage?.crm_opportunity_categories; track category) {\n <span\n class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n color=\"blue-grey\">{{ category?.name }}</span>\n }\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-default-stage-button{margin-left:7px}\n"] }]
|
|
2213
|
+
args: [{ selector: 'pw-smart-crm-stages', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'Crm.Stages.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <a\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 }\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 @if (!isLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div class=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-stages-filter-category\" 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 <label for=\"crm-stages-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-stages-search\"\n name=\"crm-stages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @for (category of stage?.crm_opportunity_categories; track category) {\n <span\n class=\"badge ms-1\"\n [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\"\n color=\"blue-grey\">{{ category?.name }}</span>\n }\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-default-stage-button{margin-left:7px}\n"] }]
|
|
2215
2214
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
2216
2215
|
|
|
2217
2216
|
class SmartCrmOpportunityCategoriesComponent extends AppBaseComponent {
|
|
@@ -2313,11 +2312,11 @@ class SmartCrmOpportunityCategoriesComponent extends AppBaseComponent {
|
|
|
2313
2312
|
super.ngOnDestroy();
|
|
2314
2313
|
}
|
|
2315
2314
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmOpportunityCategoriesComponent, isStandalone: false, 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 @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <div class=\"col-12\">\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 }\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 @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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-opportunity-categories-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-opportunity-categories-search\"\n name=\"crm-opportunity-categories-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-category-button{margin-left:7px}\n"], dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
2315
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmOpportunityCategoriesComponent, isStandalone: false, 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 @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <div class=\"col-12\">\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 }\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 @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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-opportunity-categories-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-opportunity-categories-search\"\n name=\"crm-opportunity-categories-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-category-button{margin-left:7px}\n"], dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
2317
2316
|
}
|
|
2318
2317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmOpportunityCategoriesComponent, decorators: [{
|
|
2319
2318
|
type: Component,
|
|
2320
|
-
args: [{ selector: 'pw-smart-crm-opportunity-categories', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'Crm.Categories.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <div class=\"col-12\">\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 }\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 @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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-opportunity-categories-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-opportunity-categories-search\"\n name=\"crm-opportunity-categories-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-category-button{margin-left:7px}\n"] }]
|
|
2319
|
+
args: [{ selector: 'pw-smart-crm-opportunity-categories', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12\">\n <p>{{ 'Crm.Categories.Config.Description' | transloco }}</p>\n @if (data.object_count === 0 && data.unfiltered_count === 0 && isLoaded) {\n <div class=\"col-12\">\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 }\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 @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=\"col-12\">\n <div class=\"primeng-datatable-container actions-collapsed 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 <label for=\"crm-opportunity-categories-search\" class=\"visually-hidden\">Search stages</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-opportunity-categories-search\"\n name=\"crm-opportunity-categories-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search stages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (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 }\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CategoriesMessages.NoCategoriesMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", styles: [".build-category-button{margin-left:7px}\n"] }]
|
|
2321
2320
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
2322
2321
|
|
|
2323
2322
|
class SmartCrmConfigurationComponent extends AppBaseComponent {
|
|
@@ -2667,11 +2666,11 @@ class SmartCrmWidgetsDetailsComponent extends AppBaseComponent {
|
|
|
2667
2666
|
super.ngOnDestroy();
|
|
2668
2667
|
}
|
|
2669
2668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmWidgetsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2670
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmWidgetsDetailsComponent, isStandalone: false, selector: "pw-smart-crm-widgets-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\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 <div class=\"me-auto col-xs-6\">\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.Widgets.Widget' | transloco }}:\n {{ isLoading ? '' : (data?.name ? data?.name : ('Label.AddNew' | transloco)) }}</span>\n </h3>\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3 widget-tooltip\">\n @if (allWidgets$ | async; as widgets) {\n <div class=\"col-12 col-sm-4\"
|
|
2669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmWidgetsDetailsComponent, isStandalone: false, selector: "pw-smart-crm-widgets-details", usesInheritance: true, ngImport: i0, template: "<div class=\"col-12 d-flex ps-0\">\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 <div class=\"me-auto col-xs-6\">\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.Widgets.Widget' | transloco }}:\n {{ isLoading ? '' : (data?.name ? data?.name : ('Label.AddNew' | transloco)) }}</span>\n </h3>\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3 widget-tooltip\">\n @if (allWidgets$ | async; as widgets) {\n <div class=\"col-12 col-sm-4\">\n <pw-input-container\n [label]=\"'Crm.Widgets.CrmWidget' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.Widgets.Tooltip.Name' | transloco\"\n name=\"crm_widget_id\"\n controlId=\"crm-widget-crm_widget_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Crm Widget is required' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'crm-widget-crm_widget_id-label'\"\n [options]=\"widgets['crm_widgets']\"\n formControlName=\"crm_widget_id\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_widget_id'].errors }\"\n placeholder=\"Select Widget\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-sm-4\">\n @if (positions$ | async; as positions) {\n <pw-input-container\n [label]=\"'Crm.Widgets.Position' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.Widgets.Tooltip.Position' | transloco\"\n name=\"position\"\n controlId=\"crm-widget-position\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Position is required' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'crm-widget-position-label'\"\n [options]=\"positions\"\n formControlName=\"position\"\n [appendTo]=\"'body'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['position'].errors }\"\n placeholder=\"Select Position\">\n </p-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\">\n <pw-input-container\n [label]=\"'Crm.Widgets.Visible' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.Widgets.Tooltip.Visible' | transloco\"\n name=\"visible\"\n controlId=\"crm-widget-visible\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch\n name=\"visible\"\n formControlName=\"visible\"\n [attr.aria-labelledby]=\"'crm-widget-visible-label'\">\n </ui-switch>\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 {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n</div>\n</div>\n", styles: [".widget-tooltip{margin-top:23px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
2671
2670
|
}
|
|
2672
2671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmWidgetsDetailsComponent, decorators: [{
|
|
2673
2672
|
type: Component,
|
|
2674
|
-
args: [{ selector: 'pw-smart-crm-widgets-details', standalone: false, template: "<div class=\"col-12 d-flex ps-0\">\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 <div class=\"me-auto col-xs-6\">\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.Widgets.Widget' | transloco }}:\n {{ isLoading ? '' : (data?.name ? data?.name : ('Label.AddNew' | transloco)) }}</span>\n </h3>\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3 widget-tooltip\">\n @if (allWidgets$ | async; as widgets) {\n <div class=\"col-12 col-sm-4\"
|
|
2673
|
+
args: [{ selector: 'pw-smart-crm-widgets-details', standalone: false, template: "<div class=\"col-12 d-flex ps-0\">\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 <div class=\"me-auto col-xs-6\">\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>{{ 'Crm.Widgets.Widget' | transloco }}:\n {{ isLoading ? '' : (data?.name ? data?.name : ('Label.AddNew' | transloco)) }}</span>\n </h3>\n </div>\n </div>\n\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3 widget-tooltip\">\n @if (allWidgets$ | async; as widgets) {\n <div class=\"col-12 col-sm-4\">\n <pw-input-container\n [label]=\"'Crm.Widgets.CrmWidget' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.Widgets.Tooltip.Name' | transloco\"\n name=\"crm_widget_id\"\n controlId=\"crm-widget-crm_widget_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Crm Widget is required' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'crm-widget-crm_widget_id-label'\"\n [options]=\"widgets['crm_widgets']\"\n formControlName=\"crm_widget_id\"\n optionLabel=\"name\"\n optionValue=\"id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_widget_id'].errors }\"\n placeholder=\"Select Widget\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-sm-4\">\n @if (positions$ | async; as positions) {\n <pw-input-container\n [label]=\"'Crm.Widgets.Position' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.Widgets.Tooltip.Position' | transloco\"\n name=\"position\"\n controlId=\"crm-widget-position\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Position is required' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'crm-widget-position-label'\"\n [options]=\"positions\"\n formControlName=\"position\"\n [appendTo]=\"'body'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['position'].errors }\"\n placeholder=\"Select Position\">\n </p-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-md-3 col-lg-2 pe-0 cancel-button\">\n <pw-input-container\n [label]=\"'Crm.Widgets.Visible' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.Widgets.Tooltip.Visible' | transloco\"\n name=\"visible\"\n controlId=\"crm-widget-visible\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch\n name=\"visible\"\n formControlName=\"visible\"\n [attr.aria-labelledby]=\"'crm-widget-visible-label'\">\n </ui-switch>\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 {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n</div>\n</div>\n", styles: [".widget-tooltip{margin-top:23px}\n"] }]
|
|
2675
2674
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
2676
2675
|
|
|
2677
2676
|
class SmartCrmContactDetailsComponent extends AppBaseComponent {
|
|
@@ -2714,7 +2713,6 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
|
|
|
2714
2713
|
this.subscriptionId = response;
|
|
2715
2714
|
this.crmSources$ = this.crmService.getAllAccountSource(this.subscriptionId).pipe(map(res => ({
|
|
2716
2715
|
crm_sources: [
|
|
2717
|
-
{ label: 'Select CRM Source', value: null },
|
|
2718
2716
|
...(res?.crm_sources ?? []).map(item => ({
|
|
2719
2717
|
label: item.name,
|
|
2720
2718
|
value: item.id
|
|
@@ -2838,7 +2836,7 @@ class SmartCrmContactDetailsComponent extends AppBaseComponent {
|
|
|
2838
2836
|
super.ngOnDestroy();
|
|
2839
2837
|
}
|
|
2840
2838
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmContactDetailsComponent, deps: [{ token: i2.CommonService }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }, { token: i2.GeoService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2841
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmContactDetailsComponent, isStandalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\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 controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" name=\"input_first_name_1\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" name=\"input_last_name_2\"/>\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 controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\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 <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"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 : {}\n \">\n </p-autoComplete>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" name=\"input_headline_4\"/>\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\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" name=\"input_tel_5\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" name=\"input_email_6\"/>\n </pw-input-container>\n </div>\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 controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\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\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" name=\"input_linkedin_url_7\"/>\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-sm-4 col-lg-4\">\n @if (departments$ | async; as departments) {\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (crmSources$ | async; as source) {\n <div class=\"col-12 col-sm-4 col-lg-4\"\n >\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\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\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\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 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 }\n </div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: 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: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2839
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmContactDetailsComponent, isStandalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\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 controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" name=\"input_first_name_1\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" name=\"input_last_name_2\"/>\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 controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\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 <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"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 : {}\n \">\n </p-autoComplete>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" name=\"input_headline_4\"/>\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\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" name=\"input_tel_5\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" name=\"input_email_6\"/>\n </pw-input-container>\n </div>\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 controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\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\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" name=\"input_linkedin_url_7\"/>\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-sm-4 col-lg-4\">\n @if (departments$ | async; as departments) {\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (crmSources$ | async; as source) {\n <div class=\"col-12 col-sm-4 col-lg-4\"\n >\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\n </div>\n }\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n name=\"dob\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\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 }\n </div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: 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: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2842
2840
|
}
|
|
2843
2841
|
__decorate([
|
|
2844
2842
|
ValidateForm('form'),
|
|
@@ -2848,7 +2846,7 @@ __decorate([
|
|
|
2848
2846
|
], SmartCrmContactDetailsComponent.prototype, "onSave", null);
|
|
2849
2847
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmContactDetailsComponent, decorators: [{
|
|
2850
2848
|
type: Component,
|
|
2851
|
-
args: [{ selector: 'pw-smart-crm-contact-details', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\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 controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" name=\"input_first_name_1\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" name=\"input_last_name_2\"/>\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 controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\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 <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"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 : {}\n \">\n </p-autoComplete>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" name=\"input_headline_4\"/>\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\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" name=\"input_tel_5\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" name=\"input_email_6\"/>\n </pw-input-container>\n </div>\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 controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\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\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" name=\"input_linkedin_url_7\"/>\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-sm-4 col-lg-4\">\n @if (departments$ | async; as departments) {\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (crmSources$ | async; as source) {\n <div class=\"col-12 col-sm-4 col-lg-4\"\n >\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\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\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\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 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 }\n </div>\n" }]
|
|
2849
|
+
args: [{ selector: 'pw-smart-crm-contact-details', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\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 controlId=\"crm-contact-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n autocomplete=\"given-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['first_name'].errors }\" name=\"input_first_name_1\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"crm-contact-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n autocomplete=\"family-name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['last_name'].errors }\" name=\"input_last_name_2\"/>\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 controlId=\"crm-contact-location\"\n [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-contact-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-contact-location-label'\"\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 <span class=\"pw-label-style mb-2\" id=\"crm-contact-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete inputId=\"crm-contact-country\"\n formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-contact-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"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 : {}\n \">\n </p-autoComplete>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\"\n name=\"headline\"\n controlId=\"crm-contact-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-headline\"\n class=\"form-control\"\n formControlName=\"headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" name=\"input_headline_4\"/>\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\"\n name=\"tel\"\n controlId=\"crm-contact-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-contact-tel\"\n class=\"form-control\"\n formControlName=\"tel\"\n autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" name=\"input_tel_5\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\"\n name=\"email\"\n controlId=\"crm-contact-email\"\n errorMsg=\"{{\n f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\n }}\">\n <input type=\"email\"\n id=\"crm-contact-email\"\n class=\"form-control\"\n formControlName=\"email\"\n autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" name=\"input_email_6\"/>\n </pw-input-container>\n </div>\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 controlId=\"crm-contact-email_verified\"\n [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\"\n name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-contact-email_verified-label'\"\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\"\n name=\"linkedin_url\"\n controlId=\"crm-contact-linkedin_url\">\n <input type=\"url\"\n id=\"crm-contact-linkedin_url\"\n class=\"form-control\"\n formControlName=\"linkedin_url\"\n autocomplete=\"url\" name=\"input_linkedin_url_7\"/>\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-contact-account-label\">{{ 'Crm.ContactMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-contact-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-sm-4 col-lg-4\">\n @if (departments$ | async; as departments) {\n <pw-input-container [label]=\"'Crm.ContactMessage.Department' | transloco\"\n name=\"department_id\"\n controlId=\"crm-contact-department_id\"\n [useAriaLabelledbyOnly]=\"true\"\n >\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-department_id-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-potential-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Potential' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [placeholder]=\"'Select Potential'\">\n </p-select>\n </div>\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <span id=\"crm-contact-labels-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Labels' | transloco }} </span>\n <p-multiSelect inputId=\"crm-contact-details-labels\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-contact-labels-label'\"\n formControlName=\"labels\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (crmSources$ | async; as source) {\n <div class=\"col-12 col-sm-4 col-lg-4\"\n >\n <span id=\"crm-contact-source-label\" class=\"pw-label-style\">{{ 'Crm.ContactMessage.Source' | transloco }}</span>\n <p-select\n [attr.aria-labelledby]=\"'crm-contact-source-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id'].errors }\"\n [options]=\"source['crm_sources']\"\n optionLabel=\"label\"\n optionValue=\"value\"\n formControlName=\"crm_source_id\"\n placeholder=\"select crm source\">\n </p-select>\n </div>\n }\n <div class=\"col-12 col-sm-4 col-lg-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\"\n name=\"dob\" controlId=\"crm-contact-details-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-contact-details-dob\"\n name=\"dob\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"dob\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n autocomplete=\"off\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\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 }\n </div>\n" }]
|
|
2852
2850
|
}], ctorParameters: () => [{ type: i2.CommonService }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }, { type: i2.GeoService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
|
|
2853
2851
|
|
|
2854
2852
|
class SmartCrmContactInfoComponent extends AppBaseComponent {
|
|
@@ -3550,7 +3548,6 @@ class SmartCrmContactComponent extends AppBaseComponent {
|
|
|
3550
3548
|
getDefaultValues(id) {
|
|
3551
3549
|
this.crmService.getCrmContactDefaultValues(id).subscribe(res => {
|
|
3552
3550
|
this.potential = [
|
|
3553
|
-
{ label: 'Select Priority', value: null },
|
|
3554
3551
|
...(res['potential'] ?? []).map(item => ({ label: item, value: item }))
|
|
3555
3552
|
];
|
|
3556
3553
|
this.labels = (res['labels'] ?? []).map(val => ({ label: val, value: val }));
|
|
@@ -3589,11 +3586,11 @@ class SmartCrmContactComponent extends AppBaseComponent {
|
|
|
3589
3586
|
super.ngOnDestroy();
|
|
3590
3587
|
}
|
|
3591
3588
|
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 }); }
|
|
3592
|
-
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 actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-contacts-search\"\n name=\"smart-crm-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control\" />\n </p-iconfield>\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\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 actions-collapsed 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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"contactInsight.length\" />\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: ["@charset \"UTF-8\";: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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.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: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
3589
|
+
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 actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-contacts-search\"\n name=\"smart-crm-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\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 actions-collapsed 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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"contactInsight.length\" />\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: ["@charset \"UTF-8\";: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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.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: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
3593
3590
|
}
|
|
3594
3591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmContactComponent, decorators: [{
|
|
3595
3592
|
type: Component,
|
|
3596
|
-
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 actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-contacts-search\"\n name=\"smart-crm-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control\" />\n </p-iconfield>\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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\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 actions-collapsed 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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"contactInsight.length\" />\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: ["@charset \"UTF-8\";: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"] }]
|
|
3593
|
+
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 actions-collapsed 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 <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-contacts-search\"\n name=\"smart-crm-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\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 actions-collapsed 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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"contactInsight.length\" />\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: ["@charset \"UTF-8\";: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"] }]
|
|
3597
3594
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
3598
3595
|
|
|
3599
3596
|
class SmartCrmCustomerSuccessComponent {
|
|
@@ -4330,11 +4327,11 @@ class SmartCrmAccountInsightComponent extends AppBaseComponent {
|
|
|
4330
4327
|
super.ngOnDestroy();
|
|
4331
4328
|
}
|
|
4332
4329
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmAccountInsightComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmAccountInsightComponent, isStandalone: false, 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 @if (!signUpLastNinetyDaysLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (signedUpLastThirtyDays?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && signedUpLastThirtyDays?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || signUp.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n }\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (signedUpLastThirtyDays?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (signedUpLastThirtyDays.length!== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"signedUpLastThirtyDays.length\" />\n }\n </div>\n }\n @if (signedUpLastThirtyDays?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!churnedAccountLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (churnedAccounts?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\">\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && churnedAccounts?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (churnedAccounts?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (churnedAccounts?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"churnedAccounts.length\" />\n }\n </div>\n }\n @if (churnedAccounts?.length === 0 && churnedAccountLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!activeOpportunitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (activeOpportunities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && activeOpportunities?.length) {\n <tr class=\"totals-row\">\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n ) {\n<a [ngbTooltip]=\"opportunities?.title\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n }\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n @if (canViewMrr || opportunities.owner_id === userId) {\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n }\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} @if (opportunities.cancelled) {\n <span class=\"text-danger\"\n >!Cancelled!</span>\n }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (activeOpportunities?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (activeOpportunities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"activeOpportunities.length\" />\n }\n </div>\n }\n @if (activeOpportunities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountLastActivitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountLastActivities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (accountLastActivities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountLastActivities.length\" />\n }\n </div>\n }\n @if (accountLastActivities?.length === 0 && accountLastActivitiesLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountAtRiskDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountAtRisk?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && accountAtRisk?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (accountAtRisk?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (accountAtRisk.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountAtRisk.length\" />\n }\n </div>\n }\n @if (accountAtRisk?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!contactRenewalLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (ContractRenewal?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && ContractRenewal?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (ContractRenewal?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (ContractRenewal.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"ContractRenewal.length\" />\n }\n </div>\n }\n @if (ContractRenewal?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!creditCardExpiringDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (creditCardExpiring?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | 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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && creditCardExpiring?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (creditCardExpiring?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (creditCardExpiring.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"creditCardExpiring.length\" />\n }\n </div>\n }\n @if (creditCardExpiring?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!magicMomentLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (magicMoment?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && magicMoment?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (magicMoment?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (magicMoment.length !==0 ) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"magicMoment.length\" />\n }\n </div>\n }\n @if (magicMoment?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountGeographyLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div>\n @if (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 }\n </div>\n @if (accountGeographyLoaded && !accountGeography?.data?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n</ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i10.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: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i18.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { 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: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmAccountInsightComponent, isStandalone: false, 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 @if (!signUpLastNinetyDaysLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (signedUpLastThirtyDays?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && signedUpLastThirtyDays?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || signUp.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n }\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (signedUpLastThirtyDays?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (signedUpLastThirtyDays.length!== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"signedUpLastThirtyDays.length\" />\n }\n </div>\n }\n @if (signedUpLastThirtyDays?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!churnedAccountLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (churnedAccounts?.length) {\n <div class=\"primeng-datatable-container table-responsive\">\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && churnedAccounts?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (churnedAccounts?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (churnedAccounts?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"churnedAccounts.length\" />\n }\n </div>\n }\n @if (churnedAccounts?.length === 0 && churnedAccountLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!activeOpportunitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (activeOpportunities?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && activeOpportunities?.length) {\n <tr class=\"totals-row\">\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n ) {\n<a [ngbTooltip]=\"opportunities?.title\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n }\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n @if (canViewMrr || opportunities.owner_id === userId) {\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n }\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} @if (opportunities.cancelled) {\n <span class=\"text-danger\"\n >!Cancelled!</span>\n }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (activeOpportunities?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (activeOpportunities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"activeOpportunities.length\" />\n }\n </div>\n }\n @if (activeOpportunities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountLastActivitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountLastActivities?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (accountLastActivities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountLastActivities.length\" />\n }\n </div>\n }\n @if (accountLastActivities?.length === 0 && accountLastActivitiesLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountAtRiskDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountAtRisk?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && accountAtRisk?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (accountAtRisk?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (accountAtRisk.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountAtRisk.length\" />\n }\n </div>\n }\n @if (accountAtRisk?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!contactRenewalLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (ContractRenewal?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && ContractRenewal?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (ContractRenewal?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (ContractRenewal.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"ContractRenewal.length\" />\n }\n </div>\n }\n @if (ContractRenewal?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!creditCardExpiringDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (creditCardExpiring?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | 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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && creditCardExpiring?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (creditCardExpiring?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (creditCardExpiring.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"creditCardExpiring.length\" />\n }\n </div>\n }\n @if (creditCardExpiring?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!magicMomentLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (magicMoment?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && magicMoment?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (magicMoment?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (magicMoment.length !==0 ) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"magicMoment.length\" />\n }\n </div>\n }\n @if (magicMoment?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountGeographyLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div>\n @if (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 }\n </div>\n @if (accountGeographyLoaded && !accountGeography?.data?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n</ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i10.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: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i18.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { 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: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.IsPastDatePipe, name: "isPastDate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4334
4331
|
}
|
|
4335
4332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmAccountInsightComponent, decorators: [{
|
|
4336
4333
|
type: Component,
|
|
4337
|
-
args: [{ selector: 'pw-smart-crm-account-insight', standalone: false, 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 @if (!signUpLastNinetyDaysLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (signedUpLastThirtyDays?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && signedUpLastThirtyDays?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || signUp.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n }\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (signedUpLastThirtyDays?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (signedUpLastThirtyDays.length!== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"signedUpLastThirtyDays.length\" />\n }\n </div>\n }\n @if (signedUpLastThirtyDays?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!churnedAccountLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (churnedAccounts?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\">\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && churnedAccounts?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (churnedAccounts?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (churnedAccounts?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"churnedAccounts.length\" />\n }\n </div>\n }\n @if (churnedAccounts?.length === 0 && churnedAccountLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!activeOpportunitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (activeOpportunities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && activeOpportunities?.length) {\n <tr class=\"totals-row\">\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n ) {\n<a [ngbTooltip]=\"opportunities?.title\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n }\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n @if (canViewMrr || opportunities.owner_id === userId) {\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n }\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} @if (opportunities.cancelled) {\n <span class=\"text-danger\"\n >!Cancelled!</span>\n }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (activeOpportunities?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (activeOpportunities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"activeOpportunities.length\" />\n }\n </div>\n }\n @if (activeOpportunities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountLastActivitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountLastActivities?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (accountLastActivities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountLastActivities.length\" />\n }\n </div>\n }\n @if (accountLastActivities?.length === 0 && accountLastActivitiesLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountAtRiskDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountAtRisk?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && accountAtRisk?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (accountAtRisk?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (accountAtRisk.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountAtRisk.length\" />\n }\n </div>\n }\n @if (accountAtRisk?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!contactRenewalLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (ContractRenewal?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && ContractRenewal?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (ContractRenewal?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (ContractRenewal.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"ContractRenewal.length\" />\n }\n </div>\n }\n @if (ContractRenewal?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!creditCardExpiringDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (creditCardExpiring?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | 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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && creditCardExpiring?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (creditCardExpiring?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (creditCardExpiring.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"creditCardExpiring.length\" />\n }\n </div>\n }\n @if (creditCardExpiring?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!magicMomentLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (magicMoment?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && magicMoment?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (magicMoment?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (magicMoment.length !==0 ) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"magicMoment.length\" />\n }\n </div>\n }\n @if (magicMoment?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountGeographyLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div>\n @if (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 }\n </div>\n @if (accountGeographyLoaded && !accountGeography?.data?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n</ng-container>\n</div>\n" }]
|
|
4334
|
+
args: [{ selector: 'pw-smart-crm-account-insight', standalone: false, 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 @if (!signUpLastNinetyDaysLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (signedUpLastThirtyDays?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.AccountMessage.SignUpAt' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-signUp\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && signedUpLastThirtyDays?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || signUp.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ signUp.expected_mrr / 100 | currency: (signUp.currency || signUp.main_currency) }}\n </td>\n }\n <td data-head=\"SignUpAt\">\n {{ signUp.signed_up_at | dateFormat }}\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (signedUpLastThirtyDays?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ signedUpLastNinetyDaysTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (signedUpLastThirtyDays.length!== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"signedUpLastThirtyDays.length\" />\n }\n </div>\n }\n @if (signedUpLastThirtyDays?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!churnedAccountLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (churnedAccounts?.length) {\n <div class=\"primeng-datatable-container table-responsive\">\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && churnedAccounts?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\"> {{ account.expected_mrr / 100 | currency: ( account.main_currency || account.currency) }} </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (churnedAccounts?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ churnedAccountsTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (churnedAccounts?.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"churnedAccounts.length\" />\n }\n </div>\n }\n @if (churnedAccounts?.length === 0 && churnedAccountLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!activeOpportunitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (activeOpportunities?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"activeOpportunities\"\n [paginator]=\"true\"\n [rows]=\"20\"\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | transloco }}</th>\n }\n <th scope=\"true\">{{ 'Crm.Summary.WinChance' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-opportunities\n let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && activeOpportunities?.length) {\n <tr class=\"totals-row\">\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (\n hasAccess ||\n opportunities?.owner_id === userId ||\n checkPermission('Pages.Product.CRM.Role.Admin')\n ) {\n<a [ngbTooltip]=\"opportunities?.title\" [routerLink]=\"[\n '/' + subscription?.slug + routers.opportunityInfo,\n opportunities.id\n ]\">\n <span>{{ opportunities?.title | textTruncate: 20 }} </span>\n </a>\n }\n </td>\n <td data-head=\"One Time Amount\"> {{ opportunities.one_time_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n @if (canViewMrr || opportunities.owner_id === userId) {\n <td data-head=\"Monthly Amount\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: (opportunities.main_currency || opportunities.currency) }} </td>\n }\n <td data-head=\"Win Chance\"> {{ opportunities.win_chances / 100 | percent }} @if (opportunities.cancelled) {\n <span class=\"text-danger\"\n >!Cancelled!</span>\n }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (activeOpportunities?.length) {\n <tr>\n <td></td>\n <td></td>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ activeOpportunitiesTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (activeOpportunities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"activeOpportunities.length\" />\n }\n </div>\n }\n @if (activeOpportunities?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountLastActivitiesLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountLastActivities?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (accountLastActivities.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountLastActivities.length\" />\n }\n </div>\n }\n @if (accountLastActivities?.length === 0 && accountLastActivitiesLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountAtRiskDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (accountAtRisk?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && accountAtRisk?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (accountAtRisk?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ accountAtRiskTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (accountAtRisk.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"accountAtRisk.length\" />\n }\n </div>\n }\n @if (accountAtRisk?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!contactRenewalLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (ContractRenewal?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (canViewMrr || userId) {\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 <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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && ContractRenewal?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr || account.owner_id === userId) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: (account.main_currency || account.currency) }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (ContractRenewal?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ contractRenewalTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (ContractRenewal.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"ContractRenewal.length\" />\n }\n </div>\n }\n @if (ContractRenewal?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!creditCardExpiringDetailsLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (creditCardExpiring?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 @if (canViewMrr || userId) {\n <th scope=\"true\" class=\"mrr-header\">{{ 'Crm.AccountMessage.MRR' | 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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && creditCardExpiring?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 @if (account.cc_expiring_at | isPastDate) {\n <span 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 }\n </td>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"footer\">\n @if (creditCardExpiring?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ creditCardExpiringTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (creditCardExpiring.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"creditCardExpiring.length\" />\n }\n </div>\n }\n @if (creditCardExpiring?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!magicMomentLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n @if (magicMoment?.length) {\n <div class=\"primeng-datatable-container table-responsive\"\n >\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 let-i=\"rowIndex\">\n <!-- Totals row at the top (first row) -->\n @if (i === 0 && magicMoment?.length) {\n <tr class=\"totals-row\">\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n <!-- Regular data row -->\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 @if (canViewMrr) {\n <td data-head=\"MRR\" class=\"expected-mrr\">\n {{ account.expected_mrr / 100 | currency: account.currency }}\n </td>\n }\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 <ng-template pTemplate=\"footer\">\n @if (magicMoment?.length) {\n <tr>\n <td></td>\n @if (canViewMrr) {\n <td class=\"fw-bold expected-mrr\">\n <strong>{{ magicMomentTotal?.total_mrr / 100 | currency: 'USD' }}</strong>\n </td>\n }\n <td></td>\n <td></td>\n <td></td>\n </tr>\n }\n </ng-template>\n </p-table>\n @if (magicMoment.length !==0 ) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"magicMoment.length\" />\n }\n </div>\n }\n @if (magicMoment?.length === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Summary.NoInsightMessage' | transloco\"> </pw-no-data>\n </div>\n }\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 @if (!accountGeographyLoaded) {\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n }\n </div>\n <div>\n @if (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 }\n </div>\n @if (accountGeographyLoaded && !accountGeography?.data?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.ContactMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n</ng-container>\n</div>\n" }]
|
|
4338
4335
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
4339
4336
|
|
|
4340
4337
|
class SmartCrmInsightComponent {
|
|
@@ -4391,7 +4388,6 @@ class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
|
|
|
4391
4388
|
this.getAccountsBySubscription();
|
|
4392
4389
|
this.source$ = this.crmService.getAllAccountSource(this.subscriptionId).pipe(map(res => ({
|
|
4393
4390
|
crm_sources: [
|
|
4394
|
-
{ label: 'Select CRM Source', value: null },
|
|
4395
4391
|
...(res?.crm_sources ?? []).map(item => ({
|
|
4396
4392
|
label: item.name,
|
|
4397
4393
|
value: item.id
|
|
@@ -4556,11 +4552,11 @@ class SmartCrmLeadsDetailsComponent extends AppBaseComponent {
|
|
|
4556
4552
|
super.ngOnDestroy();
|
|
4557
4553
|
}
|
|
4558
4554
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmLeadsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.GeoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4559
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmLeadsDetailsComponent, isStandalone: false, 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@if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\" >\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\" controlId=\"crm-leads-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"crm-leads-first_name\" autocomplete=\"given-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\" controlId=\"crm-leads-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"crm-leads-last_name\" autocomplete=\"family-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\" controlId=\"crm-leads-location\" [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-leads-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-leads-location-label'\"\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 <span class=\"pw-label-style mb-2\" id=\"crm-leads-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-leads-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"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 : {}\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\" controlId=\"crm-leads-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"crm-leads-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\" controlId=\"crm-leads-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"crm-leads-tel\" autocomplete=\"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=\"crm-leads-email\">{{ 'Crm.ContactMessage.Email' | transloco }} <span class=\"text-danger required-icon\">*</span>\n @if (data && data.email_verified) {\n <span class=\"text-success fw-bold\">Verified</span>\n }\n </label>\n <input type=\"email\" id=\"crm-leads-email\" name=\"email\" class=\"form-control\" formControlName=\"email\" autocomplete=\"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 <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-email_verified-label\">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco\n }} </span>\n </span>\n <pw-input-container class=\"nowrap\" name=\"email_verified\" controlId=\"crm-leads-email_verified\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-leads-email_verified-label'\"\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\" controlId=\"crm-leads-linkedin_url\">\n <input type=\"url\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"crm-leads-linkedin_url\" autocomplete=\"url\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Account' | transloco }}</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n [attr.aria-labelledby]=\"'crm-leads-account-label'\"\n autocomplete=\"off\" optionLabel=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n [inputStyle]=\"\n submitted && f['crm_account_id'].errors\n ? { border: '1px solid #ff586b' }\n : {}\n \" placeholder=\"Search accounts\" [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"col-12 col-sm-4\">\n @if (source$ | async; as source) {\n <pw-input-container\n [label]=\"'Crm.CrmLeads.Source' | transloco\"\n name=\"crm_source_id\"\n controlId=\"crm-leads-source\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CrmLeads.Tooltip.Source' | transloco\"\n labelClass=\"pw-label-style\"\n errorMsg=\"source is required\">\n <p-select\n [attr.aria-labelledby]=\"'crm-leads-source-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n<div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\" controlId=\"crm-leads-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\" id=\"crm-leads-dob\" name=\"dob\" placeholder=\"dd-mmm-yyyy\" formControlName=\"dob\" ngbDatepicker\n #d=\"ngbDatepicker\" autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\" type=\"button\" aria-label=\"Open date picker\" (click)=\"d.toggle()\">\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 <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-potential-label\">{{ 'Crm.ContactMessage.Potential' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco\n }}</span>\n</span>\n<p-select\n [attr.aria-labelledby]=\"'crm-leads-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\"\n placeholder=\"Select Potential\">\n</p-select>\n</div>\n<div class=\"col-12 col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}\n </span>\n</span>\n<p-multiSelect inputId=\"crm-leads-details-labels\" [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"\n[attr.aria-labelledby]=\"'crm-leads-labels-label'\"></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}\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: 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: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12$1.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4555
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmLeadsDetailsComponent, isStandalone: false, 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@if (isLoading) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\">\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\" controlId=\"crm-leads-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"crm-leads-first_name\" autocomplete=\"given-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\" controlId=\"crm-leads-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"crm-leads-last_name\" autocomplete=\"family-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\" controlId=\"crm-leads-location\" [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-leads-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-leads-location-label'\"\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-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Country' | transloco\" name=\"country\"\n controlId=\"crm-leads-country\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-leads-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"name\"\n [multiple]=\"false\"\n styleClass=\"w-100\"\n placeholder=\"Search Country\"\n [dropdown]=\"true\"\n [inputStyle]=\"submitted && f['country'].errors ? { border: '1px solid #ff586b' } : {}\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\" name=\"headline\" controlId=\"crm-leads-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"crm-leads-headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\" name=\"tel\" controlId=\"crm-leads-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"crm-leads-tel\" autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\" name=\"email\" controlId=\"crm-leads-email\"\n [afterLabel]=\"'<span class=\\'text-success fw-bold\\'>Verified</span>'\" [showAfterLabel]=\"!!data?.email_verified\"\n [errorMsg]=\"f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\">\n <input type=\"email\" id=\"crm-leads-email\" name=\"email\" class=\"form-control\" formControlName=\"email\" autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\" name=\"email_verified\"\n controlId=\"crm-leads-email_verified\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.ContactMessage.Tooltip.EmailVerified' | transloco\">\n <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-leads-email_verified-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\" name=\"linkedin_url\" controlId=\"crm-leads-linkedin_url\">\n <input type=\"url\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"crm-leads-linkedin_url\" autocomplete=\"url\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Account' | transloco\" name=\"crm_account_id\"\n controlId=\"crm-leads-account\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.CrmLeads.Tooltip.Account' | transloco\">\n <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n [attr.aria-labelledby]=\"'crm-leads-account-label'\"\n autocomplete=\"off\" optionLabel=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n [inputStyle]=\"submitted && f['crm_account_id'].errors ? { border: '1px solid #ff586b' } : {}\"\n placeholder=\"Search accounts\" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n @if (source$ | async; as source) {\n <pw-input-container\n [label]=\"'Crm.CrmLeads.Source' | transloco\"\n name=\"crm_source_id\"\n controlId=\"crm-leads-source\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CrmLeads.Tooltip.Source' | transloco\"\n errorMsg=\"source is required\">\n <p-select\n [attr.aria-labelledby]=\"'crm-leads-source-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\" controlId=\"crm-leads-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\" id=\"crm-leads-dob\" name=\"dob\" placeholder=\"dd-mmm-yyyy\" formControlName=\"dob\" ngbDatepicker\n #d=\"ngbDatepicker\" autocomplete=\"off\" />\n <button class=\"btn btn-primary\" type=\"button\" aria-label=\"Open date picker\" (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Potential' | transloco\" name=\"potential\"\n controlId=\"crm-leads-potential\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.ContactMessage.Tooltip.Potential' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'crm-leads-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\"\n placeholder=\"Select Potential\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Labels' | transloco\" name=\"labels\"\n controlId=\"crm-leads-labels\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.ContactMessage.Tooltip.Labels' | transloco\">\n <p-multiSelect inputId=\"crm-leads-details-labels\" [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-leads-labels-label'\"></p-multiSelect>\n </pw-input-container>\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}\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: 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: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4560
4556
|
}
|
|
4561
4557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmLeadsDetailsComponent, decorators: [{
|
|
4562
4558
|
type: Component,
|
|
4563
|
-
args: [{ selector: 'pw-smart-crm-leads-details', standalone: false, 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@if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\" >\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\" controlId=\"crm-leads-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"crm-leads-first_name\" autocomplete=\"given-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\" controlId=\"crm-leads-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"crm-leads-last_name\" autocomplete=\"family-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\" controlId=\"crm-leads-location\" [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-leads-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-leads-location-label'\"\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 <span class=\"pw-label-style mb-2\" id=\"crm-leads-country-label\">{{ 'Crm.AccountMessage.Country' | transloco }}</span>\n <p-autoComplete formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-leads-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"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 : {}\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\" controlId=\"crm-leads-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"crm-leads-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\" controlId=\"crm-leads-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"crm-leads-tel\" autocomplete=\"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=\"crm-leads-email\">{{ 'Crm.ContactMessage.Email' | transloco }} <span class=\"text-danger required-icon\">*</span>\n @if (data && data.email_verified) {\n <span class=\"text-success fw-bold\">Verified</span>\n }\n </label>\n <input type=\"email\" id=\"crm-leads-email\" name=\"email\" class=\"form-control\" formControlName=\"email\" autocomplete=\"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 <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-email_verified-label\">{{ 'Crm.ContactMessage.EmailVerified' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\"> {{'Crm.ContactMessage.Tooltip.EmailVerified'| transloco\n }} </span>\n </span>\n <pw-input-container class=\"nowrap\" name=\"email_verified\" controlId=\"crm-leads-email_verified\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-leads-email_verified-label'\"\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\" controlId=\"crm-leads-linkedin_url\">\n <input type=\"url\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"crm-leads-linkedin_url\" autocomplete=\"url\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-account-label\">{{ 'Crm.ContactMessage.Account' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.CrmLeads.Tooltip.Account' | transloco }}</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n [attr.aria-labelledby]=\"'crm-leads-account-label'\"\n autocomplete=\"off\" optionLabel=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n [inputStyle]=\"\n submitted && f['crm_account_id'].errors\n ? { border: '1px solid #ff586b' }\n : {}\n \" placeholder=\"Search accounts\" [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"col-12 col-sm-4\">\n @if (source$ | async; as source) {\n <pw-input-container\n [label]=\"'Crm.CrmLeads.Source' | transloco\"\n name=\"crm_source_id\"\n controlId=\"crm-leads-source\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CrmLeads.Tooltip.Source' | transloco\"\n labelClass=\"pw-label-style\"\n errorMsg=\"source is required\">\n <p-select\n [attr.aria-labelledby]=\"'crm-leads-source-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n<div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\" controlId=\"crm-leads-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\" id=\"crm-leads-dob\" name=\"dob\" placeholder=\"dd-mmm-yyyy\" formControlName=\"dob\" ngbDatepicker\n #d=\"ngbDatepicker\" autocomplete=\"off\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\" type=\"button\" aria-label=\"Open date picker\" (click)=\"d.toggle()\">\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 <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-potential-label\">{{ 'Crm.ContactMessage.Potential' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Potential' | transloco\n }}</span>\n</span>\n<p-select\n [attr.aria-labelledby]=\"'crm-leads-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\"\n placeholder=\"Select Potential\">\n</p-select>\n</div>\n<div class=\"col-12 col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-leads-labels-label\">{{ 'Crm.ContactMessage.Labels' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\"> {{ 'Crm.ContactMessage.Tooltip.Labels' | transloco }}\n </span>\n</span>\n<p-multiSelect inputId=\"crm-leads-details-labels\" [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"\n[attr.aria-labelledby]=\"'crm-leads-labels-label'\"></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}\n" }]
|
|
4559
|
+
args: [{ selector: 'pw-smart-crm-leads-details', standalone: false, 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@if (isLoading) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n@if (!isLoading) {\n <div class=\"p-2 mt-3\">\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\" controlId=\"crm-leads-first_name\"\n [errorMsg]=\"'Crm.ContactMessage.FirstNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"first_name\" id=\"crm-leads-first_name\" autocomplete=\"given-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\" controlId=\"crm-leads-last_name\"\n [errorMsg]=\"'Crm.ContactMessage.LastNameErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"last_name\" id=\"crm-leads-last_name\" autocomplete=\"family-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\" controlId=\"crm-leads-location\" [useAriaLabelledbyOnly]=\"true\">\n <input ngx-gp-autocomplete\n id=\"crm-leads-location\"\n name=\"location\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n [attr.aria-labelledby]=\"'crm-leads-location-label'\"\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-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.AccountMessage.Country' | transloco\" name=\"country\"\n controlId=\"crm-leads-country\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete formControlName=\"country\"\n [attr.aria-labelledby]=\"'crm-leads-country-label'\"\n [suggestions]=\"filteredCountries\"\n (completeMethod)=\"onSearchCountry($event)\"\n dataKey=\"code\"\n optionLabel=\"name\"\n [multiple]=\"false\"\n styleClass=\"w-100\"\n placeholder=\"Search Country\"\n [dropdown]=\"true\"\n [inputStyle]=\"submitted && f['country'].errors ? { border: '1px solid #ff586b' } : {}\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Headline' | transloco\" name=\"headline\" controlId=\"crm-leads-headline\"\n [errorMsg]=\"'Crm.ContactMessage.HeadlineErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"headline\" id=\"crm-leads-headline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['headline'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Tel' | transloco\" name=\"tel\" controlId=\"crm-leads-tel\"\n [errorMsg]=\"'Crm.ContactMessage.TelErrorMessage' | transloco\">\n <input type=\"text\" class=\"form-control\" formControlName=\"tel\" id=\"crm-leads-tel\" autocomplete=\"tel\"\n [ngClass]=\"{ 'is-invalid': submitted && f['tel'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Email' | transloco\" name=\"email\" controlId=\"crm-leads-email\"\n [afterLabel]=\"'<span class=\\'text-success fw-bold\\'>Verified</span>'\" [showAfterLabel]=\"!!data?.email_verified\"\n [errorMsg]=\"f['email']?.errors?.required ? 'Please enter email' : 'Please Enter valid email'\">\n <input type=\"email\" id=\"crm-leads-email\" name=\"email\" class=\"form-control\" formControlName=\"email\" autocomplete=\"email\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.EmailVerified' | transloco\" name=\"email_verified\"\n controlId=\"crm-leads-email_verified\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.ContactMessage.Tooltip.EmailVerified' | transloco\">\n <ui-switch formControlName=\"email_verified\" name=\"email_verified\"\n [attr.aria-labelledby]=\"'crm-leads-email_verified-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['email_verified'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.LinkedInUrl' | transloco\" name=\"linkedin_url\" controlId=\"crm-leads-linkedin_url\">\n <input type=\"url\" class=\"form-control\" formControlName=\"linkedin_url\" id=\"crm-leads-linkedin_url\" autocomplete=\"url\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Account' | transloco\" name=\"crm_account_id\"\n controlId=\"crm-leads-account\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.CrmLeads.Tooltip.Account' | transloco\">\n <p-autoComplete [suggestions]=\"filteredAccounts\" formControlName=\"crm_account_id\" dataKey=\"id\"\n [attr.aria-labelledby]=\"'crm-leads-account-label'\"\n autocomplete=\"off\" optionLabel=\"name\" [dropdown]=\"true\" (completeMethod)=\"search($event)\" styleClass=\"w-100\"\n [inputStyle]=\"submitted && f['crm_account_id'].errors ? { border: '1px solid #ff586b' } : {}\"\n placeholder=\"Search accounts\" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n @if (source$ | async; as source) {\n <pw-input-container\n [label]=\"'Crm.CrmLeads.Source' | transloco\"\n name=\"crm_source_id\"\n controlId=\"crm-leads-source\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CrmLeads.Tooltip.Source' | transloco\"\n errorMsg=\"source is required\">\n <p-select\n [attr.aria-labelledby]=\"'crm-leads-source-label'\"\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-select>\n </pw-input-container>\n }\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.DateOfBirth' | transloco\" name=\"dob\" controlId=\"crm-leads-dob\">\n <div class=\"input-group\">\n <input class=\"form-control\" id=\"crm-leads-dob\" name=\"dob\" placeholder=\"dd-mmm-yyyy\" formControlName=\"dob\" ngbDatepicker\n #d=\"ngbDatepicker\" autocomplete=\"off\" />\n <button class=\"btn btn-primary\" type=\"button\" aria-label=\"Open date picker\" (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Potential' | transloco\" name=\"potential\"\n controlId=\"crm-leads-potential\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.ContactMessage.Tooltip.Potential' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'crm-leads-potential-label'\"\n [options]=\"potentials\"\n formControlName=\"potential\"\n [ngClass]=\"{ 'is-invalid': submitted && f['potential'].errors }\"\n placeholder=\"Select Potential\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-4\">\n <pw-input-container [label]=\"'Crm.ContactMessage.Labels' | transloco\" name=\"labels\"\n controlId=\"crm-leads-labels\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Crm.ContactMessage.Tooltip.Labels' | transloco\">\n <p-multiSelect inputId=\"crm-leads-details-labels\" [options]=\"labels\" formControlName=\"labels\" appendTo=\"body\"\n [attr.aria-labelledby]=\"'crm-leads-labels-label'\"></p-multiSelect>\n </pw-input-container>\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}\n" }]
|
|
4564
4560
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.GeoService }, { type: i0.ChangeDetectorRef }] });
|
|
4565
4561
|
|
|
4566
4562
|
class SmartCrmLeadsComponent extends AppBaseComponent {
|
|
@@ -4683,11 +4679,11 @@ class SmartCrmLeadsComponent extends AppBaseComponent {
|
|
|
4683
4679
|
super.ngOnDestroy();
|
|
4684
4680
|
}
|
|
4685
4681
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmLeadsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2.GeoService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4686
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmLeadsComponent, isStandalone: false, 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@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n\n<div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-leads-filter-source\" 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 <label for=\"smart-crm-leads-search\" class=\"visually-hidden\">Search leads</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-leads-search\"\n name=\"smart-crm-leads-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search leads...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (lead?.enquiry) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"lead?.enquiry\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n }\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 @if (!lead?.newsletter_subscribed) {\n <span class=\"ms-2 cursor-pointer\"\n [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n tooltipPosition=\"top\"\n ><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n }\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 @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.crm_account?.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.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(lead.id)\"\n (keydown.space)=\"onDelete(lead.id)\"\n (click)=\"onDelete(lead.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n </div>\n }\n", dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i18.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4682
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmLeadsComponent, isStandalone: false, 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@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n\n<div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-leads-filter-source\" 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 <label for=\"smart-crm-leads-search\" class=\"visually-hidden\">Search leads</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-leads-search\"\n name=\"smart-crm-leads-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search leads...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (lead?.enquiry) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"lead?.enquiry\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n }\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 @if (!lead?.newsletter_subscribed) {\n <span class=\"ms-2 cursor-pointer\"\n [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n tooltipPosition=\"top\"\n ><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n }\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 @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.crm_account?.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.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(lead.id)\"\n (keydown.space)=\"onDelete(lead.id)\"\n (click)=\"onDelete(lead.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n </div>\n }\n", dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i18.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4687
4683
|
}
|
|
4688
4684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmLeadsComponent, decorators: [{
|
|
4689
4685
|
type: Component,
|
|
4690
|
-
args: [{ selector: 'pw-smart-crm-leads', standalone: false, 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@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n\n<div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-leads-filter-source\" 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 <label for=\"smart-crm-leads-search\" class=\"visually-hidden\">Search leads</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-leads-search\"\n name=\"smart-crm-leads-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search leads...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @if (lead?.enquiry) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"lead?.enquiry\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n }\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 @if (!lead?.newsletter_subscribed) {\n <span class=\"ms-2 cursor-pointer\"\n [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n tooltipPosition=\"top\"\n ><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n }\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 @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.crm_account?.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.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(lead.id)\"\n (keydown.space)=\"onDelete(lead.id)\"\n (click)=\"onDelete(lead.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n </div>\n }\n" }]
|
|
4686
|
+
args: [{ selector: 'pw-smart-crm-leads', standalone: false, 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@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n\n<div class=\"primeng-datatable-container actions-collapsed 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 inputId=\"crm-leads-filter-source\" 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 <label for=\"smart-crm-leads-search\" class=\"visually-hidden\">Search leads</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"smart-crm-leads-search\"\n name=\"smart-crm-leads-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search leads...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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\" class=\"actions-list-three\">{{ '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 @if (lead?.enquiry) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"lead?.enquiry\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-info-circle\"></i>\n </span>\n }\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 @if (!lead?.newsletter_subscribed) {\n <span class=\"ms-2 cursor-pointer\"\n [pTooltip]=\"'Crm.CrmLeads.Tooltip.NewsLetterUnsubscribed' | transloco\"\n tooltipPosition=\"top\"\n ><i class=\"fas fa-exclamation-triangle text-danger\"></i></span>\n }\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 @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.crm_account?.owner_id === userId\n ) {\n <li\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 }\n @if (\n hasAccess ||\n lead?.owner_id === userId ||\n lead?.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(lead.id)\"\n (keydown.space)=\"onDelete(lead.id)\"\n (click)=\"onDelete(lead.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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CrmLeads.NoCrmLeadMessage' | transloco\"> </pw-no-data>\n </div>\n }\n" }]
|
|
4691
4687
|
}], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i2.GeoService }] });
|
|
4692
4688
|
|
|
4693
4689
|
class SmartCrmMarketingUsersListComponent extends AppBaseComponent {
|
|
@@ -4745,11 +4741,11 @@ class SmartCrmMarketingUsersListComponent extends AppBaseComponent {
|
|
|
4745
4741
|
super.ngOnDestroy();
|
|
4746
4742
|
}
|
|
4747
4743
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmMarketingUsersListComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4748
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmMarketingUsersListComponent, isStandalone: false, selector: "pw-smart-crm-marketing-users-list", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n <p>This is a summary of the contacts that received your marketing email.</p>\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
|
|
4744
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmMarketingUsersListComponent, isStandalone: false, selector: "pw-smart-crm-marketing-users-list", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n <p>This is a summary of the contacts that received your marketing email.</p>\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 mt-3 table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.newsletter_contacts\"\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 <label for=\"crm-marketing-contacts-search\" class=\"visually-hidden\">Search contact</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-marketing-contacts-search\"\n name=\"crm-marketing-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.MarketingInsight.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Crm.MarketingInsight.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.SentAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.LastOpened' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.OpenCount' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.ClickedAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.ClickedCount' | transloco }}\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Name\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, user.id]\">{{\n user | ifNameNullShowEmail\n }}</a>\n </td>\n <td data-head=\"Email\">\n <a href=\"mailto:{{ user?.email }}\">{{ user?.email }}</a>\n </td>\n <td data-head=\"Sent At\">{{ user?.message_insight?.sent_at | dateFormat }}</td>\n <td data-head=\"Last Opened\">{{ user?.message_insight?.opened_at }}</td>\n <td data-head=\"Open Count\">{{ user?.message_insight?.open_count }}</td>\n <td data-head=\"Clicked At\">{{ user?.message_insight?.clicked_at }}</td>\n <td data-head=\"Clicked Count\">{{ user?.message_insight?.click_count }}</td>\n <td data-head=\"Actions\"></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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.MarketingInsight.NoUserListMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", dependencies: [{ 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4749
4745
|
}
|
|
4750
4746
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmMarketingUsersListComponent, decorators: [{
|
|
4751
4747
|
type: Component,
|
|
4752
|
-
args: [{ selector: 'pw-smart-crm-marketing-users-list', standalone: false, template: "<div class=\"me-auto col-xs-6\">\n <p>This is a summary of the contacts that received your marketing email.</p>\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
|
|
4748
|
+
args: [{ selector: 'pw-smart-crm-marketing-users-list', standalone: false, template: "<div class=\"me-auto col-xs-6\">\n <p>This is a summary of the contacts that received your marketing email.</p>\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 mt-3 table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.newsletter_contacts\"\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 <label for=\"crm-marketing-contacts-search\" class=\"visually-hidden\">Search contact</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-marketing-contacts-search\"\n name=\"crm-marketing-contacts-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search contact...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Crm.MarketingInsight.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Crm.MarketingInsight.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.SentAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.LastOpened' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.OpenCount' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.ClickedAt' | transloco }}\n </th>\n <th scope=\"true\">\n {{ 'Crm.MarketingInsight.ClickedCount' | transloco }}\n </th>\n <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Name\">\n <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, user.id]\">{{\n user | ifNameNullShowEmail\n }}</a>\n </td>\n <td data-head=\"Email\">\n <a href=\"mailto:{{ user?.email }}\">{{ user?.email }}</a>\n </td>\n <td data-head=\"Sent At\">{{ user?.message_insight?.sent_at | dateFormat }}</td>\n <td data-head=\"Last Opened\">{{ user?.message_insight?.opened_at }}</td>\n <td data-head=\"Open Count\">{{ user?.message_insight?.open_count }}</td>\n <td data-head=\"Clicked At\">{{ user?.message_insight?.clicked_at }}</td>\n <td data-head=\"Clicked Count\">{{ user?.message_insight?.click_count }}</td>\n <td data-head=\"Actions\"></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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.MarketingInsight.NoUserListMessage' | transloco\"> </pw-no-data>\n </div>\n}\n" }]
|
|
4753
4749
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
4754
4750
|
|
|
4755
4751
|
class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
|
|
@@ -4961,7 +4957,7 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
|
|
|
4961
4957
|
super.ngOnDestroy();
|
|
4962
4958
|
}
|
|
4963
4959
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.CommonService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4964
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCommunicationsDetailsComponent, isStandalone: false, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex\">\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>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n </h3>\n </div>\n </div>\n <ng-container>\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-1\">\n <p class=\"my-4\">\n You can insert the user name by adding the following syntax in the subject or body:\n {{ userNameSyntax }}\n </p>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n name=\"title\"\n controlId=\"crm-marketing-title\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n errorMsg=\"Please enter subject\">\n <input type=\"text\"\n id=\"crm-marketing-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n [showTooltip]=\"true\"\n [isLeftTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n name=\"body\"\n controlId=\"crm-marketing-body\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please enter body\">\n <quill-editor [styles]=\"{ height: '220px' }\"\n class=\"quillEditor quill-container\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [attr.aria-labelledby]=\"'crm-marketing-body-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle left-info-circle\" for=\"crm-marketing-send_at\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_at\"\n name=\"send_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_at\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle\" for=\"crm-marketing-send_until\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_until\"\n name=\"send_until\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_until\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-previous_newsletter-label\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n }}</span></span>\n <p-select\n [attr.aria-labelledby]=\"'crm-marketing-previous_newsletter-label'\"\n [options]=\"allCommunications\"\n formControlName=\"previous_newsletter_id\"\n (onChange)=\"onNewsletterSelect($event.value)\"\n [ngClass]=\"{'is-invalid': submitted && f['previous_newsletter_id'].errors}\"\n [placeholder]=\"'Select previous newsletter'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </div>\n @if (daysToNewsletterField) {\n <div class=\"col-12 col-sm-2\"\n >\n <pw-input-container [label]=\"\n 'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n name=\"days_to_wait_from_previous_newsletter\"\n controlId=\"crm-marketing-days_to_wait\"\n errorMsg=\"Please enter days to wait from previous newsletter\">\n <input type=\"number\"\n id=\"crm-marketing-days_to_wait\"\n name=\"days_to_wait_from_previous_newsletter\"\n class=\"form-control\"\n formControlName=\"days_to_wait_from_previous_newsletter\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['days_to_wait_from_previous_newsletter'].errors\n }\" />\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-md-1\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-is_pushed-label\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-is_pushed-label'\"\n formControlName=\"is_pushed\"\n (change)=\"onChange($event, 'is_pushed')\"\n name=\"is_pushed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-can_reply-label\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-can_reply-label'\"\n formControlName=\"can_reply\"\n name=\"can_reply\">\n </ui-switch>\n </div>\n </div>\n </div>\n <h3>Apply filters to target specific recipients</h3>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle left-info-circle\" id=\"crm-marketing-location-label\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n }}</span></span>\n <input ngx-gp-autocomplete\n id=\"crm-marketing-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-marketing-location-label'\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-products-label\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-products\"\n [options]=\"crmProduct\"\n [attr.aria-labelledby]=\"'crm-marketing-products-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"product_ids\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-features-label\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-features\"\n [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-marketing-features-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_potential-label\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_potential\"\n [options]=\"potentials\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_potential-label'\"\n formControlName=\"contact_potential\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_label-label\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_label\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_label-label'\"\n formControlName=\"contact_label\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_source-label\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_source\"\n [options]=\"contactSource\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_source-label'\"\n formControlName=\"contact_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_priority-label\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_priority\"\n [options]=\"priority\"\n [attr.aria-labelledby]=\"'crm-marketing-account_priority-label'\"\n formControlName=\"account_priority\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_status-label\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_status\"\n [options]=\"status\"\n [attr.aria-labelledby]=\"'crm-marketing-account_status-label'\"\n formControlName=\"account_status\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_source-label\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_source\"\n [options]=\"source\"\n [attr.aria-labelledby]=\"'crm-marketing-account_source-label'\"\n formControlName=\"account_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_size-label\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_size\"\n [options]=\"organizationSizes\"\n [attr.aria-labelledby]=\"'crm-marketing-account_size-label'\"\n formControlName=\"account_size\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <!-- Only new contacts -->\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-marketing-only_new_contacts-label\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-only_new_contacts-label'\"\n formControlName=\"only_new_contacts\"\n name=\"only_new_contacts\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['only_new_contacts'].errors\n }\">\n </ui-switch>\n </div>\n </div>\n </div>\n <div class=\"row\">\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.valid\"\n >\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: 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: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i12$2.QuillEditorComponent, selector: "quill-editor" }, { 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: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4960
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCommunicationsDetailsComponent, isStandalone: false, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex\">\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>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n </h3>\n </div>\n </div>\n <ng-container>\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-1\">\n <p class=\"my-4\">\n You can insert the user name by adding the following syntax in the subject or body:\n {{ userNameSyntax }}\n </p>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n name=\"title\"\n controlId=\"crm-marketing-title\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n errorMsg=\"Please enter subject\">\n <input type=\"text\"\n id=\"crm-marketing-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n [showTooltip]=\"true\"\n [isLeftTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n name=\"body\"\n controlId=\"crm-marketing-body\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please enter body\">\n <quill-editor [styles]=\"{ height: '220px' }\"\n class=\"quillEditor quill-container\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [attr.aria-labelledby]=\"'crm-marketing-body-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle left-info-circle\" for=\"crm-marketing-send_at\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_at\"\n name=\"send_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_at\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle\" for=\"crm-marketing-send_until\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_until\"\n name=\"send_until\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_until\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-previous_newsletter-label\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n }}</span></span>\n <p-select\n [attr.aria-labelledby]=\"'crm-marketing-previous_newsletter-label'\"\n [options]=\"allCommunications\"\n formControlName=\"previous_newsletter_id\"\n (onChange)=\"onNewsletterSelect($event.value)\"\n [ngClass]=\"{'is-invalid': submitted && f['previous_newsletter_id'].errors}\"\n [placeholder]=\"'Select previous newsletter'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </div>\n @if (daysToNewsletterField) {\n <div class=\"col-12 col-sm-2\"\n >\n <pw-input-container [label]=\"\n 'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n name=\"days_to_wait_from_previous_newsletter\"\n controlId=\"crm-marketing-days_to_wait\"\n errorMsg=\"Please enter days to wait from previous newsletter\">\n <input type=\"number\"\n id=\"crm-marketing-days_to_wait\"\n name=\"days_to_wait_from_previous_newsletter\"\n class=\"form-control\"\n formControlName=\"days_to_wait_from_previous_newsletter\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['days_to_wait_from_previous_newsletter'].errors\n }\" />\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-md-1\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-is_pushed-label\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-is_pushed-label'\"\n formControlName=\"is_pushed\"\n (change)=\"onChange($event, 'is_pushed')\"\n name=\"is_pushed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-can_reply-label\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-can_reply-label'\"\n formControlName=\"can_reply\"\n name=\"can_reply\">\n </ui-switch>\n </div>\n </div>\n </div>\n <h3>Apply filters to target specific recipients</h3>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle left-info-circle\" id=\"crm-marketing-location-label\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n }}</span></span>\n <input ngx-gp-autocomplete\n id=\"crm-marketing-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-marketing-location-label'\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-products-label\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-products\"\n [options]=\"crmProduct\"\n [attr.aria-labelledby]=\"'crm-marketing-products-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"product_ids\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-features-label\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-features\"\n [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-marketing-features-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_potential-label\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_potential\"\n [options]=\"potentials\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_potential-label'\"\n formControlName=\"contact_potential\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_label-label\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_label\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_label-label'\"\n formControlName=\"contact_label\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_source-label\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_source\"\n [options]=\"contactSource\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_source-label'\"\n formControlName=\"contact_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_priority-label\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_priority\"\n [options]=\"priority\"\n [attr.aria-labelledby]=\"'crm-marketing-account_priority-label'\"\n formControlName=\"account_priority\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_status-label\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_status\"\n [options]=\"status\"\n [attr.aria-labelledby]=\"'crm-marketing-account_status-label'\"\n formControlName=\"account_status\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_source-label\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_source\"\n [options]=\"source\"\n [attr.aria-labelledby]=\"'crm-marketing-account_source-label'\"\n formControlName=\"account_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_size-label\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_size\"\n [options]=\"organizationSizes\"\n [attr.aria-labelledby]=\"'crm-marketing-account_size-label'\"\n formControlName=\"account_size\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <!-- Only new contacts -->\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-marketing-only_new_contacts-label\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-only_new_contacts-label'\"\n formControlName=\"only_new_contacts\"\n name=\"only_new_contacts\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['only_new_contacts'].errors\n }\">\n </ui-switch>\n </div>\n </div>\n </div>\n <div class=\"row\">\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.valid\"\n >\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$2.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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: 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: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i12$1.QuillEditorComponent, selector: "quill-editor" }, { 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: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
4965
4961
|
}
|
|
4966
4962
|
__decorate([
|
|
4967
4963
|
ValidateForm('form'),
|
|
@@ -4971,7 +4967,7 @@ __decorate([
|
|
|
4971
4967
|
], SmartCrmCommunicationsDetailsComponent.prototype, "onSave", null);
|
|
4972
4968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, decorators: [{
|
|
4973
4969
|
type: Component,
|
|
4974
|
-
args: [{ selector: 'pw-smart-crm-communications-details', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex\">\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>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n </h3>\n </div>\n </div>\n <ng-container>\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-1\">\n <p class=\"my-4\">\n You can insert the user name by adding the following syntax in the subject or body:\n {{ userNameSyntax }}\n </p>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n name=\"title\"\n controlId=\"crm-marketing-title\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n errorMsg=\"Please enter subject\">\n <input type=\"text\"\n id=\"crm-marketing-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n [showTooltip]=\"true\"\n [isLeftTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n name=\"body\"\n controlId=\"crm-marketing-body\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please enter body\">\n <quill-editor [styles]=\"{ height: '220px' }\"\n class=\"quillEditor quill-container\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [attr.aria-labelledby]=\"'crm-marketing-body-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle left-info-circle\" for=\"crm-marketing-send_at\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_at\"\n name=\"send_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_at\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle\" for=\"crm-marketing-send_until\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_until\"\n name=\"send_until\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_until\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n <div class=\"input-group-append\">\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-previous_newsletter-label\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n }}</span></span>\n <p-select\n [attr.aria-labelledby]=\"'crm-marketing-previous_newsletter-label'\"\n [options]=\"allCommunications\"\n formControlName=\"previous_newsletter_id\"\n (onChange)=\"onNewsletterSelect($event.value)\"\n [ngClass]=\"{'is-invalid': submitted && f['previous_newsletter_id'].errors}\"\n [placeholder]=\"'Select previous newsletter'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </div>\n @if (daysToNewsletterField) {\n <div class=\"col-12 col-sm-2\"\n >\n <pw-input-container [label]=\"\n 'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n name=\"days_to_wait_from_previous_newsletter\"\n controlId=\"crm-marketing-days_to_wait\"\n errorMsg=\"Please enter days to wait from previous newsletter\">\n <input type=\"number\"\n id=\"crm-marketing-days_to_wait\"\n name=\"days_to_wait_from_previous_newsletter\"\n class=\"form-control\"\n formControlName=\"days_to_wait_from_previous_newsletter\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['days_to_wait_from_previous_newsletter'].errors\n }\" />\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-md-1\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-is_pushed-label\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-is_pushed-label'\"\n formControlName=\"is_pushed\"\n (change)=\"onChange($event, 'is_pushed')\"\n name=\"is_pushed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-can_reply-label\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-can_reply-label'\"\n formControlName=\"can_reply\"\n name=\"can_reply\">\n </ui-switch>\n </div>\n </div>\n </div>\n <h3>Apply filters to target specific recipients</h3>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle left-info-circle\" id=\"crm-marketing-location-label\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n }}</span></span>\n <input ngx-gp-autocomplete\n id=\"crm-marketing-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-marketing-location-label'\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-products-label\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-products\"\n [options]=\"crmProduct\"\n [attr.aria-labelledby]=\"'crm-marketing-products-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"product_ids\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-features-label\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-features\"\n [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-marketing-features-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_potential-label\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_potential\"\n [options]=\"potentials\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_potential-label'\"\n formControlName=\"contact_potential\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_label-label\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_label\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_label-label'\"\n formControlName=\"contact_label\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_source-label\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_source\"\n [options]=\"contactSource\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_source-label'\"\n formControlName=\"contact_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_priority-label\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_priority\"\n [options]=\"priority\"\n [attr.aria-labelledby]=\"'crm-marketing-account_priority-label'\"\n formControlName=\"account_priority\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_status-label\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_status\"\n [options]=\"status\"\n [attr.aria-labelledby]=\"'crm-marketing-account_status-label'\"\n formControlName=\"account_status\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_source-label\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_source\"\n [options]=\"source\"\n [attr.aria-labelledby]=\"'crm-marketing-account_source-label'\"\n formControlName=\"account_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_size-label\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_size\"\n [options]=\"organizationSizes\"\n [attr.aria-labelledby]=\"'crm-marketing-account_size-label'\"\n formControlName=\"account_size\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <!-- Only new contacts -->\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-marketing-only_new_contacts-label\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-only_new_contacts-label'\"\n formControlName=\"only_new_contacts\"\n name=\"only_new_contacts\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['only_new_contacts'].errors\n }\">\n </ui-switch>\n </div>\n </div>\n </div>\n <div class=\"row\">\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.valid\"\n >\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </ng-container>\n" }]
|
|
4970
|
+
args: [{ selector: 'pw-smart-crm-communications-details', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex\">\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>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>\n </h3>\n </div>\n </div>\n <ng-container>\n <div class=\"container-fluid pw-tab\">\n <div class=\"p-2 mt-1\">\n <p class=\"my-4\">\n You can insert the user name by adding the following syntax in the subject or body:\n {{ userNameSyntax }}\n </p>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Title' | transloco\"\n name=\"title\"\n controlId=\"crm-marketing-title\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n errorMsg=\"Please enter subject\">\n <input type=\"text\"\n id=\"crm-marketing-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-12\">\n <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n [showTooltip]=\"true\"\n [isLeftTooltip]=\"true\"\n [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n name=\"body\"\n controlId=\"crm-marketing-body\"\n [useAriaLabelledbyOnly]=\"true\"\n errorMsg=\"Please enter body\">\n <quill-editor [styles]=\"{ height: '220px' }\"\n class=\"quillEditor quill-container\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [attr.aria-labelledby]=\"'crm-marketing-body-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle left-info-circle\" for=\"crm-marketing-send_at\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_at\"\n name=\"send_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_at\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_at'].errors }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <label class=\"info-circle\" for=\"crm-marketing-send_until\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco\n }}</span></label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-marketing-send_until\"\n name=\"send_until\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"send_until\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [ngClass]=\"{ 'is-invalid': submitted && f['send_until'].errors }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-md-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-previous_newsletter-label\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n }}</span></span>\n <p-select\n [attr.aria-labelledby]=\"'crm-marketing-previous_newsletter-label'\"\n [options]=\"allCommunications\"\n formControlName=\"previous_newsletter_id\"\n (onChange)=\"onNewsletterSelect($event.value)\"\n [ngClass]=\"{'is-invalid': submitted && f['previous_newsletter_id'].errors}\"\n [placeholder]=\"'Select previous newsletter'\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </div>\n @if (daysToNewsletterField) {\n <div class=\"col-12 col-sm-2\"\n >\n <pw-input-container [label]=\"\n 'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'\n | transloco\n \"\n name=\"days_to_wait_from_previous_newsletter\"\n controlId=\"crm-marketing-days_to_wait\"\n errorMsg=\"Please enter days to wait from previous newsletter\">\n <input type=\"number\"\n id=\"crm-marketing-days_to_wait\"\n name=\"days_to_wait_from_previous_newsletter\"\n class=\"form-control\"\n formControlName=\"days_to_wait_from_previous_newsletter\"\n [ngClass]=\"{\n 'is-invalid':\n submitted && f['days_to_wait_from_previous_newsletter'].errors\n }\" />\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-md-1\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-is_pushed-label\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-is_pushed-label'\"\n formControlName=\"is_pushed\"\n (change)=\"onChange($event, 'is_pushed')\"\n name=\"is_pushed\">\n </ui-switch>\n </div>\n </div>\n <div class=\"col-12 col-md-2\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-can_reply-label\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-can_reply-label'\"\n formControlName=\"can_reply\"\n name=\"can_reply\">\n </ui-switch>\n </div>\n </div>\n </div>\n <h3>Apply filters to target specific recipients</h3>\n <div class=\"row mb-3\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle left-info-circle\" id=\"crm-marketing-location-label\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding left-field-tooltip\">{{\n 'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n }}</span></span>\n <input ngx-gp-autocomplete\n id=\"crm-marketing-location\"\n name=\"location\"\n [attr.aria-labelledby]=\"'crm-marketing-location-label'\"\n class=\"form-control\"\n #places=\"ngx-places\"\n formControlName=\"location\"\n (onAddressChange)=\"handleAddressChange($event)\"\n [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n </div>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-products-label\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-products\"\n [options]=\"crmProduct\"\n [attr.aria-labelledby]=\"'crm-marketing-products-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"product_ids\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-features-label\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-features\"\n [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-marketing-features-label'\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_potential-label\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_potential\"\n [options]=\"potentials\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_potential-label'\"\n formControlName=\"contact_potential\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_label-label\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_label\"\n [options]=\"labels\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_label-label'\"\n formControlName=\"contact_label\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-contact_source-label\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-contact_source\"\n [options]=\"contactSource\"\n [attr.aria-labelledby]=\"'crm-marketing-contact_source-label'\"\n formControlName=\"contact_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_priority-label\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_priority\"\n [options]=\"priority\"\n [attr.aria-labelledby]=\"'crm-marketing-account_priority-label'\"\n formControlName=\"account_priority\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_status-label\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_status\"\n [options]=\"status\"\n [attr.aria-labelledby]=\"'crm-marketing-account_status-label'\"\n formControlName=\"account_status\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_source-label\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_source\"\n [options]=\"source\"\n [attr.aria-labelledby]=\"'crm-marketing-account_source-label'\"\n formControlName=\"account_source\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <span class=\"pw-label-style info-circle\" id=\"crm-marketing-account_size-label\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n }}</span></span>\n <p-multiSelect inputId=\"crm-marketing-account_size\"\n [options]=\"organizationSizes\"\n [attr.aria-labelledby]=\"'crm-marketing-account_size-label'\"\n formControlName=\"account_size\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <!-- Only new contacts -->\n <div class=\"col-md-3\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-marketing-only_new_contacts-label\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n }}<span class=\"tooltiptext gradient-custom-branding\">{{\n 'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n }}</span>\n </span>\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'crm-marketing-only_new_contacts-label'\"\n formControlName=\"only_new_contacts\"\n name=\"only_new_contacts\"\n [ngClass]=\"{\n 'is-invalid': submitted && f['only_new_contacts'].errors\n }\">\n </ui-switch>\n </div>\n </div>\n </div>\n <div class=\"row\">\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.valid\"\n >\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </ng-container>\n" }]
|
|
4975
4971
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.CommonService }, { type: i0.ChangeDetectorRef }], propDecorators: { onSave: [] } });
|
|
4976
4972
|
|
|
4977
4973
|
class SmartCrmCommunicationsComponent extends AppBaseComponent {
|
|
@@ -5108,11 +5104,11 @@ class SmartCrmCommunicationsComponent extends AppBaseComponent {
|
|
|
5108
5104
|
super.ngOnDestroy();
|
|
5109
5105
|
}
|
|
5110
5106
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCommunicationsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5111
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCommunicationsComponent, isStandalone: false, 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@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 actions-collapsed 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 <label for=\"crm-marketing-list-search\" class=\"visually-hidden\">Search communication emails</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-marketing-list-search\"\n name=\"crm-marketing-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n </div>\n}\n<ng-container>\n @if (isLoaded) {\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n @if (communicationsInsight?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\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 @if (communicationsInsight.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"communicationsInsight.length\" />\n }\n </div>\n }\n @if (!communicationsInsight?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.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\">Campaigns Location</h5>\n <div>\n @if (communicationEngagement) {\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!communicationEngagement) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\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: 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmCommunicationsComponent, isStandalone: false, 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@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 actions-collapsed 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 <label for=\"crm-marketing-list-search\" class=\"visually-hidden\">Search communication emails</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-marketing-list-search\"\n name=\"crm-marketing-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 actions-list-three\">{{ '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 @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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n </div>\n}\n<ng-container>\n @if (isLoaded) {\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n @if (communicationsInsight?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\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 @if (communicationsInsight.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"communicationsInsight.length\" />\n }\n </div>\n }\n @if (!communicationsInsight?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.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\">Campaigns Location</h5>\n <div>\n @if (communicationEngagement) {\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!communicationEngagement) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\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: 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: "component", type: i4$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i11$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: i10.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: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i12.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i12.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5112
5108
|
}
|
|
5113
5109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmCommunicationsComponent, decorators: [{
|
|
5114
5110
|
type: Component,
|
|
5115
|
-
args: [{ selector: 'pw-smart-crm-communications', standalone: false, 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@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 actions-collapsed 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 <label for=\"crm-marketing-list-search\" class=\"visually-hidden\">Search communication emails</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-marketing-list-search\"\n name=\"crm-marketing-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 @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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n </div>\n}\n<ng-container>\n @if (isLoaded) {\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n @if (communicationsInsight?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\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 @if (communicationsInsight.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"communicationsInsight.length\" />\n }\n </div>\n }\n @if (!communicationsInsight?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.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\">Campaigns Location</h5>\n <div>\n @if (communicationEngagement) {\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!communicationEngagement) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\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"] }]
|
|
5111
|
+
args: [{ selector: 'pw-smart-crm-communications', standalone: false, 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@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 actions-collapsed 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 <label for=\"crm-marketing-list-search\" class=\"visually-hidden\">Search communication emails</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"crm-marketing-list-search\"\n name=\"crm-marketing-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search communication emails...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\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 actions-list-three\">{{ '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 @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 <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoCommunicationMessage' | transloco\">\n </pw-no-data>\n </div>\n}\n<ng-container>\n @if (isLoaded) {\n <div class=\"row mt-5\">\n <!-- Drill Down -->\n <div class=\"col-12 col-md-6 mb-3 analytics\">\n <h5 class=\"accordion-heading\">Watch Closely</h5>\n @if (communicationsInsight?.length) {\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n >\n <p-table class=\"table\"\n #dt\n [value]=\"communicationsInsight\"\n [paginator]=\"communicationsInsight.length !== 0\"\n [rows]=\"PAGE_SIZE\"\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 @if (communicationsInsight.length !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"communicationsInsight.length\" />\n }\n </div>\n }\n @if (!communicationsInsight?.length) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.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\">Campaigns Location</h5>\n <div>\n @if (communicationEngagement) {\n <plotly-plot [data]=\"communicationEngagement?.data\"\n [layout]=\"communicationEngagement?.layout\"\n [config]=\"communicationEngagement?.config\"\n [useResizeHandler]=\"communicationEngagement ? true : false\">\n </plotly-plot>\n }\n </div>\n @if (!communicationEngagement) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Crm.CommunicationsMessage.NoInsightMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </div>\n </div>\n }\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"] }]
|
|
5116
5112
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i0.ChangeDetectorRef }] });
|
|
5117
5113
|
|
|
5118
5114
|
class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
|
|
@@ -5654,7 +5650,6 @@ class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
|
|
|
5654
5650
|
accountDefaultValues(id) {
|
|
5655
5651
|
this.crmService.getCrmAccountDefaultValues(id).subscribe(response => {
|
|
5656
5652
|
this.currencies = [
|
|
5657
|
-
{ label: 'Select Currency', value: null },
|
|
5658
5653
|
...(response?.currencies ?? []).map(currency => ({
|
|
5659
5654
|
label: currency,
|
|
5660
5655
|
value: currency
|
|
@@ -5773,11 +5768,11 @@ class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
|
|
|
5773
5768
|
super.ngOnDestroy();
|
|
5774
5769
|
}
|
|
5775
5770
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.ProductService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5776
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmOpportunitiesDetailsComponent, isStandalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"p-2 mt-3\">\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 controlId=\"crm-opp-details-title\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-account-label\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-opp-details-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 : {}\n \"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-contact-label\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</span>\n <p-autoComplete [suggestions]=\"filteredUsers\"\n [attr.aria-labelledby]=\"'crm-opp-details-contact-label'\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"one_time_amount\">{{ '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 name=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"monthly_amount\">{{ '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 name=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n </div>\n <!-- Features -->\n <div class=\"mb-3 col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-features-label\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-features\" [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-opp-details-features-label'\"\n placeholder=\"Select feature keys\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-win_chances-label\">{{ '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 </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-win_chances-label'\"\n formControlName=\"win_chances\"\n [options]=\"winChance\"\n [placeholder]=\"'Select Win Chance'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-currency-label\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-currency-label'\"\n formControlName=\"currency\"\n [options]=\"currencies\"\n [placeholder]=\"'Select Currency'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-md-4 won-control\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"won\">{{ '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 name=\"won\"\n [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-categories-label\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-categories\" [options]=\"categories\"\n [attr.aria-labelledby]=\"'crm-opp-details-categories-label'\"\n placeholder=\"Select Categories\"\n (onChange)=\"onCategoryChange($event)\"\n formControlName=\"crm_opportunity_category_ids\"\n optionLabel=\"label\"\n optionValue=\"value\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (TrialStartField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n name=\"trial_start_at\"\n controlId=\"crm-opp-details-trial_start_at\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-trial_start_at\"\n name=\"trial_start_at\"\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 type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n </div>\n }\n @if (LostField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n name=\"lost_reason\"\n controlId=\"crm-opp-details-lost_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-lost_reason\"\n class=\"form-control\"\n formControlName=\"lost_reason\"\n [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n </pw-input-container>\n </div>\n }\n @if (WonField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n name=\"won_reason\"\n controlId=\"crm-opp-details-won_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-won_reason\"\n class=\"form-control\"\n formControlName=\"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 <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-stage-label\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-stage-label'\"\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-select>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-starting_at-label\">{{ '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></span>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-starting_at\"\n name=\"starting_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"starting_at\"\n [attr.aria-labelledby]=\"'crm-opp-details-starting_at-label'\"\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 type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n name=\"description\"\n controlId=\"crm-opp-details-description\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n <textarea rows=\"10\"\n id=\"crm-opp-details-description\"\n type=\"text\"\n class=\"form-control description-field\"\n formControlName=\"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 }\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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5771
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SmartCrmOpportunitiesDetailsComponent, isStandalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"p-2 mt-3\">\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 controlId=\"crm-opp-details-title\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-account-label\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-opp-details-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 : {}\n \"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-contact-label\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</span>\n <p-autoComplete [suggestions]=\"filteredUsers\"\n [attr.aria-labelledby]=\"'crm-opp-details-contact-label'\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"one_time_amount\">{{ '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 name=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\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=\"monthly_amount\">{{ '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 name=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n </div>\n <!-- Features -->\n <div class=\"col-12 col-sm-4\" *rbacAllow=\"'Pages.Alpha'\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-features-label\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-features\" [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-opp-details-features-label'\"\n placeholder=\"Select feature keys\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-win_chances-label\">{{ '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 </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-win_chances-label'\"\n formControlName=\"win_chances\"\n [options]=\"winChance\"\n [placeholder]=\"'Select Win Chance'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-currency-label\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-currency-label'\"\n formControlName=\"currency\"\n [options]=\"currencies\"\n [placeholder]=\"'Select Currency'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-sm-4 won-control\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"won\">{{ '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\"\n formControlName=\"won\"\n id=\"won\"\n name=\"won\"\n [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-categories-label\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-categories\" [options]=\"categories\"\n [attr.aria-labelledby]=\"'crm-opp-details-categories-label'\"\n placeholder=\"Select Categories\"\n (onChange)=\"onCategoryChange($event)\"\n formControlName=\"crm_opportunity_category_ids\"\n optionLabel=\"label\"\n optionValue=\"value\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (TrialStartField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n name=\"trial_start_at\"\n controlId=\"crm-opp-details-trial_start_at\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-trial_start_at\"\n name=\"trial_start_at\"\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 <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n }\n @if (LostField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n name=\"lost_reason\"\n controlId=\"crm-opp-details-lost_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-lost_reason\"\n class=\"form-control\"\n formControlName=\"lost_reason\"\n [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n </pw-input-container>\n </div>\n }\n @if (WonField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n name=\"won_reason\"\n controlId=\"crm-opp-details-won_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-won_reason\"\n class=\"form-control\"\n formControlName=\"won_reason\"\n [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-stage-label\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-stage-label'\"\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-select>\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-starting_at-label\">{{ '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></span>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-starting_at\"\n name=\"starting_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"starting_at\"\n [attr.aria-labelledby]=\"'crm-opp-details-starting_at-label'\"\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 <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n name=\"description\"\n controlId=\"crm-opp-details-description\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n <textarea rows=\"10\"\n id=\"crm-opp-details-description\"\n type=\"text\"\n class=\"form-control description-field\"\n formControlName=\"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 }\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.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: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: i11.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i12.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { 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: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5777
5772
|
}
|
|
5778
5773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, decorators: [{
|
|
5779
5774
|
type: Component,
|
|
5780
|
-
args: [{ selector: 'pw-smart-crm-opportunities-details', standalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"p-2 mt-3\">\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 controlId=\"crm-opp-details-title\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-account-label\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-opp-details-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 : {}\n \"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-contact-label\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</span>\n <p-autoComplete [suggestions]=\"filteredUsers\"\n [attr.aria-labelledby]=\"'crm-opp-details-contact-label'\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"one_time_amount\">{{ '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 name=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"monthly_amount\">{{ '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 name=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n </div>\n <!-- Features -->\n <div class=\"mb-3 col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-features-label\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-features\" [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-opp-details-features-label'\"\n placeholder=\"Select feature keys\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-win_chances-label\">{{ '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 </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-win_chances-label'\"\n formControlName=\"win_chances\"\n [options]=\"winChance\"\n [placeholder]=\"'Select Win Chance'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-currency-label\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-currency-label'\"\n formControlName=\"currency\"\n [options]=\"currencies\"\n [placeholder]=\"'Select Currency'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-md-4 won-control\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"won\">{{ '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 name=\"won\"\n [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-categories-label\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-categories\" [options]=\"categories\"\n [attr.aria-labelledby]=\"'crm-opp-details-categories-label'\"\n placeholder=\"Select Categories\"\n (onChange)=\"onCategoryChange($event)\"\n formControlName=\"crm_opportunity_category_ids\"\n optionLabel=\"label\"\n optionValue=\"value\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (TrialStartField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n name=\"trial_start_at\"\n controlId=\"crm-opp-details-trial_start_at\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-trial_start_at\"\n name=\"trial_start_at\"\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 type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </pw-input-container>\n </div>\n }\n @if (LostField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n name=\"lost_reason\"\n controlId=\"crm-opp-details-lost_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-lost_reason\"\n class=\"form-control\"\n formControlName=\"lost_reason\"\n [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n </pw-input-container>\n </div>\n }\n @if (WonField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n name=\"won_reason\"\n controlId=\"crm-opp-details-won_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-won_reason\"\n class=\"form-control\"\n formControlName=\"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 <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-stage-label\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-stage-label'\"\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-select>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-starting_at-label\">{{ '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></span>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-starting_at\"\n name=\"starting_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"starting_at\"\n [attr.aria-labelledby]=\"'crm-opp-details-starting_at-label'\"\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 type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n name=\"description\"\n controlId=\"crm-opp-details-description\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n <textarea rows=\"10\"\n id=\"crm-opp-details-description\"\n type=\"text\"\n class=\"form-control description-field\"\n formControlName=\"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 }\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"] }]
|
|
5775
|
+
args: [{ selector: 'pw-smart-crm-opportunities-details', standalone: false, 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 @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div class=\"p-2 mt-3\">\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 controlId=\"crm-opp-details-title\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-account-label\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n }}<span class=\"text-danger required-icon\">*</span></span>\n <p-autoComplete [suggestions]=\"filteredAccounts\"\n [attr.aria-labelledby]=\"'crm-opp-details-account-label'\"\n formControlName=\"crm_account_id\"\n dataKey=\"id\"\n optionLabel=\"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 : {}\n \"\n [multiple]=\"false\">\n </p-autoComplete>\n </div>\n <div class=\"ui-fluid skills-modal col-sm-4\">\n <span class=\"pw-label-style mb-2\" id=\"crm-opp-details-contact-label\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</span>\n <p-autoComplete [suggestions]=\"filteredUsers\"\n [attr.aria-labelledby]=\"'crm-opp-details-contact-label'\"\n formControlName=\"crm_contact_id\"\n dataKey=\"id\"\n optionLabel=\"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 <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"one_time_amount\">{{ '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 name=\"one_time_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\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=\"monthly_amount\">{{ '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 name=\"monthly_amount\"\n [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n </div>\n </div>\n <!-- Features -->\n <div class=\"col-12 col-sm-4\" *rbacAllow=\"'Pages.Alpha'\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-features-label\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-features\" [options]=\"featureKeys\"\n [attr.aria-labelledby]=\"'crm-opp-details-features-label'\"\n placeholder=\"Select feature keys\"\n [showHeader]=\"true\"\n [showToggleAll]=\"true\"\n formControlName=\"feature_keys\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-win_chances-label\">{{ '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 </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-win_chances-label'\"\n formControlName=\"win_chances\"\n [options]=\"winChance\"\n [placeholder]=\"'Select Win Chance'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-currency-label\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-currency-label'\"\n formControlName=\"currency\"\n [options]=\"currencies\"\n [placeholder]=\"'Select Currency'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n </p-select>\n </div>\n </div>\n <div class=\"col-12 col-sm-4 won-control\">\n <div class=\"mb-3\">\n <label class=\"info-circle mb-2\" for=\"won\">{{ '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\"\n formControlName=\"won\"\n id=\"won\"\n name=\"won\"\n [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-categories-label\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n <span class=\"text-danger required-icon\">*</span>\n <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n </span>\n <p-multiSelect inputId=\"crm-opp-details-categories\" [options]=\"categories\"\n [attr.aria-labelledby]=\"'crm-opp-details-categories-label'\"\n placeholder=\"Select Categories\"\n (onChange)=\"onCategoryChange($event)\"\n formControlName=\"crm_opportunity_category_ids\"\n optionLabel=\"label\"\n optionValue=\"value\"\n appendTo=\"body\"></p-multiSelect>\n </div>\n @if (TrialStartField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n name=\"trial_start_at\"\n controlId=\"crm-opp-details-trial_start_at\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-trial_start_at\"\n name=\"trial_start_at\"\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 <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n }\n @if (LostField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n name=\"lost_reason\"\n controlId=\"crm-opp-details-lost_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-lost_reason\"\n class=\"form-control\"\n formControlName=\"lost_reason\"\n [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n </pw-input-container>\n </div>\n }\n @if (WonField) {\n <div class=\"col-12 col-sm-4\"\n >\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n name=\"won_reason\"\n controlId=\"crm-opp-details-won_reason\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n <input type=\"text\"\n id=\"crm-opp-details-won_reason\"\n class=\"form-control\"\n formControlName=\"won_reason\"\n [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n </pw-input-container>\n </div>\n }\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-stage-label\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n </span>\n </span>\n <p-select\n [attr.aria-labelledby]=\"'crm-opp-details-stage-label'\"\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-select>\n </div>\n </div>\n <div class=\"col-12 col-sm-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle mb-2\" id=\"crm-opp-details-starting_at-label\">{{ '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></span>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"crm-opp-details-starting_at\"\n name=\"starting_at\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"starting_at\"\n [attr.aria-labelledby]=\"'crm-opp-details-starting_at-label'\"\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 <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-12 col-sm-12\">\n <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n name=\"description\"\n controlId=\"crm-opp-details-description\"\n [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n <textarea rows=\"10\"\n id=\"crm-opp-details-description\"\n type=\"text\"\n class=\"form-control description-field\"\n formControlName=\"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 }\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.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"] }]
|
|
5781
5776
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.ProductService }, { type: i0.ChangeDetectorRef }] });
|
|
5782
5777
|
|
|
5783
5778
|
class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
|
|
@@ -7198,7 +7193,7 @@ class SmartCrmPrivateModule {
|
|
|
7198
7193
|
SmartCrmPrivateRoutingModule,
|
|
7199
7194
|
SharedComponentsModule,
|
|
7200
7195
|
CoreTranslocoModule,
|
|
7201
|
-
DragDropModule, i12$
|
|
7196
|
+
DragDropModule, i12$1.QuillModule, NgxUploaderModule,
|
|
7202
7197
|
InfiniteScrollModule,
|
|
7203
7198
|
SelectModule,
|
|
7204
7199
|
NgbNavModule,
|