@posiwise/smart-crm 0.0.6 → 0.0.8

package/fesm2022/posiwise-smart-crm.mjs

@@ -15,8 +15,8 @@ import { NgxGpAutocompleteModule } from '@angular-magic/ngx-gp-autocomplete';
 import * as i7 from 'primeng/autocomplete';
 import * as i11 from '@posiwise/shared-components';
 import { SharedComponentsModule } from '@posiwise/shared-components';
-import * as i12 from '@ngneat/transloco';
-import { TRANSLOCO_SCOPE, TranslocoModule } from '@ngneat/transloco';
+import * as i12 from '@jsverse/transloco';
+import { TRANSLOCO_SCOPE, TranslocoModule } from '@jsverse/transloco';
 import * as i2$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i12$1 from 'ngx-uploader';
@@ -45,7 +45,7 @@ import * as i6 from 'primeng/multiselect';
 import * as i6$1 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import { __decorate, __metadata } from 'tslib';
-import { ValidateForm } from '@posiwise/utils';
+import { ValidateForm, QuillHelper } from '@posiwise/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import * as i10$1 from 'primeng/tooltip';
@@ -1460,11 +1460,11 @@ class SmartCrmCompaniesComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span class=\"account-name\">{{ account.name }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | 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 }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.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.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subscription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subscription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$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: i9.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: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"sessions_staus\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"sessions_priority\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Status\">\n          <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n        </td>\n\n        <td data-head=\"Priority\">\n          <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n        </td>\n\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline icon-ul\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | 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 }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.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.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subscription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subscription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i7$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: i9.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: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: i14.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-companies', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span class=\"account-name\">{{ account.name }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | 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 }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.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.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subscription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subscription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}\n"] }]
+            args: [{ selector: 'pw-smart-crm-companies', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"false\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start text-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUp' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"sessions_staus\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"sessions_priority\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"company image\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                 onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n            <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\">{{ account.location }}</td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner | ifNameNullShowEmail }}</a>\n        </td>\n        <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n        <td data-head=\"MRR\">{{ account?.expected_mrr !== null && account?.expected_mrr !== 0 ? formatMRR(account?.expected_mrr) : '' }}\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd/MMM/yyyy' }}</td>\n        <td data-head=\"Quarter\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Status\">\n          <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n        </td>\n\n        <td data-head=\"Priority\">\n          <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n        </td>\n\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline icon-ul\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.contacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccounMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container *rbacAllow=\"'Pages.Beta'\">\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Drill Down</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountInsight\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Title' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Value' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Reason' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Title\">{{ insight.title }}</td>\n              <td data-head=\"Value\">{{ insight.value }}</td>\n              <td data-head=\"Reason\">{{ insight.reason }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountInsight.length }}</span>\n      </div>\n      <div *ngIf=\"accountInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Geography</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Activities -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Activities</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.AccountMessage.Comment' | 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 }} {{ activities.owner?.last_name }} </td>\n              <td data-head=\"Account\">{{ activities.crm_account?.name }}</td>\n              <td data-head=\"Contact\"> {{ activities.crm_contact?.first_name }} {{ activities.crm_contact?.last_name }}\n              </td>\n              <td data-head=\"Action\">{{ activities.crm_action?.name }}</td>\n              <td data-head=\"Comment\">{{ activities.comment }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n      </div>\n      <div *ngIf=\"accountActivities?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Last Invoices -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Last Invoices</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountLastInvoices?.length\">\n        <p-table class=\"table\" #dt [value]=\"accountLastInvoices\" [paginator]=\"accountLastInvoices?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"accountLastInvoices.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.File' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-invoice>\n            <tr>\n              <td data-head=\"Owner\"> {{ invoice.owner?.first_name }} {{ invoice.owner?.last_name }} </td>\n              <td data-head=\"Organization\"> {{ invoice.subscription?.organization }} </td>\n              <td data-head=\"Contact\">{{ invoice.subscription?.contact_name }}</td>\n              <td data-head=\"File\">\n                <a target=\"blank\" href=\"{{ invoice.file }}\">{{ invoice.file.split('/')[invoice.file.split('/').length -\n                  1] }}</a>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountLastInvoices?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountLastInvoices.length }}</span>\n      </div>\n      <div *ngIf=\"accountLastInvoices?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i2.CommonService }, { type: i2.LogoCacheService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 class SmartCrmCompetitionComponent {
@@ -3544,6 +3544,7 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
         super(injector);
         this.crmService = crmService;
         this.commonService = commonService;
+        this.editorConfig = QuillHelper.getEditorConfig();
         this.submitted = false;
         this.status = [];
         this.priority = [];
@@ -3762,7 +3763,7 @@ class SmartCrmCommunicationsDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsDetailsComponent, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\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-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\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              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger\">*</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                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\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              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\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              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\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              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i10$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationsDetailsComponent, selector: "pw-smart-crm-communications-details", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\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-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\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              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [modules]=\"editorConfig\" [styles]=\"{ height: '220px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger\">*</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                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\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              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\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              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\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              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i9.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i11.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "component", type: i10$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -3772,7 +3773,7 @@ __decorate([
 ], SmartCrmCommunicationsDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationsDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-communications-details', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\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-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\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              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [styles]=\"{ height: '220px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger\">*</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                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\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              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\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              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\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              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'pw-smart-crm-communications-details', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\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-3\">\n      <p class=\"my-3\">\n        You can insert the user name by adding the following syntax in the body or title:\n        {{ userNameSyntax }}\n      </p>\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              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Title' | transloco\"\n              errorMsg=\"Please enter subject\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Crm.CommunicationsMessage.Body' | transloco\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Crm.CommunicationsMessage.Tooltip.Body' | transloco\"\n              name=\"body\"\n              errorMsg=\"Please enter body\">\n              <quill-editor [modules]=\"editorConfig\" [styles]=\"{ height: '220px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n              </quill-editor>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendAt' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco\n                                }}</span></label>\n              <div class=\"input-group\">\n                <input class=\"form-control\"\n                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"c.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco\n                                }}<span class=\"text-danger\">*</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                  placeholder=\"yyyy-mm-dd\"\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                    (click)=\"d.toggle()\"\n                    type=\"button\">\n                    <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-3\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco\n                            }}</span></label>\n              <select class=\"form-select\"\n                formControlName=\"previous_newsletter_id\"\n                (change)=\"onNewsletterSelect($event)\"\n                [ngClass]=\"{\n                                    'is-invalid': submitted && f['previous_newsletter_id'].errors\n                                }\">\n                <option value=\"\">select previous newsletter</option>\n                <option *ngFor=\"let option of allCommunications\"\n                  [value]=\"option.id\">\n                  {{ option.title }}\n                </option>\n              </select>\n          </div>\n\n          <div class=\"col-12 col-sm-2\"\n            *ngIf=\"daysToNewsletterField\">\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              errorMsg=\"Please enter days to wait from previous newsletter\">\n              <input type=\"number\"\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              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"is_pushed\"\n                (change)=\"onChange($event, 'is_pushed')\"\n                name=\"is_pushed\">\n              </ui-switch>\n            </div>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.CanReply' | transloco\n                                }}<span class=\"text-danger\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\n                formControlName=\"can_reply\"\n                name=\"can_reply\">\n              </ui-switch>\n            </div>\n          </div>\n        </div>\n\n        <h3>Decide who will receive the email</h3>\n\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Location' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco\n                                }}</span></label>\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </div>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Products' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"crmProduct\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"product_ids\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.Features' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"featureKeys\"\n              [showHeader]=\"true\"\n              [showToggleAll]=\"true\"\n              formControlName=\"feature_keys\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"potentials\"\n              formControlName=\"contact_potential\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"labels\"\n              formControlName=\"contact_label\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"contactSource\"\n              formControlName=\"contact_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"priority\"\n              formControlName=\"account_priority\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"status\"\n              formControlName=\"account_status\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"source\"\n              formControlName=\"account_source\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <div class=\"mb-3 col-12 col-md-4\">\n            <label class=\"info-circle\">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}\n              <span class=\"tooltiptext gradient-custom-branding\">{{\n                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco\n                            }}</span></label>\n            <p-multiSelect [options]=\"organizationSizes\"\n              formControlName=\"account_size\"\n              appendTo=\"body\"></p-multiSelect>\n          </div>\n\n          <!-- Only new contacts -->\n          <div class=\"col-md-3\">\n            <div class=\"mb-3\">\n              <label class=\"info-circle mb-2\">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco\n                                }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco\n                                }}</span>\n              </label>\n              <ui-switch class=\"d-block\"\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              class=\"btn btn-primary\"\n              [disabled]=\"!form.valid\"\n            >\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }, { type: i2.CommonService }], propDecorators: { onSave: [] } });
 
 class SmartCrmCommunicationsComponent extends AppBaseComponent {
@@ -3941,11 +3942,11 @@ class SmartCrmCommunicationViewDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of your marketing email.</p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"container-fluid pw-tab overflow-hidden\"\n  *ngIf=\"communicationDetails\">\n  <div class=\"card pb-0\">\n    <div class=\"card-body p-4\">\n      <div class=\"row\"\n        *ngIf=\"communicationDetails\">\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Subject' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.title }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Body' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.body\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Location' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.location\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_until | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendAt' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_at | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Pushed' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_pushed\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_pushed ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>Sent:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_sent\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_sent ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".col-12{min-height:45px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCommunicationViewDetailsComponent, selector: "pw-smart-crm-communication-view-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\" *ngIf=\"communicationDetails\">\n  <div class=\"card pb-0\">\n    <div class=\"card-body p-4\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n          <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n            <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n              {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n            </span>\n            <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n              {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n            </span>\n          </div>\n          <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n            <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd/MMM/yyyy') + ')' }}</span>\n            <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd/MMM/yyyy') + ')' }}</span>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 mb-3 ms-2\">\n          <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n        </div>\n        <div class=\"col-12 mb-3 ms-2\">\n          <h5>{{ communicationDetails?.title }}</h5>\n        </div>\n        <div class=\"col-12 ms-2\">\n          <p [innerHTML]=\"communicationDetails?.body\"></p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCommunicationViewDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-communication-view-details', template: "<div class=\"me-auto col-xs-6\">\n  <p>This is a summary of your marketing email.</p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"container-fluid pw-tab overflow-hidden\"\n  *ngIf=\"communicationDetails\">\n  <div class=\"card pb-0\">\n    <div class=\"card-body p-4\">\n      <div class=\"row\"\n        *ngIf=\"communicationDetails\">\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Subject' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.title }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Body' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.body\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Location' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p [innerHTML]=\"communicationDetails?.location\"></p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendUntil' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_until | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.SendAt' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10\">\n          <p>{{ communicationDetails?.send_at | dateFormat: 'datetime' }}</p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>{{ 'Crm.CommunicationsMessage.Pushed' | transloco }}:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_pushed\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_pushed ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n        <div class=\"col-12 col-sm-2\">\n          <h4>Sent:</h4>\n        </div>\n        <div class=\"col-12 col-sm-10 d-flex\">\n          <p>\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: communicationDetails?.is_sent\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ communicationDetails?.is_sent ? 'Yes' : 'No' }}</span>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".col-12{min-height:45px}\n"] }]
+            args: [{ selector: 'pw-smart-crm-communication-view-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\" *ngIf=\"communicationDetails\">\n  <div class=\"card pb-0\">\n    <div class=\"card-body p-4\">\n      <div class=\"row mb-3\">\n        <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n          <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n            <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n              {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n            </span>\n            <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n              {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n            </span>\n          </div>\n          <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n            <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd/MMM/yyyy') + ')' }}</span>\n            <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd/MMM/yyyy') + ')' }}</span>\n          </div>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12 mb-3 ms-2\">\n          <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n        </div>\n        <div class=\"col-12 mb-3 ms-2\">\n          <h5>{{ communicationDetails?.title }}</h5>\n        </div>\n        <div class=\"col-12 ms-2\">\n          <p [innerHTML]=\"communicationDetails?.body\"></p>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.CrmService }] });
 
 class SmartCrmMarketingViewComponent extends AppBaseComponent {
@@ -3971,6 +3972,7 @@ class SmartCrmBoardComponent extends AppBaseComponent {
         this.routers = ROUTERS;
         this.masterStages = [];
         this.selectedCategoryId = 0;
+        this.pageSize = 5; // Show 5 cards initially
     }
     ngOnInit() {
         this.getUserSubscription().subscribe(response => {
@@ -3981,7 +3983,6 @@ class SmartCrmBoardComponent extends AppBaseComponent {
             }
         });
     }
-    /** Function to get all categories */
     getAllOpportunityCategories() {
         this.crmService.getAllOpportunityCategories(this.subscription?.id).subscribe(response => {
             this.categories = response?.crm_opportunity_categories || [];
@@ -3990,7 +3991,6 @@ class SmartCrmBoardComponent extends AppBaseComponent {
             }
         });
     }
-    /** Function ot get opportunity stages */
     getStages() {
         this.crmService.getAvailableOpportunityStages(this.subscription?.id).subscribe(response => {
             this.stages = response.available_crm_opportunity_stages;
@@ -3998,7 +3998,6 @@ class SmartCrmBoardComponent extends AppBaseComponent {
             this.getAllOpportunities();
         });
     }
-    /** Function to get all opportunities */
     getAllOpportunities() {
         this.crmService
             .getAllOpportunities(this.subscription?.id)
@@ -4055,26 +4054,24 @@ class SmartCrmBoardComponent extends AppBaseComponent {
             return result;
         }, []);
     }
-    /** Function to opportunities group by stages */
     opportunitiesGroups(val) {
         this.opportunitiesGroup = [];
         this.stages = this.masterStages;
         if (val !== undefined && val !== 0) {
             this.stages = this.stages.filter(x => x.crm_opportunity_category_ids.includes(val));
         }
-        this.stages = this.stages.sort((a, b) => 
-        // eslint-disable-next-line no-nested-ternary
-        a.id > b.id ? 1 : b.id > a.id ? -1 : 0);
+        this.stages = this.stages.sort((a, b) => (a.id > b.id ? 1 : b.id > a.id ? -1 : 0));
         const temp = this.treefy(this.stages);
         this.stages = this.flatten(temp);
         this.stages.forEach(stage => {
             const opportunities = {
                 stage: null,
                 opportunities: [],
-                totals: { oneTime: 0, mrr: 0, count: 0 }
+                totals: { oneTime: 0, mrr: 0, count: 0 },
+                isLoadingMore: false
             };
             const data = this.allOpportunities.filter(opportunity => opportunity.crm_opportunity_stage_id === stage.id);
-            opportunities.opportunities = data.sort((a, b) => b.monthly_amount - a.monthly_amount);
+            opportunities.opportunities = data.slice(0, this.pageSize); // Load initial items
             opportunities.stage = stage;
             opportunities.totals.oneTime = data.reduce((sum, opp) => sum + opp.one_time_amount, 0);
             opportunities.totals.mrr = data.reduce((sum, opp) => sum + opp.monthly_amount, 0);
@@ -4082,7 +4079,6 @@ class SmartCrmBoardComponent extends AppBaseComponent {
             this.opportunitiesGroup.push(opportunities);
         });
     }
-    /** Function to filter opportunities by categories */
     onChangeCategory(event) {
         const categories = Number(event);
         this.selectedCategoryId = categories;
@@ -4097,6 +4093,21 @@ class SmartCrmBoardComponent extends AppBaseComponent {
             this.opportunitiesGroups();
         }
     }
+    onColumnScroll(columnIndex) {
+        const group = this.opportunitiesGroup[columnIndex];
+        if (group.isLoadingMore || group.opportunities.length >= group.totals.count) {
+            return;
+        }
+        group.isLoadingMore = true;
+        setTimeout(() => {
+            const currentLength = group.opportunities.length;
+            const moreOpportunities = this.allOpportunities
+                .filter(opportunity => opportunity.crm_opportunity_stage_id === group.stage.id)
+                .slice(currentLength, currentLength + this.pageSize);
+            group.opportunities = group.opportunities.concat(moreOpportunities);
+            group.isLoadingMore = false;
+        }, 2000); // Show loader for 2 seconds
+    }
     dropItem(event) {
         if (event.previousContainer === event.container) {
             moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
@@ -4148,15 +4159,19 @@ class SmartCrmBoardComponent extends AppBaseComponent {
             this.getStages();
         });
     }
+    hasOpportunities() {
+        console.log(this.opportunitiesGroup);
+        return this.opportunitiesGroup.some(group => group.opportunities.length > 0);
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmBoardComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"row mb-4\"\n  *ngIf=\"isLoaded\">\n  <div class=\"col-12 col-sm-4\">\n    <select class=\"form-select\"\n      (change)=\"onChangeCategory($event.target.value)\">\n      <option *ngFor=\"let option of categories\"\n        [value]=\"option.id\">{{ option.name }}</option>\n    </select>\n  </div>\n  <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n</div>\n<div *ngIf=\"isLoaded\"\n  class=\"list-container d-flex\"\n  cdkDropList\n  [cdkDropListData]=\"opportunitiesGroup\"\n  (cdkDropListDropped)=\"dropGroup($event)\">\n  <div cdkDropListGroup\n    class=\"opportunities-container main-div crm-board-primary\"\n    [class.dynamic-columns-wrapper]=\"group.stage.collapsed\"\n    [style.--border-color]=\"group.stage.color_code\"\n    *ngFor=\"let group of opportunitiesGroup\"\n    cdkDrag\n    [cdkDragData]=\"group\">\n    <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n      <span class=\"collapse-column-toggle\">\n        <i class=\"fas\"\n        [ngClass]=\"{\n          'fa-angle-right': !group.stage.collapsed,\n          'fa-angle-down': group.stage.collapsed\n        }\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n      </span>\n      <p class=\"stage-name mb-0 py-2 ps-4\">\n        <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n      </p>\n      <span class=\"ms-auto me-4 add-opportunity-icon\">\n        <a class=\"text-secondary\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n          [queryParams]=\"{\n                        stage_id: group?.stage?.id,\n                        category: group.stage.crm_opportunity_category_ids\n                    }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n      </span>\n    </div>\n    <div cdkDropList\n      class=\"opportunities-list items-container\"\n      [id]=\"group.stage.name\"\n      [cdkDropListData]=\"group.opportunities\"\n      (cdkDropListDropped)=\"dropItem($event)\"\n      [cdkDropListConnectedTo]=\"getConnectedList()\">\n\n      <div class=\"opportunities-box mb-3\"\n        *ngFor=\"let item of group.opportunities\"\n        cdkDrag\n        [cdkDragData]=\"item\">\n        <span ngbTooltip=\"Edit\"\n          class=\"float-end edit-button\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n          <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n        </span>\n        <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n        <a class=\"mb-1\"\n          [routerLink]=\"[\n                        '/' + subscription?.slug + routers.accountInfo,\n                        item?.crm_account_id\n                    ]\">{{ item?.crm_account?.name }}</a>\n          <p class=\"mb-1\">\n            {{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR\n          </p>\n        <a *ngIf=\"item?.owner[0]?.user_avatar\"\n          [routerLink]=\"['/members', item?.owner[0]?.slug]\"><img alt=\"member image\"\n            [src]=\"item?.owner[0]?.user_avatar[0]?.url\"\n            [width]=\"'30'\"\n            class=\"squared_logo float-end\"\n            [height]=\"'30'\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/male.png';\" /></a>\n        <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n        <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n      </div>\n    </div>\n    <div class=\"footer footer-list\">\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total One-Time:</span>\n          <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total MRR:</span>\n          <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total Count:</span>\n          <span class=\"footer-value\">{{ group.totals.count }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!masterStages?.length && isLoaded\">\n  <pw-no-data [withImage]=\"false\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStages' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'categories']\">Take me to the configuration page.</a>\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"totalCount === 0 && !masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoDataMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"!opportunitiesGroup.length && isLoaded && masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStageAssociated' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'stage']\">Please add some in the configuration section.</a>\n  </pw-no-data>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{height:500px;overflow-y:scroll}.list-container{overflow:auto;width:100%}.opportunities-container{display:inline-block;margin:0 13px 13px 0;max-width:80%;min-width:280px;vertical-align:top}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:450px}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%;min-height:450px}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n  </ng-template>\n</div>\n\n<div class=\"row mb-4\" *ngIf=\"isLoaded\">\n  <div class=\"col-12 col-sm-4\">\n    <select class=\"form-select\" (change)=\"onChangeCategory($event.target.value)\">\n      <option *ngFor=\"let option of categories\" [value]=\"option.id\">{{ option.name }}</option>\n    </select>\n  </div>\n  <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n</div>\n<div *ngIf=\"isLoaded && !hasOpportunities()\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n  </pw-no-data>\n</div>\n<div *ngIf=\"isLoaded && hasOpportunities()\" class=\"list-container d-flex\" cdkDropList [cdkDropListData]=\"opportunitiesGroup\" (cdkDropListDropped)=\"dropGroup($event)\">\n  <div cdkDropListGroup class=\"opportunities-container main-div crm-board-primary\" [class.dynamic-columns-wrapper]=\"group.stage.collapsed\" [style.--border-color]=\"group.stage.color_code\" *ngFor=\"let group of opportunitiesGroup; let i = index\" cdkDrag [cdkDragData]=\"group\">\n    <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n      <span class=\"collapse-column-toggle\">\n        <i class=\"fas\" [ngClass]=\"{'fa-angle-right': !group.stage.collapsed, 'fa-angle-down': group.stage.collapsed}\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n      </span>\n      <p class=\"stage-name mb-0 py-2 ps-4\">\n        <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n      </p>\n      <span class=\"ms-auto me-4 add-opportunity-icon\">\n        <a class=\"text-secondary\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\" [queryParams]=\"{ stage_id: group?.stage?.id, category: group.stage.crm_opportunity_category_ids }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n      </span>\n    </div>\n    <div class=\"opportunities-list items-container\" cdkDropList [id]=\"group.stage.name\" [cdkDropListData]=\"group.opportunities\" (cdkDropListDropped)=\"dropItem($event)\" [cdkDropListConnectedTo]=\"getConnectedList()\" (scroll)=\"onColumnScroll(i)\">\n      <div *ngFor=\"let item of group.opportunities; let idx = index\">\n        <div class=\"opportunities-box mb-3\" cdkDrag [cdkDragData]=\"item\">\n          <span ngbTooltip=\"Edit\" class=\"float-end edit-button\" [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n            <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n          </span>\n          <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n          <a class=\"mb-1\" [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, item?.crm_account_id ]\">{{ item?.crm_account?.name }}</a>\n          <p class=\"mb-1\">{{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR</p>\n          <a *ngIf=\"item?.owner[0]?.user_avatar\" [routerLink]=\"['/members', item?.owner[0]?.slug]\">\n            <img alt=\"member image\" [src]=\"item?.owner[0]?.user_avatar[0]?.url\" [width]=\"'30'\" class=\"squared_logo float-end\" [height]=\"'30'\" onerror=\"this.onerror=null;this.src='assets/img/icons/male.png';\" />\n          </a>\n          <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n          <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n        </div>\n        <div class=\"w-100 text-center mt-3\" *ngIf=\"(idx + 1) % 5 === 0 && group.isLoadingMore\">\n          <div class=\"custom-loader\">\n            <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n            <div class=\"loading-text\">Loading opportunities...</div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"footer footer-list\">\n      <div class=\"footer-item\">\n        <span class=\"footer-label\">Total One-Time:</span>\n        <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency }}</span>\n      </div>\n      <div class=\"footer-item\">\n        <span class=\"footer-label\">Total MRR:</span>\n        <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency }}</span>\n      </div>\n      <div class=\"footer-item\">\n        <span class=\"footer-label\">Total Count:</span>\n        <span class=\"footer-value\">{{ group.totals.count }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{height:500px;overflow-y:scroll}.list-container{overflow:auto;width:100%}.opportunities-container{display:inline-block;margin:0 13px 13px 0;max-width:80%;min-width:280px;vertical-align:top}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:450px}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%;min-height:450px}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.LazyImgDirective, selector: "img" }, { kind: "directive", type: i2$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmBoardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-smart-crm-board', template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"row mb-4\"\n  *ngIf=\"isLoaded\">\n  <div class=\"col-12 col-sm-4\">\n    <select class=\"form-select\"\n      (change)=\"onChangeCategory($event.target.value)\">\n      <option *ngFor=\"let option of categories\"\n        [value]=\"option.id\">{{ option.name }}</option>\n    </select>\n  </div>\n  <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n</div>\n<div *ngIf=\"isLoaded\"\n  class=\"list-container d-flex\"\n  cdkDropList\n  [cdkDropListData]=\"opportunitiesGroup\"\n  (cdkDropListDropped)=\"dropGroup($event)\">\n  <div cdkDropListGroup\n    class=\"opportunities-container main-div crm-board-primary\"\n    [class.dynamic-columns-wrapper]=\"group.stage.collapsed\"\n    [style.--border-color]=\"group.stage.color_code\"\n    *ngFor=\"let group of opportunitiesGroup\"\n    cdkDrag\n    [cdkDragData]=\"group\">\n    <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n      <span class=\"collapse-column-toggle\">\n        <i class=\"fas\"\n        [ngClass]=\"{\n          'fa-angle-right': !group.stage.collapsed,\n          'fa-angle-down': group.stage.collapsed\n        }\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n      </span>\n      <p class=\"stage-name mb-0 py-2 ps-4\">\n        <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n      </p>\n      <span class=\"ms-auto me-4 add-opportunity-icon\">\n        <a class=\"text-secondary\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\"\n          [queryParams]=\"{\n                        stage_id: group?.stage?.id,\n                        category: group.stage.crm_opportunity_category_ids\n                    }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n      </span>\n    </div>\n    <div cdkDropList\n      class=\"opportunities-list items-container\"\n      [id]=\"group.stage.name\"\n      [cdkDropListData]=\"group.opportunities\"\n      (cdkDropListDropped)=\"dropItem($event)\"\n      [cdkDropListConnectedTo]=\"getConnectedList()\">\n\n      <div class=\"opportunities-box mb-3\"\n        *ngFor=\"let item of group.opportunities\"\n        cdkDrag\n        [cdkDragData]=\"item\">\n        <span ngbTooltip=\"Edit\"\n          class=\"float-end edit-button\"\n          [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n          <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n        </span>\n        <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n        <a class=\"mb-1\"\n          [routerLink]=\"[\n                        '/' + subscription?.slug + routers.accountInfo,\n                        item?.crm_account_id\n                    ]\">{{ item?.crm_account?.name }}</a>\n          <p class=\"mb-1\">\n            {{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR\n          </p>\n        <a *ngIf=\"item?.owner[0]?.user_avatar\"\n          [routerLink]=\"['/members', item?.owner[0]?.slug]\"><img alt=\"member image\"\n            [src]=\"item?.owner[0]?.user_avatar[0]?.url\"\n            [width]=\"'30'\"\n            class=\"squared_logo float-end\"\n            [height]=\"'30'\"\n            onerror=\"this.onerror=null;this.src='assets/img/icons/male.png';\" /></a>\n        <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n        <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n      </div>\n    </div>\n    <div class=\"footer footer-list\">\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total One-Time:</span>\n          <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total MRR:</span>\n          <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency }}</span>\n        </div>\n        <div class=\"footer-item\">\n          <span class=\"footer-label\">Total Count:</span>\n          <span class=\"footer-value\">{{ group.totals.count }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"!masterStages?.length && isLoaded\">\n  <pw-no-data [withImage]=\"false\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStages' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'categories']\">Take me to the configuration page.</a>\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"totalCount === 0 && !masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoDataMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n<div *ngIf=\"!opportunitiesGroup.length && isLoaded && masterStages.length && categories.length\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesBoardMessages.NoStageAssociated' | transloco\">\n    <a #content [routerLink]=\"['/' + subscription?.slug + routers.configurations, 'stage']\">Please add some in the configuration section.</a>\n  </pw-no-data>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{height:500px;overflow-y:scroll}.list-container{overflow:auto;width:100%}.opportunities-container{display:inline-block;margin:0 13px 13px 0;max-width:80%;min-width:280px;vertical-align:top}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:450px}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%;min-height:450px}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}\n"] }]
+            args: [{ selector: 'pw-smart-crm-board', template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n  </ng-template>\n</div>\n\n<div class=\"row mb-4\" *ngIf=\"isLoaded\">\n  <div class=\"col-12 col-sm-4\">\n    <select class=\"form-select\" (change)=\"onChangeCategory($event.target.value)\">\n      <option *ngFor=\"let option of categories\" [value]=\"option.id\">{{ option.name }}</option>\n    </select>\n  </div>\n  <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n</div>\n<div *ngIf=\"isLoaded && !hasOpportunities()\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n  </pw-no-data>\n</div>\n<div *ngIf=\"isLoaded && hasOpportunities()\" class=\"list-container d-flex\" cdkDropList [cdkDropListData]=\"opportunitiesGroup\" (cdkDropListDropped)=\"dropGroup($event)\">\n  <div cdkDropListGroup class=\"opportunities-container main-div crm-board-primary\" [class.dynamic-columns-wrapper]=\"group.stage.collapsed\" [style.--border-color]=\"group.stage.color_code\" *ngFor=\"let group of opportunitiesGroup; let i = index\" cdkDrag [cdkDragData]=\"group\">\n    <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n      <span class=\"collapse-column-toggle\">\n        <i class=\"fas\" [ngClass]=\"{'fa-angle-right': !group.stage.collapsed, 'fa-angle-down': group.stage.collapsed}\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n      </span>\n      <p class=\"stage-name mb-0 py-2 ps-4\">\n        <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n      </p>\n      <span class=\"ms-auto me-4 add-opportunity-icon\">\n        <a class=\"text-secondary\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\" [queryParams]=\"{ stage_id: group?.stage?.id, category: group.stage.crm_opportunity_category_ids }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n      </span>\n    </div>\n    <div class=\"opportunities-list items-container\" cdkDropList [id]=\"group.stage.name\" [cdkDropListData]=\"group.opportunities\" (cdkDropListDropped)=\"dropItem($event)\" [cdkDropListConnectedTo]=\"getConnectedList()\" (scroll)=\"onColumnScroll(i)\">\n      <div *ngFor=\"let item of group.opportunities; let idx = index\">\n        <div class=\"opportunities-box mb-3\" cdkDrag [cdkDragData]=\"item\">\n          <span ngbTooltip=\"Edit\" class=\"float-end edit-button\" [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n            <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n          </span>\n          <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n          <a class=\"mb-1\" [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, item?.crm_account_id ]\">{{ item?.crm_account?.name }}</a>\n          <p class=\"mb-1\">{{ (item?.one_time_amount / 100 | currency) }} One-time / {{ (item?.monthly_amount / 100 | currency) }} MRR</p>\n          <a *ngIf=\"item?.owner[0]?.user_avatar\" [routerLink]=\"['/members', item?.owner[0]?.slug]\">\n            <img alt=\"member image\" [src]=\"item?.owner[0]?.user_avatar[0]?.url\" [width]=\"'30'\" class=\"squared_logo float-end\" [height]=\"'30'\" onerror=\"this.onerror=null;this.src='assets/img/icons/male.png';\" />\n          </a>\n          <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n          <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n        </div>\n        <div class=\"w-100 text-center mt-3\" *ngIf=\"(idx + 1) % 5 === 0 && group.isLoadingMore\">\n          <div class=\"custom-loader\">\n            <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n            <div class=\"loading-text\">Loading opportunities...</div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"footer footer-list\">\n      <div class=\"footer-item\">\n        <span class=\"footer-label\">Total One-Time:</span>\n        <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency }}</span>\n      </div>\n      <div class=\"footer-item\">\n        <span class=\"footer-label\">Total MRR:</span>\n        <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency }}</span>\n      </div>\n      <div class=\"footer-item\">\n        <span class=\"footer-label\">Total Count:</span>\n        <span class=\"footer-value\">{{ group.totals.count }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{height:500px;overflow-y:scroll}.list-container{overflow:auto;width:100%}.opportunities-container{display:inline-block;margin:0 13px 13px 0;max-width:80%;min-width:280px;vertical-align:top}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:450px}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%;min-height:450px}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}\n"] }]
         }], ctorParameters: () => [{ type: i1.CrmService }, { type: i0.Injector }] });
 
 class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {