@posiwise/smart-crm 0.0.44 → 0.0.46

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

@@ -210,7 +210,7 @@ export class SmartCrmOpportunitiesListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesListComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i2.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n        class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"row\">\n            <div class=\"col-sm-3 col-6\">\n              <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n                (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n                <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n                    (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" appendTo=\"body\">\n                </p-multiSelect>\n            </div>\n            <!-- Empty column occupying the same space -->\n            <div class=\"col-sm-3 col-6\"></div>\n            <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n                <div class=\"d-flex w-100\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n                      (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n                </div>\n            </div>\n        </div>\n          <div class=\"search-filter\">\n            <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n                field=\"title\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n              <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n              <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n              }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n            </th>\n            <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n              }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n              <p-sortIcon field=\"win_chances\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n              transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n              <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n                }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n              </th>\n            <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n              <p-sortIcon field=\"starting_at\"></p-sortIcon>\n            </th>\n            <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-opportunities>\n          <tr>\n            <td data-head=\"Title\">\n              <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n                                    hasAccess ||\n                                    opportunities?.owner_id === userId ||\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.opportunityInfo,\n                                    opportunities.id\n                                ]\">\n                <span>{{ opportunities?.title | textTruncate: 15 }} </span>\n              </a>\n              <a *ngIf=\"\n                                    !hasAccess &&\n                                    opportunities?.owner_id !== userId &&\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n            </td>\n            <td class=\"contactname\" data-head=\"Crm Contact\">\n              <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    opportunities.crm_contact_id.id\n                                ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n                opportunities.crm_contact?.last_name }}</a>\n            </td>\n            <td data-head=\"Account\">\n              <a [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accountInfo,\n                                    opportunities.crm_account.id\n                                ]\">{{ opportunities.crm_account.name }}</a>\n            </td>\n            <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"WinChance\">\n              <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n                {{ opportunities.win_chances / 100 | percent }}\n              </span>\n               <span class=\"text-danger\"\n                *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n            </td>\n            <td data-head=\"Categories\">\n              <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n                }}</span>\n            </td>\n            <td data-head=\"Stage\">\n              <span class=\"badge\" [appDynamicBadge]=\"{\n                                    itemsArray: stages,\n                                    item: opportunities?.crm_opportunity_stage?.name\n                                }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n            </td>\n            <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.opportunities,\n                                                opportunities.id\n                                            ]\">\n                      <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                      <i class=\"fa fa-trash delete-icon\"   (keydown.enter)=\"onDelete(opportunities.id)\"\n                      (keydown.space)=\"onDelete(opportunities.id)\"\n                      (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.OpportunitiesMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.title | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n      </div>\n      <div *ngIf=\"opportunitiesInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Opportunities Location</h5>\n      <div>\n        <ng-template [ngIf]=\"opportunitiesGeography\">\n          <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"opportunitiesGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!opportunitiesGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i6.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i12.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.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: i13.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i13.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i14.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i3.PercentPipe, name: "percent" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i16.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesListComponent, selector: "pw-smart-crm-opportunities-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\n    <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\"\n      [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n    </a>\n  </div>\n  <div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"col-12\">\n    <div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n      <p-table #dt [value]=\"data.crm_opportunities\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n        class=\"contact-table\" [totalRecords]=\"data.object_count\" [loading]=\"loading\" filterDelay=\"1000\"\n        (onLazyLoad)=\"onLazyLoad($event)\" [customSort]=\"true\">\n        <ng-template pTemplate=\"caption\">\n          <div class=\"row\">\n            <div class=\"col-sm-3 col-6\">\n              <p-multiSelect placeholder=\"Select Category\" [options]=\"categories\" [(ngModel)]=\"filterByCategories\"\n                (onChange)=\"onSearchOptionChange($event, 'category')\" [filter]=\"true\" [showHeader]=\"true\" [showToggleAll]=\"true\"\n                appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-sm-3 col-6 mb-2 mb-sm-0\">\n                <p-multiSelect placeholder=\"Select Stage\" [options]=\"searchStages\" [(ngModel)]=\"filterByStages\"\n                    (onChange)=\"onSearchOptionChange($event, 'stage')\" [filter]=\"true\" [showHeader]=\"true\"\n                    [showToggleAll]=\"true\" appendTo=\"body\">\n                </p-multiSelect>\n            </div>\n            <!-- Empty column occupying the same space -->\n            <div class=\"col-sm-3 col-6\"></div>\n            <div class=\"col-sm-3 col-md-4 col-lg-3 d-flex justify-content-end\">\n                <div class=\"d-flex w-100\">\n                  <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n                  <input type=\"text\" [(ngModel)]=\"searchText\" pInputText placeholder=\"Search opportunities..\"\n                      (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"form-control search-opportunities-search-input\" />\n                </div>\n            </div>\n        </div>\n          <div class=\"search-filter\">\n            <a class=\"mt-3 ms-3 text-start btn-filter-primary\" (click)=\"clearFilters()\">Clear all filters</a>\n          </div>\n        </ng-template>\n        <ng-template pTemplate=\"header\">\n          <tr>\n            <th scope=\"true\" pSortableColumn=\"title\"> {{ 'Crm.OpportunitiesMessage.Title' | transloco }} <p-sortIcon\n                field=\"title\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_contact_id\"> {{ 'Crm.OpportunitiesMessage.Contact' | transloco }}\n              <p-sortIcon field=\"crm_contact_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_account_id\"> {{ 'Crm.OpportunitiesMessage.Account' | transloco }}\n              <p-sortIcon field=\"crm_account_id\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"one_time_amount\"> {{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n              }} <p-sortIcon field=\"one_time_amount\"></p-sortIcon>\n            </th>\n            <th class=\"mrr-header\" scope=\"true\" pSortableColumn=\"monthly_amount\"> {{ 'Crm.OpportunitiesMessage.MRR' | transloco\n              }} <p-sortIcon field=\"monthly_amount\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"win_chances\"> {{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n              <p-sortIcon field=\"win_chances\"></p-sortIcon>\n            </th>\n            <th scope=\"true\" pSortableColumn=\"crm_opportunity_category_ids\"> {{ 'Crm.OpportunitiesMessage.Categories' |\n              transloco }} <p-sortIcon field=\"crm_opportunity_category_ids\"></p-sortIcon>\n            </th>\n              <th scope=\"true\" pSortableColumn=\"crm_opportunity_stage_id\"> {{ 'Crm.OpportunitiesMessage.Stage' | transloco\n                }} <p-sortIcon field=\"crm_opportunity_stage_id\"></p-sortIcon>\n              </th>\n            <th scope=\"true\" pSortableColumn=\"starting_at\"> {{ 'Crm.OpportunitiesMessage.StartingAt' | transloco }}\n              <p-sortIcon field=\"starting_at\"></p-sortIcon>\n            </th>\n            <th class=\"actions-list-two\" scope=\"true\"> {{ 'Label.Actions' | transloco }} </th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-opportunities>\n          <tr>\n            <td data-head=\"Title\">\n              <a [ngbTooltip]=\"opportunities?.title\" *ngIf=\"\n                                    hasAccess ||\n                                    opportunities?.owner_id === userId ||\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.opportunityInfo,\n                                    opportunities.id\n                                ]\">\n                <span>{{ opportunities?.title | textTruncate: 15 }} </span>\n              </a>\n              <a *ngIf=\"\n                                    !hasAccess &&\n                                    opportunities?.owner_id !== userId &&\n                                    checkPermission('Pages.Product.CRM.Role.Admin')\n                                \"> {{ opportunities?.title | textTruncate: 15 }} </a>\n            </td>\n            <td class=\"contactname\" data-head=\"Crm Contact\">\n              <a *ngIf=\"opportunities?.crm_contact_id\" [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.contactInfo,\n                                    opportunities.crm_contact_id.id\n                                ]\">{{ opportunities.crm_contact?.first_name + ' ' +\n                opportunities.crm_contact?.last_name }}</a>\n            </td>\n            <td data-head=\"Account\">\n              <a [routerLink]=\"[\n                                    '/' + subscription?.slug + routers.accountInfo,\n                                    opportunities.crm_account.id\n                                ]\">{{ opportunities.crm_account.name }}</a>\n            </td>\n            <td data-head=\"Amount\"> {{ opportunities.one_time_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"MRR\" class=\"expected-mrr\"> {{ opportunities.monthly_amount / 100 | currency: opportunities?.currency }} </td>\n            <td data-head=\"WinChance\">\n              <span [ngClass]=\"{'text-danger': opportunities.win_chances < 30, 'text-success fw-bold': opportunities.win_chances >70}\">\n                {{ opportunities.win_chances / 100 | percent }}\n              </span>\n               <span class=\"text-danger\"\n                *ngIf=\"opportunities.cancelled\">!Cancelled!</span>\n            </td>\n            <td data-head=\"Categories\">\n              <span *ngFor=\"let category of opportunities?.crm_opportunity_categories\" class=\"badge ms-1\"\n                [appDynamicBadge]=\"{ itemsArray: categories, item: category?.name }\" color=\"blue-grey\">{{ category?.name\n                }}</span>\n            </td>\n            <td data-head=\"Stage\">\n              <span class=\"badge\" [appDynamicBadge]=\"{\n                                    itemsArray: stages,\n                                    item: opportunities?.crm_opportunity_stage?.name\n                                }\" color=\"cyan\">{{ opportunities?.crm_opportunity_stage?.name }}</span>\n            </td>\n            <td data-head=\"Starting At\" [ngClass]=\"{'text-danger': isPastDate(opportunities.starting_at)}\"> {{ opportunities.starting_at | dateFormat }} </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <ng-container *ngIf=\"hasAccess || opportunities?.owner_id === userId\">\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" [routerLink]=\"[\n                                                '/' + subscription?.slug + routers.opportunities,\n                                                opportunities.id\n                                            ]\">\n                      <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                  <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                    <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-3\">\n                      <i class=\"fa fa-trash delete-icon\"   (keydown.enter)=\"onDelete(opportunities.id)\"\n                      (keydown.space)=\"onDelete(opportunities.id)\"\n                      (click)=\"onDelete(opportunities.id)\" aria-hidden=\"true\"></i>\n                    </li>\n                  </ng-container>\n                </ng-container>\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      <div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n        </pw-no-data>\n      </div>\n      <span class=\"total-records-count\" *ngIf=\"data.object_count !== 0\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoOpportunitiesMessage' | transloco\">\n  </pw-no-data>\n</div>\n<ng-container>\n  <div class=\"row mt-5\" *ngIf=\"isLoaded\">\n    <!-- Drill Down -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Watch Closely</h5>\n      <div class=\"primeng-datatable-container table-responsive\" *ngIf=\"opportunitiesInsight?.length\">\n        <p-table class=\"table\" #dt [value]=\"opportunitiesInsight\" [paginator]=\"opportunitiesInsight?.length !== 0\" [rows]=\"PAGE_SIZE\"\n          [totalRecords]=\"opportunitiesInsight.length\" [lazy]=\"true\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Crm.Summary.Account' | transloco }}</th>\n              <th scope=\"true\">{{ 'Crm.Summary.Title' | transloco }}</th>\n              <th scope=\"true\"> {{ 'Crm.OpportunitiesMessage.Reason' | transloco }} </th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-insight>\n            <tr>\n              <td data-head=\"Account\">\n                <a [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, insight.crm_account_id]\" class=\"name-link\">\n                  <span [ngbTooltip]=\"insight?.name\">{{ insight?.name | textTruncate:20 }}</span>\n                </a>\n              </td>\n              <td data-head=\"Title\">\n                <span\n                [ngbTooltip]=\"insight?.title\"\n                container=\"body\"\n                tooltipClass=\"custom-tooltip\"\n                placement=\"bottom\"\n                >\n                {{ insight?.title | textTruncate: 20 }}\n              </span>\n              </td>\n              <td data-head=\"Reason\"> {{ insight.reason }} </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <span class=\"total-records-count\" *ngIf=\"opportunitiesInsight?.length !== 0\">{{ 'Label.Total' | transloco }}: {{ opportunitiesInsight.length }}</span>\n      </div>\n      <div *ngIf=\"opportunitiesInsight?.length === 0\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n    <!-- Geography -->\n    <div class=\"col-12 col-md-6 mb-3 analytics\">\n      <h5 class=\"accordion-heading\">Opportunities Location</h5>\n      <div>\n        <ng-template [ngIf]=\"opportunitiesGeography\">\n          <plotly-plot [data]=\"opportunitiesGeography?.data\" [layout]=\"opportunitiesGeography?.layout\" [config]=\"opportunitiesGeography?.config\" [useResizeHandler]=\"opportunitiesGeography ? true : false\">\n          </plotly-plot>\n        </ng-template>\n      </div>\n      <div *ngIf=\"!opportunitiesGeography\">\n        <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoInsightMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 640px) and (max-width: 768px){.primeng-datatable-container tr td{width:350px}}.search-opportunities-search-input{background-color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i6.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: 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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.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: i11.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i12.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.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: i13.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i13.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i14.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "pipe", type: i3.PercentPipe, name: "percent" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i15.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: i16.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesListComponent, decorators: [{
             type: Component,