@posiwise/smart-crm 0.0.49 → 0.0.50

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

@@ -11,9 +11,9 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 import * as i4 from "primeng/inputtext";
 import * as i5 from "@posiwise/directives";
-import * as i6 from "primeng/api";
-import * as i7 from "primeng/progressspinner";
-import * as i8 from "primeng/table";
+import * as i6 from "primeng/table";
+import * as i7 from "primeng/api";
+import * as i8 from "primeng/progressspinner";
 import * as i9 from "@posiwise/shared-components";
 import * as i10 from "@jsverse/transloco";
 export class SmartCrmCompanyAccountInvoiceComponent extends AppBaseComponent {
@@ -60,7 +60,7 @@ export class SmartCrmCompanyAccountInvoiceComponent extends AppBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyAccountInvoiceComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: { accountId: "accountId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div class=\"row primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"col-12 px-0\">\n    <p-table #tt\n      [value]=\"invoices\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter justify-content-end\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              type=\"text\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search Invoices...\"\n              data-cy=\"incident-search\"\n              class=\"wd-90\">\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"col\" pSortableColumn=\"date\">Invoice Date <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"frequency\">Frequency <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"quantity\">Seats <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"subtotal\">Subtotal <p-sortIcon field=\"subtotal\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"total\">Total (incl. tax) <p-sortIcon field=\"total\"></p-sortIcon></th>\n          <th scope=\"col\">Action</th>\n        </tr>\n      </ng-template>\n\n      <ng-template pTemplate=\"body\" let-invoice>\n        <tr>\n          <td>{{ invoice.date | date:'dd-MMM-YYYY' }}</td>\n          <td>\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: invoiceFrequency,\n                              item: invoice?.frequency\n                          }\"\n              color=\"blue-grey\">{{ invoice?.frequency }}</span>\n          </td>\n          <td>{{ invoice?.quantity }}</td>\n          <td>{{ (invoice.subtotal_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td class=\"td-total\">{{ (invoice.total_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td>\n            <a *ngIf=\"invoice?.file?.url; else noFileUrl\" class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice.file.url\" target=\"_blank\" title=\"Download\">\n              <i class=\"fa fa-download\">&nbsp;Download</i>\n            </a>\n            <ng-template #noFileUrl>\n              <a class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice?.stripe_invoice_pdf\" target=\"_blank\" title=\"Download\">\n                <i class=\"fa fa-download\">&nbsp;Download</i>\n              </a>\n            </ng-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n\n    <span *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">Total: {{ totalRecords }}</span>\n\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" message=\"You don't have any invoice yet.\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i10.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompanyAccountInvoiceComponent, selector: "pw-smart-crm-account-invoices", inputs: { accountId: "accountId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div class=\"row primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"col-12 px-0\">\n    <p-table #tt\n      [value]=\"invoices\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter justify-content-end\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input [(ngModel)]=\"searchText\"\n              (input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n              type=\"text\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search Invoices...\"\n              data-cy=\"incident-search\"\n              class=\"wd-90\">\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"col\" pSortableColumn=\"date\">Invoice Date <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"frequency\">Frequency <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"quantity\">Seats <p-sortIcon field=\"date\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"subtotal\">Subtotal <p-sortIcon field=\"subtotal\"></p-sortIcon></th>\n          <th scope=\"col\" pSortableColumn=\"total\">Total (incl. tax) <p-sortIcon field=\"total\"></p-sortIcon></th>\n          <th scope=\"col\">Action</th>\n        </tr>\n      </ng-template>\n\n      <ng-template pTemplate=\"body\" let-invoice>\n        <tr>\n          <td>{{ invoice.date | date:'dd-MMM-YYYY' }}</td>\n          <td>\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: invoiceFrequency,\n                              item: invoice?.frequency\n                          }\"\n              color=\"blue-grey\">{{ invoice?.frequency }}</span>\n          </td>\n          <td>{{ invoice?.quantity }}</td>\n          <td>{{ (invoice.subtotal_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td class=\"td-total\">{{ (invoice.total_in_cents / 100) | currency:invoice?.product?.currency }}</td>\n          <td>\n            <a *ngIf=\"invoice?.file?.url; else noFileUrl\" class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice.file.url\" target=\"_blank\" title=\"Download\">\n              <i class=\"fa fa-download\">&nbsp;Download</i>\n            </a>\n            <ng-template #noFileUrl>\n              <a class=\"btn btn-sm btn-primary\" [attr.href]=\"invoice?.stripe_invoice_pdf\" target=\"_blank\" title=\"Download\">\n                <i class=\"fa fa-download\">&nbsp;Download</i>\n              </a>\n            </ng-template>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n\n    <span *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">Total: {{ totalRecords }}</span>\n\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" message=\"You don't have any invoice yet.\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i5.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i10.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompanyAccountInvoiceComponent, decorators: [{
             type: Component,

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

@@ -16,10 +16,10 @@ import * as i7 from "@posiwise/directives";
 import * as i8 from "angular-plotly.js";
 import * as i9 from "@angular-magic/ngx-gp-autocomplete";
 import * as i10 from "@angular/router";
-import * as i11 from "primeng/multiselect";
+import * as i11 from "primeng/table";
 import * as i12 from "primeng/api";
-import * as i13 from "primeng/progressspinner";
-import * as i14 from "primeng/table";
+import * as i13 from "primeng/multiselect";
+import * as i14 from "primeng/progressspinner";
 import * as i15 from "@posiwise/shared-components";
 import * as i16 from "@posiwise/pipes";
 import * as i17 from "@jsverse/transloco";
@@ -321,7 +321,7 @@ export class SmartCrmCompaniesComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, deps: [{ token: i1.CrmService }, { token: i2.CommonService }, { token: i2.LogoCacheService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n            <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n        </td>\n        <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n  <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n    {{ account.expected_mrr / 100 | currency: account.main_currency }}\n  </span>\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n        <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Status\">\n          <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n        </td>\n\n        <td data-head=\"Priority\">\n          <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n        </td>\n\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n                (keydown.space)=\"onDelete(account.id, subscription.id)\"\n                (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n      <!-- Last Activities -->\n      <div class=\"col-12 col-md-6 mb-3 analytics\">\n        <h5 class=\"accordion-heading\">Latest Activities</h5>\n        <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n          <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n            [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <tr>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n              </tr>\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-activities>\n              <tr>\n                <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n                <td data-head=\"Account\">\n                  <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n                    <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n                  </a>\n                </td>\n                <td data-head=\"Contact\">\n                  <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n                    <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n                  </a>\n                </td>\n                <td data-head=\"Action\">\n                  <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n                                    itemsArray: actionNames,\n                                    item: activities.crm_action?.name\n                                }\"\n                    color=\"blue-grey\"\n                    class=\"badge\">{{ activities.crm_action?.name }}</span>\n                </td>\n                <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n              </tr>\n            </ng-template>\n          </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n        </div>\n        <div *ngIf=\"accountActivities?.length === 0\">\n          <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n          </pw-no-data>\n        </div>\n      </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i6.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: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.LazyImgDirective, selector: "img" }, { kind: "component", type: i8.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: i10.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11.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: i12.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i13.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i14.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: i14.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i14.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i15.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i16.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmCompaniesComponent, selector: "pw-smart-crm-companies", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <h2>Accounts</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-contact\"\n      [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.AccountMessage.AddAccount' | transloco }} </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [value]=\"data.accounts\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"row m-0\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Industry\" [options]=\"searchOptions\" [(ngModel)]=\"filterByIndustries\"\n            (onChange)=\"onSearchOptionChange($event, 'industry')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Size\" [options]=\"organizationSizes\" [(ngModel)]=\"filterBySizeId\"\n            (onChange)=\"onSearchOptionChange($event, 'size')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Status\" [options]=\"status\" [(ngModel)]=\"filterByStatus\"\n            (onChange)=\"onSearchOptionChange($event, 'status')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Priority\" [options]=\"priority\" [(ngModel)]=\"filterByPriority\"\n            (onChange)=\"onSearchOptionChange($event, 'priority')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4\">\n          <p-multiSelect placeholder=\"Select Source\" [options]=\"source\" [(ngModel)]=\"filterBySource\"\n            (onChange)=\"onSearchOptionChange($event, 'source')\" [filter]=\"true\" [showHeader]=\"true\"\n            [showToggleAll]=\"true\" appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"col-sm-4 mb-2\">\n          <input ngx-gp-autocomplete class=\"form-control location\" #places=\"ngx-places\" [(ngModel)]=\"searchLocationText\"\n            placeholder=\"Search location...\" (keyup)=\"locationSearch($event)\"\n            (onAddressChange)=\"handleAddressChange($event)\" />\n        </div>\n      </div>\n      <div class=\"search-filter\">\n        <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n        <div class=\"text-end mt-0 mt-sm-3\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search accounts...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\" pSortableColumn=\"name\"> {{ 'Crm.AccountMessage.Name' | transloco }} <p-sortIcon field=\"name\">\n          </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"location\"> {{ 'Crm.AccountMessage.Location' | transloco }} <p-sortIcon\n            field=\"location\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"owner_id\"> {{ 'Crm.AccountMessage.Owner' | transloco }} <p-sortIcon\n            field=\"owner_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"organization_size_id\"> {{ 'Crm.AccountMessage.Size' | transloco }} <p-sortIcon\n            field=\"organization_size_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"expected_mrr\" class=\"mrr-header\"> {{ 'Crm.AccountMessage.MRR' | transloco }} <p-sortIcon field=\"expected_mrr\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"signed_up_at\"> {{ 'Crm.AccountMessage.SignUpAt' | transloco }} <p-sortIcon field=\"signed_up_at\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_quarter\"> {{ 'Crm.AccountMessage.Quarter' | transloco }} <p-sortIcon field=\"sessions_last_quarter\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\" pSortableColumn=\"sessions_last_month\"> {{ 'Crm.AccountMessage.Month' | transloco }} <p-sortIcon field=\"sessions_last_month\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"status\"> {{ 'Crm.AccountMessage.Status' | transloco }} <p-sortIcon field=\"status\">\n        </p-sortIcon>\n        <th scope=\"true\" pSortableColumn=\"priority\"> {{ 'Crm.AccountMessage.Priority' | transloco }} <p-sortIcon field=\"priority\">\n        </p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-account>\n      <tr>\n        <td data-head=\"Name\" class=\"name-column\">\n          <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, account.id]\" class=\"name-link\">\n            <img alt=\"Company Logo\" [src]=\"getAccountLogo(account.company_url)\" class=\"img-fluid company-logo me-2\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n            <span [ngbTooltip]=\"account.name\" class=\"account-name\" [title]=\"account.name\">{{ account.name | textTruncate:30 }}</span>\n            <i [ngClass]=\"getUserAccountInfo(account).iconClass\" [ngbTooltip]=\"getUserAccountInfo(account).message\"\n               class=\"info-icon\"></i>\n          </a>\n        </td>\n        <td data-head=\"Location\" class=\"no-wrap\"><span [ngbTooltip]=\"account.location\">{{ getCountryFromLocation(account.location) }}</span></td>\n        <td data-head=\"Owner\">\n          <a [routerLink]=\"['/members', account?.owner?.slug]\"> {{ account.owner.first_name.charAt(0) }}. {{account.owner.last_name}}</a>\n        </td>\n        <td data-head=\"Size\" class=\"no-wrap\">{{ account?.organisation_size?.name !== 'Not available' ? account?.organisation_size?.name : '' }}\n</td>\n<td data-head=\"MRR\" class=\"no-wrap fw-bold expected-mrr\" >\n  <span *ngIf=\"account.expected_mrr && (hasAccess || account.owner_id === userId)\">\n    {{ account.expected_mrr / 100 | currency: account.main_currency }}\n  </span>\n</td>\n        <td data-head=\"Signed Up\">{{ account.signed_up_at | date: 'dd-MMM-YYYY' }}</td>\n        <td data-head=\"Quarter\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 15}\">{{ account.sessions_last_quarter }}</td>\n        <td data-head=\"Month\" [ngClass]=\"{'month-quarter-text fw-bold': account.sessions_last_quarter > 5}\">{{ account.sessions_last_month }}</td>\n        <td data-head=\"Status\">\n          <span *ngIf=\"account.status === 'Prospect'\" class=\"badge bg-primary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Trial - Inactive'\" class=\"badge bg-secondary\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - New'\" class=\"badge bg-info\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Active'\" class=\"badge bg-success\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Inactive'\" class=\"badge bg-warning\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Customer - Old'\" class=\"badge bg-dark\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Dead'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Competitor'\" class=\"badge bg-danger\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Vendor'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Supplier'\" class=\"badge bg-blue-grey\">{{account.status}}</span>\n          <span *ngIf=\"account.status === 'Other'\" class=\"badge bg-teal\">{{account.status}}</span>\n        </td>\n\n        <td data-head=\"Priority\">\n          <span *ngIf=\"account.priority === 'A - Ideal Fit'\" class=\"badge bg-success\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'B - High Potential'\" class=\"badge bg-primary\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'C - Low Potential'\" class=\"badge bg-warning\">{{account.priority}}</span>\n          <span *ngIf=\"account.priority === 'D - Out of market'\" class=\"badge bg-secondary\">{{account.priority}}</span>\n        </td>\n\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"See contacts\" class=\"me-2 me-sm-3 see-icon\"\n              [routerLink]=\"['/' + subscription?.slug + routers.accountContacts, account.id]\">\n              <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n            </li>\n            <ng-container *ngIf=\"hasAccess || account.owner_id === userId\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accounts,\n                                    account.id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(account.id, subscription.id)\"\n                (keydown.space)=\"onDelete(account.id, subscription.id)\"\n                (click)=\"onDelete(account.id, subscription.id)\"\n                  aria-hidden=\"true\"></i>\n              </li>\n            </ng-container>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoAccountMessage' | transloco\"> </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"data.unfiltered_count !== 0 && isLoaded\">\n      <!-- Last Activities -->\n      <div class=\"col-12 col-md-6 mb-3 analytics\">\n        <h5 class=\"accordion-heading\">Latest Activities</h5>\n        <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"accountActivities?.length\">\n          <p-table class=\"table\" #dt [value]=\"accountActivities\" [paginator]=\"accountInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n            [totalRecords]=\"accountActivities.length\" [lazy]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <tr>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Owner' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Account' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Contact' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.Action' | transloco }}</th>\n                <th scope=\"true\">{{ 'Crm.AccountMessage.When' | transloco }}</th>\n              </tr>\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-activities>\n              <tr>\n                <td data-head=\"Owner\"> {{ activities.owner?.first_name.charAt(0) }}. {{ activities.owner?.last_name }} </td>\n                <td data-head=\"Account\">\n                  <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, activities.crm_account_id]\" class=\"name-link\">\n                    <span [ngbTooltip]=\"activities.crm_account?.name\">{{ activities.crm_account?.name }}</span>\n                  </a>\n                </td>\n                <td data-head=\"Contact\">\n                  <a [routerLink]=\"['/' + subscription?.slug + routers.contactInfo, activities.crm_contact_id]\" class=\"name-link\">\n                    <span [ngbTooltip]=\"activities.crm_contact ? activities.crm_contact.first_name + ' ' + activities.crm_contact.last_name : ''\">{{ (activities.crm_contact?.first_name + ' ' + activities.crm_contact?.last_name) | textTruncate:20 }}</span>\n                  </a>\n                </td>\n                <td data-head=\"Action\">\n                  <span [ngbTooltip]=\"activities.comment\" [appDynamicBadge]=\"{\n                                    itemsArray: actionNames,\n                                    item: activities.crm_action?.name\n                                }\"\n                    color=\"blue-grey\"\n                    class=\"badge\">{{ activities.crm_action?.name }}</span>\n                </td>\n                <td data-head=\"When\">{{ activities.when | date:'dd-MMM-YYYY' }}</td>\n              </tr>\n            </ng-template>\n          </p-table>\n        <span class=\"total-records-count\" *ngIf=\"accountInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ accountActivities.length }}</span>\n        </div>\n        <div *ngIf=\"accountActivities?.length === 0\">\n          <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n          </pw-no-data>\n        </div>\n      </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Accounts Location</h5>\n      <div>\n        <ng-template [ngIf]=\"accountGeography\">\n          <plotly-plot [data]=\"accountGeography?.data\" [layout]=\"accountGeography?.layout\" [config]=\"accountGeography?.config\" [useResizeHandler]=\"accountGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!accountGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.AccountMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.location{background-color:#fff}.company-logo{height:20px;width:20px}::ng-deep .ui-multiselect{display:inline-block}::ng-deep body .ui-multiselect .ui-multiselect-label{font-weight:700}.name-column{text-align:left}.account-name{margin-right:5px}.info-icon{vertical-align:middle;margin-left:5px}.account-link-icon{color:gray}.money-icon{color:green;font-size:.85em;background-color:#90ee90;border-radius:50%;padding:5px;width:18.5px;box-shadow:0 0 10px #00800080}.icon-ul{width:111px}.no-wrap{word-break:keep-all;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i6.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: i7.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.LazyImgDirective, selector: "img" }, { kind: "component", type: i8.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: i10.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i11.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: i12.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i11.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i11.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i13.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: i14.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i15.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i16.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i17.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmCompaniesComponent, decorators: [{
             type: Component,

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

@@ -16,10 +16,10 @@ import * as i5 from "@ng-bootstrap/ng-bootstrap";
 import * as i6 from "@posiwise/directives";
 import * as i7 from "@angular/router";
 import * as i8 from "primeng/api";
-import * as i9 from "primeng/progressspinner";
-import * as i10 from "@posiwise/shared-components";
-import * as i11 from "ngx-infinite-scroll";
-import * as i12 from "primeng/dropdown";
+import * as i9 from "primeng/dropdown";
+import * as i10 from "primeng/progressspinner";
+import * as i11 from "@posiwise/shared-components";
+import * as i12 from "ngx-infinite-scroll";
 import * as i13 from "@jsverse/transloco";
 export class CrmActionsComponent extends AppBaseComponent {
     constructor(crmService, injector, document) {
@@ -255,7 +255,7 @@ export class CrmActionsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmActionsComponent, selector: "pw-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-4\">\n    <div class=\"col-12 mb-0\">\n      <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n    </div>\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <p-dropdown\n        [options]=\"allSubscriptionMembers\"\n        optionLabel=\"first_name\"\n        optionValue=\"id\"\n        [ngModel]=\"0\"\n        (onChange)=\"filterByUser($event.value)\">\n\n  <ng-template pTemplate=\"selectedItem\" let-selected>\n    <span *ngIf=\"selected\">\n      {{ selected.first_name }} {{ selected.last_name }}\n    </span>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-option>\n    {{ option.first_name }} {{ option.last_name }}\n  </ng-template>\n</p-dropdown>\n    </div>\n    <div>\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      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div #selector class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"dd-mmm-yyyy\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary action-name\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li>\n              <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n                <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n                  <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\"  [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n                    <div class=\"avatar avatar-image\">\n                      <img\n                        class=\"img-fluid\"\n                        [src]=\"owner_image.url\"\n                        alt=\"Male Icon\"\n                        (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n                      />\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n              <ng-template #noProfileImg>\n                <div class=\"text-center my-2\">\n                  <div class=\"avatar avatar-image\">\n                    <img\n                      src=\"/assets/img/icons/male.png\"\n                      alt=\"\"\n                      class=\"img-fluid\"\n                    />\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                aria-label=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                aria-label=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                aria-label=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n\n    <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n        infiniteScroll\n        [infiniteScrollContainer]=\"suggestedActionsSelector\"\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\">\n\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"\n                  let suggestedAction of accountActionSuggested\n                      | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                  let i = index\n              \">\n        <div class=\"p-2\">\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a [routerLink]=\"[\n                              '/' + subscription?.slug + routers.accountInfo,\n                              suggestedAction?.crm_account?.id\n                          ]\">{{ suggestedAction?.crm_account?.name }}</a>\n          </p>\n          <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n          <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.action-name{background-color:var(--first)!important}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: "component", type: i4.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i5.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: i6.LazyImgDirective, selector: "img" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i12.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i5.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CrmActionsComponent, selector: "pw-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-4\">\n    <div class=\"col-12 mb-0\">\n      <h2>{{ 'Crm.Actions.Title' | transloco }}</h2>\n    </div>\n    <div class=\"col-12 col-sm-3 float-start mb-2\"\n      *ngIf=\"showFilter\">\n      <p-dropdown\n        [options]=\"allSubscriptionMembers\"\n        optionLabel=\"first_name\"\n        optionValue=\"id\"\n        [ngModel]=\"0\"\n        (onChange)=\"filterByUser($event.value)\">\n\n  <ng-template pTemplate=\"selectedItem\" let-selected>\n    <span *ngIf=\"selected\">\n      {{ selected.first_name }} {{ selected.last_name }}\n    </span>\n  </ng-template>\n\n  <ng-template pTemplate=\"item\" let-option>\n    {{ option.first_name }} {{ option.last_name }}\n  </ng-template>\n</p-dropdown>\n    </div>\n    <div>\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      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n        data-cy=\"add-contact\"\n        [routerLink]=\"['/' + subscription?.slug + routers.addAccount]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.AccountMessage.AddAccount' | transloco }}\n      </a>\n      <a class=\"btn btn-sm btn-outline-primary float-end me-3\"\n      [routerLink]=\"['/' + subscription?.slug + routers.contactAdd]\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.ContactMessage.AddContact' | transloco }}\n    </a>\n    </div>\n  </div>\n  <!-- Pending Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">Pending Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n    <div *ngIf=\"contactActions?.length === 0 && isLoaded\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionMessage' | transloco\"> </pw-no-data>\n    </div>\n    <!-- wrapper for infinite scroll -->\n    <div #selector class=\"pending-actions-wrapper\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      [infiniteScrollContainer]=\"selector\"\n      [fromRoot]=\"true\"\n      (scrolled)=\"onScrollPendingActions()\">\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"let action of contactActions; let i = index\">\n        <div class=\"p-2\">\n          <ul class=\"list-inline\">\n            <li class=\"list-inline-item me-2\">\n              <h6 *ngIf=\"!updating || actionId !== action.id\">\n                {{ action.when_short_date }}\n              </h6>\n              <input *ngIf=\"updating && actionId === action.id\"\n                placeholder=\"dd-mmm-yyyy\"\n                [value]=\"action.when_short_date\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (focus)=\"d.toggle()\"\n                (dateSelect)=\"onDateSelect($event, action)\" />\n            </li>\n            <li>\n              <button type=\"button\"\n                class=\"btn btn-sm when-btn\"\n                (click)=\"showDatePicker(action?.id)\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    ngbTooltip=\"Click to Edit\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </li>\n            <li class=\"list-inline-item\">\n              <span class=\"badge bg-primary action-name\">{{ action.crm_action?.name }}</span>\n            </li>\n            <li>\n              <ng-container *ngIf=\"action.owner?.user_avatar?.length > 0; else noProfileImg\">\n                <ng-container *ngFor=\"let owner_image of action.owner?.user_avatar\">\n                  <div class=\"text-center my-2\" *ngIf=\"owner_image.width === 50\"  [ngbTooltip]=\"action.owner.first_name + ' ' +action.owner.last_name\">\n                    <div class=\"avatar avatar-image\">\n                      <img\n                        class=\"img-fluid\"\n                        [src]=\"owner_image.url\"\n                        alt=\"Male Icon\"\n                        (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n                      />\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n              <ng-template #noProfileImg>\n                <div class=\"text-center my-2\">\n                  <div class=\"avatar avatar-image\">\n                    <img\n                      src=\"/assets/img/icons/male.png\"\n                      alt=\"\"\n                      class=\"img-fluid\"\n                    />\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n\n            <li class=\"list-inline-item float-end\">\n              <a *ngIf=\"action?.crm_contact\"\n                ngbTooltip=\"See this contact\"\n                aria-label=\"See this contact\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    action?.crm_contact?.id\n                                ]\">\n                <i class=\"fa fa-eye me-3 see-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as completed\"\n                aria-label=\"Set as completed\"\n                class=\"me-3\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCompleted(action.id, action, i)\">\n                <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n              </a>\n              <a ngbTooltip=\"Set as cancelled\"\n                aria-label=\"Set as cancelled\"\n                href=\"javascript:void(0);\"\n                (click)=\"setAsCancelled(action.id, action, i)\">\n                <i\n                                    class=\"fa fa-times text-danger delete-icon\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </a>\n            </li>\n          </ul>\n          <p [class.text-danger]=\"!action.color\"\n            class=\"mb-0\"\n            *ngIf=\"action.due\">\n            {{ action.due }}\n          </p>\n          <p *ngIf=\"action.owner?.id !== userId\"\n            class=\"m-0 mt-1\">\n            <a class=\"font-italic grey\"\n              [routerLink]=\"['/members', action?.owner?.slug]\">Added by\n              {{ action.owner?.first_name + ' ' + action.owner?.last_name }}</a>\n          </p>\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a class=\"text-secondary\"\n              *ngIf=\"action?.crm_contact\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.contactInfo,\n                                action?.crm_contact?.id\n                            ]\">\n              {{\n                                action?.crm_contact?.first_name +\n                                    ' ' +\n                                    action?.crm_contact?.last_name\n                            }}\n            </a>\n            <a *ngIf=\"!action.crm_contact_id\">N/A</a> at\n            <a *ngIf=\"action.crm_account_id\"\n              [routerLink]=\"[\n                                '/' + subscription?.slug + routers.accountInfo,\n                                action?.crm_account?.id\n                            ]\">\n              {{ action?.crm_account?.name }}\n            </a>\n          </p>\n          <div class=\"comment-section\">\n            <textarea class=\"mt-1 textarea form-control mb-2\"\n              [(ngModel)]=\"action.comment\">{{ action.comment }}</textarea>\n            <div class=\"d-flex\">\n              <p class=\"my-1 comment\"\n                *ngIf=\"!showFullComment || action.id !== commentId\">\n                {{ action.comment | slice: 0:230\n                                }}<a *ngIf=\"action.comment.length > 230\"\n                  class=\"text-secondary\"\n                  (click)=\"showFullComment = true; commentId = action.id\">...show more\n                </a>\n              </p>\n              <p class=\"my-1 comment\"\n                *ngIf=\"showFullComment && action.id === commentId\">\n                {{ action.comment }}\n                <a *ngIf=\"action.comment.length > 230 && showFullComment\"\n                  (click)=\"showFullComment = false\"\n                  class=\"text-secondary\">...show less</a>\n              </p>\n              <button class=\"btn btn-md edit-btn\"\n                (click)=\"editComment($event)\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"control-btns edit-control-btns\">\n              <button type=\"button\"\n                class=\"btn btn-sm btn-outline-default me-2\"\n                (click)=\"editComment(undefined)\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button class=\"btn btn-sm btn-primary\"\n                (click)=\"updateComment(action)\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Suggested Actions -->\n  <div class=\"col-12 col-md-6 mb-3\">\n    <h5 class=\"accordion-heading\">AI Suggested Actions</h5>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"!isLoaded\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n\n\n    <div #suggestedActionsSelector *ngIf=\"accountActionSuggested?.length > 0\" class=\"suggested-actions-wrapper\"\n        infiniteScroll\n        [infiniteScrollContainer]=\"suggestedActionsSelector\"\n        [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\">\n\n      <div class=\"mb-4 action-card bg-white\"\n        *ngFor=\"\n                  let suggestedAction of accountActionSuggested\n                      | paginate: { id: 'suggestedAction', itemsPerPage: 10, currentPage: p1 };\n                  let i = index\n              \">\n        <div class=\"p-2\">\n          <p class=\"mt-1 mb-1 fw-bold\">\n            <a [routerLink]=\"[\n                              '/' + subscription?.slug + routers.accountInfo,\n                              suggestedAction?.crm_account?.id\n                          ]\">{{ suggestedAction?.crm_account?.name }}</a>\n          </p>\n          <p class=\"fw-bold mb-1\">{{ suggestedAction.crm_action }}</p>\n          <p class=\"mb-0\">{{ suggestedAction.reason }}</p>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center pagination-controls w-100 mt-3\"\n      *ngIf=\"accountActionSuggested?.length > 10\">\n      <pagination-controls id=\"suggestedAction\"\n        (pageChange)=\"p1 = $event\">\n      </pagination-controls>\n    </div>\n    <div *ngIf=\"accountActionSuggested.length === 0 && isLoadedSuggested\"\n      class=\"px-2\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Actions.ActionSuggestionsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.textarea,.control-btns{display:none}.comment,.edit-btn{display:block}.comment{border:0;border-bottom:1px solid rgb(242,242,242);color:#000;font-size:1rem;resize:none}.action-name{background-color:var(--first)!important}.textarea{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:17px}.comment-section{min-width:350px;padding-right:45px;position:relative}.comment-section p{word-break:break-all}.comment-section.show-controls .textarea,.comment-section.show-controls .control-btns{display:block}.comment-section.show-controls .comment,.comment-section.show-controls .edit-btn{display:none}.comment-section.show-controls .control-btns.edit-control-btns{display:flex;justify-content:flex-end}.edit-btn{margin-top:-15px}.avatar-image{height:25px;width:25px}.when-btn:focus{border:0;box-shadow:none}.pending-actions-wrapper,.suggested-actions-wrapper{overflow-y:auto;height:calc(100vh - 150px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: "component", type: i4.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "directive", type: i5.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: i6.LazyImgDirective, selector: "img" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i5.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CrmActionsComponent, decorators: [{
             type: Component,

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

@@ -11,9 +11,9 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 import * as i4 from "ngx-ui-switch";
 import * as i5 from "@posiwise/directives";
-import * as i6 from "primeng/progressspinner";
-import * as i7 from "@posiwise/shared-components";
-import * as i8 from "primeng/dropdown";
+import * as i6 from "primeng/dropdown";
+import * as i7 from "primeng/progressspinner";
+import * as i8 from "@posiwise/shared-components";
 import * as i9 from "@jsverse/transloco";
 export class SmartCrmSettingsDetailsComponent extends AppBaseComponent {
     constructor(crmService, injector) {
@@ -88,7 +88,7 @@ export class SmartCrmSettingsDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmSettingsDetailsComponent, 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: SmartCrmSettingsDetailsComponent, selector: "pw-smart-crm-settings-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>Action: {{ isLoading ? '' : data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n  <div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n<div class=\"p-2 mt-3\" *ngIf=\"!isLoading\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-md-3\">\n        <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\"\n          [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n         <label class=\"info-circle mb-2\" for=\"targetWeek\">{{ 'Crm.Settings.TargetWeek' | transloco }}\n          <span class=\"text-danger required-icon\">*</span>\n          <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n        </label>\n        <p-dropdown\n          [options]=\"targetWeek\"\n          formControlName=\"target_week\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\"\n          [placeholder]=\"'Select Target Week'\">\n        </p-dropdown>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week').touched && form.get('target_week')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <label class=\"info-circle mb-2\" for=\"targetWeekMin\">{{ 'Crm.Settings.TargetWeekMin' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n        </label>\n        <p-dropdown\n          [options]=\"targetWeekMin\"\n          formControlName=\"target_week_min\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\"\n          [placeholder]=\"'Select Target Week Min'\">\n        </p-dropdown>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week_min').touched &&\n                        form.get('target_week_min')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n          [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n          *ngIf=\"actions$ | async as actions\">\n          <p-dropdown\n            [options]=\"actions['crm_actions']\"\n            formControlName=\"previous_action_id\"\n            [placeholder]=\"'Select Previous Action'\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Visible\">{{ 'Crm.Settings.Visible' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n          </label>\n          <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\">\n          </ui-switch>\n        </div>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" [buttonBusy]=\"buttonBusy\" class=\"btn btn-primary\"> {{ 'Button.Submit' | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i7.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i8.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmSettingsDetailsComponent, selector: "pw-smart-crm-settings-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n      aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>Action: {{ isLoading ? '' : data?.name ? data?.name : ('Label.AddNew' | transloco) }}</span>\n  </h3>\n</div>\n  <div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n<div class=\"p-2 mt-3\" *ngIf=\"!isLoading\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-md-3\">\n        <pw-input-container [label]=\"'Crm.Settings.Name' | transloco\" name=\"name\"\n          [errorMsg]=\"'Crm.Settings.NameFieldErrorMessage' | transloco\">\n          <input type=\"text\" class=\"form-control\" formControlName=\"name\" id=\"name\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n         <label class=\"info-circle mb-2\" for=\"targetWeek\">{{ 'Crm.Settings.TargetWeek' | transloco }}\n          <span class=\"text-danger required-icon\">*</span>\n          <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeek' | transloco }}</span>\n        </label>\n        <p-dropdown\n          [options]=\"targetWeek\"\n          formControlName=\"target_week\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week'].errors }\"\n          [placeholder]=\"'Select Target Week'\">\n        </p-dropdown>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week').touched && form.get('target_week')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <label class=\"info-circle mb-2\" for=\"targetWeekMin\">{{ 'Crm.Settings.TargetWeekMin' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.TargetWeekMin' | transloco }}</span>\n        </label>\n        <p-dropdown\n          [options]=\"targetWeekMin\"\n          formControlName=\"target_week_min\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['target_week_min'].errors }\"\n          [placeholder]=\"'Select Target Week Min'\">\n        </p-dropdown>\n        <div class=\"danger\" *ngIf=\"\n                        form.get('target_week_min').touched &&\n                        form.get('target_week_min')?.errors?.required\n                    \">\n          <span> {{ 'Crm.Settings.TargetWeekMinErrorMessage' | transloco }} </span>\n        </div>\n      </div>\n      <div class=\"col-12 col-sm-4 col-md-2\">\n        <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Crm.Settings.Tooltip.PreviousAction' | transloco\"\n          [label]=\"'Crm.Settings.PreviousAction' | transloco\" name=\"previous_action_id\"\n          *ngIf=\"actions$ | async as actions\">\n          <p-dropdown\n            [options]=\"actions['crm_actions']\"\n            formControlName=\"previous_action_id\"\n            [placeholder]=\"'Select Previous Action'\"\n            optionValue=\"id\"\n            optionLabel=\"name\">\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-md-2 col-lg-2 pe-0 mx-2\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Visible\">{{ 'Crm.Settings.Visible' | transloco }} <span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.Settings.Tooltip.Visible' | transloco }}</span>\n          </label>\n          <ui-switch checked class=\"d-block\" (change)=\"onChange($event)\" name=\"visible\" formControlName=\"visible\">\n          </ui-switch>\n        </div>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\" [buttonBusy]=\"buttonBusy\" class=\"btn btn-primary\"> {{ 'Button.Submit' | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i8.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),

package/esm2022/lib/private/components/smart-crm-configuration/smart-crm-actions/smart-crm-actions.component.mjs

@@ -12,9 +12,9 @@ import * as i4 from "primeng/inputtext";
 import * as i5 from "@ng-bootstrap/ng-bootstrap";
 import * as i6 from "@posiwise/directives";
 import * as i7 from "@angular/router";
-import * as i8 from "primeng/api";
-import * as i9 from "primeng/progressspinner";
-import * as i10 from "primeng/table";
+import * as i8 from "primeng/table";
+import * as i9 from "primeng/api";
+import * as i10 from "primeng/progressspinner";
 import * as i11 from "@posiwise/shared-components";
 import * as i12 from "@jsverse/transloco";
 export class SmartCrmActionsComponent extends AppBaseComponent {
@@ -117,7 +117,7 @@ export class SmartCrmActionsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmActionsComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>{{ 'Crm.Actions.Config.Description' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      class=\"btn btn-sm btn-outline-primary float-end build-default-action-button\"\n      (click)=\"buildDefaultActions()\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}\n    </a>\n    <a *ngIf=\"hasAccess\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + subscription?.slug + routers.configurationDetails + 'add']\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.AddAction' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_actions\"\n        [paginator]=\"data.object_count!==0\"\n        [lazy]=\"true\"\n        [rows]=\"100\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search action...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n          <ng-template pTemplate=\"header\" >\n            <tr>\n              <th scope=\"true\"\n                pSortableColumn=\"name\">\n                {{ 'Crm.Settings.Name' | transloco }}\n                <p-sortIcon field=\"name\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n              pSortableColumn=\"previous_action_id\">\n              {{ 'Crm.CategoriesMessages.PreviousAction' | transloco }}\n              <p-sortIcon field=\"previous_action_id\"></p-sortIcon>\n            </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week\">\n                {{ 'Crm.Settings.TargetWeek' | transloco }}\n                <p-sortIcon field=\"target_week\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week_min\">\n                {{ 'Crm.Settings.TargetWeekMin' | transloco }}\n                <p-sortIcon field=\"target_week_min\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"visible\">\n                {{ 'Crm.Settings.Visible' | transloco }}\n                <p-sortIcon field=\"visible\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                *ngIf=\"hasAccess\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-action>\n          <tr>\n            <td data-head=\"Name\">{{ action.name }}</td>\n            <td data-head=\"Previous Action\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: actionNames,\n                                    item: getActionName(action?.previous_action_id)\n                                }\"\n                color=\"blue-grey\">{{ getActionName(action?.previous_action_id) }}</span>\n            </td>\n            <td data-head=\"TargetWeek\">{{ action.target_week }}</td>\n            <td data-head=\"TargetWeekMin\">{{ action.target_week_min }}</td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: action?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!action?.visible }}</span>\n            </td>\n            <td data-head=\"Action\"\n              *ngIf=\"hasAccess\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li ngbTooltip=\"Edit\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.configurationDetails,\n                                        action.id\n                                    ]\">\n                  <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <li ngbTooltip=\"Delete\"\n                  class=\"me-2 me-sm-3\">\n                  <i\n                                        class=\"fa fa-trash delete-icon\"\n                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                        (click)=\"onDelete(action.id)\"\n                                        aria-hidden=\"true\"\n                                    ></i>\n                </li>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count!==0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n    <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.build-default-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2.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.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: i6.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "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: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmActionsComponent, selector: "pw-smart-crm-actions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <p>{{ 'Crm.Actions.Config.Description' | transloco }}</p>\n    <a *ngIf=\"data.object_count === 0 && data.unfiltered_count === 0 && isLoaded\"\n      class=\"btn btn-sm btn-outline-primary float-end build-default-action-button\"\n      (click)=\"buildDefaultActions()\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.BuildDefaultAction' | transloco }}\n    </a>\n    <a *ngIf=\"hasAccess\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + subscription?.slug + routers.configurationDetails + 'add']\"\n      data-cy=\"add-action\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Crm.Settings.AddAction' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt\n        [value]=\"data.crm_actions\"\n        [paginator]=\"data.object_count!==0\"\n        [lazy]=\"true\"\n        [rows]=\"100\"\n        [totalRecords]=\"data.object_count\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\"\n        [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search action...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"mw-90\" />\n          </div>\n        </ng-template>\n          <ng-template pTemplate=\"header\" >\n            <tr>\n              <th scope=\"true\"\n                pSortableColumn=\"name\">\n                {{ 'Crm.Settings.Name' | transloco }}\n                <p-sortIcon field=\"name\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n              pSortableColumn=\"previous_action_id\">\n              {{ 'Crm.CategoriesMessages.PreviousAction' | transloco }}\n              <p-sortIcon field=\"previous_action_id\"></p-sortIcon>\n            </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week\">\n                {{ 'Crm.Settings.TargetWeek' | transloco }}\n                <p-sortIcon field=\"target_week\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"target_week_min\">\n                {{ 'Crm.Settings.TargetWeekMin' | transloco }}\n                <p-sortIcon field=\"target_week_min\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                pSortableColumn=\"visible\">\n                {{ 'Crm.Settings.Visible' | transloco }}\n                <p-sortIcon field=\"visible\"></p-sortIcon>\n              </th>\n              <th scope=\"true\"\n                *ngIf=\"hasAccess\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n        <ng-template pTemplate=\"body\"\n          let-action>\n          <tr>\n            <td data-head=\"Name\">{{ action.name }}</td>\n            <td data-head=\"Previous Action\">\n              <span class=\"badge\"\n                [appDynamicBadge]=\"{\n                                    itemsArray: actionNames,\n                                    item: getActionName(action?.previous_action_id)\n                                }\"\n                color=\"blue-grey\">{{ getActionName(action?.previous_action_id) }}</span>\n            </td>\n            <td data-head=\"TargetWeek\">{{ action.target_week }}</td>\n            <td data-head=\"TargetWeekMin\">{{ action.target_week_min }}</td>\n            <td data-head=\"Visible\">\n              <span [appDynamicBadge]=\"{\n                                    itemsArray: [true, false],\n                                    item: action?.visible\n                                }\"\n                color=\"success-danger\"\n                class=\"badge\">{{ !!action?.visible }}</span>\n            </td>\n            <td data-head=\"Action\"\n              *ngIf=\"hasAccess\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li ngbTooltip=\"Edit\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"[\n                                        '/' + subscription?.slug + routers.configurationDetails,\n                                        action.id\n                                    ]\">\n                  <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <li ngbTooltip=\"Delete\"\n                  class=\"me-2 me-sm-3\">\n                  <i\n                                        class=\"fa fa-trash delete-icon\"\n                                        (keydown.enter)=\"onDeleteContact(contact.id)\"\n                                        (keydown.space)=\"onDeleteContact(contact.id)\"\n                                        (click)=\"onDelete(action.id)\"\n                                        aria-hidden=\"true\"\n                                    ></i>\n                </li>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count!==0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n    <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Crm.Settings.NoActionMessage' | transloco\"> </pw-no-data>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.build-default-action-button{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2.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.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: i6.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i9.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmActionsComponent, decorators: [{
             type: Component,

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

@@ -3,8 +3,8 @@ import { AppBaseComponent } from '@posiwise/app-base-component';
 import { ROUTERS } from '../../../shared/routers/routers';
 import * as i0 from "@angular/core";
 import * as i1 from "@posiwise/directives";
-import * as i2 from "@posiwise/shared-components";
-import * as i3 from "@ng-bootstrap/ng-bootstrap";
+import * as i2 from "@ng-bootstrap/ng-bootstrap";
+import * as i3 from "@posiwise/shared-components";
 import * as i4 from "./smart-crm-source/smart-crm-source.component";
 import * as i5 from "./smart-crm-widgets/smart-crm-widgets.component";
 import * as i6 from "./smart-crm-actions/smart-crm-actions.component";
@@ -26,7 +26,7 @@ export class SmartCrmConfigurationComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmConfigurationComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmConfigurationComponent, selector: "pw-configuration", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i1.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "component", type: i2.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "directive", type: i3.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i3.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i4.SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source" }, { kind: "component", type: i5.SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets" }, { kind: "component", type: i6.SmartCrmActionsComponent, selector: "pw-smart-crm-actions" }, { kind: "component", type: i7.SmartCrmStagesComponent, selector: "pw-smart-crm-stages" }, { kind: "component", type: i8.SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmConfigurationComponent, selector: "pw-configuration", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <h2>CRM Configuration</h2>\n  </div>\n</div>\n<ul ngbNav\n  #nav=\"ngbNav\"\n  [(activeId)]=\"activeTab\"\n  (navChange)=\"onTabChange($event)\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"'actions'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Actions</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-actions></pw-smart-crm-actions>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'categories'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Categories</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-opportunity-categories></pw-smart-crm-opportunity-categories>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'stage'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Stages</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-stages></pw-smart-crm-stages>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'source'\"\n    *rbacAllow=\"'SubscriptionAdmin'\">\n    <a ngbNavLink>Sources</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-source></pw-smart-crm-source>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'widget'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Widgets</a>\n    <ng-template ngbNavContent>\n      <pw-smart-crm-widgets></pw-smart-crm-widgets>\n    </ng-template>\n  </li>\n\n  <li [ngbNavItem]=\"'admin'\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Admin</a>\n    <ng-template ngbNavContent>\n      <pw-coming-soon message=\"Admin\"></pw-coming-soon>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i1.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i3.ComingSoonComponent, selector: "pw-coming-soon", inputs: ["message"] }, { kind: "component", type: i4.SmartCrmCompanySourceComponent, selector: "pw-smart-crm-source" }, { kind: "component", type: i5.SmartCrmWidgetsComponent, selector: "pw-smart-crm-widgets" }, { kind: "component", type: i6.SmartCrmActionsComponent, selector: "pw-smart-crm-actions" }, { kind: "component", type: i7.SmartCrmStagesComponent, selector: "pw-smart-crm-stages" }, { kind: "component", type: i8.SmartCrmOpportunityCategoriesComponent, selector: "pw-smart-crm-opportunity-categories" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmConfigurationComponent, decorators: [{
             type: Component,