npm - @posiwise/smart-crm - Versions diffs - 0.0.47 → 0.0.48 - Mend

@posiwise/smart-crm 0.0.47 → 0.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/esm2022/lib/private/components/smart-crm-opportunities/smart-crm-board/smart-crm-board.component.mjs CHANGED Viewed

@@ -7,8 +7,8 @@ import { ROUTERS } from '../../../../shared/routers/routers';
 import * as i0 from "@angular/core";
 import * as i1 from "@posiwise/smart-crm-shared";
 import * as i2 from "@angular/common";
-import * as i3 from "@posiwise/directives";
-import * as i4 from "@ng-bootstrap/ng-bootstrap";
+import * as i3 from "@ng-bootstrap/ng-bootstrap";
+import * as i4 from "@posiwise/directives";
 import * as i5 from "@angular/router";
 import * as i6 from "primeng/progressspinner";
 import * as i7 from "@angular/cdk/drag-drop";
@@ -227,7 +227,7 @@ export class SmartCrmBoardComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmBoardComponent, deps: [{ token: i1.CrmService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n  </ng-template>\n</div>\n\n<div [ngClass]=\"{'board-container': isLoaded  && hasStages()}\">\n  <div class=\"row mb-4\" *ngIf=\"isLoaded\">\n    <div class=\"col-12 col-sm-4\">\n      <p-dropdown\n        [options]=\"categories\"\n        (onChange)=\"onChangeCategory($event.value)\"\n        optionValue=\"id\"\n        optionLabel=\"name\">\n      </p-dropdown>\n    </div>\n    <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n      <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n      </a>\n    </div>\n  </div>\n  <div *ngIf=\"isLoaded && !hasStages()\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageCategoryMessage' | transloco\">\n    </pw-no-data>\n  </div>\n  <div class=\"crm-board-container\">\n    <div *ngIf=\"isLoaded  && hasStages()\" class=\"list-container d-flex\" cdkDropList [cdkDropListData]=\"opportunitiesGroup\" (cdkDropListDropped)=\"dropGroup($event)\">\n      <div cdkDropListGroup class=\"opportunities-container main-div crm-board-primary\" [class.dynamic-columns-wrapper]=\"group.stage.collapsed\" [style.--border-color]=\"group.stage.color_code\" *ngFor=\"let group of opportunitiesGroup; let i = index\" cdkDrag [cdkDragData]=\"group\">\n        <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n          <span class=\"collapse-column-toggle\">\n            <i class=\"fas\" [ngClass]=\"{'fa-angle-right': !group.stage.collapsed, 'fa-angle-down': group.stage.collapsed}\" (keydown.enter)=\"toggleColumn($event, group)\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n          </span>\n          <p class=\"stage-name mb-0 py-2 ps-4\">\n            <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n          </p>\n          <span class=\"ms-auto me-4 add-opportunity-icon\">\n            <a class=\"text-secondary\" aria-label=\"Add Opportunity\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\" [queryParams]=\"{ stage_id: group?.stage?.id, category: group.stage.crm_opportunity_category_ids }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n          </span>\n        </div>\n        <div class=\"opportunities-list items-container\" cdkDropList [id]=\"group.stage.name\" [cdkDropListData]=\"group.opportunities\" (cdkDropListDropped)=\"dropItem($event)\" [cdkDropListConnectedTo]=\"getConnectedList()\" (scroll)=\"onColumnScroll(i)\">\n          <div *ngFor=\"let item of group.opportunities; let idx = index\">\n            <div class=\"opportunities-box mb-3\" cdkDrag [cdkDragData]=\"item\">\n              <span ngbTooltip=\"Edit\" class=\"float-end edit-button\" [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </span>\n              <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n              <a class=\"mb-1\" [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, item?.crm_account_id ]\">{{ item?.crm_account?.name }}</a>\n              <p class=\"mb-1\">{{ (item?.one_time_amount / 100 | currency: item?.currency) }} One-time / {{ (item?.monthly_amount / 100 | currency: item?.currency) }} MRR</p>\n              <a *ngIf=\"item?.owner[0]?.user_avatar\" [routerLink]=\"['/members', item?.owner[0]?.slug]\">\n                <img alt=\"Member Logo\" [src]=\"item?.owner[0]?.user_avatar[0]?.url\" [width]=\"'30'\" class=\"squared_logo float-end\" [height]=\"'30'\" (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n              </a>\n              <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n              <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n            </div>\n            <div class=\"w-100 text-center mt-3\" *ngIf=\"(idx + 1) % 5 === 0 && group.isLoadingMore\">\n              <div class=\"custom-loader\">\n                <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n                <div class=\"loading-text\">Loading opportunities...</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"footer footer-list\">\n          <div class=\"footer-item\">\n            <span class=\"footer-label\">Total One-Time:</span>\n            <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency: getFirstCurrency(group?.opportunities) }}</span>\n          </div>\n          <div class=\"footer-item\">\n            <span class=\"footer-label\">Total MRR:</span>\n            <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency: getFirstCurrency(group?.opportunities) }}</span>\n          </div>\n          <div class=\"footer-item\">\n            <span class=\"footer-label\">Total Count:</span>\n            <span class=\"footer-value\">{{ group.totals.count }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px;display:flex;flex-direction:column;height:100%}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{flex-grow:1;overflow-y:auto;height:100%}.list-container{overflow:auto;width:100%;display:flex;flex-grow:1;overflow-x:auto;overflow-y:hidden;height:calc(80vh - 140px)}.opportunities-container{margin:0 13px 13px 0;max-width:300px;min-width:300px;vertical-align:top;display:flex;flex-direction:column}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}.crm-board-container{display:flex;flex-direction:column}@media (max-width: 768px){.board-container{height:101vh}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.LazyImgDirective, selector: "img" }, { kind: "directive", type: i4.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { 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: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i10.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmBoardComponent, selector: "pw-smart-crm-board", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n  </ng-template>\n</div>\n\n<div [ngClass]=\"{'board-container': isLoaded  && hasStages()}\">\n  <div class=\"row mb-4\" *ngIf=\"isLoaded\">\n    <div class=\"col-12 col-sm-4\">\n      <p-dropdown\n        [options]=\"categories\"\n        (onChange)=\"onChangeCategory($event.value)\"\n        optionValue=\"id\"\n        optionLabel=\"name\">\n      </p-dropdown>\n    </div>\n    <div class=\"col-12 col-sm-8 mt-2 mt-sm-0 mb-3\">\n      <a class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"add-opportunities\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n        {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}\n      </a>\n    </div>\n  </div>\n  <div *ngIf=\"isLoaded && !hasStages()\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Crm.StageMessages.NoStageCategoryMessage' | transloco\">\n    </pw-no-data>\n  </div>\n  <div class=\"crm-board-container\">\n    <div *ngIf=\"isLoaded  && hasStages()\" class=\"list-container d-flex\" cdkDropList [cdkDropListData]=\"opportunitiesGroup\" (cdkDropListDropped)=\"dropGroup($event)\">\n      <div cdkDropListGroup class=\"opportunities-container main-div crm-board-primary\" [class.dynamic-columns-wrapper]=\"group.stage.collapsed\" [style.--border-color]=\"group.stage.color_code\" *ngFor=\"let group of opportunitiesGroup; let i = index\" cdkDrag [cdkDragData]=\"group\">\n        <div class=\"opportunities-board-title d-flex align-items-center py-1\">\n          <span class=\"collapse-column-toggle\">\n            <i class=\"fas\" [ngClass]=\"{'fa-angle-right': !group.stage.collapsed, 'fa-angle-down': group.stage.collapsed}\" (keydown.enter)=\"toggleColumn($event, group)\" (click)=\"toggleColumn($event, group)\" aria-hidden=\"true\"></i>\n          </span>\n          <p class=\"stage-name mb-0 py-2 ps-4\">\n            <span class=\"badge rounded-pill text-white px-3\" [style.--background-color]=\"group.stage.color_code\">{{ group.stage.name }}</span>\n          </p>\n          <span class=\"ms-auto me-4 add-opportunity-icon\">\n            <a class=\"text-secondary\" aria-label=\"Add Opportunity\" [routerLink]=\"['/' + subscription?.slug + routers.opportunityAdd]\" [queryParams]=\"{ stage_id: group?.stage?.id, category: group.stage.crm_opportunity_category_ids }\"><i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i></a>\n          </span>\n        </div>\n        <div class=\"opportunities-list items-container\" cdkDropList [id]=\"group.stage.name\" [cdkDropListData]=\"group.opportunities\" (cdkDropListDropped)=\"dropItem($event)\" [cdkDropListConnectedTo]=\"getConnectedList()\" (scroll)=\"onColumnScroll(i)\">\n          <div *ngFor=\"let item of group.opportunities; let idx = index\">\n            <div class=\"opportunities-box mb-3\" cdkDrag [cdkDragData]=\"item\">\n              <span ngbTooltip=\"Edit\" class=\"float-end edit-button\" [routerLink]=\"['/' + subscription?.slug + routers.opportunities, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </span>\n              <p class=\"fw-bold mb-1\">{{ item.title }}</p>\n              <a class=\"mb-1\" [routerLink]=\"['/' + subscription?.slug + routers.accountInfo, item?.crm_account_id ]\">{{ item?.crm_account?.name }}</a>\n              <p class=\"mb-1\">{{ (item?.one_time_amount / 100 | currency: item?.currency) }} One-time / {{ (item?.monthly_amount / 100 | currency: item?.currency) }} MRR</p>\n              <a *ngIf=\"item?.owner[0]?.user_avatar\" [routerLink]=\"['/members', item?.owner[0]?.slug]\">\n                <img alt=\"Member Logo\" [src]=\"item?.owner[0]?.user_avatar[0]?.url\" [width]=\"'30'\" class=\"squared_logo float-end\" [height]=\"'30'\" (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n              </a>\n              <p class=\"mb-1\">{{ item.starting_at | dateFormat }}</p>\n              <p class=\"mb-1 badge bg-warning\">{{ item?.crm_opportunity_stage?.name }}</p>\n            </div>\n            <div class=\"w-100 text-center mt-3\" *ngIf=\"(idx + 1) % 5 === 0 && group.isLoadingMore\">\n              <div class=\"custom-loader\">\n                <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n                <div class=\"loading-text\">Loading opportunities...</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"footer footer-list\">\n          <div class=\"footer-item\">\n            <span class=\"footer-label\">Total One-Time:</span>\n            <span class=\"footer-value\">{{ group.totals.oneTime / 100 | currency: getFirstCurrency(group?.opportunities) }}</span>\n          </div>\n          <div class=\"footer-item\">\n            <span class=\"footer-label\">Total MRR:</span>\n            <span class=\"footer-value\">{{ group.totals.mrr / 100 | currency: getFirstCurrency(group?.opportunities) }}</span>\n          </div>\n          <div class=\"footer-item\">\n            <span class=\"footer-label\">Total Count:</span>\n            <span class=\"footer-value\">{{ group.totals.count }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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)}.card{box-shadow:2px 3px gray;padding-bottom:0}.main-div{border:1px solid rgb(175,175,175);border-radius:5px;margin-right:10px;display:flex;flex-direction:column;height:100%}.opportunities-board-title{background-color:#fafafa}.opportunities-board-title h4{color:#fff}.edit-button{cursor:pointer}.items-container{flex-grow:1;overflow-y:auto;height:100%}.list-container{overflow:auto;width:100%;display:flex;flex-grow:1;overflow-x:auto;overflow-y:hidden;height:calc(80vh - 140px)}.opportunities-container{margin:0 13px 13px 0;max-width:300px;min-width:300px;vertical-align:top;display:flex;flex-direction:column}.opportunities-list{background:#fff;border:solid 1px rgb(204,204,204);display:block}.footer-list{background:#fff;border:solid 1px rgb(204,204,204);display:block;min-height:10px}.opportunities-box{align-items:center;background:#fff;border:solid 1px rgb(204,204,204);box-sizing:border-box;color:#000000de;cursor:move;display:block;flex-direction:row;font-size:14px;justify-content:space-between;margin:5px;padding:10px 20px}.cdk-drag-preview{border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.opportunities-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.footer-list.cdk-drop-list-dragging .opportunities-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.add-opportunity-icon{color:#fff;font-size:16px}.collapse-column-toggle{background:#e6dfdf;border-radius:2px;cursor:pointer;font-size:16px;margin-left:10px}.collapse-column-toggle i{padding:0 8px}.dynamic-columns-wrapper{min-width:50px;width:50px!important}.dynamic-columns-wrapper .opportunities-list,.dynamic-columns-wrapper .footer-list{display:none}.dynamic-columns-wrapper .opportunities-board-title{flex-direction:column;height:100%}.dynamic-columns-wrapper .opportunities-board-title .collapse-column-toggle{margin-left:0}.dynamic-columns-wrapper .opportunities-board-title .stage-name{padding-left:0!important;writing-mode:vertical-lr}.dynamic-columns-wrapper .opportunities-board-title .stage-name .badge{padding:8px 4px!important}.dynamic-columns-wrapper .opportunities-board-title .add-opportunity-icon{margin:0 auto!important}.crm-board-success{border-top:3px solid rgb(69,210,146)}.crm-board-success .stage-name .badge{background-color:#45d292}.crm-board-info{border-top:3px solid rgb(28,188,216)}.crm-board-info .stage-name .badge{background-color:#1cbcd8}.crm-board-danger{border-top:3px solid rgb(255,88,107)}.crm-board-danger .stage-name .badge{background-color:#ff586b}.crm-board-warning{border-top:3px solid rgb(251,171,0)}.crm-board-warning .stage-name .badge{background-color:#fbab00}.footer{background-color:#f8f9fa;padding:10px;display:flex;justify-content:space-between;flex-direction:row;align-items:center;border-radius:8px}.footer-item{display:flex;flex-direction:column;align-items:center}.footer-label{font-weight:700;color:#6c757d}.footer-value{color:#212529;font-size:1.1em}.crm-board-primary{border-top:3px solid var(--border-color, var(--tabs_bg))}.crm-board-primary .stage-name .badge{background-color:var(--background-color, var(--tabs_bg))}.crm-board-container{display:flex;flex-direction:column}@media (max-width: 768px){.board-container{height:101vh}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: i4.LazyImgDirective, selector: "img" }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { 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: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i10.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmBoardComponent, decorators: [{
             type: Component,

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

@@ -11,12 +11,12 @@ import * as i2 from "@posiwise/common-services";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/forms";
 import * as i5 from "@posiwise/directives";
-import * as i6 from "@ng-bootstrap/ng-bootstrap";
-import * as i7 from "primeng/multiselect";
-import * as i8 from "primeng/progressspinner";
-import * as i9 from "primeng/autocomplete";
-import * as i10 from "@posiwise/shared-components";
-import * as i11 from "primeng/dropdown";
+import * as i6 from "primeng/multiselect";
+import * as i7 from "primeng/progressspinner";
+import * as i8 from "primeng/autocomplete";
+import * as i9 from "@posiwise/shared-components";
+import * as i10 from "primeng/dropdown";
+import * as i11 from "@ng-bootstrap/ng-bootstrap";
 import * as i12 from "@jsverse/transloco";
 export class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
     /** Function to get form controls */
@@ -367,7 +367,7 @@ export class SmartCrmOpportunitiesDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesDetailsComponent, selector: "pw-smart-crm-opportunities-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ isLoading ? '': (data?.name ? data?.name : ('Label.AddNew' | transloco)) }}</span>\n  </h3>\n</div>\n<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\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"searchAccount($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"message\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</label>\n        <p-autoComplete [suggestions]=\"filteredUsers\"\n          formControlName=\"crm_contact_id\"\n          dataKey=\"id\"\n          field=\"displayName\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search contact\"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.OneTimeAmount' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.MRR' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MRR' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n      </div>\n\n      <!-- Features -->\n      <div class=\"mb-3 col-12 col-md-4\"  *rbacAllow=\"'Pages.Alpha'\">\n        <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n          <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n        </label>\n        <p-multiSelect [options]=\"featureKeys\"\n          placeholder=\"Select feature keys\"\n          [showHeader]=\"true\"\n          [showToggleAll]=\"true\"\n          formControlName=\"feature_keys\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"win_chances\"\n            [options]=\"winChance\"\n            [placeholder]=\"'Select Win Chance'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Currency\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"currency\"\n            [options]=\"currencies\"\n            [placeholder]=\"'Select Currency'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n     <div class=\"col-12 col-md-4 won-control\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding won-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control won-title\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n        </div>\n      </div>\n\n\n      <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n            <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n          </label>\n          <p-multiSelect [options]=\"categories\"\n            placeholder=\"Select Categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"TrialStartField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n          name=\"trial_start_at\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"trial_start_at\"\n              ngbDatepicker\n              #c=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"c.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"LostField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n          name=\"lost_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"lost_reason\"\n            id=\"lost_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"WonField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n          name=\"won_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"won_reason\"\n            id=\"won_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Stage\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n            </span>\n          </label>\n\n          <p-dropdown\n  [options]=\"stages\"\n  optionLabel=\"name\"\n  optionValue=\"id\"\n  formControlName=\"crm_opportunity_stage_id\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\"\n  placeholder=\"Select Stage\">\n</p-dropdown>\n\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.StartingAt' | transloco\n                        }}</span></label>\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"starting_at\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['starting_at'].errors }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-12\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n        name=\"description\"\n        [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n          <textarea rows=\"10\"\n            type=\"text\"\n            class=\"form-control description-field\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.won-title{margin-top:2px}.won-tooltip{left:0}::ng-deep .p-multiselect.p-component{height:33.5px!important}::ng-deep .p-multiselect-label{display:flex;align-items:center;height:100%}.won-control .info-circle .tooltiptext:after{left:25px!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i7.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: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i10.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i11.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: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesDetailsComponent, selector: "pw-smart-crm-opportunities-details", usesInheritance: true, ngImport: i0, template: "<div class=\"me-auto col-xs-6\">\n  <a aria-label=\"Navigate to Target\"\n    (click)=\"back()\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"m-subheader__title m-subheader__title--separator\">\n    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:\n      {{ isLoading ? '': (data?.name ? data?.name : ('Label.AddNew' | transloco)) }}</span>\n  </h3>\n</div>\n<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\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-8\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Title' | transloco\"\n          name=\"title\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"Account\">{{ 'Crm.OpportunitiesMessage.Account' | transloco\n                    }}<span class=\"text-danger required-icon\">*</span></label>\n        <p-autoComplete [suggestions]=\"filteredAccounts\"\n          formControlName=\"crm_account_id\"\n          dataKey=\"id\"\n          field=\"name\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"searchAccount($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search accounts\"\n          [inputStyle]=\"\n                        submitted && f['crm_account_id'].errors\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"ui-fluid skills-modal col-sm-4\">\n        <label class=\"mb-2\" for=\"message\">{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</label>\n        <p-autoComplete [suggestions]=\"filteredUsers\"\n          formControlName=\"crm_contact_id\"\n          dataKey=\"id\"\n          field=\"displayName\"\n          [dropdown]=\"true\"\n          (completeMethod)=\"search($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search contact\"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.OneTimeAmount' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.MRR' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.MRR' | transloco\n                        }}</span></label>\n          <input type=\"number\"\n            numbersOnly\n            class=\"form-control\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n      </div>\n\n      <!-- Features -->\n      <div class=\"mb-3 col-12 col-md-4\"  *rbacAllow=\"'Pages.Alpha'\">\n        <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}\n          <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>\n        </label>\n        <p-multiSelect [options]=\"featureKeys\"\n          placeholder=\"Select feature keys\"\n          [showHeader]=\"true\"\n          [showToggleAll]=\"true\"\n          formControlName=\"feature_keys\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}\n            <span class=\"text-danger required-icon\">*</span>\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"win_chances\"\n            [options]=\"winChance\"\n            [placeholder]=\"'Select Win Chance'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['win_chances'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Currency\">{{ 'Crm.OpportunitiesMessage.Currency' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.Currency' | transloco }}\n            </span>\n          </label>\n          <p-dropdown\n            formControlName=\"currency\"\n            [options]=\"currencies\"\n            [placeholder]=\"'Select Currency'\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n          </p-dropdown>\n        </div>\n      </div>\n\n     <div class=\"col-12 col-md-4 won-control\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding won-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}\n            </span>\n          </label>\n          <input type=\"number\"\n            NumberDirective\n            class=\"form-control won-title\"\n            formControlName=\"won\"\n            id=\"won\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won'].errors }\" />\n        </div>\n      </div>\n\n\n      <div class=\"col-12 col-sm-4\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.Categories' | transloco}}\n            <span class=\"tooltiptext gradient-custom-branding feature-tooltip\">{{ 'Crm.OpportunitiesMessage.Tooltip.Category' | transloco }}</span>\n          </label>\n          <p-multiSelect [options]=\"categories\"\n            placeholder=\"Select Categories\"\n            (onChange)=\"onCategoryChange($event)\"\n            formControlName=\"crm_opportunity_category_ids\"\n          appendTo=\"body\"></p-multiSelect>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"TrialStartField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\"\n          name=\"trial_start_at\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.TrialStartAt' | transloco\">\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"trial_start_at\"\n              ngbDatepicker\n              #c=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"c.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"LostField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\"\n          name=\"lost_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.LostReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"lost_reason\"\n            id=\"lost_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['lost_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-sm-4\"\n        *ngIf=\"WonField\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\"\n          name=\"won_reason\"\n          [errorMsg]=\"'Crm.OpportunitiesMessage.WonReason' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"won_reason\"\n            id=\"won_reason\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['won_reason'].errors }\" />\n        </pw-input-container>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Stage\">{{ 'Crm.OpportunitiesMessage.Stage' | transloco }}\n            <span class=\"tooltiptext gradient-custom-branding\">{{ 'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco }}\n            </span>\n          </label>\n\n          <p-dropdown\n  [options]=\"stages\"\n  optionLabel=\"name\"\n  optionValue=\"id\"\n  formControlName=\"crm_opportunity_stage_id\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }\"\n  placeholder=\"Select Stage\">\n</p-dropdown>\n\n        </div>\n      </div>\n\n      <div class=\"col-12 col-md-4\">\n        <div class=\"mb-3\">\n          <label class=\"info-circle mb-2\" for=\"Message\">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco\n                        }}<span class=\"text-danger required-icon\">*</span><span class=\"tooltiptext gradient-custom-branding\">{{\n                            'Crm.OpportunitiesMessage.Tooltip.StartingAt' | transloco\n                        }}</span></label>\n          <div class=\"input-group\">\n            <input class=\"form-control\"\n              placeholder=\"dd-mmm-yyyy\"\n              formControlName=\"starting_at\"\n              ngbDatepicker\n              #d=\"ngbDatepicker\"\n              [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n              [maxDate]=\"{ day: 31, month: 12, year: 2050 }\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['starting_at'].errors }\" />\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-primary\"\n                (click)=\"d.toggle()\"\n                type=\"button\">\n                <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col-12 col-sm-12\">\n        <pw-input-container [label]=\"'Crm.OpportunitiesMessage.Description' | transloco\"\n        name=\"description\"\n        [errorMsg]=\"'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco\">\n          <textarea rows=\"10\"\n            type=\"text\"\n            class=\"form-control description-field\"\n            formControlName=\"description\"\n            id=\"description\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\"></textarea>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 text-end mt-3\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          {{ 'Button.Cancel' | transloco }}\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"buttonBusy\"\n          class=\"btn btn-primary\"\n          [disabled]=\"form.invalid\">\n          {{ 'Button.Submit' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", styles: [".vertical-bottom{vertical-align:text-bottom}.cancel-button{float:right}.feature-tooltip{margin-right:-15px}.won-title{margin-top:2px}.won-tooltip{left:0}::ng-deep .p-multiselect.p-component{height:33.5px!important}::ng-deep .p-multiselect-label{display:flex;align-items:center;height:100%}.won-control .info-circle .tooltiptext:after{left:25px!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i5.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i5.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.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: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i8.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i10.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: i11.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: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesDetailsComponent, decorators: [{
             type: Component,

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

@@ -465,7 +465,7 @@ export class SmartCrmOpportunitiesInfoComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartCrmOpportunitiesInfoComponent, deps: [{ token: i0.Injector }, { token: i1.CrmService }, { token: i2.NgbModal }, { token: i3.AuthService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesInfoComponent, selector: "pw-smart-crm-opportunities-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <div class=\"me-auto mb-0\">\n      <h2 class=\"mb-0\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Opportunity Info\n      </h2>\n    </div>\n  </div>\n  <div class=\"col-12 col-md-4\">\n    <div class=\"user-info p-3 card pb-0 h-auto\">\n      <div class=\"mb-2 text-center\">\n        <a class=\"profile-image\">\n          <img width=\"100\"\n            height=\"100\"\n            class=\"rounded-circle img-border width-100\"\n            alt=\"user\"\n            src=\"assets/img/icons/male.png\" />\n        </a>\n      </div>\n      <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n        <h4 class=\"d-inline-block\">\n          About <span *ngIf=\"data?.id\">{{ data.title }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"\n                        isFormEdit = !isFormEdit; getAccountsBySubscription(); getAllContacts()\n                    \">Edit</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\" for=\"Title\">{{\n                        'Crm.OpportunitiesMessage.Title' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\"\n          *ngIf=\"data?.crm_contact_id\">\n          <label class=\"label mb-2\" for=\"Contact\">{{\n                        'Crm.OpportunitiesMessage.Contact' | transloco\n                    }}</label>\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.contactInfo,\n                            data.crm_contact_id\n                        ]\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.crm_contact_id\">{{ data?.crm_contact?.first_name }} {{ data?.crm_contact?.last_name }}</a>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_contact_id\"\n            [suggestions]=\"filteredContacts\"\n            formControlName=\"crm_contact_id\"\n            dataKey=\"id\"\n            field=\"displayName\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"onContactSearch($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search contacts\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\" for=\"Account\">{{\n                        'Crm.OpportunitiesMessage.Account' | transloco\n                    }}</label>\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            data.crm_account_id\n                        ]\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.crm_account_id\">{{ data?.crm_account?.name }}</a>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_account_id\"\n            [suggestions]=\"filteredAccounts\"\n            formControlName=\"crm_account_id\"\n            dataKey=\"id\"\n            field=\"name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"accountSearch($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search accounts\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\" for=\"OneTimeAmount\">{{\n                        'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                    }}</label>\n          <span class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</span>\n          <input *ngIf=\"!isFormEdit || !data?.one_time_amount\"\n            type=\"number\"\n            numbersOnly\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\" for=\"monthlyAmount\">{{\n                        'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                    }}</label>\n          <span class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</span>\n          <input *ngIf=\"!isFormEdit || !data?.monthly_amount\"\n            type=\"number\"\n            numbersOnly\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n        <div *ngIf=\"!isFormEdit\"\n          class=\"text-end form-action-buttons\">\n          <input type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"isFormEdit = !isFormEdit; getOpportunityDetails()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateOpportunities()\" />\n        </div>\n      </form>\n    </div>\n  </div>\n  <div class=\"col-12 col-md-8\">\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li [ngbNavItem]=\"1\">\n        <a ngbNavLink>Notes</a>\n        <ng-template ngbNavContent>\n          <form [formGroup]=\"actionControls\"\n            (ngSubmit)=\"onCommentSave()\">\n            <textarea class=\"form-control\"\n              formControlName=\"comment\"\n              rows=\"6\"></textarea>\n            <p class=\"text-danger\"\n              *ngIf=\"\n                                actionControls.get('comment').touched &&\n                                actionControls.get('comment').invalid\n                            \">\n              Note Required\n            </p>\n            <div *ngIf=\"actions?.length\"\n              class=\"d-block clear-both pt-3\">\n              <ng-container *ngFor=\"let action of actions; index as i\">\n                <button *ngIf=\"action.visible\"\n                  type=\"button\"\n                  [class.active]=\"\"\n                  class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n                  (click)=\"showDatePicker($event, action.id); d.toggle()\">\n                  {{ action.name }}\n                </button>\n              </ng-container>\n              <div class=\"text-danger\"\n                *ngIf=\"submitAction && actionFormControls.crm_action_id.invalid\">\n                Please select an action\n              </div>\n              <div class=\"row mt-3\">\n                <div class=\"col-12 col-sm-4\">\n                  <div class=\"input-group\">\n                    <input class=\"form-control\"\n                      placeholder=\"dd-mmm-yyyy\"\n                      formControlName=\"when\"\n                      ngbDatepicker\n                      #d=\"ngbDatepicker\"\n                      (click)=\"d.toggle()\" />\n                  </div>\n                </div>\n                <div class=\"col-sm-4 pe-0 completed-toggle\">\n                  <div class=\"mb-3\">\n                    <ui-switch checkedLabel=\"completed\"\n                      uncheckedLabel=\"open\"\n                      formControlName=\"completed\"\n                      name=\"completed\">\n                    </ui-switch>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"float-end\">\n              <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                >Submit Note</button>\n              <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n                (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n            </div>\n            <div *ngIf=\"buttonDisable\"\n              class=\"no-actions pt-4\">\n              <pw-no-data [withImage]=\"true\" [message]=\"\n                                    'Crm.OpportunitiesMessage.NoActionsInOpportunitiesInfoMessage'\n                                        | transloco\n                                \">\n              </pw-no-data>\n            </div>\n          </form>\n          <div class=\"w-100 text-center mt-3\"\n            *ngIf=\"!isLoaded\">\n            <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n          </div>\n          <div *ngIf=\"!opportunitiesComments?.length && isLoaded\"\n            class=\"no-actions pt-3\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"opportunitiesComments?.length\"\n            id=\"timeline\"\n            class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n            <ul class=\"timeline\">\n              <li class=\"timeline-line\"></li>\n            </ul>\n            <ul class=\"timeline\">\n              <li class=\"timeline-line\"></li>\n              <li class=\"timeline-item\"\n                [ngClass]=\"{ 'mt-5': odd }\"\n                *ngFor=\"\n                                    let item of opportunitiesComments;\n                                    index as i;\n                                    let odd = odd;\n                                    let even = even\n                                \">\n                <div class=\"timeline-badge\">\n                  <span class=\"bg-red bg-lighten-1\">\n                    <span class=\"timeline-year\">\n                      <span class=\"d-block date-year\">{{\n                                                item.when | date: 'medium' | slice: 0:3\n                                            }}</span>\n                      <span>{{ item.year }}</span>\n                    </span>\n                  </span>\n                </div>\n                <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                  <div class=\"card-header py-4\">\n                    <div class=\"mb-0 clearfix\">\n                      <textarea type=\"text\"\n                        name=\"comment\"\n                        class=\"comment-field form-control p-0\"\n                        [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                      <p class=\"float-start mb-0\"\n                        *ngIf=\"!showFullComment || item.id !== commentId\">\n                        {{ item.comment | slice: 0:170\n                                                }}<a *ngIf=\"item.comment.length > 170\"\n                          class=\"text-secondary\"\n                          (click)=\"\n                                                        showFullComment = true; commentId = item.id\n                                                    \">...show more</a>\n                      </p>\n                      <p class=\"float-start mb-0\"\n                        *ngIf=\"showFullComment && item.id === commentId\">\n                        {{ item.comment }}\n                        <a *ngIf=\"\n                                                        item.comment.length > 170 && showFullComment\n                                                    \"\n                          (click)=\"showFullComment = false\"\n                          class=\"text-secondary\">...show less</a>\n                      </p>\n                      <button class=\"btn btn-md edit-btn float-end py-0\"\n                        (click)=\"showEditControls($event)\"\n                        *ngIf=\"userId === item.owner_id || hasAccess\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </button>\n                    </div>\n                    <div class=\"card-subtitle text-muted my-0 clearfix\">\n                      <div class=\"float-start\">\n                        <span *ngIf=\"!updating || actionId !== item.id\"\n                          class=\"font-small-3\">\n                          {{ item.when }}</span>\n                        <input *ngIf=\"updating && actionId === item.id\"\n                          placeholder=\"dd-mmm-yyyy\"\n                          value=\"{{ item.when }}\"\n                          ngbDatepicker\n                          #d=\"ngbDatepicker\"\n                          (focus)=\"d.toggle()\"\n                          (dateSelect)=\"onDateSelect($event, item)\" />\n                      </div>\n                      <button type=\" button\"\n                        class=\"btn btn-sm float-end when-btn py-0\"\n                        *ngIf=\"userId === item.owner_id || hasAccess\"\n                        (click)=\"showDatePickerUpdate(item.id)\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </button>\n                    </div>\n                    <p [class.text-danger]=\"!item.color\"\n                      *ngIf=\"!item.cancelled && !item.completed\"\n                      class=\"mb-0\">\n                      {{ item.due }}\n                    </p>\n                    <p>\n                      {{\n                                                item?.owner?.first_name +\n                                                    ' ' +\n                                                    item?.owner?.last_name\n                                            }}\n                    </p>\n                    <span class=\"badge bg-primary\">{{\n                                            item?.crm_action?.name\n                                        }}</span>\n                    <span *ngIf=\"\n                                                !item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      class=\"badge bg-success ms-2\">Open</span>\n                    <a *ngIf=\"\n                                                !item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      ngbTooltip=\"Set as completed\"\n                      aria-label=\"Set as completed\"\n                      class=\"me-3 ms-3\"\n                      href=\"javascript:void(0);\"\n                      (click)=\"\n                                                setAsCompletedOrUncompleted(\n                                                    item.id,\n                                                    item,\n                                                    item.completed\n                                                )\n                                            \">\n                      <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n                    </a>\n                    <a *ngIf=\"\n                                                !item.cancelled &&\n                                                !item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      ngbTooltip=\"Set as cancelled\"\n                      aria-label=\"Set as cancelled\"\n                      href=\"javascript:void(0);\"\n                      (click)=\"setAsCancelled(item.id, item)\">\n                      <i\n                                                class=\"fa fa-times delete-icon\"\n                                                aria-hidden=\"true\"\n                                            ></i>\n                    </a>\n                    <a *ngIf=\"\n                                                item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      ngbTooltip=\"Set as UnCompleted\"\n                      aria-label=\"Set as UnCompleted\"\n                      href=\"javascript:void(0);\"\n                      (click)=\"\n                                                setAsCompletedOrUncompleted(\n                                                    item.id,\n                                                    item,\n                                                    item.completed\n                                                )\n                                            \"\n                      class=\"ms-2\">\n                      <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n                    </a>\n                    <div class=\"control-btns mt-3 text-end\">\n                      <button type=\"button\"\n                        class=\"btn btn-sm btn-outline-default me-2\"\n                        (click)=\"showEditControls(undefined)\">\n                        Cancel\n                      </button>\n                      <button class=\"btn btn-sm btn-primary\"\n                        type=\"button\"\n                        (click)=\"updateComment(item)\">\n                        Submit\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Versioning</a>\n        <ng-template ngbNavContent>\n          <div *ngFor=\"let version of opportunitiesVersioning\">\n            <p>\n              <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n                [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n              | <strong>Created at: </strong>{{ version.created_at }}<br />\n              <strong>Object: </strong>{{ version.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"opportunitiesVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoVersionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"3\">\n        <a ngbNavLink>Files</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-company-files [contactId]=\"contactId\"\n            [accountId]=\"accountId\"\n            [opportunityId]=\"opportunitiesId\">\n          </pw-smart-crm-company-files>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\n                  <input type=\"file\"\n                    ngFileSelect\n                    [options]=\"options\"\n                    (uploadOutput)=\"onUploadOutput($event)\"\n                    [uploadInput]=\"uploadInput\"\n                    multiple />\n                  browse\n                </label>\n                to upload.\n              </p>\n            </div>\n            <div class=\"upload-item\"\n              *ngFor=\"let f of files; let i = index\">\n              <div class=\"upload-item-content\">\n                <div class=\"filename\">\n                  <div class=\"filename-left\">\n                    <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                    <span>{{ f.name }}</span>\n                  </div>\n                </div>\n                <div class=\"progress-content\">\n                  <div class=\"progress\">\n                    <span class=\"bar\"\n                      [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                      [class.is-done]=\"f['uploaded']\"></span>\n                  </div>\n                </div>\n                <div class=\"progress-text-content\">\n                  <span class=\"progress-text\"\n                    [class.is-done]=\"f['uploaded']\">\n                    <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n                    </span>\n                    <span *ngIf=\"f['uploaded']\">100 %</span>\n                    <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n                    <span *ngIf=\"f['uploaded']\">Done</span>\n                  </span>\n                  <span class=\"speed-and-eta-text\"\n                    *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n                    <span>{{ f.progress?.data?.speedHuman }} </span>\n                    <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.action-btn.active{color:#fff!important;background-color:var(--first)}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.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: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i7.LazyImgDirective, selector: "img" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: 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: "directive", type: i2.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: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: i13.SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i4.JsonPipe, name: "json" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i15.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SmartCrmOpportunitiesInfoComponent, selector: "pw-smart-crm-opportunities-info", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-0\">\n    <div class=\"me-auto mb-0\">\n      <h2 class=\"mb-0\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        Opportunity Info\n      </h2>\n    </div>\n  </div>\n  <div class=\"col-12 col-md-4\">\n    <div class=\"user-info p-3 card pb-0 h-auto\">\n      <div class=\"mb-2 text-center\">\n        <a class=\"profile-image\">\n          <img width=\"100\"\n            height=\"100\"\n            class=\"rounded-circle img-border width-100\"\n            alt=\"user\"\n            src=\"assets/img/icons/male.png\" />\n        </a>\n      </div>\n      <div class=\"mb-4 d-flex justify-content-between align-items-center\">\n        <h4 class=\"d-inline-block\">\n          About <span *ngIf=\"data?.id\">{{ data.title }}</span>\n        </h4>\n        <a href=\"javascript:void(0);\"\n          *ngIf=\"isFormEdit\"\n          class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"\n                        isFormEdit = !isFormEdit; getAccountsBySubscription(); getAllContacts()\n                    \">Edit</a>\n      </div>\n      <form [formGroup]=\"aboutControls\"\n        [class.isDisabled]=\"isFormEdit\">\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\" for=\"Title\">{{\n                        'Crm.OpportunitiesMessage.Title' | transloco\n                    }}</label>\n          <input type=\"text\"\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"title\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\"\n          *ngIf=\"data?.crm_contact_id\">\n          <label class=\"label mb-2\" for=\"Contact\">{{\n                        'Crm.OpportunitiesMessage.Contact' | transloco\n                    }}</label>\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.contactInfo,\n                            data.crm_contact_id\n                        ]\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.crm_contact_id\">{{ data?.crm_contact?.first_name }} {{ data?.crm_contact?.last_name }}</a>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_contact_id\"\n            [suggestions]=\"filteredContacts\"\n            formControlName=\"crm_contact_id\"\n            dataKey=\"id\"\n            field=\"displayName\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"onContactSearch($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search contacts\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3 ui-fluid skills-modal\">\n          <label class=\"label mb-2\" for=\"Account\">{{\n                        'Crm.OpportunitiesMessage.Account' | transloco\n                    }}</label>\n          <a [routerLink]=\"[\n                            '/' + subscription?.slug + routers.accountInfo,\n                            data.crm_account_id\n                        ]\"\n            class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.crm_account_id\">{{ data?.crm_account?.name }}</a>\n          <p-autoComplete *ngIf=\"!isFormEdit || !data?.crm_account_id\"\n            [suggestions]=\"filteredAccounts\"\n            formControlName=\"crm_account_id\"\n            dataKey=\"id\"\n            field=\"name\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"accountSearch($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search accounts\"\n            [multiple]=\"false\">\n          </p-autoComplete>\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\" for=\"OneTimeAmount\">{{\n                        'Crm.OpportunitiesMessage.OneTimeAmount' | transloco\n                    }}</label>\n          <span class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.one_time_amount\">{{ data?.one_time_amount | currency }}</span>\n          <input *ngIf=\"!isFormEdit || !data?.one_time_amount\"\n            type=\"number\"\n            numbersOnly\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"one_time_amount\"\n            id=\"one_time_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['one_time_amount'].errors }\" />\n        </div>\n        <div class=\"mb-3\">\n          <label class=\"label mb-0\" for=\"monthlyAmount\">{{\n                        'Crm.OpportunitiesMessage.MonthlyAmount' | transloco\n                    }}</label>\n          <span class=\"form-control d-block pb-2 ps-1 user-value\"\n            *ngIf=\"isFormEdit && data?.monthly_amount\">{{ data?.monthly_amount | currency }}</span>\n          <input *ngIf=\"!isFormEdit || !data?.monthly_amount\"\n            type=\"number\"\n            numbersOnly\n            class=\"form-control rounded-0 ps-1 user-value\"\n            formControlName=\"monthly_amount\"\n            id=\"monthly_amount\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['monthly_amount'].errors }\" />\n        </div>\n        <div *ngIf=\"!isFormEdit\"\n          class=\"text-end form-action-buttons\">\n          <input type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"isFormEdit = !isFormEdit; getOpportunityDetails()\"\n            value=\"Cancel\" />\n          <input type=\"button\"\n            class=\"btn btn-primary ms-3\"\n            value=\"Submit\"\n            (click)=\"updateOpportunities()\" />\n        </div>\n      </form>\n    </div>\n  </div>\n  <div class=\"col-12 col-md-8\">\n    <ul ngbNav\n      #nav=\"ngbNav\"\n      class=\"nav-tabs\">\n      <li [ngbNavItem]=\"1\">\n        <a ngbNavLink>Notes</a>\n        <ng-template ngbNavContent>\n          <form [formGroup]=\"actionControls\"\n            (ngSubmit)=\"onCommentSave()\">\n            <textarea class=\"form-control\"\n              formControlName=\"comment\"\n              rows=\"6\"></textarea>\n            <p class=\"text-danger\"\n              *ngIf=\"\n                                actionControls.get('comment').touched &&\n                                actionControls.get('comment').invalid\n                            \">\n              Note Required\n            </p>\n            <div *ngIf=\"actions?.length\"\n              class=\"d-block clear-both pt-3\">\n              <ng-container *ngFor=\"let action of actions; index as i\">\n                <button *ngIf=\"action.visible\"\n                  type=\"button\"\n                  [class.active]=\"\"\n                  class=\"btn btn-sm me-2 btn-outline-primary mb-2 action-btn\"\n                  (click)=\"showDatePicker($event, action.id); d.toggle()\">\n                  {{ action.name }}\n                </button>\n              </ng-container>\n              <div class=\"text-danger\"\n                *ngIf=\"submitAction && actionFormControls.crm_action_id.invalid\">\n                Please select an action\n              </div>\n              <div class=\"row mt-3\">\n                <div class=\"col-12 col-sm-4\">\n                  <div class=\"input-group\">\n                    <input class=\"form-control\"\n                      placeholder=\"dd-mmm-yyyy\"\n                      formControlName=\"when\"\n                      ngbDatepicker\n                      #d=\"ngbDatepicker\"\n                      (click)=\"d.toggle()\" />\n                  </div>\n                </div>\n                <div class=\"col-sm-4 pe-0 completed-toggle\">\n                  <div class=\"mb-3\">\n                    <ui-switch checkedLabel=\"completed\"\n                      uncheckedLabel=\"open\"\n                      formControlName=\"completed\"\n                      name=\"completed\">\n                    </ui-switch>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"float-end\">\n              <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonDisable\"\n                class=\"btn btn-primary mt-2 mb-2 float-end\"\n                >Submit Note</button>\n              <a class=\"btn btn-outline-primary mt-2 mb-2 me-0 me-sm-2 float-end\"\n                (click)=\"openModal(content)\">{{ 'Upload file' | transloco }}</a>\n            </div>\n            <div *ngIf=\"buttonDisable\"\n              class=\"no-actions pt-4\">\n              <pw-no-data [withImage]=\"true\" [message]=\"\n                                    'Crm.OpportunitiesMessage.NoActionsInOpportunitiesInfoMessage'\n                                        | transloco\n                                \">\n              </pw-no-data>\n            </div>\n          </form>\n          <div class=\"w-100 text-center mt-3\"\n            *ngIf=\"!isLoaded\">\n            <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n          </div>\n          <div *ngIf=\"!opportunitiesComments?.length && isLoaded\"\n            class=\"no-actions pt-3\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoActionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n          <div *ngIf=\"opportunitiesComments?.length\"\n            id=\"timeline\"\n            class=\"pt-3 clear-both timeline-center timeline-wrapper\">\n            <ul class=\"timeline\">\n              <li class=\"timeline-line\"></li>\n            </ul>\n            <ul class=\"timeline\">\n              <li class=\"timeline-line\"></li>\n              <li class=\"timeline-item\"\n                [ngClass]=\"{ 'mt-5': odd }\"\n                *ngFor=\"\n                                    let item of opportunitiesComments;\n                                    index as i;\n                                    let odd = odd;\n                                    let even = even\n                                \">\n                <div class=\"timeline-badge\">\n                  <span class=\"bg-red bg-lighten-1\">\n                    <span class=\"timeline-year\">\n                      <span class=\"d-block date-year\">{{\n                                                item.when | date: 'medium' | slice: 0:3\n                                            }}</span>\n                      <span>{{ item.year }}</span>\n                    </span>\n                  </span>\n                </div>\n                <div class=\"timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static\">\n                  <div class=\"card-header py-4\">\n                    <div class=\"mb-0 clearfix\">\n                      <textarea type=\"text\"\n                        name=\"comment\"\n                        class=\"comment-field form-control p-0\"\n                        [(ngModel)]=\"item.comment\">{{ item.comment }}</textarea>\n                      <p class=\"float-start mb-0\"\n                        *ngIf=\"!showFullComment || item.id !== commentId\">\n                        {{ item.comment | slice: 0:170\n                                                }}<a *ngIf=\"item.comment.length > 170\"\n                          class=\"text-secondary\"\n                          (click)=\"\n                                                        showFullComment = true; commentId = item.id\n                                                    \">...show more</a>\n                      </p>\n                      <p class=\"float-start mb-0\"\n                        *ngIf=\"showFullComment && item.id === commentId\">\n                        {{ item.comment }}\n                        <a *ngIf=\"\n                                                        item.comment.length > 170 && showFullComment\n                                                    \"\n                          (click)=\"showFullComment = false\"\n                          class=\"text-secondary\">...show less</a>\n                      </p>\n                      <button class=\"btn btn-md edit-btn float-end py-0\"\n                        (click)=\"showEditControls($event)\"\n                        *ngIf=\"userId === item.owner_id || hasAccess\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </button>\n                    </div>\n                    <div class=\"card-subtitle text-muted my-0 clearfix\">\n                      <div class=\"float-start\">\n                        <span *ngIf=\"!updating || actionId !== item.id\"\n                          class=\"font-small-3\">\n                          {{ item.when }}</span>\n                        <input *ngIf=\"updating && actionId === item.id\"\n                          placeholder=\"dd-mmm-yyyy\"\n                          value=\"{{ item.when }}\"\n                          ngbDatepicker\n                          #d=\"ngbDatepicker\"\n                          (focus)=\"d.toggle()\"\n                          (dateSelect)=\"onDateSelect($event, item)\" />\n                      </div>\n                      <button type=\" button\"\n                        class=\"btn btn-sm float-end when-btn py-0\"\n                        *ngIf=\"userId === item.owner_id || hasAccess\"\n                        (click)=\"showDatePickerUpdate(item.id)\">\n                        <i\n                                                    class=\"fa fa-edit edit-icon\"\n                                                    aria-hidden=\"true\"\n                                                ></i>\n                      </button>\n                    </div>\n                    <p [class.text-danger]=\"!item.color\"\n                      *ngIf=\"!item.cancelled && !item.completed\"\n                      class=\"mb-0\">\n                      {{ item.due }}\n                    </p>\n                    <p>\n                      {{\n                                                item?.owner?.first_name +\n                                                    ' ' +\n                                                    item?.owner?.last_name\n                                            }}\n                    </p>\n                    <span class=\"badge bg-primary\">{{\n                                            item?.crm_action?.name\n                                        }}</span>\n                    <span *ngIf=\"\n                                                !item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      class=\"badge bg-success ms-2\">Open</span>\n                    <a *ngIf=\"\n                                                !item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      ngbTooltip=\"Set as completed\"\n                      aria-label=\"Set as completed\"\n                      class=\"me-3 ms-3\"\n                      href=\"javascript:void(0);\"\n                      (click)=\"\n                                                setAsCompletedOrUncompleted(\n                                                    item.id,\n                                                    item,\n                                                    item.completed\n                                                )\n                                            \">\n                      <i class=\"fa fa-tasks completed\" aria-hidden=\"true\"></i>\n                    </a>\n                    <a *ngIf=\"\n                                                !item.cancelled &&\n                                                !item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      ngbTooltip=\"Set as cancelled\"\n                      aria-label=\"Set as cancelled\"\n                      href=\"javascript:void(0);\"\n                      (click)=\"setAsCancelled(item.id, item)\">\n                      <i\n                                                class=\"fa fa-times delete-icon\"\n                                                aria-hidden=\"true\"\n                                            ></i>\n                    </a>\n                    <a *ngIf=\"\n                                                item.completed &&\n                                                (userId === item.owner_id || hasAccess)\n                                            \"\n                      ngbTooltip=\"Set as UnCompleted\"\n                      aria-label=\"Set as UnCompleted\"\n                      href=\"javascript:void(0);\"\n                      (click)=\"\n                                                setAsCompletedOrUncompleted(\n                                                    item.id,\n                                                    item,\n                                                    item.completed\n                                                )\n                                            \"\n                      class=\"ms-2\">\n                      <i class=\"far fa-window-close\" aria-hidden=\"true\"></i>\n                    </a>\n                    <div class=\"control-btns mt-3 text-end\">\n                      <button type=\"button\"\n                        class=\"btn btn-sm btn-outline-default me-2\"\n                        (click)=\"showEditControls(undefined)\">\n                        Cancel\n                      </button>\n                      <button class=\"btn btn-sm btn-primary\"\n                        type=\"button\"\n                        (click)=\"updateComment(item)\">\n                        Submit\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              </li>\n            </ul>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"2\">\n        <a ngbNavLink>Versioning</a>\n        <ng-template ngbNavContent>\n          <div *ngFor=\"let version of opportunitiesVersioning\">\n            <p>\n              <strong>Event: </strong>{{ version.event }} | <strong>Author: </strong><a *ngIf=\"version?.author\"\n                [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author | ifNameNullShowEmail }}</a>\n              | <strong>Created at: </strong>{{ version.created_at }}<br />\n              <strong>Object: </strong>{{ version.object | json }}\n            </p>\n            <hr />\n          </div>\n          <div *ngIf=\"opportunitiesVersioning?.length === 0\">\n            <pw-no-data [withImage]=\"true\" [message]=\"'Crm.OpportunitiesMessage.NoVersionsMessage' | transloco\">\n            </pw-no-data>\n          </div>\n        </ng-template>\n      </li>\n      <li [ngbNavItem]=\"3\">\n        <a ngbNavLink>Files</a>\n        <ng-template ngbNavContent>\n          <pw-smart-crm-company-files [contactId]=\"contactId\"\n            [accountId]=\"accountId\"\n            [opportunityId]=\"opportunitiesId\">\n          </pw-smart-crm-company-files>\n        </ng-template>\n      </li>\n    </ul>\n\n    <div [ngbNavOutlet]=\"nav\"></div>\n  </div>\n</div>\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'Upload File' | transloco }}</h3>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\n                  <input type=\"file\"\n                    ngFileSelect\n                    [options]=\"options\"\n                    (uploadOutput)=\"onUploadOutput($event)\"\n                    [uploadInput]=\"uploadInput\"\n                    multiple />\n                  browse\n                </label>\n                to upload.\n              </p>\n            </div>\n            <div class=\"upload-item\"\n              *ngFor=\"let f of files; let i = index\">\n              <div class=\"upload-item-content\">\n                <div class=\"filename\">\n                  <div class=\"filename-left\">\n                    <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                    <span>{{ f.name }}</span>\n                  </div>\n                </div>\n                <div class=\"progress-content\">\n                  <div class=\"progress\">\n                    <span class=\"bar\"\n                      [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                      [class.is-done]=\"f['uploaded']\"></span>\n                  </div>\n                </div>\n                <div class=\"progress-text-content\">\n                  <span class=\"progress-text\"\n                    [class.is-done]=\"f['uploaded']\">\n                    <span *ngIf=\"!f['uploaded']\">{{ f.progress?.data?.percentage - 1 }}%\n                    </span>\n                    <span *ngIf=\"f['uploaded']\">100 %</span>\n                    <span *ngIf=\"!f['uploaded']\">Uploading...</span>\n                    <span *ngIf=\"f['uploaded']\">Done</span>\n                  </span>\n                  <span class=\"speed-and-eta-text\"\n                    *ngIf=\"f.progress?.data?.percentage !== 0 && !f['uploaded']\">\n                    <span>{{ f.progress?.data?.speedHuman }} </span>\n                    <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.user-info .label{color:#777;font-size:14px;text-transform:capitalize}.user-info .user-value{border:0;border-bottom:1px solid rgb(119,119,119)}.user-info .user-value:focus{box-shadow:none}.user-info .user-value.is-invalid{border-color:#ff586b}.action-btn.active{color:#fff!important;background-color:var(--first)}.control-btns{display:none}.comment-field{border:0;border-bottom:1px solid rgb(242,242,242);color:#1769e1;display:none;font-size:15px;min-height:100px;padding:2px 5px!important}.comment-field:focus{border:1px solid rgb(23,105,225)!important;border-bottom:0;box-shadow:none}p{max-width:85%;white-space:pre-wrap}.show-controls .comment-field,.show-controls .control-btns{display:block}.show-controls p,.show-controls .edit-btn{display:none}select{appearance:none}textarea{resize:none}.clear-both{clear:both}.isDisabled input[type=text],.isDisabled select{pointer-events:none}.timeline-card.card{min-height:auto}@media (max-width: 768px){.completed-toggle{padding-top:10px}}.when-btn:focus{border:0;box-shadow:none}.no-actions{clear:both}.form-action-buttons{margin-bottom:14px;margin-top:15px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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: i6.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: i7.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i7.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i7.LazyImgDirective, selector: "img" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i11.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i12.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { 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: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i13.SmartCrmCompanyFilesComponent, selector: "pw-smart-crm-company-files", inputs: ["accountId", "contactId", "opportunityId"] }, { kind: "pipe", type: i4.JsonPipe, name: "json" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i14.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }, { kind: "pipe", type: i15.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('actionControls'),

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

@@ -11,8 +11,8 @@ import * as i2 from "@posiwise/common-services";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/forms";
 import * as i5 from "primeng/inputtext";
-import * as i6 from "@posiwise/directives";
-import * as i7 from "@ng-bootstrap/ng-bootstrap";
+import * as i6 from "@ng-bootstrap/ng-bootstrap";
+import * as i7 from "@posiwise/directives";
 import * as i8 from "angular-plotly.js";
 import * as i9 from "@angular/router";
 import * as i10 from "primeng/multiselect";
@@ -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", "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" }] }); }
+    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.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.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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,